@import url(https://fonts.googleapis.com/css?family=Bangers);
@import url('https://v1.fontapi.ir/css/Vazir');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-color: #5f5f5f;
    --color-accent: rgb(0 134 229)
}




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

}
a{
text-decoration: none !important;

}




:root {
  /* Base font size */
  font-size: 10px;

  /* Set neon color */
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}
:root {
  --bs-body-font-family: 'Vazirmatn', sans-serif; /* تعریف فونت */
  --bs-body-font-size: 16px;                        /* به عنوان مثال */
  --bs-body-font-weight: 400;                       /* به عنوان مثال */
  --bs-body-line-height: 1.5;                    }




body{
  overflow-x: hidden !important;
 padding: 0;
  margin: 0;
  box-sizing: border-box;
    overflow-y: auto;
font-family: Vazir, sans-serif;
}






@media (min-width: 1200px) {

.xm{display: flex}

/*   @import url(https://fonts.googleapis.com/css?family=Bangers);*/
/*@import url('https://v1.fontapi.ir/css/Vazir');*/
/*@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");*/
/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-Thin.woff2') format('woff2');*/
/*    font-weight: 100;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-ExtraLight.woff2') format('woff2');*/
/*    font-weight: 200;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-Light.woff2') format('woff2');*/
/*    font-weight: 300;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-Regular.woff2') format('woff2');*/
/*    font-weight: 400;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-Medium.woff2') format('woff2');*/
/*    font-weight: 500;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-SemiBold.woff2') format('woff2');*/
/*    font-weight: 600;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-Bold.woff2') format('woff2');*/
/*    font-weight: 700;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-ExtraBold.woff2') format('woff2');*/
/*    font-weight: 800;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: Vazirmatn;*/
/*    src: url('../font/Vazirmatn-Black.woff2') format('woff2');*/
/*    font-weight: 900;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*:root {*/
/*    --font-color: #5f5f5f;*/
/*    --color-accent: rgb(0 134 229)*/
/*}*/




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

}
a{
text-decoration: none !important;

}

.copyright{text-align:justify !important; line-height: 2 }


:root {
  /* Base font size */
  font-size: 10px;

  /* Set neon color */
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}
:root {
  --bs-body-font-family: 'Vazirmatn', sans-serif; /* تعریف فونت */
  --bs-body-font-size: 16px;                        /* به عنوان مثال */
  --bs-body-font-weight: 400;                       /* به عنوان مثال */
  --bs-body-line-height: 1.5;                    }




body{
  overflow-x: hidden !important;
 padding: 0;
  margin: 0;
  box-sizing: border-box;
    overflow-y: auto;
font-family: Vazir, sans-serif;
}




















     .mobile-main {
        display: none !important; /* پنهان کردن mobile-main */
    }

    .main-header {
        display: flex; /* یا display: block; */
    }
.slide-mob { display: none;}

.icon-bouten-slider-mob{display: none;}
.next-pre-mob{display: none}
.main-mob-page{display: none;}
.accordion-mob{display: none}
.ta-mob{display: none}
.mah-mob{display: none}
    .main{
        z-index: 90 !important;
        height:2390px ;
          padding-bottom: 100px; /* جای تنفس برای اکوردین یا محتوا */
        overflow: hidden;
        border: 1px solid hsl(0, 0%, 25%);
        background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
        box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
        transition: transform 0.6s ease;
        width:100% !important;
        overflow-x: hidden !important;

        background: rgb(53, 117, 252);
        background: linear-gradient(290deg, rgba(53, 117, 252, 0.2) 4%, rgba(255, 255, 255, 1) 100%);


    }


    .main-header {
        display: flex;
        flex-direction: row;
        position: fixed;
        z-index: 90 !important;

    }


    .img-wash {
        display: flex;


        filter: drop-shadow(-4px 0px 8px #8080ff);
    }


    .card {
        position: relative;
        width: 17.7%;


        border-radius: 20px;
        border: 1px solid hsl(0, 0%, 25%);
        background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
        box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
        transition: transform 0.6s ease;

        background: rgb(53, 117, 252);
        background: linear-gradient(290deg, rgba(53, 117, 252, 1) 33%, rgba(0, 0, 0, 1) 91%);

    }


    .card-content {
        display: flex;
        justify-content: center;

        align-items: center;
    }


    .header {
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 1) 28%, rgba(0, 176, 255, 1) 100%);
        width: 100% !important;
        height: 130px;
        background-size: cover;
        display: flex;

        align-items: center;

    }


    .gaming-button {
        color: white;
        text-decoration: none;
        border: 2px solid #a56eff4f;
        /* background: rgb(0,0,0);
        background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
        overflow: hidden;
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 1) 45%, rgba(255, 255, 255, 0.8922968845741421) 100%);
        cursor: pointer;
        height: 64px;
        transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
        border-radius: 15px; /* گرد کردن بردر */
    }

    .gaming-button::before, .gaming-button::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 187, 255, 0.705);
        transition: transform 0.4s;
        z-index: -1;
        overflow: hidden;
    }

    .gaming-button::before {
        top: 0;
        left: -100%;
        transform: skewX(-45deg);
    }

    .gaming-button::after {
        bottom: 0;
        right: -100%;
        transform: skewX(45deg);
    }

    .gaming-button:hover {
        box-shadow: 0 0 20px #066ea2, 0 0 40px #0053ed, 0 0 60px #1f57f1;
        transform: scale(1.1);
    }

    .gaming-button:hover::before {
        transform: translateX(100%) skewX(-45deg);
    }

    .gaming-button:hover::after {
        transform: translateX(-100%) skewX(45deg);
    }

    .img-shop {
        display: flex;
        position: relative;
        bottom: 7px;
    }


    .img-user {

        display: flex;


    }


    .text-user {

        font-size: 15px;

    }

    nav {
        --_width: 20px;
        --_padding: 1rem;
        --_speed: 300ms;
        --_f-size: 1.5rem;
        --_clr-border: rgba(255, 255, 255, 0.784);
        --_clr-bg-rgb: 2, 6, 23;
        --_clr-f: rgb(255, 255, 255);

        display: flex;
        border: 1px solid var(--_clr-border);
        border-radius: 20px;
        padding-inline: var(--_padding);
        background-color: rgb(var(--_clr-bg-rgb));
        position: relative;
        isolation: isolate;
    }

    @media (min-width: 600px) {
        nav {
            --_width: 100px;
            --_f-size: 2rem;
        }
    }
    nav > button {
        border: none;
        padding: 0;
        background: transparent;
        color: var(--_clr-f);
        cursor: pointer;
        font-size: var(--_f-size) !important;
        width: var(--_width);
        aspect-ratio: 3/2;
        opacity: 0.5;
        transition: opacity var(--_speed) ease-in-out,
        width var(--_speed) ease-in-out;
        display: grid;
        place-content: center;
    }


    button.active,
    button:hover {
        opacity: 1;
    }

    button.active > span,
    button:hover > span {
        scale: 1.15;
        pointer-events: none;
    }


    .dropdown-item:hover .sub-category {
        display: block;
    }

    .sub-category {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: white;
        border: 1px solid #ddd;
        z-index: 1000;
        width: 200px; /* عرض زیر دسته‌ها */
    }

    .dropdown-item {
        position: relative;
    }


    .center-header {
        display: flex;
        flex-direction: row;

    }


    .navmenu li:hover > .sub1 {
        display: flex; /* فعال‌کردن Flexbox */
        flex-direction: column;
        z-index: 120 !important;

    }


    /* nav */
    li {
        width: 106px;
        height: 40px;
        border: 0;
        font-size: 16px;
        transition: all 150ms ease-in-out;
        border-radius: 7px;
        font-weight: 600;
        color: rgb(0, 0, 0);
        background-color: rgb(236, 236, 236);
        background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
        box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
        z-index: 90 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .navmenu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .navmenu li {
        float: left;
        position: relative;


    }

    .navmenu li a {
        display: block;
        text-align: center;
        border-radius: 3px;
        text-decoration: none;
        color: #000;
        text-transform: capitalize;
    }

    .sub1 {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        display: none;
        top: 81px;
        right: 0; /* اینجا موقعیت را به سمت راست تنظیم می‌کنیم */
        background-image: url(/static/cover/kkkkkkkkkkkkkkk.jpeg);
        object-fit: 30%;
        border: solid 10px #026378;
        -webkit-box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
        -moz-box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
        box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
        width: 1090px;


        height: 602px;
        border-radius: 20px;

        z-index: 99 !important;
    }
.icon-color{
    display: flex;
    transform: translateX(7px); /* ۲۰ پیکسل به راست */
}
    .sub1 li a {
        margin-bottom: 1px;
    }



    .sub2 {
        position: absolute;
        top: 0px;
        right: 121px; /* با راست یابی */
        list-style: none;
        display: none; /* مخفی کردن منوی فرعی */
background: #3c3999;
background: radial-gradient(circle, rgba(60, 57, 153, 0.89) 91%, rgba(255, 255, 255, 1) 100%);

        border-radius: 20px  0   20px 20px  ;
        padding: 0; /* حذف padding روی منو */


    }



     .sub2:hover {
background-color: #2a240d;



    }



   .button-41:hover {

   background: #0700d9;
background: linear-gradient(16deg, rgba(7, 0, 217, 1) 0%, rgba(51, 51, 51, 1) 0%);

    }

  .button-41:hover  a{

 color: white !important;

    }


  .user-profile {
  width: 120px;
  height: 51px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #2e8eff 0%,
    rgba(46, 142, 255, 0) 30%
  );
  background-color: rgba(46, 142, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile:hover,
.user-profile:focus {
  background-color: rgba(46, 142, 255, 0.7);
  box-shadow: 0 0 10px rgba(46, 142, 255, 0.5);
  outline: none;
}

.user-profile-inner {
  width: 114px;
  height: 47px;
  border-radius: 13px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #fff;
  font-weight: 600;
}

.user-profile-inner2 {
  width: 114px;
  height: 47px;
  border-radius: 13px;
background: #0700d9;
background: linear-gradient(16deg, rgba(7, 0, 217, 1) 0%, rgba(0, 212, 255, 1) 100%);  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #fff;
  font-weight: 600;
}




.user-profile-inner svg {
  width: 27px;
  height: 27px;
  fill: #fff;
}

.ja-catgory{display: flex; position: relative; right: -8px; top: 5px}




  .color-item{  background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 83, 99, 1) 100%);
  color: white}

 .color-item a{  color: white}




    .navmenu li:hover > .sub2 {
        display: flex; /* نمایش منو در زمان هاور */
        flex-wrap: wrap; /* برای ایجاد ردیف‌های جدید */
        padding: 0; /* حذف padding (می‌توانید مقدار آن را تنظیم کنید) */

    }

    .sub2 li {
        width: 15.70%; /* 100% / 6 (نسبت به تعداد آیتم‌ها) */
        margin:15px;
        height: 50px;
background: #171717;
background: radial-gradient(circle, rgba(23, 23, 23, 1) 91%, rgba(255, 255, 255, 1) 100%);
position: relative;
        right: 30px;
display: flex;
    }


    .sub2 a:hover {
    }




    .item-das {
        width: 120px;
        height: 40px;
        border: none !important;

        font-size: 16px;
        transition: all 150ms ease-in-out;
        font-weight: 600;
        color: rgb(0, 0, 0);
        background-color: rgb(236, 236, 236);
        background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
        box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
        z-index: 90 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;

        align-items: center;
    }


    sub-main:hover {
        margin-top: 8px;
        background-color: #bfbfef;
        z-index: 90 !important;

    }

    li:hover > a {
        margin-top: 8px;
        background-color: #bfbfef00;
        border-radius: 1400px;
    }

    .sub-main::after {
        content: ""; /* برای ایجاد یک ناحیه خالی */
        position: absolute; /* قرار دادن آن بر روی دکمه */

        opacity: 0; /* شروع بدون نمایان بودن */
        transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
    }

    .sub-main:hover::after {
        opacity: 1; /* نمایان شدن ناحیه هاور */
        top: -70px; /* بالا رفتن ناحیه هاور */
        left: -5px; /* چپ رفتن ناحیه هاور */
        right: -5px; /* راست رفتن ناحیه هاور */
        bottom: -70px; /* پایین رفتن ناحیه هاور */

    }


    .dr::after {
        content: ""; /* برای ایجاد یک ناحیه خالی */
        position: absolute; /* قرار دادن آن بر روی دکمه */
        top: -67px; /* بالا رفتن ناحیه هاور */
        left: -60px; /* چپ رفتن ناحیه هاور */
        right: -40px; /* راست رفتن ناحیه هاور */
        bottom: -67px; /* پایین رفتن ناحیه هاور */
        opacity: 0; /* شروع بدون نمایان بودن */
        transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
    }

    /* نمایان شدن در هاور */
    .dr-child:hover::after {
        opacity: 1; /* نمایان شدن ناحیه هاور */
    }

    .dr-child::after {
        content: ""; /* برای ایجاد یک ناحیه خالی */
        position: absolute; /* قرار دادن آن بر روی دکمه */
        top: -67px; /* بالا رفتن ناحیه هاور */
        left: -60px; /* چپ رفتن ناحیه هاور */
        right: -40px; /* راست رفتن ناحیه هاور */
        bottom: -67px; /* پایین رفتن ناحیه هاور */
        opacity: 0; /* شروع بدون نمایان بودن */
        transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
    }

    /* نمایان شدن در هاور */
    .dr:hover::after {
        opacity: 1; /* نمایان شدن ناحیه هاور */
    }


    .whash-text {
        position: absolute;
        bottom: 1px;
        left: 10.2px;
        font-size: 64px;
        color: rgb(255, 255, 255);
        font-weight: 800;
    }

    .box {
        width: 400px;
        height: 33px;
        background-color: white;
        border-radius: 0 5px 10px 22.3px;
        display: flex;
        align-items: center;
        position: relative;
        top: 4px;

    }
.form-control {
    border-radius:0 0   10px  20px!important;
}
    .serchh {
        position: relative;
        padding: 20px;
        border-radius: 10px;

    }

    .box > i {
        font-size: 20px;
    }

    .box > input {
        width: 400px;
        height: 33px;


        font-size: 10px;
        border-radius: 0 10px 10px 22.3px;
        padding-left: 10px;
        border: none !important;
    box-shadow:none !important;

    outline: none !important;
    }


    .img-serch {
        display: inline;

        transform: translateX(2.5px) translateY(-11px);
        z-index: 100;

    }


    .line-blue {
        position: relative;
        top: 66px;

        left: 21px;

    }


    .sec {
        margin-top: 100px;
        display: flex;


    }

    .dis-left {

        display: flex;
        position: relative;
        bottom: 9px;
        position: fixed;
        left: 6px;

    }


    /*.item-cat{background-color: #0abeff; color: white}*/






    .header-left {
        height: 587px;

        /* background: rgb(53,117,252);
        background: linear-gradient(290deg, rgba(53,117,252,1) 0%, rgba(255,255,255,1) 84%);  */
        display: flex;
        /* background: rgb(0,0,0);
        background: linear-gradient(290deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3180671926973915) 100%);  */
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 0.8922968845741421) 26%, rgba(102, 147, 255, 1) 100%);
        padding-top: 2px;
        position: relative;
        justify-content: start;
        border-radius: 40px;
    }


    .carousel-control {
        position: absolute;
        top: 80%;
        transform: translateY(-60%);
    }

    .carousel-control-prev {
        right: 140px; /* تنظیم فاصله بین دکمه‌ها */
        transform: translateY(230%);
    }

    .carousel-control-next {
        transform: translateY(230%);
        margin-right: 54px;
    }

    .curved {
        position: relative;
        background: #2c3e50;
        height: 50vh;
        border-bottom-left-radius: 50% 20%;
        border-bottom-right-radius: 50% 20%;
    }

    .carousel span {

        border-radius: 300px;
        width: 60px;
        height: 40px;
    }

    .carousel-control-prev,
.carousel-control-next {
    z-index: 10 !important; /* اطمینان از اینکه دکمه‌ها لاک‌پشتی شوند */
}




    .w1 {

        width: 100%; /* عرض کامل */
        height: 400px; /* ارتفاع مشخص */
        object-fit: cover;
        transform: translatey(-35px);

        /* تصویر به صورت متناسب در می‌آید */


    }

    .w2 {

        width: 100%; /* عرض کامل */
        height: 400px; /* ارتفاع مشخص */
        object-fit: cover;
        transform: translatey(-41px);

        /* تصویر به صورت متناسب در می‌آید */


    }


    .w3 {

        width: 100%; /* عرض کامل */
        height: 400px; /* ارتفاع مشخص */
        object-fit: cover;
        transform: translatey(-21px);

        /* تصویر به صورت متناسب در می‌آید */


    }

    .icon-bouten-slider {
        gap: 85px !important;
        display: flex;
    }


    .font-icon-bouten-slider {

        font-size: 14.5px;
        font-weight: 700;
        margin-top: 3px;

    }


    .next-pre {
        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 168, 201, 1) 100%);
        border-radius: 5px;

        border-radius: 20px;

    }

    .pagination {
        padding: 10px;
        background-color: #f1e3e3;
        border-radius: 5px;
        list-style: none;
    }

    .products-container {
        max-width: 100%; /* To ensure container doesn't overflow */

    }

    .product-item {
        display: flex;
        flex-direction: column;

        width: 155px !important; /* Set a fixed width for items to appear aligned */
        text-align: center;
        border-radius: 16px !important;
        background-color: #1a1a1a;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-link {
        text-decoration: none;
        color: #004ea2;
        border: none;
        font-size: 10px !important;
        width: 100%;
        height: 100%;


    }



    .page-item {
    display: flex; // ادامه دارد
    flex-direction: column; // ادامه دارد
    width: 100%; /* تغییر از عرض ثابت به درصد */
    max-width: 395px; /* اضافه کردن حداکثر عرض اگر نیاز به محدود کردن باشد */
    text-align: center;
    border-radius: 16px;
    background-color: #1a1a1a;
    padding: 0;
    margin: 0 auto; /* مراکز یابی */
}

h1 {
  box-shadow:0 0 5vw,inset 2px 2px 5px #000 ;
  overflow:hidden;
  padding-inline:.25em;
  border-radius:.15em;
  border:solid 2px;

    position: relative;
    display: flex;
    padding: 3px;
}
h1::before {
  content:'';
  height:.6em;
  margin:15px 0 -.55em;
  margin-inline:2px;


  display:block;
}


    .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
    }

    .products-container a {
        display: flex;
        justify-content: center; /* مرکز سازی افقی */
        align-items: center; /* مرکز سازی عمودی */


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

    }

    .page-item a {
        display: flex;
        justify-content: center; /* مرکز سازی افقی */
        align-items: center; /* مرکز سازی عمودی */

    }


    .image-product {
        border-radius: 20px 0 0 20px !important;
        object-fit: cover;

    }


    .button-91 {
        color: #fff;
        width: 1490px;
        height: 50px;
        border-radius: 14px;
        font-weight: bold;
        font-size: 16px;
background-color: #1c1d36 !important;
        border: 0;
        display: flex;
        justify-content: center;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;

        cursor: pointer;
    }




    .txt-footer-prod {
        display: flex;
        flex-direction: column;
    }


    .txt-price {
        display: flex;
        position: relative;
        top: 15px;
    }

    .bishtar {
        border-radius: 20px;
        align-items: center;
        background-color: #0655cc82;
        height: 30px;
        position: relative;
        bottom: 10px;
    }

    .font-bish {
        top: 4px;
        font-size: 18px;
        position: relative;
        right: 2px;
        color: rgb(255, 255, 255);
    }


    .e {
        font-size: 20px;
        display: flex; /* استفاده از flex برای مرکز چین کردن */
        justify-content: center; /* مرکز چین کردن افقی */
        align-items: center; /* مرکز چین کردن عمودی */
        text-align: center; /* مرکز چین کردن متن */
        width: 100%;
        color: rgb(255, 255, 255); /* عرض دکمه کامل */
    }


    .accordion-button {

        border-radius: 50px;

    }


    .custom-arrow {
        font-size: 27px; /* اندازه دلخواه برای آیکون */
        border-radius: 100%;
        margin-left: 10px; /* ایجاد فضای کافی بین متن و آیکون */
        padding: 4px;
        vertical-align: middle; /* مرکز چین کردن عمودی آیکون */
        color: rgb(34, 166, 254);
    }


    .accordion-button:not(.collapsed) .custom-arrow {
        transform: rotate(0deg); /* فلش در حالت باز */
    }

    .accordion-button.collapsed .custom-arrow {
        transform: rotate(180deg); /* فلش در حالت بسته */
    }


    .accordion-button {
        cursor: default; /* برای جلوگیری از دسترسی به قابلیت کلیک روی دکمه */
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.838) 34%, rgba(0, 0, 0, 0.871) 100%);
    }

    .accordion-button::after {
        display: none; /* پنهان کردن فلش پیش‌فرض */
    }


    .accordion-ja {
        transform: translatey(-25px);
    }


    .top {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 92px), calc(50% + 465.05px) calc(100% - 82px), 50% 100%, calc(50% - 465.05px) calc(100% - 82px), 0 calc(100% - 82px));
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 34%, rgba(0, 212, 255, 1) 100%);

    }

    .bottom {
        clip-path: polygon(0 0, calc(58% - 2.19px - 465.05px) 0, 50% calc(70px + 0.39px), calc(42% + 2.19px + 465.05px) 0, 100% 0, 100% 100%, 0 100%);
        margin-top: -57px;
        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 73, 133, 0.566) 72%);
        border-radius: 17px;
    }


    .taghfif {

        color: beige;
        font-size: 32px;
    }


    .carousel {
        margin-top: 40px;
    }


    .carousel-cell {
        height: 220px;
        margin-right: 18px !important;
        border-radius: 5px;
    }

    .dot {
        background-color: #ffffff !important;
    }


    .carousel-cell p {
        font-size: 13px;
        color: rgb(255, 255, 255);
    }


    .button-28 {
        border: 2px solid #1A1A1A;
        border-radius: 15px;
        box-sizing: border-box;
        color: #000000;
        cursor: pointer;
        display: inline-block;
        font-size: 18px;

        outline: none;
        padding: 14px 26px;
        text-align: center;

    }


    .button-28:hover {
        color: #fff;
        background-color: #000000d4;
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    }

    .align-items-btn {
        margin-top: 80px;
        margin-right: 11px;

    }


    .footer {
        background-color: #0d1117;
        color: white;
    }

    .footer ul {
        padding: 0;
        list-style: none;
        text-align: center;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 0;
    }

    .footer li {
        display: inline-block; /* Change to inline-block for horizontal layout */
        padding: 0 10px;
    }

    .footer ul a {
        color: inherit;
        text-decoration: none;
        opacity: 0.8;

    }


    .footer .social {
        text-align: center;
        padding-bottom: 25px;
        margin-top: 33px;
    }


    .footer .copyright {

        text-align: center;
        font-size: 15px;
        margin: 25px;
    }

    .footer .footer-break {
        height: 2px;
        border-width: 0;
        color: rgb(255, 255, 255);
        background-color: whitesmoke;
    }


    .footer-txt {

        background: #000000;
        background: linear-gradient(185deg, rgba(0, 0, 0, 1) 0%, rgba(5, 76, 255, 1) 72%);
        border-radius: 0 0 0 140px;
    }


    .eggy {
        font-size: 50px;
        width: 600px;
        height: 200px;
        z-index: 9999; /* اضافه کردن z-index بالاتر */
    }

    .message {

        font-size: 15px !important;

    }

    /*//////////////////////end*/
    .btn-lefter {
        --green: #bcb5ff;
        font-size: 15px;
        width: 180px;
        height: 70px;
        margin-top: 13px;

        letter-spacing: 0.06em;
        position: relative;
        font-family: inherit;
        border-radius: 0.6em;
        overflow: hidden;

        line-height: 1.4em;
        border: 2px solid var(--green);
        background: linear-gradient(to right, rgba(84, 148, 245, 0.1) 1%, transparent 40%, transparent 60%, rgba(230, 255, 244, 0.1) 100%);
        color: whitesmoke;
        box-shadow: inset 0 0 10px rgba(249, 255, 252, 0.4), 0 0 9px 3px rgba(230, 243, 237, 0.1);
    }

    .btn-lefter:hover {
        color: #90e2a8;
        box-shadow: inset 0 0 10px rgba(154, 207, 236, 0.6), 0 0 9px 3px rgba(134, 169, 211, 0.2);
    }

    .btn-lefter:before {
        content: "";
        position: absolute;
        left: -4em;
        width: 4em;
        height: 100%;
        top: 0;
        transition: transform .4s ease-in-out;
        background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%);
    }

    .txt-price {
        width: 140px;
        background-color: #1f57f1;
        display: flex;
        position: relative;
        transform: translateY(1px);
        border-radius: 0 0 16px 16px;
        font-size: 17px;
        justify-content: center;
    }


    .product-name-page {
        font-size: 12px;
        margin-top: 8px
    }


    .f {
        font-size: 16px !important;

        height: 40px;
          width: 130px;
        display: flex;
        justify-content: center;
    }

    .ta {
        display: flex;
        position: relative;
        bottom: 100px
    }

    .mah {
        display: flex;
        position: relative;
        bottom: 205px
    }


    .footer {
        transform: translateY(-200px)

    }


    .gaming-button-footer {
        color: white;
        text-decoration: none;
        border: 2px solid #7AAFFF;
        /* background: rgb(0,0,0);
        background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
        overflow: hidden;
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 1) 45%, rgba(255, 255, 255, 0.8922968845741421) 100%);
        cursor: pointer;
        height: 64px;
        transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
        border-radius: 15px; /* گرد کردن بردر */
    }

    .gaming-button-footer::before, .gaming-button-footer::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        transition: transform 0.4s;
        z-index: -1;
        overflow: hidden;
    }

    .gaming-button-footer::before {
        top: 0;
        left: -100%;
        transform: skewX(-45deg);
    }

    .gaming-button-footer::after {
        bottom: 0;
        right: -100%;
        transform: skewX(45deg);
    }

    .gaming-button-footer {
        transform: scale(1.1);
    }

    .gaming-button-footer::before {
        transform: translateX(100%) skewX(-45deg);
    }

    .gaming-button-footer::after {
        transform: translateX(-100%) skewX(45deg);
    }


    .form-control {

        outline: none;
    !important; /* حذف دور خطی هنگام کلیک */
        font-size: 14px !important; /* بزرگتر کردن اندازه متن */
        border: none; /* حذف کادر دور */
        border-bottom: 2px solid #000; /* اضافه کردن یک خط زیرین (اختیاری) */
        /* سایر استایل‌ها را که مایلید می‌توانید اضافه کنید */
        border-radius: 0 10px 10px 22px;
    }

    .inp-ser {
        border-radius: 0 10px 10px 22px
    }

    .form-control:focus {
        border: none;
    !important; /* اطمینان از حذف کادر دور هنگام کلیک */
        /* می‌توانید استایل‌هایی برای حالت فوکوس (focus) هم اضافه کنید، مثلاً تغییر رنگ */
        box-shadow: none; /* حذف سایه در حالت فوکوس */
    }


    /*.round:hover {*/
    /*    cursor: pointer;*/
    /*    width: 300px;*/
    /*    transition: all 3.6s ease-in-out;*/
    /*    background: linear-gradient(185deg, rgba(0, 0, 0, 1) 0%, rgba(5, 76, 255, 1) 72%);*/
    /*    border-radius: 640px*/
    /*}*/

    /*.round {*/
    /*    background: transparent;*/
    /*    outline: none;*/
    /*    position: relative;*/
    /*    border: 2px solid #111;*/
    /*    overflow: hidden;*/

    /*}*/


    /*!*button:before (attr data-hover)*!*/
    /*.round:hover:before {*/
    /*    opacity: 1;*/
    /*    transform: translate(0, 0);*/
    /*}*/

    /*.round:before {*/
    /*    content: attr(data-hover);*/
    /*    position: absolute;*/
    /*    left: 0;*/
    /*    top: 6px;*/
    /*    color: white;*/
    /*    width: 100%;*/
    /*    text-transform: uppercase;*/
    /*    letter-spacing: 3px;*/
    /*    font-weight: 800;*/
    /*    font-size: 22px;*/
    /*    opacity: 0;*/
    /*    transform: translate(-100%, 0);*/
    /*    transition: all .6s ease-in-out;*/
    /*}*/

    /*!*button div (button text before hover)*!*/
    /*.round:hover div {*/
    /*    opacity: 0;*/
    /*    transform: translate(100%, 0)*/
    /*}*/

    /*.round div {*/
    /*    text-transform: uppercase;*/
    /*    letter-spacing: 3px;*/
    /*    font-weight: 800;*/
    /*    font-size: .28em;*/
    /*    transition: all .6s ease-in-out;*/
    /*}*/


    /*.round-whatsapp:hover {*/
    /*    background: #00ff62;*/
    /*    background: linear-gradient(90deg, rgba(0, 255, 98, 1) 0%, rgba(9, 121, 82, 1) 64%);*/
    /*}*/


    /*.round-insta:hover {*/
    /*    background: #e6ff00;*/
    /*    background: linear-gradient(38deg, rgba(230, 255, 0, 1) 13%, rgba(219, 7, 2, 1) 37%, rgba(219, 0, 0, 1) 45%, rgba(102, 15, 184, 1) 77%);*/
    /*}*/





/*.container {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  height: 100vh;*/
/*}*/


.bt {
  align-items: center;
  background-color: #fa8072;
  border: 0 solid #fff;
  border-radius: 4px;
  display: inline-flex;
  padding: 8px 16px;
  transition: all 0.3s ease;
  position: relative;
  bottom: 7px;
    margin-right: 7px;
}

.phone-text {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
  margin-left: 8px;
}

.btn.show-phone .phone-text {
  opacity: 1;
  transform: translateX(0);
}

.eye-icon {
  cursor: pointer;

}





    .social-item {
        margin: 9px
    }

    .btn-lefter {
        font-weight: bold;
    }


    .imag-p {
        height: 130px !important;
    }

    .story-btn {
        background-color: #0079ff;
        font-size: 19px;
    }

    .story-btn:hover {
        color: yellow
    }



.bots{    transform: translateX(-25px)!important; }


    .footer-mob{display: none !important;}


  .item-cat {
        margin-top: 8px;
  z-index: 299 !important;
color: #0d1117 !important;
    display: flex;               /* لینک را یک کانتینر فلکس کن */
     /* وسط‌چین افقی */
    align-items: center;         /* وسط‌چین عمودی */

    text-decoration: none;           /* چون متن فارسیه سمت راست مرتب میشه */

    }

.item-cat span {
    font-size: 14px;

     /* وسط‌چین متن داخل span */
    white-space: nowrap;         /* جلوگیری از رفتن متن به خط دوم */
}


.titel-page-arow { background-color: #1f57f1; color: white; margin: 5px !important; height: 30px; padding: 5px; font-size: 10px}






.custom-arrow {
  transition: transform 0.25s ease, color 0.25s ease;
}
.bi-caret-up-fill {
  transform: rotate(180deg);
}


.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
    display: flex;
    position: relative;
    bottom: 10px;

}
.ribbon {
  --s: 1.8em; /* the ribbon size */
  --d: .6em;  /* the depth */
  --c: .8em;  /* the cutout part */

  padding: var(--d) calc(var(--s) + 2*var(--d) + .5em) 0;
  line-height: 1.8;
  background:
    linear-gradient(90deg,#0004 var(--d),#0000 0 calc(100% - var(--d)),#0004 0)
     50% 100%/calc(100% - 2*(var(--s) + var(--d))) calc(100% - var(--d)),
    conic-gradient(from -45deg at 50% 150%,#0004 25%,#0008 0)
     var(--s)              0/calc(3*var(--d)) var(--d),
    conic-gradient(from -45deg at 50% 150%,#0004 25%,#0008 0)
     calc(100% - var(--s)) 0/calc(3*var(--d)) var(--d);
  background-repeat: no-repeat;
  background-color: #0079ff; /* the main color */
  clip-path: polygon(0 100%,calc(var(--s) + var(--d)) 100%,calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + 2*var(--d)) calc(100% - var(--d)),calc(var(--s) + 2*var(--d)) 100%,calc(100% - var(--s) - 2*var(--d)) 100%,calc(100% - var(--s) - 2*var(--d)) calc(100% - var(--d)),calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(100% - var(--s) - var(--d)) 100%,100% 100%,calc(100% - var(--c)) calc(50% + var(--d)/2),100% var(--d),calc(100% - var(--s)) var(--d),calc(100% - var(--s)) 0,calc(100% - var(--s) - 3*var(--d)) 0,calc(100% - var(--s) - 3*var(--d)) var(--d),calc(var(--s) + 3*var(--d)) var(--d),calc(var(--s) + 3*var(--d)) 0,var(--s) 0,var(--s) var(--d),0 var(--d),var(--c) calc(50% + var(--d)/2));
  width: fit-content;
    z-index: 2;
}



/* CSS */
.button-64 {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 3px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 170px;
  padding: 5px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
    position: relative;
    left: 68px;
    z-index: 1;
}





@media (min-width: 768px) {
  .button-64 {
    font-size: 24px;
    min-width: 196px;
  }
}




    .button-64-ri {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 3px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 470px;
  padding: 5px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
    position: relative;
    right: 68px;
    z-index: 1;
}







   @media (min-width: 768px) {
  .button-64-ri {
    font-size: 24px;
    min-width: 196px;
  }
}


.elf{display: flex}


}
/*moile//////////////////////////////////////////////////////////////////////////////////////////*/



.mobile-main{display: none !important;}
@media (max-width: 768px) {

.elf{display: none !important;}




 .main {
        z-index: 90 !important;
        min-height: 2340px !important;
        overflow: hidden;
        border: 1px solid hsl(0, 0%, 25%);
        background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
        box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
        transition: transform 0.6s ease;
        width:100% !important;
        overflow-x: hidden !important;

        background: rgb(53, 117, 252);
        background: linear-gradient(290deg, rgba(53, 117, 252, 0.2) 4%, rgba(255, 255, 255, 1) 100%);


    }


    .main-header {
        display: flex;
        flex-direction: row;
        position: fixed;
        z-index: 90 !important;

    }


    .img-wash {
        display: flex;


        filter: drop-shadow(-4px 0px 8px #8080ff);
    }


    .card {
        position: relative;
        width: 17.7%;


        border-radius: 20px;
        border: 1px solid hsl(0, 0%, 25%);
        background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
        box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
        transition: transform 0.6s ease;

        background: rgb(53, 117, 252);
        background: linear-gradient(290deg, rgba(53, 117, 252, 1) 33%, rgba(0, 0, 0, 1) 91%);

    }


    .card-content {
        display: flex;
        justify-content: center;

        align-items: center;
    }


    .header {
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 1) 28%, rgba(0, 176, 255, 1) 100%);
        width: 100% !important;
        height: 130px;
        background-size: cover;
        display: flex;

        align-items: center;

    }


    .gaming-button {
        color: white;
        text-decoration: none;
        border: 2px solid #a56eff4f;
        /* background: rgb(0,0,0);
        background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
        overflow: hidden;
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 1) 45%, rgba(255, 255, 255, 0.8922968845741421) 100%);
        cursor: pointer;
        height: 64px;
        transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
        border-radius: 15px; /* گرد کردن بردر */
    }

    .gaming-button::before, .gaming-button::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 187, 255, 0.705);
        transition: transform 0.4s;
        z-index: -1;
        overflow: hidden;
    }

    .gaming-button::before {
        top: 0;
        left: -100%;
        transform: skewX(-45deg);
    }

    .gaming-button::after {
        bottom: 0;
        right: -100%;
        transform: skewX(45deg);
    }

    .gaming-button:hover {
        box-shadow: 0 0 20px #066ea2, 0 0 40px #0053ed, 0 0 60px #1f57f1;
        transform: scale(1.1);
    }

    .gaming-button:hover::before {
        transform: translateX(100%) skewX(-45deg);
    }

    .gaming-button:hover::after {
        transform: translateX(-100%) skewX(45deg);
    }

    .img-shop {
        display: flex;
        position: relative;
        bottom: 7px;
    }


    .img-user {

        display: flex;


    }


    .text-user {

        font-size: 15px;

    }

    nav {
        --_width: 20px;
        --_padding: 1rem;
        --_speed: 300ms;
        --_f-size: 1.5rem;
        --_clr-border: rgba(255, 255, 255, 0.784);
        --_clr-bg-rgb: 2, 6, 23;
        --_clr-f: rgb(255, 255, 255);

        display: flex;
        border: 1px solid var(--_clr-border);
        border-radius: 20px;
        padding-inline: var(--_padding);
        background-color: rgb(var(--_clr-bg-rgb));
        position: relative;
        isolation: isolate;
    }

    @media (min-width: 600px) {
        nav {
            --_width: 100px;
            --_f-size: 2rem;
        }
    }
    nav > button {
        border: none;
        padding: 0;
        background: transparent;
        color: var(--_clr-f);
        cursor: pointer;
        font-size: var(--_f-size) !important;
        width: var(--_width);
        aspect-ratio: 3/2;
        opacity: 0.5;
        transition: opacity var(--_speed) ease-in-out,
        width var(--_speed) ease-in-out;
        display: grid;
        place-content: center;
    }


    button.active,
    button:hover {
        opacity: 1;
    }

    button.active > span,
    button:hover > span {
        scale: 1.15;
        pointer-events: none;
    }


    .dropdown-item:hover .sub-category {
        display: block;
    }

    .sub-category {0
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: white;
        border: 1px solid #ddd;
        z-index: 1000;
        width: 200px; /* عرض زیر دسته‌ها */
    }

    .dropdown-item {
        position: relative;
    }


    .center-header {
        display: flex;
        flex-direction: row;


    }


    .navmenu li:hover > .sub1 {
        display: flex; /* فعال‌کردن Flexbox */
        flex-direction: column;
        z-index: 120 !important;

    }


    /* nav */
    li {
        width: 100px;
        height: 40px;
        border: 0;
        font-size: 16px;
        transition: all 150ms ease-in-out;
        border-radius: 14px;
        font-weight: 600;
        color: rgb(0, 0, 0);
        background-color: rgb(236, 236, 236);
        background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
        box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
        z-index: 90 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .navmenu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .navmenu li {
        float: left;
        position: relative;


    }

    .navmenu li a {
        display: block;
        text-align: center;
        border-radius: 3px;
        text-decoration: none;
        color: #000;
        text-transform: capitalize;
    }

    .sub1 {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        display: none;
        top: 81px;
        right: 0; /* اینجا موقعیت را به سمت راست تنظیم می‌کنیم */
        background-image: url(/static/cover/9b247857-f11e-4371-85d1-5848ad7b4bc7.jpeg);
        object-fit: 30%;
        border: solid 10px #026378;
        -webkit-box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
        -moz-box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
        box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
        width: 1080px;


        height: 602px;
        border-radius: 20px;

        z-index: 120 !important;
    }

    .sub1 li a {
        margin-bottom: 1px;
    }

    .sub2 {
        position: absolute;
        top: 0px;
        right: 100px; /* با راست یابی */
        list-style: none;
        display: none; /* مخفی کردن منوی فرعی */
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(107, 132, 224, 0.685) 35%);
        z-index: 120 !important;
        border-radius: 20px;
        padding: 0; /* حذف padding روی منو */

    }
.span-font-cat{font-size: 12px !important;}
    .navmenu li:hover > .sub2 {
        display: flex; /* نمایش منو در زمان هاور */
        flex-wrap: wrap; /* برای ایجاد ردیف‌های جدید */
        padding: 0; /* حذف padding (می‌توانید مقدار آن را تنظیم کنید) */
        width: 600px; /* عرضی که متناسب با محتوای شما باشد */
    }

    .sub2 li {
        width:115px !important; /* 100% / 6 (نسبت به تعداد آیتم‌ها) */

        background-color: #00ff62;
    }


    .sub2 a:hover {
    }











    .item-cat {
        margin-top: 8px;
        border-radius: 20px 0 0 20px;
 width: 43.66%;
        display: flex;

    }













    .item-das {
        width: 100px;
        height: 40px;
        border: 0;
        font-size: 16px;
        transition: all 150ms ease-in-out;
        font-weight: 600;
        color: rgb(0, 0, 0);
        background-color: rgb(236, 236, 236);
        background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
        box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
        z-index: 90 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 20px 0 0 20px !important;
        align-items: center;
    }


    sub-main:hover {
        margin-top: 8px;
        background-color: #bfbfef;
        z-index: 90 !important;

    }

    li:hover > a {
        margin-top: 8px;
        background-color: #bfbfef00;
        border-radius: 1400px;
    }


    .sub-main::after {
        content: ""; /* برای ایجاد یک ناحیه خالی */
        position: absolute; /* قرار دادن آن بر روی دکمه */

        opacity: 0; /* شروع بدون نمایان بودن */
        transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
    }

    .sub-main:hover::after {
        opacity: 1; /* نمایان شدن ناحیه هاور */
        top: -70px; /* بالا رفتن ناحیه هاور */
        left: -5px; /* چپ رفتن ناحیه هاور */
        right: -5px; /* راست رفتن ناحیه هاور */
        bottom: -70px; /* پایین رفتن ناحیه هاور */

    }


    .dr::after {
        content: ""; /* برای ایجاد یک ناحیه خالی */
        position: absolute; /* قرار دادن آن بر روی دکمه */
        top: -67px; /* بالا رفتن ناحیه هاور */
        left: -60px; /* چپ رفتن ناحیه هاور */
        right: -40px; /* راست رفتن ناحیه هاور */
        bottom: -67px; /* پایین رفتن ناحیه هاور */
        opacity: 0; /* شروع بدون نمایان بودن */
        transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
    }

    /* نمایان شدن در هاور */
    .dr-child:hover::after {
        opacity: 1; /* نمایان شدن ناحیه هاور */
    }

    .dr-child::after {
        content: ""; /* برای ایجاد یک ناحیه خالی */
        position: absolute; /* قرار دادن آن بر روی دکمه */
        top: -67px; /* بالا رفتن ناحیه هاور */
        left: -60px; /* چپ رفتن ناحیه هاور */
        right: -40px; /* راست رفتن ناحیه هاور */
        bottom: -67px; /* پایین رفتن ناحیه هاور */
        opacity: 0; /* شروع بدون نمایان بودن */
        transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
    }

    /* نمایان شدن در هاور */
    .dr:hover::after {
        opacity: 1; /* نمایان شدن ناحیه هاور */
    }


    .whash-text {
        position: absolute;
        bottom: 7px;
        left: 11px;
        font-size: 64px;
        color: rgb(255, 255, 255);
        font-weight: 800;
    }

    .box {
        width: 400px;
        height: 33px;
        background-color: white;
        border-radius: 0 10px 10px 22.3px;
        display: flex;
        align-items: center;
        position: relative;
        top: 3px;

    }

    .serchh {
        position: relative;
        padding: 20px;
        border-radius: 10px;
    }

    .box > i {
        font-size: 20px;
    }

    .box > input {
        width: 400px;
        height: 33px;
        border: none;
        outline: none;
        font-size: 10px;
        border-radius: 0 10px 10px 22.3px;
        padding-left: 10px;
    }

    .img-serch {
        display: inline;

        transform: translateX(2.5px) translateY(-8px);
        z-index: 100;

    }


    .line-blue {
        position: relative;
        top: 46px;

        left: 21px;

    }


    .sec {
        margin-top: 100px;
        display: flex;


    }

    .dis-left {

        display: flex;
        position: relative;
        bottom: 9px;
        position: fixed;
        left: 6px;

    }

    .header-left {
        height: 587px;

        /* background: rgb(53,117,252);
        background: linear-gradient(290deg, rgba(53,117,252,1) 0%, rgba(255,255,255,1) 84%);  */
        display: flex;
        /* background: rgb(0,0,0);
        background: linear-gradient(290deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3180671926973915) 100%);  */
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 0.8922968845741421) 26%, rgba(102, 147, 255, 1) 100%);
        padding-top: 2px;
        position: relative;
        justify-content: start;
        border-radius: 40px;
    }


    .carousel-control {
        position: absolute;
        top: 80%;
        transform: translateY(-60%);
    }

    .carousel-control-prev {
        right: 140px; /* تنظیم فاصله بین دکمه‌ها */
        transform: translateY(230%);
    }

    .carousel-control-next {
        transform: translateY(230%);
        margin-right: 54px;
    }

    .curved {
        position: relative;
        background: #2c3e50;
        height: 50vh;
        border-bottom-left-radius: 50% 20%;
        border-bottom-right-radius: 50% 20%;
    }

    .carousel span {
        background-color: #0053ed;
        border-radius: 300px;
        width: 40px;
        height: 40px;
    }

    .w1 {

        width: 100%; /* عرض کامل */
        height: 400px; /* ارتفاع مشخص */
        object-fit: cover;
        transform: translatey(-35px);

        /* تصویر به صورت متناسب در می‌آید */


    }

    .w2 {

        width: 100%; /* عرض کامل */
        height: 400px; /* ارتفاع مشخص */
        object-fit: cover;
        transform: translatey(-41px);

        /* تصویر به صورت متناسب در می‌آید */


    }


    .w3 {

        width: 100%; /* عرض کامل */
        height: 400px; /* ارتفاع مشخص */
        object-fit: cover;
        transform: translatey(-21px);

        /* تصویر به صورت متناسب در می‌آید */


    }

    .icon-bouten-slider {
        gap: 85px !important;

    }


    .font-icon-bouten-slider {

        font-size: 14.5px;
        font-weight: 700;
        margin-top: 3px;

    }


    .next-pre {
        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 168, 201, 1) 100%);
        border-radius: 5px;

        border-radius: 20px;

    }

    .pagination {
        padding: 10px;
        background-color: #f1e3e3;
        border-radius: 5px;
        list-style: none;
    }

    .products-container {
        max-width: 100%; /* To ensure container doesn't overflow */

    }

    .product-item {
        display: flex;
        flex-direction: column;

        width: 145px !important; /* Set a fixed width for items to appear aligned */
        text-align: center;
        border-radius: 16px !important;
        background-color: #1a1a1a;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-link {
        text-decoration: none;
        color: #004ea2;
        border: none;
        font-size: 10px !important;
        width: 100%;
        height: 100%;


    }

    .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
    }

    .products-container a {
        display: flex;
        justify-content: center; /* مرکز سازی افقی */
        align-items: center; /* مرکز سازی عمودی */


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

    }

    .page-item a {
        display: flex;
        justify-content: center; /* مرکز سازی افقی */
        align-items: center; /* مرکز سازی عمودی */

    }


    .image-product {
        border-radius: 20px 0 0 20px !important;
        object-fit: cover;

    }




    .button-91:hover {

        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 83, 99, 1) 100%);

    }

    .txt-footer-prod {
        display: flex;
        flex-direction: column;
    }


    .txt-price {
        display: flex;
        position: relative;
        top: 15px;
    }

    .bishtar {
        border-radius: 20px;
        align-items: center;
        background-color: #0655cc82;
        height: 30px;
        position: relative;
        bottom: 10px;
    }

    .font-bish {
        top: 4px;
        font-size: 18px;
        position: relative;
        right: 2px;
        color: rgb(255, 255, 255);
    }


    .e {
        font-size: 20px;
        display: flex; /* استفاده از flex برای مرکز چین کردن */
        justify-content: center; /* مرکز چین کردن افقی */
        align-items: center; /* مرکز چین کردن عمودی */
        text-align: center; /* مرکز چین کردن متن */
        width: 100%;
        color: rgb(255, 255, 255); /* عرض دکمه کامل */
    }


    .accordion-button {

        border-radius: 50px;

    }


    .custom-arrow {
        font-size: 27px; /* اندازه دلخواه برای آیکون */
        border-radius: 100%;
        margin-left: 10px; /* ایجاد فضای کافی بین متن و آیکون */
        padding: 4px;
        vertical-align: middle; /* مرکز چین کردن عمودی آیکون */
        color: rgb(34, 166, 254);
    }


    .accordion-button:not(.collapsed) .custom-arrow {
        transform: rotate(0deg); /* فلش در حالت باز */
    }

    .accordion-button.collapsed .custom-arrow {
        transform: rotate(180deg); /* فلش در حالت بسته */
    }


    .accordion-button {
        cursor: default; /* برای جلوگیری از دسترسی به قابلیت کلیک روی دکمه */
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.838) 34%, rgba(0, 0, 0, 0.871) 100%);
    }

    .accordion-button::after {
        display: none; /* پنهان کردن فلش پیش‌فرض */
    }


    .accordion-ja {
        transform: translatey(-25px);
    }


    .top {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 92px), calc(50% + 465.05px) calc(100% - 82px), 50% 100%, calc(50% - 465.05px) calc(100% - 82px), 0 calc(100% - 82px));
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 34%, rgba(0, 212, 255, 1) 100%);

    }

    .bottom {
        clip-path: polygon(0 0, calc(58% - 2.19px - 465.05px) 0, 50% calc(70px + 0.39px), calc(42% + 2.19px + 465.05px) 0, 100% 0, 100% 100%, 0 100%);
        margin-top: -57px;
        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 73, 133, 0.566) 72%);
        border-radius: 17px;
    }


    .taghfif {

        color: beige;
        font-size: 32px;
    }


    .carousel {
        margin-top: 40px;
    }


    .carousel-cell {
        height: 220px;
        margin-right: 18px !important;
        border-radius: 5px;
    }

    .dot {
        background-color: #ffffff !important;
    }


    .carousel-cell p {
        font-size: 13px;
        color: rgb(255, 255, 255);
    }


    .button-28 {
        border: 2px solid #1A1A1A;
        border-radius: 15px;
        box-sizing: border-box;
        color: #000000;
        cursor: pointer;
        display: inline-block;
        font-size: 18px;

        outline: none;
        padding: 14px 26px;
        text-align: center;

    }


    .button-28:hover {
        color: #fff;
        background-color: #000000d4;
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    }

    .align-items-btn {
        margin-top: 80px;
        margin-right: 11px;

    }


    .footer {
        background-color: #0d1117;
        color: white;
    }

    .footer ul {
        padding: 0;
        list-style: none;
        text-align: center;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 0;
    }

    .footer li {
        display: inline-block; /* Change to inline-block for horizontal layout */
        padding: 0 10px;
    }

    .footer ul a {
        color: inherit;
        text-decoration: none;
        opacity: 0.8;

    }


    .footer .social {
        text-align: center;
        padding-bottom: 25px;
        margin-top: 33px;
    }


    .footer .copyright {

        text-align: center;
        font-size: 15px;
        margin: 25px;
    }

    .footer .footer-break {
        height: 2px;
        border-width: 0;
        color: rgb(255, 255, 255);
        background-color: whitesmoke;
    }


    .footer-txt {

        background: #000000;
        background: linear-gradient(185deg, rgba(0, 0, 0, 1) 0%, rgba(5, 76, 255, 1) 72%);
        border-radius: 0 0 0 140px;
    }


    .eggy {
        font-size: 50px;
        width: 600px;
        height: 200px;
        z-index: 9999; /* اضافه کردن z-index بالاتر */
    }

    .message {

        font-size: 15px !important;

    }









    /*//////////////////////end*/
    .btn-lefter {
        --green: #bcb5ff;
        font-size: 15px;
        width: 180px;
        height: 70px;
        margin-top: 13px;

        letter-spacing: 0.06em;
        position: relative;
        font-family: inherit;
        border-radius: 0.6em;
        overflow: hidden;

        line-height: 1.4em;
        border: 2px solid var(--green);
        background: linear-gradient(to right, rgba(84, 148, 245, 0.1) 1%, transparent 40%, transparent 60%, rgba(230, 255, 244, 0.1) 100%);
        color: whitesmoke;
        box-shadow: inset 0 0 10px rgba(249, 255, 252, 0.4), 0 0 9px 3px rgba(230, 243, 237, 0.1);
    }

    .btn-lefter:hover {
        color: #90e2a8;
        box-shadow: inset 0 0 10px rgba(154, 207, 236, 0.6), 0 0 9px 3px rgba(134, 169, 211, 0.2);
    }

    .btn-lefter:before {
        content: "";
        position: absolute;
        left: -4em;
        width: 4em;
        height: 100%;
        top: 0;
        transition: transform .4s ease-in-out;
        background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%);
    }

    .txt-price {
        width: 140px;
        background-color: #1f57f1;
        display: flex;
        position: relative;
        transform: translateY(1px);
        border-radius: 0 0 16px 16px;
        font-size: 17px;
        justify-content: center;
    }


    .product-name-page {
        font-size: 12px;
        margin-top: 8px
    }


    .f {
        font-size: 16px !important;

        height: 40px;

    }

    .ta {
        display: flex;
        position: relative;
        bottom: 100px
    }

    .mah {
        display: flex;
        position: relative;
        bottom: 205px
    }


    .footer {
        transform: translateY(-200px)

    }


    .gaming-button-footer {
        color: white;
        text-decoration: none;
        border: 2px solid #7AAFFF;
        /* background: rgb(0,0,0);
        background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
        overflow: hidden;
        background: rgb(0, 0, 0);
        background: linear-gradient(290deg, rgba(0, 0, 0, 1) 45%, rgba(255, 255, 255, 0.8922968845741421) 100%);
        cursor: pointer;
        height: 64px;
        transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
        border-radius: 15px; /* گرد کردن بردر */
    }

    .gaming-button-footer::before, .gaming-button-footer::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        transition: transform 0.4s;
        z-index: -1;
        overflow: hidden;
    }

    .gaming-button-footer::before {
        top: 0;
        left: -100%;
        transform: skewX(-45deg);
    }

    .gaming-button-footer::after {
        bottom: 0;
        right: -100%;
        transform: skewX(45deg);
    }

    .gaming-button-footer {
        transform: scale(1.1);
    }

    .gaming-button-footer::before {
        transform: translateX(100%) skewX(-45deg);
    }

    .gaming-button-footer::after {
        transform: translateX(-100%) skewX(45deg);
    }


    .form-control {

        outline: none;
    !important; /* حذف دور خطی هنگام کلیک */
        font-size: 14px !important; /* بزرگتر کردن اندازه متن */
        border: none; /* حذف کادر دور */
        border-bottom: 2px solid #000; /* اضافه کردن یک خط زیرین (اختیاری) */
        /* سایر استایل‌ها را که مایلید می‌توانید اضافه کنید */
        border-radius: 0 10px 10px 22px;
    }

    .inp-ser {
        border-radius: 0 10px 10px 22px
    }

    .form-control:focus {
        border: none;
    !important; /* اطمینان از حذف کادر دور هنگام کلیک */
        /* می‌توانید استایل‌هایی برای حالت فوکوس (focus) هم اضافه کنید، مثلاً تغییر رنگ */
        box-shadow: none; /* حذف سایه در حالت فوکوس */
    }


    .round:hover {
        cursor: pointer;
        width: 300px;
        transition: all 3.6s ease-in-out;
        background: linear-gradient(185deg, rgba(0, 0, 0, 1) 0%, rgba(5, 76, 255, 1) 72%);
        border-radius: 640px
    }

    .round {
        background: transparent;
        outline: none;
        position: relative;
        border: 2px solid #111;
        overflow: hidden;

    }


    /*button:before (attr data-hover)*/
    .round:hover:before {
        opacity: 1;
        transform: translate(0, 0);
    }

    .round:before {
        content: attr(data-hover);
        position: absolute;
        left: 0;
        top: 6px;
        color: white;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 800;
        font-size: 22px;
        opacity: 0;
        transform: translate(-100%, 0);
        transition: all .6s ease-in-out;
    }

    /*button div (button text before hover)*/
    .round:hover div {
        opacity: 0;
        transform: translate(100%, 0)
    }

    .round div {
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 800;
        font-size: .28em;
        transition: all .6s ease-in-out;
    }


    .round-whatsapp:hover {
        background: #00ff62;
        background: linear-gradient(90deg, rgba(0, 255, 98, 1) 0%, rgba(9, 121, 82, 1) 64%);
    }


    .round-insta:hover {
        background: #e6ff00;
        background: linear-gradient(38deg, rgba(230, 255, 0, 1) 13%, rgba(219, 7, 2, 1) 37%, rgba(219, 0, 0, 1) 45%, rgba(102, 15, 184, 1) 77%);
    }

    .social-item {
        margin: 9px
    }

    .btn-lefter {
        font-weight: bold;
    }


    .imag-p {
        height: 130px !important;
    }

    .story-btn {
        background-color: #0079ff;
        font-size: 19px;
    }

    .story-btn:hover {
        color: yellow
    }




  }













/* پنهان کردن mobile-main به صورت پیش‌فرض */
.mobile-main {
    display: none;
}


@media (min-width: 1200px) and (max-width: 1300px) {
    .xm {
        display: none; /* به تغییر حالت این کلاس */
    }

}



@media (max-width: 1199px) {


  .main-header{display: none !important;}




           .mobile-main {
          display: flex !important;
      }











      .main{
          z-index: 90 !important;
          min-height: 2340px !important;
          overflow: hidden;
          border: 1px solid hsl(0, 0%, 25%);
          background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
          box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
          transition: transform 0.6s ease;
          width:100% !important;
          overflow-x: hidden !important;

          background: rgb(53, 117, 252);
          background: linear-gradient(290deg, rgba(53, 117, 252, 0.2) 4%, rgba(255, 255, 255, 1) 100%);


      }


      .mobile-main {
          display: flex;
          flex-direction: row;
          position: fixed;
          z-index: 90 !important;

      }




      .card {
          position: relative;
          width: 17.7%;


          border-radius: 20px;
          border: 1px solid hsl(0, 0%, 25%);
          background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
          box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
          transition: transform 0.6s ease;

          background: rgb(53, 117, 252);
          background: linear-gradient(290deg, rgba(53, 117, 252, 1) 33%, rgba(0, 0, 0, 1) 91%);

      }


      .card-content {
          display: flex;
          justify-content: center;

          align-items: center;
      }


      .header {
          background: rgb(0, 0, 0);
          background: linear-gradient(290deg, rgba(0, 0, 0, 1) 28%, rgba(0, 176, 255, 1) 100%);
          width: 100% !important;
          height: 100px;
          background-size: cover;
          display: flex;

          align-items: center;

      }


      .gaming-button-mob{
          color: white;
          text-decoration: none;
          border: 2px solid #a56eff4f;
          /* background: rgb(0,0,0);
          background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
          overflow: hidden;
          background: rgb(0, 0, 0);
          background: linear-gradient(290deg, rgba(0, 0, 0, 1) 45%, rgba(255, 255, 255, 0.8922968845741421) 100%);
          cursor: pointer;
          height: 50px;
          width: 50px;
          transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
          border-radius: 15px; /* گرد کردن بردر */
      }


      .img-shop {
          display: flex;
          position: relative;
          bottom: 7px;
      }


      .img-user {

          display: flex;


      }


      .text-user {

          font-size: 15px;

      }

      nav {
          --_width: 20px;
          --_padding: 1rem;
          --_speed: 300ms;
          --_f-size: 1.5rem;
          --_clr-border: rgba(255, 255, 255, 0.784);
          --_clr-bg-rgb: 2, 6, 23;
          --_clr-f: rgb(255, 255, 255);

          display: flex;
          border: 1px solid var(--_clr-border);
          border-radius: 20px;
          padding-inline: var(--_padding);
          background-color: rgb(var(--_clr-bg-rgb));
          position: relative;
          isolation: isolate;
      }

      @media (min-width: 600px) {
          nav {
              --_width: 100px;
              --_f-size: 2rem;
          }
      }
      nav > button {
          border: none;
          padding: 0;
          background: transparent;
          color: var(--_clr-f);
          cursor: pointer;
          font-size: var(--_f-size) !important;
          width: var(--_width);
          aspect-ratio: 3/2;
          opacity: 0.5;
          transition: opacity var(--_speed) ease-in-out,
          width var(--_speed) ease-in-out;
          display: grid;
          place-content: center;
      }


      button.active,
      button:hover {
          opacity: 1;
      }

      button.active > span,
      button:hover > span {
          scale: 1.15;
          pointer-events: none;
      }


      .dropdown-item:hover .sub-category {
          display: block;
      }

      .sub-category {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          background-color: white;
          border: 1px solid #ddd;
          z-index: 1000;
          width: 200px; /* عرض زیر دسته‌ها */
      }

      .dropdown-item {
          position: relative;
      }


      .center-header {
          display: flex;
          flex-direction: row;


      }


      .navmenu li:hover > .sub1 {
          display: flex; /* فعال‌کردن Flexbox */
          flex-direction: column;
          z-index: 120 !important;

      }


      /* nav */
      li {
          width: 100px;
          height: 40px;
          border: 0;
          font-size: 16px;
          transition: all 150ms ease-in-out;
          border-radius: 14px;
          font-weight: 600;
          color: rgb(0, 0, 0);
          background-color: rgb(236, 236, 236);
          background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
          box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
          z-index: 90 !important;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

      .navmenu {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
      }

      .navmenu li {
          float: left;
          position: relative;


      }

      .navmenu li a {
          display: block;
          text-align: center;
          border-radius: 3px;
          text-decoration: none;
          color: #000;
          text-transform: capitalize;
          font-size: 12px;
          white-space: nowrap;
          font-weight:600;
      }
.shaft{display: flex;
    position: relative;
left: 10px;


}

.tit-group {font-size: 16px !important; font-weight:600  }

      .sub1 {
          list-style: none;
          margin: 0;
          padding: 0;
          position: absolute;
          display: none;
          top: 81px;
          right: 0; /* اینجا موقعیت را به سمت راست تنظیم می‌کنیم */
          background-image: url(/static/cover/9b247857-f11e-4371-85d1-5848ad7b4bc7.jpeg);
          object-fit: 30%;
          border: solid 10px #026378;
          -webkit-box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
          -moz-box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
          box-shadow: -25px 86px 300px 200px rgba(0, 0, 0, 1);
          width: 1080px;


          height: 602px;
          border-radius: 20px;

          z-index: 120 !important;
      }

      .sub1 li a {
          margin-bottom: 1px;
      }

      .sub2 {
          position: absolute;
          top: 0px;

          list-style: none;
          display: none; /* مخفی کردن منوی فرعی */
          background: #000000;
          background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(107, 132, 224, 0.685) 35%);
          z-index: 120 !important;
          border-radius: 20px;
          padding: 0; /* حذف padding روی منو */

      }

      .navmenu li:hover > .sub2 {
          display: flex; /* نمایش منو در زمان هاور */
          flex-wrap: wrap; /* برای ایجاد ردیف‌های جدید */
          padding: 0; /* حذف padding (می‌توانید مقدار آن را تنظیم کنید) */
          width: 600px; /* عرضی که متناسب با محتوای شما باشد */
          justify-content: center;
        gap: 5px !important;
      }

      .sub2 li {
         /* 100% / 6 (نسبت به تعداد آیتم‌ها) */
                margin: 7px;
          background-color: #0079ff;
          color: white !important;
         }

      .sub1-mob li:hover {
         /* 100% / 6 (نسبت به تعداد آیتم‌ها) */
            color: white !important;
          background-color: #0d172a !important;
         }

   .sub1-mob li:hover a{
         /* 100% / 6 (نسبت به تعداد آیتم‌ها) */
            color: white !important;

         }



.text-foo{display: flex; margin-bottom:2px; color: #b2bec3 !important; font-size: 3px}
.copyright {color: #b2bec3 !important;}
    .sub2 a {

       color: white !important;

      }



      .item-cat {
         margin: auto;
          border-radius: 10px 0 0 10px;
      }


      .item-das {
          width: 100px;
          height: 40px;
          border: 0;
         left: 20px;
          position: relative;

          font-size: 16px;
          transition: all 150ms ease-in-out;
          font-weight: 600;
          color: rgb(0, 0, 0);
          background-color: rgb(236, 236, 236);
          background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
          box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
          z-index: 90 !important;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 8px 0 0 8px !important;
          align-items: center;
      }

.offcanvas {
  position: fixed;           /* تضمین قرار گرفتن بیرون از جریان معمول */
  z-index: 9999 !important;  /* بالاتر از روبان */
}
.offcanvas-body{

     position: relative;




    background-image: url(/static/cover/9b247857-f11e-4371-85d1-5848ad7b4bc7.jpeg);   object-fit: cover; background-repeat: no-repeat; background-position: center}

    .h{margin-top: 280px !important; position: relative;  }
      sub-main:hover {
          margin-top: 8px;
          background-color: #bfbfef;
          z-index: 99 !important;

      }

      li:hover > a {
          margin-top: 8px;
          background-color: #bfbfef00;
          border-radius: 1400px;
      }


      .sub-main::after {
          content: ""; /* برای ایجاد یک ناحیه خالی */
          position: absolute; /* قرار دادن آن بر روی دکمه */

          opacity: 0; /* شروع بدون نمایان بودن */
          transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
      }

      .sub-main:hover::after {
          opacity: 1; /* نمایان شدن ناحیه هاور */
          top: -70px; /* بالا رفتن ناحیه هاور */
          left: -5px; /* چپ رفتن ناحیه هاور */
          right: -5px; /* راست رفتن ناحیه هاور */
          bottom: -70px; /* پایین رفتن ناحیه هاور */

      }


      .dr::after {
          content: ""; /* برای ایجاد یک ناحیه خالی */
          position: absolute; /* قرار دادن آن بر روی دکمه */
          top: -67px; /* بالا رفتن ناحیه هاور */
          left: -60px; /* چپ رفتن ناحیه هاور */
          right: -40px; /* راست رفتن ناحیه هاور */
          bottom: -67px; /* پایین رفتن ناحیه هاور */
          opacity: 0; /* شروع بدون نمایان بودن */
          transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
      }

      /* نمایان شدن در هاور */
      .dr-child:hover::after {
          opacity: 1; /* نمایان شدن ناحیه هاور */
      }

      .dr-child::after {
          content: ""; /* برای ایجاد یک ناحیه خالی */
          position: absolute; /* قرار دادن آن بر روی دکمه */
          top: -67px; /* بالا رفتن ناحیه هاور */
          left: -60px; /* چپ رفتن ناحیه هاور */
          right: -40px; /* راست رفتن ناحیه هاور */
          bottom: -67px; /* پایین رفتن ناحیه هاور */
          opacity: 0; /* شروع بدون نمایان بودن */
          transition: opacity 150ms ease; /* تغییر نرم نمایان شدن */
      }

      /* نمایان شدن در هاور */
      .dr:hover::after {
          opacity: 1; /* نمایان شدن ناحیه هاور */
      }


      .whash-text {


  display: flex;


          font-size: 64px;
          color: rgb(255, 255, 255);
          font-weight: 800;
      }

      .box {
          width:218px;
          height: 33px;
          background-color: white;
          border-radius: 0 10px 10px 22.3px;
          display: flex;
          align-items: center;
          position: relative;


      }

      .serchh {
  justify-content: center;

      }

      .box > i {
          font-size: 20px;
      }

      .box > input {
          height: 13px;
          border: none;
          outline: none;
          font-size: 10px;
          border-radius: 0 10px 10px 22.3px;

      }

      .img-serch {
          display: inline;


          z-index: 100;

      }


      .line-blue {
          position: relative;
          top: 46px;

          left: 21px;

      }



      .form-control{width:100% !important;
      display: flex;
      position: relative;}


  .header {
      padding: 10px; /* padding به header */
  }
  .search-container {
      display: flex;
      align-items: center;
  }
  .box {
      border-radius: 5px; /* گوشه‌های گرد */
  }
  .whash-text-mob {
      width: 80%; /* عرض عنصر */
      font-size: 30px; /* اندازه فونت */
      color: rgb(255, 255, 255); /* رنگ متن */
      font-weight: 900; /* ضخامت متن */
      letter-spacing: 10px; /* فاصله بین حروف */
      text-transform: uppercase; /* تبدیل متن به حروف بزرگ (اختیاری) */
  }

  .box{

        transform: translateY(-5px); /* جابجایی 20 پیکسل به سمت بالا */
  background: #63c0ff !important;
  display: flex;
      justify-content: center;
  }





  .gg{border:none !important; border-radius: 100%; background-color: #0d1117  }
  .offcanvas-header{background-color: #0d1117}
  .bg-offcanvas{background: linear-gradient(290deg, rgba(0, 0, 0, 0.8922968845741421) 26%, rgba(102, 147, 255, 1) 100%);}




  .img-offcanvas{display: flex; position: relative; bottom:26px; }




  .content-offcanvas{position: relative;bottom:40px }






  .offcanvas-title-mob{color: white !important; font-size:30px;  margin-right: 10px; font-weight:900;   }





  .footer {
  display: none !important;
  }

  .footer-mob {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
display: flex;
    height: 80px; /* Set the desired footer height */
  background: #000000;
  background: linear-gradient(2deg, rgba(0, 0, 0, 1) 65%, rgba(0, 145, 242, 1) 100%);
    text-align: center; /* Center the footer text */
  }


  .left-mob-none{display: none;}


  .img-wash{position: relative; display: flex;
  bottom:3px;
  }



  .h{margin-top: 250px !important;}





  /* CSS */
  .button-15 {
    background-image: linear-gradient(#42A1EC, #0070C9);
    border: 1px solid #0077CC;
    border-radius: 4px;
    box-sizing: border-box;
    color: #FFFFFF !important;
    cursor: pointer;
    direction: ltr;
    display: block;
    font-family: Vazirmatn, sans-serif;
    font-size: 15px !important;
    font-weight: 400;
    letter-spacing: -.022em;
    line-height: 1.47059;
    width: 80px !important;
    overflow: visible;
    padding: 4px 15px;
  margin-top: 20px;
    text-align: center;
    vertical-align: baseline;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
      height: 40px;
      word-spacing: -2px;
  }

  .button-15:disabled {
    cursor: default;
    opacity: .3;
  }

  .button-15:hover {
    background-image: linear-gradient(#51A9EE, #147BCD);
    border-color: #1482D0;
    text-decoration: none;
  }

  .button-15:active {
    background-image: linear-gradient(#3D94D9, #0067B9);
    border-color: #006DBC;
    outline: none;
  }

  .button-15:focus {
    box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
    outline: none;
  }















      .gaming-button-mob-footer{
          color: white;
          text-decoration: none;
          border: 2px solid #ffffff;
          /* background: rgb(0,0,0);
          background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
          overflow: hidden;
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 145, 242, 1) 100%);
          display: flex;
           justify-content: center !important;
  align-items: center !important;
          cursor: pointer;
          height: 50px;
          width: 50px;
          transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
          border-radius: 4px; /* گرد کردن بردر */
      }



      .img-shop {
          width: 80px;
          height: 70px;
          /* برای وسط‌چین کردن تصویر */
          display: flex;
          margin: auto;
          position: relative;
          left: 2px;
      }


  .log{margin-top:18px }


  .lego-m{margin-top:10px }




      .gaming-button-mob-footer-shop{
          color: white;
          text-decoration: none;
          border: 2px solid #ffffff;
          /* background: rgb(0,0,0);
          background: linear-gradient(290deg, rgba(0,0,0,1) 63%, rgba(255,255,255,0.8922968845741421) 100%);     position: relative; */
          overflow: hidden;
  background: #020024;
  background: linear-gradient(359deg, rgba(2, 0, 36, 1) 0%, rgba(0, 0, 0, 1) 59%, rgba(0, 212, 255, 1) 100%);
  /*background: #EEAECA;*/
  /*background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(14, 0, 207, 1) 0%);*/
          display: flex;
           justify-content: center !important;
  align-items: center !important;
          cursor: pointer;
          height: 50px;
          width: 50px;
          transition: color 0.4s, box-shadow 0.4s, transform 0.4s;
        border-radius:100%;
      }

  .slide{display: none !important;}

.sec-mob{display: flex; justify-content: center}
  .slide-mob{display: flex; justify-content: center; padding-top: 86px}


      .carousel-control {
          position: absolute;
          top: 80%;
          transform: translateY(-60%);
      }


      .curved {
          width:97% !important;
          position: relative;
          background: #2c3e50;
          height: 50vh;
          bottom: 18px;
          border-bottom-left-radius: 50% 20%;
          border-bottom-right-radius: 50% 20%;
      }

      .carousel span {
          background-color: #0053ed;
          border-radius: 300px;
          width: 40px;
          height: 40px;
      }

   .w1 {
    width: 100%;

       /* عرض عنصر را به 100% تنظیم کردیم */
    height:100% !important;        /* ارتفاع عنصر را به 100% تنظیم کردیم */
    object-fit: cover;   /* تصویر به صورت متناسب بزرگ می‌شود */
    object-position: center; /* مرکز تصویر به عنوان نقطه مرجع انتخاب شد */
    transform: translateY(1px); /* اگر نیاز به جابجایی داشته باشید */
}

      .w2 {



          object-fit: cover;
          transform: translatey(-119px);

          /* تصویر به صورت متناسب در می‌آید */


      }


      .w3 {


   width: 100%;

       /* عرض عنصر را به 100% تنظیم کردیم */
    height:100% !important;        /* ارتفاع عنصر را به 100% تنظیم کردیم */
    object-fit: cover;   /* تصویر به صورت متناسب بزرگ می‌شود */
    object-position: center; /* مرکز تصویر به عنوان نقطه مرجع انتخاب شد */
    transform: translateY(6px); /* اگر نیاز به جابجایی داشته باشید */
}

          /* تصویر به صورت متناسب در می‌آید */




      .icon-bouten-slider {
          gap: 85px !important;

      }


      .font-icon-bouten-slider {

          font-size: 14.5px;
          font-weight: 700;
          margin-top: 3px;

      }


      .next-pre {
          background: #ffffff;
          background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 168, 201, 1) 100%);
          border-radius: 5px;

          border-radius: 20px;

      }





   .icon-bouten-slider {
       display: none !important;


    }


.icon-bouten-slider-mob{display: flex;  gap: 16px; margin-top: 10px }



.font-icon-bouten-slider {
    font-size: 10px;
    font-weight: 900;
    margin-top: 3px;
    white-space: nowrap; /* جلوگیری از شکستن خط */
}

.next-pre{display: none}
.next-pre-mob{display: flex}



.main-mob-page{display: flex; justify-content: center; flex-direction: column;  margin-top: 79px;}



    .next-pre-mob {
        background: #ffffff;
        margin: auto;

         width: 95%;
      position: relative;
        border-radius: 20px;
          justify-content: center;
        display: flex;
 background: #ffffff;
        flex-direction: column;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 168, 201, 1) 100%);
    }


    .titel-page-arow{background-color: #343434; color: white;  !important;padding: 7px; display: flex;font-size: 18px;  }
    .pagination {

        margin-left: 12px;
        width:100% ;
 background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 168, 201, 1) 100%);
        /*background-color: #f1e3e3;*/
        border-radius: 5px;
        list-style: none;
        display: flex;
        justify-content: center;
    }
h1 {
  box-shadow:0 0 5vw,inset 2px 2px 5px #000 ;
  overflow:hidden;
  padding-inline:.25em;
  border-radius:.15em;
  border:solid 2px;

    position: relative;
    display: flex;
    bottom: 3px;
}
h1::before {
  content:'';
  height:.6em;
  margin:0 0 -.55em;
  margin-inline:2px;


  display:block;
}
    .products-container {
        max-width: 100%; /* To ensure container doesn't overflow */

    }

    .product-item {
        display: flex;
        flex-direction: column;

        width: 108px !important; /* Set a fixed width for items to appear aligned */
        text-align: center;
        border-radius: 16px !important;
        background-color: #1a1a1a;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-link {
        text-decoration: none;
        color: #004ea2;
        border: none;
        font-size: 10px !important;
        width: 100%;
        height: 100%;


    }

    .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
    }

    .products-container a {
        display: flex;
        justify-content: center; /* مرکز سازی افقی */
        align-items: center; /* مرکز سازی عمودی */


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

    }

    .page-item a {
        display: flex;
        justify-content: center; /* مرکز سازی افقی */
        align-items: center; /* مرکز سازی عمودی */

    }


    .image-product {
        border-radius: 20px 0 0 20px !important;
        object-fit: cover;

    }

    .button-91 {
        color: #fff;
        width: 140px;
        height: 40px;

        font-weight: bold;
        font-size: 16px;
background: #020024;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 46%, rgba(60, 127, 181, 1) 100%);        border: 0;
        display: flex;
        justify-content: center;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;

        cursor: pointer;
    }


    .button-91-ri {   border-radius: 2px  2px 2px 25px !important;    }

    .button-91-le { border-radius: 2px  2px 25px 2px !important;}

    .button-91:hover {

        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 83, 99, 1) 100%);

    }

    .txt-footer-prod {
        display: flex;
        flex-direction: column;
    }



.txt-price {
        width: 110px;
        background-color: #1f57f1;
        display: flex;
    color: white;
        position: relative;
        transform: translateY(7px);
        border-radius: 0 0 16px 16px;
        font-size: 17px;
        justify-content: center;
    }
 .bishtar{display: none;}
    .bishtar-mob {
        border-radius: 20px;
        align-items: center;
        background-color: #0655cc82;
        height: 30px;
        position: relative;
     top: 6px;
        margin: 4px;
    }

    .font-bish {
        top: 4px;
        font-size: 18px;
        position: relative;
        right: 2px;
        color: rgb(255, 255, 255);
          margin: 4px;
    }


    .e {
        font-size: 20px;
        display: flex; /* استفاده از flex برای مرکز چین کردن */
        justify-content: center; /* مرکز چین کردن افقی */
        align-items: center; /* مرکز چین کردن عمودی */
        text-align: center; /* مرکز چین کردن متن */
        width: 100%;
        color: rgb(255, 255, 255); /* عرض دکمه کامل */
    }



        .custom-arrow {
        font-size: 27px; /* اندازه دلخواه برای آیکون */
        border-radius: 100%;
        margin-left: 10px; /* ایجاد فضای کافی بین متن و آیکون */
        padding: 4px;
        vertical-align: middle; /* مرکز چین کردن عمودی آیکون */
        color: rgb(34, 166, 254);
    }




.product-name-page{display: flex;
    position: relative;
top: 5px}




.accordion{display: none}



.accordion-mob{position: relative;width:90% }


    .accordion-button {
        width: 40%;
        border-radius: 50px;

    }


    .custom-arrow {
        font-size: 27px; /* اندازه دلخواه برای آیکون */
        border-radius: 100%;
        margin-left: 10px; /* ایجاد فضای کافی بین متن و آیکون */
        padding: 4px;
        vertical-align: middle; /* مرکز چین کردن عمودی آیکون */
        color: rgb(34, 166, 254);
    }


    .accordion-button:not(.collapsed) .custom-arrow {
        transform: rotate(0deg); /* فلش در حالت باز */
    }

    .accordion-button.collapsed .custom-arrow {
        transform: rotate(180deg); /* فلش در حالت بسته */
    }


    .accordion-button {
        cursor: default; /* برای جلوگیری از دسترسی به قابلیت کلیک روی دکمه */
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.838) 34%, rgba(0, 0, 0, 0.871) 100%);
    }

    .accordion-button::after {
        display: none; /* پنهان کردن فلش پیش‌فرض */
    }


    .accordion-ja {

    }


    .top {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 92px), calc(50% + 465.05px) calc(100% - 82px), 50% 100%, calc(50% - 465.05px) calc(100% - 82px), 0 calc(100% - 82px));
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 34%, rgba(0, 212, 255, 1) 100%);

    }

    .bottom {
        clip-path: polygon(0 0, calc(58% - 2.19px - 465.05px) 0, 50% calc(70px + 0.39px), calc(42% + 2.19px + 465.05px) 0, 100% 0, 100% 100%, 0 100%);
        margin-top: -57px;
        background: #ffffff;
        background: linear-gradient(185deg, rgba(255, 255, 255, 1) 0%, rgba(0, 73, 133, 0.566) 72%);
        border-radius: 17px;
    }


.accordion-body{ display: flex;  justify-content: center   }



.ta{display: none}
.ta-mob{display: flex; position: relative; bottom:15px }
.mah {display: none}

.mah-mob{display: flex; position: relative; bottom: 50px }



/*//////////////////////////////////*/

    .taghfif {

        color: beige;
        font-size: 32px;
    }


    .carousel {
        margin-top: 40px;
    }


    .carousel-cell {
        height: 200px;
        margin-right: 18px !important;
        border-radius: 5px;
        width:130px!important; ;

    }






    .main{
        z-index: 90 !important;
        min-height: 100px !important;
        overflow: hidden;
        border: 1px solid hsl(0, 0%, 25%);
        background-image: linear-gradient(0deg, hsl(0, 0%, 15%), hsl(0, 0%, 25%));
        box-shadow: 0 -6px 12px hsl(0, 0%, 100%, 0.2), 0 6px 24px hsl(0, 0%, 0%, 0.6), inset 0 -12px 32px hsl(0, 0%, 0%, 0.6), inset 0 12px 32px hsl(0, 0%, 100%, 0.3), inset 0 -8px 12px -5px hsl(0, 0%, 100%, 0.3);
        transition: transform 0.6s ease;
        width:100% !important;
        overflow-x: hidden !important;

        background: rgb(53, 117, 252);
        background: linear-gradient(290deg, rgba(53, 117, 252, 0.2) 4%, rgba(255, 255, 255, 1) 100%);


    }







  .txt-price-two {
    width: 120px;
    background-color: #1f57f1;
    display: flex;
    color: white;


    position: relative;
    transform: translateY(7px);
    border-radius: 0 0 18px 18px;
    font-size: 17px;
    justify-content: center;
  }


.image-ja-mob{display: flex; position: relative; top: 3px; border-radius: 13px}


.bg-rules{background-color: rgba(0, 0, 0, 0.71);
}




/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 18px;
  font-weight: bold;
    height: 65px;
  color: #fff;
    z-index: 2;
}
.ribbon {
  --s: 1.8em; /* the ribbon size */
  --d: .8em;  /* the depth */
  --c: .8em;  /* the cutout part */
display: flex;
    position: relative;
    bottom: 8px;
  padding: var(--d) calc(var(--s) + .5em) 0;
  line-height: 1.8;
  background:
    conic-gradient(from  45deg at left  var(--s) top var(--d),
     #0008 12.5%,#0000 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(from -45deg at right var(--s) top var(--d),
     #0004 62.5%,#0000 0 87.5%,#0008 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 0,calc(var(--s) + var(--d)) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s) - var(--d)) 0,100% 0, calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  background-color: #0079ff; /* the main color */
  width: fit-content;
}









/* CSS */
.button-64 {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 3px  3px  14px  3px  ;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
 width: 100px;
padding: 5px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
    position: relative;
    left: 32px;

}







    .button-64-ri {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 3px  3px 3px  14px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
width: 100px;
height: 50px;
  padding: 5px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
    position: relative;
    right: 32px;


}












  }