/* Gaya Umum */
body {
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #ffffff;
}

h1,
h2,
p {
    margin: 0;
    padding: 0;
}

/*!* Font Google *!*/
.fredoka {
    font-family: "Fredoka", serif;
    /*font-family: Poppins, sans-serif;*/
}

/* Custom Color */
.text-purple {
    color: #d42acc;
}

.bg-purple {
    background-color: #d42acc;
}

.btn-purple {
    background-color: #6a1b9a;
    color: white;
    border-radius: 0%;
    padding: 10px 20px;
}

.btn-purple:hover {
    color: white;
    background-color: #d42acc;
}

.btn-violet {
    background-color: #d42acc;
    color: white;
    border-radius: 0%;
    padding: 10px 20px;
}

.border-purple {
    border: 1px solid #6a1b9a;
}

.border-bottom-purple {
    border-bottom: 1px solid #dee2e6;
    border-color:#d42acc !important;
    border-radius: 10% 30%
}

/* Custom Circle */
.circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Mengurangi jarak antar ikon dan teks */
}

.circle {
    width: 80px;
    height: 80px;
    background-color: var(--circle-color, #f0f0f0); /* Warna lingkaran bisa dikustom */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px; /* Pusatkan dan beri jarak */
}

.circle i {
    font-size: 32px; /* Ukuran ikon */
    color: #333; /* Warna ikon */
}

h2 {
    font-size: 18px;
}

/* Navigation Bar */
.navbar {
    background-color: #d42acc;
    color: white !important;
}

.navbar a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

.navbar a:hover {
    color: #ddd;
    text-decoration: none;
}

.nav-links {
    display: flex;
    flex: 1;
    justify-content: center;
}

.auth-links {
    margin-left: auto;
}
/*
.navbar a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

.navbar a:hover {
    color: white;
    text-decoration: none;
} */

/* Header */
header {
    padding-top: 6rem;
    padding-bottom: 50px;
    text-align: center;
    color: black;
    height: auto;
}

header h1 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 120px;
}
/* id reason */
#reason {
    background-image: url(../../../img/bg-utama.png);
    background-size: cover; /* Menyesuaikan ukuran asli gambar */
    background-repeat: no-repeat; /* Mencegah gambar diulang */
    background-position: center; /* Menempatkan gambar di tengah */
}

/* Kontainer Utama */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Judul */
.container h1 {
    margin-bottom: 10px;
}

/* Kontainer Paket Bimbel */
.course-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Card Favorit lebih tinggi */
.course-container .favorite-card {
    min-height: 500px; /* Bisa diubah sesuai kebutuhan */
}

.course-container .border-purple-favorite {
    border: 4px solid #6a1b9a;
}

.course-container .bg-purple {
    border: 1px solid #6a1b9a;
    border-radius: 0;
    background-color: #6a1b9a;
    color: white;
}

.course-container .fixed-image {
    width: 100%;
    height: 200px; /* Sesuaikan tinggi gambar */
    object-fit: cover;
}

.course-package {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    width: 200px;
    height: max-content;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-align: left;
}

.course-package:hover {
    transform: translateY(-5px);
}

.course-package h2 {
    font-size: 1.5em;
    color: #b500fd;
    margin-bottom: 10px;
}

.course-package p {
    color: #515052;
    margin: 8px 0;
}

.course-package img {
    max-width: 100%;
    border: #2c3e50 1px solid;
    border-radius: 8px;
    margin-bottom: 10px;
}

.course-package button {
    background-color: #7400a1;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.course-package button:hover {
    background-color: #b500fd;
}

/* Footer */
footer {
    background-color: #d42acc;
    color: white;
    padding: 30px 0px;
    text-align: center;
}

.course-container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.course-package2 {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-align: left;
}

.course-package2:hover {
    transform: translateY(-5px);
}

.course-package2 h2 {
    font-size: 1.5em;
    color: #b500fd;
    margin-bottom: 10px;
}

.course-package2 p {
    color: #515052;
    margin: 8px 0;
}

.course-package2 img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

/*** Job Listing ***/
.nav-pills .nav-item .active {
    border-bottom: 2px solid #b500fd;
}

.job-item {
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transition: .5s;
}

.job-item:hover {
    border-color: rgba(0, 0, 0, .08);
    box-shadow: none;
}

/* Testimonial Sections */
.testimonial-section {
    padding: 100px 6rem;
    text-align: center;
    background-color: #f5f5f5;
    margin-bottom: 2px;
}

.testimonial-section h2 {
    font-size: 2rem;
    color: #6a1b9a;
    margin-bottom: 20px;
}

.testimonial-section.bg-purple {
    background-color: #6a1b9a;
}

/* Testimonial Container */
.testimonial-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.testimonial-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
    padding: 20px;
    text-align: center;
}

.testimonial-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.testimonial-item h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

.testimonial-item p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 10px;
}

.card-img {
    width: 100%;  /* Mengisi lebar card */
    height: 100%; /* Mengisi tinggi card */
    object-fit: cover; /* Menampilkan gambar secara utuh tanpa terpotong */
    background-color: #f8f9fa; /* Memberikan background agar tidak kosong */
    padding: 2px; /* Opsional, memberi jarak agar tidak menempel */
}

.rating {
    font-size: 1.2rem;
    color: #FFD700;
}

/* Video Testimoni */
.testimonial-item iframe {
    max-width: 100%;
    height: 200px;
    border: none;
    border-radius: 8px;
}

/* Testimonial Slider */
.testimonial-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 20px;
}

.testimonial-item {
    flex-shrink: 0;
    width: 250px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.testimonial-slider::-webkit-scrollbar {
    height: 8px;
}

.testimonial-slider::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 8px;
}

/* Testimoni Pengajar */
.testimonial-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* Card Siswa */
.card-siswa {
    box-shadow: 0 4px 8px 0 rgba(169, 12, 155, 0.2);
    /*transition: 0.3s;*/
    /*width: 40%;*/
    border: #7400a1 3px solid;
    border-radius: 10px;
}

.card-siswa:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.avatar-cover {
    width: 100%;
    height: 180px; /* bisa disesuaikan */
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa; /* fallback bg */
}

/*
.container {
    padding: 2px 16px;
} */

.container-fluid {
    width: 100%;
    padding-right: 6rem;
    padding-left: 6rem;
    margin-right: auto;
    margin-left: auto;
}
/* Google Map */
.map-container {
    padding: 100px 6rem;
    text-align: center;
    background-color: #f5f5f5;
    margin-bottom: 2px;
}

.map-container iframe {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Styling untuk alert */
.alert {
    padding: 20px;
    /*background-color: #4CAF50;*/
    /* Warna hijau untuk success */
    color: #000;
    margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
    /* Agar posisi close button bisa diatur */
}

/* Close button (tanda silang) */
.closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #000;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
}

.closebtn:hover {
    color: #f44336;
    /* Warna merah saat hover */
}

.is-invalid {
    border-color: #dc3545 !important;
}
.invalid-feedback {
    color: #dc3545;
}

.pagination {
    --bs-pagination-color: rgb(116, 0, 161); /* Primary color */
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: rgb(116, 0, 161, 0.5); /* Softer border */
    --bs-pagination-border-radius: var(--bs-border-radius);

    --bs-pagination-hover-color: rgb(116, 0, 161);
    --bs-pagination-hover-bg: rgb(116, 0, 161, 0.1); /* Light hover background */
    --bs-pagination-hover-border-color: rgb(116, 0, 161, 0.7);

    --bs-pagination-focus-color: rgb(116, 0, 161);
    --bs-pagination-focus-bg: rgb(116, 0, 161, 0.2);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(116, 0, 161, 0.5);

    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: rgb(116, 0, 161);
    --bs-pagination-active-border-color: rgb(116, 0, 161);

    --bs-pagination-disabled-color: rgb(116, 0, 161, 0.4);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: rgb(116, 0, 161, 0.3);
}

/* Jika layar lebih kecil dari 992px (md) atau 768px (sm), ubah padding */
@media (max-width: 991.98px) { /* Untuk md dan lebih kecil */
    .container-fluid, .testimonial-section {
        padding-right: 100px;
        padding-left: 100px;
    }
}

@media (max-width: 767.98px) { /* Untuk sm dan lebih kecil */
    .container-fluid, .testimonial-section {
        padding-right: 50px; /* Opsional: Bisa dikurangi lebih kecil */
        padding-left: 50px;
    }
}