/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Large Tablet – ≤ 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    .hero-buttons {
        bottom: 13%;
        gap: var(--spacing-sm);
    }

    .timeline-item:nth-child(odd) .content {
        margin-left: calc(50% + 32px);
    }

    .timeline-item:nth-child(even) .content {
        margin-right: calc(50% + 32px);
    }
}

/* --------------------------------------------------------------------------
   2. Tablet – ≤ 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .navbar-burger {
        display: block;
    }

    .navbar-menu.desktop-menu {
        display: none;
    }

    .hero-title {
        font-size: 2.4rem;
        line-height: 1.2;
        margin: 2.5rem auto 3.5rem auto;
    }

    .hero-subtitle {
        font-size: 1.4rem;
        margin: 1.2rem auto;
    }

    .services-track {
        animation-duration: 15s;
    }
    
    .services-track span {
        font-size: 1rem;
        margin: 0 1rem;
    }

    .services-marquee::before,
    .services-marquee::after {
        width: 15%;
    }

    .hero-buttons {
        bottom: 15%;
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 80%;
        max-width: 260px;
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: 0.95rem;
    }

    /* Services Section */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-heading {
        font-size: 2rem;
    }

    .services-subheading {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-md);
    }

    .service-card {
        padding: 25px 15px;
    }

    .service-icon {
        width: 56px;
        height: 56px;
    }

    .service-icon i {
        font-size: 1.5rem;
    }

    .service-title {
        font-size: 1.15rem;
    }

    .service-description {
        font-size: 0.9rem;
    }

    /* Expertise Section */
    .expertise-heading {
        font-size: 2rem;
    }

    .expertise-subheading {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-md);
    }

    .expertise-grid {
        gap: var(--spacing-lg);
    }

    .expertise-card {
        width: 9rem;
    }

    .expertise-label {
        font-size: 0.8rem;
    }

    /* About Section */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-cards {
        grid-template-columns: 1fr;
    }

    .about-summary p {
        font-size: 0.95rem;
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        margin-top: var(--spacing-xl);
    }

    /* Footer */

    .footer-col {
        min-width: unset;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   3. Mobile – ≤ 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
        margin: 2rem auto;
    }

    .hero-subtitle {
        font-size: 1.4rem;
        margin: 1rem auto;
    }

    .services-track {
        animation-duration: 12s;
    }
    
    .hero-buttons {
        bottom: 12%;
    }
    
    .scroll-indicator {
        bottom: 5%;
    }

    /* Services Section */
    .services-heading {
        font-size: 1.75rem;
    }

    .services-subheading {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-md);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Expertise Section */
    .expertise-heading {
        font-size: 1.75rem;
    }

    .expertise-subheading {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-md);
    }

    .expertise-grid {
        gap: var(--spacing-md);
    }

    .expertise-card {
        width: 8.5rem;
        margin-bottom: var(--spacing-sm);
    }

    .expertise-label {
        font-size: 0.8rem;
    }

    /* Process Section */
    .timeline::before {
        left: 10%;
    }

    .circle {
        left: 10%;
    }

    .timeline-item:nth-child(odd) .content,
    .timeline-item:nth-child(even) .content {
        margin-left: calc(10% + 32px);
        margin-right: 0;
        text-align: left;
        width: 100%;
    }

    .timeline-item:nth-child(odd) .content p,
    .timeline-item:nth-child(even) .content p {
        float: left;
    }
}

/* --------------------------------------------------------------------------
   4. Mobile Viewport Specific - ≤ 375px (iPhone SE and smaller)
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
    .hero {
        min-height: 480px;
    }
    
    .hero-buttons {
        bottom: 18%;
    }
    
    .scroll-indicator {
        bottom: 8%;
    }
    
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 85%;
        font-size: 0.9rem;
    }
    
    .services-track {
        animation-duration: 10s;
    }
}

/* --------------------------------------------------------------------------
   5. Mobile Landscape Orientation
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 400px;
    }
    
    .hero-buttons {
        bottom: 20%;
    }
    
    .scroll-indicator {
        bottom: 10%;
    }
    
    .hero-title {
        font-size: 1.8rem;
        margin: 1rem auto;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        margin: 0.8rem auto;
    }
    
    .services-track {
        animation-duration: 8s;
    }
}