/* =========================
   HERO SLIDER
========================= */
.hero-slider{
    height: 530px;
    position:relative;
    overflow:hidden;
}

.hero-images{
    display:flex;
    height:100%;
    width:max-content;
    animation:slideHero 12s infinite linear;
}

.hero-images img{
    width:100vw;
    object-fit:cover;
    flex-shrink:0;
}


.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,7,68,.65);
    z-index:1;
}

.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    text-align:center;
    color:white;
    width:90%;
}

.hero-content h1{
    font-family:var(--font-heading);
    font-size:var(--heading-xl);
}

.hero-content span{
    color:var(--accent);
}

@keyframes slideHero{

0%{
transform:translateX(0);
}

25%{
transform:translateX(0);
}

33%{
transform:translateX(-100vw);
}

58%{
transform:translateX(-100vw);
}

66%{
transform:translateX(-200vw);
}

91%{
transform:translateX(-200vw);
}

100%{
transform:translateX(-300vw);
}
}



.hero-buttons{


    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top: 40px;

}



.hero-buttons a{
    padding:15px 35px;
    border-radius:30px;
    background:var(--accent);
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}


.hero-buttons a:last-child{
    background:white;
    color:var(--primary);
}

.hero-buttons a:last-child:hover{
    background: var(--orange);
    color:var(--white);
}

.hero-buttons a:hover{
    background: var(--primary);
}


/* =========================
   ABOUT PREVIEW
========================= */

.home-about{
    padding:var(--section-padding);
    display:flex;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

.home-about-image{
    flex:1;
}

.home-about-image img{
    width:100%;
    border-radius:30px;
}

.home-about-text{
    flex:1;
}

.home-about-text h2{
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:var(--heading-lg);
    margin-bottom:25px;
}

.home-about-text p{
    line-height:1.8;
    font-size:var(--text-md);
    margin-bottom:30px;
}



.home-about-text a{
    display:inline-block;
    padding:14px 30px;
    background:var(--accent);
    color:white;
    font-weight: bold;
    text-decoration:none;
    border-radius:30px;
    transition: 0.3s;
}

.home-about-text a:hover{
    background:var(--orange);
}


/* =========================
 SERVICES
========================= */


.home-services{


    background:var(--light);

    padding:90px 10%;

    text-align:center;


}



.home-services h2,
.home-projects h2{


    font-family:var(--font-heading);

    color:var(--primary);

    font-size:var(--heading-lg);

    margin-bottom:45px;


}




.service-grid{


    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;


}




.service-grid div{


    width:300px;

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:0 12px 35px rgba(0,7,68,.12);

    transition:.3s;


}



.service-grid div:hover{


    transform:translateY(-10px);


}



.service-grid h3{


    font-family:var(--font-heading);

    color:var(--primary);

    margin:15px 0;


}


/* =========================
    OPPORTUNITIES
========================= */

.home-opportunities{
    padding:var(--section-padding);
    text-align:center;
}




.home-opportunities-grid{
    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
}

.home-opportunities-grid div{
    width:330px;
    border-radius:25px;
    overflow:hidden;
    background:white;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
    transition:.3s;
}


.home-opportunities{
    background:var(--white);
    padding:90px 10%;
    text-align:center;
    color: var(--text);
}

.home-opportunities h2{
    font-family:var(--font-heading);
    font-size:var(--heading-lg);
}

.home-opportunities p{
    font-size:var(--text-lg);
    
}


.home-opportunities-grid div:hover{
    transform:translateY(-10px);
}

.home-opportunities-grid img{
    width:100%;
    height:230px;
    object-fit:cover;
}

.home-opportunities-grid h3{
    padding:20px;
    font-family:var(--font-heading);
    color:var(--primary);
}


/* MOBILITY */


.mobility-section{


background:var(--white);

padding:80px 10%;

text-align:center;


}



.mobility-section h2{


font-family:var(--font-heading);

font-size:var(--heading-lg);

color:var(--primary);


}



.mobility-section p{


max-width:800px;

margin:20px auto 40px;


}





.mobility-cards{


display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;


}




.mobility-cards div{


width:280px;

background:white;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
padding:30px;

border-radius:20px;


}



.mobility-cards h3{


font-family:var(--font-heading);

color:var(--accent);


}

.mobility-section a{
    display:inline-block;
    padding:15px 35px;
    background:var(--accent);
    color:white;
    text-decoration:none;
    font-weight: bold;
    border-radius:30px;
    transition: 0.3s;
    margin: 25px 0px;
}

.mobility-section a:hover{
    background:var(--orange);
}



/* =========================
 IMPACT
========================= */


.home-impact{


    padding:80px 10%;

    display:flex;

    justify-content:center;

    gap:80px;

    flex-wrap:wrap;

    text-align:center;
    background-color: var(--light);


}




.home-impact h3{


    font-family:var(--font-heading);

    font-size:50px;

    color:var(--accent);


}




.home-impact p{


    font-size:18px;


}









/* =========================
 CTA
========================= */


.home-cta{


    padding:90px 10%;

    text-align:center;

    background:var(--white);


}




.home-cta h2{


    font-family:var(--font-heading);

    color:var(--primary);

    font-size:var(--heading-lg);

    margin-bottom:30px;


}




.home-cta a{
    display:inline-block;
    padding:15px 35px;
    background:var(--orange);
    color:white;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    transition: 0.3s;
}

.home-cta a:hover{
    background:var(--primary);
}




/* =========================
   HOME PAGE RESPONSIVE
========================= */


/* TABLET */
@media (max-width:1024px){


/* HERO */

.hero-slider{

    height:450px;

}


.hero-content h1{

    font-size:48px;

}



.hero-buttons{

    margin-top:30px;

}



.hero-buttons a{

    padding:13px 28px;

}





/* ABOUT */


.home-about{

    padding:70px 7%;

    gap:40px;

}



.home-about-text h2{

    font-size:36px;

}



.home-about-text p{

    font-size:16px;

}





/* SERVICES */


.home-services{

    padding:70px 7%;

}



.home-services h2,
.home-projects h2{

    font-size:36px;

}



.service-grid{

    gap:25px;

}



.service-grid div{

    width:280px;

}





/* OPPORTUNITIES */


.home-opportunities{

    padding:70px 7%;

}



.home-opportunities h2{

    font-size:36px;

}



.home-opportunities-grid{

    gap:25px;

}





/* MOBILITY */


.mobility-section{

    padding:70px 7%;

}



.mobility-section h2{

    font-size:36px;

}



.mobility-cards div{

    width:260px;

}





/* IMPACT */


.home-impact{

    padding:70px 7%;

    gap:50px;

}



.home-impact h3{

    font-size:42px;

}





/* CTA */


.home-cta{

    padding:70px 7%;

}



.home-cta h2{

    font-size:36px;

}



}








/* MOBILE */
@media(max-width:768px){



/* HERO */


.hero-slider{

    height:420px;

}



.hero-images img{

    object-fit:cover;

}



.hero-content{

    width:90%;

}



.hero-content h1{

    font-size:32px;

    line-height:1.3;

}



.hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:15px;

    margin-top:25px;

}



.hero-buttons a{

    width:220px;

    padding:12px 25px;

}





/* ABOUT */


.home-about{

    padding:60px 5%;

    flex-direction:column;

    gap:30px;

}



.home-about-image,
.home-about-text{

    flex:unset;

    width:100%;

}



.home-about-image img{

    border-radius:20px;

}



.home-about-text h2{

    font-size:30px;

}



.home-about-text p{

    font-size:15px;

}



.home-about-text a{

    padding:12px 25px;

}





/* SERVICES */


.home-services{

    padding:60px 5%;

}



.home-services h2,
.home-projects h2{

    font-size:30px;

    margin-bottom:35px;

}



.service-grid{

    flex-direction:column;

    align-items:center;

}



.service-grid div{

    width:100%;

    max-width:330px;

    padding:30px 20px;

}



.service-grid div:hover{

    transform:translateY(-6px);

}





/* OPPORTUNITIES */


.home-opportunities{

    padding:60px 5%;

}



.home-opportunities h2{

    font-size:30px;

}



.home-opportunities p{

    font-size:16px;

}



.home-opportunities-grid{

    flex-direction:column;

    align-items:center;

}



.home-opportunities-grid div{

    width:100%;

    max-width:330px;

}



.home-opportunities-grid img{

    height:200px;

}





/* MOBILITY */


.mobility-section{

    padding:60px 5%;

}



.mobility-section h2{

    font-size:30px;

}



.mobility-section p{

    font-size:15px;

}



.mobility-cards{

    flex-direction:column;

    align-items:center;

}



.mobility-cards div{

    width:100%;

    max-width:300px;

}



.mobility-section a{

    padding:13px 30px;

}





/* IMPACT */


.home-impact{

    padding:60px 5%;

    flex-direction:column;

    gap:35px;

}



.home-impact h3{

    font-size:38px;

}



.home-impact p{

    font-size:16px;

}





/* CTA */


.home-cta{

    padding:60px 5%;

}



.home-cta h2{

    font-size:30px;

}



.home-cta a{

    padding:13px 30px;

}



}







/* SMALL MOBILE */
@media(max-width:480px){



.hero-slider{

    height:380px;

}



.hero-content h1{

    font-size:28px;

}



.hero-buttons a{

    width:200px;

}



.home-about-text h2,
.home-services h2,
.home-projects h2,
.home-opportunities h2,
.mobility-section h2,
.home-cta h2{

    font-size:26px;

}



.home-impact h3{

    font-size:34px;

}



}