@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");

@font-face {
    font-family: sans;
    src: url(../font/sans_digit.ttf);
}

body {
    font-family: "Vazirmatn", sans-serif;
    background-color: #f6fafa;
}

.checkbox-control {
    margin-top: 0 !important;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-left: 5px !important;
}

    .checkbox-control:before {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        top: 0;
        left: 0;
        border: 2px solid #767676;
        background-color: #fff;
    }

    .checkbox-control:before, .checkbox-control:checked:after, .checkbox-control:checked:before {
        content: '';
        display: inline-block;
        position: relative;
    }

    .checkbox-control:checked:before {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        top: 0;
        left: 0;
        border: 2px solid #249099;
        background-color: #249099;
        content: '';
        display: inline-block;
        position: relative;
    }

    .checkbox-control:checked:after {
        font-family: sans;
        content: "\e73e";
        width: 8px;
        height: 8px;
        font-size: small;
        top: -26px;
        left: -1px;
        color: #fff;
        display: inline-block;
        position: relative;
    }

input:not([type="radio"]):not([type="checkbox"]), textarea, select {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #1B1B1F;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #74777F;
    line-height: 30px;
    padding: 10px;
    resize: none;
    outline: 0;
    text-align: right;
    height: 52px;
}

textarea {
    height: 82px;
}

.form-group {
    position: relative;
    margin-bottom: 20px;
    direction: rtl;
}

    .form-group .required {
        color: red;
    }

    .form-group label {
        position: absolute;
        top: -8px;
        right: 10px;
        padding: 0 5px;
        font-size: 12px;
        color: #555;
        pointer-events: none;
        z-index: 1;
    }

        .form-group label::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #ffffff;
            z-index: -1;
            display: block;
            top: 8px;
            right: 0;
        }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.cursor-pointer {
    cursor: pointer;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:after {
    width: 2rem;
}

header {
    position: fixed;
    top: 0;
    height: 56px;
    background-color: #EAEFEF;
    font-size: 14px;
    width: 100%;
    z-index: 5;
    border-bottom: 1px solid #f7f2f2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 2px 0 rgba(0, 0, 0, .05);
}

    header .container {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 100%;
    }

        header .container .contact-us span {
            direction: ltr;
            text-align: right;
            display: inline-block;
            color: #212529;
        }

        header .container .social-icon {
            margin-right: auto;
            display: flex;
            gap: 12px;
        }

footer .container {
    background-color: #EFF1F1;
    border-radius: 24px;
    padding: 40px;
    font-size: 14px;
}

    footer .container .footer-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

        footer .container .footer-item label {
            font-size: 14px;
            font-weight: 700;
        }

        footer .container .footer-item a {
            text-decoration: none;
            color: #000;
        }

            footer .container .footer-item a .contact-us {
                direction: ltr;
                text-align: right;
                display: inline-block;
                color: #212529;
            }

            footer .container .footer-item a.map {
                color: #006971;
            }

.error {
    border: 1px solid #c62828 !important;
    background-color: rgba(198,40,40,.14) !important;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: none;
}

    .loading .dot-pulse {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        height: 40px;
    }

        .loading .dot-pulse .dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #60ced9;
            animation: pulse 1.5s infinite ease-in-out;
            box-shadow: 0 0 8px rgba(74, 107, 255, 0.4);
        }

            .loading .dot-pulse .dot:nth-child(1) {
                animation-delay: 0s;
            }

            .loading .dot-pulse .dot:nth-child(2) {
                animation-delay: 0.2s;
            }

            .loading .dot-pulse .dot:nth-child(3) {
                animation-delay: 0.4s;
            }

@keyframes pulse {
    0%, 100% {
        transform: translateY(0) scale(0.9);
        opacity: 0.7;
        background-color: #60ced9;
    }

    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 1;
        background-color: #60ced9;
    }
}

.loading .loading-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: text-fade 2s infinite;
}

@keyframes text-fade {
    0%, 100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* CHEACKBOX */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

.custom-checkbox label {
    position: relative;
    padding-right: 24px;
    cursor: pointer;
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

    .custom-checkbox label::before {
        content: "";
        position: absolute;
        right: 0;
        top: 3px;
        width: 16px;
        height: 16px;
        border: 2px solid #006971;
        border-radius: 4px;
        background-color: white;
    }

.custom-checkbox input[type="checkbox"]:checked + label::before {
    background-color: #006971;
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 5px;
    width: 14px;
    height: 14px;
    background-image: url("../image/Check.svg");
    background-repeat: no-repeat;
    background-size: contain;
}



/* RANGE AND SLIDER */
.range-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #555;
    direction: ltr;
    font-size: 12px;
    font-weight: 500;
}

    .range-display span {
        display: block;
    }

.slider-container {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    direction: ltr;
}

    .slider-container input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        background: #ddd;
        border-radius: 5px;
        outline: none;
        position: absolute;
        pointer-events: none;
    }

        .slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: #006971;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: all;
            position: relative;
            z-index: 2;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .slider-container input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #006971;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: all;
            position: relative;
            z-index: 2;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

.slider-track {
    position: absolute;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
}

.slider-fill {
    position: absolute;
    height: 8px;
    background: #006971;
    border-radius: 5px;
    z-index: 1;
}

/* HOMESLIDER */
.homeSlider img {
    width: 100%;
    border-radius: 16px;
}

#phoneNumberSearch {
    margin-bottom: 64px;
}

    #phoneNumberSearch .search {
        max-width: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    #phoneNumberSearch .title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 16px;
        margin-top: 16px;
    }

    #phoneNumberSearch .input-wrapper {
        display: flex;
        align-items: center;
        background-color: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 100px;
        width: 100%;
        padding: 7px 0px 5px 12px;
        padding-right: 70px;
        position: relative;
        gap: 14px;
        direction: ltr;
    }

    #phoneNumberSearch .prefix-label {
        position: absolute;
        left: 20px;
        top: 15px;
        letter-spacing: 25px;
        font-weight: 700;
        font-size: 14px;
    }

    #phoneNumberSearch .number-input {
        width: 20px;
        height: 36px;
        border: 0;
        outline: 0;
        text-align: center;
        direction: ltr;
        font-weight: 700;
        border: 0;
        border-bottom: 1px solid;
        line-height: normal;
        border-radius: 0;
        padding: 0;
    }

        #phoneNumberSearch .number-input:first-of-type {
            margin-left: 40px;
        }

    #phoneNumberSearch .search-button {
        width: 48px;
        height: 48px;
        background-color: #ffb74a;
        border: 1px solid #d9d9d9;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #006971;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
    }

        #phoneNumberSearch .search-button svg {
            width: 1.5rem;
            height: 1.5rem;
            fill: currentColor;
        }


.homeSlider .swiper-button-next,
.homeSlider .swiper-button-prev {
    width: 48px !important;
    height: 48px !important;
    background-color: #00000040;
    border-radius: 100px;
    top: calc(100% - 48px);
}

.homeSlider .swiper-button-next {
    right: 70px;
}

    .homeSlider .swiper-button-next:after,
    .homeSlider .swiper-button-prev:after {
        font-size: 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#mainSection .banner {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


#mainSection .sidebar .title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
    display: flex;
}

    #mainSection .sidebar .title .clear-filter {
        background-color: #ffb74a;
        width: 90px;
        padding: 7px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        margin-right: auto;
        font-size: 12px;
    }

    #mainSection .sidebar .title span {
        line-height: 32px;
    }

#mainSection .filter-box {
    position: relative;
    border: 1px solid #bcc9ca;
    padding: 16px;
    border-radius: 16px;
    background-color: #fff;
}

    #mainSection .filter-box .filter-count {
        position: absolute;
        left: 56px;
        top: 16px;
        width: 90px;
        padding: 4px 11px;
        background-color: #eaefef;
        border-radius: 8px;
        font-weight: 500;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

        #mainSection .filter-box .filter-count .count {
            display: inline-block;
            width: 16px;
        }


    #mainSection .filter-box .filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        #mainSection .filter-box .filter-header > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 85%;
        }

        #mainSection .filter-box .filter-header > img {
            rotate: 180deg;
            transition: all 0.3s;
        }

        #mainSection .filter-box .filter-header.collapsed > img {
            rotate: 0deg;
            transition: all 0.3s;
        }

        #mainSection .filter-box .filter-header h5 {
            color: #667b7d;
            font-weight: 700;
            font-size: 16px;
        }


    #mainSection .filter-box .filter-body {
        margin-top: 20px;
    }

        #mainSection .filter-box .filter-body .operator-prefix {
            margin: 12px 24px 12px 0;
        }

        #mainSection .filter-box .filter-body .price-input {
            width: calc(100% - 40px);
            padding-left: 40px;
            text-align: left;
            direction: ltr;
        }

        #mainSection .filter-box .filter-body .label-toman {
            position: absolute;
            left: 32px;
            top: 15px;
            color: #ccc;
            font-size: 12px;
        }

.button-filter, .button-accept {
    background-color: #006971;
    color: #fff;
    width: 100%;
    padding: 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    margin-bottom: 12px;
}

.button-reset,
.button-cancel {
    background-color: #fff;
    color: #006971;
    width: 100%;
    padding: 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #006971;
    text-decoration: none;
    margin-bottom: 12px;
}

.button-download {
    background-color: #ffb74a;
    color: #825500;
    width: 100%;
    padding: 7px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #825500;
    gap: 8px;
}

    .button-download.with-price {
        background-color: #006971;
        color: #fff;
    }


.font-sans {
    font-family: sans;
}


#mainSection .contentbar .header {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

    #mainSection .contentbar .header > div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        #mainSection .contentbar .header > div .title {
            font-weight: 500;
            font-size: 12px;
            color: #667b7d;
        }

#mainSection .contentbar .body .card {
    padding: 24px 24px 10px;
    border-radius: 24px;
    border: 1px solid #bcc9ca;
    position: relative;
    margin-bottom: 30px;
}


    #mainSection .contentbar .body .card .new-stamp {
        width: 50px;
        height: 40px;
        text-align: center;
        padding-top: 10px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
        background: #ffb74a;
        position: absolute;
        left: 18px;
        top: 0;
        font-size: 12px;
    }

    #mainSection .contentbar .body .card .number-price {
        padding: 30px 11%;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        z-index: 2;
    }

        #mainSection .contentbar .body .card .number-price .package-title {
            font-weight: 700;
            margin-bottom: 8px;
        }

        #mainSection .contentbar .body .card .number-price .package-code {
            position: absolute;
            bottom: 60px;
            font-weight: 500;
            font-size: 14px;
            border-radius: 4px;
            padding: 8px;
            background-color: #E1E3E3;
            width: 90px;
        }

    #mainSection .contentbar .body .card .package-price {
        padding: 36px 24px 10px 0;
        font-size: 14px;
        height: 700px;
    }

        #mainSection .contentbar .body .card .package-price .container-package-image {
            width: 100%;
            height: calc(100% - 100px);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            margin-top: 16px;
        }

            #mainSection .contentbar .body .card .package-price .container-package-image .package-image {
                max-width: 100%;
            }

    #mainSection .contentbar .body .card .package-total {
        float: left;
        font-weight: 700;
        font-size: 16px;
    }


    #mainSection .contentbar .body .card .number-price .package-count {
        background-color: #E1E3E3;
        padding: 2px 16px;
        border-radius: 12px;
        margin-left: 8px;
    }

    #mainSection .contentbar .body .card .number-price .phone-number {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 10px;
    }

        #mainSection .contentbar .body .card .number-price .phone-number .price {
            font-size: 14px;
            font-weight: 400;
        }


    #mainSection .contentbar .body .card.irancell::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 9px;
        width: 39%;
        height: 80px;
        background-image: url(../image/irancell.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }

    #mainSection .contentbar .body .card.rightel::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 9px;
        width: 39%;
        height: 80px;
        background-image: url(../image/rightel.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }

    #mainSection .contentbar .body .card.mci::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 9px;
        width: 39%;
        height: 80px;
        background-image: url(../image/mci.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }

    #mainSection .contentbar .body .card .action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
    }

        #mainSection .contentbar .body .card .action .reserve {
            display: flex;
            width: 100%;
        }

            #mainSection .contentbar .body .card .action .reserve > div:first-child {
                color: #825500;
                font-weight: 700;
                font-size: 14px;
                align-items: center;
                display: flex;
            }

            #mainSection .contentbar .body .card .action .reserve .count-down {
                margin-right: auto;
                background-color: #FFB74A;
                border-radius: 100px;
                padding: 8px 15px;
                font-size: 12px;
                gap: 8px;
                display: flex;
            }

        #mainSection .contentbar .body .card .action .buy {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 25px;
        }

            #mainSection .contentbar .body .card .action .buy > a {
                cursor: pointer;
                color: #006971;
                text-decoration: none;
            }

        #mainSection .contentbar .body .card .action .more {
            display: flex;
            align-items: center;
            gap: 8px;
        }

            #mainSection .contentbar .body .card .action .more img {
                cursor: pointer;
                width: 32px;
            }



#mainSection .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

    #mainSection .pagination > div {
        cursor: pointer;
    }

    #mainSection .pagination .prev,
    #mainSection .pagination .next {
        color: #006971;
    }

        #mainSection .pagination .prev img {
            rotate: 270deg;
        }

        #mainSection .pagination .next img {
            rotate: 90deg;
        }

    #mainSection .pagination .item {
        font-size: 14px;
    }

    #mainSection .pagination select.page-count {
        width: 46px;
        height: 24px;
        border-radius: 5px;
        text-align-last: center;
        font-size: 12px;
        padding: unset;
    }
/* ///////////////////////////// */
#aboutSection {
    background-color: #EAFDFF;
    margin-top: 64px;
    padding-top: 64px;
    padding-bottom: 64px;
}

    #aboutSection .why h4 {
        font-size: 48px;
        font-weight: 400;
        color: #006971;
    }

        #aboutSection .why h4 span {
            font-size: 28px;
            color: #000;
            display: block;
        }

    #aboutSection .why1 {
        height: 300px;
        background-image: url(../image/why1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 24px;
    }

    #aboutSection .reason1 {
        height: 300px;
        background-color: #FFB74A;
        border-radius: 24px;
        padding: 24px;
    }

        #aboutSection .reason1 h4 {
            font-weight: 700;
            font-size: 16px;
            color: #4B2F00;
            margin-top: 50px;
        }

        #aboutSection .reason1 div {
            font-weight: 400;
            font-size: 14px;
            color: #4B2F00;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 28px;
        }


    #aboutSection .reason2 {
        height: 300px;
        background-color: #006971;
        border-radius: 24px;
        padding: 24px;
    }

        #aboutSection .reason2 h4 {
            font-weight: 700;
            font-size: 16px;
            color: #FFFFFF;
            margin-top: 50px;
        }

        #aboutSection .reason2 div {
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 28px;
        }


/*///////////////////////////////*/
#servicesSection {
    margin-bottom: 50px;
    background-color: #EAFDFF;
}

    #servicesSection .service {
        min-height: 446px;
        border-radius: 24px;
        padding: 24px;
        padding-bottom: 0;
        cursor: pointer;
        display: block;
        text-decoration: none;
    }

        #servicesSection .service img:not(.goto) {
            width: 100%;
        }

        #servicesSection .service h2 {
            font-size: 26px;
            line-height: 50px;
            font-weight: 700;
            color: #fff;
        }

        #servicesSection .service .link {
            font-weight: 400;
            font-size: 14px;
            color: #fff;
            margin-top: 28px;
            margin-bottom: 64px;
            cursor: pointer;
            padding: 0px 30px;
            line-height: 28px;
        }

        #servicesSection .service.service1 {
            background-color: #512DA8;
        }

        #servicesSection .service.service2 {
            background-color: #FFB74A;
        }

        #servicesSection .service.service3 {
            background-color: #1976D2;
        }

        #servicesSection .service.service4 {
            background-color: #00796B;
        }



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

#aboutSection .reason3 {
    background-image: url(../image/reason3.png);
    background-size: cover;
    background-position: top right;
    height: 300px;
    border-radius: 24px;
    padding: 24px;
    padding-right: 50%;
}

    #aboutSection .reason3 h4 {
        font-weight: 700;
        font-size: 16px;
        color: #00363B;
        margin-top: 60px;
    }

    #aboutSection .reason3 div {
        font-weight: 400;
        font-size: 14px;
        color: #00363B;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 28px;
    }

/*////////////////////////////*/
/*////////// BLOG  ///////////*/
/*////////////////////////////*/

.blogInfo {
    color: #3a3a3a;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 16px;
}

#blog .blog-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#blog .blog-tabs {
    padding-bottom: 16px;
    border-bottom: 1px solid #ccc;
}

    #blog .blog-tabs > .title {
        font-size: 28px;
        font-weight: 300;
        color: #393c3c;
    }

    #blog .blog-tabs > .tabs {
        display: flex;
        gap: 16px;
    }

        #blog .blog-tabs > .tabs .tab-1,
        #blog .blog-tabs > .tabs .tab-2 {
            font-size: 14px;
            font-weight: 400;
            color: #000;
            cursor: pointer;
        }

#blog .blog-hero {
    margin-top: 40px;
    margin-bottom: 40px;
}

a {
    text-decoration: none;
}

#blog .blog-card {
    background-color: #fff;
    border-radius: 16px;
    display: block;
}

    #blog .blog-card .image img {
        width: 100%;
        height: auto;
        border-radius: 16px 16px 0 0;
    }

    #blog .blog-card .content {
        padding: 24px;
    }

        #blog .blog-card .content > .title {
            font-size: 16px;
            font-weight: 700;
            color: #000000;
            margin-bottom: 16px;
        }

        #blog .blog-card .content > .description {
            font-size: 12px;
            font-weight: 400;
            color: #000000;
        }

#blog .sidebar-ads .ads-txt {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    display: block;
}

    #blog .sidebar-ads .ads-txt.yellow {
        background-color: #f9fbe7;
    }

    #blog .sidebar-ads .ads-txt.purple {
        background-color: #f3e5f5;
    }

    #blog .sidebar-ads .ads-txt.orange {
        background-color: #fff3e0;
    }

    #blog .sidebar-ads .ads-txt > .title {
        font-size: 14px;
        font-weight: 700;
        color: #000;
        margin-bottom: 16px;
    }

    #blog .sidebar-ads .ads-txt > .description {
        font-size: 12px;
        font-weight: 400;
        color: #000000;
    }

#blog .blog-articles .blog-card {
    margin-bottom: 12px;
}

    #blog .blog-articles .blog-card .title {
        font-size: 14px;
    }

/*///////////////////////////////////*/
/*//////// ARTICLE SECTION  /////////*/
/*///////////////////////////////////*/

#article article {
    background-color: #fff;
    border-radius: 24px;
    padding: 48px;
}


    #article article h1 {
        color: #161d1f;
        font-size: 28px !important;
        font-weight: 700;
        margin-top: 16px;
        margin-bottom: 16px;
        line-height: 48px;
    }

    #article article h2 {
        font-size: 20px;
        font-weight: 700;
        margin-top: 34px;
        color: #084298;
        line-height: 32px;
    }

    #article article h3 {
        font-size: 20px;
        line-height: 32px;
    }

    #article article .image img {
        border-radius: 24px;
        margin-bottom: 32px;
    }

    #article article .sidebar {
        border-left: 1px solid #ccc;
        position: sticky;
        top: 66px;
        padding: 8px;
    }

        #article article .sidebar .title {
            font-size: 14px;
            font-weight: 700;
            color: #393C3C;
            margin-bottom: 16px;
        }

        #article article .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            #article article .sidebar ul li a {
                color: #000;
                font-size: 14px;
                font-weight: 300;
                margin-bottom: 16px;
                display: inline-block;
            }

                #article article .sidebar ul li a:hover {
                    color: #60ced9;
                }

    #article article .content {
        font-size: 16px;
        font-weight: 300;
        color: #393C3C;
        line-height: 30px;
    }

/**********************/
#blogSection {
    margin-bottom: 50px;
}

    #blogSection .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

        #blogSection .header .title {
            font-size: 28px;
            font-weight: 400;
            border-right: 4px solid #00BCD4;
            padding-right: 10px;
        }

        #blogSection .header .more {
            font-size: 14px;
            font-weight: 400;
            cursor: pointer;
            color: #006971;
            margin-bottom: 20px;
        }

    #blogSection .blog-card {
        cursor: pointer;
        color: #212529;
    }

        #blogSection .blog-card .image {
            width: 100%;
            height: 225px;
            border-radius: 16px 16px 0 0;
            background-size: cover;
            background-repeat: no-repeat;
        }

        #blogSection .blog-card .body {
            padding: 16px;
        }

        #blogSection .blog-card h3 {
            font-size: 14px;
            font-weight: 700;
            text-overflow: ellipsis;
            overflow: hidden;
        }


        #blogSection .blog-card .description {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            font-weight: 400;
            margin-bottom: 20px;
        }

        #blogSection .blog-card .link {
            font-size: 14px;
            color: #006971;
        }


.navbar-custom {
    margin-top: 56px;
    margin-bottom: 16px;
}

    .navbar-custom .navbar-brand {
        color: #fff;
        font-weight: bold;
    }

    .navbar-custom .dropdown-toggle {
        cursor: pointer;
    }

    .navbar-custom .nav-link {
        font-size: 14px;
        color: #000;
        font-weight: 700;
        transition: color 0.3s;
    }

        .navbar-custom .nav-link.active {
            color: #60ced9;
        }

        .navbar-custom .nav-link:hover {
            color: #ffc107;
        }


    .navbar-custom .left-side {
        display: flex;
        align-items: center;
        gap: 30px;
    }

        .navbar-custom .left-side .dropdown-menu a {
            color: #000;
            text-decoration: none;
            font-size: 12px;
            line-height: 30px;
        }

        .navbar-custom .left-side .dropdown-menu li:hover {
            background-color: #ccc;
        }

        .navbar-custom .left-side .login-signup {
            font-size: 12px;
            font-weight: 500;
            color: #006971;
            text-decoration: none;
        }

        .navbar-custom .left-side .link-basket {
            position: relative;
        }

            .navbar-custom .left-side .link-basket .notify {
                position: absolute;
                top: -9px;
                background-color: #dc3545;
                width: 18px;
                height: 18px;
                border-radius: 10px;
                left: 10px;
                color: #fff;
                line-height: 20px;
                text-align: center;
                font-size: 11px;
            }

/* ////////////////////////////////// */
/* //////// SELECT OPTION ////////// */
.custom-select-wrapper {
    position: relative;
    min-width: 100px;
    user-select: none;
}

.custom-select {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 12px;
    padding-top: 3px;
    font-weight: 500;
    z-index: 10002;
}


.listType, .boxType {
    display: none;
}

    .listType .new-stamp-table {
        padding: 0px 16px;
        border-radius: 20px;
        background-color: #ffb74a;
        line-height: 24px;
        font-size: 12px;
        width: 60px;
        display: inline-block;
        float: right;
        margin-top: 8px;
    }

    .listType .reserve,
    .sim-details-action .reserve {
        display: inline-block;
    }

        .listType .reserve .count-down,
        .sim-details-action .reserve .count-down {
            background-color: #FFB74A;
            border-radius: 100px;
            padding: 8px 15px;
            font-size: 12px;
            gap: 12px;
            display: flex;
            line-height: 16px;
            justify-content: center;
        }

.custom-select::after {
    content: url(../image/smallArrow.svg);
    font-size: 12px;
    color: #28a745;
    margin-right: 8px;
}

.options {
    position: absolute;
    top: -6px;
    width: 116%;
    left: 0;
    right: -9px;
    border-top: none;
    border-radius: 16px;
    max-height: 0;
    overflow: hidden;
    z-index: 10000;
}

    .options.open {
        max-height: 200px;
        background: #fff;
        border: 1px solid #bcc9ca;
        padding-top: 30px;
        padding-bottom: 10px;
        transition: max-height 0.2s ease;
    }

.option {
    padding: 3px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 12px;
}

    .option:hover {
        background-color: #eaefef;
    }


/*/////////////////////////*/
.custom-table {
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
}

    .custom-table thead {
        background-color: #198754;
        color: white;
    }

    .custom-table tbody tr:not(:last-child) {
        border-bottom: 1px solid #dee2e6;
    }

    .custom-table tbody tr:last-child,
    .custom-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .custom-table tbody tr:nth-child(even) td {
        background-color: #f6fafa;
    }

    .custom-table tbody tr:nth-child(odd) td {
        background-color: #ffffff;
    }



    .custom-table th {
        padding: 12px 16px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 38px;
        background-color: #EAEFEF;
        color: #667B7D;
        white-space: nowrap;
    }

    .custom-table td {
        padding: 12px 16px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 38px;
        white-space: nowrap;
    }

        .custom-table td a {
            cursor: pointer;
            color: #006971;
            text-decoration: none;
        }

/*/////////////////////////////*/
/*/// ABOUTUS  ///*/
/*/////////////////////////////*/

#aboutus .container-banner {
    background-image: url("../image/abouus-banner.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 48px;
    border-radius: 16px;
    margin-bottom: 40px;
    line-height: 28px;
}

#aboutus .hero {
    max-width: 470px;
}

#aboutus h1 {
    color: #006971;
    font-size: 64px;
    font-weight: 400;
}

#aboutus .description {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 16px;
    margin-top: 16px;
    color: #393C3C;
}

#aboutus p {
    font-size: 14px;
    font-weight: 400;
    color: #171C1D;
}

#aboutus .container.features {
    border-radius: 24px;
    background-color: #fff;
    padding: 48px 150px;
    font-size: 14px;
    line-height: 28px;
}
/*/////////////////////////////*/
/*/// ORGANIZATION  ///*/
/*/////////////////////////////*/
#simFeaturesForOrgHero .container-banner {
    background-image: url("../image/heroSimForOrg.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 28px 90px;
    border-radius: 16px;
    margin-bottom: 40px;
}

#simFeaturesForOrgHero .hero {
    max-width: 470px;
}

#simFeaturesForOrgHero h1 {
    color: #006971;
    font-size: 50px;
    font-weight: 400;
}

#simFeaturesForOrgHero .description {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 16px;
    margin-top: 16px;
    color: #393C3C;
}

#simFeaturesForOrgHero p {
    font-size: 14px;
    font-weight: 400;
    color: #171C1D;
}

#simFeaturesForOrg .features {
    background-color: #FFB74A;
    border-radius: 64px;
    padding: 50px;
}

    #simFeaturesForOrg .features > .title {
        font-size: 28px;
        font-weight: 400;
        color: #3D494A;
    }

    #simFeaturesForOrg .features .content ul {
        font-size: 14px;
        font-weight: 400;
        color: #171C1D;
        margin-top: 20px;
    }

    #simFeaturesForOrg .features > .image {
        margin-bottom: -50px;
        margin-top: -140px;
        width: 100%;
        text-align: left;
    }

#simFeaturesForOrg .sim-type {
    border-radius: 24px;
    margin-bottom: 16px;
    padding: 24px;
}

    #simFeaturesForOrg .sim-type > .title {
        font-size: 28px;
        font-weight: 400;
        color: #3D494A;
        margin-bottom: 24px;
        text-align: center;
    }

    #simFeaturesForOrg .sim-type .items .item {
        text-align: center;
    }

        #simFeaturesForOrg .sim-type .items .item > .title {
            font-size: 12px;
            font-weight: 700;
            color: #171C1D;
            margin-bottom: 8px;
            margin-top: 8px;
        }

        #simFeaturesForOrg .sim-type .items .item > .price {
            font-size: 12px;
            font-weight: 400;
            color: #171C1D;
        }

    #simFeaturesForOrg .sim-type.standard-sim-org {
        background-color: #DEF4FF;
        margin-bottom: 24px;
    }

    #simFeaturesForOrg .sim-type.data-sim-org {
        background-color: #FFF5E2;
    }


#requestForm {
    margin-top: 24px;
}

    #requestForm .container {
        background-color: #EAFDFF;
        border-radius: 48px;
        padding: 48px;
    }

    #requestForm .request-form {
        background-color: #fff;
        padding: 24px;
        border-radius: 24px;
    }

        #requestForm .request-form > .title {
            font-size: 28px;
            font-weight: 400;
            color: #3D494A;
            margin-bottom: 24px;
        }

    #requestForm .documentations {
        padding: 24px;
    }

        #requestForm .documentations > .title {
            font-size: 28px;
            font-weight: 400;
            color: #3D494A;
            margin-bottom: 24px;
        }

        #requestForm .documentations > .content {
            font-size: 14px;
            font-weight: 400;
            color: #171C1D;
            margin-bottom: 24px;
        }

        #requestForm .documentations > .image {
            width: 100%;
            text-align: left;
        }



#simFeaturesFaq {
    margin-top: 100px;
    margin-bottom: 100px;
}

    #simFeaturesFaq .accordion-item {
        background-color: unset !important;
        border: unset;
        border-bottom: 1px solid #BCC9CA;
        border-radius: unset;
        margin-bottom: 20px;
        overflow: hidden;
    }

        #simFeaturesFaq .accordion-item:last-child {
            border: unset !important;
        }

    #simFeaturesFaq .accordion-button {
        font-weight: 700;
        font-size: 14px;
        color: #000;
        background-color: unset !important;
    }

        #simFeaturesFaq .accordion-button:not(.collapsed) {
            box-shadow: unset;
            color: #000;
        }


    #simFeaturesFaq .accordion-body {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        padding-top: 0;
    }


/*/////////////////////////////*/
/*/// OFFER  ///*/
/*/////////////////////////////*/

#offer .banner {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


#offer .container img {
    width: 100%;
}

#offer .container .container-request {
    padding-left: 3rem;
    padding-right: 3rem;
}

#offer .container .request-offer {
    line-height: 28px;
    background-color: #fff;
    padding: 70px 70px 0;
    border-radius: 24px;
    position: relative;
    top: -50px;
}

#offer .container .result-container .title {
    font-weight: 700;
    margin-bottom: 12px;
}

#offer .container .result-container {
    display: none;
}

    #offer .container .result-container .result-title {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 12px;
    }

    #offer .container .result-container .result-item {
        background-color: #F6FAFA;
        border-radius: 8px;
        border: 1px solid #BCC9CA;
        padding: 12px;
        font-size: 12px;
        margin-bottom: 4px;
    }

#offer .container .image {
    padding: 24px;
}

#offer .input-wrapper {
    text-align: center;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    width: 100%;
    padding: 4px;
    position: relative;
    direction: ltr;
}

#offer .prefix-label {
    font-weight: 700;
}

#offer .number-input {
    width: 30px;
    height: 36px;
    border: 0;
    outline: 0;
    text-align: center;
    direction: ltr;
    font-weight: 700;
    border: 0;
    border-bottom: 1px solid #ccc;
    line-height: normal;
    border-radius: 0;
    padding: 0;
    margin-left: 12px;
    font-size: 16px;
}

.offer-cart-success-wrapper .container {
    border-radius: 24px;
    border: 1px solid #bcc9ca;
    padding: 48px;
    line-height: 28px;
    background-color: #fff;
}

.offer-cart-success-wrapper h3 {
    color: #006971;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 24px;
}

.offer-cart-success-wrapper .link {
    font-size: 14px;
    font-weight: 500;
    color: #006971;
    text-decoration: none;
}

/*/////////////////////////////*/
/*/// FAQ  ///*/
/*/////////////////////////////*/
#faq .banner {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

#faq .accordion {
    padding: 24px;
    border-radius: 24px;
    background-color: #fff;
    border: 1px solid #BCC9CA;
    margin-top: 24px;
}

    #faq .accordion .accordion-item {
        background-color: unset !important;
        border: unset;
        border-bottom: 1px solid #BCC9CA;
        border-radius: unset;
        line-height: 28px;
    }

        #faq .accordion .accordion-item:last-child {
            border: unset !important;
        }

        #faq .accordion .accordion-item .accordion-button {
            background-color: unset !important;
        }

            #faq .accordion .accordion-item .accordion-button:not(.collapsed) {
                box-shadow: unset;
                color: #000;
            }

        #faq .accordion .accordion-item .accordion-body {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            padding-top: 0;
        }


#faq .not-found {
    padding: 50px;
    border-radius: 24px;
    border: 1px solid #bcc9ca;
    margin-top: 24px;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
}

    #faq .not-found a {
        text-decoration: none;
        color: #000;
    }

    #faq .not-found .contact-us {
        direction: ltr;
        text-align: right;
        display: inline-block;
        color: #212529;
    }


/*/ /////////////////////////// /*/
/*/ /////// ADD TO CART ////// /*/
/*/ /////////////////////////// /*/
.gotoback {
    font-size: 24px !important;
    font-weight: 200;
    color: #171c1d !important;
    text-decoration: none;
}

    .gotoback img {
        vertical-align: -4px;
    }

.add-to-cart-warpper .modal-title {
    font-weight: 700;
    text-align: center;
    width: 100%;
}

.add-to-cart-warpper .modal-footer {
    border-top: none;
    justify-content: center;
}

    .add-to-cart-warpper .modal-footer .btn-custom {
        border-radius: 30px;
        padding: 10px 25px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .add-to-cart-warpper .modal-footer .btn-success-custom {
        background-color: #60ced9;
        border: #60ced9;
        color: #fff;
    }

.btn-custom {
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.add-to-cart-warpper .container .box {
    border-radius: 24px;
    border: 1px solid #bcc9ca;
    padding: 48px;
    background-color: #fff;
}

    .add-to-cart-warpper .container .box .info-hint {
        font-size: 11px;
    }


.add-to-cart-warpper .add-to-cart-box {
    background-color: #f8faf9;
    border-radius: 24px;
    padding: 24px;
}

    .add-to-cart-warpper .add-to-cart-box .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        margin-top: 16px;
    }

        .add-to-cart-warpper .add-to-cart-box .item.sum {
            font-size: 13px;
            font-weight: 700;
        }

.add-to-cart-warpper .card {
    padding: 24px;
    position: relative;
    font-size: 14px;
    border: unset;
}

    .add-to-cart-warpper .card .number-price {
        padding: 0px 55px 20px 0;
        z-index: 2;
    }

        .add-to-cart-warpper .card .number-price .phone-number {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 10px;
            margin-top: 50px;
        }

        .add-to-cart-warpper .card .number-price .price {
            font-size: 22px;
            font-weight: 700;
        }

    .add-to-cart-warpper .card.irancell::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 9px;
        width: 150px;
        height: 125px;
        background-image: url(../image/irancell.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }

    .add-to-cart-warpper .card.rightel::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 9px;
        width: 150px;
        height: 125px;
        background-image: url(../image/rightel.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }

    .add-to-cart-warpper .card.mci::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 9px;
        width: 150px;
        height: 125px;
        background-image: url(../image/mci.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }

.add-to-cart-warpper .elan {
    text-align: center;
}

.add-to-cart-warpper .success {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.add-to-cart-warpper .elan a {
    justify-content: center;
}

.add-to-cart-warpper .elan h3,
.add-to-cart-warpper .success h3 {
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
}


.add-to-cart-warpper .elan a,
.add-to-cart-warpper .success a {
    font-size: 12px;
    line-height: 32px;
    color: #006971;
    gap: 8px;
    display: flex;
}

.add-to-cart-warpper .warning {
    background-color: #ffeedc;
    line-height: 28px;
    border: 1px solid #825500;
    padding: 16px;
    border-radius: 12px;
    margin: 16px 0;
}

.rules {
    background-color: #FFB74A;
    border-radius: 24px;
    padding: 24px;
    align-items: center;
    margin-top: 12px;
}

    .rules .title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 16px;
    }

    .rules ul li {
        font-size: 14px;
        font-weight: 400;
    }

    .rules img {
        max-width: 100%;
    }


/*/ /////////////////////////// /*/
/*/ ///////// BASKET ////////// /*/
/*/ /////////////////////////// /*/
.add-to-cart-warpper.basket .card {
    border: 1px solid #bcc9ca;
    border-radius: 16px;
    margin-bottom: 14px;
}

    .add-to-cart-warpper.basket .card .number-price {
        padding: 14px 10px 0;
    }

        .add-to-cart-warpper.basket .card .number-price .phone-number {
            margin-top: 34px;
            padding-right: 36px;
        }

        .add-to-cart-warpper.basket .card .number-price .count-down {
            color: #825500;
            font-size: 11px;
            gap: 4px;
            display: flex;
            line-height: 16px;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-family: tahoma;
        }

        .add-to-cart-warpper.basket .card .number-price .trash {
            cursor: pointer;
        }

/*/ /////////////////////////// /*/
/*/ ///////// CONTACT ////////// /*/
/*/ /////////////////////////// /*/

.contact-warpper .container .box {
    border-radius: 24px;
    border: 1px solid #bcc9ca;
    padding: 48px;
    background-color: #fff;
}

    .contact-warpper .container .box .address {
        direction: ltr;
        text-align: right;
        font-size: 14px;
        display: inline-block;
        margin-top: 4px;
    }

    .contact-warpper .container .box .map {
        border: 1px solid #ccc;
        border-radius: 12px;
        margin-top: 20px;
        max-width: 100%;
    }

/*/ /////////////////////////// /*/
/*/ ///////// FORMS ////////// /*/
/*/ /////////////////////////// /*/


#forms .box {
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #BCC9CA;
    padding: 24px;
}

    #forms .box .row-item {
        margin: 0;
        line-height: 48px;
        font-weight: 700;
        font-size: 14px;
    }

        #forms .box .row-item:not(:last-child) {
            border-bottom: 1px solid #BCC9CA;
        }

#forms .form-left img {
    width: 100%;
}

/*///////////////////////////////////*/
/*////////// profile  ///////////*/
/*///////////////////////////////////*/

#profile {
    padding: 20px 0;
}

    #profile .banner {
        background-image: url("../image/profile-banner.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 8px;
        padding: 0 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 231px;
        margin-bottom: 50px;
    }

    #profile .wallet-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        #profile .wallet-info .name {
            font-size: 32px;
            font-weight: 300;
            color: #393c3c;
        }

        #profile .wallet-info .credit {
            font-size: 14px;
            font-weight: 500;
            color: #4b2f00;
            margin-top: 5px;
        }

    #profile .profile-card {
        border-radius: 24px;
        background: #fff;
        padding: 24px;
    }

    #profile .nav-pills {
        margin-right: 30px;
        flex-wrap: nowrap;
    }

        #profile .nav-pills .nav-link.active {
            background-color: #0d6efd;
        }

    #profile .nav-link {
        color: #44474E;
        border-radius: 0;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }

    #profile .nav-pills .nav-link.active {
        background-color: unset;
        border-bottom: 2px solid;
        color: #1D5CB4;
    }

    #profile .tab-content .item {
        margin-bottom: 16px;
    }

        #profile .tab-content .item .title {
            font-size: 11px;
            font-weight: 500;
            color: #3D494A;
        }

        #profile .tab-content .item .value {
            font-size: 14px;
            font-weight: 500;
            color: #000;
        }

    #profile .tab-content h5 {
        font-size: 14px;
        font-weight: 700;
        color: #000;
    }

    #profile .tab-content .profile-card .header {
        display: flex;
        margin-bottom: 8px;
        align-items: center;
        justify-content: space-between;
    }

    #profile .tab-content .profile-card .items .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #BCC9CA;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

        #profile .tab-content .profile-card .items .item .info {
            display: flex;
            align-items: flex-end;
            gap: 16px;
        }

    #profile .tab-content table th {
        background-color: #EAEFEF !important;
        color: #667B7D !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    #profile .tab-content table td {
        font-size: 14px;
        font-weight: 300;
        color: #000;
        padding: 13px 0px;
    }

    #profile .tab-content table.table tbody tr:nth-of-type(odd) td {
        background-color: #F6FAFA !important;
    }

    #profile .change-password {
        display: flex;
        align-items: center;
    }

        #profile .change-password .form {
            padding: 0 50px;
        }

    #profile .wallet-action {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

        #profile .wallet-action > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
        }

    #profile .link {
        font-size: 12px;
        color: #006971;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        margin-top: 10px;
        text-decoration: none;
    }

    #profile table td,
    #profile table th {
        vertical-align: middle;
        text-align: center;
    }

    #profile .upload-card {
        background: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        margin-bottom: 20px;
    }

        #profile .upload-card .upload-header {
            text-align: center;
            margin-bottom: 30px;
        }

            #profile .upload-card .upload-header h1 {
                color: #333;
                font-size: 28px;
                margin-bottom: 10px;
            }

            #profile .upload-card .upload-header p {
                color: #666;
                font-size: 16px;
            }

        #profile .upload-card .upload-area {
            border: 3px dashed #4F46E5;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f8faff;
            margin-bottom: 20px;
        }

            #profile .upload-card .upload-area:hover {
                border-color: #3730A3;
                background: #f0f4ff;
                transform: translateY(-2px);
            }

            #profile .upload-card .upload-area.dragover {
                border-color: #3730A3;
                background: #e0e7ff;
                transform: scale(1.02);
            }

        #profile .upload-card .upload-icon {
            margin-bottom: 15px;
        }

        #profile .upload-card .upload-area p {
            color: #4F46E5;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        #profile .upload-card .file-types {
            color: #666;
            font-size: 14px;
        }

        #profile .upload-card .preview-area {
            border: 2px solid #10B981;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            background: #f0fdf4;
        }

        #profile .upload-card .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

            #profile .upload-card .preview-header h3 {
                color: #065F46;
                font-size: 18px;
            }

        #profile .upload-card .remove-btn {
            background: #EF4444;
            color: white;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #profile .upload-card .preview-content {
            text-align: center;
            margin-bottom: 15px;
        }

        #profile .upload-card .file-preview {
            max-width: 100%;
            height: 97px;
            max-height: 97px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        #profile .upload-card .file-info {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 14px;
        }

    #profile .profile-card .submit-btn {
        width: 100%;
        background: linear-gradient(135deg, #4F46E5, #7C3AED);
        color: white;
        border: none;
        padding: 15px;
        border-radius: 12px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

        #profile .profile-card .submit-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
        }

        #profile .profile-card .submit-btn:disabled {
            background: #9CA3AF;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

    #profile .profile-card .kyc {
        max-width: 400px;
        margin: 0 auto;
        padding: 34px;
    }

        #profile .profile-card .kyc .divider {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }

        #profile .profile-card .kyc .divider-line {
            flex: 1;
            height: 1px;
            background-color: #ccc;
        }

        #profile .profile-card .kyc .divider-text {
            padding: 0 15px;
            color: #555;
            font-size: 18px;
            font-weight: 500;
        }

        #profile .profile-card .kyc img {
            width: 150px;
        }

        #profile .profile-card .kyc a {
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            direction: ltr;
        }


/*///////////////////////////////////*/
/*////////// installment  ///////////*/
/*///////////////////////////////////*/

#installmentForHero .container-banner {
    background-image: url("../image/installment-banner.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 110px 90px;
    border-radius: 16px;
    margin-bottom: 40px;
}

#installmentForHero .hero {
    max-width: 490px;
}

#installmentForHero h1 {
    color: #006971;
    font-size: 40px;
    font-weight: 400;
}

#installmentForHero .description {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 16px;
    margin-top: 16px;
    color: #393C3C;
}

#installmentForHero p {
    font-size: 14px;
    font-weight: 400;
    color: #171C1D;
}

#installment .help .box {
    background-color: #f0f4f5;
    border-radius: 48px;
    padding: 64px;
    line-height: 28px;
}

    #installment .help .box > .title {
        font-size: 28px;
        font-weight: 300;
        color: #3d494a;
        margin-bottom: 16px;
        line-height: 40px;
    }

    #installment .help .box > ul {
        font-size: 14px;
        font-weight: 400;
        color: #171c1d;
    }

#installment .price-calculation {
    margin-top: 24px;
    background-color: #fff;
    border-radius: 48px;
    padding: 64px;
}

    #installment .price-calculation .calculation {
        margin-bottom: 34px;
    }

        #installment .price-calculation .calculation > .title {
            font-size: 28px;
            font-weight: 400;
            color: #3d494a;
            margin-bottom: 24px;
        }

    #installment .price-calculation .image {
        text-align: center;
    }

    #installment .price-calculation .result .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

        #installment .price-calculation .result .item > .title {
            color: #000;
            font-size: 12px;
            font-weight: 300;
        }

        #installment .price-calculation .result .item > .value {
            font-size: 14px;
            font-weight: 400;
            color: #000;
        }

        #installment .price-calculation .result .item.total {
            border-top: 1px solid #bcc9ca;
            padding-top: 8px;
        }

            #installment .price-calculation .result .item.total * {
                font-weight: 700;
            }

/*/ /////////////////////////// /*/
/*/ ///////// LOGIN ////////// /*/
/*/ /////////////////////////// /*/
#login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 100px);
}


    #login .left {
        height: 100%;
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: 30px;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }

        #login .left .title {
            font-size: 36px;
            font-weight: 200;
        }

        #login .left .description {
            font-size: 14px;
            width: 300px;
        }

    #login .login-image {
        bottom: 0;
        position: absolute;
    }

    #login .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 12px;
    }

    #login .form {
        padding: 50px;
    }

        #login .form .title {
            font-size: 14px;
            margin-bottom: 12px;
        }

        #login .form .description {
            font-size: 12px;
        }

        #login .form .user-type {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 15px;
            margin-top: 12px;
            margin-bottom: 24px;
            font-size: 14px;
        }

            #login .form .user-type > div {
                display: flex;
                align-items: center;
                gap: 5px;
                white-space: nowrap;
            }

        #login .form a {
            font-size: 12px;
            color: #006971;
            margin-bottom: 16px;
            display: inline-block;
        }

        #login .form .footer {
            font-size: 12px;
            text-align: center;
            margin-top: 16px;
        }

.items-value-type-1 .item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .items-value-type-1 .item.base {
        align-items: baseline;
    }

    .items-value-type-1 .item .title {
        font-size: 11px;
        color: #586061;
        font-weight: 500;
        min-width: 70px;
    }

    .items-value-type-1 .item .value {
        font-size: 14px;
        font-weight: 500;
    }

.circle {
    width: 40px;
    height: 40px;
}

.sim-details-action {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 3fr 3fr 3fr 1fr;
    grid-gap: 8px;
}

.sim-list-wrapper h3 {
    font-size: 16px;
    font-weight: 700;
}

.sim-list-wrapper p {
    font-size: 14px;
    font-weight: 400;
    margin-top: 16px;
    text-align: justify;
    line-height: 28px;
}

.sim-list-wrapper .image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-sim-list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.text-priority {
    color: #e7e4e4;
    font-size: 12px;
    position: absolute;
    left: 0;
}


/*///////////////////////////////////*/
/*////////// verification  ///////////*/
/*///////////////////////////////////*/

#verification .verification-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#verification .verification-card {
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

#verification .mb-8 {
    margin-bottom: 8px;
}

#verification .mb-16 {
    margin-bottom: 16px;
}

#verification .mb-24 {
    margin-bottom: 24px;
}

#verification .mb-32 {
    margin-bottom: 32px;
}

#verification .img-120 {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: block;
}

#verification .img-240 {
    width: 240px;
    height: auto;
    margin: 0 auto;
    display: block;
}

#verification .title-h1 {
    font-size: 20px;
    font-weight: 700;
    color: #393C3C;
    font-family: Vazirmatn, sans-serif;
}

#verification .title-h2 {
    font-size: 18px;
    font-weight: 700;
    color: #393C3C;
    line-height: 1.4;
    font-family: Vazirmatn, sans-serif;
}

#verification .subtitle-h2 {
    font-size: 16px;
    font-weight: 600;
    color: #393C3C;
    line-height: 1.4;
    font-family: Vazirmatn, sans-serif;
}

#verification .title-step {
    font-size: 12px;
    font-weight: 500;
    color: #171C1D;
    letter-spacing: .5px;
    font-family: Vazirmatn, sans-serif;
}

#verification .paragraph {
    font-size: 14px;
    font-weight: 400;
    color: #171C1D;
    line-height: 1.6;
    font-family: Vazirmatn, sans-serif;
    text-align: justify;
}

#verification .paragraph-center {
    font-size: 14px;
    font-weight: 400;
    color: #171C1D;
    line-height: 1.6;
    font-family: Vazirmatn, sans-serif;
    text-align: center;
}

#verification .help-title {
    font-size: 14px;
    font-weight: 600;
    color: #171C1D;
    font-family: Vazirmatn, sans-serif;
    text-align: right;
}

#verification .help-text {
    line-height: 1.8;
    font-size: 14px;
    color: #171C1D;
    font-family: Vazirmatn, sans-serif;
    text-align: right;
}

#verification .help-block {
    text-align: right;
}

#verification .btn-ts-primary {
    width: 100%;
    height: 48px;
    background: #006971;
    border: 1px solid #006971;
    border-radius: 100px;
    color: #fff;
    font-family: Vazirmatn, sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    display: block;
    line-height: 40px;
}

    #verification .btn-ts-primary:hover {
        background: #005560;
        border-color: #005560;
        color: #fff;
    }

    #verification .btn-ts-primary:disabled {
        background: #ccc;
        border-color: #ccc;
    }

#verification .btn-flex {
    flex: 1;
}

#verification .btn-ts-outline {
    width: 100%;
    height: 48px;
    background: transparent;
    border: 1px solid #006971;
    border-radius: 100px;
    color: #006971;
    font-family: Vazirmatn, sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    display: block;
    line-height: 40px;
}

    #verification .btn-ts-outline:hover {
        background: #f0f8f8;
    }

#verification .icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #F6FAFA;
    border-radius: 16px;
}

#verification .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#verification .icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    #verification .icon-circle img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

#verification .icon-label {
    font-family: Vazirmatn, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #171C1D;
    text-align: center;
    line-height: 1.2;
}


#verification .test-error-btn {
    padding: 8px 16px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

#verification .modal-result,
#verification .modal-help,
#verification .modal-denied, .modal-camera {
    display: none;
}

#verification video {
    width: 100%;
    height: calc(100vh - 320px)
}

#verification .recording-container,
#verification .record-result,
#verification .recording-start {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 24px;
}

#verification .recording-container {
    display: none;
}

    #verification .recording-container .btn-stop-record {
        background: red;
        border-color: red;
    }

    #verification .recording-container .recording-indicator {
        color: red;
    }



@media (max-width: 500px) {

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    header {
        font-size: 12px;
    }

        header .container .contact-us span {
            font-size: 10px;
        }

    footer .footer-logo {
        margin-bottom: 24px;
    }

    footer .container .footer-item:not(:first-child) label {
        margin-top: 30px;
    }

    footer .container .license img {
        margin-bottom: 24px;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    #installment .price-calculation {
        padding: 24px;
    }

    #simFeaturesForOrgHero h1, #installmentForHero h1 {
        font-size: 38px;
    }

    #simFeaturesForOrgHero .container-banner, #installmentForHero .container-banner {
        padding: 22px;
    }

    #phoneNumberSearch .phone-display {
        font-size: 18px;
    }

    #servicesSection .service {
        min-height: auto;
    }

    .custom-select-wrapper {
        min-width: 80px;
    }

    #servicesSection .service > img {
        width: 100%;
    }

    #installment .help .box {
        padding: 36px;
        margin-bottom: 16px;
    }

    #aboutSection .reason3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px;
        background-color: #76bcd4;
        background-image: unset;
    }

    .pagination .prev img, .pagination .next img {
        display: none;
    }

    #mainSection .contentbar .header {
        display: flex;
        gap: 16px;
        margin: 20px 0;
    }

    #mainSection .contentbar .body .card .package-price {
        height: auto;
        padding-bottom: 60px;
    }

    #phoneNumberSearch .prefix-label {
        left: 10px;
    }

    #phoneNumberSearch .number-input:first-of-type {
        margin-left: 20px;
    }

    #phoneNumberSearch .input-wrapper {
        gap: 8px;
    }

    #simFeaturesForOrg .features {
        margin-bottom: 24px;
        padding: 34px;
    }

        #simFeaturesForOrg .features > .image {
            margin-top: 0;
            margin-bottom: -32px;
        }

            #simFeaturesForOrg .features > .image img {
                width: 100%;
            }

    #requestForm .documentations > .image img {
        width: 100%;
    }

    #login {
        min-height: auto;
    }

        #login .left {
            display: none;
        }

    .action-sim-list {
        flex-direction: column;
    }

    .sim-details-action {
        grid-template-columns: auto auto;
        display: block;
    }

    #offer .container {
        padding: 12px;
        top: 0;
    }

    .offer-cart-success-wrapper {
        padding: 12px;
    }

        .offer-cart-success-wrapper .container {
            padding: 24px;
        }

    #offer .container .container-request {
        padding: 0;
    }

    #offer .container .request-offer {
        top: 0;
        padding: 16px;
    }


    #offer .container .image {
        padding: 0;
    }

    #offer .number-input {
        width: 20px;
        margin-left: 4px;
    }

    .contact-warpper .container .box {
        padding: 48px 24px;
    }

    #aboutus .container-banner {
        padding: 24px;
    }

    #aboutus .container.features {
        padding: 48px 24px;
    }

    #requestForm .container {
        padding: 24px;
    }

    .add-to-cart-warpper .container .box {
        padding: 34px 16px;
    }

    #profile .banner {
        padding: 0 24px;
    }

    #profile .nav-pills {
        margin-right: 0;
        padding-bottom: 5px;
    }

    #profile .change-password .form {
        padding: 0 12px;
    }

    #profile .profile-card {
        padding: 12px;
    }

    #profile .upload-card {
        padding: 30px 20px;
    }

        #profile .upload-card .header h3 {
            font-size: 24px;
        }

        #profile .upload-card .upload-area {
            padding: 30px 15px;
        }

    #article article {
        padding: 24px;
    }

        #article article .sidebar {
            border-bottom: 1px solid #ccc;
            border-left: 0;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }
}