body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom animation for hero text */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content h1 {
    animation: fadeInDown 0.8s ease-out forwards;
}

.hero-content p {
    animation: fadeInDown 0.8s ease-out 0.3s forwards;
    opacity: 0; /* Start hidden for animation */
}

.hero-content div {
    animation: fadeInDown 0.8s ease-out 0.6s forwards;
    opacity: 0; /* Start hidden for animation */
}

/* Active Nav Link Style */
.nav-link.nav-link-active {
    color: #2563EB; /* blue-600 */
    border-bottom-color: #2563EB;
}

/* FAQ accordion animation */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.faq-item.open .faq-answer {
    max-height: 15rem; /* Adjust if content is taller */
    padding-top:1.5rem;
    padding-bottom:1.5rem;
}

.faq-icon .fa-minus { display: none; }
.faq-icon .fa-plus { display: block; }
.faq-item.open .faq-icon .fa-minus { display: block; }
.faq-item.open .faq-icon .fa-plus { display: none; }


/* Gallery filter styles */
.filter-btn.active {
    background-color: #2563EB; /* blue-600 */
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.gallery-item {
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    width: 100%;
}

.gallery-item.hidden {
    transform: scale(0.9);
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: none;
}


/* Testimonial slider */
.testimonial-slide {
    display: none;
    animation: fade 1.5s;
}
.testimonial-slide.active {
    display: block;
}
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* Before and After Slider */
.before-after-container .before-image {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.before-after-container .slider-handle {
    left: 50%;
    transform: translateX(-50%);
}