/* ===== ABOUT PAGE RESPONSIVE STYLES ===== */
/* Comprehensive responsive design for About Us page */

/* ===== CONTAINER AND LAYOUT RESPONSIVENESS ===== */
@media screen and (max-width: 1200px) {
    .container {
        max-width: 95% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .modern-hero .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .modern-about > .container > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 2rem !important;
    }
    
    .choose-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* ===== HERO SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .modern-hero {
        min-height: 80vh !important;
        padding: 100px 0 60px !important;
        background-attachment: scroll !important;
    }
    
    .hero-grid {
        display: block !important;
        text-align: center !important;
    }
    
    .hero-content {
        margin-bottom: 2rem !important;
    }
    
    .hero-content h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Hero buttons responsive */
    .hero-content > div:nth-child(4) {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .hero-content > div:nth-child(4) a {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 1rem 2rem !important;
    }
    
    /* Hero statistics responsive */
    .hero-content > div:nth-child(5) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .hero-image {
        margin-top: 2rem !important;
    }
    
    .hero-image > div:nth-child(2) {
        bottom: -15px !important;
        right: -15px !important;
        max-width: 200px !important;
        padding: 1.5rem !important;
    }
}

/* ===== ABOUT SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .modern-about {
        padding: 80px 0 !important;
    }
    
    .section-header h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .section-header p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .about-features {
        gap: 1rem !important;
    }
    
    .feature-item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.2rem !important;
    }
    
    .feature-item > div:first-child {
        margin-bottom: 1rem !important;
    }
    
    .about-image > div:nth-child(2) {
        bottom: -20px !important;
        left: -20px !important;
        max-width: 220px !important;
        padding: 1.5rem !important;
    }
    
    .about-image > div:nth-child(2) > div:nth-child(2) {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ===== VALUES SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .modern-values {
        padding: 80px 0 !important;
    }
    
    .modern-values .container > div:first-child {
        margin-bottom: 3rem !important;
    }
    
    .modern-values .container > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .value-card {
        padding: 2rem 1.5rem !important;
        border-radius: 20px !important;
    }
    
    .value-card > div:first-child {
        width: 60px !important;
        height: 60px !important;
        border-radius: 15px !important;
    }
    
    .value-card > div:first-child i {
        font-size: 1.5rem !important;
    }
    
    .value-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .value-card p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

/* ===== SERVICES SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .services {
        padding: 80px 0 !important;
    }
    
    .services-showcase {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .service-card-enhanced {
        max-width: 100% !important;
    }
    
    .service-image-enhanced {
        height: 200px !important;
    }
    
    .service-content-enhanced {
        padding: 1.5rem !important;
    }
    
    .service-features-enhanced {
        display: none !important; /* Hide on mobile for cleaner look */
    }
    
    .service-btn-enhanced {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ===== TEAM SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .team {
        padding: 80px 0 !important;
    }
    
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .team-member {
        border-radius: 20px !important;
    }
    
    .member-image {
        height: 250px !important;
    }
    
    .member-info {
        padding: 1.5rem !important;
    }
    
    .member-info h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .member-role {
        font-size: 0.9rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .member-description {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    .member-specialties {
        gap: 0.4rem !important;
    }
    
    .specialty {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.6rem !important;
    }
}

/* ===== WHY CHOOSE US SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .why-choose-us {
        padding: 80px 0 !important;
    }
    
    .choose-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .choose-card {
        padding: 2rem 1.5rem !important;
        border-radius: 15px !important;
    }
    
    .choose-icon {
        width: 60px !important;
        height: 60px !important;
        border-radius: 12px !important;
        margin-bottom: 1.2rem !important;
    }
    
    .choose-icon i {
        font-size: 1.5rem !important;
    }
    
    .choose-card h4 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .choose-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

/* ===== CTA SECTION RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .cta-section {
        padding: 80px 0 !important;
    }
    
    .cta-content {
        text-align: center !important;
    }
    
    .cta-text h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .cta-text p {
        font-size: 1.1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .cta-buttons a {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 1rem 2rem !important;
    }
}

/* ===== FOOTER RESPONSIVENESS ===== */
@media screen and (max-width: 768px) {
    .compact-footer .container {
        padding: 2rem 1rem 1rem !important;
    }
    
    .compact-footer .container > div:first-child {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    
    .compact-footer .container > div:nth-child(2) {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .compact-footer .container > div:nth-child(2) > div:first-child {
        display: flex !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    .compact-footer .container > div:nth-child(2) input {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .compact-footer .container > div:last-child > div:first-child {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .compact-footer .container > div:last-child > div:last-child {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* ===== EXTRA SMALL SCREENS ===== */
@media screen and (max-width: 480px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Hero section adjustments */
    .modern-hero {
        padding: 80px 0 40px !important;
        min-height: 70vh !important;
    }
    
    .hero-content h1 {
        font-size: 1.8rem !important;
        line-height: 1.1 !important;
    }
    
    .hero-content p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    .hero-content > div:nth-child(5) {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }
    
    .hero-content > div:nth-child(5) > div {
        padding: 0.8rem !important;
        border-radius: 12px !important;
    }
    
    .hero-content > div:nth-child(5) > div > div:first-child {
        font-size: 1.8rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .hero-content > div:nth-child(5) > div > div:last-child {
        font-size: 0.75rem !important;
    }
    
    /* Other sections adjustments */
    .modern-about, .modern-values, .team, .why-choose-us, .cta-section {
        padding: 60px 0 !important;
    }
    
    .section-header {
        margin-bottom: 2.5rem !important;
    }
    
    .section-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .section-header p {
        font-size: 0.9rem !important;
    }
    
    /* Compact footer on small screens */
    .compact-footer .container > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .compact-footer .container > div:nth-child(2) h4 {
        font-size: 1rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .compact-footer .container > div:nth-child(2) p {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ===== FLOATING ANIMATIONS ===== */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-20px); 
    }
}

@keyframes floating-animation {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    33% { 
        transform: translateY(-10px) rotate(2deg); 
    }
    66% { 
        transform: translateY(-5px) rotate(-2deg); 
    }
}

.floating-animation {
    animation: floating-animation 6s ease-in-out infinite;
}

/* ===== FOCUS STATES FOR ACCESSIBILITY ===== */
@media screen and (max-width: 768px) {
    .nav-link:focus,
    .dropdown-link:focus,
    .service-btn-enhanced:focus,
    .cta-buttons a:focus {
        outline: 2px solid #D4AF37 !important;
        outline-offset: 2px !important;
        border-radius: 4px !important;
    }
    
    .hamburger:focus {
        outline: 2px solid #D4AF37 !important;
        outline-offset: 2px !important;
        border-radius: 8px !important;
    }
}

/* ===== HOVER EFFECTS FOR TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    .value-card:hover,
    .team-member:hover,
    .choose-card:hover,
    .service-card-enhanced:hover {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    }
    
    .nav-link:hover,
    .dropdown-link:hover {
        background: rgba(212, 175, 55, 0.1) !important;
        color: #D4AF37 !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .hamburger,
    .nav-menu,
    .floating-animation,
    .cta-section,
    .compact-footer {
        display: none !important;
    }
    
    .modern-hero,
    .modern-about,
    .modern-values,
    .team,
    .why-choose-us {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .hero-content h1,
    .section-header h2,
    .value-card h3,
    .team-member h3,
    .choose-card h4 {
        color: black !important;
    }
}