/* =====================================================================
   CHUM HEADER
   AMAZON LAYOUT + APPLE LIQUID GLASS SEARCH
   FILE: public/assets/css/header.css
   ===================================================================== */


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

#navbar_scroll_fixed {
    --chum-pink: #e84164;
    --chum-pink-dark: #d9365a;
    --chum-navy: #1b1c64;
    --chum-text: #25272d;
    --chum-muted: #747781;

    position: sticky;
    top: 0;
    left: 0;

    z-index: 9999;

    width: 100%;

    margin: 0;
    padding: 0;

    color: var(--chum-text);

    /*
       IMPORTANT:
       THIS IS THE HEADER BACKGROUND.

       THE TOP NAVBAR ITSELF HAS NO BOX.
    */
    background:
        radial-gradient(
            circle at 7% -30%,
            rgba(62, 210, 255, 0.78) 0%,
            rgba(73, 202, 255, 0.34) 28%,
            transparent 48%
        ),
        radial-gradient(
            circle at 94% -20%,
            rgba(255, 119, 178, 0.62) 0%,
            rgba(255, 142, 192, 0.30) 31%,
            transparent 53%
        ),
        linear-gradient(
            105deg,
            #c6eff8 0%,
            #d9edf7 35%,
            #e9e5f6 67%,
            #f7d5e5 100%
        );

    font-family:
        "Avenir Next",
        Avenir,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

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


/* =====================================================================
   HEADER-SCOPED RESET
   ===================================================================== */

#navbar_scroll_fixed,
#navbar_scroll_fixed *,
#navbar_scroll_fixed *::before,
#navbar_scroll_fixed *::after {
    box-sizing: border-box;
}


#navbar_scroll_fixed a {
    text-decoration: none;
}


#navbar_scroll_fixed button,
#navbar_scroll_fixed input {
    font: inherit;
}


/* =====================================================================
   REMOVE TOP NAVBAR BOX COMPLETELY
   ===================================================================== */

#navbar_scroll_fixed .chum-navbar {
    position: relative;

    width: 100%;

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

    background: transparent !important;

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

    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    overflow: visible;
}


#navbar_scroll_fixed .chum-navbar::before,
#navbar_scroll_fixed .chum-navbar::after {
    content: none !important;
    display: none !important;
}


/* =====================================================================
   MAIN CONTENT WRAPPER

   WIDE WRAPPER:
   - NOT FULL LEFT EDGE
   - NOT NARROW/CENTERED LIKE PREVIOUS VERSION
   ===================================================================== */

#navbar_scroll_fixed .chum-navbar-container {
    width: calc(100% - 48px);
    max-width: 1680px;

    min-height: 76px;

    margin: 0 auto !important;

    padding: 8px 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    gap: 30px;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


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

#navbar_scroll_fixed .side_menu_div {
    flex: 0 0 215px !important;

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

    min-height: 60px;

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

    display: flex !important;

    align-items: center;

    justify-content: flex-start;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =====================================================================
   HAMBURGER
   DESKTOP = COMPLETELY HIDDEN
   ===================================================================== */

#navbar_scroll_fixed .header_side_menu {
    display: none !important;
}


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

   LARGE.
   DIRECTLY ON BACKGROUND.
   ZERO BOX.
   ===================================================================== */

#navbar_scroll_fixed .navbar-brand {
    display: inline-flex !important;

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

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

    background: transparent !important;

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

    box-shadow: none !important;
}


#navbar_scroll_fixed .navbar-brand::before,
#navbar_scroll_fixed .navbar-brand::after {
    content: none !important;
    display: none !important;
}


#navbar_scroll_fixed .navbar-brand img {
    display: block !important;

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

    height: auto !important;

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

    object-fit: contain;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =====================================================================
   SEARCH + ACTION AREA
   ===================================================================== */

#navbar_scroll_fixed .navbar-collapse {
    flex: 1 1 auto !important;

    width: auto !important;
    max-width: none !important;

    min-width: 0;

    height: auto !important;

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

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

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

    gap: 23px;

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

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =====================================================================
   SEARCH WIDTH

   IMPORTANT:
   CONTROLLED AMAZON-LIKE WIDTH.
   ===================================================================== */

#navbar_scroll_fixed .header_keyword_listing {
    position: relative;

    flex: 0 1 720px !important;

    width: min(720px, 52vw) !important;
    max-width: 720px !important;

    min-width: 390px;

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

    background: transparent !important;
}


#navbar_scroll_fixed .header_form {
    width: 100% !important;

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


/* =====================================================================
   LIQUID GLASS SEARCH BAR

   THIS IS WHERE THE GLASS EFFECT SHOULD BE STRONG.
   ===================================================================== */

#navbar_scroll_fixed
.header_form
.form-group {
    position: relative !important;

    width: 100% !important;

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

    margin: 0 !important;

    padding:
        0
        10px
        0
        18px !important;

    display: flex !important;

    align-items: center !important;

    gap: 13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.46) !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.31) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.22) 100%
        ) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(190%);

    backdrop-filter:
        blur(22px)
        saturate(190%);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.83),

        inset
        0
        -1px
        0
        rgba(255, 255, 255, 0.12),

        0
        5px
        18px
        rgba(40, 50, 68, 0.055);

    overflow: hidden;

    transition:
        background 170ms ease,
        box-shadow 170ms ease;
}


/* liquid reflection */

#navbar_scroll_fixed
.header_form
.form-group::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;

    width: 54%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.94),
            transparent
        );

    pointer-events: none;
}


#navbar_scroll_fixed
.header_form
.form-group::after {
    content: "";

    position: absolute;

    right: -40px;
    top: -65px;

    width: 150px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 154, 197, 0.11),
            transparent 70%
        );

    pointer-events: none;
}


#navbar_scroll_fixed
.header_form
.form-group:hover {
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.38),
            rgba(255, 255, 255, 0.19)
        ) !important;
}


#navbar_scroll_fixed
.header_form
.form-group:focus-within {
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.43),
            rgba(255, 255, 255, 0.20)
        ) !important;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.90),

        0
        0
        0
        3px
        rgba(232, 65, 100, 0.08),

        0
        8px
        22px
        rgba(38, 46, 65, 0.07);
}


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

#navbar_scroll_fixed .search_icon {
    position: relative;

    z-index: 2;

    display: block !important;

    flex: 0 0 19px;

    width: 19px !important;
    height: 19px !important;

    max-width: 19px !important;

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

    object-fit: contain;

    background: transparent !important;
}


/* =====================================================================
   SEARCH INPUT
   ===================================================================== */

#navbar_scroll_fixed
.header_form
.form-control {
    position: relative;

    z-index: 2;

    min-width: 0;

    width: 100%;

    height: 48px !important;

    flex: 1;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #292b32 !important;

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

    line-height: 48px !important;

    -webkit-appearance: none;
    appearance: none;
}


#navbar_scroll_fixed
.header_form
.form-control::placeholder {
    color:
        rgba(56, 59, 67, 0.58) !important;

    opacity: 1;
}


#navbar_scroll_fixed
.header_form
.form-control::-webkit-search-cancel-button,
#navbar_scroll_fixed
.header_form
.form-control::-webkit-search-decoration {
    display: none;

    -webkit-appearance: none;
}


/* =====================================================================
   MICROPHONE

   SIMPLE ICON.
   NO BOX.
   ===================================================================== */

#navbar_scroll_fixed .header_microphone {
    position: relative;

    z-index: 2;

    flex: 0 0 34px;

    width: 34px !important;
    height: 34px !important;

    min-width: 34px;

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

    display: grid !important;

    place-items: center;

    border: 0 !important;

    border-radius: 50%;

    outline: 0;

    background: transparent !important;

    box-shadow: none !important;

    color: #696d75;

    cursor: pointer;
}


#navbar_scroll_fixed
.header_microphone svg {
    width: 19px !important;
    height: 19px !important;
}


#navbar_scroll_fixed
.header_microphone svg rect,
#navbar_scroll_fixed
.header_microphone svg path {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


#navbar_scroll_fixed
.header_microphone:hover {
    color: var(--chum-pink);

    background:
        rgba(255, 255, 255, 0.20) !important;
}


#navbar_scroll_fixed
.header_microphone.is-listening {
    color: #ffffff;

    background:
        var(--chum-pink) !important;
}


/* =====================================================================
   HOW IT WORKS

   NO BOX.
   ===================================================================== */

#navbar_scroll_fixed .header_how_area {
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    height: 48px;

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

    display: flex !important;

    align-items: center;

    background: transparent !important;
}


#navbar_scroll_fixed .how_it_works {
    height: 44px;

    min-height: 44px;

    margin: 0;

    padding:
        0
        7px;

    display: inline-flex !important;

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

    gap: 8px;

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

    background: transparent !important;

    box-shadow: none !important;

    color: var(--chum-text) !important;

    white-space: nowrap;
}


#navbar_scroll_fixed
.how_it_works img {
    display: block !important;

    width: 19px !important;
    height: 19px !important;

    max-width: 19px !important;

    margin: 0 !important;
}


#navbar_scroll_fixed .how_to {
    display: inline-block !important;

    color: #30323a;

    font-size: 13px;
    font-weight: 650;

    white-space: nowrap;
}


#navbar_scroll_fixed
.how_it_works:hover
.how_to {
    color: var(--chum-pink);
}


/* =====================================================================
   SIGN IN

   DIRECTLY AFTER HOW IT WORKS.
   NO BOX.
   ===================================================================== */

#navbar_scroll_fixed .header_login {
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    height: 48px;

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

    display: flex !important;

    align-items: center;

    justify-content: flex-start;

    background: transparent !important;
}


#navbar_scroll_fixed .header_login_link {
    height: 44px;

    min-height: 44px;

    margin: 0;

    padding:
        0
        7px;

    display: inline-flex !important;

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

    gap: 8px;

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

    background: transparent !important;

    box-shadow: none !important;

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

    white-space: nowrap;
}


#navbar_scroll_fixed
.header_login_link img {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    max-width: 20px !important;
}


#navbar_scroll_fixed
.header_login_link span {
    display: inline-block !important;

    color: var(--chum-navy);

    font-size: 13px;

    font-weight: 700;
}


#navbar_scroll_fixed
.header_login_link:hover span {
    color: var(--chum-pink);
}


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

   NO RECTANGLE.
   NO GLASS PANEL.
   JUST AMAZON-LIKE NAVIGATION ROW.
   ===================================================================== */

#navbar_scroll_fixed .subheader_seaction {
    position: relative;

    width: 100%;
    max-width: none;

    min-height: 56px;

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

    background: transparent !important;

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

    box-shadow: none !important;

    overflow: visible;
}


#navbar_scroll_fixed
.subheader_seaction::before,
#navbar_scroll_fixed
.subheader_seaction::after {
    content: none !important;

    display: none !important;
}


/* =====================================================================
   SECOND NAV WRAPPER
   ===================================================================== */

#navbar_scroll_fixed .subheader_row {
    width: calc(100% - 48px);
    max-width: 1680px;

    min-height: 56px;

    margin: 0 auto !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =====================================================================
   NAV LINKS START BELOW SEARCH AREA
   ===================================================================== */

#navbar_scroll_fixed .subheader_left {
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    margin:
        0
        0
        0
        245px !important;

    padding: 0 !important;

    background: transparent !important;
}


/* =====================================================================
   CATEGORY MENU
   ===================================================================== */

#navbar_scroll_fixed .subheader_navbar {
    width: auto;

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

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

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

    gap: 17px;

    list-style: none;

    background: transparent !important;
}


/* =====================================================================
   NORMAL MENU ITEM
   ===================================================================== */

#navbar_scroll_fixed
.subheader_navbar
.nav-link {
    position: relative;

    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    min-width: 90px;

    height: 40px;

    margin: 0 !important;

    padding:
        0
        17px !important;

    display: inline-flex !important;

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

    border: 0 !important;

    border-radius: 999px !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #30323a !important;

    white-space: nowrap;

    transition:
        background 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}


/* REMOVE ALL OLD UNDERLINES */

#navbar_scroll_fixed
.subheader_navbar
.nav-link::before,
#navbar_scroll_fixed
.subheader_navbar
.nav-link::after {
    content: none !important;

    display: none !important;

    border: 0 !important;
}


/* =====================================================================
   MENU TEXT
   ===================================================================== */

#navbar_scroll_fixed .sub_navitem_text {
    display: inline-block !important;

    color: inherit !important;

    font-size: 14px !important;

    font-style: normal;

    font-weight: 650 !important;

    line-height: 1;

    text-transform: none !important;

    white-space: nowrap;
}


/* =====================================================================
   ACTIVE PAGE

   THIS IS THE ONLY MENU CAPSULE.

   NO UNDERLINE.
   ===================================================================== */

#navbar_scroll_fixed
.subheader_navbar
.nav-link.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            120deg,
            #ef5575,
            #df365b
        ) !important;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.34),

        0
        5px
        14px
        rgba(225, 55, 91, 0.19) !important;
}


#navbar_scroll_fixed
.subheader_navbar
.nav-link.active
.sub_navitem_text {
    color: #ffffff !important;

    font-weight: 750 !important;
}


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

#navbar_scroll_fixed
.subheader_navbar
.nav-link:not(.active):hover {
    color: var(--chum-pink) !important;

    background:
        rgba(255, 255, 255, 0.17) !important;
}


#navbar_scroll_fixed
.subheader_navbar
.nav-link:not(.active):hover
.sub_navitem_text {
    color: var(--chum-pink) !important;
}


/* =====================================================================
   CASHBACK GIF

   IMPORTANT:
   LARGE/WIDE.
   FULL GIF VISIBLE.
   ===================================================================== */

#navbar_scroll_fixed .cb_intro_img_sec {
    flex:
        0
        0
        440px !important;

    width:
        440px !important;

    max-width:
        440px !important;

    height:
        48px;

    margin:
        0
        0
        0
        auto !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        flex-end;

    overflow:
        visible !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


#navbar_scroll_fixed
.cb_intro_img_sec a {
    width:
        440px;

    height:
        48px;

    margin: 0;
    padding: 0;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent !important;

    border:
        0 !important;
}


#navbar_scroll_fixed
.cb_intro_img_sec img {
    display:
        block !important;

    width:
        440px !important;

    max-width:
        440px !important;

    height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        fill !important;

    object-position:
        center !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


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

#navbar_scroll_fixed .header_search_list {
    position: absolute;

    top:
        calc(100% + 9px);

    left: 0;
    right: 0;

    z-index: 99999;

    max-height: 430px;

    margin: 0;

    padding: 7px;

    overflow-x: hidden;
    overflow-y: auto;

    border:
        1px solid
        rgba(255, 255, 255, 0.48);

    border-radius:
        18px;

    background:
        rgba(220, 236, 247, 0.73);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(190%);

    backdrop-filter:
        blur(28px)
        saturate(190%);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.76),

        0
        20px
        45px
        rgba(25, 31, 48, 0.15);
}


#navbar_scroll_fixed
.header_search_list[hidden] {
    display: none !important;
}


#navbar_scroll_fixed .search_list_ul {
    width: 100%;

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

    list-style: none !important;
}


/* =====================================================================
   SEARCH SUGGESTION
   ===================================================================== */

#navbar_scroll_fixed
.chum-search-suggestion {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


#navbar_scroll_fixed
.chum-search-suggestion
+
.chum-search-suggestion {
    margin-top: 3px;
}


#navbar_scroll_fixed
.chum-search-suggestion-link {
    width: 100%;

    min-height: 68px;

    padding:
        8px
        9px;

    display: grid !important;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 11px;

    border: 0;

    border-radius: 14px;

    color: #292b31 !important;

    background: transparent;

    transition:
        background 150ms ease;
}


#navbar_scroll_fixed
.chum-search-suggestion-link:hover,
#navbar_scroll_fixed
.chum-search-suggestion.is-active
.chum-search-suggestion-link {
    background:
        rgba(255, 255, 255, 0.30);
}


/* =====================================================================
   RESULT IMAGE
   ===================================================================== */

#navbar_scroll_fixed
.chum-search-suggestion-visual {
    width: 50px;
    height: 50px;

    display: flex;

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

    overflow: hidden;

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.31);

    color: var(--chum-navy);

    font-size: 21px;
}


#navbar_scroll_fixed
.chum-search-suggestion-visual img {
    width: 100%;
    height: 100%;

    padding: 4px;

    display: block;

    object-fit: contain;

    background:
        rgba(255, 255, 255, 0.40);
}


/* =====================================================================
   RESULT TEXT
   ===================================================================== */

#navbar_scroll_fixed
.chum-search-suggestion-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


#navbar_scroll_fixed
.chum-search-suggestion-copy strong {
    overflow: hidden;

    color: #292b31;

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

    line-height: 1.3;

    white-space: nowrap;

    text-overflow: ellipsis;
}


#navbar_scroll_fixed
.chum-search-suggestion-copy span {
    overflow: hidden;

    color: #777b84;

    font-size: 10px;

    line-height: 1.3;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =====================================================================
   RESULT ARROW
   ===================================================================== */

#navbar_scroll_fixed
.chum-search-suggestion-arrow {
    display: grid;

    place-items: center;

    color: #777b83;

    font-size: 16px;
}


#navbar_scroll_fixed
.chum-search-suggestion-link:hover
.chum-search-suggestion-arrow {
    color: var(--chum-pink);
}


/* =====================================================================
   EMPTY SEARCH
   ===================================================================== */

#navbar_scroll_fixed .chum-search-empty {
    min-height: 58px;

    padding:
        0
        14px;

    display: flex;

    align-items: center;

    border-radius: 13px;

    color: #686c75;

    background:
        rgba(255, 255, 255, 0.22);

    font-size: 12px;
}


/* =====================================================================
   SCROLL STATE
   ===================================================================== */

#navbar_scroll_fixed.is-scrolled {
    box-shadow:
        0
        8px
        24px
        rgba(30, 38, 55, 0.09);
}


/* =====================================================================
   1500 PX
   ===================================================================== */

@media (max-width: 1500px) {

    #navbar_scroll_fixed
    .chum-navbar-container,

    #navbar_scroll_fixed
    .subheader_row {
        width:
            calc(100% - 32px);
    }


    #navbar_scroll_fixed
    .side_menu_div {
        flex-basis:
            185px !important;

        width:
            185px !important;

        max-width:
            185px !important;
    }


    #navbar_scroll_fixed
    .navbar-brand img {
        width:
            165px !important;

        max-width:
            165px !important;
    }


    #navbar_scroll_fixed
    .header_keyword_listing {
        flex-basis:
            650px !important;

        width:
            min(650px, 50vw) !important;

        max-width:
            650px !important;
    }


    #navbar_scroll_fixed
    .subheader_left {
        margin-left:
            210px !important;
    }


    #navbar_scroll_fixed
    .subheader_navbar {
        gap:
            12px;
    }


    #navbar_scroll_fixed
    .cb_intro_img_sec,
    #navbar_scroll_fixed
    .cb_intro_img_sec a,
    #navbar_scroll_fixed
    .cb_intro_img_sec img {
        width:
            360px !important;

        max-width:
            360px !important;
    }

}


/* =====================================================================
   1200 PX
   ===================================================================== */

@media (max-width: 1200px) {

    #navbar_scroll_fixed
    .chum-navbar-container {
        gap:
            18px;
    }


    #navbar_scroll_fixed
    .side_menu_div {
        flex-basis:
            155px !important;

        width:
            155px !important;

        max-width:
            155px !important;
    }


    #navbar_scroll_fixed
    .navbar-brand img {
        width:
            137px !important;

        max-width:
            137px !important;
    }


    #navbar_scroll_fixed
    .header_keyword_listing {
        flex:
            1 1 auto !important;

        width:
            auto !important;

        max-width:
            560px !important;

        min-width:
            300px;
    }


    #navbar_scroll_fixed
    .how_to {
        display:
            none !important;
    }


    #navbar_scroll_fixed
    .header_login_link span {
        display:
            none !important;
    }


    #navbar_scroll_fixed
    .subheader_left {
        margin-left:
            175px !important;
    }


    #navbar_scroll_fixed
    .subheader_navbar {
        gap:
            7px;
    }


    #navbar_scroll_fixed
    .subheader_navbar
    .nav-link {
        min-width:
            75px;

        padding:
            0
            11px !important;
    }


    #navbar_scroll_fixed
    .cb_intro_img_sec,
    #navbar_scroll_fixed
    .cb_intro_img_sec a,
    #navbar_scroll_fixed
    .cb_intro_img_sec img {
        width:
            280px !important;

        max-width:
            280px !important;
    }

}


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

@media (max-width: 991px) {

    #navbar_scroll_fixed {
        padding:
            6px;
    }


    #navbar_scroll_fixed
    .chum-navbar-container {
        width: 100%;

        min-height: auto;

        padding:
            4px !important;

        display:
            grid !important;

        grid-template-columns:
            minmax(160px, 1fr)
            42px
            42px;

        grid-template-areas:
            "brand how login"
            "search search search";

        gap:
            6px;
    }


    #navbar_scroll_fixed
    .side_menu_div {
        grid-area:
            brand;

        width:
            auto !important;

        max-width:
            none !important;

        min-height:
            44px;

        gap:
            8px;
    }


    /* MOBILE/TABLET HAMBURGER */

    #navbar_scroll_fixed
    .header_side_menu {
        display:
            flex !important;

        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px;

        margin:
            0 !important;

        padding:
            0 !important;

        flex-direction:
            column;

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

        gap:
            4px;

        border:
            0 !important;

        border-radius:
            12px;

        background:
            rgba(255, 255, 255, 0.17) !important;

        box-shadow:
            none !important;

        cursor:
            pointer;
    }


    #navbar_scroll_fixed
    .header_side_menu span {
        display:
            block !important;

        width:
            17px !important;

        height:
            2px !important;

        border-radius:
            999px;

        background:
            var(--chum-navy) !important;
    }


    #navbar_scroll_fixed
    .header_side_menu
    span:nth-child(2) {
        width:
            13px !important;
    }


    #navbar_scroll_fixed
    .navbar-brand img {
        width:
            115px !important;

        max-width:
            115px !important;
    }


    #navbar_scroll_fixed
    .navbar-collapse {
        display:
            contents !important;
    }


    #navbar_scroll_fixed
    .header_keyword_listing {
        grid-area:
            search;

        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0;
    }


    #navbar_scroll_fixed
    .header_how_area {
        grid-area:
            how;

        width:
            42px !important;

        height:
            42px;
    }


    #navbar_scroll_fixed
    .header_login {
        grid-area:
            login;

        width:
            42px !important;

        height:
            42px;
    }


    #navbar_scroll_fixed
    .how_it_works,
    #navbar_scroll_fixed
    .header_login_link {
        width:
            40px;

        height:
            40px;

        min-height:
            40px;

        padding:
            0;
    }


    #navbar_scroll_fixed
    .subheader_row {
        width:
            100%;

        min-height:
            48px;

        padding:
            0
            5px !important;

        display:
            block !important;
    }


    #navbar_scroll_fixed
    .subheader_left {
        width:
            100% !important;

        margin:
            0 !important;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    #navbar_scroll_fixed
    .subheader_left::-webkit-scrollbar {
        display:
            none;
    }


    #navbar_scroll_fixed
    .subheader_navbar {
        width:
            max-content;

        min-width:
            100%;

        min-height:
            48px;

        gap:
            8px;

        justify-content:
            flex-start;
    }


    #navbar_scroll_fixed
    .subheader_navbar
    .nav-link {
        min-width:
            96px;

        height:
            40px;

        padding:
            0
            13px !important;
    }


    #navbar_scroll_fixed
    .cb_intro_img_sec {
        display:
            none !important;
    }

}


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

@media (max-width: 767px) {

    #navbar_scroll_fixed
    .chum-navbar-container {
        grid-template-columns:
            minmax(125px, 1fr)
            40px
            40px;
    }


    #navbar_scroll_fixed
    .navbar-brand img {
        width:
            98px !important;

        max-width:
            98px !important;
    }


    #navbar_scroll_fixed
    .header_form
    .form-group {
        height:
            47px !important;

        min-height:
            47px !important;

        max-height:
            47px !important;
    }


    #navbar_scroll_fixed
    .header_form
    .form-control {
        height:
            43px !important;

        font-size:
            12.5px !important;

        line-height:
            43px !important;
    }


    #navbar_scroll_fixed
    .header_form
    .form-control::placeholder {
        font-size:
            11.5px;
    }


    #navbar_scroll_fixed
    .sub_navitem_text {
        font-size:
            12px !important;
    }

}


/* =====================================================================
   FOCUS
   ===================================================================== */

#navbar_scroll_fixed
.header_side_menu:focus-visible,

#navbar_scroll_fixed
.header_microphone:focus-visible,

#navbar_scroll_fixed
.navbar-brand:focus-visible,

#navbar_scroll_fixed
.how_it_works:focus-visible,

#navbar_scroll_fixed
.header_login_link:focus-visible,

#navbar_scroll_fixed
.subheader_navbar
.nav-link:focus-visible {
    outline:
        3px solid
        rgba(232, 65, 100, 0.30);

    outline-offset:
        2px;
}


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

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

    #navbar_scroll_fixed *,
    #navbar_scroll_fixed *::before,
    #navbar_scroll_fixed *::after {
        transition:
            none !important;

        animation:
            none !important;
    }

}