/*=========================================
      SOLAR CALCULATOR PAGE
=========================================*/

body{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
    background:#08121f;
    color:#fff;
}

/*==========================
CALCULATOR HERO
==========================*/

.calc-hero{

    height:50vh;

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

    text-align:center;

    background:
    linear-gradient(rgba(5,10,20,.75),rgba(5,10,20,.85)),
    url("../images/project1.jpg");

    background-size:cover;
    background-position:center;

}

.calc-hero h4{

    color:#00ff88;

    letter-spacing:5px;

    margin-bottom:20px;

}

.calc-hero h1{

    font-family:'Orbitron',sans-serif;

    font-size:65px;

    color:white;

    text-shadow:
    0 0 15px #00ff88,
    0 0 35px #00ff88;

}

.calc-hero p{

    margin-top:20px;

    color:#ddd;

    font-size:20px;

}


/*==========================
MAIN SECTION
==========================*/

.calculator{

    padding:80px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*==========================
GLASS CARD
==========================*/

.glass-card{

    width:700px;

    max-width:95%;

    padding:50px;

    border-radius:25px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
    0 0 25px rgba(0,255,150,.15);

}

.glass-card h2{

    text-align:center;

    font-size:40px;

    margin-bottom:35px;

    font-family:'Orbitron';

    color:#00ff88;

}


/*==========================
INPUTS
==========================*/

.glass-card input,
.glass-card select{

    width:100%;

    padding:18px;

    margin-bottom:22px;

    border:none;

    outline:none;

    border-radius:15px;

    background:#0d2032;

    color:white;

    font-size:17px;

    transition:.4s;

}

.glass-card input:focus,
.glass-card select:focus{

    box-shadow:
    0 0 15px #00ff88;

}


/*==========================
BUTTON
==========================*/

.glass-card button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#00ff88;

    color:black;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.4s;

}

.glass-card button:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 20px #00ff88,
    0 0 50px #00ff88;

}


/*==========================
RESULT
==========================*/

#result{

    margin-top:40px;

    padding:30px;

    border-radius:20px;

    background:#10263a;

    display:none;

}

#result h3{

    color:#00ff88;

    margin-bottom:20px;

}

.result-row{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.result-row:last-child{

    border:none;

}

.result-value{

    color:#00ff88;

    font-weight:bold;

}


/*==========================
GLOW ANIMATION
==========================*/

.glass-card{

    animation:cardGlow 3s infinite alternate;

}

@keyframes cardGlow{

from{

box-shadow:
0 0 15px rgba(0,255,150,.15);

}

to{

box-shadow:
0 0 35px rgba(0,255,150,.35);

}

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:768px){

.calc-hero h1{

font-size:42px;

}

.calc-hero p{

font-size:16px;

padding:0 15px;

}

.glass-card{

padding:30px 20px;

}

.glass-card h2{

font-size:28px;

}

.result-row{

flex-direction:column;

gap:6px;

}

}
.solar-report{

margin-top:40px;
padding:30px;

background:#132034;

border-radius:20px;

box-shadow:0 0 30px rgba(0,255,150,.25);

animation:fade .5s;
}

.solar-report h2{

text-align:center;
color:#00ff88;

margin-bottom:25px;
}

.solar-report table{

width:100%;
border-collapse:collapse;

font-size:18px;
}

.solar-report td{

padding:15px;

border-bottom:1px solid rgba(255,255,255,.1);
}

.solar-report tr:hover{

background:rgba(0,255,150,.08);
}

@keyframes fade{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}