/*==================================================
RESPONSIVE.CSS
PART 1
==================================================*/


/*==================================================
Large Desktop (≤1200px)
==================================================*/

@media (max-width:1200px){

    :root{

        --container:1100px;

    }

    h1{

        font-size:56px;

    }

    h2{

        font-size:38px;

    }

    .hero-content{

        max-width:650px;

    }

    .package-grid{

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

    }

}



/*==================================================
Laptop (≤1024px)
==================================================*/

@media (max-width:1024px){

    section{

        padding:80px 0;

    }

    .statistics-grid{

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

        gap:20px;

    }

    .feature-grid{

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

    }

    .marine-grid{

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

    }

    .equipment-grid{

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

    }

    .gallery-grid{

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

    }

    .footer-grid{

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

    }

}



/*==================================================
Tablet Landscape (≤992px)
==================================================*/

@media (max-width:992px){

    h1{

        font-size:48px;

    }

    h2{

        font-size:34px;

    }

    .hero-page{

        height:90vh;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content p{

        font-size:17px;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-image{

        order:1;

    }

    .about-content{

        order:2;

    }

    .package-grid{

        grid-template-columns:1fr;

    }

    .package-card.featured{

        transform:none;

    }

}



/*==================================================
Responsive Navigation
==================================================*/

@media (max-width:992px){

    .mobile-toggle{

        display:block;

        z-index:1001;

    }

    .btn-book{

        display:none;

    }

    .navbar{

        position:fixed;

        top:0;

        right:-100%;

        width:300px;

        height:100vh;

        background:#ffffff;

        box-shadow:-5px 0 20px rgba(0,0,0,.12);

        transition:.35s ease;

        display:flex;

        align-items:center;

        justify-content:center;

        z-index:1000;

    }

    .navbar.active{

        right:0;

    }

    .navbar ul{

        flex-direction:column;

        gap:28px;

        width:100%;

        text-align:center;

    }

    .navbar ul li{

        width:100%;

    }

    .navbar ul li a{

        display:block;

        width:100%;

        padding:12px 20px;

        color:var(--secondary);

        font-size:18px;

        font-weight:600;

    }

    .navbar ul li a:hover{

        background:var(--gray-100);

        color:var(--primary);

    }

}



/*==================================================
Overlay Mobile Menu
==================================================*/

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==================================================
Tablet (≤768px)
==================================================*/

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .container{

        width:94%;

    }

    h1{

        font-size:40px;

        line-height:1.2;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:15px;

    }

}


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

@media (max-width:768px){

    .hero-page{

        height:85vh;

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

        font-size:16px;

    }

    .hero-buttons{

        justify-content:center;

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons .btn-primary,

    .hero-buttons .btn-secondary{

        width:250px;

    }

}


/*==================================================
STATISTICS
==================================================*/

@media (max-width:768px){

    .statistics-grid{

        grid-template-columns:1fr 1fr;

        gap:18px;

    }

    .stat-card{

        padding:25px;

    }

    .stat-card h2{

        font-size:38px;

    }

}


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

@media (max-width:768px){

    .about-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .about-content{

        text-align:center;

    }

    .about-list{

        text-align:left;

        margin:auto;

        max-width:420px;

    }

}


/*==================================================
WHY CHOOSE US
==================================================*/

@media (max-width:768px){

    .feature-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .feature-card{

        padding:30px;

    }

}


/*==================================================
DIVE SITES
==================================================*/

@media (max-width:768px){

    .site-grid{

        grid-template-columns:1fr;

    }

    .site-card img{

        height:240px;

    }

}


/*==================================================
MARINE LIFE
==================================================*/

@media (max-width:768px){

    .marine-grid{

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

    }

}


/*==================================================
PACKAGES
==================================================*/

@media (max-width:768px){

    .package-grid{

        grid-template-columns:1fr;

    }

    .package-card{

        padding:35px 30px;

    }

    .package-card.featured{

        transform:none;

    }

}


/*==================================================
EQUIPMENT
==================================================*/

@media (max-width:768px){

    .equipment-grid{

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

    }

}


/*==================================================
GALLERY
==================================================*/

@media (max-width:768px){

    .gallery-grid{

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

        gap:15px;

    }

    .gallery-grid img{

        height:220px;

    }

}

/*==================================================
Mobile (≤576px)
==================================================*/

@media (max-width:576px){

    section{

        padding:60px 0;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:20px;

    }

    p{

        font-size:15px;

    }

    .section-title{

        margin-bottom:40px;

    }

}



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

@media (max-width:576px){

    .logo img{

        height:52px;

    }

    .navbar{

        width:100%;

    }

}



/*==================================================
STATISTICS
==================================================*/

@media (max-width:576px){

    .statistics-grid{

        grid-template-columns:1fr;

    }

}



/*==================================================
MARINE LIFE
==================================================*/

@media (max-width:576px){

    .marine-grid{

        grid-template-columns:1fr;

    }

}



/*==================================================
EQUIPMENT
==================================================*/

@media (max-width:576px){

    .equipment-grid{

        grid-template-columns:1fr;

    }

}



/*==================================================
TIMELINE
==================================================*/

@media (max-width:576px){

    .timeline::before{

        left:18px;

    }

    .timeline-item{

        width:100%;

        left:0 !important;

        text-align:left;

        padding:20px 20px 20px 55px;

    }

    .timeline-item::before{

        left:10px !important;

        right:auto;

    }

}



/*==================================================
GALLERY
==================================================*/

@media (max-width:576px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid img{

        height:240px;

    }

}



/*==================================================
TESTIMONIAL
==================================================*/

@media (max-width:576px){

    .testimonial-grid{

        grid-template-columns:1fr;

    }

}



/*==================================================
FAQ
==================================================*/

@media (max-width:576px){

    .faq-question{

        padding:18px 20px;

        font-size:16px;

    }

    .faq-answer p{

        padding:0 20px 20px;

    }

}



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

@media (max-width:576px){

    .booking h2{

        font-size:32px;

    }

    .booking p{

        font-size:16px;

    }

}



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

@media (max-width:576px){

    .footer{

        text-align:center;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-logo{

        margin:auto auto 20px;

    }

    .social{

        justify-content:center;

    }

}



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

@media (max-width:576px){

    .btn-primary,

    .btn-secondary,

    .btn-book{

        width:100%;

        justify-content:center;

    }

}



/*==================================================
BACK TO TOP
==================================================*/

@media (max-width:576px){

    .back-to-top{

        width:48px;

        height:48px;

        right:18px;

        bottom:18px;

        font-size:18px;

    }

}



/*==================================================
SMALL MOBILE (≤400px)
==================================================*/

@media (max-width:400px){

    h1{

        font-size:30px;

    }

    h2{

        font-size:24px;

    }

    .hero-page{

        height:80vh;

    }

    .hero-content p{

        font-size:14px;

    }

    .btn-primary,

    .btn-secondary{

        padding:14px 20px;

        font-size:14px;

    }

    .package-card{

        padding:28px 22px;

    }

    .stat-card{

        padding:20px;

    }

    .feature-card{

        padding:24px;

    }

}



/*==================================================
LANDSCAPE PHONE
==================================================*/

@media (max-height:500px) and (orientation:landscape){

    .hero-page{

        height:auto;

        padding:120px 0 80px;

    }

}



/*==================================================
REDUCE MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



/*==================================================
END OF RESPONSIVE.CSS
==================================================*/