@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: normal;
    src: url("/AdminTemplate/assets/fonts/1-IranSansWeb/IRANSansWeb.eot");
    src: url("/AdminTemplate/assets/fonts/1-IranSansWeb/IRANSansWeb.eot?#iefix") format("embedded-opentype"), url("/AdminTemplate/assets/fonts/1-IranSansWeb/IRANSansWeb.woff") format("woff"), url("/AdminTemplate/assets/fonts/1-IranSansWeb/IRANSansWeb.woff") format("woff"), url("/AdminTemplate/assets/fonts/1-IranSansWeb/IRANSansWeb.ttf") format("truetype");
}

body {
    font-family: 'Vazir' !important;
}

.testimonialtel {
    margin-bottom: 0;
}
.phone-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center; /* Ensure text is centered */
    margin-bottom: 3rem;
    width: 100%; /* Full width of the container */
}

.phone-item {
    display: flex;
    align-items: center; /* هم‌سطح کردن آیکون و متن */
    justify-content: flex-start; /* چینش به سمت چپ */
    gap: 1rem; /* فاصله بین آیکون و متن */
}

.phone-icon {
    width: 4rem;
    height: 4rem;
    background: #00000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
    margin-left: 1rem; /* تنظیم فاصله اضافی بین آیکون و متن */
    cursor: pointer;
}


    .phone-icon i {
        font-size: 2rem;
        color: #777;
    }

.phone-number {
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    width: auto;
    cursor: pointer;
}

    .phone-number:hover {
        color: #0073b2;
    }

.phone-icon:hover {
    background: #25D366;
}

    .phone-icon:hover i {
        color: white;
    }

.phone-items ul {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the list items */
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%; /* Full width */
    max-width: 300px; /* Optional: limit maximum width */
}


.phone-item {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    gap: 2rem;
    width: 100%; /* Full width of the container */
}

.phone-icon {
    margin-left: 0rem; /* فاصله بین آیکون و متن */
}

    .phone-icon a.hdr-Gmail {
        background: #00000000; /* پس‌زمینه سفید */
        color: #EA4335; /* رنگ آیکون قرمز */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid #eeeeee; /* حاشیه ظریف برای تمیزتر شدن */
        transition: all 0.3s ease; /* انیمیشن نرم */
    }

        .phone-icon a.hdr-Gmail:hover {
            background: #EA4335; /* رنگ قرمز در حالت hover */
            color: #ffffff; /* رنگ آیکون سفید در حالت hover */
            transform: scale(1.1); /* کمی بزرگ‌تر شدن */
        }


.phone-icon {
    background: #00000000; /* پس‌زمینه سفید */
    color: #25D366; /* رنگ آیکون سبز (مشابه واتساپ) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid #eeeeee; /* حاشیه ظریف */
    transition: all 0.3s ease; /* انیمیشن نرم */
}

    .phone-icon:hover {
        background: #25D366; /* سبز در حالت hover */
        color: #ffffff; /* آیکون سفید در حالت hover */
        transform: scale(1.1); /* کمی بزرگ‌تر شدن */
    }

    .phone-icon i {
        font-size: 1.5rem; /* اندازه آیکون */
    }

.phone-number {
    font-size: 1.2rem; /* اندازه فونت کمی بزرگ‌تر */
    color: #333; /* رنگ مشکی نزدیک به مشکی خالص */
    text-decoration: none;
    font-weight: bold; /* ضخیم کردن فونت */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* افکت‌های نرم */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* سایه ملایم */
    cursor: pointer;
    font-feature-settings: "zero" 1; /* استفاده از اعداد صفر استاندارد */
    direction: ltr; /* جهت چپ به راست برای شماره تلفن */
    display: inline-block;
    text-align: right;
    unicode-bidi: bidi-override;
}

    .phone-number:hover {
        color: #000; /* رنگ مشکی خالص در حالت هاور */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* سایه تیره‌تر در حالت هاور */
        text-decoration: underline; /* خط زیر شماره هنگام هاور */
    }
/* Resetting default styles */

.header-top-social ul li .hdr-telegram:hover {
    background: #1da1f2;
}

.header-top-social ul li .hdr-telegram:hover {
    background: #62bbf1;
}

.header-top-social ul li .hdr-instagram:hover {
    background: #e44a73;
}

.header-top-social ul li .hdr-linkedin:hover {
    background: #0073b2;
}

.header-top-social ul li .hdr-Gmail:hover {
    background: #ff6a00;
}

.header-top-social ul li.list-inline-item:not(:last-child) {
    margin-right: 4px;
}



.header-top-social ul {
    display: initial;
}


    .header-top-social ul li a:hover {
        color: #fff;
        border: 0;
    }


    .header-top-social ul li .hdr-facebook:hover {
        background: #1da1f2;
    }
    .header-top-social ul li .hdr-twitter:hover {
        background: #1a1a1a; /* رنگ مشکی تیره برای کنتراست بالا */
        color: #1DA1F2; /* رنگ آبی توییتر برای متن */
    }
    .header-top-social ul li .hdr-telegram:hover {
        background: #62bbf1;
    }

    .header-top-social ul li .hdr-instagram:hover {
        background: #e44a73;
    }

    .header-top-social ul li .hdr-linkedin:hover {
        background: #0073b2;
    }

    .header-top-social ul li .hdr-Gmail:hover {
        background: #ff6a00;
    }

    .header-top-social ul li.list-inline-item:not(:last-child) {
        margin-right: 4px;
    }

.header-top-social ul {
    display: initial;
}

    .header-top-social ul li a {
        width: 3.5rem; /* افزایش عرض */
        height: 3.5rem; /* افزایش ارتفاع */
        text-align: center;
        display: flex;
        border-radius: 100%;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem; /* افزایش سایز آیکون */
        background: #f7f7f7;
        border: 1px solid #eeeeee;
        color: #777;
        transition: all 0.3s ease; /* اضافه کردن انیمیشن نرم */
    }

.social-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    margin-bottom: 2rem;
}



.header-top-social {
    display: flex;
    justify-content: center;
    
}

    .header-top-social ul {
        display: flex;
        gap: 1rem; /* افزایش فاصله بین آیکون‌ها */
        padding: 0;
        margin: 0;
        list-style: none;
    }

        /* استایل hover برای تعامل بهتر */
        .header-top-social ul li a:hover {
            transform: scale(1.1); /* کمی بزرگتر شدن موقع hover */
        }

.phone-header {
    text-align: left;
    margin-bottom: 20px;
}


.phone-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}

.phone-item {
    display: flex;
    align-items: center; /* هم‌سطح کردن آیکون و متن */
    justify-content: flex-start; /* چینش به سمت چپ */
    gap: 1rem; /* فاصله بین آیکون و متن */
}

.phone-icon {
    width: 4rem;
    height: 4rem;
    background: #00000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
    margin-left: 1rem; /* تنظیم فاصله اضافی بین آیکون و متن */
    cursor: pointer;
}


    .phone-icon i {
        font-size: 2rem;
        color: #777;
    }

.phone-number {
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    width: auto;
    cursor: pointer;
}

    .phone-number:hover {
        color: #0073b2;
    }

.phone-icon:hover {
    background: #25D366;
}

    .phone-icon:hover i {
        color: white;
    }

.phone-items ul {
    display: flex;
    flex-direction: column; /* برای چیدمان عمودی */
    gap: 2rem; /* فاصله بین آیتم‌ها */
    padding: 0;
    margin: 0;
    list-style: none;
}

.phone-item {
    display: flex;
    justify-content: flex-start; /* چینش داخلی آیتم */
    align-items: center;
    gap: 2rem; /* فاصله بین آیکون و متن */
}

.phone-icon {
    margin-left: 0rem; /* فاصله بین آیکون و متن */
}

    .phone-icon a.hdr-Gmail {
        background: #00000000; /* پس‌زمینه سفید */
        color: #EA4335; /* رنگ آیکون قرمز */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid #eeeeee; /* حاشیه ظریف برای تمیزتر شدن */
        transition: all 0.3s ease; /* انیمیشن نرم */
    }

        .phone-icon a.hdr-Gmail:hover {
            background: #EA4335; /* رنگ قرمز در حالت hover */
            color: #ffffff; /* رنگ آیکون سفید در حالت hover */
            transform: scale(1.1); /* کمی بزرگ‌تر شدن */
        }


.phone-icon {
    background: #00000000; /* پس‌زمینه سفید */
    color: #25D366; /* رنگ آیکون سبز (مشابه واتساپ) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid #eeeeee; /* حاشیه ظریف */
    transition: all 0.3s ease; /* انیمیشن نرم */
}

    .phone-icon:hover {
        background: #25D366; /* سبز در حالت hover */
        color: #ffffff; /* آیکون سفید در حالت hover */
        transform: scale(1.1); /* کمی بزرگ‌تر شدن */
    }

    .phone-icon i {
        font-size: 1.5rem; /* اندازه آیکون */
    }

.phone-number {
    font-size: 1.2rem; /* اندازه فونت کمی بزرگ‌تر */
    color: #333; /* رنگ مشکی نزدیک به مشکی خالص */
    text-decoration: none;
    font-weight: bold; /* ضخیم کردن فونت */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* افکت‌های نرم */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* سایه ملایم */
    cursor: pointer;
}

    .phone-number:hover {
        color: #000; /* رنگ مشکی خالص در حالت هاور */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* سایه تیره‌تر در حالت هاور */
        text-decoration: underline; /* خط زیر شماره هنگام هاور */
    }
.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 3rem;
}

.phone-section {
    width: 50%;
    text-align: left;
}

.social-section {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    height:4rem;
}

.header-top-social ul {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}
@media screen and (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        align-items: center;
    }

    .phone-section,
    .social-section {
        width: 100%;
        text-align: center;
        margin-bottom: 2rem;
    }

    .header-top-social ul {
        justify-content: center;
    }

    .phone-items ul {
        align-items: center;
    }

    .phone-item {
        justify-content: center;
    }
}
/* حالت پیش‌فرض (لایت مود) */
.phone-number {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.phone-icon i {
    color: #777;
}

/* تنظیمات برای دارک مود */
body.dark {
    /* وقتی کلاس dark به body اضافه می‌شود */
    --text-dark: #ffffff;
    --icon-dark: #cccccc;
}

    body.dark .phone-number {
        color: #ffffff;
    }

    body.dark .phone-icon i {
        color: #cccccc;
    }

    body.dark .testimonialtel {
        color: #ffffff;
    }

    /* برای آیکون جیمیل */
    body.dark .phone-icon a.hdr-Gmail {
        color: #EA4335; /* همان رنگ قرمز جیمیل را حفظ می‌کنیم */
    }

    /* افکت هاور در دارک مود */
    body.dark .phone-number:hover {
        color: #0073b2;
    }