/* ==========================================================
   ZAN PEARL PREMIUM HEADER
   Inspired by modern luxury travel navigation
========================================================== */

:root{
    --zh-navy:#044C48;
    --zh-navy2:#044C48;

    --zh-blue:#046157;
    --zh-sky:#08786C;
    --zh-turquoise:#0A8B7D;

    --zh-gold:#FC7507;

    --zh-white:#ffffff;
}


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

body .site-header{
    position:relative !important;

    width:100%;

    background:transparent !important;

    border-top:2px solid var(--zh-turquoise) !important;

    box-shadow:none !important;

    z-index:1000;
}


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

body .site-header .top-bar{
    display:block !important;

    min-height:68px;

    background:#081b25 !important;

    border:0 !important;
}


body .site-header .top-bar .nav-container{
    width:min(1480px,calc(100% - 42px)) !important;

    min-height:68px !important;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


body .site-header .top-left,
body .site-header .top-right{
    display:flex;

    align-items:center;

    gap:28px;
}


body .site-header .top-left a,
body .site-header .top-left span,
body .site-header .top-right > span,
body .site-header .top-right > a{
    color:#ffffff !important;

    font-family:'Manrope',Arial,sans-serif;

    font-size:14px;

    font-weight:500;

    text-decoration:none;

    opacity:1 !important;
}


body .site-header .top-left i{
    margin-right:9px;

    color:var(--zh-gold) !important;
}


body .site-header .top-right > a{
    width:32px;
    height:32px;

    display:flex;

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

    border-radius:50%;

    transition:.2s ease;
}


body .site-header .top-right > a:hover{
    background:rgba(8,185,199,.15);

    color:var(--zh-turquoise) !important;
}


body .site-header .top-language{
    display:flex;

    align-items:center;

    gap:10px;
}


body .site-header .top-language i{
    font-size:9px;
}


body .site-header .top-divider{
    width:1px;
    height:24px;

    background:rgba(255,255,255,.35);
}


/* ==========================================================
   MAIN NAVBAR
========================================================== */

body .site-header .main-navbar{
    position:relative !important;

    min-height:120px;

    background:
        linear-gradient(
            90deg,
            #046157 0%,
            #08786C 45%,
            #0A8B7D 100%
        ) !important;

    border:0 !important;

    box-shadow:
        0 8px 22px
        rgba(4,31,56,.12) !important;

    overflow:hidden;
}


body .site-header .main-navbar > .nav-container{
    width:100% !important;
    max-width:none !important;

    min-height:120px !important;

    margin:0 !important;

    padding:0 !important;

    display:grid !important;

    grid-template-columns:
        minmax(300px,370px)
        minmax(620px,1fr)
        minmax(290px,340px);

    align-items:center;
}


/* ==========================================================
   LEFT LOGO PANEL
========================================================== */

body .site-header .site-logo{
    position:relative;

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

    padding:
        15px
        50px
        15px
        52px !important;

    margin:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:#ffffff !important;

    border:0 !important;

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

    box-shadow:none !important;

    overflow:visible !important;

    z-index:3;
}


/* turquoise decorative layer */

body .site-header .site-logo::after{
    content:"";

    position:absolute;

    top:0;
    right:-17px;
    bottom:0;

    width:42px;

    z-index:-1;

    border-radius:
        0
        70px
        70px
        0;

    background:rgba(255,255,255,.35);
}


body .site-header .site-logo img{
    display:block !important;

    width:260px !important;
    max-width:260px !important;

    height:86px !important;
    max-height:86px !important;

    object-fit:contain !important;

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

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;
}


/* ==========================================================
   MENU CENTER
========================================================== */

body .site-header .main-menu{
    min-height:120px;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:39px !important;

    padding:0 32px;
}


body .site-header .main-menu a{
    position:relative;

    min-height:120px;

    padding:0 !important;

    display:flex;

    align-items:center;

    color:#ffffff !important;

    background:transparent !important;

    border:0 !important;

    font-family:'Manrope',Arial,sans-serif;

    font-size:15px !important;

    font-weight:700 !important;

    line-height:1;

    text-decoration:none;

    opacity:1 !important;

    white-space:nowrap;

    transition:.2s ease;
}


body .site-header .main-menu a:hover{
    color:#fff4c8 !important;
}


body .site-header .main-menu a.active{
    color:#ffffff !important;
}


/* active underline */

body .site-header .main-menu a.active::after{
    content:"";

    position:absolute;

    left:50%;

    bottom:30px;

    width:35px;

    height:3px;

    transform:translateX(-50%);

    border-radius:50px;

    background:var(--zh-gold) !important;
}


/* ==========================================================
   RIGHT CALL PANEL
========================================================== */

body .site-header .nav-actions{
    width:100%;

    min-height:120px;

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:0 !important;
}


body .site-header .header-call{
    position:relative;

    width:100%;

    min-height:120px;

    padding:16px 34px 16px 52px;

    display:flex;

    align-items:center;

    gap:17px;

    background:#ffffff;

    color:var(--zh-navy) !important;

    border-radius:
        65px
        0
        0
        65px;

    text-decoration:none;

    transition:.25s ease;
}


body .site-header .header-call::before{
    content:"";

    position:absolute;

    left:-17px;
    top:0;
    bottom:0;

    width:42px;

    z-index:-1;

    border-radius:
        70px
        0
        0
        70px;

    background:rgba(255,255,255,.35);
}


body .site-header .header-call-icon{
    width:60px;
    height:60px;

    flex:none;

    display:flex;

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

    border-radius:50%;

    border:2px solid var(--zh-turquoise);

    background:
        linear-gradient(
            135deg,
            #046157,
            #0A8B7D
        );

    color:#ffffff;

    font-size:20px;

    box-shadow:
        inset 0 0 0 5px #ffffff;
}


body .site-header .header-call-text{
    display:block;
}


body .site-header .header-call-text small{
    display:block;

    margin-bottom:5px;

    color:#687d8b;

    font-size:11px;

    font-weight:600;
}


body .site-header .header-call-text strong{
    display:block;

    color:var(--zh-navy);

    font-size:17px;

    font-weight:700;

    white-space:nowrap;
}


body .site-header .header-call:hover
.header-call-icon{
    transform:rotate(6deg);
}


/* ==========================================================
   MENU TOGGLE
========================================================== */

body .site-header .menu-toggle{
    display:none;

    width:48px;
    height:48px;

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

    border:0;

    border-radius:8px;

    background:var(--zh-gold);

    color:var(--zh-navy);

    font-size:19px;
}


/* ==========================================================
   STICKY
========================================================== */

body .site-header.sticky{
    background:transparent !important;
}

body .site-header.sticky .main-navbar{
    background:
        linear-gradient(
            90deg,
            #046157,
            #08786C,
            #0A8B7D
        ) !important;
}


/* ==========================================================
   DESKTOP SMALL
========================================================== */

@media(max-width:1250px){

    body .site-header .main-navbar > .nav-container{
        grid-template-columns:
            280px
            1fr
            270px;
    }

    body .site-header .site-logo{
        padding-left:30px !important;
        padding-right:38px !important;
    }

    body .site-header .site-logo img{
        width:220px !important;
        max-width:220px !important;
    }

    body .site-header .main-menu{
        gap:24px !important;

        padding:0 18px;
    }

    body .site-header .main-menu a{
        font-size:13px !important;
    }

    body .site-header .header-call{
        padding-left:38px;
        padding-right:20px;
    }

}


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

@media(max-width:980px){

    body .site-header .top-bar{
        display:none !important;
    }


    body .site-header .main-navbar{
        min-height:88px;
    }


    body .site-header .main-navbar > .nav-container{
        width:100% !important;

        min-height:88px !important;

        padding:0 18px !important;

        display:flex !important;

        align-items:center;

        justify-content:space-between;
    }


    body .site-header .site-logo{
        width:auto !important;

        height:88px !important;

        padding:8px 28px 8px 0 !important;

        background:transparent !important;

        border-radius:0 !important;
    }


    body .site-header .site-logo::after{
        display:none;
    }


    body .site-header .site-logo img{
        width:190px !important;

        max-width:190px !important;

        height:68px !important;
    }


    body .site-header .main-menu{
        position:absolute;

        top:88px;

        left:15px;
        right:15px;

        min-height:0;

        padding:14px;

        display:none !important;

        flex-direction:column;

        align-items:stretch !important;

        gap:0 !important;

        border-radius:12px;

        background:#044C48;

        box-shadow:
            0 18px 45px
            rgba(4,31,56,.22);

        z-index:9999;
    }


    body .site-header .main-menu.active{
        display:flex !important;
    }


    body .site-header .main-menu a{
        min-height:50px;

        padding:0 15px !important;

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

        font-size:14px !important;
    }


    body .site-header .main-menu a.active::after{
        display:none;
    }


    body .site-header .header-call{
        display:none !important;
    }


    body .site-header .nav-actions{
        width:auto;

        min-height:auto;
    }


    body .site-header .menu-toggle{
        display:flex !important;
    }

}


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

@media(max-width:600px){

    body .site-header .main-navbar > .nav-container{
        padding:0 14px !important;
    }

    body .site-header .site-logo img{
        width:160px !important;
        max-width:160px !important;

        height:58px !important;
    }

}



/* ==========================================================
   FINAL COMPACT HEADER
   Match reference proportions
========================================================== */


/* HEADER */

body .site-header{
    border-top:2px solid #0A8B7D !important;
}


/* ==========================================================
   TOP BAR - SMALLER
========================================================== */

body .site-header .top-bar{
    min-height:54px !important;

    height:54px !important;

    background:#071b25 !important;
}


body .site-header .top-bar .nav-container{
    min-height:54px !important;

    height:54px !important;

    width:min(1480px,calc(100% - 38px)) !important;
}


body .site-header .top-left,
body .site-header .top-right{
    gap:24px !important;
}


body .site-header .top-left a,
body .site-header .top-left span,
body .site-header .top-right > span,
body .site-header .top-right > a{
    font-size:12px !important;
}


/* ==========================================================
   MAIN NAVBAR - REDUCE HEIGHT
========================================================== */

body .site-header .main-navbar{
    min-height:92px !important;

    height:92px !important;

    overflow:visible !important;
}


body .site-header .main-navbar > .nav-container{
    min-height:92px !important;

    height:92px !important;

    grid-template-columns:
        minmax(300px,360px)
        minmax(590px,1fr)
        minmax(265px,315px) !important;
}


/* ==========================================================
   LEFT LOGO PANEL
========================================================== */

body .site-header .site-logo{
    height:92px !important;

    min-height:92px !important;

    padding:
        8px
        45px
        8px
        42px !important;

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

    background:#ffffff !important;
}


body .site-header .site-logo::after{
    right:-13px !important;

    width:31px !important;

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

    background:
        rgba(255,255,255,.34) !important;
}


body .site-header .site-logo img{
    width:255px !important;

    max-width:255px !important;

    height:72px !important;

    max-height:72px !important;

    object-fit:contain !important;
}


/* ==========================================================
   CENTER MENU
========================================================== */

body .site-header .main-menu{
    min-height:92px !important;

    height:92px !important;

    gap:38px !important;

    padding:0 28px !important;
}


body .site-header .main-menu a{
    min-height:92px !important;

    height:92px !important;

    font-size:14px !important;
}


body .site-header .main-menu a.active::after{
    bottom:18px !important;

    width:34px !important;

    height:3px !important;

    background:#FC7507 !important;
}


/* ==========================================================
   RIGHT CALL PANEL
========================================================== */

body .site-header .nav-actions{
    min-height:92px !important;

    height:92px !important;

    width:100% !important;
}


body .site-header .header-call{
    position:relative;

    width:100% !important;

    min-height:92px !important;

    height:92px !important;

    padding:
        10px
        26px
        10px
        44px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    gap:14px !important;

    background:#ffffff !important;

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

    color:#044C48 !important;

    text-decoration:none !important;
}


body .site-header .header-call::before{
    content:"";

    position:absolute;

    left:-13px !important;

    top:0;

    bottom:0;

    width:31px !important;

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

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

    z-index:-1;
}


body .site-header .header-call-icon{
    width:54px !important;

    height:54px !important;

    min-width:54px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:50% !important;

    border:
        2px solid
        #0A8B7D !important;

    background:
        linear-gradient(
            135deg,
            #046157,
            #0A8B7D
        ) !important;

    color:#ffffff !important;

    box-shadow:
        inset
        0 0 0 4px
        #ffffff !important;

    font-size:17px !important;
}


body .site-header .header-call-text{
    display:block !important;

    min-width:0;
}


body .site-header .header-call-text small{
    display:block !important;

    margin-bottom:3px !important;

    color:#657B89 !important;

    font-size:10px !important;

    line-height:1.2 !important;

    font-weight:600 !important;
}


body .site-header .header-call-text strong{
    display:block !important;

    color:#044C48 !important;

    font-size:15px !important;

    line-height:1.2 !important;

    font-weight:700 !important;

    white-space:nowrap;
}


/* ==========================================================
   REMOVE OLD PLAN TRIP IF ANY CSS / ELEMENT SURVIVES
========================================================== */

body .site-header .nav-actions > .book-btn{
    display:none !important;
}


/* ==========================================================
   DESKTOP 1250
========================================================== */

@media(max-width:1250px){

    body .site-header .main-navbar > .nav-container{

        grid-template-columns:
            275px
            minmax(500px,1fr)
            260px !important;
    }


    body .site-header .site-logo img{
        width:215px !important;

        max-width:215px !important;
    }


    body .site-header .main-menu{
        gap:23px !important;

        padding:
            0
            16px !important;
    }


    body .site-header .main-menu a{
        font-size:12px !important;
    }


    body .site-header .header-call{
        padding-left:35px !important;

        padding-right:15px !important;
    }


    body .site-header .header-call-icon{
        width:48px !important;

        min-width:48px !important;

        height:48px !important;
    }


    body .site-header .header-call-text strong{
        font-size:13px !important;
    }

}


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

@media(max-width:980px){

    body .site-header .top-bar{
        display:none !important;
    }


    body .site-header .main-navbar,
    body .site-header .main-navbar > .nav-container{
        min-height:76px !important;

        height:76px !important;
    }


    body .site-header .site-logo{
        height:76px !important;

        min-height:76px !important;

        padding:
            5px
            20px
            5px
            0 !important;

        background:transparent !important;

        border-radius:0 !important;
    }


    body .site-header .site-logo::after{
        display:none !important;
    }


    body .site-header .site-logo img{
        width:180px !important;

        max-width:180px !important;

        height:62px !important;
    }


    body .site-header .header-call{
        display:none !important;
    }


    body .site-header .nav-actions{
        width:auto !important;

        height:auto !important;

        min-height:0 !important;
    }


    body .site-header .main-menu{
        top:76px !important;

        height:auto !important;
    }

}


@media(max-width:600px){

    body .site-header .main-navbar,
    body .site-header .main-navbar > .nav-container{
        min-height:70px !important;

        height:70px !important;
    }


    body .site-header .site-logo{
        height:70px !important;
    }


    body .site-header .site-logo img{
        width:155px !important;

        max-width:155px !important;

        height:55px !important;
    }


    body .site-header .main-menu{
        top:70px !important;
    }

}


/* ==========================================================
   GO ZANZIBAR OFFICIAL BRAND OVERRIDE
   Logo palette
========================================================== */

body .site-header{
    border-top-color:#FC7507 !important;
}

body .site-header .top-bar{
    background:#033D3A !important;
}

body .site-header .main-navbar{
    background:
        linear-gradient(
            90deg,
            #044C48 0%,
            #046157 55%,
            #08786C 100%
        ) !important;
}

body .site-header .top-left i{
    color:#FDA008 !important;
}

body .site-header .main-menu a::after{
    background:#FDA008 !important;
}

body .site-header .book-btn{
    background:
        linear-gradient(
            135deg,
            #FC7507,
            #FDA008
        ) !important;

    color:#ffffff !important;
}

body .site-header .book-btn:hover{
    background:#E60311 !important;
    color:#ffffff !important;
}

/* ==========================================================
   GO ZANZIBAR OFFICIAL HEADER COLORS
========================================================== */

body .site-header{
    border-top:3px solid #E60311 !important;
}

body .site-header .top-bar{
    background:#033D3A !important;
}

body .site-header .main-navbar{
    background:#044C48 !important;
}

body .site-header .main-menu a{
    color:#FFFFFF !important;
}

body .site-header .main-menu a:hover,
body .site-header .main-menu a.active{
    color:#FDA008 !important;
}

body .site-header .main-menu a.active::after{
    background:#E60311 !important;
}

body .site-header .top-left i,
body .site-header .top-right i{
    color:#FDA008 !important;
}

body .site-header .header-call-icon{
    background:#FFFFFF !important;
    color:#E60311 !important;
}

body .site-header .book-btn{
    background:#E60311 !important;
    color:#FFFFFF !important;
}

body .site-header .book-btn:hover{
    background:#FC7507 !important;
    color:#FFFFFF !important;
}

body .site-header .site-logo{
    background:#FFFFFF !important;
}

body .site-header .site-logo::after{
    background:rgba(230,3,17,.10) !important;
}

/* =========================================================
   GO ZANZIBAR FINAL HEADER
   Logo colors: Dark Green + Red + Orange
========================================================= */

.site-header{
    border-top:4px solid #E60311 !important;
}

/* TOP BAR */
.site-header .top-bar{
    background:#023B38 !important;
    color:#fff !important;
}

.site-header .top-bar i{
    color:#E60311 !important;
}

.site-header .top-bar a,
.site-header .top-bar span{
    color:#fff !important;
}

/* MAIN NAVIGATION */
.site-header .main-navbar{
    background:linear-gradient(
        90deg,
        #044C48 0%,
        #046157 55%,
        #044C48 100%
    ) !important;
}

/* MENU */
.site-header .main-menu a{
    color:#fff !important;
}

.site-header .main-menu a:hover,
.site-header .main-menu a.active{
    color:#fff !important;
}

.site-header .main-menu a::after,
.site-header .main-menu a.active::after{
    background:#E60311 !important;
}

/* LOGO WHITE SIDE */
.site-header .site-logo{
    background:#fff !important;
}

/* CALL AREA */
.site-header .header-call,
.site-header .call-box,
.site-header .nav-call{
    background:#fff !important;
}

.site-header .header-call-icon,
.site-header .call-icon,
.site-header .phone-icon{
    background:#E60311 !important;
    border-color:#E60311 !important;
    color:#fff !important;
}

.site-header .header-call-icon i,
.site-header .call-icon i,
.site-header .phone-icon i{
    color:#fff !important;
}

/* BUTTONS */
.site-header .book-btn{
    background:#E60311 !important;
    color:#fff !important;
}

.site-header .book-btn:hover{
    background:#FC7507 !important;
    color:#fff !important;
}

/* MOBILE */
.site-header .menu-toggle{
    background:#E60311 !important;
    color:#fff !important;
}

/* ==========================================================
   GO ZANZIBAR PHONE ICON FINAL FIX
========================================================== */

.site-header .header-call{
    display:flex !important;
    align-items:center !important;
    gap:15px !important;
    text-decoration:none !important;
}

.site-header .header-call-icon{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    flex:0 0 58px !important;

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

    background:#E60311 !important;

    border:4px solid #ffffff !important;
    outline:2px solid #E60311 !important;

    border-radius:50% !important;

    color:#ffffff !important;

    font-size:21px !important;

    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    z-index:5 !important;

    box-shadow:
        0 8px 22px rgba(230,3,17,.22) !important;
}

.site-header .header-call-icon i,
.site-header .header-call-icon .fa-phone,
.site-header .header-call-icon .fa-solid{
    display:inline-block !important;

    color:#ffffff !important;

    font-size:21px !important;
    line-height:1 !important;

    visibility:visible !important;
    opacity:1 !important;

    transform:none !important;

    font-family:"Font Awesome 6 Free" !important;
    font-weight:900 !important;
}

.site-header .header-call-text{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
}

.site-header .header-call-text small{
    color:#48625F !important;
}

.site-header .header-call-text strong{
    color:#044C48 !important;
    font-weight:800 !important;
}

.site-header .header-call-icon{
    background:#E60311 !important;
    color:#fff !important;
}

.site-header .header-call-icon svg{
    display:block !important;
    width:24px !important;
    height:24px !important;
    fill:#fff !important;
    color:#fff !important;
}