/* Responsive Styles */

/* Tablet (768px - 1023px) */
@media only screen and (max-width: 1023px) {
    /* Typography */
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    /* Layout adjustments */
    .benefits-content {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: var(--spacing-md);
    }
    
    .testimonials-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-info {
        grid-column: span 2;
        margin-bottom: var(--spacing-md);
    }
    
    /* Process section */
    .process-content {
        flex-wrap: wrap;
    }
    
    .process-content:before {
        display: none;
    }
    
    .process-step {
        flex-basis: 33.33%;
        margin-bottom: var(--spacing-lg);
    }
    
    /* Service cards */
    .service-card {
        grid-template-columns: 1fr;
    }
    
    .service-image {
        height: 300px;
    }
}

/* Mobile (up to 767px) */
@media only screen and (max-width: 767px) {
    /* Header and Navigation */
    .header-content {
        padding: var(--spacing-xs) 0;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-list {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md) 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-150%);
        transition: transform 0.3s ease-in-out;
        z-index: 999;
    }
    
    .nav-list.active {
        transform: translateY(0);
    }
    
    .nav-list li {
        margin: var(--spacing-xs) 0;
    }
    
    /* Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    /* Hero section */
    .hero-section {
        height: auto;
        min-height: 500px;
        padding-top: 100px;
        padding-bottom: var(--spacing-lg);
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    /* Layout adjustments */
    .section {
        padding: var(--spacing-lg) 0;
    }
    
    .about-content,
    .benefits-content,
    .testimonials-content,
    .blog-content {
        grid-template-columns: 1fr;
    }
    
    .values-list {
        grid-template-columns: 1fr;
    }
    
    .process-step {
        flex-basis: 50%;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-info {
        grid-column: 1;
    }
    
    /* Cookie popup */
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-popup p {
        margin-bottom: var(--spacing-md);
        padding-right: 0;
    }
}

/* Small mobile devices (up to 480px) */
@media only screen and (max-width: 480px) {
    /* Typography */
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    /* Layout adjustments */
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Form */
    .form-container {
        padding: var(--spacing-md);
    }
    
    /* Process section */
    .process-step {
        flex-basis: 100%;
    }
    
    /* Other adjustments */
    .btn-large {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

/* Mobile Navigation JavaScript */
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const navList = document.querySelector('.nav-list');
    
    if (mobileMenuToggle && navList) {
        mobileMenuToggle.addEventListener('click', function() {
            navList.classList.toggle('active');
            
            // Animate hamburger to X
            const spans = mobileMenuToggle.querySelectorAll('span');
            spans.forEach(span => span.classList.toggle('active'));
        });
        
        // Close menu when clicking a link
        const navLinks = document.querySelectorAll('.nav-list a');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                navList.classList.remove('active');
                
                // Reset hamburger
                const spans = mobileMenuToggle.querySelectorAll('span');
                spans.forEach(span => span.classList.remove('active'));
            });
        });
    }
    
    // Add animation to elements when they come into view
    const fadeElements = document.querySelectorAll('.fade-in');
    
    const fadeInObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });
    
    fadeElements.forEach(element => {
        fadeInObserver.observe(element);
    });
});