/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
  font-family: "Figtree", sans-serif;
    color: #111;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    /* display: block; */
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}



/* =========================================================
   OFFER BAR
========================================================= */

.offer-bar {
    height: 30px;
    background: #050505;
    color: #fff;
}

.offer-content {
    height: 30px;

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

    gap: 12px;

    font-size: 9px;
    font-weight: 500;
}

.offer-content a {
    padding: 3px 9px;

    background: #fff;
    color: #111;

    border-radius: 2px;

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

    transition: .3s ease;
}

.offer-content a:hover {
    background: #19bd67;
    color: #fff;
}



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

.main-header {
    height: 67px;

    background: #fff;

    border-bottom: 1px solid #e5e5e5;

    position: relative;
    z-index: 1000;
}

.header-container {
    width: 100%;
    max-width: 1440px;
    height: 100%;

    margin: auto;
    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
}



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

.desktop-navigation {
    width: 40%;

    display: flex;
    align-items: center;

    gap: 26px;
}

.desktop-navigation a {
    font-size: 11px;
    font-weight: 500;

    white-space: nowrap;

    transition: .25s ease;
}

.desktop-navigation a:hover {
    opacity: .55;
}

.arrow {
    font-size: 11px;
    margin-left: 3px;
}



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

.shop-logo {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 2;
}

.shop-logo img {
    width: 115px;
    height: auto;
}



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

.header-actions {
    width: 40%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 18px;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 10px;

    position: relative;
}

.language {
    display: flex;
    align-items: center;

    gap: 4px;

    font-size: 10px;
}



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

.search-icon {
    width: 15px;
    height: 15px;

    border: 1.7px solid #111;
    border-radius: 50%;

    display: inline-block;

    position: relative;
}

.search-icon::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 1.5px;

    background: #111;

    right: -5px;
    bottom: -2px;

    transform: rotate(45deg);
}



/* =========================================================
   USER ICON
========================================================= */

.user-icon {
    width: 18px;
    height: 18px;

    display: inline-block;

    position: relative;
}

.user-icon::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border: 1.5px solid #111;
    border-radius: 50%;

    top: 0;
    left: 5px;
}

.user-icon::after {
    content: "";

    position: absolute;

    width: 15px;
    height: 8px;

    border: 1.5px solid #111;
    border-bottom: 0;

    border-radius: 10px 10px 0 0;

    bottom: 0;
    left: 1px;
}



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

.cart-icon {
    width: 19px;
    height: 18px;

    display: inline-block;

    position: relative;
}

.cart-icon::before {
    content: "";

    position: absolute;

    width: 13px;
    height: 10px;

    border: 1.5px solid #111;

    left: 3px;
    top: 4px;

    transform: skew(-8deg);
}

.cart-icon::after {
    content: "•  •";

    position: absolute;

    font-size: 9px;

    letter-spacing: 1px;

    left: 4px;
    bottom: -5px;
}



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

.cart-count {
    position: absolute;

    top: -7px;
    left: 12px;

    width: 13px;
    height: 13px;

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

    background: #16bd68;
    color: #fff;

    border-radius: 50%;

    font-size: 7px;
}



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

.menu-toggle {
    display: none;

    width: 35px;
    height: 35px;

    border: 0;
    background: transparent;

    padding: 7px 4px;

    cursor: pointer;

    flex-direction: column;
    justify-content: center;

    gap: 5px;
}

.menu-toggle span {
    display: block;

    width: 23px;
    height: 2px;

    background: #111;

    transition: .3s ease;
}



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

.mobile-menu-panel {
    display: none;

    position: absolute;

    top: 97px;
    left: 0;

    width: 100%;

    background: #fff;

    z-index: 999;

    border-top: 1px solid #eee;

    box-shadow: 0 12px 25px rgba(0, 0, 0, .10);

    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;

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

.mobile-menu-panel.active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}



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

.mobile-navigation {
    width: 100%;
}

.mobile-navigation > a {
    display: flex;

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

    min-height: 52px;

    padding: 0 20px;

    border-bottom: 1px solid #ededed;

    font-size: 13px;
    font-weight: 500;
}



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

.mobile-menu-item {
    border-bottom: 1px solid #ededed;
}

.mobile-dropdown-btn {
    width: 100%;
    min-height: 52px;

    padding: 0 20px;

    border: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 13px;

    cursor: pointer;
}

.mobile-dropdown-btn span:last-child {
    font-size: 18px;
    font-weight: 300;

    transition: transform .3s ease;
}

.mobile-menu-item.open
.mobile-dropdown-btn span:last-child {
    transform: rotate(45deg);
}



/* SUBMENU */

.mobile-submenu {
    max-height: 0;

    overflow: hidden;

    background: #f8f8f8;

    transition: max-height .35s ease;
}

.mobile-menu-item.open .mobile-submenu {
    max-height: 250px;
}

.mobile-submenu a {
    display: block;

    padding: 12px 35px;

    border-top: 1px solid #e9e9e9;

    font-size: 12px;
}



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

.mobile-actions {
    padding: 18px 20px;

    display: flex;

    align-items: center;

    gap: 25px;
}

.mobile-actions a {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 11px;
}



/* =========================================================
   HERO SLIDER
========================================================= */
/* =========================================================
   PREMIUM HOME SLIDER
========================================================= */
.category-section{
    
width: 100%;
    
float: left;
    
padding: 70px  2% 50px;
}
.premium-home-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.premium-slider-track {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   SLIDES
========================================================= */

.premium-slide {
    position: absolute;
    inset: 0;
    width: 100%;

    opacity: 0;
    visibility: hidden;

    z-index: 1;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.premium-slide:first-child {
    position: relative;
}

.premium-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}


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

.premium-slide a {
    display: block;
    width: 100%;
}

.premium-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}


/* =========================================================
   KEN BURNS EFFECT
========================================================= */

.premium-slide.is-active img {
    /* animation: premiumKenBurns 6s linear forwards; */
}

@keyframes premiumKenBurns {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.06);
    }

}


/* =========================================================
   ARROWS
========================================================= */
.premium-slider-arrow img{
    width: 16px;
    margin-top: 0px;
    float: left;
}
.premium-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 47px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.90);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    transition:
        background .3s ease,
        transform .3s ease;
}

.premium-slider-arrow:hover {
    background: #c9dc5a;
}

.premium-slider-arrow:active {
    transform: translateY(-50%) scale(.92);
}


.premium-slider-prev {
    right: 57px;
}

.premium-slider-next {
    right: 5px;
}


/* =========================================================
   DOTS
========================================================= */

.premium-slider-dots {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 7px;

    z-index: 10;
}


.premium-slider-dot {
    width: 25px;
    height: 4px;

    padding: 0;

    border: 0;
    border-radius: 10px;

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

    cursor: pointer;

    transition:
        width .35s ease,
        background .35s ease;
}


.premium-slider-dot.is-active {
    width: 40px;
    background: #fff;
}


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

@media (max-width: 767px) {

    .premium-slider-arrow {
        width: 36px;
        height: 36px;

        font-size: 15px;
    }

    .premium-slider-prev {
        left: 10px;
    }

    .premium-slider-next {
        right: 10px;
    }

    .premium-slider-dots {
        bottom: 12px;
    }

    .premium-slider-dot {
        width: 20px;
        height: 3px;
    }

    .premium-slider-dot.is-active {
        width: 32px;
    }

}/* =========================================================
   ECOM HEADER
========================================================= */

.ecom-header {
    width: 100%;
    position: relative;
    z-index: 99999;
    background: #fff;
}


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

.ecom-topbar {
    height: 28px;

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

    background: #050505;
    color: #fff;

    font-size: 9px;
}


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

.ecom-desktop-header {
    height: 93px;
    width: 100%;
    /* max-width: 1440px; */
    margin: auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
}


/* DESKTOP NAV */
/* =========================================
   DESKTOP NAV
========================================= */

.ecom-desktop-nav {
    width: 40%;
    height: 93px;
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
}


/* NORMAL LINKS */

.ecom-desktop-nav > a,
.ecom-menu-link {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #111;
    font-size: 16px;
    font-weight: 500;

    text-decoration: none;
    white-space: nowrap;

    transition: color .25s ease;
}


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

.ecom-menu-item {
    height: 67px;

    display: flex;
    align-items: center;

    position: relative;
}


/* ARROW */

.ecom-menu-link img {
    width: 9px;
    height: auto;

    transition: transform .3s ease;
}


/* ARROW ROTATION */

.ecom-menu-item:hover .ecom-menu-link img {
    transform: rotate(180deg);
}


/* LINK HOVER */

.ecom-menu-item:hover .ecom-menu-link,
.ecom-desktop-nav > a:hover {
    color: #c8de59;
}


/* =========================================
   MEGA MENU
========================================= */

.ecom-mega-menu {
    position: absolute;
    top: 67px;
    left: 433%;
    width: 700px;
    padding: 30px;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 0 0 12px 12px;
    box-shadow:
        0 20px 50px rgba(0,0,0,.10);
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 35px;

    /* IMPORTANT */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
    z-index: 99999;
}


/* =========================================
   SHOW ON HOVER
========================================= */

.ecom-menu-item:hover > .ecom-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

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


/* =========================================
   COLUMNS
========================================= */

.ecom-menu-col {
    display: flex;
    flex-direction: column;
}


.ecom-menu-col h5 {
    margin: 0 0 15px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}


.ecom-menu-col a {
    padding: 6px 0;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition:
        color .2s ease,
        padding-left .2s ease;
}


.ecom-menu-col a:hover {
    color: #000000;
    padding-left: 5px;
}


/* =========================================
   FEATURE BOX
========================================= */

.ecom-menu-feature {
    padding: 25px;
    background: #eaf1c5;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.ecom-menu-feature small {
    margin-bottom: 8px;

    color: #999;

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


.ecom-menu-feature h4 {
    margin: 0 0 18px;

    color: #111;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
}


.ecom-menu-feature > a {
    color: #111;

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

    text-decoration: none;
}


.ecom-menu-feature b {
    margin-left: 7px;

    font-size: 16px;

    transition: margin-left .2s ease;
}


.ecom-menu-feature a:hover b {
    margin-left: 12px;
    top: 1px;
    position: relative;
}


/* BRANDS */

.ecom-brands-menu {
    width: 650px;
}


/* =========================================
   IMPORTANT
========================================= */

.ecom-desktop-header {
    overflow: visible !important;
}

.ecom-desktop-nav {
    overflow: visible !important;
}

/* LOGO */

.ecom-logo {
    position: absolute;

    left: 50%;
    top: 50%;

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

.ecom-logo img {
    width: 176px;
    height: auto;
    margin-top: 6px;
}


/* DESKTOP ACTIONS */

.ecom-desktop-actions {
    width: 40%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 18px;
}.ecom-desktop-actions a img{
    
width: 30px;
}

.ecom-desktop-actions a {
    color: #111;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    font-weight: 500;
}


/* =========================================================
   ICONS
========================================================= */

.ecom-search-icon {
    width: 15px;
    height: 15px;

    display: inline-block;

    border: 1.5px solid #111;
    border-radius: 50%;

    position: relative;
}

.ecom-search-icon:after {
    content: "";

    position: absolute;

    width: 6px;
    height: 1.5px;

    background: #111;

    right: -5px;
    bottom: -2px;

    transform: rotate(45deg);
}


.ecom-user-icon {
    width: 18px;
    height: 18px;

    display: inline-block;

    position: relative;
}

.ecom-user-icon:before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border: 1.5px solid #111;
    border-radius: 50%;

    top: 0;
    left: 5px;
}

.ecom-user-icon:after {
    content: "";

    position: absolute;

    width: 15px;
    height: 8px;

    border: 1.5px solid #111;
    border-bottom: 0;

    border-radius: 10px 10px 0 0;

    left: 1px;
    bottom: 0;
}


.ecom-cart-icon {
    width: 19px;
    height: 18px;

    display: inline-block;

    position: relative;
}

.ecom-cart-icon:before {
    content: "";

    position: absolute;

    width: 13px;
    height: 10px;

    border: 1.5px solid #111;

    left: 3px;
    top: 4px;

    transform: skew(-8deg);
}

.ecom-cart-icon:after {
    content: "• •";

    position: absolute;

    left: 4px;
    bottom: -5px;

    font-size: 8px;
}


/* CART COUNT */

.ecom-cart b,
.ecom-mobile-cart b {
    position: absolute;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #19bd68;
    color: #fff;

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

    font-size: 7px;
}

.ecom-cart b {
    top: -7px;
    left: 13px;
}


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

.ecom-mobile-header {
    display: none;

    height: 58px;

    width: 100%;

    padding: 0 15px;

    position: relative;

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

    background: #fff;

    border-bottom: 1px solid #e8e8e8;
}


/* =========================================================
   HAMBURGER
========================================================= */

.ecom-hamburger {
    width: 42px;
    height: 42px;

    padding: 8px 6px;

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

    background: transparent !important;

    display: flex;

    flex-direction: column;
    justify-content: center;

    gap: 5px;

    cursor: pointer;

    z-index: 100001;
}

.ecom-hamburger span {
    display: block;

    width: 25px;
    height: 2px;

    background: #111 !important;

    transition: all .3s ease;
}


/* HAMBURGER ACTIVE */

.ecom-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ecom-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.ecom-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


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

.ecom-mobile-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-65%, -50%);
}

.ecom-mobile-logo img {
    width: 90px;
    height: auto;
}


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

.ecom-mobile-actions {
    display: flex;

    align-items: center;

    gap: 17px;
}

.ecom-mobile-actions a {
    width: 22px;
    height: 30px;

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

    position: relative;
}

.ecom-mobile-cart b {
    right: -6px;
    top: -1px;
}


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

.ecom-mobile-menu {
    display: none;

    position: absolute;

    top: 86px;
    left: 0;

    width: 100%;

    background: #fff;

    border-top: 1px solid #eee;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);

    overflow: hidden;
}


/* WHEN OPEN */

.ecom-mobile-menu.is-visible {
    display: block;
}


/* MAIN LINKS */

.ecom-mobile-menu > a {
    display: flex;
    align-items: center;

    min-height: 54px;

    padding: 0 22px;

    border-bottom: 1px solid #ededed;

    color: #111;

    font-size: 13px;
    font-weight: 500;
}


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

.ecom-mobile-dropdown {
    border-bottom: 1px solid #ededed;
}

.ecom-mobile-dropdown > button {
    width: 100%;
    min-height: 54px;

    padding: 0 22px;

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

    background: #fff !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #111;

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

    cursor: pointer;
}

.ecom-mobile-dropdown > button strong {
    font-size: 19px;
    font-weight: 300;

    transition: transform .3s ease;
}


/* SUB MENU */

.ecom-mobile-submenu {
    display: none;

    background: #f8f8f8;
}

.ecom-mobile-dropdown.is-open .ecom-mobile-submenu {
    display: block;
}

.ecom-mobile-dropdown.is-open
> button strong {
    transform: rotate(45deg);
}

.ecom-mobile-submenu a {
    display: block;

    padding: 13px 35px;

    border-top: 1px solid #e7e7e7;

    color: #555;

    font-size: 12px;
}


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

.ecom-mobile-bottom {
    padding: 20px 22px;

    display: flex;
    align-items: center;

    gap: 25px;
}

.ecom-mobile-bottom a {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 11px;
}


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

@media (max-width: 991px) {

    .ecom-desktop-header {
        display: none !important;
    }

    .ecom-mobile-header {
        display: flex !important;
    }

    .ecom-mobile-menu {
        display: none;
    }

    .ecom-mobile-menu.is-visible {
        display: block !important;
    }

}


@media (max-width: 575px) {
    .contact-intro p {
    color: #000000;
    font-size: 16px;
    line-height: 1.8;
    padding: 0 !important;
}
    .tabs-section {
    margin-top: 30px !important;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    float: left !important;
    width: 100% !important;
}.tab-item {
    flex: 1;
    text-align: center;
    padding: 8px !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    transition: all 0.15s ease;
}
    .btn-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    background: #ededed69;
    font-size: 35px !important;
    cursor: pointer;
    color: #000000;
    transition: all 0.15s ease;
    border: 0;
    top: 10px;
    position: relative;
}.btn-icon img {
    width: 23px !important;
    position: relative;
    top: -2px;
}.action-row{
        margin-top: 20px !important;
}
    .thumb {
    width: 130px;
    height: 90px !important;}
    .logo-desc {
    /* flex: 1 1 337px; */
    max-width: 100%;
    margin-bottom: 30px;
}
    .atw-footer-payment {
    margin-top: 0 !important;
}
    .category-section {
    width: 100%;
    float: left;
    padding: 40px 2% 30px;
}.atw-footer-order {
    margin-top: 30px;
    margin-bottom: 30px;
}
    .offer-arrow  img{
        
width: 10px;
    }
    .atw-footer h6 {
    margin: 0px 0 10px !important;
    line-height: 1.3;
    color: #fff;
    font-size: 16px;
}
.logo-desc {
    max-width: 100% !important;
}.social-icons {
    margin-top: 30px;
    float: left;
    width: 100%;
    margin-bottom: 40px;
}.link-column {
    min-width: 100%;
}.link-column li {
    margin-bottom: 8px;
    width: 50%;
    float: left;
}
    .ecom-topbar {
        height: 27px;
        font-size: 8px;
    }

    .ecom-mobile-header {
        height: 56px;
        padding: 0 12px;
    }

    .ecom-mobile-logo img {
        width: 100px;
        margin-top: 9px;
    }

    .ecom-mobile-menu {
        top: 83px;
    }

}
.btns{
    
position: absolute;
    
bottom: 20px;
    
right: 45px;
    
width: 111px;
    
height: 30px;
    
border: 1px solid #ffffff59;
    
background: #0000004d;
    
z-index: 9;
    
border-radius: 30px;
}/* =====================================================
   ECOMMERCE AUTH MODAL
===================================================== */


/* =====================================================
   OVERLAY
===================================================== */

.ecom-auth-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 15, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .35s ease,
        visibility .35s ease;
    z-index: 999999;
}


.ecom-auth-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   MODAL
===================================================== */

.ecom-auth-modal {
    position: relative;

    width: 100%;
    max-width: 900px;

    min-height: 570px;

    display: grid;

    grid-template-columns: 42% 58%;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.20);

    transform:
        translateY(25px)
        scale(.97);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);
}


.ecom-auth-overlay.active
.ecom-auth-modal {

    transform:
        translateY(0)
        scale(1);

}


/* =====================================================
   LEFT IMAGE
===================================================== */

.ecom-auth-image {

position: relative;

min-height: 570px;

display: flex;

align-items: flex-end;

padding: 45px;

background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)), url(../images/login-img.webp) center center / cover no-repeat;
}


.ecom-auth-image-content {
    color: #fff;
    display: none;
}


.ecom-auth-image-content small {

    display: block;

    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

}


.ecom-auth-image-content h2 {

    margin: 0 0 18px;

    font-size: 38px;
    line-height: 1.08;

    font-weight: 600;

}


.ecom-auth-image-content p {

    max-width: 300px;

    margin: 0;

    color: rgba(255,255,255,.82);

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   RIGHT CONTENT
===================================================== */

.ecom-auth-content {

    position: relative;

    padding: 55px;

    background: #fff;

    overflow-y: auto;

}


/* =====================================================
   CLOSE
===================================================== */

.ecom-auth-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 50%;

    background: #f5f5f5;

    cursor: pointer;

    z-index: 20;

    transition:
        background .25s ease,
        transform .25s ease;

}


.ecom-auth-close:hover {

    background: #ededed;

    transform: rotate(90deg);

}


.ecom-auth-close span {

    position: absolute;

    left: 12px;
    top: 18px;

    width: 14px;
    height: 1px;

    background: #111;

}


.ecom-auth-close span:first-child {

    transform: rotate(45deg);

}


.ecom-auth-close span:last-child {

    transform: rotate(-45deg);

}


/* =====================================================
   AUTH SCREENS
===================================================== */

.ecom-auth-screen {

    display: none;

    animation:
        ecomAuthScreenIn .35s ease;

}


.ecom-auth-screen.active {

    display: block;

}


@keyframes ecomAuthScreenIn {

    from {

        opacity: 0;

        transform:
            translateX(12px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =====================================================
   TABS
===================================================== */

.ecom-auth-tabs {

    display: flex;

    gap: 28px;

    margin-bottom: 38px;

    border-bottom:
        1px solid #eeeeee;

}


.ecom-auth-tab {position: relative;padding: 0 0 14px;border: 0;background: none;color: #999;font-family: inherit;font-size: 16px;font-weight: 500;cursor: pointer;}


.ecom-auth-tab.active {

    color: #111;

}


.ecom-auth-tab.active::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    background: #111;

}


/* =====================================================
   HEADING
===================================================== */

.ecom-auth-heading {

    margin-bottom: 30px;

}


.ecom-auth-heading h3 {

    margin: 0 0 8px;

    color: #111;

    font-size: 28px;

    line-height: 1.2;

    font-weight: 600;

}


.ecom-auth-heading p {

    margin: 0;

    color: #888;

    font-size: 13px;

    line-height: 1.6;

}


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

.ecom-input-group {

    margin-bottom: 19px;

}


.ecom-input-group > label {display: block;margin-bottom: 8px;color: #222;font-size: 14px;font-weight: 500;}


.ecom-input-group input {

    width: 100%;

    height: 48px;

    padding: 0 15px;

    border:
        1px solid #dedede;

    border-radius: 6px;

    outline: none;

    background: #fff;

    color: #111;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}


.ecom-input-group input:focus {

    border-color: #111;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.04);

}


.ecom-input-group input::placeholder {

    color: #aaa;

}


/* =====================================================
   PASSWORD
===================================================== */

.ecom-password-label {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.ecom-password-label label {margin-bottom: 8px;display: block;margin-bottom: 8px;color: #222;font-size: 14px;font-weight: 500;}


.ecom-password-label a {margin-bottom: 8px;color: #777;font-size: 13px;text-decoration: none;transition: color .2s ease;}


.ecom-password-label a:hover {

    color: #111;

}


.ecom-password-input {

    position: relative;

}


.ecom-password-input input {

    padding-right: 60px;

}


.ecom-password-toggle {

    position: absolute;

    top: 50%;
    right: 14px;

    transform:
        translateY(-50%);

    border: 0;

    background: transparent;

    color: #777;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

}


/* =====================================================
   CHECKBOX
===================================================== */

.ecom-check {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin:
        3px 0 22px;
        color: #777 !important;
        font-size: 13px !important;
        cursor: pointer;
        }


.ecom-check input {

    width: 14px !important;
    height: 14px !important;

    margin: 0;

}


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

.ecom-auth-submit {
        width: 100%;
        height: 50px;
        border:
        1px solid #111;
        border-radius: 6px;
        background: #111;
        color: #fff;
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition:
        background .25s ease,
        color .25s ease;
        }


.ecom-auth-submit:hover {

    background: #fff;

    color: #111;

}


/* =====================================================
   DIVIDER
===================================================== */

.ecom-auth-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 25px 0;

    color: #aaa;

    font-size: 10px;

}


.ecom-auth-divider::before,
.ecom-auth-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #eeeeee;

}


.ecom-auth-divider span {

    white-space: nowrap;

}


/* =====================================================
   SOCIAL
===================================================== */

.ecom-social-login {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

}


.ecom-social-login button {

    height: 44px;

    display: flex;

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

    gap: 8px;

    border:
        1px solid #e5e5e5;

    border-radius: 6px;

    background: #fff;

    color: #333;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition:
        background .25s ease;

}


.ecom-social-login button:hover {

    background: #f7f7f7;

}


.ecom-social-login button span {

    font-size: 15px;

    font-weight: 600;

}


/* =====================================================
   FORGOT PASSWORD
===================================================== */

.ecom-auth-back {

    display: inline-flex;

    align-items: center;

    margin-bottom: 35px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #777;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition:
        color .25s ease;

}


.ecom-auth-back:hover {

    color: #111;

}


.ecom-forgot-heading {

    margin-bottom: 30px;

}


/* =====================================================
   FORGOT ICON
===================================================== */

.ecom-forgot-icon {

    width: 52px;
    height: 52px;

    margin-bottom: 22px;

    display: flex;

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

    border-radius: 50%;

    background: #f6f6f6;

}


.ecom-forgot-icon span {

    color: #111;

    font-size: 20px;

    transform:
        rotate(90deg);

}


/* =====================================================
   SUCCESS
===================================================== */

.ecom-forgot-success {

    display: none;

    padding-top: 20px;

    text-align: center;

}


.ecom-forgot-success.active {

    display: block;

    animation:
        ecomAuthScreenIn .35s ease;

}


.ecom-success-icon {

    width: 58px;
    height: 58px;

    margin:
        0 auto 20px;

    display: flex;

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

    border-radius: 50%;

    background: #f3f3f3;

    color: #111;

    font-size: 22px;

    font-weight: 500;

}


.ecom-forgot-success h4 {

    margin:
        0 0 10px;

    color: #111;

    font-size: 22px;

    font-weight: 600;

}


.ecom-forgot-success p {

    max-width: 330px;

    margin:
        0 auto 25px;

    color: #888;

    font-size: 13px;

    line-height: 1.7;

}


.ecom-back-login {

    padding: 0 0 3px;

    border: 0;

    border-bottom:
        1px solid #111;

    background: transparent;

    color: #111;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}


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

@media (max-width: 767px) {

    .ecom-auth-overlay {

        padding: 15px;

    }


    .ecom-auth-modal {

        max-width: 500px;

        min-height: auto;

        max-height: 92vh;

        display: block;

        overflow-y: auto;

        border-radius: 14px;

    }


    .ecom-auth-image {

        display: none;

    }


    .ecom-auth-content {

        padding:
            45px 25px 30px;

    }


    .ecom-auth-close {

        top: 12px;
        right: 12px;

    }


    .ecom-auth-heading h3 {

        font-size: 24px;

    }


    .ecom-auth-tabs {

        margin-bottom: 30px;

    }

}/* =========================================================
   PREMIUM ECOMMERCE SEARCH
========================================================= */

.ecom-search-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, .65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .35s ease,
        visibility .35s ease;
    z-index: 999998;
}

.ecom-search-overlay.active {
    opacity: 1;
    visibility: visible;
}


.ecom-search-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    background: #fff;
    transform: translateY(-25px);
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.ecom-search-overlay.active .ecom-search-panel {
    transform: translateY(0);
}


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

.ecom-search-header {
    width: 100%;
    max-width: 1440px;
    height: 105px;
    margin: auto;
    padding: 0 45px;

    display: flex;
    align-items: center;
    gap: 45px;

    border-bottom: 1px solid #e9e9e9;
}


.ecom-search-logo {
    width: 90px;
    color: #111;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}


/* =========================================================
   SEARCH FORM
========================================================= */

.ecom-search-form {
    position: relative;
    flex: 1;
    height: 58px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #111;
}


.ecom-search-icon {
    width: 30px;
    margin-right: 14px;
    display: none;
    align-items: center;
    justify-content: center;
}


.ecom-search-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #111;
    stroke-width: 1.5;
    display: none;
}


.ecom-search-form input {
    flex: 1;
    width: 100%;
    height: 100%;

    padding: 0 80px 0 0;

    border: 0;
    outline: none;
    background: transparent;

    color: #111;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
}


.ecom-search-form input::placeholder {
    color: #aaa;
}


.ecom-search-clear {
    position: absolute;
    right: 55px;
    top: 50%;

    width: 30px;
    height: 30px;

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

    transform: translateY(-50%);

    border: 0;
    background: transparent;

    color: #777;
    font-size: 24px;
    font-weight: 300;

    cursor: pointer;
}


.ecom-search-clear.active {
    display: flex;
}


.ecom-search-submit {
    position: absolute;
    right: 5px;
    top: 50%;

    width: 40px;
    height: 40px;

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

    transform: translateY(-50%);

    border: 0;
    background: transparent;

    cursor: pointer;
}


.ecom-search-submit svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: #111;
    stroke-width: 1.4;

    transition: transform .25s ease;
}


.ecom-search-submit:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.ecom-search-close {
    position: relative;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;

    cursor: pointer;

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


.ecom-search-close:hover {
    background: #111;
    transform: rotate(90deg);
}


.ecom-search-close span {
    position: absolute;

    left: 12px;
    top: 20px;

    width: 16px;
    height: 1px;

    background: #111;

    transition: background .25s ease;
}


.ecom-search-close span:first-child {
    transform: rotate(45deg);
}

.ecom-search-close span:last-child {
    transform: rotate(-45deg);
}


.ecom-search-close:hover span {
    background: #fff;
}


/* =========================================================
   BODY
========================================================= */

.ecom-search-body {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding: 55px 45px 65px;
}


/* =========================================================
   DEFAULT STATE
========================================================= */

.ecom-search-intro {
    max-width: 570px;
    margin-bottom: 55px;
    float: left;
}


.ecom-search-intro > span {
    display: block;

    margin-bottom: 15px;

    color: #999;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
}


.ecom-search-intro h2 {
    margin: 0 0 18px;

    color: #111;

    font-size: 44px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.8px;
}


.ecom-search-intro p {
    max-width: 430px;

    margin: 0;

    color: #888;

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.ecom-search-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}


.ecom-search-block-title {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 1px solid #e9e9e9;
}


.ecom-search-block-title span {
    color: #aaa;
    font-size: 10px;
}


.ecom-search-block-title h4 {
    margin: 0;

    color: #111;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
}


/* =========================================================
   POPULAR SEARCHES
========================================================= */

.ecom-popular-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.ecom-popular-searches button {
    padding: 11px 17px;
    border: 1px solid #dedede;
    border-radius: 30px;
    background: #fff;
    color: #555;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.ecom-popular-searches button:hover {
    background: #111;
    border-color: #111;
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================================
   CATEGORIES
========================================================= */

.ecom-search-categories {
    display: grid;
}


.ecom-search-categories a {
    display: grid;
    grid-template-columns: 35px 1fr auto;
    align-items: center;

    min-height: 48px;

    border-bottom: 1px solid #ededed;

    color: #222;

    font-size: 13px;
    text-decoration: none;

    transition: padding .25s ease;
}


.ecom-search-categories a:hover {
    padding-left: 8px;
}


.ecom-search-categories a span {
    color: #aaa;
    font-size: 10px;
}


.ecom-search-categories a b {
    color: #aaa;
    font-size: 15px;
    font-weight: 400;

    transition: transform .25s ease;
}


.ecom-search-categories a:hover b {
    color: #111;
    transform: translate(3px, -3px);
}


/* =========================================================
   RESULTS
========================================================= */

.ecom-search-results {
    display: none;
}


.ecom-search-results.active {
    display: block;
    animation: ecomSearchFade .35s ease;
}


@keyframes ecomSearchFade {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.ecom-search-results-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 40px;
}


.ecom-search-results-top span {
    display: block;

    margin-bottom: 8px;

    color: #999;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}


.ecom-search-results-top h3 {
    margin: 0;

    color: #111;

    font-size: 27px;
    font-weight: 500;
}


.ecom-search-results-top > a {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #111;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;

    border-bottom: 1px solid #111;
    padding-bottom: 5px;
}


.ecom-search-results-top > a span {
    margin: 0;
    color: #111;
    font-size: 13px;
}


/* =========================================================
   RESULT LAYOUT
========================================================= */

.ecom-search-result-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 60px;
}


.ecom-result-label {
    margin-bottom: 18px;
    color: #999;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


/* =========================================================
   QUERY SUGGESTIONS
========================================================= */

.ecom-search-suggestions {
    border-right: 1px solid #ededed;
    padding-right: 35px;
}


.ecom-search-suggestions button {
    display: block;
    width: 100%;
    margin-bottom: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000000;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition:
        color .2s ease,
        padding .2s ease;
}


.ecom-search-suggestions button:hover {
    padding-left: 5px;
    color: #111;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.ecom-search-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


.ecom-search-product {
    display: block;

    color: #111;
    text-decoration: none;
}


.ecom-product-image {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f5f5f5;
}


.ecom-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}


.ecom-search-product:hover .ecom-product-image img {
    transform: scale(1.06);
}


.ecom-product-info {
    padding-top: 15px;
}


.ecom-product-info small {
    display: block;

    margin-bottom: 6px;

    color: #999;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
}


.ecom-product-info h4 {
    margin: 0 0 7px;

    color: #222;

    font-size: 12px;
    font-weight: 500;
}


.ecom-product-info p {
    margin: 0;

    color: #111;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   FOOTER
========================================================= */

.ecom-search-footer {
    width: 100%;
    max-width: 1440px;
    margin: auto;

    padding: 17px 45px;

    display: flex;
    justify-content: space-between;

    border-top: 1px solid #ededed;

    color: #aaa;

    font-size: 9px;
    letter-spacing: 1px;
}


.ecom-search-footer div {
    display: flex;
    align-items: center;
    gap: 7px;
}


.ecom-search-footer strong {
    padding: 3px 6px;

    border: 1px solid #ddd;
    border-radius: 3px;

    color: #555;

    font-size: 8px;
}


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

@media (max-width: 767px) {

    .ecom-search-panel {
        max-height: 100vh;
        height: 100vh;
    }

    .ecom-search-header {
        height: 78px;
        padding: 0 18px;
        gap: 15px;
    }

    .ecom-search-logo {
        display: none;
    }

    .ecom-search-form {
        height: 48px;
    }

    .ecom-search-form input {
        font-size: 14px;
    }

    .ecom-search-close {
        width: 36px;
        height: 36px;
    }

    .ecom-search-close span {
        left: 10px;
        top: 17px;
        width: 14px;
    }

    .ecom-search-body {
        padding: 35px 20px 45px;
    }

    .ecom-search-intro {
        float: none;
        margin-bottom: 38px;
    }

    .ecom-search-intro h2 {
        font-size: 34px;
    }

    .ecom-search-intro p {
        font-size: 12px;
    }

    .ecom-search-columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ecom-search-result-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ecom-search-suggestions {
        padding-right: 0;
        padding-bottom: 25px;
        border-right: 0;
        border-bottom: 1px solid #ededed;
    }

    .ecom-search-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 10px;
    }

    .ecom-search-results-top {
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }

    .ecom-search-results-top h3 {
        font-size: 22px;
    }

    .ecom-search-results-top > a {
        white-space: nowrap;
    }

    .ecom-search-footer {
        display: none;
    }

}
.category-container {
      text-align: center;
      max-width: 100%;
      width: 100%;
      display: block;
      margin: auto;
      padding: 70px 3%;
    }

    .title {
      font-size: 36px;
      font-weight: 600;
      color: #18361E;
      margin-bottom: 25px;
      text-align: center;
    }

    .title span {
      color: #C9DD58; /* Light green color */
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 15px;
      justify-content: center;
    }

    .card {
      border-radius: 12px;
      padding: 20px 10px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }

    .card:hover {
      /* transform: translateY(-5px); */
    }

    .card img {
      max-width: 85%;
      /* max-height: 130px; */
      object-fit: contain;
    }

    .card-title {
      font-size: 11px;
      font-weight: 700;
      color: #333333;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 10px;
    }

    /* Distinct Gradient Backgrounds for Each Card */
    .bg-blue {
      /* background: linear-gradient(180deg, #eaf2ff 0%, #e3ecfd 100%); */
      background-image: url('../images/bg1.webp');
      /* height: 266px; */
      /* background-size: cover; */
      /* background-position: center; */
      /* border-radius: 20px; */
    }

    .bg-cyan {
      background-image: url(../images/bg2.webp);
    }

    .bg-purple {
      background-image: url(../images/bg3.webp);
    }

    .bg-yellow {
    background-image: url(../images/bg4.webp);
    }

    .bg-green {
    background-image: url(../images/bg5.webp);
    }
    @media(max-width: 575px){
        .title{
            font-size:30px;
        }
        .btns{
            display: none;
        }
    }

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

.ecom-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .48);
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
    transition:
        opacity .35s ease,
        visibility .35s ease;
    backdrop-filter: blur(3px);
}


.ecom-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   DRAWER
===================================================== */

.ecom-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(599px, 100%);
    height: 100vh;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition:
        transform .5s cubic-bezier(.77, 0, .175, 1);
    box-shadow:
        -20px 0 60px rgba(0, 0, 0, .12);
    visibility: hidden;
}


.ecom-cart-drawer.active {
    transform: translateX(0);
    visibility: visible;
}


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

.ecom-cart-header {
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    padding: 50px 50px 25px;
    border-bottom: 1px solid #ededed;
}


.ecom-cart-eyebrow {
    /* display: flow; */
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    text-align: left;
    float: left;
    clear: both;
    margin-top: -8px;
}


.ecom-cart-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #171717;
    float: left;
}


.ecom-cart-header h3 small {
    display: inline-flex;

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

    width: 24px;
    height: 24px;

    margin-left: 5px;

    border-radius: 50%;

    background: #171717;
    color: #fff;

    font-size: 10px;
    font-weight: 600;

    vertical-align: middle;
}


/* =====================================================
   CLOSE
===================================================== */

.ecom-cart-close {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition:
        background .3s ease,
        border-color .3s ease;
    float: right;
    top: -35px;
}


.ecom-cart-close:hover {
    background: #171717;
    border-color: #171717;
}


.ecom-cart-close span {
    position: absolute;

    left: 12px;

    width: 17px;
    height: 1px;

    background: #171717;

    transition:
        background .3s ease;
}


.ecom-cart-close span:first-child {
    transform: rotate(45deg);
}


.ecom-cart-close span:last-child {
    transform: rotate(-45deg);
}


.ecom-cart-close:hover span {
    background: #fff;
}


/* =====================================================
   BODY
===================================================== */

.ecom-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 55px;
    scrollbar-width: thin;
}


.ecom-cart-body::-webkit-scrollbar {
    width: 4px;
}


.ecom-cart-body::-webkit-scrollbar-thumb {
    background: #d5d5d5;
}


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

.ecom-cart-empty {
    min-height: 100%;

    display: none;

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

    flex-direction: column;

    text-align: center;

    padding: 50px 20px;
}


.ecom-empty-cart-icon {
    width: 72px;
    height: 72px;

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

    margin-bottom: 24px;

    border-radius: 50%;

    background: #f5f5f5;
}


.ecom-empty-cart-icon img {
    width: 27px;
    height: 27px;

    object-fit: contain;

    opacity: .65;
}


.ecom-cart-empty > span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #999;
}


.ecom-cart-empty h4 {
    margin: 10px 0 8px;

    font-size: 24px;
    font-weight: 600;

    color: #171717;
}


.ecom-cart-empty p {
    max-width: 280px;

    margin: 0 0 25px;

    font-size: 13px;
    line-height: 1.7;

    color: #777;
}


.ecom-cart-shop-btn {
    display: inline-flex;

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

    min-height: 48px;

    padding: 0 25px;

    background: #171717;
    color: #fff;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .5px;

    text-decoration: none;

    transition:
        background .3s ease;
}


.ecom-cart-shop-btn:hover {
    background: #333;
    color: #fff;
}


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

.ecom-cart-items {
    padding: 5px 0;
}


.ecom-cart-item {
    display: flex;

    gap: 17px;

    padding: 25px 0;

    border-bottom: 1px solid #ededed;
}


.ecom-cart-product-image {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    overflow: hidden;
}


.ecom-cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .5s ease;
    border-radius: 16px;
}


.ecom-cart-product-image:hover img {
    transform: scale(1.05);
}


/* =====================================================
   PRODUCT INFO
===================================================== */

.ecom-cart-product-info {
    flex: 1;
    min-width: 0;
}


.ecom-cart-product-info small {
    display: block;
    margin-bottom: 7px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: #999;
    float: left;
}


.ecom-cart-product-info h4 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
    color: #001C30;
    float: left;
    max-width: 153px;
}


.ecom-cart-price {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-align: right;
    /* float: right; */
    margin-bottom: 0;
}


/* =====================================================
   PRODUCT BOTTOM
===================================================== */

.ecom-cart-product-bottom {
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    /* float: right; */
}


/* =====================================================
   QUANTITY
===================================================== */

.ecom-cart-quantity {
    /* display: flex; */
    align-items: center;
    height: 32px;
    float: right;
    /* border: 1px solid #ddd; */
}

.ecom-cart-quantity button.cart-plus {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: #001c30;
    font-size: 15px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 100%;
    margin-left: 5px;
}
.ecom-cart-quantity button.cart-minus {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: #8e96a4;
    font-size: 15px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 100%;
    margin-right: 5px;
}


.ecom-cart-quantity span {
    min-width: 25px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}


/* =====================================================
   REMOVE
===================================================== */
.ecom-cart-remove img{
    
width: 24px;
    
margin-right: 10px;
}
.ecom-cart-remove {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    text-decoration: underline;
    float: right;
    text-underline-offset: 3px;
    margin-right: 5px;
}


.ecom-cart-remove:hover {
    color: #171717;
}


/* =====================================================
   FOOTER
===================================================== */

.ecom-cart-footer {
    padding: 24px 32px 27px;

    border-top: 1px solid #ededed;

    background: #fff;
}


.ecom-cart-subtotal {
    display: flex;

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

    margin-bottom: 7px;
}

.cart-price img{
    width:15px
}
.ecom-cart-subtotal span {
    font-size: 16px;
    color: #001C30;
}


.ecom-cart-subtotal strong {
    font-size: 16px;
    font-weight: 600;
    color: #56AF2C;
}


.ecom-cart-note {
    margin: 0 0 18px;
    font-size: 12px;
    color: #999;
}


.ecom-cart-checkout {
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 55px;
    padding: 15px;
    background: #cbde5c;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    float: left;
    text-align: center;
    font-weight: 600;
    border-radius: 10px;
    transition:
        background .3s ease;
}


.ecom-cart-checkout:hover {
    background: #333;
    color: #fff;
}


.ecom-cart-checkout b {
    font-size: 18px;

    font-weight: 400;

    transition:
        transform .3s ease;
}


.ecom-cart-checkout:hover b {
    transform: translateX(4px);
}


.ecom-cart-continue {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #1e1d1d;
    text-decoration: none;
    text-underline-offset: 4px;
    border: 1px solid #cecece;
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 10px;
}


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

@media (max-width: 767px) {

    .ecom-cart-drawer {
        width: 100%;
    }

    .ecom-cart-header {
        padding: 22px 20px 20px;
    }

    .ecom-cart-header h3 {
        font-size: 24px;
    }

    .ecom-cart-body {
        padding: 0 20px;
    }

    .ecom-cart-footer {
        padding: 20px;
    }

    .ecom-cart-item {
        gap: 13px;
        padding: 20px 0;
    }

    .ecom-cart-product-image {
        flex-basis: 85px;
        width: 85px;
        height: 105px;
    }

}.slider-wrapper {
    position: relative;
    width: 100%;
    padding: 0;
}

.slider-container {
    width: 100%;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.slider-container::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   CARDS
===================================================== */

/* DESKTOP - 5 Cards */
.slider-container .card {
    position: relative;
    flex: 0 0 calc((100% - 80px) / 5);
    width: calc((100% - 80px) / 5);
    height: 266px;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

.slider-container .card img {
    width: 100%;
    height: 169px;
    object-fit: contain;
    display: block;
    transition: transform .7s cubic-bezier(.2,.65,.3,1);
}

.slider-container .card:hover img {
    transform: scale(1.07);
}


/* =====================================================
   TITLE
===================================================== */

.slider-container .card-title {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    font-size: 18px;
    font-weight: 600;
    color: #282828;
    text-align: center;
}


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

.nav-btn {
    position: absolute;
    top: 50%;
    width: 48px;
    display: none;
    height: 48px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 5;
    transition: all .3s ease;
}

.nav-btn.prev {
    left: -24px;
    transform: translateY(-50%);
}

.nav-btn.next {
    right: -24px;
    transform: translateY(-50%);
}

.nav-btn:hover {
    background: #111;
    border-color: #111;
}

.nav-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid #111;
    border-right: 1.5px solid #111;
}

.nav-btn:hover::before {
    border-color: #fff;
}

.nav-btn.prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.nav-btn.next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}


/* =====================================================
   LARGE TABLET - 4 Cards
===================================================== */

@media (max-width: 1199px) {

    .slider-container .card {
        flex: 0 0 calc((100% - 60px) / 4);
        width: calc((100% - 60px) / 4);
    }

}


/* =====================================================
   TABLET - 3 Cards
===================================================== */

@media (max-width: 991px) {

    .slider-container {
        gap: 16px;
    }

    .slider-container .card {
        flex: 0 0 calc((100% - 32px) / 3);
        width: calc((100% - 32px) / 3);
        height: 240px;
    }

}


/* =====================================================
   MOBILE - 2 Cards
===================================================== */

@media (max-width: 767px) {

    .slider-container {
        gap: 12px;
    }

    .slider-container .card {
        flex: 0 0 calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        height: 220px;
        border-radius: 15px;
    }

    .slider-container .card-title {
        left: 14px;
        right: 14px;
        bottom: 14px;
        font-size: 13px;
    }

    .nav-btn {
        width: 38px;
        height: 38px;
    }

    .nav-btn.prev {
        left: -10px;
    }

    .nav-btn.next {
        right: -10px;
    }

}


/* =====================================================
   SMALL MOBILE - 1.3 Cards (nice slider effect)
===================================================== */

@media (max-width: 480px) {

    .slider-container .card {
        flex: 0 0 78%;
        width: 78%;
        height: 230px;
    }

}
/* =====================================================
   TOP DEALS PRODUCT CAROUSEL
===================================================== */

.deals-carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 10px 2%;
    float: left;
}


/* =====================================================
   TRACK
===================================================== */

.deals-carousel-track {
    width: 100%;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* padding: 10px 2px 20px; */
}

.deals-carousel-track::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   PRODUCT CARD - DESKTOP 5 CARDS
===================================================== */

.deals-carousel-card {
    padding: 13px;
    position: relative;
    flex: 0 0 calc((100% - 64px) / 4);
    width: calc((100% - 64px) / 4);
    min-height: 474px;
    background: #F7F7F7;
    border: 1px solid #CFCFCF;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition:
        transform .45s cubic-bezier(.2,.75,.25,1),
        box-shadow .45s ease,
        border-color .45s ease;
    will-change: transform;
}


/* PREMIUM HOVER */

.deals-carousel-card:hover {
    /* transform: translateY(-8px); */
    border-color: rgba(190, 205, 88, .6);
    /* box-shadow:
        0 18px 45px rgba(0,0,0,.10),
        0 4px 12px rgba(0,0,0,.05); */
}


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

.deals-carousel-image {
    position: relative;
    height: 265px;
    overflow: hidden;
    /* background: #f4f5f6; */
    border-radius: 13px;
    width: 100%;
}

.deals-carousel-image-img {
    width: 100%;
    height: 265px;
    object-fit: cover;
    display: block;
    transition:
        transform .7s cubic-bezier(.2,.65,.3,1),
        filter .5s ease;
    border-radius: 13px;
}

.deals-carousel-card:hover .deals-carousel-image img {
    transform: scale(1.08);
    filter: brightness(.94);
}


/* IMAGE OVERLAY */

.deals-carousel-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.12),
        transparent 60%
    );

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}

.deals-carousel-card:hover .deals-carousel-image::after {
    opacity: 1;
}


/* =====================================================
   CONTENT
===================================================== */

.deals-carousel-content {
    /* padding: 12px 14px 14px; */
    position: relative;
}


.deals-carousel-title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition:
        color .3s ease,
        transform .4s ease;
    margin-top: 15px;
}

.deals-carousel-card:hover .deals-carousel-title {
    color: #111;
    transform: translateX(2px);
}


/* =====================================================
   RATING
===================================================== */
.starr{
    
color: #FFA90D;
    
width: 14px;
    
font-size: 15px;
    
position: relative;
    
top: -3px;
    
margin-right: 2px;
}
.deals-carousel-rating {
    height: 26px;
    display: inline-flex;
    font-size: 14px;
    color: #000000;
    padding: 3px 7px;
    background: #fafafa;
    border-radius: 4px;
    width: 50px;
    top: -53px;
    position: absolute;
    left: 10px;
    padding: 5px;
    text-align: center;
}


/* =====================================================
   PRICE
===================================================== */

.deals-carousel-price-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.deals-carousel-price img{
    width: 25px;
    margin-right: 0px;
}
.deals-carousel-price {
    font-size: 28px;
    font-weight: 700;
    color: #000;
}
.deals-carousel-old-price img{
    width: 14px;
    opacity: .3;
}
.deals-carousel-old-price {
    font-size: 16px;
    color: #B7B7B7;
    text-decoration: line-through;
}

.deals-carousel-discount {
    font-size: 16px;
    font-weight: 700;
    color: #4AA335;
}


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

.deals-carousel-actions {
    display: flex;
    gap: 8px;

    margin-top: 13px;

    transform: translateY(4px);
    transition: transform .4s ease;
}

.deals-carousel-card:hover .deals-carousel-actions {
    transform: translateY(0);
}


.deals-add-cart,
.deals-buy-now {
    flex: 1;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    text-align: center;
    padding: 12px;
}


/* ADD TO CART */

.deals-add-cart {
    border: none;
    color: #fff;
    background: #C9DD58;
    background: linear-gradient(90deg, rgba(201, 221, 88, 1) 50%, rgba(185, 202, 85, 1) 100%);
}

.deals-add-cart:hover {
    background: #18361E;
    transform: translateY(-2px);
    /* box-shadow: 0 6px 15px rgba(174,191,77,.3); */
}


/* BUY NOW */

.deals-buy-now {
    background: transparent;
    border: 1px solid #18361E;
    color: #18361E;
}

.deals-buy-now:hover {
    background: #18361E;
    border-color: #18361E;
    color: #fff;
}


/* =====================================================
   BADGE
===================================================== */
.deals-carousel-badge:after{
    position:absolute;
    content:'';
    background: #C9DD58;
    width: 86px;
    left: 8px;
    top: 21px;
    height: 2px;
}
.deals-carousel-badge3 {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: #653BE3;
    border-radius: 3px;
}.deals-carousel-badge3:after{
    position:absolute;
    content:'';
    background: #C9DD58;
    width: 74px;
    left: 8px;
    top: 21px;
    height: 2px;
}
.deals-carousel-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: #3B5CE3;
    border-radius: 3px;
}

.out-of-stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: #df410e;
    border-radius: 3px;
}
.deals-carousel-badge2:after{
    position:absolute;
    content:'';
    background: #C9DD58;
    width: 30px;
    left: 6px;
    top: 38px;
    height: 2px;
}
.deals-carousel-badge2 {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 3;
    padding: 22px 5px 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: #18361E;
    border-radius: 2px;
}

/* =====================================================
   WISHLIST
===================================================== */
.deals-carousel-wishlist img{
    width: 18px;
}
.deals-carousel-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all .35s ease;
}

.deals-carousel-wishlist:hover {
    transform: scale(1.12);

    background: #fff;

    box-shadow: 0 5px 15px rgba(0,0,0,.15);
}


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

.deals-carousel-nav {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 10;
    transition: all .35s ease;
    display: none;
}

.deals-carousel-prev {
    left: -22px;
    transform: translateY(-50%);
}

.deals-carousel-next {
    right: -22px;
    transform: translateY(-50%);
}


.deals-carousel-nav:hover {
    background: #111;
    border-color: #111;

    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}


/* ARROWS */

.deals-carousel-nav::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-top: 1.5px solid #222;
    border-right: 1.5px solid #222;

    transition: border-color .3s ease;
}

.deals-carousel-nav:hover::before {
    border-color: #fff;
}

.deals-carousel-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.deals-carousel-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}


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


/* LAPTOP - 4 CARDS */

@media (max-width: 1199px) {

    .deals-carousel-card {
        flex: 0 0 calc((100% - 48px) / 4);
    }

}


/* TABLET - 3 CARDS */

@media (max-width: 991px) {

    .deals-carousel-card {
        flex: 0 0 calc((100% - 32px) / 3);
    }

}


/* MOBILE - 2 CARDS */

@media (max-width: 767px) {

    .deals-carousel-track {
        gap: 12px;
    }

    .deals-carousel-card {
        flex: 0 0 calc((100% - 12px) / 2);
        min-height: 290px;
    }

    .deals-carousel-image {
        height: 145px;
    }

    .deals-carousel-content {
        padding: 0;
    }

    .deals-carousel-title {
        font-size: 13px;
    }

    .deals-carousel-price {
        font-size: 18px;
    }.deals-carousel-price img{
        width: 15px;
    }.deals-carousel-discount{
        font-size: 14px;
    }

    .deals-carousel-actions {
        gap: 5px;
        display: inline;
        width: 100%;
        float: left;
    }.deal-bottom{
        display:inline !important;
    }

    .deals-add-cart,
    .deals-buy-now {
        font-size: 13px;
        height: 39px;
        float: left;
        margin-bottom: 10px;
        width: 100%;
    }

}


/* SMALL MOBILE */

@media (max-width: 575px) {
.shop-now{
    width: auto !important;
    font-size: 14px !important;
    height: auto !important;
}
    .deals-carousel-card {
        flex: 0 0 48%;
        padding: 10px;
    }.deals-carousel-badge{
        font-size: 11px;
    }.deals-carousel-badge2{
        font-size: 11px;
    }    .deals-carousel-badge3 {
        font-size: 11px;
    }

.deals-carousel-badge:after{
    width: 70px;
    top: 19px;
}
    .deals-carousel-nav {
        display: none;
    }

}.advertise1 {
    position: relative;
    width: 100%;
    padding: 40px 2%;
    /* float: left; */
    display: flex;
    gap: 20px;
}
.advertise1 a{

position: relative;

flex: 0 0 calc((100% - 20px) / 2);

width: calc((100% - 20px) / 2);

display: inline-block;
}
.advertise1 a img{

width: 100%;

border-radius: 16px;
}
.advertise1 a:hover{
    
}

 /* Carousel container */
  .swiper {
    padding-bottom: 40px;
  }
.featured-promotions .swiper-slide{
    min-height:auto;
}
  /* Style for each slide */
  .swiper-slide {
    text-align: center;
    transition: transform 0.2s;
    min-height: 408px;
  }

  .swiper-slide:hover {
    transform: translateY(-5px);
  }

  .product-image {
    width: 130px;
    height: 229px;
    object-fit: contain;
  }

  .product-title {
    font-size: 20px;
    font-weight: 500;
    color: #000;
  }

  .shop-now {
    display: inline-block;
    padding: 10px 16px;
    background-color: transparent;
    color: #000000;
    border-radius: 25px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s;
    border: 1px solid #000;
    width: 140px;
    height: 42px;
    font-weight: 600;
    margin-top: 15px;
  }

  .shop-now:hover {
    background-color: #000;
    color: #fff;
  }

  /* Responsive adjustments */
  @media(max-width: 768px){
    .swiper-slide {
      width: 80%;
    }
  }
  .swipe-box{
    width: 100%;
    float: left;
    background-image: url('../images/bg6.webp');
    background-size: cover;
    background-position: center;
    min-height: 408px;
    border-radius: 27px;
    padding: 20px;
  }
  .new-arrival{
    
position: relative;
    
width: 100%;
    
padding: 40px 2%;
  }

   /* Footer Styling */
  .footer {
    background-color: #000100;
    padding: 90px 2% 20px;
  }

  .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    border-bottom: 1px solid #181818;
    padding-bottom: 50px;
  }

  /* Logo & Description */
  .logo-desc {
    /* flex: 1 1 337px; */
    max-width: 30%;
  }
.ftr-logo{
    
width: 187px;
}

  .logo-desc h2 {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .logo-desc h2 span {
    color: #00ff00; /* Customize color as needed */
    margin-right: 8px;
  }

  .logo-desc p {
    font-size: 16px;
    line-height: 1.5;
    color: #888888;
    font-weight: 400;
    padding-top: 10px;
    width: 86%;
  }

  /* Social Icons */
  .social-icons {
    margin-top: 30px;
    float: left;
    width: 100%;
  }
.social-icons a img{
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-top: 7px;
}
  .social-icons a {
    /* display: inline-block; */
    background: #fff;
    transition: color 0.3s;
    width: 34px;
    height: 34px;
    text-align: center;
    border-radius: 100%;
    float: left;
    margin: 0 10px 0 0;
  }

  .social-icons a:hover {
    background: #c8de59;
  }

  /* Links Sections */
  .links-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .link-column {
    min-width: 175px;
  }

  .link-column h4 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
  }

  .link-column ul {
    list-style: none;
  }

  .link-column li {
    margin-bottom: 8px;
  }

  .link-column a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
    opacity: .6;
    line-height: 170%;
  }

  .link-column a:hover {
    color: #cadc5e;
    opacity: 1;
  }

  /* Subscription & Payment */
  .subscribe-payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 30px;
  }

  /* Subscribe */
  .subscribe {
    flex: 1 1 250px;
    max-width: 400px;
  }

  .subscribe h4 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .subscribe p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #ccc;
  }

  .subscribe-form {
    display: flex;
  }

  .subscribe-form input {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 4px 0 0 4px;
    outline: none;
  }

  .subscribe-form button {
    padding: 8px 16px;
    border: none;
    background-color: #00ff00;
    color: #111;
    font-weight: bold;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .subscribe-form button:hover {
    background-color: #0f0;
  }

  /* Payment Gateways */
  .payment-icons {
    flex: 1 1 250px;
    max-width: 250px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .payment-icons img {
    height: 30px;
    width: auto;
  }

  /* Footer bottom */
  .footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    color: #777;
  }

  /* Responsive */
  @media(max-width: 768px){
    .footer-top {
      flex-direction: column;
    }
    .links-section {
      flex-direction: column;
    }
    .subscribe-payments {
      flex-direction: column;
    }
  }
  /* =========================================
   ALAM AL TAWASOL FOOTER
========================================= */

.atw-footer {
    width: 100%;
    background: #000;
    color: #fff;
}
.atw-footer-payment{
    margin-top: 50px;
}.atw-footer-order {
    margin-top: 50px;
}
.atw-footer-main {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0px 20px 30px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.5fr;
    align-items: center;
    gap: 60px;
}


/* Common Heading */
.atw-footer h6 {
    margin: 0 0 12px;
    line-height: 1.3;
    color: #fff;
    font-size: 18px;
}


/* =========================================
   PAYMENT
========================================= */

.atw-payment-icons {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.atw-payment-card {
    width: 400px;
    /* height: 19px; */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.atw-payment-card img {
    /* max-width: 85%; */
    /* max-height: 75%; */
    object-fit: contain;
}


/* =========================================
   ORDER STATUS
========================================= */

.atw-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #ffffff;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 140px;
}

.atw-track-icon img {
    width: 25px;
    margin-top: 3px;
}

.atw-track-btn:hover {
    background: transparent;
    color: #fff;
    border-color: #c6dc38;
}


/* =========================================
   NEWSLETTER
========================================= */

.atw-footer-newsletter h6 {
    margin-bottom: 5px;
}

.atw-footer-newsletter p {
    margin: 0 0 10px;
    color: #fff;
    font-size: 15px;
    opacity: .6;
}


.atw-newsletter-form {
    width: 100%;
    max-width: 447px;
    height: 25px;
    background: #fff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 46px;
    margin-top: 20px;
}


.atw-newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 15px;
    border: 0;
    outline: 0;
    background: #ffffff;
    color: #000000;
    font-size: 15px;
}

.atw-newsletter-form input::placeholder {
    color: #888;
}


.atw-newsletter-form button {
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 30px;
    background: #C9DD58;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    /* display: flex; */
    width: 162px;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid #c9dd58;
}

.atw-newsletter-form button span img {
    font-size: 23px;
    line-height: 1;
    width: 14px;
    top: 3px;
    position: relative;
}

.atw-newsletter-form button:hover {
    background: #000000;
    color: #cadd5a;
}


/* =========================================
   COPYRIGHT
========================================= */

.atw-footer-bottom {
    border-top: 1px solid #181818;

    text-align: center;
    padding: 10px 15px;
}

.atw-footer-bottom p {
    margin: 10px 0 0;
    color: #888888;
    font-size: 16px;
}


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

@media (max-width: 768px) {

    .atw-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .atw-footer-newsletter {
        grid-column: 1 / -1;
    }

    .atw-newsletter-form {
        max-width: 90%;
    }
}


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

@media (max-width: 480px) {

    .atw-footer-main {
        grid-template-columns: 1fr;
        gap: 0px;
        padding: 25px 0px;
    }

    .atw-footer-newsletter {
        grid-column: auto;
    }

    .atw-payment-icons {
        gap: 8px;
        width: 85%;
    }

    .atw-footer-bottom {
        padding: 12px 15px;
    }
}

  .section-header h2 {
    /* font-size: 24px; */
    /* margin: 0; */
  }

  .cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
  }

  /* Updated class name from 'card' to 'card2' */
  .card2 {
    background-color: #ffffff;
    border-radius: 8px;
    width: 293px;
    padding: 20px;
    /* text-align: center; */
    border: 1px solid #A8A8A8;
    margin-bottom: 15px;
    position: relative;
  }
@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}
.card-icon img{
    width:50px;
    height:50px;object-fit:contain;
}
  .card-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    animation: iconPulse 1.8s ease-in-out infinite;
    overflow: hidden;
  }

  .card2 h3 {
    font-size: 20px;
    margin: 10px 0;
    color: #1C1C1C;
    font-weight: 500;
    text-align: left;
  }

  .card2 p {
    font-size: 16px;
    color: #8C8C8C;
    text-align: left;
    letter-spacing: -1%;
  }

  .learn-more {
    display: inline-block;
    margin-top: 15px;
    font-size: 16px;
    color: #1C1C1C;
    text-decoration: none;
    text-align: left;
    font-weight: 600;
    text-decoration: underline;
  }
  .learn-more:hover {
    text-decoration: underline;
    color: #c9dd58;
  }
  .why-us{
    width: 100%;
    padding: 30px 0 50px;
    clear: both;
  }
  .i5{
    
position: absolute;
    
right: 0;
    
top: 0;
    
width: 90px;
  }
  /* =========================================================
           MAIN CONTAINER
        ========================================================= */

        .aat-cart-container {
            width: 100%;
            /* max-width: 1280px; */
            margin: 0 auto;
            padding: 0 2%;
        }


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

        .aat-cart-header {
            width: 100%;
            background: #ffffff;
            border-bottom: 1px solid #eeeeee;
        }

        .aat-cart-header-inner {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .aat-cart-logo {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.8px;
            color: #171717;
        }

        .aat-cart-logo span {
            color: #c49a50;
        }

        .aat-cart-header-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .aat-header-icon {
            width: 42px;
            height: 42px;
            border: 1px solid #e6e6e6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #222;
            background: #ffffff;
            transition: all 0.3s ease;
        }

        .aat-header-icon:hover {
            background: #171717;
            color: #ffffff;
            border-color: #171717;
        }

        .aat-header-icon svg {
            width: 18px;
            height: 18px;
        }

        .aat-cart-bag {
            position: relative;
        }

        .aat-cart-count {
            position: absolute;
            top: -3px;
            right: -3px;
            min-width: 17px;
            height: 17px;
            padding: 0 4px;
            border-radius: 20px;
            background: #c49a50;
            color: #ffffff;
            font-size: 9px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }


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

        .aat-cart-page {
            padding: 65px 0;
        }


        /* =========================================================
           PAGE INTRO
        ========================================================= */

        .aat-cart-intro {
            margin-bottom: 42px;
        }

        .aat-cart-eyebrow {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 13px;
            color: #b0c14b;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .aat-cart-eyebrow::before {
            content: "";
            width: 32px;
            height: 1px;
            background: #cadd59;
        }

        .aat-cart-title {
            font-size: 48px;
            line-height: 1.05;
            letter-spacing: -1.8px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .aat-cart-description {
            color: #080808;
            font-size: 16px;
        }


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

        .aat-cart-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 390px;
            gap: 28px;
            align-items: start;
        }


        /* =========================================================
           PRODUCTS BOX
        ========================================================= */

        .aat-cart-products {
            background: #ffffff;
            border: 1px solid #e8e8e8;
            border-radius: 18px;
            overflow: hidden;
        }

        .aat-products-heading {
            min-height: 66px;
            padding: 18px 25px;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .aat-products-heading h2 {
            font-size: 18px;
            font-weight: 700;
        }

        .aat-items-count {
            color: #18361e;
            font-size: 16px;
        }


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

        .aat-cart-item {
            position: relative;
            display: grid;
            grid-template-columns: 125px minmax(0, 1fr) auto auto 30px;
            align-items: center;
            gap: 20px;
            padding: 25px;
            border-bottom: 1px solid #eeeeee;
            transition:
                opacity 0.3s ease,
                transform 0.3s ease,
                max-height 0.3s ease;
        }

        .aat-cart-item:last-child {
            border-bottom: 0;
        }

        .aat-cart-item.removing {
            opacity: 0;
            transform: translateX(30px);
            pointer-events: none;
        }


        /* =========================================================
           PRODUCT IMAGE
        ========================================================= */

        .aat-product-image {
            width: 125px;
            height: 125px;
            border-radius: 14px;
            background: #f5f5f3;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .aat-product-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 12px;
            display: block;
        }


        /* =========================================================
           PRODUCT INFORMATION
        ========================================================= */

        .aat-product-info {
            min-width: 0;
        }

        .aat-product-category {
            color: #a3b344;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .aat-product-name {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 7px;
        }

        .aat-product-meta {
            color: #8b8b8b;
            font-size: 12px;
        }


        /* =========================================================
           QUANTITY
        ========================================================= */

        .aat-quantity {
            height: 40px;
            display: flex;
            align-items: center;
            border: 1px solid #dddddd;
            border-radius: 7px;
            overflow: hidden;
            background: #ffffff;
        }

        .aat-quantity button {
            width: 36px;
            height: 100%;
            border: 0;
            background: #ffffff;
            color: #222222;
            font-size: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .aat-quantity button:hover {
            background: #f3f3f3;
        }

        .aat-quantity-value {
            min-width: 34px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
        }


        /* =========================================================
           PRODUCT PRICE
        ========================================================= */

        .aat-product-price {
            min-width: 85px;
            text-align: right;
            font-size: 16px;
            font-weight: 700;
            white-space: nowrap;
        }


        /* =========================================================
           REMOVE BUTTON
        ========================================================= */

        .aat-remove {
            width: 30px;
            height: 30px;
            border: 0;
            background: transparent;
            color: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .aat-remove:hover {
            color: #171717;
        }

        .aat-remove svg {
            width: 17px;
            height: 17px;
        }


        /* =========================================================
           COUPON
        ========================================================= */

        .aat-coupon {
            margin-top: 18px;
            padding: 23px 25px;
            border: 1px solid #e8e8e8;
            background: #ffffff;
            border-radius: 15px;
        }

        .aat-coupon-title {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .aat-coupon-form {
            display: flex;
            gap: 10px;
        }

        .aat-coupon-input {
            flex: 1;
            min-width: 0;
            height: 44px;
            border: 1px solid #dddddd;
            border-radius: 7px;
            padding: 0 14px;
            outline: none;
            font-size: 13px;
            color: #222222;
            transition: border-color 0.2s ease;
        }

        .aat-coupon-input:focus {
            border-color: #777777;
        }

        .aat-coupon-input::placeholder {
            color: #aaaaaa;
        }

        .aat-coupon-button {
            height: 44px;
            padding: 0 23px;
            border: 0;
            border-radius: 7px;
            background: #cadc5b;
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .aat-coupon-button:hover {
            background: #000000;
        }

        .aat-coupon-message {
            display: none;
            margin-top: 10px;
            font-size: 12px;
            color: #8a6a2d;
        }

        .aat-coupon-message.active {
            display: block;
        }


        /* =========================================================
           SUMMARY
        ========================================================= */

        .aat-cart-summary {
            position: sticky;
            top: 25px;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            border-radius: 18px;
            padding: 29px;
        }

        .aat-summary-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 25px;
        }

        .aat-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            margin-bottom: 16px;
            color: #323232;
            font-size: 15px;
        }

        .aat-summary-row strong {
            color: #222222;
            font-weight: 600;
            white-space: nowrap;
        }

        .aat-summary-divider {
            height: 1px;
            background: #e9e9e9;
            margin: 23px 0 20px;
        }

        .aat-summary-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 24px;
        }

        .aat-summary-total span {
            font-size: 15px;
            font-weight: 700;
        }

        .aat-summary-total strong {
            font-size: 25px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }


        /* =========================================================
           CHECKOUT BUTTON
        ========================================================= */

        .aat-checkout-button {
            width: 100%;
            height: 54px;
            border: 0;
            border-radius: 8px;
            background: #cadd59;
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .aat-checkout-button:hover {
            background: #000000;
        }

        .aat-checkout-button svg {
            width: 17px;
            height: 17px;
            transition: transform 0.3s ease;
        }

        .aat-checkout-button:hover svg {
            transform: translateX(4px);
        }


        /* =========================================================
           CONTINUE SHOPPING
        ========================================================= */

        .aat-continue-shopping {
            width: 100%;
            height: 48px;
            margin-top: 10px;
            border: 1px solid #000000;
            border-radius: 8px;
            background: #ffffff;
            color: #000000;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .aat-continue-shopping:hover {
            border-color: #000000;
            background: #000;
            color: #fff;
        }


        /* =========================================================
           TRUST FEATURES
        ========================================================= */

        .aat-trust {
            margin-top: 25px;
            padding-top: 22px;
            border-top: 1px solid #eeeeee;
        }

        .aat-trust-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 17px;
        }

        .aat-trust-item:last-child {
            margin-bottom: 0;
        }

        .aat-trust-icon {
            width: 35px;
            height: 35px;
            flex-shrink: 0;
            border-radius: 50%;
            background: #cadd59;
            color: #171717;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .aat-trust-icon svg {
            width: 17px;
            height: 17px;
        }

        .aat-trust-text strong {
            display: block;
            font-size: 15px;
            margin-bottom: 2px;
        }

        .aat-trust-text span {
            display: block;
            color: #2c2b2b;
            font-size: 13px;
        }


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

        .aat-empty-cart {
            display: none;
            text-align: center;
            padding: 75px 25px;
        }

        .aat-empty-cart.active {
            display: block;
        }

        .aat-empty-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            border-radius: 50%;
            background: #f5f2ec;
            color: #a67c38;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .aat-empty-icon svg {
            width: 30px;
            height: 30px;
        }

        .aat-empty-cart h3 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        .aat-empty-cart p {
            color: #888888;
            font-size: 13px;
            margin-bottom: 22px;
        }

        .aat-empty-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 46px;
            padding: 0 25px;
            border-radius: 7px;
            background: #171717;
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
        }


        /* =========================================================
           MOBILE PRODUCT LAYOUT
        ========================================================= */

        @media (max-width: 1100px) {

            .aat-cart-layout {
                grid-template-columns: minmax(0, 1fr) 350px;
            }

            .aat-cart-item {
                grid-template-columns: 105px minmax(0, 1fr) auto auto 25px;
                gap: 15px;
            }

            .aat-product-image {
                width: 105px;
                height: 105px;
            }

        }


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

        @media (max-width: 900px) {

            .aat-cart-page {
                padding-top: 50px;
            }

            .aat-cart-layout {
                grid-template-columns: 1fr;
            }

            .aat-cart-summary {
                position: static;
            }

            .aat-cart-summary {
                max-width: none;
            }

        }


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

        @media (max-width: 650px) {

            .aat-cart-container {
                padding-left: 15px;
                padding-right: 15px;
            }

            .aat-cart-header-inner {
                min-height: 65px;
            }

            .aat-cart-logo {
                font-size: 19px;
            }

            .aat-header-icon {
                width: 38px;
                height: 38px;
            }

            .aat-cart-page {
                padding: 35px 0 60px;
            }

            .aat-cart-intro {
                margin-bottom: 27px;
            }

            .aat-cart-eyebrow {
                font-size: 9px;
                letter-spacing: 2px;
            }

            .aat-cart-title {
                font-size: 34px;
                letter-spacing: -1px;
            }

            .aat-cart-description {
                font-size: 12px;
                line-height: 1.6;
            }


            /* PRODUCT BOX */

            .aat-products-heading {
                min-height: 57px;
                padding: 15px;
            }

            .aat-products-heading h2 {
                font-size: 14px;
            }


            /* PRODUCT */

            .aat-cart-item {
                grid-template-columns: 85px minmax(0, 1fr);
                gap: 14px;
                padding: 18px 15px;
                padding-right: 45px;
            }

            .aat-product-image {
                width: 85px;
                height: 85px;
                grid-row: span 3;
            }

            .aat-product-info {
                padding-right: 10px;
            }

            .aat-product-category {
                font-size: 8px;
                letter-spacing: 1px;
                margin-bottom: 4px;
            }

            .aat-product-name {
                font-size: 13px;
                margin-bottom: 5px;
            }

            .aat-product-meta {
                font-size: 10px;
            }


            /* QUANTITY */

            .aat-quantity {
                width: fit-content;
                height: 36px;
            }

            .aat-quantity button {
                width: 32px;
            }

            .aat-quantity-value {
                min-width: 30px;
            }


            /* PRICE */

            .aat-product-price {
                position: absolute;
                right: 15px;
                bottom: 20px;
                min-width: auto;
                font-size: 14px;
            }


            /* REMOVE */

            .aat-remove {
                position: absolute;
                right: 10px;
                top: 16px;
            }


            /* COUPON */

            .aat-coupon {
                padding: 18px 15px;
                border-radius: 12px;
            }

            .aat-coupon-form {
                flex-direction: column;
            }

            .aat-coupon-button {
                width: 100%;
            }


            /* SUMMARY */

            .aat-cart-summary {
                padding: 22px 18px;
                border-radius: 13px;
            }

            .aat-summary-title {
                font-size: 18px;
            }

            .aat-summary-total strong {
                font-size: 22px;
            }

        }


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

        @media (max-width: 380px) {

            .aat-cart-title {
                font-size: 30px;
            }

            .aat-product-image {
                width: 75px;
                height: 75px;
            }

            .aat-cart-item {
                grid-template-columns: 75px minmax(0, 1fr);
                gap: 12px;
            }

            .aat-product-name {
                font-size: 12px;
            }

            .aat-product-meta {
                font-size: 9px;
            }

        }/* =========================================================
   CART HEADER SECTION
========================================================= */

.aat-cart-header-section {
    position: relative;
    background: #f7ffc5;
    padding: 28px 0;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.aat-cart-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #000000;
}

.aat-cart-breadcrumb a {
    color: #000000;
    text-decoration: none;
    transition: color .25s ease;
}

.aat-cart-breadcrumb a:hover {
    color: #aec336;
}

.aat-breadcrumb-arrow {
    color: #a1b91f;
    font-size: 13px;
}

.aat-cart-breadcrumb span:last-child {
    color: #999999;
}


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

.aat-cart-heading {
    position: relative;
}

.aat-cart-heading-line {
    display: inline-block;
    width: 34px;
    height: 1px;
    background: #c49a50;
    vertical-align: middle;
    margin-right: 12px;
}

.aat-cart-eyebrow {
}

.aat-cart-heading h1 {
    margin: 13px 0 10px;
    color: #171717;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.8px;
}

.aat-cart-heading p {
    margin: 0;
    color: #777777;
    font-size: 14px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .aat-cart-header-section {
        padding: 25px 0 45px;
    }

    .aat-cart-breadcrumb {
        margin-bottom: 38px;
    }

    .aat-cart-heading h1 {
        font-size: 40px;
    }

}


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

@media (max-width: 650px) {

    .aat-cart-header-section {
        padding: 20px 0 35px;
    }

    .aat-cart-breadcrumb {
        margin-bottom: 30px;
        gap: 8px;
        font-size: 10px;
    }

    .aat-cart-heading-line {
        width: 25px;
        margin-right: 8px;
    }

    .aat-cart-eyebrow {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .aat-cart-heading h1 {
        margin-top: 11px;
        font-size: 34px;
        letter-spacing: -1px;
    }

    .aat-cart-heading p {
        max-width: 330px;
        font-size: 12px;
    }

}
/* =========================================
   CART DELETE DRAWER
========================================= */

.cart-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
    z-index: 9998;
}

.cart-delete-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* DRAWER */

.cart-delete-drawer {
    position: fixed;
    right: 0;
    top: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    padding: 32px;
    /* box-shadow: -15px 0 50px rgba(0, 0, 0, 0.12); */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.cart-delete-drawer.active {
    transform: translateX(0);
}


/* HEADER */

.cart-delete-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-delete-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;

    font-size: 19px;
}

.cart-delete-close {
    width: 42px;
    height: 42px;

    border: 0;
    background: #f5f5f5;

    border-radius: 50%;

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

    cursor: pointer;

    color: #333;
    font-size: 18px;

    transition: all 0.25s ease;
}

.cart-delete-close:hover {
    background: #111;
    color: #fff;
}


/* CONTENT */

.cart-delete-content {
    padding-top: 55px;
}

.cart-delete-label {
    display: block;

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

    letter-spacing: 2px;

    color: #999;

    margin-bottom: 12px;
}

.cart-delete-content h3 {
    margin: 0 0 15px;

    font-size: 28px;
    line-height: 1.25;

    font-weight: 700;

    color: #111;
}

.cart-delete-content p {
    margin: 0;

    max-width: 340px;

    font-size: 14px;
    line-height: 1.7;

    color: #777;
}


/* ACTIONS */

.cart-delete-actions {
    margin-top: auto;

    display: flex;
    gap: 12px;
}

.cart-cancel-btn,
.cart-confirm-btn {
    height: 54px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.cart-cancel-btn {
    flex: 1;
    background: #b2cb1d;
    border: 1px solid #b2cd48;
    color: #ffffff;
}

.cart-cancel-btn:hover {
    background: #000000;
    border-color: #000;
}

.cart-confirm-btn {
    flex: 1.2;

    border: 0;

    background: #111;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.cart-confirm-btn:hover {
    background: #dc3535;
}


/* MOBILE */

@media (max-width: 575px) {

    .cart-delete-drawer {
        width: 100%;
        height: auto;

        top: auto;
        bottom: 0;

        border-radius: 22px 22px 0 0;

        padding: 26px 22px 22px;

        transform: translateY(100%);
    }

    .cart-delete-drawer.active {
        transform: translateY(0);
    }

    .cart-delete-content {
        padding-top: 35px;
    }

    .cart-delete-content h3 {
        font-size: 23px;
    }

    .cart-delete-actions {
        margin-top: 35px;
    }
}/* =========================================
   CART DELETE BUTTON
========================================= */

.cart-delete-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid #cadd59;
    border-radius: 50%;
    background: #fff;
    color: #b2cb1d;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ICON */

.cart-delete-btn i {
    pointer-events: none;
    transition: transform 0.3s ease;
}


/* HOVER */

.cart-delete-btn:hover {
    color: #dc3545;
    background: #fff5f5;
    border-color: #ffd6da;

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(220, 53, 69, 0.12);
}

.cart-delete-btn:hover i {
    transform: scale(1.08);
}


/* ACTIVE / CLICK */

.cart-delete-btn:active {
    transform: translateY(0) scale(0.94);
}


/* FOCUS */

.cart-delete-btn:focus-visible {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}


/* MOBILE */

@media (max-width: 575px) {

    .cart-delete-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

}/* =========================================
   CHECKOUT HEADER
========================================= */

.checkout-header {
    height: 82px;
    background: #fff;
    border-bottom: 1px solid #ededed;

    display: flex;
    align-items: center;
}

.checkout-header-inner {
    width: min(1380px, calc(100% - 50px));
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-logo img {
    max-width: 180px;
    max-height: 48px;
    display: block;
}

.checkout-secure {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.checkout-secure i {
    color: #222;
    font-size: 15px;
}


/* =========================================
   CHECKOUT BREADCRUMB
========================================= */

.checkout-breadcrumb {
    background: #eef9aa;
    border-bottom: 1px solid #ededed;
}

.checkout-breadcrumb-inner {
    width: min(1380px, calc(100% - 50px));
    margin: auto;

    min-height: 58px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    color: #999;
}

.checkout-breadcrumb a {
    color: #555;
    transition: color .25s ease;
}

.checkout-breadcrumb a:hover {
    color: #111;
}

.checkout-breadcrumb i {
    font-size: 9px;
    color: #bbb;
}

.checkout-breadcrumb .active {
    color: #111;
    font-weight: 600;
}


/* =========================================
   MAIN CHECKOUT
========================================= */

.checkout-main {
    width: min(1380px, calc(100% - 50px));
    margin: 45px auto 80px;
}

.checkout-heading {
    margin-bottom: 32px;
}

.checkout-heading span {
    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #999;
}

.checkout-heading h1 {
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.8px;
}


/* =========================================
   GRID
========================================= */

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(350px, .75fr);
    gap: 28px;
    align-items: start;
}


/* =========================================
   CHECKOUT CARD
========================================= */

.checkout-card {
    background: #fff;

    border: 1px solid #e9e9e9;
    border-radius: 14px;

    padding: 30px;
}

.checkout-card + .checkout-card {
    margin-top: 20px;
}

.checkout-card-title {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;
}

.checkout-card-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #18361e;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.checkout-card-title h2 {
    font-size: 19px;
    font-weight: 700;
}

.checkout-card-title p {
    margin-left: auto;

    font-size: 12px;
    color: #999;
}


/* =========================================
   FORM
========================================= */

.checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.checkout-field {
    position: relative;
}

.checkout-field.full {
    grid-column: 1 / -1;
}

.checkout-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}

.checkout-field label span {
    color: #dc3545;
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea {
    width: 100%;

    border: 1px solid #e3e3e3;
    border-radius: 8px;

    background: #fff;

    color: #222;

    font-size: 14px;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.checkout-field input,
.checkout-field select {
    height: 50px;
    padding: 0 15px;
}

.checkout-field textarea {
    min-height: 105px;
    padding: 14px 15px;
    resize: vertical;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}

.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
    color: #aaa;
}


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

.phone-field {
    display: flex;
    gap: 8px;
}

.phone-code {
    width: 92px !important;
    flex-shrink: 0;
}

.phone-number {
    flex: 1;
}


/* =========================================
   CHECKBOX
========================================= */

.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;

    font-size: 13px;
    color: #555;

    cursor: pointer;
}

.checkout-checkbox input {
    width: 17px;
    height: 17px;

    accent-color: #111;

    cursor: pointer;
}


/* =========================================
   DELIVERY OPTIONS
========================================= */

.delivery-options {
    display: grid;
    gap: 12px;
}

.delivery-option {
    position: relative;
}

.delivery-option input {
    position: absolute;
    opacity: 0;
}

.delivery-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 17px 18px;

    border: 1px solid #e5e5e5;
    border-radius: 9px;

    cursor: pointer;

    transition: all .25s ease;
}

.delivery-left {
    display: flex;
    align-items: center;
    gap: 13px;
}

.delivery-radio {
    width: 18px;
    height: 18px;

    border: 1px solid #ccc;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-radio::after {
    content: "";

    width: 8px;
    height: 8px;

    background: #111;
    border-radius: 50%;

    transform: scale(0);

    transition: transform .2s ease;
}

.delivery-option input:checked + .delivery-label {
    border-color: #111;
    background: #fafafa;
}

.delivery-option input:checked + .delivery-label .delivery-radio {
    border-color: #111;
}

.delivery-option input:checked + .delivery-label .delivery-radio::after {
    transform: scale(1);
}

.delivery-info strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}

.delivery-info small {
    font-size: 13px;
    color: #999;
}
.delivery-price img{
    
width: 15px;
}
.delivery-price {
    font-size: 17px;
    font-weight: 700;
    color: #000;
}


/* =========================================
   PAYMENT
========================================= */

.payment-options {
    display: grid;
    gap: 12px;
}

.payment-option {
    position: relative;
}

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-label {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 17px 18px;

    border: 1px solid #e5e5e5;
    border-radius: 9px;

    cursor: pointer;

    transition: all .25s ease;
}

.payment-option input:checked + .payment-label {
    border-color: #111;
    background: #fafafa;
}

.payment-radio {
    width: 18px;
    height: 18px;

    border: 1px solid #ccc;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-radio::after {
    content: "";

    width: 8px;
    height: 8px;

    background: #111;
    border-radius: 50%;

    transform: scale(0);

    transition: transform .2s ease;
}

.payment-option input:checked + .payment-label .payment-radio {
    border-color: #111;
}

.payment-option input:checked + .payment-label .payment-radio::after {
    transform: scale(1);
}

.payment-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 7px;

    background: #f5f5f5;

    color: #333;
}

.payment-text strong {
    display: block;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 3px;
}

.payment-text small {
    color: #999;
    font-size: 11px;
}


/* =========================================
   ORDER SUMMARY
========================================= */

.order-summary {
    position: sticky;
    top: 25px;

    background: #fff;

    border: 1px solid #e9e9e9;
    border-radius: 14px;

    padding: 28px;
}

.order-summary-title {
    font-size: 20px;
    font-weight: 700;

    padding-bottom: 20px;
    border-bottom: 1px solid #ededed;
}


/* PRODUCTS */

.summary-products {
    padding: 20px 0;
    border-bottom: 1px solid #ededed;
}

.summary-product {
    display: flex;
    gap: 13px;

    margin-bottom: 18px;
}

.summary-product:last-child {
    margin-bottom: 0;
}

.summary-product-image {
    width: 68px;
    height: 68px;

    flex-shrink: 0;

    border-radius: 8px;

    background: #f6f6f6;

    overflow: hidden;
}

.summary-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.summary-product-info {
    flex: 1;
    min-width: 0;
}

.summary-product-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.summary-product-meta {
    font-size: 13px;
    color: #999;
}
.summary-product-price img{
    width: 15px;
}
.summary-product-price {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}


/* COUPON */

.coupon-box {
    display: flex;
    gap: 8px;

    padding: 20px 0;

    border-bottom: 1px solid #ededed;
}

.coupon-box input {
    height: 46px;

    flex: 1;

    min-width: 0;

    border: 1px solid #e1e1e1;
    border-radius: 7px;

    padding: 0 13px;

    outline: none;

    font-size: 13px;
}

.coupon-box input:focus {
    border-color: #111;
}

.coupon-box button {
    height: 46px;
    padding: 0 17px;
    border: 0;
    border-radius: 7px;
    background: #cbde5a;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    transition: background .25s ease;
}

.coupon-box button:hover {
    background: #000000;
}


/* TOTALS */

.summary-totals {
    padding: 20px 0;

    border-bottom: 1px solid #ededed;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    font-size: 15px;
    color: #666;
}

.summary-row:last-child {
    margin-bottom: 0;
}
.summary-row strong img{
    width: 15px;
}
.summary-row strong {
    color: #000000;
    font-weight: 600;
}

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 0 18px;
}

.summary-total span {
    font-size: 15px;
    font-weight: 600;
}
#totalAmount img{
    
width: 17px;
}
.summary-total strong {
    font-size: 23px;
    font-weight: 800;
}


/* PLACE ORDER */

.place-order-btn {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.place-order-btn:hover {
    background: #cbde5a;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.14);
}

.place-order-btn i {
    font-size: 13px;
}


/* SECURITY */

.checkout-security {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    margin-top: 16px;

    font-size: 11px;
    color: #999;
}

.checkout-security i {
    color: #777;
}


/* TERMS */

.checkout-terms {
    margin-top: 16px;

    font-size: 10px;
    line-height: 1.6;

    color: #aaa;
    text-align: center;
}

.checkout-terms a {
    color: #555;
    text-decoration: underline;
}


/* =========================================
   SUCCESS MESSAGE
========================================= */

.checkout-message {
    display: none;

    padding: 13px 15px;

    margin-top: 15px;

    border-radius: 7px;

    background: #f0faf3;
    border: 1px solid #d7f0de;

    color: #26733b;

    font-size: 12px;
}

.checkout-message.active {
    display: block;
}


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

@media (max-width: 1100px) {

    .checkout-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 20px;
    }

    .checkout-card {
        padding: 25px;
    }

    .order-summary {
        padding: 23px;
    }

}


@media (max-width: 850px) {

    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
    }

    .checkout-main {
        margin-top: 35px;
    }

}


@media (max-width: 600px) {

    .checkout-header {
        height: 70px;
    }

    .checkout-header-inner,
    .checkout-breadcrumb-inner,
    .checkout-main {
        width: calc(100% - 30px);
    }

    .checkout-logo img {
        max-width: 145px;
    }

    .checkout-secure {
        font-size: 11px;
    }

    .checkout-secure span {
        display: none;
    }

    .checkout-breadcrumb-inner {
        min-height: 50px;
        font-size: 11px;
    }

    .checkout-main {
        margin-top: 28px;
        margin-bottom: 45px;
    }

    .checkout-heading {
        margin-bottom: 22px;
    }

    .checkout-heading h1 {
        font-size: 29px;
    }

    .checkout-card {
        padding: 20px 17px;
        border-radius: 11px;
    }

    .checkout-card-title {
        margin-bottom: 20px;
    }

    .checkout-card-title h2 {
        font-size: 17px;
    }

    .checkout-card-title p {
        display: none;
    }

    .checkout-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .checkout-field.full {
        grid-column: auto;
    }

    .checkout-field input,
    .checkout-field select {
        height: 48px;
    }

    .order-summary {
        padding: 20px 17px;
        border-radius: 11px;
    }

    .order-summary-title {
        font-size: 18px;
    }

}


@media (max-width: 400px) {

    .phone-code {
        width: 78px;
    }

    .coupon-box button {
        padding: 0 13px;
    }

    .summary-total strong {
        font-size: 20px;
    }

}
.ecom-cart2 b {
    top: -7px;
    left: 20px;
}
.ecom-cart2 b, .ecom-mobile-cart2 b {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #19bd68;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}/* =========================================================
   PAGE
========================================================= */

.shop-page {
    width: min(1380px, calc(100% - 50px));
    margin: 0 auto;
    padding: 0px 0 90px;
}


/* =========================================================
   SHOP INTRO
========================================================= */

.shop-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    /* margin-bottom: 35px; */
}

.shop-intro-label {
    display: block;

    margin-bottom: 9px;

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

    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #999;
}

.shop-intro h1 {
    font-size: 40px;
    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.8px;

    margin-bottom: 10px;
}

.shop-intro p {
    max-width: 620px;

    font-size: 14px;
    line-height: 1.7;

    color: #777;
}


/* =========================================================
   TOOLBAR
========================================================= */

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding: 14px 0;
    /* border-top: 1px solid #e7e7e7; */
    border-bottom: 1px solid #e7e7e7;
}

.shop-result-count {
    font-size: 13px;
    color: #777;
}

.shop-result-count strong {
    color: #111;
}

.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-filter-mobile {
    display: none;

    height: 42px;

    padding: 0 16px;

    border: 1px solid #ddd;
    border-radius: 7px;

    background: #fff;

    font-size: 12px;
    font-weight: 600;
}

.shop-sort {
    height: 42px;
    min-width: 175px;
    padding: 0 14px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fff;
    outline: none;
    color: #333;
    font-size: 14px;
}

.shop-view-toggle {
    display: none;
    gap: 4px;
    padding: 4px;
    background: #f2f2f2;
    border-radius: 7px;
}

.shop-view-btn {
    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color: #999;

    transition: all .2s ease;
}

.shop-view-btn.active {
    background: #fff;
    color: #111;

    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}


/* =========================================================
   CONTENT GRID
========================================================= */

.shop-content {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 50px;
    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.shop-sidebar {
    background: #fff;
    /* border: 1px solid #e8e8e8; */
    border-radius: 12px;
    overflow: hidden;
}

.filter-section {
    padding: 15px 0px;
    border-bottom: 1px solid #ededed;
}

.filter-section:last-child {
    border-bottom: 0;
}

.filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 17px;
}

.filter-heading h3 {
    font-size: 16px;
    font-weight: 600;
    color: #C9DD58;
}

.filter-reset {
    border: 0;
    background: none;

    font-size: 10px;
    font-weight: 600;

    color: #999;

    cursor: pointer;
}

.filter-reset:hover {
    color: #111;
}


/* CATEGORY */

.filter-list {
    display: grid;
    gap: 20px;
    list-style: none;
}

.filter-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-list label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    color: #001C30;
    cursor: pointer;
    font-weight: 500;
}

.filter-list input {
    width: 15px;
    height: 15px;

    accent-color: #111;

    cursor: pointer;
}

.filter-count {
    font-size: 10px;
    color: #aaa;
}


/* PRICE */
.price-values img{
    width:20px;
}
.price-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 18px;
    color: #666;
}

.price-range {
    position: relative;
    height: 4px;

    background: #ddd;

    border-radius: 10px;
}

.price-range-fill {
    position: absolute;

    left: 0;
    right: 20%;

    top: 0;
    bottom: 0;

    background: #111;

    border-radius: 10px;
}

.price-range input {
    position: absolute;

    left: 0;
    top: -7px;

    width: 100%;
    height: 18px;

    margin: 0;

    pointer-events: none;

    appearance: none;

    background: transparent;
}

.price-range input::-webkit-slider-thumb {
    appearance: none;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #111;

    border: 3px solid #fff;

    box-shadow: 0 0 0 1px #111;

    pointer-events: auto;
}


/* RATING */

.rating-option {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.rating-option:last-child {
    margin-bottom: 0;
}

.rating-option input {
    accent-color: #111;
}

.rating-stars {
    color: #f2ad28;
    font-size: 11px;
    letter-spacing: 1px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 15px;
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: #ddd;
    /* box-shadow: 0 15px 35px rgba(0,0,0,.08); */
}


/* IMAGE */

.product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f6f6f6;
    width: 100%;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}


/* BADGE */

.product-badge {
    position: absolute;

    top: 13px;
    left: 13px;

    z-index: 2;

    padding: 6px 9px;

    border-radius: 5px;

    background: #111;
    color: #fff;

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

    letter-spacing: 1px;
    text-transform: uppercase;
}

.product-badge.sale {
    background: #dc3545;
}


/* WISHLIST */
.product-wishlist i{
    
font-size: 20px;
    
color: #000;
}
.product-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #777;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
    transition: all .25s ease;
}

.product-wishlist:hover,
.product-wishlist.active {
    color: #eb1212;
}

.product-wishlist.active i {
    font-weight: 900;
    color: #cf0000;
}


/* QUICK ADD */

.product-quick-add {
    position: absolute;

    left: 13px;
    right: 13px;

    bottom: 13px;

    height: 43px;

    border: 0;
    border-radius: 7px;

    background: #fff;
    color: #111;

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

    transform: translateY(65px);

    opacity: 0;

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

.product-card:hover .product-quick-add {
    transform: translateY(0);
    opacity: 1;
}

.product-quick-add:hover {
    background: #111;
    color: #fff;
}


/* PRODUCT INFO */

.product-info {
    padding: 17px 16px 18px;
}

.product-category {
    display: block;

    margin-bottom: 7px;

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

    text-transform: uppercase;

    letter-spacing: 1.4px;

    color: #999;
}

.product-name {
    display: -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    min-height: 38px;

    font-size: 14px;
    line-height: 1.35;

    font-weight: 600;

    color: #222;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 9px;
}

.product-rating-stars {
    color: #f2ad28;

    font-size: 10px;
    letter-spacing: 1px;
}

.product-rating-count {
    font-size: 10px;
    color: #aaa;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 12px;
}

.current-price {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}

.old-price {
    font-size: 11px;
    color: #aaa;
    text-decoration: line-through;
}


/* =========================================================
   PAGINATION
========================================================= */

.shop-pagination {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 45px;
}

.pagination-btn {
    width: 40px;
    height: 40px;

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

    border: 1px solid #ddd;

    border-radius: 7px;

    background: #fff;

    color: #555;

    font-size: 12px;

    transition: all .25s ease;
}

.pagination-btn:hover {
    border-color: #111;
    color: #111;
}

.pagination-btn.active {
    background: #111;
    border-color: #111;
    color: #fff;
}

.pagination-dots {
    color: #aaa;
}


/* =========================================================
   FILTER OVERLAY
========================================================= */

.filter-overlay {
    position: fixed;

    inset: 0;

    z-index: 9998;

    background: rgba(0,0,0,.45);

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;
}

.filter-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   MOBILE FILTER DRAWER
========================================================= */

.mobile-filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 330px;
    max-width: 90%;
    height: 100vh;
    background: #fff;
    overflow-y: auto;
    transform: translateX(-100%);
    transition:
        transform .4s cubic-bezier(.77,0,.175,1);
}

.mobile-filter-drawer.active {
    transform: translateX(0);
}

.mobile-filter-header {
    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px;

    background: #fff;

    border-bottom: 1px solid #eee;
}

.mobile-filter-header h2 {
    font-size: 18px;
}

.mobile-filter-close {
    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #f5f5f5;

    color: #333;
}

.mobile-filter-content {
    padding: 0 20px 30px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.shop-empty {
    display: none;

    padding: 80px 20px;

    text-align: center;

    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 12px;
}

.shop-empty i {
    font-size: 35px;
    color: #bbb;

    margin-bottom: 18px;
}

.shop-empty h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.shop-empty p {
    font-size: 13px;
    color: #999;
}


/* =========================================================
   TOAST
========================================================= */

.shop-toast {
    position: fixed;

    left: 50%;
    bottom: 25px;

    z-index: 10000;

    min-width: 260px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 8px;

    background: #111;
    color: #fff;

    font-size: 12px;
    font-weight: 600;

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

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

    opacity: 0;

    transition: all .35s ease;
}

.shop-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.shop-toast i {
    color: #6fd28a;
}


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

@media (max-width: 1100px) {

    .shop-content {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 20px;
    }

    .product-grid {
        gap: 15px;
    }

    .product-info {
        padding: 14px;
    }

}


@media (max-width: 900px) {

    .shop-content {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        display: none;
    }

    .shop-filter-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 700px) {

    .shop-header {
        height: 70px;
    }

    .shop-header-inner,
    .shop-breadcrumb-inner,
    .shop-page {
        width: calc(100% - 30px);
    }

    .shop-logo img {
        width: 145px;
    }

    .shop-header-actions {
        gap: 6px;
    }

    .shop-header-action {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .shop-breadcrumb-inner {
        min-height: 50px;
        font-size: 11px;
    }

    .shop-page {
        padding: 30px 0 60px;
    }

    .shop-intro {
        display: block;

        margin-bottom: 25px;
    }

    .shop-intro h1 {
        font-size: 30px;
    }

    .shop-intro p {
        font-size: 12px;
    }

    .shop-toolbar {
        align-items: stretch;
        gap: 10px;
    }

    .shop-result-count {
        display: none;
    }

    .shop-toolbar-right {
        width: 100%;
    }

    .shop-filter-mobile,
    .shop-sort {
        flex: 1;
        min-width: 0;
    }

    .shop-view-toggle {
        display: none;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-quick-add {
        display: none;
    }

    .product-info {
        padding: 13px;
    }

    .product-name {
        font-size: 12px;
        min-height: 34px;
    }

    .current-price {
        font-size: 14px;
    }

    .old-price {
        font-size: 10px;
    }

    .product-wishlist {
        width: 24px;
        height: 24px;
        font-size: 8px;
        right: 3px;
        top: 7px;
    }.product-wishlist i{
        font-size: 15px;
    }

    .product-badge {
        top: 10px;
        left: 10px;
        font-size: 8px;
        padding: 5px 7px;
    }

    .product-rating {
        margin-top: 7px;
    }

    .product-rating-stars {
        font-size: 8px;
    }

    .product-rating-count {
        font-size: 9px;
    }

}


@media (max-width: 400px) {

    .shop-toolbar-right {
        gap: 7px;
    }

    .shop-filter-mobile,
    .shop-sort {
        font-size: 13px;
    }

    .product-grid {
        gap: 9px;
    }

    .product-info {
        padding: 11px;
    }

    .product-category {
        font-size: 8px;
    }

    .product-name {
        font-size: 11px;
    }

}
.budget-sec{width: 100%;padding: 0px 2% 50px;}
.budget-box {
    position: relative;
    width: 100%;
    float: left;
    overflow: hidden;
    height: 193px;
    border-radius: 20px;
}

/* Animated wave background */
.bg7 {
    width: 100%;
    display: block;
    position: relative;
    transform-origin: center center;
    animation: liquidWave 5s ease-in-out infinite;
    will-change: transform;
    height: 193px;
    overflow: hidden;
    border-radius: 10px;
}
.budget-box::after {
    content: "";
    position: absolute;
    width: 160%;
    height: 180%;
    top: -40%;
    left: -130%;
    background: linear-gradient(
94deg, transparent 20%, rgba(255, 255, 255, 0.05) 35%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.08) 55%, #dfe9ff30 70%);
    transform: rotate(
110deg);
    z-index: 2;
    pointer-events: none;
    animation: gradientWave 4s ease-in-out infinite;
    overflow: hidden;
}

@keyframes gradientWave {
    0% {
        left: -130%;
    }

    50% {
        left: 20%;
    }

    100% {
        left: 130%;
    }
}

/* Smooth wave / floating effect */
@keyframes budgetWave {
    0% {
        transform: scale(1) rotate(0deg) translate3d(0, 0, 0);
    }

    25% {
        transform: scale(1.035) rotate(0.8deg) translate3d(-5px, 3px, 0);
    }

    50% {
        transform: scale(1.06) rotate(0deg) translate3d(0, 6px, 0);
    }

    75% {
        transform: scale(1.035) rotate(-0.8deg) translate3d(5px, 3px, 0);
    }

    100% {
        transform: scale(1) rotate(0deg) translate3d(0, 0, 0);
    }
}
.arrow5{
    width: 35px;
    float: right;
    position: absolute;
    bottom: -47px;
    right: 32px;
}
.budget-content{
    position: absolute;
    top: 40px;
    width: 100%;
    text-align: left;
    left: 20px;
}
.budget-content h5{
    font-size: 27px;
    color: #00102D;
    font-weight: 500;
    text-transform: uppercase;
}
.budget-content h6{
    font-size: 48px;
    color: #00102D;
    font-weight: 700;
    float: left;
    position: relative;
    left: -10px;
    top: 5px;
}
.budget-content h6 span{
    font-size: 19px;
    transform: rotate(-90deg);
    float: left;
    color: #00102D;
    margin-top: 20px;
    text-align: ;
}
.mySwiper2 .swiper-slide{
    min-height: auto;
}@keyframes liquidWave {
    0% {
        transform: scale(1) skewX(0deg) translateY(0);
    }

    20% {
        transform: scale(1.04) skewX(1deg) translateY(-3px);
    }

    40% {
        transform: scale(1.06) skewX(-1deg) translateY(3px);
    }

    60% {
        transform: scale(1.04) skewX(1deg) translateY(0);
    }

    80% {
        transform: scale(1.02) skewX(-0.8deg) translateY(-2px);
    }

    100% {
        transform: scale(1) skewX(0deg) translateY(0);
    }
}
/* =========================================
   FEATURED PROMOTIONS
========================================= */

.featured-promotions {
    width: 100%;
    padding: 25px 2% 35px;
    position: relative;
    background: #fff;
}

.featured-promotions .container {
    width: 100%;
}

/* Title */

.featured-title {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
}

.featured-title span {
    display: inline-block;
    padding: 0 18px;
    background: #fff;

    font-size: 13px;
    font-weight: 600;
    color: #00102d;
    position: relative;
    z-index: 2;
}

.featured-title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    /* background: #d9dfe7; */
}


/* Carousel */

.promotion-carousel {
    width: 100%;
    position: relative;
}

.promoSwiper {
    width: 100%;
    padding: 0 0 25px !important;
}

.promoSwiper .swiper-slide {
    height: auto;
}


/* Promotion Card */

.promotion-card {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    line-height: 0;
    background: #f5f5f5;
}

.promotion-card img {
    width: 100%;
    height: auto;
    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


/* Hover */

.promotion-card:hover img {
    transform: scale(1.04);
}


/* Navigation */

.promo-prev,
.promo-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.promo-prev {
    left: 8px;
}

.promo-next {
    right: 8px;
}

.promo-prev i,
.promo-next i {
    font-size: 12px;
    color: #00102d;
}

.promo-prev:hover,
.promo-next:hover {
    background: #00102d;
    transform: translateY(-50%) scale(1.05);
}

.promo-prev:hover i,
.promo-next:hover i {
    color: #fff;
}


/* Pagination */

.promo-pagination {
    bottom: 0 !important;
    text-align: center;
    margin-top: 20px;
}

.promo-pagination .swiper-pagination-bullet {
    width: 29px;
    height: 3px;
    opacity: 0.35;
    background: #000;
    transition: all 0.3s ease;
    border-radius: 0;
}

.promo-pagination .swiper-pagination-bullet-active {
    width: 44px;
    border-radius: 10px;
    opacity: 1;
}


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

@media (max-width: 991px) {

    .featured-promotions {
        padding: 20px 0 30px;
    }

    .featured-promotions .container {
        padding: 0 15px;
    }

    .promo-prev,
    .promo-next {
        width: 34px;
        height: 34px;
    }

}


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

@media (max-width: 767px) {

    .featured-promotions {
        padding: 18px 0 25px;
    }

    .featured-title {
        margin-bottom: 8px;
    }

    .featured-title span {
        font-size: 12px;
        padding: 0 12px;
    }

    .promoSwiper {
        padding-bottom: 22px !important;
    }

    .promo-prev,
    .promo-next {
        width: 30px;
        height: 30px;
    }

    .promo-prev {
        left: 5px;
    }

    .promo-next {
        right: 5px;
    }

    .promo-prev i,
    .promo-next i {
        font-size: 10px;
    }

}


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

@media (max-width: 480px) {

    .featured-promotions .container {
        padding: 0 10px;
    }

    .promotion-card {
        border-radius: 4px;
    }

}/* =========================================================
   TOP DEALS SECTION
========================================================= */

.deals-section {
    width: 100%;
    padding: 50px 0;
    /* background: #050706; */
    overflow: hidden;
}

.deals-wrapper {
    width: min(1400px, 96%);
    min-height: 430px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-image: url('../images/bg-deal.webp');
    background-size: cover;
    background-position: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.deals-intro {
    width: 31%;
    min-width: 280px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    padding: 185px 27px;
    z-index: 5;
}

.deals-grid {
    position: absolute;
    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(24, 150, 92, .20) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(24, 150, 92, .20) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,.8),
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,.8),
        transparent
    );
}

.deals-intro::after {
    content: "";
    /* position: absolute; */
    /* width: 180px; */
    /* height: 180px; */
    /* right: -100px; */
    /* bottom: -90px; */
    /* border-radius: 50%; */
    /* background: #063b25; */
    /* filter: blur(60px); */
    /* opacity: .6; */
}
.deals-small-title span{
    color:#C9DD58;
}
.deals-small-title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 36px;
    line-height: 1.2;
}

.deals-intro h2 {
    position: relative;
    z-index: 2;
    margin: 4px 0 18px;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
}

.deals-shop {
    position: relative;
    z-index: 2;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: .3s ease;
    font-weight: 500;
}

.deals-shop span {
    width: 24px;
    height: 24px;
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* border: 1px solid rgba(141,223,186,.6); */
    /* border-radius: 50%; */
    /* font-size: 11px; */
}

.deals-shop:hover {
    color: #fff;
    transform: translateX(4px);
}


/* =========================================================
   CAROUSEL
========================================================= */

.deals-carousel {
    width: 70%;
    position: relative;
    overflow: hidden;
    padding: 30px 0 65px 5%;
    touch-action: pan-y;
    cursor: grab;
}

.deals-carousel.dragging {
    cursor: grabbing;
}

.deals-track {
    display: flex;
    align-items: center;
    /* height: 350px; */
    will-change: transform;
    transition:
        transform .65s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   SLIDE
========================================================= */

.deal-slide {
    flex: 0 0 370px;
    height: 474px;
    position: relative;
    display: flex;
    align-items: center;
    /* margin-right: -55px; */
    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* =========================================================
   BIG NUMBER
========================================================= */
.deal-number {
    position: absolute;
    left: -65px;
    top: 5px;

    z-index: 1;

    font-size: 235px;
    line-height: 1;
    font-weight: 800;

    color: transparent;

    /* Gradient-style bright stroke */
    -webkit-text-stroke: 1px rgb(201 221 88);

    /* Soft gradient glow around the outline */
    text-shadow:
        

    opacity: .9;

    pointer-events: none;

    transition: .5s ease;
}
/* =========================================================
   PRODUCT CARD
========================================================= */

.deal-card {
    position: relative;
    z-index: 3;
    width: 82%;
    margin-top: 30px;
    /* min-width: 245px; */
    /* margin-left: 45px; */
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    /* box-shadow:
        0 20px 40px rgba(0,0,0,.35); */
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.deal-image {
    height: 265px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    /* background:
        radial-gradient(
            circle,
            #f8f2df,
            #eee5cf
        ); */
}

.deal-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
    border-radius: 15px;
}

.deal-card:hover .deal-image img {
    transform: scale(1.06);
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.deal-info {
    padding: 10px 12px 12px;
}

.deal-info h3 {
    margin: 0 0 9px;
    overflow: hidden;
    color: #000000;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 500;
    min-height: 53px;
}


/* =========================================================
   PRICE
========================================================= */

.deal-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
}
.deal-price strong img{
    width: 18px;
}
.deal-price strong {
    color: #000000;
    font-size: 25px;
}

.deal-price del {
    color: #aaa;
    font-size: 15px;
}

.deal-price span {
    /* padding: 2px 5px; */
    /* border-radius: 3px; */
    /* background: #dff3e8; */
    /* color: #16864e; */
    /* font-size: 7px; */
}


/* =========================================================
   BUTTONS
========================================================= */

.deal-bottom {
    display: flex;
    gap: 5px;
}

.deal-bottom button {
    /* flex: 1; */
    /* height: 25px; */
    /* border-radius: 3px; */
    /* font-size: 8px; */
    /* cursor: pointer; */
    /* transition: .3s ease; */
}

.cart-btn {
    border: 1px solid #6baf8d;

    background: #edf8f1;

    color: #20784c;
}

.buy-btn {
    border: 1px solid #222;

    background: #111;

    color: #fff;
}

.cart-btn:hover {
    background: #cfeedd;
}

.buy-btn:hover {
    background: #247d50;
    border-color: #247d50;
}


/* =========================================================
   CONTROLS
========================================================= */

.deals-controls {
    position: absolute;
    left: 45px;
    bottom: 15px;
    z-index: 20;
    display: none;
    align-items: center;
    gap: 12px;
}

.deal-prev,
.deal-next {
    width: 28px;
    height: 28px;

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

    padding: 0;

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

    border-radius: 50%;

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

    color: #fff;

    cursor: pointer;

    transition: .3s ease;
}

.deal-prev:hover,
.deal-next:hover {
    background: #16794b;
    border-color: #16794b;
}

.deal-dots {
    display: flex;
    align-items: center;

    gap: 5px;
}

.deal-dot {
    width: 18px;
    height: 3px;

    padding: 0;

    border: 0;
    border-radius: 5px;

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

    cursor: pointer;

    transition: .35s ease;
}

.deal-dot.active {
    width: 30px;

    background: #65c994;
}


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

@media (max-width: 1100px) {

    .deals-intro {
        width: 35%;
        min-width: 250px;

        padding: 30px;
    }

    .deals-carousel {
        width: 65%;
    }

    .deal-slide {
        flex-basis: 300px;
    }

    .deal-card {
        width: 220px;
        min-width: 220px;
    }

    .deal-number {
        font-size: 185px;
    }
}


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

@media (max-width: 767px) {

    .deals-section {
        padding: 30px 0;
    }

    .deals-wrapper {
        width: 94%;

        display: block;

        min-height: auto;
    }

    .deals-intro {
        width: 100%;
        min-width: 0;

        min-height: 150px;

        padding: 25px 28px;

        justify-content: center;
    }

    .deals-small-title {
        font-size: 24px;
    }

    .deals-intro h2 {
        margin-bottom: 14px;

        font-size: 27px;
    }

    .deals-carousel {
        width: 100%;
        padding: 10px 15px 115px;
    }

    .deals-track {
        height: 340px;
    }

    .deal-slide {
        flex: 0 0 180px;
        height: 330px;
        margin-right: 0;
    }

    .deal-number {
        top: 0;
        left: -5px;

        font-size: 170px;
    }

    .deal-card {
        width: 210px;
        min-width: 210px;

        margin-left: 38px;
    }

    .deal-image {
        height: 160px;
    }

    .deal-info {
        padding: 9px 10px 10px;
    }

    .deal-info h3 {
        font-size: 15px;
    }

    .deals-controls {
        left: 50%;
        bottom: 15px;

        transform: translateX(-50%);
    }
}


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

@media (max-width: 480px) {

    .deals-intro {
        min-height: 135px;
    }

    .deals-intro h2 {
        font-size: 30px;
    }

    .deal-slide {
        flex-basis: 240px;
    }

    .deal-card {
        width: 78%;
        min-width: 78%;
        margin-left: 0;
        margin-top: 60px;
        padding-top: 10px;
    }

    .deal-image {
        height: 165px;
    }

    .deal-number {
        font-size: 160px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .deals-track,
    .deal-slide,
    .deal-card,
    .deal-image img {
        transition: none !important;
    }

}.image-carousel-section {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.image-carousel {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.image-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.image-carousel-item {
    width: 100%;
    flex: 1 0 calc((100% - 157px) / 5.2);
    /* min-width: 0; */
    overflow: hidden;
    background-image: url('../images/bg-b1.webp');
    height: 220px;
    background-size: contain;
    background-repeat: no-repeat;
}

.image-carousel-item img {
    width: 75%;
    height: 45px;
    display: block;
    object-fit: contain;
    transition: transform .5s ease;
    margin: 80px auto 0;
}

.image-carousel-item:hover img {
    transform: scale(1.04);
}


/* ARROWS */

.image-carousel-prev,
.image-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 5px 25px rgba(0,0,0,.15);
    transition: .3s ease;
}

.image-carousel-prev {
    left: 15px;
}

.image-carousel-next {
    right: 15px;
}

.image-carousel-prev:hover,
.image-carousel-next:hover {
    background: #111;
    color: #fff;
}

.image-carousel-prev:disabled,
.image-carousel-next:disabled {
    opacity: .35;
    cursor: not-allowed;
}


/* TABLET */

@media (max-width: 991px) {

    .image-carousel-track {
        gap: 16px;
    }

    .image-carousel-item {
        flex: 0 0 calc((100% - 32px) / 3.2);
    }

    .image-carousel-item img {
        height: 240px;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .image-carousel-track {
        gap: 12px;
    }

    .image-carousel-item {
        flex: 0 0 calc((100% - 12px) / 2.2);
        position: relative;
    }
.banner-ad8{
    padding-top: 0 !important;
}
    .image-carousel-item img {
        height: 160px;
        position: absolute;
        top: -50px;
        width: 100px;
        left: 24%;
    }

    .image-carousel-prev,
    .image-carousel-next {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .image-carousel-prev {
        left: 8px;
    }

    .image-carousel-next {
        right: 8px;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .image-carousel-item {
        flex: 0 0 47%;
        min-height: 200px;
    }

    .image-carousel-item img {
        height: 62px;
        width: 53%;
        object-fit: contain;
        margin: 96px auto 0;
    }

}
.brands-sec{
    width: 100%;
    padding: 20px 2% 0;
}
.banner-ad8{

width: 100%;

padding: 50px 2% 0;
}
.banner-ad8 img{

width: 100%;

border-radius: 16px;
}
/* =========================================
   FEATURED HEADING
========================================= */
.best-seller-sec{
    
width: 100%;
    
padding: 50px 2%;
}
.deals-carousel-heading {
    /* display: flex; */
    /* align-items: flex-end; */
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.deals-heading-left {
    flex-shrink: 0;
}

.deals-eyebrow {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #999;
}

.deals-carousel-heading .title {
    margin: 0;
}

.deals-carousel-heading .title span {
    color: #c9dd58;
}


/* =========================================
   TABS
========================================= */

.deals-tabs {
    /* display: flex; */
    align-items: center;
    gap: 6px;
    padding: 5px;
    /* background: #f5f5f5; */
    border-radius: 50px;
    text-align: center;
    margin-top: 10px;
}

.deals-tab {
    position: relative;
    border: 0;
    background: transparent;
    color: #000000;
    padding: 11px 18px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
    border: 1px solid #9A9A9A;
    margin: 5px;
}

.deals-tab:hover {
    color: #111;
}

.deals-tab.active {
    background: #c9dd58;
    color: #000000;
    box-shadow: 1 5px 15px rgb(0 0 0 / 0%);
    border-bottom: 4px solid #000;
    border-color: #000;
    border-right: 3px solid #000;
}

.deals-tab.active span {
    position: relative;
}


/* =========================================
   CATEGORY CONTENT
========================================= */

.deals-tab-panel {
    display: none !important;
    position: relative;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.deals-tab-panel.active {
    display: flex !important;
}


/* =========================================
   ACTIVE CATEGORY TITLE
========================================= */

.deals-category-label {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 22px;
}

.deals-category-label h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #222;
    letter-spacing: .3px;
}

.category-line {
    width: 45px;
    height: 1px;
    background: #c9dd58;
    display: block;
}


/* =========================================
   CAROUSEL ROW
========================================= */

.deals-tab-panel .deals-carousel-viewport {
    width: 100%;
    overflow: hidden;
}

.deals-tab-panel .deals-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}


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

@media (max-width: 991px) {

    .deals-carousel-heading {
        display: block;
    }

    .deals-heading-left {
        margin-bottom: 22px;
    }

    .deals-tabs {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .deals-tabs::-webkit-scrollbar {
        display: none;
    }

    .deals-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

}

@media (max-width: 575px) {

    .deals-carousel-heading {
        margin-bottom: 22px;
    }

    .deals-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .deals-tab {
        padding: 9px 15px;
        font-size: 13px;
    }

    .deals-category-label {
        margin-bottom: 17px;
    }

    .deals-category-label h3 {
        font-size: 13px;
    }

    .category-line {
        width: 30px;
    }

}
/* Marquee Outer Container */
    .marquee-container {
      width: 100%;
      overflow: hidden;
      background: #ffffff;
      /* border-top: 1px solid #e0e0e0; */
      /* border-bottom: 1px solid #e0e0e0; */
      padding: 40px 0 0;
      display: flex;
      user-select: none;
      /* position: sticky; */
      top: 50%;
    }

    /* Track containing duplicate elements for seamless looping */
    .marquee-track {
      display: flex;
      align-items: center;
      white-space: nowrap;
      will-change: transform;
      animation: marquee-scroll 20s linear infinite;
      animation-direction: normal; /* Default direction */
    }

    /* Reverse animation direction when class is added via JS */
    .marquee-track.reverse {
      /* animation-direction: reverse; */
    }

    /* Pause animation on hover */
    .marquee-container:hover .marquee-track {
      animation-play-state: paused;
    }

    /* Content block */
    .marquee-content {
      display: flex;
      align-items: center;
      gap: 52px;
      padding-right: 32px;
    }
.marquee-item img{
    
width: 30px;
}
    /* Individual marquee item */
    .marquee-item {
      display: flex;
      align-items: center;
      gap: 25px;
      font-weight: 600;
      font-size: 32px;
      /* letter-spacing: 0.5px; */
      color: #000000;
      text-transform: uppercase;
    }

    .marquee-item svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }

    /* Keyframe animation for infinite horizontal scroll */
    @keyframes marquee-scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    .ecom-cart-price img{
        
width: 14px;
        
margin-right: 2px;
    }
    /* Advertisement Banner */
.ad-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    isolation: isolate;
    transform: translateY(0);
    transition: transform .45s cubic-bezier(.2,.8,.2,1),
                box-shadow .45s ease;
}

/* Banner image */
.ad-banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .8s cubic-bezier(.2,.8,.2,1),
                filter .5s ease;
    overflow: hidden;
}

/* Dark premium overlay */
.ad-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,255,255,.18) 50%,
        transparent 75%
    );
    transform: translateX(-120%);
    transition: transform .8s ease;
    z-index: 2;
    pointer-events: none;
}

/* Hover */
.ad-banner:hover {
    transform: translateY(-6px);
    /* box-shadow: 0 18px 40px rgba(0,0,0,.14); */
}

.ad-banner:hover img {
    /* transform: scale(1.06); */
    filter: brightness(1.04);
}

.ad-banner:hover::after {
    transform: translateX(120%);
}
.ecom-search-product-grid .deals-carousel-card{
    width: 100%;
    height: 310px;
}.offer-carousel {
    width: 100%;
    height: 40px;
    background: #111010;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: Arial, sans-serif;
    z-index: 999;
}


/* -----------------------------------------
   CAROUSEL WINDOW
----------------------------------------- */

.offer-carousel-window {
    width: 520px;
    height: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
}


/* -----------------------------------------
   TRACK
----------------------------------------- */

.offer-track {
    width: 100%;
    height: 100%;

    display: flex;

    transition: transform 0.55s cubic-bezier(.65, 0, .35, 1);
}


/* -----------------------------------------
   EACH SLIDE
----------------------------------------- */

.offer-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}


/* Main offer text */

.offer-main {
    font-weight: 700;
    color: #ffffff;
}


/* USE CODE */

.offer-use {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
}


/* Coupon */

.offer-code {
    background: #ffffff;
    color: #070404;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 4px;
    border-radius: 2px;
    line-height: 1;
    border: 2px dashed #C9DD58;
    height: 25px;
}


/* -----------------------------------------
   ARROWS
----------------------------------------- */

.offer-arrow {
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.offer-arrow:hover {
    /* opacity: 0.65; */
}


.offer-prev:hover {
    transform: translateX(-2px);
}


.offer-next:hover {
    transform: translateX(2px);
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 767px) {

    .offer-carousel {
        height: 28px;
    }

    .offer-carousel-window {
        width: calc(100% - 65px);
    }

    .offer-slide {
        gap: 5px;
        font-size: 8px;
    }

    .offer-use {
        font-size: 7px;
    }

    .offer-code {
        font-size: 7px;
        padding: 2px 3px;
        height: auto;
    }

    .offer-arrow {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }.offer-arrow img{
        
width: 12px;
    }

}


/* Very small screens */

@media (max-width: 400px) {

    .offer-slide {
        gap: 4px;
        font-size: 7px;
    }

    .offer-use {
        font-size: 6.5px;
    }

    .offer-code {
        font-size: 10px;
        height: auto;
    }

}/* Normal header position */
.ecom-desktop-header {
    position: relative;
    width: 100%;
    z-index: 9999;
    background: #fff;
    transition: all 0.3s ease;
}

/* Header becomes fixed ONLY after scrolling */
.ecom-desktop-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}/* =====================================================
   LANGUAGE SELECTOR
===================================================== */

.ecom-language {
    position: relative;
    display: flex;
    align-items: center;
}


/* Main selected language button */

.ecom-language-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    border: 0;
    outline: none;
    background: transparent;

    padding: 0;
    margin: 0;

    cursor: pointer;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #171717;
}


/* Selected flag */

.ecom-language-btn > img:first-child {
    width: 42px;
    height: 28px;
    object-fit: cover;
    border-radius: 2px;
}


/* Arrow */

.ecom-language-btn .language-arrow {
    width: 9px;
    height: auto;
    transition: transform .3s ease;
}


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

.ecom-language-dropdown {
    position: absolute;

    top: calc(100% + 14px);
    right: 0;

    width: 160px;

    padding: 7px;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 10px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

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

    z-index: 99999;
}


/* Open dropdown */

.ecom-language.open .ecom-language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ecom-language.open .language-arrow {
    transform: rotate(180deg);
}


/* =====================================================
   LANGUAGE OPTIONS
===================================================== */

.language-option {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 10px;

    border: 0;
    outline: none;
    background: transparent;

    border-radius: 7px;

    cursor: pointer;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    color: #171717;

    text-align: left;

    transition: background .2s ease;
}

.language-option:hover {
    background: #f5f5f5;
}


/* Option flags */

.language-option img {
    width: 22px;
    height: 15px;

    object-fit: cover;

    border-radius: 2px;
}


/* Selected option */

.language-option.active {
    background: #f7f7f7;
}
/* =========================================================
   CONTACT MAIN
========================================================= */

.contact-main{
    padding: 70px 2%;
    background:#fff;
}

.contact-container{
    width:100%;
    max-width:1320px;
    margin:0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.contact-intro{
    /* max-width:720px; */
    margin-bottom:55px;
    text-align: center;
}

.contact-intro small{
    display:block;
    margin-bottom:12px;
    color:#789000;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.contact-intro h2{
    font-size: clamp(32px,4vw,46px);
    line-height:1.1;
    font-weight: 600;
    margin-bottom:18px;
    color: #000;
}

.contact-intro p{
    color: #000000;
    font-size:16px;
    line-height:1.8;
    padding: 0 270px;
}


/* =========================================================
   CONTACT GRID
========================================================= */

.contact-grid{
    display:grid;
    grid-template-columns:390px 1fr;
    gap:70px;
    align-items:start;
}


/* =========================================================
   CONTACT INFO
========================================================= */

.contact-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-info-card{
    position:relative;
    padding:27px;
    border:1px solid #ededed;
    border-radius:18px;
    background:#fff;
    transition:.35s ease;
    overflow:hidden;
}

.contact-info-card::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    right:-35px;
    bottom:-35px;
    border-radius:50%;
    background:#c9dd58;
    opacity:.08;
}

.contact-info-card:hover{
    border-color:#d9e58b;
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(0,0,0,.07);
}

.contact-info-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:13px;
    background:#f2f6d9;
}

.contact-info-icon img{
    width:22px;
    height:22px;
    object-fit:contain;
}

.contact-info-card h4{
    margin-bottom:8px;
    font-size:18px;
    font-weight:700;
}

.contact-info-card p,
.contact-info-card a{
    color: #4e4e4e;
    font-size: 16px;
    line-height:1.7;
}

.contact-info-card a{
    transition:.3s ease;
}

.contact-info-card a:hover{
    color:#8da100;
}


/* =========================================================
   SUPPORT HIGHLIGHT
========================================================= */

.contact-support-box{
    margin-top:8px;
    padding:28px;
    border-radius:18px;
    background:#151716;
    color:#fff;
}

.contact-support-box .support-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px;
}

.contact-support-box h4{
    font-size:18px;
    font-weight:700;
}

.support-status{
    display:flex;
    align-items:center;
    gap:7px;
    color:#c9dd58;
    font-size:12px;
    font-weight:600;
}
@keyframes pulse2 {
    0% {
        -moz-box-shadow: 0 0 0 0 #d89a21;
        box-shadow: 0 0 0 0 #d89a21;
    }

    70% {
        -moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
        box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
        box-shadow: 0 0 0 0 rgba(5,103,168,0)
    }
}

@keyframes pulse3 {
    0% {
        -moz-box-shadow: 0 0 0 0 #c9dd58;
        box-shadow: 0 0 0 0 #c9dd58;
    }

    70% {
        -moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
        box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
        box-shadow: 0 0 0 0 rgba(5,103,168,0)
    }
}

.support-status span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#c9dd58;
    box-shadow:0 0 0 5px rgba(201,221,88,.08);
    animation: pulse3 2s infinite;
}

.contact-support-box p{
    color:rgba(255,255,255,.58);
    font-size: 16px;
    line-height:1.7;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-wrapper{
    padding:45px;
    border:1px solid #ebebeb;
    border-radius:24px;
    background:#fafafa;
}

.form-heading{
    margin-bottom:32px;
}

.form-heading h3{
    margin-bottom:8px;
    font-size:27px;
    font-weight:800;
}

.form-heading p{
    color: #303030;
    font-size: 16px;
    line-height:1.7;
}

.contact-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group.full{
    grid-column:1/-1;
}

.form-group label{
    margin-bottom:9px;
    color:#292929;
    font-size:13px;
    font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid #dedede;
    outline:none;
    border-radius:11px;
    background:#fff;
    color:#222;
    font-size: 15px;
    transition:.3s ease;
    font-family: inherit;
}

.form-group input,
.form-group select{
    height:54px;
    padding:0 16px;
}

.form-group textarea{
    min-height:145px;
    resize:vertical;
    padding:15px 16px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#b9ce42;
    box-shadow:0 0 0 4px rgba(201,221,88,.12);
}

.form-submit{
    grid-column:1/-1;
    margin-top:5px;
}

.contact-submit-btn{
    position:relative;
    min-width:180px;
    height:55px;
    padding:0 28px;
    border:0;
    border-radius:10px;
    background: #c8de59;
    color: #000000;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    overflow:hidden;
    transition:.35s ease;
}

.contact-submit-btn::before{
    content:"";
    position:absolute;
    width:0;
    height:100%;
    left:0;
    top:0;
    background: #000000;
    transition:.35s ease;
    z-index:0;
}

.contact-submit-btn span{
    position:relative;
    z-index:1;
}

.contact-submit-btn:hover{
    color:#fff;
}

.contact-submit-btn:hover::before{
    width:100%;
}


/* =========================================================
   FORM SUCCESS
========================================================= */

.contact-success{
    display:none;
    align-items:center;
    gap:12px;
    margin-top:20px;
    padding:15px 17px;
    border-radius:10px;
    background:#eef5d2;
    color:#657500;
    font-size:13px;
    font-weight:600;
}

.contact-success.show{
    display:flex;
}


/* =========================================================
   WHY CONTACT US
========================================================= */

.contact-benefits{
    margin-top:110px;
}

.benefits-heading{
    text-align:center;
    max-width:680px;
    margin:0 auto 50px;
}

.benefits-heading small{
    display:block;
    margin-bottom:10px;
    color:#789000;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.benefits-heading h2{
    margin-bottom:15px;
    font-size:40px;
    font-weight:800;
    letter-spacing:-1px;
}

.benefits-heading p{
    color: #343434;
    font-size: 16px;
    line-height:1.8;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.benefit-card{
    padding:35px 30px;
    border:1px solid #ededed;
    border-radius:18px;
    background:#fff;
    transition:.35s ease;
}

.benefit-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.benefit-number{
    margin-bottom:25px;
    color:#d9e79a;
    font-size:34px;
    line-height:1;
    font-weight:800;
}

.benefit-card h4{
    margin-bottom:10px;
    font-size: 20px;
    font-weight:700;
}

.benefit-card p{
    color: #282828;
    font-size: 16px;
    line-height:1.8;
}


/* =========================================================
   FAQ / QUICK HELP
========================================================= */

.quick-help{
    margin-top:100px;
    padding:60px;
    border-radius:25px;
    background:#f4f6e8;
}

.quick-help-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.quick-help-content small{
    display:block;
    margin-bottom:12px;
    color:#789000;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.quick-help-content h2{
    margin-bottom:15px;
    font-size:38px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-1px;
}

.quick-help-content p{
    color:#6d6d6d;
    font-size: 16px;
    line-height:1.8;
}

.quick-help-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.quick-help-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:19px 22px;
    border-radius:12px;
    background:#fff;
    color:#222;
    font-size: 16px;
    font-weight:600;
    transition:.3s ease;
}

.quick-help-item:hover{
    transform:translateX(5px);
}

.quick-help-item img{
    width:17px;
    height:17px;
}


/* =========================================================
   MAP / LOCATION
========================================================= */

.contact-map-section{
    margin-top:100px;
}

.contact-map{
    position:relative;
    width:100%;
    height:360px;
    overflow:hidden;
    border-radius:25px;
    background:#e9e9e9;
}

.contact-map iframe{
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(100%);
}

.map-overlay{
    position:absolute;
    left:30px;
    bottom:30px;
    max-width:320px;
    padding:22px;
    border-radius:15px;
    background:rgba(255,255,255,.96);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.map-overlay h4{
    margin-bottom:7px;
    font-size:17px;
}

.map-overlay p{
    color:#777;
    font-size:13px;
    line-height:1.6;
}


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

@media(max-width:1100px){

    .contact-grid{
        grid-template-columns:320px 1fr;
        gap:40px;
    }

    .contact-form-wrapper{
        padding:35px;
    }

    .quick-help{
        padding:45px;
    }

}


@media(max-width:850px){

    .contact-hero{
        min-height:390px;
    }

    .contact-hero-inner{
        padding:70px 25px;
    }

    .contact-main{
        padding:75px 20px;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .contact-info{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .contact-support-box{
        grid-column:1/-1;
    }

    .benefits-grid{
        grid-template-columns:1fr 1fr;
    }

    .quick-help-inner{
        grid-template-columns:1fr;
        gap:35px;
    }

}


@media(max-width:600px){

    .contact-hero{
        min-height:350px;
    }

    .contact-hero-inner{
        padding:60px 20px;
    }

    .contact-hero h1{
        font-size:42px;
        letter-spacing:-1px;
    }

    .contact-hero p{
        font-size:15px;
    }

    .contact-intro{
        margin-bottom:35px;
    }

    .contact-intro h2{
        font-size:32px;
    }

    .contact-info{
        grid-template-columns:1fr;
    }

    .contact-form-wrapper{
        padding:25px 20px;
        border-radius:18px;
    }

    .contact-form{
        grid-template-columns:1fr;
        gap:18px;
    }

    .form-group.full,
    .form-submit{
        grid-column:auto;
    }

    .contact-submit-btn{
        width:100%;
    }

    .benefits-grid{
        grid-template-columns:1fr;
    }

    .benefits-heading h2{
        font-size:31px;
    }

    .contact-benefits{
        margin-top:75px;
    }

    .quick-help{
        margin-top:70px;
        padding:30px 20px;
        border-radius:18px;
    }

    .quick-help-content h2{
        font-size:31px;
    }

    .contact-map-section{
        margin-top:70px;
    }

    .contact-map{
        height:320px;
        border-radius:18px;
    }

    .map-overlay{
        left:15px;
        right:15px;
        bottom:15px;
        max-width:none;
    }

}
/* =========================================================
   FAQ / QUICK HELP
========================================================= */

.quick-help{
    margin-top:100px;
    padding:65px;
    border-radius:25px;
    background:#f4f6e8;
}

.quick-help-inner{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:80px;
    align-items:start;
}


/* LEFT */

.quick-help-content{
    position:sticky;
    top:120px;
}

.quick-help-content small{
    display:block;
    margin-bottom:14px;
    color:#789000;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.quick-help-content h2{
    margin-bottom:18px;
    font-size:40px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-1px;
}

.quick-help-content p{
    max-width:430px;
    color:#6d6d6d;
    font-size:15px;
    line-height:1.8;
}


/* FAQ LIST */

.quick-help-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}


/* FAQ ITEM */

.faq-item{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    background:#fff;
    transition:.35s ease;
}

.faq-item:hover{
    border-color:rgba(150,170,50,.25);
}


/* QUESTION */

.faq-question{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 23px;
    border:0;
    outline:none;
    background:transparent;
    color:#202020;
    text-align:left;
    font-size: 16px;
    font-weight:700;
    cursor:pointer;
}

.faq-question span:first-child{
    transition:.3s ease;
}

.faq-question:hover span:first-child{
    color:#819300;
}


/* PLUS ICON */

.faq-icon{
    flex:0 0 auto;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f0f4d5;
    color:#657400;
    font-size: 18px;
    font-weight:400;
    line-height:1;
    transition:.35s ease;
}


/* ANSWER */

.faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .4s ease;
}

.faq-answer-inner{
    min-height:0;
    overflow:hidden;
}

.faq-answer-inner p{
    padding:0 23px 22px;
    color:#777;
    font-size:14px;
    line-height:1.8;
}


/* ACTIVE */

.faq-item.active{
    border-color:#dce6a7;
    box-shadow:0 10px 30px rgba(0,0,0,.045);
}

.faq-item.active .faq-answer{
    grid-template-rows:1fr;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
    background:#c9dd58;
    color:#151515;
}

.faq-item.active .faq-question span:first-child{
    color:#819300;
}


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

@media(max-width:900px){

    .quick-help{
        padding:45px;
    }

    .quick-help-inner{
        grid-template-columns:1fr;
        gap:35px;
    }

    .quick-help-content{
        position:static;
    }

    .quick-help-content h2{
        font-size:36px;
    }

}


@media(max-width:600px){

    .quick-help{
        margin-top:70px;
        padding:30px 18px;
        border-radius:18px;
    }

    .quick-help-inner{
        gap:28px;
    }

    .quick-help-content h2{
        font-size:31px;
    }

    .quick-help-content p{
        font-size:14px;
    }

    .faq-question{
        min-height:62px;
        padding:17px 16px;
        font-size:14px;
    }

    .faq-icon{
        width:28px;
        height:28px;
        font-size:19px;
    }

    .faq-answer-inner p{
        padding:0 16px 19px;
        font-size:13px;
    }

}


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

.about-main{
    padding: 70px 2%;
    background:#fff;
}

.about-container{
    width:100%;
    margin:0 auto;
}


/* =========================================================
   STORY SECTION
========================================================= */

.about-story{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    align-items:center;
}

.about-story-image{
    position:relative;
}

.about-story-image-main{
    width:100%;
    height:540px;
    overflow:hidden;
    border-radius:25px;
}

.about-story-image-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.about-story-image:hover
.about-story-image-main img{
    transform:scale(1.04);
}


/* IMAGE ACCENT */

.about-image-accent{
    position:absolute;

    width:160px;
    height:160px;

    right:-35px;
    bottom:-35px;

    border-radius:50%;

    background:#c9dd58;

    opacity:.85;

    z-index:-1;
}


/* CONTENT */

.about-story-content small{
    display:block;
    margin-bottom:14px;
    color: #cadc5a;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.about-story-content h2{
    max-width:600px;
    margin-bottom:22px;
    font-size: clamp(35px,4vw,48px);
    line-height:1.08;
    font-weight: 600;
    letter-spacing:-1.5px;
    color: #18361E;
}

.about-story-content h2 span{
    color: #C9DD58;
}

.about-story-content p{
    margin-bottom:17px;
    color: #262626;
    font-size: 16px;
    line-height:1.9;
}


/* =========================================================
   STATS
========================================================= */

.about-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:100px;
    border-top:1px solid #e9e9e9;
    border-bottom:1px solid #e9e9e9;
}

.about-stat{
    position:relative;

    padding:40px 30px;

    text-align:center;
}

.about-stat:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:30px;
    width: 2px;
    height: 40px;
    background: #cadc5c94;
}

.about-stat-number{
    margin-bottom:7px;
    color:#879900;
    font-size:38px;
    line-height:1;
    font-weight:800;
    display: none;
}

.about-stat-title{
    color: #000000;
    font-size: 16px;
    font-weight:600;
}


/* =========================================================
   MISSION / VISION
========================================================= */

.about-direction{
    margin-top: 70px;
}

.about-section-heading{
    max-width:700px;

    margin:0 auto 55px;

    text-align:center;
}

.about-section-heading small{
    display:block;

    margin-bottom:12px;

    color:#789000;

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

    letter-spacing:2px;
    text-transform:uppercase;
}

.about-section-heading h2{
    margin-bottom:16px;
    font-size:42px;
    line-height:1.1;
    font-weight: 600;
}

.about-section-heading p{
    color: #1e1e1e;
    font-size: 16px;
    line-height:1.8;
}


.direction-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.direction-card{
    position:relative;

    min-height:330px;

    padding:45px;

    overflow:hidden;

    border-radius:22px;

    background:#151716;
    color:#fff;
}

.direction-card:nth-child(2){
    background:#f2f5df;
    color:#171717;
}

.direction-number{
    position:absolute;

    right:25px;
    top:15px;

    color:rgba(255,255,255,.05);

    font-size:120px;
    line-height:1;

    font-weight:800;
}

.direction-card:nth-child(2)
.direction-number{
    color:rgba(0,0,0,.045);
}

.direction-card-content{
    position:relative;
    z-index:2;
}

.direction-card small{
    display:block;

    margin-bottom:35px;

    color:#c9dd58;

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

    letter-spacing:2px;
    text-transform:uppercase;
}

.direction-card:nth-child(2) small{
    color:#7e9100;
}

.direction-card h3{
    margin-bottom:17px;
    font-size: 29px;
    font-weight:800;
}

.direction-card p{
    max-width:510px;
    color:rgba(255,255,255,.62);
    font-size: 16px;
    line-height:1.85;
}

.direction-card:nth-child(2) p{
    color:#6e6e6e;
}


/* =========================================================
   VALUES
========================================================= */

.about-values{
    margin-top: 80px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.value-card{
    position:relative;
    min-height: 220px;
    padding:32px 27px;
    border:1px solid #ebebeb;
    border-radius:18px;
    background:#fff;
    overflow:hidden;
    transition:.35s ease;
}

.value-card::after{
    content:"";

    position:absolute;

    width:100px;
    height:100px;

    right:-45px;
    bottom:-45px;

    border-radius:50%;

    background:#c9dd58;

    opacity:.12;

    transition:.4s ease;
}

.value-card:hover{
    transform:translateY(-7px);

    border-color:#dbe6a1;

    box-shadow:0 18px 45px rgba(0,0,0,.07);
}

.value-card:hover::after{
    transform:scale(1.5);
}

.value-number{
    margin-bottom:38px;
    color:#d1df76;
    font-size:30px;
    line-height:1;
    font-weight:800;
    display: none;
}

.value-card h4{
    margin-bottom:12px;
    font-size: 22px;
    font-weight:700;
}

.value-card p{
    color: #2a2929;
    font-size: 16px;
    line-height:1.8;
}


/* =========================================================
   SHOPPING EXPERIENCE
========================================================= */

.about-experience{
    margin-top: 80px;
    padding:70px;
    border-radius:26px;
    background:#f4f6e8;
}

.experience-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.experience-content small{
    display:block;

    margin-bottom:13px;

    color:#789000;

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

    letter-spacing:2px;
    text-transform:uppercase;
}

.experience-content h2{
    margin-bottom:18px;
    font-size:42px;
    line-height:1.12;
    font-weight: 600;
}

.experience-content p{
    max-width:570px;
    margin-bottom: 22px;
    color: #000000;
    font-size: 16px;
    line-height:1.85;
}


/* EXPERIENCE LIST */

.experience-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.experience-item{
    display:flex;
    align-items:center;
    gap:17px;

    padding:17px 20px;

    border-radius:12px;

    background:#fff;
}

.experience-check{
    flex:0 0 auto;

    width:32px;
    height:32px;

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

    border-radius:50%;

    background:#eaf0c5;

    color:#758500;

    font-size:14px;
    font-weight:800;
}

.experience-item span:last-child{
    color: #1c1c1c;
    font-size: 16px;
    font-weight:600;
}


/* =========================================================
   CUSTOMER PROMISE
========================================================= */

.customer-promise{
    margin-top: 60px;
}

.promise-box{
    position:relative;

    min-height:370px;

    display:flex;
    align-items:center;

    padding:70px;

    overflow:hidden;

    border-radius:26px;

    background:
        linear-gradient(
            90deg,
            rgba(15,17,16,.96),
            rgba(15,17,16,.65)
        ),
        url("images/about-promise.webp") center/cover no-repeat;
}

.promise-content{
    max-width:700px;

    position:relative;
    z-index:2;
}

.promise-content small{
    display:block;

    margin-bottom:13px;

    color:#c9dd58;

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

    letter-spacing:2px;
    text-transform:uppercase;
}

.promise-content h2{
    margin-bottom:18px;

    color:#fff;

    font-size:44px;
    line-height:1.1;

    font-weight:800;

    letter-spacing:-1.3px;
}

.promise-content p{
    max-width:620px;
    color:rgba(255,255,255,.65);
    font-size: 16px;
    line-height:1.85;
}


/* =========================================================
   CTA
========================================================= */

.about-cta{
    margin-top: 60px;
    text-align:center;
}

.about-cta h2{
    margin-bottom:15px;

    font-size:40px;
    font-weight:800;

    letter-spacing:-1px;
}

.about-cta p{
    max-width:620px;
    margin:0 auto 28px;
    color: #4a4949;
    font-size: 16px;
    line-height:1.8;
}

.about-cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:190px;
    height:54px;
    padding:0 28px;
    border-radius:10px;
    background:#c9dd58;
    color:#171717;
    font-size: 16px;
    font-weight:700;
    transition:.35s ease;
}

.about-cta-btn:hover{
    background:#171717;
    color:#fff;

    transform:translateY(-3px);
}


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

@media(max-width:1050px){

    .about-story{
        gap:50px;
    }

    .about-story-image-main{
        height:470px;
    }

    .values-grid{
        grid-template-columns:1fr 1fr;
    }

    .experience-grid{
        gap:45px;
    }

}


@media(max-width:850px){

    .about-hero{
        min-height:400px;
    }

    .about-hero-inner{
        padding:70px 25px;
    }

    .about-main{
        padding:80px 20px;
    }

    .about-story{
        grid-template-columns:1fr;

        gap:45px;
    }

    .about-story-image-main{
        height:480px;
    }

    .about-stats{
        grid-template-columns:1fr 1fr;
    }

    .about-stat:nth-child(2)::after{
        display:none;
    }

    .about-stat:nth-child(1),
    .about-stat:nth-child(2){
        border-bottom:1px solid #e9e9e9;
    }

    .direction-grid{
        grid-template-columns:1fr;
    }

    .experience-grid{
        grid-template-columns:1fr;
    }

    .about-experience{
        padding:50px;
    }

    .promise-box{
        padding:55px;
    }

}


@media(max-width:600px){

    .about-hero{
        min-height:350px;
    }

    .about-hero-inner{
        padding:60px 20px;
    }

    .about-hero h1{
        font-size:43px;
        letter-spacing:-1.5px;
    }

    .about-hero p{
        font-size:14px;
    }

    .about-main{
        padding:65px 18px;
    }

    .about-story-image-main{
        height:390px;
        border-radius:18px;
    }

    .about-image-accent{
        width:100px;
        height:100px;

        right:-20px;
        bottom:-20px;
    }

    .about-story-content h2{
        font-size:34px;
    }

    .about-story-content p{
        font-size:14px;
    }

    .about-stats{
        margin-top:70px;
    }

    .about-stat{
        padding:30px 15px;
    }

    .about-stat-number{
        font-size:31px;
    }

    .about-direction{
        margin-top:80px;
    }

    .about-section-heading{
        margin-bottom:35px;
    }

    .about-section-heading h2{
        font-size:32px;
    }

    .direction-card{
        min-height:300px;
        padding:32px 25px;
        border-radius:18px;
    }

    .direction-card h3{
        font-size:27px;
    }

    .about-values{
        margin-top:80px;
    }

    .values-grid{
        grid-template-columns:1fr;
    }

    .value-card{
        min-height:220px;
    }

    .about-experience{
        margin-top:80px;
        padding:32px 20px;
        border-radius:18px;
    }

    .experience-content h2{
        font-size:32px;
    }

    .experience-item{
        padding:15px;
    }

    .customer-promise{
        margin-top:80px;
    }

    .promise-box{
        min-height:390px;
        padding:35px 25px;
        border-radius:18px;
    }

    .promise-content h2{
        font-size:33px;
    }

    .about-cta{
        margin-top:75px;
    }

    .about-cta h2{
        font-size:32px;
    }

}
  .support-quick {
            position: relative;
            z-index: 5;
            margin-top: 70px;
            padding: 0 2%;
        }

        .support-container {
            width: 100%;
            margin: 0 auto;
        }

        .support-quick-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .support-quick-card {
            min-height: 190px;
            padding: 28px;
            background: #fff;
            border: 1px solid #e8ebe3;
            border-radius: 18px;
            box-shadow: 0 20px 50px rgba(20,30,10,.07);
            transition: .35s ease;
            cursor: pointer;
        }

        .support-quick-card:hover {
            transform: translateY(-8px);
            border-color: #c9dd58;
            box-shadow: 0 25px 60px rgba(20,30,10,.11);
        }

        .support-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: #f0f4dc;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        .support-icon svg {
            width: 23px;
            height: 23px;
            stroke: #60731b;
            fill: none;
            stroke-width: 1.8;
        }

        .support-quick-card h3 {
            margin: 0 0 8px;
            font-size: 20px;
            font-weight: 700;
        }

        .support-quick-card p {
            margin: 0;
            color: #73796e;
            font-size: 16px;
            line-height: 1.6;
        }

        /* =========================================================
           HELP CENTER
        ========================================================= */

        .support-help {
            padding: 70px 2%;
        }

        .support-section-head {
            max-width: 700px;
            margin-bottom: 30px;
        }

        .support-section-label {
            display: block;
            margin-bottom: 13px;
            color: #81952a;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .support-section-head h2 {
            margin: 0 0 15px;
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.08;
            color: #000;
        }

        .support-section-head p {
            margin: 0;
            color: #323232;
            font-size: 16px;
            line-height: 1.8;
        }

        .support-help-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .support-help-card {
            position: relative;
            padding: 34px;
            min-height: 235px;
            background: #fff;
            border: 1px solid #e8ebe3;
            border-radius: 20px;
            transition: .35s ease;
            overflow: hidden;
        }

        .support-help-card::after {
            content: "";
            position: absolute;
            right: -40px;
            bottom: -60px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: #f1f5dd;
            transition: .4s ease;
        }

        .support-help-card:hover {
            transform: translateY(-6px);
            border-color: #d6e397;
        }

        .support-help-card:hover::after {
            transform: scale(1.3);
        }

        .support-help-number {
            margin-bottom: 28px;
            color: #a6b56a;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .support-help-card h3 {
            position: relative;
            z-index: 2;
            margin: 0 0 13px;
            font-size: 22px;
        }

        .support-help-card p {
            position: relative;
            z-index: 2;
            max-width: 340px;
            margin: 0;
            color: #2a2a2a;
            font-size: 16px;
            line-height: 1.7;
        }

        .support-help-link {
            position: relative;
            z-index: 3;
            display: none;
            align-items: center;
            gap: 8px;
            margin-top: 22px;
            color: #60731b;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
        }

        .support-help-link span {
            transition: .3s ease;
        }

        .support-help-card:hover .support-help-link span {
            transform: translateX(5px);
        }

        /* =========================================================
           ORDER ASSISTANCE
        ========================================================= */

        .support-order {
            padding: 100px 2%;
            background: #161b13;
            color: #fff;
        }

        .support-order-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 90px;
            align-items: center;
        }

        .support-order-content .support-section-label {
            color: #c9dd58;
        }

        .support-order-content h2 {
            margin: 0 0 18px;
            max-width: 600px;
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.08;
        }

        .support-order-content p {
            max-width: 570px;
            margin: 0;
            color: rgba(255,255,255,.62);
            font-size: 15px;
            line-height: 1.8;
        }

        .support-order-box {
            padding: 36px;
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 20px;
            background: rgba(255,255,255,.045);
        }

        .support-order-box h3 {
            margin: 0 0 12px;
            font-size: 20px;
        }

        .support-order-input {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 6px 6px 18px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 10px;
            background: rgba(255,255,255,.04);
        }

        .support-order-input input {
            width: 100%;
            border: 0;
            outline: none;
            background: transparent;
            color: #fff;
            font-size: 14px;
        }

        .support-order-input input::placeholder {
            color: rgba(255,255,255,.40);
        }

        .support-track-btn {
            flex-shrink: 0;
            padding: 14px 20px;
            border: 0;
            border-radius: 8px;
            background: #c9dd58;
            color: #171b16;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            transition: .3s ease;
        }

        .support-track-btn:hover {
            background: #d8ea72;
            transform: translateY(-2px);
        }

        .support-order-note {
            margin: 15px 0 0;
            color: rgba(255,255,255,.38);
            font-size: 11px;
            line-height: 1.6;
        }

        .support-track-result {
            display: none;
            margin-top: 18px;
            padding: 15px;
            border-radius: 9px;
            background: rgba(201,221,88,.08);
            border: 1px solid rgba(201,221,88,.15);
            color: #c9dd58;
            font-size: 13px;
        }

        /* =========================================================
           SUPPORT PROCESS
        ========================================================= */

        .support-process {
            padding: 70px 2%;
        }

        .support-process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border-top: 1px solid #dfe3d9;
            border-bottom: 1px solid #dfe3d9;
        }
.support-process-item:hover{
    
background: #fcffee;
}
        .support-process-item {
            position: relative;
            padding: 38px 30px;
            border-right: 1px solid #dfe3d9;
            transition: .4s;
        }

        .support-process-item:last-child {
            border-right: 0;
        }

        .support-process-number {
            display: inline-flex;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            border-radius: 50%;
            background: #edf2d5;
            color: #65751f;
            font-size: 12px;
            font-weight: 800;
        }

        .support-process-item h3 {
            margin: 0 0 10px;
            font-size: 20px;
        }

        .support-process-item p {
            margin: 0;
            color: #464646;
            font-size: 16px;
            line-height: 1.7;
        }

        /* =========================================================
           FAQ
        ========================================================= */

        .support-faq {
            padding: 0px 2% 70px;
            background: #fff;
        }

        .support-faq-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 90px;
            align-items: start;
        }

        .support-faq-title {
            position: sticky;
            top: 100px;
        }

        .support-faq-title h2 {
            margin: 0 0 16px;
            font-size: clamp(34px, 4vw, 48px);
            line-height: 1.05;
            color: #000;
        }

        .support-faq-title p {
            max-width: 390px;
            margin: 0;
            color: #000000;
            font-size: 16px;
            line-height: 1.8;
        }

        .support-faq-list {
            border-top: 1px solid #e2e5df;
        }

        .support-faq-item {
            border-bottom: 1px solid #e2e5df;
        }

        .support-faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            padding: 24px 0;
            border: 0;
            background: transparent;
            text-align: left;
            color: #000000;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
        }

        .support-faq-plus {
            position: relative;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .support-faq-plus::before,
        .support-faq-plus::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 1.5px;
            background: #65751f;
            transform: translate(-50%, -50%);
            transition: .3s ease;
        }

        .support-faq-plus::after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .support-faq-item.active .support-faq-plus::after {
            transform: translate(-50%, -50%) rotate(0);
        }

        .support-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease;
        }

        .support-faq-answer-inner {
            padding: 0 50px 24px 0;
            color: #747a70;
            font-size: 16px;
            line-height: 1.8;
        }

        /* =========================================================
           SUPPORT CTA
        ========================================================= */

        .support-final {
            padding: 0 2% 70px;
            background: #fff;
        }

        .support-final-box {
            position: relative;
            overflow: hidden;
            padding: 65px;
            border-radius: 25px;
            background:
                radial-gradient(circle at 90% 10%, rgba(201,221,88,.20), transparent 25%),
                #edf2d8;
        }

        .support-final-box h2 {
            max-width: 650px;
            margin: 0 0 15px;
            font-size: clamp(30px, 4vw, 48px);
            line-height: 1.08;
            letter-spacing: -1.5px;
        }

        .support-final-box p {
            max-width: 600px;
            margin: 0;
            color: #282828;
            font-size: 16px;
            line-height: 1.8;
        }

        .support-final-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 30px;
        }

        .support-final-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 24px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            transition: .3s ease;
        }

        .support-final-btn.primary {
            background: #000000;
            color: #fff;
        }

        .support-final-btn.primary:hover {
            transform: translateY(-3px);
            background: #c8de59;
        }

        .support-final-btn.secondary {
            border: 1px solid #cdd5ad;
            color: #000000;
            background: rgb(200 222 89);
        }

        .support-final-btn.secondary:hover {
            background: #fff;
        }

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

        @media (max-width: 1100px) {

            .support-hero-badge {
                right: 3%;
                width: 200px;
                height: 200px;
            }

            .support-badge-inner {
                width: 90px;
                height: 90px;
            }

            .support-quick-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .support-help-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .support-process-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .support-process-item:nth-child(2) {
                border-right: 0;
            }

            .support-process-item:nth-child(-n+2) {
                border-bottom: 1px solid #dfe3d9;
            }

            .support-order-inner {
                gap: 45px;
            }
        }

        @media (max-width: 768px) {

            .support-hero {
                min-height: 500px;
            }

            .support-hero-badge {
                display: none;
            }

            .support-hero h1 {
                letter-spacing: -1px;
            }

            .support-hero p {
                font-size: 15px;
            }

            .support-quick {
                /* margin-top: -40px; */
            }

            .support-quick-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }

            .support-quick-card {
                min-height: 170px;
                padding: 22px;
            }

            .support-help,
            .support-process,
            .support-faq {
                padding: 75px 0;
            }

            .support-help-grid {
                grid-template-columns: 1fr;
            }

            .support-order {
                padding: 75px 0;
            }

            .support-order-inner {
                grid-template-columns: 1fr;
            }

            .support-process-grid {
                grid-template-columns: 1fr;
            }

            .support-process-item {
                border-right: 0;
                border-bottom: 1px solid #dfe3d9;
            }

            .support-process-item:last-child {
                border-bottom: 0;
            }

            .support-faq-layout {
                grid-template-columns: 1fr;
                gap: 45px;
            }

            .support-faq-title {
                position: static;
            }

            .support-final-box {
                padding: 40px 25px;
            }
        }

        @media (max-width: 520px) {

            .support-container,
            .support-hero-inner {
                width: 92%;
            }

            .support-hero {
                min-height: 460px;
            }

            .support-hero h1 {
                font-size: 42px;
            }

            .support-quick-grid {
                grid-template-columns: 1fr;
            }

            .support-quick-card {
                min-height: auto;
            }

            .support-section-head {
                margin-bottom: 35px;
            }

            .support-order-box {
                padding: 22px;
            }

            .support-order-input {
                flex-direction: column;
                align-items: stretch;
                padding: 10px;
            }

            .support-track-btn {
                width: 100%;
            }

            .support-faq-question {
                font-size: 14px;
            }

            .support-faq-answer-inner {
                font-size: 13px;
            }

            .support-final-actions {
                flex-direction: column;
            }

            .support-final-btn {
                width: 100%;
            }
        }
        .ecom-cart-header h5{

text-align: right;

background: #c9dd58;

float: right;

font-size: 12px;

color: #fff;

font-weight: 400;

padding: 10px;

border-radius: 7px;

letter-spacing: 1px;

margin-top: -26px;
}
.deals-carousel-card2{
    padding: 10px 10px 20px;
} .alam-cart-section {
      width: 100%;
      /* max-width: 1280px; */
      margin: 0 auto;
      padding: 25px 2% 0px;
      color: var(--cart-text);
      background: var(--cart-bg);
      box-sizing: border-box;
    }

    .alam-cart-section *,
    .alam-cart-section *::before,
    .alam-cart-section *::after {
      box-sizing: border-box;
    }

    /* Progress Steps */
    .alam-cart-progress {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* gap: 20px; */
      margin-bottom: 42px;
    }.alam-cart-step.is-active{
        border-color: #c8de59;
    }

    .alam-cart-step {
      position: relative;
      text-align: center;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--cart-border);
    }

    .alam-cart-step::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 2px;
      background: var(--cart-border);
    }

    .alam-cart-step.is-active::after {
      background: var(--cart-primary);
    }

    .alam-cart-step-title {
      display: block;
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 5px;
    }

    .alam-cart-step-subtitle {
      display: block;
      font-size: 8px;
      color: var(--cart-muted);
    }

    /* Main Layout */
    .alam-cart-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
      gap: 55px;
      align-items: start;
    }

    .alam-cart-heading {
      font-size: 22px;
      font-weight: 700;
      margin: 0px 0 17px;
      color: #001C30;
      border-bottom: 1px solid #cecece;
      padding-bottom: 10px;
    }

    .alam-cart-heading span {
      font-weight: 400;
      color: var(--cart-muted);
      margin-left: 6px;
    }

    /* Cart Product Row */
    .alam-cart-product {
      display: grid;
      grid-template-columns: 45px minmax(0, 1fr) 149px 150px 111px 16px;
      align-items: center;
      gap: 12px;
      min-height: 82px;
      padding: 14px 0;
      border-bottom: 1px solid #cecece;
    }

    .alam-cart-product-image {
      width: 45px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f4f4;
      border-radius: 2px;
      overflow: hidden;
    }

    .alam-cart-product-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .alam-cart-product-image svg {
      width: 32px;
      height: 40px;
    }

    .alam-cart-product-name {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.6;
      margin: 0;
      width: 74%;
      color: #001C30;
    }

    .alam-cart-product-code {
      display: block;
      font-size: 8px;
      color: var(--cart-muted);
      margin-top: 4px;
    }
.alam-cart-price img{
    width: 15px;
    margin-right: 5px;
}
    .alam-cart-price,
    .alam-cart-subtotal {
      font-size: 16px;
      white-space: nowrap;
    }
.alam-cart-subtotal img{
    
width: 15px;
    
margin-right: 5px;
}


.alam-cart-product-option {
    font-size: 12px;
    color: #777;
    margin: 2px 0 0;
}

.alam-cart-step:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

    .alam-cart-label {
      display: none;
      font-size: 13px;
      color: var(--cart-muted);
      margin-bottom: 4px;
    }

    /* Quantity Controls */
    .alam-cart-quantity {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 70px;
      height: 28px;
      border: 1px solid var(--cart-border);
      border-radius: 3px;
      overflow: hidden;
    }

    .alam-cart-quantity button {
      /* border: 0; */
      /* background: transparent; */
      /* color: var(--cart-text); */
      /* width: 22px; */
      /* height: 100%; */
      /* cursor: pointer; */
      /* font-size: 13px; */
      /* transition: background 0.2s; */
    }

    .alam-cart-quantity button:hover {
      /* background: #f2f5e4; */
    }

    .alam-cart-quantity span {
      font-size: 16px;
      font-weight: 500;
    }

    .alam-cart-remove {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: #a2a8af;
      padding: 0;
      width: 24px;
    }

    .alam-cart-remove svg {
      width: 12px;
      height: 12px;
    }

    .alam-cart-remove:hover {
      color: #dc5555;
    }

    /* Summary */
    .alam-cart-summary {
      border-left: 1px solid var(--cart-border);
      padding-left: 35px;
    }

    .alam-cart-summary h2 {
      font-size: 22px;
      font-weight: 500;
      margin: 0 0 18px;
      color: #001C30;
    }

    .alam-cart-summary-items {
      border-bottom: 1px solid #cccccc52;
      padding-bottom: 18px;
    }

    .alam-cart-summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      font-size: 10px;
      margin-bottom: 15px;
    }

    .alam-cart-summary-row:last-child {
      margin-bottom: 0;
    }

    .alam-cart-summary-row span:first-child {
      color: #001C30;
      font-size: 16px;
    }
#alamSummarySubtotal img{
    width:15px;margin-right:5px;
}
    .alam-cart-summary-row strong {
      font-size: 16px;
      font-weight: 600;
    }

    .alam-cart-summary-note {
      color: #8C8C8C;
      font-size: 14px;
      margin-top: -8px;
    }

    .alam-cart-summary-total {
      margin-top: 18px;
      margin-bottom: 16px;
    }

    .alam-cart-summary-total span:first-child {
      color: var(--cart-text);
      font-weight: 600;
    }
#alamSummaryTotal img{
    width: 15px;
    margin-right: 5px;
}
    .alam-cart-summary-total strong {
      color: #56AF2C;
      font-size: 16px;
    }

    .alam-cart-checkout {
      width: 100%;
      min-height: 48px;
      border: 0;
      border-radius: 15px;
      background: #cadd59;
      color: #000000;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .alam-cart-checkout:hover {
      background: #000000;
      transform: translateY(-1px);
      color: #fff;
    }

    .alam-cart-empty {
      display: none;
      text-align: center;
      padding: 40px 10px;
      color: var(--cart-muted);
      font-size: 12px;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .alam-cart-layout {
        grid-template-columns: 1fr;
        gap: 35px;
      }

      .alam-cart-summary {
        border-left: 0;
        border-top: 1px solid var(--cart-border);
        padding: 25px 0 0;
      }
    }

    @media (max-width: 767px) {
      .alam-cart-section {
        padding: 20px 16px 35px;
      }

      .alam-cart-progress {
        gap: 8px;
        margin-bottom: 30px;
      }

      .alam-cart-step-title {
        font-size: 15px !important;
      }

      .alam-cart-step-subtitle {
        font-size: 7px;
      }

      .alam-cart-product {
        grid-template-columns: 55px minmax(0, 1fr) 16px;
        gap: 12px;
        padding: 15px 0;
      }

      .alam-cart-product-image {
        width: 55px;
        height: 65px;
      }

      .alam-cart-product-details {
        min-width: 0;
      }

      .alam-cart-product-name {
        font-size: 16px;
        padding-right: 10px;
        width: 100%;
      }

      .alam-cart-product-code {
        font-size: 8px;
      }

      .alam-cart-product-price,
      .alam-cart-product-quantity,
      .alam-cart-product-subtotal {
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: 38px;
      }

      .alam-cart-label {
        display: inline-block;
        min-width: 48px;
        margin: 0;
      }

      .alam-cart-price,
      .alam-cart-subtotal {
        font-size: 16px;
      }

      .alam-cart-quantity {
        width: 75px;
      }

      .alam-cart-remove {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
      }

      .alam-cart-summary {
        padding-top: 22px;
      }
    }/* =========================================
   CHECKOUT TABS
========================================= */

.alam-cart-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 20px; */
    margin-bottom: 42px;
}

.alam-cart-step {
    position: relative;
    text-align: center;
    padding: 0 10px 14px;
    border: 0;
    border-bottom: 2px solid #cccccc29;
    background: transparent;
    color: var(--cart-text);
    cursor: pointer;
    font-family: inherit;
    appearance: none;
}

.alam-cart-step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--cart-border);
    transition: background 0.3s ease;
}

.alam-cart-step.is-active::after {
    background: var(--cart-primary);
}

.alam-cart-step:hover::after {
    background: var(--cart-primary);
}

.alam-cart-step-title {
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #001C30;
}

.alam-cart-step-subtitle {
    display: block;
    font-size: 14px;
    color: #B7B7B7;
}

.alam-cart-step:not(.is-active) .alam-cart-step-title {
    color: #69727c;
}

.alam-cart-step:focus-visible {
    outline: 2px solid var(--cart-primary);
    outline-offset: 3px;
}


/* TAB PANELS */

.alam-cart-tab-panel {
    width: 100%;
}

.alam-cart-tab-panel[hidden] {
    display: none !important;
}


/* PLACEHOLDER PANELS */

.alam-shipping-placeholder,
.alam-confirmation-placeholder {
    min-height: 300px;
    padding: 45px 30px;
    border: 1px solid var(--cart-border);
    border-radius: 8px;
    text-align: center;
}

.alam-shipping-placeholder h2,
.alam-confirmation-placeholder h2 {
    margin: 0 0 10px;
    font-size: 18px;
}

.alam-shipping-placeholder p,
.alam-confirmation-placeholder p {
    margin: 0 0 25px;
    color: var(--cart-muted);
    font-size: 12px;
}

.alam-cart-back {
    border: 0;
    background: transparent;
    color: var(--cart-primary-dark);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
/* =========================================
   PRODUCT COLUMN HEADINGS
========================================= */

.alam-cart-products-header {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 149px 150px 111px 16px;
    align-items: center;
    gap: 15px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--cart-border);
}

.alam-cart-products-heading {
    grid-column: 1 / 3;
    font-size: 20px;
    font-weight: 500;
    color: #001C30;
}

.alam-cart-products-heading span {
    color: var(--cart-muted);
    font-weight: 400;
    margin-left: 5px;
}

.alam-cart-column-heading {
    font-size: 18px;
    font-weight: 500;
    color: #001C30;
    white-space: nowrap;
}.cart-minus {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: #8e96a4;
    font-size: 15px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 100%;
    margin-right: 5px;
}.cart-plus {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: #001c30;
    font-size: 15px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 100%;
    margin-left: 5px;
}.alam-checkout {
      width: 100%;
      padding: 20px 0 40px;
      color: #333;
      background: #fff;
    }

    .alam-checkout *,
    .alam-checkout *::before,
    .alam-checkout *::after {
      box-sizing: border-box;
    }

    .alam-checkout-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;

      display: grid;
      grid-template-columns:
        minmax(0, 1.6fr)
        minmax(260px, 0.9fr);

      gap: 60px;
      align-items: start;
    }


    /* =========================================
       SECTION TITLE
    ========================================= */

    .alam-section-title {
      margin: 0 0 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eeeeee;
      font-size: 22px;
      font-weight: 600;
      color: #001C30;
      line-height: 1.4;
    }


    /* =========================================
       ADDRESS CARDS
    ========================================= */

    .alam-address-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .alam-address-card {
      position: relative;
      min-width: 0;
      padding: 25px;
      border: 1px solid #e9e9e9;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
    }

    /* Hide actual radio button */
    .alam-address-card > input[type="radio"] {
      position: absolute;

      width: 1px;
      height: 1px;

      opacity: 0;
      pointer-events: none;
    }

    /* Selected address */
    .alam-address-card:has(
      input[type="radio"]:checked
    ) {
      border-color: #c5df43;

      box-shadow:
        0 0 0 1px rgba(197, 223, 67, 0.15);
    }

    .alam-address-content {
      width: 100%;
    }


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

    .alam-address-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 10px;
      margin-bottom: 10px;
    }

    .alam-address-header strong {
      font-size: 16px;
      font-weight: 600;
      color: #000;
    }


    /* =========================================
       CHECKBOX-STYLE RADIO
       Real radio input, square checkbox design
    ========================================= */

    .alam-radio-icon {
      width: 13px;
      height: 13px;

      flex-shrink: 0;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border: 1px solid #d7d7d7;
      border-radius: 3px;

      background: #fff;

      color: #fff;

      font-size: 8px;
      font-weight: 600;

      transition:
        background 0.2s ease,
        border-color 0.2s ease;
    }

    /* Green checkbox-style selected state */
    .alam-address-card:has(
      input[type="radio"]:checked
    ) .alam-radio-icon {
      background: #c5df43;
      border-color: #c5df43;
    }

    /* Check mark */
    .alam-address-card:has(
      input[type="radio"]:checked
    ) .alam-radio-icon::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-top: -3px;
    }


    /* =========================================
       ADDRESS TEXT
    ========================================= */

    .alam-address-card p {
      margin: 0;
      min-height: 56px;
      color: #B7B7B7;
      font-size: 15px;
      line-height: 1.7;
      font-weight: 400;
    }


    /* =========================================
       ADDRESS ACTIONS
    ========================================= */

    .alam-address-actions {
      display: flex;
      flex-wrap: wrap;

      gap: 18px;

      margin-top: 15px;
    }

    .alam-address-actions button {
      padding: 0;
      border: 0;
      background: transparent;
      color: #000000;
      font-family: inherit;
      font-size: 14px;
      cursor: pointer;
      transition: color 0.2s ease;
      text-decoration: underline;
    }

    .alam-address-actions button:hover {
      color: #a4bd24;
    }


    /* =========================================
       ADD SHIPPING ADDRESS
    ========================================= */

    .alam-add-title {
      margin-top: 28px;
      margin-bottom: 15px;
    }

    .alam-address-form {
      display: flex;
      flex-direction: column;

      gap: 13px;
    }

    .alam-form-row {
      display: grid;

      grid-template-columns:
        repeat(2, minmax(0, 1fr));

      gap: 12px;
    }

    .alam-address-form input[type="text"],
    .alam-address-form input[type="email"] {
      width: 100%;
      height: 50px;
      padding: 0 14px;
      border: 1px solid #ededed;
      border-radius: 15px;
      outline: none;
      background: #fff;
      color: #000000;
      font-family: inherit;
      font-size: 16px;
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .alam-address-form input::placeholder {
      color: #bdbdbd;
    }

    .alam-address-form input:focus {
      border-color: #c5df43;

      box-shadow:
        0 0 0 3px rgba(197, 223, 67, 0.12);
    }


    /* =========================================
       SAVE ADDRESS CHECKBOX
    ========================================= */

    .alam-save-address {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
      color: #B7B7B7;
      font-size: 16px;
      cursor: pointer;
    }

    .alam-save-address input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: #c5df43;
      cursor: pointer;
    }


    /* =========================================
       BUTTONS
    ========================================= */

    .alam-save-btn,
    .alam-place-order {
      height: 50px;
      border: 0;
      border-radius: 8px;
      background: #c5df43;
      color: #000000;
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition:
        background 0.25s ease,
        transform 0.2s ease;
    }

    .alam-save-btn {
      width: 185px;
      margin-top: 15px;
    }

    .alam-save-btn:hover,
    .alam-place-order:hover {
      background: #000000;
      color: #fff;
    }

    .alam-save-btn:active,
    .alam-place-order:active {
      transform: scale(0.98);
    }


    /* =========================================
       ORDER SUMMARY
    ========================================= */

    .alam-order-summary {
      width: 100%;
    }

    .alam-order-summary .alam-section-title {
      margin-bottom: 22px;
    }

    .alam-summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 0 15px;
      color: #001C30;
      font-size: 16px;
    }.alam-summary-row strong img{
        
width: 15px;
    }

    .alam-summary-row strong {
      color: #001C30;
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }

    .alam-summary-divider {
      height: 1px;

      margin: 3px 0 18px;

      background: #eeeeee;
    }

    .alam-total-row {
      padding-bottom: 20px;
      color: #001C30;
      font-weight: 600;
    }

    .alam-total-row strong {
      font-size: 16px;
      font-weight: 600;
    }

    .alam-place-order {
      width: 100%;

      margin-top: 2px;
    }


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

    @media (max-width: 991px) {

      .alam-checkout-container {
        gap: 35px;

        grid-template-columns:
          minmax(0, 1.4fr)
          minmax(230px, 1fr);
      }

      .alam-address-card {
        padding: 14px;
      }
    }


    @media (max-width: 767px) {

      .alam-checkout {
        padding: 15px 0 30px;
      }

      .alam-checkout-container {
        grid-template-columns: 1fr;

        gap: 35px;
      }

      .alam-address-cards {
        grid-template-columns: 1fr;
      }

      .alam-order-summary {
        padding-top: 5px;
      }
    }


    @media (max-width: 480px) {

      .alam-form-row {
        grid-template-columns: 1fr;

        gap: 13px;
      }

      .alam-section-title {
        font-size: 14px;
      }

      .alam-address-card p {
        min-height: auto;
      }

      .alam-save-btn {
        width: 100%;
      }
    }  /* =========================================
           ORDER SUCCESS WRAPPER
        ========================================= */

        .alam-success-page {
            width: 100%;
            padding: 35px 8%;
        }

        .alam-success-container {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }


        /* =========================================
           SUCCESS ICON
        ========================================= */

        .alam-success-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 12px;

            border: 4px solid #c5df43;
            border-radius: 50%;

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

            position: relative;
        }

        .alam-success-icon::after {
            content: "";

            width: 11px;
            height: 21px;

            border-right: 4px solid #c5df43;
            border-bottom: 4px solid #c5df43;

            transform: rotate(45deg);

            margin-top: -5px;
        }


        /* =========================================
           SUCCESS MESSAGE
        ========================================= */

        .alam-success-title {
            text-align: center;
            font-size: 24px;
            line-height: 1.4;
            font-weight: 600;
            color: #001C30;
            margin-bottom: 2px;
            margin-top: 20px;
        }

        .alam-success-subtitle {
            text-align: center;
            font-size: 16px;
            line-height: 1.5;
            color: #B7B7B7;
            margin-bottom: 36px;
        }


        /* =========================================
           ORDER DETAILS TITLE
        ========================================= */

        .alam-order-details-title {
            /* text-align: center; */
            font-size: 24px;
            font-weight: 500;
            color: #000;
            margin-bottom: 12px;
        }


        /* =========================================
           ORDER DETAILS
        ========================================= */

        .alam-order-details {
            display: grid;

            grid-template-columns: 1.3fr 0.7fr;

            gap: 35px;

            width: 100%;
        }


        /* =========================================
           LEFT ORDER INFORMATION
        ========================================= */

        .alam-order-info {
            border-top: 1px solid #eeeeee;
            border-bottom: 1px solid #eeeeee;
            padding: 20px 0;
        }

        .alam-order-row {
            min-height: 34px;
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            align-items: center;
            /* border-bottom: 1px solid #f1f1f1; */
            margin-bottom: 10px;
        }

        .alam-order-row:last-child {
            border-bottom: 0;
        }

        .alam-order-label {
            font-size: 16px;
            color: #B7B7B7;
        }
.alam-order-value img{
    
width: 15px;
}
        .alam-order-value {
            text-align: right;
            font-size: 16px;
            font-weight: 500;
            color: #000;
            line-height: 1.4;
        }


        /* =========================================
           RIGHT SHIPPING DETAILS
        ========================================= */

        .alam-shipping-box {
            border-top: 1px solid #eeeeee;
        }

        .alam-shipping-name {
            padding-top: 10px;
            font-size: 16px;
            font-weight: 500;
            color: #000;
            margin-bottom: 5px;
        }

        .alam-shipping-address {
            font-size: 16px;
            line-height: 1.6;
            color: #B7B7B7;
            padding-bottom: 12px;
            border-bottom: 1px solid #eeeeee;
        }


        /* =========================================
           DELIVERY INFORMATION
        ========================================= */

        .alam-delivery-info {
            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 10px;

            padding: 11px 0;
        }

        .alam-delivery-text {
            font-size: 16px;
            color: #B7B7B7;
            line-height: 1.5;
        }


        /* =========================================
           TRACK ORDER BUTTON
        ========================================= */

        .alam-track-order {
            width: 100%;
            height: 58px;
            border: 0;
            padding: 5px 0 20px;
            border-radius: 16px;
            background: #C9DD58;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition:
                background 0.25s ease,
                transform 0.2s ease;
        }

        .alam-track-order:hover {
            background: #000;
        }

        .alam-track-order:active {
            transform: scale(0.98);
        }

        .alam-track-arrow {
            margin-left: 4px;
            position: relative;
            top: 10px;
        }
.alam-track-arrow img{
    
width: 28px;
    
/* position: relative; */
    
/* top: 2px; */
}

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

        @media (max-width: 767px) {

            .alam-success-page {
                padding: 30px 20px 45px;
            }

            .alam-success-container {
                max-width: 500px;
            }

            .alam-success-subtitle {
                margin-bottom: 30px;
            }

            .alam-order-details {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .alam-shipping-box {
                border-top: 1px solid #eeeeee;
            }
        }


        @media (max-width: 480px) {

            .alam-success-page {
                padding: 25px 15px 40px;
            }

            .alam-success-icon {
                width: 48px;
                height: 48px;
            }

            .alam-success-title {
                font-size: 14px;
            }

            .alam-order-details-title {
                font-size: 12px;
            }

            .alam-order-details {
                gap: 20px;
            }

            .alam-order-row {
                grid-template-columns: 1fr 1.4fr;
            }

            .alam-track-order {
                height: 40px;
            }
        }
        .success-ico{
            margin: auto;
            display: block;
        }
        .topbar {
  background: #1a1a2e;
  padding: 12px 24px;
}
.brand {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.brand span {
  color: #ffd166;
}

.page-wrap {
  padding: 30px 2%;
  width: 100%;
}
.breadcrumb img{
    
width: 17px;
}
.breadcrumb span img{width: 7px;margin: 0 5px;}
.breadcrumb .bc1{
    
font-size: 14px;
    
color: #000;
    
font-weight: 500;
}
.breadcrumb .bc2{
    
font-size: 14px;
    
color: #001C30;
    
font-weight: 500;
}
.breadcrumb {
  font-size: 12px;
  color: #888;
  margin-bottom: 30px;
}

.product-main {
  display: grid;
  grid-template-columns: 552px 1fr;
  gap: 40px;
}

/* Gallery */
.gallery { display: flex; flex-direction: column; gap: 14px; }

.main-image {
  position: relative;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f3f5;
  height: 600px;
  cursor: crosshair;
}
.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

/* Zoom lens (the square that follows the cursor) */
.zoom-lens {
  position: absolute;
  display: none;
  border: 1px solid rgba(124, 92, 252, 0.7);
  background: rgba(124, 92, 252, 0.15);
  pointer-events: none;
  width: 140px;
  height: 140px;
  z-index: 5;
}
.main-image.zoom-active .zoom-lens {
  display: block;
}

/* Floating zoomed preview panel */
.zoom-pane {
  position: absolute;
  top: 33%;
  left: calc(420px + 24px);
  width: 420px;
  height: 438px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: none;
  z-index: 20;
  pointer-events: none;
}
.zoom-pane.show {
  display: block;
}

/* Small hint badge */
.main-image::after {
  content: "\1F50D  Hover to zoom";
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(26, 26, 46, 0.7);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.main-image.zoom-active::after {
  opacity: 0;
}

.thumbs {
  display: flex;
  gap: 10px;
}
.thumb {
  width: 130px;
  height: 130px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.75;
  transition: all 0.15s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { opacity: 1; }
.thumb.active {
  border-color: #a78bfa;
  opacity: 1;
}

/* Info */
.info { display: flex; flex-direction: column; }

.info .title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 14px;
  color: #001C30;
  text-align: left;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.currency img{
    
width: 28px;
}
.currency { font-size: 14px; color: #444; }
.price {font-size: 32px;font-weight: 700;color: #1a1a2e;}
.price-row .old-price {font-size: 20px;color: #4AA335;font-weight: 600;}

.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 18px;
}
.stars { color: #f5a623; font-weight: 600; }
.review-count {color: #8E96A4;font-size: 15px;font-weight: 500;}

.desc-snippet {
  font-size: 16px;
  color: #8C8C8C;
  line-height: 1.6;
  margin-bottom: 14px;
  font-weight: 500;
}
.read-more {
  color: #c8de59;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* PRODUCT OPTIONS */
#productOptions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 25px 0;
    width: 100%;
    font-family: inherit;
}

/* OPTION GROUP */
#productOptions .option-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* OPTION LABEL */
#productOptions .option-group > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    letter-spacing: 0.3px;
    margin: 0;
}

/* OPTION VALUES */
#productOptions .option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* OPTION BUTTON */
#productOptions .option-btn {
    position: relative;
    min-width: 48px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* HOVER */
#productOptions .option-btn:not(.unavailable):hover {
    border-color: #222;
    color: #111;
    transform: translateY(-2px);
}

/* ACTIVE / SELECTED */
#productOptions .option-btn.active {
    background: #222;
    color: #fff;
    border-color: #222;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* ACTIVE HOVER */
#productOptions .option-btn.active:hover {
    background: #444;
    border-color: #444;
    color: #fff;
}

/* UNAVAILABLE OPTIONS */
#productOptions .option-btn.unavailable {
    color: #aaa;
    background: #f8f8f8;
    border-color: #e8e8e8;
    cursor: not-allowed;
    opacity: 0.7;
    text-decoration: line-through;
    transform: none;
}

/* KEYBOARD ACCESSIBILITY */
#productOptions .option-btn:focus-visible {
    outline: 2px solid #777;
    outline-offset: 3px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 576px) {
    #productOptions {
        gap: 20px;
        margin: 20px 0;
    }

    #productOptions .option-group {
        gap: 10px;
    }

    #productOptions .option-values {
        gap: 8px;
    }

    #productOptions .option-btn {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 12px;
    }
}
.in-stock{
    background: #eaffe6a1;
    border: 1px solid #7bd13899;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 30px;
    color: #4c7617;
}
.sku {
  font-size: 16px;
  color: #001C30;
  margin-bottom: 16px;
  border-top: 1px solid #cecece4f;
  border-bottom: 1px solid #cecece5c;
  padding: 15px 0;
}
.sku span {color: #8C8C8C;font-size: 16px;padding-left: 30px;}

.qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.qty-label {font-size: 16px;color: #000;font-weight: 600;margin-bottom: 15px;}
.qty-stepper {
  display: flex;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
}.qty-btn#qtyMinus {
    border: none;
    background: #8C8C8C;
    width: 44px;
    height: 44px;
    font-size: 26px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 100%;
}
.qty-btn#qtyPlus {
  border: none;
  background: #C9DD58;
  width: 44px;
  height: 44px;
  font-size: 26px;
  cursor: pointer;
  color: #ffffff;
  border-radius: 100%;
}
.qty-btn:hover { background: #e2e2e6; }
#qtyValue {
  width: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #cecece;
  padding: 13px;
  border-radius: 25px;
  width: 84px;
  height: 44px;
  margin: 0 10px;
}
.total-label {font-size: 16px;color: #8C8C8C;font-weight: 600;}
.total-value {font-size: 25px;font-weight: 700;color: #000;}
.total-value img{
    
width: 22px;
}
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 7px 12px 5px;
  font-size: 15px;
  color: #8C8C8C;
  margin-bottom: 8px;
}
.banner-logo {
  font-weight: 700;
  font-size: 13px;
  min-width: 54px;
}
.tabby .banner-text{
    float: left;
    margin-top: -2px;
}
.banner-text{
    float: left;
    margin-top: -16px;
}
.banner.tamara .banner-logo { color: #e8437a; }
.banner.tabby .banner-logo { color: #6bcb77; }
.banner a {color: #8C8C8C;text-decoration: underline;font-weight: 400;}

.delivery-row {
  font-size: 13px;
  margin-top: 12px;
  color: #444;
}
.change-link {
  color: #7c5cfc;
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
}
.delivery-sub {
  font-size: 16px;
  color: #B7B7B7;
  margin-top: 20px;
}
.delivery-sub img{
    width: 12px;
    filter: grayscale(1);
    opacity: .2;
}

.action-row {
  /* display: flex; */
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.btn-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #ededed69;
  font-size: 46px;
  cursor: pointer;
  color: #000000;
  transition: all 0.15s ease;
  border: 0;
  top: 10px;
  position: relative;
}
.btn-icon.active img{
    
width: 35px;
    
position: relative;
    
top: 2px;
}
.btn-icon.active { color: #e8437a; border-color: #e8437a; }
.btn-icon:hover {}

.btn-cart, .btn-buy {
  flex: 1;
  padding: 12px 20px;
  border-radius: 15px;
  font-size: 18px;
  margin-left: 10px;
  width: 195px;
  font-weight: 600;
  height: 61px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}
.btn-cart {
  background: transparent;
  color: #18361E;
  border: 1px solid #18361E;
}
.btn-cart:hover {background: #18361E;color: #fff;}
.btn-buy {
  background: #cadd5a;
  color: #fff;
}
.btn-buy:hover {background: #000000;}

/* Tabs */
.tabs-section {
  margin-top: 30px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.tabs-nav {
  display: flex;
  border-bottom: 1px solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 16px;
  font-size: 22px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-item.active {
  color: #1a1a2e;
  background: #cbde5a;
}
.tab-item:hover:not(.active) { background: #f7f7f9; }

.tab-content {
  display: none;
  padding: 30px;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}
.tab-content.active { display: block; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table tr {
  /* border-bottom: 1px solid #f0f0f2; */
}
.spec-table tr:nth-child(even) {
  /* background: #fafafc; */
}
.spec-table td {
  padding: 12px 10px;
  font-size: 16px;
}
.spec-label {
  color: #8E96A4;
  width: 35%;
  font-weight: 500;
}
.spec-value {
  color: #001C30;
  font-weight: 500;
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.big-rating { font-size: 28px; font-weight: 700; color: #1a1a2e; }
.no-reviews {color: #999;font-size: 15px;}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a2e;
  color: #fff;
  padding: 12px 22px;
  border-radius: 24px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 99999999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 767px) {
    .total-label{
        float: left;
        margin-right: 20px;
        margin-top: 4px;
        font-size: 18px;
    }.qty-label{
        float: left;
        margin-top: 20px;
        margin-right: 20px;
    }
    .qty-stepper{
        margin: 10px 0;
    }
    .qty-row{
        display: inline;
    }
    .info .title{
        
font-size: 22px;
        
margin-top: 20px;
    }
  .product-main {grid-template-columns: 1fr;width: 100%;float: left;gap: 0;display: inline;}
  .main-image {height: auto;width: 100%;}
  .zoom-pane, .zoom-lens { display: none !important; }
  .main-image::after { display: none; }
}.gallery{
    width:100%;
}
.strike-price {
    
}
.btn-icon img{
    
width: 30px;
    
position: relative;
    
top: -2px;
}

/* ==========================================
   DASHBOARD TAB FIX
========================================== */

.dashboard-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
}


.dashboard-tab {
    position: relative;
    border: 0;
    outline: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all .3s ease;
}


.dashboard-tab:hover {
    color: #6c8e22;
}


.dashboard-tab.active {
    color: #111;
}


.dashboard-tab.active::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: -1px;

    height: 2px;

    background: #6c8e22;
}


/* ==========================================
   DASHBOARD PANELS
========================================== */

.dashboard-panel {
    display: none;
    animation: dashboardFade .3s ease;
}


.dashboard-panel.active {
    display: block;
}


@keyframes dashboardFade {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================
   PANEL TITLE
========================================== */

.dashboard-panel-title {
    margin-bottom: 25px;
}


.dashboard-panel-title h3 {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 600;
    color: #171717;
}


.dashboard-panel-title p {
    margin: 0;
    font-size: 11px;
    color: #888;
}


/* ==========================================
   PROFILE
========================================== */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 800px;
}


.dashboard-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.dashboard-field label {
    font-size: 16px;
    color: #171717;
    font-weight: 500;
    margin-bottom: 5px;
}


.dashboard-field input {
    width: 100%;
    height: 45px;
    padding: 0 13px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    transition: border .2s ease;
}


.dashboard-field input:focus {
    border-color: #6c8e22;
}


.dashboard-save-btn,
.add-address-btn {
    margin-top: 22px;
    height: 50px;
    padding: 0 25px;
    font-weight: 500;
    border: 0;
    border-radius: 15px;
    background: #cbde5a;
    color: #000000;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease;
}


.dashboard-save-btn:hover,
.add-address-btn:hover {
    background: #000000;
    color: #fff;
}


/* ==========================================
   ADDRESS
========================================== */

.address-card {
    max-width: 550px;

    padding: 22px;

    border: 1px solid #e8e8e8;
    border-radius: 7px;
}


.address-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.address-label {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;
    color: #7a7a7a;
}


.address-card h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #001c30;
}


.address-card p {
    margin: 15px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #6a6a6a;
}


.address-edit-btn {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: #c3df1b;
    cursor: pointer;
}


/* ==========================================
   PAYMENT
========================================== */

.payment-list {
    border: 1px solid #eeeeee;
    border-radius: 7px;
    overflow: hidden;
}


.payment-item {
    min-height: 65px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #eeeeee;
}


.payment-item:last-child {
    border-bottom: 0;
}


.payment-item > div {
    display: ruby;
    flex-direction: column;
    gap: 5px;
}


.payment-item > div:last-child {
    text-align: right;
}


.payment-item strong {
    font-size: 16px;
    font-weight: 500;
}


.payment-item span {
    font-size: 15px;
    color: #999;
}


.payment-success {
    color: #5c861d !important;
}


.payment-failed {
    color: #b25b5b !important;
}


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

@media (max-width: 991px) {

    .dashboard-tabs {
        display: flex;
        overflow-x: auto;

        scrollbar-width: none;
    }

    .dashboard-tabs::-webkit-scrollbar {
        display: none;
    }

    .dashboard-tab {
        min-width: 145px;
        white-space: nowrap;
    }

}


@media (max-width: 767px) {

    .dashboard-tabs {
        margin-bottom: 22px;
    }

    .dashboard-tab {
        min-width: 125px;
        height: 44px;
        font-size: 10px;
    }


    .dashboard-panel-title {
        margin-bottom: 18px;
    }


    .dashboard-panel-title h3 {
        font-size: 16px;
    }


    .profile-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }


    .address-card {
        padding: 17px;
    }


    .payment-item {
        padding: 13px;
    }

}


@media (max-width: 480px) {

    .dashboard-tab {
        min-width: 115px;
        font-size: 9px;
    }

}
/* ==========================================
   ORDER SECTION
========================================== */

.dashboard-orders {
    width: 100%;
    /* border: 1px solid #eeeeee; */
    border-radius: 7px;
    overflow: hidden;
    background: #ffffff;
}


.orders-table-header {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid #eeeeee;
}


.orders-search {
    position: relative;
    width: 220px;
    display: flex;
    align-items: center;
}


.orders-search .search-icon {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: #a5a5a5;
    display: flex;
}


.orders-search input {
    width: 100%;
    height: 30px;
    padding: 0 8px 0 22px;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 10px;
    color: #333333;
    background: transparent;
}


.orders-search input::placeholder {
    color: #aaaaaa;
}


/* ==========================================
   TABLE
========================================== */

.dashboard-table-wrapper {
    width: 100%;
    overflow-x: auto;
}


.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


.dashboard-table th {
    height: 40px;
    padding: 0 12px;
    text-align: left;
    background: #fafafa;
    border-bottom: 1px solid #eeeeee;

    font-size: 9px;
    line-height: 1;
    font-weight: 500;
    color: #777777;
}


.dashboard-table td {
    height: 43px;
    padding: 0 12px;
    border-bottom: 1px solid #f0f0f0;

    font-size: 9px;
    color: #444444;
    vertical-align: middle;
}


.dashboard-table tbody tr:last-child td {
    border-bottom: 0;
}


.dashboard-table tbody tr {
    transition: background .2s ease;
}


.dashboard-table tbody tr:hover {
    background: #fcfdf9;
}


/* COLUMN WIDTHS */

.dashboard-table th:nth-child(1),
.dashboard-table td:nth-child(1) {
    width: 21%;
}

.dashboard-table th:nth-child(2),
.dashboard-table td:nth-child(2) {
    width: 18%;
}

.dashboard-table th:nth-child(3),
.dashboard-table td:nth-child(3) {
    width: 15%;
}

.dashboard-table th:nth-child(4),
.dashboard-table td:nth-child(4) {
    width: 12%;
}

.dashboard-table th:nth-child(5),
.dashboard-table td:nth-child(5) {
    width: 18%;
}

.dashboard-table th:nth-child(6),
.dashboard-table td:nth-child(6) {
    width: 16%;
}


/* ==========================================
   ORDER STATUS
========================================== */

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 52px;
    height: 21px;

    padding: 0 9px;

    border-radius: 20px;

    font-size: 8px;
    font-weight: 500;
}


.status-pending {
    color: #765e16;
    background: #fff6cf;
}


.status-delivered {
    color: #43731d;
    background: #eaf8dc;
}


.status-shipped {
    color: #276c7a;
    background: #e1f5f8;
}


.status-cancelled {
    color: #a04444;
    background: #fde7e7;
}


/* ==========================================
   VIEW DETAILS
========================================== */

.view-order {
    color: #333333;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 9px;
    transition: color .25s ease;
}


.view-order:hover {
    color: #6c8e22;
}


/* ==========================================
   DATATABLE CONTROLS
========================================== */

.dataTables_wrapper {
    width: 100%;
}


.dataTables_filter {
    display: none;
}


.dataTables_length {
    display: none;
}


.dataTables_info {
    padding: 12px 14px !important;
    font-size: 9px !important;
    color: #888888 !important;
}


.dataTables_paginate {
    padding: 8px 14px !important;
}


.dataTables_paginate .paginate_button {
    min-width: 25px;
    height: 25px;

    margin: 0 2px !important;
    padding: 5px 7px !important;

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

    font-size: 9px !important;
    color: #555555 !important;

    background: transparent !important;
}


.dataTables_paginate .paginate_button.current {
    color: #ffffff !important;
    background: #6c8e22 !important;
}


.dataTables_paginate .paginate_button:hover {
    color: #ffffff !important;
    background: #6c8e22 !important;
}


/* ==========================================
   TABLE FOOTER
========================================== */

.dataTables_wrapper .dataTables_info {
    float: left;
}


.dataTables_wrapper .dataTables_paginate {
    float: right;
}


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

@media (max-width: 991px) {

    .user-dashboard {
        padding: 45px 0 60px;
    }

    .user-dashboard-container {
        width: 94%;
    }

    .dashboard-tabs {
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;
    }

    .dashboard-tab {
        min-width: 145px;
        white-space: nowrap;
    }

    .dashboard-tab.active:after {
        left: 20px;
        right: 20px;
    }

    .summary-card {
        min-height: 95px;
    }

}


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

@media (max-width: 767px) {

    .user-dashboard {
        padding: 30px 0 45px;
    }

    .user-dashboard-container {
        width: 92%;
    }


    .dashboard-welcome {
        margin-bottom: 15px;
    }

    .dashboard-welcome h2 {
        font-size: 20px !important;
    }


    /* TABS */

    .dashboard-tabs {
        margin-left: -4%;
        width: 108%;
        margin-bottom: 20px;
        scrollbar-width: none;
    }

    .dashboard-tabs::-webkit-scrollbar {
        display: none;
    }

    .dashboard-tab {
        min-width: 130px;
        min-height: 43px;
        font-size: 10px;
    }


    /* SUMMARY */

    .dashboard-summary {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .summary-card {
        min-height: 82px;
        padding: 16px 18px;
    }

    .summary-icon {
        width: 38px;
        height: 38px;
    }

    .summary-icon img {
        width: 27px;
        height: 27px;
    }

    .summary-content strong {
        font-size: 21px !important;
        float: left !important;
        padding-top: 10px;
    }


    /* SEARCH */

    .orders-table-header {
        height: 48px;
    }

    .orders-search {
        width: 100%;
    }


    /* MOBILE TABLE */

    .dashboard-table,
    .dashboard-table tbody,
    .dashboard-table tr,
    .dashboard-table td {
        display: block;
        width: 100%;
    }


    .dashboard-table thead {
        display: none;
    }


    .dashboard-table tbody {
        width: 100%;
    }


    .dashboard-table tr {
        position: relative;
        padding: 15px 16px;
        border-bottom: 1px solid #eeeeee;
    }


    .dashboard-table tbody tr:last-child {
        border-bottom: 0;
    }


    .dashboard-table td {
        width: 100% !important;
        height: auto;
        min-height: 28px;

        padding: 5px 0;
        border: 0;

        display: flex;
        align-items: center;
        justify-content: space-between;

        text-align: right;
        font-size: 10px;
    }


    .dashboard-table td:before {
        content: attr(data-label);
        font-size: 9px;
        font-weight: 500;
        color: #888888;
        text-align: left;
        margin-right: 15px;
    }


    .dashboard-table td:first-child {
        padding-top: 0;
    }


    .dashboard-table td:last-child {
        padding-bottom: 0;
    }


    .dashboard-table .order-id {
        font-weight: 500;
        color: #222222;
    }


    .dashboard-table .order-status {
        min-width: 60px;
    }


    .view-order {
        font-size: 10px;
    }


    /* DATATABLE FOOTER */

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_info {
        padding: 12px 10px 5px !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding: 5px 10px 12px !important;
    }

}


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

@media (max-width: 480px) {

    .dashboard-tab {
        min-width: 120px;
        font-size: 14px !important;
    }

    .summary-card {
        padding: 14px !important;
    }

    .summary-content span {
        font-size: 15px !important;
        text-align: left;
        float: left;
    }

    .summary-content strong {
        /* font-size: 19px !important; */
    }

    .dashboard-table td {
        font-size: 9px;
    }

}/* ==========================================
   USER DASHBOARD
========================================== */

.user-dashboard {
    width: 100%;
    padding: 30px 0 80px;
    background: #ffffff;
}

.user-dashboard-container {
    width: 92%;
    max-width: 1320px;
    margin: 0 auto;
}


/* ==========================================
   WELCOME
========================================== */

.dashboard-welcome {
    margin-bottom: 22px;
}

.dashboard-welcome h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 600;
    color: #18361E;
}


/* ==========================================
   DASHBOARD TABS
========================================== */

.dashboard-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 28px;
}

.dashboard-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 10px;
    color: #001C30;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all .3s ease;
}

.dashboard-tab:hover {
    color: #6c8e22;
}

.dashboard-tab.active {
    color: #111111;
}

.dashboard-tab.active:after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 2px;
    background: #6c8e22;
}


/* ==========================================
   SUMMARY CARDS
========================================== */

.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}

.summary-card {
    min-height: 166px;
    padding: 20px 25px;
    border-radius: 16px;
    background: linear-gradient(
        105deg,
        #f1fbdc 0%,
        #fbfff4 55%,
        #ffffff 100%
    );
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid #E6F8C0; */
}


.summary-icon {
    width: 57px;
    height: 57px;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    float: left;
    clear: both;
}


.summary-icon img {
    width: 57px;
    height: 57px;
    object-fit: contain;
}


.summary-content {
    /* flex: 1; */
    display: inline;
    /* align-items: center; */
    justify-content: space-between;
    float: left;
    width: 100%;
    margin-top: 10px;
    clear: both;
}


.summary-content span {
    font-size: 24px;
    color: #001C30;
    font-weight: 600;
}


.summary-content strong {
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    color: #001C30;
    float: right;
}
.card-box::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
176deg, #c8de59, #cadc5b, #ffffff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}
.card-box{
    /* border: 1px solid #E6F8C0; */
    border-radius: 16px;
    padding: 15px;
    position: relative;
    background: #fff;
    z-index: 1;
}/* ==========================================
   RETURN STATUS
========================================== */

.return-pending {
    color: #765e16;
    background: #fff6cf;
}

.return-approved {
    color: #276c7a;
    background: #e1f5f8;
}

.return-completed {
    color: #43731d;
    background: #eaf8dc;
}

.return-rejected {
    color: #a04444;
    background: #fde7e7;
}/* =========================================================
   PREMIUM RETURN DATATABLE
========================================================= */

.dashboard-orders {
    width: 100%;
    background: #fff;
    /* border: 1px solid #e8eadf; */
    border-radius: 12px;
    overflow: hidden;
}


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

.orders-table-header {
    height: 47px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border: 1px solid #eeeeeb;
    /* background: #fff; */
    border-radius: 20px;
}

.orders-search {
    position: relative;
    width: 240px;
}

.orders-search .search-icon {
    position: absolute;
    left: 0;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;

    color: #999;
}

.orders-search input {
    width: 100%;
    height: 32px;
    padding: 0 5px 0 22px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: #000000;
}

.orders-search input::placeholder {
    color: #aaa;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.dashboard-table-wrapper {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   TABLE
========================================================= */

.dashboard-table {
    width: 100% !important;

    table-layout: fixed !important;

    border-collapse: separate;
    border-spacing: 0;

    margin: 0 !important;
}


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

.dashboard-table thead th {
    height: 43px;
    padding: 0 16px;
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid #eeeeeb;
    text-align: left;
    white-space: nowrap;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: .2px;
    color: #777d70;
}


/* =========================================================
   TABLE BODY
========================================================= */

.dashboard-table tbody td {
    height: 58px;
    padding: 0 16px;
    border-bottom: 1px solid #f1f1ef;
    vertical-align: middle;
    font-family: inherit;
    font-size: 16px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-table tbody tr:last-child td {
    border-bottom: 0;
}


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

.dashboard-table tbody tr {
    transition: background .25s ease;
}

.dashboard-table tbody tr:hover {
    background: #fbfcf8;
}
.dashboard-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.dashboard-table tbody tr:nth-child(even) {
    background: #fbfbfb;
}

/* =========================================================
   COLUMN WIDTHS
========================================================= */

/* Return ID */
.returns-table th:nth-child(1),
.returns-table td:nth-child(1) {
    width: 13%;
}

/* Order ID */
.returns-table th:nth-child(2),
.returns-table td:nth-child(2) {
    width: 14%;
}

/* Product */
.returns-table th:nth-child(3),
.returns-table td:nth-child(3) {
    width: 20%;
}

/* Return Date */
.returns-table th:nth-child(4),
.returns-table td:nth-child(4) {
    width: 13%;
}

/* Reason */
.returns-table th:nth-child(5),
.returns-table td:nth-child(5) {
    width: 16%;
}

/* Status */
.returns-table th:nth-child(6),
.returns-table td:nth-child(6) {
    width: 12%;
}

/* Action */
.returns-table th:nth-child(7),
.returns-table td:nth-child(7) {
    width: 12%;
}


/* =========================================================
   IDs
========================================================= */

.returns-table td:nth-child(1),
.returns-table td:nth-child(2) {
    color: #000000;
    font-weight: 400;
}


/* =========================================================
   PRODUCT
========================================================= */

.returns-table td:nth-child(3) {
    color: #292d27;
    font-weight: 500;
}


/* =========================================================
   STATUS
========================================================= */

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 65px;
    height: 24px;
    padding: 0 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1px;
}


/* Pending */

.return-pending {
    color: #806719;
    background: #fff7d9;
}


/* Approved */

.return-approved {
    color: #33727c;
    background: #e5f6f7;
}


/* Completed */

.return-completed {
    color: #4e781f;
    background: #edf7df;
}


/* Rejected */

.return-rejected {
    color: #a14e4e;
    background: #fceaea;
}


/* =========================================================
   VIEW DETAILS
========================================================= */

.view-order {
    display: inline-flex;
    align-items: center;
    color: #3e4738;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color .25s ease;
}

.view-order::after {
    content: "↗";

    margin-left: 5px;

    font-size: 10px;

    opacity: .6;

    transition: transform .25s ease;
}

.view-order:hover {
    color: #6c8e22;
}

.view-order:hover::after {
    transform: translate(2px, -2px);
}


/* =========================================================
   DATATABLE
========================================================= */

.dataTables_wrapper {
    width: 100%;
    margin: 0 !important;
}


/* Hide default search */

.dataTables_wrapper .dataTables_filter {
    display: none;
}


/* Hide length */

.dataTables_wrapper .dataTables_length {
    display: none;
}


/* =========================================================
   DATATABLE FOOTER
========================================================= */

.dataTables_wrapper .dataTables_info {
    float: left;

    padding: 17px 20px !important;

    font-size: 9px !important;
    color: #999 !important;
}


.dataTables_wrapper .dataTables_paginate {
    float: right;

    padding: 12px 20px !important;
}


/* =========================================================
   PAGINATION
========================================================= */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 27px;
    height: 27px;

    margin: 0 2px !important;
    padding: 6px 8px !important;

    display: inline-flex !important;

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

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

    background: transparent !important;

    color: #777 !important;

    font-family: inherit;
    font-size: 9px !important;

    cursor: pointer;

    transition: all .25s ease;
}


.dataTables_wrapper
.dataTables_paginate
.paginate_button:hover {
    background: #f0f5e5 !important;
    color: #5d7921 !important;
}


.dataTables_wrapper
.dataTables_paginate
.paginate_button.current {
    background: #6c8e22 !important;
    color: #fff !important;
}


.dataTables_wrapper
.dataTables_paginate
.paginate_button.disabled {
    opacity: .35;
    cursor: default;
}


/* Remove ugly sorting arrows */

.dashboard-table thead .sorting,
.dashboard-table thead .sorting_asc,
.dashboard-table thead .sorting_desc {
    background-image: none !important;
}


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

@media (max-width: 767px) {

    .dashboard-orders {
        border-radius: 9px;
    }


    .orders-table-header {
        height: 50px;
        padding: 0 15px;
    }


    .orders-search {
        width: 100%;
    }


    .dashboard-table-wrapper {
        overflow: visible;
    }


    .dashboard-table,
    .dashboard-table tbody,
    .dashboard-table tr,
    .dashboard-table td {
        display: block;
        width: 100% !important;
    }


    .dashboard-table thead {
        display: none;
    }


    .dashboard-table tbody tr {
        padding: 16px;

        border-bottom: 1px solid #eeeeeb;
    }


    .dashboard-table tbody tr:last-child {
        border-bottom: 0;
    }


    .dashboard-table tbody td {
        height: auto;
        min-height: 30px;

        padding: 5px 0;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border: 0;

        white-space: normal;
        overflow: visible;
        text-overflow: initial;

        font-size: 10px;
    }


    .dashboard-table tbody td::before {
        content: attr(data-label);

        flex-shrink: 0;

        margin-right: 20px;

        color: #999;

        font-size: 9px;
        font-weight: 400;
    }


    .dashboard-table tbody td:first-child {
        padding-top: 0;
    }


    .dashboard-table tbody td:last-child {
        padding-bottom: 0;
    }


    .dataTables_wrapper .dataTables_info {
        float: none;

        text-align: center;

        padding: 14px 10px 5px !important;
    }


    .dataTables_wrapper .dataTables_paginate {
        float: none;

        text-align: center;

        padding: 5px 10px 14px !important;
    }

}/* =========================================================
   ORDER HISTORY TABLE
========================================================= */

.history-orders {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e8eadf;
    border-radius: 14px;
    overflow: hidden;
}


/* =========================================================
   TOP SEARCH
========================================================= */

.history-table-top {
    width: 100%;
    height: 58px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
    background: #ffffff;
    position: relative;
}

.history-search {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border: 1px solid #eceee7;
    border-radius: 16px;
    background: #ffffff;
}

.history-search-icon {
    margin-left: 12px;
    font-size: 28px;
    line-height: 1;
    color: #9a9d95;
    margin-top: -2px;
}

.history-search input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    padding: 0 10px;
    font-size: 15px;
    color: #333333;
    background: transparent;
}

.history-search input::placeholder {
    color: #a9aca4;
}


/* FILTER */

.history-filter-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6f7568;
    cursor: pointer;
    transition: all .25s ease;
    position: absolute;
    right: 19px;
}

.history-filter-btn:hover {
    border-color: #9bb65c;
    color: #718b36;
    background: #f8faF3;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.history-table-wrap {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   TABLE
========================================================= */

.history-table {
    width: 100% !important;

    table-layout: fixed !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    margin: 0 !important;
}


/* COLUMN WIDTHS */

.history-table th:nth-child(1),
.history-table td:nth-child(1) {
    width: 16%;
}

.history-table th:nth-child(2),
.history-table td:nth-child(2) {
    width: 30%;
}

.history-table th:nth-child(3),
.history-table td:nth-child(3) {
    width: 12%;
}

.history-table th:nth-child(4),
.history-table td:nth-child(4) {
    width: 16%;
}

.history-table th:nth-child(5),
.history-table td:nth-child(5) {
    width: 13%;
}

.history-table th:nth-child(6),
.history-table td:nth-child(6) {
    width: 13%;
}


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

.history-table thead th {
    height: 46px;
    padding: 0 18px !important;
    border: 0 !important;
    border-bottom: 0;
    background: #ffffff;
    color: #92968d;
    font-size: 14px;
    font-weight: 500 !important;
    text-align: left;
    white-space: nowrap;
}


/* =========================================================
   TABLE BODY
========================================================= */

.history-table tbody td {
    height: 62px;
    padding: 0 18px !important;
    border: 0 !important;
    border-bottom: 0;
    color: #464a43;
    font-size: 16px;
    vertical-align: middle;
    overflow: hidden;
}


/* ODD / EVEN */

.history-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.history-table tbody tr:nth-child(even) {
    background: #fbfcf8;
}


/* HOVER */

.history-table tbody tr {
    transition: background .25s ease;
}

.history-table tbody tr:hover {
    background: #f3f7ea;
}


/* LAST ROW */

.history-table tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* =========================================================
   ORDER ID
========================================================= */

.history-order-id {
    color: #30342e;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   PRODUCT
========================================================= */

.history-product {
    width: 100%;
    min-width: 0;
}

.history-product-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #292d27;
    font-weight: 500;
}


/* =========================================================
   AMOUNT
========================================================= */
.history-amount img{
    width: 15px;
}
.history-amount {
    color: #343830;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   DATE
========================================================= */
.history-date img{
    
width: 18px;
}
.history-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #000;
    white-space: nowrap;
}

.date-icon {
    color: #9ca29a;
    font-size: 12px;
}


/* =========================================================
   STATUS
========================================================= */

.history-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 25px;
    padding: 0 11px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}


/* PENDING */

.history-status-pending {
    color: #8464a9;
    background: #f2eaff;
}


/* DELIVERED */

.history-status-delivered {
    color: #4c9b62;
    background: #e8f8e9;
}


/* IN TRANSIT */

.history-status-transit {
    color: #5798c9;
    background: #e8f4ff;
}


/* CANCELLED */

.history-status-cancelled {
    color: #b35b5b;
    background: #fdecec;
}


/* =========================================================
   VIEW DETAILS
========================================================= */

.history-view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    white-space: nowrap;
    transition: color .25s ease;
}

.history-view:hover {
    color: #718d35;
}

.history-eye {
    position: relative;
    width: 15px;
    height: 11px;
    display: inline-block;
    border: 1.2px solid #737970;
    border-radius: 80% 20%;
    transform: rotate(
29deg);
    font-size: 0px;
}

.history-eye::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    top: 4px;
    left: 4px;
    background: #737970;
    border-radius: 50%;
}


/* =========================================================
   DATATABLES OVERRIDES
========================================================= */

.history-orders .dataTables_wrapper {
    width: 100%;
    padding: 0 !important;
}

.history-orders .dataTables_scroll {
    width: 100%;
}

.history-orders .dataTables_scrollBody {
    overflow-x: hidden !important;
    border: 0 !important;
}

.history-orders table.dataTable {
    width: 100% !important;
    margin: 0 !important;
}

.history-orders table.dataTable.no-footer {
    border-bottom: 0 !important;
}


/* REMOVE DEFAULT SORT ARROWS */

.history-orders table.dataTable thead th {
    background-image: none !important;
}


/* =========================================================
   DATATABLE FOOTER
========================================================= */

.history-orders .dataTables_info {
    padding: 16px 18px !important;

    color: #9a9e96;

    font-size: 10px;
}

.history-orders .dataTables_paginate {
    padding: 11px 18px !important;
}

.history-orders .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 28px;
    height: 28px;

    padding: 0 !important;
    margin: 0 2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    background: transparent !important;

    color: #777c72 !important;

    font-size: 11px;

    cursor: pointer;
}

.history-orders .dataTables_wrapper
.dataTables_paginate .paginate_button.current {
    background: #edf4df !important;
    color: #698531 !important;
    font-weight: 600;
}

.history-orders .dataTables_wrapper
.dataTables_paginate .paginate_button:hover {
    background: #f2f5ed !important;
    color: #698531 !important;
}


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

@media (max-width: 767px) {

    .history-table-top {
        height: 55px;
        padding: 9px 10px;
    }

    .history-search {
        width: calc(100% - 44px);
    }

    .history-filter-btn {
        width: 34px;
    }


    .history-table-wrap {
        overflow: visible;
    }


    .history-table,
    .history-table thead,
    .history-table tbody,
    .history-table tr,
    .history-table td {
        display: block;
        width: 100% !important;
    }


    .history-table thead {
        display: none;
    }


    .history-table tbody {
        padding: 10px;
    }


    .history-table tbody tr {
        margin-bottom: 10px;

        padding: 14px;

        border: 1px solid #ebeee5;
        border-radius: 10px;

        background: #ffffff !important;
    }


    .history-table tbody td {
        height: auto;

        min-height: 30px;

        padding: 7px 0 !important;

        border: 0 !important;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;

        text-align: right;
    }


    .history-table tbody td::before {
        content: attr(data-label);

        flex-shrink: 0;

        color: #999d95;

        font-size: 10px;
        font-weight: 500;

        text-align: left;
    }


    .history-product-name {
        max-width: 180px;
        text-align: right;
    }


    .history-view {
        margin-left: auto;
    }


    .history-orders .dataTables_info {
        padding: 12px !important;
    }

    .history-orders .dataTables_paginate {
        padding: 8px 12px !important;
    }

}
.history-view img{
    
width: 16px;
}div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: .5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: inherit !important;
    border: 1px solid #cadd59 !important;
    border-radius: 2px;
    background: #cadd5938 !important;
}.dt-paging {
    color: inherit;
    float: right;
}
div.dt-container .dt-info{
    display: none;
}
.shipping-form {
    float: left;
    width: 100%;
    /* border-top: solid 5px #ecfbe8; */
    /* padding-top: 20px; */
    /* margin-top: 10px; */
    padding-bottom: 30px;
}.enter-shipping {
    float: left;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    font-size: 19px !important;
    font-weight: 600;
    border-radius: 30px;
    color: #212121;
}.shipping-form form {
    float: left;
    width: 100%;
    /* margin-top: 15px; */
}.space {
    float: left;
    margin-top: 30px;
    padding-bottom: 12px;
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 25px;
}.radio-h1 {
    /* margin-right: 41px; */
    color: #000;
    font-size: 15px;
    font-weight: 600;
    float: left;
}.space [type="radio"]:checked, .space [type="radio"]:not(:checked) {
    position: absolute;
    display: none;
}.space [type="radio"]:checked + label, .space [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 37px;
    margin-right: 20px;
    cursor: pointer;
    line-height: 20px;
    font-weight: 500;
    top: 0px;
    font-size: 15px;
    display: inline-block;
    color: #000;
    margin-bottom: 0px;
}.space [type="radio"]:checked + label:before, .space [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 30px;
    height: 30px;
    border: 1px solid #c0c0c0;
    border-radius: 100%;
    background: #fff;
}.titel-address {
    float: left;
    width: 100%;
    font-size: 15px;
    color: #000000;
    font-weight: 500;
    /* padding-top: 7px; */
}.text-danger {
    color: #dc3545 !important;
}.field-type {
    float: left;
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: solid 1px #dcdcdc;
    color: black;
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    outline: none;
    margin-top: 12px;
    margin-bottom: 39px;
    font-weight: 400;
}/* =========================================================
   ADD ADDRESS
========================================================= */

.add-address-form {
    display: none;
    width: 100%;
    margin-top: 20px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5eadc;
    border-radius: 14px;
    /* box-shadow: 0 8px 30px rgba(55, 70, 35, 0.05); */
    animation: addressFormShow .3s ease;
}

.add-address-form.show {
    display: block;
}

@keyframes addressFormShow {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

.address-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 18px;
    margin-bottom: 20px;

    border-bottom: 1px solid #eef0ea;
}

.address-form-header h3 {
    margin: 0 0 5px;
    color: #000000;
    font-size: 22px;
    font-weight: 600;
}

.address-form-header p {
    margin: 0;
    color: #969b91;
    font-size: 16px;
}

.address-form-close {
    width: 30px;
    height: 30px;

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

    border: 1px solid #e5e8df;
    border-radius: 50%;

    background: #ffffff;

    color: #74796f;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    transition: .25s ease;
}

.address-form-close:hover {
    color: #6e8937;
    border-color: #b9cd8d;
    background: #f7faef;
}


/* =========================================================
   ADDRESS TYPE
========================================================= */

.address-type {
    display: flex;
    align-items: center;
    gap: 25px;

    margin-bottom: 22px;
}

.address-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.address-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-custom {
    position: relative;

    width: 17px;
    height: 17px;

    border: 1px solid #cfd5c7;
    border-radius: 50%;

    background: #ffffff;

    transition: .2s ease;
}

.address-radio input:checked + .radio-custom {
    border-color: #78963c;
}

.address-radio input:checked + .radio-custom::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: 3px;
    left: 3px;

    border-radius: 50%;

    background: #78963c;
}


/* =========================================================
   FORM GRID
========================================================= */

.address-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
}


/* =========================================================
   FIELD
========================================================= */

.address-field {
    width: 100%;
}

.address-field-full {
    grid-column: 1 / 0;
}

.address-field label {
    display: block;
    margin-bottom: 7px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
}

.address-field input,
.address-field select,
.address-field textarea {

width: 100%;

border: 1px solid #e1e5dc;

border-radius: 8px;

background: #ffffff;

color: #3e433b;

font-family: inherit;

font-size: 16px;

outline: none;

transition: all .25s ease;
}

.address-field input,
.address-field select {
    height: 46px;
    padding: 0 13px;
}

.address-field textarea {
    min-height: 90px;

    padding: 12px 13px;

    resize: vertical;
}

.address-field input::placeholder,
.address-field textarea::placeholder {
    color: #b0b4ad;
}

.address-field select {
    cursor: pointer;

    color: #858a82;
}


/* FOCUS */

.address-field input:focus,
.address-field select:focus,
.address-field textarea:focus {
    border-color: #9ab85c;

    box-shadow: 0 0 0 3px rgba(154, 184, 92, .10);
}


/* =========================================================
   FORM BUTTONS
========================================================= */

.address-form-actions {

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid #eef0ea;
}

.address-cancel-btn,
.address-save-btn {

height: 40px;

padding: 0 20px;

border-radius: 7px;

font-family: inherit;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: all .25s ease;
}

.address-cancel-btn {
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
}

.address-cancel-btn:hover {
    color: #fff;
    background: #000000;
}

.address-save-btn {
    border: 1px solid #c8de59;
    background: #c8de59;
    color: #ffffff;
}

.address-save-btn:hover {
    background: #000000;
    border-color: #000000;
}


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

@media (max-width: 767px) {

    .add-address-form {
        padding: 18px;

        margin-top: 15px;

        border-radius: 11px;
    }

    .address-form-header h3 {
        font-size: 15px;
    }

    .address-form-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .address-field-full {
        grid-column: auto;
    }

    .address-type {
        gap: 20px;
    }

    .address-form-actions {
        justify-content: stretch;
    }

    .address-cancel-btn,
    .address-save-btn {
        flex: 1;
    }

}/* ==========================================
   PREMIUM PAYMENT HISTORY
========================================== */

.payment-list {
    width: 100%;

    border: 1px solid #e7eadf;
    border-radius: 14px;

    background: #ffffff;

    overflow: hidden;

    box-shadow: 0 6px 24px rgba(45, 60, 25, 0.035);
}


/* ==========================================
   PAYMENT ITEM
========================================== */

.payment-item {
    min-height: 78px;

    padding: 14px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #eef0ea;

    transition: all .25s ease;
}


.payment-item:nth-child(even) {
    background: #fbfcf8;
}


.payment-item:last-child {
    border-bottom: 0;
}


.payment-item:hover {
    background: #f4f8ec;
}


/* ==========================================
   LEFT SIDE
========================================== */

.payment-left {
    display: flex;
    align-items: center;
    gap: 13px;
}


/* ==========================================
   PAYMENT ICON
========================================== */

.payment-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf6e2;
    color: #719139;
    font-size: 13px;
    font-weight: 600;
    top: 8px;
    position: relative;
}


.payment-refund-icon {
    background: #fdf0f0;

    color: #b46161;
}


/* ==========================================
   PAYMENT INFO
========================================== */

.payment-info {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.payment-info strong {
    color: #001c30;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}


.payment-info span {
    color: #B7B7B7;
    font-size: 13px;
    line-height: 1.2;
}


/* ==========================================
   RIGHT SIDE
========================================== */

.payment-right {
    display: flex;
    align-items: center;

    gap: 18px;
}


.payment-right > strong {
    color: #353a31;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}


/* ==========================================
   STATUS
========================================== */

.payment-status {
    min-width: 72px;
    height: 25px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 500;

    white-space: nowrap;
}


.payment-success {
    color: #4d7f25;

    background: #eaf6df;
}


.payment-failed {
    color: #ad5b5b;

    background: #fbe9e9;
}


/* ==========================================
   STATUS DOT
========================================== */

.status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;
}


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

@media (max-width: 600px) {

    .payment-item {
        min-height: auto;

        padding: 15px;

        align-items: flex-start;
    }


    .payment-left {
        gap: 10px;
    }


    .payment-icon {
        width: 31px;
        height: 31px;

        font-size: 11px;
    }


    .payment-right {
        flex-direction: column;
        align-items: flex-end;

        gap: 6px;
    }


    .payment-right > strong {
        font-size: 11px;
    }


    .payment-status {
        min-width: 65px;
        height: 23px;

        font-size: 8px;
    }

}/* =========================================================
   ORDER DETAIL PAGE
========================================================= */

.order-detail-page {
    width: 100%;
    padding: 30px 0 50px;

    background: #f9faf7;
}

.order-detail-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
    padding: 0 20px;
}


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

.order-detail-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}

.order-detail-heading {
    min-width: 0;
}

.order-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    color: #71883d;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: .25s ease;
}

.order-back-btn span {
    font-size: 15px;
}

.order-back-btn:hover {
    color: #536b25;
}

.order-detail-heading h1 {
    margin: 0 0 6px;

    color: #30352d;

    font-size: 25px;
    font-weight: 600;
}

.order-detail-heading p {
    margin: 0;
    color: #969b92;
    font-size: 14px;
}

.order-detail-id {
    min-width: 180px;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 5px;
}

.order-detail-id span {
    color: #a0a49d;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.order-detail-id strong {
    color: #363b32;
    font-size: 15px;
    font-weight: 600;
}

.order-detail-id small {
    color: #999e95;
    font-size: 15px;
}


/* =========================================================
   STATUS CARD
========================================================= */

.order-status-card {
    width: 100%;

    margin-bottom: 20px;
    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid #e7eadf;
    border-radius: 14px;

    box-shadow: 0 6px 25px rgba(45, 60, 25, .035);
}

.order-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}

.order-section-label {
    display: block;
    margin-bottom: 6px;
    color: #a0a59c;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.order-status-header h3,
.order-card-header h3 {
    margin: 0;
    color: #343930;
    font-size: 16px;
    font-weight: 600;
}

.order-main-status {
    padding: 7px 13px;
    border-radius: 20px;
    color: #5c7e2d;
    background: #edf6e2;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}


/* =========================================================
   ORDER PROGRESS
========================================================= */

.order-progress {
    width: 100%;

    display: flex;
    align-items: flex-start;
}

.order-step {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 auto;

    text-align: center;
}

.step-circle {
    width: 28px;
    height: 28px;

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

    border: 1px solid #dfe4d8;
    border-radius: 50%;

    background: #ffffff;

    color: #a4a9a0;

    font-size: 9px;
    font-weight: 500;

    z-index: 2;
}

.order-step.completed .step-circle {
    border-color: #7e9d42;

    background: #7e9d42;

    color: #ffffff;
}

.order-step.active .step-circle {
    border-color: #7e9d42;

    background: #ffffff;

    color: #6f8e35;

    box-shadow: 0 0 0 4px #edf5e3;
}

.step-info {
    margin-top: 9px;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.step-info strong {
    color: #565c51;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.step-info span {
    color: #a2a69f;
    font-size: 12px;
    white-space: nowrap;
}

.step-line {
    height: 1px;

    flex: 1;

    margin-top: 14px;

    background: #e4e7df;
}

.step-line.completed-line {
    background: #9db86a;
}


/* =========================================================
   MAIN GRID
========================================================= */

.order-detail-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);

    gap: 20px;

    align-items: start;
}

.order-detail-main,
.order-detail-sidebar {
    display: flex;
    flex-direction: column;

    gap: 20px;

    min-width: 0;
}


/* =========================================================
   CARD
========================================================= */

.order-detail-card {
    width: 100%;

    background: #ffffff;

    border: 1px solid #e7eadf;
    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 6px 25px rgba(45, 60, 25, .03);
}

.order-card-header {
    min-height: 67px;

    padding: 16px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #eef0ea;
}

.order-item-count {
    color: #969b92;
    font-size: 16px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.order-product {
    min-height: 90px;

    padding: 14px 20px;

    display: grid;

    grid-template-columns: 62px minmax(0, 1fr) auto;

    align-items: center;

    gap: 15px;

    border-bottom: 1px solid #f0f1ed;

    transition: .25s ease;
}

.order-product:nth-child(even) {
    background: #fbfcf8;
}

.order-product:last-child {
    border-bottom: 0;
}

.order-product:hover {
    background: #f5f8ef;
}

.order-product-image {
    width: 62px;
    height: 62px;

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

    overflow: hidden;

    border: 1px solid #edf0e9;
    border-radius: 9px;

    background: #f8f9f5;
}

.order-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.order-product-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.order-product-info h4 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3d4239;
    font-size: 15px;
    font-weight: 600;
}

.order-product-info p {
    margin: 0;
    color: #999e95;
    font-size: 15px;
}

.order-product-info span {
    color: #7d8378;
    font-size: 12px;
}
.order-product-price img{
    width:15px;
    position: relative;
    top: 2px;
}
.order-product-price {
    color: #343930;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   PRICE SUMMARY
========================================================= */

.order-price-list {
    padding: 17px 20px 5px;
}

.order-price-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 0;
}

.order-price-list span {
    color: #8d9389;
    font-size: 16px;
}
.order-price-list strong img{
    width:15px;
}
.order-price-list strong {
    color: #4b5147;
    font-size: 16px;
    font-weight: 500;
}

.order-price-list .order-discount {
    color: #6d9135;
}

.order-total {
    margin: 8px 20px 18px;
    padding-top: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #e9ece4;
}

.order-total span {
    color: #3d4339;
    font-size: 16px;
    font-weight: 600;
}

.order-total strong {
    color: #668531;

    font-size: 16px;
    font-weight: 600;
}
.order-total strong img{
    width:15px;
}

/* =========================================================
   SHIPPING ADDRESS
========================================================= */

.shipping-address {
    padding: 18px 20px 20px;
}

.shipping-address strong {
    display: block;
    margin-bottom: 9px;
    color: #000000;
    font-size: 15px;
    font-weight: 600;
}

.shipping-address p {
    margin: 0 0 10px;
    color: #5e5e5e;
    font-size: 15px;
    line-height: 1.7;
}

.shipping-address > span {
    color: #6d7468;
    font-size: 13px;
}


/* =========================================================
   PAYMENT METHOD
========================================================= */

.payment-method-box {
    margin: 17px 20px 20px;

    padding: 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid #edf0e8;
    border-radius: 9px;

    background: #fafbf8;
}
.payment-method-icon img{
    width:20px;
}
.payment-method-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

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

    border-radius: 8px;

    background: #edf5e1;

    color: #6f8d38;

    font-size: 13px;
}

.payment-method-box > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.payment-method-box strong {
    color: #484e44;
    font-size: 16px;
    font-weight: 600;
}

.payment-method-box span {
    color: #9ca198;
    font-size: 14px;
}


/* =========================================================
   ORDER INFORMATION
========================================================= */

.order-information {
    padding: 8px 20px 17px;
}

.order-information > div {
    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-bottom: 1px solid #f0f1ed;
}

.order-information > div:last-child {
    border-bottom: 0;
}

.order-information span {
    color: #969b92;
    font-size: 15px;
}

.order-information strong {
    color: #4b5147;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
}

.order-information .payment-paid {
    color: #639033;
}


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

@media (max-width: 900px) {

    .order-detail-grid {
        grid-template-columns: 1fr;
    }

    .order-detail-sidebar {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        align-items: start;
    }

}


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

@media (max-width: 600px) {

    .order-detail-page {
        padding: 20px 0 35px;
    }

    .order-detail-container {
        padding: 0 12px;
    }


    /* HEADER */

    .order-detail-top {
        display: block;

        margin-bottom: 17px;
    }

    .order-detail-heading h1 {
        font-size: 21px;
    }

    .order-detail-heading p {
        line-height: 1.5;
    }

    .order-detail-id {
        margin-top: 15px;

        align-items: flex-start;

        padding: 12px;

        border: 1px solid #e7eadf;
        border-radius: 9px;

        background: #ffffff;
    }


    /* STATUS */

    .order-status-card {
        padding: 17px 15px;
    }

    .order-status-header {
        align-items: flex-start;

        margin-bottom: 23px;
    }

    .order-status-header h3 {
        font-size: 12px;
    }


    /* PROGRESS */

    .order-progress {
        display: block;
    }

    .order-step {
        width: 100%;

        flex-direction: row;
        align-items: center;

        gap: 11px;

        text-align: left;
    }

    .step-info {
        margin-top: 0;

        align-items: flex-start;
    }

    .step-line {
        width: 1px;
        height: 25px;

        flex: none;

        margin: 0 0 0 14px;
    }


    /* GRID */

    .order-detail-sidebar {
        display: flex;
    }


    /* CARD */

    .order-card-header {
        min-height: 60px;

        padding: 14px 15px;
    }


    /* PRODUCTS */

    .order-product {
        min-height: 78px;

        padding: 11px 15px;

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

        gap: 11px;
    }

    .order-product-image {
        width: 52px;
        height: 52px;
    }

    .order-product-info h4 {
        font-size: 10px;
    }

    .order-product-price {
        grid-column: 2;

        margin-top: -4px;

        font-size: 10px;
    }


    /* PRICE */

    .order-price-list {
        padding-left: 15px;
        padding-right: 15px;
    }

    .order-total {
        margin-left: 15px;
        margin-right: 15px;
    }


    /* SIDEBAR */

    .shipping-address {
        padding-left: 15px;
        padding-right: 15px;
    }

    .payment-method-box {
        margin-left: 15px;
        margin-right: 15px;
    }

    .order-information {
        padding-left: 15px;
        padding-right: 15px;
    }

}/* =========================================================
   RETURN REQUEST PAGE
========================================================= */

.return-request-page {
    width: 100%;
    padding: 35px 2%;
    background: #f9faf7;
}

.return-request-container {
    width: 100%;
    /* max-width: 1150px; */
    margin: auto;
    padding: 0 20px;
}


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

.return-page-header {
    margin-bottom: 22px;
}

.return-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 13px;

    color: #71883d;

    font-size: 10px;
    font-weight: 500;

    text-decoration: none;
}

.return-page-header h1 {
    margin: 0 0 6px;
    color: #000000;
    font-size: 25px;
    font-weight: 600;
}

.return-page-header p {
    max-width: 580px;
    margin: 0;
    color: #202020;
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.return-order-summary {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-bottom: 20px;

    background: #ffffff;

    border: 1px solid #e7eadf;
    border-radius: 12px;

    overflow: hidden;
}

.return-order-summary > div {
    min-height: 70px;

    padding: 15px 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    border-right: 1px solid #eef0ea;
}

.return-order-summary > div:last-child {
    border-right: 0;
}

.return-order-summary span {
    color: #a0a59c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
}

.return-order-summary strong {
    color: #41463d;
    font-size: 15px;
    font-weight: 600;
}


/* =========================================================
   MAIN GRID
========================================================= */

.return-request-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);

    gap: 20px;

    align-items: start;
}


/* =========================================================
   FORM CARD
========================================================= */

.return-form-card {
    background: #ffffff;

    border: 1px solid #e7eadf;
    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 6px 25px rgba(45, 60, 25, .035);
}

.return-card-heading {
    padding: 20px;

    border-bottom: 1px solid #eef0ea;
}

.return-card-heading > span {
    display: block;
    margin-bottom: 6px;
    color: #a0a59c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.return-card-heading h3 {
    margin: 0;
    color: #343930;
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   PRODUCT
========================================================= */

.return-product-box {
    margin: 20px;

    padding: 12px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 1px solid #e9ece4;
    border-radius: 9px;

    background: #fbfcf9;
}

.return-product-image {
    width: 60px;
    height: 60px;

    flex-shrink: 0;

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

    border: 1px solid #e8ebe4;
    border-radius: 8px;

    background: #ffffff;

    overflow: hidden;
}

.return-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.return-product-info {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.return-product-info strong {
    overflow: hidden;
    color: #41463d;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.return-product-info span,
.return-product-info small {
    color: #969b92;
    font-size: 13px;
}

.return-product-info small {
    color: #6e8838;
    font-weight: 600;
}


/* =========================================================
   CHECKBOX
========================================================= */

.return-checkbox {
    position: relative;

    width: 19px;
    height: 19px;

    flex-shrink: 0;

    cursor: pointer;
}

.return-checkbox input {
    position: absolute;

    opacity: 0;
}

.return-checkbox span {
    position: absolute;

    inset: 0;

    border: 1px solid #d5dacd;
    border-radius: 5px;

    background: #ffffff;
}

.return-checkbox input:checked + span {
    border-color: #7e9d42;

    background: #7e9d42;
}

.return-checkbox input:checked + span::after {
    content: "✓";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -52%);

    color: #ffffff;

    font-size: 10px;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.return-field {
    margin: 0 20px 19px;
}

.return-field label {
    display: block;
    margin-bottom: 7px;
    color: #555b51;
    font-size: 15px;
    font-weight: 500;
}

.return-field label span {
    color: #a4a89f;

    font-weight: 400;
}

.return-field select,
.return-field textarea {
    width: 100%;
    border: 1px solid #e0e4db;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #4a5045;
    font-family: inherit;
    font-size: 15px;
    transition: .25s ease;
}

.return-field select {
    height: 42px;

    padding: 0 12px;

    cursor: pointer;
}

.return-field textarea {
    min-height: 100px;

    padding: 12px;

    resize: vertical;
}

.return-field select:focus,
.return-field textarea:focus {
    border-color: #9bb75e;

    box-shadow: 0 0 0 3px rgba(155,183,94,.10);
}


/* =========================================================
   UPLOAD
========================================================= */

.return-upload {
    width: 100%;

    min-height: 105px;

    display: flex !important;
    flex-direction: column;

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

    gap: 5px;

    border: 1px dashed #d7decc;
    border-radius: 9px;

    background: #fbfcf9;

    cursor: pointer;

    transition: .25s ease;
}

.return-upload:hover {
    border-color: #9bb75e;

    background: #f7faef;
}

.return-upload input {
    display: none;
}

.upload-icon {
    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background: #edf4e1;

    color: #718c39;

    font-size: 16px;
}

.return-upload strong {
    color: #60665b;

    font-size: 10px;
    font-weight: 500;
}

.return-upload small {
    color: #a1a69e;

    font-size: 8px;
}


/* =========================================================
   RESOLUTION
========================================================= */

.resolution-options {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
}

.resolution-option {
    position: relative;

    min-height: 60px;

    margin: 0 !important;
    padding: 11px 12px;

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

    gap: 9px;

    border: 1px solid #e2e6dd;
    border-radius: 8px;

    cursor: pointer;

    transition: .25s ease;
}

.resolution-option:hover {
    border-color: #b9cb96;

    background: #fafcf7;
}

.resolution-option input {
    position: absolute;

    opacity: 0;
}

.resolution-radio {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    border: 1px solid #cbd1c4;
    border-radius: 50%;
}

.resolution-option input:checked + .resolution-radio {
    border-color: #7e9d42;
}

.resolution-option input:checked + .resolution-radio::after {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    margin: 3px;

    border-radius: 50%;

    background: #7e9d42;
}

.resolution-option div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.resolution-option strong {
    color: #555b50;
    font-size: 15px;
}

.resolution-option small {
    color: #9ca198;
    font-size: 13px;
    font-weight: 400;
}


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

.return-form-actions {
    margin-top: 25px;
    padding: 17px 20px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    border-top: 1px solid #eef0ea;
}

.return-cancel,
.return-submit {
    height: 46px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: .25s ease;
}

.return-cancel {
    border: 1px solid #000000;
    background: #0c0c0c;
    color: #ffffff;
}

.return-cancel:hover {
    background: #c8dd59;
    border-color: #c8dd59;
}

.return-submit {
    gap: 10px;
    border: 1px solid #c8dd59;
    background: #c8dd59;
    color: #ffffff;
}

.return-submit:hover {
    background: #000000;
    border-color: #000000;
}

.return-submit span {
    font-size: 14px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.return-sidebar {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.return-info-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid #e7eadf;
    border-radius: 14px;

    box-shadow: 0 6px 25px rgba(45, 60, 25, .03);
}

.return-info-icon {
    width: 36px;
    height: 36px;

    margin-bottom: 17px;

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

    border-radius: 9px;

    background: #edf5e1;

    color: #718c39;

    font-size: 17px;
}

.return-label {
    display: block;
    margin-bottom: 6px;
    color: #a0a59c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.return-info-card h3 {
    margin: 0 0 15px;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
}

.return-info-card ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.return-info-card li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 15px;
    color: #858b81;
    font-size: 14px;
    line-height: 1.55;
}

.return-info-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #78963c;

    font-size: 9px;
}

.return-info-card p {
    margin: 0 0 15px;
    color: #858b81;
    font-size: 14px;
    line-height: 1.6;
}

.return-info-card > a {
    color: #718b38;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}


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

@media (max-width: 850px) {

    .return-request-grid {
        grid-template-columns: 1fr;
    }

    .return-sidebar {
        display: grid;

        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 600px) {

    .return-request-page {
        padding: 20px 0 35px;
    }

    .return-request-container {
        padding: 0 12px;
    }


    .return-page-header h1 {
        font-size: 21px;
    }


    /* SUMMARY */

    .return-order-summary {
        grid-template-columns: 1fr;
    }

    .return-order-summary > div {
        min-height: 55px;

        border-right: 0;
        border-bottom: 1px solid #eef0ea;
    }

    .return-order-summary > div:last-child {
        border-bottom: 0;
    }


    /* SIDEBAR */

    .return-sidebar {
        display: flex;
    }


    /* PRODUCT */

    .return-product-box {
        margin: 15px;
    }


    /* FORM */

    .return-field {
        margin-left: 15px;
        margin-right: 15px;
    }


    .resolution-options {
        grid-template-columns: 1fr;
    }


    .return-form-actions {
        padding: 14px 15px;

        flex-direction: column-reverse;
    }

    .return-cancel,
    .return-submit {
        width: 100%;
    }

}.return-request-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 45px;
    margin-top: 7px;
    padding: 1px 13px;
    border: 1px solid #d9e2c9;
    border-radius: 7px;
    background: #f8faF4;
    color: #6d8837;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all .25s ease;
}

.return-request-btn:hover {
    background: #edf4df;
    border-color: #b8ca91;

    color: #5e792d;
}


/* =========================================
   SLIDER
========================================= */

#slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#slider::-webkit-scrollbar {
    display: none;
}


/* =========================================
   DESKTOP - 4 CARDS
========================================= */

#slider > * {
    flex: 0 0 calc((100% - 60px) / 4);
}


/* =========================================
   TABLET - 3 CARDS
========================================= */

@media (max-width: 991px) {

    #slider {
        gap: 15px;
    }

    #slider > * {
        flex: 0 0 calc((100% - 30px) / 3);
    }

}


/* =========================================
   MOBILE - EXACTLY 2 CARDS
========================================= */

@media (max-width: 767px) {

    #slider {
        gap: 12px;
    }

    #slider > * {
        flex: 0 0 calc((100% - 12px) / 2) !important;
        width: calc((100% - 12px) / 2) !important;
        min-width: calc((100% - 12px) / 2) !important;
    }

}


/* ========================================= DEALS CAROUSEL ========================================= */
 .deals-carousel { width: 100%; overflow: hidden; } .deals-carousel-track { display: flex !important; flex-wrap: nowrap !important; gap: 20px; width: 100%; transition: transform 0.4s ease; } /* ========================================= DESKTOP 4 CARDS ========================================= */ .deals-carousel-track .deals-card { width: auto; min-width: 0; flex: 0 0 calc((100% - 60px) / 4) !important; } /* ========================================= TABLET 3 CARDS ========================================= */ @media (max-width: 991px) { .deals-carousel-track { gap: 15px; } .deals-carousel-track .deals-card { width: calc((100% - 30px) / 3) !important; min-width: calc((100% - 30px) / 3) !important; max-width: calc((100% - 30px) / 3) !important; flex: 0 0 calc((100% - 30px) / 3) !important; } } /* ========================================= MOBILE EXACTLY 2 CARDS ========================================= */ @media (max-width: 575px) { .deals-carousel { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .deals-carousel-track { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; } .deals-carousel-track .deals-card { box-sizing: border-box !important; width: calc(50% - 5px) !important; min-width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; flex: 0 0 calc(50% - 5px) !important; margin: 0 !important; } } /* ========================================= EXTRA SMALL MOBILE ========================================= */ @media (max-width: 360px) { .deals-carousel-track { gap: 8px !important; } .deals-carousel-track .deals-card { width: calc(50% - 4px) !important; min-width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; } }

/* =========================================
   SWIPER CONTAINER
========================================= */

.mySwiper,
.mySwiper2 {
    width: 100%;
    overflow: hidden;
}


/* =========================================
   SWIPER SLIDES
========================================= */

.mySwiper .swiper-slide,
.mySwiper2 .swiper-slide {
    box-sizing: border-box;
    height: auto;
}


/* =========================================
   MOBILE
   EXACTLY 2 SLIDES
========================================= */

@media(max-width:767px){
    .alam-cart-products-header{display:none;}
}


@media (max-width: 575px) {
    
    .btn-cart, .btn-buy{
        height: auto;
        width: auto;
        font-size: 15px;
    }
.best-seller-sec {
    width: 100%;
    padding: 50px 2% 0;
}.deals-carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 30px 2% 0;
    float: left;
}
    .mySwiper .swiper-slide,
    .mySwiper2 .swiper-slide {
        min-height: auto;
        width: 49% !important;
    }.product-image{
        height: auto;
    }.product-title {
    font-size: 16px;
    }.swipe-box{
        min-height:200px;
    }.swiper-wrapper{
        height: auto !important;
    }
.advertise1{
    padding-top: 30px !important;
    padding-bottom: 0;
}.marquee-item{
    font-size: 22px;
}
}
@media(min-width: 576px) and (max-width: 767px){
    .tabs-section {
    margin-top: 30px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    float: left;
    width: 100%;
}
        .links-section {
        flex-direction: row;
        width: 100%;
        float: left;
        display: inline;
        margin-top: 20px;
    }.logo-desc {
    /* flex: 1 1 337px; */
    max-width: 50%;
    float: left;
}.link-column {
    min-width: 50%;
    float: left;
}
}
@media(min-width: 768px) and (max-width: 991px){
    .deals-add-cart, .deals-buy-now {
    flex: 1;
    height: 42px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    text-align: center;
    padding: 12px;
}    .image-carousel-item img {
        left: 25%;
        height: 240px;
        position: absolute;
        top: -95px;
        width: 100px;
    }.image-carousel-item {
        flex: 0 0 calc((100% - 32px) / 3.2);
        position: relative;
    }
        .links-section {
        flex-direction: row;
        display: inline;
        width: 100%;
        float: left;
        margin-top: 20px;
    }.link-column {
    min-width: 50%;
    float: left;
}.logo-desc {
    /* flex: 1 1 337px; */
    max-width: 100%;
}
}
@media(min-width: 992px) and (max-width: 1024px){
       .links-section {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        width: 70%;
    }.deals-add-cart, .deals-buy-now {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    text-align: center;
    padding: 12px;
}.atw-footer-main {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0px 20px 30px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.5fr;
    align-items: center;
    gap: 10px;
}.link-column {
    min-width: 162px;
}
}@media(min-width: 1025px) and (max-width: 1199px){
    .links-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 70%;
}.deals-add-cart, .deals-buy-now {
    flex: 1;
    height: 45px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    text-align: center;
    padding: 12px 0;
}.card2 {
    background-color: #ffffff;
    border-radius: 8px;
    width: 21%;
    padding: 20px;
    /* text-align: center; */
    border: 1px solid #A8A8A8;
    margin-bottom: 15px;
    position: relative;
}
}
/* ========================================= UAE DELIVERY CHECK ========================================= */ .uae-delivery-check {width: 100%;display: flex;gap: 18px;padding: 22px;margin-top: 0;border: 1px solid #e7e7e7;border-radius: 12px;background: #fff;box-sizing: border-box;} /* ========================================= ICON ========================================= */ .uae-delivery-icon { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f7f7f7; } .uae-delivery-icon img { width: 21px; height: 21px; object-fit: contain; } /* ========================================= CONTENT ========================================= */ .uae-delivery-content { flex: 1; min-width: 0; } .uae-delivery-content h4 {margin: 0 0 5px;font-size: 17px;line-height: 1.4;font-weight: 600;color: #000000;} .uae-delivery-content p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #777; } /* ========================================= FORM ========================================= */ .uae-delivery-form { display: flex; align-items: flex-end; gap: 12px; } /* ========================================= FIELD ========================================= */ .uae-field { flex: 1; min-width: 0; } .uae-field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 500; color: #444; } .uae-field input, .uae-field select {width: 100%;height: 46px;padding: 0 13px;border: 1px solid #dedede;border-radius: 6px;background: #fff;font-family: inherit;font-size: 15px;color: #333;appearance: none;-webkit-appearance: none;-moz-appearance: none;outline: none;box-sizing: border-box;transition: border-color .25s ease, box-shadow .25s ease;} .uae-field input:focus, .uae-field select:focus { border-color: #222; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04); } .uae-field input::placeholder { color: #aaa; } /* ========================================= BUTTON ========================================= */ .uae-check-btn {height: 46px;padding: 0 22px;border: 0;border-radius: 6px;background: #000;color: #fff;font-family: inherit;font-size: 16px;font-weight: 500;white-space: nowrap;cursor: pointer;transition: background .25s ease, transform .25s ease;} .uae-check-btn:hover {background: #cadd5a;} /* ========================================= RESULT ========================================= */ .uae-delivery-result { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5; } .uae-delivery-result.success { display: block; background: #f1f8f2; border: 1px solid #d7ead9; color: #287238; } .uae-delivery-result.error { display: block; background: #fff5f5; border: 1px solid #f0d5d5; color: #a33a3a; } /* ========================================= TABLET ========================================= */ @media (max-width: 768px) { .uae-delivery-check { padding: 18px; gap: 14px; } .uae-delivery-form { flex-wrap: wrap; } .uae-field { flex: 1 1 calc(50% - 6px); } .uae-check-btn { width: 100%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 575px) { .uae-delivery-check { padding: 16px; display: block; } .uae-delivery-icon { margin-bottom: 13px; } .uae-delivery-content h4 { font-size: 16px; } .uae-delivery-content p { font-size: 12px; margin-bottom: 15px; } .uae-delivery-form { display: block; } .uae-field { width: 100%; margin-bottom: 12px; } .uae-field input, .uae-field select, .uae-check-btn { height: 44px; } .uae-check-btn { width: 100%; } }

.uae-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 31px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;

    /* 5px from right border */
    background-position: right 14px center;
    background-size: 10px 6px;
    background-position: right 6px center;
}
        .return-detail-page {
            width: 100%;
            padding: 45px 20px 70px;
        }

        .return-detail-container {
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
        }


        /* =====================================================
           BREADCRUMB
        ===================================================== */

        .return-breadcrumb {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 25px;
            font-size: 13px;
            color: #777;
        }

        .return-breadcrumb a {
            color: #777;
            transition: 0.3s ease;
        }

        .return-breadcrumb a:hover {
            color: #111;
        }

        .return-breadcrumb span {
            color: #b5b5b5;
        }

        .return-breadcrumb strong {
            color: #222;
            font-weight: 600;
        }


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

        .return-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 25px;
            margin-bottom: 30px;
        }

        .return-header-left h1 {
            font-size: 32px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: -0.6px;
            margin-bottom: 9px;
        }

        .return-header-left p {
            color: #777;
            font-size: 14px;
            line-height: 1.6;
        }

        .return-header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .return-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 15px;
            border-radius: 30px;
            background: #fff5df;
            color: #a86b00;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .return-status-dot {
            width: 7px;
            height: 7px;
            background: #d99a22;
            border-radius: 50%;
        }

        .return-back-btn {
            height: 40px;
            padding: 9px 17px;
            border: 1px solid #dedede;
            background: #fff;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            color: #222;
            cursor: pointer;
            transition: 0.3s ease;
        }

        .return-back-btn:hover {
            background: #000000;
            color: #fff;
            border-color: #000000;
        }


        /* =====================================================
           SUMMARY BOX
        ===================================================== */

        .return-summary {
            background: #3d402a;
            color: #fff;
            border-radius: 14px;
            padding: 25px 28px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 25px;
        }

        .return-summary-item {
            padding-right: 20px;
            border-right: 1px solid rgba(255,255,255,0.13);
        }

        .return-summary-item:last-child {
            border-right: 0;
        }

        .return-summary-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #a9a9a9;
            margin-bottom: 8px;
        }

        .return-summary-value {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
        }


        /* =====================================================
           MAIN GRID
        ===================================================== */

        .return-main-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr);
            gap: 25px;
            align-items: start;
        }


        /* =====================================================
           COMMON CARD
        ===================================================== */

        .return-card {
            background: #fff;
            border: 1px solid #e9e9e9;
            border-radius: 14px;
            padding: 25px;
            margin-bottom: 25px;
        }

        .return-card:last-child {
            margin-bottom: 0;
        }

        .return-card-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 22px;
            padding-bottom: 16px;
            border-bottom: 1px solid #eeeeee;
        }

        .return-card-title h2 {
            font-size: 17px;
            font-weight: 700;
            color: #171717;
        }

        .return-card-title span {
            font-size: 14px;
            color: #888;
        }


        /* =====================================================
           PRODUCT
        ===================================================== */

        .return-product {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .return-product-image {
            width: 105px;
            height: 105px;
            background: #f7f7f7;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
        }

        .return-product-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 8px;
        }

        .return-product-info {
            flex: 1;
        }

        .return-product-info h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 7px;
            color: #1b1b1b;
        }

        .return-product-info p {
            font-size: 14px;
            color: #777;
            line-height: 100%;
        }
.return-product-price img{
    
width: 15px;
}
        .return-product-price {
            text-align: right;
            flex-shrink: 0;
        }

        .return-product-price strong {
            display: block;
            font-size: 17px;
            font-weight: 700;
            color: #000000;
        }

        .return-product-price span {
            display: block;
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }


        /* =====================================================
           RETURN REASON
        ===================================================== */

        .return-reason-box {
            background: #fafafa;
            border: 1px solid #ededed;
            border-radius: 10px;
            padding: 17px 18px;
        }

        .return-reason-label {
            font-size: 11px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 7px;
        }

        .return-reason-text {
            font-size: 14px;
            color: #292929;
            line-height: 1.6;
        }


        /* =====================================================
           REFUND DETAILS
        ===================================================== */

        .refund-table {
            width: 100%;
        }

        .refund-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 11px 0;
            font-size: 15px;
            color: #666;
        }

        .refund-row strong {
            color: #222;
            font-weight: 600;
        }

        .refund-row.total {
            border-top: 1px solid #e8e8e8;
            margin-top: 7px;
            padding-top: 17px;
            font-size: 14px;
            color: #222;
        }

        .refund-row.total strong {
            font-size: 18px;
        }

        .refund-method {
            margin-top: 17px;
            padding: 13px 15px;
            background: #f7f7f7;
            border-radius: 8px;
            font-size: 14px;
            color: #666;
        }

        .refund-method strong {
            color: #222;
        }


        /* =====================================================
           TIMELINE
        ===================================================== */

        .return-timeline {
            position: relative;
            padding-left: 5px;
        }

        .timeline-item {
            position: relative;
            display: flex;
            gap: 16px;
            padding-bottom: 27px;
        }

        .timeline-item:last-child {
            padding-bottom: 0;
        }

        .timeline-left {
            width: 22px;
            flex-shrink: 0;
            position: relative;
        }

        .timeline-dot {
            position: relative;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #d4d4d4;
            border: 3px solid #fff;
            box-shadow: 0 0 0 1px #d4d4d4;
            z-index: 2;
            margin-top: 2px;
        }

        .timeline-item.completed .timeline-dot {
            background: #111;
            box-shadow: 0 0 0 1px #111;
        }

        .timeline-item.current .timeline-dot {
            background: #d89a21;
            box-shadow: 0 0 0 1px #d89a21;
            animation: 1.5s infinite pulse2;
        }

        .timeline-item:not(:last-child) .timeline-left:after {
            content: "";
            position: absolute;
            left: 6px;
            top: 15px;
            width: 1px;
            height: calc(100% - 3px);
            background: #ddd;
        }

        .timeline-item.completed:not(:last-child) .timeline-left:after {
            background: #222;
        }

        .timeline-content {
            flex: 1;
        }

        .timeline-content h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            color: #222;
        }

        .timeline-content p {
            font-size: 15px;
            color: #888;
            line-height: 1.6;
        }

        .timeline-date {
            font-size: 11px;
            color: #aaa;
            margin-top: 5px;
        }


        /* =====================================================
           ADDRESS
        ===================================================== */

        .address-content {
            font-size: 14px;
            line-height: 1.8;
            color: #666;
        }

        .address-content strong {
            display: block;
            color: #222;
            font-size: 14px;
            margin-bottom: 3px;
        }


        /* =====================================================
           PICKUP DETAILS
        ===================================================== */

        .pickup-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .pickup-item {
            background: #fafafa;
            border: 1px solid #eeeeee;
            border-radius: 9px;
            padding: 13px;
        }

        .pickup-item label {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #999;
            margin-bottom: 5px;
        }

        .pickup-item strong {
            display: block;
            font-size: 15px;
            color: #222;
        }


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

        .return-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .return-action-btn {
            flex: 1;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #ddd;
            background: #fff;
            color: #222;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: .3s ease;
        }

        .return-action-btn:hover {
            border-color: #111;
            background: #111;
            color: #fff;
        }

        .return-action-btn.primary {
            background: #111;
            border-color: #111;
            color: #fff;
        }

        .return-action-btn.primary:hover {
            background: #333;
            border-color: #333;
        }


        /* =====================================================
           SUPPORT BOX
        ===================================================== */

        .return-support {
            background: #f5f5f5;
            border-radius: 12px;
            padding: 20px;
        }

        .return-support h3 {
            font-size: 17px;
            margin-bottom: 7px;
        }

        .return-support p {
            font-size: 14px;
            line-height: 1.6;
            color: #777;
            margin-bottom: 14px;
        }

        .return-support a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            padding: 0 15px;
            background: #000000;
            color: #fff;
            border-radius: 7px;
            font-size: 15px;
            font-weight: 600;
        }


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

        @media (max-width: 991px) {

            .return-main-grid {
                grid-template-columns: 1fr;
            }

            .return-summary {
                grid-template-columns: repeat(2, 1fr);
            }

            .return-summary-item:nth-child(2) {
                border-right: 0;
            }

            .return-summary-item:nth-child(3),
            .return-summary-item:nth-child(4) {
                border-top: 1px solid rgba(255,255,255,0.13);
                padding-top: 18px;
            }

        }


        @media (max-width: 767px) {

            .return-detail-page {
                padding: 25px 14px 50px;
            }

            .return-detail-header {
                flex-direction: column;
                gap: 15px;
            }

            .return-header-right {
                width: 100%;
                justify-content: space-between;
            }

            .return-header-left h1 {
                font-size: 26px;
            }

            .return-summary {
                padding: 20px;
                gap: 15px;
            }

            .return-card {
                padding: 20px;
            }

            .return-product {
                align-items: flex-start;
            }

            .return-product-image {
                width: 82px;
                height: 82px;
            }

            .return-product {
                flex-wrap: wrap;
            }

            .return-product-price {
                width: 100%;
                text-align: left;
                padding-left: 102px;
                margin-top: -12px;
            }

        }


        @media (max-width: 575px) {

            .return-breadcrumb {
                font-size: 11px;
                margin-bottom: 18px;
            }

            .return-header-left h1 {
                font-size: 23px;
            }

            .return-header-left p {
                font-size: 12px;
            }

            .return-header-right {
                flex-wrap: wrap;
            }

            .return-back-btn {
                flex: 1;
            }

            .return-status {
                flex: 1;
                justify-content: center;
            }

            .return-summary {
                grid-template-columns: 1fr 1fr;
                padding: 17px;
                border-radius: 11px;
            }

            .return-summary-item {
                padding-right: 10px;
            }

            .return-summary-label {
                font-size: 9px;
            }

            .return-summary-value {
                font-size: 12px;
            }

            .return-summary-item:nth-child(odd) {
                border-right: 1px solid rgba(255,255,255,0.13);
            }

            .return-summary-item:nth-child(even) {
                border-right: 0;
            }

            .return-card {
                padding: 17px;
                border-radius: 11px;
                margin-bottom: 17px;
            }

            .return-card-title h2 {
                font-size: 15px;
            }

            .return-product-info h3 {
                font-size: 14px;
            }

            .return-product-info p {
                font-size: 11px;
            }

            .return-product-price {
                padding-left: 102px;
            }

            .pickup-info {
                grid-template-columns: 1fr;
            }

            .return-actions {
                flex-direction: column;
            }

            .return-action-btn {
                width: 100%;
            }

        }
        /* =========================================
   ALAM AL TAWASUL FAQ
========================================= */

.aat-faq-list {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 70px 2%;
}


/* FAQ ITEM */

.aat-faq-item {
    width: 100%;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}


/* REMOVE DEFAULT ARROW */

.aat-faq-question {
    list-style: none;
}

.aat-faq-question::-webkit-details-marker {
    display: none;
}

.aat-faq-question::marker {
    display: none;
}


/* QUESTION */

.aat-faq-question {
    width: 100%;
    min-height: 64px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #1a1a1a;
    background: #ffffff;
    user-select: none;
}


/* ICON */

.aat-faq-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

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

    border: 1px solid #d9d9d9;
    border-radius: 50%;

    font-size: 17px;
    font-weight: 400;
    line-height: 1;

    color: #555;
    background: #ffffff;

    transition: all 0.25s ease;
}


/* OPEN STATE */

.aat-faq-item[open] {
    border-color: #d1d1d1;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

.aat-faq-item[open] .aat-faq-icon {
    color: #ffffff;
    background: #111111;
    border-color: #111111;
    font-size: 0;
}

.aat-faq-item[open] .aat-faq-icon::after {
    content: "-";
    font-size: 17px;
}


/* ANSWER */

.aat-faq-answer {
    padding: 0 55px 20px 20px;
    background: #ffffff;
}

.aat-faq-answer p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #000000;
    text-align: left !important;
    padding: 0 !important;
}


/* MOBILE */

@media (max-width: 575px) {

    .aat-faq-item {
        margin-bottom: 9px;
        border-radius: 8px;
    }

    .aat-faq-question {
        min-height: 57px;
        padding: 15px;

        font-size: 12px;
        line-height: 1.5;
    }

    .aat-faq-icon {
        width: 23px;
        height: 23px;
        min-width: 23px;

        font-size: 15px;
    }

    .aat-faq-item[open] .aat-faq-icon::after {
        font-size: 15px;
    }

    .aat-faq-answer {
        padding: 0 15px 17px;
    }

    .aat-faq-answer p {
        font-size: 11.5px;
        line-height: 1.75;
    }
}
.privacy-sec{

width: 100%;

padding: 60px 2%;
}
.privacy-sec h2{

font-size: 36px;

font-weight: 600;

color: #18361E;

margin-bottom: 25px;

text-align: left;
}
.privacy-sec h2 span{

color: #C9DD58;
}
.privacy-sec p{
    
font-size: 16px;
    
color: #000;
    
line-height: 170%;
}
/* =========================================
   ALAM AL TAWASUL - PREMIUM PRELOADER
========================================= */

.aat-preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;

    background: #ffffff;

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

    z-index: 999999;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


/* PRELOADER HIDDEN */

.aat-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* INNER */

.aat-preloader-inner {
    width: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* LOGO */

.aat-preloader-logo {
    width: 150px;

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

    margin-bottom: 28px;

    animation: aatLogoPulse 1.8s ease-in-out infinite;
}

.aat-preloader-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* LOADING LINE */

.aat-preloader-line {
    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

    background: #eeeeee;
}


/* ANIMATED LINE */

.aat-preloader-line span {
    position: absolute;
    top: 0;
    left: -100%;

    width: 45%;
    height: 100%;

    background: #111111;

    animation: aatLoadingLine 1.2s ease-in-out infinite;
}


/* LOGO ANIMATION */

@keyframes aatLogoPulse {

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

    50% {
        opacity: 1;
        transform: scale(1);
    }

}


/* LOADING ANIMATION */

@keyframes aatLoadingLine {

    0% {
        left: -45%;
    }

    100% {
        left: 100%;
    }

}


/* MOBILE */

@media (max-width: 575px) {

    .aat-preloader-inner {
        width: 140px;
    }

    .aat-preloader-logo {
        width: 120px;
        margin-bottom: 23px;
    }

}

/* =========================================
   DELETE CONFIRMATION DRAWER
========================================= */

.alam-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.alam-delete-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* DRAWER */

.alam-delete-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 99999;
    padding: 45px 35px 35px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12); */
}

.alam-delete-drawer.active {
    transform: translateX(0);
}


/* CLOSE */

.alam-delete-close {
    position: absolute;
    top: 20px;
    right: 22px;

    width: 38px;
    height: 38px;

    border: 0;
    background: transparent;

    font-size: 30px;
    line-height: 1;

    color: #222;
    cursor: pointer;
}


/* ICON */

.alam-delete-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    border-radius: 50%;
    margin-bottom: 3px;
}

.alam-delete-icon img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}


/* CONTENT */

.alam-delete-drawer h3 {
    margin: 0 0 10px;

    font-size: 24px;
    line-height: 32px;
    font-weight: 600;

    color: #111;
}

.alam-delete-drawer p {
    max-width: 300px;

    margin: 0;

    font-size: 14px;
    line-height: 23px;

    color: #777;
}


/* BUTTONS */

.alam-delete-actions {
    width: 100%;
    max-width: 300px;
    margin-top: 30px;
    display: flex;
    gap: 10px;
}

.alam-delete-actions button {
}


/* DELETE */

.alam-delete-confirm {
    border: 1px solid #000000;
    background: #000000;
    color: #fff;
    width: 50%;
    cursor: pointer;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
}

.alam-delete-confirm:hover {
    background: #cadc5c;
    border-color: #c8dc5a;
    color: #000;
}


/* CANCEL */

.alam-delete-cancel {
    border: 1px solid #e92e2e;
    background: #ffefef;
    color: #b10606;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    width: 50%;
    padding: 14px 0;
    border-radius: 10px;
}

.alam-delete-cancel:hover {
}


/* MOBILE */

@media (max-width: 575px) {

    .alam-delete-drawer {
        width: 100%;
        padding: 35px 25px;
    }

    .alam-delete-drawer h3 {
        font-size: 22px;
    }

    .alam-delete-actions {
        max-width: 100%;
    }

}
/********************************Email******************/
/* =========================================
   PREMIUM DELETE DRAWER
========================================= */

.alam-delete-drawer {
    overflow: hidden;
}


/* CONTENT */

.alam-delete-content {
    position: relative;
    z-index: 5;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ICON WRAPPER */

.alam-delete-icon-wrap {
    position: relative;

    width: 100px;
    height: 100px;

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

    margin-bottom: 24px;
}


/* OUTER RING */

.delete-icon-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid rgb(202 220 92);
    border-radius: 50%;
    animation: deleteRing 2.5s ease-in-out infinite;
}


/* ICON */

.alam-delete-icon {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cadc5c80;
    box-shadow: 0 10px 30px rgb(139 195 74 / 19%);
}

.alam-delete-icon img {
    width: 26px;
    height: 26px;
}


/* ANIMATION */

@keyframes deleteRing {

    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.3;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.8;
    }

}


/* SMALL ACCENT LINE */

.alam-delete-line {
    width: 35px;
    height: 2px;

    margin-bottom: 18px;

    background: #cadc5c;
}


/* TITLE */

.alam-delete-drawer h3 {
    margin: 0 0 12px;

    font-size: 25px;
    line-height: 32px;
    font-weight: 600;

    color: #111;
}


/* DESCRIPTION */

.alam-delete-drawer p {
    max-width: 300px;

    margin: 0;

    font-size: 14px;
    line-height: 23px;

    color: #777;
}


/* WARNING */

.alam-delete-warning {
    display: block;

    margin-top: 12px;

    font-size: 11px;
    letter-spacing: .2px;

    color: #a0a0a0;
}


/* BUTTONS */

.alam-delete-actions {
}


/* DELETE BUTTON */

.alam-delete-confirm {
    cursor: pointer;
    transition: all .25s ease;
}

.alam-delete-confirm:hover {
}


/* CANCEL */

.alam-delete-cancel {
}

.alam-delete-cancel:hover {
}


/* =========================================
   DECORATIVE BACKGROUND ELEMENTS
========================================= */

.delete-decoration {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}


/* LARGE SOFT CIRCLE */

.delete-decoration-1 {
    width: 280px;
    height: 280px;
    top: -100px;
    right: -130px;
    background: rgb(202 220 92 / 27%);
}


/* SMALL CIRCLE */

.delete-decoration-2 {
    width: 80px;
    height: 80px;

    bottom: 90px;
    left: -35px;

    border: 1px solid rgba(0, 0, 0, 0.04);
}


/* DOT */

.delete-decoration-3 {
    width: 7px;
    height: 7px;

    top: 30%;
    left: 35px;

    background: rgb(202 220 92);

    box-shadow:
        18px 25px 0 rgb(202 220 92 / 42%),
        35px -10px 0 rgb(202 220 92 / 46%);
}


/* MOBILE */

@media (max-width: 575px) {

    .alam-delete-drawer h3 {
        font-size: 22px;
    }

    .alam-delete-actions {
        max-width: 100%;
    }

}[data-aos="fire"] {
    opacity: 0;
    transform: scale(0.3) translateY(100px);
    filter: brightness(2) blur(1px);
    transition-property: transform, opacity, filter;
}
[data-aos="fire"].aos-animate {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: brightness(1) blur(0);
}
.aat-reviews-section {
    padding: 0;
    background: #ffffff;
}

.aat-reviews-container {
    /* width: 90%; */
    /* max-width: 1250px; */
    margin: 0 auto;
}


/* Header */

.aat-reviews-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 45px;
}

.aat-reviews-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777;
}

.aat-reviews-header h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
    color: #171717;
}

.aat-reviews-header p {
    margin: 12px 0 0;
    font-size: 16px;
    color: #777;
}


/* Write Review */

.aat-write-review-btn {
    border: 1px solid #18361E;
    background: #18361E;
    color: #fff;
    padding: 15px 28px;
    min-width: 155px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.aat-write-review-btn:hover {
    background: #cadd59;
    color: #000000;
    border-color: #cadd59;
}


/* Rating Summary */

.aat-rating-summary {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 70px;
    align-items: center;
    padding: 20px 40px;
    border: 1px solid #e9e9e9;
    background: #fafafa;
    margin-bottom: 55px;
}


/* Overall */

.aat-rating-overall {
    text-align: center;
    border-right: 1px solid #dedede;
    padding-right: 50px;
}

.aat-rating-number {
    font-size: 62px;
    line-height: 1;
    font-weight: 600;
    color: #171717;
}

.aat-rating-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 13px 0 8px;
}

.aat-rating-stars span {
    color: #f5a623;
    font-size: 18px;
}

.aat-rating-overall p {
    margin: 0;
    font-size: 15px;
    color: #777;
}


/* Rating Breakdown */

.aat-rating-breakdown {
    max-width: 650px;
}

.aat-rating-row {
    display: grid;
    grid-template-columns: 15px 20px minmax(100px, 1fr) 40px;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.aat-rating-row > span:first-child {
    font-size: 14px;
    color: #555;
}

.aat-small-star {
    color: #f5a623;
    font-size: 13px;
}

.aat-rating-bar {
    height: 6px;
    overflow: hidden;
    background: #e3e3e3;
}

.aat-rating-bar span {
    display: block;
    height: 100%;
    background: #f5a623;
}

.aat-rating-row strong {
    font-size: 11px;
    font-weight: 500;
    color: #777;
    text-align: right;
}


/* Toolbar */

.aat-reviews-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 0;
}

.aat-reviews-toolbar h3 {
    margin: 0 0 5px;
    font-size: 21px;
    font-weight: 600;
    color: #171717;
}

.aat-reviews-toolbar > div:first-child span {
    font-size: 15px;
    color: #888;
}

.aat-review-filter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aat-review-filter label {
    margin: 0;
    font-size: 16px;
    color: #777;
}

.aat-review-filter select {
    min-width: 145px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-size: 15px;
    outline: none;
    cursor: pointer;
}


/* Review Card */

.aat-review-card {
    padding: 30px 0;
    border-bottom: 1px solid #e8e8e8;
}

.aat-review-user {
    display: flex;
    align-items: center;
    gap: 13px;
}

.aat-review-avatar {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cbde5a;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}

.aat-review-user h4 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.aat-review-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #999;
}


/* Verified */

.aat-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
}

.aat-check {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 8px;
}


/* Review Rating */

.aat-review-rating {
    display: flex;
    gap: 3px;
    margin: 17px 0 9px;
}

.aat-review-rating span {
    font-size: 14px;
    color: #f5a623;
}

.aat-review-rating .empty-star {
    color: #ddd;
}


/* Review Content */

.aat-review-card h5 {
    margin: 0 0 9px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.aat-review-card > p {
    max-width: 850px;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}


/* Review Footer */

.aat-review-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 17px;
}

.aat-helpful-btn {
    border: 0;
    padding: 0;
    background: transparent;
    color: #6d782a;
    font-size: 14px;
    cursor: pointer;
}

.aat-helpful-btn span {
    margin-right: 5px;
    font-size: 15px;
}

.aat-helpful-btn:hover {
    color: #111;
}

.aat-helpful-count {
    font-size: 13px;
    color: #aaa;
}


/* Load More */

.aat-load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 35px auto 0;
    padding: 13px 25px;
    border: 1px solid #222;
    background: transparent;
    border-radius: 10px;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.aat-load-more-btn span {
    font-size: 15px;
}

.aat-load-more-btn:hover {
    background: #222;
    color: #fff;
}


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

@media (max-width: 991px) {

    .aat-reviews-section {
        padding: 60px 0;
    }

    .aat-rating-summary {
        grid-template-columns: 210px 1fr;
        gap: 40px;
        padding: 30px;
    }

    .aat-rating-overall {
        padding-right: 30px;
    }

    .aat-rating-number {
        font-size: 52px;
    }

}


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

@media (max-width: 767px) {

    .aat-reviews-section {
        padding: 15px 0;
    }

    .aat-reviews-container {
        width: 92%;
    }

    .aat-reviews-header {
        display: block;
        margin-bottom: 30px;
    }

    .aat-reviews-header h2 {
        font-size: 28px;
    }

    .aat-reviews-header p {
        font-size: 13px;
    }

    .aat-write-review-btn {
        margin-top: 20px;
        width: 100%;
    }


    /* Rating Summary */

    .aat-rating-summary {
        display: block;
        padding: 25px 20px;
    }

    .aat-rating-overall {
        padding: 0 0 25px;
        border-right: 0;
        border-bottom: 1px solid #ddd;
        margin-bottom: 25px;
    }

    .aat-rating-number {
        font-size: 50px;
    }

    .aat-rating-breakdown {
        width: 100%;
    }

    .aat-rating-row {
        grid-template-columns: 15px 18px minmax(60px, 1fr) 35px;
        gap: 6px;
    }


    /* Toolbar */

    .aat-reviews-toolbar {
        display: block;
    }

    .aat-review-filter {
        margin-top: 18px;
        justify-content: space-between;
    }

    .aat-review-filter select {
        flex: 1;
    }


    /* Review */

    .aat-review-card {
        padding: 25px 0;
    }

    .aat-review-card > p {
        font-size: 12px;
        line-height: 1.7;
    }

    .aat-review-footer {
        flex-wrap: wrap;
    }

}/* =========================================
   REVIEW DRAWER
========================================= */

.aat-review-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;

    opacity: 0;
    visibility: hidden;

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

.aat-review-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* Drawer */

.aat-review-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 99999;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    /* box-shadow: -10px 0 40px rgba(0, 0, 0, .12); */
}

.aat-review-drawer.active {
    transform: translateX(0);
}


/* Drawer Header */

.aat-review-drawer-header {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 27px 30px;

    border-bottom: 1px solid #e8e8e8;
}

.aat-review-drawer-eyebrow {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #888;
}

.aat-review-drawer-header h3 {
    margin: 0;

    font-size: 25px;
    font-weight: 600;

    color: #171717;
}


/* Close */

.aat-review-close {
    width: 38px;
    height: 38px;

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

    border: 1px solid #ddd;
    border-radius: 50%;

    background: #fff;

    color: #222;

    font-size: 25px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition: all .25s ease;
}

.aat-review-close:hover {
    background: #171717;
    border-color: #171717;
    color: #fff;
}


/* Body */

.aat-review-drawer-body {
    flex: 1;

    overflow-y: auto;

    padding: 25px 30px 35px;
}


/* Scrollbar */

.aat-review-drawer-body::-webkit-scrollbar {
    width: 5px;
}

.aat-review-drawer-body::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.aat-review-drawer-body::-webkit-scrollbar-thumb {
    background: #cfcfcf;
}


/* Intro */

.aat-review-intro {
    margin: 0px 0 15px;
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
}


/* Product */

.aat-review-product {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 13px;

    margin-bottom: 28px;

    background: #f8f8f8;

    border: 1px solid #eeeeee;
}

.aat-review-product-image {
    width: 65px;
    height: 65px;

    flex-shrink: 0;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
}

.aat-review-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.aat-review-product h4 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.aat-review-product span {
    font-size: 13px;
    color: #888;
}


/* Fields */

.aat-review-field {
    margin-bottom: 22px;
}

.aat-review-field label {
    display: block;
    margin-bottom: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.aat-review-field label > span {
    color: #d33;
}

.aat-review-field label small {
    font-size: 10px;
    font-weight: 400;
    color: #999;
}


/* Inputs */

.aat-review-field input[type="text"],
.aat-review-field input[type="email"],
.aat-review-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #dedede;
    background: #fff;
    outline: none;
    color: #222;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .25s ease;
}

.aat-review-field textarea {
    min-height: 120px;

    resize: vertical;
}

.aat-review-field input:focus,
.aat-review-field textarea:focus {
    border-color: #222;
}

.aat-review-field input::placeholder,
.aat-review-field textarea::placeholder {
    color: #aaa;
}


/* =========================================
   STAR RATING
========================================= */

.aat-star-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}

.aat-star-rating button {
    border: 0;

    background: transparent;

    padding: 0;

    color: #d9d9d9;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

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

.aat-star-rating button:hover {
    transform: scale(1.08);
}

.aat-star-rating button.active {
    color: #f5a623;
}


/* =========================================
   IMAGE UPLOAD
========================================= */

.aat-review-upload {
    min-height: 90px;

    display: flex !important;
    flex-direction: column;

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

    gap: 5px;

    border: 1px dashed #ccc;

    background: #fafafa;

    cursor: pointer;

    transition: all .25s ease;
}

.aat-review-upload:hover {
    border-color: #222;
    background: #f7f7f7;
}

.aat-review-upload input {
    display: none;
}

.aat-upload-icon {
    font-size: 22px !important;
    font-weight: 300 !important;
    color: #555 !important;
    margin: 0 !important;
}

.aat-review-upload > span:last-child {
    font-size: 14px;
    font-weight: 400;
    color: #888;
}


/* Submit */

.aat-submit-review {
    width: 100%;
    padding: 15px;
    border: 1px solid #18361E;
    background: #18361E;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.aat-submit-review:hover {
    background: #fff;
    color: #171717;
}


/* Note */

.aat-review-note {
    margin: 15px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #999;
}


/* Prevent body scroll */

body.aat-review-open {
    overflow: hidden;
}


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

@media (max-width: 575px) {

    .aat-review-drawer {
        width: 100%;
    }

    .aat-review-drawer-header {
        padding: 22px 20px;
    }

    .aat-review-drawer-header h3 {
        font-size: 22px;
    }

    .aat-review-drawer-body {
        padding: 22px 20px 30px;
    }

    .aat-review-product-image {
        width: 58px;
        height: 58px;
    }

}

/* =========================================
   CHECKOUT LAYOUT
========================================= */

.checkout {
    display: flex;
    width: 100%;
    /* max-width: 1400px; */
    /* margin: 0 auto; */
    background: #fff;
    align-items: flex-start;
}

/* LEFT */
.left {
    width: 60%;
    padding: 0;
    box-sizing: border-box;
}

.left h2 {
    font-size: 20px;
    margin: 20px 0 10px;
    width: 100%;
    float: left;
}

/* =========================================
   CUSTOM CHECKOUT GRID
========================================= */

.checkout-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 12px;
    width: 100%;
}

.col-12 {
    grid-column: span 12;
}

.col-6 {
    grid-column: span 6;
}

.col-4 {
    grid-column: span 4;
}


/* =========================================
   INPUTS
========================================= */

.in-ch {
    width: 100%;
    float: left;
    padding: 15px;
    border: 1px solid #cecece;
    border-radius: 8px;
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 15px;
    background: #fff;
}

.in-ch:focus {
    outline: none;
    border-color: #999;
}


/* =========================================
   RADIO BUTTON
========================================= */

.acc-header input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    width: auto !important;
    height: auto !important;
    margin: 0 8px 0 0;
    cursor: pointer;
}


/* =========================================
   CHECKBOX
========================================= */

.custom-check {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #000;
    position: relative;
    gap: 10px;
    float: left;
    margin: 10px 0;
    width: 100%;
}

.custom-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: 2px solid #bbb;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: 0.3s;
}

.custom-check:hover .checkmark {
    border-color: #c9dc5c;
}

.custom-check input:checked + .checkmark {
    background: #c9dc5c;
    border-color: #cadc5d;
}

.custom-check input:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* =========================================
   PAYMENT ACCORDION
========================================= */

.accordion.basic-container {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    float: left;
}

.acc-item {
    border-bottom: 1px solid #eee;
}

.acc-item:last-child {
    border-bottom: 0;
}

.acc-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px;
    cursor: pointer;
    background: #fff;
    left: 8px;
    position: relative;
}

.acc-header input {
    cursor: pointer;
}

.acc-header img {
    max-width: 70px;
    margin-left: auto;
}

.acc-item.active .acc-header {
    border: 2px solid #ffc0c2;
    background: #fdf4f5;
}

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0 15px;
}

.acc-item.active .acc-body {
    max-height: 100px;
    padding: 15px;
}


/* =========================================
   BILLING
========================================= */

.basic-container {
    width: 100%;
    float: left;
}

.basic-container > div {
    margin-bottom: 12px;
    position: relative;
    float: left;
    width: 100%;
}

.basic-container input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    vertical-align: middle;
}

.basic-container label {
    font-weight: 500;
    cursor: pointer;
    padding-left: 5px;
}


/* =========================================
   BILLING FORM
========================================= */

#billingForm {
    width: 100%;
    float: left;
}

.billing-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 12px;
    width: 100%;
}


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

.pay {
    width: 100%;
    padding: 14px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 15px;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.pay:hover {
    background: #c8de59;
    color: #000;
}


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

.right {
    width: 40% !important;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    right: 0;
}

.product {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 10px;
}

.product img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.product p {
    margin: 0;
    font-size: 15px;
    color: #000;
    width: 95%;
}

.product small {
    color: #777;
}
.product span img{
    width: 15px;
    height: 15px;
    object-fit: contain;
    border-radius: 0;
    top: 2px;
    position: relative;
}
.product span {
    margin-left: auto;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    margin-top: -7px;
}


/* =========================================
   COUPON
========================================= */

.coupon-ck {
    width: 100%;
    padding: 20px 0;
}
.view-coupons{
        padding-bottom: 7px;
        float: left;
        width: 100%;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        padding-top: 5px;
        /* letter-spacing: 1px; */
        /* text-decoration: underline; */
        gap: 20px;
        display: flex;
        align-items: center;
        background: #f4ffb4;
        justify-content: center;
        flex-direction: row-reverse;
}
.coupon-input-wrap{
    margin-bottom: 20px;
}
.coupon-ck input {
    width: 76%;
    border: 1px solid #cecece;
    padding: 15px;
    border-radius: 10px;
    margin-right: 2%;
    box-sizing: border-box;
}

.coupon-ck button {
    width: 20%;
    padding: 14px;
    font-size: 16px;
    color: #000000;
    border: 0;
    background: #c9db5d;
    border-radius: 15px;
    cursor: pointer;
}

.coupon-ck button:hover {
    background: #000000;
    color: #fff;
}


/* =========================================
   SUMMARY
========================================= */

.summary {
    margin-top: 15px;
    width: 100%;
    float: left;
}
.summary p img{
    width: 16px;
    margin-right: 5px;
}.summary p span{
    font-size: 18px;
}
.summary p,
.summary h3 {
    display: flex;
    justify-content: space-between;
    color: #000;
    margin: 0;
    line-height: 35px;
    font-size: 17px;
    width: 100%;
}
.summary h3 img{
    width:15px;
    margin-right: 5px;
}
.summary h3 {
    font-size: 18px;
    border-top: 1px solid #ddd;
    margin-top: 10px;
    padding-top: 10px;
}


/* =========================================
   STICKY RIGHT SIDE
========================================= */

.stck {
    position: sticky;
    top: 20px;
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1),
                top 0.45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}


/* =========================================
   SHIPPING
========================================= */

.disabled {
    background: #f1f1f1;
    padding: 12px;
    border-radius: 6px;
    color: #888;
    /* float: left; */
    /* width: 100%; */
    box-sizing: border-box;
}


/* =========================================
   DRAWER
========================================= */

.modal.drawer {
    display: flex !important;
    pointer-events: none;
}

.modal.drawer * {
    pointer-events: none;
}

.modal.drawer .modal-dialog {
    margin: 0;
    display: flex;
    flex: auto;
    transform: translate(25%, 0);
}

.modal.drawer .modal-dialog .modal-content {
    border: none;
    border-radius: 0;
}

.modal.drawer .modal-dialog .modal-content .modal-body {
    overflow: auto;
}

.modal.drawer.show {
    pointer-events: auto;
}

.modal.drawer.show * {
    pointer-events: auto;
}

.modal.drawer.show .modal-dialog {
    transform: translate(0, 0);
}

.modal.drawer.right-align {
    flex-direction: row-reverse;
    padding-right: 0 !important;
}

.modal.drawer.left-align:not(.show) .modal-dialog {
    transform: translate(-25%, 0);
}

.cart-drawer {
    width: 400px;
    background: #fff;
    padding: 15px;
    margin: 20px auto;
    border: 1px solid #ddd;
     z-index: 1100; 
}

.ecom-cart-overlay {
    z-index: 1000000;
}

.ecom-cart-drawer {
    z-index: 1000001;
}


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

@media (max-width: 991px) {

    .checkout {
        flex-direction: column;
    }

    .left,
    .right {
        width: 100%;
    }

    .right {
        height: auto;
        padding-top: 10px;
    }

    .stck {
        position: relative;
        top: auto;
    }
}


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

@media (max-width: 767px) {

    .left,
    .right {
        width: 100%;
        padding: 20px;
    }

    .checkout-grid,
    .billing-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .col-12,
    .col-6,
    .col-4 {
        grid-column: span 1;
    }

    .coupon-ck {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .coupon-ck input {
        width: 100%;
        margin: 0;
    }

    .coupon-ck button {
        width: 100%;
    }

    .product img {
        width: 55px;
        height: 55px;
    }

    .cart-drawer {
        width: 100%;
        max-width: 400px;
    }
}.coupon-collapse {
    width: 100%;
    float: left;
}


/* Toggle button */

.view-coupons {
    width: 100% !important;
    /* display: flex; */
    align-items: center;
    /* justify-content: space-between; */
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    text-align: center;
    cursor: pointer;
}


/* Arrow */

.coupon-arrow {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.3s ease;
}


/* Rotate arrow when open */

.view-coupons.active .coupon-arrow {
    transform: rotate(180deg);
}


/* Collapse */

.clp-wd {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease;
}


/* Open */

.clp-wd.open {
    max-height: 300px;
    opacity: 1;
}


/* Coupon box */

.clp-card {
    width: 100%;
    padding: 15px 0 10px;
}


/* Coupon */

.coupon-apply {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px;
    border: 1px dashed #ccc;
    border-radius: 10px;
    background: #fafafa;
    box-sizing: border-box;
}


/* Coupon content */

.coupon-content {
    flex: 1;
}

.coupon-content h2 {
    margin: 0 0 5px;
    font-size: 16px;
    color: #000;
}

.coupon-content p {
    margin: 0 0 8px;
    font-size: 13px;
    color: #666;
}


/* Coupon code */

.coupon-code {
    display: inline-block;
    padding: 5px 10px;
    background: #fff;
    border: 1px dashed #aaa;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}


/* Apply button */

.apply-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    background: #000;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s ease;
}

.apply-btn:hover {
    background: #c1d259;
    color: #fff;
}


/* Mobile */

@media (max-width: 576px) {

    .coupon-apply {
        align-items: flex-start;
    }

    .apply-btn {
        padding: 9px 14px;
    }

}.basic-container input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    top: 50%;
    left: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #c9db5e;
}
.more-content {
    display: none;
}

.more-content.show {
    display: block;
}

.read-more {
    cursor: pointer;
    text-decoration: none;
}
.strike-price {
        font-size: 16px;
    color: rgb(183, 183, 183);
    text-decoration: line-through;
}
.strike-price img{
    width: 14px;
    opacity: .4;
}/* =========================================
   ALAM AL TAWASUL PAYMENT DRAWER
========================================= */

.alam-payment-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
}

.alam-payment-popup.active {
    visibility: visible;
    pointer-events: auto;
}


/* BACKDROP */

.alam-payment-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;

    transition: opacity 0.35s ease;
}

.alam-payment-popup.active .alam-payment-backdrop {
    opacity: 1;
}


/* DRAWER */

.alam-payment-drawer {
    position: absolute;

    top: 0;
    right: 0;

    width: 540px;
    max-width: 100%;

    height: 100%;

    background: #ffffff;

    transform: translateX(100%);

    transition:
        transform 0.45s cubic-bezier(.77, 0, .18, 1);

    overflow-y: auto;

    box-shadow:
        -10px 0 40px rgba(0, 0, 0, 0.12);
}

.alam-payment-popup.active .alam-payment-drawer {
    transform: translateX(0);
}


/* SCROLLBAR */

.alam-payment-drawer::-webkit-scrollbar {
    width: 5px;
}

.alam-payment-drawer::-webkit-scrollbar-track {
    background: transparent;
}

.alam-payment-drawer::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 20px;
}


/* CLOSE BUTTON */

.alam-payment-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 38px;
    height: 38px;

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

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f1f2f4;

    cursor: pointer;

    z-index: 5;

    transition: all 0.25s ease;
}

.alam-payment-close:hover {
    background: #111;
}

.alam-payment-close:hover svg path {
    fill: #fff;
}


/* CONTENT */

.alam-payment-content {
    max-width: 470px;

    margin: 0 auto;

    padding: 55px 30px 45px;
}


/* BRAND */

.alam-payment-brand {
    display: flex;
    justify-content: center;

    margin-bottom: 28px;
}

.alam-payment-brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 6px;
    background: #cadc5d;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
}


/* HEADING */

.alam-payment-content h2 {
    margin: 0;
    color: #111;
    text-align: center;
    font-size: 35px;
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -1.5px;
}


/* SUBTITLE */

.alam-payment-subtitle {
    margin: 22px 0 42px;
    color: #444;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
}
.alam-payment-subtitle strong img{
    width:15px;
}
.alam-payment-subtitle strong {
    color: #111;
}


/* SECTION TITLE */

.alam-payment-section-title {
    margin-bottom: 12px;
    color: #222;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
}


/* PAYMENT PLAN */

.alam-payment-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 72px;

    margin-bottom: 12px;

    padding: 13px 15px;

    border: 1px solid #dce1e8;

    border-radius: 15px;

    background: #fff;

    transition: all 0.25s ease;
}

.alam-payment-plan:hover {
    border-color: #b9c0ca;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);
}


/* PLAN INFO */

.alam-payment-plan-info {
    display: flex;
    flex-direction: column;

    gap: 4px;
}
.alam-payment-plan-info strong img{
    width:15px;
}
.alam-payment-plan-info strong {
    color: #111;

    font-size: 15px;

    font-weight: 700;
}

.alam-payment-plan-info span {
    color: #008b75;

    font-size: 13px;
}


/* PLAN BADGE */

.alam-payment-plan-badge {
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 7px;
    background: #cadc5d26;
    color: #adc138;
    font-size: 11px;
    font-weight: 600;
}


/* DIVIDER */

.alam-payment-divider {
    width: 100%;

    height: 1px;

    margin: 28px 0;

    background: #eeeeee;
}


/* HOW IT WORKS */

.alam-how-title,
.alam-why-title {
    margin-bottom: 20px;
    color: #111;
    font-size: 20px;
    font-weight: 700;
}


/* HOW ITEMS */

.alam-how-items {
    display: flex;
    flex-direction: column;

    gap: 22px;
}


/* ITEM */

.alam-how-item {
    display: flex;

    gap: 14px;
}


/* NUMBER */

.alam-step-number {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

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

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 13px;

    font-weight: 600;
}


/* STEP CONTENT */

.alam-step-content {
    padding-top: 1px;
}

.alam-step-title {
    margin-bottom: 5px;
    color: #111;
    font-size: 16px;
    font-weight: 700;
}

.alam-step-text {
    color: #777;
    font-size: 14px;
    line-height: 1.55;
}


/* WHY SECTION */

.alam-payment-reasons {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}

.alam-payment-reason {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    gap: 8px;
}


/* REASON ICON */

.alam-reason-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background: #f3f3f3;

    color: #111;

    font-size: 17px;

    font-weight: 700;
}


/* REASON TEXT */

.alam-reason-text {
    color: #333;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* DISCLAIMER */

.alam-payment-disclaimer {
    color: #777;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}


/* PAYMENT METHODS */

.alam-payment-methods {
    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;
}


/* PAYMENT METHOD */

.alam-payment-method {
    min-width: 48px;
    padding: 6px 8px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
    color: #222;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}


/* BODY LOCK */

body.alam-payment-open {
    overflow: hidden;
}


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

@media (max-width: 767px) {

    .alam-payment-drawer {
        width: 100%;
    }

    .alam-payment-content {
        padding: 55px 20px 35px;
    }

    .alam-payment-close {
        top: 15px;
        right: 15px;
    }

    .alam-payment-content h2 {
        font-size: 36px;
    }

    .alam-payment-subtitle {
        margin-bottom: 35px;

        font-size: 14px;
    }

    .alam-payment-plan {
        min-height: 68px;
    }

    .alam-payment-reasons {
        gap: 5px;
    }

    .alam-payment-brand span {
        font-size: 15px;
    }

}/* =========================================
   ALAM AL TAWASUL - TABBY DRAWER
========================================= */

.alam-tabby-popup {
    position: fixed;
    inset: 0;

    z-index: 99999;

    visibility: hidden;
    pointer-events: none;
}


/* ACTIVE */

.alam-tabby-popup.active {
    visibility: visible;
    pointer-events: auto;
}


/* BACKDROP */

.alam-tabby-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;

    transition: opacity 0.35s ease;
}

.alam-tabby-popup.active .alam-tabby-backdrop {
    opacity: 1;
}


/* DRAWER */

.alam-tabby-drawer {
    position: absolute;

    top: 0;
    right: 0;

    width: 550px;
    max-width: 100%;

    height: 100vh;

    background: #fff;

    transform: translateX(100%);

    transition:
        transform 0.45s cubic-bezier(.77, 0, .18, 1);

    overflow-y: auto;

    box-shadow:
        -12px 0 40px rgba(0, 0, 0, 0.15);
}


.alam-tabby-popup.active .alam-tabby-drawer {
    transform: translateX(0);
}


/* SCROLLBAR */

.alam-tabby-drawer::-webkit-scrollbar {
    width: 5px;
}

.alam-tabby-drawer::-webkit-scrollbar-track {
    background: transparent;
}

.alam-tabby-drawer::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 20px;
}


/* CLOSE */

.alam-tabby-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 38px;
    height: 38px;

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

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f1f2f4;

    cursor: pointer;

    z-index: 5;

    transition: all 0.25s ease;
}

.alam-tabby-close:hover {
    background: #111;
}

.alam-tabby-close:hover svg path {
    fill: #fff;
}


/* CONTENT */

.alam-tabby-content {
    width: 100%;
    max-width: 490px;

    margin: 0 auto;

    padding: 55px 30px 40px;
}


/* BRAND */

.alam-tabby-brand {
    display: flex;
    justify-content: center;

    margin-bottom: 25px;
}

.alam-tabby-brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 6px;
    background: #cbde5a;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}


/* HEADING */

.alam-tabby-content h2 {
    margin: 0;
    color: #111;
    text-align: center;
    font-size: 36px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
}


/* SUBTITLE */

.alam-tabby-subtitle {
    margin: 18px 0 32px;
    color: #555;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
}
.alam-tabby-subtitle strong img{
    width:15px;
}
.alam-tabby-subtitle strong {
    color: #111;
}


/* PAYMENT PLANS */

.alam-tabby-plans {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* PLAN */

.alam-tabby-plan {
    padding: 15px 16px;

    border: 1px solid #dedede;

    border-radius: 14px;

    background: #fff;

    transition: all 0.25s ease;
}

.alam-tabby-plan:hover {
    border-color: #bcbcbc;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.05);
}


/* PLAN TOP */

.alam-tabby-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}
.alam-tabby-plan-top strong img{
    width:15px;
}
.alam-tabby-plan-top strong {
    color: #111;
    font-size: 16px;
    font-weight: 700;
}


/* PLAN DESCRIPTION */

.alam-tabby-plan p {
    margin: 5px 0 0;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
}
.alam-tabby-plan p img{
    width: 12px;
    margin-left: 5px;
}

/* PLAN SMALL */
.alam-tabby-plan small img{
    width: 12px;
    margin-left:5px;
}
.alam-tabby-plan small {
    display: block;
    margin-top: 4px;
    color: #777;
    font-size: 13px;
    line-height: 1.4;
}


/* DIVIDER */

.alam-tabby-divider {
    width: 100%;

    height: 1px;

    margin: 28px 0;

    background: #eeeeee;
}


/* HOW IT WORKS */

.alam-tabby-how h3 {
    margin: 0 0 20px;
    color: #111;
    font-size: 20px;
    font-weight: 700;
}


/* STEP */

.alam-tabby-step {
    display: flex;

    gap: 14px;

    margin-bottom: 20px;
}


/* NUMBER */

.alam-tabby-number {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

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

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 13px;

    font-weight: 700;
}


/* STEP CONTENT */

.alam-tabby-step-content {
    padding-top: 1px;
}

.alam-tabby-step-content strong {
    display: block;
    margin-bottom: 4px;
    color: #111;
    font-size: 16px;
    font-weight: 700;
}

.alam-tabby-step-content p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.55;
}


/* TRUST BANNER */

.alam-tabby-trust {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 12px;

    padding: 14px;

    border-radius: 12px;

    background: #f7f8f7;
}


/* TRUST ICON */

.alam-tabby-trust-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 50%;

    background: #419454;

    color: #fff;

    font-size: 17px;

    font-weight: 700;
}

.alam-tabby-trust-icon.blue {
    background: #3a7dcf;
}


/* TRUST TEXT */

.alam-tabby-trust strong {
    display: block;
    margin-bottom: 3px;
    color: #111;
    font-size: 15px;
}

.alam-tabby-trust p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.45;
}


/* CONTINUE SHOPPING */

.alam-tabby-shopping {
    width: 100%;
    height: 48px;
    margin-top: 22px;
    border: 0;
    border-radius: 8px;
    background: #cbde5a;
    color: #000000;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.alam-tabby-shopping:hover {
    background: #000000;
    color: #fff;
}


/* PAYMENT CARDS */

.alam-tabby-cards {
    display: flex;

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

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 20px;
}

.alam-tabby-cards span {
    min-width: 45px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}


/* BODY LOCK */

body.alam-tabby-open {
    overflow: hidden;
}


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

@media (max-width: 767px) {

    .alam-tabby-drawer {
        width: 100%;
    }

    .alam-tabby-content {
        padding: 55px 20px 35px;
    }

    .alam-tabby-close {
        top: 15px;
        right: 15px;
    }

    .alam-tabby-content h2 {
        font-size: 36px;
    }

    .alam-tabby-subtitle {
        font-size: 14px;
    }

    .alam-tabby-plan {
        padding: 14px;
    }

    .alam-tabby-plan-top strong {
        font-size: 13px;
    }

}.promotion-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.promotion-card {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.promotion-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.promotion-card:hover img {
    transform: scale(1.04);
}

/* Tablet */
@media (max-width: 991px) {
    .promotion-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .promotion-card:last-child {
        grid-column: span 2;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .aat-faq-list p {
       padding: 0 0px 40px!important;

}
    .promotion-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .promotion-card:last-child {
        grid-column: span 1;
    }
}
@media(min-width:1440px){
    .image-carousel-item {
    width: 100%;
    flex: 1 0 calc((100% - 157px) / 6.2);
    /* min-width: 0; */
    overflow: hidden;
    background-image: url(../images/bg-b1.webp);
    height: 260px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 20px;
}
}
.aat-faq-list h2{
        font-size: 36px;
    font-weight: 600;
    color: #18361E;
    margin-bottom: 15px;
    text-align: center;
}
.aat-faq-list p {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    text-align: center;
    padding: 0 140px 40px;
    line-height: 170%;
}
.ecom-cart-alert {
    margin: 10px 16px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #b42318;
    font-size: 14px;
    line-height: 1.4;
}

.ecom-cart-alert.success {
    background: #e8f7ee;
    border-color: #b7e4c7;
    color: #1b7a3d;
}
.ecom-cart2 b:empty,
.ecom-mobile-cart b:empty {
    display: none;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-logout-form {
    margin: 0;
}

.dashboard-logout-btn {
    padding: 10px 22px;
    border: 1px solid #e53935;
    background: #fff;
    color: #e53935;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.dashboard-logout-btn:hover {
    background: #e53935;
    color: #fff;
}
.dashboard-field select,
.dashboard-select {
    width: 100%;
    height: 56px;
    padding: 0 44px 0 16px;
    font-size: 18px;
    font-family: inherit;
    color: #111;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.dashboard-field select:focus {
    border-color: #b9d73f; /* match your input focus colour */
}
.address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.address-grid .address-card {
    margin: 0;
    width: auto;
    min-width: 0; /* stops long addresses from stretching a column */
}

/* 1 per row on phones */
@media (max-width: 640px) {
    .address-grid {
        grid-template-columns: 1fr;
    }
}

.alam-cm { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999;
               display: flex; align-items: center; justify-content: center; padding: 16px; }
    .alam-cm[hidden] { display: none; }
    .alam-cm-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.55); }
    .alam-cm-box { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
                   background: #fff; border-radius: 14px; padding: 28px 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
    .alam-cm-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 28px;
                 line-height: 1; color: #888; cursor: pointer; }
    .alam-cm-x:hover { color: #111; }
    .alam-cm-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #111; }
    .alam-cm-sub { margin: 0 0 18px; font-size: 13px; line-height: 20px; color: #777; }
    .alam-cm-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: #333; }
    .alam-cm-field { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #dee2e6;
                     border-radius: 8px; outline: none; background: #fff; box-sizing: border-box; }
    .alam-cm-field:focus { border-color: #111; }
    .alam-cm-err { margin-top: 5px; font-size: 12px; color: #c72929; }
    .alam-cm-msg { display: none; margin-bottom: 14px; padding: 10px 14px; font-size: 13px; color: #fff; border-radius: 6px; }
    .alam-cm-msg.ok  { background: #2cc729; }
    .alam-cm-msg.bad { background: #c72929; }
    .alam-cm-actions { display: flex; gap: 10px; margin-top: 22px; }
    .alam-cm-btn { flex: 1; padding: 12px 10px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; }
    .alam-cm-btn.keep   { background: #fff; color: #111; border: 1px solid #ccc; }
    .alam-cm-btn.submit { background: #111; color: #fff; border: 1px solid #111; }
    .alam-cm-btn:disabled { opacity: .6; cursor: not-allowed; }