:target { scroll-margin-top: 72px; }
@media (max-width: 1023px) {
    :target { scroll-margin-top: 130px; }
}

:root { --font-vazir: 'Vazirmatn', sans-serif; }
html { font-family: var(--font-vazir); }

.max-w-article { max-width: 1066px; width: 100%; }

.about-rich-text div, .about-rich-text p, .about-rich-text {
    text-align: justify;
    text-justify: inter-word;
}

.bg-geo-bg-main { background-color: #111827; } 
.bg-geo-primary { background-color: #1F2937; } 
.text-geo-secondary { color: #06B6D4; } 
.bg-geo-secondary { background-color: #06B6D4; } 
.text-geo-accent { color: #F59E0B; } 
.bg-geo-accent { background-color: #F59E0B; }
.text-geo-text { color: #E5E7EB; }
.border-geo-secondary { border-color: #06B6D4; }
.border-geo-accent { border-color: #F59E0B; }
.border-geo-text { border-color: #E5E7EB; }

.article-content { text-align: justify; }
.article-content h2 { font-size: 1.875rem; font-weight: 800; margin-top: 2.5rem; margin-bottom: 1rem; color: #E5E7EB; border-bottom: 2px solid #1F2937; padding-bottom: 0.5rem; text-align: right; }
.article-content h3 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #06B6D4; text-align: right; }
.article-content p { margin-bottom: 1.5rem; line-height: 2; font-size: 1.1rem; color: #D1D5DB; }



::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1F2937; }
::-webkit-scrollbar-thumb { background: #06B6D4; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #00A3C4; }


.hidden-div {
  display: none;
}

.hidden-div {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
}

#answer:not(.hidden-div) {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@media (max-width: 1023px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    main {
        padding-bottom: 20px;
    }
}

@media (max-width: 1023px) {
    .mt-bmobile-custom {
        margin-top: 250px; 
    }
}

@media (max-width: 1023px) {
    .mt-hmobile-custom {
        margin-top: 60px; 
    }
}

.custom-hero-padding {
    padding-top: 170px;
    padding-bottom: 155px;
}

.b-mt {
    margin-top: 160px;
}

@media (max-width: 1023px) {
    .custom-hero-padding {
        padding-top: 0px;
        padding-bottom: 100px;
    }
}