/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Quicksand:wght@300..700&display=swap');

/* font-family: "Host Grotesk", sans-serif; */
/* font-family: "Quicksand", sans-serif; */

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

html,
body {
    width: 100%;
    height: 100%;
    font-family: "Quicksand", sans-serif;
}

body {
    /* background: linear-gradient(); */
    /* background: #000; */
    /* background: linear-gradient(178.6deg, rgb(232, 245, 253) 3.3%, rgb(252, 253, 255) 109.6%); */
    /* background: linear-gradient(178.6deg, #e8f5fd 3.3%, #fcfdff 109.6%); */
    background-color: #f9f9f9;
    background-repeat: no-repeat;
}

#MainContainer {
    width: 100%;
    height: 100%;
    /* position: relative; */
}

::-webkit-scrollbar {
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h5 {
    font-family: "Host Grotesk", sans-serif;
}

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

a,
p {
    font-size: 1rem;
    color: #111;
}

/* offer bar */
.offer-bar{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #27005d;
    
    p{
        color: #fdfddf;
    }
}

@media only  screen and (max-width:768px){
    .offer-bar p{
        font-size: 14px;
    }
}
/* offer bar */

/* nav */
.navigation {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* position: fixed; */
    /* background: #fafafa50;
    backdrop-filter: blur(10px); */
    z-index: 99;
}

.nav-container {
    width: 100%;
    max-width: 1400px;
    height: auto;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 50px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: #fafafa50;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.logo,
.nav-items,
.nav-cta {
    width: auto;
    height: auto;
}

.logo img {
    width: 60px;
    height: auto;
}

.nav-items ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 40px;
}

.nav-items ul li a {
    font-size: 1.2rem;
    font-weight: 600;
    color: #121212;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    cursor: pointer;
}

.nav-items ul li {
    list-style: none;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.nav-items ul li a i {
    color: transparent;
    background: -webkit-gradient(linear, left top, right top, from(#5206ac), to(#8218ff));
    background: -o-linear-gradient(left, #5206ac, #8218ff);
    background: linear-gradient(90deg, #5206ac, #8218ff);
    background-clip: text;
    font-size: 1.1rem;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.nav-items ul li a:hover i {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.nav-cta a {
    padding: 10px 20px;
    background: -o-linear-gradient(325deg, #5206ac, #8218ff);
    background: linear-gradient(125deg, #5206ac, #8218ff);
    border-radius: 15px;
    color: #f9f9f9;
    font-size: 1.1rem;
    font-weight: 600;
    -webkit-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    transition: all 3s ease-in;
}

.nav-cta a:hover {
    background: -o-linear-gradient(215deg, #5206ac, #8218ff);
    background: linear-gradient(-125deg, #5206ac, #8218ff);
}

/* nav */

/* hero section */
.heroSection {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
    overflow: hidden;
}

.HeroContainer {
    width: 100%;
    height: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    max-width: 1400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.floating-Circle {
    width: 300px;
    height: 300px;
    border: 30px solid #6305d240;
    border-radius: 1000px;
    position: absolute;
    top: 60px;
    left: -200px;
}

.floating-Circle1 {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 60px;
    right: -200px;
    border: 30px solid #6305d280;
    border-radius: 1000px;
}

.floating-image {
    -webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;
}

@-webkit-keyframes float {

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

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

@keyframes float {

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

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

.HeroContainer h3 {
    color: #121212;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.HeroContainer h1 {
    font-size: 3.5rem;
    line-height: 4rem;
    text-align: center;
    /* color: #27005d; */
    color: #222;
    text-transform: capitalize;
    margin-bottom: 10px;
    max-width: 900px;
}

.highlight {
    /* color: #27005d; */
    /* color: #6305d2; */
    color: transparent;
    background: -webkit-gradient(linear, left top, right top, from(#310075), to(#7606fb));
    background: -o-linear-gradient(left, #310075, #7606fb);
    background: linear-gradient(90deg, #310075, #7606fb);
    background-clip: text;
    -webkit-background-clip: text;
}

.HeroContainer p {
    color: #222;
    font-size: 1rem;
    text-align: center;
    max-width: 800px;
    font-weight: 500;
    margin-bottom: 20px;
}

.hero-cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.hero-cta1,
.hero-cta2 {
    padding: 10px 20px;
    border: 1px solid #5206ac;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 550;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-transform: capitalize;
}

.hero-cta1 {
    background: -o-linear-gradient(325deg, #5206ac, #8218ff);
    background: linear-gradient(125deg, #5206ac, #8218ff);
    border-radius: 15px;
    color: #f9f9f9;
}

.hero-cta2 .hero-cta2-icon {
    color: transparent;
    -webkit-transform: rotateX(45deg);
            transform: rotateX(45deg);
    background: -o-linear-gradient(45deg, #27005d, #6305d2);
    background: linear-gradient(45deg, #27005d, #6305d2);
    -webkit-background-clip: text;
            background-clip: text;
}

.hero-cta2:hover,
.hero-cta1:hover {
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

.hero-cta1:hover {
    background: none;
    border: 1px solid #5206ac;
    color: #111;
}

.hero-cta2:hover {
    background: -o-linear-gradient(325deg, #5206ac, #8218ff);
    background: linear-gradient(125deg, #5206ac, #8218ff);
    color: #f9f9f9;
}

.hero-cta2:hover .hero-cta2-icon {
    color: #fff;
    background: none;
}

.company-logos {
    width: 100%;
    max-width: 1400px;
    height: auto;
    margin-top: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.company-logos>h4 {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    color: transparent;
    background: -o-linear-gradient(45deg, #27005d, #5206ac);
    background: linear-gradient(45deg, #27005d, #5206ac);
    /* color: #fafafa; */
    background-clip: text;
    -webkit-background-clip: text;
}

.com_wrapper {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}


.com_wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Gradient fade on both sides */
.com_wrapper::before,
.com_wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.com_wrapper::before {
    left: 0;
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent));
    background: -o-linear-gradient(left, #fff, transparent);
    background: linear-gradient(to right, #fff, transparent);
}

.com_wrapper::after {
    right: 0;
    background: -webkit-gradient(linear, right top, left top, from(#fff), to(transparent));
    background: -o-linear-gradient(right, #fff, transparent);
    background: linear-gradient(to left, #fff, transparent);
}

.com_cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    padding: 20px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-animation: scroll-left 150s linear infinite;
            animation: scroll-left 150s linear infinite;
}


/* @keyframes scroll-left {

    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-40%);
    }
} */

@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(32%);
                transform: translateX(32%);
    }

    100% {
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}

@keyframes scroll-left {
    0% {
        -webkit-transform: translateX(32%);
                transform: translateX(32%);
    }

    100% {
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}

.com_cards .comCard {
    width: auto;
    min-width: 200px;
    max-width: 250px;
    height: 100px;
    padding: 10px;
    border: 1px solid #8218ff50;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-radius: 25px;
    background: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.comCard:nth-child(1) {
    margin-left: 180px;
}

.com-img {
    width: auto;
}

.comDetails {
    width: 70%;
}


.com-img img {
    width: auto;
    max-width: 70px;
    height: auto;
}

.comDetails {
    margin-left: 10px;
    margin-top: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.comCard:hover {
    border: 1px solid #5206ac;
    background-color: #f4f1ff80;
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
    -webkit-box-shadow: 5px 5px 30px #8218ff10;
            box-shadow: 5px 5px 30px #8218ff10;
    z-index: 10;
}

.comDetails h4 {
    font-size: 1rem;
    color: #121212;
}

.comDetails p {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

/* hero section */


/* about section */
.aboutsection {
    width: 100%;
    height: auto;
    min-height: 600px;
    max-height: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: -o-linear-gradient(220deg, #27005d, #5206ac);
    background: linear-gradient(-130deg, #27005d, #5206ac);
}

.aboutContainer {
    width: 100%;
    max-width: 1400px;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 40px;
}

.about-left,
.about-right {
    width: 50%;
    height: auto;
    overflow: hidden;
}

.about-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}

.about-left img {
    width: 90%;
    height: auto;
}

.about-right {
    h3 {
        color: #f1f1f1;
        font-weight: 500;
        text-transform: capitalize;
    }

    h1 {
        color: #f9f9f9;
        font-weight: 600;
        text-transform: capitalize;
        font-size: 2.5rem;
        line-height: 3rem;
        margin-bottom: 10px;
    }

    >p {
        color: #fdfdfd;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .bout-cards {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        /* padding: 10px; */
    }

    .bout-up,
    .bout-lo {
        width: 100%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 10px;
        gap: 20px 20px;
    }

    .bout-cards .boutCard {
        width: 50%;
        height: auto;
        min-height: 150px;
        max-height: 200px;
        border-radius: 15px;
        padding: 20px;
        /* background-color: #f2f2f2; */
        background-color: #8d3fff60;
    }

    .boutCard i {
        font-size: 2rem;
        /* color: #5206ac; */
        color: #fdfdfd;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .boutCard h4 {
        font-size: 1.1rem;
        /* color: #111; */
        color: #fff;
        font-weight: 550;
    }

    .boutCard p {
        /* color: #333; */
        color: #f1f1f1;
        text-align: justify;
    }
}

/* about section */


/* sub about section */
.subAbout {
    width: 100%;
    height: auto;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 30px;
    margin-bottom: 30px;

    .subAboutContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        h3 {
            color: #121212;
            font-size: 1.5rem;
            font-weight: 500;
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            font-size: 3.5rem;
            /* line-height: rem; */
            text-align: center;
            font-weight: 500;
            /* color: #27005d; */
            color: #222;
            text-transform: capitalize;
            margin-bottom: 10px;
            max-width: 1200px;

            img {
                width: auto;
                height: 50px !important;
                height: auto;
                border-radius: 1000px;
            }
        }
    }
}

/* sub about section */


/* usp strap section */
.straps {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    .strapContainer {
        width: 100%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-bottom: 150px;
        margin-top: 50px;

        .strap1,
        .strap2 {
            width: 100%;
            padding: 10px 5px;

            h3 {
                font-size: 1.5rem;
                font-weight: 400;
                text-transform: uppercase;
            }
        }

        .strap2 {
            -webkit-transform: rotate(7deg);
                -ms-transform: rotate(7deg);
                    transform: rotate(7deg);
            background-color: #5206ac;
            /* margin-top: 20px; */
            margin-bottom: -30px;

            h3 {
                color: #fafafa;
            }
        }

        .strap1 {
            -webkit-transform: rotate(-7deg);
                -ms-transform: rotate(-7deg);
                    transform: rotate(-7deg);
            background-color: #8218ff;
            margin-bottom: -50px;

            h3 {
                color: #fafafa;
            }
        }
    }
}

/* usp strap section */


/* service section */
.serviceSection {
    width: 100%;
    height: auto;
    min-height: 600px;
    max-height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.ServiceContainer {
    width: 100%;
    max-width: 1400px;
    height: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.ServiceContainer h3 {
    color: #121212;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.ServiceContainer h2 {
    font-size: 3rem;
    line-height: 3.5rem;
    text-align: center;
    /* color: #27005d; */
    color: #222;
    text-transform: capitalize;
    margin-bottom: 10px;
    max-width: 900px;
}

.serve-Cards {
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* gap: 50px; */
}

.servCard {
    width: 32%;
    margin-bottom: 20px;
    height: auto;
    min-height: 300px;
    border: 1px solid #12121240;
    border-radius: 25px;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
}

.serve-card-absolute-image {
    position: absolute;
    right: 20px;
    top: -30px;
    rotate: 20deg;
    z-index: 2;
    border-radius: 15px;
    opacity: 0;
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    pointer-events: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.serve-card-absolute-image-2 {
    position: absolute;
    right: 35px;
    top: -45px;
    rotate: 4deg;
    z-index: 1;
    border-radius: 15px;
    opacity: 0;
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    pointer-events: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}


/* Blur all non-hovered cards */
.servCard.blur {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0.5;
    -webkit-transform: scale(0.97);
        -ms-transform: scale(0.97);
            transform: scale(0.97);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Reset everything on smaller screens */
@media (max-width: 768px) {

    .serve-card-absolute-image,
    .serve-card-absolute-image-2 {
        opacity: 1 !important;
        -webkit-transform: scale(1) !important;
            -ms-transform: scale(1) !important;
                transform: scale(1) !important;
        position: static !important;
        display: none;
    }

    .servCard.blur {
        -webkit-filter: none !important;
                filter: none !important;
        opacity: 1 !important;
        -webkit-transform: scale(1) !important;
            -ms-transform: scale(1) !important;
                transform: scale(1) !important;
    }
}

.servCard:hover {
    border: 1px solid #5206ac;
    -webkit-box-shadow: 10px 10px 60px #27005d15;
            box-shadow: 10px 10px 60px #27005d15;
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

.servCard>div>i {
    font-size: 2.5rem;
    background-color: #fafafa;
    /* border: 1px solid #27005d40; */
    border: 1px solid #12121240;
    color: #27005d;
    padding: 5px;
    border-radius: 10px;
    font-weight: 550;
}

.servCard div h5 {
    font-size: 1.3rem;
    font-weight: 550;
    margin-bottom: 3px;
    color: #111;
    text-transform: capitalize;
}

.servCard div p {
    color: #333;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: justify;
}

.servCard div a {
    color: #5206ac;
    font-weight: 550;
}

/* service section */

/* portfolio */
.projectShowcase {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 30px;
    margin-bottom: 80px;

    .projectContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        h3 {
            font-size: 1.1rem;
            color: #121212;
            font-weight: 500;
            text-align: center;
            /* margin-bottom: 10px; */
        }

        h2 {
            font-size: 2.5rem;
            line-height: 3rem;
            text-align: center;
        }

        p {
            font-size: 1rem;
            text-align: center;
            max-width: 800px;
            margin-bottom: 20px;
        }

        .tagsFilter {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: auto;
            height: auto;
            margin-bottom: 30px;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            gap: 20px;

            a {
                padding: 10px 20px;
                background-color: none;
                border: 1px solid #27005d;
                border-radius: 25px;
                font-size: 1rem;
                font-weight: 500;
            }

            .active {
                background: -o-linear-gradient(45deg, #5206ac, #6305d2);
                background: linear-gradient(45deg, #5206ac, #6305d2);
                color: #fafafa;
                border: 1px solid #5206ac;
            }

            a:hover {
                background: -o-linear-gradient(45deg, #5206ac, #6305d2);
                background: linear-gradient(45deg, #5206ac, #6305d2);
                color: #fafafa;
                border: 1px solid #5206ac;
            }
        }

        .projectCards {
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: start;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            gap: 60px 0px;

            .projectCard-Box {
                /* width: 48%; */
                width: 30%;
                height: auto;
                min-height: 350px;
                max-height: auto;
                padding: 15px;
                border-radius: 35px;
                margin-bottom: 60px;
                text-align: left !important;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-align: start;
                    -ms-flex-align: start;
                        align-items: start;
                -webkit-box-pack: start;
                    -ms-flex-pack: start;
                        justify-content: start;
                /* overflow: hidden; */
                position: relative;
                /* background-color: #5206ac10; */

                .project-Content {
                    position: absolute;
                    bottom: -90px;
                    left: 15px;
                    background-color: #f9f9f9;
                    -webkit-box-shadow: 5px 5px 60px #27005d25;
                            box-shadow: 5px 5px 60px #27005d25;
                    width: 100%;
                    padding: 15px;
                    border-radius: 25px;
                    opacity: 0;
                    -webkit-transform: translateY(30px);
                        -ms-transform: translateY(30px);
                            transform: translateY(30px);
                    pointer-events: none;
                }



                img {
                    width: 110%;
                    height: auto;
                    border-radius: 20px;
                    margin-bottom: 15px;
                    -webkit-filter: drop-shadow(5px 5px 60px #5206ac15);
                            filter: drop-shadow(5px 5px 60px #5206ac15);
                }

                h4 {
                    font-size: 1.2rem;
                    color: #121212;
                    text-transform: capitalize;
                    margin-bottom: 5px;
                }

                p {
                    font-size: 1rem;
                    -webkit-mask-box-image: 10px;
                            mask-border: 10px;
                    font-weight: 500;
                    text-align: left;
                    text-transform: capitalize;
                }

                a {
                    color: #6305d2;
                    font-weight: 500;
                    -webkit-transition: all .3s ease-in-out;
                    -o-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;
                }

                a:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

/* portfolio */


/* faq section */
.faqSection {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 30px;
    margin-bottom: 50px;

    .FaqContainer {
        width: 100%;
        height: auto;
        max-width: 1400px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        h3 {
            font-size: 1.1rem;
            font-weight: 500;
            text-align: center;
        }

        h2 {
            font-size: 2.5rem;
            line-height: 3rem;
            text-align: center;
        }


        .faqWrapper {
            width: 100%;
            margin-top: 2.5rem;
        }

        .faqItem {
            border-bottom: 1px solid #ddd;
            padding: 1.2rem 0;
        }

        .faqHeader {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            cursor: pointer;
        }

        .faqHeader h4 {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
        }

        .toggleIcon {
            font-size: 1.6rem;
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: -webkit-transform 0.3s ease;
            -o-transition: transform 0.3s ease;
            transition: transform 0.3s ease;
            transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        }

        .faqContent {
            overflow: hidden;
            height: 0;
            opacity: 0;
            padding-top: 0;
        }
    }
}

/* faq section */



/* contact form */
.contactSection {
    width: 100%;
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    .conContainer {
        width: 100%;
        height: auto;
        max-width: 1400px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;

        .concon-left,
        .concon-right {
            width: 50%;
            height: auto;
        }

        .concon-left {
            h3 {
                color: #121212;
                font-size: 1rem;
                font-weight: 500;
                text-align: left;
            }

            h2 {
                font-size: 3rem;
                line-height: 3.5rem;
                text-align: left;
                /* color: #27005d; */
                color: #222;
                text-transform: capitalize;
                margin-bottom: 10px;
                max-width: 900px;
            }

            p {
                font-weight: 500;
            }

            .contentBox {
                width: 100%;
                height: auto;
                padding: 10px 0;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                gap: 20px;
                -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
            }
        }

        .conBox {
            width: 48%;
            padding: 20px;
            height: auto;
            background: #5206ac10;
            border-radius: 15px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;

            .conBox-icon {
                width: 30%;

                i {
                    font-size: 2rem;
                    color: transparent;
                    background: -o-linear-gradient(45deg, #27005d, #5206ac);
                    background: linear-gradient(45deg, #27005d, #5206ac);
                    background-clip: text;
                    -webkit-background-clip: text;
                }


            }

            .conBox-Text {
                width: 70%;
            }

        }

        .conBox:hover {
            -webkit-transform: translateY(-5px);
                -ms-transform: translateY(-5px);
                    transform: translateY(-5px);
        }

        .concon-right {
            form {
                width: 100%;
                height: auto;
                padding: 20px;

                input,
                select,
                textarea,
                button {
                    width: 100%;
                }

                input,
                select,
                textarea {
                    height: auto;
                    padding: 10px;
                    border-radius: 5px;
                    border: 1px solid #5206ac;
                }

                input:focus,
                select:focus,
                textarea:focus {
                    -webkit-box-shadow: 5px 5px 60px #27005d25;
                            box-shadow: 5px 5px 60px #27005d25;
                }

                .form-group {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    -webkit-box-pack: justify;
                        -ms-flex-pack: justify;
                            justify-content: space-between;
                    padding: 10px;
                    gap: 20px;
                }

                button {
                    width: 100%;
                    padding: 15px;
                    text-align: center;
                    background: -webkit-gradient(linear, left top, right top, from(#5206ac), to(#6305d2));
                    background: -o-linear-gradient(left, #5206ac, #6305d2);
                    background: linear-gradient(90deg, #5206ac, #6305d2);
                    color: #fafafa;
                    font-size: 1.1rem;
                    font-weight: 500;
                    border: none;
                    border-radius: 15px;
                    -webkit-transition: all .5s ease-in-out;
                    -o-transition: all .5s ease-in-out;
                    transition: all .5s ease-in-out;
                }

                button:hover {
                    background: -webkit-gradient(linear, left top, left bottom, from(#6305d2), to(#5206ac));
                    background: -o-linear-gradient(top, #6305d2, #5206ac);
                    background: linear-gradient(180deg, #6305d2, #5206ac);
                    -webkit-box-shadow: 5px 5px 60px #8218ff25;
                            box-shadow: 5px 5px 60px #8218ff25;
                    /* transform: translateX(5px); */
                }
            }
        }
    }

}

/* contact form */

/* convince strip */
.Convince {
    width: 100%;
    height: auto;
    padding: 10px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: -o-linear-gradient(325deg, #5206ac, #8218ff);
    background: linear-gradient(125deg, #5206ac, #8218ff);
    /* background: radial-gradient(#5206ac, #8218ff); */
    /* animation: AnimateConvineStrip 20s linear infinite; */
    -webkit-box-shadow: 0 0 50px #5206ac25;
            box-shadow: 0 0 50px #5206ac25;

    .convinceContainer {
        width: 100%;
        height: auto;
        max-width: 98%;

        h3 {
            font-size: 1.3rem;
            font-weight: 500;
            color: #fafafa;
            text-transform: uppercase;
            /* animation: animateText 20s linear infinite; */

            i {
                font-size: 1.3em;
                font-weight: 400;
            }
        }

    }

}

/* @keyframes animateText {
    0%{
        transform: translateX(-0%);
    }

    100%{
        transform: translateX(-100%);
    }
} */
/* 
@keyframes AnimateConvineStrip {
    0%{
        background: linear-gradient(20deg, #27005d, #1e9cff);
    }
    20%{
        background: linear-gradient(40deg, #6305d2, #5206ac);
        background: linear-gradient(40deg, #6305d2, #067cff);
    }

    50%{
        background: linear-gradient(125deg, #0065f8, #8218ff);
    }

    100%{
        background: linear-gradient(-90deg, #5206ac, #8218ff);
        background: linear-gradient(-90deg, #8218ff, #084fc5);
    }
} */

/* convince strip */


/* testimonial */
.testimonialSection {
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.testimonialContainer {
    width: 100%;
    height: auto;
    max-width: 1400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;

    .testimonial-Left {
        width: 45%;
        height: auto;
    }

    .testimonial-Right {
        width: 55%;
    }

    .testimonial-Left {
        min-height: 300px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        div h4 {
            font-size: 1.1rem;
            font-weight: 500;
            color: #222;
        }

        div h1 {
            font-size: 2.5rem;
            line-height: 3rem;
            color: #111;
        }

        .testimonial_navigationbuttons {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            gap: 20px;
        }

        .testimonial_navigationbuttons a {
            padding: 10px;
            border: 1px solid #27005d40;
            border-radius: 15px;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;

            i {
                font-size: 1.5rem;
                color: #5206ac;
                -webkit-transition: all .3s ease-in-out;
                -o-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;
            }

        }

        a:hover {
            background-color: #27005d;
        }

        a:hover i {
            color: #fafafa;
        }
    }

    .testimonial-Right {
        /* width: 100%; */
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        overflow: hidden;

        .testi-cards-wrapper {
            width: 100%;
            height: auto;
            padding: 20px 10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            overflow: hidden;

            .testicards {
                width: -webkit-max-content;
                width: -moz-max-content;
                width: max-content;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                gap: 20px;
                -ms-flex-wrap: nowrap;
                    flex-wrap: nowrap;

                .testimonialCard {
                    width: 350px;
                    height: auto;
                    min-height: 200px;
                    max-height: auto;
                    padding: 20px;
                    border-radius: 25px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: start;
                        -ms-flex-align: start;
                            align-items: start;
                    -webkit-box-pack: space-evenly;
                        -ms-flex-pack: space-evenly;
                            justify-content: space-evenly;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                    /* background-color: #f9f9f950; */
                    background-color: #5206ac10;
                    -webkit-backdrop-filter: blur(10px);
                            backdrop-filter: blur(10px);
                    /* border: 1px solid #27005d90; */
                    border: 1px solid #11111100;
                    -webkit-transition: all .3s ease-in-out;
                    -o-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;
                    /* box-shadow: 5px 5px 60px #27005d05; */

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

                    h5 {
                        font-size: 1.1rem;
                        text-transform: capitalize;
                        color: #27005d;
                        font-weight: 600;
                        margin-bottom: -20px;
                    }

                    h6 {
                        font-size: 15px;
                        color: #333;
                        text-transform: capitalize;
                        font-weight: 500;
                    }
                }

                .testimonialCard:hover {
                    -webkit-transform: translateY(-5px);
                        -ms-transform: translateY(-5px);
                            transform: translateY(-5px);
                    background-color: #fafafa;
                    border: 1px solid #27005d;
                    -webkit-box-shadow: 5px 5px 60px #27005d15;
                            box-shadow: 5px 5px 60px #27005d15;
                }
            }
        }
    }

}

/* testimonial */

/* cta section */
.ctaSection {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.ctaContainer {
    width: 100%;
    max-width: 1400px;
    height: auto;
    padding: 30px;
    min-height: 300px;
    max-height: auto;
    background-color: #27005d;
    border-radius: 50px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 40px;
    overflow: hidden;
    position: relative;

    .cta-circle {
        width: 280px;
        height: 280px;
        border-radius: 1000px;
        border: 20px solid #f9f9f940;
        position: absolute;
        left: -150px;
    }

    .cta-circle-2 {
        width: 280px;
        height: 280px;
        border-radius: 1000px;
        border: 20px solid #f9f9f940;
        position: absolute;
        right: -150px;
    }

    h4 {
        color: #fdfdfd;
        font-size: 1.1rem;
        font-weight: 550;
        text-transform: capitalize;
    }

    h1 {
        color: #fafafa;
        font-size: 2.5rem;
        line-height: 3rem;
        text-align: center;
        text-transform: capitalize;
        max-width: 700px;
        margin-bottom: 10px;
    }

    p {
        color: #f1f1f1;
        font-size: 1rem;
        max-width: 600px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .cta-buttons {
        width: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 20px;
    }

    .cta-buttons a:nth-child(1) {
        border: 1px solid #fdfdfd;
        color: #fafafa;
        padding: 10px 20px;
        border-radius: 25px;
        font-weight: 550;
        font-size: 1rem;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .cta-buttons a:nth-child(1):hover {
        background-color: #fafafa;
        color: #27005d;
        border: 1px solid #8218ff20;
        -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
                transform: translateY(-5px);
    }

    .cta-buttons a:nth-child(2) {
        border: 1px solid #fdfdfd;
        background-color: #fdfdfd;
        padding: 10px 20px;
        border-radius: 25px;
        color: #27005d;
        font-weight: 550;
        font-size: 1rem;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .cta-buttons a:nth-child(2):hover {
        -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
                transform: translateY(-5px);
        background: none;
        color: #fafafa;
    }

}

/* cta section */

/* footer section */
.footerSection {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-top: 1px solid #11111140;
    background-color: #fafafa;

    .footerContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin-top: 40px;
        padding: 20px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;

        .footer-child-1 {
            width: 35%;
            padding: 0 20px;
            height: auto;
            overflow: hidden;

            img {
                width: 40%;
                margin-bottom: 15px;
            }

            >p {
                width: 100%;
                text-align: justify;
                margin-bottom: 20px;
                font-size: 1rem;
                font-weight: 550;
                color: #333;
            }

            .socials {
                width: 100%;
                height: auto;
                /* padding: 10px 0; */
                margin-bottom: 30px;
            }

            .socials a>i {
                color: #27005d;
                font-size: 1.5rem;
                padding: 8px;
                background: #fdfdfd;
                border-radius: 1000px;
                border: 1px solid #12121215;
                -webkit-box-shadow: 5px 5px 10px #27005d10;
                        box-shadow: 5px 5px 10px #27005d10;
                -webkit-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .socials a:nth-child(1) :hover {
                color: #C13584;
                border: 1px solid #C13584;
            }

            .socials a:nth-child(2) :hover {
                color: #0077B5;
                border: 1px solid #0077B5;
            }

            .socials a:nth-child(3) :hover {
                color: #ff0000;
                border: 1px solid #ff0000;
            }


            h3 {
                font-size: 1.2rem;
                margin-bottom: 10px;
                color: #27005d;
            }

            ul {
                margin-left: 0px;
            }

            ul li {
                list-style: none;
                font-size: 1rem;
                font-weight: 550;
                color: #121212;
                text-transform: capitalize;
                margin-bottom: 8px;
                -webkit-transition: all .3s ease-in-out;
                -o-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;
            }

            ul li a>i {
                color: #27005d;
            }

            ul li:hover {
                color: #5206ac;
                -webkit-transform: translateX(5px);
                    -ms-transform: translateX(5px);
                        transform: translateX(5px);
            }
        }

        .footer-child-1:nth-child(2) {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: start;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;

            .div-child {
                width: 50%;
                height: auto;
            }
        }
    }

    .foot-copy {
        width: 100%;
        max-width: 1400px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-bottom: 20px;

        .foot-copy-left,
        .foot-copy-right {
            width: 50%;
            height: auto;
        }

        p {
            color: #222;
            font-weight: 500;
        }

        .foot-copy-right {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: end;
            gap: 20px;

            a {
                color: #222;
                font-weight: 500;
            }
        }
    }


}

/* footer section */




/* responsive code */
@media only screen and (max-width:768px) {

    body {
        cursor: default;
    }

    .navigation,
    .heroSection,
    .aboutsection,
    .subAbout,
    .straps,
    .serviceSection,
    .projectShowcase,
    .faqSection,
    .contactSection,
    .testimonialSection,
    .Convince .footerSection {
        width: 100%;
        height: auto;
        margin: 20px 0;
        overflow: hidden;
    }

    .cursor,
    .cursor-follow {
        display: none;
    }

    .navigation {
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .nav-container {
        padding: 0;
    }

    .nav-items {
        display: none;
    }

    .nav-cta a {
        font-size: 1.1rem;
        padding: 10px 25px;
    }

    .floating-image {
        display: none;
    }


    .heroSection {
        padding: 0;
    }

    .HeroContainer {
        padding: 10px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .HeroContainer h3 {
        font-size: 15px;
    }

    .HeroContainer h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .HeroContainer>p {
        font-size: 15px;
        text-align: center;
    }

    .hero-cta {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 10px;
    }

    .hero-cta1,
    .hero-cta2 {
        width: 100%;
        padding: 20px;
        text-align: center;
        font-size: 1rem;
    }

    .com_cards {
        margin: 0;
    }

    .company-logos {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .comCard {
        width: 100%;
        min-width: 85%;
        max-width: 90%;
    }

    /* about section */
    .aboutContainer {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .about-left,
    .about-right {
        width: 100%;
    }

    .about-right {
        margin-top: 20px;

        h1 {
            font-size: 2rem;
            line-height: 2.5rem;
        }

        h3 {
            font-size: 1rem;
        }

        >p {
            font-size: 1rem;
            text-align: justify;
        }

        .bout-cards {
            padding: 0;
            gap: 15px;

            .bout-lo,
            .bout-up {
                width: 100%;
                padding: 5px;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
            }

            .boutCard {
                width: 100%;
                height: auto;
                min-height: auto;
                max-height: auto;
                padding: 15px;

                i {
                    font-size: 2rem;
                    line-height: 2.5rem;
                    /* margin-bottom: 25px !important; */
                }

                h4 {
                    font-size: 1.1rem;
                    margin-top: 20px;
                    margin-bottom: 5px;
                }

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

    /* sub about */
    .subAbout {
        padding: 10px;

        .subAboutContainer {
            padding: 0;

            h3 {
                font-size: 1rem;
            }

            h1 {
                font-size: 2rem;

                img {
                    width: auto;
                    height: 30px !important;
                }
            }
        }
    }

    /* sub about */

    /* straps */
    .straps {
        padding: 0px;

        .strapContainer {
            padding: 0;

            .strap1 {
                width: 100%;
                height: auto;
                -webkit-transform: rotate(-12deg);
                    -ms-transform: rotate(-12deg);
                        transform: rotate(-12deg);

                h3 {
                    font-size: 1.2rem;
                }
            }

            .strap2 {
                width: 100%;
                height: auto;
                -webkit-transform: rotate(12deg);
                    -ms-transform: rotate(12deg);
                        transform: rotate(12deg);

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

    /* straps */

    /* service section */
    .ServiceContainer {
        padding: 10px;
    }

    .ServiceContainer h3 {
        font-size: 15px;
    }

    .ServiceContainer h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .serve-Cards {
        gap: 20px;
    }

    .servCard {
        width: 100%;
    }

    /* project showcase */
    .projectShowcase {
        padding: 10px;

        .projectContainer {
            padding: 0;
            margin-bottom: 50px;

            h3 {
                font-size: 1rem;
            }

            h2 {
                font-size: 2rem;
                line-height: 2.5rem;
            }

            .tagsFilter {
                gap: 10px;
            }

            .projectCards {
                width: 100%;
                gap: 25px;
                align-items: center;
                justify-content: center;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
            }

            .projectCard-Box {
                width: 100% !important;
                max-width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .projectCard-Box img{
                width: 100% !important;
            }
            .project-Content{
                width: 320px !important;
                max-width: 320px !important;
            }
        }
    }

    /* project showcase */

    /* faq section */
    .faqSection {
        padding: 10px;

        .FaqContainer {
            padding: 0;
            margin-top: 30px;
            margin-bottom: 80px;

            h3 {
                font-size: 1rem;
            }

            h2 {
                font-size: 2rem;
                line-height: 2.5rem;
            }

            .faqWrapper {
                margin-top: 20px;
            }
        }
    }

    /* faq section */

    .ctaSection {
        padding: 10px;

        .ctaContainer {
            padding: 25px;
            border-radius: 15px;
            min-height: 400px;

            h4 {
                font-size: 1rem;
            }

            h1 {
                font-size: 2rem;
                line-height: 2.5rem;
            }

            p {
                font-size: 1rem;
            }

            .cta-buttons {
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;

                a {
                    width: 100%;
                    padding: 10px;
                    border-radius: 15px;
                }
            }

        }
    }

    .testimonialSection {
        padding: 10px;

        .testimonialContainer {
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;

            .testimonial-Left,
            .testimonial-Right {
                width: 100%;
                height: auto;
                padding: 0;
            }

            .testimonial-Left {
                height: auto;
                min-height: 250px;
            }

            .testi-cards-wrapper{
                width: 100% !important;
            }

            .testicards{
                width: 260px !important;
                margin-left: 150px !important;
            }

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

            .testimonialCard {
                h5 {
                    margin-bottom: -2px !important;
                }
            }

            /* .testimonialCard:nth-child(1){
                margin-left: 1000px !important;
            } */

        }
    }
    

    .contactSection {
        width: 100%;
        height: auto;
        padding: 10px;

        .conContainer {
            width: 100%;
            height: auto;
            padding: 0;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;

            .concon-left,
            .concon-right {
                width: 100%;
            }

            .concon-left {
                h3 {
                    font-size: 1rem;
                    text-align: center;
                }

                h2 {
                    font-size: 2rem;
                    line-height: 2.5rem;
                    text-align: center;
                }

                p {
                    text-align: center;
                    margin-bottom: 15px;
                }

                .contentBox {
                    width: 100%;
                    padding: 0;
                    gap: 10px;
                    margin-bottom: 30px;
                }
            }

            .concon-right {
                form {
                    padding: 0;
                }
            }

        }
    }

    .footerSection {
        padding: 0px;
    }

    .footerContainer {
        padding: 0;
        width: 100%;
        height: auto;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin-top: 0;

        .footer-child-1 {
            padding: 5px;
            width: 100%;
            max-width: 100%;
            min-width: 100%;
            height: auto;
        }

    }



    .foot-copy {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
        padding: 10px;
        /* gap: 20px; */
    }

    .foot-copy-left {
        margin-bottom: 10px;
    }

    .foot-copy .foot-copy-left,
    .foot-copy .foot-copy-right {
        width: 100% !important;
        text-align: center;
        max-width: 100%;
        /* flex-direction: column; */
    }

    .foot-copy-right {
        width: 100%;
    }
}

/* responsive code */

/* 
@media (max-width: 768px) {
  .testicards {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .testimonialCard {
    min-width: 100% !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    scroll-snap-align: start;
  }
} */