@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif !important;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    color: #111;
}

a {
    text-decoration: none;
    color: #111;
}

ul {
    list-style: none;
}

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

.hero_grad {
    color: transparent;
    background: linear-gradient(90deg, #111, #193cb8);
    background-clip: text;
    -webkit-background-clip: text;
}

/* hero section */
.heroSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 10px;
    background-color: #bddaff10;
    position: relative;
    border-bottom: 1px solid #bddaff30;

    .bluryCirc-1 {
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: #dae9ff;
        z-index: 1;
        top: 30%;
        left: 15%;
        filter: blur(50px);
    }

    .bluryCirc-2 {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #dae9ff;
        left: 20%;
        top: 40%;
        filter: blur(50px);

    }

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

        .heroLeft {
            width: 50%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: start;
            flex-direction: column;
            z-index: 2;

            h2 {
                font-size: 3rem;
                line-height: 3.5rem;
                color: #111;
                margin-bottom: 20px;
            }

            p {
                color: #6a6a6a;
                font-size: 1.2rem;
                margin-bottom: 20px;
            }

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

                .heroPrimaryCta {
                    font-size: 1rem;
                    padding: 12px 24px;
                    color: #eef6ff;
                    background-color: #0f172b;
                    border-radius: 8px;
                    transition: all .3s ease-in-out;
                }

                .heroPrimaryCta:hover {
                    box-shadow: 3px 3px 20px #0f172b15;
                    transform: translateX(3px);
                    color: #fff;
                }

                .heroSecondaryCta {
                    padding: 12px 24px;
                    color: #0f172b;
                    border: 1px solid #0f172b;
                    border-radius: 8px;
                    transition: all .3s ease-in-out;

                }

                .heroSecondaryCta:hover {
                    transform: translateX(3px);
                    box-shadow: 3px 3px 20px #0f172b15;
                }
            }

            .hero-hr {
                width: 100%;
                height: 2px;
                background: none;
                border: 1px solid #6a6a6a60;
                margin: 20px 0;
            }

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

                .statCard {
                    width: auto;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;

                    .stat-Icon {
                        width: auto;
                        height: auto;

                        i {
                            font-size: 1.2rem;
                            color: #193cb8;
                            background-color: #eef6ff;
                            padding: 8px;
                            border-radius: 50%;
                        }
                    }

                    .statContent {
                        width: auto;
                        height: auto;

                        h5 {
                            font-size: 1rem;
                            line-height: 1rem;
                            color: #444;
                        }

                        small {
                            font-size: 14px;
                            color: #6a6a6a;
                        }
                    }
                }
            }
        }

        .heroRight {
            width: 50%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 2;

            img {
                width: 80%;
                height: auto;
                min-height: 600px;
                border-radius: 25px;
                box-shadow: 2px 2px 20px #0f172b10;
                height: auto;
                object-fit: cover;
                /* animation: floating-Image 3s linear infinite; */
            }

            video{
                width: 80%;
                height: auto;
                min-height: 550px;
                border-radius: 25px;
                object-fit: cover;
                box-shadow: 2px 2px 20px #0f172b10;
            }
        }
    }
}


@keyframes floating-Image {

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

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

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

        .bluryCirc-1,
        .bluryCirc-2 {
            display: none;
        }

        .heroContainer {
            margin: 50px 0;
            flex-wrap: wrap-reverse;
            gap: 40px;

            .heroLeft {
                width: 100%;
                height: auto;

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

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

                p {
                    font-size: 1rem;
                }

                .heroCta {
                    gap: 10px;
                    margin: 10px 0;
                }

                .hero-hr {
                    margin: 25px 0;
                    width: 80%;
                }

                .heroStats {
                    flex-wrap: wrap;
                    gap: 20px 10px;
                }
            }

            .heroRight {
                width: 100%;
                height: auto;

                img {
                    width: 100%;
                    height: 400px;
                    min-height: 400px;
                }
                video{
                width: 100%;
                height: auto;
                min-height: 400px;
                border-radius: 25px;
                object-fit: cover;
                box-shadow: 2px 2px 20px #0f172b10;
            }
            }
        }
    }
}

/* hero section */

/* service section */
.serviceSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    padding: 0 10px;

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

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

        >p {
            color: #444;
            max-width: 750px;
            margin-bottom: 50px;
            text-align: center;
        }

        .serviceCards {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 15px 15px;
            flex-wrap: wrap;

            .serve-Card {
                width: 24%;
                height: auto;
                min-height: 300px;
                max-height: 320px;
                border-radius: 8px;
                box-shadow: 3px 3px 10px #0f172b15;
                background-color: #fff;
                padding: 20px;
                display: flex;
                align-items: start;
                justify-content: space-between;
                flex-direction: column;
                transition: all .3s ease-in-out;

                >i {
                    font-size: 1.5rem;
                    color: #0f172b;
                    background-color: #193cb810;
                    padding: 8px;
                    border-radius: 5px;
                    transition: all .3s ease-in-out;
                }

                .serve-content {
                    width: auto;
                    height: auto;

                    h3 {
                        font-size: 1.2rem;
                        line-height: 1.4rem;
                        color: #222;
                        margin-bottom: 5px;
                    }

                    >p {
                        color: #6a6a6a;
                        margin-bottom: 15px;
                    }
                }

                .tags-fea {
                    width: auto;
                    height: auto;
                    display: flex;
                    align-items: start;
                    justify-content: start;
                    flex-direction: column;
                    flex-wrap: wrap;
                    gap: 8px;

                    small {
                        padding: 3px 6px;
                        font-size: 14px;
                        background-color: #bddaff40;
                        border-radius: 50px;

                        i {
                            color: #0C7779;
                        }
                    }
                }
            }

            .serve-Card:hover {
                box-shadow: 5px 5px 30px #0f172b25;
                transform: translateY(-3px);

                >i {
                    color: #bddaff;
                    background-color: #193cb8;
                }
            }
        }
    }
}

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

        .serviceContainer {
            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: 40px;
            }

            .serviceCards {
                position: relative;
                gap: 40px;

                .serve-Card {
                    width: 100%;
                    height: auto;
                    position: sticky;
                    top: 50px;
                }
            }
        }
    }
}

/* service section */

/* why us section */
.whyusSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #bddaff10;
    padding: 0 10px;

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

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

            img {
                width: 80%;
                height: auto;
                object-fit: cover;
                filter: drop-shadow(4px 4px 20px #00000015);
                animation: floating-Image 3s linear infinite;
            }
        }

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

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

            p {
                font-size: 1.1rem;
                color: #444;
            }

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

                .trust-card {
                    width: 48%;
                    height: auto;
                    border-radius: 12px;
                    box-shadow: 3px 3px 12px #0f172b15;
                    padding: 15px;
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                    flex-direction: column;
                    gap: 15px;
                    transition: all .3s ease-in-out;

                    i {
                        font-size: 1.5rem;
                        color: #0f172b90;
                        background-color: #f9f9f9;
                        box-shadow: 2px 2px 20px #00000015;
                        padding: 12px;
                        border-radius: 50%;
                        transition: all .3s ease-in-out;
                    }


                    .trustContent {
                        width: auto;
                        height: auto;

                        h3 {
                            color: #0f172b;
                            font-size: 1.1rem;
                        }

                        small {
                            color: #6a6a6a;
                            font-size: 14px;
                        }
                    }
                }

                .trust-card:hover {
                    transform: translateY(-2px);

                    i {
                        color: #bddaff;
                        background-color: #0f172b;
                    }
                }
            }

            .whyusCta {
                padding: 12px 24px;
                color: #fff;
                background-color: #0f172b;
                border-radius: 12px;
            }
        }
    }
}

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

        .whyusContainer {
            margin: 50px 0;
            flex-wrap: wrap;
            gap: 40px;

            .whyusLeft {
                width: 100%;
                height: 100%;

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

            .whyusRight {
                width: 100%;

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

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

                p {
                    font-size: 1rem;
                }

                .trustCards {
                    flex-wrap: wrap;
                    gap: 10px;

                    .trust-card {
                        width: 48%;
                        height: auto;
                        min-height: 250px;
                        max-height: 250px;

                        h3 {
                            font-size: 1rem !important;
                        }
                    }
                }
            }
        }
    }
}

/* why us section */

/* who we serve */
.whoWeServeSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    padding: 0 10px;

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

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

            .who-top-left {
                width: 50%;
                height: auto;

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

            .who-top-Right {
                width: 40%;
                height: auto;

                p {
                    font-size: 1rem;
                    color: #444;
                    margin-bottom: 15px;
                }

                a {
                    color: #193cb8;
                    text-decoration: underline #193cb8;
                }
            }
        }

        .who-bottom {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

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

                .whoServe-Card {
                    width: 19%;
                    height: 130px;
                    background-color: #6a6a6a15;
                    border-radius: 8px;
                    padding: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    flex-direction: column;

                    i {
                        color: #11111190;
                        font-size: 2rem;
                        margin-bottom: 10px;
                    }

                    h3 {
                        font-size: 1.1rem;
                    }
                }
            }
        }
    }
}

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

        .whoweserveContainer {
            margin: 50px 0;
            gap: 30px;

            .who-Top {
                width: 100%;
                flex-wrap: wrap;

                .who-top-left,
                .who-top-Right {
                    width: 100%;
                    height: auto;

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

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

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

            .who-bottom {

                .whoServeCards {
                    flex-wrap: wrap;
                    margin: 20px 0;
                    gap: 10px;

                    .whoServe-Card {
                        width: 48%;
                        max-width: 48%;
                        min-width: 45%;

                        h3 {
                            font-size: 1rem !important;
                        }
                    }
                }
            }
        }
    }
}

/* who we serve */

/* how its works */
.howItsWorks {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #0f172b;

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


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

        p {
            color: #abb7ce;
            max-width: 700px;
            text-align: center;
            margin-bottom: 50px;
        }

        .processCards {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            position: relative;

            .process_hr {
                width: 100%;
                height: 2px;
                position: absolute;
                top: 30%;
                opacity: 0.3;
            }

            .processCard {
                width: 20%;
                height: auto;
                min-height: 240px;
                padding: 20px 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                overflow: hidden;
                border-radius: 12px;
                z-index: 3;
                /* border: 1px solid #1e5df220; */
                transition: all .3s ease-in-out;

                h5 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                    color: #50a2ff;
                    background-color: #1d293d;
                    padding: 20px;
                    border-radius: 50%;
                    margin-bottom: 25px;
                }

                h3 {
                    font-size: 1.1rem;
                    color: #f9f9f9;
                    margin-bottom: 10px;
                }


                small {
                    color: #abb7ce;
                }
            }

            .processCard:hover {
                background-color: #bddaff;

                h3 {
                    color: #0f172b;
                }

                small {
                    color: #222;
                }
            }
        }
    }
}

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

        .howitsWorkContainer {
            margin: 50px 0;


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

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

            .processCards {
                flex-wrap: wrap;
                gap: 10px;

                .process_hr {
                    display: none !important;
                    width: 100%;
                    transform: rotate(90deg);
                }

                .processCard {
                    width: 48%;
                    padding: 10px !important;
                }

                .processCard:nth-child(6) {
                    width: 100% !important;
                }
            }
        }
    }
}

/* how its works */

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

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

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

        >p {
            color: #444;
            font-size: 1rem;
            /* margin-bottom: 50px; */
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            i {
                color: #fdc700;
            }

            img {
                width: 20px;
                height: 20px;
            }
        }

        .testimonialCards {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            /* overflow: hidden; */

            .testimonialCard-Wrapper {
                position: relative;
                width: 100%;
                height: auto;
                /* overflow: hidden; */


                .event-nav {
                    position: absolute;
                    bottom: -45px;
                    /* margin-bottom: 20px; */
                    transform: translateY(-50%);
                    z-index: 10;
                    /* background: rgba(0, 0, 0, 0.4); */
                    background: #f9f9f9;
                    color: #121212;
                    border: none;
                    font-size: 1.5rem;
                    padding: 12px;
                    cursor: pointer;
                    border-radius: 50%;
                    transition: background 0.3s ease;
                }

                .event-nav:hover {
                    /* background: rgba(0, 0, 0, 0.6); */
                    background: #121212;
                    color: #f9f9f9;
                }

                .event-nav.left {
                    left: 45%;
                }

                .event-nav.right {
                    left: 50%;
                }

                .testimonialSlider {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;
                    overflow: hidden;
                    scroll-behavior: smooth;
                    padding: 80px 0;
                    scroll-snap-type: x mandatory;
                    flex-shrink: 0;

                    .testimonial_Card {
                        width: 35% !important;
                        min-width: 32%;
                        max-width: 35%;
                        height: auto;
                        min-height: 250px;
                        padding: 20px;
                        border-radius: 12px;
                        border: 1px solid #0f172b15;
                        display: flex;
                        align-items: start;
                        justify-content: space-between;
                        flex-direction: column;
                        position: relative;
                        box-shadow: 2px 2px 30px #bddaff15;
                        scroll-snap-align: start !important;

                        .abs-quote-icon {
                            width: 60px;
                            height: 60px;
                            z-index: 1;
                            stroke: #0f172b25;
                            margin-bottom: 20px;
                        }

                        p {
                            color: #444;
                            font-size: 1.1rem !important;
                            z-index: 2;
                            margin-bottom: 20px;
                        }

                        .reviewer {
                            width: 100%;
                            height: auto;

                            h3 {
                                font-size: 1.2rem;
                                color: #1d293d;
                            }
                        }
                    }
                }
            }

            /* .swiper {
                width: 100%;
                margin: 40px 0;
                position: relative;
                scroll-snap-type: x mandatory !important;

                .swiper-wrapper {
                    position: relative;
                    gap: 20px;
                    padding: 30px 0;
                    scroll-snap-type: x mandatory !important;

                   
                }

            } */

        }
    }
}

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

        .testimonialContainer {
            margin: 80px 0;

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

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

            p {
                flex-wrap: wrap;
                margin-bottom: 25px;
            }

            .testimonialCards {
                margin: 0;
                padding: 0;

                .testimonialCard-Wrapper {
                    margin: 0;
                    padding: 0;

                    .event-nav.left {
                        left: 30%;
                    }

                    .event-nav.Right {
                        right: 30%;
                    }

                    .testimonialSlider {
                        margin: 0;
                        /* padding: 0; */
                        padding-top: 0;
                        padding-bottom: 50px;
                        align-items: center;
                        justify-content: center;

                        .testimonial_Card {
                            width: 100% !important;
                            min-width: 100%;
                            max-width: 100%;
                        }
                    }
                }
            }
        }
    }
}

/* testimonial section */

/* cta section */
.ctaSection {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* background: #193cb8; */
    /* background: linear-gradient(30deg, #0f172b, #193cb8); */

    .ctaContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 80px 0;
        padding: 80px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: linear-gradient(30deg, #0f172b, #193cb8);
        border-radius: 25px;

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

        p {
            font-size: 1.1rem;
            color: #f9f9f9;
            max-width: 750px;
            text-align: center;
            margin-bottom: 40px;
        }

        .ctaSecBtns {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;

            .ctaPrimary {
                font-size: 1.1rem;
                padding: 12px 24px;
                color: #121212;
                background: #dae9ff;
                border-radius: 8px;
                transition: all .3s ease-in-out;
            }

            .ctaPrimary:hover {
                box-shadow: 3px 3px 20px #eef6ff15;
                transform: translateX(3px);
            }

            .ctaSecondary {
                font-size: 1.1rem;
                padding: 12px 24px;
                color: #eef6ff;
                border: 1px solid #eef6ff;
                border-radius: 8px;
                transition: all .3s ease-in-out;
            }

            .ctaSecondary:hover {
                box-shadow: 3px 3px 20px #eef6ff15;
                transform: translateX(3px);
            }

        }
    }
}

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

        .ctaContainer {
            margin: 50px 0;
            padding: 50px 10px;

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

            p {
                font-size: 1rem;
            }

            .ctaSecBtns {
                flex-wrap: wrap;
                gap: 15px;

                a {
                    width: 90%;
                    padding: 15px;
                    font-size: 1rem !important;
                }
            }
        }
    }
}

/* cta section */

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

    .contactContainer {
        width: 100%;
        height: auto;
        max-width: 1400px;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 40px;
        margin: 80px 0;

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

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

            >p {
                color: #444;
                margin-bottom: 40px;
                max-width: 80%;
            }

            .contactDetails {
                width: 100%;
                height: auto;
                display: flex;
                align-items: start;
                justify-content: start;
                flex-direction: column;
                gap: 30px;

                .contact_Card {
                    width: 50%;
                    height: auto;
                    padding: 15px;
                    border-radius: 8px;
                    border: 1px solid #193cb810;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    gap: 10px;
                    transition: all .3s ease-in-out;

                    .contact_Left {
                        width: auto;
                        height: auto;

                        i {
                            font-size: 1.2rem;
                            color: #193cb8;
                            background-color: #193cb815;
                            padding: 12px;
                            border-radius: 50%;
                            box-shadow: 2px 2px 20px #193cb815;
                        }
                    }

                    .contact_Right {
                        h3 {
                            font-size: 1.2rem;
                            color: #111;
                            margin-bottom: 5px;
                        }

                        p {
                            color: #444;
                            margin-bottom: 4px;
                        }
                    }
                }

                .contact_Card:hover {
                    box-shadow: 5px 5px 20px #193cb810;
                }
            }
        }

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


            form {
                width: 100%;
                height: auto;
                display: flex;
                align-items: start;
                justify-content: start;
                flex-direction: column;
                padding: 20px;
                box-shadow: 3px 3px 30px #0f172b10;
                border-radius: 12px;
                gap: 30px;

                >h3 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                    /* margin-bottom: 20px; */
                    color: #121212;
                }

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

                    .form-field {
                        width: 100%;
                        height: auto;
                        display: flex;
                        align-items: start;
                        justify-content: start;
                        flex-direction: column;

                        label {
                            font-size: 1rem;
                            color: #222;
                            margin-bottom: 3px;
                        }

                        input,
                        textarea, select {
                            padding: 12px;
                            color: #0f172b;
                            border: 1px solid #0f172b40;
                            width: 100% !important;
                            border-radius: 8px;
                        }

                        textarea {
                            height: 150px;
                        }
                    }

                }

                .form-group:nth-child(3) {
                    flex-direction: row !important;

                    input {
                        width: 100%;
                    }
                }

                .form-group:nth-child(4) {
                    select {
                        padding: 12px;
                        color: #0f172b;
                        border: 1px solid #0f172b40;
                        width: 100% !important;
                        border-radius: 8px;
                    }

                }

                button{
                    width: 100%;
                    color: #fff;
                    background: linear-gradient(20deg, #0f172b, #193cb8);
                    border: none;
                    border-radius: 8px;
                    padding: 12px 24px;
                    font-size: 1.1rem;
                }
            }
        }
    }
}

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

        .contactContainer{
            margin: 50px 0;
            flex-wrap: wrap;

            .contactLeft, .contactRight{
                width: 100%;
                height: auto;
            }

            .contactLeft{
                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;
                }

                .contactDetails{
                    width: 100%;
                    flex-wrap: wrap;
                    gap: 15px;

                    .contact_Card{
                        width: 100%;

                        h3{
                            font-size: 1rem !important;
                            margin-bottom: 2px !important;
                        }

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

            .contactRight{

                form{
                    padding: 12px;

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

                    button{
                        font-size: 1rem !important;
                    }
                }
            }
        }
    }
}
/* contact section */