@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* Basic Typography and Direction */
html, body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif !important;
}

body, h1, h2, h3, h4, h5, h6, .nav-link, button, input, select, textarea, .btn, p, span, li, a, .dropdown-item {
    font-family: 'Cairo', sans-serif !important;
}

/* 1. Hero Slide Carousel Caption & Clip-path */
#hero-slide .carousel-caption {
    clip-path: polygon(100% 100%, 100% 120px, 0 100%) !important;
    right: 0 !important;
    left: auto !important;
    text-align: right !important;
    padding: 220px 40px 50px 140px !important;
    min-width: 600px !important;
}

#hero-slide .carousel-caption h1 {
    color: var(--secondary-color) !important;
    text-align: right !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

#hero-slide .carousel-caption p {
    color: var(--secondary-color) !important;
    text-align: right !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

#hero-slide .carousel-indicators {
    margin-left: 0 !important;
    margin-right: 22px !important;
}

@media screen and (max-width: 768px) {
    #hero-slide .carousel-caption {
        min-width: 100% !important;
        padding: 40px 20px !important;
        clip-path: none !important;
    }
}

/* 2. Decorative Circles Inverting for RTL */
.volunteer-section::after {
    right: auto !important;
    left: -80px !important;
}

.cta-section::before {
    left: auto !important;
    right: -30px !important;
}

.cta-section::after {
    right: auto !important;
    left: 0 !important;
}

.testimonial-section::before {
    left: auto !important;
    right: -30px !important;
}

.testimonial-section::after {
    right: auto !important;
    left: -80px !important;
}

/* 3. Navbar & Header Adjustments */
.navbar-brand img {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

.site-header .social-icon {
    text-align: left !important;
}

.site-header .social-icon-link {
    margin-right: 0 !important;
    margin-left: 15px !important;
}

/* 4. Search Form Button & Input Position */
.search-form .form-control {
    padding-right: 15px !important;
    padding-left: 50px !important;
}

.search-form button[type="submit"] {
    right: auto !important;
    left: 0 !important;
    z-index: 6;
}

/* 5. Volunteer File Input & Icons */
.input-group-file i {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* 6. Donate Form Frequency Radii and Padding */
.donate-form .form-check-group-donation-frequency {
    padding-left: 0 !important;
    padding-right: 12px !important;
}

.form-check-group-donation-frequency + .form-check-group-donation-frequency {
    padding-left: 12px !important;
    padding-right: 0 !important;
}

#DonationFrequencyOne {
    border-radius: .25rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#DonationFrequencyMonthly {
    border-radius: .25rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 7. News Items & Tags RTL Margins */
.news-block-two-col-image-wrap {
    margin-right: 0 !important;
    margin-left: 20px !important;
}

.tags-block-link, 
.news-category-block .category-block-link,
.footer-menu-link {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* 8. Progress Bars Direction */
.custom-progress {
    direction: ltr;
}

/* 9. Footer Text Margins */
.copyright-text {
    margin-right: 0 !important;
    margin-left: 30px !important;
}

.custom-text-box-icon {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* 10. RTL Pagination */
.pagination-custom {
    direction: rtl !important;
}

/* 11. Global Typography & Font Size Refinements */
html {
    font-size: 16px;
}

body {
    font-size: 16px;
    line-height: 1.6;
}

h1, .h1 { font-size: 2.1rem !important; }
h2, .h2 { font-size: 1.75rem !important; }
h3, .h3 { font-size: 1.4rem !important; }
h4, .h4 { font-size: 1.2rem !important; }
h5, .h5 { font-size: 1.05rem !important; }
h6, .h6 { font-size: 0.9rem !important; }

/* News Block & Cards Typography */
.news-block-title h4, 
.news-block-title h4 a {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.news-block-two-col-info h6,
.news-block-two-col-info h6 a {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.news-block-body p {
    font-size: 0.9rem !important;
    color: #6c757d;
}

.news-block-date p, 
.news-block-author p, 
.news-block-comment p {
    font-size: 0.82rem !important;
}

.category-block-link {
    font-size: 0.88rem !important;
}

/* RTL Desktop Navbar Fix */
@media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        white-space: nowrap !important;
    }
}

/* RTL Mobile Responsive Fine-tuning */
@media screen and (max-width: 768px) {
    #hero-slide .carousel-caption h1 {
        font-size: 1.6rem !important;
    }
    #hero-slide .carousel-caption p {
        font-size: 0.92rem !important;
    }
    .site-header p {
        justify-content: center !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .navbar-brand img {
        margin-left: 6px !important;
        max-height: 45px !important;
    }
}