@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

html,
body {
    width: 100%;
    height: 100%;
    cursor: default;
}

body {
    font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Host Grotesk", sans-serif;
    font-weight: 700 !important;
    color: #010101;
}

a {
    text-decoration: none;
}


/* for light theme */
.special-head_Gradient {
    font-weight: 600;
    /* background: linear-gradient(90deg, #8b89ff, #fff); */
    background: linear-gradient(90deg, #040053, #453fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: "Playfair Display", serif;
    font-style: italic;
}

/* for dark theme */
.special-head {
    font-weight: 700;
    color: transparent;
    background: linear-gradient(90deg, #f1f3ff, #fafafa);
    /* background: linear-gradient(90deg, #00FF9C, #C5FF95); */
    background-clip: text;
    font-family: "Playfair Display", serif;
}

.section-label {
    font-size: 1rem;
    padding: 5px 10px;
    color: #e5e7ff;
    border: 1px solid #e5e7ff;
    border-radius: 50px;
    margin-bottom: 15px;
    display: inline-block;
}

.section-label_ {
    font-size: 1rem;
    padding: 5px 10px;
    color: #1c07fa;
    border: 1px solid #1c07fa;
    border-radius: 50px;
    margin-bottom: 15px;
    background-color: #a7adff30;
    display: inline-block;
}

/* hero section */
.heroSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 10px;
    background-color: #fff;
    background-image: url(/assets/images/hero_bg_.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;


    .heroContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin-top: 150px !important;
        margin: 90px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;

        .HeroLeft {
            width: 50%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: center;
            flex-direction: column;

            h4 {
                font-size: 1rem;
                padding: 6px 8px;
                border: 1px solid #a7adff;
                background-color: #f1f3ff;
                border-radius: 50px;
                margin-bottom: 15px;

                i {
                    color: #040053;
                    animation: blink-icon 2.5s linear infinite;
                }
            }

            h2 {
                font-size: 3rem;
                line-height: 3.5rem;
                margin-bottom: 15px;
                max-width: 90%;

                span {
                    text-shadow: 5px 5px 10px #1c07fa15;
                }
            }

            >p {
                font-size: 1.2rem;
                /* margin-bottom: 30px; */
                color: #353535;
            }

            .heroCta {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: start;
                gap: 20px;
                margin-bottom: 30px;

                .primary-cta {
                    padding: 12px 12px;
                    background: linear-gradient(20deg, #040053, #453fff);
                    color: #f1f1f1;
                    border-radius: 50px;
                    border: 1px solid #453fff;
                    transition: all .3s ease-in-out;

                    i {
                        margin-left: 6px;
                        padding: 8px;
                        background-color: #f1f1f1;
                        border-radius: 50px;
                        color: #040053;
                    }
                }

                .primary-cta:hover {
                    box-shadow: 5px 5px 20px #453fff15;
                    transform: translateX(5px);
                }

                .secondary-cta {
                    border-radius: 50px;
                    background: none;
                    border: 1px solid #010101;
                    padding: 12px;
                    color: #010101;
                    transition: all .3s ease-in-out;
                }

                .secondary-cta:hover {
                    background-color: #fff;
                    color: #010101;
                    box-shadow: 5px 5px 20px #453fff15;
                    transform: translateX(5px);
                }
            }

            .quickInfo {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: start;
                gap: 20px;
                margin: 30px 0;

                .q-Info {
                    width: auto;
                    height: auto;
                    /* background-color: #f1f1f1; */
                    padding: 10px;
                    /* box-shadow: 4px 4px 20px #01010110; */
                    border-radius: 12px;
                    /* border: 1px solid #1c07fa10; */

                    h3 {
                        font-size: 3rem;
                        line-height: 3rem;
                        font-weight: 500 !important;
                        background: linear-gradient(10deg, #040053, #1c07fa);
                        color: transparent;
                        background-clip: text;
                        -webkit-background-clip: text;
                    }

                    h3::after {
                        content: "+";
                    }

                    small {
                        font-size: 0.9rem;
                        color: #353535;
                    }
                }
            }

            .heroRatings {
                width: auto;
                height: auto;
                display: flex;
                align-items: start;
                justify-content: start;
                flex-direction: column;
                gap: 5px;
                margin: 20px 0;

                img {
                    width: auto;
                    height: 50px;
                    margin-bottom: 10px;
                    filter: drop-shadow(5px 5px 20px #01010115);
                }

                .stars {
                    width: auto;
                    height: auto;

                    i {
                        color: #fbab18;
                        font-size: 1.3rem;
                    }

                    small {
                        color: #5d5d5d;
                        margin-left: 5px;
                        font-size: 14px;
                    }
                }
            }
        }

        .HeroRight {
            width: 50%;
            height: 700px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .drMarketingIcon {
                width: 90%;
                height: auto;
                object-fit: cover;
                animation: floating-image 10s linear infinite;
                filter: drop-shadow(5px 5px 20px #01010115);
            }
            
            .drMarketingText{
                width: 80%;
                height: auto;
                margin-top: -70px;
                margin-right: -25px;
            }


            .heroImage {
                display: none !important;
                width: 100%;
                height: auto;
                min-height: 650px;
                position: relative;
                /* border-radius: 25px; */
                overflow: hidden;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .absHero-cards {
                    width: 85%;
                    height: auto;
                    position: absolute;
                    bottom: 10px;
                    padding: 10px 25px;
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    justify-content: space-between;

                    .abs-heroCard-1 {
                        flex: 1;
                        width: 100%;
                        height: 100px;
                        background: #ffffff;
                        backdrop-filter: blur(10px);
                        padding: 10px;
                        border-radius: 12px;
                        border: 1px solid #f1f1f160;

                        h5 {
                            font-size: 1.3rem;
                            color: #262626;
                            margin-bottom: 5px;
                        }

                        p {
                            font-size: 16px;
                            color: #353535;
                        }
                    }

                    .abs-heroCard-2 {
                        width: auto;
                        height: 100px;
                        background-color: #fff;
                        padding: 20px;
                        border-radius: 12px;
                        display: flex;
                        align-items: start;
                        justify-content: start;
                        flex-direction: column;

                        img {
                            width: auto;
                            height: 70px;
                            margin-top: -20px;
                        }

                        p {
                            font-size: 1rem;
                            color: #353535;
                        }
                    }
                }

                .main-image-bg {
                    width: 85%;
                    height: 650px;
                    border-radius: 25px;
                    box-shadow: 3px 3px 20px #01010115;
                    object-fit: cover;
                    border: none;
                }
            }
        }
    }

}

@keyframes floating-image {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes blink-icon {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        text-shadow: 1px 1px 5px #1c07fa15;
    }
}

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

    body {
        cursor: default !important;
    }

    .cursor,
    .cursor-trail {
        display: none !important;
    }

    .heroSection {

        .heroContainer {
            margin: 150px 0 !important;
            gap: 30px;
            flex-wrap: wrap;

            .HeroLeft,
            .HeroRight {
                width: 100%;
                height: auto !important;
            }
            .HeroRight{
                height: 450px !important;

                
                .drMarketingIcon {
                width: 80%;
                height: auto;
                object-fit: cover;
                animation: floating-image 10s linear infinite;
                filter: drop-shadow(5px 5px 20px #01010115);
            }
            
            .drMarketingText{
                width: 80%;
                height: auto;
                margin-top: -30px;
                margin-right: 5px;
            }
            }

            .HeroLeft {

                h4 {
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                h2 {
                    font-size: 2rem;
                    line-height: 2.5rem;
                    width: 100%;
                    max-width: 100%;
                    margin-bottom: 10px;
                }

                p {
                    font-size: 1.1rem;
                    margin-bottom: 0px;
                }

                .quickInfo {
                    width: 100%;
                    margin: 20px 0;
                    align-items: start;
                    justify-content: start;
                    gap: 20px;

                    .q-Info {
                        width: auto;
                        flex: 1;

                        h3 {
                            font-size: 2.5rem;
                        }
                    }

                    /* .q-Info:nth-child(2){
                        flex: 1;
                        width: 70% !important;
                    } */
                }

                .heroCta {
                    width: 100%;
                    gap: 10px;
                    margin-bottom: 20px;

                    .primary-cta {
                        font-size: 14px;

                        i {
                            display: none;
                            margin: 0 !important;
                        }
                    }

                    .secondary-cta {
                        font-size: 14px;
                    }
                }
            }

            .HeroRight {

                img {
                    width: 80%;
                }
            }
        }
    }
}

/* hero section */

/* usp strip */
.usp-Strip-Modern {
    width: 100%;
    overflow: hidden;
    background: #02010a;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    display: flex;
    align-items: center;
    user-select: none;
    z-index: 5;
}

.usp-Track {
    display: flex;
    animation: scrollText 40s linear infinite;
    white-space: nowrap;
    width: max-content;
    will-change: transform;
}

.usp-Content {
    display: flex;
    gap: 4rem;
    padding-right: 4rem; /* Match gap for seamless loop */
}

.usp-Item {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
    gap: 2rem;
    cursor: default;
}

.usp-Item:hover {
    color: #fff;
    text-shadow: 0 0 30px rgba(139, 137, 255, 0.5);
}

.usp-Item i {
    color: #8b89ff;
    font-size: 2rem;
    margin-left: 28px;
}

@keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .usp-Item {
        font-size: 1.8rem;
        gap: 1.5rem;
    }
    .usp-Content {
        gap: 2rem;
        padding-right: 2rem;
    }
}

/* usp strip */


/* problem & Solution */
.problemSolution {
    width: 100%;
    height: auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .problemSolutionContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 80px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 50px;

        .psUpper {
            width: 100%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: space-between;

            .psUpLeft {
                width: 50%;
                height: auto;

                h4 {
                    color: #888;
                    text-decoration: underline #7679ff;
                    margin-bottom: 10px;
                }

                h2 {
                    font-size: 2.5rem;
                    line-height: 3rem;
                    color: #010101;
                }
            }

            .psUpRight {
                width: 40%;
                height: auto;

                p {
                    color: #353535;
                }
            }
        }

        .psLower {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;


            .pS-Left,
            .pS-Right {
                width: 50%;
                height: auto;
            }

            .pS-Left {
                display: flex;
                align-items: start;
                justify-content: space-between;
                flex-direction: column;
                gap: 30px;

                .upper-Cards {
                    width: 100%;
                    height: auto;
                    gap: 30px;
                    display: flex;
                    align-items: start;
                    justify-content: space-between;

                    .upCard {
                        width: 50%;
                        height: auto;
                        min-height: 400px;
                        background-color: #f1f3ff;
                        padding: 20px;
                        border-radius: 15px;
                        display: flex;
                        align-items: start;
                        justify-content: space-between;
                        flex-direction: column;
                        border: 1px solid #1c07fa40;
                        transition: all .3s ease-in-out;
                        /* box-shadow: 5px 5px 20px #1c07fa15; */
                        position: relative;
                        overflow: hidden;
                        --x: 0px; --y: 0px;

                        i {
                            /* color: #fff; */
                            color: #453fff;
                            border-radius: 5px;
                            padding: 10px;
                            border: 1px solid #1c07fa;
                            font-size: 1.5rem;
                            /* background-color: #453fff; */
                        }

                        .card-Content {
                            width: 100%;
                            height: auto;
                            /* min-height: 130px; */
                            display: flex;
                            align-items: start;
                            justify-content: start;
                            flex-direction: column;
                            position: relative;
                            z-index: 2;

                            h5 {
                                font-size: 1rem;
                                padding: 5px 10px;
                                color: #1c07fa;
                                background-color: #e5e7ff;
                                border-radius: 25px;
                                border: 1px solid #1c07fa;
                                margin-bottom: 10px;
                            }

                            h3 {
                                font-size: 1.4rem;
                                color: #010101;
                                margin-bottom: 5px;
                            }

                            p {
                                color: #3d3d3d;
                                margin-bottom: 10px;
                            }

                            img {
                                width: 100%;
                                height: 90px;
                                border-radius: 12px;
                                object-fit: cover;
                            }
                        }
                    }

                    .upCard:hover {
                        transform: translateY(-3px);
                        box-shadow: 5px 5px 30px #1c07fa15;
                    }

                    /* Premium Spotlight Effect */
                    .upCard::after {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background: radial-gradient(600px circle at var(--x) var(--y), rgba(28, 7, 250, 0.12), transparent 40%);
                        opacity: 0;
                        transition: opacity 0.3s ease;
                        pointer-events: none;
                        z-index: 1;
                    }

                    .upCard:hover::after {
                        opacity: 1;
                    }
                }

                .Lower-Card {
                    width: 100%;
                    height: auto;
                    min-height: 420px;
                    background-color: #f1f3ff;
                    padding: 20px;
                    border-radius: 15px;
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                    flex-direction: column;
                    border: 1px solid #1c07fa40;
                    /* box-shadow: 5px 5px 20px #1c07fa15; */
                    transition: all .3s ease-in-out;
                    position: relative;
                    overflow: hidden;
                    --x: 0px; --y: 0px;

                    i {
                        /* color: #fff; */
                        color: #453fff;
                        border-radius: 5px;
                        padding: 10px;
                        border: 1px solid #1c07fa;
                        font-size: 1.5rem;
                        /* background-color: #453fff; */
                    }

                    .card-Content {
                        width: 100%;
                        height: auto;
                        /* min-height: 130px; */
                        display: flex;
                        align-items: start;
                        justify-content: start;
                        flex-direction: column;
                        position: relative;
                        z-index: 2;

                        h5 {
                            font-size: 1rem;
                            padding: 5px 10px;
                            color: #1c07fa;
                            background-color: #e5e7ff;
                            border-radius: 25px;
                            border: 1px solid #1c07fa;
                            margin-bottom: 10px;
                        }

                        h3 {
                            font-size: 1.4rem;
                            color: #010101;
                            margin-bottom: 5px;
                        }

                        p {
                            color: #3d3d3d;
                            margin-bottom: 10px;
                        }

                        img {
                            width: 100%;
                            height: 100px;
                            border-radius: 12px;
                            object-fit: cover;
                        }
                    }
                }

                .Lower-Card:hover {
                    transform: translateY(-3px);
                    box-shadow: 5px 5px 30px #1c07fa15;
                }

                /* Premium Spotlight Effect */
                .Lower-Card::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: radial-gradient(600px circle at var(--x) var(--y), rgba(28, 7, 250, 0.12), transparent 40%);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    pointer-events: none;
                    z-index: 1;
                }

                .Lower-Card:hover::after {
                    opacity: 1;
                }
            }

            .pS-Right {
                width: 50%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 30px;

                .mainSolution {
                    width: 100%;
                    height: auto;
                    /* min-height: 833px; */
                    min-height: 450px;
                    max-height: 650px;
                    background-color: #f1f3ff;
                    padding: 20px;
                    border-radius: 15px;
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                    flex-direction: column;
                    border: 1px solid #1c07fa40;
                    /* box-shadow: 5px 5px 20px #1c07fa15; */
                    transition: all .3s ease-in-out;

                    i {
                        color: #fff;
                        border-radius: 12px;
                        padding: 15px;
                        border: 1px solid #1c07fa;
                        font-size: 2.5rem;
                        background-color: #040053;
                        margin-bottom: 30px;
                    }

                    .card-Content {
                        width: 100%;
                        height: auto;
                        /* min-height: 130px; */
                        display: flex;
                        align-items: start;
                        justify-content: start;
                        flex-direction: column;

                        h5 {
                            font-size: 1rem;
                            padding: 5px 10px;
                            color: #1c07fa;
                            background-color: #e5e7ff;
                            border-radius: 25px;
                            border: 1px solid #1c07fa;
                            margin-bottom: 10px;

                        }

                        h3 {
                            font-size: 2rem;
                            color: #010101;
                            margin-bottom: 5px;
                        }

                        p {
                            color: #262626;
                            margin-bottom: 20px;
                        }

                        img {
                            width: 100%;
                            height: 200px;
                            border-radius: 12px;
                            object-fit: cover;
                        }

                        video {
                            width: 100%;
                            max-height: 200px;
                            border-radius: 12px;
                            object-fit: cover;
                            /* height: 200px; */
                        }
                    }
                }

                .mainSolution:hover {
                    box-shadow: 10px 10px 60px #1c07fa15;
                    transform: translateY(-3px);
                }

                .askConsultation {
                    width: 100%;
                    height: auto;
                    min-height: 240px;
                    padding: 30px;
                    border: 1px solid #1c07fa50;
                    /* background-color: #020020; */
                    background: radial-gradient(at top center, #000, #040053);
                    border-radius: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    text-align: center;

                    >i {
                        font-weight: 600;
                        font-size: 2.5rem;
                        color: #a7adff;
                        border-radius: 50%;
                        padding: 15px;
                        border: 1px solid #a7adff;
                        margin-bottom: 20px;
                    }

                    h3 {
                        font-size: 1.5rem;
                        color: #f1f1f1;
                        margin-bottom: 10px;
                    }

                    p {
                        color: #f9f9f9;
                        margin-bottom: 20px;
                        max-width: 90%;
                    }

                    a {
                        /* background: linear-gradient(90deg, #020020, #1c07fa); */
                        color: #fff;
                        border: 1px solid #f1f1f1;
                        box-shadow: 2px 2px 20px #1c07fa15;
                        padding: 12px 24px;
                        border-radius: 50px;
                        transition: all .3s ease-in-out;
                    }

                    a:hover {
                        /* background-color: #fff; */
                        background: linear-gradient(20deg, #fff, #e5e7ff);
                        color: #010101;
                        box-shadow: 4px 4px 30px #ffffff25;
                        transform: translateY(-2px);
                    }
                }
            }
        }
    }
}

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

    body {
        position: relative;
    }

    .problemSolution {

        .problemSolutionContainer {
            margin: 50px 0;
            gap: 40px;

            .psUpper {
                width: 100%;
                flex-wrap: wrap;

                .psUpLeft {
                    width: 100%;

                    h4 {
                        font-size: 14px;
                    }

                    h2 {
                        font-size: 1.5rem;
                        line-height: 2rem;
                        margin-bottom: 15px;
                    }
                }

                .psUpRight {
                    width: 100%;

                    p {
                        font-size: 1rem;
                        width: 100%;
                    }
                }
            }

            .psLower {
                flex-wrap: wrap;

                .pS-Left {
                    width: 100%;
                    flex-wrap: wrap;
                    /* position: relative; */

                    .upper-Cards {
                        width: 100%;
                        flex-wrap: wrap;

                        .upCard {
                            width: 100%;
                            /* position: sticky;
                            top: 120px; */
                        }
                    }

                    .Lower-Card {
                        width: 100%;
                    }
                }

                .pS-Right {
                    width: 100%;
                    flex-wrap: wrap;

                    .mainSolution {
                        width: 100%;

                        i {
                            font-size: 1.5rem;
                        }

                        h3 {
                            font-size: 1.5rem !important;
                            line-height: 2rem;
                        }

                        p {
                            font-size: 1rem;
                        }
                    }

                    .askConsultation {
                        padding: 20px 10px !important;

                        >i {
                            font-size: 2rem;
                        }

                        h3 {
                            font-size: 1.5rem;
                        }

                        p {
                            font-size: 1rem;
                            max-width: 100%;
                            width: 100%;
                        }

                        >a {
                            font-size: 1rem;
                        }
                    }
                }
            }

        }
    }
}



/* problem & Solution */

/* service section */
.serviceSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(0deg, #000, #020020);
    padding: 0 10px;
    position: relative;

    .abs-Blur-Circ-1 {
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: #a7adff80;
        filter: blur(100px);
        border-radius: 50%;
        z-index: 1;
        top: 30%;
        left: 30%;
        /* animation: blink-1 3s alternate infinite; */
    }

    .abs-Blur-Circ-2 {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #e5e7ff80;
        border-radius: 50%;
        bottom: 30%;
        left: 40%;
        filter: blur(100px);
        animation: blink-1 3s alternate infinite;
        z-index: 1;
    }

    .abs-Blur-Circ-3 {
        position: absolute;
        right: 25%;
        top: 30%;
        width: 150px;
        height: 150px;
        background-color: #f1f3ff80;
        filter: blur(100px);
        border-radius: 50%;
        z-index: 1;
    }

    .serviceContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 80px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 2;

        h2 {
            color: #fff;
            font-size: 2.5rem;
            line-height: 3rem;
            max-width: 750px;
            margin-bottom: 10px;
            text-align: center;
        }

        p {
            font-size: 1rem;
            max-width: 800px;
            text-align: center;
            color: #f9f9f9;
            /* margin-bottom: 40px; */
        }

        .serviceCards {
            width: 100%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
            margin: 40px 0;

            .serveCard {
                width: 23%;
                height: auto;
                min-height: 250px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-color: #ffffff;
                border: 1px solid #e5e7ff;
                box-shadow: 5px 5px 20px #e5e7ff15;
                backdrop-filter: blur(10px);
                border-radius: 15px;
                padding: 20px 10px;
                transition: all .3s ease-in-out;

                i {
                    background-color: #040053;
                    color: #fff;
                    padding: 15px;
                    border-radius: 50%;
                    font-size: 1.5rem;
                    margin-bottom: 10px;
                    box-shadow: 3px 3px 20px #1c07fa15;
                    transition: all .3s ease-in-out;

                }

                h3 {
                    font-size: 1.4rem;
                    margin-bottom: 20px;
                    transition: all .3s ease-in-out;

                }

                .serve-Key {
                    width: 100%;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 10px;
                    transition: all .3s ease-in-out;


                    .key-fea {
                        padding: 5px 8px;
                        border-radius: 15px;
                        background: #e5e7ff;
                        font-size: 14px;
                        box-shadow: 2px 2px 20px #7679ff15;
                        transition: all .3s ease-in-out;

                    }
                }
            }

            .serveCard:hover {
                transform: translateY(-20px) rotate(-2deg);
                background-color: #f1f3ff50;
            }

            .serveCard:hover {

                i {
                    transform: rotate(2deg);
                    background-color: #e5e7ff;
                    color: #040053;
                }

                h3 {
                    transform: rotate(2deg);
                    color: #fff;
                }

                .key-fea {
                    transform: rotate(2deg);
                    border: 1px solid #453fff;
                }
            }
        }

        .serve-CTA {
            padding: 12px 24px;
            color: #111;
            /* background-color: #fff; */
            background: linear-gradient(20deg, #fff, #e5e7ff);
            border-radius: 50px;
            font-size: 1.1rem;
            transition: all .3s ease-in-out;
        }

        .serve-CTA:hover {
            box-shadow: 4px 4px 20px #ffffff25;
            transform: translateX(3px);
        }
    }
}

@keyframes blink-1 {

    0%,
    100% {
        /* transform: translateY(0%); */
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@media screen and (max-width:768px) {
    .serviceSection {

        .serviceContainer {
            margin: 50px 0;

            h2 {
                font-size: 1.5rem;
                line-height: 2rem;
                margin-bottom: 10px;
            }

            p {
                font-size: 1rem;
            }

            .serviceCards {
                flex-wrap: wrap;
                margin: 30px 0;
                position: relative;

                .serveCard {
                    width: 100%;
                    position: sticky;
                    top: 120px;
                }
            }
        }
    }
}

/* service section */

/* stat section */
.statsSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .statsContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 80px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 80px;

        .statsUpper {
            width: 100%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: space-between;

            .st-Left {
                width: 50%;
                height: auto;

                h4 {
                    color: #888;
                    text-decoration: underline #7679ff;
                    margin-bottom: 10px;
                }

                h2 {
                    font-size: 2.5rem;
                    line-height: 3rem;
                    color: #010101;
                }
            }

            .st-Right {
                width: 40%;
                height: auto;

                p {
                    color: #353535;
                }
            }
        }

        .statsLower {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 50px;
            flex-direction: column;

            .statCards {
                width: 100%;
                height: auto;
                display: flex;
                align-items: end;
                justify-content: space-between;

                .staCard {
                    width: auto;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    h3 {
                        font-size: 5rem;
                        line-height: 5.5rem;
                        font-weight: 500 !important;
                        color: #020020;
                        /* color: transparent; */
                        /* background: linear-gradient(0deg, #fff, #a7adff, #453fff); */
                        -webkit-background-clip: text;
                        background-clip: text;
                    }

                    h3::after {
                        content: "+";
                    }

                    small {
                        font-size: 14px;
                        color: #3d3d3d;
                        text-align: center;
                    }
                }
            }

            .displayImage {
                width: 100%;
                height: 400px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                position: relative;

                .displayImage-Overlay {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    min-height: 400px;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    border-radius: 25px;
                    /* z-index: 2; */

                    img {
                        width: 100%;
                        height: 400px;
                        object-fit: cover;
                        border-radius: 25px;
                        display: block;
                    }
                }

                .displayImage-Overlay::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(0deg, #000000, #00000000);

                }
            }


        }
    }
}

@media screen and (max-width:768px) {
    .statsSection {
        padding: 0 10px;

        .statsContainer {
            flex-wrap: wrap;
            margin: 50px 0;
            gap: 20px;

            .statsUpper {
                width: 100%;
                flex-wrap: wrap;

                .st-Left {
                    width: 100%;
                    height: auto;

                    h2 {
                        font-size: 1.5rem;
                        line-height: 2rem;
                        margin-bottom: 15px;
                    }
                }

                .st-Right {
                    width: 100%;
                    height: auto;

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

            .statsLower {
                flex-wrap: wrap;
                margin: 30px 0;
                gap: 40px;

                .statCards {
                    flex-wrap: wrap;
                    gap: 30px;

                    .staCard {
                        width: 40%;
                        height: auto;

                        h3 {
                            font-size: 3rem;
                            line-height: 3.5rem;
                        }
                    }
                }

                .displayImage {
                    border-radius: 12px;
                    height: 300px;
                    margin-top: 40px;
                }
            }
        }
    }
}

/* stat section */


/* --- GROWTH PROCESS (STICKY SCROLL) --- */
.growthProcessSection {
    width: 100%;
    padding: 120px 0;
    background: #010008;
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
    /* z-index: 10000; */
}

.gp-Container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.gp-Header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.gp-Header h2 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 10px;
}

.gp-Header p {
    color: #aaa;
    font-size: 1.2rem;
    line-height: 1.6;
}

.gp-Wrapper {
    display: flex;
    gap: 5%;
    align-items: flex-start;
}

/* Left Column (Sticky) */
.gp-Visuals {
    width: 45%;
    height: 70vh;
    position: sticky;
    top: 20vh; /* Vertically centers the sticky element */
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.gp-Visual {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 0.8s ease-out;
    transform: scale(1.05);
    z-index: 1;
}

.gp-Visual.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.gp-Visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%);
}

/* Right Column (Scrolling) */
.gp-Steps {
    width: 50%;
}

.gp-Step {
    min-height: 70vh; /* Creates scroll distance */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0 60px 60px;
    border-left: 1px solid rgba(255,255,255,0.1);
    position: relative;
    opacity: 0.3;
    transition: opacity 0.4s ease, transform 0.4s ease;
    /* transform: translateX(20px); */
}

.gp-Step.active {
    opacity: 1;
    /* transform: translateX(0); */
}

/* Active Line Indicator */
.gp-Step::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    width: 2px;
    height: 0%;
    background: #453fff;
    box-shadow: 0 0 15px rgba(69, 63, 255, 0.8);
    transition: height 0.4s ease;
}

.gp-Step.active::before {
    height: 100%;
    transition: height 0.6s ease 0.2s; /* Delay slightly to sync with scroll */
}

/* Mobile Image (Hidden on Desktop) */
.gp-Mobile-Visual {
    display: none;
    width: 100%;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid rgba(255,255,255,0.1);
}

.gp-Mobile-Visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gp-Num {
    font-size: 4rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    line-height: 1;
    margin-bottom: 20px;
    font-family: "Host Grotesk", sans-serif;
}

/* Active state styling */
.gp-Step.active .gp-Num {
    color: #453fff;
    -webkit-text-stroke: 0;
    text-shadow: 0 0 30px rgba(69, 63, 255, 0.4);
}

.gp-Step h3 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}

.gp-Step p {
    font-size: 1.15rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 90%;
}

.gp-Step ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gp-Step li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #eee;
    font-size: 1.05rem;
}

.gp-Step li i {
    color: #00F0FF;
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 992px) {
    .growthProcessSection { padding: 60px 0; }
    .gp-Header h2 { font-size: 2.5rem; }
    .gp-Wrapper { flex-direction: column; }
    
    /* Hide Sticky Left Col on Mobile */
    .gp-Visuals {
        display: none;
    }
    
    .gp-Steps { width: 100%; }
    
    .gp-Step {
        min-height: auto;
        padding: 40px 0 60px 0;
        border-left: none;
        opacity: 1; /* All visible on mobile */
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .gp-Step:last-child { border-bottom: none; }
    .gp-Step::before { display: none; } /* No timeline line on mobile */
    .gp-Step.active .gp-Num { color: #fff; text-shadow: none; } /* Simple active state */

    /* Show inline images */
    .gp-Mobile-Visual {
        display: block;
    }
    
    .gp-Num {
        font-size: 3rem;
        color: #453fff;
        -webkit-text-stroke: 0;
    }
    
    .gp-Step h3 { font-size: 2rem; }
}


/* about us */
.about-us {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(/assets/images/about_bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;


    .aboutUsContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        margin: 120px 0;

        .aboutleft {
            width: 50%;
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            img {
                width: 100%;
                height: auto;
                animation: floating-image 10s linear infinite;
                object-fit: cover;
                filter: drop-shadow(5px 5px 20px #a7adff25);
            }
        }

        .aboutRight {
            width: 50%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: center;
            flex-direction: column;

            h2 {
                font-size: 2.5rem;
                line-height: 3rem;
                margin-bottom: 15px;
                color: #010101;
            }

            p {
                font-size: 1.1rem;
                /* margin-bottom: 25px; */
                color: #3d3d3d;
            }

            .counter_3 {
                /* display: none !important; */
                width: 100%;
                height: auto;
                display: flex;
                align-items: end;
                justify-content: start;
                gap: 60px;
                margin-bottom: 30px;
                /* margin: 12px 0; */

                .counterCard {
                    width: auto;
                    height: auto;
                    display: flex;
                    align-items: start;
                    justify-content: start;
                    flex-direction: column;

                    h3 {
                        font-size: 3rem;
                        line-height: 3.5rem;
                        font-weight: 600 !important;
                        margin-bottom: 5px;
                        color: transparent;
                        background: linear-gradient(20deg, #000000, #453fff);
                        background-clip: text;
                        -webkit-background-clip: text;
                    }

                    small {
                        color: #353535;
                    }
                }

                .counterCard:nth-child(2) {
                    position: relative;

                    h3::after {
                        content: "x";
                    }
                }

                .counterCard:nth-child(1),
                .counterCard:nth-child(3) {
                    position: relative;

                    h3::after {
                        content: "+";
                    }
                }

                /* .counterCard:nth-child(3)::after {
                    position: absolute;
                    content: "%";
                    top: 50%;
                    right: 0%;
                    transform: translate(-50%, -50%);
                    font-size: 3rem;
                    line-height: 3.5rem;
                    font-weight: 600 !important;
                    margin-bottom: 5px;
                    color: transparent;
                    background: linear-gradient(20deg, #000000, #453fff);
                    background-clip: text;
                    -webkit-background-clip: text;
                } */
            }

            .about-Features {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                margin: 30px 0;
                flex-wrap: wrap;

                .ab-fea_Card {
                    width: 48%;
                    padding: 20px;
                    border: 1px solid #f1f3ff;
                    border-radius: 12px;
                    display: flex;
                    align-items: start;
                    justify-content: start;
                    gap: 12px;
                    flex-direction: column;
                    background-color: #f1f3ff50;
                    transition: all .3s ease-in-out;

                    .abFe_Left {
                        width: auto;
                        height: auto;

                        i {
                            padding: 8px;
                            background-color: #000000;
                            color: #e5e7ff;
                            font-size: 1.5rem;
                            border-radius: 50%;
                            /* border: 1px solid #e5e7ff; */
                            box-shadow: 2px 2px 20px #1c07fa15;
                        }
                    }
                }

                .ab-fea_Card:hover {
                    background-color: #e5e7ff;
                    border: 1px solid #453fff;
                }
            }

            .aboutCta {
                padding: 12px 24px;
                color: #fff;
                background: linear-gradient(90deg, #040053, #1c07fa);
                border-radius: 50px;
                transition: all .3s ease-in-out;
            }

            .aboutCta:hover {
                box-shadow: 3px 3px 20px #1c07fa15;
                transform: translateX(3px);
            }
        }

    }
}


@media screen and (max-width:768px) {
    .about-us {
        padding: 0 10px;

        .aboutUsContainer {
            flex-wrap: wrap;
            margin: 80px 0;
            gap: 30px;

            .aboutleft {
                width: 100%;
                height: 350px;

                img {
                    width: 85%;
                }
            }

            .aboutRight {
                width: 100%;

                h4 {
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                h2 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                    margin-bottom: 10px;
                }

                p {
                    font-size: 1rem;
                }

                .about-Features {
                    width: 100%;
                    gap: 10px;

                    .ab-fea_Card {
                        width: 48%;

                        p {
                            font-size: 14px;
                        }
                    }
                }

                .counter_3 {
                    flex-wrap: wrap;
                    gap: 10px;
                    align-items: start;
                    justify-content: center;

                    .counterCard {
                        width: 30%;

                        h3 {
                            font-size: 2.5rem;
                            line-height: 3rem;
                        }
                    }
                }

            }
        }
    }
}

/* about us */


/* portfolio section */
.portFolioSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #e5e7ff10;
    padding: 0 10px;
    position: relative;

    .portfolioContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 120px 0;

        h2 {
            font-size: 2.5rem;
            line-height: 3rem;
            color: #010101;
            margin-bottom: 15px;
            text-align: center;
            max-width: 750px;
        }

        >p {
            color: #353535;
            font-size: 1.2rem;
            text-align: center;
            max-width: 750px;
            margin-bottom: 50px;
        }

        .portfolioCards {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 60px;

            .port-Card {
                width: 95%;
                max-width: 1200px;
                min-width: auto;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 30px;
                box-shadow: 2px 2px 20px #00000015;
                border-radius: 25px;
                overflow: hidden;
                padding: 0;
                background: #fff;
                position: sticky;
                top: 150px;
                transform-origin: center top;
                will-change: transform, filter;

                .port-Left {
                    width: 50%;
                    height: auto;

                    img {
                        width: 100%;
                        height: 600px;
                        object-fit: cover;
                        box-shadow: 0px 4px 30px #00000015;
                    }

                    video {
                        width: 100%;
                        height: 600px;
                        object-fit: cover;
                    }
                }

                .port-Right {
                    width: 50%;
                    height: auto;
                    display: flex;
                    align-items: start;
                    justify-content: start;
                    flex-direction: column;

                    .project-tag {
                        font-size: 14px;
                        color: #f1f3ff;
                        background: linear-gradient(20deg, #020020, #1c07fa);
                        border-radius: 50px;
                        padding: 5px 10px;
                        border: 1px solid #1c07fa50;
                        margin-bottom: 15px;
                    }

                    >h3 {
                        font-size: 2rem;
                        line-height: 2.5rem;
                        margin-bottom: 15px;
                    }

                    >p {
                        color: #6a6a6a;
                        font-size: 1.1rem;
                        /* margin-bottom: 25px; */
                    }

                    .skill-tech {
                        width: 100%;
                        height: auto;
                        margin: 30px 0;
                        display: flex;
                        align-items: center;
                        justify-content: start;
                        flex-wrap: wrap;
                        gap: 10px;

                        .sk-tc-tag {
                            color: #555;
                            text-transform: uppercase;
                            padding: 6px 12px;
                            background-color: #00000015;
                            border-radius: 50px;
                            font-size: 14px;
                        }

                    }

                    >h5 {
                        font-size: 1.2rem;
                        color: #333;
                        margin-bottom: 15px;
                    }

                    .key-Fea {
                        width: 100%;
                        height: auto;
                        display: flex;
                        align-items: start;
                        justify-content: start;
                        flex-direction: column;
                        gap: 5px;
                        margin-bottom: 30px;

                        small {
                            font-size: 1rem;
                            color: #3a3a3a;
                            margin-bottom: 5px;

                            i {
                                color: #3BC1A8;
                                font-size: 12px;
                            }
                        }
                    }

                    .projectCta {
                        font-size: 1.1rem;
                        color: #040053;
                        /* text-decoration: underline #040053; */
                        transition: all .3s ease-in-out;

                        i {
                            position: absolute;
                            color: #040053;
                            /* transform:rotate(-45deg); */
                            margin-left: 3px;
                            transition: all .3s ease-in-out;
                        }
                    }

                    .projectCta:hover {
                        color: #010101;
                        /* text-decoration: none; */
                        text-decoration: underline #040053;

                    }

                    .projectCta:hover i {
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}

/* Tablet Responsiveness for Portfolio */
@media screen and (min-width: 769px) and (max-width: 1100px) {
    .portFolioSection .portfolioContainer .portfolioCards .port-Card {
        width: 95%;
        gap: 20px;
    }
    
    .portFolioSection .portfolioContainer .portfolioCards .port-Card .port-Left img,
    .portFolioSection .portfolioContainer .portfolioCards .port-Card .port-Left video {
        height: 500px; /* Reduce height slightly for tablets */
    }
    
    .portFolioSection .portfolioContainer .portfolioCards .port-Card .port-Right h3 {
        font-size: 1.8rem;
    }
    
    .portFolioSection .portfolioContainer .portfolioCards .port-Card .port-Right h5 {
        font-size: 1.1rem;
    }
}

@media screen and (max-width:768px) {
    body {
        position: relative;
    }

    .portFolioSection {

        .portfolioContainer {
            margin: 50px 0;

            h4 {
                font-size: 14px;
                margin-bottom: 10px;
            }

            h2 {
                font-size: 1.5rem;
                line-height: 2rem;
                margin-bottom: 10px;
            }

            >p {
                font-size: 1rem;
                margin-bottom: 30px;
            }

            .portfolioCards {
                width: 100%;
                height: auto;
                flex-wrap: wrap;
                flex-direction: column;

                .port-Card {
                    width: 100%;
                    min-width: 100%;
                    max-width: 100%;
                    flex-wrap: wrap;
                    position: sticky;
                    top: 120px;

                    .port-Left {
                        width: 100%;

                        img {
                            width: 100%;
                            height: 400px;
                            object-fit: cover;
                        }
                    }

                    .port-Right {
                        width: 100%;
                        padding: 15px;

                        .project-tag {
                            font-size: 14px;
                            margin-bottom: 4px;
                        }

                        >h3 {
                            font-size: 1.4rem;
                            margin-bottom: 6px;
                        }

                        .skill-tech {
                            margin: 20px 0;
                        }

                        .key-Fea {
                            margin-bottom: 20px;
                        }
                    }
                }
            }
        }
    }
}


/* portfolio section */


/* pricing section */
.pricingSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    position: relative;

    .abs-prop-1 {
        position: absolute;
        width: 100%;
        height: auto;
        object-fit: cover;
        z-index: 1;
    }

    .abs-prop-2 {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 20%;
        left: 20%;
        animation: floating-Icon 3s linear infinite;
    }

    .abs-prop-3 {
        position: absolute;
        width: 30px;
        height: 30px;
        top: 20%;
        right: 15%;
        animation: floating-Icon-2 3s linear infinite;
    }

    .pricingContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 120px 0;
        z-index: 2;

        h2 {
            font-size: 2.5rem;
            line-height: 3rem;
            margin-bottom: 15px;
            max-width: 600px;
            text-align: center;
        }

        >p {
            font-size: 1.2rem;
            color: #262626;
            max-width: 700px;
            text-align: center;
            margin-bottom: 50px;
        }

        .pricingCardSection {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 30px;
            margin-bottom: 40px;

            .pricingFilter {
                width: 100%;
                max-width: 1000px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                flex-wrap: wrap;
                margin-bottom: 40px;

                .priceFilter {
                    padding: 8px 16px;
                    background-color: #7679ff15;
                    border-radius: 50px;
                    font-size: 1rem;
                    border: 1px solid #04005320;
                    transition: all .3s ease-in-out;
                }

                .active {
                    color: #fff !important;
                    background-color: #020020 !important;
                }

                .priceFilter:hover {
                    color: #fff !important;
                    background-color: #020020 !important;
                }
            }

            .pricing_Card {
                width: 100%;
                height: auto;
                background-color: transparent;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
                justify-items: center;
                max-width: 1400px;
                gap: 30px;

                .package_Card {
                    flex: 1 1 300px;
                    max-width: 380px;
                    width: 100%;
                    height: auto;
                    max-width: 400px;
                    height: 100%;
                    display: flex;
                    align-items: start;
                    justify-content: start;
                    flex-direction: column;
                    padding: 40px 20px;
                    border: 0.5px solid #1c07fa20;
                    box-shadow: 5px 5px #040053;
                    background-color: #e5e7ff15;
                    border-radius: 25px;
                    padding: 40px 30px;
                    border: 1px solid rgba(28, 7, 250, 0.1);
                    box-shadow: 0 10px 30px rgba(4, 0, 83, 0.05);
                    background-color: #fff;
                    border-radius: 20px;
                    transition: all .3s ease-in-out;
                    position: relative;

                    .floating-label-tag {
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        width: fit-content;
                        top: -18px;
                        animation: float-tag 3s linear infinite;
                        background: #000007;
                        color: #fff;
                        border-radius: 50px;
                        padding: 8px 12px;
                        font-size: 0.85rem;
                        z-index: 2;
                    }

                    .plan_name {
                        color: #111;
                        font-weight: 600;
                        font-size: 1.2rem;
                        margin-bottom: 20px;
                        font-weight: 700;
                        font-size: 1.4rem;
                        margin-bottom: 15px;
                    }

                    .priceTag {
                        font-size: 1.5rem;
                        line-height: 2rem;
                        font-weight: 650;
                        margin-bottom: 5px;
                        color: #020020;

                        span {
                            color: transparent;
                            background: linear-gradient(20deg, #040053, #1c07fa);
                            background-clip: text;
                        }
                    }

                    .whatGet {
                        font-size: 1rem;
                        color: #000000;
                        color: #555;
                        font-weight: 500;
                        min-height: 3rem; /* Aligns features across cards */
                    }

                    .incl {
                        list-style: none;
                        margin: 20px 0;
                        width: 100%;

                        li {
                            font-size: 1.1rem;
                            color: #262626;
                            font-size: 1rem;
                            color: #333;
                            margin-bottom: 12px;
                            display: flex;
                            align-items: flex-start;
                            gap: 10px;

                            i {
                                /* color: #3BC1A8; */
                                font-weight: 600;
                                color: #1c07fa;
                                font-weight: 700;
                                margin-top: 3px;
                            }
                        }
                    }

                    .notIncl {
                        list-style: none;

                        li {
                            color: #6a6a6a !important;
                            font-size: 1.1rem;
                        }
                    }
                }


                .package_Card:hover {
                    box-shadow: 5px 5px 30px #00000015;
                    transform: translateY(-5px);
                    box-shadow: 0 15px 40px rgba(28, 7, 250, 0.15);
                    transform: translateY(-8px);
                    border-color: rgba(28, 7, 250, 0.3);
                }
            }
        }

        .asK {
            width: 100%;
            max-width: 600px;
            color: #020020;
            margin-bottom: 10px;
            text-align: center;
            font-size: 1.2rem;
            font-weight: 500;
        }

        .didntCta {
            padding: 12px 24px;
            color: #fff;
            background: linear-gradient(90deg, #040053, #1c07fa);
            border-radius: 50px;
        }
    }
}

@keyframes floating-Icon {

    0%,
    100% {
        transform: translateY(0%);
        box-shadow: none;
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        transform: translateY(20px) rotate(360deg) scale(1.5);
        filter: drop-shadow(2px 2px 20px #00000025);
    }
}

@keyframes floating-Icon-2 {

    0%,
    100% {
        transform: translateY(0%);
        box-shadow: none;
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        transform: translateY(-20px) rotate(360deg) scale(0.8);
        filter: drop-shadow(2px 2px 20px #00000025);
    }
}

@keyframes float-tag {

    0%,
    100% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(3px);
    }
}

@media screen and (max-width:768px) {
    .pricingSection {
        padding: 0 10px;
        box-shadow: -2px -2px 20px #00000015;

        .abs-prop-1, .abs-prop-2, .abs-prop-3{
            display: none;
        }

        .pricingContainer {
            margin: 50px 0;

            h4 {
                font-size: 14px;
                margin-bottom: 10px;
            }

            h2 {
                font-size: 1.5rem;
                line-height: 2rem;
                margin-bottom: 10px;
            }

            >p {
                font-size: 1rem;
                margin-bottom: 20px;
            }

            .pricingCardSection {

                .pricingFilter {
                    width: 100%;
                    gap: 10px;
                    margin: 0;

                    .priceFilter {
                        font-size: 14px;
                    }
                }

                .pricing_Card {
                    flex-wrap: wrap;
                    gap: 50px;

                    .package_Card {
                        width: 100%;
                    }
                }
            }

            .asK {
                font-size: 1.2rem;
            }

            .didntCta {
                font-size: 1rem;
            }
        }
    }
}

/* pricing section */


/* faq section */
.faqSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 -1px 30px #00000710;

    .faqContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 80px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .faq-intro {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-bottom: 40px;

            h2 {
                font-size: 2.5rem;
                line-height: 3rem;
                margin-bottom: 15px;
                color: #010101;
                text-align: center;
                max-width: 700px;
            }

            >p {
                color: #333;
                text-align: center;
                max-width: 750px;
                font-size: 1.2rem;
            }
        }

        .faq-list {
            width: 100%;
            height: auto;
            max-width: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 15px;

            .faq-card {
                width: 100% !important;
                height: auto;
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 16px;
                padding: 0 24px;
                background: #fff;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                position: relative;
                overflow: hidden;

                .faq-question {
                    width: 100% !important;
                    height: auto;
                    background: none;
                    border: none;
                    padding: 24px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;


                    span {
                        color: #010101;
                        font-size: 1.2rem;
                        line-height: 1.5rem;
                        font-weight: 500 !important;
                        transition: color 0.3s ease;
                    }

                    i {
                        font-size: 20px;
                        transition: all .3s ease;
                        color: #040053;
                        background: #f1f3ff;
                        padding: 8px;
                        border-radius: 50%;
                    }
                }

                .faq-answer {
                    width: 100% !important;
                    overflow: hidden;
                    height: 0;

                    p {
                        padding-bottom: 24px;
                        padding-top: 10px;
                        font-size: 1.2rem;
                        line-height: 1.5;
                        color: #6a6a6a;
                    }
                }

            }

            /* Hover State */
            .faq-card:hover {
                border-color: #1c07fa40;
                transform: translateY(-3px);
                box-shadow: 0 10px 30px rgba(4, 0, 83, 0.06);
            }

            /* Active/Open State */
            .faq-card.active {
                border-color: #1c07fa;
                background: #f8f9ff;
                box-shadow: 0 15px 40px rgba(28, 7, 250, 0.08);

                .faq-question span {
                    color: #1c07fa;
                }

                .faq-question i {
                    background: #1c07fa;
                    color: #fff;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .faqSection {
        padding: 0 10px;

        .faqContainer {
            margin: 50px 0;

            .faq-intro {

                span {
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                h2 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                    margin-bottom: 10px;
                }

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

            .faq-list {

                .faq-card {

                    .faq-question {
                        width: 100%;
                        text-align: left;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        span {
                            font-size: 1.05rem;
                        }
                    }

                    .faq-answer {

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

/* faq section */

/* =========================================
   HOME - TESTIMONIAL HIGHLIGHTS
========================================= */
.testimonialHomeSection {
    padding: 100px 10px;
    background: #f8f9ff;
    text-align: center;
}

.testimonialHomeContainer {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonialHomeContainer h2 {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 15px;
    color: #010101;
}

.testimonialHomeContainer > p {
    font-size: 1.2rem;
    color: #555;
    max-width: 600px;
    margin-bottom: 30px;
}

.testi-Home-Grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    margin-bottom: 60px;
}

.testi-Card-Home {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testi-Card-Home:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(69, 63, 255, 0.1);
    border-color: rgba(69, 63, 255, 0.2);
}

.testi-Metric {
    font-size: 3rem;
    font-weight: 800;
    color: #453fff;
    margin-bottom: 15px;
    line-height: 1;
}

.testi-Quote {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 25px;
    min-height: 100px; /* To align author sections */
}

.testi-Author {
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.testi-Author h5 {
    font-size: 1.1rem;
    color: #010101;
    margin-bottom: 2px;
}

.testi-Author small {
    color: #666;
    font-size: 0.9rem;
}

.testi-Home-CTA {
    padding: 12px 24px;
    color: #fff;
    background: linear-gradient(90deg, #040053, #1c07fa);
    border-radius: 50px;
    transition: all .3s ease-in-out;
    font-size: 1.1rem;
    margin-top: 60px;
}

.testi-Home-CTA:hover {
    box-shadow: 3px 3px 20px #1c07fa25;
    transform: translateY(-2px);
}

/* Responsive for Testimonials */
@media (max-width: 992px) {
    .testi-Home-Grid {
        grid-template-columns: 1fr;
    }
    .testi-Quote {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .testimonialHomeSection {
        padding: 60px 10px;
    }
    .testimonialHomeContainer h2 {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }
    .testimonialHomeContainer > p {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    .testi-Home-Grid {
        gap: 20px;
        margin-bottom: 40px;
    }
    .testi-Card-Home {
        padding: 30px;
    }
}

/* Lenis Scroll Configuration */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}