html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Vazir', sans-serif;
    text-align: right; /* متن‌ها راست‌چین شوند */
}

.hero {
    background-color: #d7e9fb;
    padding: 20px 0;
}

.navbar-nav .nav-link {
    color: #000;
    margin: 0 10px;
}

.btn-primary {
    background-color: #2490eb;
    border-color: #2490eb;
}

.btn-outline-primary {
    border-color: #2490eb;
    color: #2490eb;
}

    .btn-outline-primary:hover {
        background-color: #2490eb;
        color: #fff;
    }

.hero-content {
    padding: 70px 0;
}

.hero-image {
    max-width: 100%;
    height: auto;
}

.mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hero-content {
        text-align: center;
        padding-top:0;
    }

    .hero-image {
        max-width: 80%
    }

    .hero-buttons {
        justify-content: center;
    }
    /* آیکون تماس کاملاً گرد */
    .mobile-nav .btn-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* آیکون منوی موبایل بدون border و background */
    .mobile-nav .fa-bars {
        font-size: 24px;
        color: #000;
        cursor: pointer;
        background: none;
        border: none;
    }
}
/* منو در دسکتاپ وسط صفحه */
.desktop-nav .navbar-nav {
    margin: 0 auto;
}
/* رنگ عنوان با رنگ آبی دکمه‌ها */
.hero-content h1 {
    color: #2490eb;
}

/* کلاس گرادیان */
.gradient-text {
    background: linear-gradient(to left, #0a2b4e, #a8d2f6); /* گرادیان از راست به چپ */
    -webkit-background-clip: text; /* اعمال گرادیان به متن */
    background-clip: text;
    color: transparent; /* متن را شفاف می‌کنیم تا گرادیان دیده شود */
    font-family: 'Vazirmatn', sans-serif; /* فونت وزیر */
    font-size: 2rem; /* اندازه فونت */
    font-weight: bold; /* ضخامت فونت */
}




/* استایل‌دهی به فلش پیش‌فرض */
.accordion-button::after {
    background-image: none; /* حذف آیکن پیش‌فرض */
    width: 30px;
    height: 30px;
    border: 1px solid #2490eb; /* Border آبی */
    border-radius: 50%; /* دایره‌ای کردن */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2490eb; /* رنگ آیکن */
    font-family: "Font Awesome 5 Free"; /* استفاده از فونت آیکن */
    font-weight: 900;
    content: "\f078"; /* آیکن فلش پایین (پیش‌فرض) */
    margin-right: auto;
    margin-left: 0;
    transition: transform 0.3s ease; /* انیمیشن چرخش */
}
/* استایل‌دهی به فلش در حالت باز */
.accordion-button:not(.collapsed)::after {
    background-image: none;
    content: "\f077"; /* آیکن فلش بالا */
    background-color: #2490eb; /* پس‌زمینه شفاف */
    color: #fff; /* رنگ آیکن */
    border-color: #2490eb; /* Border آبی */
    transform: rotate(0deg); /* چرخش به حالت بالا */
}
/* حذف سایه‌های پیش‌فرض */
.accordion-button:focus {
    box-shadow: none;
}






.footer {
    background-color: #1a73e8; /* رنگ پس‌زمینه فوتر */
    color: #fff; /* رنگ متن سفید */
    padding: 40px 0;
}

    .footer a {
        color: #fff; /* رنگ لینک‌ها سفید */
        text-decoration: none; /* حذف زیرخط لینک‌ها */
    }

        .footer a:hover {
            text-decoration: underline; /* زیرخط لینک‌ها هنگام هاور */
        }

    .footer .divider {
        border-top: 1px solid #fff; /* خط جداکننده سفید */
        margin-top: 20px;
        padding-top: 20px;
    }

    .footer .social-icons a {
        font-size: 24px; /* اندازه آیکن‌ها */
        margin: 0 10px; /* فاصله بین آیکن‌ها */
        color: #fff; /* رنگ آیکن‌ها سفید */
    }






/* دکمه بازگشت به بالا */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #2490eb; /* رنگ دایره آبی */
    border: 2px solid #fff; /* border سفید */
    border-radius: 50%; /* دایره‌ای کردن */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* رنگ فلش سفید */
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* سایه ملایم */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
}

    .back-to-top:hover {
        background-color: #1a6bb0; /* تغییر رنگ دایره هنگام هاور */
    }









/* استایل سکشن */
.custom-section {
    background-image: url('/img/bg.svg'); /* عکس پس‌زمینه */
    background-position: center; /* مرکزیت عکس */
    padding: 100px 0; /* فاصله داخلی */
    position: relative; /* برای قرارگیری عکس app.svg */
    background-repeat: no-repeat;
    background-position: right;
}
/* استایل کارت */
.custom-card {
    background-color: #fff; /* پس‌زمینه سفید */
    padding: 40px;
    border-radius: 15px; /* گوشه‌های گرد */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* سایه ملایم */
    position: relative; /* برای قرارگیری عکس app.svg */
    margin: 0 auto; /* مرکزیت کارت */
}
    /* استایل عکس app.svg */
    .custom-card img {
        position: absolute;
        top: -30px; /* خارج از کارت */
        left: -30px; /* خارج از کارت */
        width: 100px; /* اندازه عکس */
        height: auto;
    }
    /* استایل دکمه */
    .custom-card .btn {
        background-color: #2490eb; /* رنگ آبی */
        color: #fff; /* رنگ متن سفید */
        padding: 10px 20px;
        border-radius: 5px; /* گوشه‌های گرد */
        text-decoration: none;
        display: inline-block;
        margin-top: 20px;
    }


@media (max-width: 768px) {
    .custom-section {
        background-size: cover;
        background-position: center; /* مرکزیت عکس */
    }
}