hr {
    border-top: 3px solid #ddd !important;
    margin: 30px 0 !important
}

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

@font-face {
    font-family: "data";
    src: url(fonts/woff/dana-bold.woff);
    src: url(fonts/woff2/dana-bold.woff2);
}

img {
    max-width: 100%;
    height: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    direction: rtl;
    font-size: 18px;
    text-align: right;
    font-family: "data";
    font-weight: 400;
}

.top-header {
    background: #ac8888;
    margin: 7px;
    font-weight: 100;
    border-radius: 13px;
}

.top-right-header {
    float: right;
}

.top-right-header span {
    float: right;
}

.top-left-header {
    float: left;
}

.top-left-header span {
    float: left;
}

.top-left-header span i {
    float: left;
    color: #9fdfff;
    margin-right: 5px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding-bottom: 18px;
}

.main-h-right {
    display: flex;
    align-items: center;
    width: 60%;
}

.main-h-right .logo {
    max-width: 169px;
}

.main-h-right .logo a {
    display: flex;
}

.main-h-right .logo a img {
    min-width: 169px;
}

.main-h-right .search-main {
    width: 100%;
    margin-right: 53px;
}

.main-h-right .search-main form {
    position: relative;
}

.main-h-right .search-main form input[type="search"] {
    background-color: rgb(177, 205, 255);
    border-radius: 10px;
    padding: 15px;
    width: 100%;
    padding-right: 40px;
}

.main-h-right .search-main form button {
    position: absolute;
    right: 10px;
    top: 15px;
    font-size: 20px;
    cursor: pointer;
    background: transparent;
}

.main-h-right .search-main {
    width: 100%;
    margin-right: 53px;
    position: relative;
}

.main-h-right .search-main form {
    position: relative;
    width: 100%;
}

.main-h-right .search-main form input[type="search"] {
    width: 100%;
    padding: 18px 55px 18px 25px;
    font-size: 16px;
    background: linear-gradient(135deg, #fff, #f8f9ff);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 60px;
    outline: none;
    transition: all 0.3s ease;
    color: #333;
    font-weight: 500;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.main-h-right .search-main form input[type="search"]:focus {
    border-color: #667eea;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2), 0 0 0 4px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
    background: white;
}

.main-h-right .search-main form button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.main-h-right .search-main form button:hover {
    transform: translateY(-50%) scale(1.08);
    background: linear-gradient(135deg, #5a67d8, #6b46a0);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.main-h-right .search-main form button:active {
    transform: translateY(-50%) scale(0.96);
}

.main-h-right .search-main form input[type="search"]:not(:placeholder-shown) {
    background: white;
    border-color: #764ba2;
}

.main-h-right .search-main {
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

.main-h-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.favorite-btn-header {
    background-color: rgb(178, 224, 255);
    color: #006aff;
    text-decoration: none;
    padding: 7px;
    border-radius: 9px;
    border: 4px double rgb(178, 224, 255)
}

.favorite-btn-header a {
    color: #006aff;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 17px;
}

.favorite-btn-header>a i {
    font-size: 19px;
    margin-left: 5px;
}

.cart-btn-header a {
    background-color: rgb(178, 224, 255);
    color: #006aff;
    text-decoration: none;
    padding: 7px;
    border-radius: 9px;
    border: 2px double rgb(178, 224, 255);
}

.main-h-left .cart-btn-header a .cart-btn-text {
    padding-left: 10px;
    border-left: 1px solid rgb(197, 155, 252);
}

.text-btn-num {
    margin-right: 5px;
}

section .down-beader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-menu {
    display: flex;
    align-items: center;

}

.megamenu {
    border-left: 1px solid darkblue;
    padding-left: 10px;
    font-weight: 450;
    margin-right: 20px;
    cursor: pointer;
    position: absolute;

}

.megamenu .title-menu {
    color: rgb(2, 19, 87);
}

.menu-header>ul>li {
    display: inline-block;
    list-style: none;
    margin: 15px;
    position: relative;

}

.menu-header>ul>li a {
    color: #002aff;
    text-decoration: none;
    padding: 14px 0px;
}

.menu-header>ul>li a:hover {
    border-bottom: 1px solid rgb(34, 69, 139);
    color: rgb(169, 234, 255);
}

.menu-header>ul>li>ul {
    position: absolute;
    width: 150px;
    top: 80px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 3px 3px 10px 0px rgb(38, 18, 139);
    padding: 7px 0px;
    right: -17px;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 999;
}

.menu-header>ul>li:hover ul {
    opacity: 1;
    visibility: visible;
    top: 45px;

}

.menu-header>ul>li>ul>li>a {
    padding: 7px 14px;
    display: block;
}

.menu-header>ul>li>ul>li>a:hover {
    font-size: 19px;
    color: rgb(124, 165, 253);
}

.megamenu {
    position: relative;
    display: inline-block;
}

.mok-megamenu>ul {
    position: absolute;
    left: 0;
    top: 100%;
    width: 270px;
    background: white;
    box-shadow: 0px 5px 10px 0px rgba(29, 93, 255, 0.454);
    padding: 12px;
    margin: 0;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 100;
    border-radius: 20px;
    margin-top: 10px;
    padding-right: 0px;
}

.mok-megamenu>ul>li {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.megamenu:hover>.mok-megamenu>ul {
    visibility: visible;
    opacity: 1;
    top: 40px;
}

.mok-megamenu>ul:before {
    content: "";
    position: relative;
    width: 100%;
    height: 40px;
    top: -20px;
}

.mok-megamenu>ul>li:hover {
    background-color: rgb(219, 238, 255);
}

.mok-megamenu>ul>li:hover>a {
    color: #49adff;
}

.mok-megamenu>ul>li>a {
    padding: 5px;
    color: #0077ff;
}

.mok-megamenu>ul>li>i {
    margin-left: 3px;
    color: darkblue;
}

.mok-megamenu>ul>li>ul {
    position: absolute;
    background: #cbe3ff;
    right: 100%;
    top: 0px;
    width: 900px;
    display: flex;
    padding: 0px;
    height: 100%;
    box-shadow: 0px 5px 10px 0px rgba(0, 35, 124, 0.608);
    border-radius: 20px;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.mok-megamenu>ul>li:hover>ul {
    visibility: visible;
    opacity: 1;
}

.mok-megamenu>ul>li>ul>li {
    width: 33%;

}

.mok-megamenu>ul>li>ul>li>a {
    color: #3f8afc;
    border-right: 3px solid rgb(175, 202, 253);
    padding: 5px;
}

.mok-megamenu>ul>li>ul>li>ul {
    padding-right: 0px;
    margin-top: 20px;
}

.mok-megamenu>ul>li>ul>li>ul>li>a {
    color: #195b7c;
    display: block;
    padding: 10px;
    font-size: 16px;
}

.mok-megamenu>ul>li>ul>li>ul>li>a:hover {
    font-size: 18px;
}

.main-slider img {
    width: auto;
    height: 200px;
}

.main-slider .owl-stage-outer {
    border: 4px solid #49adff;
    border-radius: 20px;
    box-shadow: 0px 10px 20px 0px rgba(28, 75, 192, 0.454);
}

.main-slider .owl-theme .owl-dots {
    position: absolute;
    bottom: -45px;
    width: 100%;
}

.main-slider .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.main-slider .owl-dot {
    display: inline-block;
    margin: 0 5px;
}

.main-slider .owl-dot span {
    background: #21429e !important;
    width: 30px !important;
    height: 10px !important;
    display: inline-block !important;
    border-radius: 5px !important;
}

.main-slider .owl-theme .owl-dots button span {
    background: #6b81bd;
    width: 10px;
    height: 10px;
    margin: 2px 3px;
}

.main-slider .owl-dots .active span {
    background: #b0d1ff !important;
    width: 18px !important;
}

.main-slider .owl-item {
    text-align: center;
}

.main-slider img {
    width: 50%;
    height: auto;
    display: inline-block;
}

.main-slider .owl-carousel .owl-nav button {
    position: absolute;
    background-color: #9fdfff;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    justify-self: center;
    align-items: center;
    opacity: 0;
}

.main-slider:hover .owl-carousel .owl-nav button {
    opacity: 1;
}

.main-slider .owl-carousel .owl-nav button:hover {
    background: #19337c;
    color: #9ecefd;

}

.main-slider .owl-carousel .owl-nav button.owl-next {
    right: 80px;
}

.main-slider .owl-carousel .owl-nav button.owl-prev {
    right: 35px;
}

.owl-theme .owl-nav {
    margin-top: -56px;
}

.main-menu,
.register-btn {
    all: unset;
}

.favorite-btn-header,
.cart-btn-header a {
    position: relative;
    display: inline-block;
    background: rgb(178, 224, 255);
    border-radius: 9px;
    padding: 7px;
}

.favorite-btn-header {
    border: 4px double rgb(178, 224, 255);
}

.favorite-btn-header::before,
.cart-btn-header a::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ff0000, #f6ff00, #00ff0d, #00f2ff, #0303ff, #6302ff, #ff00bb, #ff029e, #ff6200);
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    animation: rainbowGlow 4s linear infinite;
    border-radius: 12px;
}

.favorite-btn-header::after,
.cart-btn-header a::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgb(178, 224, 255);
    z-index: -1;
    border-radius: 7px;
}

@keyframes rainbowGlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 400% 0%;
    }
}

.register-btn {
    align-items: center;
    gap: 5px;
    margin-left: 20px;
    color: rgb(15, 32, 90);
    float: left;
    margin-top: -90px;
    margin-left: -200px;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}

.megamenu {
    border-left: 1px solid darkblue;
    padding-left: 10px;
    font-weight: 450;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.menu-header {
    display: flex;
    align-items: center;

}

.menu-header>ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}


.menu-header>ul>li {
    position: relative;
}

.menu-header>ul>li:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(circle, rgba(47, 0, 255, 0.097), transparent);
    border-radius: 10px;
    opacity: 0;
    transition: 0.290s;
    z-index: -1;
}

.menu-header>ul>li:hover::before {
    opacity: 1;
    transform: scale(1.05);
}

.top-header {
    background: linear-gradient(135deg, #0c2d48, #1e5799, #2b8cbe);
    margin: 7px;
    border-radius: 20px;
    padding: 20px 25px;
    box-shadow: 0 15px 35px rgb(255, 255, 255);
    color: #9fdfff
}

.main-h-right .search-main {
    width: 100%;
    margin-right: 53px;
}

.main-h-right .search-main form {
    position: relative;
    width: 100%;
}

.main-h-right .search-main form input[type="search"] {
    width: 100%;
    padding: 18px 55px 18px 25px;
    font-size: 16px;
    background: #f8fafc;
    border: none;
    border-radius: 16px;
    outline: none;
    transition: all 0.3s;
    color: #0f172a;
    font-weight: 500;
    box-shadow: 0 2px 5px rgb(255, 255, 255);
}

.main-h-right .search-main form input[type="search"]:focus {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(30, 87, 153, 0.2);
}

.main-h-right .search-main form button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #1e5799;
    border: none;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-h-right .search-main form button:hover {
    background: #00d2ff;
    transform: translateY(-50%) scale(1.02);
}

🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵🩵 .menu-header>ul>li>ul {
    position: absolute;
    width: 180px;
    top: 45px;
    left: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 3px 3px 10px 0px rgb(38, 18, 139);
    padding: 7px 0px;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 999;
}

.menu-header>ul>li:hover ul {
    opacity: 1;
    visibility: visible;
}

.menu-header>ul>li>a::before {
    content: '⤸';
    font-size: 35px;
    margin-right: 6px;
    display: inline-block;
    transition: 0.2s;
}

.menu-header>ul>li:hover>a::before {
    transform: rotate(180deg);
}

🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹🛹 .mok-product {
    margin-top: 115px;
}

.mok-product .title-pro h5 {
    margin-bottom: 24px;
}

.mok-product .title-pro h5 a {
    color: #0d0366;
    border-bottom: 3px solid #207ad3;
    padding: 5px;
    font-size: 22px;
}

.product-slider .product-item {
    background: white;
    box-shadow: 5px 5px 10px 5px rgb(166, 225, 245);
    margin: 13px 15px;
    border-radius: 20px;
}

🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄 .product-item .color-dis {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-item .color-dis .color ul {
    padding-right: 4px;
}

.product-item .color-dis .color ul li {
    float: right;
}

.product-item .color-dis .color ul li span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: right;
    margin-left: 5px;
}

.product-item .color-dis .discount {
    background-color: lightblue;
    border-radius: 5px;
    font-size: 15px;
    padding: 3px;
    color: #0166fd;
}

.product-item h2 {
    font-size: 19px;
    margin-top: 20px;
    overflow: hidden;
    height: 50px;
    line-height: 20px;
}

.product-item h2 a {
    color: #0051ff;
}

.product-item .down {
    display: flex;
    justify-content: space-between;
}

.product-item .down .addtocart-btn>a {
    display: flex;
    color: #055eb8;
    font-size: 30px;
    margin-top: 14px;
    margin-right: 13px;
}

.product-item .down .price {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    position: relative;
    margin-left: 30px;
}

.product-item .down .price del {
    font-size: 16px;
    color: #060861;
    opacity: 0.7;
}

.product-item .down .price ins {
    text-decoration: none;
    color: #629df5;
    font-weight: bold;
    font-size: 18px;
}

.product-item .down .price ins samp {
    position: absolute;
    rotate: 270deg;
    opacity: 0.7;
    left: -33;
    top: 13px;
    font-size: 15px;
}

.product-item .down .addtocart-btn>a {
    transition: all 0.2s ease;
    background: #f0f8ff;
    border-radius: 50%;
    padding: 8px;
    width: 45px;
    height: 45px;
    justify-content: center;
    align-items: center;
}

.product-item .down .addtocart-btn>a:hover {
    background: #207ad3;
    color: white !important;
    transform: scale(1.1) rotate(5deg);
}


.product-item .color-dis .color ul li span {
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.product-item .color-dis .color ul li span:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px white, 0 0 0 3px #207ad3;
    cursor: pointer;
}

:root {
    --primary: #0f0c29;
    --secondary: #302b63;
    --accent: #207ad3;
    --accent-glow: #4facfe;
    --card-bg: rgba(255, 255, 255, 0.95);
    --gradient-btn: linear-gradient(135deg, #207ad3, #4facfe);
    --gradient-discount: linear-gradient(135deg, #ff416c, #ff4b2b);
    --shadow-sm: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 20px 25px 45px -12px rgba(32, 122, 211, 0.3);
    --shadow-hover: 0 25px 40px -12px rgba(32, 122, 211, 0.5);
}

💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥 .mok-product {
    margin-top: 115px;
    padding: 20px 0 50px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.mok-product .title-pro {
    text-align: center;
    margin-bottom: 40px;
}

.mok-product .title-pro h5 {
    display: inline-block;
    margin-bottom: 24px;
    position: relative;
}

.mok-product .title-pro h5 a {
    color: #0d0366;
    font-size: 28px;
    font-weight: 800;
    padding: 5px 15px;
    background: linear-gradient(120deg, #207ad3 0%, #207ad3 40%, transparent 40%);
    background-repeat: no-repeat;
    background-size: 0% 3px;
    background-position: bottom left;
    transition: all 0.4s ease;
    text-decoration: none;
}

.mok-product .title-pro h5 a:hover {
    background-size: 100% 3px;
    color: #207ad3;
}

🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟🍟

/* ========== PRODUCT CARD - NEXT LEVEL ========== */
.product-slider .product-item {
    background: var(--card-bg);
    backdrop-filter: blur(0px);
    border-radius: 28px;
    margin: 20px 15px;
    padding: 15px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.product-slider .product-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(32, 122, 211, 0.1), rgba(79, 172, 254, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product-slider .product-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: var(--shadow-hover);
    border-color: rgba(32, 122, 211, 0.3);
}

.product-slider .product-item:hover::before {
    opacity: 1;
}

.product-item .product-img {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.product-item .product-img img {
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.product-item:hover .product-img img {
    transform: scale(1.1);
}

.product-item .color-dis .discount {
    background: var(--gradient-discount);
    border-radius: 30px;
    font-size: 13px;
    padding: 5px 12px;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(65, 163, 255, 0.699);
    position: relative;
    overflow: hidden;
}

.product-item .color-dis .discount::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.product-item .color-dis .discount:hover::before {
    left: 100%;
}

.product-item .color-dis .color ul li span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    float: right;
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.product-item .color-dis .color ul li span:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(32, 122, 211, 0.4);
}

.product-item .color-dis .color ul li span.active {
    box-shadow: 0 0 0 3px #207ad3;
}

.product-item h2 {
    font-size: 18px;
    margin-top: 18px;
    height: 52px;
    line-height: 26px;
    overflow: hidden;
}

.product-item h2 a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 600;
    display: inline-block;
}

.product-item h2 a:hover {
    color: var(--accent);
    transform: translateX(-5px);
}

🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧 .product-rating {
    direction: ltr;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-rating .stars {
    display: flex;
    gap: 3px;
}

.product-rating .stars i {
    color: #079cff;
    font-size: 13px;
    transition: all 0.1s;
}

.product-rating .stars i:hover {
    transform: scale(1.2);
}

.product-rating span {
    color: #888;
    font-size: 11px;
}

.product-item .down {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.product-item .down .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
}

.product-item .down .price del {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.product-item .down .price ins {
    text-decoration: none;
    color: var(--accent);
    font-weight: 800;
    font-size: 20px;
    background: linear-gradient(135deg, #207ad3, #4facfe);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.product-item .down .price ins::after {
    content: "تومان";
    font-size: 11px;
    margin-right: 4px;
    background: none;
    -webkit-text-fill-color: #888;
    font-weight: normal;
}

.product-item .down .addtocart-btn>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #f5f7fa, #e8ecf1);
    border-radius: 50%;
    color: var(--accent);
    font-size: 22px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.product-item .down .addtocart-btn>a:hover {
    background: var(--gradient-btn);
    color: white !important;
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 8px 20px rgba(32, 122, 211, 0.4);
}

.product-item .down .addtocart-btn>a:active {
    transform: scale(0.95);
}

.product-item {
    background-color: #ffffff;
    box-shadow: 5px 5px 10px 0px rgb(255, 255, 255);
    margin: 13px 15px;
    padding: 10px 15px;
    border-radius: 20px;
}

.quick-view-trigger {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: bold;
    color: var(--accent);
    cursor: pointer;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.product-item:hover .quick-view-trigger {
    transform: translateX(0);
    opacity: 1;
}

.wishlist-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    transform: translateY(-20px);
}

.product-item:hover .wishlist-btn {
    opacity: 1;
    transform: translateY(0);
}

.wishlist-btn i {
    color: #00025c;
    font-size: 18px;
    transition: all 0.2s;
}

.wishlist-btn:hover i {
    transform: scale(1.2);
}

.wishlist-btn.active i {
    animation: heartBeat 0.3s ease;
}

@keyframes heartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

.product-item.skeleton {
    position: relative;
    overflow: hidden;
}

.product-item.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

@media (max-width: 768px) {
    .mok-product {
        margin-top: 60px;
    }

    .product-slider .product-item {
        margin: 15px 8px;
        padding: 12px;
    }

    .product-item .down .price ins {
        font-size: 16px;
    }

    .product-item .down .addtocart-btn>a {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}

.discount {
    background: #207ad3;
    border-radius: 20px;
    font-size: 12px;
    padding: 4px 10px;
    color: white;
    font-weight: bold;
}

.product-item .color-dis .discount {
    background: rgba(80, 190, 253, 0.589);
    font-size: 16px;
    padding: 8px 15px;
    color: #0084ff;
    font-weight: 60;
}

.product-item .color-dis .discount {
    background: linear-gradient(135deg, #1a2a3a, #0d1a2a);
    border-left: 4px solid #ffd700;
    border-radius: 0 20px 20px 0;
    font-size: 14px;
    padding: 8px 16px;
    color: #ffd700;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

.product-item .color-dis .discount::before {
    content: '✦';
    margin-left: 8px;
    font-size: 12px;
    color: #ffd700;
}

.product-slider .product-item {
    border-radius: 25px;
    border: 2px solid #ffe0e8;
}

body .mok-product {
    background: #ffffff !important;
    background-image: none !important;
}

🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋🦋 .amazing-slider {
    background: #051d8b;
    border-radius: 20px;
    box-shadow: 5px 5px 10px 0px rgb(147, 217, 255);
    margin-top: 112px;
}

.amazing-slider {
    background: linear-gradient(45deg, #0062ff, #00aeff, #002990, #00aeff);
    background-size: 300% 300%;
    border-radius: 20px;
    animation: gradientMove 4s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.amazing-product .amazing-thumbnail img {
    max-width: 300px;
    margin: 15px auto;
}

.amazing-product .amazing-btn {
    text-align: center;
}

.amazing-product .amazing-btn a {
    background: #ffffff !important;
    color: #008ada !important;
    border-radius: 20px !important;
    padding: 10px 25px !important;
    margin-top: 40px !important;
    display: inline-flex !important;
    font-weight: bold !important;
    align-items: center !important;
}

.amazing-product .amazing-btn a i {
    font-size: 20px;
    margin-right: 6px;
}

.mok-product {
    margin-top: 1px;
}

.amazing-product .countdown-timer {
    display: flex;
    justify-content: center;
}

.amazing-product .countdown-timer .number {
    background: #b1d8ff;
    color: #000;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amazing-product .countdown-timer span.dot {
    color: #0c005a;
    font-size: 25px;
    margin: 0 2px;
}

.amazing-product .owl-theme .owl-nav {
    display: none;
}


/* خرااااااب */
🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀🏀

/* this is correct */
.special-box h4 {
    color: #0a0079;
    font-size: 28px;
}

/* this is correct */
.special-box {
    position: relative;
    padding: 15px 40px 50px 0px;
}

/* this is correct */
.special-box::before {
    content: "";
    background: #7bb4f5;
    width: 40%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 30px;
    z-index: -1;
}

/* this is correct */
.special-box::after {
    content: "";
    background: #7bb4f5;
    width: 40%;
    position: absolute;
    right: 7%;
    top: 0px;
    bottom: 0px;
    border-radius: 30px;
    transform: translate(-55px, 0px)skew(-15deg, 0deg);
    z-index: -1;
    padding: 10px;
}

/* this is correct */
.special-box .owl-stage-outer {
    background-color: #ffffff;
    border: 1px solid rgb(157, 216, 255);
    box-shadow: 5px 5px 10px 0px rgb(103, 178, 248);
    border-radius: 10px;
    width: 70%;
}

/* this is correct */
.special-box .special-item {
    display: flex;
    padding: 25px;
    width: 1200px;
    position: relative;
}

/* this is correct */
.special-box .special-item figure {
    width: 20%;
}

/* this is correct */
.special-box .special-item .color {
    display: flex;
    justify-content: center;
}

/* this is correct */
.special-box .special-item .color ul {
    padding-right: 0px;
}

/* this is correct */
.special-box .special-item .color ul li {
    float: right;
}

/* this is correct */
.special-box .special-item .color ul li span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: right;
    margin-left: 5px;
}

/* this is correct */
.special-box .special-item figure img {
    max-width: 250px;
}

.special-box .owl-carousel .owl-theme .special-slider {
    width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    width: 100%;
}

/* this is correct */
.special-box .special-item .det-special {
    width: 77%;
}

/* this is correct */
.special-box .special-item .det-special h2 {
    font-size: 21px;
    margin-bottom: 20px;
}

/* this is correct */
.special-box .special-item .det-special h2 {
    color: #8ac5fc;
}

/* this is correct */
.special-box .special-item .det-special .additional-product {
    display: flex;
    flex-direction: column;
    max-height: 145px;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 7px 0px;
    margin-right: 10px;
    margin-bottom: 30px;
}

/* this is correct */
.special-box .special-item .det-special .additional-product .product-item {
    display: flex;
    gap: 6px;
}

/* this is correct */
.special-box .special-item .det-special .additional-product .product-item i {
    color: #025e21;
    font-size: 10px;
    margin-left: 2px;
    color: #00ff0d;
    font-weight: bold;
}

/* this is correct */
.special-box .special-item .det-special .down {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* this is correct */
.special-box .special-item .det-special .down a {
    background: #0088ff;
    color: #ffffff;
    border-radius: 11px;
    padding: 10px;
    margin-right: 12px;
}

/* this is correct */
.special-box .special-item .det-special .down .price {
    display: flex;
    gap: 10px;
}

/* this is correct */
.special-box .special-item .det-special .down .price del {
    font-size: 16px;
    font-weight: 700;
    color: #77adf8;

}

/* this is correct */
.special-box .special-item .det-special .down .price ins {
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #0136c6;
}

/* this is correct */
.special-box .special-item .det-special .down .price ins span {
    font-size: 15px;
}

/* this is correct */
.special-box .special-item .discount {
    position: absolute;
    background: #b7dbfd;
    left: 333px;
    top: 0;
    width: 60px;
    height: 72px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    color: #000478;
    padding-top: 15px;
}

🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟

/*پر فروش ترین */
.box-sell {
    display: flex;
    justify-content: space-between;
}

.box-sell .best-sell {
    background: #00034c;
    border-radius: 20px;
    padding: 15px 20px;
    position: relative;
    width: 270px;

}

.box-sell .best-sell head {
    display: flex;
    justify-content: center;
    font-size: 20px;
}

.box-sell .best-sell .head p {
    color: #002990;
    font-weight: bold;
}

.box-sell .best-sell figure {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 5px auto;
    overflow: hidden;
    padding: 5px;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px white;
    }

    100% {
        box-shadow: 0 0 10px 20px rgba(255, 255, 255, 0.732);
    }
}

.box-sell .best-sell figure img {
    max-width: 140px;
    margin: auto;
    display: block;
    border-radius: 50%;
}

.box-sell .best-sell h2 {
    overflow: hidden;
    padding: 40px 10px;
    line-height: 22px;
}

.box-sell .best-sell h2 a {
    font-size: 22px;
    color: white;
    font-weight: 450px;
}

.box-sell .best-sell .price {
    display: flex;
    gap: 24px;
    justify-content: space-evenly;
    color: #ffffff;
    margin: 18px 0px;
}

.box-sell .best-sell .price del {
    font-size: 15px;
    opacity: 0.7;
    font-weight: 450px;
}

.box-sell .best-sell .price ins {
    text-decoration: none;
    font-size: 18px;
    font-weight: 700px;
}

.box-sell .best-sell .price ins span {
    font-size: 14px;
}

.box-sell .best-sell .addtocart-btn {
    position: absolute;
    left: 112px;
    bottom: -25;
}

.box-sell .best-sell .addtocart-btn a i {
    background: #ffffff;
    color: #000469;
    border-radius: 50px;
    font-size: 40px;
    padding: 5px;
}

.other-sell {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-right: 10px;
    position: relative;
    left: 75%;
    transform: translateX(-100%);
}

.other-sell .product-sell {
    width: 30%;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 156);
    border-radius: 15px;
    padding: 10px;
    flex-grow: 1;
    width: 40%;
    height: 180px;
}

.other-sell .product-sell figure {
    float: right;
    margin-left: 15px;
}

.other-sell .product-sell figure img {
    max-width: 90px;
}

.other-sell .product-sell h2 {
    line-height: 25px;
    height: 30px;
    overflow: hidden;
    margin-top: 10px;
}

.other-sell .product-sell h2 a {
    color: #77adf8;
    font-size: 21px;

}

.other-sell .product-sell .down {
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
}

.other-sell .product-sell .number {
    background: #440074;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.other-sell .product-sell .price del {
    color: #400150;
}

.other-sell .product-sell .price ins {
    color: #400046;
    text-decoration: none;
}

🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟

/* خراااااااب  */
.title-brand {
    text-align: center;
}

.title-brand h4 {
    background: #2431c3;
    display: inline-block;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 30px 30px 0px 0px;
    font-weight: 700;
    font-size: 18px;
}

.box-brand {
    background: #fffaf1;
    box-shadow: 5px 5px 10px 0px rgb(78, 146, 255);
    border-radius: 21px;
}

.brand-slider .inner-brand {
    width: 88%;
    margin: auto;
}

.brand-slider .inner-brand .item-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    margin-top: 10px;

}

.brand-slider .inner-brand .item-brand img {
    max-width: 120px;
}

.box-brand .owl-carousel .owl-nav button {
    position: absolute;
    background-color: darkblue;
    width: 75px;
    height: 45px;
    top: 50px;
    color: #079cff;
}

.box-brand .owl-carousel .owl-nav button:hover {
    background-color: #00025c;
    color: lightblue;
}

.box-brand .owl-carousel .owl-nav button.owl-prev {
    right: -5%;
    border-radius: 50px 0px 0px 50px;
}

.box-brand .owl-carousel .owl-nav button.owl-next {
    left: -5%;
    border-radius: 0px 50px 50px 0px;
}

.box-brand .owl-carousel .owl-nav button.owl-next::before {
    content: "<<";
}

.box-brand .owl-carousel .owl-nav button.owl-next::before {
    content: ">>";
}

/* خراب بالایی */
🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟

/* برای چیز های ضروری */
.mok-service {
    display: flex;
    gap: 10px;
}

.mok-service .service-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    box-shadow: 0px 0px 11px 0px lightblue;
    border-radius: 30px;
}

.mok-service .service-item img {
    max-width: 200px;
    margin: 0 auto 10px;
}

.special-box .owl-stage-outer {
    width: 70%;
    /* این رو به 100% یا یک مقدار ثابت مثل 900px تغییر بده */
}

/* ===== درست کردن کشیدگی سرویس‌ها ===== */
.mok-service {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

.mok-service .service-item {
    flex: 0 0 calc(25% - 15px) !important;
    min-width: 150px !important;
    max-width: 250px !important;
    padding: 20px 10px !important;
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
}

.mok-service .service-item img {
    max-width: 80px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 10px !important;
}

.mok-service .service-item span {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    display: block !important;
}

.mok-service {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-evenly !important;
    /* فاصله مساوی بین همه */
    align-items: center !important;
    gap: 15px !important;
    max-width: 1100px !important;
    margin: 30px auto !important;
}

.mok-service .service-item {
    flex: 0 0 auto !important;
    width: 22% !important;
    min-width: 150px !important;
    text-align: center !important;
    padding: 20px 10px !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ===== تراز کردن نهایی سرویس‌ها (ارسال سریع، مرجع، پشتیبان) ===== */
.mok-service {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    /* این همه رو هم‌قد می‌کنه */
    gap: 20px !important;
    max-width: 1100px !important;
    margin: 30px auto !important;
    padding: 10px !important;
}

.mok-service .service-item {
    flex: 1 1 200px !important;
    max-width: 250px !important;
    min-width: 160px !important;
    text-align: center !important;
    padding: 25px 15px !important;
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.mok-service .service-item img {
    max-width: 70px !important;
    height: auto !important;
    margin-bottom: 12px !important;
}

.mok-service .service-item span {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #222 !important;
    display: block !important;
}

/* وقتی موس می‌بری روش یه افکت قشنگ */
.mok-service .service-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* برای موبایل: ۲ تا کنار هم */
@media (max-width: 768px) {
    .mok-service .service-item {
        flex: 1 1 150px !important;
        max-width: 180px !important;
        min-width: 130px !important;
        padding: 15px 10px !important;
    }

    .mok-service .service-item img {
        max-width: 50px !important;
    }

    .mok-service .service-item span {
        font-size: 13px !important;
    }
}

/* برای گوشی‌های خیلی کوچیک: ۱ تا کامل */
@media (max-width: 480px) {
    .mok-service .service-item {
        flex: 1 1 100% !important;
        max-width: 200px !important;
    }
}

/* ===== درست کردن بخش پرفروش‌ترین ===== */
.box-sell {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 10px !important;
}

/* باکس اصلی پرفروش‌ترین */
.box-sell .best-sell {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    background: linear-gradient(145deg, #0c0a2e, #1a1a5e) !important;
    border-radius: 25px !important;
    padding: 25px 20px !important;
    text-align: center !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

.box-sell .best-sell figure {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 5px !important;
    animation: pulse-animation 2s infinite !important;
}

.box-sell .best-sell figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.box-sell .best-sell h2 {
    margin: 15px 0 !important;
    height: auto !important;
    padding: 0 !important;
}

.box-sell .best-sell h2 a {
    color: white !important;
    font-size: 18px !important;
}

.box-sell .best-sell .price {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    color: white !important;
    margin: 15px 0 !important;
}

.box-sell .best-sell .price del {
    opacity: 0.6 !important;
    font-size: 14px !important;
}

.box-sell .best-sell .price ins {
    text-decoration: none !important;
    font-size: 20px !important;
    color: #ffd700 !important;
    font-weight: bold !important;
}

.box-sell .best-sell .addtocart-btn {
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.box-sell .best-sell .addtocart-btn a i {
    background: white !important;
    color: #000469 !important;
    border-radius: 50% !important;
    font-size: 35px !important;
    padding: 8px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.box-sell .best-sell .addtocart-btn a i:hover {
    transform: scale(1.1) !important;
    background: #ffd700 !important;
    color: #000 !important;
}

/* بخش محصولات کناری (4 تا عکس) */
.other-sell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    flex: 1 !important;
    min-width: 300px !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
}

.other-sell .product-sell {
    flex: 1 1 calc(50% - 15px) !important;
    min-width: 200px !important;
    max-width: 100% !important;
    background: white !important;
    border-radius: 15px !important;
    padding: 15px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    height: auto !important;
    min-height: 120px !important;
    transition: all 0.3s ease !important;
}

.other-sell .product-sell:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.other-sell .product-sell figure {
    flex: 0 0 80px !important;
    margin: 0 !important;
    float: none !important;
}

.other-sell .product-sell figure img {
    max-width: 80px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

.other-sell .product-sell .info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.other-sell .product-sell h2 {
    margin: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

.other-sell .product-sell h2 a {
    font-size: 16px !important;
    color: #1a1a5e !important;
    text-decoration: none !important;
}

.other-sell .product-sell .down {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: auto !important;
    margin: 0 !important;
}

.other-sell .product-sell .number {
    background: #1a1a5e !important;
    color: white !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.other-sell .product-sell .price {
    display: flex !important;
    gap: 10px !important;
    align-items: baseline !important;
}

.other-sell .product-sell .price del {
    color: #999 !important;
    font-size: 12px !important;
}

.other-sell .product-sell .price ins {
    color: #1a1a5e !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* ===== واکنش‌گرا (Responsive) ===== */
@media (max-width: 992px) {
    .box-sell {
        flex-direction: column !important;
        align-items: center !important;
    }

    .box-sell .best-sell {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 400px !important;
    }

    .other-sell {
        width: 100% !important;
        min-width: auto !important;
    }

    .other-sell .product-sell {
        flex: 1 1 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .other-sell .product-sell {
        flex-direction: column !important;
        text-align: center !important;
        min-height: auto !important;
    }

    .other-sell .product-sell .down {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

.brand-slider .item {
    padding: 8px;
}

.brand-slider .item img {
    width: 100%;
    border-radius: 15px;
    display: block;
}

.brand-slider .owl-stage {
    display: flex;
    align-items: center;
}

.footer {
    background: white;
    border-top: 1px solid white;
    margin-top: 40px;
    padding-top: 40px;
    box-shadow: 0px 0px 10px 0px grey;
}

.footer-box {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}

.footer-box .footer-widght {
    flex-grow: 1;
}

.footer-box .footer-about {
    width: 30%;
}

.footer-box .footer-widght h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-box .footer-widght .f-w-content {
    color: #5e5e5e;
    line-height: 30px;
    text-align: justify;
    font-size: 15px;
}

.footer-box .footer-widght .f-w-content ul {
    padding-right: 0px;
}

.footer-box .footer-widght .f-w-content ul li a {
    color: grey;
}

/* جلوگیری از اسکرول افقی */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ========================================= */
/* بخش سرویس ها و امکانات (Mok Service) */
/* ========================================= */

.mok-product .mok-service {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    /* فاصله بین باکس‌ها */
    flex-wrap: wrap;
    /* برای ریسپانسیو شدن در موبایل */
    padding: 50px 20px;
    margin-bottom: 30px;
    position: relative;
}

/* استایل خود باکس‌ها (کارت‌ها) */
.mok-product .service-item {
    background: #ffffff;
    width: 170px;
    /* عرض کارت */
    height: 170px;
    border-radius: 24px;
    /* گوشه‌های گرد */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    /* سایه ملایم و شیک */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* انیمیشن نرم پرشی */
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* افکت زمانی که ماوس روی کارت می‌رود (Hover) */
.mok-product .service-item:hover {
    transform: translateY(-12px) scale(1.02);
    /* کارت بالا می‌رود و کمی بزرگ می‌شود */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    /* سایه عمیق‌تر می‌شود */
    border-color: #110071;
    /* رنگ حاشیه به رنگ لوگوی شما تغییر می‌کند */
}

/* یک خط نوار رنگی بالای کارت که در حالت هاور ظاهر می‌شود */
.mok-product .service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #110071, #a4d6ff);
    /* گرادیان بنفش به آبی */
    transform: scaleX(0);
    /* در حالت عادی دیده نمی‌شود */
    transition: transform 0.4s ease;
    transform-origin: left;
}

.mok-product .service-item:hover::before {
    transform: scaleX(1);
    /* در حالت هاور کامل دیده می‌شود */
}

/* استایل عکس‌ها داخل کارت */
.mok-product .service-item img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    /* عکس بدون کشیدگی نشان داده شود */
    margin-bottom: 15px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* افکت چرخش و تغییر رنگ عکس در هاور */
.mok-product .service-item:hover img {
    transform: rotateY(180deg) scale(1.1);
    /* عکس ۳۶۰ درجه می‌چرخد */
}

/* استایل متن (b) داخل کارت */
.mok-product .service-item b {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin: 0;
    font-family: inherit;
    transition: color 0.3s ease;
    position: relative;
}

/* تغییر رنگ متن در هاور */
.mok-product .service-item:hover b {
    color: #110071;
    /* رنگ بنفش لوگو */
}

/* ------------------------------------------------ */
/* بخش ریسپانسیو (برای نمایش در گوشی موبایل) */
/* ------------------------------------------------ */
@media (max-width: 768px) {
    .mok-product .mok-service {
        gap: 15px;
        padding: 30px 10px;
    }

    .mok-product .service-item {
        width: 140px;
        /* کاهش عرض در موبایل */
        height: 140px;
    }

    .mok-product .service-item img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .mok-product .service-item b {
        font-size: 14px;
    }
}



/* ========================================= */
/* تغییر پس‌زمینه بخش اپلیکیشن به آبی پاستیلی */
/* ========================================= */

/* رنگ آبی پاستیلی کل باکس */
.app-download-box,
.application,
.mok-service,
div[class*="app"]:has(> .app-download-box),
.app-section {
    background-color: #eef7ff !important;
    border: 1px solid #ddeeff !important;
    box-shadow: 0 2px 10px rgba(0, 100, 255, 0.05) !important;
    border-radius: 15px !important;
    padding: 15px 20px !important;
}

/* مطمئن می‌شویم دکمه‌های داخلش سفید باقی می‌مانند */
.app-download-btn,
.app-btn,
.app-download-btn.myket-btn,
[class*="app-btn"] {
    background-color: #ffffff !important;
}

/* رنگ نوشته‌ها داخل باکس */
.download-title-box,
.app-download-box span,
.app-download-box h4,
.app-download-box p {
    color: #1f2937 !important;
}

/* اگر در فوتر هستید، این کد رنگ پشت فوتر رو هم تغییر میده */
footer .application,
footer .app-section,
footer .app-download-box {
    background-color: #eef7ff !important;
}

.amazing-slider .owl-item {
    padding: 0 10px;
}

.my-custom-slider .owl-item {
    padding: 15px !important;
    /* اینجا هرچقدر خواستی بذار */
}

/* چیدمان شبکه‌ای محصولات - جایگزین اسلایدر لجوج */
.amazing-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* ۴ تا کارت کنار هم */
    gap: 20px;
    /* اینجا فاصله بین کارت‌ها رو تنظیم کن */
    padding: 20px 0;
}

/* برای موبایل ۲ تا کارت */
@media (max-width: 992px) {
    .amazing-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* برای گوشی ۱ تا کارت */
@media (max-width: 576px) {
    .amazing-products-grid {
        grid-template-columns: 1fr;
    }
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 6;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

















/* login robot */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

:root {
    --paper: #f4efe5;
    --ink: #23252d;
    --accent: #75bcff;
    --accent-deep: #cebfff;
    --teal: #5393db;
    --yellow: #3dbeff;
    --shell: #fffdf8;
    --screen: #23252d;
    --eye: #fffdf8;
    --muted: #9a948a;
    --field: #faf7f0;
    --line: 2px solid var(--ink);
    --turn: .65s cubic-bezier(.5, -0.3, .25, 1.35);
}

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

body {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    color: var(--ink);
}

.scene {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 110px 24px 70px;
    overflow: clip;
    position: relative;
    background:
        radial-gradient(rgba(35, 37, 45, .07) 1.2px, transparent 1.3px) 0 0 / 24px 24px,
        var(--paper);
}

.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* robot */

.robot {
    position: relative;
    z-index: 1;
    margin-bottom: -16px;
    animation: float 4s ease-in-out infinite alternate;
    perspective: 800px;
    /* for the head tilt */
}

@keyframes float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

/* antenna */
.antenna {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.antenna-rod {
    width: 4px;
    height: 22px;
    background: var(--ink);
    border-radius: 2px;
}

.antenna-tip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    border: var(--line);
    order: -1;
    margin-bottom: -2px;
    position: relative;
    animation: bob 2.4s ease-in-out infinite;
}

.antenna-tip::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

@keyframes bob {

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

    50% {
        transform: translateY(-2.5px);
    }
}

.robot[data-mood="excited"] .antenna-tip {
    animation-duration: .4s;
    background: var(--yellow);
}

.robot[data-mood="success"] .antenna-tip {
    background: var(--teal);
}

/* head */
.head3d {
    width: 152px;
    height: 140px;
    perspective: 700px;
    transform-style: preserve-3d;
    transform:
        translateY(var(--hy, 0px)) scale(var(--hsc, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out;
    will-change: transform;
}

.is-hyped .head3d {
    --hy: 5px;
    --hsc: 1.04;
}

.is-pressed .head3d {
    --hy: 9px;
    --hsc: .94;
}

/* squash on click */

.head {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--turn);
}

.is-turned .head {
    transform: rotateY(180deg);
}

.is-spinning .head {
    animation: victory .9s ease-in-out;
}

@keyframes victory {
    to {
        transform: rotateY(360deg);
    }
}

.ear {
    position: absolute;
    top: 48px;
    width: 16px;
    height: 40px;
    background: var(--shell);
    border: var(--line);
    border-radius: 8px;
    transform: translateZ(0);
}

.ear--l {
    left: -10px;
}

.ear--r {
    right: -10px;
}

.face {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--shell);
    border: var(--line);
}

.face--front {
    box-shadow: 5px 6px 0 rgba(35, 37, 45, .16);
}

.face--back {
    box-shadow: 5px 6px 0 rgba(35, 37, 45, .16);
    transform: rotateY(180deg);
    display: grid;
    place-items: center;
}

/* face */
.visor {
    position: absolute;
    inset: 22px 16px 20px;
    background: var(--screen);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    overflow: hidden;
}

.eyes {
    display: flex;
    gap: 28px;
    transform: translate(var(--lx, 0px), var(--ly, 0px));
    transition: transform .18s ease-out;
}

.eyes.blink .eye {
    transform: scaleY(.08);
}

.eye {
    width: 19px;
    height: 25px;
    border-radius: 9px;
    background: var(--eye);
    transition: all .22s ease;
}

/* happy eyes */
[data-mood="happy"] .eye,
[data-mood="success"] .eye {
    width: 25px;
    height: 12px;
    background: transparent;
    border: 5px solid var(--eye);
    border-bottom: none;
    border-radius: 25px 25px 0 0;
}

[data-mood="excited"] .eye {
    transform: scale(1.2);
    border-radius: 50%;
    height: 21px;
}

/* eyes closed when the button is pressed */
[data-mood="pressed"] .eye {
    width: 24px;
    height: 12px;
    background: transparent;
    border: 5px solid var(--eye);
    border-top: none;
    border-radius: 0 0 24px 24px;
}

.cheek {
    position: absolute;
    top: 59%;
    width: 15px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transition: opacity .3s ease;
}

.cheek--l {
    left: 15px;
}

.cheek--r {
    right: 15px;
}

[data-mood="happy"] .cheek,
[data-mood="excited"] .cheek,
[data-mood="pressed"] .cheek,
[data-mood="success"] .cheek {
    opacity: .9;
}

.mouth {
    width: 15px;
    height: 5px;
    border-radius: 4px;
    background: var(--eye);
    transition: all .25s ease;
}

[data-mood="watching"] .mouth {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

[data-mood="happy"] .mouth {
    width: 30px;
    height: 12px;
    border-radius: 0 0 16px 16px;
}

[data-mood="excited"] .mouth {
    width: 22px;
    height: 16px;
    border-radius: 0 0 13px 13px;
}

[data-mood="pressed"] .mouth {
    width: 27px;
    height: 15px;
    border-radius: 0 0 14px 14px;
}

[data-mood="success"] .mouth {
    width: 38px;
    height: 17px;
    border-radius: 0 0 20px 20px;
}

/* back of the head + password meter */
.panel {
    width: 116px;
    padding: 12px 10px 10px;
    background: var(--screen);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.panel-lights {
    display: flex;
    gap: 6px;
}

.panel-lights i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: bob 1.8s ease-in-out infinite;
}

.panel-lights i:nth-child(2) {
    animation-delay: .3s;
    background: var(--yellow);
}

.panel-lights i:nth-child(3) {
    animation-delay: .6s;
    background: var(--teal);
}

.meter {
    display: flex;
    gap: 5px;
}

.meter i {
    width: 15px;
    height: 20px;
    border-radius: 4px;
    background: #3b3e49;
    transition: background .25s ease;
}

.meter[data-lvl="1"] i.on {
    background: #7ac8ff;
}

.meter[data-lvl="2"] i.on {
    background: #0008ff;
}

.meter[data-lvl="3"] i.on {
    background: var(--yellow);
}

.meter[data-lvl="4"] i.on {
    background: var(--teal);
}

.panel-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--paper);
    white-space: nowrap;
}

/* speech bubble */
.bubble {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--shell);
    border: var(--line);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    padding: 9px 14px;
    border-radius: 12px;
    width: max-content;
    max-width: 250px;
    text-align: center;
    box-shadow: 3px 3px 0 rgba(35, 37, 45, .9);
    z-index: 3;
}

.bubble::after {
    content: '';
    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--shell);
    border-right: var(--line);
    border-bottom: var(--line);
    transform: translateX(-50%) rotate(45deg);
}

.bubble.pop {
    animation: pop .3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop {
    from {
        transform: translateX(-50%) scale(.8);
    }

    to {
        transform: translateX(-50%) scale(1);
    }
}

/* form card */

.card {
    position: relative;
    z-index: 2;
    width: min(344px, calc(100vw - 48px));
    background: linear-gradient(165deg, #fffefb 0%, #fdfaf3 45%, #f7f1e4 100%);
    border: var(--line);
    border-radius: 20px;
    padding: 36px 28px 40px;
    box-shadow: 8px 9px 0 rgba(35, 37, 45, .9);
}

.hand {
    position: absolute;
    top: -16px;
    width: 44px;
    height: 32px;
    background:
        linear-gradient(90deg, transparent 31%, rgba(35, 37, 45, .9) 32%, rgba(35, 37, 45, .9) 36%, transparent 37%, transparent 63%, rgba(35, 37, 45, .9) 64%, rgba(35, 37, 45, .9) 68%, transparent 69%) 0 12px / 100% calc(100% - 12px) no-repeat,
        var(--shell);
    border: var(--line);
    border-radius: 9px 9px 14px 14px;
    z-index: 3;
    transition: transform .25s ease;
}

.hand--l {
    left: 36px;
}

.hand--r {
    right: 36px;
}

.is-hyped~.card .hand {
    transform: translateY(-3px) scaleY(1.08);
}

.foot {
    position: absolute;
    bottom: -26px;
    width: 54px;
    height: 34px;
    background: var(--shell);
    border: var(--line);
    border-radius: 9px 9px 14px 14px;
    box-shadow: inset 0 -9px 0 rgba(35, 37, 45, .12);
    z-index: -1;
}

.foot--l {
    left: 62px;
}

.foot--r {
    right: 62px;
}

.title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.2px;
    text-align: center;
    margin-bottom: 24px;
}

.field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    margin-bottom: 14px;
    background: var(--field);
    border: 2px solid rgba(35, 37, 45, .22);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    cursor: text;
}

.field:focus-within {
    border-color: var(--ink);
    box-shadow: 3px 3px 0 var(--accent);
    transform: translate(-1px, -1px);
}

.field-icon {
    width: 19px;
    height: 19px;
    fill: var(--muted);
    flex: none;
    transition: fill .18s ease;
}

.field:focus-within .field-icon {
    fill: var(--ink);
}

.field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.field input::placeholder {
    color: var(--muted);
    font-weight: 500;
}

.peek {
    border: none;
    background: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.peek svg {
    width: 20px;
    height: 20px;
    fill: var(--muted);
    transition: fill .18s ease;
}

.peek:hover svg,
.peek[aria-pressed="true"] svg {
    fill: var(--ink);
}

.peek:focus-visible {
    outline: 2px solid var(--ink);
}

/* login button */
.btn {
    position: relative;
    width: 100%;
    height: 54px;
    margin-top: 10px;
    border: var(--line);
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 4px 5px 0 rgba(35, 37, 45, .9);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, background .25s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translate(-2px, -2px);
    background: var(--accent-deep);
    box-shadow: 7px 8px 0 rgba(35, 37, 45, .9);
}

.btn:active {
    transform: translate(3px, 4px);
    box-shadow: 0 0 0 rgba(35, 37, 45, .9);
}

.btn:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.btn-bolt {
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px) scale(.4) rotate(-30deg);
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}

.btn:hover .btn-bolt,
.btn:focus-visible .btn-bolt {
    opacity: 1;
    transform: none;
    animation: bolt-jitter .4s ease-in-out infinite;
}

@keyframes bolt-jitter {

    0%,
    100% {
        transform: rotate(-7deg) scale(1);
    }

    50% {
        transform: rotate(7deg) scale(1.2);
    }
}

.btn.is-success {
    background: var(--teal);
}

/* error shake */
.card.shake {
    animation: shake .4s ease;
}

@keyframes shake {

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

    25% {
        transform: translateX(-7px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-3px);
    }
}

/* confetti (from js) */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
}

/* responsive + reduced motion */

@media (max-width: 560px) {
    .scene {
        padding-top: 96px;
    }

    .bubble {
        max-width: 210px;
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .robot {
        animation: none;
    }

    .antenna-tip,
    .panel-lights i {
        animation: none;
    }

    .head {
        transition-duration: .01s;
    }

    .btn:hover .btn-bolt {
        animation: none;
    }

    .is-spinning .head {
        animation: none;
    }

    .bubble.pop {
        animation: none;
    }

    .eyes {
        transition: none;
    }
}

hr {
    border-top: 3px solid #ddd !important;
    margin: 30px 0 !important;
}

/* فرض بر اینه که اسم کلاس هر ستون مثلا col-md-3 هست */
.col-md-3,
.col-lg-3 {
    width: 100% !important;
    /* کل عرض صفحه رو بگیره */
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 30px;
    /* فاصله بین لیست‌ها */
    display: flex;
    flex-direction: column;
    /* محتوای داخلش رو عمودی بچین */
}

.کلاس_والد_این_ستون‌ها {
    display: flex;
    flex-direction: column;
    /* این دستور باعث میشه بچه‌ها زیر هم چیده بشن */
    flex-wrap: wrap;
}


.کلاس_والد_این_ستون‌ها>div {
    width: 100%;
    max-width: 300px;
    /* یا هر عرضی که دوست داری */
    margin: 0 auto 20px auto;
}

/* فایل CSS کامل و بهینه شده */

hr {
    border-top: 3px solid #ddd !important;
    margin: 30px 0 !important;
}

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

@font-face {
    font-family: "data";
    src: url(fonts/woff/dana-bold.woff);
    src: url(fonts/woff2/dana-bold.woff2);
}

img {
    max-width: 100%;
    height: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    direction: rtl;
    font-size: 18px;
    text-align: right;
    font-family: "data", "Sora", "Segoe UI", system-ui, sans-serif !important;
    font-weight: 400;
}

/* ===== HEADER ===== */
.top-header {
    background: linear-gradient(135deg, #0c2d48, #1e5799, #2b8cbe);
    margin: 7px;
    border-radius: 20px;
    padding: 20px 25px;
    box-shadow: 0 15px 35px rgb(255, 255, 255);
    color: #9fdfff;
    font-weight: 100;
}

.top-right-header {
    float: right;
}

.top-right-header span {
    float: right;
}

.top-left-header {
    float: left;
}

.top-left-header span {
    float: left;
}

.top-left-header span i {
    float: left;
    color: #9fdfff;
    margin-right: 5px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding-bottom: 18px;
}

.main-h-right {
    display: flex;
    align-items: center;
    width: 60%;
}

.main-h-right .logo {
    max-width: 169px;
}

.main-h-right .logo a {
    display: flex;
}

.main-h-right .logo a img {
    min-width: 169px;
}

.main-h-right .search-main {
    width: 100%;
    margin-right: 53px;
    position: relative;
}

.main-h-right .search-main form {
    position: relative;
    width: 100%;
}

.main-h-right .search-main form input[type="search"] {
    width: 100%;
    padding: 18px 55px 18px 25px;
    font-size: 16px;
    background: #f8fafc;
    border: none;
    border-radius: 16px;
    outline: none;
    transition: all 0.3s;
    color: #0f172a;
    font-weight: 500;
    box-shadow: 0 2px 5px rgb(255, 255, 255);
}

.main-h-right .search-main form input[type="search"]:focus {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(30, 87, 153, 0.2);
}

.main-h-right .search-main form button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #1e5799;
    border: none;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-h-right .search-main form button:hover {
    background: #00d2ff;
    transform: translateY(-50%) scale(1.02);
}

.main-h-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.favorite-btn-header {
    background-color: rgb(178, 224, 255);
    color: #006aff;
    text-decoration: none;
    padding: 7px;
    border-radius: 9px;
    border: 4px double rgb(178, 224, 255);
    position: relative;
    display: inline-block;
}

.favorite-btn-header a {
    color: #006aff;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 17px;
}

.favorite-btn-header>a i {
    font-size: 19px;
    margin-left: 5px;
}

.cart-btn-header a {
    background-color: rgb(178, 224, 255);
    color: #006aff;
    text-decoration: none;
    padding: 7px;
    border-radius: 9px;
    border: 2px double rgb(178, 224, 255);
    position: relative;
    display: inline-block;
}

.main-h-left .cart-btn-header a .cart-btn-text {
    padding-left: 10px;
    border-left: 1px solid rgb(197, 155, 252);
}

.text-btn-num {
    margin-right: 5px;
}

/* ===== MENU ===== */
section .down-beader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}

.megamenu {
    border-left: 1px solid darkblue;
    padding-left: 10px;
    font-weight: 450;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.megamenu .title-menu {
    color: rgb(2, 19, 87);
}

.menu-header {
    display: flex;
    align-items: center;
}

.menu-header>ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.menu-header>ul>li {
    display: inline-block;
    list-style: none;
    margin: 15px;
    position: relative;
}

.menu-header>ul>li a {
    color: #002aff;
    text-decoration: none;
    padding: 14px 0px;
}

.menu-header>ul>li a:hover {
    border-bottom: 1px solid rgb(34, 69, 139);
    color: rgb(169, 234, 255);
}

.menu-header>ul>li>ul {
    position: absolute;
    width: 180px;
    top: 45px;
    left: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 3px 3px 10px 0px rgb(38, 18, 139);
    padding: 7px 0px;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 999;
}

.menu-header>ul>li:hover ul {
    opacity: 1;
    visibility: visible;
}

.menu-header>ul>li>ul>li>a {
    padding: 7px 14px;
    display: block;
}

.menu-header>ul>li>ul>li>a:hover {
    font-size: 19px;
    color: rgb(124, 165, 253);
}

.megamenu {
    position: relative;
    display: inline-block;
}

.mok-megamenu>ul {
    position: absolute;
    left: 0;
    top: 100%;
    width: 270px;
    background: white;
    box-shadow: 0px 5px 10px 0px rgba(29, 93, 255, 0.454);
    padding: 12px;
    margin: 0;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 100;
    border-radius: 20px;
    margin-top: 10px;
    padding-right: 0px;
}

.mok-megamenu>ul>li {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.megamenu:hover>.mok-megamenu>ul {
    visibility: visible;
    opacity: 1;
    top: 40px;
}

.mok-megamenu>ul>li:hover {
    background-color: rgb(219, 238, 255);
}

.mok-megamenu>ul>li:hover>a {
    color: #49adff;
}

.mok-megamenu>ul>li>a {
    padding: 5px;
    color: #0077ff;
}

.mok-megamenu>ul>li>i {
    margin-left: 3px;
    color: darkblue;
}

.mok-megamenu>ul>li>ul {
    position: absolute;
    background: #cbe3ff;
    right: 100%;
    top: 0px;
    width: 900px;
    display: flex;
    padding: 0px;
    height: 100%;
    box-shadow: 0px 5px 10px 0px rgba(0, 35, 124, 0.608);
    border-radius: 20px;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.mok-megamenu>ul>li:hover>ul {
    visibility: visible;
    opacity: 1;
}

.mok-megamenu>ul>li>ul>li {
    width: 33%;
}

.mok-megamenu>ul>li>ul>li>a {
    color: #3f8afc;
    border-right: 3px solid rgb(175, 202, 253);
    padding: 5px;
}

.mok-megamenu>ul>li>ul>li>ul {
    padding-right: 0px;
    margin-top: 20px;
}

.mok-megamenu>ul>li>ul>li>ul>li>a {
    color: #195b7c;
    display: block;
    padding: 10px;
    font-size: 16px;
}

.mok-megamenu>ul>li>ul>li>ul>li>a:hover {
    font-size: 18px;
}

/* ===== SLIDER ===== */
.main-slider img {
    width: auto;
    height: 200px;
}

.main-slider .owl-stage-outer {
    border: 4px solid #49adff;
    border-radius: 20px;
    box-shadow: 0px 10px 20px 0px rgba(28, 75, 192, 0.454);
}

.main-slider .owl-theme .owl-dots {
    position: absolute;
    bottom: -45px;
    width: 100%;
}

.main-slider .owl-dot span {
    background: #21429e !important;
    width: 30px !important;
    height: 10px !important;
    display: inline-block !important;
    border-radius: 5px !important;
}

.main-slider .owl-theme .owl-dots button span {
    background: #6b81bd;
    width: 10px;
    height: 10px;
    margin: 2px 3px;
}

.main-slider .owl-dots .active span {
    background: #b0d1ff !important;
    width: 18px !important;
}

.main-slider .owl-item {
    text-align: center;
}

.main-slider img {
    width: 50%;
    height: auto;
    display: inline-block;
}

.main-slider .owl-carousel .owl-nav button {
    position: absolute;
    background-color: #9fdfff;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    opacity: 0;
}

.main-slider:hover .owl-carousel .owl-nav button {
    opacity: 1;
}

.main-slider .owl-carousel .owl-nav button.owl-next {
    right: 80px;
}

.main-slider .owl-carousel .owl-nav button.owl-prev {
    right: 35px;
}

.owl-theme .owl-nav {
    margin-top: -56px;
}

/* ===== RAINBOW GLOW ===== */
.favorite-btn-header::before,
.cart-btn-header a::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ff0000, #f6ff00, #00ff0d, #00f2ff, #0303ff, #6302ff, #ff00bb, #ff029e, #ff6200);
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    animation: rainbowGlow 4s linear infinite;
    border-radius: 12px;
}

.favorite-btn-header::after,
.cart-btn-header a::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgb(178, 224, 255);
    z-index: -1;
    border-radius: 7px;
}

@keyframes rainbowGlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 400% 0%;
    }
}

.register-btn {
    align-items: center;
    gap: 5px;
    margin-left: 20px;
    color: rgb(15, 32, 90);
    float: left;
    margin-top: -90px;
    margin-left: -200px;
}

/* ===== PRODUCT SECTION ===== */
:root {
    --primary: #0f0c29;
    --secondary: #302b63;
    --accent: #207ad3;
    --accent-glow: #4facfe;
    --card-bg: rgba(255, 255, 255, 0.95);
    --gradient-btn: linear-gradient(135deg, #207ad3, #4facfe);
    --gradient-discount: linear-gradient(135deg, #ff416c, #ff4b2b);
    --shadow-sm: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 20px 25px 45px -12px rgba(32, 122, 211, 0.3);
    --shadow-hover: 0 25px 40px -12px rgba(32, 122, 211, 0.5);
}

.mok-product {
    margin-top: 115px;
    padding: 20px 0 50px;
    background: #ffffff !important;
}

.mok-product .title-pro {
    text-align: center;
    margin-bottom: 40px;
}

.mok-product .title-pro h5 {
    display: inline-block;
    margin-bottom: 24px;
    position: relative;
}

.mok-product .title-pro h5 a {
    color: #0d0366;
    font-size: 28px;
    font-weight: 800;
    padding: 5px 15px;
    background: linear-gradient(120deg, #207ad3 0%, #207ad3 40%, transparent 40%);
    background-repeat: no-repeat;
    background-size: 0% 3px;
    background-position: bottom left;
    transition: all 0.4s ease;
    text-decoration: none;
    border-bottom: 3px solid #207ad3;
}

.mok-product .title-pro h5 a:hover {
    background-size: 100% 3px;
    color: #207ad3;
}

.product-slider .product-item {
    background: var(--card-bg);
    backdrop-filter: blur(0px);
    border-radius: 28px;
    margin: 20px 15px;
    padding: 15px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: #ffffff;
}

.product-slider .product-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: var(--shadow-hover);
    border-color: rgba(32, 122, 211, 0.3);
}

.product-item .product-img {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.product-item .product-img img {
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.product-item:hover .product-img img {
    transform: scale(1.1);
}

.product-item .color-dis {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-item .color-dis .color ul {
    padding-right: 4px;
}

.product-item .color-dis .color ul li {
    float: right;
}

.product-item .color-dis .color ul li span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    float: right;
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.product-item .color-dis .color ul li span:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(32, 122, 211, 0.4);
}

.product-item .color-dis .discount {
    background: linear-gradient(135deg, #1a2a3a, #0d1a2a);
    border-left: 4px solid #ffd700;
    border-radius: 0 20px 20px 0;
    font-size: 14px;
    padding: 8px 16px;
    color: #ffd700;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

.product-item .color-dis .discount::before {
    content: '✦';
    margin-left: 8px;
    font-size: 12px;
    color: #ffd700;
}

.product-item h2 {
    font-size: 18px;
    margin-top: 18px;
    height: 52px;
    line-height: 26px;
    overflow: hidden;
}

.product-item h2 a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 600;
}

.product-item h2 a:hover {
    color: var(--accent);
}

.product-item .down {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.product-item .down .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
}

.product-item .down .price del {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.product-item .down .price ins {
    text-decoration: none;
    color: var(--accent);
    font-weight: 800;
    font-size: 20px;
}

.product-item .down .addtocart-btn>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #f5f7fa, #e8ecf1);
    border-radius: 50%;
    color: var(--accent);
    font-size: 22px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.product-item .down .addtocart-btn>a:hover {
    background: var(--gradient-btn);
    color: white !important;
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 8px 20px rgba(32, 122, 211, 0.4);
}

/* ===== AMAZING SLIDER ===== */
.amazing-slider {
    background: linear-gradient(45deg, #0062ff, #00aeff, #002990, #00aeff);
    background-size: 300% 300%;
    border-radius: 20px;
    animation: gradientMove 4s ease infinite;
    box-shadow: 5px 5px 10px 0px rgb(147, 217, 255);
    margin-top: 112px;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.amazing-product .amazing-thumbnail img {
    max-width: 300px;
    margin: 15px auto;
}

.amazing-product .amazing-btn {
    text-align: center;
}

.amazing-product .amazing-btn a {
    background: #ffffff !important;
    color: #008ada !important;
    border-radius: 20px !important;
    padding: 10px 25px !important;
    margin-top: 40px !important;
    display: inline-flex !important;
    font-weight: bold !important;
    align-items: center !important;
}

.amazing-product .amazing-btn a i {
    font-size: 20px;
    margin-right: 6px;
}

.amazing-product .countdown-timer {
    display: flex;
    justify-content: center;
}

.amazing-product .countdown-timer .number {
    background: #b1d8ff;
    color: #000;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amazing-product .countdown-timer span.dot {
    color: #0c005a;
    font-size: 25px;
    margin: 0 2px;
}

.amazing-product .owl-theme .owl-nav {
    display: none;
}

.amazing-slider .owl-item {
    padding: 0 10px;
}

.amazing-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0;
}

@media (max-width: 992px) {
    .amazing-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .amazing-products-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== SPECIAL BOX ===== */
.special-box h4 {
    color: #0a0079;
    font-size: 28px;
}

.special-box {
    position: relative;
    padding: 15px 40px 50px 0px;
}

.special-box::before {
    content: "";
    background: #7bb4f5;
    width: 40%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 30px;
    z-index: -1;
}

.special-box::after {
    content: "";
    background: #7bb4f5;
    width: 40%;
    position: absolute;
    right: 7%;
    top: 0px;
    bottom: 0px;
    border-radius: 30px;
    transform: translate(-55px, 0px) skew(-15deg, 0deg);
    z-index: -1;
    padding: 10px;
}

.special-box .owl-stage-outer {
    background-color: #ffffff;
    border: 1px solid rgb(157, 216, 255);
    box-shadow: 5px 5px 10px 0px rgb(103, 178, 248);
    border-radius: 10px;
    width: 70%;
}

.special-box .special-item {
    display: flex;
    padding: 25px;
    width: 1200px;
    position: relative;
}

.special-box .special-item figure {
    width: 20%;
}

.special-box .special-item figure img {
    max-width: 250px;
}

.special-box .special-item .color {
    display: flex;
    justify-content: center;
}

.special-box .special-item .color ul {
    padding-right: 0px;
}

.special-box .special-item .color ul li {
    float: right;
}

.special-box .special-item .color ul li span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: right;
    margin-left: 5px;
}

.special-box .special-item .det-special {
    width: 77%;
}

.special-box .special-item .det-special h2 {
    font-size: 21px;
    margin-bottom: 20px;
    color: #8ac5fc;
}

.special-box .special-item .det-special .additional-product {
    display: flex;
    flex-direction: column;
    max-height: 145px;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 7px 0px;
    margin-right: 10px;
    margin-bottom: 30px;
}

.special-box .special-item .det-special .additional-product .product-item {
    display: flex;
    gap: 6px;
}

.special-box .special-item .det-special .additional-product .product-item i {
    color: #00ff0d;
    font-size: 10px;
    margin-left: 2px;
    font-weight: bold;
}

.special-box .special-item .det-special .down {
    display: flex;
    gap: 15px;
    align-items: center;
}

.special-box .special-item .det-special .down a {
    background: #0088ff;
    color: #ffffff;
    border-radius: 11px;
    padding: 10px;
    margin-right: 12px;
}

.special-box .special-item .det-special .down .price {
    display: flex;
    gap: 10px;
}

.special-box .special-item .det-special .down .price del {
    font-size: 16px;
    font-weight: 700;
    color: #77adf8;
}

.special-box .special-item .det-special .down .price ins {
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #0136c6;
}

.special-box .special-item .det-special .down .price ins span {
    font-size: 15px;
}

.special-box .special-item .discount {
    position: absolute;
    background: #b7dbfd;
    left: 333px;
    top: 0;
    width: 60px;
    height: 72px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    color: #000478;
    padding-top: 15px;
}

/* ===== BEST SELL ===== */
.box-sell {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 10px !important;
}

.box-sell .best-sell {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    background: linear-gradient(145deg, #0c0a2e, #1a1a5e) !important;
    border-radius: 25px !important;
    padding: 25px 20px !important;
    text-align: center !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

.box-sell .best-sell figure {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 5px !important;
    animation: pulse-animation 2s infinite !important;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px white;
    }

    100% {
        box-shadow: 0 0 10px 20px rgba(255, 255, 255, 0.732);
    }
}

.box-sell .best-sell figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.box-sell .best-sell h2 {
    margin: 15px 0 !important;
    height: auto !important;
    padding: 0 !important;
}

.box-sell .best-sell h2 a {
    color: white !important;
    font-size: 18px !important;
}

.box-sell .best-sell .price {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    color: white !important;
    margin: 15px 0 !important;
}

.box-sell .best-sell .price del {
    opacity: 0.6 !important;
    font-size: 14px !important;
}

.box-sell .best-sell .price ins {
    text-decoration: none !important;
    font-size: 20px !important;
    color: #ffd700 !important;
    font-weight: bold !important;
}

.box-sell .best-sell .addtocart-btn {
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.box-sell .best-sell .addtocart-btn a i {
    background: white !important;
    color: #000469 !important;
    border-radius: 50% !important;
    font-size: 35px !important;
    padding: 8px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.box-sell .best-sell .addtocart-btn a i:hover {
    transform: scale(1.1) !important;
    background: #ffd700 !important;
    color: #000 !important;
}

.other-sell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    flex: 1 !important;
    min-width: 300px !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
}

.other-sell .product-sell {
    flex: 1 1 calc(50% - 15px) !important;
    min-width: 200px !important;
    max-width: 100% !important;
    background: white !important;
    border-radius: 15px !important;
    padding: 15px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    height: auto !important;
    min-height: 120px !important;
    transition: all 0.3s ease !important;
}

.other-sell .product-sell:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.other-sell .product-sell figure {
    flex: 0 0 80px !important;
    margin: 0 !important;
    float: none !important;
}

.other-sell .product-sell figure img {
    max-width: 80px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

.other-sell .product-sell .info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.other-sell .product-sell h2 {
    margin: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

.other-sell .product-sell h2 a {
    font-size: 16px !important;
    color: #1a1a5e !important;
    text-decoration: none !important;
}

.other-sell .product-sell .down {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: auto !important;
    margin: 0 !important;
}

.other-sell .product-sell .number {
    background: #1a1a5e !important;
    color: white !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.other-sell .product-sell .price {
    display: flex !important;
    gap: 10px !important;
    align-items: baseline !important;
}

.other-sell .product-sell .price del {
    color: #999 !important;
    font-size: 12px !important;
}

.other-sell .product-sell .price ins {
    color: #1a1a5e !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

@media (max-width: 992px) {
    .box-sell {
        flex-direction: column !important;
        align-items: center !important;
    }

    .box-sell .best-sell {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 400px !important;
    }

    .other-sell {
        width: 100% !important;
        min-width: auto !important;
    }

    .other-sell .product-sell {
        flex: 1 1 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

.mok-breadcrumb {
    font-size: 14px;
    margin: 20px 0;
    color: gray;
}

.mok-breadcrumb a {
    color: gray;
}

.product-intro {
    background: white;
    border-radius: 15px;
    box-shadow: 0px 5px 5px 0px rgb(186, 229, 255);
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.product-intro .right {
    width: 49%;
}

.product-intro .right .header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000000;
}

.product-intro .right .header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #00aeff;
}

.product-intro .right .header span {
    font-weight: 300;
    color: gray;
    margin-top: 10px;
    display: block;
}

.product-intro .right .product-meta {
    display: flex;
    justify-content: space-between;
}

.product-intro .right .product-meta .meta-pro {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.product-intro .right .product-meta .meta-pro i {
    color: #446f82;
    font-size: 20px;
    margin-left: 5px;
}

.product-intro .right .product-delivery {
    display: flex;
    gap: 10px 25px;
    margin-bottom: 25px;
}

.product-intro .right .product-delivery span i {
    color: #5b8c6b;
    margin-left: 5px;
    font-size: 14px;
}

.product-intro .right .additional-product {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    max-height: 100px;
    overflow: hidden;
    margin-bottom: 50px;
    font-size: 16px;
}

.product-intro .right .additional-product .property-item {
    display: flex;
}

.product-intro .right .additional-product .property-item span {
    color: gray;
    font-weight: 300;
}

.product-intro .right .additional-product .property-item span i {
    font-size: 15px;
    color: #02245e;
}

.product-intro .right .p-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.product-intro .right .p-q .quantity {
    display: flex;
    border: 1px solid rgb(183, 183, 183);
    border-radius: 8px;
    width: 180px;
    height: 50px;
}

.product-intro .right .p-q .quantity button {
    font-size: 25px;
    background: transparent;
    padding: 0 20px;
    cursor: pointer;
    margin: 16px auto;
}

.product-intro .right .p-q .quantity button .plus {
    border-left: 1px solid gray;
}

.product-intro .right .p-q .quantity button .minus {
    border-right: 1px solid gray;
}

.product-intro .right .p-q .quantity .qty {
    width: 180%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    appearance: textfield;
}

/* ===== باکس اصلی ===== */
.quantity {
    display: flex !important;
    border: 2px solid #b7b7b7 !important;
    border-radius: 8px !important;
    width: 180px !important;
    height: 50px !important;
    overflow: hidden !important;
    background: white !important;
}

/* ===== دکمه ها ===== */
.quantity button {
    width: 50px !important;
    height: 50px !important;
    font-size: 28px !important;
    font-weight: bold !important;
    background: white !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333 !important;
    flex-shrink: 0 !important;
}

/* ===== خط جداکننده منفی ===== */
.quantity .minus {
    border-right: 2px solid #b7b7b7 !important;
}

/* ===== خط جداکننده مثبت ===== */
.quantity .plus {
    border-left: 2px solid #b7b7b7 !important;
}

/* ===== ورودی عدد ===== */
.quantity .qty {
    flex: 1 !important;
    width: 80px !important;
    height: 50px !important;
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    background: white !important;
    color: #222 !important;
    padding: 0 !important;
    margin: 0 !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

/* ===== حذف فلش های مرورگر ===== */
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ===== افکت هاوس ===== */
.quantity button:hover {
    background: #f0f0f0 !important;
}

.quantity button:active {
    background: #ddd !important;
}

.product-intro .right .p-q .single-price {
    display: flex;
    gap: 15px;
}

.product-intro .right .p-q .single-price .price {
    font-size: 20px;
    font-weight: 400;
    color: #b8b9f6;
}

.product-intro .right .p-q .single-price .price del {
    font-size: 23px;
    text-decoration: none;
    font-weight: 700;
    color: #b1daff;
}

.product-intro .right .p-q .single-price .price ins span {
    font-size: 16px;
    font-weight: 450;
}

.product-intro .right .p-q .single-price .discount {
    background: #bdd8e0;
    color: white;
    font-size: 16px;
    font-weight: 450;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.product-intro .right .single-add-to-cart {
    background: #b4c8ff;
    color: #00025c;
    font-size: 18px;
    font-weight: 450;
    width: 100%;
    padding: 8px 0px;
    cursor: pointer;
    border-radius: 14px;
}

.product-intro .right .single-add-to-cart i {
    margin-left: 8px;
    /* margin-top: 4px */
    font-size: 17px;
}

.product-intro .left::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000469;
    opacity: 0.1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 15px;
}

.product-intro .left {
    display: flex;
    justify-content: center;
    width: 47%;
    position: relative;
    padding: 20px;
}

.product-intro .left .product-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15%;
    max-width: 100%;
}

.product-intro .left .product-action .item-action button {
    background: white;
    border: 1px solid black;
    border-radius: 10px;
    min-width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.product-intro .left .product-action .item-action button:hover span {
    max-width: 250px;
    padding-left: 10px;
}

.product-intro .left .product-action .item-action button i {
    font-size: 20px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: rgb(23, 23, 49);
}

.product-intro .left .product-action .item-action button span {
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.product-intro .left .product-image {
    width: 75%;
    flex-shrink: 0;
}

.product-intro .left .product-image .countdown-timer {
    background: #002990;
    color: white;
    width: 30px;
    height: 30px;
}
.product-tab .product-description{
    font-size: 16px;
    line-height: 2.5;
    box-shadow: 5px 5px 10px 0px gray;
    border-radius: 20px;
    padding: 10px;
    color: #004872;
    margin-top: 40px;
}
.product-tab .additional-product{
    margin-top: 34px;
    box-shadow: 5px 5px 10px 0px gray;
}
.product-tab .additional-product h2{
    color: #0008ff;
    font-size: 24px;
}
.product-tab .additional-product .property-item{
   display: flex;
   gap: 15px;
   font-weight: 450;
   margin-bottom: 15px;
   border-radius: 10px;
}
.product-tab .additional-product .property-item span{
   background: rgb(212, 237, 255);
   padding: 20px 10px;
   min-width: 200px;
   color: #00034c;
   border-radius: 20px;
}
.product-tab .additional-product .property-item span i{
   color: #83ba95;
   font-size: 20px;
   margin-left: 5px;
}
#modal_video .modal-content{
    width: 750px;
}
.modal-body video{
    max-width: 100%;
}
.modal-header i{
    font-size: 18px;
    color: rgb(54, 103, 54);
}
.modal-header h4{
    color: darkblue;
    font-size: 18px;
    margin-top: 11px;
}
#modal-share .modal-content{
    width: 500px;
    background: #cfecff;
    border-radius: 10px;
}
.modal-body .shortlink{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}
.modal-body .shortlink textarea{
    text-align: left;
    width: 300px;
    height: 35px;
    padding: 7px;
    font-weight: 500;
}
.modal-body .social-sharing{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.modal-body .box-sharing {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.modal-body .box-sharing a{
    font-size: 22px;
    display: flex;
}
.modal-body .box-sharing a .whatsapp{
    color: green;
}
.floating-button{
    font-size: 35px;
    position: fixed;
    right: 50px;
    bottom: 40px;
    background: darkblue;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
}
.floating-button i{
    transition: all 0.2s ease-in-out;
}
.floating-contact .contact-list {
    width: 200px;
    position: fixed;
    right: 50px;
    bottom: 130px;
    background: rgb(219, 246, 255);
    box-shadow: 5px 5px 10px 0px gray;
    padding: 10px;
    border-radius: 15px;
    z-index: 100;
}
.floating-contact .contact-list a{
   display: flex;
   justify-content: space-between;
   padding: 5px;
   align-items: center;
}
.floating-contact .contact-list a img{
    width: 35px;
    height: 35px;
}
.floating-contact .contact-list a span{
    font-size: 14px;
    color: #021224;
}
.floating-contact .contact-list a:hover{
    background-color: rgb(163, 185, 191);
}