html {
    scroll-behavior: smooth;
}


.nav-link {
    position: relative;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--primary);
}

.nav-link.active::after {
    width: 100%;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Ubuntu", serif;
    /* font-family: "Merriweather", serif; */
}

/* ========================== carousel ============================== */
/* Hide the carousel scrollbar while preserving scrolling */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Respect the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    #testimonialCarousel {
        scroll-behavior: auto;
    }
}

/* ========================== Intersection Observer ============================== */
/* Initial hidden state */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

/* Visible state */
.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Different animation variants */
.fade-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all .8s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all .8s ease;
}

.fade-up {
    opacity: 0;
    transform: translateY(40px);
}

.zoom-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all .8s ease;
}

.fade-left.in-view,
.fade-right.in-view,
.fade-up.in-view,
.zoom-in.in-view {
    opacity: 1;
    transform: none;
}

/* Staggered delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}
.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

.delay-800 {
    transition-delay: 0.8s;
}
.delay-900 {
    transition-delay: 0.9s;
}

.delay-1000 {
    transition-delay: 1s;
}

.delay-1100 {
    transition-delay: 1.1s;
}

.delay-1200 {
    transition-delay: 1.2s;
}

.delay-1300 {
    transition-delay: 1.3s;
}

.delay-1400 {
    transition-delay: 1.4s;
}

.delay-1500 {
    transition-delay: 1.5s;
}

@keyframes floatSlow {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

.float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}