/* =========================================================
   TRAVEL09 GLOBAL HEADER
   File:
   /home/travel09.com/public_html/assets/css/style.css
   ========================================================= */

:root{
    --t09-navy:#071E32;
    --t09-navy-light:#0D304C;
    --t09-blue:#0E7490;
    --t09-cyan:#15A4C8;
    --t09-white:#FFFFFF;

    --t09-line:rgba(255,255,255,.12);

    --t09-text:#183247;
    --t09-muted:#778A9A;

    --t09-topbar:#041725;
    --t09-shadow:0 8px 28px rgba(0,0,0,.10);
}

/* =========================================================
   BASE
   ========================================================= */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    color:var(--t09-text);

    background:#FFFFFF;

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:16px;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body.t09-menu-open{
    overflow:hidden;
}

.t09-header,
.t09-header *{
    box-sizing:border-box;
}

.t09-header a,
.t09-topbar a,
.t09-mobile-nav a{
    -webkit-tap-highlight-color:transparent;
}

.t09-header a:focus-visible,
.t09-header button:focus-visible,
.t09-topbar a:focus-visible,
.t09-mobile-nav a:focus-visible{
    outline:3px solid rgba(21,164,200,.35);
    outline-offset:3px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.t09-topbar{
    position:relative;

    z-index:102;

    background:var(--t09-topbar);

    color:#A9BDCA;
}

.t09-topbar-inner{
    width:min(
        calc(100% - 80px),
        1920px
    );

    min-height:40px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;
}

.t09-topbar-left,
.t09-topbar-right{
    display:flex;

    align-items:center;

    gap:22px;
}

.t09-topbar a{
    color:#B7C9D4;

    text-decoration:none;

    font-size:13px;

    line-height:1.4;

    font-weight:650;

    transition:
        color .2s ease;
}

.t09-topbar a:hover{
    color:#FFFFFF;
}

.t09-topbar-label{
    color:#9FB6C4;

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;
}


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

.t09-header{
    position:sticky;

    top:0;

    z-index:100;

    border-bottom:
        1px solid
        var(--t09-line);

    background:
        rgba(7,30,50,.98);

    box-shadow:
        var(--t09-shadow);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.t09-header-inner{
    width:min(
        calc(100% - 80px),
        1920px
    );

    min-height:88px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}


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

.t09-logo{
    flex:none;

    display:flex;

    align-items:center;

    gap:13px;

    color:#FFFFFF;

    text-decoration:none;
}

.t09-logo-mark{
    width:54px;

    height:54px;

    display:grid;

    place-items:center;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            var(--t09-cyan),
            var(--t09-blue)
        );

    color:#FFFFFF;

    box-shadow:
        0 10px 28px
        rgba(21,164,200,.28);

    font-size:20px;

    font-weight:900;

    letter-spacing:-.04em;
}

.t09-logo-copy{
    line-height:1;
}

.t09-logo-copy strong{
    display:block;

    color:#FFFFFF;

    font-size:26px;

    font-weight:800;

    letter-spacing:-.04em;
}

.t09-logo-copy small{
    display:block;

    margin-top:7px;

    color:#9FB7C5;

    font-size:11px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:.13em;

    text-transform:uppercase;
}


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

.t09-nav{
    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;
}

.t09-nav-item{
    position:relative;
}

.t09-nav-link{
    min-height:46px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:
        0 14px;

    border-radius:10px;

    color:#D3E1E8;

    text-decoration:none;

    white-space:nowrap;

    font-size:14px;

    line-height:1;

    font-weight:700;

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

.t09-nav-link:hover{
    background:
        rgba(255,255,255,.08);

    color:#FFFFFF;
}

.t09-nav-link.active{
    background:
        rgba(255,255,255,.07);

    color:#FFFFFF;
}

.t09-nav-link.active::after{
    content:"";

    position:absolute;

    left:14px;

    right:14px;

    bottom:3px;

    height:2px;

    border-radius:10px;

    background:
        var(--t09-cyan);
}


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

.t09-dropdown-menu{
    position:absolute;

    top:
        calc(100% + 10px);

    left:0;

    width:290px;

    visibility:hidden;

    opacity:0;

    transform:
        translateY(9px);

    padding:10px;

    border:
        1px solid
        #DFE7ED;

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 22px 60px
        rgba(5,31,51,.18);

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

.t09-nav-item:hover
.t09-dropdown-menu,
.t09-nav-item:focus-within
.t09-dropdown-menu{
    visibility:visible;

    opacity:1;

    transform:
        translateY(0);
}

.t09-dropdown-menu a{
    display:block;

    padding:
        13px 14px;

    border-radius:10px;

    color:#40596D;

    text-decoration:none;

    font-size:13px;

    line-height:1.45;

    font-weight:700;

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

.t09-dropdown-menu a:hover{
    background:#F0F8FA;

    color:var(--t09-blue);
}

.t09-dropdown-menu strong{
    display:block;

    margin-bottom:4px;

    color:#1D3B50;

    font-size:14px;

    line-height:1.35;
}

.t09-dropdown-menu span{
    display:block;

    color:#8393A0;

    font-size:12px;

    line-height:1.5;

    font-weight:500;
}


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

.t09-header-actions{
    flex:none;

    display:flex;

    align-items:center;

    gap:9px;
}

.t09-header-action{
    min-height:46px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        0 16px;

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

    border-radius:10px;

    color:#E3EDF3;

    background:
        transparent;

    text-decoration:none;

    cursor:pointer;

    font:inherit;

    font-size:13px;

    font-weight:800;

    white-space:nowrap;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.t09-header-action:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(255,255,255,.30);

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

    color:#FFFFFF;
}

.t09-header-action.primary{
    border-color:
        var(--t09-cyan);

    background:
        linear-gradient(
            135deg,
            var(--t09-blue),
            var(--t09-cyan)
        );

    color:#FFFFFF;

    box-shadow:
        0 9px 24px
        rgba(21,164,200,.22);
}

.t09-header-action.primary:hover{
    box-shadow:
        0 13px 30px
        rgba(21,164,200,.30);
}

.t09-account-name{
    max-width:125px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


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

.t09-menu-button{
    width:46px;

    min-height:46px;

    padding:0;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

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

    border-radius:10px;

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

    cursor:pointer;
}

.t09-menu-button span{
    width:19px;

    height:2px;

    border-radius:3px;

    background:#FFFFFF;
}


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

.t09-mobile-nav{
    display:none;

    position:fixed;

    z-index:99;

    top:0;

    right:0;

    bottom:0;

    width:min(88vw,400px);

    padding:
        112px 20px 32px;

    overflow-y:auto;

    background:
        linear-gradient(
            180deg,
            #071E32,
            #061827
        );

    box-shadow:
        -20px 0 60px
        rgba(0,0,0,.28);

    transform:
        translateX(102%);

    transition:
        transform .25s ease;
}

.t09-mobile-nav.open{
    transform:
        translateX(0);
}

.t09-mobile-link{
    min-height:52px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
        13px 12px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    color:#E1EDF3;

    text-decoration:none;

    font-size:15px;

    line-height:1.4;

    font-weight:700;
}

.t09-mobile-subtitle{
    padding:
        24px 12px 8px;

    color:#7895A7;

    font-size:11px;

    font-weight:850;

    letter-spacing:.1em;

    text-transform:uppercase;
}

/* =========================================================
   MOBILE NAVIGATION OVERLAY
   ========================================================= */

.t09-mobile-overlay{
    display:none;

    position:fixed;

    z-index:98;

    inset:0;

    background:
        rgba(2,15,25,.68);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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


.t09-mobile-overlay.open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

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

@media(max-width:1300px){

    .t09-header-inner,
    .t09-topbar-inner{
        width:
            calc(100% - 48px);
    }

    .t09-nav-link{
        padding:
            0 11px;

        font-size:13px;
    }

    .t09-header-action{
        padding:
            0 13px;

        font-size:12px;
    }
}


@media(max-width:1180px){

    .t09-nav{
        display:none;
    }

    .t09-menu-button{
        display:flex;
    }

    .t09-mobile-nav,
    .t09-mobile-overlay{
        display:block;
    }
}


@media(max-width:760px){

    .t09-topbar{
        display:none;
    }

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

        min-height:76px;

        gap:12px;
    }

    .t09-logo{
        gap:10px;
    }

    .t09-logo-mark{
        width:46px;

        height:46px;

        border-radius:14px;

        font-size:18px;
    }

    .t09-logo-copy strong{
        font-size:22px;
    }

    .t09-logo-copy small{
        display:none;
    }

    .t09-header-actions{
        gap:7px;
    }

    .t09-header-action{
        min-height:42px;

        font-size:13px;
    }

    .t09-header-action.contact{
        display:none;
    }

    .t09-header-action.account{
        display:none;
    }

    .t09-header-action.primary{
        min-height:42px;

        padding:
            0 13px;
    }

    .t09-menu-button{
        width:44px;

        min-height:44px;
    }

    .t09-mobile-nav{
        width:min(90vw,390px);

        padding:
            96px 16px 28px;
    }
}


@media(max-width:520px){

    .t09-logo-copy strong{
        font-size:20px;
    }

    .t09-header-action.primary{
        padding:
            0 11px;

        font-size:12px;
    }
}


@media(max-width:460px){

    .t09-header-action.primary{
        display:none;
    }

    .t09-header-inner{
        min-height:72px;
    }

    .t09-logo-mark{
        width:44px;

        height:44px;
    }

    .t09-logo-copy strong{
        font-size:19px;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media(pointer:coarse){

    .t09-header-action,
    .t09-menu-button,
    .t09-mobile-link{
        min-height:44px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .t09-header *,
    .t09-topbar *,
    .t09-mobile-nav,
    .t09-mobile-overlay{
        transition:none !important;
    }
}