/* Custom styles to extend Tailwind */

body {
    font-family: 'Inter', sans-serif;
    background-color: #fdfcf9;
    /* Warm Off-White Background */
    color: #334155;
    /* Slate Gray Text */
}


/* New custom color palette */

.bg-primary {
    background-color: #AA7A30;
}


/* Muted Gold */

.bg-accent {
    background-color: #F2CA6B;
}


/* Bright Gold */

.text-primary {
    color: #AA7A30;
}

.text-accent {
    color: #F2CA6B;
}

.border-primary {
    border-color: #AA7A30;
}

.border-accent {
    border-color: #F2CA6B;
}


/* **Tambahan untuk ring-color agar mengenali warna kustom Anda** */

.ring-primary {
    --tw-ring-color: #AA7A30 !important;
}

.ring-accent {
    --tw-ring-color: #F2CA6B !important;
}


/* Header scroll effect */

#header.scrolled {
    background-color: #0B1926;
    /* Very Dark Blue */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#header.scrolled #nav-logo-img,
#header.scrolled .nav-link,
#header.scrolled #mobile-menu-button {
    color: #fdfcf9;
}

#header.scrolled .nav-link:hover {
    color: #F2CA6B;
}


/* Animation for sections fading in on scroll */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Swiper.js Customization */

.hero-slider .swiper-slide {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 25, 38, 0.6);
}

.slide-content {
    position: relative;
    z-index: 10;
}

.swiper-button-next,
.swiper-button-prev {
    color: #F2CA6B;
    transition: transform 0.2s ease, color 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.2);
    color: #ffffff;
}

.swiper-pagination-bullet-active {
    background-color: #F2CA6B !important;
}


/* ===============================================
== [PERBAIKAN RESPONSIF LOGO MITRA] ==
===============================================
*/

.mitra-logo {
    /* Ukuran default untuk mobile (kecil) */
    height: 60px;
    /* 60px */
    width: auto;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}


/* Ukuran untuk Tablet (sedang) */

@media (min-width: 768px) {
    .mitra-logo {
        height: 80px;
        /* 80px */
    }
}


/* Ukuran untuk Desktop (besar) */

@media (min-width: 1024px) {
    .mitra-logo {
        height: 96px;
        /* 96px */
    }
}