@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* Definisi Warna berdasarkan gambar */
    --maroon: #800000;
    --maroon-dark: #5a0000;
    --yellow: #FBC02D;
    --green: #7CB342;
    --blue: #039BE5;
    --light-grey: #f9f9f9;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
}

/* KUNCI UTAMA: Container Kustom 1250px
   Bootstrap default container-xl adalah 1140px, xxl adalah 1320px.
   Kita buat sendiri agar pas 1250px.
*/
.container-custom {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1300px) { /* Hanya terapkan di layar besar */
    .container-custom {
        max-width: 1250px; 
    }
}

/* Utility Colors Custom */
.text-maroon { color: var(--maroon) !important; }
.text-yellow { color: var(--yellow) !important; }
.bg-maroon { background-color: var(--maroon) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-green { background-color: var(--green) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-light-grey { background-color: var(--light-grey) !important; }

/* Navbar */
.navbar-nav .nav-link {
    color: #333;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active-red {
    color: var(--maroon) !important;
}

/* Buttons */
.btn-maroon {
    background-color: var(--maroon);
    color: white;
    border: none;
    transition: all 0.3s ease;
}
.btn-maroon:hover {
    background-color: var(--maroon-dark);
    color: white;
    transform: translateY(-2px);
}

/* .card-img-top{
    height: 100%;
} */

/* Cards hover effect */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Testimonial Icons */
.text-yellow .fas.fa-star {
    margin-right: 1px;
}

/* Footer Social Links Hover */
footer a:hover {
    opacity: 0.8;
    text-decoration: underline !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center;
        padding-top: 1rem;
    }
    .display-5 {
        font-size: 2.5rem; /* Ukuran font judul lebih kecil di tablet/HP */
    }
}