/* ===== RESPONSIVE DESIGN ===== */

/* ===== MOBILE FIRST - BASE STYLES ===== */
/* Already defined in main.css for mobile */

/* ===== TABLET STYLES ===== */
@media (max-width: 991.98px) {
    /* Typography Adjustments */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.81rem; }
    h3 { font-size: 1.59rem; }
    
    .hero-section h1 {
        font-size: 2.51rem;
    padding-top: 275px;
}
    
    .hero-section h2 {
        font-size: 1.32rem;
    }
    
    /* Navigation */
    .navbar-nav {
        padding-top: var(--spacing-md);
    }
    
    .navbar-nav .nav-link {
        padding: var(--spacing-sm);
        margin: var(--spacing-xs) 0;
        border-radius: var(--border-radius-md);
    }
    
    /* Hero Section */
    .hero-section {
        text-align: center;
        padding-top: 100px;
    }
    
    /* Pricing Cards */
    .pricing-card.featured {
        transform: none;
        margin-top: var(--spacing-lg);
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-10px);
    }
    
    /* Timeline */
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        width: 100%;
        left: 0;
        padding-left: 50px;
        padding-right: 0;
    }
    
    .timeline-item:nth-child(even) {
        left: 0;
        padding-left: 50px;
        padding-right: 0;
    }
    
    .timeline-content::before {
        left: -20px;
        border-right-color: white;
        border-left-color: transparent;
    }
    
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -20px;
        border-right-color: white;
        border-left-color: transparent;
    }
    
    /* Process Steps */
    .process-step::before {
        display: none;
    }
    
    /* Contact Form */
    .contact-form {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Gallery */
    .gallery-img {
        height: 200px;
    }
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 767.98px) {
    /* Typography */
    h1 { font-size: 1.77rem; }
    h2 { font-size: 1.61rem; }
    h3 { font-size: 1.37rem; }
    h4 { font-size: 1.21rem; }
    
    .hero-section h1 {
        font-size: 2rem;
    padding-top: 275px;
}
    
    .hero-section h2 {
        font-size: 1.21rem;
    }
    
    /* Spacing Adjustments */
    .section-padding {
        padding: var(--spacing-lg) 0;
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: 1.27rem;
    }
    
    /* Hero Section */
    .hero-section {
        min-height: 80vh;
        padding: 80px 0 var(--spacing-xl);
    }
    
    /* Cards */
    .feature-card, .service-card, .benefit-card, .stat-card, .element-card,
    .strategy-card, .trend-card, .planning-card, .plant-card, .material-card,
    .tech-card, .wellness-card, .pricing-card, .review-card, .career-card,
    .info-card {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Service Cards */
    .service-card img {
        height: 150px;
    }
    
    /* Team Members */
    .team-member {
        margin-bottom: var(--spacing-lg);
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    /* Pricing */
    .pricing-card {
        padding: var(--spacing-lg);
    }
    
    .pricing-card .price {
        font-size: 2rem;
    }
    
    /* Blog Cards */
    .blog-card {
        margin-bottom: var(--spacing-lg);
    }
    
    .blog-card img {
        height: 150px;
    }
    
    /* Case Studies */
    .case-study-card {
        margin-bottom: var(--spacing-lg);
    }
    
    .case-study-card img {
        height: 150px;
    }
    
    /* Gallery */
    .gallery-img {
        height: 150px;
        margin-bottom: var(--spacing-xs);
    }
    
    /* Footer */
    .footer {
        text-align: center;
    }
    
    .footer .col-lg-4 {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Feature Icons */
    .feature-icon, .info-icon {
        font-size: 2rem;
    }
    
    /* Process Steps */
    .process-step {
        margin-bottom: var(--spacing-lg);
        padding-top: var(--spacing-md);
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.35rem;
    }
    
    /* Contact Info */
    .contact-info {
        margin-top: var(--spacing-lg);
    }
    
    /* Breadcrumb */
    .breadcrumb-section {
        padding: 80px 0 var(--spacing-md);
    }
    
    /* ===== DISABLE ALL AOS ANIMATIONS ON MOBILE ===== */
    /* Remove all AOS transformations and effects */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Disable AOS-specific classes that might be applied */
    .aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Ensure all elements with AOS attributes are immediately visible */
    [data-aos="fade-up"],
    [data-aos="fade-down"],
    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="fade-up-right"],
    [data-aos="fade-up-left"],
    [data-aos="fade-down-right"],
    [data-aos="fade-down-left"],
    [data-aos="flip-left"],
    [data-aos="flip-right"],
    [data-aos="flip-up"],
    [data-aos="flip-down"],
    [data-aos="zoom-in"],
    [data-aos="zoom-in-up"],
    [data-aos="zoom-in-down"],
    [data-aos="zoom-in-left"],
    [data-aos="zoom-in-right"],
    [data-aos="zoom-out"],
    [data-aos="zoom-out-up"],
    [data-aos="zoom-out-down"],
    [data-aos="zoom-out-left"],
    [data-aos="zoom-out-right"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}

/* ===== SMALL MOBILE STYLES ===== */
@media (max-width: 575.98px) {
    /* Typography */
    h1 { font-size: 1.51rem; }
    h2 { font-size: 1.27rem; }
    
    .hero-section h1 {
        font-size: 1.87rem;
    padding-top: 275px;
}
    
    .hero-section h2 {
        font-size: 1rem;
    }
    
    /* Spacing */
    :root {
        --spacing-xl: 2rem;
        --spacing-lg: 1.5rem;
    }
    
    .section-padding {
        padding: var(--spacing-md) 0;
    }
    
    /* Navigation */
    .navbar {
        padding: var(--spacing-xs) 0;
    }
    
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    /* Hero */
    .hero-section {
        min-height: 70vh;
        padding: 70px 0 var(--spacing-lg);
    }
    
    /* Cards */
    .feature-card, .service-card, .benefit-card, .stat-card, .element-card,
    .strategy-card, .trend-card, .planning-card, .plant-card, .material-card,
    .tech-card, .wellness-card, .pricing-card, .review-card, .career-card,
    .info-card, .contact-form {
        padding: var(--spacing-md);
    }
    
    /* Pricing */
    .pricing-card .price {
        font-size: 1.89rem;
    }
    
    /* Team Members */
    .team-member img {
        width: 80px;
        height: 80px;
    }
    
    /* Feature Icons */
    .feature-icon, .info-icon {
        font-size: 1.77rem;
        margin-bottom: var(--spacing-sm);
    }
    
    /* Process Steps */
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    /* Timeline */
    .timeline-item {
        padding-left: 40px;
    }
    
    .timeline::before {
        left: 15px;
    }
    
    /* Gallery */
    .gallery-img {
        height: 120px;
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }
    
    /* ===== DISABLE ALL AOS ANIMATIONS ON SMALL MOBILE ===== */
    /* Remove all AOS transformations and effects */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Disable AOS-specific classes that might be applied */
    .aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Ensure all elements with AOS attributes are immediately visible */
    [data-aos="fade-up"],
    [data-aos="fade-down"],
    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="fade-up-right"],
    [data-aos="fade-up-left"],
    [data-aos="fade-down-right"],
    [data-aos="fade-down-left"],
    [data-aos="flip-left"],
    [data-aos="flip-right"],
    [data-aos="flip-up"],
    [data-aos="flip-down"],
    [data-aos="zoom-in"],
    [data-aos="zoom-in-up"],
    [data-aos="zoom-in-down"],
    [data-aos="zoom-in-left"],
    [data-aos="zoom-in-right"],
    [data-aos="zoom-out"],
    [data-aos="zoom-out-up"],
    [data-aos="zoom-out-down"],
    [data-aos="zoom-out-left"],
    [data-aos="zoom-out-right"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}

/* ===== LARGE DESKTOP STYLES ===== */
@media (min-width: 1200px) {
    /* Typography */
    .hero-section h1 {
        font-size: 3.51rem;
    padding-top: 275px;
}
    
    .hero-section h2 {
        font-size: 1.88rem;
    }
    
    /* Enhanced Spacing */
    .section-padding {
        padding: 5rem 0;
    }
    
    /* Container Max Width */
    .container {
        max-width: 1200px;
    }
    
    /* Enhanced Effects */
    .feature-card:hover, .service-card:hover, .benefit-card:hover, .stat-card:hover,
    .element-card:hover, .strategy-card:hover, .trend-card:hover, .planning-card:hover,
    .plant-card:hover, .material-card:hover, .tech-card:hover, .wellness-card:hover {
        transform: translateY(-8px);
    }
    
    .pricing-card:hover {
        transform: translateY(-15px);
    }
    
    .pricing-card.featured:hover {
        transform: scale(1.05) translateY(-15px);
    }
    
    /* Gallery Enhancement */
    .gallery-img {
        height: 300px;
    }
    
    /* Enhanced Service Cards */
    .service-card img {
        height: 250px;
    }
    
    /* Enhanced Blog Cards */
    .blog-card img {
        height: 250px;
    }
    
    /* Enhanced Case Study Cards */
    .case-study-card img {
        height: 250px;
    }
}

/* ===== ULTRA WIDE STYLES ===== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-section h1 {
        font-size: 4rem;
    padding-top: 275px;
}
    
    .section-padding {
        padding: 6rem 0;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .navbar, .footer, .btn, .contact-form {
        display: none !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    p, li {
        orphans: 3;
        widows: 3;
    }
    
    .section-padding {
        padding: 1rem 0 !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --primary-green: #000000;
        --secondary-green: #232323;
        --dark-green: #000000;
        --light-green: #ffffff;
        --neutral-cream: #ffffff;
    }
    
    .feature-card, .service-card, .benefit-card, .stat-card, .element-card,
    .strategy-card, .trend-card, .planning-card, .plant-card, .material-card,
    .tech-card, .wellness-card, .pricing-card, .review-card, .career-card,
    .info-card, .contact-form {
        border: 2px solid #000000;
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        min-height: 100vh;
        padding-top: 60px;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    padding-top: 275px;
}
    
    .hero-section h2 {
        font-size: 1.27rem;
    }
}

/* ===== FOCUS STYLES FOR ACCESSIBILITY ===== */
@media (prefers-reduced-motion: no-preference) {
    *:focus {
        outline: 2px solid var(--secondary-green);
        outline-offset: 2px;
    }
    
    .btn:focus, .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(61, 123, 85, 0.25);
    }
}

/* ===== HOVER MEDIA QUERY ===== */
@media (hover: hover) {
    .nav-link:hover, .btn:hover, .card:hover {
        transition: var(--transition-normal);
    }
}

@media (hover: none) {
    .feature-card:hover, .service-card:hover, .benefit-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}