/* ========================================
   RESET
======================================== */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgb(240, 240, 240);
    overflow-x: hidden;
    font-family: "font", sans-serif;
}

@font-face {
    font-family: "font";
    src: url("font.ttf") format("truetype");
}


/* ========================================
   MAIN AREA
======================================== */

.area {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: rgb(240, 240, 240);
    overflow-x: hidden;
}


/* ========================================
   TOP / HEADER
======================================== */

.top {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 85px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    background-color: white;

    z-index: 1000;
}


/* ========================================
   CALL BUTTON
======================================== */

.button-call {
    position: absolute;
    left: 5%;

    width: 250px;
    height: 65px;

    border: none;
    border-radius: 10px;

    background-color: rgb(236, 0, 0);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "font", sans-serif;
    font-size: 30px;

    cursor: pointer;

    transition: 0.2s ease;
}

.button-call:hover {
    transform: translateY(-2px);
}


/* ========================================
   PHONE NUMBER BUTTON
======================================== */

.button-number {
    position: absolute;
    left: 23%;

    width: 250px;
    height: 65px;

    border: none;
    border-radius: 10px;

    background-color: black;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "font", sans-serif;
    font-size: 25px;

    cursor: pointer;

    transition: 0.2s ease;
}

.button-number:hover {
    transform: translateY(-2px);
}


/* ========================================
   LOGO
======================================== */

.logo {
    position: absolute;
    right: 3%;

    width: 150px;
    height: 100px;

    object-fit: contain;
}


/* ========================================
   NAVIGATION
======================================== */

.home-line,
.price-line,
.about-line {
    position: absolute;

    color: rgba(0, 0, 0, 0.589);

    font-family: "font", sans-serif;
    font-size: 25px;

    cursor: pointer;

    transition: 0.2s ease;
}

.home-line {
    right: 20%;
}

.price-line {
    right: 30%;
}

.about-line {
    right: 45%;
}

.home-line:hover,
.price-line:hover,
.about-line:hover {
    color: rgb(236, 0, 0);
}


/* ========================================
   UNDER HEADER
======================================== */

.under-top {
    width: 100%;
    min-height: 730px;

    margin-top: 85px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;
}


/* ========================================
   IMAGE CONTAINER
======================================== */

.image-holdier {
    width: 860px;
    height: 730px;

    margin: 0;

    border-radius: 10px;

    background-color: white;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.459);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* ========================================
   MAIN IMAGE
======================================== */

.image {
    width: 850px;
    height: 720px;

    border-radius: 10px;

    object-fit: cover;

    background-color: white;
}


/* ========================================
   BOX MD
======================================== */

.box-md {
    width: 100%;
    min-height: 350px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 35px 20px;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

    /* ---------- HEADER ---------- */

    .top {
        height: 60px;
    }


    /* ---------- CALL BUTTON ---------- */

    .button-call {
        left: 8px;

        width: 110px;
        height: 40px;

        border-radius: 7px;

        font-size: 17px;
    }


    /* ---------- PHONE NUMBER ---------- */

    .button-number {
        left: 130px;

        width: 110px;
        height: 40px;

        border-radius: 7px;

        font-size: 17px;
    }


    /* ---------- LOGO ---------- */

    .logo {
        right: 8px;

        width: 90px;
        height: 60px;

        object-fit: contain;
    }


    /* ---------- NAVIGATION ---------- */

    .home-line,
    .price-line,
    .about-line {
        display: none;
    }


    /* ---------- UNDER HEADER ---------- */

    .under-top {
        width: 100%;
        min-height: auto;

        margin-top: 60px;

        padding: 20px 10px 30px;
    }


    /* ---------- IMAGE HOLDER ---------- */

    .image-holdier {
        width: 100%;
        max-width: 360px;

        height: 300px;

        margin: 0;

        border-radius: 10px;
    }


    /* ---------- IMAGE ---------- */

    .image {
        width: calc(100% - 5px);
        height: calc(100% - 5px);

        border-radius: 10px;

        object-fit: cover;
    }


    /* ---------- BOX MD ---------- */

    .box-md {
        width: 100%;
        height: 250px;
    }
}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 380px) {

    .button-call {
        width: 100px;
        left: 6px;

        font-size: 15px;
    }

    .button-number {
        width: 100px;
        left: 112px;

        font-size: 15px;
    }

    .logo {
        width: 75px;
        right: 5px;
    }

    .image-holdier {
        height: 270px;
    }

    .box-md {
        height: 220px;
    }
}

/*=======================================
               BOX DITIALE
=======================================*/

.box-ditail {
    width: 860px;
    height: 280px;

    background-color: white;

    border-radius: 30px;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.479);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}


.detail-top {
    width: 100%;
    height: 33%;

    background-color: rgb(236, 0, 0);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-family: "font", sans-serif;
    font-size: 30px;
    font-weight: bold;

    text-align: center;
}

.detail-middle {
    width: 100%;
    height: 34%;

    background-color: rgb(235, 235, 235);

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgb(60, 60, 60);

    font-family: "font", sans-serif;
    font-size: 24px;

    text-align: center;

    padding: 15px;
}

.detail-bottom {
    width: 100%;
    height: 33%;

    background-color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgb(100, 100, 100);

    font-family: "font", sans-serif;
    font-size: 22px;

    text-align: center;

    padding: 15px;
}

@media (max-width: 600px) {

    .box-md {
        min-height: auto;
        padding: 25px 10px;
    }

    .box-ditail {
        width: 100%;
        max-width: 360px;
        height: 150px;

        border-radius: 20px;
    }

    .detail-top {
        height: 33%;

        font-size: 23px;
    }

    .detail-middle {
        height: 34%;

        font-size: 18px;
    }

    .detail-bottom {
        height: 33%;

        font-size: 17px;
    }
}
/* =========================================
   CABLE INTRO - INDEPENDENT
========================================= */

.cable-intro {
    width: 100%;
    padding: 40px 20px;

    display: flex;
    justify-content: center;

    background-color: rgb(240, 240, 240);

    direction: rtl;
    font-family: "font", Arial, sans-serif;
}


.cable-intro-content {
    width: 860px;
    max-width: 100%;

    padding: 40px 50px;

    background-color: white;

    border-radius: 25px;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);

    text-align: right;
}


/* عنوان */

.cable-intro-content h2 {
    margin: 0 0 30px;

    color: rgb(236, 0, 0);

    font-size: 32px;
    font-weight: bold;

    text-align: center;
}


/* پاراگراف */

.cable-intro-content p {
    margin: 0 0 22px;

    color: rgb(55, 55, 55);

    font-size: 20px;
    line-height: 2.1;

    text-align: justify;
}


/* آخرین پاراگراف */

.cable-intro-content p:last-child {
    margin-bottom: 0;
}


/* متن‌های مهم */

.cable-intro-content strong {
    color: rgb(25, 25, 25);
    font-weight: bold;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .cable-intro {
        padding: 25px 10px;
    }


    .cable-intro-content {
        width: 100%;

        padding: 25px 20px;

        border-radius: 18px;
    }


    .cable-intro-content h2 {
        margin-bottom: 20px;

        font-size: 25px;
    }


    .cable-intro-content p {
        margin-bottom: 18px;

        font-size: 16px;

        line-height: 2;

        text-align: right;
    }

}

/* ==================================================
   CABLE TABLE 01
   DESKTOP + MOBILE
================================================== */

.cable-table-01 {

    width: 860px;
    max-width: 100%;

    margin: 40px auto;

    direction: rtl;

    font-family: "font", Arial, sans-serif;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);

    background-color: white;
}


/* ==================================================
   HEADER
================================================== */

.cable-table-01-header {

    width: 100%;

    min-height: 70px;

    display: grid;

    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;

    align-items: center;

    background-color: rgb(190, 0, 0);

    color: white;

    font-size: 18px;

    font-weight: bold;

    text-align: center;
}


/* ==================================================
   ROW
================================================== */

.cable-table-01-row {

    width: 100%;

    min-height: 65px;

    display: grid;

    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;

    align-items: center;

    color: rgb(65, 65, 65);

    font-size: 17px;

    text-align: center;

    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


/* ==================================================
   یکی در میان سفید / خاکستری
================================================== */

.cable-table-01-row:nth-child(even) {

    background-color: rgb(255, 255, 255);

}


.cable-table-01-row:nth-child(odd) {

    background-color: rgb(238, 238, 238);

}


/* ==================================================
   PRICE
================================================== */

.cable-table-01-price {

    font-weight: bold;

    color: rgb(45, 45, 45);

    direction: ltr;

    white-space: nowrap;
}


/* ==================================================
   CELL
================================================== */

.cable-table-01-row > div,
.cable-table-01-header > div {

    padding: 10px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .cable-table-01 {

        width: calc(100% - 20px);

        margin: 25px auto;

        border-radius: 15px;

        overflow-x: auto;
    }


    .cable-table-01-header,
    .cable-table-01-row {

        min-width: 650px;

        grid-template-columns:
            2.2fr
            0.9fr
            0.8fr
            0.8fr
            1.5fr;
    }


    .cable-table-01-header {

        min-height: 60px;

        font-size: 15px;
    }


    .cable-table-01-row {

        min-height: 60px;

        font-size: 14px;
    }


    .cable-table-01-row > div,
    .cable-table-01-header > div {

        padding: 8px;
    }

}

/* ==================================================
   CABLE TABLE 02
   DESKTOP + MOBILE
================================================== */

.cable-table-02 {
    width: 860px;
    max-width: 100%;
    margin: 40px auto;
    direction: rtl;
    font-family: "font", Arial, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);
    background-color: white;
}


/* ==================================================
   HEADER
================================================== */

.cable-table-02-header {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    background-color: rgb(190, 0, 0);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}


/* ==================================================
   ROW
================================================== */

.cable-table-02-row {
    width: 100%;
    min-height: 65px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    color: rgb(65, 65, 65);
    font-size: 17px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


/* ==================================================
   یکی در میان سفید / خاکستری
================================================== */

.cable-table-02-row:nth-child(even) {
    background-color: rgb(255, 255, 255);
}

.cable-table-02-row:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}


/* ==================================================
   PRICE
================================================== */

.cable-table-02-price {
    font-weight: bold;
    color: rgb(45, 45, 45);
    direction: ltr;
    white-space: nowrap;
}


/* ==================================================
   CELL
================================================== */

.cable-table-02-row > div,
.cable-table-02-header > div {
    padding: 10px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .cable-table-02 {
        width: calc(100% - 20px);
        margin: 25px auto;
        border-radius: 15px;
        overflow-x: auto;
    }

    .cable-table-02-header,
    .cable-table-02-row {
        min-width: 650px;
        grid-template-columns:
            2.2fr
            0.9fr
            0.8fr
            0.8fr
            1.5fr;
    }

    .cable-table-02-header {
        min-height: 60px;
        font-size: 15px;
    }

    .cable-table-02-row {
        min-height: 60px;
        font-size: 14px;
    }

    .cable-table-02-row > div,
    .cable-table-02-header > div {
        padding: 8px;
    }
}

/* ==================================================
   CABLE TABLE 03
   DESKTOP + MOBILE
================================================== */

.cable-table-03 {
    width: 860px;
    max-width: 100%;
    margin: 40px auto;
    direction: rtl;
    font-family: "font", Arial, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);
    background-color: white;
}


/* ==================================================
   HEADER
================================================== */

.cable-table-03-header {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    background-color: rgb(190, 0, 0);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}


/* ==================================================
   ROW
================================================== */

.cable-table-03-row {
    width: 100%;
    min-height: 65px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    color: rgb(65, 65, 65);
    font-size: 17px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


/* ==================================================
   یکی در میان سفید / خاکستری
================================================== */

.cable-table-03-row:nth-child(even) {
    background-color: rgb(255, 255, 255);
}

.cable-table-03-row:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}


/* ==================================================
   PRICE
================================================== */

.cable-table-03-price {
    font-weight: bold;
    color: rgb(45, 45, 45);
    direction: ltr;
    white-space: nowrap;
}


/* ==================================================
   CELL
================================================== */

.cable-table-03-row > div,
.cable-table-03-header > div {
    padding: 10px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .cable-table-03 {
        width: calc(100% - 20px);
        margin: 25px auto;
        border-radius: 15px;
        overflow-x: auto;
    }

    .cable-table-03-header,
    .cable-table-03-row {
        min-width: 650px;
        grid-template-columns:
            2.2fr
            0.9fr
            0.8fr
            0.8fr
            1.5fr;
    }

    .cable-table-03-header {
        min-height: 60px;
        font-size: 15px;
    }

    .cable-table-03-row {
        min-height: 60px;
        font-size: 14px;
    }

    .cable-table-03-row > div,
    .cable-table-03-header > div {
        padding: 8px;
    }
}

/* ==================================================
   CABLE TABLE 04
   DESKTOP + MOBILE
================================================== */

.cable-table-04 {
    width: 860px;
    max-width: 100%;
    margin: 40px auto;
    direction: rtl;
    font-family: "font", Arial, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);
    background-color: white;
}


/* ==================================================
   HEADER
================================================== */

.cable-table-04-header {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    background-color: rgb(190, 0, 0);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}


/* ==================================================
   ROW
================================================== */

.cable-table-04-row {
    width: 100%;
    min-height: 65px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    color: rgb(65, 65, 65);
    font-size: 17px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


/* ==================================================
   یکی در میان سفید / خاکستری
================================================== */

.cable-table-04-row:nth-child(even) {
    background-color: rgb(255, 255, 255);
}

.cable-table-04-row:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}


/* ==================================================
   PRICE
================================================== */

.cable-table-04-price {
    font-weight: bold;
    color: rgb(45, 45, 45);
    direction: ltr;
    white-space: nowrap;
}


/* ==================================================
   CELL
================================================== */

.cable-table-04-row > div,
.cable-table-04-header > div {
    padding: 10px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .cable-table-04 {
        width: calc(100% - 20px);
        margin: 25px auto;
        border-radius: 15px;
        overflow-x: auto;
    }

    .cable-table-04-header,
    .cable-table-04-row {
        min-width: 650px;
        grid-template-columns:
            2.2fr
            0.9fr
            0.8fr
            0.8fr
            1.5fr;
    }

    .cable-table-04-header {
        min-height: 60px;
        font-size: 15px;
    }

    .cable-table-04-row {
        min-height: 60px;
        font-size: 14px;
    }

    .cable-table-04-row > div,
    .cable-table-04-header > div {
        padding: 8px;
    }
}

/* ==================================================
   CABLE TABLE 05
   DESKTOP + MOBILE
================================================== */

.cable-table-05 {
    width: 860px;
    max-width: 100%;
    margin: 40px auto;
    direction: rtl;
    font-family: "font", Arial, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);
    background-color: white;
}


/* ==================================================
   HEADER
================================================== */

.cable-table-05-header {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    background-color: rgb(190, 0, 0);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}


/* ==================================================
   ROW
================================================== */

.cable-table-05-row {
    width: 100%;
    min-height: 65px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    color: rgb(65, 65, 65);
    font-size: 17px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


/* ==================================================
   یکی در میان سفید / خاکستری
================================================== */

.cable-table-05-row:nth-child(even) {
    background-color: rgb(255, 255, 255);
}

.cable-table-05-row:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}


/* ==================================================
   PRICE
================================================== */

.cable-table-05-price {
    font-weight: bold;
    color: rgb(45, 45, 45);
    direction: ltr;
    white-space: nowrap;
}


/* ==================================================
   CELL
================================================== */

.cable-table-05-row > div,
.cable-table-05-header > div {
    padding: 10px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .cable-table-05 {
        width: calc(100% - 20px);
        margin: 25px auto;
        border-radius: 15px;
        overflow-x: auto;
    }

    .cable-table-05-header,
    .cable-table-05-row {
        min-width: 650px;
        grid-template-columns:
            2.2fr
            0.9fr
            0.8fr
            0.8fr
            1.5fr;
    }

    .cable-table-05-header {
        min-height: 60px;
        font-size: 15px;
    }

    .cable-table-05-row {
        min-height: 60px;
        font-size: 14px;
    }

    .cable-table-05-row > div,
    .cable-table-05-header > div {
        padding: 8px;
    }
}

/* ==================================================
   CABLE TABLE 06
   DESKTOP + MOBILE
================================================== */

.cable-table-06 {
    width: 860px;
    max-width: 100%;
    margin: 40px auto;
    direction: rtl;
    font-family: "font", Arial, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);
    background-color: white;
}


/* ==================================================
   HEADER
================================================== */

.cable-table-06-header {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    background-color: rgb(190, 0, 0);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}


/* ==================================================
   ROW
================================================== */

.cable-table-06-row {
    width: 100%;
    min-height: 65px;
    display: grid;
    grid-template-columns:
        2.2fr
        0.9fr
        0.8fr
        0.8fr
        1.5fr;
    align-items: center;
    color: rgb(65, 65, 65);
    font-size: 17px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


/* ==================================================
   یکی در میان سفید / خاکستری
================================================== */

.cable-table-06-row:nth-child(even) {
    background-color: rgb(255, 255, 255);
}

.cable-table-06-row:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}


/* ==================================================
   PRICE
================================================== */

.cable-table-06-price {
    font-weight: bold;
    color: rgb(45, 45, 45);
    direction: ltr;
    white-space: nowrap;
}


/* ==================================================
   CELL
================================================== */

.cable-table-06-row > div,
.cable-table-06-header > div {
    padding: 10px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .cable-table-06 {
        width: calc(100% - 20px);
        margin: 25px auto;
        border-radius: 15px;
        overflow-x: auto;
    }

    .cable-table-06-header,
    .cable-table-06-row {
        min-width: 650px;
        grid-template-columns:
            2.2fr
            0.9fr
            0.8fr
            0.8fr
            1.5fr;
    }

    .cable-table-06-header {
        min-height: 60px;
        font-size: 15px;
    }

    .cable-table-06-row {
        min-height: 60px;
        font-size: 14px;
    }

    .cable-table-06-row > div,
    .cable-table-06-header > div {
        padding: 8px;
    }
}

/* =========================================
   توضیحات تکمیلی سایت
   ========================================= */

.additional-content {
    width: min(1100px, calc(100% - 40px));
    margin: 80px auto 60px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #222;
    text-align: right;
    direction: rtl;
    line-height: 2.15;
}

.additional-content h1 {
    margin: 0 0 35px;
    padding: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.7;
    color: #222;
}

.additional-content h2 {
    margin: 48px 0 18px;
    padding: 0;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.7;
    color: #222;
}

.additional-content p {
    margin: 0 0 20px;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 2.15;
    color: #444;
}

.additional-content strong {
    font-weight: 800;
    color: #222;
}

.additional-content ul {
    margin: 10px 0 25px;
    padding-right: 28px;
    padding-left: 0;
}

.additional-content li {
    margin-bottom: 8px;
    padding-right: 5px;
    font-size: 16px;
    line-height: 2;
    color: #444;
}

.additional-content li::marker {
    font-size: 14px;
}

.additional-content .quality-formula {
    margin: 25px 0;
    font-size: 21px;
    line-height: 2;
    color: rgb(220, 0, 0);
}

.additional-content .final-message {
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
    font-size: 18px;
    line-height: 2;
}


/* =========================================
   موبایل
   ========================================= */

@media (max-width: 700px) {

    .additional-content {
        width: calc(100% - 30px);
        margin: 55px auto 40px;
    }

    .additional-content h1 {
        margin-bottom: 28px;
        font-size: 24px;
        line-height: 1.8;
    }

    .additional-content h2 {
        margin-top: 38px;
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 1.8;
    }

    .additional-content p {
        margin-bottom: 17px;
        font-size: 15px;
        line-height: 2.15;
        text-align: justify;
        text-justify: inter-word;
    }

    .additional-content ul {
        padding-right: 24px;
        margin-top: 10px;
    }

    .additional-content li {
        font-size: 15px;
        line-height: 2;
        margin-bottom: 6px;
    }

    .additional-content .quality-formula {
        font-size: 18px;
        text-align: center;
        margin: 22px 0;
    }

    .additional-content .final-message {
        margin-top: 35px;
        padding-top: 20px;
        font-size: 16px;
        text-align: center;
    }

}


/* =========================================
   موبایل‌های خیلی کوچک
   ========================================= */

@media (max-width: 400px) {

    .additional-content {
        width: calc(100% - 24px);
        margin-top: 45px;
    }

    .additional-content h1 {
        font-size: 21px;
    }

    .additional-content h2 {
        font-size: 18px;
    }

    .additional-content p,
    .additional-content li {
        font-size: 14px;
    }

    .additional-content .quality-formula {
        font-size: 17px;
    }

}

/* =========================================
   FOOTER
   ========================================= */

.site-footer {
    position: relative;

    width: 100%;
    min-height: 420px;

    margin-top: 80px;

    padding: 70px 7% 25px;

    box-sizing: border-box;

    background-image: url("footer-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #fff;

    direction: rtl;
}


/* لایه خوانایی روی تصویر */

.site-footer::before {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.35);

    pointer-events: none;
}


/* محتوای اصلی */

.footer-content {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr;

    gap: 70px;

    align-items: start;
}


/* لوگو */

.footer-logo {
    width: 150px;

    height: auto;

    display: block;

    margin-bottom: 22px;
}


/* برند */

.footer-brand p {
    max-width: 360px;

    margin: 0;

    font-size: 15px;

    line-height: 2;

    color: rgba(255, 255, 255, 0.9);
}


/* عنوان ستون‌ها */

.footer-links h3,
.footer-contact h3 {

    margin: 0 0 25px;

    font-size: 18px;

    font-weight: 800;

    color: #fff;
}


/* لینک‌ها */

.footer-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-links a {

    position: relative;

    display: inline-block;

    margin-bottom: 13px;

    color: rgba(255, 255, 255, 0.88);

    text-decoration: none;

    font-size: 15px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-links a:hover {

    color: #fff;

    transform: translateX(-5px);
}


/* تماس */

.footer-contact a {

    display: inline-block;

    margin-bottom: 15px;

    color: #fff;

    text-decoration: none;

    font-size: 20px;

    font-weight: 800;
}


.footer-contact p {

    max-width: 260px;

    margin: 0;

    font-size: 14px;

    line-height: 2;

    color: rgba(255, 255, 255, 0.82);
}


/* خط پایین */

.footer-bottom {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1150px;

    margin: 70px auto 0;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;
}


.footer-divider {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.6);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .site-footer {

        min-height: auto;

        margin-top: 55px;

        padding:
            50px 25px 20px;
    }


    .footer-content {

        grid-template-columns: 1fr;

        gap: 40px;

        text-align: center;
    }


    .footer-brand {

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .footer-logo {

        width: 125px;

        margin-bottom: 18px;
    }


    .footer-brand p {

        max-width: 330px;

        font-size: 14px;
    }


    .footer-links {

        align-items: center;
    }


    .footer-links h3,
    .footer-contact h3 {

        margin-bottom: 18px;

        font-size: 17px;
    }


    .footer-links a {

        margin-bottom: 11px;

        font-size: 14px;
    }


    .footer-contact a {

        font-size: 18px;
    }


    .footer-contact p {

        margin: 0 auto;

        font-size: 13px;
    }


    .footer-bottom {

        margin-top: 45px;

        flex-wrap: wrap;

        gap: 10px;

        font-size: 12px;
    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 400px) {

    .site-footer {

        padding-left: 18px;

        padding-right: 18px;
    }


    .footer-logo {

        width: 110px;
    }


    .footer-brand p {

        font-size: 13px;
    }


    .footer-bottom {

        font-size: 11px;
    }

}

/* ==========================================
   MOBILE BOTTOM BAR
   فقط موبایل
========================================== */

.mobile-bottom-bar {
    display: none;
}


/* ==========================================
   موبایل
========================================== */

@media (max-width: 700px) {

    .mobile-bottom-bar {

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 68px;

        z-index: 99999;

        display: block;

        direction: rtl;

        padding-bottom: env(safe-area-inset-bottom);

        box-sizing: content-box;

        pointer-events: none;
    }


    /* ======================================
       خود لاین پایین
    ====================================== */

    .mobile-bar-inner {

        position: absolute;

        left: 10px;
        right: 10px;
        bottom: 8px;

        height: 60px;

        display: grid;

        grid-template-columns:
            1fr
            1fr
            1fr
            1fr
            1fr;

        align-items: center;

        background: rgba(255, 255, 255, 0.97);

        border: 1px solid rgba(220, 0, 0, 0.12);

        border-radius: 18px;

        box-shadow:
            0 5px 25px rgba(0, 0, 0, 0.14);

        backdrop-filter: blur(10px);

        pointer-events: auto;

        overflow: visible;
    }


    /* ======================================
       دکمه های داخل لاین
    ====================================== */

    .mobile-bar-item {

        height: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 4px;

        color: #555;

        text-decoration: none;

        font-size: 10px;

        font-weight: 700;

        transition:
            transform 0.2s ease,
            color 0.2s ease;
    }


    .mobile-bar-item:active {

        transform: scale(0.88);
    }


    .mobile-bar-item:hover {

        color: rgb(220, 0, 0);
    }


    /* ======================================
       آیکون های لاین
    ====================================== */

    .mobile-bar-icon {

        width: 25px;
        height: 25px;

        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 19px;

        line-height: 1;

        color: #555;

        transition:
            color 0.2s ease,
            transform 0.2s ease;
    }


    .mobile-bar-item:hover .mobile-bar-icon {

        color: rgb(220, 0, 0);

        transform: translateY(-2px);
    }


    /* ======================================
       فضای خالی زیر دکمه تماس
    ====================================== */

    .mobile-bar-space {

        height: 100%;
    }


    /* ======================================
       دکمه تماس سبز
       بالاتر از لاین
    ====================================== */

    .mobile-call-button {

        position: absolute;

        left: 50%;

        bottom: 38px;

        transform: translateX(-50%);

        width: 62px;
        height: 62px;

        border-radius: 50%;

        display: flex;

        align-items: center;
        justify-content: center;

        text-decoration: none;

        background: #16a34a;

        border: 5px solid #fff;

        box-shadow:
            0 7px 22px rgba(0, 0, 0, 0.22);

        z-index: 10;

        pointer-events: auto;
    }


    /* ======================================
       آیکون تماس
    ====================================== */

    .call-icon {

        position: relative;

        z-index: 3;

        width: 100%;
        height: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        color: #fff;

        font-size: 27px;

        font-weight: bold;

        line-height: 1;
    }


    /* ======================================
       موج دایره ای تماس
    ====================================== */

    .call-wave {

        position: absolute;

        left: 50%;
        top: 50%;

        width: 100%;
        height: 100%;

        border-radius: 50%;

        border: 3px solid #16a34a;

        transform: translate(-50%, -50%) scale(1);

        opacity: 0;

        animation: callWave 2.2s ease-out infinite;

        pointer-events: none;
    }


    @keyframes callWave {

        0% {

            transform:
                translate(-50%, -50%)
                scale(1);

            opacity: 0.75;
        }

        70% {

            transform:
                translate(-50%, -50%)
                scale(1.8);

            opacity: 0;
        }

        100% {

            transform:
                translate(-50%, -50%)
                scale(1.8);

            opacity: 0;
        }
    }


    /* ======================================
       لرزش پشتیبانی
    ====================================== */

    .mobile-support {

        animation: supportShake 4s ease-in-out infinite;
    }


    @keyframes supportShake {

        0%,
        88%,
        100% {

            transform: rotate(0deg);
        }

        90% {

            transform: rotate(-8deg);
        }

        92% {

            transform: rotate(8deg);
        }

        94% {

            transform: rotate(-7deg);
        }

        96% {

            transform: rotate(7deg);
        }

        98% {

            transform: rotate(-3deg);
        }
    }


    /* ======================================
       دکمه پشتیبانی قرمز
    ====================================== */

    .mobile-support .mobile-bar-icon {

        color: rgb(220, 0, 0);
    }


    /* ======================================
       فاصله پایین برای اینکه محتوا
       زیر نوار نرود
    ====================================== */

    body {

        padding-bottom: 82px;
    }

}


/* ==========================================
   صفحه های خیلی کوچک
========================================== */

@media (max-width: 380px) {

    .mobile-bar-inner {

        left: 7px;
        right: 7px;

        bottom: 6px;

        height: 58px;

        border-radius: 16px;
    }


    .mobile-bar-item {

        font-size: 9px;
    }


    .mobile-bar-icon {

        width: 23px;
        height: 23px;

        font-size: 17px;
    }


    .mobile-call-button {

        width: 58px;
        height: 58px;

        bottom: 37px;
    }


    .call-icon {

        font-size: 25px;
    }

}