﻿/* ==========================================================================
   Antigravity / Indobuzz - Tablet / iPad Responsive Styles (max-width: 991px)
   ========================================================================== */

@media screen and (max-width: 991px) {
    /* Container Spacing */
    .konten-company,
    .konten-evolution,
    .konten-services,
    .konten-faq,
    .konten-tim,
    .konten-location {
        padding-block: 3.5rem;
        padding-inline: 1.25rem;
    }

    /* Hero Carousel */
    .w-img {
        height: 640px;
        min-height: 520px;
    }

    .caption-custom {
        padding: 3rem 1.25rem 2.5rem 1.25rem;
    }

    .caption-custom h1 {
        font-size: 2.25rem;
    }

    .w-p1 {
        font-size: 1.05rem;
        margin: 0.5rem auto 1.5rem auto;
    }

    .hero-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .btn-orange,
    .btn-putih {
        min-width: 140px;
        height: 42px;
        font-size: 14px;
        padding: 0 18px;
        margin: 0;
    }

    /* Brand / Client Section */
    .client {
        width: 88%;
        min-height: 54px;
        border-radius: 10px;
        box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 100;
        margin: -35px auto 15px auto;
        left: auto;
        transform: none;
        padding: 6px 16px;
    }

    .col1-client {
        height: 32px;
        padding-right: 14px;
        margin-right: 14px;
    }

    .h5-client {
        font-size: 14px;
    }

    .client-marquee {
        gap: 36px;
    }

    .client-track {
        gap: 36px;
        animation-duration: 26s;
    }

    .client-logo {
        height: 25px;
        max-width: 95px;
    }

    @keyframes client-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100% - 36px));
        }
    }

    /* Company Section */
    .row-company {
        gap: 2rem;
        margin-top: 1.75rem;
    }

    .col1-company,
    .col2-company {
        flex: 1 1 100%;
    }

    /* Evolution Section */
    .row-evolution {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    .col1-evolution,
    .col2-evolution,
    .col3-evolution {
        height: 420px;
        padding: 1.5rem 1.25rem;
    }

    .col1-evolution {
        margin-top: 24px;
    }

    .col2-evolution {
        margin-top: 0;
    }

    .col3-evolution {
        margin-top: 24px;
    }

    /* Services Section */
    .row-services {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.25rem;
    }

    .thumbnail-services {
        height: 200px;
    }

    /* Team Section - 1 Row Scroll */
    .card-tim {
        flex: 0 0 240px;
        width: 240px;
        aspect-ratio: 3 / 4;
    }

    .tim-nav-btn {
        width: 44px;
        height: 44px;
    }

    /* Location Section */
    .row-location {
        gap: 2rem;
    }

    .col-location:first-child,
    .col-location:last-child {
        flex: 1 1 100%;
    }

    .maps {
        height: 320px;
    }


    /* Stats Section */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Workflow Section */
    .row-workflow {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* CTA Section */
    .cta-card {
        padding: 3.5rem 2rem;
    }
}