@charset "UTF-8";

@font-face {
    font-family: "Iran1";
    src: url("/styles/webfonts/IRANSansWeb_UltraLight_FaNum.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Iran1";
    src: url("/styles/webfonts/IRANSansWeb_Light_FaNum.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Iran1";
    src: url("/styles/webfonts/IRANSansWeb_FaNum.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Iran1";
    src: url("/styles/webfonts/IRANSansWeb_Medium_FaNum.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Iran1";
    src: url("/styles/webfonts/IRANSansWeb_Bold_FaNum.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Iran1";
    src: url("/styles/webfonts/IRANSansWeb_Black_FaNum.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    margin: 0;
    padding: 0;
    direction: rtl;
    display: block;
    line-height: 1.6;
    text-align: right;
    min-height: 100vh;
    overflow-x: hidden;
    color: #232c39;
    font-family: "Iran1", "Vazirmatn", sans-serif;
    background-color: #f9f9f9;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    text-wrap: balance;
    line-height: 1.1;
}

p,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

img,
picture {
    max-width: 100%;
    height: auto;
    display: block;
}

input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

/*.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}
*/
@media (max-width: 1200px) {
    .container {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-thumb {
    background: radial-gradient(circle, #066899 0%, rgba(0, 0, 0, 0) 100%);
}
.bg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    gap: 10px;
    border-radius: 8px;
    padding: 4px;
}

.orders-term {
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 40px 0px #00000026;
    background: var(--Color-Background, #FFFFFF);
    /*width: 1329;*/
    max-height: 362px;
    border-radius: 24px;
    padding: 24px;
    justify-content: space-between;
    margin-top: 64px;
    gap: 72px;
}
.order-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.order-left img {
    max-height: 314px;
    border-radius: 16px;
}
.content-black {
    color: #313131;
    font-weight: 900;
    font-size: 32px;
    line-height: 48px;
    text-align: right;
}
.content-blue {
    color: var(--Color-Primary, #13558D);
    font-weight: 900;
    font-size: 32px;
    line-height: 48px;
    text-align: right;
}


.hero__content-side {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 642px;
    /*padding: 40px 96px;*/
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gray {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
    font-size: 16px;
}

.blue {
    color: #5075ae;
    font-weight: 500;
    font-size: 16px;
}

.hero__title {
    font-size: 42px;
    font-weight: 900;
    color: #222;
    line-height: 1.2;
}

.hero__description {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 18px;
    line-height: 1.8;
    color: #555;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 560px;
}

    .search-box input {
        width: 100%;
        background: #ffffff;
        border-radius: 12px;
        padding: 16px 48px 16px 16px;
        border: none;
        outline: none;
        font-family: inherit;
    }

.search-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

    .search-icon img {
        width: 100%;
        height: 100%;
        display: block;
    }

@media (max-width: 1024px) {
    .hero__content-side {
        /*padding: 40px 32px;*/
    }
}
.bottom-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hero__title img {
    width: 48px;
    height: 48px;
}
.hero__title{
    display:flex;
    align-items:center;
    gap:16px
}
.hero__description p {
    color: #313131;
    font-weight: 700;
    font-size: ۱۸px;
    line-height: 32px;
    text-align: justify;
}
.btns {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}
.btn-ri {
    color: #13558D;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
   /* width: 317;
    height: 52;*/
    min-width: 110px;
    gap: 7px;
    border-radius: 16px;
    border-width: 1px;
    padding-top: 12px;
    padding-right: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    border: 1px solid #13558D
}
.btn-le {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
/*    width: 317;
    height: 52;*/
    min-width: 110px;
    gap: 10px;
    border-radius: 16px;
    padding-top: 12px;
    padding-right: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    background: #13558D;
}

/* =========================
   ORDER SECTION
========================= */
.order {
    margin: 80px auto;
}

@media (max-width:768px) {
    .order {
        margin: 48px auto;
    }
}

.order-wrapper {
    border-right: 3px solid #066899;
    background: rgba(54, 133, 198, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-radius: 16px;
    padding: 24px;
    border-right-width: 3px;
}

@media (max-width:900px) {
    .order-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 16px;
    }
}

.order-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-align: right;
    color: #066899;
    flex: 1;
}

@media (max-width:900px) {
    .order-title {
        text-align: center;
    }
}

@media (max-width:768px) {
    .order-title {
        font-size: 16px;
        line-height: 26px;
    }
}

.btns-order {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width:900px) {
    .btns-order {
        justify-content: center;
        margin-top: 8px;
    }
}

@media (max-width:480px) {
    .btns-order {
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
    }
}

.btn-order-right,
.btn-order-left {
    width: 200px;
    height: 48px;
    min-width: 160px;
    border-radius: 16px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (max-width:480px) {
    .btn-order-right,
    .btn-order-left {
        width: 100%;
        max-width: 280px;
    }
}

.btn-order-right {
    border: 1px solid #066899;
    background-color: transparent;
}

    .btn-order-right:hover {
        background-color: #066899;
    }

        .btn-order-right:hover .bale-order-num {
            color: #ffffff;
        }

        .btn-order-right:hover img {
            filter: brightness(0) invert(1);
        }

    .btn-order-right img {
        width: 24px;
        height: 24px;
        transition: all 0.2s ease;
    }

.bale-order-num {
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    color: #066899;
    transition: all 0.2s ease;
    direction: ltr;
    display: inline-block;
}

.btn-order-left {
    background-color: #066899;
}

    .btn-order-left:hover {
        background-color: #05577f;
        transform: translateY(-2px);
        box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.12), 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
    }

    .btn-order-left:active {
        transform: translateY(0);
    }

.btn-left-text {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width:480px) {
    .btn-left-text {
        white-space: normal;
    }
}

/* =========================
   PRICES SECTION
========================= */
.prices-pro {
    margin: 114px auto 80px;
}

@media (max-width:768px) {
    .prices-pro {
        margin: 48px auto 48px;
    }
}

.prices-info {
    display: flex;
    flex-direction: column;
    gap: 47px;
}

.prices-info-title {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    /*margin-top: 83px*/
}

.price-title {
    display: flex;
    gap: 16px;
    align-items: center;
    /*justify-content: center;*/
}

@media (max-width:768px) {
    .price-title {
        flex-direction: column;
    }
    .prices-info-title {
        margin-top: 83px
    }
}

.price-title img {
    width: 48px;
    height: 48px;
}

@media (max-width:768px) {
    .price-title img {
        width: 40px;
        height: 40px;
    }
}

.price-title-te {
    font-weight: 900;
    font-size: 32px;
    color: #313131;
}

@media (max-width:768px) {
    .price-title-te {
        font-size: 24px;
    }
}

@media (max-width:480px) {
    .price-title-te {
        font-size: 20px;
    }
}

.price-info-ti span {
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    color: #4a5565;
}

@media (max-width:768px) {
    .price-info-ti span {
        font-size: 20px;
    }
}

@media (max-width:522px) {
    .price-info-ti span {
        font-size: 18px;
    }
}

.price-update {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-update-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.price-cals {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .price-cals img {
        width: 24px;
        height: 24px;
    }

.price-last-up {
    color: #4a5565;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.price-date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
}

    .price-date span {
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        color: #4a5565;
    }
.bottom-price {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width:768px) {
    .price-date span {
        font-size: 18px;
    }
}

.prices-box {
    display: grid;
    /*   grid-template-columns: repeat(3, 1fr);*/
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width:768px) {
    .prices-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:522px) {
    .prices-box {
        grid-template-columns: 1fr;
    }
}

.pric-box {
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-radius: 16px;
    padding: 32px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1019607843);
}

@media (max-width:768px) {
    .pric-box {
        padding: 24px;
    }
}

.pri-box-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.pri-top-ti span {
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: #101828;
}

@media (max-width:768px) {
    .pri-top-ti span {
        font-size: 18px;
    }
}

.pri-top-subti span {
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #4a5565;
}

@media (max-width:768px) {
    .pri-top-subti span {
        font-size: 18px;
    }
}

.price-space-line {
    width: 100%;
    height: 1px;
    background: #e7e7e7;
    display: block;
}

.price-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.price-num {
    font-weight: 900;
    font-size: 20px;
    color: #066899;
    line-height: 1;
    direction: ltr;
}

.price-val {
    font-weight: 700;
    font-size: 16px;
    color: #13558D;
}

/* =========================
   GUARANTEES SECTION
========================= */
.guarantees {
    margin: 80px auto 80px;
}

@media (max-width:768px) {
    .guarantees {
        margin: 48px auto 48px;
    }
}

.guarantee {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    border-radius: 32px;
    padding: 32px;
    background: #ffffff;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
}

@media (max-width:1150px) {
    .guarantee {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width:768px) {
    .guarantee {
        padding: 24px;
    }
}

.guarantee-right {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    gap: 42px;
}

@media (max-width:768px) {
    .guarantee-right {
        gap: 32px;
    }
}

.guarantee-left {
    display: flex;
    gap: 16px;
}

@media (max-width:1150px) {
    .guarantee-left {
        flex-direction: column-reverse;
    }
}

.top-guarantee {
    background: linear-gradient(135deg, #234d69 0%, #13558d 100%);
    width: 197px;
    height: 42.5px;
    border-radius: 16.75px;
    display: flex;
    gap: 9px;
    padding-right: 16px;
    padding-left: 16px;
    align-items: center;
}

@media (max-width:768px) {
    .top-guarantee {
        height: auto;
        padding: 8px 16px;
    }
}

.top-guarantee img {
    width: 20px;
    height: 20px;
}

.top-guarantee span {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.guarantees-title {
    color: #13558d;
    font-weight: 700;
    font-size: 22px;
    text-align: right;
}

@media (max-width:768px) {
    .guarantees-title {
        font-size: 18px;
    }
}

.madein {
    display: flex;
    gap: 16px;
    align-items: center;
}

.madein-country {
    color: #313131;
    font-weight: 700;
    font-size: 20px;
    text-align: right;
}

@media (max-width:768px) {
    .madein-country {
        font-size: 13px;
    }
}

.country {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .country img {
        width: 40px;
        height: 28px;
        border-radius: 8px;
    }

    .country span {
        font-weight: 500;
        font-size: 18px;
        text-align: right;
        color: #313131;
    }

@media (max-width:768px) {
    .country span {
        font-size: 14px;
    }
}

.usages {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width:480px) {
    .usages {
        flex-wrap: wrap;
    }
}

.usage-ti span {
    color: #313131;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
}

@media (max-width:768px) {
    .usage-ti span {
        font-size: 14px;
    }
}

.usage {
    background-color: #d7e6f4;
    border-radius: 14px;
    padding: 10px;
    gap: 10px;
    font-weight: 500;
    font-size: 22px;
    text-align: right;
    color: #313131;
}

@media (max-width:768px) {
    .usage {
        font-size: 14px;
        padding: 8px;
    }
}

.pro-colors {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width:768px) {
    .pro-colors {
        flex-direction: row;
        gap: 4px;
        flex-wrap: wrap;
    }
}

.col {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    flex-shrink: 0;
}

.col-brown {
    background-color: #b57a5c;
}

.col-nescoffe {
    background-color: #cdb488;
}

.col-gray {
    background-color: #dcd9d9;
}

.col-cream {
    background-color: #f0e0b7;
}

.col-darkred {
    background-color: #560717;
}

.col-black {
    background-color: #1e293b;
}

.pro-color {
    display: flex;
    align-items: center;
    border: 1px solid #e7e7e7;
    background: #ffffff;
    border-radius: 13px;
    padding: 10px;
    gap: 10px;
    border-width: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (max-width:768px) {
    .pro-color {
        flex-direction: column;
        padding: 8px;
    }
}

.pro-color span {
    color: #1e293b;
    font-weight: 500;
    font-size: 22px;
    text-align: right;
}

@media (max-width:768px) {
    .pro-color span {
        font-size: 12px;
    }
}

.pro-color.active {
    background: var(--Color-Background, #ffffff);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1607843137);
    border: 1px solid var(--Color-Primary, #13558d);
}

.pro-color:hover {
    transform: scale(1.02);
}

.pro-img {
    border: 1px solid #3685c6;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    padding: 12px;
    gap: 12px;
    border-width: 1px;
    justify-content: space-between;
}

    .pro-img img {
        width: 100%;
        display: block;
        object-fit: cover;
      
    }

.pro-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

    .pro-info > span {
        font-weight: 700;
        font-size: 18px;
        color: #313131;
    }

.pro-code {
    background: #eff6ff;
    border-radius: 12px;
    padding: 8px 12px;
}

    .pro-code span {
        font-weight: 600;
        font-size: 14px;
        color: #066899;
    }
.pro-img img {
    width: 410px;
    max-height: 288px;
    margin: auto;
}

/* =========================
   QUESTIONS PART SECTION
========================= */
.question-box2.questions-part {
  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px auto;
    border-radius: 16px;
    justify-content: space-between;
    padding: 32px;
    box-shadow: 0px 0px 20px 0px #0000001A;
    background: #EFF6FF;
}

@media (max-width: 900px) {
    .question-box2.questions-part {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .question-box2.questions-part {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.question-part {
    display: flex;
    align-items: center;
    gap: 16px;
    /*padding: 20px;*/
    /*background: #ffffff;*/
    border-radius: 16px;
    /*box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);*/
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .question-part:hover {
        transform: translateY(-2px);
        /*box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.08);*/
    }

.part-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    opacity: 1;
    padding-left: 0.02px;
    background: var(--Color-Background, #FFFFFF);
}

    .part-icon img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

.q-part-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.question-title span {
    font-weight: 700;
    font-size: 18px;
    color: #101828; /* رنگ تیره بدنه اصلی متون */
    line-height: 28px;
}

@media (max-width: 768px) {
    .question-title span {
        font-size: 16px;
    }
}

.question-subtitle span {
    font-weight: 400;
    font-size: 14px;
    color: #667085; /* رنگ طوسی برای توضیحات فرعی */
    line-height: 22px;
}


@media (max-width: 768px) {
    .question-subtitle span {
        font-size: 13px;
    }
}
@media (max-width: 998px) {
    .bottom-price {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 522px) {
    .bottom-price {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 768px) {
    .orders-term {
        margin-top: 20px;
    }
    .hero__content-side {
        /*padding: 24px 16px;*/
        text-align: center;
        align-items: center;
    }

    .hero__title {
        font-size: 30px;
        line-height: 44px;
    }

    .hero__description {
        font-size: 18px;
        line-height: 28px;
    }

    .search-box {
        max-width: 100%;
    }
}

@media (max-width: 1200px) {
    .orders-term {
        margin-top: 20px;
        flex-direction: column;
        padding: 0;
        box-shadow: unset;
        background: unset;
    }

    .order-left {
        display: none;
    }

    .hero__content-side {
        /*padding: 24px 16px;*/
        text-align: center;
        align-items: center;
        max-width: 100%;
    }

    .breadcrumb {
        justify-content: center;
    }

    .bottom-hero {
        align-items: center;
    }

    .hero-ti,
    .hero__title {
        justify-content: center;
        text-align: center;
    }

    .hero__title {
        font-size: 24px;
        /*line-height: 44px;*/
        flex-direction: column;
    }

    .hero__description {
        font-size: 16px;
        /*line-height: 28px;*/
        align-items: center;
        text-align: center;
    }

        .hero__description p {
            text-align: center;
        }

    .btns {
        width: 100%;
        justify-content: center;
    }

    .search-box {
        max-width: 100%;
    }
    .btn-le{
font-size:15px
    }
}

@media(max-width:436px) {
    .btns {
        display: flex;
        flex-direction: column-reverse;
    }
}
/*.sizing {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    justify-content: space-between;
    gap: 60px;
   
}
.sizing-img {
 overflow:hidden;
    border-radius: 24px;
      display: flex;
}
    .sizing-img img {*/
        /*height: 460px;*/
        /*width: 100% ;
        object-fit: cover;
    }

.sizing-right {
    display: flex;
    gap: 24px;
    flex-direction: column;
}
.sizing-r-top{
    display:flex;
    flex-direction:column;
    gap:32px;
}
.sizing-r-top p {
        font-weight: 400;
        font-size: 20px;
        line-height: 34px;
        text-align: justify;
        color: #313131;

    }
.sizing-r-bottom {
display:flex;
flex-direction:column;
    gap: 8px;
}
.sizing-bottoms {
    border: 1.5px solid #51A2FF4D;
    background: #2B7FFF1A;
    border-radius: 16px;
    padding: 24px;
    border-width: 1.5px;
}
    .sizing-bottoms span {
        color: #13558D;
        font-weight: 700;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0%;
        text-align: right;
    }
.sizing-note {
    border: 1.5px solid #FDC7004D;
    background: #FDC70040;
    border-radius: 16px;
    padding: 24px;
    opacity: 1;
    border-width: 1.5px;
}*/
/* =========================
   Desktop - 1200px به بالا
========================= */

.sizing {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}

.sizing-img {
    width: 100%;
    height: 460px;
    overflow: hidden;
    border-radius: 24px;
    display: flex;
}

    .sizing-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.sizing-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sizing-r-top {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

    .sizing-r-top p {
        font-weight: 400;
        font-size: 20px;
        line-height: 34px;
        text-align: justify;
        color: #313131;
    }

.sizing-r-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sizing-bottoms {
    border: 1.5px solid #51A2FF4D;
    background: #2B7FFF1A;
    border-radius: 16px;
    /* padding: 24px;*/
    padding: 20px;
}

    .sizing-bottoms span {
        color: #13558D;
        font-weight: 700;
        font-size: 16px;
        line-height: 26px;
        text-align: right;
    }

.sizing-note {
    border: 1.5px solid #FDC7004D;
    background: #FDC70040;
}



@media (min-width: 1024px) and (max-width: 1199px) {

    .sizing {
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
    }

    .sizing-img {
        height: 420px;
    }

    .sizing-r-top {
        gap: 24px;
    }

        .sizing-r-top p {
            font-size: 18px;
            line-height: 30px;
        }

    .sizing-bottoms {
        padding: 20px;
    }

        .sizing-bottoms span {
            font-size: 15px;
            line-height: 24px;
        }
}




@media (min-width: 768px) and (max-width: 1023px) {

    .sizing {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .sizing-img {
        height: 380px;
        border-radius: 20px;
    }

    .sizing-r-top {
        gap: 20px;
    }

        .sizing-r-top p {
            font-size: 16px;
            line-height: 28px;
        }

    .sizing-bottoms {
        padding: 16px;
        border-radius: 14px;
    }

        .sizing-bottoms span {
            font-size: 14px;
            line-height: 22px;
        }
}



@media (max-width: 767px) {

    .sizing {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .price-title-te
    .sizing-right {
        order: 1;
        width: 100%;
    }

    .sizing-img {
        order: 2;
        width: 100%;
        height: 329px;
        border-radius: 16px;
    }

        .sizing-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .sizing-r-top {
        gap: 20px;
    }

        .sizing-r-top p {
            font-size: 16px;
            line-height: 24px;
        }

    .sizing-r-bottom {
        gap: 8px;
    }

    .sizing-bottoms {
        padding: 14px 16px;
        border-radius: 12px;
    }

        .sizing-bottoms span {
            font-size: 13px;
            line-height: 20px;
        }
}


.brand-granit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.granits-wrapper {
    position: relative;
    width: 100%;
}

.granits {
    width: 100%;
    overflow: hidden;
}

    .granits .swiper-slide {
        height: 459px;
        border-radius: 16px;
        overflow: hidden;
    }

        .granits .swiper-slide img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 16px;
        }




.granits-pagination {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    height: 10px;
}

    .granits-pagination .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
        margin: 0 3px !important;
        opacity: 1;
        background: #D9D9D9;
    }

    .granits-pagination .swiper-pagination-bullet-active {
        width: 8px;
        height: 8px;
        background: #2B7FFF;
    }




.granits-prev,
.granits-next {
    position: absolute;
    top: auto;
    bottom: -9px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    z-index: 10;
    font-size: 18px;
    color: #2784D8;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.granits-prev {
    right: 0;
}

.granits-next {
  left: 0;
}

    .granits-prev span,
    .granits-next span {
        line-height: 1;
      
    }




@media (max-width: 1023px) {

    .granits .swiper-slide {
        height: 350px;
    }
}




@media (max-width: 767px) {

    .brand-granit-wrapper {
        gap: 24px;
    }

    .granits .swiper-slide {
        height: 380px;
    }

    .granits-pagination {
        margin-top: 16px;
    }
}

.count-wrapper{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:121px;
}
.count-paragraph {
    color: #313131;
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
}
.count-ex {
    display:flex;
    flex-direction:column;
    border: 1.5px solid #C27AFF4D;
    background: #AD46FF1A;
    border-radius: 16px;
    padding: 24px;
    gap: 16px;
    opacity: 1;
    border-width: 1.5px;
}
    .count-ex h2 {
        color: #13558D;
        font-weight: 700;
        font-size: 20px;
        line-height: 32px;
        text-align: right;
    }
    .count-ex p {
        color: #13558D;
        font-weight: 700;
        font-size: 16px;
        line-height: 26px;
        text-align: right;
    }
.counts-twopart{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px

}
.count-twopart {
    display:flex;
    flex-direction:column;
    border: 2px solid var(--Color-Border, #D1D5DC);
    border-radius: 24px;
    padding: 32px;
    gap: 42px;
    border-width: 2px;
}
.c-two-top{
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
    justify-content:center
}
    .c-two-top span {
        color: var(--Color-Secondary, #3684C6);
 
        font-weight: 700;
        
        font-size: 18px;
     
        line-height: 28px;
  
        text-align: center;
    }
    .c-two-top h3 {
        font-weight: 700;
        font-size: 22px;
        line-height: 34px;
        text-align: center;
        color: #313131
    }
        .line {
    /*margin: 16px 0;*/
    width: 100%;
    height: 1px;
    background: #D1D5DC
}
.c-two-bottom  {
    color: var(--Color-Primary, #13558D);
    font-weight: 700;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
    align-items:center;
    justify-content:center
}
.calculation-lids {
    display: grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
   
}
.calculation-lid {
    border: 2px solid var(--Color-Border, #D1D5DC);
    /*    width: 653;
 height: 454;*/
    border-radius: 24px;
    padding: 32px;
    gap: 42px;
    border-width: 2px;
    display: flex;
    flex-direction: column;
}
    .calculation-lids h3 {
        color: var(--Color-Secondary, #3684C6);
        font-weight: 700;
        font-size: 20px;
        line-height: 32px;
        text-align: right;
    }
.lids-list{
    display:flex;
    gap:24px;
   flex-direction:column}
    .lids-list p {
        color: #313131;
        font-weight: 500;
        font-size: 22px;
        line-height: 36px;
        text-align: right;
    }

.lid-lists{
    display:flex;
    flex-direction:column;
    gap:16px
}
.item-text {
    color: var(--Color-Text-Secondary, #313131);
    font-weight: 400;
    font-size: 20px;
    line-height: 34px;
    text-align: right;
}
.item-icon {
    background: var(--Color-Surface, #EFF6FF);
    width: 52px;
    height: 52px;
    border-radius: 12px;
    padding-left: 0.02px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.lib-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ex-calculation {
    display: flex;
    box-shadow: 0px 0px 40px 0px #00000026;
    background: var(--Color-Background, #FFFFFF);
    gap: 16px;
    border-radius: 24px;
    padding: 24px;
    flex-direction: column;
}
.ex-calculation-p {
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    text-align: right;
    color: #13558D;
}
.ex-calculation-header {
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
    color: #13558D;
}
.ex-calculation-box {
    border: 2px solid var(--Color-Border, #D1D5DC);
    display: flex;
    flex-direction: column;
    gap: 42px;
    border-radius: 24px;
    padding: 32px;
    border-width: 2px;
}
.ex-calcs-top {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ex-calc-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.clacs-ri {
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: #313131;
}
.clacs-le {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: var(--Color-Secondary, #3684C6);
}
.calc-line {
    height: 1px;
    width: 100%;
    background: #D1D5DC;
}
.calc-price {
    color: var(--Color-Primary, #13558D);
    font-weight: 700;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
}
.pri-ti {
    color: #101828;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
}
.prisub-ti {
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: var(--Color-Text-Secondary, #313131);
}
.pris {
    text-align: center;
}
.pri-line {
    height: 1px;
    width: 100%;
    background: #13558D1F;
}
.pri-info {
    gap: 32px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding-top: 64px;
    padding-right: 42px;
    padding-bottom: 42px;
    padding-left: 42px;
    background: #FFF;
}
.pri-note-box {
    display: flex;
    align-items: center;
    border-radius: 16px;
    gap: 22px;
    padding: 20px;
    background: #EFF6FF;
}
.bg-info {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #13558D;
    padding: 15px;
    border-radius: 8.4px;
}
.pri-note-box p {
    color: #13558D;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
}
.differences{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.difference {
    display: flex;
    flex-direction: column;
    border-width: 2px;
    border-radius: 24px;
    gap: 42px;
    padding: 32px;
    border: 2px solid var(--Color-Border, #D1D5DC);
}
.selected-active {
    border: 2px solid var(--Color-Secondary, #3684C6);
}
.differences-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.differences-top-ri {
    display: flex;
    gap: 16px;
    flex-direction:column;
}
.differences-top-ti {
    color: #313131;
    font-weight: 900;
    font-size: 32px;
    line-height: 48px;
    text-align: right;
}
.differences-top-sub {
    color: var(--Color-Secondary, #3684C6);
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
}
.differences-top-le {
    color: var(--Color-Background, #FFFFFF);
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
    background: var(--Color-Primary, #13558D);
    opacity: 1;
    border-radius: 16px;
    gap: 5px;
    padding: 16px;
}
.differences p {
    color: #313131;
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
    text-align: right;
}
@media(max-width:768px) {


        .gray, .blue {
            font-size: 14px;
        }

        .differences-top-sub, differences-top-le {
            font-size: 16px;
        }

        .differences-top-ri {
            gap: 12px
        }

        .differences p {
            font-size: 18px;
        }

        .differences-top-ti {
            font-size: 20px;
            text-align: center;
        }

        .pri-note-box {
            flex-direction: column;
        }

            .pri-note-box p {
                font-size: 16px;
                text-align: center;
            }

        .calc-price {
            font-size: 19px;
        }

        .clacs-ri {
            font-size: 18px;
        }

        .ex-calculation-p {
            font-size: 13px;
            text-align: center;
        }

        .ex-calculation-header {
            font-size: 16px;
            text-align: center;
        }

        .calculation-lid {
            padding: 16px;
        }

        .item-text {
            font-size: 16px;
            text-align: center;
        }

        .calculation-lids h3 {
            text-align: center;
        }

        .lids-list p {
            font-size: 18px;
            text-align: center;
        }

        .lib-item {
            flex-direction: column;
            justify-content: center;
            align-items: center
        }

        .c-two-top spa {
            font-size: 15px;
        }

        .count-wrapper {
            margin-top: 86px;
        }

        .count-paragraph {
            font-size: 18px;
        }

        .count-ex h2 {
            font-size: 16px;
        }

        .count-ex p {
            font-size: 13px
        }
    }

    @media(max-width:632px) {
        .counts-twopart {
            grid-template-columns: 1fr
        }

        .calculation-lids {
            grid-template-columns: 1fr
        }

        .ex-calc-top {
            flex-direction: column;
            gap: 10px;
        }
    }
@media(max-width:998px) {
    .differences{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px) {
    .differences-top {
        gap: 24px;
        flex-direction: column-reverse;
        align-items: center;
    }
    .differences-top-le {
        width: 100%;
        text-align: center;
    }
}

.pink {
    background: #AD46FF1A;
    border: 1.5px solid #C27AFF4D;
}

.bottom-price {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pric-box {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 22px;
    border-radius: 16px;
    padding: 32px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.pri-box-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}