/*
====================================================
GOLDEN VALLEY TRAVELS
MASTER CSS FILE
====================================================
DO NOT DELETE SECTION MARKERS
====================================================
*/



/* ==================================================
   SECTION: about.css
================================================== */

.about-highlight{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}

.about-highlight .mini{padding:18px 20px;border-left:3px solid var(--gold);background:#faf9f5;border-radius:0 15px 15px 0}

.about-highlight strong{display:block;color:var(--blue);font-family:'Playfair Display',serif;font-size:20px}



/* ==================================================
   SECTION: animations.css
================================================== */

@keyframes rise{to{opacity:1;transform:none}}

@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 18px 36px rgba(32,180,107,.4)}}

@keyframes shimmer{to{background-position:200% 0}}

@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@keyframes fxBreathe{50%{transform:scale(1.015)}}

@keyframes fxShine{0%,55%{transform:translateX(-80%)}75%,100%{transform:translateX(80%)}}

@keyframes fxRipple{to{transform:scale(22);opacity:0}}

@keyframes fxBtnShimmer{to{background-position:200% 0}}

@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,139,56,.18)}50%{box-shadow:0 0 0 8px rgba(179,139,56,0)}}

@keyframes fxTextFlow{to{background-position:200% center}}

@keyframes fxTextRise{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

@keyframes fxDot{50%{box-shadow:0 0 0 6px rgba(179,139,56,0)}}

@keyframes fxNotice{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

@keyframes fxWa{0%,100%{box-shadow:0 15px 30px rgba(32,180,107,.25)}50%{box-shadow:0 15px 30px rgba(32,180,107,.25),0 0 0 9px rgba(32,180,107,.06)}}

@keyframes fxLoad{to{width:100%;opacity:0}}



/* ==================================================
   SECTION: buttons.css
================================================== */

.cta{background:var(--gold);color:#fff!important;padding:12px 17px!important;border-radius:999px;box-shadow:0 10px 22px rgba(179,139,56,.24)}

.cta:after{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:999px;border:1px solid var(--blue);font-weight:700;transition:.3s;cursor:pointer}

.btn.primary{background:var(--blue);color:#fff;box-shadow:0 14px 30px rgba(10,34,64,.2)}

.btn.gold{background:var(--gold);color:#fff;border-color:var(--gold)}

.btn.ghost{background:#fff;color:var(--blue)}

.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(10,34,64,.14)}

/* 11 button magnetic-ish lift */ .fx-btn{transition:transform .25s var(--ease-bounce),box-shadow .25s}

/* 12 button press */ .fx-press:active{transform:translateY(1px) scale(.97)}

/* 13 button glow */ .fx-glow:hover{box-shadow:0 0 0 5px rgba(179,139,56,.10),0 15px 30px rgba(179,139,56,.22)}

/* 14 button sweep */ .fx-sweep{position:relative;overflow:hidden}

/* 15 button border draw */ .fx-border{box-shadow:inset 0 0 0 0 rgba(216,185,104,.5);transition:.35s}

/* 16 button icon nudge */ .fx-arrow{transition:.3s}

/* 17 button ripple */ .fx-ripple{position:relative;overflow:hidden}

/* 18 button shimmer */ .fx-shimmer{background-image:linear-gradient(90deg,var(--blue) 0%,var(--blue) 40%,#31577e 50%,var(--blue) 60%,var(--blue) 100%);background-size:220% 100%}

/* 19 button pulse */ .fx-pulse{animation:fxPulse 3s infinite}

/* 20 button rotate icon cue */ .fx-rotate:hover{transform:translateY(-3px) rotate(-.5deg)}



/* ==================================================
   SECTION: cards.css
================================================== */

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:27px;box-shadow:0 8px 28px rgba(10,34,64,.05);transition:.4s;position:relative;overflow:hidden}

.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(179,139,56,.4)}

.card h3{color:var(--blue);margin:0 0 8px}

.card p{color:var(--muted);margin:0}

.card:hover .fx-icon{transform:rotate(-8deg) scale(1.08)}

.card:hover .fx-icon-ring:after{transform:scale(1.1);opacity:1}

.card h3{font-size:20px}



/* ==================================================
   SECTION: footer.css
================================================== */

.footer{background:var(--blue);color:#fff;padding:65px 0 25px}

.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}

.footer h4{color:var(--gold2);margin-top:0}

.footer a{color:#dbe4ed;display:block;margin:7px 0}

/* 48 footer link sweep */ .fx-footer a{position:relative;transition:.3s}

.fx-footer a:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold2);transition:.35s}

.fx-footer a:hover:after{width:100%}



/* ==================================================
   SECTION: forms.css
================================================== */

.eyebrow{color:var(--gold);font-weight:800;letter-spacing:2.3px;font-size:12px;text-transform:uppercase}

.floatcard span{display:block;color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:1px}

.image-card:hover img{transform:scale(1.06)}

.kicker{display:inline-flex;gap:7px;align-items:center;color:var(--green);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px}

.form{background:#fff;border:1px solid var(--line);padding:30px;border-radius:25px;box-shadow:var(--shadow)}

.field input,.field select,.field textarea{width:100%;border:1px solid #dfe3e8;border-radius:13px;padding:13px 14px;font:inherit;outline:none;background:#fff}

.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(179,139,56,.1)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}

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

.reveal-left{opacity:0;transform:translateX(-35px);transition:.8s}

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

.reveal-right{opacity:0;transform:translateX(35px);transition:.8s}

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

.stagger>*{opacity:0;transform:translateY(18px);animation:rise .7s forwards}

.fx-shine:after{content:"";position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);transform:translateX(-80%);animation:fxShine 5s infinite}

/* 04 image tilt */ .fx-tilt{transition:transform .45s var(--ease-premium)}

.fx-tilt:hover{transform:perspective(900px) rotateX(2deg) rotateY(-3deg) scale(1.025)}

/* 06 image focus */ .fx-focus{transition:filter .5s,transform .5s}

.fx-focus:hover{filter:saturate(1.12) contrast(1.04);transform:scale(1.035)}

/* 08 image perspective */ .fx-perspective{transform:perspective(1100px) rotateY(0);transition:.5s}

.fx-perspective:hover{transform:perspective(1100px) rotateY(-4deg) translateY(-4px)}

.fx-caption .body{transition:transform .45s var(--ease-premium)}

.fx-caption:hover .body{transform:translateY(-5px)}

.fx-btn:hover{transform:translateY(-5px) scale(1.025)}

.fx-sweep:before{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);transition:1s}

.fx-arrow:hover::first-letter{transform:translateX(3px)}

.fx-ripple:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;left:50%;top:50%;background:rgba(255,255,255,.35);transform:scale(0);opacity:0}

.fx-badge:hover{transform:translateY(-3px) rotate(-1deg)}

/* 30 card rotate */ .fx-card-rotate:hover{transform:translateY(-7px) rotate(.35deg)}

.fx-card-scale:hover{transform:scale(1.025)}

.fx-icon-ring:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(179,139,56,.25);border-radius:inherit;transform:scale(.85);opacity:0;transition:.4s}

/* 34 grid cascade */ .fx-cascade>*{transition:transform .55s var(--ease-premium),opacity .55s}

.fx-cascade>*:hover{transform:translateY(-10px)}

.fx-stat:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,34,64,.22)}

/* 38 form focus lift */ .fx-field{transition:transform .25s}

.fx-field:focus-within{transform:translateY(-2px)}

/* 39 form focus line */ .fx-fieldline{position:relative}

.fx-fieldline:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:.35s}

.fx-fieldline:focus-within:after{transform:scaleX(1)}

/* 40 form label color */ .fx-label{transition:.3s}

/* 41 input glow */ .fx-input:focus{box-shadow:0 0 0 4px rgba(179,139,56,.10),0 8px 25px rgba(10,34,64,.06)!important}

/* 42 select arrow feel */ .fx-select{transition:.3s}

.fx-select:hover{border-color:var(--gold);transform:translateY(-1px)}

.fx-notice:hover{transform:translateX(4px)}

.step:hover .fx-num{transform:scale(1.12);background:var(--gold)}

.fx-brand:hover{transform:translateY(-2px)}

.fx-footer a:hover{color:#fff;transform:translateX(3px)}

.fx-wa:hover{animation-play-state:paused;transform:scale(1.1) rotate(-4deg)}



/* ==================================================
   SECTION: header.css
================================================== */

.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}

.navin{height:76px;display:flex;align-items:center;justify-content:space-between}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
    font-family:'DM Sans',sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:.2px;
    color:var(--blue);
}

.brandmark{
    width:58px;
    height:58px;
    flex:0 0 58px;
    border-radius:10px;
    background-image:url("../images/Logo.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-color:transparent;
    display:block;
    font-size:0;
    color:transparent;
    transition:transform .35s ease,filter .35s ease;
}

.brand small{
    display:inline;
    color:var(--gold);
    font-family:'DM Sans',sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:.8px;
    margin-left:4px;
    white-space:nowrap;
}

.fx-brand:hover .brandmark{
    transform:scale(1.04);
    filter:brightness(1.06);
}


/* ==================================================
   SECTION: hero.css
================================================== */

.hero{position:relative;overflow:hidden;padding:92px 0 82px;background:linear-gradient(135deg,#fff 0%,#f7f7f3 55%,#fff 100%)}

.hero:before{content:'';position:absolute;width:520px;height:520px;border:1px solid rgba(179,139,56,.22);border-radius:50%;right:-160px;top:-180px}

.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}

.hero h1{font:700 clamp(44px,6vw,78px)/1.04 'Playfair Display',serif;color:var(--blue);margin:15px 0 20px}

.hero h1 span{color:var(--gold)}

.hero p{font-size:18px;color:var(--muted);max-width:650px}

.hero-media{border-radius:34px;overflow:hidden;box-shadow:var(--shadow);position:relative}

.hero-media img{width:100%;display:block}



/* ==================================================
   SECTION: navigation.css
================================================== */

.menu{display:flex;gap:22px;align-items:center;font-weight:600;font-size:14px}

.menu a{padding:27px 0;position:relative}

.menu a:after{content:'';position:absolute;left:0;bottom:18px;width:0;height:2px;background:var(--gold);transition:.35s}

.menu a:hover:after,.menu a.active:after{width:100%}

/* 46 nav logo float */ .fx-brand{transition:.4s}

/* 47 nav cta aura */ .fx-navcta{position:relative}

.fx-navcta:before{content:"";position:absolute;inset:-4px;border-radius:999px;border:1px solid rgba(179,139,56,.35);opacity:0;transform:scale(.92);transition:.4s}

.fx-navcta:hover:before{opacity:1;transform:scale(1)}



/* ==================================================
   SECTION: other.css
================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--blue:#0a2240;--blue2:#12385f;--gold:#b38b38;--gold2:#d8b968;--ink:#101820;--muted:#5e6a78;--paper:#fff;--soft:#f4f5f2;--line:#e5e7eb;--green:#177b62;--shadow:0 18px 50px rgba(10,34,64,.10);--radius:22px}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:#fff;line-height:1.65}

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

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

.topbar{background:var(--blue);color:#fff;font-size:13px;padding:8px 0}

.topbar .container{display:flex;justify-content:space-between;gap:15px;align-items:center}

.toplinks{display:flex;gap:18px}

.hamb{display:none;background:none;border:0;font-size:25px;color:var(--blue)}

.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

.floatcard{position:absolute;left:22px;bottom:22px;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 14px 30px rgba(0,0,0,.13);font-weight:700}

.section{padding:88px 0}

.section.soft{background:var(--soft)}

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

.section h2{font:700 clamp(32px,4vw,50px)/1.1 'Playfair Display',serif;color:var(--blue);margin:7px 0}

.lead{color:var(--muted);max-width:680px}

.grid{display:grid;gap:22px}

.g3{grid-template-columns:repeat(3,1fr)}

.g4{grid-template-columns:repeat(4,1fr)}

.icon{width:52px;height:52px;border-radius:16px;background:rgba(179,139,56,.12);color:var(--gold);display:grid;place-items:center;font-size:22px;margin-bottom:18px}

.image-card{padding:0;overflow:hidden}

.image-card img{width:100%;height:230px;object-fit:cover;transition:.6s}

.image-card .body{padding:23px}

.badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#f7f1df;color:#7c5c17;font-weight:700;font-size:12px}

.pagehero{padding:66px 0;background:linear-gradient(110deg,var(--blue),#153f69);color:#fff;position:relative;overflow:hidden}

.pagehero:after{content:'';position:absolute;right:-90px;top:-160px;width:430px;height:430px;border:1px solid rgba(216,185,104,.35);border-radius:50%}

.pagehero h1{font:700 54px/1.1 'Playfair Display',serif;margin:8px 0}

.pagehero p{color:#dce5ee;max-width:720px}

.crumb{font-size:13px;color:#d8b968}

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

.split img{width:100%;border-radius:28px;box-shadow:var(--shadow)}

.list{display:grid;gap:11px;padding:0;list-style:none}

.list li:before{content:'✓';color:var(--gold);font-weight:900;margin-right:10px}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 30px}

.tab{border:1px solid var(--line);padding:10px 15px;border-radius:999px;background:#fff;font-weight:700;cursor:pointer}

.tab.active,.tab:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.field.full{grid-column:1/-1}

.field label{display:block;font-size:12px;font-weight:800;color:var(--blue);margin-bottom:6px}

.timeline{display:grid;gap:14px}

.step{display:flex;gap:17px;align-items:flex-start}

.num{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}

.step h4{margin:0;color:var(--blue)}

.step p{margin:2px 0;color:var(--muted)}

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

.stat{padding:22px;border-radius:20px;background:var(--blue);color:#fff}

.stat strong{display:block;font:700 34px 'Playfair Display';color:var(--gold2)}

.stat span{font-size:12px;color:#dce5ee}

.footbottom{border-top:1px solid rgba(255,255,255,.15);margin-top:35px;padding-top:18px;color:#b9c5d0;font-size:12px;display:flex;justify-content:space-between}

.whatsapp{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#20b46b;color:#fff;display:grid;place-items:center;font-size:0;font-weight:900;box-shadow:0 15px 30px rgba(32,180,107,.3);animation:pulse 2.5s infinite}.whatsapp:before{content:"";width:31px;height:31px;display:block;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Cpath fill=%27white%27 d=%27M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.55 1.75 6.55L3 29l6.6-1.72A12.93 12.93 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm0 23.7c-2.02 0-4-.55-5.73-1.6l-.41-.25-3.91 1.02 1.04-3.8-.27-.42A10.65 10.65 0 1 1 16 26.7zm5.86-7.99c-.32-.16-1.9-.94-2.2-1.05-.3-.11-.52-.16-.74.16-.22.33-.85 1.05-1.04 1.27-.19.22-.38.25-.7.08-.32-.16-1.36-.5-2.59-1.59-.96-.85-1.61-1.9-1.8-2.22-.19-.33-.02-.5.14-.66.14-.14.32-.38.49-.57.16-.19.22-.33.33-.55.11-.22.05-.41-.03-.57-.08-.16-.74-1.78-1.02-2.44-.27-.65-.54-.56-.74-.57h-.63c-.22 0-.57.08-.87.41-.3.33-1.13 1.1-1.13 2.69s1.16 3.12 1.32 3.34c.16.22 2.28 3.48 5.52 4.88.77.33 1.37.53 1.84.68.77.25 1.47.21 2.02.13.62-.09 1.9-.78 2.17-1.53.27-.76.27-1.4.19-1.53-.08-.14-.3-.22-.63-.39z%27/%3E%3C/svg%3E") center/contain no-repeat}

.stagger>*:nth-child(2){animation-delay:.08s}

.stagger>*:nth-child(3){animation-delay:.16s}

.stagger>*:nth-child(4){animation-delay:.24s}

.notice{padding:15px 18px;border-left:4px solid var(--gold);background:#fbf8ef;border-radius:10px;color:#4e4b42}

.success{display:none;padding:16px;background:#edf8f3;color:#17684f;border-radius:12px;margin-top:14px}

.success.show{display:block}

/* ===== PREMIUM MOTION PACK 2.0 — 50 ADDITIONAL EFFECTS ===== */
:root{--ease-premium:cubic-bezier(.2,.75,.2,1);--ease-bounce:cubic-bezier(.16,1.4,.3,1)}

/* 01 image float */ .fx-float{animation:fxFloat 5s ease-in-out infinite}

/* 02 image breathing */ .fx-breathe{animation:fxBreathe 4s ease-in-out infinite}

/* 03 image shine */ .fx-shine{position:relative;overflow:hidden}

/* 05 image frame */ .fx-frame{outline:1px solid transparent;outline-offset:-10px;transition:.45s}

.fx-frame:hover{outline-color:rgba(216,185,104,.75);outline-offset:-16px}

/* 07 image grayscale reveal */ .fx-color{filter:grayscale(.65);transition:.6s}

.fx-color:hover{filter:grayscale(0)}

/* 09 image shadow bloom */ .fx-bloom{transition:box-shadow .5s}

.fx-bloom:hover{box-shadow:0 25px 70px rgba(10,34,64,.18),0 0 0 1px rgba(179,139,56,.25)}

/* 10 image caption slide */ .fx-caption{overflow:hidden}

.fx-sweep:hover:before{left:125%}

.fx-border:hover{box-shadow:inset 0 0 0 2px rgba(216,185,104,.55)}

.fx-arrow:hover{letter-spacing:.15px}

.fx-ripple:active:after{animation:fxRipple .55s ease-out}

.fx-shimmer:hover{animation:fxBtnShimmer 1.1s}

.fx-pulse:hover{animation-play-state:paused}

/* 21 heading underline */ .fx-heading{display:inline-block;position:relative}

.fx-heading:after{content:"";position:absolute;left:0;bottom:-9px;width:38px;height:3px;background:var(--gold);transition:.45s}

.fx-heading:hover:after{width:100%}

/* 22 heading tracking */ .fx-track{transition:letter-spacing .5s}

.fx-track:hover{letter-spacing:.025em}

/* 23 text gradient */ .fx-gradient-text{background:linear-gradient(90deg,var(--blue),var(--gold),var(--blue));background-size:200% auto;color:transparent;background-clip:text;-webkit-background-clip:text;animation:fxTextFlow 6s linear infinite}

/* 24 text reveal */ .fx-reveal-text{overflow:hidden}

.fx-reveal-text span{display:inline-block;animation:fxTextRise .8s var(--ease-premium) both}

/* 25 text glow */ .fx-text-glow:hover{text-shadow:0 5px 25px rgba(179,139,56,.22)}

/* 26 badge float */ .fx-badge{transition:.35s}

/* 27 badge dot */ .fx-badge-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:7px;box-shadow:0 0 0 0 rgba(179,139,56,.5);animation:fxDot 2s infinite}

/* 28 card top line */ .fx-cardline:before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--gold);transition:.5s}

.fx-cardline:hover:before{width:100%}

/* 29 card inner glow */ .fx-inner{transition:box-shadow .4s}

.fx-inner:hover{box-shadow:inset 0 0 0 1px rgba(179,139,56,.28),0 18px 45px rgba(10,34,64,.10)}

/* 31 card scale */ .fx-card-scale{transition:.45s var(--ease-premium)}

/* 32 icon spin */ .fx-icon{transition:.5s var(--ease-bounce)}

/* 33 icon ring */ .fx-icon-ring{position:relative}

/* 35 section divider */ .fx-divider{position:relative}

.fx-divider:after{content:"";display:block;width:70px;height:1px;background:var(--gold);margin-top:22px;transition:.5s}

.fx-divider:hover:after{width:160px}

/* 36 stat count shimmer */ .fx-stat strong{background:linear-gradient(90deg,var(--gold2),#fff,var(--gold2));background-size:180% auto;color:transparent;background-clip:text;-webkit-background-clip:text;animation:fxTextFlow 5s linear infinite}

/* 37 stat hover */ .fx-stat{transition:.4s}

.fx-field:focus-within .fx-label{color:var(--gold)}

/* 43 notice entrance */ .fx-notice{animation:fxNotice .7s var(--ease-premium) both}

/* 44 timeline connector */ .fx-timeline .step{position:relative}

.fx-timeline .step:not(:last-child):after{content:"";position:absolute;left:18px;top:38px;height:calc(100% + 14px);border-left:1px dashed rgba(179,139,56,.4)}

/* 45 timeline number */ .fx-num{transition:.35s var(--ease-bounce)}

/* 49 whatsapp aura */ .fx-wa{animation:fxWa 2.6s infinite}

/* 50 revised page-load accent: tiny top progress line only — never covers the page */
.page-load:before{content:"";position:fixed;z-index:9999;left:0;top:0;width:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold2));pointer-events:none;animation:fxLoad .72s ease-out forwards}

/* ===== FINAL VISUAL POLISH ===== */
.pagehero{background:linear-gradient(115deg,#071d38 0%,#0a2a4d 52%,#153e64 100%);box-shadow:inset 0 -1px 0 rgba(216,185,104,.18)}

.pagehero h1{letter-spacing:-.02em;text-shadow:0 10px 30px rgba(0,0,0,.18)}

.pagehero p{font-size:16px;max-width:760px}

.section:not(.soft){background:#fff}

.section.soft{background:linear-gradient(180deg,#f7f7f4 0%,#f2f3f1 100%)}

.split>div:first-child{position:relative}

.split>div:first-child:before{content:"";position:absolute;z-index:-1;left:-18px;top:22px;width:72%;height:72%;border:1px solid rgba(179,139,56,.18);border-radius:30px}

.split>div>img{display:block;min-height:300px;object-fit:cover;background:#f1f2ef}

.image-card{height:100%}

.image-card .body{background:#fff}

.image-card h3{font-family:'Playfair Display',serif;font-size:24px}



/* ==================================================
   SECTION: responsive.css
================================================== */

@media(max-width:900px){.menu{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;padding:15px 5%;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.menu.open{display:flex}.menu a{padding:10px 0}.menu a:after{bottom:4px}.hamb{display:block}.hero-grid,.split{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.footergrid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.toplinks{display:none}.hero{padding:65px 0}.section{padding:62px 0}.g3,.g4,.stats,.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.pagehero h1{font-size:42px}.footergrid{grid-template-columns:1fr}.footbottom{flex-direction:column;gap:8px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

@media(max-width:700px){.about-highlight{grid-template-columns:1fr}.split>div:first-child:before{display:none}}





/* FINAL WHATSAPP ICON CENTER */
.whatsapp{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.whatsapp:before{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
    background-position:center center !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
}
/* ===== ABOUT CAPABILITY CARDS ===== */
.card{position:relative;padding:28px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 35px rgba(10,34,64,.07);min-height:210px;overflow:hidden;transition:transform .4s var(--ease-premium),box-shadow .4s ease,border-color .4s ease}.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(10,34,64,.13);border-color:rgba(179,139,56,.35)}.card .icon{width:52px;height:52px;margin-bottom:18px}.card h3{margin:0 0 10px;color:var(--blue);font-family:'Playfair Display',serif;font-size:22px;line-height:1.25}.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}#documents .grid.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:100%}@media(max-width:900px){#documents .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){#documents .grid.g3{grid-template-columns:1fr}}













/* =========================================================
   TRAVEL PLANNING — NEW PREMIUM LAYOUT
   ONLY #packages SECTION
   ========================================================= */

#packages {
    background:
        linear-gradient(180deg, #f7f7f4 0%, #ffffff 100%);
    padding: 95px 0 105px;
}

/* Remove old split layout */
#packages .container.split {
    display: flex;
    flex-direction: column;
    gap: 42px;
    align-items: stretch;
}

/* Heading area */
#packages .reveal-left {
    width: 100%;
}

#packages .reveal-left > .eyebrow {
    display: block;
    color: #b38b38;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#packages .reveal-left > h2 {
    max-width: 700px;
    margin: 0 0 5px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    color: #0a2240;
}

/* Gold heading line */
#packages .reveal-left > h2::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    margin-top: 18px;
    background: linear-gradient(
        90deg,
        #b38b38,
        #d8b968
    );
}

/* Image becomes a large premium banner */
#packages .reveal-right {
    order: -1;
    width: 100%;
    height: 360px;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    box-shadow:
        0 25px 65px rgba(10,34,64,.16),
        0 0 0 1px rgba(179,139,56,.15);
}

/* Image */
#packages .reveal-right img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 30px;
    min-height: 0;
    transition: transform .8s cubic-bezier(.2,.75,.2,1);
}

/* Image zoom */
#packages .reveal-right:hover img {
    transform: scale(1.045);
}

/* Image dark premium overlay */
#packages .reveal-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,29,56,.32),
            transparent 55%,
            rgba(7,29,56,.08)
        );
    pointer-events: none;
}

/* Cards grid */
#packages .grid.g2 {
    width: 100%;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 12px;
}

/* Cards */
#packages .card {
    position: relative;
    min-height: 205px;
    padding: 28px 25px;
    background: #ffffff;
    border: 1px solid #e5e8ec;
    border-radius: 22px;
    box-shadow:
        0 12px 30px rgba(10,34,64,.065);
    overflow: hidden;
    transition:
        transform .45s cubic-bezier(.2,.75,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

/* Gold top accent */
#packages .card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #b38b38,
        #d8b968
    );
    transition: width .45s ease;
}

/* Decorative circle */
#packages .card::after {
    content: "";
    position: absolute;
    width: 105px;
    height: 105px;
    right: -50px;
    bottom: -50px;
    border: 1px solid rgba(179,139,56,.13);
    border-radius: 50%;
    transition: transform .5s ease;
}

/* Card hover */
#packages .card:hover {
    transform: translateY(-9px);
    border-color: rgba(179,139,56,.35);
    box-shadow:
        0 25px 50px rgba(10,34,64,.13);
}

#packages .card:hover::before {
    width: 100%;
}

#packages .card:hover::after {
    transform: scale(1.35);
}

/* Card number */
#packages .card::marker {
    display: none;
}

/* Card headings */
#packages .card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #0a2240;
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    line-height: 1.3;
}

/* Card descriptions */
#packages .card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #657180;
    font-size: 13px;
    line-height: 1.75;
}

/* Small gold indicator */
#packages .card h3::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 18px;
    border-radius: 5px;
    background: #b38b38;
    transition: width .4s ease;
}

#packages .card:hover h3::before {
    width: 48px;
}

/* Tablet */
@media (max-width: 1000px) {

    #packages .grid.g2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #packages .reveal-right {
        height: 320px;
    }
}

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

    #packages {
        padding: 65px 0 75px;
    }

    #packages .container.split {
        gap: 30px;
    }

    #packages .reveal-right {
        height: 250px;
        border-radius: 22px;
    }

    #packages .reveal-right img {
        border-radius: 22px;
    }

    #packages .grid.g2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #packages .card {
        min-height: 175px;
        padding: 25px;
    }

    #packages .reveal-left > h2 {
        font-size: 34px;
    }
}








/* =========================================================
   TRAVEL PLANNING — CLEAN PREMIUM CARD LAYOUT
   ========================================================= */

#packages {
    padding: 75px 0 85px;
    background: #f7f7f4;
}

#packages .container.split {
    display: block;
}

#packages .reveal-left {
    width: 100%;
}

#packages .reveal-left > .eyebrow {
    display: block;
    text-align: center;
    color: #b38b38;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#packages .reveal-left > h2 {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 42px;
    color: #0a2240;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.1;
}

#packages .reveal-left > h2::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    margin: 18px auto 0;
    background: linear-gradient(90deg,#b38b38,#d8b968);
}

/* 4 cards in one row */
#packages .grid.g2 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    width: 100%;
}

/* Card */
#packages .card {
    position: relative;
    min-height: 230px;
    padding: 30px 25px;
    background: #fff;
    border: 1px solid #e3e6e9;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(10,34,64,.07);
    overflow: hidden;
    transition:
        transform .4s cubic-bezier(.2,.75,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}

/* Number */
#packages .card::before {
    content: "01";
    position: absolute;
    top: 18px;
    right: 20px;
    font-family: 'Playfair Display',serif;
    font-size: 18px;
    font-weight: 700;
    color: rgba(179,139,56,.55);
}

/* Different numbers */
#packages .card:nth-child(2)::before {
    content: "02";
}

#packages .card:nth-child(3)::before {
    content: "03";
}

#packages .card:nth-child(4)::before {
    content: "04";
}

/* Gold line */
#packages .card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg,#b38b38,#d8b968);
    transition: width .4s ease;
}

/* Hover */
#packages .card:hover {
    transform: translateY(-8px);
    border-color: rgba(179,139,56,.4);
    box-shadow: 0 25px 50px rgba(10,34,64,.13);
}

#packages .card:hover::after {
    width: 100%;
}

/* Small gold marker */
#packages .card h3 {
    margin: 18px 0 12px;
    color: #0a2240;
    font-family: 'Playfair Display',serif;
    font-size: 21px;
    line-height: 1.3;
}

#packages .card h3::before {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 5px;
    background: #b38b38;
    transition: width .4s ease;
}

#packages .card:hover h3::before {
    width: 50px;
}

#packages .card p {
    margin: 0;
    color: #687482;
    font-size: 13px;
    line-height: 1.75;
}

/* Remove any remaining image space */
#packages .reveal-right {
    display: none !important;
}

/* Tablet */
@media (max-width: 1000px) {
    #packages .grid.g2 {
        grid-template-columns: repeat(2,1fr);
    }
}

/* Mobile */
@media (max-width: 560px) {
    #packages {
        padding: 60px 0 70px;
    }

    #packages .grid.g2 {
        grid-template-columns: 1fr;
    }

    #packages .reveal-left > h2 {
        font-size: 34px;
        margin-bottom: 30px;
    }

    #packages .card {
        min-height: 190px;
    }
}

















/* =========================================================
   GOLDEN VALLEY TRAVELS
   FINAL TRAVEL BENEFITS — 3 EQUAL CARDS
   SAFE & SECURE / QUICK PROCESSING / DEDICATED SUPPORT
   ========================================================= */

/* Target ONLY the last soft section before footer */
body > section.section.soft:last-of-type {
    width: 100% !important;
    display: block !important;
    padding: 80px 0 !important;
    background: linear-gradient(
        180deg,
        #f7f7f4 0%,
        #ffffff 100%
    ) !important;
}

/* Container */
body > section.section.soft:last-of-type > .container {
    width: min(1180px, 92%) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* FORCE 3 COLUMN GRID */
body > section.section.soft:last-of-type > .container > .grid.g3 {
    display: grid !important;

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

    gap: 24px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: stretch !important;
    justify-items: stretch !important;
}

/* =========================================================
   EACH CARD
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card {

    /* GRID RESET */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;

    margin: 0 !important;
    padding: 30px !important;

    box-sizing: border-box !important;

    /* VISIBILITY RESET */
    opacity: 1 !important;
    visibility: visible !important;

    /* TRANSFORM RESET */
    transform: none !important;

    /* DESIGN */
    position: relative !important;
    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e3e7eb !important;
    border-radius: 24px !important;

    box-shadow:
        0 12px 35px rgba(10,34,64,.07) !important;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease !important;
}

/* =========================================================
   GOLD TOP LINE
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card::before {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

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

    background:
        linear-gradient(
            90deg,
            #b38b38,
            #d8b968
        ) !important;
}

/* =========================================================
   DECORATIVE CIRCLE
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card::after {

    content: "" !important;

    position: absolute !important;

    right: -55px !important;
    bottom: -55px !important;

    width: 135px !important;
    height: 135px !important;

    border:
        1px solid rgba(179,139,56,.16) !important;

    border-radius: 50% !important;

    pointer-events: none !important;
}

/* =========================================================
   ICON
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card
> .icon {

    display: grid !important;

    place-items: center !important;

    width: 56px !important;
    height: 56px !important;

    min-width: 56px !important;
    max-width: 56px !important;

    min-height: 56px !important;
    max-height: 56px !important;

    margin:
        0 0 20px 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    border-radius: 17px !important;

    background: #f7f1df !important;

    color: #b38b38 !important;

    font-size: 22px !important;

    flex: 0 0 56px !important;
}

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

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card
> h3 {

    display: block !important;

    width: 100% !important;

    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    color: #0a2240 !important;

    font-family:
        'Playfair Display',
        serif !important;

    font-size: 21px !important;

    line-height: 1.3 !important;

    position: relative !important;

    z-index: 2 !important;
}

/* =========================================================
   GOLD SMALL LINE ABOVE HEADING
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card
> h3::before {

    content: "" !important;

    display: block !important;

    width: 32px !important;
    height: 3px !important;

    margin:
        0 0 14px 0 !important;

    padding: 0 !important;

    background: #b38b38 !important;

    border-radius: 5px !important;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card
> p {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #687482 !important;

    font-family:
        'DM Sans',
        sans-serif !important;

    font-size: 14px !important;

    line-height: 1.7 !important;

    position: relative !important;

    z-index: 2 !important;
}

/* =========================================================
   HOVER
   ========================================================= */

body > section.section.soft:last-of-type
> .container
> .grid.g3
> .card:hover {

    transform:
        translateY(-8px) !important;

    border-color:
        rgba(179,139,56,.45) !important;

    box-shadow:
        0 25px 55px
        rgba(10,34,64,.14) !important;
}

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

@media (max-width: 900px) {

    body > section.section.soft:last-of-type
    > .container
    > .grid.g3 {

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

        gap: 20px !important;
    }

    body > section.section.soft:last-of-type
    > .container
    > .grid.g3
    > .card {

        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }
}

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

@media (max-width: 560px) {

    body > section.section.soft:last-of-type {

        padding:
            60px 0 70px !important;
    }

    body > section.section.soft:last-of-type
    > .container
    > .grid.g3 {

        grid-template-columns:
            1fr !important;

        gap: 18px !important;
    }

    body > section.section.soft:last-of-type
    > .container
    > .grid.g3
    > .card {

        height: auto !important;

        min-height: 210px !important;

        max-height: none !important;
    }
}






/* =========================================================
   GOLDEN VALLEY TRAVELS
   CONTACT PAGE - FINAL PREMIUM LAYOUT
   CSS ONLY
   ========================================================= */

/* Contact page main split */
body:has(.split .image-card) .split {
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: 55px !important;
    align-items: center !important;
}

/* Left contact content */
body:has(.split .image-card) .split > div:first-child {
    position: relative !important;
    padding: 15px 0 !important;
}

/* Contact heading */
body:has(.split .image-card) .split > div:first-child h2 {
    font-size: clamp(40px, 4.5vw, 62px) !important;
    line-height: 1.03 !important;
    letter-spacing: -1.5px !important;
    margin: 0 0 35px !important;
    color: #0a2240 !important;
}

/* Gold heading accent */
body:has(.split .image-card) .split > div:first-child h2::after {
    content: "" !important;
    display: block !important;
    width: 65px !important;
    height: 3px !important;
    margin-top: 18px !important;
    background: linear-gradient(
        90deg,
        #b38b38,
        #d8b968
    ) !important;
}

/* Contact cards */
body:has(.split .image-card) .split > div:first-child .card {
    position: relative !important;
    width: 100% !important;
    min-height: 145px !important;
    padding: 25px 26px !important;
    margin-bottom: 17px !important;

    background: rgba(255,255,255,.98) !important;

    border: 1px solid #e4e7eb !important;
    border-radius: 20px !important;

    box-shadow:
        0 10px 30px rgba(10,34,64,.065) !important;

    overflow: hidden !important;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease !important;
}

/* Gold top border */
body:has(.split .image-card) .split > div:first-child .card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 4px !important;

    background: linear-gradient(
        90deg,
        #b38b38,
        #d8b968
    ) !important;

    transition: width .4s ease !important;
}

/* Card hover */
body:has(.split .image-card) .split > div:first-child .card:hover {
    transform: translateY(-7px) !important;

    border-color: rgba(179,139,56,.42) !important;

    box-shadow:
        0 22px 45px rgba(10,34,64,.13) !important;
}

body:has(.split .image-card) .split > div:first-child .card:hover::before {
    width: 100% !important;
}

/* Contact icons */
body:has(.split .image-card) .split > div:first-child .icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;

    margin-bottom: 15px !important;

    border-radius: 15px !important;

    background: #f7f1df !important;
    color: #b38b38 !important;

    font-size: 21px !important;

    transition: transform .35s ease !important;
}

body:has(.split .image-card) .split > div:first-child .card:hover .icon {
    transform: scale(1.08) rotate(-4deg) !important;
}

/* Card heading */
body:has(.split .image-card) .split > div:first-child .card h3 {
    margin: 0 0 5px !important;

    font-family: 'Playfair Display', serif !important;

    font-size: 21px !important;

    color: #0a2240 !important;
}

/* Card text */
body:has(.split .image-card) .split > div:first-child .card p {
    margin: 0 !important;

    font-size: 13px !important;

    color: #687482 !important;

    line-height: 1.65 !important;
}

/* =========================================================
   RIGHT SIDE IMAGE
   ========================================================= */

body:has(.split .image-card) .split > div:last-child {
    position: relative !important;
}

/* Image container */
body:has(.split .image-card) .split .image-card {
    position: relative !important;

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

    padding: 0 !important;

    border-radius: 30px !important;

    overflow: hidden !important;

    background: #f2f3f1 !important;

    border: 1px solid rgba(179,139,56,.18) !important;

    box-shadow:
        0 25px 65px rgba(10,34,64,.16) !important;

    transition:
        transform .5s ease,
        box-shadow .5s ease !important;
}

/* Image */
body:has(.split .image-card) .split .image-card img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition: transform .8s ease !important;
}

/* Image hover */
body:has(.split .image-card) .split .image-card:hover {
    transform: translateY(-6px) !important;

    box-shadow:
        0 35px 80px rgba(10,34,64,.20) !important;
}

body:has(.split .image-card) .split .image-card:hover img {
    transform: scale(1.055) !important;
}

/* Premium image overlay */
body:has(.split .image-card) .split .image-card::after {
    content: "" !important;

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

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(7,29,56,.35) 100%
        ) !important;

    pointer-events: none !important;
}

/* =========================================================
   DECORATIVE GOLD FRAME
   ========================================================= */

body:has(.split .image-card) .split > div:last-child::before {
    content: "" !important;

    position: absolute !important;

    top: -15px !important;
    right: -15px !important;

    width: 100px !important;
    height: 100px !important;

    border-top: 2px solid #b38b38 !important;
    border-right: 2px solid #b38b38 !important;

    border-radius: 0 25px 0 0 !important;

    z-index: 5 !important;

    pointer-events: none !important;
}

/* =========================================================
   CONTACT CARDS SPACING
   ========================================================= */

body:has(.split .image-card) .split > div:first-child .grid {
    gap: 17px !important;
}

body:has(.split .image-card) .split > div:first-child .grid .card:last-child {
    margin-bottom: 0 !important;
}

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

@media (max-width: 900px) {

    body:has(.split .image-card) .split {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    body:has(.split .image-card) .split .image-card {
        height: 400px !important;
        order: -1 !important;
    }

    body:has(.split .image-card) .split > div:first-child h2 {
        font-size: 46px !important;
    }
}

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

@media (max-width: 560px) {

    body:has(.split .image-card) .split {
        gap: 25px !important;
    }

    body:has(.split .image-card) .split .image-card {
        height: 280px !important;
        border-radius: 22px !important;
    }

    body:has(.split .image-card) .split > div:first-child h2 {
        font-size: 38px !important;
        margin-bottom: 28px !important;
    }

    body:has(.split .image-card) .split > div:first-child .card {
        min-height: 135px !important;
        padding: 22px !important;
        border-radius: 18px !important;
    }
}












/* =========================================================
   GOLDEN VALLEY TRAVELS
   CONTACT PAGE - FINAL ATTRACTIVE LAYOUT
   ========================================================= */

body:has(.split .image-card) .section {
    padding: 75px 0 90px !important;
}

/* Main Contact Layout */
body:has(.split .image-card) .split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 55px !important;
    align-items: center !important;
}

/* Left Side */
body:has(.split .image-card) .split > div:first-child {
    width: 100% !important;
    padding: 0 !important;
}

/* Heading */
body:has(.split .image-card) .split > div:first-child h2 {
    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1.08 !important;
    margin: 0 0 32px !important;
    color: #0a2240 !important;
}

/* Contact Cards Container */
body:has(.split .image-card) .split > div:first-child .card {
    width: 100% !important;
    min-height: 125px !important;
    margin: 0 0 16px !important;
    padding: 23px 25px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background: #ffffff !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 20px !important;

    box-shadow: 0 10px 30px rgba(10,34,64,.07) !important;

    position: relative !important;
    overflow: hidden !important;

    transition: all .35s ease !important;
}

/* Gold top line */
body:has(.split .image-card) .split > div:first-child .card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg,#b38b38,#d8b968) !important;
    transition: width .35s ease !important;
}

/* Hover */
body:has(.split .image-card) .split > div:first-child .card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(179,139,56,.45) !important;
    box-shadow: 0 20px 45px rgba(10,34,64,.13) !important;
}

body:has(.split .image-card) .split > div:first-child .card:hover::before {
    width: 100% !important;
}

/* Icons */
body:has(.split .image-card) .split > div:first-child .icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin: 0 0 12px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 14px !important;
    background: #f7f1df !important;
    color: #b38b38 !important;
    font-size: 20px !important;

    transition: .35s ease !important;
}

body:has(.split .image-card) .split > div:first-child .card:hover .icon {
    transform: scale(1.08) rotate(-4deg) !important;
}

/* Card Heading */
body:has(.split .image-card) .split > div:first-child .card h3 {
    margin: 0 0 4px !important;
    color: #0a2240 !important;
    font-family: 'Playfair Display',serif !important;
    font-size: 19px !important;
}

/* Card Text */
body:has(.split .image-card) .split > div:first-child .card p {
    margin: 0 !important;
    color: #687482 !important;
    font-size: 13px !important;
}

/* Right Image */
body:has(.split .image-card) .split > div:last-child {
    width: 100% !important;
}

body:has(.split .image-card) .split .image-card {
    width: 100% !important;
    height: 430px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 65px rgba(10,34,64,.16) !important;
    position: relative !important;
}

body:has(.split .image-card) .split .image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .8s ease !important;
}

body:has(.split .image-card) .split .image-card:hover img {
    transform: scale(1.05) !important;
}

/* Image premium border */
body:has(.split .image-card) .split .image-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 23px !important;
    pointer-events: none !important;
}

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

    body:has(.split .image-card) .split {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    body:has(.split .image-card) .split .image-card {
        height: 360px !important;
    }
}

@media (max-width: 560px) {

    body:has(.split .image-card) .section {
        padding: 55px 0 70px !important;
    }

    body:has(.split .image-card) .split {
        gap: 25px !important;
    }

    body:has(.split .image-card) .split .image-card {
        height: 280px !important;
        border-radius: 22px !important;
    }

    body:has(.split .image-card) .split > div:first-child .card {
        min-height: 115px !important;
        padding: 20px !important;
    }
}




/* REMOVE LANGUAGE OPTIONS FROM TOPBAR */
.toplinks > span {
    display: none !important;
}









/* =========================================================
   GOLDEN VALLEY TRAVELS
   MOBILE RESPONSIVE FINAL FIX
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .container {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* TOP BAR */
    .topbar {
        width: 100%;
        overflow: hidden;
    }

    .topbar .container {
        width: calc(100% - 32px) !important;
        justify-content: center;
    }

    /* HEADER */
    .nav {
        width: 100%;
    }

    .navin {
        width: calc(100% - 32px) !important;
        height: 70px !important;
        min-height: 70px;
    }

    .brand {
        min-width: 0 !important;
        max-width: calc(100% - 55px);
        overflow: hidden;
    }

    .brandmark {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }

    .brand > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px !important;
    }

    .brand small {
        font-size: 15px !important;
        white-space: nowrap;
    }

    .hamb {
        display: block !important;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
    }

    /* MOBILE MENU */
    .menu {
        left: 0 !important;
        right: 0 !important;
        top: 70px !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 15px 20px !important;
    }

    .menu a {
        width: 100%;
        box-sizing: border-box;
    }

    .menu .cta {
        width: auto;
        align-self: flex-start;
    }

    /* HERO */
    .hero {
        width: 100%;
        padding: 60px 0 !important;
        overflow: hidden;
    }

    .hero-grid {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero h1 {
        font-size: clamp(38px, 10vw, 58px) !important;
        line-height: 1.08 !important;
        overflow-wrap: break-word;
    }

    .hero p {
        font-size: 16px !important;
        max-width: 100% !important;
    }

    .hero-media {
        width: 100%;
        border-radius: 22px;
    }

    /* PAGE HERO */
    .pagehero {
        width: 100%;
        padding: 55px 0 !important;
        overflow: hidden;
    }

    .pagehero h1 {
        font-size: clamp(38px, 10vw, 52px) !important;
        overflow-wrap: break-word;
    }

    /* SECTIONS */
    .section {
        width: 100%;
        overflow: hidden;
    }

    .section-head {
        display: block !important;
    }

    .section-head .lead {
        margin-top: 18px;
    }

    /* GRIDS */
    .g4,
    .g3,
    .g2 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .card {
        width: 100%;
        max-width: 100%;
    }

    /* SPLIT */
    .split {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* FOOTER */
    .footer {
        width: 100%;
        overflow: hidden;
    }

    .footergrid {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footbottom {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* FLOATING WHATSAPP */
    .whatsapp {
        right: 16px !important;
        bottom: 16px !important;
        width: 54px !important;
        height: 54px !important;
    }
}


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

@media (max-width: 560px) {

    .container {
        width: calc(100% - 28px) !important;
    }

    .navin {
        width: calc(100% - 28px) !important;
        height: 64px !important;
    }

    .brandmark {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    .brand > span:last-child {
        font-size: 13px !important;
    }

    .brand small {
        font-size: 13px !important;
    }

    .hamb {
        width: 40px;
        height: 40px;
        font-size: 23px;
    }

    .menu {
        top: 64px !important;
    }

    .hero {
        padding: 48px 0 !important;
    }

    .section {
        padding: 55px 0 !important;
    }

    .section h2 {
        font-size: 34px !important;
    }

    .pagehero {
        padding: 45px 0 !important;
    }

    .pagehero h1 {
        font-size: 40px !important;
    }

    .fields {
        grid-template-columns: 1fr !important;
    }

    .field.full {
        grid-column: auto !important;
    }

    .image-card img {
        height: 220px !important;
    }

    .card {
        padding: 24px !important;
    }
}






/* =========================================================
   MOBILE HEADER - LOCKED AT TOP
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: auto !important;
        margin: 0 !important;

        z-index: 99999 !important;

        transform: none !important;
        translate: none !important;

        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;

        border-bottom: 1px solid #e5e7eb !important;
    }

    .navin {
        position: relative !important;
        width: calc(100% - 28px) !important;
        height: 64px !important;
        min-height: 64px !important;

        margin: 0 auto !important;

        transform: none !important;
        translate: none !important;
    }

    /* Prevent page content from going underneath fixed header */
    body {
        padding-top: 64px !important;
    }

    /* Keep logo and hamburger inside header */
    .brand,
    .brandmark,
    .hamb {
        transform: none !important;
        translate: none !important;
    }

    /* Do not allow scroll animation to move header */
    .nav,
    .nav * {
        animation-name: none !important;
    }
}










/* =========================================================
   MOBILE - TOPBAR ABOVE HEADER
   ========================================================= */

@media (max-width: 900px) {

    /* BLUE TOP BAR - ALWAYS ON TOP */
    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 37px !important;
        padding: 8px 0 !important;

        z-index: 100000 !important;

        transform: none !important;
        translate: none !important;
    }

    /* WHITE HEADER - BELOW BLUE BAR */
    .nav {
        position: fixed !important;

        top: 37px !important;
        left: 0 !important;
        right: 0 !important;

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

        z-index: 99999 !important;

        margin: 0 !important;
        transform: none !important;
        translate: none !important;

        background: rgba(255,255,255,.98) !important;

        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;

        border-bottom: 1px solid #e5e7eb !important;
    }

    .navin {
        height: 64px !important;
        min-height: 64px !important;

        transform: none !important;
        translate: none !important;
    }

    /* CONTENT STARTS BELOW BOTH BARS */
    body {
        padding-top: 101px !important;
        overflow-x: hidden !important;
    }

    /* Prevent header animation from moving it */
    .topbar,
    .nav {
        animation: none !important;
    }
}