/* ==================== HERO SLIDER ==================== */
.hero-slider {
    position: relative;
}

.hero-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-slide.active {
    display: flex;
    opacity: 1;
}

.slider-dot.active {
    background-color: #fdc900;
    transform: scale(1.3);
}

/* Floating animation for hero images */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.hero-float {
    animation: heroFloat 4s ease-in-out infinite;
}


/* ==================== FLIP CARDS ==================== */
.flip-card {
    perspective: 1000px;
    height: 280px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateX(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
}

.flip-card-front {
    background-size: cover;
    background-position: center;
    background-color: #c18e62;
}

.flip-card-back {
    transform: rotateX(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
}


/* ==================== SCROLL ANIMATIONS ==================== */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 640px) {
    .flip-card {
        height: 220px;
    }

    .flip-card-back h3 {
        font-size: 0.875rem;
    }

    .flip-card-back p {
        font-size: 0.75rem;
    }
}