body{
height: 100vh;
padding: 0;
margin: 0;
color:white

}

section{
background: linear-gradient(20deg, #0f1c2e, #103161);  
position: relative;
height: 100vh;

}

h1{
font-family: 'Poppins', sans-serif;
color:rgb(255, 255, 255) ;
font-size: 50px;
margin-top: 50px;
padding-left: 100px;
font-weight: 100;
position: absolute;
}


.title{
font-family: 'Poppins', sans-serif;
color:rgb(255, 255, 255) ;
font-size: 169px;
white-space: nowrap;
width: 10%;
padding-top: 5rem;
}

.subtitle{
font-family: 'Poppins', sans-serif;
color:rgb(255, 255, 255) ;
font-size: 25px;
margin-top: 0px;
padding-left: 6%;
font-weight: 200;
position: absolute;
}

.menu{
text-transform: capitalize;
margin-right: 2rem;
white-space: nowrap;
margin-top: 1vh;
float: right;
}

.menuItem{
color:rgb(247, 247, 247);
font-family: 'Poppins', sans-serif;
font-size: larger;
white-space: nowrap;
text-decoration: none;
margin: 1rem;
border-radius: 10rem;
padding: 1rem;
background: solid, white;


}

.menuItem {
font-family: 'Poppins', sans-serif;
font-size: 24px;
color: #ffffff;
position: relative;
display: inline-block;
text-decoration: none;
transition: color 0.3s ease-in-out;
}


.menuItem:hover {
color: #ffffff; 
}


.menuItem::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #ffffff; 
visibility: hidden;
transform: scaleX(0);
transition: all 0.2s ease-in-out;
}

.menuItem:hover::before {
visibility: visible;
transform: scaleX(1);
}

.custom-shape-divider-bottom-1706273810 {
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
overflow: none;
line-height: 0;
transform: rotate(180deg);
}

.custom-shape-divider-bottom-1706273810 svg {
position: absolute;
display: block;
width: 169%;
height: 40px;
transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1706273810 .shape-fill {
fill: #ffffff;
}

p{
font-family: 'Poppins', sans-serif;
color:rgb(255, 255, 255) ;
font-size: 16px;
margin-top: 0px;
padding-left: 0%;
font-weight: 200;
position: relative;
}

footer{
text-align: center;
font-family: 'Poppins', sans-serif;
color:rgb(0, 0, 0) ;
font-size: 25px;
padding-top: 5vh;

}

li{
position: absolute;
overflow-wrap: break-word;
}

.name{
padding: 0%;
padding-left: 2rem;
margin-top: 0;
font-family: 'Poppins', sans-serif;
color:rgb(255, 255, 255) ;
font-size: 50px;
white-space: nowrap;
width: 10%;
padding-top: 2rem;
text-decoration: none;
}

.calculator-container {
display: flex;
gap: 50px;
font-family: 'Poppins', sans-serif;
}

.input-panel {
margin-top: 8rem;
flex: 1;
background: linear-gradient(20deg, #3030302f, #b1b4b850);  
padding: 25px;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
margin-left: 100px;
max-width: 25rem;
box-sizing: border-box;
}

.results-panel {
margin-top: 8rem;
flex: 1;
background: linear-gradient(20deg, #3030302f, #b1b4b850);
padding: 25px;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-size: 1rem !important;
max-width: 80rem;
box-sizing: border-box;

}


.input-group {
margin-bottom: 15px;
font-family: 'Poppins', sans-serif;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="number"] {
width: 95%;
padding: 8px;
border: 5px solid #ddd;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.8);
color: #1e2a3a;
font-family: 'Poppins', sans-serif;
}

.results {
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}

.chart-container {
height: 300px;
max-width: 100%;
width: 100%;
}

.checkbox{
    width: 25px;
    height: 25px;
}