.box1-section {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        
                    }
            
                    .slider-container {
                        display: flex;
                        justify-content: center;
                        gap: 50px;
                        width: var(--slider-container-width, 100%);
                    }
                    
                    .slider {
                        width: 320px;
                        height: 400px;
                        overflow: hidden;
                        position: relative;
                    }
                    .slider-large {
                        width: 400px;
                        height: 400px;
                    }
                    
                    .slider img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover; /* Ensures image fits and no part is cut off */
                        position: absolute;
                        top: 0;
                        left: 100%;
                        transition: left 1s ease-in-out;
                    }
                    
                    .slider img.active {
                        left: 0;
                    }
                    
                    .slider img.next {
                        left: 100%;
                    }
                    
                    .slider img.prev {
                        left: -100%;
                    }
                    .dots {
                        position: absolute;
                        bottom: 10px;
                        left: 50%;
                        transform: translateX(-50%);
                        display: flex;
                        gap: 5px;
                    }
                    
                    .dots span {
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        background-color: #ddd;
                        cursor: pointer;
                    }
                    
                    .dots span.active {
                        background-color: #333;
                    }
                    
                    .box2-section {
                        display: flex;
                        justify-content: center;
                        padding: 20px;
                    }
                                
                    .card {
                        display: flex;
                        flex-direction: row; /* Ubah dari kolom ke baris */
                        background-color: #ffffff;
                        border-radius: 8px;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                        overflow: hidden;
                        max-width: 900px; /* Sesuaikan ukuran maksimal */
                        width: 100%;
                    }
                                
                                
                                
                                .card-title {
                                    font-size: 24px;
                                    margin: 0;
                                    color: #ffffff;
                                }
                                
                                /* Card Body Styling */
                                .card-body {
                                    padding: 20px;
                                }
                                
                                 .shakemap-section {
                                    flex: 1;
                                    display: flex;
                                    align-items: center; /* Memposisikan secara vertikal */
                                    justify-content: center;
                                    padding: 20px;
                                    text-align: center;
                                }
                                
                                .shakemap-img {
                                    max-width: 100%;
                                    height: auto;
                                    border-radius: 8px;
                                    border: 1px solid #ddd;
                                }
                
                                       
                        .info-box {
                            background-color: #333333;
                            padding: 20px;
                            border-radius: 8px;
                            text-align: center;
                            color: #ffffff;
                            box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
                            width: 30%;
                        }
                        
                        .info-box img {
                            max-width: 30px; /* Memperkecil ukuran gambar */
                            height: auto;
                            margin-bottom: 10px;
                        }
                        .koordinat-img {
                             max-width: 10px; /* Ukuran gambar koordinat lebih kecil */
                            height: auto; /* Mempertahankan rasio aspek */
                            display: block; /* Menjadikan gambar sebagai blok untuk menghindari masalah tata letak */
                            margin: 0 auto; /* Memusatkan gambar secara horizontal */
                        }
                
                        .info-section p.dirasakan {
                            margin-top: 20px; /* Menambahkan jarak atas */
                        }
                        
                        .gempa-dirasakan-box {
                            display: inline-block;
                            background-color: #b2f2b2; /* Warna hijau muda */
                            color: #388e3c; /* Warna hijau untuk tulisan */
                            padding: 5px 10px;
                            border-radius: 4px;
                            font-weight: bold;
                            margin-bottom: 5px;
                        }
                        .info1-section {
                    flex: 2; /* Memberi porsi lebih besar untuk bagian informasi */
                    padding: 20px;
                }
                        .d-flex {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;
                }
                
                .info-box {
                    text-align: center;
                    width: 30%;
                    padding: 10px;
                    border-radius: 8px;
                    background-color: #f9f9f9;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }
                
                .info-box h5 {
                    font-size: 14px;
                    margin: 5px 0;
                    color: #000; /* Warna hitam */
                }
                
                .info-box img {
                    width: 50px;
                    height: auto;
                    margin-bottom: 10px;
                }
                
                p.dirasakan {
                    background-color: #e0f7fa;
                    padding: 10px;
                    border-radius: 4px;
                    color: #006064;
                    font-size: 14px;
                    margin-top: 15px;
                }
                
                .saran-bmkg {
                    color: #007bff;
                    font-weight: bold;
                }
                .lihat-semua-container {
                    text-align: right; /* Posisi tulisan di kanan */
                    margin-top: 20px; /* Jarak atas dengan elemen sebelumnya */
                }
                
                .lihat-semua {
                    color: #007bff; /* Warna biru */
                    font-size: 16px;
                    font-weight: bold;
                    text-decoration: none; /* Hilangkan garis bawah */
                    display: inline-flex;
                    align-items: center;
                    transition: color 0.3s;
                }
                
                .lihat-semua span {
                    margin-left: 5px; /* Jarak antara teks dan panah */
                    font-size: 16px;
                }
                
                .lihat-semua:hover {
                    color: #0056b3; /* Warna biru lebih gelap saat hover */
                }
        

    

        @media (max-width: 480px) {
            .container {
                padding: 0 20px;
            }

            .hero h2 {
                font-size: 20px;
            }

            .hero p {
                font-size: 14px;
                line-height: 1.5;
            }
        }

        /* Jarak kanan kiri pada container */
        .container {
            padding: 0 20px; /* Menambah jarak dari kanan dan kiri */
            max-width: 1200px; /* Maksimal lebar container */
            margin: 0 auto; /* Center container */
        }

        /* Hero Section */
        .hero h2, .hero p {
            padding: 0 20px; /* Jarak internal pada H2 dan paragraf */
        }

        /* Informasi Terkini Section */
        .info-section {
            background-image: url('../Image/taman alat1.jpg');
           /* Properti tambahan untuk background */
            background-size: cover; /* Ukuran gambar background menyesuaikan layar */
            background-position: center; /* Posisi gambar di tengah */
            background-repeat: no-repeat; /* Tidak mengulang gambar */
            
            /* Atur kontras menggunakan filter */
            filter: contrast(100%); /* Atur kontras, 100% adalah default */
            padding: 40px 20px;
            text-align: center;
        }
         /* Optional: Overlay for additional effect */
         .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Black overlay with opacity */
            z-index: -1;
        }

        .info-section h2 {
            font-size: 46px;
            margin: 4px;
            color: #F8F8FF;
            padding: 0 20px; /* Jarak dari kanan dan kiri */
        }

        .info-section p {
            font-size: 16px;
            margin: 3px 50px;
            /*color: #00796b;*/
            color: #F8F8FF;
            padding: 0 20px; /* Jarak dari kanan dan kiri */
        }

        .box-section h3 {
            font-size: 20px;
            margin: 20px;
            padding: 0 20px; /* Jarak dari kanan dan kiri */
        }

        .box-section p {
            font-size: 14px;
            margin: 1px 10px;
            margin-bottom: 20px;
            padding: 0 40px; /* Jarak dari kanan dan kiri */
        }

        /* Box Section */
        .box-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-gap: 20px;
            margin: 0 auto;
            max-width: 1200px; /* Maksimal lebar container */
            margin-bottom: 50px;/*Jarak box dengan footer*/
        }

        .box {
            background-color: #ffffff;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .box:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .box img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .box p {
            margin: 15px 0 0;
            font-size: 16px;
        }

        .box a {
            text-decoration: none;
            color: #004d40;
            display: block;
            margin-top: 10px;
        }

        /* Mobile Responsive Box Section */
        @media (max-width: 768px) {
            .box-container {
                grid-template-columns: repeat(2, 1fr); /* 2 box per baris */
                margin: 0 20px; /* Jarak dari kanan dan kiri */
            }
            .box1-section {
                    height: auto; /* Let it grow naturally on smaller screens */
                    justify-content: flex-start; /* Align content at the top */
                }
            
                .slider-container {
                    flex-direction: column;
                    gap: 10px;
                    justify-content: center; /* Center the sliders horizontally */
                    align-items: center; /* Center the sliders vertically */
                }
            
                .slider {
                    max-width: 90%; /* Make sliders take up more width */
                }
            
                .slider-large {
                    /*max-width: 90%;*/
                    width: 300px;
                    height: 300px;
                }
                .card {
                flex-direction: column; /* Ubah menjadi kolom untuk layar kecil */
                }
            
                .shakemap-section {
                    padding: 10px;
                }
            
                .info1-section {
                    padding: 10px;
                }
            
                .info-box {
                    width: 100%; /* Sesuaikan lebar info-box pada perangkat kecil */
                    margin-bottom: 10px;
                }
        }

        @media (max-width: 480px) {
            .box-container {
                grid-template-columns: 1fr; /* 1 box per baris */
                margin: 0 10px; /* Jarak dari kanan dan kiri */
            }
        }