/* Reset dasar untuk margin dan padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.single-items {
    display: flex;
    flex-wrap: wrap;
    /* Membungkus elemen jika kontainer tidak cukup lebar */
    gap: 20px;
    /* Menambahkan jarak antar elemen */
    justify-content: center;
    /* Mengatur elemen agar berada di tengah */
}
/* Menyusun container secara fleksibel */
.containerr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* justify-content: center; */
    /* align-items: center; */
    min-height: 300px;
    height: fit-content;
    padding-left: 7%;
    padding-right: 7%;
    /* padding-bottom: 4%;
    padding-top: 4%; */ 
    /* background-color: #b927a3; */
}

@media (max-width: 400px) {
    .containerr {
        display: flex;
        flex-direction: column;
        padding-left: 5% !important;
        padding-right: 5% !important;
        min-height: 300px;

        /* background-color: #ffc7f7; */
    }

    .containerr h1 {
        font-size: small;
    }

    .containerr p {
        font-size: smaller;
    }

    .informasi {
        height: 100%;
        width: auto;
        /* Mengisi seluruh tinggi container */
        /* background-color: #007DFF; */
        display: flex;
        flex-direction: column;

        justify-content: space-between;
        padding: 10px;

        align-items: center;
        /* border: 2px solid #73ff01; */
    }
}

.imghi {
    padding: 5%;
    max-width: 400px;
}

/* Pengaturan margin untuk teks di layar besar */
/* .container>div:first-child {
    margin-right: 10%;
} */

.informasia {
    height: 100%;
    width: auto;
    /* Mengisi seluruh tinggi container */
    /* background-color: #007DFF; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* padding: 10px; */
    align-items: center;
    /* border: 2px solid #73ff01; */
}

.informasiabu {
    width: auto;
    /* background-color: #007DFF; */
    gap:50px;
    display: flex;
    height: fit-content !important;
    justify-content: space-between;
    /* padding: 50px; */
    margin-left: 5%;
    margin-right: 5%;

    align-items: center;
    /* border: 2px solid #73ff01; */
}

/* knten2 */

@media (max-width: 400px) {
    .contensbuabu {
        background-color: rgb(255, 29, 29);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 100%;
        height: auto;
        /* padding: 0%;
         */
    }

    .informasiabu {
        padding: 1px;
        width: auto;
        height: fit-content;
        /* background-color: #838383; */
        display: flex;
        flex-direction: column;
        margin-left: 0%;
        margin-right: 0%;

        /* border: 2px solid #73ff01; */
    }
    .informasia {
        height: 100%;
        width: auto;
        /* Mengisi seluruh tinggi container */
        /* background-color: #007DFF; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* padding: 10px; */
        align-items: center;
        /* border: 2px solid #73ff01; */
    }

    .infocard h1 {
        font-size: smaller;
        text-align: center; /* Rata tengah secara horizontal */
    }

    .infocard p {
        font-size: smaller;
    }

    .infocard {
        width: 100%;
        max-width: 350px;
        height: auto;
        margin: 0%;
        text-align: center;
    }
}

@media (max-width: 1000px) {
    .contensbuabu {
        background-color: rgb(255, 29, 29);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 1000px;
        height: fit-content;
        /* padding: 0%; */
    }
    .informasia {
        height: 100%;
        width: auto;
        /* Mengisi seluruh tinggi container */
        /* background-color: #007DFF; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* padding: 10px; */
        align-items: center;
        /* border: 2px solid #73ff01; */
    }
    .informasiabu {
        padding: 1px;
        width: auto;
        height: fit-content;

        display: flex;
        flex-direction: column;
        margin-left: 0%;
        margin-right: 0%;
    }
    .imghi {
        padding: 5%;
        max-width: 200px;
    }

    .containerr h1 {
        font-size: larger;
    }

    .containerr p {
        font-size: medium;
    }
    .infocard {
        width: 100%;
        max-width: 350px;
        margin: 2%;
        height: auto;

        text-align: center;
    }

    .isikonten {
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }

    .bungkuskonten {
        max-width: 100%;
        margin-bottom: 20px;
    }

    /* Menambahkan padding untuk slider agar tampil rapi di layar kecil */
    .slick-slide {
        padding: 10px;
    }

    .slick-center .bungkuskonten {
        transform: scale(
            1.05
        ); /* Membuat card tengah sedikit lebih besar untuk efek fokus */
    }
}

/* Gambar dalam container */
.img-container {
    width: 100%;
    max-width: 320px;
    height: 100%;
    max-height: 400px;

    /* Perbesar lebar maksimum */
    display: flex;
    justify-content: center;
    align-content: center;

    overflow: hidden;
    padding: 50px;
    /* Menambahkan jarak vertikal */
    /* border-radius: 100px 10px 100px 10px; */
    /* Atas-Kiri, Atas-Kanan, Bawah-Kanan, Bawah-Kiri */
    /* background-color: #4572C9; */
}

.img-container img {
    width: 100%;
    height: 100%;
}

.contensblue {
    background-image: linear-gradient(to top, #50368c, #4572c9);
    /* padding: 20px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: fit-content !important;
}

@media (max-width: 768px) {
    .contensblue {
        background-image: linear-gradient(to top, #50368c, #4572c9);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        height: fit-content !important;
    }
}

.contensbuabu {
    background-color: rgb(213, 213, 213);
    /* padding: 20%; */
    height: fit-content !important;
    display: block;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Tambahkan padding untuk bagian lain */
body {
    font-family: "Poppins", sans-serif;
}

body > div:nth-child(2),
body > div:nth-child(3) {
    padding: 20px;
    text-align: center;
}


.card-lebar {
    width: fit-content !important;
    background-color: rgb(255, 255, 255);
    max-height: 200px;
    display: flex;
    flex-direction: row !important ;
    align-items: center;
    padding: 2%;
    border-radius: 10px;
    margin-bottom: 20px;
    @media (max-width: 700px) {
        flex-direction: column !important;
        text-align: center;
        max-width: 400px;
    }
}

@media (max-width: 400px) {
    .infocar {
        max-width: 220px;
        height: 100% !important;
        word-wrap: break-word; /* Memastikan kata panjang dipecah dan dipindahkan ke baris berikutnya */
        overflow-wrap: break-word;
        text-align: start;
    }

    .infocar h2 {
        font-size: xx-small;
    }

    .infocar p {
        font-size: xx-small;
    }

    .img-containercard {
        /* overflow: hidden; */

        border-radius: 10px;
        width: 100%;
        max-width: 200px;
        height: 100%;
        max-height: 150px;

        /* padding-right: 20px; */
    }

    .img-containercard img {
        width: 100%;
        height: 100%;
        min-width: 120px;

        object-fit: cover;
        border-radius: 10px;
    }
}

.img-containercard {
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 140px;
    min-width: 180px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

    margin: 20px;
    /* Maksimal 40% lebar kontainer untuk gambar */

    /* Beri jarak antara gambar dan teks */
}

.img-containercard img {
    width: 100%;
    height: 100%;
}

.infocard {
    width: 100%;
    max-width: 350px;
    min-width: 100px;
    height: auto;
    margin: 5%;
    /* border: 2px solid #ff00cc; */
    text-align: center;
    display: flexbox;
}

/* Teks dan Informasi di Kanan */
.infocar {
    width: 100%;
    max-width: 450px;
    height: 100% !important;
    word-wrap: break-word; /* Memastikan kata panjang dipecah dan dipindahkan ke baris berikutnya */
    overflow-wrap: break-word;
    text-align: start;
    /* border: 1px solid #000; */
}
.infocar p {
    font-size: smaller;
}

/* Tombol */
.button-blue {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.button-blue:hover {
    background-color: #0056b3;
}

/* why */
.kontena {
    max-width: auto;
    position: relative;

    margin: 5%;
    /* border: 2px solid #ff0095; */
}

.kontena h1 {
    text-align: center;
}

.isikonten {
    display: flex;
    justify-content: space-between;

}

.bungkuskonten {
    flex: 1;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cardwhy {
    width: auto;
    align-self: center;
    height: auto;
    border: 2px solid #50368c;
    padding: 25px;
    margin: 30px;
    margin-top: -50px;
    padding-top: 60px;
    max-width: 500px;

    border-radius: 20px;
}

.cardwhy h3 {
    text-align: center;
}

.slider {
    width: 100%;
    max-width: 1000px;
    margin: 10px;
    display: flex;
    justify-content: center; /* Menyelaraskan secara horizontal (di tengah) */
    align-items: center;
}

.cardwhy p {
    font-size: small;
    text-align: justify;
}

.imgwhy {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    width: 120px;
}

.panjang {
    position: absolute;
    left: 1100px;
    top: 35px;

    width: 240px;
    object-fit: cover; /* Menyesuaikan gambar agar sesuai container */
    border-radius: 10px;
    z-index: 0;
}
.tambahhh {
    position: absolute;
    left: 1000px;
    top: 450px;

    width: 160px;
    object-fit: cover; /* Menyesuaikan gambar agar sesuai container */

    z-index: 0;
}
.tambahh {
    position: absolute;
    top: 400px;
    left: 45px;
    width: 20px;
    object-fit: cover; /* Menyesuaikan gambar agar sesuai container */

    z-index: 0;
}
.ingkar {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 100px;
    object-fit: cover; /* Menyesuaikan gambar agar sesuai container */
    border-radius: 10px;
    z-index: 0;
}

/* General Styling for the Container */
.infobiru {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;
    background-color: #5677cb;
    /* Adjust background color as needed */
    padding: 100px;

    @media (max-width: 1000px) {
        flex-direction: column;
        text-align: center;
        padding: 70px;
    }
}

/* Styling for the Image */
.infobiru img {
    z-index: 1 !important;
    max-width: 500px;

    height: auto;
    flex: 1 1 40%;
    /* Takes 40% of the space on larger screens */
    margin-right: 20px;
    /* Space between image and text */
    border-radius: 8px;
    @media (max-width: 1000px) {
        margin-right: 0;
        margin-bottom: 20px;
        flex: 1 1 100%;
        /* Image takes full width */
    }
}

/* Styling for the Text Content */
.infobirudetail {
    flex: 1 1 60%;
    /* Takes 60% of the space on larger screens */
    color: #eee;


    min-width: 300px;
    @media (max-width: 1000px) {
        flex: 1 1 100%;
        /* Text also takes full width */
    }
}

@media (max-width: 600px) {
    .infobirudetail h2 {
        font-size: 1.5rem;
    }

    .infobirudetail p {
        font-size: 0.9rem;
    }

    .btn {
        width: 100%;
        /* Make the button full-width on small screens */
    }

    .infobiru img {
        max-width: 220px;
        height: auto;
        flex: 1 1 40%;
        /* Takes 40% of the space on larger screens */
        margin-right: 20px;
        /* Space between image and text */
        border-radius: 8px;
    }

    .infobirudetail {
        flex: 1 1 60%;
        /* Takes 60% of the space on larger screens */
        color: #eee;
    
    }
}

.container-slide {
    width: 75%;

    align-self: center;
    height: auto;
    margin-left: 20px;
    /* background-color: #b1b1b1; */
    /* border: 2px solid #99ff00; */
    border-radius: 10px;
    @media (max-width: 1000px) {
        width: 60%;
    }
    @media (max-width: 800px) {
        width: 100%;
    }
}

.card-rating {
    /* width: 35%; */
    /* height: 100%; */
    margin: 20px;
    width: 10px;
    display: flex;
    flex-direction: column;

    padding: 20px;

    height: 200px;

    background-color: #dadae4;
    border-radius: 20px;
}

.terbang {
    position: absolute;
    top: -190px;

    left: -170px;
    width: 320px;

    border-radius: 10px;
}

@media (max-width: 800px) {
    .terbang {
        position: absolute;
        left: -150px;

        width: 240px;
    }
}
@media (max-width: 500px) {
    .terbang {
        position: absolute;
        left: -80px;
        top: -100px;

        width: 160px;
    }
}

.toaterbang {
    position: absolute;
    top: -130px;
    left: 80%;
    width: 140px;

    border-radius: 10px;
}
@media (max-width: 700px) {
    .toaterbang {
        width: 100px;
        left: 75%;
    }
}

.jet {
    position: absolute;
    left: 80%;
    width: 180px;
    top: -100px; /* Menempatkan gambar di atas (bagian atas container) */
    z-index: 1;

    border-radius: 10px;
    @media (max-width: 1000px) {
        width: 170px;
        left: 75%;
    }
    @media (max-width: 600px) {
        top: -50px;

        width: 100px;
        left: 70%;
    }
}

@media (max-width: 375px) {
    .konten {
        max-width: auto;
        position: relative;
        margin: 0%;
        padding-bottom: 200px;
    }

    .konten h1 {
        font-size: small;
        text-align: center; /* Rata tengah secara horizontal */
    }

    .cardwhy h3 {
        font-size: small;
    }

    .cardwhy p {
        font-size: small;
    }

    /* .isikonten {
        max-width: auto;
        display: flex;

        justify-content: space-between;
        border: 2px solid #1d5b77;
    } */

    .cardwhy {
        width: auto;
        height: auto;
        border: 2px solid #50368c;
        padding: 15px;
        margin: 5px;
        padding-top: 40px;
        max-width: 200px;

        border-radius: 20px;
    }
    .imgwhy {
        position: relative;
        top: 20px;
        right: 0;
        width: 60px;
    }
}

/* gambar */

.image-galeri {
    margin: 30px;
    max-width: 300px;
    min-width: 250px;

    /* Atur lebar container */
    height: 200px !important;
    /* Atur tinggi container */
    overflow: hidden;
    /* Sembunyikan bagian gambar yang keluar dari container */
    /* border: 2px solid #000; */
    /* Tambahkan border */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #f0f0f0; */
    /* Warna latar belakang */
}

.image-galeri img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Menghapus celah kecil di bawah gambar */
}

.konten {
    position: relative;
    max-width: auto;
    display: flex;

    flex-direction: column;
    margin: 5%;
    text-align: center;
    /* border: 2px solid #ff0095; */
}
.kontendua {
    display: flex;
    flex-direction: row;
}

.imageqwertyu {
    width: 220px; /* Make images responsive */
    height: 360px; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
    overflow: hidden;
    @media (max-width: 800px) {
        width: 170px;
        height: 170px;
    }
}
.imageqwertyu img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive adjustments */
@media (max-width: 1000px) {
    .image-item {
        flex: 1 1 calc(50% - 20px); /* 2 images per row on medium screens */
    }
}

@media (max-width: 600px) {
    .image-item {
        flex: 1 1 100%; /* 1 image per row on small screens */
    }
}

.info-text {
    width: 100%;
    padding-right: 20px;
}

.info-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.info-text p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

.slider-container {
    width: 55%;
}

.cardd-slider .cardd {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background-color: #fff;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cardd-slider .cardd img {
    width: 250px;
    height: 150px;
    margin-right: 20px;
    border-radius: 8px;
    justify-content: center;
    object-fit: cover;
}

.cardd-slider .cardd-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.cardd-slider .cardd-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

.cardd-slider .cardd-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 15px;
}

.cardd-slider .cardd-content button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cardd-slider .cardd-content button:hover {
    background-color: #0056b3;
}

/* Media Queries for Responsive Design */

/* Tablet (between 768px and 1024px) */
@media (max-width: 1024px) {
    .info-text {
        width: 90%;
        text-align: center;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .slider-container {
        width: 90%;
    }

    .cardd-slider .cardd img {
        width: 250px;
        padding-left: auto;
        padding-right: auto;
        height: 150px;
    }

    .cardd-slider .cardd-content h3 {
        font-size: 1.3rem;
    }

    .cardd-slider .cardd-content p {
        font-size: 0.9rem;
    }
}

/* Mobile (below 768px) */
@media (max-width: 768px) {
    .info-text {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
        text-align: center;
    }

    .slider-container {
        width: 100%;
    }

    .cardd-slider .cardd {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cardd-slider .cardd img {
        padding-left: auto;
        padding-right: auto;
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }

    .cardd-slider .cardd-content h3 {
        font-size: 1.2rem;
    }

    .cardd-slider .cardd-content p {
        font-size: 0.9rem;
    }

    .cardd-slider .cardd-content button {
        width: 100%;
    }
}

/* Smaller mobile screens (below 480px) */
@media (max-width: 480px) {
    .cardd-slider .cardd img {
        width: 100px;
        padding-left: auto;
        padding-right: auto;
        height: 100px;
    }

    .cardd-slider .cardd-content h3 {
        font-size: 1rem;
    }

    .cardd-slider .cardd-content p {
        font-size: 0.8rem;
    }

    .cardd-slider .cardd-content button {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

.lastkont {
    align-items: center;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    /* border: 2px solid #99ff00; */
    @media (max-width: 800px) {
        display: flex !important;

        flex-direction: column-reverse !important;
    }
}