/* === Color Palette === */
:root {
    --rich-black: #02111b;
    --onyx: #3f4045;
    --raisin-black: #30292f;
    --paynes-gray: #5d737e;
    --white: #fcfcfc;
    --heading-colour: rgb(0, 0, 0);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Chakra Petch", sans-serif;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: max-content;
    color: var(--onyx);
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
}



.main-contaner {
    background-color: rgb(114, 88, 195);
    opacity: 0.07;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

}

/* === Header === */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 3rem;
    background-color: var(--heading-colour);
    color: var(--white);
    position: sticky;
    box-shadow: rgba(182, 163, 241, 0.5) 0px 5px 10px;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav a {
    color: var(--white);
    text-decoration: none;
    margin: 0 1rem;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav a:hover {
    color: var(--paynes-gray);
}

/* === Hero Section === */
.hero {
    height: 110vh;
    display: flex;
    align-items: top;
    padding: 8rem 0 1rem 0;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: visible;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.hero-content {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 3;
    animation: fadeIn 2s ease-in-out;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 4rem;
}

.carousel-container {
    position: absolute;
    top: 0;
    width: 95vw;
    height: 90vh;
    margin: 1rem auto;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px gray;
    overflow: hidden;
}

/* Style for all background images */
.carousel-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    filter: brightness(40%);
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
}

/* First Image - Visible on Load, Stays in Loop */
.carousel-bg:nth-child(1) {
    background-image: url("/static/images/cr-1.webp");
    opacity: 1;
    /*Firstimagevisibleimmediately*/
    animation: fadeEffect 25s infinite 0s;
    -webkit-animation: fadeEffect 25s infinite 0s;
}

/* Other images join the animation loop */
.carousel-bg:nth-child(2) {
    background-image: url("/static/images/cr-2.png");
    animation: fadeEffect 25s infinite 5s;
}

.carousel-bg:nth-child(3) {
    background-image: url("/static/images/cr-3.webp");
    animation: fadeEffect 25s infinite 10s;
}

.carousel-bg:nth-child(4) {
    background-image: url("/static/images/cr-4.webp");
    animation: fadeEffect 25s infinite 15s;
}

.carousel-bg:nth-child(5) {
    background-image: url("/static/images/cr-5.png");
    animation: fadeEffect 25s infinite 20s;
}

.carousel-bg:nth-child(5) {
    background-image: url("/static/images/cr-1.webp");
    animation: fadeEffect 25s infinite 25s;
    -webkit-animation: fadeEffect 25s infinite 25s;
}

hr {
    width: 60%;
    margin: 0 auto;
    border: 3px solid black;
    border-radius: 10px;
    color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}


/* 🔥 Perfectly Looped Fade Effect */
@keyframes fadeEffect {

    0%,
    4% {
        opacity: 0;
    }

    /* Image starts hidden */
    5%,
    25% {
        opacity: 1;
    }

    /* Image fades in */
    26%,
    50% {
        opacity: 1;
    }

    /* Stays visible */
    51%,
    95% {
        opacity: 0;
    }

    /* Fades out */
    96%,
    100% {
        opacity: 0;
    }

    /* Completely hidden before restart */
}


/* Overlay for darkened effect */




.hero {

    & h1,
    p,
    .button-container {
        position: relative;
        z-index: 10;
        overflow: visible;
        width: 100%;
    }
}

.button-container {
    display: flex;
    justify-content: center;
}

svg {
    position: absolute;
    bottom: -2rem;
}

.hero h1 {

    font-size: 3.5rem;
    text-align: center;
    line-height: 4rem;
    color: white;
    letter-spacing: 0.3rem;
    text-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    margin-bottom: 1rem;

    &::first-line {
        font-weight: 300;
        letter-spacing: 0.1rem;
    }
}



.hero p {
    font-size: 1.7rem;
    margin: -1rem 1rem 4rem 1rem;
    color: white;
    width: 70%;

}

.btn-primary {
    padding: 1rem 3rem;
    /*background-color: #8b6fdb;
    */
    background-color: rgb(255, 255, 255, 0.5);
    color: #000;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 5px;
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;

    border-bottom: 3px solid white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}



.btn-primary:hover {
    transform: scale(1.02);
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 3px solid white;
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    -webkit-transform: scale(1.02);
}


.how-it-works-container {
    padding: 2em 6rem;
    width: 100%;
    margin: auto;
    margin-top: 1.5rem;

}

/* === How It Works === */
.how-it-works {
    padding: 4rem 2rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px;
    border-radius: 10px;
    /* border-top: 2px solid black; */
    /* border-bottom: 2px solid black; */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;

    & h2 {
        font-size: 3rem;
        color: var(--heading-colour);
        text-decoration: underline;
        margin-bottom: 4rem;
    }
}



.steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    position: relative;
}

/* 🔥 Default Step Style */
.step {
    background-color: var(--heading-colour);
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 3rem;
    border-radius: 12px;
    width: 18rem;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
    opacity: 0.5;
    /* Less visible by default */
}

/* 🔄 Animating Each Step */
.step:nth-child(1) {
    animation: highlightStep 6s infinite 0s;
    -webkit-animation: highlightStep 6s infinite 0s;
}

.step:nth-child(2) {
    animation: highlightStep 6s infinite 2s;
    -webkit-animation: highlightStep 6s infinite 2s;
}

.step:nth-child(3) {
    animation: highlightStep 6s infinite 4s;
    -webkit-animation: highlightStep 6s infinite 4s;
}

/* 🔥 Keyframes for Smooth Highlight Effect */
@keyframes highlightStep {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    /* Normal */
    10%,
    30% {
        opacity: 1;
        transform: scale(1.1);
    }

    /* Highlighted */
    40%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    /* Back to normal */
}


i {
    font-size: 3rem;
}

.step:hover {
    transform: translateY(-5px);
}

/* === Benefits Section Styling === */
.benefits {
    padding: 4rem 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.benefits h2 {
    font-size: 3rem;
    color: var(--heading-colour);
    text-decoration: underline;
    margin-bottom: 4rem;
}

/* === Modern Grid Layout === */
.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    /* Two columns */
    gap: 2rem;
    width: 80%;
    max-width: 1000px;
}

/* === Benefit Box Styling === */
.benefit {
    background: linear-gradient(135deg, var(--heading-colour), #444);
    color: var(--white);
    padding: 2.5rem;
    border-radius: 20px;
    height: 12rem;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;


    transform: translateY(20px);
    /* Start slightly lower */
}

/* === Step-by-Step Animation with Unified Disappearance ===
.benefit:nth-child(1) {
    animation: fadeInStep 12s infinite 0s;
}
.benefit:nth-child(2) {
    animation: fadeInStep 12s infinite 1.5s;
}
.benefit:nth-child(3) {
    animation: fadeInStep 12s infinite 3s;
}
.benefit:nth-child(4) {
    animation: fadeInStep 12s infinite 4.5s;
}

/* === Keyframes: Step-by-Step Appearance & Unified Disappearance === */
@keyframes fadeInStep {

    0%,
    30% {
        opacity: 0;
        transform: translateY(20px);
    }

    /* Hidden */
    35%,
    80% {
        opacity: 1;
        transform: translateY(0);
    }

    /* Fade In */
    85%,
    90% {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stay for 5s */
    95%,
    100% {
        opacity: 0;
        transform: translateY(20px);
    }

    /* All disappear together */
}

/* === Hover Effect for Interaction === */
.benefit:hover {
    transform: scale(1.05);
}




/* === CTA Section === */
.cta {
    text-align: center;
    padding: 4rem 2rem;

    color: var(--white);
    background-color: var(--heading-colour);
    background: linear-gradient(180deg, var(--heading-colour) 30%, #444 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 80%;
    margin: 2rem auto;
    position: relative;
    margin-top: 12rem;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    & h2 {
        font-size: 2rem;
    }

    & .btn-primary {
        width: 30%;
    }

    & svg {
        top: -18rem;
        position: absolute;
    }


}

/* === Footer === */
.footer {
    margin-top: 2rem;
    background-color: var(--heading-colour);

    color: white;
    padding: 2rem 1rem;
    text-align: center;
    position: relative;
    box-shadow: rgba(182, 163, 241, 0.5) 0px 5px 10px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    padding: 1rem;
    text-align: left;

    & h2 {
        margin-bottom: 0.6rem;
    }

    & p {
        padding-right: 5rem;
        line-height: 1.6rem;
        text-align: left;
        margin-bottom: 3rem;
    }
}

.footer-column h3 {
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: white;
    text-decoration: none;
}

.footer-column a:hover {
    text-decoration: underline;
}

.social-links a {
    display: block;
    margin-bottom: 0.5rem;
}

.social-links i {
    margin-right: 8px;
    font-size: 1.5rem;
    margin-top: 0.5rem;
}




/* === Responsive Design === */

@media screen and (max-width: 412px) {

    .header {
        flex-direction: column;
        padding: 1rem;
        text-align: center;
    }

    .nav {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    .hero {
        height: 60vh;
        padding: 4rem 1rem;
        text-align: center;
    }

    .hero-content {
        width: 90%;
        padding: 2rem;
    }

    .hero h1 {
        font-size: 1.5rem;
        line-height: 1.8rem;
        letter-spacing: 0.1rem;
    }

    .hero p {
        font-size: 1rem;
        margin: -1.2rem 0rem 1rem 0rem;
        color: white;
        width: 100%;
    }

    .button-container {
        width: 80%;
        padding: 0rem;
        height: 1.8rem;
    }

    .btn-primary {

        padding: 0.3rem 3rem;
        font-size: 0.8rem;
    }

    .how-it-works-container {
        padding: 0rem 2rem;
        margin: 0;
        background-color: white;
        box-shadow: none;
    }

    .how-it-works h2 {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .steps {
        gap: 1rem;
        flex-direction: column;
    }

    .step {
        width: 17rem;
        height: 5rem;
        gap: 0.5rem;
        margin: 0.2rem auto;
        flex-direction: row;
        padding: 1rem 0rem;

        & i {
            font-size: 1rem;
        }
    }

    .benefits {
        padding: 4rem 1rem;
    }

    .benefits h2 {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .benefits .grid {
        grid-template-columns: 1fr;
        width: 90%;
        gap: 1rem;
    }

    .benefit {
        padding: 1.5rem 1rem;
        height: 8rem;
        width: 100%;
        gap: 0.5rem;

        & h3 {
            font-size: 1.1rem;
        }

        & p {
            font-size: 1rem;
        }
    }

    .cta {
        margin-top: 5rem;

        & svg {
            top: -3.7rem;
        }

        & .btn-primary {
            width: 80%;
        }
    }

    .carousel-container {
        height: 50vh;
    }
}