/* Container utama untuk slider */
.client-slider {
    width: 100%;
    padding: 60px 0; /* Ruang atas bawah */
    overflow: hidden; /* Supaya slide yang belum muncul tidak nampak */
    position: relative;
    
}

/* Memastikan wrapper menyusun slide secara mendatar */
.swiper-wrapper {
    display: flex;
    align-items: center;
}

/* Setiap slide (bekas luar logo) */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bekas dalam untuk kawal saiz logo 196x102 */
.client-logo {
    width: 196px;
    height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

/* Imej di dalam logo */
.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Kekalkan ratio gambar, tak penyek */
    filter: grayscale(100%); /* Warna kelabu */
    opacity: 0.6; /* Nampak pudar sikit */
    transition: all 0.3s ease-in-out; /* Animasi smooth bila hover */
}

/* Kesan bila mouse lalu (Hover) */
.client-logo img:hover {
    filter: grayscale(0%); /* Tukar ke warna asal */
    opacity: 1; /* Nampak jelas sepenuhnya */
    transform: scale(1.05); /* Gambar membesar sikit */
}

/* Custom butang navigasi (Kiri & Kanan) */
.swiper-button-next, 
.swiper-button-prev {
    color: #000 !important; /* Warna arrow */
}

/* Warna dan saiz arrow */
    .swiper-button-next:after, 
    .swiper-button-prev:after {
        color: #000 !important; /* Tukar warna hitam/gelap */
        font-size: 24px !important;
        font-weight: bold;
    }

    /* Kedudukan arrow supaya tak rapat sangat dengan tepi */
    .swiper-button-next {
        right: 10px !important;
    }

    .swiper-button-prev {
        left: 10px !important;
    }

.gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 sebaris */
        gap: 15px;
        max-width: 1000px; /* Kawal lebar galeri supaya nampak centre */
        margin: 40px auto; /* Centre-kan galeri */
    }

    .gallery-item {
        width: 100%;
        aspect-ratio: 1 / 1; /* Buat gambar jadi petak supaya kemas */
        overflow: hidden;
        border-radius: 8px;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.3s;
        cursor: pointer;
    }

    .gallery-item img:hover {
        transform: scale(1.05);
    }

    /* Paksa arrow muncul dan berwarna hitam supaya nampak */
    .slider-active .slick-prev, 
    .slider-active .slick-next {
        background: #222 !important; /* Warna kotak button */
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        z-index: 999 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slider-active .slick-prev { left: 30px !important; }
    .slider-active .slick-next { right: 30px !important; }

    .slider-active .slick-prev:before, 
    .slider-active .slick-next:before {
        display: none !important; /* Buang default pangkah/arrow nipis */
    }

    /* Pastikan icon ti-angle nampak putih di dalam */
    .slider-active .slick-prev i, 
    .slider-active .slick-next i {
        color: #fff !important;
        font-size: 20px !important;
    }

    /*GIF MOBILE */

    /* Pastikan GIF tak terkeluar skrin dan duduk tengah kat mobile */
    .hero-gif {
    /* Gunakan block supaya margin: auto berfungsi */
    display: block !important; 
    
    /* Paksa centre horizontal */
    margin-left: auto !important; 
    margin-right: auto !important;
    
    /* Matikan sebarang float dari template */
    float: none !important; 
    
    height: auto !important;
    }


    @media (max-width: 767px) {
        /* 1. Paksa container buang semua margin oren & padding hijau */
        .gif-container-mobile {
            display: block !important;
            width: 100% !important;
            margin: 0  !important; /* Margin atas bawah sahaja, kiri kanan 0 */
            padding: 0 !important;       /* Buang padding hijau */
            text-align: center !important; /* Centre-kan imej di dalam */
            float: none !important;
        }

        /* 2. Fix Imej (Buang margin 34.5px tu) */
        .hero-gif {
            display: inline-block !important; /* Penting: inline-block supaya respond pada text-align */
            margin: 0 auto !important;
            float: none !important;
            left: 0 !important;   /* Buang kalau ada position absolute */
            position: relative !important;
        }

        /* 3. Samakan Saiz (Guna lebar tetap supaya semua slide sama) */
        /* Slide 1 - (Imej Excavator dalam gambar anda) */
        .single-slider:nth-child(1) .hero-gif {
            width: 280px !important; /* Anda boleh adjust nilai ni */
        }

        /* Slide 2 & 3 - Kecilkan sikit tapi kekal centre */
        .single-slider:nth-child(2) .hero-gif,
        .single-slider:nth-child(3) .hero-gif {
            width: 180px !important; /* Anda boleh adjust nilai ni */
        }

        .hero__caption {
            text-align: center; /* Teks jadi centre kat mobile */
            margin-bottom: 30px; /* Beri ruang sebelum GIF bawah dia */
        }
        
        .hero__img {
            float: none !important; /* Hilangkan f-right supaya duduk tengah */
            text-align: center;
        }

        .slider-height {
            height: auto !important; /* Biar container panjang ikut isi */
            padding-top: 100px;
            padding-bottom: 50px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        
        /* 1. Besarkan kotak teks supaya dia tak senget ke kiri */
        .single-slider .col-lg-6.col-md-9 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            padding: 60px 40px !important;
        }
        

        /* 2. Centre-kan isi kandungan dalam kotak teks */
        .hero__caption {
            text-align: center !important;
            padding: 0 50px !important; /* Beri ruang kiri kanan */
            margin: 0 auto !important;
        }

        /* 3. Pastikan h1 dan p duduk tengah */
        .hero__caption h1, 
        .hero__caption p {
            margin-left: auto !important;
            margin-right: auto !important;
            text-align: center !important;
        }

        /* 4. Centre-kan butang */
        .slider-btns {
            display: flex !important;
            justify-content: center !important;
            margin-top: 20px !important;
        }

        /* 5. Baiki Container GIF supaya tak overlap */
        .hero__img {
            text-align: center !important;
        }

        .hero-gif {
            display: inline-block !important; /* Penting: inline-block supaya respond pada text-align */
            margin: 0 auto !important;
            float: none !important;
            left: 0 !important;   /* Buang kalau ada position absolute */
            position: relative !important;
        }

        /* 6. PENTING: Elakkan Jahanam Bawah */
        .slider-height {
            height: auto !important;
            min-height: 800px !important; /* Kekalkan ruang supaya tak kacau section bawah */
            padding-bottom: 100px !important;
        }

        .single-slider:nth-child(1) .hero-gif {
            width: 80% !important; /* Anda boleh adjust nilai ni */
        }

        .single-services {
            padding: 30px 15px !important; /* Kurangkan dari 94px/57px ke nilai yang lebih logik */
            text-align: center !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
        }

        /* 2. Pastikan wrapper ambil ruang penuh */
        .services-wrapper {
            padding: 0 !important;
            margin-bottom: 30px !important;
        }

        /* 3. Baiki saiz teks supaya tak nampak mampat */
        .services-cap h3 a {
            font-size: 18px !important;
            display: block !important;
            margin-bottom: 10px !important;
        }

        .services-cap p {
            font-size: 13px !important;
            line-height: 1.4 !important;
            padding: 0 !important;
            margin-bottom: 15px !important;
        }

        /* 4. Icon kena centre dan jangan terlalu besar */
        .services-icon {
            margin-bottom: 20px !important;
        }
        
        .services-icon svg {
            width: 50px !important;
            height: 50px !important;
        }

        /* 5. Butang More Info */
        .get-btn {
            font-size: 12px !important;
            margin-top: auto !important; /* Tolak butang ke bawah supaya sejajar */
        }

        .footer-logo img{
            width: 100% !important;
        }

        iframe {
            width: 100% !important; /* The !important flag forces the override */
            min-width: 300px;
        }

        .table-responsive {
        height: auto !important; /* Biarkan dia scroll mengikut page pada mobile */
    }

    table {
        min-width: 800px; /* MEMAKSA table ada lebar minimum supaya tak penyek */
    }
    
    /* Kecilkan saiz gambar client pada iPad/Phone */
    td img {
        width: 80px; 
        height: auto;
    }
    
    /* Kecilkan saiz font supaya muat */
    table {
        font-size: 12px;
    }
    }
     /*GIF MOBILE */

    /* Untuk skrin phone */
    @media (max-width: 768px) {
        .gallery-grid {
            grid-template-columns: repeat(2, 1fr);
            padding: 0 15px;
        }
    }

/* Sembunyikan arrow pada skrin phone kecil kalau sempit */
@media (max-width: 576px) {
    .swiper-button-next, 
    .swiper-button-prev {
        display: none;
    }
}