body{
background:linear-gradient(180deg,#c7d7ea,#9fb6d2);
font-family:Arial;
margin:0;
}


/* NAVBAR */

.navbar{
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
position:fixed;
width:100%;
top:0;
left: 0;
z-index: 1000; /* High number ensures it stays on top of content */
}

.nav-container{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
padding:15px;
}

.logo{
font-size:20px;
font-weight:bold;
color:#2563eb;
}

nav a{
margin-left:20px;
text-decoration:none;
color:#333;
font-weight:500;
}


/* PAGE */

.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 80px;
}


/* CENTER */

.calculator-wrapper{
display:flex;
justify-content:center;
width: 100%;
padding: 0 20px;}


/* FUTURISTIC GLASS CARD */

/* .glass-card{

width:900px;
width: 100%;
max-width: 900px;
padding:45px;

border-radius:18px;

background:rgba(10,25,45,0.65);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,0.15);

box-shadow:
0 10px 40px rgba(0,0,0,0.3),
0 0 20px rgba(0,170,255,0.25);

} */

/* Update your style.css to remove positioning hacks */
.glass-card {
    /* REMOVE margin-top: 80px or similar */
    width: 100%;
    max-width: 900px; /* Adjust based on your screenshot width */
    background: #3d4b5c; /* Based on your image */
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    /* No need for margins, the layout.html handles it now */
}
/* TITLE */

.title{
text-align:center;
color:white;
margin-bottom:35px;
font-weight:600;
letter-spacing:1px;
}


/* GRID */

.calculator-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:45px;
align-items:center;
}


/* FIELD */

.field{
margin-bottom:28px;
}

.field label{
display:block;
margin-bottom:8px;
color:#b9d8ff;
font-size:14px;
}


/* INPUT */

.field input{

width:100%;
padding:12px;

border-radius:8px;

border:1px solid rgba(255,255,255,0.2);

background:rgba(255,255,255,0.05);

color:white;

font-size:15px;

outline:none;

transition:0.25s;

}

.field input:focus{

border-color:#00d0ff;

box-shadow:0 0 10px rgba(0,210,255,0.6);

}


/* QUICK BUTTONS */

.quick-buttons{
margin-top:8px;
display:flex;
gap:8px;
flex-wrap:wrap;
}

.quick-buttons button{

background:rgba(255,255,255,0.06);

border:1px solid rgba(255,255,255,0.2);

color:#d8f4ff;

padding:6px 12px;

border-radius:6px;

cursor:pointer;

font-size:13px;

transition:0.25s;

}

.quick-buttons button:hover{

background:#00c8ff;

color:#001a24;

box-shadow:0 0 12px #00d0ff;

}


/* RESULT SIDE */

.result-visual{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}


/* FUTURISTIC CIRCLE */

.circle{

width:220px;
height:220px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:radial-gradient(circle at center,#051829,#020a15);

border:2px solid rgba(0,210,255,0.5);

box-shadow:
0 0 25px rgba(0,210,255,0.7),
inset 0 0 35px rgba(0,210,255,0.3);

}


/* CIRCLE TEXT */

.circle-inner{
text-align:center;
color:white;
}

.circle-label{
font-size:14px;
opacity:0.8;
margin-bottom:6px;
}

.circle-inner h2{
font-size:26px;
color:#00e1ff;
}


/* NUMBERS */

.numbers{
text-align:center;
color:#cceaff;
font-size:14px;
}

.numbers span{
color:#00e1ff;
font-weight:600;
margin-left:8px;
}


/* INVESTED BOX */

.invested-box{
text-align:center;
margin-bottom:15px;
}

.invested-box p{
font-size:13px;
color:#b9d8ff;
margin:0;
}

.invested-box h3{
margin:4px 0 0 0;
color:#00e1ff;
font-size:18px;
}


/* RETURNS BOX */

.returns-box{
text-align:center;
margin-top:15px;
}

.returns-box p{
font-size:13px;
color:#b9d8ff;
margin:0;
}

.returns-box h3{
margin:4px 0 0 0;
color:#00e1ff;
font-size:18px;
}

html {
    scroll-behavior: smooth;
}