*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Plus Jakarta Sans", sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#FFF9F1;

    color:#222;

}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

button{
    cursor:pointer;
    transition:.3s;
}

button:hover{
    transform:translateY(-3px);
}

nav{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 83px;

    background:#FFF9F1;

    border-bottom:1px solid #eee;

    position:sticky;

    top:0;

    z-index:999;

}


#logo{
    height:45px;
    width:auto;
}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav ul li a{

    font-size:24px;

    transition:.3s;

}

nav ul li a:hover{

    color:#f7a11f;

}

#quoteBtn{

    background:linear-gradient(180deg,#fdc047,#f7a62e);

    color:white;

    border:none;

    padding:16px 34px;

    border-radius:40px;

    font-weight:700;

    box-shadow:0 12px 25px rgba(247,161,31,.35);

}

#quoteBtn:hover{

    box-shadow:0 12px 24px rgba(247,161,31,.30);

}

section{
    padding:90px 80px;
}

.sectionTag{

    color:#f7a11f;

    font-weight:bold;

    letter-spacing:1px;

    margin-bottom:15px;

}

section h2{

    font-size:46px;

    font-weight:700;

    line-height:1.2;

}

section p{

    color:#5D6673;

    font-size:17px;

    line-height:1.9;

}

#hero{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

#heroText{

    flex:1;

}

#smallText{

    color:#f7a11f;

    font-weight:bold;

    letter-spacing:1px;

    margin-bottom:20px;

}

#hero h1{

    font-size:68px;

font-weight:800;
    line-height:1.15;

    margin-bottom:30px;

}

#description{

    font-size:18px;

    max-width:650px;

    margin-bottom:35px;

}

.heroButtons{

    display:flex;

    gap:18px;

    margin-top:35px;

}

#heroBtn{

    background:linear-gradient(180deg,#FDBB39,#F7A11F);

    color:white;

    border:none;

    padding:16px 34px;

    border-radius:40px;

    font-weight:700;

    box-shadow:0 12px 25px rgba(247,161,31,.35);

}

#heroBtn:hover{

    box-shadow:0 15px 30px rgba(247,161,31,.30);

}

.secondaryBtn{

    background:white;

    border:2px solid #f7a11f;

    color:#f7a11f;

    padding:16px 32px;

    border-radius:35px;

    font-size:16px;

    font-weight:bold;

}

.secondaryBtn:hover{

    background:#f7a11f;

    color:white;

}

#heroImage{

    width:500px;

    height:420px;

    background:#F7F4EE;

    border-radius:24px;

    overflow:hidden;

}

#whySolar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

.solarLeft{

    flex:1;

}

.solarLeft p{

    max-width:600px;

}

.solarRight{

    width:450px;

    height:330px;

    border-radius:25px;

    background:#f4f4f4;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

    font-size:20px;

}
#whyMitray{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

.mitrayImage{

    flex:1;

    height:430px;

    background:#F5F1E8;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

    font-size:22px;

    overflow:hidden;

}
.mitrayFeatures{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:35px;

}

.miniFeature{

    display:flex;

    gap:15px;

    align-items:flex-start;

    background:white;

    padding:18px;

    border-radius:18px;

    border:1px solid #F2E5CF;

}

.miniFeature span{

    font-size:26px;

}

.miniFeature h4{

    margin-bottom:6px;

    color:#222;

}

.miniFeature p{

    font-size:15px;

    color:#666;

}
.mitrayText{

    flex:1;
    padding-left: 40px;

}
.mitrayText p{

    font-size:18px;

    line-height:1.8;

}
.mitrayText h2{

    margin:15px 0 25px;

}

.mitrayList{

    margin-top:30px;

    list-style:none;

}

.mitrayList li{

    margin-bottom:18px;

    font-size:18px;

}
/* == WHY CHOOSE MITRAY == */

.features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:40px;

}

.featureCard{

    background:white;

    border:1px solid #eee;

    border-radius:20px;

    padding:35px;

    transition:.3s;

}

.featureCard:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.featureCard h3{

    margin-bottom:15px;

    font-size:22px;

}

.featureCard p{

    color:#666;

}

.serviceGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:40px;

}

.serviceCard{

    background:white;

    border:1px solid #eee;

    border-radius:20px;

    padding:35px;

    transition:.3s;

}

.serviceCard:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.serviceCard h3{

    margin-bottom:15px;

    font-size:22px;

}

.serviceCard p{

    color:#666;

}

#calculatorCTA{

    background:#fafafa;

    border-radius:30px;

    text-align:center;

    padding:80px;

    margin:80px;

}

#calculatorCTA h2{

    margin-bottom:20px;

}

#calculatorCTA p{

    max-width:650px;

    margin:0 auto 35px;

}

#calculatorCTA button{

    background:#f7a11f;

    color:white;

    border:none;

    padding:16px 34px;

    border-radius:35px;

    font-weight:bold;

}

#calculatorCTA button:hover{

    box-shadow:0 12px 24px rgba(247,161,31,.30);

}

.projectGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:40px;

}

.projectCard{

    transition:.3s;

}

.projectCard:hover{

    transform:translateY(-8px);

}

.projectImage{

    height:240px;

    background:#ececec;

    border-radius:20px;

    margin-bottom:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

}

.projectCard h3{

    margin-bottom:10px;

}
#finalCTA{

    background:linear-gradient(135deg,#faab34ea,#e4ad55);

    border-radius:30px;

    text-align:center;

    padding:60px;

    margin:70px;
    color:white;
width: auto;
}

#finalCTA .sectionTag{

    color:white;

}

#finalCTA h2{

    color:white;

    margin-bottom:20px;

}

#finalCTA p{

    color:#fff8ea;

    max-width:650px;

    margin:0 auto 35px;

}

#finalCTA button{

    background:white;

    color:#f7a11f;

    border:none;

    padding:16px 34px;

    border-radius:35px;

    font-weight:bold;

    font-size:16px;

}

#finalCTA button:hover{

    transform:translateY(-4px);

}

footer{

    background:#1f1f1f;

    color:white;

    padding:60px 20px;

}

.footerContent{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.footerContent h3{

    margin-bottom:20px;

    font-size:30px;

}

.footerContent p{

    color:#cccccc;

    margin:10px 0;

}

/* == MOBILE == */

@media (max-width:900px){

nav{

    flex-direction:column;

    height:auto;

    padding:20px;

    gap:20px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

#hero,
#whySolar{

    flex-direction:column;

    text-align:center;

}

#heroText{

    width:100%;

}

#hero h1{

    font-size:42px;

}

.heroButtons{

    justify-content:center;

    flex-wrap:wrap;

}

#heroImage,
.solarRight{

    width:100%;

    max-width:450px;

    height:280px;

}

.features{

    grid-template-columns:1fr;

}

.serviceGrid{

    grid-template-columns:1fr;

}

.projectGrid{

    grid-template-columns:1fr;

}

section{

    padding:60px 25px;

}

#calculatorCTA{

    margin:30px 20px;

    padding:50px 25px;

}

#finalCTA{

    margin:30px 20px;

    padding:50px 25px;

}

}