@font-face {
    font-family: 'Hume';
    src: url('../css/font/hume.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html {
    font-family: 'Hume', sans-serif !important;
}

body {
    scroll-behavior: smooth;
}

/* Hero Section Background Images */
.hero-section-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    /* Mobile background image */
    background-image: url('/img/default/slide-small.jpg');
}

/* Desktop background image */
@media (min-width: 768px) {
    .hero-section-bg {
        background-image: url('/img/default/slide1.jpg');
    }
}

/* Overlay for text readability */
.hero-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(12, 74, 110, 0.6);
    /* sky-900 with opacity */
    z-index: 1;
}

.hero-section-bg>.container {
    position: relative;
    z-index: 2;
}

/* Animation for sections */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Keyframe Animations */
@keyframes fadeInUpDelay {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(56, 189, 248, 0);
    }
}

.animate-fadeInUpDelay {
    animation: fadeInUpDelay 0.8s ease-out 0.4s both;
}

.animate-pulse-slow {
    animation: pulse 2.5s infinite;
}

/* Card Hover Effect */
.card-hover {
    transition: box-shadow 0.3s ease-out;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* Adjust as needed */
    opacity: 1;
}

.faq-item.active .icon {
    transform: rotate(180deg);
}

.faq-parent .icon {
    transition: transform 0.3s ease-in-out;
}