/* ===============================
   OVERHAUL SNORKELLING EXPERIENCE
   MAIN CSS
================================ */


/* ROOT COLORS */

:root{

    --yellow:#f7ff18;
    --ash:#777777;
    --black:#111111;
    --white:#ffffff;

}



/* RESET */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:
    'Poppins',
    Arial,
    sans-serif;

    background:white;

    color:var(--ash);

}



a{

    text-decoration:none;
    color:inherit;

}



.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}









/* ===============================
HEADER
================================ */


.site-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:transparent;

}



.header-inner{

    height:95px;

    width:90%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.brand img{

    width:210px;

}



.desktop-nav{

    display:flex;

    align-items:center;

    gap:35px;

    color:white;

    font-size:16px;

}



.desktop-nav a:hover{

    color:var(--yellow);

}





/* Dropdown */

.nav-dropdown{

    position:relative;

}



.nav-trigger{

    background:none;

    border:none;

    color:white;

    font-size:16px;

    cursor:pointer;

}



.nav-trigger span{

    color:white;

}





.dropdown-menu{

    position:absolute;

    top:35px;

    left:0;

    background:white;

    width:220px;

    padding:20px;

    border-radius:12px;

    display:none;

}



.dropdown-menu a{

    display:block;

    padding:10px;

    color:#555;

}



.dropdown-menu a:hover{

    background:var(--yellow);

}



.nav-dropdown:hover .dropdown-menu{

    display:block;

}





/* MOBILE BUTTON */


.menu-toggle{

    display:none;

    background:none;

    border:none;

}



.menu-toggle span{

    display:block;

    width:30px;

    height:3px;

    background:white;

    margin:6px;

}









/* ===============================
MOBILE MENU
================================ */


.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:85%;

    height:100vh;

    background:white;

    z-index:1000;

    transition:.4s;

}



.mobile-menu.active{

    right:0;

}



.mobile-nav{

    padding:80px 30px;

}



.mobile-nav a,
.mobile-dropdown-trigger{

    display:block;

    width:100%;

    padding:15px 0;

    border:none;

    background:none;

    text-align:left;

    font-size:18px;

}



.mobile-submenu{

    display:none;

    padding-left:20px;

}



.mobile-submenu a{

    font-size:15px;

}









/* ===============================
HERO SECTION
================================ */


.hero-section,
.image-section{

    min-height:720px;

    background-image:var(--hero-image);

    background-size:cover;

    background-position:center;

    position:relative;

    display:flex;

    align-items:center;

}



.image-section{

    background-image:var(--section-image);

}



.image-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0.20);

}



.hero-content,
.section-content,
.cta-content{

    position:relative;

    z-index:2;

    color:white;

    width:90%;

    max-width:1200px;

    margin:auto;

}





.small-heading{

    color:var(--yellow);

    letter-spacing:2px;

    font-size:14px;

    margin-bottom:20px;

}



.small-heading.ash{

    color:var(--ash);

}




h1{

    font-size:75px;

    line-height:1.1;

    color:white;

}



h1 span,
h2 span{

    color:var(--yellow);

}



.hero-text{

    width:550px;

    margin:30px 0;

    font-size:20px;

}





.hero-buttons{

    display:flex;

    gap:20px;

}



.yellow-btn{

    background:var(--yellow);

    padding:15px 35px;

    border-radius:50px;

    color:#555;

    font-weight:600;

}



.outline-btn{

    border:1px solid white;

    padding:15px 35px;

    border-radius:50px;

    color:white;

}









/* ===============================
INTRO SECTION
================================ */


.intro-section{

    padding:100px 0;

    text-align:center;

}



h2{

    font-size:48px;

    color:#222;

    margin-bottom:30px;

}



.intro-text{

    max-width:900px;

    margin:20px auto;

    line-height:1.8;

    font-size:18px;

}









/* ===============================
CAROUSEL
================================ */


.carousel-wrapper{

    position:relative;

    margin-top:50px;

}



.carousel-track{

    display:flex;

    gap:30px;

    overflow:hidden;

}



.experience-card{

    min-width:350px;

    background:white;

    border-radius:20px;

    overflow:hidden;

}



.experience-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}



.card-content{

    padding:25px;

    color:#555;

}



.card-content span{

    color:var(--yellow);

    font-weight:bold;

}



.card-content h3{

    margin:15px 0;

    color:#222;

}



.carousel-arrow{

    position:absolute;

    top:45%;

    background:var(--yellow);

    border:none;

    width:45px;

    height:45px;

    border-radius:50%;

    font-size:25px;

    z-index:5;

}



.prev{

    left:-20px;

}



.next{

    right:-20px;

}



.carousel-dots{

    text-align:center;

    margin-top:30px;

}



.carousel-dots span{

    display:inline-block;

    height:10px;

    width:10px;

    background:var(--yellow);

    border-radius:50%;

    margin:5px;

}
/* ===============================
WHY SNORKELLING SECTION
================================ */


.why-section{

    padding:100px 0;

}



.centered{

    text-align:center;

}



.section-title{

    margin-bottom:50px;

}



.section-title p{

    line-height:1.8;

}



.feature-grid{

    display:grid;

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

    gap:25px;

}





.feature-box{

    background:white;

    padding:40px 25px;

    border-radius:20px;

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

    transition:.3s;

}



.feature-box:hover{

    transform:translateY(-10px);

}



.feature-number{

    width:45px;

    height:45px;

    border-radius:50%;

    background:var(--yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#555;

    font-weight:bold;

    margin-bottom:25px;

}



.feature-box h3{

    color:#222;

    font-size:22px;

    margin-bottom:15px;

}



.feature-box p{

    line-height:1.7;

}









/* ===============================
OVERHAUL WAY SECTION
================================ */


.overhaul-section{

    padding:110px 0;

    background:#f7f7f7;

}



.two-column{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.two-column p{

    line-height:1.9;

    margin-bottom:20px;

    font-size:17px;

}









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



.cta-section{

    text-align:center;

}



.cta-content{

    padding:100px 20px;

}



.cta-content h2{

    color:white;

    font-size:55px;

}



.cta-content p{

    color:white;

    max-width:750px;

    margin:20px auto 40px;

    line-height:1.8;

}









/* ===============================
FOOTER
================================ */


.site-footer{

    background:var(--yellow);

    padding:70px 0 20px;

}



.footer-container{

    text-align:center;

}



.footer-brand img{

    width:220px;

    margin-bottom:20px;

}



.footer-brand p{

    color:#555;

    margin-bottom:40px;

}






.footer-links{

    display:grid;

    grid-template-columns:repeat(2,200px);

    justify-content:center;

    gap:70px;

}



.footer-links div{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.footer-links h4{

    font-size:22px;

    color:#222;

    margin-bottom:10px;

}



.footer-links a{

    color:#555;

}



.footer-links a:hover{

    color:#000;

}







.footer-bottom{

    margin-top:50px;

    padding-top:20px;

    border-top:1px solid rgba(0,0,0,.2);

    display:flex;

    justify-content:space-between;

    color:#555;

}









/* ===============================
FLOATING BUTTONS
================================ */



.whatsapp-button,
.call-button{

    position:fixed;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999;

    font-weight:bold;

    color:#555;

}



.whatsapp-button{

    right:25px;

    background:var(--yellow);

}



.call-button{

    right:95px;

    background:white;

    border:2px solid var(--yellow);

}









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



@media(max-width:1024px){



.desktop-nav{

    display:none;

}



.menu-toggle{

    display:block;

}



.feature-grid{

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

}



.hero-content h1{

    font-size:60px;

}



}





@media(max-width:768px){



.header-inner{

    width:90%;

}



.brand img{

    width:170px;

}



.hero-section,
.image-section{

    min-height:650px;

}



.hero-content h1{

    font-size:45px;

}



.hero-text{

    width:100%;

    font-size:17px;

}



.hero-buttons{

    flex-direction:column;

    width:max-content;

}



h2{

    font-size:36px;

}





.carousel-track{

    overflow-x:auto;

}



.experience-card{

    min-width:290px;

}





.feature-grid{

    grid-template-columns:1fr;

}





.two-column{

    grid-template-columns:1fr;

    gap:30px;

}





.cta-content h2{

    font-size:38px;

}





.footer-links{

    grid-template-columns:1fr 1fr;

    gap:20px;

}





.footer-bottom{

    flex-direction:column;

    gap:15px;

}



.call-button{

    right:90px;

}



}








@media(max-width:480px){



.footer-links{

    grid-template-columns:1fr 1fr;

}



.whatsapp-button,
.call-button{

    width:50px;

    height:50px;

}



.call-button{

    right:85px;

}



}