/* =========================================================
   TROPICAL TWINS TOURISM
   COMMON NAVIGATION CSS
   Fixed Top Bar + Fixed Main Navigation
   ========================================================= */


/* =========================================================
   1. HEADER - FIXED
   ========================================================= */

.header,
.header.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    z-index: 99999 !important;

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

    transform: none !important;
}


/* =========================================================
   2. PURPLE TOP BAR
   ========================================================= */

.header .top_bar,
.header.scrolled .top_bar {

    display: block !important;

    position: relative !important;

    width: 100% !important;

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

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

    background: #350a4e !important;

    z-index: 100000 !important;

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

    transform: none !important;

    overflow: visible !important;

    transition: none !important;
}


/* Phone */

.header .top_bar .phone {
    line-height: 36px !important;
}


/* Social icons */

.header .top_bar .social {
    height: 36px !important;
}

.header .top_bar .social_list {
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* User Login/Register/Admin */

.header .top_bar .user_box {
    height: 36px !important;
}


/* =========================================================
   3. WHITE MAIN NAVIGATION
   ========================================================= */

.header .main_nav,
.header.scrolled .main_nav {

    position: relative !important;

    width: 100% !important;

    background: #ffffff !important;

    z-index: 99999 !important;

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

    transform: none !important;
}


/* Desktop navigation height */

.header .main_nav_col,
.header.scrolled .main_nav_col {

    height: 100px !important;
    min-height: 100px !important;

    position: relative !important;

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

    margin: 0 !important;
}


/* Prevent the original theme from changing
   navigation height when scrolling */

.header.scrolled .main_nav_col {
    height: 100px !important;
    min-height: 100px !important;
}


/* =========================================================
   4. LOGO
   ========================================================= */

.logo-img {

    width: 124px !important;

    height: auto !important;

    max-width: 124px !important;

    max-height: 80px !important;

    object-fit: contain !important;

    display: block !important;
}


/* =========================================================
   5. OFFERS MENU
   ========================================================= */

.offers_nav_item {
    position: relative;
}

.offers_nav_link {

    position: relative;

    display: inline-flex !important;

    align-items: center;

    gap: 3px;
}

.offers_fire {

    font-size: 14px;

    line-height: 1;
}

.offers_new {

    position: absolute;

    top: -17px;

    right: -16px;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    color: #fff;

    background: #fa6f1b;

    padding: 3px 4px;

    border-radius: 3px;

    animation: commonNavNewPulse 1.2s infinite;
}


@keyframes commonNavNewPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.12);
        opacity: .75;
    }
}


/* =========================================================
   6. IMPORTANT:
      PREVENT SCROLLED STATE FROM HIDING TOP BAR
   ========================================================= */

.header.scrolled .top_bar {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    height: 36px !important;

    min-height: 36px !important;

    max-height: 36px !important;

    overflow: visible !important;

    transform: none !important;

    margin: 0 !important;
}


/* =========================================================
   7. PREVENT HEADER HEIGHT COLLAPSE
   ========================================================= */

.header.scrolled {

    height: auto !important;

    min-height: 136px !important;

    max-height: none !important;
}


/* =========================================================
   8. BODY OFFSET
      36px TOP BAR + 100px NAVIGATION = 136px
   ========================================================= */

body {

    padding-top: 136px !important;
}


/* =========================================================
   9. MOBILE / TABLET
   ========================================================= */

@media only screen and (max-width: 991px) {

    /*
       Purple top bar remains visible
    */

    .header .top_bar,
    .header.scrolled .top_bar {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        height: 36px !important;

        min-height: 36px !important;

        max-height: 36px !important;
    }


    /*
       Tablet navigation
    */

    .header .main_nav_col,
    .header.scrolled .main_nav_col {

        height: 85px !important;

        min-height: 85px !important;
    }


    /*
       Header total height
       36 + 85 = 121px
    */

    .header.scrolled {

        min-height: 121px !important;
    }


    body {

        padding-top: 121px !important;
    }
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

    .header .top_bar,
    .header.scrolled .top_bar {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        height: 36px !important;

        min-height: 36px !important;

        max-height: 36px !important;
    }


    .header .main_nav_col,
    .header.scrolled .main_nav_col {

        height: 78px !important;

        min-height: 78px !important;
    }


    /*
       36 + 78 = 114px
    */

    .header.scrolled {

        min-height: 114px !important;
    }


    body {

        padding-top: 114px !important;
    }
}


/* =========================================================
   11. SMALL MOBILE
   ========================================================= */

@media only screen and (max-width: 575px) {

    .header .top_bar,
    .header.scrolled .top_bar {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        height: 36px !important;

        min-height: 36px !important;

        max-height: 36px !important;
    }


    .header .main_nav_col,
    .header.scrolled .main_nav_col {

        height: 70px !important;

        min-height: 70px !important;
    }


    .logo-img {

        width: 105px !important;

        max-width: 105px !important;

        height: auto !important;

        max-height: 60px !important;

        object-fit: contain !important;
    }


    /*
       36 + 70 = 106px
    */

    .header.scrolled {

        min-height: 106px !important;
    }


    body {

        padding-top: 106px !important;
    }
}


/* =========================================================
   12. VERY SMALL MOBILE
   ========================================================= */

@media only screen and (max-width: 400px) {

    .header .main_nav_col,
    .header.scrolled .main_nav_col {

        height: 70px !important;

        min-height: 70px !important;
    }


    body {

        padding-top: 106px !important;
    }
}


@media only screen and (max-width: 360px) {

    .header .main_nav_col,
    .header.scrolled .main_nav_col {

        height: 68px !important;

        min-height: 68px !important;
    }


    body {

        padding-top: 104px !important;
    }
}