@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: 1200;
  font-style: normal;
  font-display: swap;
}




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

    a {
        text-decoration: none !important;

    }


    @import url(https://fonts.googleapis.com/css?family=Exo+2:200i);



    body {
        font-family: Montserrat;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: #d1cbcb; /* Fallback background color */

        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    @media (min-width: 1200px) {

        .box {
            display: none
        }


    }


@media (max-width: 547px) {
    .hc {
        display: none;
    }
    .hb {
        display: flex;
    }
    .hb-x {
        display: none;
    }
    .hb-xx {
        display: none;
    }
    .h-xxx {
        display: none;
    }
}

@media (min-width: 548px) {
    .hc {
        display: none;
    }
    .hb {
        display: none;
    }
    .hb-x {
        display: flex;
    }
    .hb-xx {
        display: none;
    }
    .h-xxx {
        display: none;
    }
}

@media (min-width: 728px) {
    .hb {
        display: none;
    }
    .hb-x {
        display: none;
    }
    .hb-xx {
        display: flex;
    }
    .hc {
        display: none;
    }
    .hb-xxx {
        display: none;
    }
}

@media (min-width: 1001px) {
    .hb {
        display: none;
    }
    .hb-x {
        display: none;
    }
    .hb-xx {
        display: none;
    }
    .hc {
        display: none;
    }
    .h-xxx {
        display: flex;
    }


    .txt-price {
        display: flex;

        position: relative;
        bottom: 0;
        color: white !important;
        width: 145px;
    }


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

.txt-price {

        background-color: #1f57f1;
        display: flex

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




}

@media (min-width: 1200px) {
    .hb {
        display: none;
    }
    .hb-x {
        display: none;
    }
    .hb-xx {
        display: none;
    }
    .hc {
        display: flex;
    }
    .h-xxx {
        display: none;
    }
}














    .header {
        height: 80px !important;

    }


    /* left */
    .item {
        content-align: center;
        background: #020024;
        background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(0, 212, 255, 1) 100%);
        padding: auto;

        border-radius: 20px;
        box-shadow: 0px 7px 19px 0px RGB(51, 15, 27, 0.3);
        transition: 0.3s ease-in-out;
    }

    .name-product {

        justify-content: center;
        font-size: 35px;
        color: #0d50c4;
    }










    .quantity-selector {
        display: flex;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 5px;
        overflow: hidden;
        margin-right: 20px;
    }


    @media (max-width: 768px) {
        .container {
            width: 100%;

            display: flex;
            flex-direction: column;
            border-radius: 15px;

        }

        nav {
            display: flex;
            position: fixed;

            width: 90%;



            z-index: 1000;
        }


        footer {
            padding: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column-reverse;
            width: 100%;
        }


        main {
            margin: 20px 10px;
            display: flex;
            flex-direction: column-reverse;
        }


        .product-image img {
            height: auto;
        }

    }



.containers {margin-top: 90px}

    .hidden {
        display: none;

    }

    #shareOptions {
        margin-top: 10px;

        padding: 10px;
      background: #ffffff;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 28%, rgba(9, 9, 121, 1) 27%, rgba(0, 212, 255, 1) 100%);
        border: #0d05d5 solid 2px;
        border-radius: 5px;
        gap: 7px;

    }

    #closeBtn {
        margin-top: 10px;
        cursor: pointer;
    }


    /* CSS */
    .button-84 {
        align-items: center;
        background-color: initial;
        background-image: linear-gradient(#464d55, #25292e);
        border-radius: 8px;
        border-width: 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        font-family: expo-brand-demi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 18px;
        height: 52px;
        justify-content: center;
        line-height: 1;
        margin: 0;
        outline: none;
        overflow: hidden;

        text-align: center;
        text-decoration: none;
        transform: translate3d(0, 0, 0);
        transition: all 150ms;
        vertical-align: baseline;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }

    .button-84:hover {
        box-shadow: rgba(0, 1, 0, .2) 0 2px 8px;
        opacity: .85;
    }

    .button-84:active {
        outline: 0;
    }

    .button-84:focus {
        box-shadow: rgba(0, 0, 0, .5) 0 0 0 3px;
    }

    @media (max-width: 420px) {
        .button-84 {
            height: 48px;
        }
    }


    .plus {
        font-size: 20px;
        display: flex;
        position: relative;
        bottom: 3px;

    }


    .bg-price-id {
        width:100%;


        background: #0abeff;
        background: linear-gradient(182deg, rgba(10, 190, 255, 1) 10%, rgba(67, 67, 255, 0.979) 100%);
        height: 70px;
        border-radius: 5px;

    }


    .border-title {
        border-bottom: 1px solid black;
        background-color: rgb(28, 28, 28);
        color: white;
        display: flex;
        justify-content: center;
        font-size: 16px;
        width: 100%;
        padding: 3px;
        border-radius: 3px 3px 0 0;
    }


    .price {
        color: white;
        font-size: 22px;

    }


    .desc {

        font-size: 25px;
        margin-top: 14px;
    }


    .item-desc {
        content-align: center;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 7px 19px 0px RGB(51, 15, 27, 0.3);
        width: 95%;
        height: 100%;

        margin-top: 11px;
    }


    .pric {
        color: white;
        font-size: 22px;

    }


    .text-dec {

        font-size: 15px;

    }

    form {
        outline: 0;
        float: left;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -webkit-border-radius: 4px;
        border-radius: 34px;
    }

    form > .textbox {
        outline: 0;
        height: 40px;
        width: 304px;
        line-height: -242px;
        padding: 0 20px;

        background-color: rgba(255, 255, 255, 0.8);
        color: #212121;
        border: 0;
        float: left;
        -webkit-border-radius: 4px 0 0 4px;
        border-radius: 14px 0 0 14px;
    }

    form > .textbox:focus {
        outline: 0;
        background-color: #FFF;
    }

    form > .button {
        outline: 0;
        background: none;
        background-color: rgb(0, 0, 0);
        height: 48px;
        width: 48px;
        display: flex;
        position: relative;
        right: 14px;
        text-align: center;
        border: 0;
        color: #FFF;
        font-size: 16px;
        text-rendering: auto;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-transition: background-color .4s ease;
        transition: background-color .4s ease;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 340px;
    }

    .icon-pro {
        background: #0059ff;
        background: linear-gradient(182deg, rgba(0, 89, 255, 1) 57%, rgba(0, 0, 0, 1) 91%);
        border-radius: 20px;

    }


    .taghfif {
        display: flex;
        position: relative;
        font-size: 26px !important;
        bottom: 6px;

    }


    #inputPassword2 {
        height: 30px;
        font-size: 20px; /* مقدار مناسب را تنظیم کنید */
        outline: none;

        border: 2px solid black;
    }


    .btn-custom {
        height: 30px;
        width: 60px;
        font-size: 18px; /* مقدار مناسب را تنظیم کنید */
    }


    .header-1 {
        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;

    }


    #namanyay-search-btn {
        background: #0099ff;
        color: white;
        font: 'trebuchet ms', trebuchet;
        padding: 10px 20px;
        border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -webkit-border-radius: 0 5px 5px 0;
        -o-border-radius: 0 5px 5px 0;
        border: 0 none;
        font-weight: bold;
    }

    #namanyay-search-box {
        background: #eee;
        padding: 10px;
        border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -webkit-border-radius: 5px 0 0 5px;
        -o-border-radius: 5px 0 0 5px;
        border: 0 none;
        width: 160px;
    }

span{font-size: 18px}







    .another_products{display: none !important;}

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


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

    }



    .product-item-s {
        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;
    }




.button-90 {
  display: flex;              /* چیدمان در یک خط */
  align-items: center;        /* وسط‌چین عمودی متن و تصویر */
  justify-content: center;    /* وسط‌چین افقی کل محتوا */
  gap: 6px;                   /* فاصله بین متن و عکس */
margin-right: auto;
    margin-left: auto;
    margin-top: 2px;
  color: #fff;
  width: 112px;
  height: 40px;
  border-radius: 10px;
  background-color: #4C43CD;
  background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);

  font-size: 12px;
  border: 0;
  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}



.border-close{border-radius: 100% }

.border-non-icon{border-radius: 100%}

#sms{background-color: #343434; border-radius:9px}

.txt-price-two{align-items: center; display: flex; background-color: #1f57f1; color: white; position: relative; border-radius: 0 0 14px 14px !important;top: 12px;  }