/* =============================================
   wibcode - Responsive
   ============================================= */

@media (max-width: 1199.98px) {
    .hero-visual {
        margin-top: 2rem;
        justify-content: center;
        padding-left: 0;
    }

    .hero-mockup {
        width: 100%;
        max-width: 580px;
        margin-right: 0;
        transform: none;
    }

    .hero-main-row {
        min-height: auto;
    }
}

@media (max-width: 991.98px) {
    .navbar-wibcode .navbar-collapse {
        background: var(--color-primary);
        padding: 1rem;
        border-radius: var(--radius);
        margin-top: 0.5rem;
    }

    .hero-section {
        min-height: auto;
        padding: 120px 0 3rem;
    }

    .hero-features {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        width: 100%;
        max-width: 100%;
        padding-bottom: 1rem;
    }

    .hero-feature-text h6,
    .hero-feature-text p {
        white-space: normal;
    }

    .hero-mockup {
        width: 100%;
        max-width: 100%;
    }

    .hero-shape--1,
    .hero-shape--2,
    .hero-shape--3 {
        opacity: 0.4;
    }

    .floating-contact {
        width: calc(100% - 40px);
        right: 20px;
        bottom: 90px;
    }

    .footer-wibcode .col-md-6,
    .footer-wibcode .col-lg-3 {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    .section-padding,
    .services-section,
    .portfolio-section,
    .testimonials-section,
    .products-section,
    .contact-form-section,
    .about-section {
        padding: 60px 0;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn-wibcode {
        width: 100%;
        justify-content: center;
    }

    .hero-features {
        margin-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .hero-features .col-md-4 {
        margin-bottom: 1.25rem;
    }

    .stats-row {
        gap: 1rem;
    }

    .stat-item h3 {
        font-size: 2rem;
    }

    .page-header {
        padding: 120px 0 60px;
    }

    .contact-form-card {
        padding: 1.5rem;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom .text-md-end {
        text-align: center !important;
        margin-top: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .product-item {
        padding: 1rem 0.5rem;
    }

    .whatsapp-float {
        right: 15px;
        bottom: 15px;
    }

    .whatsapp-btn {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .chat-float-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}