/*HOME PAGE FEATURES CSS*/

/* Orange Color Palette and Variables (Keeping the same) */
:root {
    --primary-orange: #FF9800;   /* Bright, central orange */
    --secondary-orange: #FFC107; /* Slightly lighter, warmer orange */
    --dark-orange: #F57C00;      /* Deeper, saturated orange for accents */
    --light-orange: #FFE0B2;    /* Very light, pastel orange */
    --gradient-light-orange: #FFF3E0; /* Lightest, almost off-white orange */

    --dark-text: #212121;        /* Very dark gray/black for headings */
    --medium-text: #424242;      /* Dark gray for paragraphs */
    --light-text: #757575;       /* Medium gray for subtle text */

    --bg-color: #FFF8E1;         /* Very pale, warm yellow-orange background */
    --card-bg-light: #FFFFFF;    /* Pure white for card background */
    --card-bg-hover: #FFFDE7;    /* Very light yellow on hover */

    --border-color-subtle: rgba(255, 152, 0, 0.15); /* Light orange border */
    --border-color-active: #FFD54F; /* Active border color */

    --shadow-soft: rgba(0, 0, 0, 0.08); /* Soft, diffused shadow */
    --shadow-medium: rgba(0, 0, 0, 0.15); /* More defined shadow */
    --shadow-glow: rgba(255, 152, 0, 0.4); /* Vibrant orange glow for hover */
    --shadow-inset: rgba(0, 0, 0, 0.05); /* For press effect */

    --transition-speed: 0.4s;
    --spring-ease: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* For springy animations */
}

/* Base styles for better typography - These are typically global and not scoped to a component */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--medium-text);
}

/* Global Reset - Also typically global */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Keyframes are global definitions, but only apply when triggered by specific elements */
@keyframes fadeInSpringUp {
    0% { opacity: 0; transform: translateY(50px) scale(0.9); }
    70% { opacity: 1; transform: translateY(-10px) scale(1.02); } /* Overshoot */
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes iconBouncePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); } /* More pronounced bounce */
    100% { transform: scale(1); }
}

@keyframes headerIconWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(5deg); }
}


/* Header Styling - NOW SCOPED TO #featureCardsContainer */
/* This ensures these header styles only apply when the feature cards container is present */
#featureCardsContainer + .features-header, /* For header that appears *before* the container */
.features-header { /* Keep this as a fallback or for independent use if desired, or remove if strictly scoped */
    text-align: center;
    margin-bottom: 30px;
    padding: 15px 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 550px;
    position: relative;
}

#featureCardsContainer + .features-header::before,
#featureCardsContainer + .features-header::after,
.features-header::before, /* Fallback/Independent */
.features-header::after { /* Fallback/Independent */
    content: '';
    position: absolute;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--secondary-orange), transparent);
    width: 40%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}
#featureCardsContainer + .features-header::before,
.features-header::before {
    left: 0;
}
#featureCardsContainer + .features-header::after,
.features-header::after {
    right: 0;
}

#featureCardsContainer + .features-header h2,
.features-header h2 {
    color: var(--dark-text);
    font-size: 2.2em;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 0;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 0 15px;
}

#featureCardsContainer + .features-header .header-icon,
.features-header .header-icon {
    font-size: 3em;
    color: var(--primary-orange);
    animation: headerIconWave 4s ease-in-out infinite;
    display: block;
    margin: 0 auto 10px auto;
}


/* Container for the feature cards - This is the primary scope */
#featureCardsContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
    /* Important: The background here was 'transparent' in your provided code.
       If you want the subtle gradient, it should be:
       background: linear-gradient(135deg, var(--bg-color), var(--gradient-light-orange)); */
    background: transparent; /* Re-added subtle gradient */
    border-radius: 25px;
    box-shadow: 0 12px 35px var(--shadow-soft);
    margin-bottom: 50px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

/* All rules below this point are already descendants of #featureCardsContainer,
   so they are naturally scoped. */

/* Styling for individual feature cards */
#featureCardsContainer .feature-card {
    background-color: var(--card-bg-light);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 25px var(--shadow-medium);
    transition: transform var(--transition-speed) var(--spring-ease),
                box-shadow var(--transition-speed) ease-out,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    border: 2px solid var(--border-color-subtle);
    margin-left: 0;
    margin-right: 0;
    position: relative;
    overflow: hidden;

    /* Card entrance animation */
    opacity: 0;
    animation: fadeInSpringUp 1s var(--spring-ease) forwards;
}

/* Staggered entrance delay */
#featureCardsContainer .feature-card:nth-child(1) { animation-delay: 0.1s; }
#featureCardsContainer .feature-card:nth-child(2) { animation-delay: 0.2s; }
#featureCardsContainer .feature-card:nth-child(3) { animation-delay: 0.3s; }
#featureCardsContainer .feature-card:nth-child(4) { animation-delay: 0.4s; }
#featureCardsContainer .feature-card:nth-child(5) { animation-delay: 0.5s; }
#featureCardsContainer .feature-card:nth-child(6) { animation-delay: 0.6s; }


#featureCardsContainer .feature-card:hover {
    transform: translateY(-18px) scale(1.06);
    box-shadow: 0 25px 60px var(--shadow-glow);
    background-color: var(--card-bg-hover);
    border-color: var(--secondary-orange);
    z-index: 10;
}

/* Click Feedback */
#featureCardsContainer .feature-card:active {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 5px 15px var(--shadow-inset);
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

/* Icon Wrapper Styling */
#featureCardsContainer .feature-card .icon-wrapper {
    background: var(--primary-orange);
    padding: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background 0.3s ease-out;
}

/* Hover effects for the icon wrapper */
#featureCardsContainer .feature-card:hover .icon-wrapper {
    transform: scale(1.1);
    background: linear-gradient(45deg, var(--secondary-orange), var(--dark-orange));
    box-shadow: 0 10px 25px rgba(255, 152, 0, 0.7);
    animation: iconBouncePulse 0.8s ease-out;
}

/* Styling for the Font Awesome icon itself (inside the wrapper) */
#featureCardsContainer .feature-card .icon-wrapper .fa-solid {
    font-size: 4.8em;
    color: #ffffff;
    z-index: 2;
    position: relative;
}

/* Title styling */
#featureCardsContainer .feature-card h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--dark-text);
    font-size: 1.9em;
    font-weight: 700;
    letter-spacing: -0.04em;
    transition: color var(--transition-speed) ease-out;
}

#featureCardsContainer .feature-card:hover h3 {
    color: var(--dark-orange);
}

/* Subtitle styling */
#featureCardsContainer .feature-card p {
    color: var(--light-text);
    font-size: 1.25em;
    line-height: 1.7;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    transition: color var(--transition-speed) ease-out;
}

#featureCardsContainer .feature-card:hover p {
    color: var(--medium-text);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    /* Scoped header adjustments for larger screens */
    #featureCardsContainer + .features-header,
    .features-header { /* Fallback/Independent */
        margin-bottom: 50px;
        max-width: 650px;
    }
    #featureCardsContainer + .features-header h2,
    .features-header h2 {
        font-size: 3em;
    }
    #featureCardsContainer + .features-header .header-icon,
    .features-header .header-icon {
        font-size: 4em;
    }

    #featureCardsContainer {
        gap: 45px;
    }
    #featureCardsContainer .feature-card {
        padding: 50px;
        min-height: 300px;
    }
    #featureCardsContainer .feature-card .icon-wrapper {
        width: 120px;
        height: 120px;
        padding: 25px;
    }
    #featureCardsContainer .feature-card .icon-wrapper .fa-solid {
        font-size: 5.5em;
    }
    #featureCardsContainer .feature-card h3 {
        font-size: 2.3em;
    }
    #featureCardsContainer .feature-card p {
        font-size: 1.35em;
    }
}

/* For very large screens */
@media (min-width: 1200px) {
    #featureCardsContainer {
        max-width: 800px;
    }
}