/* =========================================================
   JKDIGI PREMIUM HEADER
   WHITE + BLACK + GOLD
========================================================= */

.jkdigi-header {

    --header-gold: #FF6400;
    --header-gold-light: #FF9A5C;
    --header-black: #28214C;
    --header-white: #ffffff;
    --header-gray: #666;

    position: sticky;
    top: 0;
    z-index: 9999;

    width: 100%;

    background: var(--header-gold);

    border-bottom: 1px solid rgba(0, 0, 0, .07);

    backdrop-filter: blur(18px);

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


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

.jkdigi-header.scrolled {

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

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);
}

.jkdigi-header.scrolled  .jkdigi-logo img {
       
        background-color: transparent;
}



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

.jkdigi-header-inner {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


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

.jkdigi-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}


.jkdigi-logo img {
    width: 155px;
    height: auto;
    display: block;
    border-radius: 20px;
    /* background-color: rgba(255, 255, 255, .98); */
    transition: transform .35s ease;
}


.jkdigi-logo:hover img {

    transform: scale(1.035);
}


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

.jkdigi-nav {

    flex: 1;

    display: flex;

    justify-content: center;
}


.jkdigi-nav>ul {

    display: flex;

    align-items: center;

    gap: 5px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.jkdigi-nav>ul>li {

    position: relative;
}


.jkdigi-nav>ul>li>a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 31px 15px;

    color: var(--header-black);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .7px;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color .3s ease;
}


/* Underline */

.jkdigi-nav>ul>li>a::after {

    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 21px;

    height: 2px;

    background: #000;

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        transform .3s ease;
}


.jkdigi-nav>ul>li:hover>a,
.jkdigi-nav>ul>li>a.active {
    color: var(--header-black);
    font-weight: 800;
}


.jkdigi-nav>ul>li:hover>a::after,
.jkdigi-nav>ul>li>a.active::after {

    transform: scaleX(1);
}


/* Chevron */

.jkdigi-nav .fa-chevron-down {

    font-size: 8px;

    transition:
        transform .3s ease;
}


.jkdigi-dropdown:hover .fa-chevron-down {

    transform: rotate(180deg);
}


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

.jkdigi-dropdown-menu {

    position: absolute;

    top: calc(100% - 5px);

    left: 50%;

    width: 265px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, .07);

    border-radius: 14px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .13);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate(-50%, 12px);

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


.jkdigi-dropdown:hover .jkdigi-dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, 0);
}


/* Dropdown links */

.jkdigi-dropdown-menu a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    color: #222;

    border-radius: 9px;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

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


.jkdigi-dropdown-menu a:hover {

    color: #000;

    background: #fff8dc;

    transform:
        translateX(4px);
}


.jkdigi-dropdown-menu a span {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

    background: #fff5c9;

    color: var(--header-gold);

    font-size: 12px;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.jkdigi-header-actions {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-shrink: 0;
}


/* =========================================================
   PHONE
========================================================= */

.jkdigi-phone {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #111;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .3s ease;
}


.jkdigi-phone:hover {

    /* color: #fff; */
    font-weight: 800;
    transform: translate(2px);
}


.jkdigi-phone-icon {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;
    transform: rotate(-180deg);
    border-radius: 50%;

    background: #fff5c9;

    color: var(--header-gold);

    font-size: 11px;

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


.jkdigi-phone:hover .jkdigi-phone-icon {

    background: var(--header-black);

    color: var(--header-gold);

    transform: rotate(-270deg);
}


/* =========================================================
   CART
========================================================= */

.jkdigi-cart {

    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: var(--header-black);

    color: var(--header-gold);

    font-size: 13px;

    text-decoration: none;

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


.jkdigi-cart:hover {

    background: #fff;

    color: #000;

    transform:
        translateY(-3px);
}


.jkdigi-cart-dot {

    position: absolute;

    top: -3px;
    right: -3px;

    width: 17px;
    height: 17px;

    display: flex;

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

    border-radius: 50%;

    background: var(--header-gold);

    color: #000;

    border: 2px solid #fff;

    font-size: 7px;

    font-weight: 800;
}


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

.jkdigi-menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: #28214C;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;
}


.jkdigi-menu-toggle span {

    width: 18px;

    height: 2px;

    background: #FF6400;

    border-radius: 5px;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* Hamburger active */

.jkdigi-menu-toggle.active span:nth-child(1) {

    transform:
        translateY(7px) rotate(45deg);
}


.jkdigi-menu-toggle.active span:nth-child(2) {

    opacity: 0;
}


.jkdigi-menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-7px) rotate(-45deg);
}


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

.jkdigi-mobile-menu {

    position: fixed;

    z-index: 9998;

    top: 82px;

    left: 0;
    right: 0;

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

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

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .10);

    transform:
        translateY(-20px);

    opacity: 0;

    visibility: hidden;

    transition:
        .35s ease;

    max-height: calc(100vh - 82px);

    overflow-y: auto;
}


.jkdigi-mobile-menu.active {

    transform:
        translateY(0);

    opacity: 1;

    visibility: visible;
}


.jkdigi-mobile-menu-inner {

    padding: 20px;
}


.jkdigi-mobile-menu-inner>a,
.jkdigi-mobile-dropdown>button {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 5px;

    background: transparent;

    border: 0;

    border-bottom: 1px solid rgba(0, 0, 0, .07);

    color: #111;

    font-size: 13px;

    font-weight: 700;

    text-align: left;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.jkdigi-mobile-menu-inner>a:hover,
.jkdigi-mobile-dropdown>button:hover {
    color: #FF6400;
}


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

.jkdigi-mobile-dropdown>button i {

    font-size: 9px;

    transition:
        transform .3s ease;
}


.jkdigi-mobile-dropdown.open>button i {

    transform:
        rotate(180deg);
}


.jkdigi-mobile-submenu {

    display: none;

    padding: 5px 0 5px 15px;
}


.jkdigi-mobile-dropdown.open .jkdigi-mobile-submenu {

    display: block;
}


.jkdigi-mobile-submenu a {

    display: block;

    padding: 12px;

    color: #666;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    border-left: 2px solid #FF6400;

    transition:
        color .3s ease,
        padding .3s ease;
}


.jkdigi-mobile-submenu a:hover {

    color: #000;

    padding-left: 18px;
}


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

.jkdigi-mobile-phone {

    margin-top: 18px;

    justify-content: center !important;

    gap: 10px;

    border: 0 !important;

    background: #28214C !important;

    color: #FF6400 !important;

    border-radius: 10px;

    padding: 14px !important;
}


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

@media (max-width: 1100px) {

    .jkdigi-nav>ul>li>a {

        padding-left: 9px;
        padding-right: 9px;

        font-size: 10px;
    }

    .jkdigi-phone-number {

        display: none;
    }

}


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

@media (max-width: 991px) {

    .jkdigi-header-inner {

        min-height: 72px;

        gap: 15px;
    }

    .jkdigi-mobile-menu-inner a.active {
        color: #FF6400;
    }


    .jkdigi-logo img {

        width: 140px;
    }


    .jkdigi-nav {

        display: none;
    }


    .jkdigi-phone {

        display: none;
    }


    .jkdigi-menu-toggle {

        display: flex;
    }


    .jkdigi-mobile-menu {

        top: 72px;

        max-height:
            calc(100vh - 72px);
    }

}


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

@media (max-width: 767.9px) {
    .flex_dir_rev_mob{
        flex-direction: column-reverse;
    }
}
    @media (max-width: 480px) {

    .jkdigi-header-inner {

        min-height: 68px;
    }


    .jkdigi-logo img {

        width: 125px;
    }


    .jkdigi-header-actions {

        gap: 8px;
    }


    .jkdigi-cart {

        width: 38px;
        height: 38px;
    }


    .jkdigi-menu-toggle {

        width: 38px;
        height: 38px;
    }


    .jkdigi-mobile-menu {

        top: 68px;

        max-height:
            calc(100vh - 68px);
    }

}