:root {
    --primary-color: #0c2d57;
    --secondary-color: #cd4900;
    --green-color: #8DC63F;
    --soft-white: #e4eded;
    --black-color: #1F1F1F;
    --white-color: #fff;
    --secondary-filter-color: brightness(0) saturate(100%) invert(36%) sepia(57%) saturate(5828%) hue-rotate(15deg) brightness(92%) contrast(101%);
    --white-filter-color: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(5%) hue-rotate(123deg) brightness(101%) contrast(101%);
    --main-border: 1px solid rgb(12 45 87 / 10%);
    --line-height: 1.6rem;
    --ar-font-family: 'PingARLT';
    /* Dark */
    --primary-dark-color: #1d1d1d;
    --secondary-dark-color: #262626;
    --third-dark-color: #676767;
}

.dark-mode {
    --primary-color: #f07e01;
    --secondary-color: #f07e01;
    --main-border: 1px solid var(--third-dark-color)
}

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

body {
    line-height: var(--line-height);
    color: var(--primary-color) !important;
}

.dark-mode {
    color: var(--white-color);
    background-color: var(--primary-dark-color);
}

.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span {
    color: var(--white-color) !important;
}

html {
    scroll-behavior: smooth;
}

html,
body,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--line-height);
    font-feature-settings: "liga" 1, "kern" 0;
}

.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    /* margin: 5px 0px; */
}

h1 {
    font-size: 2rem;
}

h4 {
    font-size: 1.4rem;
    font-weight: 600;
}

h6 {
    font-size: .9rem;
    font-weight: 600;
}

p {
    margin: 0;
}

ul {
    padding: 0;
    padding-inline-start: 1.2rem;
    list-style: none;
}

a {
    text-decoration: none;
}

ul li::marker {
    color: var(--primary-color);
}

.arabic-version {
    direction: rtl;
    font-family: var(--ar-font-family);
}

.table>:not(caption)>*>* {
    color: var(--primary-color);
}

@media (min-width: 2030px) {
    :root {
        --container-width: 80vw;
    }

    html {
        font-size: 18px;
    }
}

@media (min-width: 1600px) and (max-width: 2030px) {
    :root {
        --container-width: 80vw;
    }

    html {
        font-size: 17px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --container-width: 1140px;
    }
}

@media (max-width:1199.98px) {
    :root {
        --container-width: 960px;
    }

    html {
        font-size: 15px;
    }
}

@media (max-width:991.98px) {
    :root {
        --container-width: 720px;
    }

    html {
        font-size: 15px;
    }
}

@media (max-width:767.98px) {
    :root {
        --container-width: 540px;
    }

}

@media (max-width:767.98px) {
    :root {
        --container-width: 100vw;
    }

    html {
        font-size: 12px;
    }
}

@media (min-width: 1600px) {

    .container,
    .container-fluid {
        max-width: 80%;
    }

    .container .container,
    .container .container-fluid,
    .container-fluid .container,
    .container-fluid .container-fluid {
        max-width: 100%;
    }
}


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Dark Btn */
.dark-btn {
    /* position: absolute; */
    z-index: 100;
    background-color: #fff;
    width: 4rem;
    height: 2rem;
    top: 10%;
    left: 5%;
    border-radius: 5rem;
    box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1),
        inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dark-btn .btn-indecator {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.dark-btn .btn-indecator .btn-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-btn .btn-indecator .btn-container .btn-icon {
    font-size: 0.9rem;
    color: #ffcc00;
}

.dark-btn .btn-indecator .btn-container .btn-icon.spin {
    animation: spin 0.5s;
}

.dark-mode .dark-btn {
    box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.3),
        inset 8px 0 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .dark-btn .btn-indecator {
    transform: translateX(-2rem);
}

.dark-mode .dark-btn .btn-indecator {
    background-color: #18191b;
}

.dark-mode .dark-btn .btn-indecator .btn-container .btn-icon {
    color: var(--white-color);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dark Btn */

/* Aspect Ratio */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-14-9 {
    aspect-ratio: 14 / 9;
}

.aspect-ratio-12-9 {
    aspect-ratio: 14 / 9;
}

.aspect-ratio-26-9 {
    aspect-ratio: 26 / 9;
}

/* Webkit box  */
.only-1-lines {
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(1* var(--line-height) + 2px);
}

.only-2-lines {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(2* var(--line-height) + 2px);
}

.only-3-lines {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(3* var(--line-height) + 2px);
}

.only-4-lines {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(4* var(--line-height) + 2px);
}

.default-image-class {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.cover-image-class {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Default Classes */
.text-primary-color {
    color: var(--primary-color);
}

.text-secondary-color {
    color: var(--secondary-color);
}


.text-black-color {
    color: var(--black-color);
}


.bg-primary-color {
    background-color: var(--primary-color);
}

.bg-secondary-color {
    background-color: var(--secondary-color);
}

.bg-soft-white {
    background-color: var(--soft-white);
}

.main-border {
    border: var(--main-border);
}

.radius-5 {
    border-radius: 5px !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.w-fit {
    width: fit-content !important;
}

.small-text {
    font-size: 14px;
}

.star-active {
    color: #FFC100 !important;
    opacity: 1 !important;
}

.icon-sar {
    width: 20px;
    height: 20px;
}

.tooltip {
    --bs-tooltip-bg: var(--primary-color);
}

@media (min-width: 768px) {
    .w-content {
        max-width: 120px;
    }
}

@media (max-width: 991.98px) {
    .table {
        width: 150%;
    }
}

@media (max-width: 425.98px) {
    .table {
        width: 250%;
    }
}

.dark-mode table td,
.dark-mode table th {
    background-color: var(--primary-dark-color);
    color: var(--white-color);
}

/* Arrows */
.arabic-version .fa-chevron-right,
.arabic-version .fa-chevron-left,
.arabic-version .fa-arrow-right,
.arabic-version .fa-arrow-left {
    scale: -1;
}


/* Swiper */
.swiper-button-next::after,
.swiper-button-prev::after,
.swiper-button-next svg,
.swiper-button-prev svg {
    display: none !important;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
    position: static;
}

.dark-mode .swiper-button-next,
.dark-mode .swiper-button-prev {
    background-color: var(--primary-color);
    color: var(--white-color) !important;
}

.dark-mode .swiper-button-next i,
.dark-mode .swiper-button-prev i {
    color: var(--white-color) !important;
}

@media (max-width: 1399.98px) {
    .swiper-control-container {
        display: none !important;
    }
}

.swiper-pagination-bullet {
    opacity: .3;
    background-color: var(--secondary-color) !important;
    transition: .3s;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--secondary-color) !important;
    border-radius: 10px;
}



.swiper-control-container {
    position: absolute;
    width: 98%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@media (max-width: 1599.98px) {
    .swiper-control-container {
        width: 95%;
    }
}

.swiper-control-container .swiper-button {
    box-shadow: 15px 15px 35px 0px #00000026;
}

.swiper-control-container .swiper-button:hover {
    background-color: var(--secondary-color);
}

.swiper-control-container .swiper-button:hover i {
    color: var(--white-color) !important;
}

.swiper-scrollbar {
    position: static !important;
    width: 15% !important;
    height: 6px !important;
}

@media (max-width: 991.98px) {
    .swiper-scrollbar {
        width: 50% !important;
    }
}

.swiper-scrollbar-drag {
    background: var(--secondary-color) !important;
}

/* Buttons */
.main-btn,
.secondary-btn {
    background-color: var(--soft-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 15px;
    border-radius: 10px;
    gap: 5px;
    color: var(--primary-color);
}

.dark-mode .main-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.secondary-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.main-btn:hover,
.secondary-btn:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.main-btn svg {
    width: 19px !important;
    height: 19px !important;
}

/* Main Title Section */
.main-title-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-title-section h1 {
    margin: 0;
    padding-inline-start: 1.2rem;
}

.main-title-section::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 8px;
    height: 100%;
    background-color: var(--primary-color);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px
}

/* Start Products Section */
.products-section .swiper-control-container {
    transform: unset;
}

.dark-mode .products-section .products-title-controller .main-btn {
    background-color: var(--primary-color);
}

.dark-mode .products-section .products-title-controller .main-btn i {
    color: var(--white-color);
}

.products-section .swiper-control-container .swiper-button {
    margin: 0;
}

.products-section .products-title {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.products-section .products-title::before {
    content: "";
    position: absolute;
    inset-inline-start: -5px;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 115%;
    background-color: var(--primary-color);
    border-top-right-radius: 10px;
    border-top-left-radius: 0;
}

.arabic-version .products-section .products-title::before {
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
}

.products-section .products-title h1 {
    padding-inline-start: 1.2rem;
    margin: 0;
}

.products-section .product-card {
    /* box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.031372549); */
    padding: 8px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: var(--main-border);
}

.dark-mode .products-section .product-card {
    background-color: var(--secondary-dark-color);
    box-shadow: unset;
}

.products-section .cat-stars i {
    font-size: 10px;
    color: #000;
    opacity: .1;
}

.dark-mode .products-section .cat-stars i,
.dark-mode .products-section .cat-link {
    color: var(--white-color);
}

.dark-mode .real-price picture,
.dark-mode .real-price img {
    filter: var(--white-filter-color);
}

/* .dark-mode .real-price h4 {
    color: var(--primary-color) !important;
} */

.products-section .cat-link {
    opacity: .6;
    font-weight: 600;
}


.line-price picture {
    filter: var(--secondary-filter-color);
}

.dark-mode .line-price {
    color: var(--white-color);
    opacity: .6 !important;
}

.dark-mode .line-price picture {
    filter: var(--white-filter-color);
}

.products-section .pages-btns .main-btn,
.products-section .product-card-image .main-btn {
    width: 41px;
    height: 41px;
}

.dark-mode .pages-btns .main-btn,
.dark-mode .favourite-btn {
    background-color: var(--soft-white);
    color: var(--primary-color);
}

.dark-mode .pages-btns .main-btn:hover,
.dark-mode .favourite-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.products-section .time-order h6,
.products-section .floating-offer h6 {
    font-size: 11px;
}

.products-section .favourite-btn,
.products-section .floating-offer {
    position: absolute;
    top: 30px;
    inset-inline-end: 0;
    transform: translate(-50%, -50%);
}

.arabic-version .favourite-btn {
    inset-inline-end: 30px;
}

.products-section .floating-offer {
    inset-inline-start: 4px;
    top: 0;
    padding: 2px 10px;
    transform: unset;
}

.products-section .add-cart-btn h6 {
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .products-section .add-cart-btn h6 {
        font-size: 9px;
    }
}

@media (max-width: 1399.98px) {
    .products-section .swiper-control-container {
        display: flex !important;
    }
}

@media (max-width: 575.98px) {
    .products-section .swiper-control-container {
        display: none !important;
    }
}


.products-section .swiper-pagination,
.hero-slider-center .swiper-pagination {
    display: none !important;
}

/* End Products Section */
/* Start Blog Section */
.blogs-section {
    display: none;
}
.dark-mode .blogs-section {
    background-color: var(--secondary-dark-color);
}

.dark-mode .blogs-section .blog-card {
    background-color: var(--primary-dark-color) !important;
}

.blog-card {
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    padding: 8px;
    border: var(--main-border);
    overflow: hidden;
}

.blog-card h6 {
    color: var(--primary-color);

}

.blog-card .floating-blog {
    position: absolute;
    bottom: -10px;
    inset-inline-end: -11px;
    background-color: var(--secondary-color);
    padding: 2px 10px;
    color: var(--white-color);
}

.blogs-section .swiper-control-container {
    width: 85%;
}

.blog-card picture img {
    aspect-ratio: 12 / 9;
}

@media (min-width: 1400px) {
    .blogs-section .swiper-pagination {
        display: none;
    }
}

/* End Blog Section */
/* Start Paths */
.paths {
    background-color: #f5f5f5;
}

.dark-mode .paths {
    border-bottom: 1px solid #d5d3d354;
}

.dark-mode .paths {
    background-color: var(--primary-dark-color);
}

.paths a {
    color: var(--primary-color);
}

.dark-mode .paths a {
    color: var(--white-color);
}

.paths p {
    font-size: 14px;
}

.paths p i {
    font-size: 10px;
}

/* End Paths */
/* Start Categories Section */
.categories-section picture {
    width: 90px;
    height: 90px;
}

.dark-mode .categories-section picture {
    background-color: var(--secondary-dark-color);
    border: 1px solid var(--third-dark-color);
}

.categories-section .swiper-control-container {
    width: 85%;
    top: 33%;
}

.categories-section h6 {
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .categories-section h6 {
        font-size: 12px;
    }
}

/* Start Nav Cart */
.nav-cart {
    position: fixed;
    width: 350px;
    height: 100%;
    z-index: 99999;
    top: 0;
    background: var(--white-color);
    inset-inline-start: -100%;
    transition: .8s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 425.98px) {
    .nav-cart {
        width: 260px;
    }
}

.nav-cart.show {
    inset-inline-start: 0;
}

.dark-mode .nav-cart {
    background-color: var(--secondary-dark-color);
}

.nav-cart .nav-cart-body {
    height: calc(100vh - 310px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.nav-cart .cart-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
}

.quantity__minus ,
.quantity__plus {
    width: 30px;
    height: 30px;
    border-radius: 50px !important;
    font-size: 14px;
    padding: 0;
}
.action-remove-from-cart-drawer {
    border-radius: 5px;
    position: absolute;
    inset-inline-end: 15px;
    top: 15%;
    transform: translate(-50%, -50%);
}
.dark-mode .cart-footer picture,
.dark-mode .modal-header .btn-close {
    filter: var(--white-filter-color);
}

.dark-mode .nav-cart i {
    color: var(--white-color) !important;
}

.dark-mode .cart-footer .footer-button .main-btn {
    background-color: var(--soft-white);
    color: var(--black-color);
}
.dark-mode .nav-cart-product,
.dark-mode .pricing-area ul,
.dark-mode .nav-cart-header {
    border-color: #ffffff1a !important;
}
.cart-drawer-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
/* End Nav Cart */
/* Login Modal */
.dark-mode .modal-content {
    background-color: var(--secondary-dark-color);
}

.whatsapp {
  position: fixed;
  bottom: 2%;
  inset-inline-start: 2%;
  z-index: 999;
  background-color: rgb(77, 194, 71) !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-decoration: none;
}
.whatsapp i {
  color: white;
  font-size: 2rem;
}