/**
 * The Web Lab - Responsive Breakpoints Stylesheet
 * 1200px | 992px | 768px | 576px
 */

/* ==========================================================================
   1. LAPTOPS / SMALL DESKTOPS (<= 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }

    .pricing-card.popular {
        transform: none;
    }

    .pricing-card.popular:hover {
        transform: translateY(-8px);
    }

    .footer-top {
        grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
    }

    .footer-top .footer-col:last-child {
        grid-column: span 4;
        margin-top: 1rem;
    }

    .trust-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   2. TABLETS & SMALL LAPTOPS (<= 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* Navbar Hamburger Trigger */
    .nav-menu,
    .nav-actions .btn {
        display: none;
    }

    .hamburger-btn {
        display: block;
    }

    /* Top Bar Simplification */
    .top-bar-left {
        display: none;
    }

    .top-bar-inner {
        justify-content: center;
    }

    /* Hero Section Stacking */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-stats-banner {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        text-align: center;
    }

    .hero-stat-item {
        text-align: center;
    }

    .hero-visual {
        max-width: 580px;
        margin: 1.5rem auto 0 auto;
    }

    /* Process Timeline (How We Work) */
    .process-timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .process-timeline::before {
        display: none;
    }

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

    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-top .footer-col:last-child {
        grid-column: span 2;
    }
}

/* ==========================================================================
   3. MOBILE LANDSCAPE & TABLETS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .nav-hostinger-badge {
        display: none;
    }

    .trust-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .service-feature-box-grid {
        grid-template-columns: 1fr;
    }

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

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

    .floating-call {
        display: flex;
    }

    .floating-actions-left {
        bottom: 1rem;
        left: 1rem;
    }

    .floating-actions-right,
    .floating-actions-container {
        bottom: 1rem;
        right: 1rem;
    }

    .floating-btn {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }
}

/* ==========================================================================
   4. MOBILE PORTRAIT (<= 576px)
   ========================================================================== */
@media (max-width: 576px) {
    .top-bar {
        display: none; /* Hidden on small screens for cleaner mobile viewport */
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .trust-features-grid {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero-stats-banner {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hero-cta-group .btn {
        width: 100%;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-top .footer-col:last-child {
        grid-column: span 1;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .brand-logo {
        font-size: 1.25rem;
    }

    .brand-logo-img {
        height: 40px;
        max-width: 230px;
    }

    .floating-badge {
        display: none; /* Avoid overflowing tiny screens */
    }

    .mock-grid-2 {
        grid-template-columns: 1fr;
    }

    .slider-controls {
        gap: 1rem;
    }

    .slider-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}