body {
        justify-content: center;
        text-decoration: none!important;
        overflow-x: hidden;
        cursor: none;
        /* hide default cursor */
        font-family: 'Lato', sans-serif;
    }
    
    html,
    body {
        overflow-x: hidden!important;
    }
    
    section {
        height: auto;
    }
    
    .hero {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-image: url('../img/backgound.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    
    .hero-left {
        top: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    
    .flex-hero {
        flex: 1;
        padding: 20px;
    }
    
    .flex-hero h1 {
        font-size: 50px;
        color: #fff;
        font-weight: 700;
    }
    
    .flex-hero p {
        color: #fff;
        margin-bottom: 10px;
    }
    
    .hero-left .btn-blue {
        display: inline-block;
        position: relative;
        overflow: hidden;
        background-color: transparent;
        /* make transparent to use pseudo background */
        padding: 15px 25px;
        color: #fff;
        text-decoration: none;
        border: 2px solid #fff;
        /* optional: add border outline */
        border-radius: 10px;
        transition: color 0.3s ease-out, border 0.3s ease-out;
    }
    
    .hero-left .btn-blue::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: #fff;
        transition: width 0.5s ease-out;
        z-index: -1;
        color: #fff;
    }
    
    .hero-left .btn-blue:hover::before {
        width: 100%;
    }
    
    .hero-left .btn-blue:hover {
        color: #0e0e0e;
    }
    
    .btn-blue:hover i {
        color: #0e0e0e;
    }
    
    .hero-content {
        margin-top: 6%;
    }
    
    .hero h1 {
        color: #fff;
        font-size: 4rem;
    }
    
    .hero p {
        color: #fff;
        font-size: 1rem;
    }
    
    .man-img {
        max-height: auto;
        height: 600px;
        max-width: 800px;
        animation-duration: 2s;
        margin-left: 10px;
    }
    
    .glow-img {
        animation: glow 2s infinite alternate;
    }
    
    @keyframes glow {
        0% {
            filter: drop-shadow(0 0 5px #32de85cb) drop-shadow(0 0 10px #32de85c2);
            -webkit-filter: drop-shadow(0 0 5px #32de85cb) drop-shadow(0 0 10px #32de85c2);
        }
        100% {
            filter: drop-shadow(0 0 20px #32de85d0) drop-shadow(0 0 25px #32de84);
        }
    }
    /* Optional: Moon animation */
    
    .moon {
        border-radius: 50%;
        box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.7), inset 10px 10px 20px rgba(0, 0, 0, 0.3);
        animation: spinMoon 90s linear infinite, pulseMoon 5s ease-in-out infinite;
        filter: drop-shadow(0 0 10px rgba(200, 200, 210, 0.7));
        will-change: transform, filter;
    }
    
    @keyframes spinMoon {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }
    }
    
    @keyframes pulseMoon {
        0%,
        100% {
            filter: drop-shadow(0 0 10px rgba(200, 200, 210, 0.7));
        }
        50% {
            filter: drop-shadow(0 0 20px rgba(230, 230, 240, 1));
        }
    }
    
    .nav {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 10px;
        z-index: 6000;
        background-color: transparent;
    }
    
    .nav img {
        margin-right: 260px;
    }
    
    .nav-btn {
        position: relative;
        overflow: hidden;
        padding: 15px 15px;
        background-color: transparent;
        color: #fff !important;
        border-radius: 10px;
        border: #32de84 1px solid;
        z-index: 1;
        transition: color 0.3s ease-in-out;
    }
    
    .nav-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: #18202D;
        /* Fill color */
        transition: width 0.3s ease-in-out;
        z-index: -1;
        /* behind the text */
    }
    
    .nav-btn:hover::before {
        width: 100%;
    }
    
    .nav-btn:hover {
        color: #fff;
        /* optional, to change text color after fill */
        border: #fff 1px solid;
    }
    
    .nav a {
        text-decoration: none;
        /* Removes the underline */
        color: #fff;
        /* Set link color */
        padding: 10px 20px;
        /* Optional: Adds padding to the links */
        font-size: 16px;
        /* Optional: Adjust text size */
    }
    /* The dropdown container */
    
    .dropdown {
        position: relative;
        display: inline-block;
        /*Ensurethedropdownisinlinewithotherelements*/
    }
    /* Dropdown button */
    
    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: #fff;
        padding: 14px 16px;
        background-color: inherit;
        /* Important for consistent styling */
        cursor: pointer;
        /* Adds pointer cursor for better UX */
    }
    /* Dropdown content (hidden by default) */
    
    .dropdown-content {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        background-color: #fff;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        border-radius: 5px;
        transform: translateY(10px);
        /* Start position (slightly below) */
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
    }
    /* Links inside the dropdown */
    
    .dropdown-content a {
        color: black;
        padding: 12px 30px;
        text-decoration: none;
        display: block;
        /*Makelinkstakefullwidth*/
        text-align: left;
    }
    /* Add a grey background color to dropdown links on hover */
    
    .dropdown-content a:hover {
        color: #32de84;
    }
    /* Show the dropdown menu on hover */
    
    .dropdown:hover .dropdown-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* Move to normal position */
    }
    /* end of hero */
    /* start of our services */
    
    .our-services {
        height: auto;
        color: #111111;
        margin-top: 10px;
        padding-bottom: 40px;
        /* Add margin to move it down */
        text-align: center;
        margin-bottom: 40px;
        /* Center the text */
    }
    
    .os-center {
        justify-content: center;
        z-index: 4000;
    }
    
    .os-center p {
        padding-bottom: 30px;
    }
    
    .serv-bg-color-1 {
        background-color: #fff;
    }
    
    .serv-bg-color-2 {
        background-color: #fff;
    }
    
    .serv-bg-color-3 {
        background-color: #fff;
    }
    
    .serv-bg-color-4 {
        background-color: #fff;
    }
    
    .serv-bg {
        height: 170px;
        width: 600px;
        padding-left: 40px;
        padding-top: 30px;
        padding-bottom: 30px;
        border-radius: 50px;
        margin: 20px;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: #0e0e0e 1px solid;
        transition: 0.5s all ease-out;
        -webkit-transition: 0.5s all ease-out;
        -moz-transition: 0.5s all ease-out;
        -ms-transition: 0.5s all ease-out;
        -o-transition: 0.5s all ease-out;
    }
    
    .serv-bg:hover {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    }
    
    .serv-bg a {
        text-decoration: none;
        color: #111111;
        font-size: large;
    }
    
    .serv-bg a i {
        transition: 0.5s all ease-out;
        -webkit-transition: 0.5s all ease-out;
        -moz-transition: 0.5s all ease-out;
        -ms-transition: 0.5s all ease-out;
        -o-transition: 0.5s all ease-out;
    }
    
    .serv-bg:hover i {
        color: #111111;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }
    
    .serv-bg h4 {
        font-size: 16PX;
    }
    
    .serv-bg p {
        font-size: 13px;
    }
    /* marketing starts */
    
    .marketing {
        height: 550px;
        width: auto;
    }
    
    .marketing-right h3 {
        color: #8cc751;
        padding-top: 30px;
        font-size: 30px;
    }
    
    .marketing-right span {
        color: #32de84;
    }
    
    .progress {
        margin-top: 20px;
        width: 95%;
        height: 5px;
    }
    
    .progress-bar {
        background-color: #32de84!important;
    }
    
    .marketing-right h5 {
        color: #8cc751;
        margin-top: 20px;
    }
    
    .ani_10 {
        position: relative;
        bottom: 150px;
        animation: ani_10 5s ease-in-out infinite;
        -webkit-animation: ani_10 5s ease-in-out infinite;
    }
    
    .ani_11 {
        position: relative;
        bottom: 450px;
        right: 80px;
        animation: ani_11 5s ease-in-out infinite;
        -webkit-animation: ani_11 5s ease-in-out infinite;
        height: 100px;
        width: 100px;
    }
    
    .ani_12 {
        position: relative;
        bottom: 450px;
        left: 100px;
        animation: ani_12 13s ease-in-out infinite;
        -webkit-animation: ani_12 13s ease-in-out infinite;
        height: 50px;
        width: 50px;
        z-index: -1;
    }
    
    .ani_13 {
        position: relative;
        bottom: 150px;
        right: 30px;
        animation: ani_13 10s ease-in-out infinite;
        -webkit-animation: ani_13 10s ease-in-out infinite;
        height: 90px;
        width: 90px;
        z-index: -2;
    }
    
    @keyframes ani_10 {
        0% {
            rotate: 0deg;
        }
        50% {
            rotate: 90deg;
        }
        100% {
            rotate: 0deg;
        }
    }
    
    @keyframes ani_11 {
        0% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
        50% {
            transform: translateY(50px);
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -ms-transform: translateY(50px);
            -o-transform: translateY(50px);
        }
        100% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
    
    @keyframes ani_12 {
        0% {
            margin-left: 0px;
        }
        30% {
            margin-left: 00px;
            transform: translateY(-100px);
            -webkit-transform: translateY(-100px);
            -moz-transform: translateY(-100px);
            -ms-transform: translateY(-100px);
            -o-transform: translateY(-100px);
        }
        70% {
            margin-left: 130px;
            transform: translateY(30px);
            -webkit-transform: translateY(30px);
            -moz-transform: translateY(30px);
            -ms-transform: translateY(30px);
            -o-transform: translateY(30px);
        }
        100% {
            margin-left: 0px;
        }
    }
    
    @keyframes ani_13 {
        0% {
            transform: translateX(0px);
            -webkit-transform: translateX(0px);
            -moz-transform: translateX(0px);
            -ms-transform: translateX(0px);
            -o-transform: translateX(0px);
        }
        50% {
            transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            -o-transform: translateX(10px);
        }
        100% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
    /* marketing ends */
    /* goal start */
    /* goal ends */
    
    .goal {
        margin-top: 50px;
        height: auto;
        width: auto;
        z-index: 9000;
    }
    /* when mobile set it to 0 */
    
    .goal-top {
        display: flex;
        /* Use flexbox */
        justify-content: center;
        /* Center all boxes horizontally */
        align-items: center;
        /* Align boxes vertically (optional) */
        gap: 40px;
        /* Add spacing between boxes */
        padding: 20px;
        /* Add padding around the container */
        flex-wrap: wrap;
        /* Ensure wrapping on smaller screens */
    }
    
    .goal-box {
        height: 200px;
        width: 200px;
        background-color: #fff;
        z-index: 9000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 10px;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }
    
    .goal-box:hover {
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
    }
    
    .goal-box .f_st {
        background-color: #FFF8ED;
    }
    
    .goal-box .tow_nd {
        background-color: #FEF1ED;
    }
    
    .goal-box .th_rd {
        background-color: #FFF1F9;
    }
    
    .goal-box .fo_th {
        background-color: #F5EDFF;
    }
    
    .goal-box img {
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
    }
    
    .goal-box:hover img {
        transform: rotateY(560deg);
        -webkit-transform: rotateY(560deg);
        -moz-transform: rotateY(560deg);
        -ms-transform: rotateY(560deg);
        -o-transform: rotateY(560deg);
    }
    
    .goal-box h4,
    .goal-box p {
        margin: 0;
        /* Reset margin */
    }
    
    .goal-sq {
        background-color: #111111;
        height: 400px;
    }
    
    .video {
        margin-top: 400px;
        position: relative;
        width: 100%;
        z-index: 9000;
    }
    
    .video-main {
        justify-content: center;
        display: flex;
        position: relative;
        bottom: 35rem;
    }
    
    .video-main video {
        height: 1000px;
        width: 1000px;
    }
    
    .video_button {
        position: absolute;
        z-index: 9000;
        transform: translate(0, 450px);
        transform: translateX(-200px);
        -webkit-transform: translate(0, 450px);
        -moz-transform: translate(0, 450px);
        -ms-transform: translate(0, 450px);
        -o-transform: translate(0, 450px);
        padding: 35px 40px;
        background-color: #ffff;
        border-radius: 60%;
        -webkit-border-radius: 60%;
        -moz-border-radius: 60%;
        -ms-border-radius: 60%;
        -o-border-radius: 60%;
        overflow: visible;
    }
    
    .video_button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        background: rgb(255, 255, 255);
        /*splashcolor*/
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: splashAnim 1.8s infinite ease-out;
        z-index: -1;
    }
    /* Splash animation keyframes */
    
    @keyframes splashAnim {
        0% {
            width: 0;
            height: 0;
            opacity: 0.5;
        }
        50% {
            opacity: 0.3;
        }
        100% {
            width: 300px;
            height: 300px;
            opacity: 0;
        }
    }
    
    .an_14 {
        position: relative;
        bottom: 10px;
        left: 50px;
        animation: an_14 19s ease-in-out infinite;
        -webkit-animation: an_14 19s ease-in-out infinite;
        z-index: -2;
    }
    
    .an_15 {
        position: relative;
        bottom: 10px;
        float: right;
        right: 5%;
        animation: an_15 5s ease-in-out infinite;
        -webkit-animation: an_15 5s ease-in-out infinite;
        z-index: 9000;
    }
    
    @keyframes an_14 {
        0% {
            transform: translateX(1px)rotateZ(0deg);
            -webkit-transform: translateX(1px)rotateZ(0deg);
            -moz-transform: translateX(1px)rotateZ(0deg);
            -ms-transform: translateX(1px)rotateZ(0deg);
            -o-transform: translateX(1px)rotateZ(0deg);
        }
        20% {
            transform: translateY(300px) rotateZ(180deg);
            -webkit-transform: translateY(300px) rotateZ(180deg);
            -moz-transform: translateY(300px) rotateZ(180deg);
            -ms-transform: translateY(300px) rotateZ(180deg);
            -o-transform: translateY(300px) rotateZ(180deg);
        }
        50% {
            transform: translateX(300px) rotate(360deg);
            -webkit-transform: translateX(300px) rotate(360deg);
            -moz-transform: translateX(300px) rotate(360deg);
            -ms-transform: translateX(300px) rotate(360deg);
            -o-transform: translateX(300px) rotate(360deg);
        }
        100% {
            transform: translateX(1px)rotateZ(0deg);
            -webkit-transform: translateX(1px)rotateZ(0deg);
            -moz-transform: translateX(1px)rotateZ(0deg);
            -ms-transform: translateX(1px)rotateZ(0deg);
            -o-transform: translateX(1px)rotateZ(0deg);
        }
    }
    
    @keyframes an_15 {
        0% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
        50% {
            transform: translateY(300px);
            -webkit-transform: translateY(300px);
            -moz-transform: translateY(300px);
            -ms-transform: translateY(300px);
            -o-transform: translateY(300px);
        }
        100% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
    /* end goal */
    /* start testi */
    
    .testi-heading {
        font-weight: 700;
        text-align: center;
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
    }
    
    .testi-heading h2 {
        font-size: 60px;
        color: #32de84;
    }
    
    .outerdiv {
        width: 100%;
        min-height: 80vh;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Montserrat", sans-serif;
    }
    
    .innerdiv {
        transform: scale(0.9);
        margin: 0.5rem;
        display: grid;
        grid-gap: 1.5rem;
        grid-template-rows: repeat(2, 22rem);
        grid-template-columns: repeat(4, 17rem);
    }
    
    .eachdiv {
        padding: 1rem 2rem;
        border-radius: 0.8rem;
        box-shadow: 5px 5px 20px #6d6b6b6b;
        color: white;
    }
    
    .div1 {
        background: #32de84;
        grid-column: 1/3;
        grid-row: 1/2;
        background-image: url();
        background-repeat: no-repeat;
        background-position-x: 25rem;
    }
    
    .div2 {
        background: #8cc751;
        grid-column: 3/4;
        grid-row: 1/2;
    }
    
    .div3 {
        background: white;
        grid-column: 4/5;
        grid-row: 1/3;
        color: #ffff;
    }
    
    .div4 {
        background: white;
        grid-column: 1/2;
        grid-row: 2/3;
        color: black;
    }
    
    .div5 {
        background: #18202D;
        grid-column: 2/4;
        grid-row: 2/3;
    }
    
    .userdetails {
        display: flex;
    }
    
    .imgbox {
        margin-right: 1rem;
    }
    
    .imgbox img {
        border-radius: 50%;
        width: 2rem;
        border: 2px solid #cec5c5;
    }
    
    .detbox {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .detbox p {
        margin: 0;
    }
    
    .detbox .name {
        color: hsl(0, 0%, 81%);
        font-size: 0.9rem;
        margin-bottom: 0.1rem;
        font-weight: 600;
    }
    
    .detbox .name.dark {
        color: #18202D;
    }
    
    .detbox .designation {
        color: #fff;
        opacity: 100%;
        font-size: 0.8rem;
    }
    
    .detbox .designation.dark {
        color: #49505A;
    }
    
    .review h4 {
        font-size: 1.4rem;
        color: #fff;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 0.8rem;
    }
    
    .review.dark h4 {
        color: #4B5258;
    }
    
    .review p {
        font-size: 0.95rem;
        color: #fff;
        font-weight: 700;
        opacity: 100%;
        line-height: 1.5;
    }
    
    .review.dark p {
        color: #0e0e0e;
    }
    
    .attribution {
        font-size: 1rem;
        line-height: 1.5;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        text-align: right;
    }
    
    .attribution a {
        text-decoration: none;
    }
    
    @media only screen and (max-width: 1000px) {
        .innerdiv {
            transform: scale(0.7);
        }
    }
    
    @media only screen and (max-width: 800px) {
        .innerdiv {
            transform: scale(0.6);
        }
    }
    
    @media only screen and (max-width: 600px) {
        .div1 {
            background-position-x: 10rem;
        }
        .innerdiv {
            display: flex;
            flex-direction: column;
            transform: scale(1);
            margin: 2rem;
            margin-bottom: 5rem;
        }
        .attribution {
            position: relative;
        }
    }
    /* end of testi */
    /* our client slider */
    
    .client-heading {
        font-weight: 700;
        text-align: center;
    }
    
    .clk {
        height: 200px!important;
    }
    
    .client-heading h2 {
        font-size: 60px;
        color: #32de84;
    }
    
    .client-heading p {
        padding-bottom: 10px;
    }
    
    .carousel-item {
        white-space: nowrap;
        text-align: center;
        /* 👈 Center all inline blocks inside */
    }
    
    .carousel-item>div {
        display: inline-block;
        float: none;
        white-space: normal;
        width: 170px;
        /* 👈 increased width */
        text-align: center;
    }
    
    .carousel-item img {
        border: #18202D 1px solid;
        height: 150px;
        /*👈increasedheight*/
        width: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    
    @media (max-width: 768px) {
        .carousel-item>div {
            width: 110px;
        }
    }
    
    @media (max-width: 480px) {
        .carousel-item>div {
            width: 90px;
        }
    }
    
    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        padding: 10px;
        background-color: #32de84;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* our client slider ends */
    /* form */
    
    .form {
        background-color: #32de84;
        /* Add gradient */
        position: relative;
        text-align: center;
        justify-content: center;
        padding: 30px;
    }
    
    .form h1 {
        padding-top: 50px;
    }
    
    input {
        border-radius: 10px;
        border: none;
        margin: 10px;
        height: 50px;
        padding: 10px;
    }
    
    textarea {
        border-radius: 10px;
        border: none;
        margin: 10px;
        height: 90px;
        padding: 20px;
    }
    
    .button {
        margin-top: 10px;
    }
    
    .button button {
        width: 200px;
        height: 50px;
        border: none;
        border-radius: 50px;
        color: whitesmoke;
        background-color: #111111;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
    }
    
    .button button:hover {
        color: #111111;
        background-color: #ffff;
        border: 0.1px solid;
    }
    
    form {
        height: 350px;
    }
    
    .an_18 {
        position: relative;
        bottom: 500px;
        right: 730px;
        animation: an_18 5s ease-in-out infinite;
        -webkit-animation: an_18 5s ease-in-out infinite;
        z-index: 1;
        height: 90px;
        width: 90px;
    }
    
    @keyframes an_18 {
        0% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
        50% {
            transform: translateY(20px);
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
        }
        100% {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
    /* end of form */
    /* before footer */
    
    .before-footer {
        background-color: #111111;
        color: #ffff;
        top: 0;
        position: relative;
        height: auto;
        width: 100%;
        padding: 50px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    .before-footer h4 {
        margin-top: 40px;
        font-size: 50px;
    }
    
    .footer {
        position: relative;
        top: 0rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-decoration: none;
        color: #8cc751;
        padding: 30px 70px;
        background-color: #111111;
    }
    
    .footer a {
        text-decoration: none;
        color: #8cc751;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    .footer h5 {
        font-size: 20px;
    }
    
    .footer img {
        height: 30px;
        width: 170px;
    }
    
    .newletter {
        border: #8cc751 1px solid;
        /* height: 70px; */
        border-radius: 10px;
        height: 70px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
    }
    
    .newletter:hover {
        border: #32de84 1px solid;
    }
    
    .letter input:focus {
        outline: none;
    }
    
    .letter input {
        border: none;
        width: 60%;
        background-color: #111111;
        border-radius: 0px;
    }
    
    .letter .letter-btn {
        position: absolute;
        background-color: #8cc751;
        color: #ffff;
        border: none;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        padding: 10px;
        transform: translate(75px, 12px);
        transition: all 0.5s ease-out;
    }
    
    .letter .letter-btn:hover {
        background-color: #32de84;
    }
    
    .follow a .fa-brands {
        transition: all 0.5s ease-out!important;
        -webkit-transition: all 0.5s ease-out!important;
        -moz-transition: all 0.5s ease-out!important;
        -ms-transition: all 0.5s ease-out!important;
        -o-transition: all 0.5s ease-out!important;
    }
    
    .follow a .fa-brands:hover {
        color: #32de84!important;
    }
    /* end of before footer */
    /* mouse c */
    
    @keyframes cursor {
        from {
            transform: scale(1);
            border-color: #fff;
        }
        to {
            transform: scale(1.5);
            border-color: rgb(var(--color));
        }
    }
    
    @keyframes cursor-before {
        from {
            transform: translate(-50%, -50%) scale(1);
            border-color: rgba(var(--color), 0.5);
        }
        to {
            transform: translate(-50%, -50%) scale(1.5);
            border-color: rgba(var(--color), 0.75);
            -webkit-transform: translate(-50%, -50%) scale(1.5);
            -moz-transform: translate(-50%, -50%) scale(1.5);
            -ms-transform: translate(-50%, -50%) scale(1.5);
            -o-transform: translate(-50%, -50%) scale(1.5);
        }
    }
    
    @keyframes cursor-click {
        0%,
        100% {
            transform: scale(1);
        }
        50% {
            transform: scale(4.5);
            border-color: rgb(var(--color));
            -webkit-transform: scale(4.5);
            -moz-transform: scale(4.5);
            -ms-transform: scale(4.5);
            -o-transform: scale(4.5);
        }
    }
    /* mobile hamburger manue */
    
    .nav-container {
        position: relative;
        display: inline-block;
        max-width: 50px;
        max-height: 50px;
        overflow: visible;
        outline: none;
        z-index: 9000;
    }
    
    .nav-container.is-active .nav-toggle:before,
    .nav-container.is-active .nav-toggle:after {
        box-shadow: none;
    }
    
    .nav-container.is-active .nav-toggle:before {
        transform: rotate(-45deg);
    }
    
    .nav-container.is-active .nav-toggle:after {
        transform: rotate(45deg);
    }
    
    .nav-container.is-active .nav-items {
        transform: translate(0, 0);
    }
    
    .nav-toggle {
        position: relative;
        width: 40px;
        height: 40px;
        margin: 10px;
        z-index: 2;
        cursor: pointer;
    }
    
    .nav-toggle:before,
    .nav-toggle:after {
        content: "";
        position: absolute;
        top: 18px;
        left: 0;
        width: 100%;
        height: 4px;
        background: #32de84;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .nav-toggle:before {
        box-shadow: 0 13px 0 0 #32de84;
    }
    
    .nav-toggle:after {
        box-shadow: 0 -13px 0 0 #32de84;
    }
    
    .nav-items {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 300px;
        max-width: 50vw;
        width: 100vw;
        height: 100vh;
        z-index: 1;
        padding: 80px 20px 20px 10px;
        transition: transform 0.3s ease;
        transform: translate(calc(-100% - 50px), 0);
        background: #fff;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 5px 0;
        align-content: start;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    }
    
    .nav-item {
        color: #32de84;
        padding: 10px;
        transition: background-color 0.3s ease;
    }
    
    .nav-items a {
        font-size: 20px;
        text-decoration: none;
    }
    
    .nav-item:hover {
        cursor: pointer;
        background: #c7c7c7;
    }
    
    nav {
        z-index: 8000;
    }
    /* mobile hamburger manue end */
    /* mouse c end */
    
    @media screen and (max-width: 1566px) {
        .serv-bg {
            height: 210px;
            width: 400px;
            padding-left: 50px;
            padding-top: 30px;
            padding-bottom: 30px;
            border-radius: 80px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
            margin: 20px;
            margin-left: 140px;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .an_15 {
            right: 2%;
        }
        .an_17 {
            left: 1100px;
        }
        .before-footer {
            background-color: #111111;
            color: #ffff;
            top: 0;
            position: relative;
            height: auto;
            width: 100%;
            padding: 50px;
            display: flex;
            flex-direction: column;
        }
        .before-footer h4 {
            font-size: 30px;
        }
        .b-f-btn a {
            padding: 40px;
            border: none;
            color: #000;
            background-color: #ffff;
            justify-content: right;
            text-decoration: none;
            position: relative;
            top: 50px;
            left: 120px;
            transition: all 0.5s ease-out;
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease-out;
            -ms-transition: all 0.5s ease-out;
            -o-transition: all 0.5s ease-out;
        }
        .letter input {
            width: 50%;
            font-size: 12px;
        }
        @keyframes ani_12 {
            0% {
                margin-left: 0px;
            }
            30% {
                margin-left: 50px;
                transform: translateY(-60px);
                -webkit-transform: translateY(-60px);
                -moz-transform: translateY(-60px);
                -ms-transform: translateY(-60px);
                -o-transform: translateY(-60px);
            }
            70% {
                margin-left: 60px;
                transform: translateY(30px);
                -webkit-transform: translateY(30px);
                -moz-transform: translateY(30px);
                -ms-transform: translateY(30px);
                -o-transform: translateY(30px);
            }
            100% {
                margin-left: 0px;
            }
        }
    }
    
    @media (min-width: 1025px) {
        .nav-container {
            display: none;
        }
    }
    
    @media (max-width: 1025px) {
        .nav {
            visibility: hidden;
        }
    }
    
    @media (min-width: 768px) and (max-width: 1024px) {
        .serv-bg {
            height: 170px;
            width: 500px;
            padding-left: 50px;
            padding-top: 30px;
            padding-bottom: 30px;
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
            margin: 20px;
            margin-left: 120px;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .marketing {
            height: auto;
        }
        .video img {
            visibility: hidden;
        }
        .video-main video {
            width: 100%;
        }
        .an_14 {
            z-index: 9999
        }
        .an_15 {
            visibility: hidden;
        }
        .an_16,
        .an_17 {
            visibility: hidden;
        }
        .outerdiv {
            width: 100%;
            min-height: 40vh;
        }
        .carousel-item img {
            border: #18202D 1px solid;
            height: 100px;
        }
        form input {
            width: 100%;
        }
        form textarea {
            width: 100%;
        }
        .form {
            top: 1px;
            height: 700px;
        }
        .before-footer {
            height: 300px;
            text-align: center;
        }
        .b-f-btn a {
            top: 30px;
            left: 0px;
            padding: 20px;
            font-size: 0.7rem;
        }
        .letter input {
            width: 70%;
        }
    }
    
    @media screen and (max-width: 576px) {
        .an_1,
        .an_2,
        .an_3,
        .an_4,
        .an_5,
        .an_6,
        .an_7,
        .an_14,
        .an_15,
        .an_16,
        .an_17,
        .an_18,
        .ani_10,
        .ani_11,
        .ani_12,
        .ani_13 {
            visibility: hidden;
        }
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}
        .hero {
            height: auto;
        }
        .hero-left h1,
        p {
            text-align: center;
            width: 100%;
        }
        .btn-blue {
            width: 100%;
            text-align: center;
        }
        .hero h1 {
            font-size: 40px;
        }
        .hero p {
            text-align: center;
        }
        .man-img {
            height: 10px;
            width: auto;
            margin: 20px 0px;
            visibility: hidden;
        }
        .services {
            position: relative;
            right: 140px;
            padding: 0 20px;
        }
        .serv-bg {
            height: 300px;
            padding-left: 10px;
            width: 100%;
        }
        .marketing-left {
            height: 400px;
        }
        .marketing-right p {
            text-align: justify;
        }
        .video {
            margin-top: 100px;
        }
        .video-main {
            position: absolute;
            transform: translate(0, 500px);
            -webkit-transform: translate(0, 600px);
            -moz-transform: translate(0, 500px);
            -ms-transform: translate(0, 500px);
            -o-transform: translate(0, 500px);
        }
        .video-main video {
            width: 100%;
        }
        .marketing {
            height: auto;
        }
        .testi-heading {
            transform: translateY(20px);
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
        }
        .carousel-item img {
            border: #18202D 1px solid;
            height: 90px;
        }
        form {
            height: 500px;
        }
        .b-f-btn a {
            top: 0px;
            left: 0px;
            padding: 20px;
            font-size: 0.7rem;
        }
        .footer img {
            height: 50px;
            width: 230px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .footer h3 {
            font-size: 40px;
            padding-bottom: 20px;
        }
        .footer a {
            font-size: 20px;
            padding: 10px;
        }
        .follow a {
            padding: 5px;
        }
        .letter input {
            border: none;
            width: 170px;
        }
        .follow {
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .letter input {
            width: 25%;
        }
        .sidenav {
            visibility: hidden;
        }
    }
    
    @media screen and (max-height: 414px) {
        .sidenav {
            padding-top: 15px;
        }
        .sidenav a {
            font-size: 18px;
        }
    }
    /* loader */
    
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        /* your dark background or white if you prefer */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .loader {
        width: 60px;
        height: 60px;
        border: 6px solid #32de84;
        border-top: 6px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    .loader-text {
        margin-top: 20px;
        font-size: 24px;
        color: #32de84;
        letter-spacing: 2px;
        animation: pulse 1.5s ease-in-out infinite;
    }
    
    .loader-text span {
        color: #111111!important;
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    @keyframes pulse {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.4;
        }
    }
    /* Loader Style */
    /* Hide content until page loads */
    
    body.loading main {
        display: none;
    }
    
    body.loading #loader {
        display: grid;
    }
    
    body:not(.loading) #loader {
        display: none;
    }
    /* counter */
    
    .counter {
        transition: all 0.3s ease-in-out;
    }
    
    #goTopBtn {
        display: none;
        /*Hiddenbydefault*/
        position: fixed;
        bottom: 30px;
        right: 10px;
        z-index: 8000;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #32de84;
        /*Changetoyourbrandcolorifneeded*/
        color: white;
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transition: background-color 0.3s, transform 0.3s;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        z-index: 9888;
    }
    
    #goTopBtn:hover {
        background-color: #333;
        transform: translateY(-3px);
    }
    /* cursor */
    
    .cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 6px;
        height: 6px;
        background: #00ffff;
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 9888;
    }
    
    .cursor-glow {
        position: fixed;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(0, 255, 255, 0.2);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.4);
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 9887;
    }
    
    .whatsapp-button {
        position: fixed;
        bottom: 100px;
        right: 10px;
        z-index: 999;
        width: 60px;
        height: 60px;
        background-color: #25D366;
        border-radius: 50%;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        animation: pulse 2s infinite;
        transition: transform 0.3s;
        z-index: 9998;
    }
    
    .whatsapp-button img {
        width: 35px;
        margin-top: 12px;
    }
    
    .whatsapp-button:hover {
        transform: scale(1.1);
    }
    
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        }
    }