/* Font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Palanquin:wght@100;200;300;400;500;600;700&display=swap");

/* Mendefinisikan variabel warna di :root */
:root {
     --main-color: #8f2529;
    --secondary-color: #64748b;
    --dark-color: #7f1d1d;
    --gold-color: #f1c40f;
    --gold2-color: #ffce55;
    --gradient1-color: #8f2529;
    --gradient2-color: #ff0000;
    --dark2-color: #4a0000;
    --graylight-color: #f3f4f6;
    --swiper-navigation-size: 30px; /* Mengatur ukuran tombol */
    --swiper-navigation-color: rgba(0, 0, 0, 0.5);
    --swiper-navigation-top-offset: 50%; /* Posisi vertikal tombol navigasi */
    --swiper-navigation-sides-offset: 20px; /* Jarak horizontal tombol navigasi */
    --swiper-pagination-color: rgba(
        255,
        255,
        255,
        0.5
    ); /* Warna hitam dengan transparansi 50% */
    --swiper-pagination-bullet-size: 8px; /* Ukuran bullet */
    --swiper-pagination-bullet-inactive-color: rgba(
        0,
        0,
        0,
        0.5
    ); /* Warna bullet yang tidak aktif dengan transparansi 50% */
    --swiper-pagination-bullet-inactive-opacity: 0.5; /* Opaque bullet yang tidak aktif */
    --swiper-pagination-bullet-opacity: 1; /* Opaque bullet yang aktif */
}

/* MT Hero */
@media (max-width: 992px) {
    .custom-margin {
        margin-top: 3rem; /* mt-5 setara dengan 3rem dalam Bootstrap */
    }
}

/* Button */
.custom-btn {
    background-image: linear-gradient(
        45deg,
        #ef4444,
        #500b24
    ); /* Gradient warna latar belakang */
    border: none; /* Hapus border default */
    color: #ffffff; /* Warna teks */
}

.custom-btn:hover {
    background-image: linear-gradient(
        45deg,
        #ef4444,
        #500b24
    ); /* Gradient saat hover */
    border-color: #ffce55; /* Warna border saat hover */
}


/* Menggunakan variabel warna */
body {
    font-family: "Montserrat", sans-serif; /* Font utama untuk seluruh dokumen */
    font-size: 16px; /* Ukuran font default */
    background-color: var(--graylight-color);
}

@media (min-width: 992px) {
    img.round-bg {
        max-width: 500px;
    }
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

.navbar {
    background: linear-gradient(
        180deg,
        var(--gradient1-color),
        var(--gradient2-color)
    ) !important;
}

.nav-link:hover {
    color: #fff; /* Ubah warna sesuai kebutuhan */
}

.hero {
    padding: 2rem 1rem;
    background: linear-gradient(
        0deg,
        var(--gradient1-color),
        var(--gradient2-color)
    ) !important;
}

/* Mengatur background section menjadi graylight-color */
.jenis-bus {
    background-color: var(--graylight-color);
}

/* CSS Kustom untuk translate-y */
.translate-y-custom {
    transform: translateY(-10px); /* Sesuaikan dengan kebutuhan */
}

.card_tujuan {
    width: 100%;
    background-color: #ffffff;
    border-radius: 50px;
    position: relative;
    top: -3rem;
    margin-left: 10px;
    margin-right: 10px;
    box-sizing: border-box; /* Pastikan padding dan border dihitung dalam width */
}

.sub-bus:hover {
    background-color: #4a0000 !important; /* Merah tua */
}

/* .sub-bus a.active-link {
    background-color: #333333;
    color: #ffffff;
    font-weight: bold;
} */

@media (min-width: 576px) and (max-width: 991px) {
    .rounded-start-md {
        border-top-left-radius: 25rem; /* Sesuaikan dengan kebutuhan */
        border-bottom-left-radius: 25rem; /* Sesuaikan dengan kebutuhan */
    }
    .rounded-end-md {
        border-top-right-radius: 25rem; /* Sesuaikan dengan kebutuhan */
        border-bottom-right-radius: 25rem; /* Sesuaikan dengan kebutuhan */
    }
    .mt-md {
        margin-top: 3px;
    }
}

@media (max-width: 576px) {
    .no-rounded-sm {
        border-radius: 0 !important;
    }
    .no-border-sm {
        border: none !important;
    }
    .border-top-sm {
        border-top: 1px solid #ffffff !important; /* Sesuaikan warna dan ketebalan border sesuai kebutuhan */
    }
}

.tentang {
    margin-top: 0;
    background-color: var(--graylight-color);
    margin-bottom: 50px;
}

.alasan {
    padding: 50px 0 0 0;
    background: linear-gradient(
        180deg,
        var(--gradient1-color),
        var(--gradient2-color)
    ) !important;
    display: flex;
    justify-content: center; /* Mengatur elemen secara horizontal */
    align-items: center; /* Mengatur elemen secara vertikal */
    text-align: center; /* Mengatur teks di dalam elemen */
}

@media (min-width: 320px) and (max-width: 992px) {
    .order-sm-1 {
        order: 3 !important; /* Pindahkan ke baris ketiga */
    }
    .margin-sm {
        margin-top: 25px;
    }
}
.flex-container {
    display: flex;
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    padding: 10px;
    align-items: center; /* Memusatkan konten secara vertikal */
    gap: 10px; /* Menambahkan jarak antara gambar dan konten grid */
}

.flex-container img {
    margin-right: 15px; /* Menambahkan jarak antara gambar dan grid */
    margin-left: 15px;
}

.tarif {
    padding-top: 50px;
}

.gradient-text {
    background: linear-gradient(45deg, #500b24, #ef4444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.tarif .accordion {
    box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.5);
}

/* .tarif .accordion .accordion-item {
    border-color: #efa31d;
} */

#accordionExample .accordion-item .accordion-header .accordion-button {
    background: linear-gradient(
        40deg,
        var(--gradient1-color),
        var(--gradient2-color)
    );
    color: #ffffff;
    box-shadow: none;
}

#accordionExampleOne .accordion-item .accordion-header {
    background: primary;
}

.accordion-body {
    padding: 0 !important;
    margin: 20px 50px;
}

td {
    font-size: 14px; /* Atur ukuran sesuai kebutuhan */
}

.flex-container-tarif {
    display: flex;
    justify-content: center; /* Mengatur elemen secara horizontal */
    align-items: center; /* Mengatur elemen secara vertikal */
    text-align: center; /* Mengatur teks di dalam elemen */
}

.big-text {
    font-size: 19px;
}

.flex-container-tarif p {
    font-size: 14px;
}

@media (min-width: 992px) {
    .accordion-button::after {
        display: none;
    }
}

@media (max-width: 768px) {
    /* sm breakpoint */
    .border-sm-none {
        border: none !important; /* Hilangkan border-end */
    }
    .border-sm-top {
        border-top: 1px solid #000 !important; /* Tambahkan border-top pada layar kecil */
        padding: 0px 10px 0 10px;
    }
}

/* testimoni */
.testimoni-section {
    /* background-image: url("/assets/img/bg-testimoni.png");
    -webkit-background-size: cover;
    background-size: cover; */
    background-image: linear-gradient(45deg, #ef4444, #500b24);
    margin-top: 50px;
    padding-top: 50px;
    background-position: center;
    min-height: 100vh;
}

#slider {
    margin-top: 5%;
}

.img-area {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
}

.img-area img {
    width: 100%;
}

/* .content-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
} */

/* Kontainer Testimoni */
.content-area {
    display: flex; /* Tambahan: Menggunakan Flexbox untuk kontainer */
    flex-direction: column; /* Tambahan: Konten diatur dalam kolom */
    justify-content: center; /* Tambahan: Menjaga konten tetap di tengah */
    align-items: center; /* Tambahan: Menjaga konten tetap di tengah secara horizontal */
    min-height: 350px; /* Menetapkan tinggi minimum */
}

.content {
    text-align: center;
    padding: 40px;
    color: #fff;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.content h2 {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.content p {
    line-height: 1.9;
}

.owl-dots {
    text-align: center;
    margin-top: 3%;
}

.owl-dot {
    display: inline-block;
    height: 20px !important;
    width: 20px !important;
    background-color: #ddd !important;
    opacity: 0.9;
    margin: 0 10px;
    border-radius: 50%;
}

.owl-dot.active {
    background-color: #fff !important;
}

@media (max-width: 576px) {
    .jenis-bus a {
        font-size: 0.75rem; /* Ukuran font kecil */
    }
}

/* Kontainer Testimoni */
.content-area-bus {
    display: flex;
    justify-content: center;
}

.swiper {
    /* width: 600px; */
    height: 317px;
}

.swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.card-slider {
    min-height: 510px;
    border-radius: 20px;
    border: 0.5px solid rgba(0, 0, 0, 0.4); /* Border hitam transparan */
    transition: background-color 0.3s, box-shadow 0.3s; /* Menambahkan transisi untuk efek smooth */
}

.card-slider:hover {
    background-color: rgba(
        255,
        255,
        255,
        1
    ); /* Warna background putih saat hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Efek shadow saat hover */
}

.desc-bus {
    margin: 20px;
}

.list-bus {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.list-bus img {
    margin-right: 13px;
    width: 23px;
}

.list-bus p {
    font-size: 13px;
    margin: 0;
}

.detail-bus {
    font-size: 14px;
    background-color: var(--main-color);
    color: #fff;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
    display: block;
    text-align: center;
    transition: background-color 0.3s, box-shadow 0.3s; /* Transisi yang smooth */
}

.detail-bus:hover {
    background-color: var(
        --dark2-color
    ); /* Mengubah warna background saat hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Menambahkan efek shadow saat hover */
}

.swiper-button-prev,
.swiper-button-next {
    color: var(
        --swiper-navigation-color
    ); /* Menggunakan variabel untuk warna */
    width: var(
        --swiper-navigation-size
    ); /* Menggunakan variabel untuk ukuran */
    height: var(
        --swiper-navigation-size
    ); /* Menggunakan variabel untuk ukuran */
    top: var(--swiper-navigation-top-offset); /* Mengatur posisi vertikal */
    left: var(
        --swiper-navigation-sides-offset
    ); /* Mengatur posisi horizontal kiri */
    right: var(
        --swiper-navigation-sides-offset
    ); /* Mengatur posisi horizontal kanan */
}

.swiper-pagination-bullet {
    background-color: var(
        --swiper-pagination-color
    ) !important; /* Terapkan warna dengan transparansi */
}

.swiper-pagination-bullet-inactive {
    background-color: var(
        --swiper-pagination-bullet-inactive-color
    ) !important; /* Terapkan warna dengan transparansi untuk bullet tidak aktif */
    opacity: var(
        --swiper-pagination-bullet-inactive-opacity
    ) !important; /* Terapkan opacity untuk bullet tidak aktif */
}

.card-slider-redwhitestar {
    border-radius: 20px;
    border: 0.5px solid rgba(0, 0, 0, 0.4); /* Border hitam transparan */
    transition: background-color 0.3s, box-shadow 0.3s; /* Menambahkan transisi untuk efek smooth */
}

.card-desc {
    border-radius: 20px;
    border: 0.1px solid rgba(0, 0, 0, 0.4); /* Border hitam transparan */
    transition: background-color 0.3s, box-shadow 0.3s; /* Menambahkan transisi untuk efek smooth */
    padding: 15px;
}

.card-desc:hover {
    background-color: rgba(
        0,
        0,
        0,
        0.07
    ); /* Warna hitam transparan saat hover */
}

.card-desc a:hover {
    background-color: var(--dark-color);
    color: white;
}

.btn-reserv-pariwisata {
    background-color: #f3f4f6; /* Warna latar belakang */
    border: 2px solid #4a0000; /* Border berwarna #991b1b */
    color: #4a0000; /* Warna teks */
    font-size: 0.575rem; /* Ukuran font kecil (sm) */
}

.btn-reserv-pariwisata:hover {
    background-color: #f8d7da; /* tWarna latar belakang saat hover (opsional) */
    color: #991b1b; /* Warna teks tetap saat hover */
}

.desc-harga {
    font-size: 12px;
    text-align: center;
    font-weight: ;
}

@media (min-width: 320px) and (max-width: 992px) {
    .col-lg-6 {
        margin-top: 10px; /* Menambahkan margin atas sebesar 10px */
        margin-bottom: 10px; /* Menambahkan margin bawah sebesar 10px */
    }

    .card-desc {
        padding: 20px; /* Atur padding sesuai kebutuhan */
    }
}