/**
 * Homepage Styles
 * Styles khusus untuk halaman homepage
 * Mengimpor modul-modul yang diperlukan untuk homepage
 */

/* Import modul dasar */
@import '../base/_variables.css';
@import '../base/_reset.css';
@import '../base/_animations.css';

/* Import komponen yang digunakan di homepage */
@import '../components/_utilities.css';
@import '../components/_client-logos.css';
@import '../components/_forms.css';
@import '../components/_buttons.css';

/* Import layout */
@import '../layouts/_footer.css';

/* Styles khusus homepage bisa ditambahkan di bawah ini */
/* Contoh: custom styles untuk section tertentu di homepage */

/* Penanda Navigasi Aktif (jika digunakan di homepage) */
/*
nav a[href="/"].desktop-link,
#mobile-menu a[href="/"].mobile-link {
   color: var(--color-primary);
   font-weight: 600;
}
*/

/* Services Section Hover Effects */
.services-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.services-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.services-card.bg-white:hover {
    background-color: var(--color-third) !important;
    color: var(--color-text-on-dark) !important;
}

.services-card.bg-white:hover h3,
.services-card.bg-white:hover p {
    color: var(--color-text-on-dark) !important;
}

.services-card.bg-white:hover .bg-gray-100 {
    background-color: var(--color-primary) !important;
}

.services-card.bg-white:hover img {
    filter: brightness(0) invert(1);
}


.services-learn-more {
    transition: all 0.3s ease;
}

.services-learn-more:hover {
    transform: scale(1.05);
    background-color: var(--color-third) !important;
    color: var(--color-text-on-dark) !important;
}

/* Why Choose Us Card Hover Effects */
.why-choose-us-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.why-choose-us-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    background-color: var(--color-primary) !important;
}

.why-choose-us-card:hover h3,
.why-choose-us-card:hover p {
    color: var(--color-text-on-primary) !important;
}

.why-choose-us-card:hover .bg-primary {
    background-color: var(--color-third) !important;
}

.why-choose-us-card:hover .text-third {
    color: var(--color-primary) !important;
}

.why-choose-us-card:hover svg {
    animation: pulse 0.5s ease-in-out;
}