.hero-block h1 {
    font-weight: 700;
    font-size: 2.8rem;
}

.features-block h4 {
    font-weight: 600;
}

.cta-block {
    background: linear-gradient(45deg, #5f77fb, #9bcffb);
}


/* Hero CSS */
.hero-section {
    background: url("/static/uploads/2f88a55495c94e87a1ee234eaf6ca6d7_hompage-hero.png") no-repeat center center;
    background-size: auto;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 60px 20px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* end Hero CSS */

/* Featured css */
.featured-section {
    padding: 50px 15px;
}

.featured-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: #343a40;
}

/* Flip Card Styles */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 300px;
    height: 350px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

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

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

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

.flip-card-back {
    background-color: #343a40;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ---- Features enter animations ---- */

/* Base state before visible */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(70px) scale(0.95);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out,
        box-shadow 0.3s ease-out;
    transition-delay: var(--delay, 0s);
}

/* Direction-specific starting positions (more pronounced) */
.slide-in-left.animate-on-scroll {
    transform: translateX(-100px) scale(0.9);
}

.slide-in-right.animate-on-scroll {
    transform: translateX(100px) scale(0.9);
}

.slide-in-top.animate-on-scroll {
    transform: translateY(-100px) scale(0.9);
}

/* Visible state */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Ensure direction-specific variants also reset cleanly */
.slide-in-left.animate-on-scroll.visible,
.slide-in-right.animate-on-scroll.visible,
.slide-in-top.animate-on-scroll.visible {
    transform: translate(0, 0) scale(1);
}

/* Optional: subtle hover effect on the columns/cards to enhance interactivity */
.featured-section .col-md-3 .card-container {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.featured-section .col-md-3 .card-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* end features */



/* Row block defaults (can be overridden per block via custom CSS) */
.full-width-section {
    background: #ffffff !important;
    padding-top: 41px;
    padding-bottom: 83px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.5rem;
    text-align: center;
    color: #333;
    margin-bottom: 41px;
    letter-spacing: 1px;
}

.curved-text {
    font-family: 'Garamond', serif;
    font-style: italic;
    font-size: 2.25rem;
    text-align: center;
    width: 320px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.curved-text svg {
    width: 100%;
    height: 100%;
}

.curved-text text {
    fill: #333;
    letter-spacing: 0.5px;
}

.image-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
    position: relative;
}

.image-text-wrap.center {
    margin-top: -83px;
}

.image-text-wrap.center .curved-text {
    margin-top: 20px;
}

.image-text-wrap:not(.center) .curved-text {
    margin-bottom: 20px;
}

/* Responsive fix */
@media (max-width: 768px) {
    .full-width-section .d-flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 41px !important;
    }

    .image-text-wrap.center {
        margin-top: 0 !important;
        display: flex;
        flex-direction: column-reverse !important;
    }

    .image-text-wrap.center .curved-text {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
}



/* Latest Products Row */
.program-highlights-row {
    background: linear-gradient(to right, #cfbaf0, #ffffff 60%, #cfbaf0);
    color: #000;
    font-weight: 300;
    overflow: hidden;
    position: relative;
}

.program-highlights-row strong,
.program-highlights-row h5,
.program-highlights-row h6 {
    font-weight: 300 !important;
}

.program-highlights-row h5 {
    font-size: 16px;
}

.program-highlights-row h6 {
    font-size: 18px;
}

.carousel-track {
    display: flex;
    will-change: transform;
}

.highlight-item {
    flex: 0 0 20%;
    /* 5 items per row desktop */
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

.highlight-item img {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
    margin: 0 auto 10px;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .highlight-item {
        flex: 0 0 25%;
        /* 4 items per row */
    }
}

@media (max-width: 768px) {
    .highlight-item {
        flex: 0 0 33.33%;
        /* 3 per row */
    }
}

@media (max-width: 600px) {
    .highlight-item {
        flex: 0 0 100%;
        /* 1 per row mobile */
    }
}