/* ======================================================
TABLET & SMALL DESKTOP
1200px
====================================================== */

@media (max-width:1200px){

    .section{

        padding:110px 0;

    }

    .hero h1{

        font-size:72px;

        line-height:1.05;

    }

    .hero-content{

        max-width:620px;

    }

    .footer-grid{

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

        gap:60px;

    }

}

/* ======================================================
TABLET
992px
====================================================== */

@media (max-width:992px){

    .section{

        padding:90px 0;

    }

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

    .header-wrapper{

        grid-template-columns:auto 1fr auto;

        align-items:center;

    }

    .header-left{

        display:none;

    }

    .header-center{

        justify-self:center;

    }

    .header-right{

        justify-self:end;

        gap:18px;

    }

    .book-button{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

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

    .mobile-menu{

        position:fixed;

        top:0;

        right:-100%;

        width:340px;

        max-width:90vw;

        height:100vh;

        background:#081C2C;

        padding:120px 42px 50px;

        transition:right .35s ease;

        z-index:99999;

        display:block;

        overflow-y:auto;

    }

    .mobile-menu.active{

        right:0;

    }

    .mobile-nav{

        display:flex;

        flex-direction:column;

        gap:26px;

        margin:0;

        padding:0;

        list-style:none;

    }

    .mobile-nav a{

        color:#fff;

        font-size:17px;

        letter-spacing:2px;

        text-transform:uppercase;

        text-decoration:none;

        transition:.30s;

    }

    .mobile-nav a:hover{

        color:#C6A56A;

    }

    .mobile-menu .hero-button{

        margin-top:45px;

        width:100%;

    }

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

    .hero{

        min-height:100vh;

    }

    .hero-content{

        max-width:100%;

        padding-top:120px;

    }

    .hero h1{

        font-size:60px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    /* ==========================
       CONTENT
    ========================== */

    .about-grid,
    .boat-grid,
    .location-grid,
    .captain-grid,
    .contact-grid,
    .experience{

        grid-template-columns:1fr;

        gap:60px;

    }

    .experience.reverse{

        direction:ltr;

    }

    .about-image img,
    .boat-image img,
    .captain-image img,
    .experience-image img{

        height:460px;

    }

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

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item,
    .gallery-item.large,
    .gallery-item.wide{

        grid-column:auto;

        grid-row:auto;

    }

    .gallery-item img{

        height:380px;

    }

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

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}

/* ======================================================
MOBILE LARGE
768px
====================================================== */

@media (max-width:768px){

    body{

        font-size:15px;

    }

    .section{

        padding:80px 0;

    }

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

    .site-header{

        padding:20px 0;

    }

    .header-wrapper{

        grid-template-columns:auto 1fr auto;

        column-gap:16px;

    }

    .header-right{

        gap:14px;

    }

    .custom-logo{

        height:58px;

    }

    .site-header.scrolled .custom-logo{

        height:54px;

    }

    .language-current span{

        display:none;

    }

    .language-current{

        gap:6px;

    }

    .language-current img{

        width:20px;

        height:20px;

    }

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

    .hero{

        height:100svh;

        min-height:100svh;

    }

    .hero-content{

        justify-content:center;

        max-width:100%;

        padding-top:90px;

        padding-bottom:70px;

    }

    .hero-small{

        font-size:11px;

        letter-spacing:3px;

        margin-bottom:18px;

    }

    .hero h1{

        font-size:48px;

        line-height:1.08;

        margin-bottom:22px;

    }

    .hero p{

        font-size:17px;

        line-height:1.75;

        max-width:100%;

        margin-bottom:34px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

        width:100%;

    }

    .hero-buttons .book-button{

        width:100%;

        justify-content:center;

        height:54px;

    }

    .hero-link{

        font-size:12px;

    }

    .scroll-indicator{

        display:none;

    }

    /* ==========================
       TITLES
    ========================== */

    h2{

        font-size:42px;

        line-height:1.15;

    }

    h3{

        font-size:28px;

    }

    /* ==========================
       TEXT
    ========================== */

    .about p,
    .boat p,
    .location p,
    .captain p,
    .contact p{

        font-size:16px;

        line-height:1.8;

    }

    /* ==========================
       IMAGES
    ========================== */

    .about-image img,
    .boat-image img,
    .captain-image img,
    .experience-image img{

        height:360px;

    }

    .gallery-item img{

        height:300px;

    }

    .location-map{

        height:360px;

    }

    /* ==========================
       CONTACT
    ========================== */

    .contact-card{

        padding:36px 30px;

    }

}

/* ======================================================
SMARTPHONE
480px
====================================================== */

@media (max-width:480px){

    .container{

        width:min(92%,1280px);

    }

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

    .site-header{

        padding:16px 0;

    }

    .header-wrapper{

        column-gap:12px;

    }

    .custom-logo{

        height:50px;

    }

    .site-header.scrolled .custom-logo{

        height:48px;

    }

    .header-right{

        gap:12px;

    }

    .language-current img{

        width:18px;

        height:18px;

    }

    .language-arrow{

        width:10px;

        height:10px;

    }

    .language-list{

        min-width:160px;

    }

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

    .hero{

        min-height:100svh;

    }

    .hero-content{

        padding-top:86px;

        padding-bottom:50px;

    }

    .hero-small{

        font-size:10px;

        letter-spacing:3px;

        margin-bottom:16px;

    }

    .hero h1{

        font-size:40px;

        line-height:1.08;

        margin-bottom:18px;

    }

    .hero p{

        font-size:15px;

        line-height:1.65;

        margin-bottom:28px;

    }

    .hero-buttons{

        width:100%;

    }

    .hero-buttons .book-button{

        width:100%;

        height:52px;

        font-size:12px;

    }

    .hero-link{

        font-size:11px;

        letter-spacing:2px;

    }

    /* ==========================
       SECTIONS
    ========================== */

    .section{

        padding:70px 0;

    }

    h2{

        font-size:34px;

        line-height:1.15;

    }

    h3{

        font-size:24px;

    }

    /* ==========================
       IMAGES
    ========================== */

    .about-image img,
    .boat-image img,
    .captain-image img,
    .experience-image img{

        height:280px;

        border-radius:18px;

    }

    .gallery-item img{

        height:240px;

        border-radius:16px;

    }

    .location-map{

        height:300px;

        border-radius:18px;

    }

    /* ==========================
       CONTACT
    ========================== */

    .contact-card{

        padding:28px 22px;

        border-radius:20px;

    }

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

    .mobile-menu{

        width:100%;

        max-width:100%;

        padding:110px 30px 40px;

    }

    .mobile-nav{

        gap:22px;

    }

    .mobile-nav a{

        font-size:16px;

    }

}

/* ======================================================
SMALL SMARTPHONES
390px
====================================================== */

@media (max-width:390px){

    .container{

        width:94%;

    }

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

    .site-header{

        padding:14px 0;

    }

    .custom-logo{

        height:46px;

    }

    .site-header.scrolled .custom-logo{

        height:44px;

    }

    .header-right{

        gap:10px;

    }

    .language-current img{

        width:17px;

        height:17px;

    }

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

    .hero-content{

        padding-top:82px;

        padding-bottom:40px;

    }

    .hero-small{

        font-size:10px;

        letter-spacing:2px;

    }

    .hero h1{

        font-size:34px;

        line-height:1.08;

        margin-bottom:16px;

    }

    .hero p{

        font-size:14px;

        line-height:1.65;

        margin-bottom:24px;

    }

    .hero-buttons{

        gap:14px;

    }

    .hero-buttons .book-button{

        height:50px;

        font-size:11px;

        letter-spacing:1.5px;

    }

    .hero-link{

        font-size:11px;

    }

    /* ==========================
       TITLES
    ========================== */

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    /* ==========================
       IMAGES
    ========================== */

    .about-image img,
    .boat-image img,
    .captain-image img,
    .experience-image img{

        height:240px;

    }

    .gallery-item img{

        height:220px;

    }

    .location-map{

        height:260px;

    }

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

    .mobile-menu{

        padding:100px 24px 36px;

    }

    .mobile-nav a{

        font-size:15px;

        letter-spacing:1.5px;

    }

}