/* =========================================================
   Mercury Abroad Consultants — Design tokens & base styles
========================================================= */
:root{
  --navy: #192b5c;
  --navy-soft: #24346b;
  --blue: #1d7cc2;
  --blue-soft: #e8f2fa;
  --amber: #e9a13c;
  --ink: #16233e;
  --ink-soft: #4b5773;
  --paper: #f6f8fb;
  --white: #ffffff;
  --line: #dfe6f0;

  --serif: "Iowan Old Style","Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --radius-s: 6px;
  --radius-m: 12px;
  --shadow-card: 0 1px 2px rgba(22,35,62,0.06), 0 10px 26px -14px rgba(22,35,62,0.18);
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--sen);
  color: var(--navy);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:600;
}
p{ margin:0 0 1em; color: var(--ink-soft); }
.container{ max-width: var(--container); margin:0 auto; padding:0 28px; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius: var(--radius-s);
  font-size:15px; font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  font-family: var(--sans);
}
.btn-primary{ background: var(--blue); color:#fff; }
.btn-primary:hover{ background:#1868a3; box-shadow:0 10px 20px -8px rgba(29,124,194,0.55); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color: rgba(255,255,255,0.55); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,0.12); }
.btn-outline{ background:transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover{ background: var(--blue); color:#fff; }
.btn-amber{ background: var(--amber); color: var(--navy); }
.btn-amber:hover{ background:#d78f22; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Top utility bar ---------- */
.topbar{ background: var(--navy); color:#dbe3f4; font-size:13px; }
.topbar-inner{ max-width: var(--container); margin:0 auto; padding:9px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar-left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar-item{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-item svg{ flex:none; }
.topbar-item.accent{ color: var(--amber); font-weight:700; }
.topbar-item a{ color:#dbe3f4; }
.topbar-item a:hover{ color:#fff; }
.topbar .btn{ padding:8px 18px; font-size:13px; }

/* ---------- Floating social sidebar ---------- */
.social-sidebar{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column;
}
.social-sidebar a{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  color:#fff; transition: width .15s ease, filter .15s ease;
}
.social-sidebar a:hover{ width:48px; filter:brightness(1.08); }
.social-sidebar a.fb{ background:#3b5998; }
.social-sidebar a.ig{ background:#d6336c; }
.social-sidebar a.wa{ background:#25b358; }
.social-sidebar a.li{ background:#0a66c2; }
.social-sidebar a.tg{ background:#1d7cc2; }
.social-sidebar a.yt{ background:#d1332e; }
@media (max-width: 980px){ .social-sidebar{ display:none; } }

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


/* ---------- TOP BAR ---------- */

.top-bar {
    width: 100%;
    background: #1c3166;
    color: #ffffff;
}

.top-bar-inner {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;

    min-height: 64px;

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

    gap: 30px;
}

.top-info {
    display: flex;
    align-items: center;
    gap: 30px;
}

.top-info a,
.top-item {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;
}

.top-info a:hover {
    color: #f4a72c;
}

.top-icon {
    color: #f4a72c;
    font-size: 21px;
    line-height: 1;
}


/* TOP BAR BUTTON */

.top-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 26px;

    background: #f2a633;
    color: #10234d;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition: all .25s ease;
}

.top-button:hover {
    background: #ffb43e;
    transform: translateY(-1px);
}


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

.site-header {
    width: 100%;

    position: sticky;
    top: 0;

    z-index: 1000;

    background: #ffffff;

    border-bottom: 1px solid #e8edf4;

    transition:
        box-shadow .25s ease,
        background .25s ease;
}


.header-inner {
    width: min(1280px, calc(100% - 40px));

    min-height: 140px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 25px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {
    width: 225px;
    height: 100px;

    flex: 0 0 225px;

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

    text-decoration: none;

    overflow: hidden;
}


.brand img {
    display: block;

    width: 210px;
    height: 90px;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: left center;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
    margin-left: auto;
}


.main-nav > ul {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    align-items: center;

    gap: 2px;
}


/* ---------- NAV LINKS ---------- */

.main-nav .nav-link {
    min-height: 52px;

    padding: 10px 13px;

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

    gap: 8px;

    color: #182846;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;

    border-radius: 7px;

    transition:
        color .2s ease,
        background .2s ease;
}


.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: #2184c5;
    background: #f5f9fd;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.has-dropdown {
    position: relative;
}


.caret {
    width: 8px;
    height: 8px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    margin-top: -4px;

    opacity: .75;

    transition: transform .2s ease;
}


.has-dropdown:hover .caret {
    transform: rotate(225deg);
    margin-top: 4px;
}


/* DROPDOWN BOX */

.dropdown {
    position: absolute;

    top: calc(100% + 5px);
    left: 0;

    width: 245px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #e4e9f0;

    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(20, 40, 80, .13);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}


.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.dropdown a {
    display: block;

    padding: 11px 13px;

    border-radius: 7px;

    color: #27364e;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        background .2s ease,
        color .2s ease;
}


.dropdown a:hover {
    background: #eef7fd;
    color: #2184c5;
}


/* =========================================================
   GET IN TOUCH BUTTON
   ========================================================= */

.nav-cta {
    margin-left: 10px;
}


.nav-button {
    min-width: 145px;
    min-height: 64px;

    padding: 0 24px;

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

    background: #2184c5;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

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


.nav-button:hover {
    background: #176fa9;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(33, 132, 197, .22);
}


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

.nav-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 8px;

    margin-left: auto;

    border: 1px solid #dfe6ef;

    background: #ffffff;

    border-radius: 8px;

    cursor: pointer;
}


.nav-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: #1c3166;

    border-radius: 3px;

    transition: all .25s ease;
}


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

.site-header.is-scrolled {
    box-shadow:
        0 8px 25px rgba(20, 40, 80, .10);
}


.site-header.is-scrolled .header-inner {
    min-height: 95px;
}


.site-header.is-scrolled .brand {
    height: 75px;
}


.site-header.is-scrolled .brand img {
    width: 175px;
    height: 70px;
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .header-inner {
        width: min(1200px, calc(100% - 32px));
        gap: 15px;
    }

    .brand {
        width: 200px;
        flex-basis: 200px;
    }

    .brand img {
        width: 190px;
    }

    .main-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;

        font-size: 14px;
    }

    .nav-button {
        min-width: 130px;
        padding-left: 18px;
        padding-right: 18px;
    }
}


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

@media (max-width: 1100px) {

    .top-info {
        gap: 18px;
    }

    .top-info a,
    .top-item {
        font-size: 12px;
    }

    .top-button {
        padding: 0 18px;
    }


    .header-inner {
        min-height: 90px;
    }


    .brand {
        width: 180px;
        flex-basis: 180px;
        height: 80px;
    }


    .brand img {
        width: 175px;
        height: 75px;
    }


    .main-nav .nav-link {
        padding: 8px;

        font-size: 13px;
    }


    .nav-button {
        min-width: 110px;
        min-height: 52px;

        padding: 0 12px;

        font-size: 13px;
    }
}


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

@media (max-width: 900px) {

    /* TOP BAR */

    .top-bar-inner {
        min-height: 52px;

        width: calc(100% - 24px);
    }


    .top-info {
        width: 100%;

        justify-content: center;

        gap: 15px;
    }


    .top-info a,
    .top-item {
        font-size: 11px;
    }


    .top-info a:nth-child(2) {
        display: none;
    }


    .top-item {
        display: none;
    }


    .top-button {
        display: none;
    }


    /* MAIN HEADER */

    .header-inner {
        width: calc(100% - 24px);

        min-height: 76px;

        gap: 10px;
    }


    /* LOGO */

    .brand {
        width: 175px;
        height: 70px;

        flex-basis: 175px;
    }


    .brand img {
        width: 165px;
        height: 65px;
    }


    /* HAMBURGER */

    .nav-toggle {
        display: block;
    }


    /* NAV */

    .main-nav {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        background: #ffffff;

        border-top: 1px solid #e8edf4;

        box-shadow:
            0 15px 30px rgba(20, 40, 80, .12);

        display: none;
    }


    .main-nav.active {
        display: block;
    }


    .main-nav > ul {
        display: block;

        width: 100%;

        padding: 10px 14px 18px;
    }


    .main-nav li {
        width: 100%;
    }


    .main-nav .nav-link {
        width: 100%;

        min-height: 48px;

        padding: 12px 14px;

        justify-content: space-between;

        font-size: 15px;

        border-bottom: 1px solid #f0f2f5;
    }


    /* MOBILE DROPDOWN */

    .dropdown {
        position: static;

        width: 100%;

        padding: 5px 0 5px 12px;

        border: none;

        box-shadow: none;

        border-radius: 0;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    .has-dropdown.open .dropdown {
        display: block;
    }


    .dropdown a {
        padding: 10px 14px;

        font-size: 14px;

        border-left: 2px solid #2184c5;
    }


    .has-dropdown:hover .caret {
        transform: rotate(45deg);
        margin-top: -4px;
    }


    .has-dropdown.open .caret {
        transform: rotate(225deg);
        margin-top: 4px;
    }


    /* CTA */

    .nav-cta {
        margin: 12px 0 0;
    }


    .nav-button {
        width: 100%;

        min-height: 50px;

        font-size: 15px;
    }
}


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

@media (max-width: 480px) {

    .top-bar-inner {
        justify-content: center;
    }


    .top-info a:first-child {
        display: flex;
    }


    .header-inner {
        min-height: 68px;
    }


    .brand {
        width: 155px;
        flex-basis: 155px;

        height: 62px;
    }


    .brand img {
        width: 150px;
        height: 58px;
    }


    .nav-toggle {
        width: 42px;
        height: 42px;
    }
}
/* ================= PROMO SLIDER ================= */

.promo-slider {
    position: relative;
    overflow: hidden;
}

/* Close Button */
.promo-close {
    position: absolute;
    top: 50%;
    right: 20px;

    transform: translateY(-50%);

    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;

    font-size: 24px;
    font-weight: 300;
    line-height: 28px;

    cursor: pointer;

    z-index: 20;

    transition: all 0.2s ease;
}

.promo-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.08);
}

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

.hero-slider {
    position: relative;

    width: 100%;
    min-height: 650px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: #071938;
}


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

.hero-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

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

    opacity: 0;

    transform: scale(1.08);

    transition:
        opacity 1s ease,
        transform 7s ease;

    z-index: 0;
}


.hero-bg.is-active {
    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 22, 52, .96) 0%,
            rgba(7, 29, 65, .86) 38%,
            rgba(7, 29, 65, .55) 65%,
            rgba(7, 29, 65, .20) 100%
        );
}


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

.hero-slide-content {
    position: absolute;

    inset: 0;

    width: 100%;

    display: flex;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    z-index: 2;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}


.hero-slide-content.is-active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   INNER
   ========================================================= */

.hero-inner {
    width: min(1280px, calc(100% - 50px));

    margin: 0 auto;

    padding: 70px 0 100px;
}


.hero-content {
    width: 100%;
    max-width: 690px;
}


/* =========================================================
   BADGE
   ========================================================= */

.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 18px 9px 10px;

    margin-bottom: 24px;

    border-radius: 999px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.28);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    backdrop-filter: blur(8px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);
}


.hero-badge .dot {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

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

    border-radius: 50%;

    background: #f2a633;

    color: #ffffff;
}


.hero-badge .dot svg {
    stroke: #ffffff;
}


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

.hero-content h1 {
    margin: 0 0 22px;

    max-width: 680px;

    color: #ffffff;

    font-family: var(--sans);
    

    font-size: clamp(
        38px,
        5vw,
        64px
    );

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.hero-content h1 em {
    color: #f2a633;

    font-style: italic;

    position: relative;
}


.hero-content h1 em::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -5px;

    height: 3px;

    border-radius: 10px;

    background: #f2a633;

    opacity: .7;
}


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

.hero-sub {
    max-width: 600px;

    margin: 0 0 32px;

    color: #dce6f5;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 400;
}


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

.hero-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 38px;
}


.hero-actions .btn {
    min-height: 54px;

    padding: 0 25px;

    display: inline-flex;

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

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

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


.hero-actions .btn-primary {
    background: #2184c5;

    color: #ffffff;

    border: 1px solid #2184c5;
}


.hero-actions .btn-primary:hover {
    background: #176fa9;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(33,132,197,.3);
}


.hero-actions .btn-ghost {
    background: rgba(255,255,255,.07);

    color: #ffffff;

    border: 1px solid rgba(255,255,255,.55);

    backdrop-filter: blur(5px);
}


.hero-actions .btn-ghost:hover {
    background: #ffffff;

    color: #142b59;

    transform: translateY(-3px);
}


/* =========================================================
   STATS
   ========================================================= */

.hero-stats {
    display: flex;

    align-items: stretch;

    gap: 0;
}


.hero-stats div {
    min-width: 150px;

    padding: 0 24px;

    border-left: 1px solid rgba(255,255,255,.20);
}


.hero-stats div:first-child {
    padding-left: 0;

    border-left: none;
}


.hero-stats strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-family: var(--serif);

    font-size: 27px;

    line-height: 1.2;
}


.hero-stats span {
    display: block;

    color: #aebfdb;

    font-size: 12.5px;

    line-height: 1.4;
}


/* =========================================================
   ANIMATION
   ========================================================= */

.hero-animate {
    opacity: 0;

    transform:
        translateY(35px)
        scale(.97);
}


/* active slide animation */

.hero-slide-content.is-active
.hero-badge {
    animation:
        heroUp .75s .10s cubic-bezier(.2,.8,.2,1) forwards;
}


.hero-slide-content.is-active h1 {
    animation:
        heroUp .85s .22s cubic-bezier(.2,.8,.2,1) forwards;
}


.hero-slide-content.is-active .hero-sub {
    animation:
        heroUp .85s .36s cubic-bezier(.2,.8,.2,1) forwards;
}


.hero-slide-content.is-active .hero-actions {
    animation:
        heroUp .85s .50s cubic-bezier(.2,.8,.2,1) forwards;
}


.hero-slide-content.is-active .hero-stats {
    animation:
        heroUp .85s .64s cubic-bezier(.2,.8,.2,1) forwards;
}


@keyframes heroUp {

    0% {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.97);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.01);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   FLOATING / JUMPING EFFECT
   ========================================================= */

.hero-badge {
    animation-duration: .8s;
}


.hero-slide-content.is-active .hero-badge {
    animation:
        heroUp .8s .1s forwards,
        badgeFloat 3s 1.2s ease-in-out infinite;
}


@keyframes badgeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


/* =========================================================
   CONTROLS
   ========================================================= */

.hero-controls {
    position: absolute;

    right: 30px;
    bottom: 30px;

    z-index: 5;

    display: flex;

    gap: 10px;
}


.hero-controls button {
    width: 46px;
    height: 46px;

    display: flex;

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

    padding: 0;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.45);

    background: rgba(255,255,255,.10);

    color: #ffffff;

    cursor: pointer;

    backdrop-filter: blur(6px);

    transition: all .25s ease;
}


.hero-controls button:hover {
    background: #2184c5;

    border-color: #2184c5;

    transform: translateY(-3px);
}


/* =========================================================
   DOTS
   ========================================================= */

.hero-dots {
    position: absolute;

    left: 50%;

    bottom: 38px;

    transform: translateX(-50%);

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;
}


.hero-dots button {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.45);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.hero-dots button.is-active {
    width: 28px;

    border-radius: 10px;

    background: #f2a633;
}


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

@media (max-width: 1100px) {

    .hero-slider {
        min-height: 620px;
    }


    .hero-inner {
        width: calc(100% - 50px);

        padding-top: 60px;
        padding-bottom: 100px;
    }


    .hero-content {
        max-width: 600px;
    }


    .hero-content h1 {
        font-size: clamp(38px, 5.5vw, 54px);
    }


    .hero-sub {
        font-size: 16px;

        max-width: 540px;
    }


    .hero-stats div {
        min-width: 125px;

        padding-left: 18px;
        padding-right: 18px;
    }

}


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

@media (max-width: 768px) {

    .hero-slider {
        min-height: 690px;

        align-items: flex-start;
    }


    .hero-bg {
        background-position: center center;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,22,52,.70) 0%,
                rgba(5,22,52,.87) 50%,
                rgba(5,22,52,.98) 100%
            );
    }


    .hero-slide-content {
        align-items: flex-start;
    }


    .hero-inner {
        width: calc(100% - 32px);

        padding: 65px 0 115px;

        margin: 0 auto;
    }


    .hero-content {
        max-width: 100%;

        text-align: left;
    }


    /* BADGE */

    .hero-badge {
        max-width: 100%;

        margin-bottom: 20px;

        padding: 7px 13px 7px 8px;

        font-size: 11.5px;
    }


    .hero-badge .dot {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }


    /* HEADING */

    .hero-content h1 {
        max-width: 100%;

        margin-bottom: 18px;

        font-size: clamp(34px, 9vw, 46px);

        line-height: 1.10;

        letter-spacing: -.7px;
    }


    .hero-content h1 em::after {
        height: 2px;

        bottom: -3px;
    }


    /* DESCRIPTION */

    .hero-sub {
        max-width: 100%;

        margin-bottom: 25px;

        font-size: 15px;

        line-height: 1.65;
    }


    /* BUTTONS */

    .hero-actions {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-bottom: 30px;
    }


    .hero-actions .btn {
        width: 100%;

        min-height: 51px;

        padding: 0 18px;

        font-size: 14px;
    }


    /* STATS */

    .hero-stats {
        display: grid;

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

        width: 100%;

        gap: 0;
    }


    .hero-stats div {
        min-width: 0;

        padding: 0 8px;

        text-align: center;
    }


    .hero-stats div:first-child {
        padding-left: 0;
    }


    .hero-stats div:last-child {
        padding-right: 0;
    }


    .hero-stats strong {
        font-size: 21px;
    }


    .hero-stats span {
        font-size: 10px;

        line-height: 1.35;
    }


    /* CONTROLS */

    .hero-controls {
        right: 16px;

        bottom: 18px;

        gap: 7px;
    }


    .hero-controls button {
        width: 40px;
        height: 40px;
    }


    /* DOTS */

    .hero-dots {
        left: 16px;

        bottom: 32px;

        transform: none;
    }


    .hero-dots button {
        width: 8px;
        height: 8px;
    }


    .hero-dots button.is-active {
        width: 24px;
    }

}


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

@media (max-width: 480px) {

    .hero-slider {
        min-height: 700px;
    }


    .hero-inner {
        width: calc(100% - 26px);

        padding-top: 50px;
    }


    .hero-content h1 {
        font-size: 35px;

        line-height: 1.08;
    }


    .hero-sub {
        font-size: 14px;

        line-height: 1.65;
    }


    .hero-badge {
        font-size: 10.5px;
    }


    .hero-stats strong {
        font-size: 19px;
    }


    .hero-stats span {
        font-size: 9px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .hero-bg,
    .hero-slide-content,
    .hero-animate,
    .hero-slide-content.is-active .hero-badge {
        animation: none !important;

        transition: none !important;

        transform: none !important;
    }

}




/* ---------- Slider (secondary promo banner strip used on interior pages) ---------- */
.promo-slider{
  position:relative; background: var(--navy); color:#fff; overflow:hidden;
}
.slide{
  display:none; padding:14px 28px; text-align:center; font-size:14.5px;
}
.slide.is-active{ display:flex; align-items:center; justify-content:center; gap:10px; animation: fadeIn .5s ease; }
.slide strong{ color: var(--amber); font-weight:700; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
.slider-dots{ position:absolute; right:20px; top:50%; transform:translateY(-50%); display:flex; gap:6px; }
.slider-dots button{ width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,0.35); cursor:pointer; padding:0; }
.slider-dots button.is-active{ background: var(--amber); width:16px; border-radius:4px; }

/* ---------- Places / destination cards ---------- */
.places-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.place-card{
  position:relative; border-radius: var(--radius-m); overflow:hidden; aspect-ratio:4/5;
  box-shadow: var(--shadow-card); transition: transform .2s ease;
}
.place-card:hover{ transform:translateY(-4px); }
.place-card img{ width:100%; height:100%; object-fit:cover; }
.place-card-label{
  position:absolute; left:0; right:0; bottom:0; padding:16px 14px;
  background: linear-gradient(180deg, transparent, rgba(11,23,48,0.88));
  color:#fff;
}
.place-card-label strong{ display:block; font-family:var(--serif); font-size:17px; }
.place-card-label span{ font-size:12px; color:#bcd8f2; }
@media (max-width: 980px){ .places-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 720px){ .places-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Section basics ---------- */
.section{ padding:76px 0; }
.section-tight{ padding:52px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(26px,3vw,36px); }
.on-navy{ background: var(--navy); color:#fff; }
.on-navy h2, .on-navy h3, .on-navy h4{ color:#fff; }
.on-navy p{ color:#c4cde3; }
.on-blue-tint{ background: var(--blue-soft); }

/* ---------- Services ---------- */
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-m);
  padding:26px 22px; transition: box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{ box-shadow: var(--shadow-card); border-color: transparent; }
.service-icon{ width:46px; height:46px; border-radius:10px; background: var(--blue-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.service-icon svg{ width:24px; height:24px; }
.service-card h3{ font-size:17px; margin-bottom:8px; }
.service-card p{ font-size:14.5px; margin-bottom:0; }

/* ---------- Countries chip strip ---------- */
.country-strip{ display:flex; flex-wrap:wrap; gap:12px; }
.country-chip{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:10px 18px 10px 12px; font-weight:600; font-size:14px; color:var(--navy);
}
.flag-dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; background: var(--blue); color:#fff; font-family:var(--serif); }

/* ---------- Why choose us / feature rows ---------- */
.feature-row{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.feature-row:first-of-type{ border-top:none; }
.feature-num{ font-family:var(--serif); color: var(--blue); font-size:15px; width:26px; flex:none; }
.feature-row h4{ font-size:16.5px; margin-bottom:4px; }
.feature-row p{ font-size:14.5px; margin:0; }

/* ---------- Bank grid ---------- */
.bank-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.bank-tile{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:16px 10px; text-align:center; font-weight:700; color:var(--navy); font-size:14px;
  letter-spacing:.2px;
}

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-m);
  padding:28px; box-shadow: var(--shadow-card);
}
.testi-quote{ font-family:var(--serif); font-size:18px; color:var(--navy); margin-bottom:18px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.avatar{ width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; }
.testi-person strong{ display:block; font-size:14.5px; color:var(--navy); }
.testi-person span{ font-size:12.5px; color:var(--ink-soft); }

/* ---------- Team ---------- */
.team-card{ text-align:center; }
.team-photo{ width:100%; aspect-ratio:1; border-radius:14px; background: var(--blue-soft); margin-bottom:14px; display:flex; align-items:center; justify-content:center; }
.team-photo span{ font-family:var(--serif); font-size:34px; color:var(--blue); }
.team-card h4{ margin-bottom:2px; font-size:16px; }
.team-card span{ font-size:13px; color:var(--blue); font-weight:600; }

/* ---------- Timeline (process) ---------- */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background: var(--line); }
.timeline-item{ position:relative; padding-bottom:30px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%; background: var(--blue); border:3px solid var(--blue-soft); }
.timeline-item h4{ font-size:16px; margin-bottom:4px; }
.timeline-item p{ font-size:14.5px; margin:0; }

/* ---------- Appointment form ---------- */
.appointment{ display:grid; grid-template-columns: 1fr 1.15fr; gap:0; background:#fff; border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-card); border:1px solid var(--line); }
.appointment-info{ background: var(--navy); color:#fff; padding:44px 38px; }
.appointment-info h3{ color:#fff; font-size:24px; }
.appointment-info p{ color:#c4cde3; }
.info-line{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:14.5px; color:#dbe3f4; }
.info-line svg{ flex:none; margin-top:2px; }
.appointment-form{ padding:44px 38px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color: var(--navy); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-family: var(--sans); font-size:14.5px; color: var(--ink); background:#fbfcfe;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.field textarea{ resize:vertical; min-height:96px; }
.form-note{ font-size:12.5px; color: var(--ink-soft); margin-top:10px; }
.form-success{ display:none; background:#eaf7ee; border:1px solid #b7e3c3; color:#256a3a; padding:12px 14px; border-radius:8px; font-size:14px; margin-bottom:16px; }
.form-success.show{ display:block; }

/* ---------- CTA band ---------- */
.cta-band{ background: linear-gradient(120deg, var(--navy), var(--navy-soft)); color:#fff; border-radius: var(--radius-m); padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h3{ color:#fff; margin-bottom:6px; font-size:24px; }
.cta-band p{ color:#c4cde3; margin:0; }

/* ---------- Page header (interior pages) ---------- */
.page-head{ background: var(--navy); color:#fff; padding:56px 0 46px; }
.page-head .container{ position:relative; }
.page-head h1{ color:#fff; font-size: clamp(28px,3.6vw,42px); margin-bottom:8px; }
.breadcrumb{ font-size:13px; color:#9fb0d6; }
.breadcrumb a{ color:#c4cde3; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Footer ---------- */
.site-footer{ background:#101c3d; color:#c4cde3; padding:60px 0 0; margin-top:40px;}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand p{ color:#93a2c6; font-size:14px; max-width:32ch; }
.footer-col h5{ color:#fff; font-family:var(--sans); font-size:13.5px; letter-spacing:.4px; margin-bottom:14px; }
.footer-col ul li{ margin-bottom:9px; }
.footer-col a{ font-size:14px; color:#93a2c6; }
.footer-col a:hover{ color:#fff; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background: var(--blue); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:20px 0; font-size:12.5px; color:#7c8bb3; flex-wrap:wrap; gap:8px; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.tag-pill{ display:inline-block; background: var(--blue-soft); color: var(--blue); font-weight:700; font-size:12.5px; padding:6px 12px; border-radius:999px; margin-bottom:14px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:360px; margin:0 auto; }
  .appointment{ grid-template-columns:1fr; }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .bank-grid{ grid-template-columns:repeat(4,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:fixed; inset:0 0 0 auto; top:0; width:86%; max-width:340px; height:100vh;
    background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,0.15);
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
    padding:80px 22px 30px;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-nav a.nav-link{ padding:13px 6px; border-bottom:1px solid var(--line); border-radius:0; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; padding:0 0 0 12px; }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-cta{ margin:14px 0 0; }
  .grid-5{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .bank-grid{ grid-template-columns:repeat(3,1fr); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
}

















/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    width: 100%;
    background: #1c3166;
    color: #fff;
}

.topbar-inner {
    width: min(1180px, calc(100% - 40px));
    min-height: 42px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #d8e2ef;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    white-space: nowrap;
}

.topbar-item svg {
    flex-shrink: 0;
}

.topbar-item a {
    color: #d8e2ef;
    text-decoration: none;
    transition: color .25s ease;
}

.topbar-item a:hover {
    color: #f2a633;
}


/* BOOK BUTTON */

.topbar .btn-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 15px;

    background: #f2a633;
    color: #1c3166;

    border-radius: 3px;
    text-decoration: none;

    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;

    transition: .25s ease;
}

.topbar .btn-amber:hover {
    background: #fff;
    transform: translateY(-1px);
}


/* =========================================================
   MOBILE — HIDE TOPBAR COMPLETELY
========================================================= */

@media (max-width: 768px) {

    .topbar {
        display: none !important;
    }

}