:root {
    --custom_primary_color: #f9b333;
}

ul li a,
a {
    text-decoration: none !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

.opacity-1 {
    opacity: 0.1 !important;
}

.fill-white {
    fill: #fff !important;
}

#hover-country-menu .active {
    display: block !important;
}


#custom-header .logo-bar-area {
    border-bottom: 0 !important;
    /* border-color: rgba(143, 151, 171, 0.15) !important; */
    /* margin-bottom: 10px; */
    /* padding-bottom: 20px; */
}

.top-navbar {
    border-bottom: 1px solid rgba(143, 151, 171, 0.15) !important;
}

#custom-header #category-menu-bar {
    background-color: var(--custom_primary_color) !important;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

#custom-header #category-menu-bar * {
    color: black !important;
}

.nav-link {
    padding: 0.5rem;
}

.nav-link:hover {
    border-color: #6c727f;
}

.nav-pills {
    color: white !important;
}

.nav-pills .nav-item .nav-link {
    border: 1px solid rgb(51, 61, 76);
    border-radius: 50rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem
}

.footer-col {
    color: #fff !important;
}

.footer-col .nav-link {
    font-size: 13px !important;
    font-weight: 200 !important;
}

.accordion-header {
    margin-bottom: 1rem;
}

.btn-icon {
    border-color: #333d4c !important;
}

.btn-icon:hover {
    background-color: #4e5562 !important;
    border-color: #4e5562 !important;
}

.btn-market {
    background-color: #333d4c !important;
    color: #fff !important;
    /* border-radius: 50px !important; */
    border-radius: 8px !important
}

.btn-market:hover {
    background-color: #4e5562 !important;
}

#footer-section .form-group-light {
    border-color: rgba(255, 255, 255, .15);
    background-color: rgba(255, 255, 255, .04);
}

#footer-section .form-group {
    display: flex;
    align-items: center;
    padding: .5rem;
    border: 1px solid #333d4c;
    border-radius: .5rem;
    background-color: #333d4c;
    box-shadow: 0 .125rem .125rem -0.125rem rgba(31, 27, 45, .08), 0 .25rem .75rem rgba(31, 27, 45, .08);
}

#footer-section .form-group .form-control {
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
}

#footer-section .form-group .input-group-text {
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn-primary {
    background-color: var(--custom_primary_color) !important;
    border-color: var(--custom_primary_color) !important;
    color: black !important;
}

/* Custom Checkbox checkmark styling */
.aiz-checkbox>input:checked~.aiz-square-check {
    background-color: var(--custom_primary_color) !important;
    border-color: var(--custom_primary_color) !important;
}

.aiz-checkbox>input:checked~.aiz-square-check:after {
    border-color: black !important;
}

#custom-home #sliders .aiz-carousel,
#custom-home #sliders .aiz-carousel .thecore-square-box img {
    border-radius: 25px !important;
    overflow: hidden !important;
}

#custom-home .featured-categories,
#custom-home .todays-deal,
#custom-home .best-salling-section,
#custom-home #banner-section-1 img,
#custom-home #banner-section-2 img,
#section_last_viewed_products .container {
    border-radius: 15px !important;
}

#custom-home #newest-products-list,
#custom-home #section_featured .container,
#custom-home #section_home_categories,
#custom-home #section_best_sellers .container,
#custom-home #section_top_brands .container {
    background-color: #ffffff !important;
    border-radius: 15px !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

#view-more-btn {
    /* background-color: #ffffff !important; */
    background-color: var(--custom_primary_color) !important;
}

#footer-section {
    background-color: #111827 !important;
}

.dark-border-color {
    border-color: rgb(51, 61, 76) !important;
}

.text-body {
    color: rgb(202, 208, 217) !important;
    font-size: 16px !important;
}

.text-body:hover {
    color: rgb(78, 85, 98) !important;
}

.btn-primary:hover {
    background-color: var(--custom_primary_color) !important;
    border-color: var(--custom_primary_color) !important;
    color: black !important;
}



#custom-header .input-group input {
    border-radius: 50px;
    padding-right: 30px;
}

#custom-header .input-group button {
    border-radius: 50px !important;
    margin-left: -50px;
    z-index: 5;
}


/* #custom-header .input-group button {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;

    -webkit-mask-image: radial-gradient(circle at left center, transparent 22px, black 23px);
    mask-image: radial-gradient(circle at left center, transparent 22px, black 23px);

    margin-left: -20px;
    z-index: 5;
    padding-left: 45px;
    padding-right: 15px;
} */


#custom-header .input-group .form-control:focus {
    border-width: 0 !important;
}

#custom-header #header-menus li a {
    font-weight: 300 !important;
}

#custom-header .top-navbar .dropdown-menu {
    z-index: 9999;
}

.header-icon {
    font-size: 24px;
}

#custom-header .badge-primary {
    background-color: var(--custom_primary_color) !important;
    color: black !important
}


/* #custom-home .list-inline {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
} */


.btn-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#footer-section .btn-icon,
#custom-header .btn-icon {
    background-color: #333d4c;
}

.bg-soft-primary {
    background-color: color-mix(in srgb, var(--custom_primary_color) 15%, transparent) !important;
    color: var(--custom_primary_color) !important;
}

.bg-soft-primary:hover {
    background-color: var(--custom_primary_color) !important;
    color: black !important;
}

.btn-secondary-base {
    background-color: color-mix(in srgb, var(--secondary-base) 15%, transparent) !important;
    color: var(--secondary-base) !important;
}

.btn-secondary-base:hover {
    background-color: var(--secondary-base) !important;
    color: black !important;
}

.btn-soft-secondary-base:hover,
.btn-outline-secondary-base:hover {
    background-color: var(--custom_primary_color) !important;
    color: black !important;
    border-color: var(--custom_primary_color) !important;
}

#compare,
#wishlist,
#header-notification {
    margin-top: 10px
}


#home-call-to-action .call-to-action-content {
    background-color: #24292d !important;
    border-radius: 0.5rem !important;
}

#home-call-to-action .call-to-action-content::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('../refont/assets/img/pattern.png');
    background-repeat: no-repeat;
    background-position: 130% 80%;
    top: 0;
    right: 0;
}

.dropdown-item.active,
.dropdown-item:hover {
    background-color: var(--custom_primary_color) !important;
    color: black !important
}

.dropdown-menu {
    border-radius: 0.5rem !important;
}

#section_featured .hov-animate-outline {
    border: none !important;
    border-radius: 0.25rem !important;
}


#user-login-form .submit-button {
    color: black !important
}

.alert.alert-warning {
    color: black !important
}









@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

























[class*=" fi-"],
[class^=fi-] {
    display: inline-flex;
}

a [class*=" fi-"]:not(.animate-target),
button [class*=" fi-"]:not(.animate-target),
a [class^=fi-]:not(.animate-target),
button [class^=fi-]:not(.animate-target) {
    transition: opacity 0.2s ease-in-out;
}

a:hover [class*=" fi-"]:not(.animate-target),
a:focus-visible [class*=" fi-"]:not(.animate-target),
a.active [class*=" fi-"]:not(.animate-target),
a.show [class*=" fi-"]:not(.animate-target),
button:hover [class*=" fi-"]:not(.animate-target),
button:focus-visible [class*=" fi-"]:not(.animate-target),
button.active [class*=" fi-"]:not(.animate-target),
button.show [class*=" fi-"]:not(.animate-target),
a:hover [class^=fi-]:not(.animate-target),
a:focus-visible [class^=fi-]:not(.animate-target),
a.active [class^=fi-]:not(.animate-target),
a.show [class^=fi-]:not(.animate-target),
button:hover [class^=fi-]:not(.animate-target),
button:focus-visible [class^=fi-]:not(.animate-target),
button.active [class^=fi-]:not(.animate-target),
button.show [class^=fi-]:not(.animate-target) {
    opacity: 1 !important;
}

pre,
.hljs {
    padding: 1.25rem 1rem;
    margin: 0;
    background-color: #1d2735;
    border-radius: var(--fn-border-radius);
}

kbd {
    border-radius: calc(var(--fn-border-radius) * 0.5);
}

.hljs-comment,
.hljs-quote {
    font-style: normal;
}

.container-start {
    margin-left: calc((100% - (1328px - 1.5rem)) / 2);
}

.container-end {
    margin-right: calc((100% - (1328px - 1.5rem)) / 2);
}

@media (max-width: 1399.98px) {
    .container-start {
        margin-left: calc((100% - (95% - 1.5rem)) / 2);
    }

    .container-end {
        margin-right: calc((100% - (95% - 1.5rem)) / 2);
    }
}

@media (max-width: 499.98px) {
    .container-start {
        padding-left: 1rem;
        margin-left: 0;
    }

    .container-end {
        padding-right: 1rem;
        margin-right: 0;
    }
}

.animate-shake:hover .animate-target,
.animate-shake:focus-visible .animate-target {
    animation: shake 0.8s;
}

@keyframes shake {
    0% {
        transform: scale3d(1, 1, 1);
    }

    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
    }

    50%,
    70%,
    90% {
        transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 5deg);
    }

    60%,
    80% {
        transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, -5deg);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.animate-pulse:hover .animate-target,
.animate-pulse:focus-visible .animate-target {
    animation: pulse 0.9s;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.25);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.25);
    }

    70% {
        transform: scale(1);
    }
}

.animate-rotate:hover .animate-target,
.animate-rotate:focus-visible .animate-target {
    animation: rotate 0.45s ease-in-out;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-scale:hover .animate-target,
.animate-scale:focus-visible .animate-target {
    animation: scale 0.35s ease-in-out;
}

@keyframes scale {
    0% {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.2, 1.2, 1.2);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.animate-slide-end {
    overflow: hidden;
}

.animate-slide-end:hover .animate-target,
.animate-slide-end:focus-visible .animate-target {
    animation: slide-end 0.3s forwards;
}

.animate-slide-start {
    overflow: hidden;
}

.animate-slide-start:hover .animate-target,
.animate-slide-start:focus-visible .animate-target {
    animation: slide-start 0.3s forwards;
}

.animate-slide-up {
    overflow: hidden;
}

.animate-slide-up:hover .animate-target,
.animate-slide-up:focus-visible .animate-target {
    animation: slide-up 0.3s forwards;
}

.animate-slide-down {
    overflow: hidden;
}

.animate-slide-down:hover .animate-target,
.animate-slide-down:focus-visible .animate-target {
    animation: slide-down 0.3s forwards;
}

@keyframes slide-end {
    49% {
        transform: translate(100%);
    }

    50% {
        opacity: 0;
        transform: translate(-100%);
    }

    51% {
        opacity: 1;
    }
}

@keyframes slide-start {
    49% {
        transform: translate(-100%);
    }

    50% {
        opacity: 0;
        transform: translate(100%);
    }

    51% {
        opacity: 1;
    }
}

@keyframes slide-up {
    49% {
        transform: translateY(-100%);
    }

    50% {
        opacity: 0;
        transform: translateY(100%);
    }

    51% {
        opacity: 1;
    }
}

@keyframes slide-down {
    49% {
        transform: translateY(100%);
    }

    50% {
        opacity: 0;
        transform: translateY(-100%);
    }

    51% {
        opacity: 1;
    }
}

.animate-blinking {
    animation: blinking 1s infinite;
}

@keyframes blinking {
    from {
        opacity: 0;
    }
}

.animate-shake .animate-target::after,
.animate-pulse .animate-target::after,
.animate-rotate .animate-target::after,
.animate-scale .animate-target::after,
.animate-slide-end .animate-target::after,
.animate-slide-start .animate-target::after,
.animate-slide-up .animate-target::after,
.animate-slide-down .animate-target::after {
    display: none;
}

.animate-up-down {
    animation: move-up-down 5s linear infinite;
}

@keyframes move-up-down {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1rem);
    }
}

.animate-down-up {
    animation: move-down-up 5s linear infinite;
}

@keyframes move-down-up {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(1rem);
    }
}

.animate-spin {
    animation: spin 10s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.animate-blink {
    animation: blink 1.75s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

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

.hover-effect-scale {
    --fn-transition-duration: .35s;
    --fn-transform-scale: 1.06;
}

.hover-effect-scale .hover-effect-target {
    transition: transform var(--fn-transition-duration) ease-in-out;
}

.hover-effect-scale:hover .hover-effect-target,
.hover-effect-scale:focus-visible .hover-effect-target,
.hover-effect-scale:focus-within .hover-effect-target {
    transform: scale(var(--fn-transform-scale));
}

.hover-effect-opacity {
    --fn-transition-duration: .25s;
}

.hover-effect-opacity .hover-effect-target {
    transition: visibility var(--fn-transition-duration) ease-in-out, opacity var(--fn-transition-duration) ease-in-out;
}

.hover-effect-opacity:hover .hover-effect-target.opacity-0,
.hover-effect-opacity:focus-visible .hover-effect-target.opacity-0,
.hover-effect-opacity:focus-within .hover-effect-target.opacity-0 {
    visibility: visible !important;
    opacity: 1 !important;
}

.hover-effect-opacity:hover .hover-effect-target.opacity-100,
.hover-effect-opacity:focus-visible .hover-effect-target.opacity-100,
.hover-effect-opacity:focus-within .hover-effect-target.opacity-100 {
    visibility: hidden !important;
    opacity: 0 !important;
}

.hover-effect-scale.hover-effect-opacity .hover-effect-target {
    transition: all var(--fn-transition-duration) ease-in-out;
}

.hover-effect-underline:hover {
    text-decoration: underline !important;
    text-decoration-thickness: var(--fn-border-width) !important;
}

.dropdown-toggle::after {
    display: none !important;
}