/*------------------------------------------------------------------
[TABLE OF CONTENTS]=> Fonts
=> Custom Grid
=> Global Styles
=> buttons-------------------------------------------------------------------*/
/*========================================================================
=> Fonts
========================================================================== */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Light.woff2') format('woff2'), url('../fonts/satoshi/Satoshi-Light.woff') format('woff'), url('../fonts/satoshi/Satoshi-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Regular.woff2') format('woff2'), url('../fonts/satoshi/Satoshi-Regular.woff') format('woff'), url('../fonts/satoshi/Satoshi-Regular.ttf') format('truetype');
    font-family: 'Satoshi';
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Medium.woff2') format('woff2'), url('../fonts/satoshi/Satoshi-Medium.woff') format('woff'), url('../fonts/satoshi/Satoshi-Medium.ttf') format('truetype');
    font-family: 'Satoshi';
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Bold.woff2') format('woff2'), url('../fonts/satoshi/Satoshi-Bold.woff') format('woff'), url('../fonts/satoshi/Satoshi-Bold.ttf') format('truetype');
    font-family: 'Satoshi';
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Black.woff2') format('woff2'), url('../fonts/satoshi/Satoshi-Black.woff') format('woff'), url('../fonts/satoshi/Satoshi-Black.ttf') format('truetype');
    font-family: 'Satoshi';
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

/*==========================================================================
=> Custom Grid
==========================================================================*/
.f-row {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
    flex-wrap: wrap;
}

.f-col {
    padding: 0 15px;
}

.f-10 .f-col {
    width: 10%;
}

.f-9 .f-col {
    width: 11.11111111%;
}

.f-8 .f-col {
    width: 12.5%;
}

.f-7 .f-col {
    width: 14.28571429%;
}

.f-6 .f-col {
    width: 16.66666667%;
}

.f-5 .f-col {
    width: 20%;
}

.f-4 .f-col {
    width: 25%;
}

.f-3 .f-col {
    width: 33.33333333%;
}

.f-2 .f-col {
    width: 50%;
}

.f-1 .f-col {
    width: 100%;
}

.w100 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w95 {
    width: 95%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w90 {
    width: 90%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w85 {
    width: 85%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w80 {
    width: 80%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w75 {
    width: 75%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w70 {
    width: 70%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w65 {
    width: 65%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w60 {
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w55 {
    width: 55%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w50 {
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w45 {
    width: 45%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w40 {
    width: 40%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w35 {
    width: 35%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w30 {
    width: 30%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w25 {
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w20 {
    width: 20%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w15 {
    width: 15%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w10 {
    width: 10%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w5 {
    width: 5%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.w33 {
    width: 33%;
    padding-left: 15px;
    padding-right: 15px;
}

.w16 {
    width: 16.666666%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Custom margin Starts */
@media all and (max-width: 990px) {
    .w-990-100 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-95 {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-90 {
        width: 90%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-85 {
        width: 85%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-80 {
        width: 80%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-75 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-70 {
        width: 70%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-65 {
        width: 65%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-60 {
        width: 60%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-55 {
        width: 55%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-50 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-45 {
        width: 45%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-40 {
        width: 40%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-35 {
        width: 35%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-30 {
        width: 30%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-25 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-20 {
        width: 20%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-15 {
        width: 15%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-10 {
        width: 10%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-5 {
        width: 5%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-990-33 {
        width: 33%;
    }

    .w-990-16 {
        width: 16.666666%;
    }
}

@media all and (max-width: 800px) {
    .w-800-100 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-95 {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-90 {
        width: 90%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-85 {
        width: 85%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-80 {
        width: 80%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-75 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-70 {
        width: 70%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-65 {
        width: 65%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-60 {
        width: 60%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-55 {
        width: 55%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-50 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-45 {
        width: 45%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-40 {
        width: 40%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-35 {
        width: 35%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-30 {
        width: 30%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-25 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-20 {
        width: 20%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-15 {
        width: 15%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-10 {
        width: 10%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-5 {
        width: 5%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-800-33 {
        width: 33%;
    }

    .w-800-16 {
        width: 16.666666%;
    }
}

@media all and (max-width: 768px) {
    .w-768-100 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-95 {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-90 {
        width: 90%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-85 {
        width: 85%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-80 {
        width: 80%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-75 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-70 {
        width: 70%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-65 {
        width: 65%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-60 {
        width: 60%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-55 {
        width: 55%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-50 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-45 {
        width: 45%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-40 {
        width: 40%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-35 {
        width: 35%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-30 {
        width: 30%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-25 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-20 {
        width: 20%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-15 {
        width: 15%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-10 {
        width: 10%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-5 {
        width: 5%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-768-33 {
        width: 33%;
    }

    .w-768-16 {
        width: 16.666666%;
    }
}

@media all and (max-width: 480px) {
    .w-480-100 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-95 {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-90 {
        width: 90%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-85 {
        width: 85%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-80 {
        width: 80%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-75 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-70 {
        width: 70%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-65 {
        width: 65%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-60 {
        width: 60%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-55 {
        width: 55%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-50 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-45 {
        width: 45%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-40 {
        width: 40%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-35 {
        width: 35%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-30 {
        width: 30%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-25 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-20 {
        width: 20%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-15 {
        width: 15%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-10 {
        width: 10%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-5 {
        width: 5%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-480-33 {
        width: 33%;
    }

    .w-480-16 {
        width: 16.666666%;
    }

    .mb-480-50 {
        margin-bottom: 50px;
    }

    .mb-480-45 {
        margin-bottom: 45px;
    }

    .mb-480-40 {
        margin-bottom: 40px;
    }

    .mb-480-35 {
        margin-bottom: 35px;
    }

    .mb-480-30 {
        margin-bottom: 30px;
    }

    .mb-480-25 {
        margin-bottom: 25px;
    }

    .mb-480-20 {
        margin-bottom: 20px;
    }

    .mb-480-15 {
        margin-bottom: 15px;
    }

    .mb-480-10 {
        margin-bottom: 10px;
    }

    .mb-480-5 {
        margin-bottom: 5px;
    }

    .f-480-10 .f-col {
        width: 10%;
    }

    .f-480-9 .f-col {
        width: 11.11111111%;
    }

    .f-480-8 .f-col {
        width: 12.5%;
    }

    .f-480-7 .f-col {
        width: 14.28571429%;
    }

    .f-480-6 .f-col {
        width: 16.66666667%;
    }

    .f-480-5 .f-col {
        width: 20%;
    }

    .f-480-4 .f-col {
        width: 25%;
    }

    .f-480-3 .f-col {
        width: 33.33333333%;
    }

    .f-480-2 .f-col {
        width: 50%;
    }

    .f-480-1 .f-col {
        width: 100%;
    }
}

@media all and (max-width: 400px) {
    .w-400-100 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-95 {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-90 {
        width: 90%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-85 {
        width: 85%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-80 {
        width: 80%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-75 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-70 {
        width: 70%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-65 {
        width: 65%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-60 {
        width: 60%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-55 {
        width: 55%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-50 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-45 {
        width: 45%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-40 {
        width: 40%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-35 {
        width: 35%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-30 {
        width: 30%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-25 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-20 {
        width: 20%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-15 {
        width: 15%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-10 {
        width: 10%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-5 {
        width: 5%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .w-400-33 {
        width: 33%;
    }

    .w-400-16 {
        width: 16.666666%;
    }

    .mb-400-50 {
        margin-bottom: 50px;
    }

    .mb-400-45 {
        margin-bottom: 45px;
    }

    .mb-400-40 {
        margin-bottom: 40px;
    }

    .mb-400-35 {
        margin-bottom: 35px;
    }

    .mb-400-30 {
        margin-bottom: 30px;
    }

    .mb-400-25 {
        margin-bottom: 25px;
    }

    .mb-400-20 {
        margin-bottom: 20px;
    }

    .mb-400-15 {
        margin-bottom: 15px;
    }

    .mb-400-10 {
        margin-bottom: 10px;
    }

    .mb-400-5 {
        margin-bottom: 5px;
    }

    .f-400-10 .f-col {
        width: 10%;
    }

    .f-400-9 .f-col {
        width: 11.11111111%;
    }

    .f-400-8 .f-col {
        width: 12.5%;
    }

    .f-400-7 .f-col {
        width: 14.28571429%;
    }

    .f-400-6 .f-col {
        width: 16.66666667%;
    }

    .f-400-5 .f-col {
        width: 20%;
    }

    .f-400-4 .f-col {
        width: 25%;
    }

    .f-400-3 .f-col {
        width: 33.33333333%;
    }

    .f-400-2 .f-col {
        width: 50%;
    }

    .f-400-1 .f-col {
        width: 100%;
    }
}

/* Custom Width Ends */
/*==========================================================================
=> Global Styles
========================================================================== */
*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    /* scroll-behavior: smooth; */
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* scroll-behavior: smooth; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul ul {
    margin-bottom: 0;
}

a {
    color: #007aff;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

img {
    vertical-align: middle;
    border-style: none;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

button {
    border-radius: 0;
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

button,
input,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
input {
    overflow: visible;
}

button {
    text-transform: none;
}

button {
    -webkit-appearance: button;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: vertical;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Satoshi';
    font-weight: 700;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

a {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

a:active,
a:hover,
a:focus {
    outline: 0;
    text-decoration: none;
}

img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul,
ol,
dl {
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #cfd1d4;
}

.hdg1 {
    font-size: 42px;
    color: var(--myClrDark);
    line-height: 1.4;
    margin-bottom: 40px;
    font-family: 'Satoshi';
    font-weight: 800;
}

.hdg6 {
    font-size: 22px;
    color: #5857f9;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 35px;
    text-transform: capitalize;
}

.home-alignment-change {
    margin-left: 50px;
}

.hdg7 {
    font-size: 22px;
    color: #5857f9;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 25px;
    text-transform: capitalize;
}

.hdg8 {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 36px;
    color: var(--myClrDark);
}

.commpara {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 18px;
    line-height: 1.7;
    color: #707070;
}

/*==========================================================================
=> buttons
==========================================================================*/
.button {
    font-size: 24px;
    color: #705df6;
    font-family: 'Satoshi';
    font-weight: 900;
    background: var(--myClrLight);
    border: 0;
    width: 290px;
    height: 70px;
    display: inline-block;
    line-height: 70px;
    border-radius: 4px;
    position: relative;
    top: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.button:hover {
    /* top    : -5px;
        color     : #705DF6;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
}

.button1 {
    cursor: pointer;
    font-size: 18px;
    color: #ff3968;
    border: 0;
    font-family: 'Satoshi';
    font-weight: 900;
    height: 42px;
    line-height: 42px;
    display: inline-block;
    vertical-align: middle;
    background: transparent;
}

.button1 img {
    margin-left: 6px;
    position: relative;
    left: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.button1:hover {
    color: #ff3968;
}

.button1:hover img {
    left: 3px;
}

.button-grd {
    width: 145px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    position: relative;
    border: 0;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}

.button-grd:before {
    content: "";
    background: var(--myClrDark);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.button-grd:after {
    content: "";
    background: var(--myClrDark) url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/button-white-layer-rev.png) repeat-x 100% -80%;
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.button-grd span {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 9;
    color: var(--myClrLight);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.button-grd em {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 130%;
    z-index: 9;
    color: var(--myClrDark);
    font-style: normal;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.button-grd:hover span {
    top: -120%;
}

.button-grd:hover em {
    top: 50%;
}

.button-grd:hover:after {
    background-position: 0% 80%;
}

.button-grd-line {
    width: 145px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    position: relative;
    border: 0;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}

.button-grd-line:before {
    content: "";
    background: var(--myClrDark);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.button-grd-line:after {
    content: "";
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/button-white-layer.png) repeat-x 0% 80%;
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.button-grd-line span {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 9;
    font-weight: 900;
    color: var(--myClrDark);
    min-height: 20px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.button-grd-line em {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 130%;
    z-index: 9;
    color: var(--myClrLight);
    font-style: normal;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    font-weight: 900;
}

.button-grd-line:hover span {
    top: -120%;
}

.button-grd-line:hover em {
    top: 50%;
}

.button-grd-line:hover:after {
    background-position: 100% 180%;
}

.h-quote-box .button-grd-line {
    width: 145px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    position: relative;
    border: 0;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}

.h-quote-box .button-grd-line:before {
    content: "";
    background: var(--myClrDark);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.h-quote-box .button-grd-line:after {
    content: "";
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/button-white-layer.png) repeat-x 0% 80%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.h-quote-box .button-grd-line span {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 9;
    background: var(--myClrDark);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.h-quote-box .button-grd-line em {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 130%;
    z-index: 9;
    color: var(--myClrLight);
    font-style: normal;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.h-quote-box .button-grd-line:hover span {
    top: -120%;
}

.h-quote-box .button-grd-line:hover em {
    top: 50%;
}

.h-quote-box .button-grd-line:hover:after {
    background-position: 100% 180%;
}

.grd-btn-2 {
    position: relative;
    min-width: 165px;
    height: 70px;
    display: inline-block;
    vertical-align: middle;
    line-height: 70px;
    text-align: center;
    border-radius: 4px;
    background: var(--myClrDark);
    cursor: pointer;
}

.grd-btn-2:before {
    content: "";
    background: var(--myClrDark);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.2s all ease-in-out;
    -moz-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
    border-radius: 4px;
}

.grd-btn-2 span {
    position: relative;
    z-index: 9;
    color: var(--myClrLight);
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    padding: 0 58px;
}

.grd-btn-2:hover:before {
    opacity: 0;
}

/* swiper slider */
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    transform: translate3d(0, 0, 0);
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

/* // swiper slider */
.wwr-content h4 span {
    display: inline;
}

.case-study-rigi .caseStudy-banner-wrapp {
    background: rgba(88, 87, 249, 0.2);
}

.case-study-rigi .pg-boxes,
.case-study-rigi .cs_usrerFlow_boxes:before,
.case-study-rigi .cs_usrerFlow_boxes:after,
.case-study-rigi .cs_usrerFlow_boxes.second {
    background: #5857f9;
}

.case-study-rigi .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(20, 168, 158, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(20, 168, 158, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(20, 168, 158, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-sps-canada .caseStudy-banner-wrapp {
    background: rgba(20, 152, 139, 0.16);
}

.case-study-sps-canada .pg-boxes,
.case-study-sps-canada .cs_usrerFlow_boxes:before,
.case-study-sps-canada .cs_usrerFlow_boxes:after,
.case-study-sps-canada .cs_usrerFlow_boxes.second {
    background: #14a89e;
}

.case-study-sps-canada .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(20, 168, 158, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(20, 168, 158, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(20, 168, 158, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-nirmal-bang .caseStudy-banner-wrapp {
    background: rgba(70, 84, 160, 0.16);
}

.case-study-nirmal-bang .pg-boxes,
.case-study-nirmal-bang .cs_usrerFlow_boxes:before,
.case-study-nirmal-bang .cs_usrerFlow_boxes:after,
.case-study-nirmal-bang .cs_usrerFlow_boxes.second {
    background: #5351f7;
}

.case-study-nirmal-bang .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-travelxp .caseStudy-banner-wrapp {
    background: rgba(217, 36, 61, 0.16);
}

.case-study-travelxp .pg-boxes,
.case-study-travelxp .cs_usrerFlow_boxes:before,
.case-study-travelxp .cs_usrerFlow_boxes:after,
.case-study-travelxp .cs_usrerFlow_boxes.second {
    background: #d9243d;
}

.case-study-travelxp .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(217, 36, 61, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(217, 36, 61, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(217, 36, 61, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-payzli .caseStudy-banner-wrapp {
    background: rgba(66, 166, 232, 0.22);
}

.case-study-payzli .pg-boxes,
.case-study-payzli .cs_usrerFlow_boxes:before,
.case-study-payzli .cs_usrerFlow_boxes:after,
.case-study-payzli .cs_usrerFlow_boxes.second {
    background: #42a6e8;
}

.case-study-payzli .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(66, 166, 232, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(66, 166, 232, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(66, 166, 232, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-reckrut .caseStudy-banner-wrapp {
    background: rgba(249, 166, 0, 0.22);
}

.case-study-reckrut .pg-boxes,
.case-study-reckrut .cs_usrerFlow_boxes:before,
.case-study-reckrut .cs_usrerFlow_boxes:after,
.case-study-reckrut .cs_usrerFlow_boxes.second {
    background: #f9a600;
}

.case-study-reckrut .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(249, 166, 0, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(249, 166, 0, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(249, 166, 0, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-hunger-pack .caseStudy-banner-wrapp {
    background-color: #ffe4e5;
}

.case-study-hunger-pack .caseStudy-banner-wrapp .caseStudy-bannerImg-wrap {
    display: flex;
    justify-content: center;
    height: 100%;
}

.case-study-hunger-pack .pg-boxes,
.case-study-hunger-pack .cs_usrerFlow_boxes:before,
.case-study-hunger-pack .cs_usrerFlow_boxes:after,
.case-study-hunger-pack .cs_usrerFlow_boxes.second {
    background: #fc0032;
}

.case-study-hunger-pack .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(253, 0, 51, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(253, 0, 51, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(253, 0, 51, 0.31);
    border: 1px solid var(--myClrLight);
}

.mainContainer.case-study-bmw,
.mainContainer.case-study-alphabee {
    z-index: 10;
}

.case-study-bmw .caseStudy-banner-bg {
    margin: 0;
}

.case-study-bmw .caseStudy-banner-wrapp {
    background: #e1e3f0;
}

.case-study-bmw .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__two {
    color: #011736;
    padding-left: 6px;
}

.case-study-bmw .pg-boxes,
.case-study-bmw .cs_usrerFlow_boxes:before,
.case-study-bmw .cs_usrerFlow_boxes:after,
.case-study-bmw .cs_usrerFlow_boxes.second {
    background: #5351f7;
}

.case-study-bmw .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-bmw .pro-04 {
    background: #ededed;
}

.case-study-bmw .justify-content-center {
    justify-content: center;
}

.case-study-bmw .caseStudy--gallSec-wrap .row .gallSec__box {
    flex: 100%;
    width: 100%;
}

.case-study-bmw .caseStudy--gallSec-wrap .row .gallSec__box img {
    box-shadow: none;
}

.case-study-alphabee .caseStudy-banner-bg {
    margin: 0;
}

.case-study-alphabee .caseStudy-banner-wrapp {
    background: #fff8e8;
}

.case-study-alphabee .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__two {
    color: #011736;
    padding-left: 6px;
}

.case-study-alphabee .pg-boxes,
.case-study-alphabee .cs_usrerFlow_boxes:before,
.case-study-alphabee .cs_usrerFlow_boxes:after,
.case-study-alphabee .cs_usrerFlow_boxes.second {
    background: #5351f7;
}

.case-study-alphabee .cs_usrerFlow_boxes:before {
    -webkit-box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    -moz-box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    box-shadow: 0px 0px 0px 5px rgba(83, 81, 247, 0.31);
    border: 1px solid var(--myClrLight);
}

.case-study-alphabee .pro-04 {
    background: #fff8e8;
}

/* service detail page end */
/* case study details page started */
/*  From nainesh bhai */
/* From nainesh bhai end */
.bread-crum-wrap {
    background: var(--myClrLight);
    z-index: 9;
    position: sticky;
    margin-top: var(--headerHeight);
    top: var(--headerHeightFixed);
}

.bread-crum-wrap ul {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 0;
}

.bread-crum-wrap ul li {
    margin-left: 30px;
    position: relative;
    display: flex;
    align-items: center;
}

.bread-crum-wrap ul li a {
    color: #888;
    font-size: 15px;
    font-family: 'Satoshi';
    font-weight: 700;
    padding-left: 25px;
}

.bread-crum-wrap ul li:before {
    content: "";
    width: 6px;
    height: 6px;
    left: 0;
    top: 50%;
    position: absolute;
    background: #888;
    border-radius: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.bread-crum-wrap ul li:first-of-type {
    margin-left: 0;
}

.bread-crum-wrap ul li:first-of-type a {
    padding-left: 0px;
}

.bread-crum-wrap ul li:first-of-type:before {
    content: "";
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    position: absolute;
    background: var(--myClrDark);
    border-radius: 50%;
}

.bread-crum-wrap ul li:last-of-type a {
    color: var(--myClrDark);
}

.mainContainer .caseStudy-banner-bg {
    min-height: 500px;
}

.cs--mobail-device .caseStudy-bannerImg-wrap img {
    width: 60%;
}

.caseStudy-bannerImg-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    left: -5%;
    height: 100%;
}

.caseStudy-bannerImg-wrap img {
    max-height: 87%;
    object-fit: contain;
}

.caseStudy-banner-wrapp {
    margin-top: 0;
}

.caseStudy-banner-wrapp .caseStudy-banner-bg .pro-center {
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap {
    position: relative;
    width: 85%;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-banner-title {
    color: #011736;
    font-size: 26px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 20px;
    line-height: 1;
    width: max-content;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one {
    color: #011736;
    font-size: 84px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 30px;
    line-height: 1;
    width: max-content;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__two {
    color: #707070;
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 30px;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul {
    display: flex;
    align-items: center;
    width: max-content;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul li {
    margin-left: 10px;
    position: relative;
    display: flex;
    align-items: center;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul li span {
    color: #011736;
    font-size: 20px;
    font-family: 'Satoshi';
    font-weight: 900;
    padding-left: 17px;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul li:before {
    content: "";
    width: 8px;
    height: 8px;
    left: 0;
    top: 50%;
    position: absolute;
    background: #011736;
    border-radius: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul li:first-of-type {
    margin-left: 0;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul li:first-of-type span {
    padding-left: 6px;
}

.caseStudy-banner-wrapp .caseStudy-Title-wrap ul li:first-of-type:before {
    content: "";
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    position: absolute;
    background: var(--myClrLight);
    border-radius: 50%;
}

.caseStudy-secondThumbnail {
    margin-top: 50px;
}

.secondThumbnail-imgWrap {
    display: flex;
    justify-content: center;
}

.secondThumbnail-imgWrap img {
    -webkit-box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
}

.cs-title-one {
    font-size: 40px;
    color: var(--myClrDark);
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.cs-title-two {
    font-size: 24px;
    color: var(--myClrDark);
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: 'Satoshi';
    font-weight: 700;
    max-width: 90%;
    margin: auto;
}

.cs-title {
    margin-top: 100px;
    text-align: center;
}

.cs-title.cs-title__mt-30 {
    margin-top: 30px;
}

.cs-scop-of-work-main {
    margin-top: 60px;
}

.cs-scop-of-work-main .row {
    justify-content: space-between;
}

.cs-scop-of-work-main .s-wedo-sec {
    margin-bottom: 60px;
    padding-right: 0;
    text-align: center;
}

.cs-scop-of-work-main .s-wedo-sec .s-wedo-img {
    margin: 0 auto 30px;
    width: 90px;
    height: 90px;
}

.cs-scop-of-work-main .s-wedo-sec .hdg8 {
    margin-bottom: 20px;
    font-size: 22px;
    color: #5857f9;
}

.cs-scop-of-work-main .s-wedo-sec .wedopara {
    color: #3e3e3e;
    line-height: 1.5;
}

.travel-xp.cs-scop-of-work-main .row {
    justify-content: center;
}

.cs-personalGoal {
    margin: 60px 0 40px;
}

.pg-boxes {
    padding: 30px 20px;
    display: flex;
    min-height: 146px;
    height: 100%;
    align-items: center;
    -webkit-box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
}

.pg-boxes h4 {
    color: var(--myClrLight);
    font-size: 24px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
}

.cs-timeLine__Project {
    width: 100%;
    margin: 0 0 60px;
}

.cs-timeLine__Project img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cs-messFrom-res {
    margin: 80px 0 130px;
}

.cs-messFrom-res .row {
    position: relative;
}

.cs-messFrom-res .row:before {
    content: "";
    position: absolute;
    left: 68px;
    top: 20px;
    width: 69%;
    height: 5px;
    z-index: -6;
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/resarch-top-border.png) repeat center center / contain;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.cs-messFrom-res .messFrom-res-boxes {
    text-align: left;
}

.cs-messFrom-res .messFrom-res-boxes p {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-bottom: 40px;
    background: #5857f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-messFrom-res .messFrom-res-boxes p span {
    font-size: 16px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrLight);
}

.cs-messFrom-res .messFrom-res-boxes p.first {
    background: var(--clr1);
}

.cs-messFrom-res .messFrom-res-boxes p.sec {
    background: var(--clr2);
}

.cs-messFrom-res .messFrom-res-boxes p.thired {
    background: var(--clr3);
}

.cs-messFrom-res .messFrom-res-boxes p.four {
    background: #ca7eff;
}

.cs-messFrom-res .messFrom-res-boxes h4 {
    color: var(--myClrDark);
    font-size: 24px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 30px;
}

.cs-messFrom-res .messFrom-res-boxes h5 {
    color: #707070;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 500;
    margin: 0;
}

.cs-userFlow-Wrap .row {
    justify-content: space-between;
}

.cs-userFlow-Wrap .row .w33 {
    position: relative;
    margin-bottom: 80px;
}

.cs-userFlow-Wrap .row .w33:after {
    height: 8px;
    width: 54%;
    left: 81%;
    content: "";
    position: absolute;
    top: 50%;
    z-index: -1;
    border-top: 1px dashed #ccc;
}

.cs-userFlow-Wrap .row .w33:nth-of-type(1):after,
.cs-userFlow-Wrap .row .w33:nth-of-type(3n):after {
    display: none;
}

.cs-userFlow-Wrap .row .w33:nth-of-type(4):after {
    left: 68%;
}

.cs_usrerFlow_boxes {
    position: relative;
    z-index: 9;
    background: var(--myClrLight);
    min-width: 205px;
    max-width: 205px;
    min-height: 205px;
    max-height: 205px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cs_usrerFlow_boxes h4 {
    color: #333333;
    font-size: 24px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 0;
    text-transform: capitalize;
}

.cs_usrerFlow_boxes p {
    color: #666666;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 0;
}

.cs_usrerFlow_boxes:before,
.cs_usrerFlow_boxes:after {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
}

.cs_usrerFlow_boxes:after {
    left: initial;
    right: -16px;
}

.cs_usrerFlow_boxes.first {
    max-width: 100%;
    height: 100%;
    justify-content: flex-start;
    box-shadow: none;
}

.cs_usrerFlow_boxes.first h2 {
    color: var(--myClrDark);
    font-size: 36px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.cs_usrerFlow_boxes.first h6 {
    color: #3e3e3e;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 500;
    margin-bottom: 10px;
}

.cs_usrerFlow_boxes.first:before,
.cs_usrerFlow_boxes.first:after {
    display: none;
}

.cs_usrerFlow_boxes.second h4,
.cs_usrerFlow_boxes.second p {
    color: var(--myClrLight);
}

.cs_usrerFlow_boxes.second:before {
    display: none;
}

.cs_usrerFlow_boxes.thired {
    margin: 0 0 0 auto;
}

.cs_usrerFlow_boxes.thired:after {
    display: none;
}

.cs_usrerFlow_boxes.fourt {
    margin: 0 auto 0 0;
}

.cs_usrerFlow_boxes.fourt:before {
    display: none;
}

.cs_usrerFlow_boxes.six {
    margin: 0 0 0 auto;
}

.cs_usrerFlow_boxes.six:after {
    display: none;
}

/*  copy and change this  */
.exe-sec {
    width: 100%;
    position: relative;
    height: 650px;
    display: inline-block;
    overflow: hidden;
}

.sc-m-top {
    margin-top: 50px;
}

.exe-img {
    float: none;
    width: 1100px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.content-sec {
    position: absolute;
    max-width: 350px;
}

.content-sec p {
    font-family: 'Satoshi';
    font-weight: 500;
    font-size: 20px;
    color: #3e3e3e;
    line-height: 24px;
}

.pro-01 {
    background: #ffe4e5;
}

.pro-01 .content-sec {
    bottom: 5%;
    left: 15.5%;
}

.pro-02 {
    background: #d9eeec;
}

.pro-02 .content-sec {
    top: 18%;
    left: 15.5%;
}

.pro-03 {
    background: #e1e3f0;
}

.pro-03 .content-sec {
    top: 18%;
}

.pro-04 {
    background: #f9dbe0;
}

.pro-04 .content-sec {
    top: 18%;
}

.pro-05 {
    background: #feebc7;
}

.pro-05 .content-sec {
    bottom: 5%;
}

.pro-06 {
    background: #d5ebfa;
}

.pro-06 .content-sec {
    top: 10%;
}

.pro-07 {
    background: #DADAFE;
}

.pro-07 .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

.pro-07 .exe-img {
    width: 655px;
    position: static;
    transform: unset;
}

.pro-07.exe-sec .content-sec {
    position: static;
}

.pro-07 .content-sec {
    top: 10%;
}

.exe-sec .content-sec {
    left: 15.5%;
}

.sc-m-top-70 {
    margin-top: 70px;
}

.scr-shadow {
    box-shadow: 0px 3px 83px 0px rgba(0, 0, 0, 0.14);
}

.caseStudy-titleImgsec {
    margin-top: 120px;
}

.caseStudy-titleImgsec .csImgsec__title {
    font-size: 48px;
    color: var(--myClrDark);
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: 'Satoshi';
    font-weight: 900;
    width: max-content;
    margin: 0 auto;
    margin-bottom: 70px;
}

.caseStudy-titleImgsec .csImgsec__title.marg-type-two {
    margin-bottom: 40px;
}

.caseStudy-titleImgsec .caseStudy-titleImgsec__img {
    display: flex;
    justify-content: center;
}

.caseStudy-titleImgsec .caseStudy-titleImgsec__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.caseStudy--gallSec-wrap {
    margin: 70px 0 60px;
    position: relative;
}

.caseStudy--gallSec-wrap .row {
    justify-content: center;
}

.caseStudy--gallSec-wrap .row .gallSec__box {
    flex: 0 0 50%;
    width: 50%;
    padding: 15px;
    overflow: hidden;
}

.caseStudy--gallSec-wrap .row .gallSec__box img {
    width: 100%;
    -webkit-box-shadow: 0px 10px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 10px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: visible;
    margin-bottom: 50px;
}

.caseStudy--gallSec-wrap .row .gallSec__box.w65 {
    flex: 0 0 65% !important;
    width: 65% !important;
}

.caseStudy--gallSec-wrap.width30p {
    justify-content: space-between;
}

.caseStudy--gallSec-wrap.width30p .gallSec__box {
    flex: 0 0 30%;
    width: 30%;
}

.caseStudy--gallSec-wrap .gallSec__box.w100 {
    flex: 0 0 100%;
    width: 100%;
    padding: 15px;
    overflow: hidden;
}

.caseStudy--gallSec-wrap.width43p {
    justify-content: center;
}

.caseStudy--gallSec-wrap.width43p .gallSec__box {
    flex: 0 0 43%;
    width: 43%;
}

.caseStudy--gallSec-wrap.width70p {
    justify-content: space-between;
}

.caseStudy--gallSec-wrap.width70p .gallSec__box {
    flex: 0 0 70%;
    width: 70%;
}

.caseStudy--gallSec-wrap.width100p .gallSec__box {
    flex: 0 0 100%;
    width: 100%;
}

.cs-title.mt0 {
    margin-top: 0;
}

.d-none-after-990 {
    display: block;
}

.d-block-after-990 {
    display: none;
}

.cs-result-stats {
    width: 100%;
    margin: 50px auto 0;
    text-align: center;
}

.cs-result-stats h4 {
    color: #eb1d23;
    font-size: 42px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 20px;
}

.cs-result-stats p {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 20px;
    width: 80%;
    color: var(--myClrDark);
    margin: 0 auto;
    text-transform: capitalize;
}

.tra-xp .counter-value {
    display: none;
}

/*  case study details page end */
@media all and (max-width: 1600px) {
    .exe-img {
        width: 920px;
    }
}

@media all and (max-width: 1440px) {
    .cs-userFlow-Wrap .row .w33:after {
        width: 57%;
    }

    .cs-userFlow-Wrap .row .w33:nth-of-type(4):after {
        left: 66%;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one {
        font-size: 70px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap ul li span {
        font-size: 18px;
    }

    .cs-title-one {
        font-size: 30px;
    }

    .cs-title-two {
        font-size: 22px;
    }

    .pg-boxes {
        min-height: 126px;
    }

    .cs-messFrom-res .messFrom-res-boxes h4 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .cs-messFrom-res .messFrom-res-boxes h5 {
        font-size: 16px;
    }

    .cs_usrerFlow_boxes.first h2 {
        font-size: 30px;
    }

    .cs_usrerFlow_boxes {
        min-width: 185px;
        max-width: 185px;
        min-height: 185px;
        max-height: 185px;
        padding: 15px 20px;
    }

    .cs_usrerFlow_boxes h4 {
        font-size: 20px;
    }

    .cs-userFlow-Wrap .w33 {
        margin-bottom: 60px;
    }

    .cs_usrerFlow_boxes:after {
        right: -20px;
    }

    .cs-userFlow-Wrap .w33:nth-of-type(4):after {
        left: 65%;
    }

    .exe-sec {
        height: 550px;
    }

    .exe-img {
        width: 740px;
    }

    .exe-sec .content-sec {
        left: 10%;
    }

    .pro-01 .content-sec {
        bottom: 5%;
    }

    .pro-03 .content-sec {
        top: 12%;
    }

    .cs-messFrom-res {
        margin: 50px 0 80px;
    }

    .cs-title {
        margin-top: 80px;
    }

    .cs-title.cs-title__mt-30 {
        margin-top: 30px;
    }

    .pg-boxes h4 {
        font-size: 22px;
    }

    .pg-boxes {
        min-height: 165px;
    }

    .cs-userFlow-Wrap .w33:after {
        left: 84.5%;
        width: 53%;
    }
}

@media all and (max-width: 1200px) {
    .cs-userFlow-Wrap .w33:nth-of-type(4):after {
        left: 72%;
    }

    .mainContainer .caseStudy-banner-bg {
        min-height: 520px;
    }

    .cs-userFlow-Wrap .row .w33:after {
        width: 36%;
        left: 90%;
    }

    .cs-userFlow-Wrap .row .w33:nth-of-type(4):after {
        left: 71%;
        width: 43%;
    }

    .cs-title-one {
        font-size: 28px;
    }

    .exe-img {
        width: 700px;
    }

    .content-sec {
        position: absolute;
        max-width: 230px;
    }
}

@media all and (max-width: 1024px) {
    .caseStudy-banner-wrapp .caseStudy-banner-bg .pro-center {
        display: flex;
        justify-content: flex-end;
        margin-top: 70px;
    }
}

@media all and (max-width: 990px) {
    .features-box {
        padding-left: 0;
        flex-direction: column;
        gap: 20px;
    }

    .contact-wrap {
        padding: 40px;
    }


    .features-box {
        position: relative;
    }

    .features-right,
    .features-left {
        width: 100%;
        max-width: none;
    }

    .features-img {
        height: auto;
        margin: auto;
        display: flex;
        justify-content: center;
    }

    .cs-result-stats h4 {
        font-size: 34px;
        margin-bottom: 10px;
    }

    .cs-result-stats p {
        font-size: 18px;
        width: 90%;
    }

    .cs--mobail-device .caseStudy-bannerImg-wrap img {
        width: 60%;
    }

    .cs-title.cs-title__mt-30 {
        margin-top: 60px;
    }

    .cs-personalGoal .w25 {
        margin: 0 0 25px;
    }

    .cs-personalGoal {
        margin: 60px 0 0;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-banner-title {
        margin-bottom: 15px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one {
        font-size: 54px;
        margin-bottom: 15px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap ul li span {
        font-size: 16px;
    }

    .cs-scop-of-work-main .s-wedo-sec .hdg8 {
        margin-bottom: 20px;
    }

    .cs-scop-of-work-main .s-wedo-sec .wedopara {
        font-size: 18px;
    }

    .pg-boxes {
        min-height: 150px;
    }

    .pg-boxes h4 {
        font-size: 20px;
    }

    .cs-messFrom-res .messFrom-res-boxes h4 {
        font-size: 18px;
    }

    .cs_usrerFlow_boxes h4 {
        font-size: 18px;
    }

    .cs_usrerFlow_boxes p {
        font-size: 16px;
    }

    .cs-userFlow-Wrap .w33 {
        margin-bottom: 80px;
    }

    .cs_usrerFlow_boxes {
        min-width: 150px;
        max-width: 150px;
        min-height: 150px;
        max-height: 150px;
        padding: 15px 20px;
    }

    .cs_usrerFlow_boxes.first h2 {
        font-size: 24px;
    }

    .cs-userFlow-Wrap .w33:after {
        width: 43%;
        left: 86.5%;
    }

    .exe-sec {
        height: 450px;
    }

    .content-sec {
        max-width: 250px;
    }

    .exe-img {
        width: 550px;
    }

    .pro-07 .exe-img {
        width: 453px;
    }

    .exe-sec {
        height: 450px;
    }

    .cs-title-one {
        font-size: 22px;
    }

    .content-sec p {
        font-size: 18px;
    }

    .sc-m-top {
        margin-top: 0px;
    }

    .sc-m-top-70 {
        margin-top: 50px;
    }

    .caseStudy--gallSec-wrap.width30p .gallSec__box {
        flex: 0 0 47%;
        width: 47%;
    }

    .caseStudy--gallSec-wrap .row .gallSec__box.w65 {
        flex: 0 0 47% !important;
        width: 47% !important;
    }

    .d-none-after-990 {
        display: inline-block;
    }

    .d-block-after-990 {
        display: inline-block;
    }

    .caseStudy--gallSec-wrap.width30p .row {
        justify-content: space-between;
    }

    .caseStudy--gallSec-wrap.width30p .gallSec__box {
        margin-bottom: 50px;
    }

    .caseStudy--gallSec-wrap.width30p .gallSec__box img {
        margin-bottom: 0;
    }

    .case-study-hunger-pack .caseStudy--gallSec-wrap.width30p .row {
        justify-content: space-around;
    }

    .d-none-after-990 {
        display: none;
    }

    .d-block-after-990 {
        display: block;
    }

    .caseStudy-bannerImg-wrap {
        width: 90%;
        margin: 0 auto;
    }
}

@media all and (max-width: 800px) {

    .case-study-sps-canada,
    .case-study-nirmal-bang,
    .case-study-travelxp,
    .case-study-payzli,
    .case-study-hunger-pack,
    .case-study-reckrut {
        padding-top: var(--headerHeight);
    }

    .bread-crum-wrap ul {
        height: var(--headerHeightFixed);
    }

    .exe-sec .content-sec {
        left: 5%;
    }

    .bread-crum-wrap {
        margin-top: 0;
        top: 0;
    }

    .caseStudy-banner-wrapp .caseStudy-banner-bg .pro-center {
        margin-top: 30px;
        justify-content: center;
    }

    .container.padd-0-800 {
        padding: 0;
    }
}

@media all and (max-width: 768px) {
    .caseStudy-banner-bg .w50 {
        height: 100%;
    }

    .cs-scop-of-work-main .row {
        justify-content: center;
    }

    .cs-userFlow-Wrap {
        margin-bottom: 60px;
    }

    .cs-title.cs-title__mt-30 {
        margin-top: 40px;
    }

    .wwr-content h4 span {
        display: none;
    }

    .caseStudy-bannerImg-wrap {
        display: flex;
        justify-content: center;
        position: relative;
        margin-top: 35px;
        height: 100%;
        left: 0%;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap {
        position: relative;
        -webkit-transform: translate(0, 0%);
        -moz-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
        -o-transform: translate(0, 0%);
        transform: translate(0, 0);
        text-align: center;
        margin-top: 40px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-banner-title,
    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one,
    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__two,
    .caseStudy-banner-wrapp .caseStudy-Title-wrap ul {
        width: 100%;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap ul {
        justify-content: center;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one {
        font-size: 50px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one br {
        display: none;
    }

    .cs-scop-of-work-main .w25 {
        width: 50%;
    }

    .cs-scop-of-work-main .s-wedo-sec .s-wedo-img {
        margin: 0 auto 20px;
    }

    .cs-scop-of-work-main .s-wedo-sec .hdg8 {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .cs-personalGoal .w25 {
        width: 50%;
        margin: 0 0 25px;
    }

    .cs-personalGoal .row .pg-boxes {
        min-height: 120px;
        width: 100%;
        margin: 0 auto;
    }

    .cs-title {
        margin-top: 60px;
    }

    .cs-title-one {
        font-size: 20px;
    }

    .cs-title-two {
        font-size: 18px;
    }

    .sc-m-top-70 {
        margin-top: 30px;
    }

    .cs-messFrom-res .row:before {
        content: "";
        position: absolute;
        display: none;
    }

    .cs-messFrom-res .w25 {
        width: 50%;
    }

    .cs-messFrom-res .messFrom-res-boxes {
        margin-bottom: 40px;
    }

    .cs-messFrom-res .messFrom-res-boxes p {
        margin-bottom: 10px;
        font-size: 16px;
        width: 30px;
        height: 30px;
    }

    .cs-messFrom-res .messFrom-res-boxes p span {
        font-size: 14px;
        font-family: 'Satoshi';
        font-weight: 900;
        color: var(--myClrLight);
    }

    .cs-messFrom-res .messFrom-res-boxes h4 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .cs_usrerFlow_boxes.fifth:after {
        display: none;
    }

    .cs_usrerFlow_boxes.six:before {
        display: none;
    }

    .cs_usrerFlow_boxes {
        min-width: 190px;
        max-width: 190px;
        min-height: 190px;
        max-height: 190px;
        padding: 15px 20px;
    }

    .cs_usrerFlow_boxes:before,
    .cs_usrerFlow_boxes:after,
    .cs-userFlow-Wrap .w33:after {
        display: none;
    }

    .cs_usrerFlow_boxes.first {
        text-align: center;
        min-height: auto;
    }

    .cs_usrerFlow_boxes.thired {
        margin: auto;
    }

    .cs_usrerFlow_boxes.fourt {
        margin: auto;
    }

    .cs_usrerFlow_boxes.thired {
        margin: auto;
    }

    .cs_usrerFlow_boxes.six {
        margin: auto;
    }

    .cs-userFlow-Wrap .row {
        justify-content: center;
    }

    .cs-userFlow-Wrap .row .w33:first-of-type {
        width: 100%;
        margin-bottom: 30px;
    }

    .cs-userFlow-Wrap .row .w33 {
        margin-bottom: 30px;
    }

    .cs-userFlow-Wrap .row .w33:after {
        content: "";
    }

    .cs-userFlow-Wrap .row .w33:nth-of-type(1):after,
    .cs-userFlow-Wrap .row .w33:nth-of-type(3n):after,
    .cs-userFlow-Wrap .row .w33:nth-of-type(5n):after,
    .cs-userFlow-Wrap .row .w33:nth-of-type(6n):after {
        display: none;
    }

    .cs-userFlow-Wrap .row .w33:nth-of-type(4):after {
        left: 68%;
    }

    .cs-messFrom-res {
        margin: 50px 0;
    }

    .sc-m-top {
        margin-top: 0px;
    }

    .exe-sec {
        height: auto;
    }

    .exe-img {
        width: 100%;
        position: relative;
        right: 0;
        top: 0;
        -webkit-transform: translate(0, 0%);
        transform: translate(0, 0%);
    }

    .pro-07 .container {
        flex-direction: column-reverse;
    }

    .pro-07 .exe-img {
        width: 100%;
    }

    .pro-01 .content-sec {
        left: 0;
        margin: 60px auto;
    }

    .content-sec {
        text-align: center;
        position: relative;
        left: 0;
        width: 90%;
        left: 0 !important;
        max-width: 700px;
        margin: 0 auto;
    }

    .exe-sec .content-sec {
        margin: 60px auto 50px;
    }
}

@media all and (max-width: 640px) {
    .bread-crum-wrap ul li {
        margin-left: 20px;
        position: relative;
        display: flex;
        align-items: center;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one {
        font-size: 40px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__two {
        margin-bottom: 20px;
    }

    .exe-sec.pro-04 img {
        height: 350px;
    }

    .exe-sec.pro-04 img {
        height: 380px;
    }

    .cs_usrerFlow_boxes {
        min-width: auto;
        max-width: auto;
        min-height: inherit;
        max-height: inherit;
        height: 150px;
    }

    .cs_usrerFlow_boxes.first {
        min-width: 90vw;
        max-width: 90vw;
    }

    .cs-userFlow-Wrap .w33 {
        margin-bottom: 60px;
    }

    .cs-userFlow-Wrap .w33:after {
        width: 43%;
        left: 79.5%;
    }

    .cs-userFlow-Wrap .w33:nth-of-type(4):after {
        left: 80%;
    }

    .highlight-box .redirect img {
        max-width: 90% !important;
    }
}

@media all and (max-width: 576px) {
    .cs-userFlow-Wrap .w33 {
        width: 50%;
    }

    .bread-crum-wrap ul {
        height: 60px;
    }
}

@media all and (max-width: 480px) {
    .cs_usrerFlow_boxes.first h6 {
        font-size: 18px;
    }

    .cs--mobail-device .caseStudy-bannerImg-wrap img {
        width: 70%;
    }

    .cs-userFlow-Wrap {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .cs-result-stats {
        margin: 30px auto 0;
    }

    .cs-result-stats h4 {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .cs-result-stats p {
        font-size: 16px;
        width: 90%;
    }

    .cs-timeLine__Project {
        width: 100%;
        margin: 50px 0;
    }

    .cs-title.mt-0-480 {
        margin-top: 0;
    }

    .cs-messFrom-res {
        margin: 50px 0 0;
    }

    .cs-title-two {
        font-size: 18px;
    }

    .cs_usrerFlow_boxes.first h2 {
        font-size: 20px;
    }

    .cs-title__one {
        font-size: 34px;
    }

    .cs-banner-title {
        font-size: 22px;
    }

    .cs-scop-of-work-main .s-wedo-sec .s-wedo-img {
        margin: 0 auto 30px;
        width: 70px;
        height: 70px;
    }

    .cs-scop-of-work-main .s-wedo-sec {
        margin-bottom: 40px;
    }

    .cs-scop-of-work-main .s-wedo-sec .hdg8 {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .caseStudy--gallSec-wrap.width30p .gallSec__box,
    .caseStudy--gallSec-wrap.width50p .gallSec__box {
        flex: 0 0 90% !important;
        width: 90% !important;
    }

    .case-study-bmw .caseStudy--gallSec-wrap.width30p .gallSec__box,
    .case-study-bmw .caseStudy--gallSec-wrap.width50p .gallSec__box {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    .caseStudy--gallSec-wrap .row .gallSec__box img {
        width: 100%;
        -webkit-box-shadow: 0px 10px 5px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 10px 5px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0px 10px 5px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 50px;
        border-radius: 20px;
        overflow: visible;
    }

    .caseStudy--gallSec-wrap .row .gallSec__box.w65 {
        flex: 0 0 90% !important;
        width: 90% !important;
    }

    .bread-crum-wrap ul li a {
        padding-left: 21px;
        font-size: 14px;
    }

    .pg-boxes {
        min-height: 100px;
        padding: 20px;
    }

    .pg-boxes h4 {
        font-size: 18px;
    }

    .caseStudy--gallSec-wrap.width30p .gallSec__box {
        margin-bottom: 0;
    }

    .caseStudy--gallSec-wrap.width30p .gallSec__box:last-of-type img {
        margin-bottom: 0;
    }

    .caseStudy--gallSec-wrap .row .gallSec__box img {
        width: 100%;
        -webkit-box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 50px;
        border-radius: 20px;
        overflow: visible;
    }

    .cs-scop-of-work-main {
        margin-top: 30px;
    }

    .case-study-nirmal-bang .caseStudy--gallSec-wrap.width30p .row,
    .case-study-travelxp .caseStudy--gallSec-wrap.width30p .row {
        justify-content: center;
    }

    .case-study-travelxp .pg-boxes {
        min-height: 150px;
    }

    .work-list h6 {
        font-size: 24px;
        padding-bottom: 10px;
    }
}

@media all and (max-width: 420px) {
    .caseStudy--gallSec-wrap {
        margin: 70px 0 0px;
    }

    .cs-messFrom-res .messFrom-res-boxes p {
        margin-bottom: 10px;
        margin: 0 auto 10px;
    }

    .cs-messFrom-res .messFrom-res-boxes {
        text-align: center;
        margin-bottom: 25px;
    }

    .cs-userFlow-Wrap {
        margin-top: 30px;
    }

    .bread-crum-wrap ul li a {
        padding-left: 16px;
        font-size: 15px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-banner-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .cs-scop-of-work-main .s-wedo-sec .s-wedo-img {
        margin: 0 auto 25px;
        width: 55px;
        height: 55px;
    }

    .cs-scop-of-work-main .w25 {
        width: 100%;
    }

    .pg-boxes h4 {
        font-size: 16px;
    }

    .cs-scop-of-work-main .s-wedo-sec .hdg8 {
        margin-bottom: 15px;
        font-size: 18px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__one {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap ul li:before {
        width: 6px;
        height: 6px;
    }

    .cs-scop-of-work-main,
    .cs-title {
        margin-top: 40px;
    }

    .caseStudy-banner-wrapp .caseStudy-Title-wrap .cs-title__two,
    .cs-title-two {
        font-size: 18px;
    }

    .cs-title-one {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .pg-boxes {
        min-height: 112px;
        padding: 20px;
    }

    .cs-personalGoal {
        margin: 30px 0;
    }

    .cs-messFrom-res {
        margin: 30px 0 0;
    }

    .cs-userFlow-Wrap .row .w33 {
        width: 100%;
        margin-bottom: 40px;
    }

    .cs-userFlow-Wrap .row .w33 .cs_usrerFlow_boxes {
        max-width: auto;
        min-height: inherit;
        max-height: inherit;
        height: 110px;
        max-width: 300px;
    }

    .cs-userFlow-Wrap .row .w33 .cs_usrerFlow_boxes.first {
        height: 160px;
    }

    .cs-userFlow-Wrap .row .w33:first-of-type {
        width: 100%;
        margin-bottom: 50px;
    }

    .cs-messFrom-res .w25 {
        width: 100%;
        margin-bottom: 15px;
    }

    .bread-crum-wrap ul li {
        margin-left: 15px;
    }

    .pro-01 .content-sec {
        margin: 40px auto 20px;
    }
}

@media all and (max-width: 400px) {
    .progress-button {
        display: block !important;
    }

    .clutch-widget {
        width: 200px;
        margin-top: 20px;
        padding-left: 0 !important;
    }
}

.clutch-widget {
    width: 215px;
    margin-left: 0;
    padding-left: 15px;
}

:root {
    --servcontTop: 120px;
    --servcontTrm: translate(-50%, 0);
    --humanImgbox: translate(-50%, 0);
    --designTop: 650;
    --designLeft: -280;
    --techTop: 860;
    --techLeft: -430;
    --busiTop: 500;
    --busiLeft: 140;
}

.serv-padding {
    padding: 100px 0;
    position: relative;
}

.red-bg {
    background: #fff4f6;
}

.servHdn {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 52px;
    color: var(--myClrDark);
}

.servsub-hdn {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 36px;
    line-height: 1.3;
    color: var(--myClrDark);
    margin-bottom: 65px;
}

.serv-ban-box {
    height: 100vh;
    display: flex;
    align-items: center;
}

.serv-ban-box .serv-ban-img {
    position: absolute;
    top: 50%;
    right: -630px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.s-offer-list {
    display: flex;
    flex-wrap: wrap;
}

.s-offer-list ul {
    width: 33.333333%;
}

.s-offer-list ul li {
    margin-bottom: 30px;
    padding-right: 10px;
}

.s-offer-list ul li:last-of-type {
    margin-bottom: 0;
}

.s-offer-list ul li a {
    font-size: 28px;
    color: var(--myClrDark);
    line-height: 1;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots.svg) repeat-x bottom;
    padding-bottom: 3px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}

.s-offer-list ul li a:hover {
    background-position: 80% 100%;
}

.s-wedo-box .hdg6,
.s-wedo-box .hdg1 {
    text-align: center;
}

.s-wedo-sec {
    margin-bottom: 60px;
    padding-right: 10%;
}

.s-wedo-sec .s-wedo-img {
    margin-bottom: 30px;
    width: 120px;
    height: 120px;
}

.s-wedo-sec .s-wedo-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s-wedo-sec .hdg8 {
    margin-bottom: 20px;
    font-size: 24px;
}

.wedopara {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 18px;
    line-height: 1.7;
    color: var(--myClrDark);
}

.blog-read {
    font-size: 22px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 90px;
    text-transform: capitalize;
}

.blog-read.pur a {
    color: #5857f9;
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots2.svg) repeat-x bottom;
}

.blog-read.voi a {
    color: #4f2260;
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots3.svg) repeat-x bottom;
}

.blog-read.red a {
    color: #ff3968;
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots1.svg) repeat-x bottom;
}

.blog-read a:hover {
    background-position: 80% 100%;
}

.blog-read a {
    padding-bottom: 3px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}

.tool-list {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.tool-list li {
    margin-right: 25px;
}

.s-work-img .workImg {
    width: 490px;
    height: 430px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 30px;
}

.s-work-img .workImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-work-img h5 {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 24px;
    color: var(--myClrDark);
    margin-bottom: 10px;
}

.s-work-img p {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 24px;
    color: var(--myClrDark);
    line-height: 1;
    margin-bottom: 0;
}

.s-othr-box .serv2-comm-hdn,
.s-tool-sec .serv2-comm-hdn {
    text-align: center;
}

.s-othr-box .hdg6,
.s-tool-sec .hdg6 {
    text-align: center;
}

.s-othr.dropbox-cont {
    padding: 30px;
}

.s-we-offer .serv2-comm-hdn {
    margin-top: 50px;
}

.s-we-offer .servsub-hdn,
.s-we-offer .hdg1 {
    margin-bottom: 100px;
}

.serv-ban-cont .servsub-hdn {
    font-size: 32px;
    line-height: 40px;
}

.serv-ban-cont .servHdn {
    margin-bottom: 25px;
}

.opening-hdn {
    text-align: center;
}

/* service2 start */
.serv2-comm-hdn {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 24px;
    color: #ff3968;
    text-transform: capitalize;
    margin-bottom: 25px;
}

.serv2-comm-hdn.pur {
    color: #5857f9;
}

.serv2-comm-hdn.voi {
    color: #4f2260;
}

.servsub-hdn2 {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 62px;
    line-height: 68px;
    color: var(--myClrDark);
    margin-bottom: 0;
}

.servsub-hdn2.small-font {
    font-size: 44px;
    line-height: 1.5;
}

.servsub-hdn3 {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 42px;
    line-height: 52px;
    color: var(--myClrDark);
    margin-bottom: 0;
    opacity: 0;
}

.sectionOne {
    height: 200vh;
    position: relative;
}

.serv2-ban-box {
    height: 100vh;
    position: sticky;
    top: 0;
}

.serv2-ban-box .human-img-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}

.serv2-ban-box .human-img-box .skull {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.serv2-ban-cont {
    width: 900px;
    margin: auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -20%);
    transform: translate(-50%, -20%);
}

.serv2-ban-cont .hdg6,
.serv2-ban-cont .servsub-hdn2 {
    margin-bottom: 0;
}

.tool-img-box {
    padding: 50px;
    background: #f9f9f9;
    margin-bottom: 30px;
    text-align: center;
}

.tool-img {
    width: 110px;
    height: 110px;
    margin: auto;
}

.tool-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* .s-work-box {
    padding: 0 30px;
} */
.s-work-btn {
    text-align: center;
    margin-top: 20px;
}

/* service2 end */
/* technology start */
.techContainer {
    position: relative;
    height: 100%;
}

.tech-orbit-img {
    position: absolute;
}

.tech-orbit-img.rig {
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%);
}

.tech-orbit-img.left {
    left: 0;
    bottom: 0;
}

.tech-orbit-img .techmob {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tech-ban-cont {
    position: absolute;
    max-width: 800px;
    left: 0;
    padding-right: 20px;
    padding-left: 20px;
}

.tech-ban-cont .servsub-hdn3 {
    margin-top: 0;
}

/* technology end */
/* business start */
.busi-ban-cont {
    position: absolute;
    max-width: 530px;
    right: 0;
    margin-top: 30px;
}

.busi-ban-cont .hdg6 {
    margin-bottom: 10px;
}

/* business end */
/* header start */
.drop-box,
.mobdrop-box {
    position: initial !important;
    padding-right: 20px;
    cursor: pointer;
}

.drop-box a,
.mobdrop-box a {
    position: relative;
}

.drop-box .downarrow::before,
.mobdrop-box .downarrow::before,
.drop-box .downarrow::after,
.mobdrop-box .downarrow::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    background: var(--myClrDark);
    border-radius: 50%;
    position: absolute;
    right: -14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.drop-box:hover .downarrow::before,
.mobMenuTrigger.active .downarrow::before,
.drop-box:hover .downarrow::after,
.mobMenuTrigger.active .downarrow::after {
    width: 2px;
    height: 7px;
    border-radius: 0;
    top: 50%;
    right: -10px;
}

.drop-box:hover .downarrow::before,
.mobMenuTrigger.active .downarrow::before {
    /* right: -16px; */
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
}

.drop-box:hover .downarrow::after,
.mobMenuTrigger.active .downarrow::after {
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    /* right: 0;
        left: inherit; */
}

/*
.drop .f-col {
    padding: 0 8px;
    position: relative;
    top: -10px;
    opacity: 0;
    visibility: hidden;
    .anim(0.5s);
    transition-delay: 0.1s;    &:nth-child(2) {
        transition-delay: 0.2s;
    }    &:nth-child(3) {
        transition-delay: 0.3s;
    }
}.drop-box .f-col {
    top: 0;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
 */
.drop {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--myClrLight);
    width: 100%;
    padding: 5px 0 16px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    border-bottom: 1px solid var(--myClrDark);
}

.drop .f-col {
    padding: 0 8px;
}

.drop ul {
    max-width: 1088px;
    margin: auto;
}

.drop ul li {
    margin-right: 0;
}

.drop-box:hover:after {
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 37px;
    content: "";
}

.fixHeader .drop-box:hover:after {
    height: 30px;
}

.fixHeader .navigation {
    height: var(--headerHeightFixed);
}

.fixHeader .navigation li {
    line-height: var(--headerHeightFixed);
}

.drop-box:hover .drop {
    opacity: 1;
    pointer-events: initial;
    visibility: visible;
    pointer-events: auto;
    top: 100%;
}

.col1 {
    background: rgba(255, 93, 125, 0.1);
}

.col2 {
    background: rgba(88, 87, 249, 0.1);
}

.col3 {
    background: rgba(89, 37, 125, 0.1);
}

.dropbox-cont {
    padding: 20px;
    height: 100%;
    border-radius: 7px;
    text-transform: initial;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.dropbox-cont>div {
    position: relative;
    z-index: 1;
}

.dropbox-cont:after {
    content: "";
    background-size: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 30px);
    opacity: 0.1;
    transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
}

.dropbox-cont.col1:after {
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/wave1.svg) repeat-x 0% 80%;
    background-size: 120%;
}

.dropbox-cont.col2:after {
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/wave2.svg) repeat-x 0% 80%;
    background-size: 120%;
}

.dropbox-cont.col3:after {
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/wave3.svg) repeat-x 0% 80%;
    background-size: 120%;
}

.dropbox-cont:hover:after {
    background-position: 100% 180%;
    top: -100%;
    background-size: 200%;
}

.dropbox-cont:hover .dropFlex img {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.dropbox-cont h6 {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 38px;
    color: var(--myClrDark);
    line-height: 1;
    margin-bottom: 10px;
}

.dropbox-cont p {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--myClrDark);
    margin-bottom: 0;
}

.header-service .service-link,
.header-work .work-link,
.header-about .about-link,
.header-client .client-link {
    color: #ff3968;
}

/* header end */
.dropFlex {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.dropFlex p {
    width: 100%;
}

.dropFlex img {
    margin-bottom: 5px;
    width: 30px;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.frontback {
    -webkit-animation: movefrom 1s infinite;
    animation: movefrom 1s infinite;
}

@keyframes movefrom {
    from {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes movefrom {
    from {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* client start */
.client-pad {
    height: 100vh;
    padding-bottom: 0;
}

.client-ban--box {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - (var(--headerHeight) + 20px));
}

.client-ban--cont .hdg6 {
    margin-bottom: 15px;
}

.client-sec-logo {
    margin-top: 50px;
    text-align: center;
}

.client-sec-logo .hdg6 {
    margin-bottom: 85px;
}

.client-sec-logo ul {
    display: flex;
    flex-wrap: wrap;
}

.client-sec-logo ul li {
    width: calc(100% / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 65px;
}

.client-sec-logo ul li img {
    max-width: 72%;
    max-height: 100px;
}

.client-slider-sec .hdg6,
.client-slider-sec .hdg1 {
    text-align: center;
}

.client-slider-sec .hdg1 span {
    display: inline-block;
    width: 70px;
}

.client-nam {
    transition: all 1.5s ease-in-out;
    -webkit-transition: all 1.5s ease-in-out;
}

.client-nam h6 {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 0;
}

.client-nam p {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 42px;
    line-height: 65px;
    margin-bottom: 0;
    padding: 0 0 60px;
}

.client-nam h6,
.client-nam p {
    color: var(--myClrDark);
}

.client-nam h6 span,
.client-nam p span {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 16px;
    color: var(--myClrDark);
    display: block;
    margin-top: 5px;
}

.testi-cont {
    display: flex;
}

.cust-nam-cont {
    overflow: hidden;
}

.client-user-swiper::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/quote1.svg);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    background-position: center;
    height: 70px;
    width: 70px;
}

.client-user-swiper .swiper-wrapper {
    padding-top: 70px;
}

/* .quote-cont {
    position: relative;    p {
        padding: 40px 0;
    }    img {
        width: 120px;
    }    img:nth-child(1) {
        position: absolute;
        top: -60px;
        left: 0;
    }    img:nth-child(2) {
        position: absolute;
        bottom: 0;
        right: 0;
    }
} */
.user-img {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0;
    margin-right: 15px;
}

.user-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-testimo-pagi {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 25px;
}

.client-testimo-pagi .c-arw {
    margin: 0 10px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.client-testimo-pagi .c-arw img {
    width: 40px;
}

.client-testimo-pagi .c-arw.swiper-button-disabled {
    opacity: 0.1;
}

.c-expert-hdn {
    text-align: center;
}

.client-slider-sec .hdg6,
.c-expert-hdn .hdg6 {
    margin-bottom: 10px;
}

.client-slider-sec .swiper-slide {
    padding-left: 120px;
    background-color: var(--myClrLight);
}

.srvIconBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.srvIconUp {
    width: calc(100% / 6);
    height: 198px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.srvIcon p {
    font-size: 18px;
    color: #333;
    font-family: 'Satoshi';
    font-weight: 900;
    text-align: center;
    margin-bottom: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.srvIcon {
    text-align: center;
    width: 100%;
    background-color: var(--myClrLight);
    display: inline-block;
    vertical-align: middle;
    padding: 30px 0;
}

.srvIcon>div {
    width: 70px;
    height: 70px;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

/* dot animation start */
.dotOrbit,
.dotTechOrbit {
    position: absolute;
    top: 0;
    left: 0;
}

.human-img-box,
.dotOrbit {
    width: 620px;
    height: 620px;
}

.dotTechOrbit,
.tech-orbit-img {
    width: 480px;
    height: 480px;
}

.skuldot.design-colr,
.d-dots.design-colr {
    background: #ff3968;
}

.skuldot.tech-colr,
.d-dots.tech-colr {
    background: #5857f9;
}

.dotTechOrbit .skuldot1 {
    top: 40px;
}

.dotTechOrbit .skuldot2 {
    bottom: 40px;
}

.skuldot.busi-colr,
.d-dots.busi-colr {
    background: #4f2260;
}

/* common start */
.skuldot {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    display: block;
    position: absolute;
}

.skuldot1 {
    top: 90px;
    left: 50px;
}

.skuldot2 {
    bottom: 90px;
    right: 50px;
}

.weOffer-dot {
    position: absolute;
    width: 400px;
    height: 400px;
    left: 150px;
    background: #ff3968;
    display: inline-block;
    border-radius: 50%;
    opacity: 0;
}

.merge-dot {
    width: 20px;
    height: 20px;
    background-color: var(--myClrDark);
    display: block;
    margin: -110px auto 0;
}

.d-dots {
    border-radius: 50%;
    display: block;
    position: absolute;
}

.s-we-off-box {
    position: relative;
    z-index: 1;
}

.s-we-off-box.we-tech-sec {
    margin-top: 100px;
}

.s-we-off-box .hdg1 {
    font-size: 52px;
    line-height: 1.1;
}

/* common end */
.desginTrigStart {
    width: 10px;
    height: 1px;
    background-color: var(--myClrDark);
    display: block;
    position: absolute;
    bottom: -100px;
    left: 0;
}

.desginTrigEnd {
    width: 10px;
    height: 1px;
    background-color: var(--myClrDark);
    display: block;
    position: absolute;
    top: 500px;
    left: 0;
}

.desginTrigStart,
.desginTrigEnd {
    opacity: 0;
}

/* dot animation end */
/* about start */
#readMore {
    margin-top: 20px;
    font-size: 18px;
    text-transform: capitalize;
    color: #ff3968;
    border: 0;
    font-family: 'Satoshi';
    font-weight: 900;
    height: 42px;
    line-height: 42px;
    display: inline-block;
    background: transparent;
    border-bottom: 1px dashed #ff3968;
}

.about-description {
    margin-top: 100px;
}

.about-description #more {
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin-bottom: 0;
}

.about-description p {
    font-size: 24px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
}

.about-description p span {
    margin-bottom: 30px;
    display: block;
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 32px;
    line-height: 1.5;
}

.about-description p span b {
    display: block;
    margin-top: 30px;
    font-size: 62px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
}

.about-description p span::last-of-type {
    margin-bottom: 0;
}

/* about end */
.tech-orbit-img .skullImg {
    max-width: 60% !important;
    max-height: 60% !important;
}

/* 22-4-2021 */
.modalCont {
    margin-bottom: 30px;
}

.innerModal {
    color: #ff3968;
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 16px;
}

.innerModalpara {
    color: var(--myClrDark);
    font-size: 18px;
    font-weight: 900;
}

.innerPopup {
    background: var(--myClrLight);
    padding: 70px;
    border-radius: 0;
    border: none;
    position: relative;
}

.innerDialog {
    max-width: 900px;
    width: 90%;
}

.innerModalCross {
    position: absolute;
    right: 20px;
    top: 20px;
    line-height: 0;
    opacity: 1;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.innerModalCross:hover {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.innerModalbody .modalCont:last-child {
    margin-bottom: 0;
}

/* 22-4-2021 end */
/* page trasition */
ul.transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100000000000000;
    margin: 0;
}

ul.transition li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    /* transform-origin: center right; */
    background: var(--clr);
}

ul.transition li.pink {
    background: #ff5d7d;
}

ul.transition li.blue {
    background: #5857f9;
}

ul.transition li.purple {
    background: #59257d;
}

/* page trasition end */
/* responsive */
@media all and (max-width: 1600px) {
    :root {
        --humanImgbox: translate(-50%, 20px) scale(0.7);
        --designTop: 500px;
        --designLeft: -320px;
        --techTop: 770px;
    }

    .serv2-ban-box .human-img-box,
    .dotOrbit,
    .tech-orbit-img,
    .dotTechOrbit {
        max-width: 450px;
        max-height: 450px;
    }

    .serv2-ban-box .human-img-box .skull,
    .tech-orbit-img .techmob {
        max-width: 240px;
        max-height: 240px;
    }

    .skuldot1 {
        top: 40px;
    }

    .skuldot2 {
        bottom: 40px;
    }

    .skuldot {
        width: 40px;
        height: 40px;
    }

    .weOffer-dot {
        width: 350px;
        height: 350px;
    }

    .serv2-ban-box .human-img-box {
        bottom: -20px;
    }
}

@media all and (max-width: 1440px) {
    :root {
        --techTop: 720;
    }

    .servsub-hdn2 {
        font-size: 55px;
        line-height: 58px;
    }

    .servsub-hdn2.small-font {
        font-size: 40px;
    }

    .servsub-hdn3 {
        font-size: 32px;
        line-height: 42px;
        margin-top: 10px;
    }
}

@media all and (max-width: 1200px) {
    :root {
        --humanImgbox: translate(-50%, 20px) scale(0.7);
        --designTop: 480px;
        --designLeft: -250px;
        --techLeft: -400px;
        --techTop: 660px;
    }

    .s-we-offer .servsub-hdn,
    .s-we-offer .hdg1 {
        margin-bottom: 80px;
    }

    .s-we-off-box .hdg1 {
        font-size: 48px;
    }

    .weOffer-dot {
        width: 300px;
        height: 300px;
        left: 130px;
        top: -20px;
    }

    .client-nam p {
        font-size: 36px;
        line-height: 55px;
    }

    .client-slider-sec .swiper-slide {
        padding-left: 0;
    }

    /* start */
    .client-slider-sec .hdg1 span {
        width: 60px;
    }

    .client-ban--img img {
        max-width: 65%;
    }

    .client-sec-logo .hdg6 {
        margin-bottom: 55px;
    }

    .srvIconUp {
        height: 158px;
        padding: 10px;
    }

    .srvIcon {
        padding: 20px 0;
    }

    .c-expert-hdn .hdg1 {
        margin-bottom: 25px;
    }

    /* end */
}

/* 990px changed to 1024px */
@media all and (max-width: 1024px) {
    :root {
        --humanImgbox: translate(-50%, 0) scale(0.7);
        --techTop: 660;
        --busiTop: 420;
    }

    .s-we-off-box .hdg1 {
        font-size: 40px;
    }

    .servsub-hdn2 {
        font-size: 45px;
        line-height: 52px;
    }

    .servsub-hdn2.small-font {
        font-size: 36px;
    }

    .servsub-hdn3 {
        font-size: 28px;
        line-height: 36px;
    }

    .serv2-ban-box .human-img-box,
    .dotOrbit,
    .tech-orbit-img,
    .dotTechOrbit {
        max-width: 400px;
        max-height: 400px;
    }

    .serv2-ban-box .human-img-box .skull,
    .tech-orbit-img .techmob {
        max-width: 200px;
        max-height: 200px;
    }

    .skuldot {
        width: 35px;
        height: 35px;
    }

    .skuldot1,
    .dotTechOrbit .skuldot1 {
        top: 35px;
    }

    .skuldot2,
    .dotTechOrbit .skuldot2 {
        bottom: 35px;
    }

    .serv-padding {
        padding: 60px 0;
    }

    .dropbox-cont h6 {
        font-size: 30px;
    }

    .serv2-ban-cont {
        width: 70%;
    }

    .s-offer-list ul li a {
        font-size: 22px;
    }

    .tool-img-box {
        padding: 40px;
    }

    .tool-img {
        width: 80px;
        height: 80px;
    }

    .s-wedo-sec .s-wedo-img {
        width: 80px;
        height: 80px;
    }

    .s-wedo-sec .hdg8 {
        margin-bottom: 10px;
    }

    .wedopara {
        line-height: 1.5;
    }

    .blog-read {
        font-size: 18px;
        margin-bottom: 0;
    }

    .s-othr-cont h6 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .s-othr-cont p {
        font-size: 16px;
    }

    .s-othr-serv span {
        width: 50px;
    }

    /* technology start */
    .tech-ban-cont .hdg6,
    .busi-ban-cont .hdg6 {
        margin-bottom: 15px;
    }

    .tech-ban-cont .servsub-hdn3,
    .busi-ban-cont .servsub-hdn3 {
        margin-top: 0;
    }

    /* technology end */
    /* client start */
    .srvIconUp {
        width: calc(100% / 5);
        height: 140px;
    }

    .srvIcon>div {
        width: 60px;
        height: 60px;
    }

    .client-sec-logo ul li {
        margin-bottom: 55px;
    }

    .client-ban--box {
        justify-content: center;
    }

    /* client end */
}

@media all and (max-width: 990px) {
    :root {
        --designTop: 450px;
        --designLeft: -150px;
        --techLeft: -250px;
    }

    .client-slider-sec .hdg1 span {
        width: 50px;
    }

    .client-nam p,
    .about-description p span {
        font-size: 32px;
        line-height: 48px;
    }

    .desginTrigEnd {
        top: 420px;
        top: 90vh;
    }

    .s-wedo-sec {
        padding-right: 0;
    }

    .weOffer-dot {
        width: 270px;
        height: 270px;
    }
}

@media all and (max-width: 800px) {
    :root {
        --designLeft: -100px;
        --techLeft: -20px;
        --techTop: 650px;
        --busiTop: 520;
        --busiLeft: -10px;
    }

    #readMore {
        margin-top: 10px;
    }

    .client-slider-sec .hdg1 span {
        width: 60px;
    }

    .client-slider-sec .swiper-slide {
        padding: 0 40px;
    }

    .client-nam p,
    .about-description p span {
        font-size: 24px;
        line-height: 38px;
    }

    .client-nam p {
        padding: 20px 0 60px;
    }

    .client-user-swiper::before {
        height: 50px;
        width: 50px;
        left: 40px;
    }

    .client-user-swiper .swiper-wrapper {
        padding-top: 50px;
    }

    .client-testimo-pagi {
        margin-top: 20px;
    }

    .serv2-ban-cont {
        width: 90%;
    }

    .weOffer-dot {
        left: 170px;
    }

    /* technology start */
    .tech-orbit-img.rig {
        right: initial;
        left: 50%;
        -webkit-transform: translate(-50%, -70%);
        transform: translate(-50%, -70%);
    }

    .tech-ban-cont .hdg6,
    .busi-ban-cont .hdg6 {
        margin-bottom: 10px;
    }

    /* technology end */
    /* business start */
    .tech-orbit-img.left {
        bottom: initial;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .busi-ban-cont {
        right: initial;
        max-width: 600px;
    }

    /* business end */
    /* client start */
    .client-slider-sec .hdg1 {
        margin-bottom: 30px;
    }

    .srvIconUp {
        width: calc(100% / 4);
        height: 130px;
    }

    .srvIcon {
        padding: 10px 0;
    }

    /* client end */
}

@media all and (max-width: 640px) {
    :root {
        --techLeft: 40px;
        --techTop: 620px;
    }

    .tech-orbit-img,
    .dotTechOrbit {
        max-width: 340px;
        max-height: 340px;
    }

    .tech-orbit-img .techmob {
        max-width: 140px;
        max-height: 140px;
    }

    .skuldot1,
    .dotTechOrbit .skuldot1 {
        top: 20px;
    }

    .skuldot2,
    .dotTechOrbit .skuldot2 {
        bottom: 20px;
    }

    .s-we-off-box .hdg1 {
        font-size: 36px;
    }

    .about-description p span {
        margin-bottom: 15px;
    }

    #readMore {
        margin-top: 10px;
        font-size: 14px;
        height: 32px;
        line-height: 32px;
    }

    .weOffer-dot {
        width: 240px;
        height: 240px;
        left: 150px;
    }

    .tool-img-box {
        padding: 30px;
    }

    .tool-img,
    .s-wedo-sec .s-wedo-img {
        width: 70px;
        height: 70px;
    }

    .s-wedo-sec .s-wedo-img {
        margin-bottom: 20px;
    }

    .s-offer-list ul li a {
        font-size: 20px;
    }

    .s-othr-serv {
        padding: 20px;
    }

    .s-othr-serv span {
        width: 30px;
    }

    .s-othr-cont {
        width: 100%;
        padding-right: 10px;
    }

    /* client start */
    .srvIcon>div {
        width: 50px;
        height: 50px;
    }

    .srvIconUp {
        height: auto;
    }

    .client-slider-sec .hdg1 span {
        width: 52px;
    }

    /* client end */
}

@media all and (max-width: 576px) {
    :root {
        --designLeft: -10px;
        --busiLeft: 60px;
        --busiTop: 430px;
    }

    .s-we-off-box .hdg1 {
        font-size: 32px;
    }

    .client-slider-sec .swiper-slide {
        padding: 0 20px;
    }

    .client-user-swiper::before {
        left: 20px;
    }

    .servsub-hdn2 {
        font-size: 36px;
        line-height: 46px;
    }

    .servsub-hdn2.small-font {
        font-size: 30px;
    }

    .s-offer-list ul {
        width: 50%;
        margin-bottom: 30px;
    }

    .s-offer-list-3 ul:nth-last-of-type(1) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .s-offer-list-3 ul:nth-last-of-type(1) li {
        width: 50%;
    }

    .s-we-offer .servsub-hdn,
    .s-we-offer .hdg1 {
        margin-bottom: 60px;
    }

    /* client start */
    .srvIconUp {
        width: calc(100% / 3);
    }

    .srvIcon p {
        font-size: 16px;
    }

    /* client end */
}

@media all and (max-width: 480px) {
    :root {
        --humanImgbox: translate(-50%, 20px) scale(0.7);
        --techTop: 660px;
        --busiTop: 520px;
    }

    .servsub-hdn3 {
        font-size: 26px;
    }

    .tool-img,
    .s-wedo-sec .s-wedo-img {
        width: 60px;
        height: 60px;
    }

    .servsub-hdn2 {
        font-size: 32px;
        line-height: 42px;
    }

    .serv2-ban-box .human-img-box,
    .dotOrbit {
        max-width: 310px;
        max-height: 310px;
    }

    .skuldot {
        width: 30px;
        height: 30px;
    }

    .skuldot1,
    .dotTechOrbit .skuldot1 {
        top: 30px;
        left: 30px;
    }

    .skuldot2,
    .dotTechOrbit .skuldot2 {
        bottom: 30px;
        right: 30px;
    }

    .weOffer-dot {
        width: 220px;
        height: 220px;
        left: 105px;
        top: -10px;
    }

    .serv2-ban-box .human-img-box .skull {
        max-width: 160px;
        max-height: 160px;
    }

    .s-wedo-sec {
        margin-bottom: 40px;
    }

    /* technology start */
    .tech-orbit-img,
    .dotTechOrbit {
        max-width: 300px;
        max-height: 300px;
    }

    .tech-orbit-img .techmob {
        max-width: 130px;
        max-height: 130px;
    }

    /* technology end */
    /* client start */
    .client-sec-logo ul li {
        width: calc(100% / 3);
        margin-bottom: 40px;
    }

    .client-sec-logo .hdg6 {
        margin-bottom: 35px;
    }

    .rating {
        width: 90px;
    }

    .client-ban--img img {
        max-width: 100%;
    }

    .c-arw img {
        width: 30px;
    }

    /* client end */
}

@media (max-width: 400px) and (min-height: 700px) {
    :root {
        --techTop: 740px;
    }
}

@media all and (max-width: 400px) {
    :root {
        --designLeft: 40px;
        --techLeft: 40px;
        --busiTop: 480px;
    }

    .s-we-off-box .hdg1 {
        font-size: 28px;
    }

    .team-heading.client-heading .servsub-hdn {
        font-size: 25px;
    }

    .client-slider-sec .hdg1 span {
        width: 42px;
    }

    .client-user-swiper::before {
        left: 0;
    }

    .client-slider-sec .swiper-slide {
        padding: 0;
    }

    .client-nam p {
        padding: 10px 0 40px;
    }

    .client-testimo-pagi .c-arw img {
        width: 35px;
    }

    .client-sec-logo ul li {
        width: calc(100% / 2);
    }

    .servsub-hdn2 {
        font-size: 30px;
        line-height: 40px;
    }

    .servsub-hdn2.small-font {
        font-size: 24px;
    }

    .s-offer-list ul li a {
        font-size: 18px;
    }

    .s-offer-list ul,
    .s-offer-list ul li {
        margin-bottom: 20px;
    }

    .s-wedo-sec .hdg8 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .s-othr-cont h6 {
        font-size: 22px;
    }

    /* start */
    .srvIcon p {
        font-size: 14px;
    }

    /* end */
}

@media all and (max-width: 360px) {
    :root {
        --designTop: 380px;
        --designLeft: 100px;
        --techLeft: 60px;
        --techTop: 540px;
        --busiTop: 460px;
    }

    .s-we-off-box.we-tech-sec {
        margin-top: 0px;
    }

    .team-heading.client-heading .servsub-hdn br {
        display: none;
    }

    .skuldot1,
    .dotTechOrbit .skuldot1 {
        top: 25px;
    }

    .skuldot2,
    .dotTechOrbit .skuldot2 {
        bottom: 25px;
    }

    .weOffer-dot {
        width: 180px;
        height: 180px;
        left: 110px;
        top: 0;
    }

    .servsub-hdn3 {
        font-size: 24px;
        line-height: 32px;
        margin-top: 0;
    }

    .s-we-offer .servsub-hdn,
    .s-we-offer .hdg1 {
        margin-bottom: 40px;
    }

    .s-offer-list ul {
        width: 100%;
    }

    .s-offer-list-3 ul:nth-last-of-type(1) {
        width: 100%;
        display: block;
    }

    .s-offer-list-3 ul:nth-last-of-type(1) li {
        width: 100%;
    }

    .servsub-hdn2 {
        font-size: 26px;
        line-height: 36px;
    }

    .servsub-hdn2.small-font {
        font-size: 20px;
    }

    .tool-img,
    .s-wedo-sec .s-wedo-img {
        width: 50px;
        height: 50px;
    }

    /* technology start */
    .tech-ban-cont .hdg6,
    .busi-ban-cont .hdg6 {
        margin-bottom: 5px;
    }

    .tech-orbit-img,
    .dotTechOrbit {
        max-width: 270px;
        max-height: 270px;
    }

    .tech-orbit-img .techmob {
        max-width: 100px;
        max-height: 100px;
    }

    /* technology end */
    /* client start */
    .client-slider-sec .hdg1 br {
        display: none;
    }

    /* client end */
}

@media all and (max-width: 340px) {
    .s-we-off-box .hdg1 {
        font-size: 24px;
    }
}

.service-padding {
    padding: 150px 0;
}

.back {
    font-size: 24px;
    color: #C9C9C9;
    font-family: 'Satoshi';
    font-weight: 900;
}

.back img {
    position: relative;
    top: -1px;
}

.back:hover {
    color: #707070;
}

.service-title {
    font-size: 72px;
    color: #5857F9;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-top: 40px;
}

.service-subtitle {
    font-size: 56px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
    margin-top: 40px;
}

.service-bodytext {
    font-size: 18px;
    color: #707070;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-top: 40px;
}

.service-subhead {
    font-size: 32px;
    color: #5857F9;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-top: 40px;
}

.service-banimg {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    margin: auto;
    text-align: right;
}

.service-banimg img {
    width: 80%;
}

.techcolor {
    color: #8080FF;
}

.buscolor {
    color: #CA7EFF;
}

.s-offer-list.grid4 ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.s-offer-list.grid4 ul li {
    width: 33.333333%;
}

.culturepad {
    padding: 50px 0 0;
}

.team-heading {
    text-align: center;
}

.team-main-img {
    margin: 50px 0 30px;
    max-height: 50vh;
}

.team-main-img .w75 {
    margin: 0 auto;
    height: 100%;
}

.team-main-img .w75 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-pagemainWrapp .team-main-img {
    margin: 0 0 30px;
    max-height: 50vh;
}

.team-padding .servsub-hdn {
    padding: 0px 100px;
    font-size: 42px;
    margin: 0;
}

.team--head {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 30px;
    color: #5857F9;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.team--info {
    padding: 0px 100px;
    font-size: 42px;
    margin: 0;
    font-family: 'Satoshi';
    font-weight: 900;
    line-height: 1.3;
    color: var(--myClrDark);
}

.teammem {
    margin-bottom: 50px;
    display: block;
    text-align: center;
}

.teammem .team-img {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.teammem:hover .team-img {
    transform: translateY(-10px);
}

.teammem .emply-img {
    height: 430px;
    filter: grayscale(1);
}

.teammem .emply-img img {
    height: 100%;
    object-fit: cover;
}

.desg {
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 20px 0 5px;
    color: var(--myClrDark);
    text-align: center;
}

.teamname {
    font-size: 16px;
    font-family: 'Satoshi';
    font-weight: 700;
    margin: 0;
    color: var(--myClrDark);
    text-align: center;
}

.culturesec {
    margin-bottom: 60px;
    text-align: center;
}

.moreabout {
    padding: 100px 0;
}

.moreabout .s-othr-cont p {
    font-size: 16px;
    line-height: 24px;
}

.moreabout .morecont {
    width: 100%;
}

.career .serv-ban-img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    width: 30%;
}

.about .serv-ban-cont {
    max-width: 100%;
}

.abtimg {
    width: 100%;
    margin: 100px 0 0px;
}

.aboutsub {
    font-size: 36px;
    font-family: 'Satoshi';
    font-weight: 900;
}

.serv-ban-cont.quote {
    padding: 150px 0 100px;
    opacity: 0.3;
}

.serv-ban-cont.quote .servHdn {
    font-size: 48px;
}

.serv-ban-cont.quote .servsub-hdn {
    font-size: 24px;
}

.client-logo {
    text-align: center;
    position: relative;
    top: -110px;
}

#lionCanvas,
#lionCanvasDark {
    width: 90%;
    height: 463px;
}

.gallery-top-text li a {
    border: 1px solid var(--myClrDark);
    padding: 5px 22px;
    border-radius: 50px;
    color: #797979;
    display: inline-block;
    margin: 3px 0;
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
}

.filter-button.active {
    background: var(--myClrDark);
    color: var(--myClrLight);
}

.black {
    color: var(--myClrDark);
}

.medium {
    font-family: 'Satoshi';
    font-weight: 700;
}

.uppercase {
    text-transform: capitalize;
}

.screens img {
    width: 100%;
}

.absright {
    position: absolute;
    right: 0;
    padding: 0;
}

.absleft {
    position: absolute;
    left: 0;
    padding: 0;
}

.absleft img {
    width: 100%;
}

.casetop {
    padding: 115px 0;
}

.offset-50 {
    margin-left: 50%;
    padding-left: 20px;
    padding-right: 20px;
}

.howpad {
    padding: 50px;
}

.casehdg8 {
    font-size: 24px;
}

.solution {
    margin-top: 20px;
    padding: 50px 0;
}

.screens .w33 {
    padding: 15px;
}

.cultureImg-wrap .row .w10,
.cultureImg-wrap .row .w20,
.cultureImg-wrap .row .w30,
.cultureImg-wrap .row .w40,
.cultureImg-wrap .row .w50,
.cultureImg-wrap .row .w60,
.cultureImg-wrap .row .w70,
.cultureImg-wrap .row .w80,
.cultureImg-wrap .row .w90,
.cultureImg-wrap .row .w100 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.cultureImg-wrap .cultureImg-box {
    margin-bottom: 20px;
}

.no-page {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.no-page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quote-pop-container.beta-pop {
    border: 1px solid var(--myClrDark);
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.beta-okay {
    margin-top: 20px;
}

.beta-pop p {
    margin-bottom: 20px;
}

@media all and (max-width: 1440px) {
    .nmlbang .wss-section .ele-sps-01 {
        -webkit-transform: translate(0, 30%);
        transform: translate(0, 30%);
        max-width: 600px;
        width: 100%;
    }

    .team-pagemainWrapp .team-padding {
        padding-top: 140px;
    }

    .team-pagemainWrapp .team-section {
        margin-top: 110px;
    }

    .team--info {
        font-size: 38px;
        margin-bottom: 40px;
    }
}

@media all and (max-width: 1200px) {
    .team--info {
        padding: 0px;
        font-size: 32px;
    }

    .team--head {
        font-size: 24px;
    }

    .teammem .emply-img {
        height: 390px;
    }
}

@media all and (max-width: 990px) {
    margin-top: 100px;

    /* Team start */
    .teamhd {
        font-size: 22px;
    }

    .team-pagemainWrapp .team-padding {
        padding-bottom: 0;
        padding-top: 140px;
    }

    .team-pagemainWrapp .team-section {
        margin-top: 60px;
    }

    .team-pagemainWrapp .team-section .w-990-50 {
        width: 50%;
    }

    .team-main-img {
        margin: 50px 0 0px;
    }

    .team-main-img .w75 {
        width: 80%;
    }

    .team-padding {
        padding: 130px 0 40px;
    }

    .team-padding .servsub-hdn,
    .culturesec .servsub-hdn {
        font-size: 30px;
        padding: 0px 40px;
    }

    /* Team end */
    .nmlbang .wss-section .ele-sps-01 {
        transform: translate(0%, 50%);
        max-width: 600px;
        width: 100%;
    }

    .ele-sps-01.nirmal-bang-gall-ele {
        transform: translate(-21%, 40%);
    }
}

@media all and (max-width: 768px) {
    .team-padding {
        padding: 80px 0 60px;
    }

    .team-section {
        margin: 0 15px;
    }
}

@media all and (max-width: 640px) {
    .s-offer-list.grid4 ul li {
        width: 50%;
    }
}

@media all and (max-width: 576px) {

    /* technology start */
    /* technology end */
    .culturesec .servsub-hdn {
        font-size: 22px;
    }

    .team--info {
        font-size: 26px;
    }

    .team--head {
        font-size: 22px;
    }

    .team-main-img .w75 {
        width: 90%;
    }

    .teammem .emply-img {
        height: 310px;
    }

    .desg {
        margin: 20px 0 10px;
    }

    .teammem {
        margin-bottom: 30px;
    }

    .no-page {
        height: 50vh;
    }
}

@media all and (max-width: 480px) {
    .team-pagemainWrapp .team-section {
        margin-top: 20px;
    }

    .culturesec .servsub-hdn {
        font-size: 18px;
    }

    .teammem .emply-img {
        height: 220px;
    }

    .team--info {
        font-size: 22px;
    }

    .teamhd {
        font-size: 18px;
    }

    .cultureImg-wrap .row .w10,
    .cultureImg-wrap .row .w20,
    .cultureImg-wrap .row .w30,
    .cultureImg-wrap .row .w40,
    .cultureImg-wrap .row .w50,
    .cultureImg-wrap .row .w60,
    .cultureImg-wrap .row .w70,
    .cultureImg-wrap .row .w80,
    .cultureImg-wrap .row .w90,
    .cultureImg-wrap .row .w100 {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .cultureImg-wrap .cultureImg-box {
        margin-bottom: 10px;
    }

    .team-padding .servsub-hdn,
    .team-main-img .w75 {
        padding: 0;
    }
}

@media all and (max-width: 420px) {
    .desg {
        margin: 10px 0;
    }

    .teammem {
        margin-bottom: 20px;
    }
}

@media all and (max-width: 400px) {
    .teammem .emply-img {
        height: 190px;
    }
}

/* Contact page */
.progress-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-button.sucess {
    display: none;
}

.massage {
    text-align: center;
}

.flex-jc-c {
    justify-content: center;
}

.flex-sb {
    justify-content: space-between;
}

.contant-bottm {
    margin-bottom: 100px;
}

.m-top,
.m-top-2 {
    margin-top: 20px;
}

.m-top-50 {
    margin-top: 50px;
}

.m-top-30 {
    margin-top: 30px;
}

.contactUs {
    padding: 0px;
    margin-top: 30px;
    flex: 0 0 100%;
    width: 100%;
    position: relative;
}

.form-label {
    position: relative;
    color: var(--myClrDark);
    /* background-color: var(--myClrLight); */
    font-family: 'Satoshi';
    font-weight: 900;
    transition: all 0.3s linear;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: top;
}

input {
    background: transparent;
}

.input-box {
    /*   max-width  : ~"calc(100% - 125px)"; */
    margin-left: 4px;
    display: inline-block;
    width: 305px;
    position: relative;
}

.error {
    color: red;
    font-size: 13px;
    position: absolute;
    right: 0;
    bottom: -16px;
    z-index: 1;
}

.d-none {
    display: none;
}

.input-box.area {
    width: 95%;
    height: 75px;
    max-width: 95%;
    max-height: 75px;
}

.form-input {
    position: relative;
    padding: 0px 0px 0px 0px;
    width: 100%;
    outline: 0;
    border: 0;
    color: var(--clr2);
    font-family: 'Satoshi';
    font-weight: 900;
    border-bottom: 1px solid #e1e1e1;
    transition: all 0.3s linear;
}

.form-input:focus {
    border-bottom: 1px solid var(--clr2);
}

.form-input.filled {
    /*  box-shadow: 0 2px 0 0 var(--clr2); */
    border-bottom: 1px solid var(--clr2);
}

.contact .sub-line {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 24px;
    color: var(--myClrDark);
    transition: all 0.3s linear;
    text-align: left !important;
    margin: 0 !important;
    width: auto !important;
}

.contact .hdg1 {
    font-size: 72px;
    margin-bottom: 20px;
    line-height: 1.1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    letter-spacing: 0px;
    transition: all 0.3s linear;
    opacity: 1;
}

.contact .check-btn {
    opacity: 1;
    padding: 0px 10px 10px;
    transition: all 0.2s linear;
    height: 100px;
}

.contact .form-label,
.contact .form-input {
    font-size: 30px;
}

input::-webkit-calendar-picker-indicator {
    display: none;
}

.coutry-form-group {
    display: flex;
    align-items: center;
}

.coutryCode {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    color: var(--clr2);
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 24px;
    line-height: 40px;
    width: 70px;
    text-align: center;
}

.coutry-input-box {
    display: flex;
    align-items: center;
    position: relative;
}

.coutry-input-box input {
    padding-left: 80px;
}

.filled .hdg1 {
    font-size: 0px;
    margin-bottom: 0px;
}

.filled .sub-line {
    font-size: 0px;
}



.filled .back-pg {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    margin: 0;
}

.filled .form-label,
.filled .form-input {
    font-size: 24px;
}

.txField {
    position: relative;
    margin-bottom: 1.3rem;
    height: auto;
}

.success-msg {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 20px;
    color: var(--clr2);
    text-align: left;
    display: none;
}

.success-msg span {
    color: var(--clr1);
    font-size: 30px;
    display: block;
}

.success-msg.show {
    top: 32%;
    display: block;
}


.budgetField {
    margin-block: 20px;
}

.call-us.mob-call,
.call-us.mob-call.sm-screen {
    display: none;
}

.form-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.15);
    -webkit-transition: ease-in 0.3s;
    transition: ease-in 0.3s;
    transform-origin: 0 50%;
}

.form-label,
.form-input {
    padding: 5px 0;
    display: inline-block;
}

.form-input.style4 {
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    background-color: transparent;
}

.form-input.style4:before {
    content: "asdad";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: red;
}

.form-input.style4:focus::-webkit-input-placeholder {
    text-indent: -300px;
}

.chbox {
    display: inline-block;
    border: 1px solid #dddddd;
    margin: 5px 5px 0;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    height: 40px;
    line-height: 36px;
}

.chbox input {
    display: none;
}

.chbox label {
    position: relative;
    cursor: pointer;
    text-align: center;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    font-size: 16px;
    padding: 2px 16px;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.chbox input:checked+label {
    color: var(--myClrLight);
    background: var(--clr2);
}

.chbox:first-child input:checked+label {
    color: var(--myClrLight);
    background: var(--clr1);
}

.chbox:nth-child(4) input:checked+label {
    color: var(--myClrLight);
    background: var(--clr3);
}

.chbox:nth-child(5) input:checked+label {
    color: var(--myClrLight);
    background: var(--clr3);
}

.chbox:nth-child(6) input:checked+label {
    color: var(--myClrLight);
    background: var(--clr3);
}

.budget-box .chbox:nth-child(3) input:checked+label {
    color: var(--myClrLight);
    background: var(--clr3);
}

.budget-box .bud_error {
    right: 20px;
}

.visible .chbox {
    pointer-events: auto;
}

.c-msg {
    vertical-align: middle;
    font-size: 18px;
    margin-top: 80px;
}

.c-msg img {
    width: 21px;
    margin: 0 3px;
}

.c-msg a {
    color: var(--myClrDark);
    font-size: 14px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    position: relative;
}

.c-msg a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-bottom: 1px dotted var(--myClrDark);
    bottom: 0;
    left: 0;
}

.send.button-grd-line em,
.back-pg.button-grd-line em {
    font-family: 'Satoshi';
    font-weight: 900;
}

.send.button-grd-line span,
.back-pg.button-grd-line span {
    font-family: 'Satoshi';
    font-weight: 900;
}

.back-pg {
    left: -10px;
    top: -45px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 50px;
    height: fit-content;
    padding: 0 10px;
    position: absolute;
}

.back-pg img {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

address {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    font-style: normal;
    /*  img.usa {
         height          : ~"calc(120px + 0px)";
        margin-bottom    : 10px; 
    } */
}

address .country {
    display: inline-block;
    vertical-align: middle;
    margin-right: 50px;
}

address img {
    height: 120px;
    margin-bottom: 40px;
    display: inline-block;
    vertical-align: middle;
}

address h2 {
    font-size: 60px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 0;
    text-transform: capitalize;
}

address h6 {
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 700;
    margin-bottom: 20px;
}

address p {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 500;
    line-height: 1.5;
}

address strong {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
}

address.border-none {
    border-right: 0px solid rgba(0, 0, 0, 0.1);
    margin-left: 10px;
}

.form-input.error {
    border-bottom: 1px solid red;
    color: red;
}

label.error {
    display: none;
    margin: 0;
    color: red;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 10px;
}

.c-img {
    top: 0;
}

.c-img img {
    width: 100%;
}

.call-us {
    bottom: 65px;
    float: right;
    right: 16px;
}

.call-us h4 {
    font-size: 64px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    display: inline-block;
    color: #999;
    line-height: 68px;
    line-height: 0.95;
}

.call-us ul {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
    margin-left: 35px;
}

.call-us ul li {
    display: block;
    width: auto;
    margin-top: 8px;
    text-align: right;
}

.call-us ul li strong {
    margin-right: 2px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: #999;
}

.call-us ul a {
    color: var(--myClrDark);
}

.call-us ul a:hover {
    color: var(--clr1);
}

.call-us ul .mail a {
    color: var(--clr2);
    text-decoration: underline;
}

.call-us ul .mail a:hover {
    color: var(--clr2);
    text-decoration: none;
}

.trans-img a {
    position: relative;
}

.trans-img a:before {
    content: '';
    position: inherit;
    width: 20px;
    height: 1px;
    display: inline-block;
    margin-right: 8px;
}

.work-head {
    padding-left: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.work-head .servsub-hdn {
    font-size: 62px;
    padding: 0 0px;
    line-height: 67px;
    text-transform: capitalize;
}

.work-head p {
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 700;
    line-height: 36px;
    margin-top: 15px;
    margin-bottom: 0;
}

.work .team-padding {
    padding: 180px 0 40px;
}

.work .h-work-cont {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.work .h-work-cont p {
    font-size: 18px;
    line-height: 1.5;
}

.h-work-def {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    margin-top: 5px;
}

.h-work-def ul {
    font-family: 'Satoshi';
    font-weight: 700;
    font-size: 16px;
    color: #999;
}

.h-work-def ul li {
    display: inline-block;
    position: relative;
    margin-left: 5px;
}

.h-work-def ul li:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #999999;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 6px;
}

.h-work-def ul li:first-child:before {
    display: none;
}

.branding .work-list {
    background: rgba(60, 60, 138, 0.11);
}

.website .work-list,
.mobile .work-list {
    background: rgba(88, 87, 249, 0.11);
}

.uiux .work-list {
    background: rgba(255, 93, 125, 0.11);
}

.grid .work-list {
    padding: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.work-list h6 {
    font-size: 36px;
    padding-bottom: 20px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
}

.highlight-box {
    width: calc(100% - 70px);
    padding: 50px 60px;
    border: 1px solid var(--myClrDark);
    margin: 50px auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.highlight-box h6 {
    font-size: 36px;
    font-family: 'Satoshi';
    font-weight: 900;
    display: inline-block;
    width: fit-content;
}

.highlight-box .redirect {
    height: 66px;
    width: 66px;
    background-color: #5857F9;
    display: inline-block;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-align: center;
    padding: 18px 0;
    display: flex;
}

.highlight-box .redirect img {
    max-width: 50%;
    margin: 0 auto;
}

.highlight-box .redirect:hover {
    background-color: #ff3968;
}

.exe-img {
    min-height: 100%;
}

@media all and (max-width: 1500px) {
    .sol-head {
        left: 16%;
    }

    .wss-banner.sps-top-banner {
        background-size: 100% !important;
    }
}

@media all and (max-width: 1336px) {
    .sol-head {
        left: 12%;
    }
}

@media all and (max-width: 1200px) {
    .contact .hdg1 {
        font-size: 62px;
        margin-bottom: 10px;
    }

    .contact .sub-line {
        font-size: 21px;
    }

    .contact .check-btn {
        height: auto;
    }

    .filled .hdg1 {
        font-size: 0px;
        margin-bottom: 0px;
    }

    .filled .sub-line {
        font-size: 0px;
    }

    .section-padding.contact {
        height: auto;
        padding: 120px 0 !important;
    }

    .section-padding.contact .container {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        top: 0;
    }

    .form-label,
    .form-input {
        font-size: 24px;
    }

    .input-box {
        width: 235px;
    }

    .call-us ul {
        font-size: 16px;
        margin-left: 20px;
        font-family: 'Satoshi';
        font-weight: 900;
    }

    .call-us ul li {
        margin-top: 8px;
    }

    .call-us h4 {
        font-size: 43px;
    }

    address {
        /* img.usa {
            height: calc(88px + 0px);
        } */
    }

    address h2 {
        font-size: 45px;
    }

    address h6 {
        font-size: 20px;
    }

    address img {
        height: 88px;
    }

    address p {
        font-size: 16px;
    }

    .work-head .servsub-hdn {
        font-size: 55px;
        line-height: 60px;
    }

    .work-list h6 {
        font-size: 32px;
        padding-bottom: 15px;
    }

    .work .h-work-cont {
        width: 49%;
    }

    .grid .work-list {
        padding: 0px;
    }

    .work-head {
        padding-left: 0px;
    }

    /* Case Study */
    .wss-banner h4 {
        font-size: 62px;
    }

    .wss-banner .ws-screen-img {
        position: relative;
        margin-top: 60px;
    }

    .wss-banner.sps-top-banner {
        background-size: 110% !important;
    }

    .ws-hdn {
        font-size: 32px;
    }

    .wss-icn-cont img {
        height: 55px;
    }

    .sol-head {
        width: 490px;
        left: 6%;
    }

    /* Case Study Over*/
    .chbox label {
        padding: 2px 12px;
        margin-bottom: 0;
    }
}

@media all and (max-width: 1024px) {
    .m-top {
        margin-top: 5px;
    }

    .back-pg {
        top: -30px;
    }

    .section-padding.contact {
        height: auto;
        padding: 115px 0 80px !important;
        width: 100%;
        margin: auto;
    }

    .contant-bottm {
        max-width: 90%;
        margin: 0 auto 100px;
    }

    address .country {
        display: inline-block;
        margin-right: 36px;
    }

    .section-padding.contact .container {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        top: 0;
    }

    /* .contactUs {
        height: auto;
    }     .send {
        position: relative;
    }*/
    .call-us ul {
        font-size: 16px;
        margin-left: 20px;
    }

    .call-us ul li {
        margin-top: 8px;
    }

    .call-us h4 {
        font-size: 43px;
    }

    address {
        /* img.usa {
            height        : calc(75px + 0px);
            vertical-align: super;
        } */
    }

    address h2 {
        font-size: 45px;
    }

    address h6 {
        font-size: 20px;
    }

    address img {
        height: 75px;
    }

    address p {
        font-size: 16px;
    }

    .highlight-box h6 {
        font-size: 30px;
    }

    .highlight-box {
        padding: 30px;
    }

    .highlight-box .redirect {
        height: 55px;
        width: 55px;
        padding: 13px 0;
    }

    .wss-iconography .iconography-icons li {
        width: 25%;
        margin-bottom: 20px;
        padding: 15px;
    }

    .wss-icn-cont img {
        height: 50px;
    }

    .typo2 li {
        font-size: 30px;
        margin: 0 23px 30px;
    }

    .wss-banner.sps-top-banner {
        background-size: 125% !important;
    }
}

@media all and (max-width: 990px) {
    .contactUs {
        margin-top: 0;
        min-height: 370px;
        height: auto;
    }

    .input-box {
        width: 280px;
    }

    .contact .w50 {
        width: 100%;
    }

    .call-us {
        display: none;
    }

    .progress-button {
        position: relative;
        bottom: -10px;
        font-family: 'Satoshi';
        font-weight: 900;
    }

    .success-msg.show {
        top: 50%;
    }

    .call-us.mob-call {
        display: block;
        margin-top: 0px;
        position: relative;
        top: 0;
        text-align: left;
        float: left;
        width: 100%;
        margin-bottom: 15px;
    }

    .call-us.mob-call ul li {
        text-align: left;
    }

    .trans-img a:before {
        width: 0px;
        margin-right: -2px;
    }

    .call-us ul {
        margin-left: 0px;
        width: 49%;
    }

    .desk-header .container::after,
    .desk-header .container::before {
        content: none;
    }

    .contact .hdg1 {
        font-size: 55px;
        margin-bottom: 10px;
    }

    .contact .sub-line {
        font-size: 21px;
    }


    .filled .hdg1 {
        font-size: 00px;
        margin-bottom: 0px;
    }

    .filled .sub-line {
        font-size: 0px;
    }



    .call-us {
        position: relative;
        bottom: 0px;
        float: right;
        right: 0;
        text-align: center;
        width: 50%;
        margin-top: 40px;
    }

    .filled .information {
        margin-top: 0;
    }

    .contant-bottm .w50 p br {
        display: none;
    }

    .contant-bottm .w50 address {
        padding-right: 20px;
    }

    .back-pg {
        top: -40px;
    }

    .work-list {
        padding: 30px;
        margin-bottom: 20px;
    }

    .wss-banner .ws-screen-img {
        position: relative;
        margin-top: 40px;
    }

    .wss-solu {
        height: 430px;
    }

    .sol-head {
        width: 340px;
        left: 12%;
    }

    .wss-banner h4 {
        font-size: 45px;
        margin-bottom: 20px;
    }

    .typo2 li {
        font-size: 30px;
        margin: 0 23px 22px;
    }

    .typoBg {
        width: 100px;
        height: 100px;
        font-size: 32px;
        margin: 30px auto;
    }

    .typo1 li {
        font-size: 36px;
        margin: 0 35px;
    }

    .typo2 {
        margin: 30px 0 0;
    }

    .c-img {
        position: relative;
        top: 0;
    }
}

@media all and (max-width: 800px) {
    .information h6 span:after {
        bottom: -3px;
    }

    .contactUs {
        margin-top: 0;
        height: auto;
    }

    .contact .hdg1 {
        font-size: 70px;
        margin-bottom: 20px;
    }

    .contact .sub-line {
        font-size: 36px;
        margin-bottom: 10px;
    }



    .filled .hdg1 {
        font-size: 0px;
        margin-bottom: 0px;
    }

    .filled .sub-line {
        font-size: 0px;
    }


    .send {
        position: relative;
        margin-top: 0px;
    }

    address h2 {
        font-size: 44px;
    }

    .team-padding {
        padding: 140px 0 60px;
    }

    .work .team-padding {
        padding: 120px 0 40px;
    }

    .servsub-hdn {
        font-size: 45px;
    }

    .sol-head {
        left: 8%;
    }

    .highlight-box {
        margin: 40px auto 40px;
    }
}

@media all and (max-width: 768px) {
    .contant-bottm .w50 address {
        padding-right: 11px;
    }

    address .country {
        margin-right: 27px;
    }

    .work-list {
        padding: 20px;
        margin-bottom: 10px;
    }

    .work-list h6 {
        padding-bottom: 10px;
    }

    .hwork-img {
        margin-bottom: 20px;
    }

    .home-page-work .hwork-img {
        margin-bottom: 0;
    }

    .work .h-work-cont {
        width: 45%;
    }

    .h-work-def {
        width: 52%;
    }

    .highlight-box {
        padding: 30px 20px;
    }

    .wss-section.wss-solu {
        padding: 50px 0 0;
        height: auto;
    }

    .pro-slides {
        position: relative;
        top: 50%;
        right: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 100%;
    }

    .sol-head {
        left: 0;
        width: 100%;
    }

    .sol-head .ws-hdn,
    .sol-head .sub-line {
        text-align: center;
        margin: 0 auto;
    }

    .wss-iconography .wss-flex-center {
        height: auto;
        flex-wrap: wrap;
    }

    .wss-icn-cont {
        width: 100%;
        text-align: center;
        padding: 0 20px;
    }

    .wss-icn-img {
        max-width: 360px;
        text-align: center;
        width: 100%;
        margin: auto;
    }

    .wss-icn-img img {
        margin-top: 50px;
        max-width: 100%;
    }

    .wss-iconography .ws-hdn.left {
        text-align: center;
        margin: auto;
    }

    .wss-iconography .ws-hdn.left:after {
        margin-left: auto;
    }

    .wss-banner.sps-top-banner {
        background-size: 167% !important;
    }

    .wss-banner.sps-top-banner img {
        max-width: 90%;
    }

    .sub-line p {
        font-size: 15px;
    }

    .screen-ele.three-grid {
        flex: 0 0 50%;
        width: 50%;
        padding: 15px;
    }

    .wss-banner h4 {
        font-size: 40px;
        margin-bottom: 20px;
    }
}

@media all and (max-width: 700px) {
    .contant-bottm .w50 {
        max-width: 398px;
        width: 100%;
        margin-bottom: 25px;
        margin-left: auto;
        margin-right: auto;
    }

    address {
        border-right: 0px solid rgba(0, 0, 0, 0.1);
    }

    /* address img.usa {
        height     : calc(75px);
        margin-left: 70px;
    } */
    .contant-bottm {
        margin-bottom: 50px;
    }

    .grid>.w50 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .work-head {
        padding-left: 0;
        max-width: 490px;
    }

    .work-head .servsub-hdn {
        font-size: 50px;
        line-height: 55px;
    }

    .highlight-box .redirect {
        height: 45px;
        width: 45px;
        padding: 8px 10px;
    }

    .highlight-box h6 {
        font-size: 30px;
        width: calc(100% - 130px);
    }
}

@media all and (max-width: 740px) {
    address .country {
        margin-right: 17px;
    }
}

@media all and (max-width: 640px) {
    .contact-wrap {
        padding: 20px;
        padding-top: 40px;
    }

    .contact .contactUs .call-us.mob-call {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .form-label,
    .form-input {
        font-size: 24px;
    }

    .contact .hdg1 {
        font-size: 80px;
        margin-bottom: 10px;
    }

    .contact .sub-line {
        font-size: 30px;
    }

    .contact .form-label,
    .contact .form-input {
        font-size: 24px;
    }

    .filled .hdg1 {
        font-size: 0px;
        margin-bottom: 0px;
    }

    .filled .sub-line {
        font-size: 0px;
    }

    .filled .form-label,
    .filled .form-input {
        font-size: 20px;
    }

    /* ================= */
    .information .fields .w50 {
        width: 100%;
    }


    .filled .information,
    .contact .check-btn,
    .information .fields {
        height: auto;
    }

    .contact .check-btn {
        margin-top: 0;
    }

    .servsub-hdn {
        font-size: 40px;
    }

    .gallery-top-text li a {
        font-size: 16px;
    }

    .team-padding {
        padding: 110px 0 40px;
    }

    .gallery-top-text li a {
        padding: 5px 18px;
    }

    .work-list h6 {
        font-size: 27px;
        padding-bottom: 10px;
    }

    .hwork-img {
        margin-bottom: 20px !important;
    }

    .home-page-work .hwork-img {
        margin-bottom: 0;
    }

    .work .h-work-cont p {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media all and (max-width: 600px) {
    .highlight-box h6 {
        font-size: 30px;
        width: calc(100% - 90px);
    }

    .work-head .servsub-hdn {
        font-size: 47px;
        line-height: 55px;
    }

    .work .h-work-cont,
    .h-work-def {
        width: 100%;
    }

    .h-work-def {
        text-align: left;
    }

    .h-work-def ul li:first-child {
        margin-left: 0;
    }

    .work .h-work-cont p {
        font-size: 18px;
        line-height: 1.5;
    }
}

@media all and (max-width: 550px) {
    .contact .check-btn {
        height: auto;
        margin-top: 00px;
    }

    .txField {
        margin-bottom: 1.15rem;
        height: auto;
    }

    .contact .hdg1 {
        font-size: 65px;
        margin-bottom: 10px;
    }

    .contact .sub-line {
        font-size: 25px;
    }

    .contact .form-label,
    .contact .form-input {
        font-size: 22px;
    }



    .filled .hdg1 {
        font-size: 0px;
        margin-bottom: 0px;
    }

    .filled .sub-line {
        font-size: 0px;
    }

    .filled .form-label,
    .filled .form-input {
        font-size: 18px;
    }

    .list-inline-item:not(:last-child) {
        margin-right: 0.3rem;
    }

    .hwork-img {
        margin-bottom: 20px !important;
    }

    .home-page-work .hwork-img {
        margin-bottom: 0;
    }

    .top-text li a {
        font-size: 14px;
    }

    .input-box {
        width: 250px;
    }

    .chbox label {
        font-size: 14px;
        padding: 2px 14px;
    }
}

@media all and (max-width: 480px) {
    #hs-contact-canvas {
        margin-bottom: 0;
    }

    .frame-47753 {
        grid-row-gap: 50px;
    }

    .glow-button span {
        font-size: 16px;
        height: 48px;
    }

    :root {
        --header-height: 68px;
    }

    .frame-47756 {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .caseStudy--gallSec-wrap.width30p .row {
        justify-content: center;
    }

    .grid .work-list {
        margin-bottom: 50px;
    }

    .information {
        margin-top: 0px;
    }

    .call-us h4 {
        font-size: 35px;
    }

    address h2 {
        font-size: 35px;
    }

    address h6 {
        font-size: 18px;
    }

    address p {
        font-size: 14px;
    }

    .section-padding.contact {
        height: auto;
        padding: 100px 0 30px !important;
    }

    .contant-bottm .w50 {
        max-width: 330px;
    }

    .contact .hdg1 {
        font-size: 60px;
        font-size: 12.5vw;
        margin-bottom: 10px;
    }

    .contact .sub-line {
        font-size: 22px;
    }

    .contact .form-label,
    .contact .form-input {
        font-size: 20px;
    }

    .filled .hdg1 {
        font-size: 0px;
        margin-bottom: 0px;
    }

    .filled .sub-line {
        font-size: 0px;
    }

    .filled .form-label,
    .filled .form-input {
        font-size: 18px;
    }


    .servsub-hdn {
        font-size: 34px;
    }

    .serv2-comm-hdn {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .list-inline-item:not(:last-child) {
        margin-right: 0.1rem;
    }

    .team-padding {
        padding: 70px 0 30px;
    }

    .list-inline-item {
        margin-bottom: 10px;
    }

    .input-box {
        width: 197px;
    }

    .grid>.w50 {
        width: 100%;
    }

    .work-head .servsub-hdn {
        font-size: 44px;
        line-height: 50px;
    }

    .work .h-work-cont p,
    .h-work-def ul {
        font-size: 18px;
    }

    .highlight-box {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .highlight-box h6 {
        width: calc(100% - 0px);
    }

    .highlight-box .redirect {
        padding: 8px 10px;
        margin-top: 14px;
    }

    .highlight-box .highlight-box {
        padding: 20px 20px;
    }

    .form-label,
    .input-box {
        width: 95%;
    }


    .coutry-form-group {
        flex-direction: column;
    }

    .input-box {
        padding: 0px 0 8px;
    }

    .txField {
        margin-bottom: 5px;
        height: auto;
    }

    .error {
        bottom: -6px;
    }

    .send {
        position: relative;
    }

    .filled .form-label,
    .filled .form-input {
        font-size: 17px;
    }
}

@media all and (max-width: 419px) {
    .nmlbang .screen-scr .screen-ele img {
        margin-bottom: 0;
    }

    .section-padding.contact {
        height: auto;
        padding: 115px 0 30px !important;
    }

    .contact .sub-line br {
        display: none;
    }

    .serv2-comm-hdn {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .servsub-hdn {
        font-size: 30px;
    }

    .grid>.w50 {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .work-list {
        padding: 20px;
        margin-bottom: 20px;
    }

    .work-head .servsub-hdn {
        font-size: 38px;
        line-height: 42px;
    }

    .screen-ele,
    .screen-ele.three-grid {
        flex: 0 0 100%;
        width: 100%;
    }
}

@media all and (max-width: 400px) {
    .highlight-box {
        padding: 20px 10px;
    }

    .highlight-box h6 {
        font-size: 26px;
    }

    .wss-icn-cont img {
        height: 40px;
    }

    .wss-icn-img {
        max-width: 300px;
    }

    .wss-icn-img img {
        margin-top: 20px;
    }

    .wss-banner h4 {
        font-size: 35px;
        margin-bottom: 20px;
    }
}

@media all and (max-width: 390px) {
    .call-us ul {
        margin-left: 0;
        width: 100%;
        margin-bottom: 24px;
    }

    .contact h6 {
        font-size: 20px;
        margin-bottom: 0.8rem;
    }

    .filled h6 {
        font-size: 0px;
    }

    .work .h-work-cont p,
    .h-work-def ul {
        font-size: 18px;
    }

    .call-us.mob-call {
        display: none;
    }

    .call-us.mob-call.sm-screen {
        display: block;
        margin-top: 30px;
    }

}

@media all and (max-width: 340px) {
    .contant-bottm .w50 address {
        padding-right: 3px;
    }

    address .country {
        display: inline-block;
        margin-right: 20px;
    }

    .call-us {
        float: left;
        padding: 0px;
    }

    .wss-iconography .iconography-icons li {
        width: 25%;
        margin-bottom: 6px;
        padding: 15px;
    }

    .wss-icn-cont img {
        height: 34px;
    }

    .wss-icn-img {
        max-width: 240px;
    }

}

:root {
    --clr1: #fb5457;
    --clr2: #5857f9;
    --clr3: #9c34f0;
    --clr4: var(--myClrDark);
    --headerHeight: 80px;
    --headerHeightFixed: 60px;
    --hsHeadingTop: 100px;
    --hsHeadingHeight: 120px;
    --hsTextTop: 220px;
    --wwaWidth: 71px;
    --wwaWidth2: 150px;
    --dotBoxLiWidth: 30px;
    --dotBoxDuration: 1s;
    --dotBoxTop: 150vh;
    --expWidth: 40px;
    --wwa1Top: 0;
    --wwa1Left: 0;
    --wwa2Top: 0;
    --wwa2Left: 0;
    --wwa3Top: 0;
    --wwa3Left: 0;
    --durationCommon: 400;
    --service1Height: 120vh;
    --service2Height: 110vh;
    --serviceMainHeight: 450vh;
    --hsTrigger1: 120vh;
    --hsTrigger12: 220vh;
    --dots: 30vh;
    --hs-img-box: 424px;
    --tlServAnimContainer: 100vh;
    --hs-ellipse-width-1: 370px;
    --hs-ellipse-width-2: 305px;
    --hs-ellipse-width-3: 395px;
    --bannerHeight: 0;
    --wwrHeight: 0;
    --servDetLeft: 170px;
}

html {
    --myClrDark: #000;
    --myClrLight: #fff;
    --title: #000;
}

html[data-theme='dark'] {
    --myClrDark: #cecece;
    --myClrLight: #121212;
    --title: #cecece;
}

html[data-theme='dark'] .desk-header {
    background: #fff;
}

html[data-theme='dark'] .navigation li a {
    color: #000;
}

html[data-theme='dark'] .navigation li .button-grd-line:before {
    background: #000;
}

html[data-theme='dark'] .navigation li .button-grd-line span {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background: transparent;
    color: #fff;
}

html[data-theme='dark'] .button-grd-line em {
    color: #fff;
}

html[data-theme='dark'] .navigation li .button-grd-line:after {
    background: #000;
}

html[data-theme='dark'] .drop-box .downarrow::before,
html[data-theme='dark'] .mobdrop-box .downarrow::before,
html[data-theme='dark'] .drop-box .downarrow::after,
html[data-theme='dark'] .mobdrop-box .downarrow::after {
    background-color: #000;
}

html[data-theme='dark'] .drop {
    background-color: #fff;
}

html[data-theme='dark'] .dayNight input:checked+div {
    box-shadow: inset 16px -16px 0 0 #000000;
}

html[data-theme='dark'] .mob-menu {
    background: #fff;
}

html[data-theme='dark'] .mob-menu ul li a {
    color: #000;
}

html[data-theme='dark'] .mob-menu .button-grd-line:before {
    background: #000;
}

html[data-theme='dark'] .mob-menu .button-grd-line span {
    color: #000;
}

html[data-theme='dark'] .mob-menu-close span:before {
    background: #000;
}

html[data-theme='dark'] .mob-menu-close span:after {
    background: #000;
}

html[data-theme='dark'] .h-quote-box .button-grd-line {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

html[data-theme='dark'] .h-quote-box .button-grd-line span {
    background: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme='dark'] .h-quote-box .button-grd-line em {
    color: #fff;
}

html[data-theme='dark'] .h-quote-box .button-grd-line:hover:after {
    background: #000;
}

html[data-theme='dark'] .form-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.2);
}

html[data-theme='dark'] .quoteDetailsBtn.button-grd-line span {
    color: #000;
}

html[data-theme='dark'] .quoteDetailsBtn.button-grd-line em {
    color: #000;
}

html[data-theme='dark'] .quoteDetailsBtn.button-grd-line:after {
    content: "";
    background: #fff;
}

html[data-theme='dark'] .cookie-popup .button-grd-line:after {
    content: "";
    background: #000;
}

.clr1 {
    color: var(--title);
}

.clr2 {
    color: var(--title);
}

.clr3 {
    color: var(--title);
}

.clr4 {
    color: var(--title);
}

.container {
    width: 100%;
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

html,
body {
    width: 100%;
    height: 100%;
    /* transition: background 0.2s ease-in-out; */
}

body {
    color: var(--myClrDark);
    background: var(--myClrLight);
    font-size: 16px;
    font-family: 'Satoshi';
    font-weight: 500;
    margin: 0;
    padding: 0;
    /* opacity: 0; */
}

input [type=submit],
button {
    outline: none !important;
}

.container {
    max-width: 1250px;
}

.logo {
    width: 120px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.logo-flex {
    display: flex;
    align-items: center;
}

.section-padding {
    padding: 150px 0;
    position: relative;
}

.header-social {
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    padding-left: 35px;
    margin-left: 35px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.header-social li {
    margin-right: 17px;
}

.desk-header {
    height: var(--headerHeight);
    z-index: 999;
    background: var(--myClrLight);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: 0 0.5px 0 var(--myClrDark);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.desk-header .button-grd-line {
    font-family: 'Satoshi';
    font-weight: 900;
    top: -3px;
}

.desk-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.desk-header.fixHeader {
    height: var(--headerHeightFixed);
    background: var(--myClrLight);
}

.desk-header.fixHeader .button-grd-line {
    height: 45px;
    line-height: 45px;
}

.desk-header.fixHeader .logo {
    width: 100px;
}

.desk-header.fixHeader .header-social {
    padding-left: 25px;
    margin-left: 25px;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--headerHeight);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.navigation li {
    position: relative;
    padding: 0 25px;
    height: 100%;
    line-height: var(--headerHeight);
}

.navigation li:last-of-type {
    padding-right: 0;
}

.navigation li a {
    font-size: 16px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
    text-transform: capitalize;
}

.navigation li:hover a {
    color: #ef2168;
}

.navigation li {
    border-radius: 0;
}

.navigation li .button-grd-line {
    border-radius: 4px;
}

.navigation li .button-grd-line:before {
    background: var(--myClrDark);
    border-radius: 0;
}

.navigation li .button-grd-line:after {
    background: var(--myClrDark);
    border-radius: 0;
}

.navigation li .button-grd-line span {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background: transparent;
    color: var(--myClrLight);
}

.home-banner {
    padding-top: 0;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-banner .h-img {
    display: none;
}

.home-banner .h-img-0 {
    display: block;
}

.left-part {
    position: absolute;
    left: 0;
    top: 0;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-part img {
    max-width: 80%;
    max-height: 80%;
}

.right-part {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-part img {
    max-width: 100%;
    max-height: 100%;
}

.left-part-slide {
    width: 55%;
}

.right-part-slide {
    width: 55%;
    margin-left: 45%;
}

.relative {
    position: relative;
}

.hb-right h3 {
    color: var(--title);
}

.hb-right h3 {
    font-size: 90px;
    line-height: 1;
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
    text-transform: capitalize;
}

.hb-right h3 span {
    font-family: 'Satoshi';
    font-weight: 900;
}

.hb-right ul {
    margin: 25px 0 0;
    display: flex;
    flex-wrap: wrap;
}

.hb-right ul li {
    margin-right: 16px;
    margin-bottom: 10px;
}

.hb-right ul li a,
.hb-right ul li p {
    cursor: default;
    font-size: 24px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
}

.hb-right ul li a:after,
.hb-right ul li p:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    background: #ccc;
    border-radius: 50%;
    top: 50%;
    right: -10px;
}

.hb-right ul li a:hover,
.hb-right ul li p:hover {
    background-position-x: 100%;
}

.hb-right ul li:nth-of-type(4) a:after,
.hb-right ul li:nth-of-type(4) p:after {
    opacity: 0;
}

.hb-right ul li:last-of-type a,
.hb-right ul li:last-of-type p {
    margin-bottom: 0;
}

.hb-right ul li:last-of-type a:after,
.hb-right ul li:last-of-type p:after {
    display: none;
}

.h-img {
    text-align: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.h-client-logos {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.blue {
    color: #5857f9;
}

.h-img svg {
    height: 100%;
}

.who-we-are-box {
    position: relative;
}

.who-we-are-box .hdg1 {
    font-weight: 900;
}

.who-we-are-box .row {
    flex-direction: row-reverse;
}

.flex-c {
    display: flex;
    align-items: center;
}

.grid .container {
    padding: 0 135px;
    padding: 0 94px;
}

.h-work-up {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    position: relative;
    z-index: 9;
    background: var(--myClrLight);
}

.h-work-up {
    display: flex;
    justify-content: space-between;
    padding: 0;
    position: relative;
    z-index: 9;
    background: var(--myClrLight);
}

.home-page-work .h-work {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-page-work .salon-pay .hwork-img {
    width: 130%;
    position: relative;
}

.home-page-work .salon-pay .hwork-img img {
    position: absolute;
    left: 10px;
    bottom: -30px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.5);
}

.h-work {
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 40px;
    padding-bottom: 0;
    position: relative;
}

.h-work h6 {
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 20px;
}

.h-work:before {
    content: '';
    z-index: -1;
    width: 0;
    height: 0;
    left: 50%;
    top: -40px;
    position: absolute;
    transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    border-radius: 50%;
}

.h-work.active:before {
    left: -25%;
    top: -25%;
    width: 150%;
    height: 150%;
}

.h-work.active2:before {
    left: 50%;
    top: inherit;
    bottom: -40px;
    width: 0;
    height: 0;
}

.h-work.active3:before {
    left: -25%;
    bottom: -25%;
    width: 150%;
    height: 150%;
    top: inherit;
}

.h-work.h-work-1:before {
    background: #fb5457;
}

.h-work.h-work-1 h6 {
    color: var(--clr1);
}

.h-work.h-work-2:before {
    background: #5857f9;
}

.h-work.h-work-2 h6 {
    color: var(--clr3);
}

.h-work.h-work-2 .hwork-img img {
    object-position: top;
}

.h-work.h-work-3:before {
    background: #9c34f0;
}

.h-work.h-work-3 h6 {
    color: var(--clr2);
}

.home-page-work .h-work.h-work-1:hover:before {
    background: rgba(255, 93, 125, 0.7);
}

.home-page-work .h-work.h-work-2:hover:before {
    background: rgba(60, 60, 138, 0.7);
}

.home-page-work .h-work.h-work-3:hover:before {
    background: rgba(88, 87, 249, 0.7);
}

.h-work-pt {
    position: absolute;
    left: 50%;
    top: 0px;
}

.h-work-pt-end {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -30px;
}

.hwork-img {
    height: 350px;
    border-radius: 0px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 30px;
}

.hwork-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.home-page-work .hwork-img {
    height: 510px;
    margin-bottom: 0 !important;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}

.home-page-work .hwork-img img {
    object-fit: unset;
    width: 90%;
    height: auto;
    margin-left: 25px;
}

.h-work-btn {
    text-align: center;
    margin-top: 70px;
}

.home-page-work .h-work-cont {
    text-align: center;
}

.home-page-work .h-work-cont h4,
.home-page-work .h-work-cont h6,
.home-page-work .h-work-cont ul li,
.home-page-work .h-work-cont p {
    color: #fff;
}

.home-page-work .h-work-cont ul li:after {
    background-color: #fff;
}

.h-work-cont h4 {
    font-size: 36px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 18px;
}

.h-work-cont h4 b {
    font-weight: 900;
}

.h-work-cont h6 {
    font-size: 24px;
    line-height: 1.4;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
    margin-top: 20px;
}

.h-work-cont p {
    font-size: 18px;
    line-height: 1.4;
    color: var(--myClrDark);
    /* opacity: 0.5; */
    font-family: 'Satoshi';
    font-weight: 700;
    margin: 0;
}

.h-work-cont ul {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    margin-bottom: 80px;
}

.h-work-cont ul li {
    font-size: 16px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 400;
    margin-right: 30px;
    position: relative;
}

.h-work-cont ul li:after {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--myClrDark);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    right: -15px;
    top: 50%;
    margin-top: -2px;
}

.h-work-cont ul li:last-of-type {
    margin-right: 0;
}

.h-work-cont ul li:last-of-type:after {
    display: none;
}

.h-expertise-box {
    position: relative;
    padding: 100px 0 180px;
}

.h-expertise-box .hdg6 {
    text-align: center;
}

.h-expertise-box h4 {
    font-size: 56px;
    color: var(--myClrDark);
    line-height: 1.3;
    margin-bottom: 10px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-align: center;
    text-transform: capitalize;
}

.h-expertise-box h5 {
    font-size: 32px;
    color: var(--myClrDark);
    line-height: 1.3;
    margin-bottom: 0;
    font-family: 'Satoshi';
    font-weight: 700;
    text-align: center;
}

.h-expertise-box .row {
    flex-direction: row-reverse;
}

.h-expertise-box ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.h-expertise-box ul li {
    margin: 20px 0;
}

.h-expertise-box ul li a {
    font-size: 42px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    line-height: 1;
    text-transform: capitalize;
    cursor: default;
    padding-bottom: 3px;
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
}

.h-expertise-box ul li a:hover {
    background-position-x: 100%;
}

.h-expertise-box ul li a.red {
    color: #ff3968;
    border-bottom: 1px dashed #ff3968;
}

.h-expertise-box ul::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--myClrDark);
    opacity: 0.5;
}

.txt1 {
    font-size: 26px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
}

footer {
    padding: 50px 0;
    position: relative;
    z-index: 1;
}

footer h2 {
    font-size: 30px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
}

footer h4 {
    font-size: 18px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 10px;
}

footer ul li {
    margin-bottom: 10px;
}

footer ul li:last-of-type {
    margin: 0;
}

footer ul li a {
    font-size: 16px;
    line-height: 1;
    color: var(--myClrDark);
}

footer ul li a:hover {
    color: var(--clr1);
}

.copy {
    font-size: 14px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
    line-height: 1.6;
    margin: 20px 0 0;
}

ul.f-social {
    display: flex;
}

ul.f-social li {
    margin-right: 15px;
    margin-bottom: 0;
}

ul.f-social li:last-of-type {
    margin-right: 0;
}

.h-quote-box {
    overflow: hidden;
}

.h-quote-box .container {
    position: relative;
    z-index: 3;
}

.h-quote-box .h-cont {
    text-align: center;
    position: relative;
}

.h-quote-box h4 {
    color: var(--myClrDark);
    font-size: 52px;
    line-height: 1.2;
    margin-bottom: 50px;
    font-family: 'Satoshi';
    font-weight: 900;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.h-quote-box .button {
    text-align: center;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.h-quote-box .button span {
    display: block;
    z-index: 1;
    position: relative;
    background: var(--myClrLight);
    border-radius: 8px;
}

.h-quote-box .button-grd-line {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 20px;
    width: 270px;
    height: 60px;
}

.h-quote-box .button-grd-line:before {
    background: var(--myClrDark);
}

.h-quote-box:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to bottom, #321575 0, #8d0b93 100%);
    background: -webkit-linear-gradient(top, #321575 0%, #8d0b93 100%);
    background: -moz-linear-gradient(bottom, #321575 0, #8d0b93 100%);
    z-index: 2;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.h-quote-box.generate h4 {
    color: var(--myClrLight);
}

.h-quote-box.generate .button {
    box-shadow: none;
}

.h-quote-box.generate:before {
    height: 100%;
}

.hdg6.red {
    color: #FF3968;
}

.hdg6.pur {
    color: #5857F9;
}

.hdg6.voi {
    color: #4F2260;
}

.h-work-pagination {
    display: none;
}

.mainContainer {
    position: relative;
    z-index: 9;
}

.fadeInUp,
.fadeIn {
    opacity: 0;
}

.linkdinIcon {
    height: 17px;
}

.h-blog-box .container {
    position: relative;
    padding: 0 15px;
}

.h-blog-box h5 {
    font-size: 60px;
    color: var(--myClrDark);
    line-height: 1.1;
    margin-bottom: 10px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 40px;
}

.h-blog-box p {
    font-size: 32px;
    color: var(--myClrDark);
    line-height: 1.3;
    margin-bottom: 40px;
    font-family: 'Satoshi';
    font-weight: 500;
    max-width: 80%;
}

.h-blog-box .h-img {
    height: 100%;
    position: relative;
}

.h-blog-box .h-img img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.h-blog-box .h-img img.blogImg2 {
    top: 0;
    width: auto;
}

.h-blog-box .h-img .blogImg1 {
    right: 0;
    left: inherit;
    bottom: 0;
    padding-left: 50px;
}

@media (min-width: 1441px) {
    .h-blog-box .h-img .blogImg1 {
        padding-left: 80px;
    }
}

.h-blog-left {
    width: 56%;
}

.h-blog-right {
    width: 54%;
    position: absolute;
    top: 0;
    left: 55%;
    height: 650px;
}

.trigger {
    position: absolute;
    top: 0;
    width: 100%;
}

.trigger.triggerRef {
    top: 230px;
}

.hs-trigger-end {
    position: absolute;
    bottom: 0;
}

.hs-trigger-1 {
    position: absolute;
    top: var(--hsTrigger1);
}

.hs-trigger-1-2 {
    position: absolute;
    top: var(--hsTrigger12);
}

.hsTrigBtn {
    top: 0;
    opacity: 1;
}

.hsdot,
.hsdot-3a {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 0;
    background: var(--clr1);
    top: 0;
    opacity: 0;
}

.hsDotBox {
    width: 64px;
    height: 64px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 15px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.hsDotBox:before {
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/round.svg) no-repeat center center / contain;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    border-radius: 50%;
    -webkit-animation: rotation 5s linear infinite;
    animation: rotation 5s linear infinite;
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.hsdot-2 {
    background: var(--clr2);
}

.hsdot-3 {
    background: var(--clr3);
}

.h-founder-box {
    position: relative;
    padding: 0 0 150px;
}

.meet-founder-box {
    border: 0.5px solid #707070;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.meet-founder-box h6 {
    font-size: 72px;
    line-height: 68px;
    color: var(--title);
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
    text-transform: capitalize;
}

.founder-box {
    height: 100%;
    background: #f9f9f9;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.founder-box h6 {
    font-size: 22px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--title);
    text-transform: capitalize;
    margin-bottom: 40px;
    margin-left: 230px;
}

.founder-box p {
    font-size: 26px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
}

.rating {
    margin-bottom: 10px;
    max-width: 200px;
    width: 100%;
    filter: grayscale(1);
}

.founderTriggerStart {
    position: absolute;
    top: 150px;
}

.founderTriggerEnd {
    position: absolute;
    top: 0%;
}

.founderRefPt {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 70px;
    opacity: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.quoteTrigger {
    position: absolute;
    top: 0;
    left: 50%;
    background: red;
}

.quoteTrigger .qut {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.blogTriggerStart {
    position: absolute;
    top: 0;
}

.dotsFilter {
    position: absolute;
    height: 0;
}

.blg {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    opacity: 0;
}

.blg.blg1 {
    background: var(--clr1);
    left: 26px;
    top: 53%;
}

.blg.blg2 {
    background: var(--clr2);
    left: 101px;
    top: 50%;
    margin-top: 2px;
}

.blg.blg3 {
    background: var(--clr3);
    left: 59px;
    top: 46%;
}

.blogEndPts {
    position: absolute;
    top: 2px;
    left: 50%;
    width: 210px;
    opacity: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 1;
}

.blogEndPts .blgEndPt {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.blogEndPts .blgEndPt.blgEndPt1 {
    background: var(--clr1);
    left: 0;
}

.blogEndPts .blgEndPt.blgEndPt2 {
    background: var(--clr3);
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.blogEndPts .blgEndPt.blgEndPt3 {
    background: var(--clr2);
    right: 0;
}

.quoteTriggerUp {
    position: absolute;
    top: 60%;
}

.quoteMergeTrigger {
    position: absolute;
    top: 5%;
}

.testimonial-cont h4 {
    font-size: 34px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1;
}

.testimonial-cont p {
    font-size: 18px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
    margin: 0;
}

.testimonial-cont p span {
    font-family: 'Satoshi';
    font-weight: 900;
}

.testimonial-flex {
    display: flex;
    align-items: center;
}

.testimonial-img {
    display: none;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
}

.testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder-pic-box {
    width: 90%;
    position: relative;
    margin-top: 50px;
}

.founder-pic-box h4 {
    font-size: 40px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 20px;
}

.founder-pic-box p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
}

.founder-pic {
    position: absolute;
    bottom: 1px;
    right: 1px;
    height: 310px;
    width: 235px;
}

.founder-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    object-position: bottom right;
    opacity: 0;
}

.founder-in {
    min-height: 500px;
}

.founder-ht-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.mf-flex {
    position: relative;
    display: flex;
    align-items: center;
}

.mf-flex a {
    line-height: 1;
}

.fndrRefPt {
    opacity: 0;
    width: 70px;
    display: inline-block;
    position: relative;
    align-items: center;
    height: 14px;
    margin-left: 20px;
}

.fndr {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.fndr.fndr1 {
    background: var(--clr1);
    left: 0;
}

.fndr.fndr2 {
    background: var(--clr2);
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.fndr.fndr3 {
    background: var(--clr3);
    right: 0;
}

#whoWeAreCanvas,
#whoWeAreCanvasDark {
    max-width: 100%;
    margin: 0 auto;
}

.whoWeAreImg {
    max-width: 786px;
    margin: 0 auto;
    position: relative;
    margin: 10px auto 100px;
    height: 291px;
}

.whoWeAreImg .wwa {
    position: absolute;
    width: var(--wwaWidth);
    height: var(--wwaWidth);
    border-radius: 50%;
    opacity: 0;
}

.whoWeAreImg .wwa.wwa1 {
    top: 110px;
    left: 28px;
    background: var(--clr1);
}

.whoWeAreImg .wwa.wwa2 {
    top: 109px;
    right: 24px;
    background: var(--clr2);
}

.whoWeAreImg .wwa.wwa3 {
    top: 71px;
    left: calc(50% - 4px);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: var(--wwaWidth2);
    height: var(--wwaWidth2);
    background: var(--clr3);
}

.wwaRef {
    position: absolute;
    width: var(--wwaWidth);
    height: var(--wwaWidth);
    border-radius: 50%;
    opacity: 0;
    bottom: 136px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.wwaRef.wwaRef1 {
    margin-left: -335px;
    background: var(--clr1);
}

.wwaRef.wwaRef2 {
    margin-left: 335px;
    background: var(--clr2);
}

.wwaRef.wwaRef3 {
    left: calc(50% - 4px);
    width: var(--wwaWidth2);
    height: var(--wwaWidth2);
    background: var(--clr3);
}

.exp-view-more {
    text-align: center;
}

.expertiseImg {
    max-width: 786px;
    margin: 100px auto 100px;
    position: relative;
    height: 367px;
}

.expertiseImg .exp {
    position: absolute;
    width: var(--expWidth);
    height: var(--expWidth);
    border-radius: 50%;
    opacity: 0;
}

.expertiseImg .exp.exp1 {
    top: 25px;
    left: 244px;
    background: var(--clr1);
}

.expertiseImg .exp.exp2 {
    top: 25px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background: var(--clr2);
}

.expertiseImg .exp.exp3 {
    top: 25px;
    right: 250px;
    background: var(--clr3);
}

.dots {
    position: absolute;
    top: var(--dots);
    left: 50%;
    margin-left: -310px;
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 0;
}

.dot1 {
    background: var(--clr1);
    top: 48vh;
    left: 36%;
}

.dot2 {
    background: var(--clr2);
}

.dot3 {
    background: var(--clr3);
    top: 48vh;
    left: 36%;
}

.dot4,
.dot5,
.dot6 {
    opacity: 0;
    height: 65px;
    width: 65px;
    margin-left: 0;
    background: var(--clr3);
}

.dot4 {
    background: var(--clr1);
}

.dot5 {
    background: var(--clr2);
}

.triggerWorkStart {
    position: absolute;
    left: 0;
    bottom: 100px;
}

.h-work-hdn-box {
    position: relative;
    padding: 100px 0 50px;
}

.h-work-hdn-box .hdg1 {
    margin-bottom: 0;
}

.h-work-box {
    padding-top: 0;
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 0;
}

.h-work-box .container {
    position: relative;
}

.home-page-work.h-work-box {
    padding-top: 60px;
    max-width: calc(100% - 100px);
}

.work-swiper-container {
    width: 100%;
}

.workTriggerStart {
    position: absolute;
    top: 50%;
}

.workTriggerEnd {
    position: absolute;
    top: 50%;
    top: 0;
}

.h-work-exp-trigger {
    position: absolute;
    top: 50%;
}

.dotBox {
    position: absolute;
    top: 30vh;
    left: 50%;
    margin-left: -370px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    opacity: 0.3;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.dotBox li {
    position: absolute;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    left: 0%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.dotBox li:nth-of-type(1) {
    background: var(--clr2);
    left: 4%;
    top: 4%;
}

.dotBox li:nth-of-type(2) {
    background: var(--clr3);
    left: 24%;
    top: 24%;
}

.dotBox li:nth-of-type(3) {
    background: var(--clr1);
    left: 44%;
    top: 13%;
}

.dotBox li:nth-of-type(4) {
    background: var(--clr1);
    left: 74%;
    top: 34%;
}

.dotBox li:nth-of-type(5) {
    background: var(--clr2);
    left: 84%;
    top: 14%;
}

.dotBox li:nth-of-type(6) {
    background: var(--clr2);
    left: 14%;
    top: 84%;
}

.dotBox li:nth-of-type(7) {
    background: var(--clr1);
    left: 34%;
    top: 54%;
}

.dotBox li:nth-of-type(8) {
    background: var(--clr1);
    left: 54%;
    top: 84%;
}

.dotBox li:nth-of-type(9) {
    background: var(--clr2);
    left: 64%;
    top: 54%;
}

.dotBox li:nth-of-type(10) {
    background: var(--clr3);
    left: 84%;
    top: 84%;
}

/* Mouse Scroll Starts */
.scroll_Down_box {
    display: none;
    position: fixed;
    width: 2px;
    height: 100px;
    left: 50%;
    bottom: 20px;
    margin-left: -1px;
    z-index: 99;
    opacity: 1;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}

.scroll_Down_box span {
    position: absolute;
    left: 1px;
    top: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    opacity: 0.5;
}

.scroll_Down_box.remove {
    opacity: 0;
}

.scroll_Down {
    position: absolute;
    width: 2px;
    height: calc(100% - 30px);
    left: 0;
    top: 30px;
    overflow: hidden;
}

.scroll_Down img {
    animation: scrollDown 1.25s ease-in-out infinite;
    -webkit-animation: scrollDown 1.25s ease-in-out infinite;
}

@-webkit-keyframes scrollDown {
    0% {
        -webkit-transform: translate(0, -40px);
        transform: translate(0, -40px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 40px);
        transform: translate(0, 40px);
        opacity: 0;
    }
}

@keyframes scrollDown {
    0% {
        -webkit-transform: translate(0, -40px);
        transform: translate(0, -40px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 40px);
        transform: translate(0, 40px);
        opacity: 0;
    }
}

/* Mouse Scroll Ends */
.lionAnimTriggerStart {
    position: absolute;
    top: 90%;
}

.lionAnimTriggerEnd {
    position: absolute;
    bottom: 10%;
}

.hs-box {
    padding: 150px 0;
    position: relative;
}

.hs-box .container {
    height: 100%;
    position: relative;
}

.hs-service-in {
    position: sticky;
    position: -webkit-sticky;
    top: var(--hsHeadingTop);
}

.hs-service {
    height: var(--service2Height);
    position: relative;
}

.hs-service h2,
.hs-service h4 {
    font-size: 72px;
    color: var(--myClrDark);
    line-height: 1.3;
    margin-bottom: 0;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    position: relative;
    padding: 20px 0;
    padding-left: 120px;
}

.hs-service h2.hsTrigBtn,
.hs-service h4.hsTrigBtn {
    position: absolute;
}

.hs-service h2.hsTrigBtn:nth-last-of-type(1),
.hs-service h4.hsTrigBtn:nth-last-of-type(1) {
    top: 240px;
}

.hs-service h2.hsTrigBtn:nth-last-of-type(2),
.hs-service h4.hsTrigBtn:nth-last-of-type(2) {
    top: 120px;
}

.hs-service h2 b,
.hs-service h4 b {
    font-weight: 900;
    text-transform: capitalize;
}

.hs-service ul {
    padding-left: 120px;
    position: sticky;
    position: -webkit-sticky;
    top: var(--hsHeadingTop);
}

.hs-service ul li {
    margin-bottom: 15px;
    opacity: 0;
    margin-left: -50px;
}

.hs-service ul li a,
.hs-service ul li p {
    color: var(--myClrDark);
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 700;
    padding-bottom: 4px;
    text-transform: capitalize;
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
    cursor: default;
}

.hs-service ul li a:hover,
.hs-service ul li p:hover {
    background-position-x: 100%;
}

.hs-service-1 {
    height: var(--service1Height);
}

.hs-img-box-up {
    position: absolute;
    top: 0;
    right: 15px;
    height: 100%;
    width: calc(40% - 15px);
}

.hs-img-box {
    position: sticky;
    position: -webkit-sticky;
    top: calc(50% - var(--hs-img-box)/2);
    height: var(--hs-img-box);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-line {
    position: absolute;
    width: 0;
    height: 0;
    border: 1px solid var(--myClrDark);
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.hs-ellipse {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/ellipse.png) no-repeat center center / contain;
    border-radius: 50%;
    top: 30%;
    left: 70%;
    opacity: 0;
    animation: ellipseRotate 10s linear infinite;
}

@keyframes ellipseRotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

.hsImgActive01 .hs-line {
    animation: hsImgActiveAnim01 0.5s ease-in-out forwards;
}

@keyframes hsImgActiveAnim01 {
    0% {
        opacity: 0;
        margin-top: 0px;
        width: 0%;
        height: 0%;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        opacity: 1;
        margin-top: -4px;
        width: 65%;
        height: 84%;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

.hsImgActive12 .hs-line {
    opacity: 1;
    animation: hsImgActiveAnim12 1s ease-in-out forwards;
}

@keyframes hsImgActiveAnim12 {
    0% {
        margin-top: -4px;
        width: 65%;
        height: 84%;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    33% {
        margin-top: -5px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    66% {
        margin-top: -5px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    100% {
        margin-top: -5px;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
        width: 50%;
        height: 72%;
    }
}

.hsImgActive23 .hs-line {
    opacity: 1;
    animation: hsImgActiveAnim23 1s ease-in-out forwards;
}

@keyframes hsImgActiveAnim23 {
    0% {
        margin-top: -6px;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
        width: 50%;
        height: 72%;
    }

    33% {
        margin-top: -10px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    66% {
        margin-top: -15px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg);
    }

    100% {
        margin-top: -15px;
        width: 72%;
        height: 86%;
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg);
    }
}

.hsImgActive32 .hs-line {
    opacity: 1;
    animation: hsImgActiveAnim32 1s ease-in-out forwards;
}

@keyframes hsImgActiveAnim32 {
    0% {
        margin-top: -15px;
        width: 72%;
        height: 86%;
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg);
    }

    33% {
        margin-top: -10px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg);
    }

    66% {
        margin-top: -5px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    100% {
        margin-top: -5px;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
        width: 50%;
        height: 72%;
    }
}

.hsImgActive21 .hs-line {
    opacity: 1;
    animation: hsImgActiveAnim21 1s ease-in-out forwards;
}

@keyframes hsImgActiveAnim21 {
    0% {
        margin-top: -6px;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
        width: 50%;
        height: 72%;
    }

    33% {
        margin-top: -5px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    66% {
        margin-top: -4px;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        margin-top: -4px;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
        width: 65%;
        height: 84%;
    }
}

.hsImgActive10 .hs-line {
    opacity: 0;
    animation: hsImgActiveAnim10 0.5s ease-in-out forwards;
}

@keyframes hsImgActiveAnim10 {
    0% {
        opacity: 1;
        margin-top: -4px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 65%;
        height: 84%;
    }

    100% {
        opacity: 0;
        margin-top: 0px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 0%;
        height: 0%;
    }
}

.hsImgActive01 .hs-ellipse,
.hsImgActive21 .hs-ellipse {
    opacity: 1;
    width: var(--hs-ellipse-width-1);
    height: var(--hs-ellipse-width-1);
    margin-left: calc(-1 * var(--hs-ellipse-width-1) / 2);
    margin-top: calc(-1 * var(--hs-ellipse-width-1) / 2);
    transition-delay: .2s;
    -webkit-transition-delay: .2s;
}

.hsImgActive12 .hs-ellipse,
.hsImgActive32 .hs-ellipse {
    opacity: 1;
    width: var(--hs-ellipse-width-2);
    height: var(--hs-ellipse-width-2);
    margin-left: calc(-1 * var(--hs-ellipse-width-2) / 2);
    margin-top: calc(-1 * var(--hs-ellipse-width-2) / 2);
}

.hsImgActive23 .hs-ellipse {
    opacity: 1;
    width: var(--hs-ellipse-width-3);
    height: var(--hs-ellipse-width-3);
    margin-left: calc(-1 * var(--hs-ellipse-width-3) / 2);
    margin-top: calc(-1 * var(--hs-ellipse-width-3) / 2);
}

.hsImgActive10 .hs-ellipse {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.hs-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.hs-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hs-img>* {
    width: 100%;
    height: 100%;
}

.tlServAnimContainer {
    height: var(--tlServAnimContainer);
    display: flex;
}

.tlServAnimLeft {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tlServAnimLeft .button1 {
    margin: 20px;
}

.tlServAnimRight {
    width: 50%;
    height: 100%;
}

.tlServAnimRight .hs-1-img {
    opacity: 1;
}

#mapCanvas,
#mapCanvasDark {
    width: 100%;
    height: 100%;
}

.hs-img-mob {
    display: none;
}

.client-logos-home {
    position: relative;
    top: -110px;
    margin: 0 -74px;
    opacity: 0.4;
    text-align: center;
}

.client-logo ul {
    /* opacity: 0.6; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.client-logo ul li {
    width: 16%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo ul li img {
    max-width: 100%;
}

.blogImgMob {
    display: none;
}

.mob-quote-btn {
    display: none;
    position: fixed;
    bottom: -50px;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    width: 100%;
    max-width: 300px;
    z-index: 999;
    left: 50%;
    margin-left: -150px;
    border: 0;
    background-color: var(--myClrDark);
    color: var(--myClrLight);
    font-size: 16px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    height: 50px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(140, 99, 241, 0.3);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.mob-quote-btn.in {
    bottom: 30px;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.footer-col-2 span {
    display: none;
}

.mobile-view {
    display: none;
}

.copyMob,
.menu-icon,
.client-logo-mob,
.workMobDots,
.br-800,
.br-460 {
    display: none;
}

.hbr-br-in {
    display: none;
}

.mob-menu {
    display: none;
    position: fixed;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    background: var(--myClrLight);
    padding: 20px;
    z-index: 2;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.mob-menu h4 {
    font-size: 18px;
    color: red;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    display: block;
    margin: 5px 0px;
}

.mob-menu ul {
    padding-top: 20px;
}

.mob-menu ul li {
    margin-bottom: 15px;
    padding: 0;
}

.mob-menu ul li a {
    font-size: 24px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    display: block;
}

.mob-menu.in {
    overflow-y: auto;
    right: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.mobdrop-box .mobMenuTrigger {
    display: inline-block;
}

.mob-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--myClrLight);
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.mob-overlay.in {
    opacity: 0.9;
    visibility: visible;
}

.mob-menu-close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 20px;
}

.mob-menu-close span:before {
    content: '';
    width: 1px;
    height: 100%;
    background: var(--myClrDark);
    display: block;
    -webkit-transform: translate(15px, 0) rotate(45deg);
    transform: translate(15px, 0) rotate(45deg);
}

.mob-menu-close span:after {
    content: '';
    width: 1px;
    height: 100%;
    background: var(--myClrDark);
    display: block;
    -webkit-transform: translate(15px, -30px) rotate(-45deg);
    transform: translate(15px, -30px) rotate(-45deg);
}

.about-banner {
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.about-banner .hdg1 {
    font-size: 42px;
    line-height: 1.5;
    margin-bottom: 0;
}

.about-banner>img {
    position: absolute;
}

.about-banner .ab-ban-1 {
    left: 0;
    top: 100px;
    display: none;
}

.about-banner .ab-ban-2 {
    right: 0;
    bottom: 0;
}

.about-banner .ab-ban-3 {
    right: 0;
    top: 100px;
    display: none;
}

.about-banner .ab-ban-4 {
    left: 0;
    bottom: 0;
}

.about-banner--content {
    position: relative;
    top: -70px;
}

.about-banner--content h4,
.about-banner--content h6 {
    position: relative;
}

.about-history .container {
    text-align: center;
}

.about-vision .section-padding {
    padding-top: 0;
}

.about-vision .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.about-vision--left {
    width: 320px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    padding-top: 100px;
}

.about-vision--left ul {
    opacity: 1;
}

.about-vision--left ul li {
    margin-bottom: 25px;
}

.about-vision--left ul li a {
    font-size: 48px;
    color: rgba(1, 23, 54, 0.3);
    line-height: 1;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
}

.about-vision--left ul li a.vision-link-1.active {
    color: var(--clr1);
}

.about-vision--left ul li a.vision-link-2.active {
    color: var(--clr2);
}

.about-vision--left ul li a.vision-link-3.active {
    color: var(--clr3);
}

.about-vision--right {
    max-width: 630px;
    flex: 1;
}

.ab-vm-cont {
    padding-top: 100px;
    padding-bottom: 200px;
    min-height: 100vh;
}

.ab-vm-cont#ab-vm-cont-3 {
    min-height: 50vh;
}

.ab-vm-cont h3 {
    display: none;
}

.ab-vm-cont h4 {
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 48px;
    line-height: 1.3;
    margin-bottom: 13px;
}

.ab-vm-cont p {
    font-size: 24px;
    line-height: 36px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
}

#ab-vm-cont-3 {
    padding-bottom: 100px;
}

.ab-vm-img {
    margin: 140px 0 0;
}

.about-founder {
    padding: 0 0 50px 0;
}

.abt-founder-cont {
    padding-top: 100px;
    position: relative;
}

.abt-founder-cont-in {
    padding: 50px;
    padding-right: 40%;
    background: transparent;
    border: 1px solid #000;
    border-radius: 7px;
}

.abt-founder-cont-in p {
    font-size: 24px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
    position: relative;
}

.abt-founder-cont-in p:before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/left-quote.svg) no-repeat center center / contain;
    top: -10px;
    left: 0;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

.abt-founder-cont-in .read-linkdin {
    font-size: 14px;
    color: #ff3968;
    font-family: 'Satoshi';
    font-weight: 500;
    margin: 5px 0 80px;
    display: block;
}

.abt-dounder-img {
    position: absolute;
    right: 0;
    width: 37%;
    bottom: 0;
    border-bottom-right-radius: 7px;
    overflow: hidden;
}

.abt-dounder-img img {
    max-width: inherit;
    width: 100%;
}

.abt-fnd-detail {
    opacity: 1;
}

.abt-fnd-detail h5 {
    font-size: 24px;
    line-height: 36px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
}

.abt-fnd-detail h4 {
    font-size: 18px;
    line-height: 1.6;
    color: #000;
    font-family: 'Satoshi';
    font-weight: 500;
}

.abt-fnd-detail a {
    opacity: 1;
}

.history-swiper-container {
    margin: 50px 0 0;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.history-swiper-container .swiper-slide {
    display: flex;
    align-items: center;
}

.history-swiper-container .history-cont {
    width: 100%;
    display: flex;
    align-items: center;
}

.history-swiper-container h3 {
    font-size: 36px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
    position: absolute;
    left: 35%;
    top: 15px;
    margin: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.history-swiper-container h4 {
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
    border-left: 1px solid #011736;
    padding: 10px 0 20px 30px;
    margin: 0;
    position: absolute;
    left: 35%;
    top: 50%;
    margin-left: 0px;
    width: 66%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.history-handler {
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-arrow {
    outline: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.h-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.h-pagination {
    margin: 0 40px;
    position: relative;
}

.h-pagination span {
    font-size: 16px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-right: 100px;
    width: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.h-pagination span:last-of-type {
    margin-right: 0;
}

.h-pagination:after {
    content: '';
    position: absolute;
    left: 50px;
    top: 50%;
    border-bottom: 1px solid var(--myClrDark);
    width: calc(100% - 100px);
}

.hist-trigger {
    position: absolute;
    left: 0%;
}

.history-cont {
    position: relative;
}

.history-cont:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--myClrDark);
}

.hist-det-hdn {
    width: 43%;
    position: relative;
}

.hist-det-box {
    background: var(--myClrLight);
    z-index: 9;
    position: relative;
    width: 45%;
    border: 1px solid var(--myClrDark);
    padding: 40px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.hist-det-box p {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
    margin: 0;
}

.hist-det-box ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hist-det-box ul li {
    height: 50px;
    text-align: center;
    flex: 1;
    min-width: 33%;
    margin-bottom: 10px;
}

.hist-det-box ul li img {
    height: 100%;
    object-fit: contain;
}

.hist-det-box-in {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.abtBannerTrigger {
    position: absolute;
    left: 0;
    top: -10%;
}

.mob-quote-btn-trigger {
    position: absolute;
    left: 0;
    top: 200vh;
}

.founder-pic-box .button1 {
    line-height: 1;
    margin-top: 20px;
    height: auto;
}

h1 {
    position: fixed;
    z-index: -99999999;
    opacity: 0;
}

.br-480 {
    display: none;
}

.team-container {
    height: 100vh;
    padding-top: var(--headerHeight);
}

.team-container .container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-heading {
    flex: 1;
    display: flex;
    align-items: center;
}

.team-section {
    margin-top: 100px;
}

.team-heading-in {
    width: 100%;
}

.hdrHeight {
    height: var(--headerHeight);
}

.serv-det-banner .row {
    height: 100vh;
    align-items: center;
}

.serv-back {
    margin-bottom: 40px;
}

.serv-back a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    border-radius: 50%;
}

.serv-back a img {
    max-width: 60%;
}

.serv-ban-left {
    width: 50%;
    min-height: 570px;
    padding: 0 15px;
}

.serv-ban-right {
    width: 50%;
    position: relative;
    left: 55px;
    padding: 0 15px;
}

.serv-ban-right-img {
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    position: relative;
}

.serv-ban-right-img img {
    max-width: 60%;
    max-height: 60%;
}

.serv-ban-right-ellipse {
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/ellipse.png) no-repeat center center / contain;
    animation: ellipseRotate 10s linear infinite;
    position: absolute;
    width: 100%;
    height: 100%;
}

.serv-dot-ref-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.serv-dot-ref-1 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.serv-dot-ref-2 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.service-container-1 .serv-dot-ref-1,
.service-container-1 .serv-dot-ref-2 {
    background: var(--clr1);
}

.service-container-1 .hdg6 {
    color: var(--clr1);
}

.service-container-1 .blog-read a {
    color: var(--clr1);
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots1.svg) repeat-x bottom;
}

.service-container-1 .blog-read a:hover {
    background-position: 80% 100%;
}

.service-container-1 .serv-back a {
    background: rgba(255, 93, 125, 0.1);
}

.service-container-2 .serv-dot-ref-1,
.service-container-2 .serv-dot-ref-2 {
    background: var(--clr2);
}

.service-container-2 .hdg6 {
    color: var(--clr2);
}

.service-container-2 .blog-read a {
    color: var(--clr2);
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots2.svg) repeat-x bottom;
}

.service-container-2 .blog-read a:hover {
    background-position: 80% 100%;
}

.service-container-2 .serv-back a {
    background: rgba(88, 87, 249, 0.1);
}

.service-container-3 .serv-dot-ref-1,
.service-container-3 .serv-dot-ref-2 {
    background: var(--clr3);
}

.service-container-3 .hdg6 {
    color: var(--clr3);
}

.service-container-3 .blog-read a {
    color: var(--clr3);
    background: transparent url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/dots3.svg) repeat-x bottom;
}

.service-container-3 .blog-read a:hover {
    background-position: 80% 100%;
}

.service-container-3 .serv-back a {
    background: rgba(89, 37, 125, 0.1);
}

.serv-detail-section .container {
    position: relative;
}

.serv-detail-section p {
    font-size: 24px;
    line-height: 36px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
    margin-bottom: 70px;
}

.sectDetRefHeight {
    height: 50vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
    opacity: 0;
}

.sectDetRefElement {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 0;
    top: -110px;
    z-index: -9999;
    opacity: 0;
    background: red;
}

.serv-back-mob {
    display: none;
}

.serv-detail-trigger-pt {
    position: absolute;
    top: 100vh;
}

.mobMenuBox {
    display: none;
}

.quote-pop-container {
    position: fixed;
    top: 120%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 9;
    background: var(--myClrLight);
    padding: 70px;
    max-width: 900px;
    width: 90%;
    z-index: 9999;
    text-align: center;
}

.quote-pop-container h4 {
    color: #ff3968;
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.quote-pop-container h3 {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 20px;
}

.quote-pop-layer {
    background: var(--myClrDark);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.q-radio-box input {
    width: 0;
    position: absolute;
    opacity: 0;
}

.q-radio-box label {
    color: var(--myClrDark);
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    position: relative;
    cursor: pointer;
    text-align: center;
    padding: 0px 30px;
    border: 1px solid #ddd;
    text-transform: capitalize;
    width: 100%;
    max-width: 350px;
    margin-bottom: 10px;
    line-height: 50px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.q-radio-box label:hover {
    color: #FF3968;
    border: 1px solid #FF3968;
}

.q-radio-box input:checked~label {
    color: #FF3968;
    border: 1px solid #FF3968;
}

.qt-box {
    display: none;
}

.qt-box-1 {
    display: block;
}

.quote-back {
    position: absolute;
    left: 20px;
    top: 20px;
    cursor: pointer;
    width: 40px;
    display: none;
}

.quote-close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.quote-close:hover {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.qt-box-4,
.qt-box-3 {
    text-align: left;
    max-width: 70%;
    margin: 0 auto;
}

.qt-box-4 .button-grd-line,
.qt-box-3 .button-grd-line {
    margin: 0 auto;
    display: block;
}

.responseBox {
    top: 0;
    opacity: 0;
    position: relative;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.responseBox.in {
    top: -50px;
    opacity: 1;
}

.qt-box-5,
.responseBox {
    text-align: center;
}

.qt-box-5 h3,
.responseBox h3 {
    color: #FF3968;
    font-size: 36px;
    font-family: 'Satoshi';
    font-weight: 900;
}

.qt-box-5 h4,
.responseBox h4 {
    color: var(--myClrDark);
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: none;
    margin: 0;
}

.qt-box-5 p,
.responseBox p {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
}

.beta-pop {
    display: none;
}

.mob-menu-flex {
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.form-input {
    resize: none;
}

.projDescBox {
    text-align: center;
}

.s-we-offer {
    padding-top: 0;
}

.call-us.menu-call-us {
    display: block;
    width: 100%;
    margin: 0;
    float: none;
}

.call-us.menu-call-us ul {
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
}

.call-us.menu-call-us ul li {
    text-align: left;
    margin-bottom: 10px;
}

.call-us.menu-call-us ul li a {
    font-size: 16px;
    text-transform: initial;
}

.call-us.menu-call-us ul li a strong {
    display: block;
    margin-bottom: 10px;
}

.call-us.menu-call-us ul li.mail a {
    font-family: 'Satoshi';
    font-weight: 500;
}

div#responseContainer {
    min-height: 91px;
    position: relative;
    top: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    opacity: 0;
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
}

div#responseContainer.in {
    top: -50px;
    opacity: 1;
}

div#responseContainer.in~.qt-final-btn {
    top: -50px;
    opacity: 1;
}

.qt-final-btn {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    opacity: 0;
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    top: 0;
    margin-top: 30px;
    font-family: 'Satoshi';
    font-weight: 900;
}

div#responseLoader,
div#contResponseLoader {
    height: 220px;
}

div#responseLoader svg,
div#contResponseLoader svg {
    width: 100%;
    height: 100%;
}

.responseImg {
    display: none;
    height: 220px;
}

.responseImg svg {
    width: 100%;
    height: 100%;
}

.serv-ban-cont .servHdn {
    margin-bottom: 25px;
    font-size: 62px;
    padding: 0 0;
    line-height: 67px;
    text-transform: capitalize;
}

#readMore {
    cursor: pointer;
}

.beta-pop-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--myClrLight);
    z-index: 999;
    opacity: 0.8;
    display: none;
}

.caseStudyBigContainerMob {
    display: none;
}

.caseMarg {
    padding-top: var(--headerHeight);
    text-align: center;
}

.s-offer-list-tech {
    margin-bottom: 50px;
}

.slink,
.slink:hover {
    color: inherit;
}

.blog-drop {
    cursor: default;
}

.blog-drop ul {
    display: flex;
    position: relative;
}

.blog-drop ul li {
    line-height: 30px;
    padding: 0 15px;
}

.blog-drop ul li.blog-srch {
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 0;
    padding: 0;
    top: 50%;
    margin-top: -15px;
}

.navigation .blog-drop ul li a {
    color: var(--myClrDark);
}

.navigation .blog-drop ul li a:hover {
    color: var(--clr1);
}

.fixHeader .navigation .blog-drop li {
    line-height: 30px;
}

.darkAnim {
    display: none;
}

.lightAnim {
    display: block;
}

[data-theme='dark'] .founder-box {
    background: #282C4B;
}

[data-theme='dark'] .h-quote-box.generate h4 {
    color: var(--myClrDark);
}

[data-theme='dark'] .h-work.h-work-1 h6,
[data-theme='dark'] .h-work.h-work-2 h6,
[data-theme='dark'] .h-work.h-work-3 h6,
[data-theme='dark'] .h-quote-box.generate h4,
[data-theme='dark'] .h-work-cont h4,
[data-theme='dark'] .h-work-cont p,
[data-theme='dark'] .h-work-cont ul li,
[data-theme='dark'] footer h4 {
    color: #fff;
}

[data-theme='dark'] .dropbox-cont h6,
[data-theme='dark'] .dropbox-cont p {
    color: #000;
}

[data-theme='dark'] .mob-quote-btn {
    background: #fff;
}

[data-theme='dark'] .hsDotBox:before {
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/round-dark.svg) no-repeat center center / contain;
}

[data-theme='dark'] .h-work.h-work-1:before {
    background: #fb5457;
}

[data-theme='dark'] .h-work.h-work-2:before {
    background: #9c34f0;
}

[data-theme='dark'] .h-work.h-work-3:before {
    background: #5857f9;
}

[data-theme='dark'] .darkAnim {
    display: block;
}

[data-theme='dark'] .lightAnim {
    display: none;
}

[data-theme='dark'] .hs-ellipse,
[data-theme='dark'] .hs-ellipse-mob {
    background: url(https://leo9design.blr1.cdn.digitaloceanspaces.com/img/ellipse-dark.png) no-repeat center center / contain;
}

[data-theme='dark'] .h-work-tab-nav ul li {
    color: #adb4ec;
}

[data-theme='dark'] .light-theme {
    display: block;
}

.themeModeLayer {
    position: fixed;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #ccc;
    z-index: 99999;
}

.themeModeLayer.active {
    animation: themeModeLayerKf 1s linear;
}

@keyframes themeModeLayerKf {
    0% {
        top: 0;
        height: 0;
    }

    30% {
        top: 0;
        height: 100%;
    }

    70% {
        top: 0;
        height: 100%;
    }

    100% {
        top: 100%;
        height: 0;
    }
}

/* Dark mode */
.darkModeComponent {
    z-index: 99999;
    position: fixed;
    top: 120%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    max-width: 900px;
    width: 90%;
    text-align: center;
    height: 100px;
}

.darkModeComponent h3 {
    color: #ff3968;
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.darkModeComponent h4 {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
    position: absolute;
    top: 60px;
    left: 56%;
    opacity: 0;
}

.dark-mode-layer {
    background: var(--myClrDark);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.dark-mode-close {
    position: relative;
    top: 50px;
    opacity: 0;
    visibility: hidden;
}

.dm-prevent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

:root {
    --bg-planet-bright: #F2C94C;
    --bg-planet-shadow: #828894;
    --bg-planet-lightshadow: #D7D7D820;
    --dot-size: 0.25rem;
}

.homeHdr .navigation li.darkLi {
    display: block;
}

.navigation li.darkLi {
    padding: 0;
    display: flex;
    align-items: center;
    display: none;
}

.dayNight {
    cursor: pointer;
}

.dayNight input {
    display: none;
}

.dayNight input+div {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    position: relative;
    box-shadow: inset 32px -32px 0 0 #ffffff;
    -webkit-transform: scale(0.5) rotate(0deg);
    transform: scale(0.5) rotate(0deg);
    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
}

.dayNight input+div:before {
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    border: 6px solid #000;
    transition: background .3s ease .1s;
}

.dayNight input+div:after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin: -1px 0 0 -3px;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 -23px 0 #000000, 0 23px 0 #000000, 23px 0 0 #000000, -23px 0 0 #000000, 15px 15px 0 #000000, -15px 15px 0 #000000, 15px -15px 0 #000000, -15px -15px 0 #000000;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    transition: transform .5s ease .15s;
}

.dayNight input:checked+div {
    box-shadow: inset 16px -16px 0 0 #ffffff;
    -webkit-transform: scale(1) rotate(-2deg);
    transform: scale(1) rotate(-2deg);
    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
}

.dayNight input:checked+div:before {
    border: 3px solid transparent;
    transition: background .3s ease;
}

.dayNight input:checked+div:after {
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all .3s ease;
}

.switch {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    position: relative;
    top: -100px;
    padding: 22px 10px;
    margin: 0;
    transition: transform 0.2s ease;
}

.switch h4 {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
    position: absolute;
    top: 60px;
    left: 80px;
    opacity: 0;
}

.fixHeader .switch {
    -webkit-transform: scale(0.6, 0.6);
    transform: scale(0.6, 0.6);
    padding: 12px 10px;
}

.darkArrow {
    position: absolute;
    top: 63px;
    left: 35px;
    opacity: 0;
}

/* // Dark mode */
#lionCanvas,
#lionCanvasDark {
    position: relative;
}

#lionCanvas svg,
#lionCanvasDark svg {
    transform: unset !important;
}

.initDot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
}

.initDotMain {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 4000px;
    height: 4000px;
    background: var(--clr3);
    margin-top: -2000px;
    margin-left: -2000px;
    z-index: 9999;
    border-radius: 50%;
}

.scrollTop {
    position: fixed;
    left: 50%;
    margin-left: 470px;
    bottom: 0;
    width: 50px;
    height: 50px;
    z-index: 99;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.scrollTop:hover {
    margin-bottom: 5px;
}

.scrollTop img {
    width: 100%;
}

.scrollTop.in {
    bottom: 50px;
    opacity: 1;
    visibility: visible;
}

.stopSecAbs {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}

.stopSecWork {
    top: 110px;
}

.stopSecExpertise {
    top: 110px;
}

.stopSecBlog {
    top: 110px;
}

.darkMobileBox {
    display: none;
}

.leo9-counters {
    margin-bottom: 130px;
}

.leo9-counters ul {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.leo9-counters ul li {
    transition: all 0.2s ease-in-out;
    font-size: 22px;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 500;
    padding: 0 25px;
    opacity: 0.5;
    background: var(--myClrLight);
    z-index: 1;
    display: flex;
    align-items: center;
}

.leo9-counters ul li span {
    font-family: 'Satoshi';
    font-weight: 900;
}

.leo9-counters ul li>* {
    margin: 0 6px;
}

.sw480 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.hd480 {
    display: none;
}

.conHdnSpan {
    color: #999;
}

.h-work-tab-nav {
    opacity: 1;
}

.h-work-tab-nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h-work-tab-nav ul li {
    font-size: 36px;
    color: #B9B9B9;
    line-height: 80px;
    font-family: 'Satoshi';
    font-weight: 900;
    position: relative;
    text-align: center;
    width: calc(33.333333% - 10px);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.h-work-tab-nav ul li:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px dashed #b4b4b4;
}

.h-work-tab-nav ul li:after {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.h-work-tab-nav ul li.hw1:hover,
.h-work-tab-nav ul li.hw1.active {
    color: var(--clr1);
}

.h-work-tab-nav ul li.hw1:hover:after,
.h-work-tab-nav ul li.hw1.active:after {
    border-color: var(--clr1);
}

.h-work-tab-nav ul li.hw2:hover,
.h-work-tab-nav ul li.hw2.active {
    color: var(--clr2);
}

.h-work-tab-nav ul li.hw2:hover:after,
.h-work-tab-nav ul li.hw2.active:after {
    border-color: var(--clr2);
}

.h-work-tab-nav ul li.hw3:hover,
.h-work-tab-nav ul li.hw3.active {
    color: var(--clr3);
}

.h-work-tab-nav ul li.hw3:hover:after,
.h-work-tab-nav ul li.hw3.active:after {
    border-color: var(--clr3);
}

.h-work-tab-nav ul li span {
    opacity: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: baseline;
    background: var(--clr1);
    border-radius: 50%;
    margin-right: 5px;
}

.h-work-tab-nav ul li.active {
    opacity: 1;
}

.h-work-tab-content {
    height: 510px;
    position: relative;
}

.h-work-tab-content-in {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: none;
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
}

.h-work-tab-content-in-1 {
    display: block;
}

.hw-img {
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.hw-cont {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.hw-cont h3 {
    font-size: 36px;
    color: var(--myClrDark);
    line-height: 1.3;
    font-family: 'Satoshi';
    font-weight: 900;
    margin: 0;
}

.hw-cont h5 {
    font-size: 18px;
    color: var(--myClrDark);
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 900;
    flex: 1;
    min-width: 0;
    padding: 0 50px;
    margin: 0;
}

.hw-cont p {
    font-size: 16px;
    color: var(--myClrDark);
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 700;
    margin: 0;
}

.hw-cont p span {
    width: 4px;
    height: 4px;
    background: var(--myClrDark);
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px;
    position: relative;
    top: -3px;
}

.nav-tabs>li>a {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 25px;
    position: relative;
    background: #f3f2f6;
    border: 1px solid rgba(187, 187, 187, 0.27);
    color: #000;
    font-size: 16px;
    padding: 7px 22px;
    margin: 5px 15px 20px 0;
    text-transform: capitalize;
    white-space: nowrap;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border: 1px solid #000;
    background-color: #000 !important;
    color: #fff;
}

.nav-tabs {
    border: none;
    padding: 0 20px;
}

.nav-tabs>li>a:hover {
    background-color: #e9e9e9;
}

.nav-tabs>li>a:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.founder-pic {
    height: 100%;
    bottom: 0;
    right: 0;
}

.founder-pic img {
    opacity: 1;
}

.meet-founder-box {
    flex-direction: row;
    justify-content: flex-start;
    border-radius: 7px;
}

.meet-founder-box h6 {
    font-size: 72px;
}

.founder-in {
    min-height: auto !important;
}

.founder-box {
    margin-top: 40px;
    height: auto;
    padding: 40px;
    display: block;
    background: rgba(204, 204, 204, 0.2);
    border-radius: 7px;
}

.founder-box h6 {
    margin-bottom: 20px;
}

.founder-box p {
    font-size: 20px;
    font-family: 'Satoshi';
    font-weight: 700;
    margin: 0;
}

.founder-pic-box {
    margin-top: 0;
    padding: 0 70px;
    width: 55%;
}

.founder-pic-box h4 {
    font-size: 30px;
}

.founder-pic-box p {
    font-size: 16px;
}

.h-award-box {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.h-award-box li {
    margin-right: 10px;
}

.fndrRefPt {
    margin-left: 0;
    margin-bottom: 17px;
}

.mf-flex a {
    margin-right: 10px;
}

.hf-box {
    width: 180px;
    text-align: center;
}

.hf-box .hf-img {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0;
    margin: 20px auto 20px;
    filter: grayscale(1);
}

.hf-box .hf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hf-box p {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
}

.hf-box p span {
    display: block;
    font-size: 14px;
    font-family: 'Satoshi';
    font-weight: 700;
}

.hf-container {
    display: flex;
    align-items: center;
}

.hf-cont {
    flex: 1;
    position: relative;
    padding-top: 40px;
    padding-left: 50px;
}

.h-quote {
    position: absolute;
    left: 0;
    width: 35px;
    top: 0;
}

.h-stars {
    position: absolute;
    left: 50px;
    width: 135px;
    top: 0;
}

.workTriggerStart {
    top: 70%;
}

.founderTriggerStart {
    top: 330px;
}

.founderTriggerEnd {
    top: 800px;
}

.blog-cl-box {
    height: 520px;
    padding-right: 70px;
}

.blog-cl {
    border-bottom: 1px solid #ccc;
}

.blog-cl:first-of-type .bl-cont {
    display: block;
}

.blog-cl:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bl-icon {
    width: 30px;
    height: 30px;
    left: 0;
    position: absolute;
    top: 18px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.bl-icon:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--myClrDark);
    top: 50%;
    left: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.bl-icon:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--myClrDark);
    top: 0;
    left: 50%;
}

.bl-icon.active {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.bl-icon.active:before {
    width: 0;
    left: 50%;
}

.bl-hdn {
    position: relative;
    cursor: pointer;
    padding: 15px 0;
    padding-left: 50px;
}

.bl-hdn h3 {
    font-size: 30px;
    font-family: 'Satoshi';
    font-weight: 900;
    color: var(--myClrDark);
    line-height: 1.3;
    margin-bottom: 0;
}

.bl-cont {
    display: none;
    padding-bottom: 20px;
    padding-left: 50px;
}

.bl-cont p {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 700;
    color: var(--myClrDark);
    margin: 0 0 20px 0;
    line-height: 1.6;
    max-width: 100%;
}

.bl-cont li {
    font-size: 18px;
    font-family: 'Satoshi';
    font-weight: 700;
    color: var(--myClrDark);
    margin-left: 20px;
    line-height: 1.6;
    max-width: 100%;
}

.bl-cont ul li {
    list-style: disc;
}

.bl-cont ol li {
    list-style: decimal;
}

.blogTriggerStart {
    top: -100px;
}

.blogTriggerEnd {
    position: absolute;
    top: -150px;
    left: 0;
}

.h-blog-box.section-padding {
    padding-bottom: 190px;
}

[data-theme='dark'] .blog-cl {
    border-bottom: 1px solid rgba(173, 180, 236, 0.28);
}

.founder-pagination {
    text-align: center;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5857f9;
    display: inline-block;
    margin: 0 4px;
    opacity: 0.4;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.service_error {
    position: relative;
    height: 30px;
}

.service_error .error {
    left: 0;
    top: 0;
}

.check-btn {
    position: relative;
}

.check-btn .error {
    right: 20px;
}

/* service video */
.homeVideo .hs-img-box-up {
    width: 100%;
    right: 0;
}

.homeVideo .hs-img-box {
    top: 40vh;
    height: 60vh;
    background: #fff;
}

/* Changed */
.homeVideo .hs-img-mob {
    display: block;
}

.homeVideo .hs-img-mob video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.homeVideo .hs-service ul {
    position: relative;
    top: 0;
}

.homeVideo .hs-img-mob {
    opacity: 0;
}

.homeVideo .hs-img-mob-up {
    height: 60%;
}

/* // service video */
.cookie-popup {
    position: fixed;
    bottom: -80px;
    right: 1%;
    background-color: #fff;
    border: 1px solid #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 14px 20px;
    transition: opacity .5s;
    opacity: 0;
}

.cookie-popup .cookie-icon {
    width: 26px;
    height: 26px;
    margin-right: 12px;
}

.cookie-popup h2 {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #000;
    margin-bottom: 0;
    margin-right: 1rem;
}

.cookie-popup .button-grd-line {
    margin-left: auto;
}

.cookie-popup--not-accepted {
    opacity: 1;
    animation: cookie-popup-in 0.5s ease forwards;
    animation-delay: 0.2s;
    z-index: 9999;
    height: auto;
}

.cookie-popup--accepted {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}

@media (min-width: 801px) {
    @keyframes cookie-popup-in {
        from {
            bottom: -6.25rem;
        }

        to {
            bottom: 1.25rem;
        }
    }
}

@media (max-width: 800px) {
    @keyframes cookie-popup-in {
        from {
            bottom: -6.25rem;
        }

        to {
            bottom: 0rem;
        }
    }
}

.faq .blog-cl-box {
    height: auto !important;
    padding: 0;
}

#contResponseContainer p {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 400;
    color: #999;
    margin: 32px 0;
}

.thank-you-msg .responseImg {
    height: 320px;
}

.thank-you-msg .qt-box-5 h3,
.thank-you-msg .responseBox h3 {
    font-size: 56px;
    line-height: 1.5;
}

.thank-you-msg .qt-box-5 h4,
.thank-you-msg .responseBox h4 {
    font-size: 34px;
    line-height: 1.5;
}

.clients-img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
}

.h-work-cont .work-tags {
    justify-content: flex-start;
}

.breadcrumbs {
    padding-left: 0;
}

.breadcrumb {
    display: inline-block;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Satoshi';
    font-weight: 500;
    margin-bottom: 24px;
    position: relative;
    background: transparent;
    padding: 0;
}

.breadcrumb:hover a {
    color: #FF5D7D !important;
}

.breadcrumb:not(:last-child) {
    padding-right: 14px;
    margin-right: 14px;
}

.breadcrumb:not(:last-child) a {
    color: #404040;
}

.breadcrumb:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 40%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #404040;
}

.breadcrumb:last-child {
    cursor: none;
}

.breadcrumb:last-child span {
    color: #A0A0A0;
}

.breadcrumb:last-child:hover span {
    color: #A0A0A0 !important;
}

.mb30 {
    margin-bottom: 30px;
}

.dark-theme {
    display: none;
}

.footer-col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer-col ul:not(:first-child) {
    margin-left: 24px;
}

.testi-cont-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.testi-cont-wrapper .hf-img {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 20px;
}

.seprator {
    border-top: 1px solid #ccc;
    padding-top: 70px;
}

.desk-header .container::after,
.desk-header .container::before {
    content: none;
}

.cb-intouch {
    display: none;
    /* transition: all 300ms ease; */
}

@media (min-width: 1200px) {
    .cb-intouch {
        display: block;
        position: fixed;
        width: 150px;
        height: 150px;
        right: 1rem;
        bottom: 1rem;
        z-index: 80;
    }

    .cb-intouch:hover:before {
        content: "";
        display: block;
        position: absolute;
        top: -140px;
        left: -140px;
        right: -40px;
        bottom: -140px;
    }
}

.cb-intouch-outline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: var(--myClrDark);
    transition: transform 0.4s;
}

.cb-intouch-outline svg {
    width: 100%;
    height: 100%;
    zoom: 1.001;
    animation: cb-fx-rotating-360 15s infinite linear;
}

@-webkit-keyframes cb-fx-rotating-360 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cb-fx-rotating-360 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (pointer: fine) {
    .cb-intouch:hover .cb-intouch-outline {
        transform: scale(1.1);
    }
}

.cb-intouch-video {
    position: absolute;
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--myClrDark);
    padding: 0px;
    will-change: transform;
    transition: background 0.4s;
    /* transition-timing-function: cubic-bezier(0.3, 1, 0.7, 1); */
}

.cb-intouch:hover .cb-intouch-video img,
.cb-intouch:hover .cb-intouch-video video {
    transform: scale(1.05);
}

.cb-intouch-video img,
.cb-intouch-video video {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    transition: transform 0.4s;
}

.osano-cm-widget--position_right {
    left: 12px;
}

canvas {
    position: fixed;
    top: 0;
    z-index: 9;
}

@media all and (max-width: 1680px) {
    .home-page-work .salon-pay .hwork-img {
        width: 130%;
        position: relative;
    }

    .home-page-work .salon-pay .hwork-img img {
        position: absolute;
        left: 40px;
        bottom: -40px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: scale(1.5);
    }

    .home-page-work .hwork-img {
        width: 100%;
    }

    .home-page-work .hwork-img img {
        width: 91%;
    }
}

@media all and (max-width: 1536px) {
    .home-page-work .salon-pay .hwork-img img {
        bottom: -65px;
    }
}

@media all and (max-width: 1440px) {
    :root {
        --headerHeight: 70px;
        --headerHeightFixed: 60px;
        --hsHeadingHeight: 81px;
        --hsTextHeight: 170px;
        --durationCommon: 200;
        --hs-ellipse-width-1: 250px;
        --hs-ellipse-width-2: 200px;
        --hs-ellipse-width-3: 250px;
        --hs-img-box: 350px;
    }

    .history-handler {
        margin-top: 40px;
    }

    .hsdot:before {
        left: -10px;
        top: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
    }

    .hs-service h2.hsTrigBtn:nth-last-of-type(2),
    .hs-service h4.hsTrigBtn:nth-last-of-type(2) {
        top: 100px;
    }

    .hs-service h2.hsTrigBtn:nth-last-of-type(1),
    .hs-service h4.hsTrigBtn:nth-last-of-type(1) {
        top: 200px;
    }

    .hb-right h3 {
        line-height: 1.1;
    }

    .section-padding {
        padding: 100px 0;
    }

    .expertiseImg {
        margin: 40px auto 80px;
    }

    .h-expertise-box {
        padding: 50px 0 150px;
    }

    .button {
        font-size: 20px;
        width: 250px;
        height: 60px;
        line-height: 60px;
    }

    .h-blog-box h5 {
        font-size: 58px;
        margin-bottom: 30px;
    }

    .h-expertise-box h5 {
        font-size: 26px;
    }

    .hb-right ul {
        margin: 15px 0 0;
    }

    .who-we-are-box-up {
        height: 900px;
    }

    .wwaRef {
        bottom: 151px;
    }

    .hsDotBox {
        width: 50px;
        height: 50px;
    }

    .client-logo {
        padding: 30px 0 120px;
    }

    .leo9-counters {
        margin-bottom: 90px;
    }

    .who-we-are-box .hdg1 {
        margin-bottom: 0;
    }

    .hs-service h2,
    .hs-service h4 {
        font-size: 60px;
        padding: 12px 0;
        padding-left: 100px;
    }

    .hs-service ul li {
        margin-bottom: 15px;
    }

    .hs-service ul {
        padding-left: 100px;
    }

    .hs-service ul li a,
    .hs-service ul li p {
        color: var(--myClrDark);
        font-size: 20px;
    }

    .home-banner .h-img {
        max-width: 80%;
        max-height: 80%;
    }

    .hdg1 {
        margin-bottom: 60px;
    }

    .h-work-btn {
        margin-top: 30px;
    }

    .founder-box {
        padding: 30px;
    }

    .founder-in {
        min-height: 390px;
    }

    .founder-pic img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .h-work-cont h6,
    .txt1 {
        font-size: 22px;
    }

    .button1 {
        font-size: 16px;
        height: 40px;
        line-height: 40px;
    }

    .hdg6 {
        font-size: 18px;
    }

    .home-alignment-change {
        margin-left: 35px;
    }

    .h-expertise-box .txt1 {
        margin-bottom: 40px;
    }

    .h-blog-img {
        width: 460px;
        height: 260px;
        margin: 20px auto 30px;
    }

    .h-blog-box.section-padding {
        padding-bottom: 100px;
    }

    .h-blog-box .h-cont {
        max-width: 75%;
    }

    .h-blog-box .hdg1 {
        margin-bottom: 20px;
    }

    .grd-btn-2 span {
        font-size: 20px;
    }

    .h-work-hdn-box {
        padding-top: 50px;
        padding-bottom: 0;
    }

    .founder-box h6 {
        font-size: 20px;
    }

    .founderTriggerEnd {
        top: 500px;
    }

    .testimonial-cont h4 {
        font-size: 30px;
    }

    .testimonial-cont p {
        font-size: 18px;
        line-height: 1;
    }

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 24px;
    }

    .h-work {
        padding: 30px;
        padding-bottom: 0;
    }

    .meet-founder-box {
        padding: 30px;
    }

    .founder-pic-box h4 {
        font-size: 24px;
    }

    .meet-founder-box h6 {
        line-height: 1.1;
    }

    .founder-pic-box h4,
    .founder-pic-box p {
        margin-bottom: 15px;
    }

    .h-award-box {
        margin-top: 25px;
    }

    .hf-box p {
        font-size: 18px;
    }

    .h-blog-right {
        width: 44%;
        height: 470px;
    }

    .h-blog-box .h-img img.blogImg2 {
        width: 24%;
    }

    .blg {
        width: 24px;
        height: 24px;
    }

    .blg.blg1 {
        left: 16px;
        top: 51%;
        margin-top: 1px;
    }

    .blg.blg2 {
        left: 69px;
        top: 48%;
        margin-top: 3px;
    }

    .blg.blg3 {
        left: 39px;
        top: 44%;
        margin-top: 1px;
    }

    .founderTriggerStart {
        top: 130px;
    }

    .ab-vm-img {
        margin: 70px 0 0;
    }

    .about-founder.section-padding {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .history-swiper-container h4 {
        font-size: 20px;
        padding: 10px 0 15px 20px;
    }

    .history-swiper-container h3 {
        font-size: 30px;
    }

    .about-banner .ab-ban-1 {
        max-width: 15vw;
    }

    .about-banner .ab-ban-2 {
        max-width: 30vw;
    }

    .about-banner .ab-ban-4 {
        max-width: 21vw;
    }

    .ab-vm-cont {
        padding-top: 80px;
        padding-bottom: 150px;
    }

    .about-vision--left {
        top: 30px;
        padding-top: 90px;
    }

    .dropbox-cont h6 {
        font-size: 30px;
    }

    .serv-det-banner .row {
        padding-top: var(--headerHeight);
    }

    .serv-detail-section .hdg1,
    .serv-detail-section p {
        margin-bottom: 40px;
    }

    .about-description p {
        font-size: 20px;
    }

    .about-description p span b {
        font-size: 48px;
    }

    .q-radio-box label {
        font-size: 30px;
    }

    .stopSecWork {
        top: 40px;
    }

    .stopSecExpertise {
        top: 40px;
    }

    .stopSecBlog {
        top: 80px;
    }

    .h-work-box.section-padding {
        padding-top: 100px;
    }

    .client-logos-home {
        top: -70px;
    }

    .switch {
        padding: 17px 10px;
    }

    .about-banner .hdg1 {
        font-size: 36px;
    }

    .home-page-work .hwork-img {
        height: 450px;
    }

    .home-page-work .hwork-img img {
        width: 100%;
    }

    .home-page-work .salon-pay .hwork-img img {
        left: 30px;
    }

    .pro-07 .exe-img {
        width: 555px;
    }
}

@media all and (max-width: 1536px) and (min-width: 1367px) {
    .hb-right h3 {
        font-size: 65px;
    }

    #lionCanvas,
    #lionCanvasDark {
        width: 75%;
        margin: 0 auto;
    }
}

@media all and (max-width: 1366px) and (min-width: 1281px) {
    .hb-right h3 {
        font-size: 50px;
    }

    #lionCanvas,
    #lionCanvasDark {
        width: 60%;
        margin: 0 auto;
    }

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 20px;
    }

    .client-logo ul li {
        width: 8%;
        height: 40px;
    }

    .button-grd-line {
        width: 100px;
        height: 40px;
    }

    .cookie-popup h2 {
        font-size: 14px;
    }

    .dayNight input+div {
        width: 24px;
        height: 24px;
    }

    html[data-theme='dark'] .dayNight input:checked+div {
        box-shadow: inset 10px -10px 0 0 #000000;
    }

    .navigation li a {
        font-size: 14px;
    }

    .navigation li {
        padding: 0 20px;
    }

    .dropbox-cont {
        padding: 16px;
    }

    .dropbox-cont h6 {
        font-size: 22px;
    }

    .dropbox-cont p {
        font-size: 14px;
        line-height: 20px;
    }

    .who-we-are-box .hdg1 {
        font-size: 24px;
    }

    .whoWeAreImg {
        height: 200px;
        max-width: 616px;
        margin-bottom: 70px;
    }

    .whoWeAreImg .wwa.wwa1 {
        top: 90px;
    }

    .whoWeAreImg .wwa.wwa2 {
        top: 90px;
        right: 20px;
    }

    :root {
        --wwaWidth: 50px;
        --wwaWidth2: 120px;
        --hs-img-box: 250px;
        --expWidth: 30px;
        --headerHeight: 60px;
    }

    .logo {
        width: 80px;
    }

    .hs-service h2,
    .hs-service h4 {
        font-size: 45px;
        padding: 6px 0;
        padding-left: 80px;
    }

    .hsDotBox {
        width: 32px;
        height: 32px;
    }

    .hs-service ul {
        padding-left: 80px;
    }

    .hs-img-box-up {
        width: calc(15%);
        right: 100px;
    }

    .hdg1 {
        font-size: 24px;
    }

    .h-work-cont h4 {
        font-size: 24px;
    }

    .h-work-cont p {
        font-size: 14px;
    }

    .h-work-cont ul li {
        font-size: 14px;
    }

    .h-work-cont ul {
        margin-bottom: 50px;
    }

    .home-page-work .hwork-img {
        height: 350px;
        width: 80%;
    }

    .home-page-work .salon-pay .hwork-img {
        width: 120%;
    }

    .hwork-img {
        height: 270px;
    }

    .h-expertise-box h4 {
        font-size: 40px;
    }

    .h-expertise-box h5 {
        font-size: 20px;
    }

    .expertiseImg {
        max-width: 616px;
    }

    .h-expertise-box ul li {
        margin: 20px 0;
        width: 25%;
        text-align: center;
    }

    .h-expertise-box ul li a {
        font-size: 28px;
        padding-bottom: 0;
    }

    .meet-founder-box h6 {
        font-size: 40px;
        line-height: 1.3;
    }

    .founder-pic {
        width: 180px;
    }

    .fndr {
        width: 10px;
        height: 10px;
    }

    .fndrRefPt {
        width: 50px;
        margin-bottom: 12px;
    }

    .founder-pic-box h4 {
        font-size: 18px;
    }

    .founder-pic-box p {
        font-size: 14px;
    }

    .founder-pic-box h4,
    .founder-pic-box p {
        margin-bottom: 10px;
    }

    .linkdinIcon {
        height: 14px;
    }

    .h-award-box {
        margin-top: 16px;
    }

    .h-award-box li {
        width: 70px;
    }

    .h-founder-box {
        padding: 0 0 70px;
    }

    .bl-hdn h3 {
        font-size: 20px;
    }

    .bl-icon {
        width: 20px;
        height: 20px;
    }

    .bl-hdn {
        padding-left: 34px;
    }

    .bl-cont {
        padding-left: 34px;
    }

    .bl-cont p {
        font-size: 14px;
        margin: 0 0 10px 0;
    }

    .button1 {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
    }

    .h-blog-box .h-img .blogImg1 {
        bottom: 30px;
    }

    .h-blog-box .h-img img.blogImg2 {
        width: 17%;
    }

    .blg.blg1 {
        left: 12px;
        top: 36%;
        margin-top: 2px;
    }

    .blg.blg2 {
        left: 49px;
        top: 34%;
    }

    .blg {
        width: 16px;
        height: 16px;
    }

    .blg.blg3 {
        left: 28px;
        top: 31.5%;
        margin-top: 0;
    }

    .blogEndPts {
        width: 150px;
    }

    .blogEndPts .blgEndPt {
        width: 30px;
        height: 30px;
    }

    .h-quote-box h4 {
        font-size: 38px;
    }

    .h-quote-box .button-grd-line {
        font-size: 16px;
        width: 160px;
        height: 44px;
        margin-bottom: 30px;
    }

    footer ul li a {
        font-size: 14px;
    }

    footer ul li a img {
        width: 16px;
        height: 16px;
    }

    footer h2 {
        font-size: 22px;
    }

    footer h4 {
        font-size: 16px;
    }

    .expertiseImg .exp.exp1 {
        top: 34px;
        left: 168px;
    }

    .expertiseImg .exp.exp2 {
        top: 34px;
    }

    .expertiseImg .exp.exp3 {
        top: 34px;
        right: 173px;
    }

    .section-padding {
        padding: 70px 0;
    }

    .h-blog-box.section-padding {
        padding-bottom: 70px;
    }

    .expertiseImg {
        margin: 40px auto 50px;
    }

    .h-expertise-box {
        padding: 50px 0 70px;
    }

    .home-page-work .h-work-btn {
        margin: 0;
    }

    .h-work-box.section-padding {
        padding-top: 70px;
    }

    .hs-box {
        padding: 100px 0;
    }

    .contact .hdg1 {
        font-size: 50px;
    }

    .contact .sub-line {
        font-size: 24px;
    }


    .txField {
        margin-bottom: 1rem;
    }

    .filled .form-label,
    .filled .form-input {
        font-size: 16px;
    }

    .contact .form-label,
    .contact .form-input {
        font-size: 16px;
    }

    .error {
        font-size: 12px;
    }

    .chbox label {
        font-size: 14px;
    }

    .coutryCode {
        font-size: 16px;
        padding: 2px 20px;
    }

    .clutch-widget {
        width: 170px;
    }

    .clutch-widget iframe {
        height: 40px;
    }

    .call-us {
        bottom: 40%;
    }

    address h2 {
        font-size: 40px;
    }

    address h6 {
        font-size: 16px;
    }

    address img {
        height: 80px;
    }

    address p {
        font-size: 14px;
    }

    .call-us ul {
        font-size: 16px;
    }

    .c-img {
        width: 80%;
        right: 0;
        top: 11%;
    }


    .filled .hdg1,
    .filled .sub-line {
        font-size: 0;
    }

    .quote-pop-container {
        padding: 40px;
        max-width: 700px;
    }

    .quote-pop-container h4 {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .quote-pop-container h3 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .q-radio-box label {
        font-size: 16px;
        max-width: 300px;
        line-height: 40px;
    }

    .quote-close {
        width: 16px;
        height: 16px;
    }

    .quote-close img {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }

    .quote-back {
        width: 18px;
        height: 18px;
    }

    .quote-back img {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }

    .qt-box-4,
    .qt-box-3 {
        max-width: 80%;
    }

    .coutryCode {
        line-height: 1.9;
    }
}

@media (max-width: 1366px) and (min-width: 1281px) {
    .section-padding.contact .container {
        top: 45%;
    }
}

@media all and (max-width: 1280px) {
    .hist-det-hdn {
        width: 40%;
    }

    .hist-det-box {
        width: 50%;
        padding: 25px;
        padding-bottom: 20px;
    }

    .hist-det-box-in {
        min-height: 260px;
    }

    .hist-det-box p {
        font-size: 16px;
    }

    /* service video */
    .homeVideo .hs-img video {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    /* // service video */
    .h-expertise-box ul li {
        width: 25%;
        text-align: center;
    }

    .hb-right h3 {
        font-size: 62px;
    }

    #lionCanvas,
    #lionCanvasDark {
        width: 60%;
        margin: 0 auto;
    }

    .client-logo ul li {
        width: 10%;
        height: 40px;
    }
}

@media all and (max-width: 1200px) {
    .container {
        max-width: 930px;
    }

    .dots {
        margin-left: -232px;
    }

    .dot4,
    .dot5,
    .dot6 {
        margin-left: 0;
    }

    .dotBox {
        margin-left: -320px;
        width: 150px;
        height: 150px;
    }

    .grid .container {
        padding: 0 75px;
    }

    .hb-right {
        padding-left: 0;
    }

    .hdg1 {
        font-size: 35px;
    }

    .h-expertise-box ul li a {
        font-size: 34px;
    }

    .wwaRef {
        bottom: 183px;
    }

    .whoWeAreImg {
        max-width: 660px;
        height: 245px;
    }

    .whoWeAreImg .wwa.wwa1 {
        top: 86px;
        left: 14px;
    }

    .whoWeAreImg .wwa.wwa2 {
        top: 86px;
        right: 14px;
    }

    .hb-right ul li {
        margin-bottom: 15px;
        margin-right: 0;
    }

    .h-client-logos {
        width: 100%;
    }

    #h-section-3,
    #h-section-2 {
        height: 400px;
    }

    .h-work-cont p {
        font-size: 16px;
    }

    .txt1 {
        font-size: 20px;
    }

    .grd-btn-2 {
        min-width: 145px;
        height: 60px;
        line-height: 60px;
    }

    .grd-btn-2 span {
        font-size: 18px;
    }

    .logo,
    .desk-header.fixHeader .logo {
        width: 90px;
    }

    .header-social,
    .desk-header.fixHeader .header-social {
        padding-left: 20px;
        margin-left: 20px;
    }

    .navigation li a {
        font-size: 14px;
    }

    .header-social li {
        margin-right: 15px;
        width: 20px;
    }

    .grd-btn {
        width: 135px;
        height: 45px;
        line-height: 45px;
    }

    .home-banner .h-img {
        max-width: 100%;
        max-height: 100%;
    }

    .testimonial-img {
        width: 80px;
        height: 80px;
    }

    .h-expertise-box h4 {
        font-size: 52px;
    }

    .h-blog-box h5 {
        font-size: 44px;
    }

    .h-quote-box h4 {
        font-size: 48px;
    }

    .h-blog-box .h-img img.blogImg2 {
        width: 28%;
    }

    .testimonial-cont h4 {
        font-size: 26px;
    }

    .testimonial-cont p {
        font-size: 16px;
    }

    .founder-box h6 {
        margin-bottom: 30px;
    }

    .testimonial-cont p span {
        margin-top: 5px;
    }

    .founder-pic-box h4 {
        font-size: 30px;
    }

    .drop ul {
        max-width: 900px;
    }

    .dropbox-cont.col1:after,
    .dropbox-cont.col2:after,
    .dropbox-cont.col3:after {
        background-size: 140%;
    }

    .dropbox-cont:hover:after {
        background-position: 100% 180%;
        top: -100%;
        background-size: 200%;
    }

    .s-othr.dropbox-cont p {
        padding-right: 10px;
    }

    .serv-ban-right {
        left: 35px;
    }

    .serv-ban-right-img {
        width: 370px;
        height: 370px;
    }

    .frame-47713 {
        width: calc(50% - 15px);
    }

    .frame-47706 {
        gap: 40px;
    }

    .list-listitem-heading-3-traba-pro h3 {
        margin-bottom: 12px;
    }

    .work-6 p {
        margin-bottom: 30px;
    }

    .frame-47700 {
        grid-column-gap: 24px;
    }

    .frame-47701 {
        gap: 8px;
    }

    .frame-47703 {
        padding-top: 16px;
        margin-top: 16px;
    }

    .frame-47696 {
        height: 500px;
    }

    .work-wrap {
        margin-top: 120px;
    }

    .frame-47696,
    .frame-47705 {
        width: 100%;
    }

    .client-txt p {
        font-size: 20px;
    }
}

@media all and (max-width: 1024px) {
    .about-banner .hdg1 {
        font-size: 30px;
    }

    .hist-det-box {
        width: 55%;
    }

    .history-swiper-container h3 {
        left: 25%;
    }

    .history-swiper-container h4 {
        left: 25%;
        width: 75%;
    }

    .about-vision--left ul li a {
        font-size: 36px;
    }

    .about-vision--left {
        width: 240px;
    }

    .hist-trigger {
        display: none;
    }

    .bl-hdn h3 br {
        display: none;
    }

    /* service video */
    .homeVideo .hs-img-box-up {
        width: 40%;
    }

    /* // service video */
    .q-radio-box label:hover {
        color: var(--myClrDark);
        border: 1px solid #ddd;
    }

    .home-page-work .hwork-img {
        height: 340px;
    }

    .home-page-work .salon-pay .hwork-img img {
        bottom: -75px;
    }
}

@media all and (max-width: 1200px) and (min-height: 1300px) {
    .quoteTriggerUp {
        position: absolute;
        top: 40%;
    }

    .founderTriggerEnd {
        top: -300px;
    }

    .blogTriggerStart {
        top: -200px;
    }

    .quoteMergeTrigger {
        top: -45%;
    }
}

@media all and (max-width: 990px) {
    .frame-47706 {
        flex-direction: column;
    }

    .clients-wrap {
        flex-direction: column;
    }

    :root {
        --expWidth: 30px;
        --hs-img-box: 300px;
        --hs-ellipse-width-1: 150px;
        --hs-ellipse-width-2: 130px;
        --hs-ellipse-width-3: 150px;
        --servDetLeft: 70px;
    }

    .serv-ban-left {
        min-height: 400px;
    }

    .serv-ban-right-img {
        width: 320px;
        height: 320px;
    }

    .container {
        max-width: 770px;
    }

    .dots {
        margin-left: -200px;
    }

    .dot4,
    .dot5,
    .dot6 {
        margin-left: 0;
    }

    .dotBox {
        margin-left: -243px;
        width: 100px;
        height: 100px;
    }

    .who-we-are-box .hdg1 {
        font-size: 29px;
    }

    #lionCanvas,
    #lionCanvasDark {
        width: 100%;
    }

    .whoWeAreImg {
        height: 230px;
    }

    .whoWeAreImg .wwa.wwa1 {
        top: 79px;
        left: 12px;
    }

    .whoWeAreImg .wwa.wwa2 {
        top: 79px;
        right: 12px;
    }

    .hs-service h2,
    .hs-service h4 {
        font-size: 50px;
        padding: 7px 0;
        padding-left: 85px;
    }

    .hs-service ul {
        padding-left: 85px;
    }

    .hs-service h2.hsTrigBtn:nth-last-of-type(2),
    .hs-service h4.hsTrigBtn:nth-last-of-type(2) {
        top: 85px;
    }

    .hs-service h2.hsTrigBtn:nth-last-of-type(1),
    .hs-service h4.hsTrigBtn:nth-last-of-type(1) {
        top: 170px;
    }

    .hsDotBox {
        width: 45px;
        height: 45px;
    }

    .hsDotBox:before {
        left: -10px;
        top: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
    }

    .hs-box {
        padding: 150px 0 100px;
    }

    .h-work h6 {
        font-size: 20px;
    }

    .h-work {
        padding: 20px;
        padding-bottom: 0;
        min-height: 411px;
    }

    .h-expertise-box h4 {
        font-size: 48px;
    }

    .h-blog-box h5 {
        font-size: 35px;
    }

    .expertiseImg {
        margin: 20px auto 50px;
        height: 300px;
    }

    .expertiseImg .exp.exp1 {
        top: 22px;
        left: 189px;
    }

    .expertiseImg .exp.exp2 {
        top: 22px;
    }

    .expertiseImg .exp.exp3 {
        top: 22px;
        right: 194px;
    }

    .h-expertise-box {
        padding: 0px 0 100px;
    }

    .testimonial-img {
        width: 70px;
        height: 70px;
    }

    .meet-founder-box h6 {
        font-size: 55px;
    }

    .founder-pic-box h4 {
        margin-bottom: 15px;
        font-size: 25px;
    }

    .founder-pic-box p {
        margin-bottom: 10px;
    }

    .founder-ht-box {
        display: block;
    }

    .h-founder-box {
        padding: 0 0 100px;
    }

    .meet-founder-box,
    .founder-box {
        padding: 20px;
    }

    .founder-box p {
        font-size: 18px;
    }

    .h-blog-right {
        height: 400px;
    }

    .blg {
        width: 19px;
        height: 19px;
    }

    .blg.blg1 {
        left: 14px;
        top: 50%;
        margin-top: -2px;
    }

    .blg.blg2 {
        left: 57px;
        top: 47%;
        margin-top: 1px;
    }

    .blg.blg3 {
        left: 33px;
        top: 43%;
        margin-top: 0px;
    }

    footer {
        padding: 40px 25px;
    }

    .hb-right h3 {
        font-size: 55px;
    }

    .hdg1,
    .h-expertise-box ul li a {
        font-size: 28px;
    }

    .h-work-cont h4 {
        font-size: 28px;
    }

    .h-img {
        max-width: 100%;
        max-height: 100%;
    }

    .testimonial-cont p,
    .h-blog-box p {
        font-size: 18px;
        line-height: 1.5;
    }

    footer ul li {
        line-height: 1.3;
    }

    footer h2 {
        font-size: 24px;
    }

    .hs-ellipse {
        left: 67%;
        top: 20%;
    }

    .hb-right ul li:nth-of-type(4) a:after,
    .hb-right ul li:nth-of-type(4) p:after {
        opacity: 1;
    }

    .hb-right ul li:nth-of-type(3) a:after,
    .hb-right ul li:nth-of-type(3) p:after {
        opacity: 0;
    }

    .about-vision--left ul li a {
        font-size: 30px;
    }

    .about-vision--left {
        padding-top: 70px;
    }

    .ab-vm-cont {
        padding-top: 60px;
        padding-bottom: 120px;
    }

    .abt-founder-cont-in p {
        font-size: 20px;
        line-height: 32px;
    }

    .abt-fnd-detail h4 {
        line-height: 1.3;
    }

    .abt-founder-cont-in {
        padding: 30px;
        padding-right: 40%;
    }

    .dropbox-cont h6 {
        font-size: 24px;
    }

    .dropbox-cont p {
        font-size: 14px;
        line-height: 1.5;
    }

    .homeHdr .navigation li {
        padding: 0 12px;
    }

    .navigation li {
        padding: 0 16px;
    }

    .drop-box .downarrow::before,
    .mobdrop-box .downarrow::before,
    .drop-box .downarrow::after,
    .mobdrop-box .downarrow::after {
        width: 5px;
        height: 5px;
        right: -10px;
    }

    .drop ul {
        max-width: 750px;
    }

    .dropbox-cont.col1:after,
    .dropbox-cont.col2:after,
    .dropbox-cont.col3:after {
        background-size: 190%;
    }

    .dropbox-cont:hover:after {
        background-position: 100% 220%;
    }

    .dropFlex img {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    .team-main-img {
        max-height: initial;
    }

    .team-container {
        height: auto;
        padding: 100px 0;
    }

    .team-section {
        margin-top: 0;
    }

    .abt-fnd-detail h4 {
        font-size: 16px;
    }

    .qt-box-4,
    .qt-box-3 {
        max-width: 85%;
    }

    .founder-pic {
        height: 210px;
        width: 145px;
    }

    .founder-in {
        min-height: 290px;
    }

    .serv-ban-cont .servHdn {
        font-size: 56px;
    }

    .caseStudyBigContainerMob {
        display: block;
    }

    .scrollTop {
        margin-left: 310px;
    }

    .desk-header .container {
        max-width: 800px;
        padding: 0;
    }

    .leo9-counters ul li {
        font-size: 18px;
        padding: 0 20px;
    }

    .hw-img {
        height: 280px;
    }

    .hw-cont h5 {
        font-size: 16px;
        padding: 0 30px;
    }

    .hw-cont h3 {
        font-size: 30px;
    }

    .hw-cont p {
        font-size: 14px;
    }

    .h-work-tab-nav ul li {
        font-size: 30px;
    }

    .h-work-tab-content {
        height: 380px;
    }

    .abt-founder-cont-in p:before {
        width: 70px;
        height: 70px;
        top: 0px;
        left: 0;
    }

    .bl-hdn h3 {
        font-size: 18px;
    }

    .blog-cl-box {
        padding-right: 30px;
    }

    .blog-cl-box {
        height: 570px;
    }

    .home-page-work .hwork-img {
        height: 315px;
    }

    .home-page-work .salon-pay .hwork-img img {
        bottom: -25px;
    }

    .contact .contactUs .hdg1 {
        padding-bottom: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid rgba(225, 225, 225, 0.75);
    }

    .contact .contactUs .call-us.mob-call {
        padding-bottom: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid rgba(225, 225, 225, 0.75);
    }

    .contact .contactUs.filled .hdg1 {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
}

@media all and (max-width: 800px) {
    .frame-47713 {
        padding: 30px;
    }

    .tailored-fintech-expertise h3 {
        min-height: 48px;
    }

    .frame-47715 {
        grid-row-gap: 40px;
    }

    .frame-47711 {
        grid-row-gap: 12px;
    }

    :root {
        --headerHeightFixed: 70px;
        --expWidth: 35px;
        --wwaWidth: 8vw;
        --wwaWidth2: 16vw;
        --servDetLeft: 70px;
    }

    .serv-detail-trigger-pt {
        top: 0;
    }

    .sectDetRefElement {
        width: 150px;
        height: 150px;
    }

    .noFadeInUp-800 {
        transform: translate(0, 0) !important;
        -webkit-transform: translate(0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .lion-content-box {
        min-height: auto;
        position: relative;
        background: var(--myClrLight);
        z-index: 1;
        padding-top: 30px;
    }

    .lion-content-box:before {
        width: 100%;
        height: 100px;
        background: linear-gradient(0deg, #ffffff, transparent);
        left: 0;
        top: -100px;
        position: absolute;
    }

    .hb-right ul {
        margin-top: 15px;
    }

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 32px;
    }

    .navigation {
        display: none;
    }

    .home-banner {
        padding-top: 0;
        height: auto;
        display: block;
        z-index: 2;
        background: var(--myClrLight);
    }

    .lion-box {
        position: sticky;
        top: 0;
    }

    .client-logo-mob {
        display: block;
    }

    .client-logo-desk {
        display: none;
    }

    .who-we-are-box .hdg1 {
        font-size: 36px;
        line-height: 1.4;
    }

    .who-we-are-box {
        overflow: hidden;
    }

    #lionCanvas,
    #lionCanvasDark {
        z-index: 1;
        position: relative;
        width: 100%;
        width: 500px;
        height: 500px;
        height: 100vh;
        margin: 0 auto 50px;
    }

    .dots {
        margin-left: 0;
        top: 200px;
        left: 20%;
        z-index: 9;
    }

    .dotBox {
        left: 20%;
        margin-left: 0;
        width: 200px;
        height: 200px;
        z-index: 9;
    }

    .hb-right {
        padding-left: 0;
        max-width: 600px;
        margin: 0 auto;
    }

    .client-logo {
        padding: 80px 0;
        background: var(--myClrLight);
        z-index: 1;
        top: 0;
        max-width: 600px;
        margin: 0 auto;
    }

    .client-logo ul li {
        width: 26%;
        height: 70px;
    }

    .leo9-counters {
        margin-bottom: 80px;
    }

    .whoWeAreImg {
        margin: 40px auto;
        height: 33vw;
    }

    .whoWeAreImg .wwa.wwa3 {
        top: 54px;
    }

    .hbr-br,
    .hs-img-box-up {
        display: none;
    }

    .hs-service-1,
    .hs-service {
        height: auto;
    }

    .hs-service ul {
        position: initial;
        overflow: hidden;
    }

    .hs-service {
        position: sticky;
        top: 50px;
        z-index: 1;
        background: var(--myClrLight);
        height: calc(100vh + 50px);
    }

    .hs-img-mob-up {
        overflow: hidden;
        height: calc(100vh - 500px);
        display: flex;
        align-items: center;
    }

    .hs-img-mob {
        width: 400px;
        height: 400px;
        position: relative;
        margin: 0 auto;
        display: block;
    }

    .hs-service-in {
        position: relative;
        top: 0;
    }

    .hs-service-mob-canvas {
        position: relative;
        z-index: 1;
    }

    .hs-line-mob {
        position: absolute;
        width: 20%;
        height: 20%;
        border: 1px solid var(--myClrDark);
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        opacity: 0;
    }

    .hs-ellipse-mob {
        position: absolute;
        width: 30%;
        height: 30%;
        background: url(../img/ellipse.png) no-repeat center center / contain;
        top: -10%;
        left: 45%;
        animation: ellipseRotate 10s linear infinite;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        opacity: 0;
        transition-delay: 0.7s;
        -webkit-transition-delay: 0.7s;
    }

    .hs-img-mob-1.active .hs-line-mob,
    .hs-img-mob-3.active .hs-line-mob {
        width: 65%;
        height: 87%;
        opacity: 1;
        margin-top: -20px;
    }

    .hs-img-mob-1.active .hs-ellipse-mob,
    .hs-img-mob-3.active .hs-ellipse-mob {
        width: 60%;
        height: 60%;
        opacity: 1;
    }

    .hs-img-mob-2.active .hs-line-mob {
        width: 72%;
        height: 47%;
        opacity: 1;
        margin-top: -29px;
    }

    .hs-img-mob-2.active .hs-ellipse-mob {
        width: 60%;
        height: 60%;
        opacity: 1;
    }

    .h-work-hdn-box {
        padding-top: 0;
    }

    .section-padding {
        padding: 50px 0;
    }

    .h-expertise-box h4 {
        font-size: 40px;
    }

    .h-founder-box .container {
        max-width: 400px;
    }

    /* .h-founder-box {
        margin: 0 auto;
    } */
    .meet-founder-box {
        min-height: 440px;
    }

    .founder-box {
        margin-top: 40px;
    }

    .founder-in {
        min-height: auto;
    }

    .meet-founder-box,
    .founder-box {
        padding: 30px;
    }

    .founder-box h6 {
        margin-bottom: 10px;
        margin-left: 50px;
    }

    .testimonial-cont h4 {
        font-size: 22px;
    }

    .testimonial-flex {
        margin-bottom: 20px;
    }

    .h-blog-right {
        height: 540px;
        position: static;
        width: 100%;
    }

    .h-blog-left {
        width: 100%;
    }

    .blogImg2Up {
        width: 115px;
        height: 268px;
        position: relative;
    }

    .h-blog-box .h-img img.blogImg2 {
        width: 100%;
        position: static;
    }

    .blg {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .blg.blg1 {
        left: 28px;
        bottom: -4px;
        margin-top: 0;
        top: inherit;
    }

    .blg.blg2 {
        left: 81px;
        bottom: 8px;
        margin-top: 0;
        top: inherit;
    }

    .blg.blg3 {
        left: 52px;
        bottom: 28px;
        margin-top: 0;
        top: inherit;
    }

    .h-quote-box:before {
        height: 100%;
    }

    .h-quote-box h4 {
        font-size: 36px;
        color: var(--myClrLight);
        margin-bottom: 30px;
    }

    .button {
        font-size: 18px;
        width: 230px;
        height: 50px;
        line-height: 50px;
    }

    .whoWeAreImg .wwa.wwa1 {
        top: 50%;
        left: 2vw;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        margin-top: -15px;
    }

    .whoWeAreImg .wwa.wwa2 {
        top: 50%;
        right: 2vw;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        margin-top: -15px;
    }

    .expertiseImg,
    .h-expertise-box ul {
        max-width: 610px;
    }

    .h-expertise-box ul {
        margin: 0 auto;
        justify-content: center;
    }

    .h-expertise-box ul li {
        margin: 10px 12px;
        width: auto;
    }

    .expertiseImg .exp {
        opacity: 0;
    }

    .expertiseImg .exp.exp1 {
        top: 21px;
        left: 182px;
    }

    .expertiseImg .exp.exp2 {
        top: 21px;
    }

    .expertiseImg .exp.exp3 {
        top: 21px;
        right: 187px;
    }

    .h-expertise-box .container {
        padding: 0 15px;
    }

    .blogImgMob,
    .mob-quote-btn {
        display: block;
    }

    .blg {
        opacity: 1;
    }

    .hb-right ul li:nth-of-type(4) a:after,
    .hb-right ul li:nth-of-type(4) p:after {
        opacity: 0;
    }

    .hb-right ul li:nth-of-type(3) a:after,
    .hb-right ul li:nth-of-type(3) p:after {
        opacity: 1;
    }

    .footer-col-1 {
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-col-1 .copy {
        display: none;
    }

    .footer-col-2 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0;
    }

    ul.f-social {
        justify-content: center;
    }

    .deskFooter {
        padding-bottom: 80px;
    }

    footer {
        max-width: 400px;
        margin: 0 auto;
    }

    .footer-col-2 ul {
        display: none;
        padding: 0px 0 10px;
    }

    footer h4 {
        margin: 0;
        line-height: 40px;
        cursor: pointer;
        position: relative;
        color: var(--myClrDark);
        font-family: 'Satoshi';
        font-weight: 900;
    }

    .footer-col-2 span {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    footer ul li {
        margin: 0;
    }

    footer ul li a {
        display: block;
        line-height: 40px;
    }

    footer h4 img {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
    }

    .deskFooter .active img {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .copyMob {
        display: block;
        font-size: 12px;
        color: var(--myClrDark);
        font-family: 'Satoshi';
        font-weight: 900;
        line-height: 1.5;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    footer h2 {
        font-family: 'Satoshi';
        font-weight: 900;
    }

    .menu-icon {
        display: block;
        position: fixed;
        right: 30px;
        border-radius: 50%;
        padding: 15px;
        cursor: pointer;
    }

    .menu-grd {
        content: '';
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(to right, #321575 0, #8d0b93 100%);
        background: -webkit-linear-gradient(to right, #321575 0, #8d0b93 100%);
        background: -moz-linear-gradient(to right, #321575 0, #8d0b93 100%);
        cursor: pointer;
    }

    .menu-icon-in {
        width: 30px;
        height: 30px;
        position: relative;
        cursor: pointer;
    }

    .menu-icon-in span {
        height: 3px;
        background: #000;
        width: 100%;
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: -1px;
    }

    .menu-icon-in span:nth-of-type(1) {
        margin-top: -10px;
    }

    .menu-icon-in span:nth-of-type(3) {
        margin-top: 8px;
    }

    .desk-header {
        position: absolute;
    }

    .hb-right h3 {
        font-size: 100px;
    }

    .home-dash,
    .h-quote-box {
        display: none;
    }

    .hbr-br-in {
        display: block;
    }

    .deskHeader {
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .hs-service ul li a,
    .hs-service ul li p {
        font-size: 24px;
    }

    .hs-service h2,
    .hs-service h4 {
        font-size: 60px;
    }

    .hdg1 {
        font-size: 36px;
        line-height: 1.4;
    }

    .hdg6 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .hs-box {
        padding: 150px 0 0;
    }

    .hs-service-3 {
        padding-bottom: 100px;
    }

    .workMobDots {
        opacity: 0;
        display: block;
        width: 70px;
        display: inline-block;
        position: relative;
        align-items: center;
        height: 14px;
        margin-left: 20px;
    }

    .blg {
        opacity: 0;
    }

    .wMobDot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        top: 0;
    }

    .wMobDot.wMobDot1 {
        background: var(--clr1);
        left: 0;
    }

    .wMobDot.wMobDot2 {
        background: var(--clr2);
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    .wMobDot.wMobDot3 {
        background: var(--clr3);
        right: 0;
    }

    .br-800 {
        display: block;
    }

    .workTriggerStart {
        top: 50%;
    }

    .workTriggerEnd {
        top: 0%;
    }

    .mainContainer {
        overflow: hidden;
    }

    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--myClrLight);
        background-position: 50% 50%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .scroll_Down_box {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
    }

    .mob-menu,
    .mob-overlay {
        display: block;
    }

    .ab-vm-cont h4 {
        font-size: 30px;
        line-height: 42px;
    }

    .ab-vm-cont h4 br {
        display: none;
    }

    .ab-vm-cont p {
        font-size: 20px;
        line-height: 1.5;
    }

    .about-vision--left {
        display: none;
    }

    .ab-vm-cont h3 {
        display: block;
        font-size: 22px;
        line-height: 1;
        font-family: 'Satoshi';
        font-weight: 900;
        text-transform: capitalize;
        margin-bottom: 20px;
    }

    #ab-vm-cont-1 {
        color: var(--clr1);
    }

    #ab-vm-cont-2 {
        color: var(--clr2);
    }

    #ab-vm-cont-3 {
        color: var(--clr3);
    }

    .about-vision--right {
        max-width: 500px;
        margin: auto;
    }

    .about-vision .container {
        display: block;
    }

    .about-vision--left ul {
        display: flex;
        align-items: center;
        max-width: 500px;
        margin: auto;
    }

    .about-vision--left ul li {
        margin-bottom: 0;
        margin-right: 50px;
    }

    .ab-vm-cont {
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .about-banner .ab-ban-1 {
        max-width: 30vw;
    }

    .about-banner .ab-ban-2 {
        max-width: 40vw;
    }

    .about-banner .ab-ban-4 {
        max-width: 36vw;
    }

    .about-banner--content {
        position: relative;
        top: 0;
    }

    .about-history {
        margin-top: 50px;
    }

    .about-vision--left ul li a {
        font-size: 24px;
    }

    .serv-det-banner .row {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        height: auto;
        padding: 100px 0 0;
    }

    .serv-ban-left {
        min-height: auto;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .serv-ban-right-img {
        width: 400px;
        height: 400px;
        margin: 0 auto;
    }

    .serv-ban-right {
        left: 0;
        width: 100%;
        margin-bottom: 70px;
    }

    .serv-back-desc {
        display: none;
    }

    .serv-back-mob {
        display: block;
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    .founder-pic-box p {
        font-size: 16px;
    }

    .mob-menu .button-grd-line {
        width: 100%;
    }

    .about-banner .ab-ban-1,
    .about-banner .ab-ban-3 {
        top: 400px;
    }

    .about-banner {
        height: auto;
        padding-top: 120px;
        padding-bottom: 410px;
    }

    .career .serv-ban-img {
        position: static;
        top: 0;
        right: 0;
        transform: translate(0, 0);
        width: 100%;
    }

    .serv-ban-box {
        height: auto;
    }

    .serv-ban-box .container {
        height: auto;
        flex-direction: column-reverse;
        display: flex;
    }

    .serv-ban-img #lionCanvas,
    .serv-ban-img #lionCanvasDark {
        height: auto;
    }

    .serv-ban-cont {
        max-width: 400px;
        margin: 0 auto;
    }

    .team-section .serv-ban-cont {
        max-width: 100%;
    }

    .work .h-work-cont {
        width: 100%;
    }

    .h-work-def {
        width: 100%;
        text-align: left;
    }

    .initDotMain {
        position: fixed;
    }

    .scrollTop {
        margin-left: 0;
        left: inherit;
        right: 50px;
    }

    .lion-box {
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
    }

    .lion-content-box {
        margin-top: 75vh;
    }

    .who-we-are-box,
    .hs-box,
    .h-work-hdn-box,
    .h-work-box,
    .h-expertise-box,
    .h-founder-box,
    .h-blog-box,
    .h-quote-box,
    .deskFooter {
        background: #fff;
        position: relative;
        z-index: 9;
    }

    [data-theme='dark'] .who-we-are-box,
    [data-theme='dark'] .hs-box,
    [data-theme='dark'] .h-work-hdn-box,
    [data-theme='dark'] .h-work-box,
    [data-theme='dark'] .h-expertise-box,
    [data-theme='dark'] .h-founder-box,
    [data-theme='dark'] .h-blog-box,
    [data-theme='dark'] .h-quote-box,
    [data-theme='dark'] .deskFooter {
        background: #121212;
    }

    .hs-service ul li {
        opacity: 0;
        margin-left: -20px;
    }

    .hs-service-trigger-1 {
        position: absolute;
        left: 0;
        top: 50px;
    }

    .homeHdr .darkMobileBox {
        display: block;
        position: fixed;
        width: 50px;
        top: 0;
        right: 100px;
    }

    .fixHeader .switch,
    .switch {
        position: static;
        transform: translate(0, 0) scale(0.8);
        padding: 17px 10px;
    }

    .desk-header {
        transition: all 0s ease-in-out;
        -webkit-transition: all 0s ease-in-out;
    }

    .h-work-tab-nav ul li span {
        opacity: 1;
    }

    .h-work-tab-nav ul li span.hwPt2 {
        background: #5857F9;
    }

    .h-work-tab-nav ul li span.hwPt3 {
        background: #59257D;
    }

    .h-work-tab {
        margin-bottom: 60px;
    }

    .hw-cont h5 br {
        display: none;
    }

    .h-work-tab-nav ul li {
        font-size: 24px;
        line-height: 60px;
    }

    .h-work-tab-nav ul li span {
        width: 20px;
        height: 20px;
    }

    .hw-img {
        height: auto;
    }

    .scrollTop {
        display: none;
    }

    .ab-vm-cont {
        min-height: auto;
    }

    .ab-vm-cont#ab-vm-cont-3 {
        min-height: auto;
    }

    .h-blog-box .h-img .blogImg1 {
        bottom: 0;
    }

    .meet-founder-box,
    .founder-box {
        display: block;
    }

    .founder-pic-box {
        padding: 0;
        width: 100%;
    }

    .h-award-box {
        width: 70%;
        flex-wrap: wrap;
    }

    .h-award-box li {
        margin-right: 10px;
        width: calc(50% - 10px);
        margin-bottom: 10px;
    }

    .fndrRefPt {
        margin-top: 20px;
    }

    .hf-container {
        display: block;
    }

    .hf-box {
        margin: 0 auto;
    }

    .blog-cl-box {
        padding-right: 0;
    }

    .blog-cl-box {
        height: auto;
        margin-bottom: 50px;
    }

    .h-work-cont ul {
        margin-bottom: 10px;
    }

    .home-page-work .salon-pay .hwork-img img {
        bottom: -50px;
    }

    .desktop-view {
        display: none;
    }

    .mobile-view {
        display: block;
    }

    .lionAnimTriggerStart {
        top: 40%;
    }

    .lionAnimTriggerEnd {
        bottom: 0%;
    }

    .frame-1000005005 {
        flex-wrap: wrap;
        max-width: 600px;
    }

    .logo-l-1-svg {
        width: calc(30% - 20px);
    }

    .work-wrap {
        margin-top: 60px;
    }
}

@media only screen and (orientation: portrait) {
    .ab-vm-cont {
        min-height: 500px;
    }

    .ab-vm-cont#ab-vm-cont-3 {
        min-height: auto;
    }
}

@media all and (max-width: 800px) and (orientation: portrait) {
    .ab-vm-cont {
        min-height: auto;
    }
}

@media all and (max-width: 768px) {
    .about-vision.section-padding {
        padding-bottom: 0;
    }

    .h-pagination {
        margin: 0 20px;
    }

    .history-swiper-container {
        margin: 30px 0 0;
    }

    .about-description p span b {
        font-size: 36px;
    }

    .q-radio-box label {
        font-size: 24px;
    }

    .quote-pop-container {
        padding: 40px 50px;
    }

    .quote-pop-container .filled .form-label {
        font-size: 18px;
    }

    .quote-close:hover {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@media all and (max-width: 680px) {
    .about-banner .hdg1 br {
        display: none;
    }

    .about-banner .hdg1 {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .frame-47696 {
        height: auto;
    }
}

@media all and (max-width: 640px) {
    :root {
        --headerHeight: 60px;
        --headerHeightFixed: 60px;
        --expWidth: 28px;
    }

    .container {
        padding: 0 20px;
    }

    .desk-header {
        height: 60px;
        padding: 0 15px;
    }

    .desk-header .container {
        padding: 0;
    }

    .desk-header.fixHeader .logo {
        width: 70px;
    }

    .grid .container {
        padding: 0 30px;
    }

    .whoWeAreImg .wwa.wwa1 {
        left: 1.7vw;
        width: 10vw;
        height: 10vw;
        margin-top: 0;
    }

    .whoWeAreImg .wwa.wwa2 {
        right: 1.7vw;
        width: 10vw;
        height: 10vw;
        margin-top: 0;
    }

    .hs-box {
        padding: 170px 0 70px;
    }

    .hdg1,
    .who-we-are-box .hdg1 {
        font-size: 30px;
    }

    .hdg6,
    .hdg7,
    .ab-vm-cont h3 {
        font-size: 20px;
    }

    .h-expertise-box ul li {
        margin-bottom: 20px;
    }

    .h-expertise-box h4 {
        font-size: 32px;
    }

    .h-expertise-box h5 {
        font-size: 22px;
    }

    .expertiseImg {
        max-width: 420px;
    }

    .h-expertise-box ul {
        max-width: 410px;
    }

    .h-expertise-box ul li a {
        font-size: 28px;
    }

    .expertiseImg .exp.exp1 {
        top: 44px;
        left: 111px;
    }

    .expertiseImg .exp.exp2 {
        top: 44px;
    }

    .expertiseImg .exp.exp3 {
        top: 44px;
        right: 114px;
    }

    .client-logo ul li img {
        max-height: 40px;
        max-width: 100%;
    }

    .h-quote-box h4 {
        font-size: 32px;
    }

    .menu-icon {
        padding: 12px;
        right: 5px;
    }

    .hb-right h3 {
        font-size: 80px;
    }

    .hs-service h2,
    .hs-service h4 {
        font-size: 9vw;
    }

    .history-swiper-container .history-cont {
        display: block;
        max-width: 400px;
        width: 90%;
        margin: 0 auto;
    }

    .hist-det-hdn {
        width: 100%;
        display: flex;
        align-items: flex-end;
    }

    .history-swiper-container h3 {
        width: auto;
        position: static;
        padding: 15px 20px 15px 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .history-swiper-container h4 {
        flex: 1;
        width: 100%;
        position: static;
        padding: 15px 20px;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .hist-det-box {
        width: 100%;
    }

    .history-swiper-container .swiper-slide:after {
        content: '';
        position: absolute;
        top: 220px;
        border-bottom: 1px solid var(--myClrDark);
        width: 100%;
    }

    .about-banner {
        padding-bottom: 400px;
    }

    .ab-vm-cont {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    #ab-vm-cont-3 {
        padding-bottom: 50px;
    }

    .about-banner .hdg1 {
        font-size: 28px;
        max-width: 90%;
        margin: 0 auto;
    }

    .about-vision--right,
    .about-vision--left ul {
        max-width: 400px;
    }

    .about-vision--left ul li a {
        font-size: 20px;
    }

    .abt-dounder-img {
        width: 190px;
        right: 0;
    }

    .abt-founder-cont-in {
        padding: 30px;
        padding-bottom: 40px;
    }

    .abt-founder-cont-in p {
        font-size: 18px;
        line-height: 1.5;
    }

    .abt-fnd-detail {
        padding-right: 170px;
        padding-top: 30px;
    }

    .abt-fnd-detail h5 {
        font-size: 22px;
        line-height: 1;
    }

    .abt-fnd-detail h4 {
        font-size: 14px;
        line-height: 1.5;
    }

    .s-othr.dropbox-cont {
        padding: 20px;
    }

    .quote-pop-container {
        padding: 40px 30px;
    }

    .about-banner .ab-ban-4 {
        display: none;
    }

    .about-banner .ab-ban-2 {
        max-width: 90vw;
    }

    .scatterElem br {
        display: block;
    }

    .qt-box-in p {
        line-height: 30px;
    }

    .scrollTop {
        right: 30px;
    }

    .homeHdr .darkMobileBox {
        right: 65px;
    }

    .leo9-counters {
        display: none;
    }

    .leo9-counters ul li {
        text-align: center;
        line-height: 1.5;
    }

    .leo9-counters ul li span {
        display: block;
        margin-bottom: 10px;
    }

    .leo9-counters ul {
        align-items: inherit;
    }

    .fixHeader .switch,
    .switch {
        padding: 14px 10px;
    }

    .h-work-tab-nav ul li {
        line-height: initial;
        padding-bottom: 10px;
    }

    .h-work-tab-nav ul li span {
        width: 14px;
        height: 14px;
    }

    .hw-img {
        height: auto;
    }

    .hw-cont {
        flex-wrap: wrap;
    }

    .hw-cont h3 {
        width: 150px;
    }

    .hw-cont p {
        width: 100%;
        margin-top: 15px;
        margin-left: 150px;
    }

    .hw-cont h5 {
        padding: 0;
    }

    .abt-founder-cont-in p:before {
        width: 50px;
        height: 50px;
        top: -10px;
    }

    .coutryCode {
        font-size: 20px;
        line-height: 35px;
    }

    .frame-47713 {
        width: 100%;
    }

    .tailored-fintech-expertise h3 {
        min-height: auto;
    }
}

@media all and (max-width: 576px) {
    .work-wrap {
        margin-top: 50px;
    }

    .progress {
        margin-top: 40px;
        flex-direction: column;
    }

    .odometer-wrapper {
        justify-content: center;
    }

    .odometer-wrap {
        margin-bottom: 30px;
    }

    .odometer-wrap p {
        text-align: center;
        margin: auto;
        margin-top: 20px;
    }

    .vision-head {
        position: relative;
        padding: 40px 0;
    }
}

@media all and (max-width: 530px) {
    .frame-1000004943 {
        width: 40px;
        height: 40px;
    }

    .work-20 {
        font-size: 16px;
    }

    #lionCanvas,
    #lionCanvasDark {
        width: 400px;
    }

    .team-main-img .w75 {
        width: 100%;
    }

    .team-container {
        padding: 100px 0 50px;
    }

    .hb-right h3 {
        font-size: 60px;
    }

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 24px;
    }

    .client-logo ul li {
        width: 33%;
        height: 80px;
    }

    .client-logo ul li img {
        max-height: unset;
    }

    .home-page-work .h-work-cont p {
        font-size: 15px;
    }

    .client-logo {
        padding: 50px 0 100px;
    }

    .mainContainer {
        padding-top: 50px;
    }

    .wwr-animation {
        margin-top: 40px;
    }

    .h-expertise-box ul {
        max-width: 100%;
        justify-content: flex-start;
    }

    .h-expertise-box ul li {
        margin: 0 15px 15px;
        flex: 1;
        flex-basis: 40%;
    }

    .hs-service {
        top: 60px;
    }

    .h-expertise-box ul::after {
        top: 0;
        content: none;
    }
}

@media all and (max-width: 480px) {
    .clients-wrap {
        margin-top: 20px;
    }

    :root {
        --expWidth: 23px;
        --dotBoxLiWidth: 10px;
        --dotBoxDuration: 0.5s;
        --servDetLeft: 150px;
    }

    .serv-ban-right-img {
        width: 310px;
        height: 310px;
    }

    .expertiseImg {
        height: 195px;
    }

    .br-480 {
        display: block;
    }

    .h-blog-box h5 {
        font-size: 8.5vw;
    }

    .hs-service h2.hsTrigBtn:nth-last-of-type(2),
    .hs-service h4.hsTrigBtn:nth-last-of-type(2) {
        top: 60px;
    }

    .hs-service h2.hsTrigBtn:nth-last-of-type(1),
    .hs-service h4.hsTrigBtn:nth-last-of-type(1) {
        top: 120px;
    }

    .whoWeAreImg .wwa.wwa1 {
        left: 2vw;
        width: 9vw;
        height: 9vw;
    }

    .whoWeAreImg .wwa.wwa2 {
        right: 2vw;
        width: 9vw;
        height: 9vw;
    }

    .hsDotBox {
        width: 35px;
        height: 35px;
    }

    .hsDotBox:before {
        left: -8px;
        top: -8px;
        width: calc(100% + 16px);
        height: calc(100% + 16px);
    }

    .hs-service h2,
    .hs-service h4,
    .hs-service ul {
        padding-left: 72px;
    }

    .hs-service ul {
        margin-top: 10px;
    }

    .hs-service ul li {
        line-height: 1;
    }

    .hs-service ul li a,
    .hs-service ul li p {
        font-size: 18px;
        padding-bottom: 2px;
    }

    .hdg6 {
        margin-bottom: 25px;
    }

    .h-expertise-box ul li a {
        font-size: 18px;
    }

    .meet-founder-box,
    .founder-box {
        padding: 40px 20px;
    }

    .founder-pic-box p {
        font-size: 16px;
    }

    .founder-pic {
        height: auto;
        width: 45%;
    }

    .meet-founder-box {
        min-height: auto;
    }

    .founder-pic-box {
        margin-top: 100px;
    }

    .founder-box h6 {
        margin-left: 20px;
    }

    .expertiseImg {
        max-width: 340px;
    }

    .expertiseImg .exp.exp1 {
        top: 13px;
        left: 90px;
    }

    .expertiseImg .exp.exp2 {
        top: 13px;
    }

    .expertiseImg .exp.exp3 {
        top: 13px;
        right: 93px;
    }

    .testimonial-cont p {
        font-size: 16px;
    }

    .hs-img-mob-up {
        height: calc(100vh - 370px);
    }

    .hdg7,
    .hdg6 {
        margin-bottom: 15px;
    }

    .h-expertise-box h5 {
        font-size: 18px;
    }

    .h-blog-box .h-img img.blogImg2 {
        width: 75px;
    }

    .h-blog-right {
        height: 65vw;
    }

    .h-quote-box h4 {
        font-size: 7vw;
        line-height: 1.5;
    }

    .h-blog-box p {
        max-width: 100%;
    }

    .h-blog-box h5 {
        margin-bottom: 20px;
    }

    .h-blog-box {
        padding: 50px 0 20px;
    }

    .hs-ellipse-mob {
        left: 40%;
    }

    .h-expertise-box ul li {
        margin: 0 11px 10px;
    }

    .hb-right h3 {
        font-size: 12.6vw;
    }

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 20px;
    }

    .hdg6,
    .hdg7 {
        font-size: 16px;
    }

    .hs-box {
        padding: 90px 0 0;
    }

    .hs-service-3 {
        padding-bottom: 50px;
    }

    .blg {
        width: 14px;
        height: 14px;
    }

    .blg.blg1 {
        left: 18px;
    }

    .blg.blg2 {
        left: 53px;
        bottom: 3px;
    }

    .blg.blg3 {
        left: 34px;
        bottom: 16px;
    }

    .h-blog-box .h-img .blogImg1 {
        bottom: -30px;
    }

    .history-swiper-container h4 {
        padding: 10px 15px;
        font-size: 18px;
        line-height: 1.5;
    }

    .history-swiper-container h3 {
        padding: 10px 15px 10px 0;
    }

    .about-vision--left ul li a {
        font-size: 18px;
    }

    .ab-vm-cont h4 {
        font-size: 26px;
        line-height: 1.3;
    }

    .s-othr-box .hdg6 {
        margin-bottom: 25px;
    }

    .serv-padding {
        padding: 60px 0 30px;
    }

    .serv-detail-section p {
        font-size: 20px;
        line-height: 1.5;
    }

    .serv-detail-section .hdg1,
    .serv-detail-section p {
        margin-bottom: 30px;
    }

    .abt-founder-cont-in {
        padding: 25px;
        padding-top: 32px;
    }

    .about-description p span b {
        font-size: 8vw;
    }

    .qt-box-4,
    .qt-box-3 {
        max-width: 100%;
    }

    .quote-pop-container {
        padding: 40px 15px;
        padding-top: 25px;
    }

    .qt-box-in {
        padding: 30px 0;
    }

    .quote-back {
        width: 30px;
        height: 30px;
        line-height: 23px;
    }

    .quote-pop-container .filled .form-label {
        width: 100%;
    }

    .quote-pop-container .input-box {
        width: 100%;
    }

    .qt-box-4 .button-grd-line,
    .qt-box-3 .button-grd-line {
        margin: 30px auto 0;
    }

    .qt-box-5 h3 {
        font-size: 36px;
    }

    .qt-box-5 h4 {
        font-size: 24px;
    }

    #lionCanvas,
    #lionCanvasDark {
        width: 100%;
    }

    .about-banner .ab-ban-1,
    .about-banner .ab-ban-3 {
        top: 330px;
    }

    .about-banner {
        padding-bottom: 360px;
        padding-top: 110px;
    }

    .ab-vm-cont {
        padding-top: 0;
    }

    div#responseContainer.in {
        top: -80px;
        padding-bottom: 0;
    }

    .serv-ban-cont .servHdn {
        font-size: 48px;
        line-height: 1.3;
    }

    .serv-ban-cont .servsub-hdn {
        font-size: 28px;
        line-height: 1.5;
    }

    .blogImg2Up {
        width: 75px;
        height: 174px;
    }

    .team-pagemainWrapp .team-padding {
        padding-top: 90px;
    }

    .h-expertise-box ul {
        max-width: 340px;
    }

    .scrollTop {
        width: 35px;
        height: 35px;
        bottom: 50px;
    }

    .scrollTop.in {
        bottom: 100px;
    }

    .leo9-counters ul:before {
        display: none;
    }

    .leo9-counters {
        margin-bottom: 50px;
    }

    .leo9-counters ul li {
        font-size: 16px;
        padding: 0;
        width: 33.333333%;
    }

    .hd480 {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        position: relative;
        top: -2px;
    }

    .sw480 {
        display: none;
    }

    .client-logo ul li {
        width: 33%;
        height: 60px;
    }

    .client-logo ul {
        justify-content: center;
    }

    .h-work-tab-nav ul li span {
        display: block;
        margin: 0 auto 10px;
    }

    .about-banner .hdg1 {
        font-size: 24px;
    }

    .abt-founder-cont-in .read-linkdin {
        margin: 5px 0 10px;
    }

    .q-radio-box label {
        font-size: 20px;
        line-height: 40px;
    }

    .founder-pic-box {
        margin-top: 0;
    }

    .founder-box p {
        font-size: 16px;
    }

    .h-quote {
        width: 25px;
        top: -38px;
    }

    .hf-cont {
        padding-top: 35px;
        padding-left: 20px;
        margin-top: 30px;
    }

    .h-stars {
        left: 20px;
    }

    .bl-hdn h3 {
        font-size: 20px;
    }

    .testimonial-cont p,
    .h-blog-box p {
        font-size: 16px;
    }

    .hs-service {
        height: 100%;
    }

    .hs-img-mob {
        width: 350px;
        height: 350px;
    }

    .home-page-work .hwork-img {
        height: 275px;
    }

    .home-page-work .salon-pay .hwork-img img {
        bottom: -15px;
    }

    .home-page-work.h-work-box {
        max-width: 100%;
        padding: 60px 24px;
    }
}

@media all and (max-width: 460px) {

    .hb-right ul li:nth-of-type(4) a:after,
    .hb-right ul li:nth-of-type(4) p:after {
        opacity: 1;
    }

    .hb-right ul li:nth-of-type(3) a:after,
    .hb-right ul li:nth-of-type(3) p:after {
        opacity: 0;
    }

    .whoWeAreImg .wwa.wwa1,
    .whoWeAreImg .wwa.wwa2 {
        margin-top: -3px;
    }

    .hs-img-mob {
        width: 300px;
        height: 300px;
    }

    .about-vision--left ul li {
        margin-right: 30px;
    }

    .about-banner .ab-ban-1,
    .about-banner .ab-ban-3 {
        max-width: 40vw;
    }

    .about-banner .ab-ban-2,
    .about-banner .ab-ban-4 {
        bottom: 20px;
    }

    .about-banner--content {
        top: 0;
    }

    .serv-ban-right-img {
        width: 78vw;
        height: 78vw;
    }

    .about-banner {
        padding-bottom: 360px;
    }

    .br-460 {
        display: block;
    }

    .home-page-work .hwork-img {
        height: 260px;
    }

    .home-page-work .hwork-img img {
        width: 90%;
    }

    .frame-47696 {
        border-radius: 16px;
    }
}

@media all and (max-width: 400px) {
    :root {
        --expWidth: 18px;
    }

    .grid .container {
        padding: 0 24px;
    }

    .hdg1,
    .who-we-are-box .hdg1 {
        font-size: 24px;
    }

    .h-expertise-box,
    .h-founder-box {
        padding: 0 0 70px;
    }

    .founder-pic-box {
        margin-top: 80px;
    }

    .founder-pic-box p {
        font-size: 14px;
    }

    .founder-pic-box {
        margin-top: 100px;
    }

    .expertiseImg {
        max-width: 290px;
    }

    .expertiseImg .exp.exp1 {
        top: 25px;
        left: 77px;
    }

    .expertiseImg .exp.exp2 {
        top: 25px;
    }

    .expertiseImg .exp.exp3 {
        top: 25px;
        right: 80px;
    }

    .whoWeAreImg .wwa.wwa1 {
        left: 2.4vw;
        margin-top: 1px;
    }

    .whoWeAreImg .wwa.wwa2 {
        right: 2.4vw;
        margin-top: 1px;
    }

    .mob-quote-btn.in {
        bottom: 15px;
    }

    .deskFooter {
        padding-bottom: 50px;
    }

    .hs-ellipse-mob {
        top: 0;
    }

    .hs-img-mob-1.active .hs-ellipse-mob,
    .hs-img-mob-2.active .hs-ellipse-mob,
    .hs-img-mob-3.active .hs-ellipse-mob {
        width: 50%;
        height: 50%;
    }

    .founderTriggerEnd {
        top: 0px;
    }

    .hs-img-mob {
        width: 250px;
        height: 250px;
    }

    .hist-det-box {
        padding: 20px;
    }

    .history-handler {
        margin-top: 0;
    }

    .abt-founder-cont-in {
        padding: 20px;
        padding-top: 32px;
    }

    .abt-founder-cont {
        padding-top: 50px;
    }

    .h-work-cont ul li {
        font-size: 14px;
    }

    .qt-box-5 h3 {
        font-size: 30px;
    }

    .qt-box-5 h4 {
        font-size: 20px;
    }

    .about-banner .ab-ban-1,
    .about-banner .ab-ban-3 {
        top: 330px;
    }

    .abt-dounder-img {
        width: 140px;
        right: 0px;
    }

    .abt-fnd-detail {
        padding-right: 110px;
        padding-top: 50px;
    }

    .serv-ban-cont .servHdn {
        font-size: 11vw;
    }

    .serv-ban-cont .servsub-hdn {
        font-size: 6vw;
    }

    .h-expertise-box ul li a {
        font-size: 24px;
    }

    .about-banner .ab-ban-2 {
        max-width: 100vw;
    }

    .whoWeAreImg .wwa.wwa1 {
        left: 2.5vw;
        margin-top: -1px;
    }

    .whoWeAreImg .wwa.wwa2 {
        right: 2vw;
        margin-top: -1px;
    }

    .hw-cont h5 {
        padding: 0;
        flex: auto;
    }

    .hw-cont h3 {
        width: 100%;
        margin-bottom: 5px;
    }

    .hw-cont p {
        margin-left: 0;
    }

    .h-work-tab-nav ul li {
        font-size: 20px;
    }

    .founder-pic-box {
        margin-top: 0;
    }

    .meet-founder-box h6 {
        font-size: 52px;
    }

    .home-page-work .salon-pay .hwork-img img {
        bottom: -30px;
    }

    .home-page-work .hwork-img img {
        margin: 0;
    }

    .frame-47706 {
        gap: 20px;
    }
}

@media all and (max-width: 360px) {
    .hs-img-mob {
        width: 200px;
        height: 200px;
    }

    .client-logo {
        padding: 30px 0 50px;
    }

    .abt-founder-cont-in p {
        font-size: 16px;
    }

    .abt-fnd-detail {
        padding-top: 30px;
    }

    .about-banner .ab-ban-1,
    .about-banner .ab-ban-3 {
        top: 300px;
    }

    .about-banner {
        padding-bottom: 430px;
    }
}

@media all and (max-width: 340px) {

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 19px;
    }

    .home-page-work .hwork-img {
        height: 240px;
    }
}

@media all and (max-width: 340px) {
    .hs-img-mob {
        width: 170px;
        height: 170px;
    }
}

@media all and (max-width: 320px) {
    .home-page-work .salon-pay .hwork-img img {
        bottom: -40px;
    }
}

@media screen and (max-height: 700px) {
    .scroll_Down_box {
        height: 70px;
        bottom: 10px;
        font-size: 14px;
    }
}

@media (max-width: 1024px) and (min-height: 1200px) {

    .about-banner .ab-ban-1,
    .about-banner .ab-ban-2 {
        max-width: initial;
        width: 32%;
    }

    .about-banner .ab-ban-3,
    .about-banner .ab-ban-4 {
        max-width: initial;
        width: 40%;
    }
}

@media (max-width: 400px) and (min-height: 700px) {
    .lion-content-box {
        padding-top: 80px;
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    .client-logo {
        padding: 120px 0 30px;
    }

    /* ---- particles.js container ---- */
    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--myClrLight);
        background-position: 50% 50%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }

    .hb-right ul li a,
    .hb-right ul li p {
        font-size: 20px;
    }
}

@media (min-width: 1200px) and (max-height: 768px) {
    .section-padding.contact .container {
        top: 52%;
    }
}

@media (min-width: 1200px) and (max-height: 640px) {
    .section-padding.contact .container {
        top: 52%;
    }
}

/*# sourceMappingURL=main.css.map */