/* Fade-in animation */
    @keyframes fadeInEffect {
        from {
            opacity: 0;
            transform: translateY(20px); /* Start slightly below */
        }
        to {
            opacity: 1;
            transform: translateY(0); /* Reset to normal position */
        }
    }

    .section-different {
        background-color: rgba(0, 0, 0, 0.2); /* Highly transparent background */
        border: 2px solid rgba(255, 140, 0, 0.2); /* Subtle neon border */
        border-radius: 15px;
        padding: 25px;
        margin: 20px auto;
        width: 100%;
        color: #ffffff;
        text-align: center;
        font-size: 0.95rem; /* Smaller font size */
        position: relative; /* Ensure the title stays in view */
        box-shadow: 0 0 20px rgba(255, 69, 0, 0.3); /* Faint glow initially */
        transition: all 0.4s ease-in-out;
        opacity: 0; /* Initially invisible */
        animation: fadeInEffect 1.5s ease-in-out forwards; /* Fade-in effect */
    }

    .section-different h5 {
        background: linear-gradient(90deg, #ff4500, #ff8c00);
        font-family: 'Cinzel'; sans-serif;
        font-size: 1.2rem; /* Slightly smaller title */

        margin-bottom: 15px;
        z-index: 10; /* Ensure the title is in front */
        position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(255,140,0,0.8);
    text-shadow: 0 0 15px rgba(255,140,0,0.8), 0 0 30px rgba(255,69,0,0.5);
    }

    .section-different:hover {
        background-color: rgba(0, 0, 0, 0.8); /* Fully visible on hover */
        border-color: rgba(255, 140, 0, 1); /* Bright neon border */
        box-shadow: 0 0 20px rgba(255, 140, 0, 0.8), 0 0 40px rgba(255, 69, 0, 0.6); /* Intense glow on hover */
        transform: translateY(-5px); /* Slight lift */
    }


    .section-different h5 span.underline:after {
        content: '';
        width: 0%;
        height: 4px;
        background-color: #64ECF2;
        bottom: -5px;
        margin-left: 50%; /* Moves the underline to start around the middle */
        border-radius: 2px;
        transition: width 0.5s ease-in-out;
        position: relative;
        display: block; /* Makes the underline appear on a new line */

    }

        /* First underline animation: from 0% to 50% */
        .section-different:nth-of-type(1) h5 span.underline:after {
            left: -50%;
        }

        .section-different:nth-of-type(1):hover h5 span.underline:after {
            width: 50%;
        }

        /* Second underline animation: from 50% to 100% */
        .section-different:nth-of-type(2) h5 span.underline:after {
            left: 0%;
        }

        .section-different:nth-of-type(2):hover h5 span.underline:after {
            width: 50%;
        }

        /* Last underline animation: from 0% to 100% */
        .section-different:nth-of-type(3) h5 span.underline:after {
            left: -50%;
        }

        .section-different:nth-of-type(3):hover h5 span.underline:after {
            width: 100%;
        }




    .section-different p {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 15px;
        color: #ffffff;
        z-index: 10; /* Ensure text is in front */
        position: relative;
    }

    .section-different p strong {
        color: #ff8c00; /* Red-gold highlight */
        font-weight: bold;
        text-shadow: 0 0 10px rgba(255, 140, 0, 0.8),
            0 0 15px rgba(255, 140, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.5);
    }


    @media (max-width: 768px) {
    .section-different p {
        font-size: 85%;
        margin-bottom: 8px;
        margin: 1rem 0rem;
    }
}

@media (min-width: 1024px) {  /* Adjust for larger screens */

/* Override max-width for Page 6 ONLY */
/* Override the parent section restriction */
#page6 {
    max-width: 100% !important;  /* Remove the 850px limit */
    width: 100% !important;  /* Ensure it takes the full page */
    margin: 0 auto;  /* Keep it centered */
    padding: 0;  /* Optional: Adjust padding if needed */
}

/* Ensure the child section also follows */
#page6 > section#page-6 {
    max-width: 100% !important;
    width: 90%;
    margin: 0 auto;
}


    .text-container {
        max-width: 100%; /* Full width for content */
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center; /* Center align content */
        flex-wrap: wrap; /* Ensures flexibility on different screen sizes */
        gap: 20px; /* Space between sections */
    }

    #page6 .text-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Ensures items move to a new row if needed */
        gap: 20px; /* Space between sections */
    }

    #page6 .section-different {
        flex: 1 1 48%;  /* Makes sure two fit in a row */
        max-width: 48%;
    }

    /* Force the third section to be on a new row */
    #page6 .section-different:nth-of-type(3) {
        flex: 1 1 50%; /* Forces full width */
        max-width: 50%;
    }

}