/* ===== variables.css ===== */
:root{
  --navy:#071b49; --blue:#0c4f9e; --sky:#1da9d5; --teal:#10a6a0; --green:#83c63a; --lime:#b4d93c;
  --ink:#0a1b3d; --muted:#68748a; --soft:#f4f8fc; --white:#fff; --border:rgba(9,39,82,.12);
  --shadow:0 18px 50px rgba(8,39,78,.12); --radius:24px;
}


/* ===== global.css ===== */
*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}

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

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

button,input,select,textarea{font:inherit}

button{cursor:pointer;border:0}

.container{width:min(1180px,92%);margin:auto}

.section{padding:100px 0}

.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:800;color:#2b8b4c;display:inline-block;margin-bottom:12px}

.eyebrow.light{color:#d9ff85}

.section h2{font-size:clamp(36px,4.3vw,58px);line-height:1.03;margin:0 0 18px;letter-spacing:-.045em}

.section h2 span,.about-copy h2 span,.cta-inner h2 span,.contact-copy h2 span{background:linear-gradient(90deg,var(--green),var(--sky));-webkit-background-clip:text;color:transparent}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}

.section-head.centered{display:block;text-align:center;max-width:720px;margin:0 auto 48px}

.section-head p,.centered p{color:var(--muted);font-size:16px;line-height:1.7;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:14px 22px;font-weight:800;transition:.3s ease;position:relative;overflow:hidden}

.btn span{transition:transform .3s}

.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(13,96,146,.22)}

.btn:hover span{transform:translateX(4px)}

.btn-primary{background:linear-gradient(100deg,#0b3f89,#1d9ed0 55%,#86c63a);color:#fff}

.btn.large{padding:16px 28px}

.btn.small{padding:10px 16px;font-size:13px}

.outline-btn{border:1px solid rgba(8,53,105,.2);background:#fff;border-radius:999px;padding:11px 18px;font-weight:800;color:var(--navy);transition:.3s}

.outline-btn:hover{border-color:var(--sky);color:var(--blue);transform:translateY(-2px)}

#scrollProgress{height:3px;position:fixed;top:0;left:0;width:0;background:linear-gradient(90deg,var(--green),var(--sky));z-index:9999}

.preloader{position:fixed;inset:0;background:#fff;z-index:10000;display:grid;place-items:center;transition:.6s}

.preloader.hide{opacity:0;visibility:hidden}

.video-btn{background:transparent;color:#fff;font-weight:800;display:flex;gap:10px;align-items:center}

.video-btn i{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--blue);font-style:normal;box-shadow:0 5px 20px rgba(0,0,0,.2)}

.destinations-section{background:#fff}

.packages-section{background:#f6f9fc}

.experiences-section{background:#fff}

.traveler-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}

.reveal.visible{opacity:1;transform:none}

.reveal:nth-child(2){transition-delay:.08s}

.reveal:nth-child(3){transition-delay:.16s}

.reveal:nth-child(4){transition-delay:.24s}

.reveal:nth-child(5){transition-delay:.32s}

.reveal:nth-child(6){transition-delay:.4s}

html{scroll-behavior:smooth;scroll-padding-top:92px}

main section[id]{scroll-margin-top:92px}


/* ===== preloader.css ===== */
.loader-logo img{width:180px}

.loader-line{width:180px;height:3px;background:#e9eef5;border-radius:10px;margin:20px auto 0;overflow:hidden}

.loader-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--sky));animation:load 1.3s ease forwards}

/* =========================================
   PRELOADER - ZINZEN TRAVELS
   ========================================= */

#preloader{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}

#preloader img{
    width:190px;
    max-width:70%;
    height:auto;
    display:block;
    margin:0 auto 18px;
    object-fit:contain;
}

#preloader .loader{
    width:190px;
    height:4px;
    margin:0 auto;
}

/* ===== header.css ===== */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:9990;padding:18px 0;transition:padding .3s,background .3s,box-shadow .3s}

.nav-wrap{display:flex;align-items:center;justify-content:space-between}

.brand img{width:170px;height:auto}

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
    padding:12px 18px;
    border-radius:999px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.main-nav>a{
    font-size:15px;
    font-weight:750;
    color:#22314f;
    position:relative;
    padding:12px 5px;
    text-align:center;
}
.main-nav>a:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:linear-gradient(90deg,var(--green),var(--sky));transform:scaleX(0);transform-origin:left;transition:.3s}

.main-nav>a:hover:after,.main-nav>a.active:after{transform:scaleX(1)}

.nav-book{
    padding:12px 20px;
    font-size:15px;
}

.menu-toggle{display:none;background:#fff;border-radius:12px;padding:10px}

.menu-toggle span{display:block;width:22px;height:2px;background:var(--navy);margin:4px}

.site-header.scrolled{padding:10px 0;background:rgba(7,27,73,.88);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(2,15,39,.18)}

.site-header.scrolled .main-nav{box-shadow:0 8px 24px rgba(0,0,0,.16)}

/* Change Header Logo */
.brand img {
    content: url("../images/logo-white.svg");
    width: 170px;
    height: auto;
    object-fit: contain;
}

/* ===== hero.css ===== */
.hero{min-height:780px;position:relative;display:flex;align-items:center;overflow:hidden;background:#0c5a9d}

.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;transition:opacity 1.2s,transform 8s ease}

.hero-bg-a{
    background-image:url("../images/hero-1.webp");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    animation:heroA 20s infinite;
}

.hero-bg-b{
    background-image:url("../images/hero-2.webp");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    animation:heroB 20s infinite;
}

/* Image Layer 1 */
@keyframes heroA{
    0%,20%{
        opacity:1;
        background-image:url("../images/hero-1.webp");
    }

    25%,45%{
        opacity:0;
        background-image:url("../images/hero-3.webp");
    }

    50%,70%{
        opacity:1;
        background-image:url("../images/hero-3.webp");
    }

    75%,95%{
        opacity:0;
        background-image:url("../images/hero-1.webp");
    }

    100%{
        opacity:1;
        background-image:url("../images/hero-1.webp");
    }
}

/* Image Layer 2 */
@keyframes heroB{
    0%,20%{
        opacity:0;
        background-image:url("../images/hero-2.webp");
    }

    25%,45%{
        opacity:1;
        background-image:url("../images/hero-2.webp");
    }

    50%,70%{
        opacity:0;
        background-image:url("../images/hero-4.webp");
    }

    75%,95%{
        opacity:1;
        background-image:url("../images/hero-4.webp");
    }

    100%{
        opacity:0;
        background-image:url("../images/hero-2.webp");
    }
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,26,69,.88) 0%,rgba(4,39,78,.42) 48%,rgba(4,39,78,.08) 100%)}

.hero-inner{position:relative;z-index:2;padding-top:100px}

.hero-copy{
    max-width:650px;
    color:#fff;
    padding:80px 0 150px;
    overflow:visible;
}

.hero-copy h1{
    font-size:clamp(48px,6.4vw,82px);
    line-height:1.05;
    letter-spacing:-.04em;
    margin:0 0 35px;
    overflow:visible;
    padding-bottom:8px;
}
.hero-copy h1 span{background:linear-gradient(90deg,#c6ef46,#1ac3db);-webkit-background-clip:text;color:transparent}

.hero-copy p{max-width:560px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.88);margin-bottom:28px}

.hero-actions{display:flex;gap:16px;align-items:center}

.hero-copy p{
    max-width:560px;
    font-size:18px;
    line-height:1.7;
    color:rgba(255,255,255,.88);
    margin-bottom:45px;
}

.hero-copy h1{
    margin:0 0 35px;
}

.hero-copy p{
    margin-bottom:45px;
}

.hero-dots{
    position:absolute;
    left:0;
    bottom:285px;
    display:flex;
    gap:8px;
    z-index:5;
}

.hero-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);transition:.3s}

.hero-dots button.active{width:28px;border-radius:20px;background:#a7d638}

.decor-one,.decor-two{position:absolute;border:1px dashed rgba(255,255,255,.4);border-radius:50%;z-index:1}

.decor-one{width:220px;height:220px;right:8%;top:16%;animation:float 7s ease-in-out infinite}

.decor-two{width:120px;height:120px;left:3%;bottom:20%;animation:float 5s ease-in-out infinite reverse}


/* ===== booking.css ===== */
.glass{background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.88);box-shadow:0 24px 60px rgba(2,26,60,.28)}

.booking-panel{position:absolute;left:0;right:0;bottom:42px;border-radius:24px;padding:0;overflow:hidden}

.booking-form{display:grid;grid-template-columns:1.5fr 1fr .9fr auto;gap:10px;padding:15px}

.field{border:1px solid rgba(9,39,82,.13);border-radius:15px;padding:9px 13px;background:#fff;transition:.25s ease}

.field:focus-within{border-color:rgba(29,169,213,.65);box-shadow:0 0 0 4px rgba(29,169,213,.08)}

.field label{display:block;font-size:10px;font-weight:800;color:#6d7890;margin-bottom:5px}

.field input,.field select{border:0;outline:0;width:100%;font-size:13px;color:var(--ink);background:transparent;min-height:22px}

.field select{cursor:pointer}

.field select option{color:var(--ink);background:#fff}

.search-btn{border-radius:15px;padding:0 24px;min-width:155px}

.booking-note{display:none}

.trust-strip{background:#fff;position:relative;z-index:4}

.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--border)}

.trust-item{display:flex;gap:14px;align-items:center;padding:28px 22px;border-right:1px solid var(--border)}

.trust-item:last-child{border-right:0}

.trust-item b{font-size:28px;color:var(--green)}

.trust-item strong{display:block;font-size:14px}

.trust-item small{display:block;color:var(--muted);margin-top:4px}

.booking-panel{z-index:5}

.booking-form .field{min-width:0}


/* ===== about.css ===== */
.about-section{background:linear-gradient(180deg,#fff 0%,#f5f9fd 100%)}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}

.about-media{position:relative;padding:30px}

.about-photo{height:520px;border-radius:36px 36px 120px 36px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(-2deg)}

.about-photo img{
    content:url("../images/about-new.webp");
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}
.about-media:hover .about-photo img{transform:scale(1.06)}

.experience-badge{position:absolute;right:0;bottom:0;background:#fff;padding:20px 24px;border-radius:24px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}

.experience-badge strong{font-size:38px;color:var(--blue)}

.experience-badge span{font-size:12px;font-weight:800}

.floating-pill{position:absolute;top:20px;left:0;background:linear-gradient(100deg,var(--green),var(--sky));color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);animation:float 4s ease-in-out infinite}

.about-copy p{color:var(--muted);line-height:1.8;font-size:16px}

.mini-stats{display:flex;gap:30px;margin:30px 0}

.mini-stats div{display:flex;flex-direction:column}

.mini-stats strong{font-size:28px;color:var(--navy)}

.mini-stats span{font-size:11px;color:var(--muted)}

.text-link{font-weight:800;color:var(--blue)}

.text-link span{transition:.3s}

.text-link:hover span{margin-left:6px}


/* ===== destinations.css ===== */
/* =========================================
   DESTINATION FILTERS
   ========================================= */

.filter-row{
    display:flex;
    gap:8px;
    margin-bottom:25px;
}

.filter{
    padding:9px 16px;
    border-radius:999px;
    background:#f3f7fb;
    color:#607089;
    font-weight:800;
    font-size:12px;
    transition:.3s;
}

.filter.active,
.filter:hover{
    background:var(--navy);
    color:#fff;
}


/* =========================================
   DESTINATION GRID
   ========================================= */

.destination-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}


/* =========================================
   DESTINATION CARD
   ========================================= */

.destination-card{
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 12px 35px rgba(12,45,84,.09);
    transition:.4s;
    border:1px solid var(--border);
}

.destination-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(12,45,84,.16);
}


/* =========================================
   DESTINATION IMAGE
   ========================================= */

.card-img{
    height:260px;
    position:relative;
    overflow:hidden;
}

.card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.destination-card:hover .card-img img{
    transform:scale(1.08);
}

.card-img:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        transparent 42%,
        rgba(3,21,51,.68)
    );
}

.card-img span{
    position:absolute;
    z-index:2;
    left:16px;
    bottom:15px;
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}


/* =========================================
   DESTINATION CARD BODY
   ========================================= */

.card-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    background:#fff;
}

.card-body small{
    color:var(--sky);
    font-weight:800;
    font-size:12px;
}

.card-body h3{
    margin:2px 0 4px;
    font-size:21px;
    color:var(--navy);
}


/* =========================================
   PREMIUM BOOK NOW BUTTON
   ========================================= */

.card-body a{
    width:100%;
    height:44px;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:999px;

    background:linear-gradient(
        100deg,
        #0b5ca8 0%,
        #19b9d0 55%,
        #a9d83b 100%
    );

    color:#fff;

    font-size:0;
    font-weight:900;

    text-decoration:none;

    box-shadow:0 8px 20px rgba(11,92,168,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* BOOK NOW text */

.card-body a::before{
    content:"BOOK NOW";
    font-size:12px;
    font-weight:900;
    letter-spacing:.03em;
}


/* Arrow */

.card-body a::after{
    content:"→";
    margin-left:9px;
    font-size:17px;
    font-weight:700;

    transition:transform .3s ease;
}


/* Hover */

.card-body a:hover{
    background:linear-gradient(
        100deg,
        #084e91 0%,
        #11a9c1 55%,
        #92c62c 100%
    );

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 13px 28px rgba(11,92,168,.30);
}

.card-body a:hover::after{
    transform:translateX(5px);
}


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

@media(max-width:900px){

    .destination-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:600px){

    .destination-grid{
        grid-template-columns:1fr;
    }

    .card-img{
        height:240px;
    }

}

/* ===== packages.css ===== */
.package-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.package-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(12,45,84,.07);
    transition:.4s;
}

.package-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 55px rgba(12,45,84,.14);
}

.package-image{
    height:245px;
    position:relative;
    overflow:hidden;
}

.package-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.package-card:hover .package-image img{
    transform:scale(1.1);
}

.tag,
.duration{
    position:absolute;
    top:15px;
    z-index:2;
    border-radius:999px;
    padding:7px 10px;
    font-size:10px;
    font-weight:900;
}

.tag{
    left:15px;
    background:#a9d83b;
    color:#173800;
}

.duration{
    right:15px;
    background:rgba(255,255,255,.92);
    color:var(--navy);
}

.package-content{
    padding:22px;
}

.package-meta{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#718099;
    font-weight:800;
}

.package-content h3{
    font-size:24px;
    margin:12px 0 8px;
}

.package-content p{
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
}

.package-content ul{
    list-style:none;
    padding:0;
    margin:16px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.package-content li{
    font-size:12px;
    padding:8px 0;
    color:#5d6980;
}

.package-content li:before{
    content:"✓";
    color:var(--green);
    font-weight:900;
    margin-right:8px;
}

/* =========================================
   PREMIUM PACKAGE FOOTER
   ========================================= */

.package-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(12,45,84,.10);
}

.package-footer strong{
    font-size:18px;
    color:var(--navy);
}

/* Book Now Button */

.package-footer a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:105px;
    padding:10px 15px;
    border-radius:999px;
    background:linear-gradient(100deg,#0b5ca8,#19b9d0,#a9d83b);
    color:#fff;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(11,92,168,.18);
    transition:all .3s ease;
}

.package-footer a span{
    font-size:15px;
    transition:transform .3s ease;
}

.package-footer a:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(11,92,168,.28);
}

.package-footer a:hover span{
    transform:translateX(4px);
}

/* Keep arrow if it is an icon */
.package-footer a span{
    font-size:14px;
    transition:transform .3s ease;
}

/* Hover */
.package-footer a:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(11,92,168,.30);
}

.package-footer a:hover span{
    transform:translateX(4px);
}

/* =========================================
   PACKAGE BOOK NOW BUTTON
   ========================================= */

.package-footer button.btn.btn-primary.small{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:115px !important;
    height:42px !important;
    padding:0 18px !important;
    border:none !important;
    border-radius:999px !important;

    background:linear-gradient(
        100deg,
        #0b5ca8,
        #19b9d0,
        #a9d83b
    ) !important;

    color:#fff !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;

    box-shadow:0 8px 20px rgba(11,92,168,.20) !important;
    cursor:pointer;
    transition:all .3s ease !important;
}

/* Button hover */
.package-footer button.btn.btn-primary.small:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 12px 28px rgba(11,92,168,.30) !important;
}

/* Add arrow */
.package-footer button.btn.btn-primary.small::after{
    content:"→";
    margin-left:8px;
    font-size:15px;
    transition:transform .3s ease;
}

.package-footer button.btn.btn-primary.small:hover::after{
    transform:translateX(4px);
}

/* ===== experiences.css ===== */
.experience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.experience-card{height:360px;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 12px 35px rgba(8,35,75,.12);background:#111}

.experience-card img{width:100%;height:100%;object-fit:cover;transition:1s}

.experience-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(3,18,42,.86))}

.experience-card:hover img{transform:scale(1.09) rotate(1deg)}

.experience-card div{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;color:#fff}

.experience-card span{color:#b8e73b;font-weight:900;font-size:11px}

.experience-card h3{font-size:20px;margin:5px 0}

.experience-card p{font-size:12px;color:rgba(255,255,255,.8);margin:0;line-height:1.5}


/* ===== process.css ===== */
.process-section{background:linear-gradient(135deg,#071b49,#0b5c98);color:#fff}

.process-section .eyebrow{color:#b8e73b}

.process-section p{color:rgba(255,255,255,.7)}

.process-grid{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:center}

.process-step{text-align:center}

.step-num{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);font-size:24px;font-weight:900;color:#b8e73b}

.process-step h3{font-size:20px}

.process-line{height:1px;background:linear-gradient(90deg,transparent,rgba(184,231,59,.7),transparent)}


/* ===== reviews.css ===== */
.travelers-section{background:#f6f9fc}

.review-score{display:flex;align-items:center;gap:10px}

.review-score strong{font-size:42px}

.review-score span{color:#ffb500;letter-spacing:2px}

.review-score small{display:block;color:var(--muted);letter-spacing:0;font-size:10px}

.review-card{background:#fff;border:1px solid var(--border);padding:24px;border-radius:24px;transition:.4s}

.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.avatar{width:58px;height:58px;border-radius:50%;overflow:hidden;border:3px solid #dff1a9;margin-bottom:14px}

.avatar img{width:100%;height:100%;object-fit:cover}

.stars{color:#ffb300;font-size:12px;letter-spacing:2px}

.review-card h3{margin:8px 0;font-size:18px}

.review-card p{color:var(--muted);font-size:13px;line-height:1.65;min-height:62px}

.review-card>strong{display:block;font-size:13px}

.review-card>small{color:var(--muted)}

.google-review-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:9px;padding:8px 12px;border:1px solid rgba(11,43,90,.14);border-radius:999px;background:#fff;color:var(--navy);font-size:.72rem;font-weight:800;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}

.google-review-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(8,38,82,.12);background:linear-gradient(135deg,#0b4f9a,#1fb6d2 55%,#86c83e);color:#fff;border-color:transparent}


/* ===== gallery.css ===== */
.gallery-section{background:#fff}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:15px}

.gallery-item{padding:0;overflow:hidden;border-radius:20px;background:#ddd;position:relative}

.gallery-item img{width:100%;height:100%;object-fit:cover;transition:1s}

.gallery-item:hover img{transform:scale(1.08)}

.gallery-item:after{content:"View";position:absolute;inset:auto 14px 14px auto;background:rgba(255,255,255,.9);color:var(--navy);padding:8px 12px;border-radius:999px;font-size:10px;font-weight:900;opacity:0;transform:translateY(8px);transition:.3s}

.gallery-item:hover:after{opacity:1;transform:none}

.gallery-item.tall{grid-row:span 2}

.gallery-item.wide{grid-column:span 2}

/* =========================================
   GALLERY - NO CROP / NO EMPTY SPACE
   ========================================= */

.gallery-item{
    overflow:hidden !important;
    background:transparent !important;
    padding:0 !important;
}

.gallery-item img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:initial !important;
    object-position:center !important;
    background:transparent !important;
    border-radius:inherit !important;
}

/* =========================================
   MOMENTS GALLERY - WIDER IMAGES
   ========================================= */

#gallery .gallery-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

#gallery .gallery-item {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

#gallery .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

#gallery .gallery-item{
    min-height:260px !important;
}

/* =========================================
   MOMENTS GALLERY - FINAL LAYOUT
========================================= */

#gallery .container{
    width: min(1180px, 94%) !important;
    max-width: 1180px !important;
}

#gallery .gallery-grid{
    width:100% !important;
    display:grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    grid-auto-rows:170px !important;

    gap:12px !important;

    align-items:stretch !important;
}


/* IMAGE BOX */

#gallery .gallery-item{
    position:relative !important;
    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    overflow:hidden !important;

    border-radius:16px !important;

    background:#ddd !important;
}


/* IMAGE */

#gallery .gallery-item img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:cover !important;
    object-position:center !important;

    border-radius:inherit !important;

    transition:
        opacity .7s ease,
        transform .8s ease !important;
}


/* HOVER */

#gallery .gallery-item:hover img{
    transform:scale(1.04) !important;
}


/* TALL IMAGE */

#gallery .gallery-item.tall{
    grid-row:span 2 !important;
}


/* WIDE IMAGE */

#gallery .gallery-item.wide{
    grid-column:span 2 !important;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:900px){

    #gallery .gallery-grid{
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        grid-auto-rows:160px !important;
    }

}


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

@media(max-width:600px){

    #gallery .container{
        width:92% !important;
    }

    #gallery .gallery-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-auto-rows:150px !important;

        gap:10px !important;
    }

}

/* =========================================
   FULL IMAGE LIGHTBOX
========================================= */

#lightbox{
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;

    display:none;
    align-items:center !important;
    justify-content:center !important;

    padding:30px !important;

    background:rgba(2,15,39,.92) !important;
    backdrop-filter:blur(8px);
}

#lightbox.open{
    display:flex !important;
}

#lightbox img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:92vw !important;
    max-height:88vh !important;

    object-fit:contain !important;

    border-radius:16px !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);
}

#lightbox > button{
    position:fixed !important;

    top:20px !important;
    right:20px !important;

    width:44px !important;
    height:44px !important;

    border:0 !important;
    border-radius:50% !important;

    background:#fff !important;
    color:#071b49 !important;

    font-size:24px !important;

    cursor:pointer !important;

    z-index:100000 !important;
}

/* ===== cta.css ===== */
/* =========================================
   READY TO EXPLORE CTA
   BLUE OVERLAY - FIXED
   ========================================= */

.cta-section {
    position: relative !important;
    min-height: 480px;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
}

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

.cta-bg {
    position: absolute !important;
    inset: 0 !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    z-index: 0 !important;

    animation: kenburns 12s ease-in-out infinite alternate;
}

/* =========================================
   BLUE PATCH / OVERLAY
   ========================================= */

.cta-bg::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    background: linear-gradient(
        90deg,
        rgba(4, 28, 67, 0.88) 0%,
        rgba(5, 70, 110, 0.70) 50%,
        rgba(5, 97, 132, 0.60) 100%
    ) !important;

    opacity: 1 !important;

    z-index: 10 !important;

    pointer-events: none !important;
}

/* =========================================
   CTA CONTENT ABOVE BLUE PATCH
   ========================================= */

.cta-inner {
    position: relative !important;
    z-index: 20 !important;

    max-width: 800px;
}

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

.cta-inner h2 {
    font-size: clamp(42px, 5vw, 66px);
    margin: 0 0 16px;
    letter-spacing: -.05em;
}

.cta-inner p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,.85);
    margin: 0 auto 28px;
    max-width: 650px;
}

/* ===== contact.css ===== */
.contact-section{background:#f4f8fc}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}

.contact-copy p{color:var(--muted);line-height:1.8}

.contact-list{display:grid;gap:16px;margin-top:28px}

.contact-list>div{display:flex;gap:14px;align-items:center}

.contact-list b{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(8,35,75,.08);display:grid;place-items:center;color:var(--blue)}

.contact-list strong,.contact-list span span{display:block;font-size:12px}

.contact-list a{display:block;color:var(--blue);font-weight:800;font-size:14px;margin-top:3px}

.quote-form{background:#fff;padding:30px;border-radius:28px;box-shadow:var(--shadow)}

.quote-form h3{font-size:25px;margin:0 0 20px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.quote-form input,.quote-form select,.quote-form textarea,.modal-card input,.modal-card select,.modal-card textarea,.newsletter input{width:100%;border:1px solid var(--border);background:#fbfdff;outline:0;border-radius:14px;padding:13px 14px;color:var(--ink);margin-bottom:12px}

.quote-form textarea,.modal-card textarea{resize:vertical}

.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus,.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(29,169,213,.08)}

.quote-form small,.modal-card small{display:block;color:#8590a2;margin-top:10px}


/* ===== footer.css ===== */
.newsletter{background:linear-gradient(100deg,#0b3f89,#087aa7,#76be36);color:#fff}

.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 0}

.newsletter h3{margin:0;font-size:24px}

.newsletter form{display:flex;gap:8px;width:min(480px,100%)}

.newsletter input{margin:0;background:#fff}

.footer{background:#06183e;color:#fff}

.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;padding:60px 0}

.footer-brand img{width:155px;filter:brightness(0) invert(1) brightness(2)}

.footer-brand p{color:rgba(255,255,255,.65);font-size:13px;line-height:1.7;max-width:280px}

.socials{display:flex;gap:8px}

.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:grid;place-items:center;color:#b8e73b}

.footer-main h4{font-size:14px;margin:0 0 18px}

.footer-main>div:not(:first-child){display:flex;flex-direction:column;gap:10px}

.footer-main a,.footer-main span{color:rgba(255,255,255,.62);font-size:12px}

.footer-main a:hover{color:#b8e73b}

.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}

.footer-bottom .container{display:flex;justify-content:space-between;padding:18px 0;color:rgba(255,255,255,.5);font-size:11px}

/* =========================================
   FOOTER MAP - PERFECT FIT
   ========================================= */

#zinzenFooterMap {
    width: 100%;
    max-width: 260px;
    min-width: 0;
    box-sizing: border-box;
}

#zinzenFooterMap .zinzen-map-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

#zinzenFooterMap .zinzen-map-frame {
    width: 100%;
    max-width: 260px;
    height: 125px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: #102653;
    box-sizing: border-box;
}

#zinzenFooterMap .zinzen-map-frame iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
}

#zinzenFooterMap .zinzen-map-link {
    display: inline-block;
    margin-top: 8px;
    color: #65c8d8 !important;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none !important;
}


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

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 60px 0;
    align-items: start;
}


/* Contact + Map stay inside footer */
.footer-main > div:last-child {
    min-width: 0;
}


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

@media (max-width: 1100px) {

    .footer-main {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 25px;
    }

    #zinzenFooterMap {
        max-width: 220px;
    }

    #zinzenFooterMap .zinzen-map-frame {
        max-width: 220px;
    }
}


@media (max-width: 800px) {

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

    #zinzenFooterMap {
        max-width: 280px;
    }

    #zinzenFooterMap .zinzen-map-frame {
        max-width: 280px;
    }
}


@media (max-width: 550px) {

    .footer-main {
        grid-template-columns: 1fr;
    }

    #zinzenFooterMap,
    #zinzenFooterMap .zinzen-map-frame {
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================
   FOOTER SOCIAL LINKS - 3 ONLY
   ========================================= */

.footer .socials {
    display: flex;
    gap: 8px;
}

.footer .socials a:nth-child(n+4) {
    display: none !important;
}

/* =========================================
   ZINZEN FOOTER GOOGLE MAP
   ========================================= */

.zinzen-footer-map {
    margin-top: 24px;
    width: 100%;
    max-width: 260px;
}

.zinzen-footer-map h4 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.zinzen-footer-map-frame {
    width: 100%;
    height: 125px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: #102653;
}

.zinzen-footer-map-frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block;
}

.zinzen-footer-map-link {
    display: inline-block;
    margin-top: 8px;
    color: #65c8d8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.zinzen-footer-map-link:hover {
    color: #75d84d !important;
    text-decoration: underline !important;
}

/* ===== modal.css ===== */
/* FIX BOOKING MODAL - HEADER OVERLAP */

.modal{
    align-items:flex-start !important;
    padding-top:90px !important;
    padding-bottom:20px !important;
}

.modal-card{
    width:min(580px,100%) !important;
    max-height:calc(100vh - 110px) !important;
    overflow-y:auto !important;
    margin:0 auto !important;
}

/* Keep modal above header */
.modal{
    z-index:10000 !important;
}

.modal-card{
    z-index:10001 !important;
}

.modal-backdrop{
    z-index:10000 !important;
}

/* Mobile */
@media(max-width:600px){

    .modal{
        padding-top:65px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .modal-card{
        max-height:calc(100vh - 80px) !important;
        border-radius:20px !important;
    }
}

/* =========================================
   BOOKING INQUIRY POPUP
========================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.open {
    display: flex !important;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 15, 39, .72);
    backdrop-filter: blur(8px);
}

.modal-card {
    position: relative;
    z-index: 10001;
    width: min(580px, calc(100vw - 30px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 30px 90px rgba(0,0,0,.30);
    animation: bookingPopupIn .3s ease;
}

@keyframes bookingPopupIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== animations.css ===== */
@keyframes load{to{width:100%}}

@keyframes kenburns{to{transform:scale(1.08)}}

@keyframes heroFade{0%,45%{opacity:0}55%,90%{opacity:.6}100%{opacity:0}}

@keyframes float{50%{transform:translateY(-16px) rotate(8deg)}}

@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}


/* ===== responsive.css ===== */
@media(max-width:1000px){.booking-form{grid-template-columns:1fr 1fr}.search-btn{min-height:50px}}

@media(max-width:1000px){.main-nav{gap:14px}.main-nav>a{font-size:12px}.booking-form{grid-template-columns:repeat(3,1fr)}.search-btn{min-height:50px}.destination-grid,.package-grid{grid-template-columns:repeat(2,1fr)}.experience-grid{grid-template-columns:repeat(2,1fr)}.traveler-grid{grid-template-columns:repeat(2,1fr)}.about-grid,.contact-grid{gap:45px}.process-grid{grid-template-columns:1fr 40px 1fr 40px 1fr}}

@media(max-width:780px){.section{padding:75px 0}.site-header{position:fixed}.brand img{width:145px}.menu-toggle{display:block}.main-nav{position:absolute;top:72px;left:4%;right:4%;display:none;flex-direction:column;align-items:stretch;border-radius:22px;padding:15px}.main-nav.open{display:flex}.main-nav>a{text-align:center}.nav-book{margin-top:5px}.hero{min-height:940px}.hero-copy{padding:70px 0 280px}.hero-copy h1{font-size:52px}.booking-panel{bottom:25px}.booking-form{grid-template-columns:1fr 1fr}.search-btn{min-height:50px}.booking-note{font-size:10px}.trust-grid{grid-template-columns:1fr 1fr}.trust-item:nth-child(2){border-right:0}.trust-item{border-bottom:1px solid var(--border)}.about-grid,.contact-grid{grid-template-columns:1fr}.about-photo{height:400px}.destination-grid,.package-grid{grid-template-columns:1fr}.experience-grid{grid-template-columns:1fr 1fr}.traveler-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}.gallery-item.wide{grid-column:span 2}.newsletter-inner{flex-direction:column;align-items:flex-start}.footer-main{grid-template-columns:1fr 1fr;gap:35px}.process-grid{grid-template-columns:1fr;gap:22px}.process-line{width:1px;height:35px;margin:auto}.section-head{align-items:flex-start;flex-direction:column}.review-score{margin-top:-10px}}

@media(max-width:520px){.container{width:min(94%,1180px)}.hero-copy h1{font-size:43px}.hero-copy p{font-size:15px}.hero-actions{flex-direction:column;align-items:flex-start}.booking-form{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr}.trust-item{border-right:0!important}.experience-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:140px}.footer-main{grid-template-columns:1fr}.two{grid-template-columns:1fr}.newsletter form{flex-direction:column}.newsletter .btn{width:100%}.modal-card{padding:25px}.modal-card h2{font-size:31px}}