/* About Page Mobile Responsive Styles */

/* Fix viewport and layout consistency */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

.container-xxl {
    max-width: 100%;
    width: 100%;
}

/* Prevent horizontal scroll */
.row {
    margin-left: 0;
    margin-right: 0;
}

.row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* Testimonials modern design */
.about-testimonials .testimonials-grid {
    align-items: stretch;
}

.about-testimonials .testimonial-card {
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    will-change: transform;
}

.about-testimonials .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: rgba(207, 134, 75, 0.35);
}

.about-testimonials .testimonial-text {
    line-height: 1.9;
    color: #444;
}

.about-testimonials .rating .fa-star {
    margin-inline-start: 2px;
}

/* Mobile tweaks for testimonials */
@media (max-width: 768px) {
    .about-testimonials .testimonial-card {
        padding: 1rem 1.25rem !important;
    }
    .about-testimonials .testimonial-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .about-testimonials .testimonial-card {
        padding: 0.9rem 1rem !important;
        border-radius: 14px !important;
    }
    .about-testimonials .testimonial-text {
        font-size: 0.92rem;
    }
}

/* Hero Section Mobile */
@media (max-width: 768px) {
    .about-hero {
        min-height: 300px !important;
        padding: 2rem 0 !important;
    }
    
    .about-hero h1 {
        font-size: 2rem !important;
    }
    
    .about-hero .lead {
        font-size: 1rem !important;
    }
    
    .about-hero img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Mission Section Mobile */
@media (max-width: 768px) {
    .about-mission .col-lg-6:first-child {
        margin-bottom: 2rem;
    }
    
    .about-mission img {
        max-width: 100%;
        height: auto;
    }
    
    .about-mission .lead {
        font-size: 1rem;
    }
    
    .about-mission .p-3 {
        padding: 1rem !important;
    }
    
    .about-mission .small {
        font-size: 0.85rem;
    }
}

/* Stats Section Mobile */
@media (max-width: 768px) {
    .about-stats .stat-card {
        padding: 1rem !important;
    }
    
    .about-stats .stat-number {
        font-size: 1.25rem !important;
    }
    
    .about-stats .fa-2x {
        font-size: 1.25rem !important;
    }
    
    .about-stats .small {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .about-stats .stat-card {
        padding: 0.75rem !important;
    }
    
    .about-stats .stat-number {
        font-size: 1rem !important;
    }
    
    .about-stats .fa-2x {
        font-size: 1rem !important;
    }
    
    .about-stats .small {
        font-size: 0.65rem;
    }
}

/* Testimonials Section Mobile */
@media (max-width: 768px) {
    .about-testimonials .section-header h2 {
        font-size: 2rem !important;
    }
    
    .about-testimonials .lead {
        font-size: 1rem;
    }
    
    .about-testimonials .testimonial-content {
        padding: 2rem 1.5rem !important;
    }
    
    .about-testimonials .testimonial-image img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .about-testimonials .rating .fa-star {
        font-size: 0.9rem;
    }
    
    .about-testimonials .lead {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .about-testimonials .testimonial-content {
        padding: 1.5rem 1rem !important;
    }
    
    .about-testimonials .testimonial-image img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .about-testimonials .rating {
        margin-bottom: 1rem !important;
    }
    
    .about-testimonials .rating .fa-star {
        font-size: 0.8rem;
    }
}

/* Contact Section Mobile */
@media (max-width: 768px) {
    .contact-section .col-lg-6:last-child {
        margin-top: 2rem;
    }
    
    .contact-section .contact-form-box {
        padding: 1.5rem !important;
    }
    
    .contact-section .form-floating {
        margin-bottom: 1rem;
    }
    
    .contact-section .map-container {
        height: 250px !important;
    }
    
    .contact-section iframe {
        min-height: 250px !important;
        height: 250px !important;
    }
}

@media (max-width: 576px) {
    .contact-section .contact-form-box {
        padding: 1rem !important;
    }
    
    .contact-section .btn {
        padding: 0.75rem !important;
        font-size: 0.9rem;
    }
    
    .contact-section .map-container {
        height: 200px !important;
    }
    
    .contact-section iframe {
        min-height: 200px !important;
        height: 200px !important;
    }
}

/* Team Section Mobile */
@media (max-width: 768px) {
    .about-org .section-header h2 {
        font-size: 2rem !important;
    }
    
    .about-org .lead {
        font-size: 1rem;
    }
    
    .about-org .team-card {
        padding: 1rem !important;
    }
    
    .about-org .team-image img {
        width: 70px !important;
        height: 70px !important;
    }
    
    .about-org .team-social {
        display: none;
    }
}

@media (max-width: 576px) {
    .about-org .team-card {
        padding: 0.75rem !important;
    }
    
    .about-org .team-image img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .about-org h6 {
        font-size: 0.85rem;
    }
    
    .about-org .small {
        font-size: 0.7rem;
    }
}

/* General Mobile Improvements */
@media (max-width: 768px) {
    .container-xxl {
        padding: 0 1rem;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .section-header {
        margin-bottom: 2rem !important;
    }
    
    .section-header h2 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word;
    }
    
    .section-header .lead {
        font-size: 1rem;
        word-wrap: break-word;
    }
    
    .display-5 {
        font-size: 2rem !important;
    }
    
    .display-3 {
        font-size: 2.5rem !important;
    }
    
    /* Ensure consistent width */
    section {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 576px) {
    .container-xxl {
        padding: 0 0.75rem;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .section-header {
        margin-bottom: 1.5rem !important;
    }
    
    .section-header h2 {
        font-size: 1.75rem !important;
        word-wrap: break-word;
    }
    
    .display-5 {
        font-size: 1.75rem !important;
    }
    
    .display-3 {
        font-size: 2rem !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem;
    }
    
    /* Prevent specific elements from exceeding viewport width */
    /* Exclude hero section elements from max-width constraint */
    section:not(.hero-section) *:not(.hero-bg):not(.hero-overlay):not(.hero-slide):not(.hero-carousel) {
        max-width: 100%;
    }
    
    img:not(.hero-bg img), iframe, video, embed, object {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Hero section should maintain full width */
    .hero-section,
    .hero-carousel,
    .hero-slide,
    .hero-bg,
    .hero-overlay {
        max-width: none !important;
        width: 100% !important;
    }
}

/* RTL Support for Mobile */
@media (max-width: 768px) {
    [dir="rtl"] .about-mission .col-lg-6:first-child {
        margin-bottom: 2rem;
    }
    
    [dir="rtl"] .contact-section .col-lg-6:last-child {
        margin-top: 2rem;
    }
    
    [dir="rtl"] .team-social {
        right: 0;
        left: auto;
    }
}

/* Carousel Mobile Improvements */
@media (max-width: 768px) {
    .testimonials-carousel .owl-dots {
        margin-top: 1rem;
    }
    
    .testimonials-carousel .owl-dot {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }
    
    .testimonials-carousel .owl-nav {
        display: none;
    }
}

/* Animation adjustments for mobile */
@media (max-width: 768px) {
    [data-aos] {
        animation-duration: 0.6s !important;
    }
    
    [data-aos-delay] {
        animation-delay: 0.2s !important;
    }
}