* {
    font-family: 'Poppins', sans-serif !important;

}
.fs90 {
    font-size: var(--fs90)
}

.fs80 {
    font-size: var(--fs80)
}

.fs72 {
    font-size: var(--fs72)
}

.fs64 {
    font-size: var(--fs64)
}

.fs56 {
    font-size: var(--fs56)
}

.fs48 {
    font-size: var(--fs48)
}

h1.hero-title {
    font-size: var(--fs90);
    line-height: 2;
    font-weight: 900;
    margin: 0;
    position: static;
    opacity: 1
}


.hero-para {
    cursor: default;
    font-size: 24px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Poppins';
    font-weight: 700;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
    opacity: 1;
    margin-top: 24px
}

@media (max-width:990px) {
    :root {
        --fs90: 70px
    }
}

@media (max-width:400px) {
    :root {
        --fs90: 60px
    }
}

@media (max-width:350px) {
    :root {
        --fs90: 50px
    }
}



.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%
}
/* Change */
.w100 {
    width: 100%;
    margin-left: 0;
    padding-left: 15px;
    padding-right: 15px;
    position: relative
}

/* .w100 {
    width: 80%;
    margin-left: 150px;
    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
}
.Work-title {
    color: black;
    text-align: center;
    font-weight: bolder;
    font-size: 200%;
    
}
@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%
    }
}

*,
*: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: .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: .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 {
    margin-bottom: .5rem;
    font-family: 'Poppins';
    font-weight: 700;
    line-height: 1.2
}

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 .2s ease-in-out;
    -webkit-transition: all .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;
    padding-bottom: 80px;
    margin-bottom: 0;
    font-family: 'Poppins';
    font-weight: 800
}

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

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

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

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

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

.button {
    font-size: 24px;
    color: #705df6;
    font-family: 'Poppins';
    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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.button1 {
    cursor: pointer;
    font-size: 18px;
    color: #ff3939;
    border: 0;
    font-family: 'Poppins';
    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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.button1:hover {
    color: #076aff
}

.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 .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

.button-grd span {
    padding: 20px;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 9;
    /* color: var(--myClrLight); */
    color: #000000;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all .5s ease-in-out;
    -webkit-transition: all .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 .5s ease-in-out;
    -webkit-transition: all .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: 150px;
    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 .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

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

.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: 0;
    top: 0;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border-radius: 4px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .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(--myClrLight);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all .5s ease-in-out;
    -webkit-transition: all .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 .5s ease-in-out;
    -webkit-transition: all .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: .2s all ease-in-out;
    -moz-transition: .2s all ease-in-out;
    transition: .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: 'Poppins';
    font-weight: 900;
    padding: 0 58px
}

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

.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
}

.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: 0 0 0 5px rgba(20, 168, 158, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(20, 168, 158, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(20, 168, 158, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(20, 168, 158, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(83, 81, 247, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(83, 81, 247, 0.31);
    box-shadow: 0 0 0 5px rgba(83, 81, 247, 0.31);
    border: 1px solid var(--myClrLight)
}

.case-study-travelxp .caseStudy-banner-wrapp {
    background: rgba(11, 11, 11, 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: 0 0 0 5px rgba(217, 36, 61, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(217, 36, 61, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(66, 166, 232, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(66, 166, 232, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(249, 166, 0, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(249, 166, 0, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(253, 0, 51, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(253, 0, 51, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(83, 81, 247, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(83, 81, 247, 0.31);
    box-shadow: 0 0 0 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: 0 0 0 5px rgba(83, 81, 247, 0.31);
    -moz-box-shadow: 0 0 0 5px rgba(83, 81, 247, 0.31);
    box-shadow: 0 0 0 5px rgba(83, 81, 247, 0.31);
    border: 1px solid var(--myClrLight)
}

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

.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: 'Poppins';
    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: 0
}

.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: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    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: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1)
}

.cs-title-one {
    font-size: 40px;
    color: var(--myClrDark);
    line-height: 1.5;
    font-family: 'Poppins';
    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: 'Poppins';
    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: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1)
}

.pg-boxes h4 {
    color: var(--myClrLight);
    font-size: 24px;
    line-height: 1.5;
    font-family: 'Poppins';
    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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/resarch-top-border.png) repeat center center / contain; */
    background: url(../img/resarch-top-border.png) repeat center center / contain;
    transition: all .5s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    margin-bottom: 30px
}

.cs-messFrom-res .messFrom-res-boxes h5 {
    color: #707070;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Poppins';
    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: #333;
    font-size: 24px;
    line-height: 1.5;
    font-family: 'Poppins';
    font-weight: 900;
    margin-bottom: 0;
    text-transform: capitalize
}

.cs_usrerFlow_boxes p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    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
}

.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: 'Poppins';
    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: 0 3px 83px 0 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: 'Poppins';
    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: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 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: 'Poppins';
    font-weight: 900;
    margin-bottom: 20px
}

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

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

@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) {
    .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: 0
    }
    .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: 'Poppins';
        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: 0
    }
    .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: 0 10px 5px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 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: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 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 0
    }
    .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: 'Poppins';
    font-weight: 900;
    font-size: 52px;
    color: var(--myClrDark)
}

.servsub-hdn {
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    /* background: transparent url(https://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/dots.svg) repeat-x bottom; */
    background: transparent url(../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: 'Poppins';
    font-weight: 700;
    font-size: 18px;
    line-height: 1.7;
    color: var(--myClrDark)
}

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

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

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

.blog-read.red a {
    color: #ff3968;
    /* background: transparent url(https://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/dots1.svg) repeat-x bottom */
    background: transparent url(../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: 'Poppins';
    font-weight: 900;
    font-size: 24px;
    color: var(--myClrDark);
    margin-bottom: 10px
}

.s-work-img p {
    font-family: 'Poppins';
    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 {
    margin-bottom: 100px
}

.s-we-offer .hdg1 {
    padding-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
}

.serv2-comm-hdn {
    font-family: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    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-btn {
    text-align: center;
    margin-top: 20px
}

.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
}

.busi-ban-cont {
    position: absolute;
    max-width: 530px;
    right: 0;
    margin-top: 30px
}

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

.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 .3s ease-in-out;
    -webkit-transition: all .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 {
    -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%)
}

.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 .3s ease-in-out;
    -webkit-transition: all .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 .3s ease-in-out;
    -webkit-transition: all .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: .1;
    transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out
}

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

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

.dropbox-cont.col3:after {
    /* background: transparent url(https://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/wave3.svg) repeat-x 0 80%; */
    background: transparent url(../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: 'Poppins';
    font-weight: 900;
    font-size: 38px;
    color: var(--myClrDark);
    line-height: 1;
    margin-bottom: 10px
}

.dropbox-cont p {
    font-family: 'Poppins';
    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
}

.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 .3s ease-in-out;
    -webkit-transition: all .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-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: 'Poppins';
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 0
}

.client-nam p {
    font-family: 'Poppins';
    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: 'Poppins';
    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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/quote1.svg); */
    background-image: url(../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
}

.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 .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out
}

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

.client-testimo-pagi .c-arw.swiper-button-disabled {
    opacity: .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: 'Poppins';
    font-weight: 900;
    text-align: center;
    margin-bottom: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.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
}

.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
}

.s-we-off-box p {
    font-size: 24px;
    line-height: 36px;
    color: var(--myClrDark);
    font-family: 'Poppins';
    font-weight: 700;
    margin-bottom: 70px
}

.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
}

#readMore {
    margin-top: 20px;
    font-size: 18px;
    text-transform: capitalize;
    color: #74ff39;
    border: 0;
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 700
}

.about-description p span {
    margin-bottom: 30px;
    display: block;
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 900
}

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

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

.modalCont {
    margin-bottom: 30px
}

.innerModal {
    color: #ff3968;
    font-size: 18px;
    font-family: 'Poppins';
    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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

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

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

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);
    background: var(--clr)
}

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

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

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

@media all and (max-width:1600px) {
    :root {
        --humanImgbox: translate(-50%, 20px) scale(.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(.7);
        --designTop: 480px;
        --designLeft: -250px;
        --techLeft: -400px;
        --techTop: 660px
    }
    .s-we-offer .servsub-hdn {
        margin-bottom: 80px
    }
    .s-we-offer .hdg1 {
        padding-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
    }
    .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 {
        padding-bottom: 25px
    }
}

@media all and (max-width:1024px) {
    :root {
        --humanImgbox: translate(-50%, 0) scale(.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
    }
    .tech-ban-cont .hdg6,
    .busi-ban-cont .hdg6 {
        margin-bottom: 15px
    }
    .tech-ban-cont .servsub-hdn3,
    .busi-ban-cont .servsub-hdn3 {
        margin-top: 0
    }
    .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
    }
}

@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
    }
    .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
    }
    .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
    }
    .client-slider-sec .hdg1 {
        padding-bottom: 30px
    }
    .srvIconUp {
        width: calc(100% / 4);
        height: 130px
    }
    .srvIcon {
        padding: 10px 0
    }
}

@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
    }
    .srvIcon>div {
        width: 50px;
        height: 50px
    }
    .srvIconUp {
        height: auto
    }
    .client-slider-sec .hdg1 span {
        width: 52px
    }
}

@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 {
        margin-bottom: 60px
    }
    .s-we-offer .hdg1 {
        padding-bottom: 60px
    }
    .srvIconUp {
        width: calc(100% / 3)
    }
    .srvIcon p {
        font-size: 16px
    }
}

@media all and (max-width:480px) {
    :root {
        --humanImgbox: translate(-50%, 20px) scale(.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
    }
    .tech-orbit-img,
    .dotTechOrbit {
        max-width: 300px;
        max-height: 300px
    }
    .tech-orbit-img .techmob {
        max-width: 130px;
        max-height: 130px
    }
    .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
    }
}

@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
    }
    .srvIcon p {
        font-size: 14px
    }
}

@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: 0
    }
    .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 {
        margin-bottom: 40px
    }
    .s-we-offer .hdg1 {
        padding-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
    }
    .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
    }
    .client-slider-sec .hdg1 br {
        display: none
    }
}

@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: 'Poppins';
    font-weight: 900
}

.back img {
    position: relative;
    top: -1px
}

.back:hover {
    color: #707070
}

.service-title {
    font-size: 72px;
    color: #5857f9;
    font-family: 'Poppins';
    font-weight: 900;
    margin-top: 40px
}

.service-subtitle {
    font-size: 56px;
    font-family: 'Poppins';
    font-weight: 900;
    color: var(--myClrDark);
    margin-top: 40px
}

.service-bodytext {
    font-size: 18px;
    color: #707070;
    font-family: 'Poppins';
    font-weight: 900;
    margin-top: 40px
}

.service-subhead {
    font-size: 32px;
    color: #5857f9;
    font-family: 'Poppins';
    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: 0 100px;
    font-size: 42px;
    margin: 0
}

.team--head {
    font-family: 'Poppins';
    font-weight: 900;
    font-size: 30px;
    color: #5857f9;
    margin-bottom: 10px;
    text-transform: capitalize
}

.team--info {
    padding: 0 100px;
    font-size: 42px;
    margin: 0;
    font-family: 'Poppins';
    font-weight: 900;
    line-height: 1.3;
    color: var(--myClrDark)
}

.teammem {
    margin-bottom: 50px;
    display: block;
    text-align: center
}

.teammem .team-img {
    transition: all .2s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    font-weight: 900;
    margin: 20px 0 5px;
    color: var(--myClrDark);
    text-align: center
}

.teamname {
    font-size: 16px;
    font-family: 'Poppins';
    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 0
}

.aboutsub {
    font-size: 36px;
    font-family: 'Poppins';
    font-weight: 900
}

.serv-ban-cont.quote {
    padding: 150px 0 100px;
    opacity: .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: 'Poppins';
    font-weight: 900
}

.filter-button.active {
    background: var(--myClrDark);
    color: var(--myClrLight)
}

.black {
    color: var(--myClrDark)
}

.medium {
    font-family: 'Poppins';
    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: 0;
        font-size: 32px
    }
    .team--head {
        font-size: 24px
    }
    .teammem .emply-img {
        height: 390px
    }
}

@media all and (max-width:990px) {
 
    .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 0
    }
    .team-main-img .w75 {
        width: 80%
    }
    .team-padding {
        padding: 130px 0 40px
    }
    .team-padding .servsub-hdn,
    .culturesec .servsub-hdn {
        font-size: 30px;
        padding: 0 40px
    }
    .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) {
    .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
    }
}

.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: 0;
    margin-top: 30px;
    flex: 0 0 100%;
    width: 100%;
    position: relative
}

.form-label {
    position: relative;
    color: var(--myClrDark);
    background-color: var(--myClrLight);
    font-family: 'Poppins';
    font-weight: 900;
    transition: all .3s linear;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: top
}

.input-box {
    margin-left: 4px;
    display: inline-block;
    width: 305px;
    position: relative
}

.error {
    color: #f00;
    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: 0 0 0 0;
    width: 100%;
    outline: 0;
    border: 0;
    /* color: var(--clr2); */
    color: #9c34f0;
    font-family: 'Poppins';
    font-weight: 600;
    border-bottom: 1px solid #e1e1e1;
    transition: all .3s linear
}

.form-input:focus {
    border-bottom: 1px solid var(--clr2)
}

.form-input.filled {
    border-bottom: 1px solid var(--clr2)
}

.contact .sub-line {
    font-family: 'Poppins';
    font-weight: 900;
    font-size: 24px;
    color: var(--myClrDark);
    transition: all .3s linear;
    text-align: left !important;
    margin: 0 !important;
    width: auto !important
}

.contact .hdg1 {
    font-size: 72px;
    padding-bottom: 20px;
    line-height: 1.1;
    color: var(--myClrDark);
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    letter-spacing: 0;
    transition: all .3s linear;
    opacity: 1
}

.contact .check-btn {
    opacity: 1;
    padding: 0 10px 10px;
    transition: all .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); */
    color: #9c34f0;
    font-family: 'Poppins';
    font-weight: 600;
    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: 0;
    padding-bottom: 0
}

.filled .sub-line {
    font-size: 0
}

.filled .information {
    height: 700px;
    margin-top: 0
}

.filled .back-pg {
    opacity: 1;
    visibility: visible;
    transition: all .5s ease;
    margin: 0
}

.filled .form-label,
.filled .form-input {
    font-size: 24px
}

.txField {
    position: relative;
    margin-bottom: 1.3rem;
    height: auto
}

.filled .sucess.information {
    height: 0
}

.success-msg {
    font-family: 'Poppins';
    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
}

.information {
    margin-top: 80px;
    overflow: hidden;
    height: 135px;
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    transition: all .3s linear
}

.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 .3s;
    transition: ease-in .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: #f00
}

.form-input.style4:focus::-webkit-input-placeholder {
    text-indent: -300px
}

.chbox {
    display: inline-block;
    border: 1px solid #ddd;
    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: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    font-size: 16px;
    padding: 2px 16px;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    transition: all .2s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    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: 'Poppins';
    font-weight: 900
}

.send.button-grd-line span,
.back-pg.button-grd-line span {
    font-family: 'Poppins';
    font-weight: 900
}

.back-pg {
    left: -10px;
    top: -45px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all .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
}

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: 'Poppins';
    font-weight: 900;
    margin-bottom: 0;
    text-transform: capitalize
}

address h6 {
    font-size: 24px;
    font-family: 'Poppins';
    font-weight: 700;
    margin-bottom: 20px
}

address p {
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 500;
    line-height: 1.5
}

address strong {
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 900
}

address.border-none {
    border-right: 0 solid rgba(0, 0, 0, 0.1);
    margin-left: 10px
}

.form-input.error {
    border-bottom: 1px solid #f00;
    color: #f00
}

label.error {
    display: none;
    margin: 0;
    color: #f00;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 10px
}

.c-img {
    top: 30%
}

.c-img img {
    width: 100%
}

.call-us {
    bottom: 65px;
    float: right;
    right: 16px
}

.call-us h4 {
    font-size: 64px;
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    display: inline-block;
    color: #999;
    line-height: 68px;
    line-height: .95
}

.call-us ul {
    font-size: 18px;
    font-family: 'Poppins';
    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: 'Poppins';
    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); */
     color: #9c34f0;
    text-decoration: underline
}

.call-us ul .mail a:hover {
    /* color: var(--clr2); */
     color: #9c34f0;
    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 0;
    line-height: 67px;
    text-transform: capitalize
}

.work-head p {
    font-size: 24px;
    font-family: 'Poppins';
    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: 'Poppins';
    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: #999;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 6px
}

.h-work-def ul li:first-child:before {
    display: none
}
/* new design for boder */

.work-list {
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.work-list:hover {
    border-color: #ac4afd; /* brand color */
    box-shadow: 0 10px 30px rgba(172, 74, 253, 0.25);
}
/* new design for boder */

.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: 'Poppins';
    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: 'Poppins';
    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 .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: #0212f0
}

.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) {
    .information {
        margin-top: 123px;
        height: 130px
    }
    .contact .hdg1 {
        font-size: 62px;
        padding-bottom: 10px
    }
    .contact .sub-line {
        font-size: 21px
    }
    .contact .check-btn {
        height: 130px
    }
    .filled .hdg1 {
        font-size: 0;
        padding-bottom: 0
    }
    .filled .sub-line {
        font-size: 0
    }
    .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: 'Poppins';
        font-weight: 900
    }
    .call-us ul li {
        margin-top: 8px
    }
    .call-us h4 {
        font-size: 43px
    }
    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: 0
    }
    .work-head {
        padding-left: 0
    }
    .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%
    }
    .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
    }
    .call-us ul {
        font-size: 16px;
        margin-left: 20px
    }
    .call-us ul li {
        margin-top: 8px
    }
    .call-us h4 {
        font-size: 43px
    }
    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: 'Poppins';
        font-weight: 900
    }
    .success-msg.show {
        top: 50%
    }
    .call-us.mob-call {
        display: block;
        margin-top: 0;
        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: 0;
        margin-right: -2px
    }
    .call-us ul {
        margin-left: 0;
        width: 49%
    }
    .desk-header .container::after,
    .desk-header .container::before {
        content: none
    }
    .contact .hdg1 {
        font-size: 55px;
        padding-bottom: 10px
    }
    .contact .sub-line {
        font-size: 21px
    }
    .contact .information {
        height: 135px;
        margin-top: 165px
    }
    .filled .hdg1 {
        font-size: 0;
        padding-bottom: 0
    }
    .filled .sub-line {
        font-size: 0
    }
    .filled .information {
        height: 680px
    }
    .call-us {
        position: relative;
        bottom: 0;
        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: 50%
    }
}

@media all and (max-width:800px) {
    .information h6 span:after {
        bottom: -3px
    }
    .contactUs {
        margin-top: 0;
        height: auto
    }
    .contact .hdg1 {
        font-size: 70px;
        padding-bottom: 20px
    }
    .contact .sub-line {
        font-size: 36px;
        margin-bottom: 10px
    }
    .contact .information {
        margin-top: 135px;
        height: 130px
    }
    .filled .hdg1 {
        font-size: 0;
        padding-bottom: 0
    }
    .filled .sub-line {
        font-size: 0
    }
    .filled .information {
        margin-top: 0;
        height: 700px
    }
    .send {
        position: relative;
        margin-top: 0
    }
    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: 0 solid rgba(0, 0, 0, 0.1)
    }
    .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) {
    .form-label,
    .form-input {
        font-size: 24px
    }
    .contact .hdg1 {
        font-size: 80px;
        padding-bottom: 10px
    }
    .contact .sub-line {
        font-size: 30px
    }
    .contact .form-label,
    .contact .form-input {
        font-size: 24px
    }
    .filled .hdg1 {
        font-size: 0;
        padding-bottom: 0
    }
    .filled .sub-line {
        font-size: 0
    }
    .filled .form-label,
    .filled .form-input {
        font-size: 20px
    }
    .information .fields .w50 {
        width: 100%
    }
    .information {
        margin-top: 60px;
        height: 140px
    }
    .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: 0
    }
    .txField {
        margin-bottom: 1.15rem;
        height: auto
    }
    .contact .hdg1 {
        font-size: 65px;
        padding-bottom: 10px
    }
    .contact .sub-line {
        font-size: 25px
    }
    .contact .form-label,
    .contact .form-input {
        font-size: 22px
    }
    .contact .information {
        height: 108px;
        margin-top: 185px
    }
    .filled .hdg1 {
        font-size: 0;
        padding-bottom: 0
    }
    .filled .sub-line {
        font-size: 0
    }
    .filled .form-label,
    .filled .form-input {
        font-size: 18px
    }
    .filled .information {
        margin-top: 5px;
        height: 620px
    }
    .list-inline-item:not(:last-child) {
        margin-right: .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) {
    .caseStudy--gallSec-wrap.width30p .row {
        justify-content: center
    }
    .grid .work-list {
        margin-bottom: 50px
    }
    .information {
        margin-top: 0
    }
    .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;
        padding-bottom: 10px
    }
    .contact .sub-line {
        font-size: 22px
    }
    .contact .form-label,
    .contact .form-input {
        font-size: 20px
    }
    .contact .information {
        height: 110px
    }
    .filled .hdg1 {
        font-size: 0;
        padding-bottom: 0
    }
    .filled .sub-line {
        font-size: 0
    }
    .filled .form-label,
    .filled .form-input {
        font-size: 18px
    }
    .filled .information {
        height: 620px
    }
    .servsub-hdn {
        font-size: 34px
    }
    .serv2-comm-hdn {
        font-size: 22px;
        margin-bottom: 10px
    }
    .list-inline-item:not(:last-child) {
        margin-right: .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%
    }
    .contact .information {
        height: 165px;
        margin-top: 120px
    }
    .filled .information {
        height: 780px;
        margin-top: 0
    }
    .coutry-form-group {
        flex-direction: column
    }
    .input-box {
        padding: 0 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
    }
    .information {
        height: 140px
    }
    .filled .information {
        height: 840px
    }
    .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: .8rem
    }
    .filled h6 {
        font-size: 0
    }
    .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
    }
    .contact .information {
        margin-top: 35px
    }
    .filled .information {
        margin-top: 0
    }
}

@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: 0
    }
    .wss-iconography .iconography-icons li {
        width: 25%;
        margin-bottom: 6px;
        padding: 15px
    }
    .wss-icn-cont img {
        height: 34px
    }
    .wss-icn-img {
        max-width: 240px
    }
    .filled .information {
        height: 1000px;
        margin-top: 0
    }
}
  /* --clr1: #fb5457;
    --clr2: #5857f9;
    --clr3: #9c34f0;
 */
:root {
    --clr1: #9f7efa;
    --clr2: #dacefc;
     --clr3: #7f57f6;
    --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;
    Change
    */
  
    --hs-img-box: 254px;
    --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: #000000;
    --myClrLight: #ffffff;
    
    --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 #000
}

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: #000000
}

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 .3s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out
}

body {
    color: var(--myClrDark);
    background: var(--myClrLight);
    font-size: 16px;
    font-family: 'Poppins';
    font-weight: 500;
    margin: 0;
    padding: 0;
    opacity: 0
}

input [type=submit],
button {
    outline: none !important
}

.container {
    max-width: 1250px;
    max-width: 1088px
}

.logo {
    /* width: 120px; */
    width: 160px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out;
    -webkit-transition: all .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 .5px 0 var(--myClrDark);
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.desk-header .button-grd-line {
    font-family: 'Poppins';
    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 .3s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    font-weight: 700;
    text-transform: capitalize
}

.navigation li:hover a {
    color: #000000
}

.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: 'Poppins';
    font-weight: 900;
    margin: 0;
    text-transform: capitalize
}

.hb-right h3 span {
    font-family: 'Poppins';
    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: 'Poppins';
    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: #808080
}

.blue {
    color: #5757f939
}

.h-img svg {
    height: 100%
}

.who-we-are-box {
    position: relative
}

.who-we-are-box .row {
    flex-direction: row-reverse
}
.who-we-are-box {
    padding-top: 0 !important;
}

.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 */
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
        
}

.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: 60px; */
    padding: 40px;
    border-radius: 10%;
    padding-bottom: 0;
    position: relative
}

.h-work h6 {
    font-size: 24px;
    font-family: 'Poppins';
    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 .7s ease-in-out;
    -webkit-transition: all .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: #7e59cf
}

.h-work.h-work-1 h6 {
    color: var(--clr1)
}

.h-work.h-work-2:before {
    background: #9d52e8
}

.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: #7f30e6
}

.h-work.h-work-3 h6 {
    color: var(--clr2)
}

.home-page-work .h-work.h-work-1:hover:before {
    background: rgb(119, 32, 190)
}

.home-page-work .h-work.h-work-2:hover:before {
    background: #5b029fb3
}

.home-page-work .h-work.h-work-3:hover:before {
    background: rgb(130, 37, 252)
}

.h-work-pt {
    position: absolute;
    left: 50%;
    top: 0
}

.h-work-pt-end {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -30px
}

.hwork-img {
    height: 350px;
    border-radius: 0;
    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: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    margin: 0;
    margin-top: 20px
}

.h-work-cont p {
    font-size: 18px;
    line-height: 1.4;
    color: var(--myClrDark);
    font-family: 'Poppins';
    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: 'Poppins';
    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
}

/* org */
.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: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    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: #f7003a;
    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: .5
}

.txt1 {
    font-size: 26px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Poppins';
    font-weight: 900
}



.copy {
    font-size: 14px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

.h-quote-box .button {
    text-align: center;
    transition: all .5s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    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;
    /* old colors */
    /* background: linear-gradient(to bottom, #ac4afd 0, #7926ed 100%);
    background: -webkit-linear-gradient(top,#0400ffe6 0, #8516e0 100%);
    background: -moz-linear-gradient(bottom, #8d0ff5 0, #7d1ed5 100%); */
    /* old colors */
    background: linear-gradient(
        135deg,
        #a4508b 0%,     /* soft purple */
        #5f0a87 50%,    /* deep violet */
        #6a11cb 75%,    /* vibrant blue-purple */
        #8e2de2 100%    /* pinkish violet */
    );
    
    z-index: 2;
    transition: all .5s ease-in-out;
    -webkit-transition: all .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: #383256
}

.hdg6.pur {
    color: #5857f9
}

.hdg6.voi {
    color: #8a14e5
}

.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: 'Poppins';
    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: 'Poppins';
    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: 50px
    }
}

.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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/round.svg) no-repeat center center / contain; */
    background: url(../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 {
    /* margin-left: 200px;
    margin-right: 200px; */
    position: relative;
    padding: 0 0 150px
}

.meet-founder-box {
    border: .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: 'Poppins';
    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 {
    text-align: center;
    font-size: 22px;
    font-family: 'Poppins';
    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: 'Poppins';
    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: #f00
}

.quoteTrigger .qut {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 0
}

.blogTriggerStart {
    position: absolute;
    top: 0
}

.dotsFilter {
    position: absolute;
    height: 0
}

.blg {
    opacity: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    top: -30px
}

.blg.blg1 {
    background: var(--clr1);
    left: 60px
}

.blg.blg2 {
    background: var(--clr2);
    left: 130px
}

.blg.blg3 {
    background: var(--clr3);
    left: 95px
}

.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: 'Poppins';
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1
}

.testimonial-cont p {
    font-size: 18px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Poppins';
    font-weight: 700;
    margin: 0
}

.testimonial-cont p span {
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    margin-bottom: 20px
}

.founder-pic-box p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--myClrDark);
    font-family: 'Poppins';
    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
}
/* Change */
.fndrRefPt {
    opacity: 0;
   
    width: 70px;
    display: inline-block;
    position: relative;
    align-items: center;
    height: 14px;
    margin-left: 100px
}

.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
}

/* helper circles that briefly appear where dots settle */
.dot-stay{
    position: fixed; /* fixed so it's placed relative to viewport */
    width: 12px;
    height: 12px;
    border-radius:50%;
    background: var(--clr1);
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 9999;
}
.dot-stay-2{ background: var(--clr2); }
.dot-stay.show{ opacity:1; transform: translate(-50%,-50%) scale(1); }

.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: 60px 0 100px */
    padding: 100px 0 0px
}

.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 {
    overflow: hidden;
    width: 100%;
}

.work-swiper-container .swiper-wrapper {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform;
}

.work-swiper-container .swiper-slide {
    flex-shrink: 0;
    width: auto;
}

.workTriggerStart {
    position: absolute;
    top: 50%
}

.workTriggerEnd {
    position: absolute;
    top: 10%;
    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: .3;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.dotBox li {
    position: absolute;
    border-radius: 50%;
    width: 0;
    height: 0;
    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%
}

.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: .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
    }
}

.lionAnimTriggerStart {
    
    position: absolute;
    top: 90%
}

.lionAnimTriggerEnd {
    position: absolute;
    bottom: 10%
}

.hs-box {
    /* padding: 150px 0; */
     padding: 3px 0;
    position: relative
}

.hs-box .container {
    height: 100%;
    margin-left: 120px;
    position: relative
}

.hs-service-in {
    position: sticky;
     margin-right: 50px;
    position: -webkit-sticky;
    top: var(--hsHeadingTop)
    
  
}

.hs-service {
    height: var(--service2Height);
    
    position: relative
}
.hs-service h2{
    margin-top: 10px;
}
.hs-service h2,
.hs-service h4 {
    font-size: 40px;
    color: var(--myClrDark);
    line-height: 1.3;
    margin-bottom: 0;
    font-family: 'Poppins';
    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: 'Poppins';
    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)
}

/* Change */
.hs-img-box-up {
    position: absolute;
    top: 0;
    right: -100px;
    height: 100%;
    width: calc(30% - 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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/ellipse.png) no-repeat center center / contain; */
    background: url(../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 .5s ease-in-out forwards
}

@keyframes hsImgActiveAnim01 {
    0% {
        opacity: 0;
        margin-top: 0;
        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 .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: 0;
        -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 .5s ease-in-out;
    -webkit-transition: all .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: .4;
    text-align: center
}

.client-logo ul {
    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(.5, .5);
    transform: scale(.5, .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: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    height: 50px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(140, 99, 241, 0.3);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

.mob-quote-btn.in {
    bottom: 30px;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
}


.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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}
s
.mob-menu h4 {
    font-size: 18px;
    color: rgb(104, 38, 225);
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    display: block;
    margin: 5px 0
}

.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: 'Poppins';
    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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.mob-overlay.in {
    opacity: .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: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    margin: 0;
    position: relative
}

.abt-founder-cont-in p:before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    /* background: url(https://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/left-quote.svg) no-repeat center center / contain; */
    background: url(../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: 'Poppins';
    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: 'Poppins';
    font-weight: 900
}

.abt-fnd-detail h4 {
    font-size: 18px;
    line-height: 1.6;
    color: #000;
    font-family: 'Poppins';
    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: 'Poppins';
    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 .2s linear;
    -webkit-transition: all .2s linear
}

.history-swiper-container h4 {
    font-size: 24px;
    font-family: 'Poppins';
    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: 0;
    width: 66%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    transition: all .2s linear;
    -webkit-transition: all .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 .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.h-arrow.swiper-button-disabled {
    opacity: .3;
    cursor: default
}

.h-pagination {
    margin: 0 40px;
    position: relative
}

.h-pagination span {
    font-size: 16px;
    color: var(--myClrDark);
    font-family: 'Poppins';
    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 .2s linear;
    -webkit-transition: all .2s linear
}

.hist-det-box p {
    font-size: 18px;
    font-family: 'Poppins';
    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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/ellipse.png) no-repeat center center / contain; */
    background: url(../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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/dots1.svg) repeat-x bottom */
    background: transparent url(../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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/dots2.svg) repeat-x bottom */
    background: transparent url(../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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/dots3.svg) repeat-x bottom */
    background: transparent url(../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: 'Poppins';
    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: rgb(170, 0, 255)
}

.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: #ff3939;
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 30px
}

.quote-pop-container h3 {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    position: relative;
    cursor: pointer;
    text-align: center;
    padding: 0 30px;
    border: 1px solid #ddd;
    text-transform: capitalize;
    width: 100%;
    max-width: 350px;
    margin-bottom: 10px;
    line-height: 50px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    font-weight: 900
}

.qt-box-5 h4,
.responseBox h4 {
    color: var(--myClrDark);
    font-size: 24px;
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: none;
    margin: 0
}

.qt-box-5 p,
.responseBox p {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 500
}

div#responseContainer {
    min-height: 91px;
    position: relative;
    top: 0;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    opacity: 0;
    transition-delay: .2s;
    -webkit-transition-delay: .2s
}

div#responseContainer.in {
    top: -50px;
    opacity: 1
}

div#responseContainer.in~.qt-final-btn {
    top: -50px;
    opacity: 1
}

.qt-final-btn {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    opacity: 0;
    transition-delay: .4s;
    -webkit-transition-delay: .4s;
    top: 0;
    margin-top: 30px;
    font-family: 'Poppins';
    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: .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'] .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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/round-dark.svg) no-repeat center center / contain */
    background: url(../img/round-dark.svg) no-repeat center center / contain
}

[data-theme='dark'] .h-work.h-work-1:before {
    background:#9564FE
}

[data-theme='dark'] .h-work.h-work-2:before {
    background: #9c34f0
}

[data-theme='dark'] .h-work.h-work-3:before {
    background: #704FF2
}

[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://decodersdigital.blr1.cdn.digitaloceanspaces.com/img/ellipse-dark.png) no-repeat center center / contain */
    background: url(../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
    }
}

.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: #000000;
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    margin-bottom: 20px
}

.darkModeComponent h4 {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Poppins';
    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: #d7d7d8 20;
    --dot-size: .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 #fff;
    -webkit-transform: scale(.5) rotate(0deg);
    transform: scale(.5) rotate(0deg);
    transition: transform .3s ease .1s, box-shadow .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 #000, 0 23px 0 #000, 23px 0 0 #000, -23px 0 0 #000, 15px 15px 0 #000, -15px 15px 0 #000, 15px -15px 0 #000, -15px -15px 0 #000;
    -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 #fff;
    -webkit-transform: scale(1) rotate(-2deg);
    transform: scale(1) rotate(-2deg);
    transition: box-shadow .5s ease 0s, transform .4s ease .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 .2s ease
}

.switch h4 {
    color: var(--myClrDark);
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 900;
    margin: 0;
    position: absolute;
    top: 60px;
    left: 80px;
    opacity: 0
}

.fixHeader .switch {
    -webkit-transform: scale(.6, .6);
    transform: scale(.6, .6);
    padding: 12px 10px
}

.darkArrow {
    position: absolute;
    top: 63px;
    left: 35px;
    opacity: 0
}

#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 .2s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out;
    font-size: 22px;
    color: var(--myClrDark);
    font-family: 'Poppins';
    font-weight: 500;
    padding: 0 25px;
    opacity: .5;
    background: var(--myClrLight);
    z-index: 1;
    display: flex;
    align-items: center
}

.leo9-counters ul li span {
    font-family: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    position: relative;
    text-align: center;
    width: calc(33.333333% - 10px);
    cursor: pointer;
    transition: all .2s ease-in-out;
    -webkit-transition: all .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 .2s ease-in-out;
    -webkit-transition: all .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: 'Poppins';
    font-weight: 900;
    margin: 0
}

.hw-cont h5 {
    font-size: 18px;
    color: var(--myClrDark);
    line-height: 1.5;
    font-family: 'Poppins';
    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: 'Poppins';
    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(.95);
    transform: scale(.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: 'Poppins';
    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: 'Poppins';
    font-weight: 900;
    color: var(--myClrDark)
}

.hf-box p span {
    display: block;
    font-size: 14px;
    font-family: 'Poppins';
    font-weight: 700
}

.hf-container {
    display: flex;
    align-items: center
}

.hf-cont {
    flex: 1;
    text-align: center;
    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: auto
}

.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: 20px;
    height: 20px;
    left: 0;
    position: absolute;
    top: 18px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.bl-icon:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--myClrDark);
    top: 50%;
    left: 0;
    transition: all .2s ease-in-out;
    -webkit-transition: all .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 h2 {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 0
}

.bl-cont {
    display: none;
    padding-bottom: 20px;
    padding-left: 50px
}

.bl-cont p {
    font-size: 16px;
    font-family: 'Poppins';
    font-weight: 500;
    color: var(--myClrDark);
    margin: 0 0 20px 0;
    line-height: 1.6;
    max-width: 100%
}

.bl-cont li {
    font-size: 16px;
    font-family: 'Poppins';
    font-weight: 500;
    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
}

.bl-cont p:last-child {
    margin-bottom: 0
}

.blogTriggerStart {
    top: -100px
}

.blogTriggerEnd {
    position: absolute;
    top: -150px;
    left: 0
}

.h-blog-box.section-padding {
    padding-bottom: 80px
}

[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: .4;
    transition: all .2s ease-in-out;
    -webkit-transition: all .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
}

.homeVideo .hs-img-box-up {
    width: 100%;
    right: 0
}

.homeVideo .hs-img-box {
    top: 40vh;
    height: 60vh;
    background: #fff
}

.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%
}

.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 .5s ease forwards;
    animation-delay: .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: 0
        }
    }
}

.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: 100px;
    height: 100px;
    margin-bottom: 24px;
    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: 'Poppins';
    font-weight: 500;
    margin-bottom: 24px;
    position: relative;
    background: transparent;
    padding: 0
}

.breadcrumb:hover a {
    color: #d4ff00 !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
}

.clientSwiper .swiper-wrapper {
    transition-timing-function: linear
}

.clientSwiper .swiper-slide {
    width: auto
}

.our-clients-sec {
    padding: 0 60px;
    position: relative;
    top: -110px;
    overflow: hidden
}

.our-clients-sec::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 100px;
    background: linear-gradient(90deg, transparent, var(--myClrLight))
}

.our-clients-sec::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 100px;
    background: linear-gradient(90deg, var(--myClrLight), transparent)
}

.cli-logo {
    max-height: 34px;
    height: 34px;
    max-width: 100px
}

.cli-logo img {
    object-fit: contain;
    object-position: center;
    height: 100%
}

.cli-logo.small {
    max-width: 50px
}

.cli-logo.esmall {
    max-width: 40px
}

.our-clients-sec-desk {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap
}

.our-clients-sec-mob,
.hero-support-text-mob {
    display: none
}

.hero-support-text-mob {
    text-align: center
}

.seoContentWrap {
    border-top: 1px solid rgba(208, 208, 208, 0.8);
    padding-top: 50px;
    padding-bottom: 50px;
    width: 90%;
    margin: 0 auto
}

.seo-content {
    max-height: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    cursor: pointer
}

.seo-content h1,
.seo-content h2,
.seo-content h3,
.seo-content h4,
.seo-content h5,
.seo-content h6,
.seo-content p,
.seo-content span,
.seo-content b,
.seo-content strong {
    color: var(--myClrDark);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5
}

.seo-content span {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0
}

.seo-content span::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    width: 20px;
    height: 1px;
    background: var(--myClrDark)
}

.seo-content span::before {
    content: '';
    position: absolute;
    top: 0;
    right: 10px;
    width: 1px;
    height: 20px;
    background: var(--myClrDark);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out
}

.seo-content.active {
    max-height: 800px
}

.seo-content.active span::before {
    transform: rotate(90deg)
}




.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
}

@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 .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: 0;
    will-change: transform;
    transition: background .4s
}

.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 .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 {
        padding-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 {
        padding-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
    }
    .our-clients-sec-desk {
        gap: 50px
    }
}

@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 #000
    }
    .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(30% - 15px);
        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
    }
 
   
   
    .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
    }
    .filled .information {
        height: 570px
    }
    .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%
    }
    .information {
        height: 95px;
        margin-top: 50px
    }
    .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
    }
    .section-padding.contact .container {
        top: 45%
    }
    .our-clients-sec-desk {
        gap: 40px
    }
    .our-clients-sec {
        top: -50px
    }
}

@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
    }
    .homeVideo .hs-img video {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    .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
    }
    .our-clients-sec-desk {
        gap: 80px
    }
    .our-clients-sec {
        top: -50px
    }
}

@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
    }
    .serv-ban-left {
        min-height: 460px
    }
    .h-work-cont h4 {
        font-size: 32px
    }
    .h-work-cont ul li {
        font-size: 14px;
        margin-right: 20px;
        margin-bottom: 10px
    }
    .h-work-cont ul li:after {
        right: -12px
    }
    .navigation li {
        padding: 0 20px
    }
    .scrollTop {
        margin-left: 390px
    }
    .navigation li.darkLi {
        width: 40px
    }
    .switch {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0) scale(.8);
        padding: 17px 10px
    }
    .fixHeader .switch {
        transform: translate(-50%, 0) scale(.8);
        padding: 12px 10px
    }
    .hw-img {
        height: 350px
    }
    .h-work-tab-content {
        height: 470px
    }
    .ab-vm-cont h4 {
        font-size: 36px
    }
    .abt-founder-cont-in .read-linkdin {
        margin: 5px 0 50px
    }
    .meet-founder-box h6 {
        font-size: 60px
    }
    .founder-pic-box {
        padding: 0 50px
    }
    .founder-pic-box h4 {
        font-size: 24px
    }
    .bl-hdn h3 {
        font-size: 24px
    }
    .bl-icon {
        width: 20px;
        height: 20px;
        top: 21px
    }
    .bl-hdn,
    .bl-cont {
        padding-left: 35px
    }
    .home-page-work .hwork-img {
        height: 360px
    }
    .home-page-work .hwork-img img {
        margin-left: 10px
    }
}

@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
    }
    .homeVideo .hs-img-box-up {
        width: 40%
    }
    .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
    }
    .our-clients-sec-desk {
        gap: 30px
    }
    .our-clients-sec {
        top: -70px
    }
}

@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) {
    :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: 0 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: 0
    }
   
    .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: 10%
    }
    .testimonial-cont p,
    .h-blog-box p {
        font-size: 18px;
        line-height: 1.5
    }
    
    .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: 80px
    }
    .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: 0;
        left: 0
    }
    .bl-hdn h3 {
        font-size: 18px
    }
    .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) {
    :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, #fff, 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;
        padding-right: 200px;
        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 .5s ease-in-out;
        -webkit-transition: all .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 .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        opacity: 0;
        transition-delay: .7s;
        -webkit-transition-delay: .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
    }
    .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
    }


  
    .deskFooter .active img {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    .copyMob {
        display: block;
        font-size: 12px;
        color: var(--myClrDark);
        font-family: 'Poppins';
        font-weight: 900;
        line-height: 1.5;
        width: 100%;
        text-align: center;
        margin-top: 20px
    }
   
    .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 .2s ease-in-out;
        -webkit-transition: all .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: 'Poppins';
        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(.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 {
        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
    }
    .sectionOne {
        height: 130vh
    }
    .seoContent {
        position: relative;
        z-index: 9;
        background-color: #fff
    }
    .hero-para {
        font-size: 18px
    }
    .our-clients-sec {
        top: 0;
        z-index: 10;
        padding-block: 100px;
        padding-inline: 20px;
        background: var(--myClrLight);
        height: auto;
        flex-direction: column
    }
    .cli-logo {
        max-height: 24px;
        height: 24px;
        max-width: 70px
    }
    .cli-logo.small {
        max-width: 50px
    }
    .cli-logo.esmall {
        max-width: 40px
    }
    .our-clients-sec-desk,
    .hero-support-text-desk {
        display: none
    }
    .our-clients-sec-mob,
    .hero-support-text-mob {
        display: block
    }
}

@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
    }
}

@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;
        text-align: left
    }
    .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
    }
}

@media all and (max-width:576) {
    .home-page-work .salon-pay .hwork-img img {
        bottom: -17px
    }
    .hb-right h3 {
        font-size: 65px
    }
}

@media all and (max-width:530px) {
    #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) {
    :root {
        --expWidth: 23px;
        --dotBoxLiWidth: 10px;
        --dotBoxDuration: .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%
    }
}

@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: 0
    }
    .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: 0
    }
    .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
    }
}

@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: 0px
    }
}

@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 {
        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%
    }
}

.page-title {
    font-size: 22px;
    color: #5857f9;
    font-family: 'Poppins';
    font-weight: 900;
    margin-bottom: 35px;
    text-transform: capitalize;
    position: static;
    opacity: 1
}

.sec-title {
    font-size: 30px;
    color: var(--myClrDark);
    line-height: 1;
    margin-bottom: 0;
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize
}

.sec-title-wrap {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px
}

.fs30 {
    font-size: 30px;
    line-height: 1.4
}

.clr-black {
    color: var(--myClrDark)
}

.lh-big {
    line-height: 1.5
}

.mb20 {
    margin-bottom: 20px !important
}

p.fs20 {
    font-size: 20px
}

p.fs20 strong {
    font-weight: 700
}

.tabs-wrapper-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #5857f9 #fff;
    scrollbar-arrow-color: #fff;
    max-width: 832px;
    width: 100%;
    border-radius: 40px;
    margin-bottom: 40px
}

.tabs-wrapper {
    position: relative;
    width: max-content;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    gap: 16px;
    overflow: hidden;
    background: rgba(88, 87, 249, 0.08)
}

.tabs-wrapper::-moz-scrollbar-button,
.tabs-wrapper::-webkit-scrollbar-button {
    width: 0;
    display: none
}

.tabs-wrapper li {
    cursor: pointer;
    padding: 0 12px;
    color: var(--myClrDark);
    font-size: var(--fs16);
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: color .25s ease;
    z-index: 1
}

.tabs-wrapper li.active {
    color: #fff
}

.tabs-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--clr2);
    z-index: 1;
    pointer-events: none;
    clip-path: var(--clip-path);
    transition: clip-path .25s ease
}

@media (max-width:800px) {
    .tabs-wrapper {
        padding: 6px
    }
    .tabs-wrapper li {
        padding: 0 16px;
        line-height: 30px;
        height: 30px
    }
    .fs30 {
        font-size: 24px;
        line-height: 1.5
    }
    .sec-title {
        font-size: 32px
    }
}

@media (max-width:640px) {
    .tabs-wrapper {
        gap: 0;
        justify-content: flex-start
    }
}

@media (max-width:480px) {
    p.fs20 {
        font-size: 16px
    }
    .serv-detail-section .mb20 {
        margin-top: 40px;
        margin-bottom: 16px !important
    }
    .s-we-off-box p {
        font-size: 16px;
        line-height: 1.5
    }
    .fs30 {
        font-size: 20px;
        line-height: 1.6
    }
}

.case-study-new-common p {
    font-weight: 400
}

.case-study-new-common .sub-title {
    font-size: 16px;
    font-weight: 400
}

.case-study-new-common .hero-banner {
    margin-bottom: 16px
}

.case-study-new-common .hero-content .visit-link {
    font-size: 16px;
    color: #9c34f0;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px
}

.case-study-new-common .hero-content .visit-link .text {
    border-bottom: 1px solid #9c34f0
}

.case-study-new-common .hero-content .visit-link .icon {
    width: 16px;
    height: 16px;
    display: flex
}

.case-study-new-common .service-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-block: 32px
}

.case-study-new-common .service-section .content-column.content-left {
    flex: 1
}

.case-study-new-common .service-section .content-column.content-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.case-study-new-common .service-section .content-column.content-right img {
    max-width: 100%;
    height: auto;
    border-radius: 8px
}

.case-study-new-common .service-section .content-table .table-row {
    display: flex;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0
}

.case-study-new-common .service-section .content-table .table-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

.case-study-new-common .service-section .content-table .table-title {
    width: 30%;
    flex-shrink: 0
}

.case-study-new-common .typography-section {
    display: flex;
    gap: 16px;
    flex-direction: column;
    margin-bottom: 16px
}

.case-study-new-common .typography-section .box1 {
    background-color: #212121;
    color: #fff;
    position: relative
}

.case-study-new-common .typography-section .box1 .typography-font {
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    top: 45%;
    left: 4%
}

.case-study-new-common .typography-section .box1 .typography-letters {
    font-size: 88px;
    font-weight: 700;
    position: absolute;
    bottom: 5%;
    left: 4%
}

.case-study-new-common .typography-section .color-palette {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 100%
}

.case-study-new-common .typography-section .color-box {
    position: relative
}

.case-study-new-common .typography-section .color-box span {
    position: absolute;
    right: 16px;
    bottom: 16px;
    font-size: 12px;
    font-weight: 400
}

.case-study-new-common .typography-section .color1 {
    background-color: #753dff;
    width: 40%;
    height: 70%;
    color: #fff
}

.case-study-new-common .typography-section .color2 {
    background-color: #fff;
    width: 35%;
    height: 70%
}

.case-study-new-common .typography-section .color3 {
    background-color: #212121;
    width: 25%;
    height: 70%;
    color: #fff
}

.case-study-new-common .typography-section .color4 {
    background-color: #b0ff45;
    width: 100%;
    height: 30%
}

.case-study-new-common .typography-box {
    width: 100%;
    height: 360px
}

.case-study-new-common .content-section {
    padding-block: 32px
}

.case-study-new-common .content-section .content-text {
    margin-bottom: 0
}

.case-study-new-common .investors-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px
}

.case-study-new-common .investors-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 50px 50px 0
}

.case-study-new-common .investors-box img {
    max-width: 100%;
    height: auto
}

.case-study-new-common .investors-box1 {
    background-color: #753dff
}

.case-study-new-common .investors-box2 {
    background-color: #b0ff45
}

.case-study-new-common .graphics-section {
    background-color: #f5f5f5;
    margin-block: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.case-study-new-common .graphics-section::after {
    content: "Custom Graphics Created";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2
}

.case-study-new-common .profile-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
    gap: 16px
}

.case-study-new-common .profile-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.case-study-new-common .profile-box img {
    max-width: 100%;
    height: auto
}

.case-study-new-common .career-section {
    position: relative;
    background-color: #753dff;
    padding-top: 32px;
    margin-bottom: 16px
}

.case-study-kpit .logo-section {
    display: none
}

@media screen and (min-width:768px) {
    .case-study-new-common p {
        font-size: 16px
    }
    .case-study-new-common .hero-section {
        padding-top: 0
    }
    .case-study-new-common .hero-head {
        margin-block: 32px
    }
    .case-study-new-common .hero-head .title {
        font-size: 60px
    }
    .case-study-new-common .hero-head .sub-title {
        font-size: 16px
    }
    .case-study-new-common .service-section {
        gap: 64px;
        margin-block: 100px
    }
    .case-study-new-common .service-section .content-table .table-title,
    .case-study-new-common .service-section .content-table .table-info {
        font-size: 16px
    }
    .case-study-new-common .typography-section {
        flex-direction: row
    }
    .case-study-new-common .typography-section .box1 .typography-font {
        font-size: 30px
    }
    .case-study-new-common .typography-section .box1 .typography-letters {
        font-size: 120px
    }
    .case-study-new-common .typography-section .color-box span {
        font-size: 16px
    }
    .case-study-new-common .typography-box {
        height: 460px
    }
    .case-study-new-common .content-section {
        padding-block: 60px
    }
    .case-study-new-common .investors-section {
        flex-direction: row
    }
    .case-study-new-common .investors-section .investors-box {
        padding: 60px 60px 0
    }
    .case-study-new-common .graphics-section::after {
        font-size: 48px;
        width: 70%;
        margin-inline: auto;
        left: auto;
        right: auto
    }
    .case-study-new-common .profile-section {
        flex-direction: row;
        margin-bottom: 0
    }
    .case-study-new-common .career-section {
        padding-top: 60px;
        display: flex;
        flex-wrap: wrap
    }
    .case-study-new-common .career-box {
        width: 50%
    }
    .case-study-new-common .career-box.career-box3 {
        width: 60%;
        margin-inline: auto
    }
    .case-study-new-common .career-box2 {
        margin-top: -16px
    }
}

@media screen and (min-width:820px) {
    .case-study-new-common .growth-section {
        margin-bottom: 120px
    }
}

@media screen and (min-width:1024px) {
    .case-study-new-common .service-section {
        flex-direction: row
    }
    .case-study-new-common .service-section .content-column.content-left {
        max-width: 40%
    }
    .case-study-new-common .career-box.career-box3 {
        width: 60%;
        margin-left: 30%
    }
    .case-study-new-common .graphics-section::after {
        font-size: 58px
    }
}

@media screen and (min-width:1280px) {
    .case-study-new-common .graphics-section::after {
        width: 65%;
        font-size: 68px
    }
}

@media screen and (min-width:1440px) {
    .case-study-container .container {
        max-width: 1320px
    }
    .case-study-new-common p {
        font-size: 20px
    }
    .case-study-new-common .hero-section {
        padding-top: 0
    }
    .case-study-new-common .hero-head .title {
        font-size: 70px
    }
    .case-study-new-common .hero-head .sub-title {
        font-size: 24px
    }
    .case-study-new-common .investors-section .investors-box {
        padding: 80px 100px 0
    }
    .case-study-new-common .hero-content .visit-link .text {
        font-size: 20px
    }
    .case-study-new-common .hero-content .visit-link .icon {
        width: 20px;
        height: 20px
    }
    .case-study-new-common .investors-section,
    .case-study-new-common .journey-section,
    .case-study-new-common .graphics-section,
    .case-study-new-common .career-section,
    .case-study-new-common .typography-section {
        margin-bottom: 40px
    }
    .case-study-new-common .service-section {
        margin-block: 100px;
        align-items: flex-start
    }
    .case-study-new-common .service-section .content-table .table-info,
    .case-study-new-common .service-section .content-table .table-title {
        font-size: 18px
    }
    .case-study-new-common .typography-section {
        gap: 40px
    }
    .case-study-new-common .typography-box {
        height: 640px
    }
    .case-study-new-common .content-section {
        padding-block: 80px
    }
    .case-study-new-common .graphics-section::after {
        font-size: 78px
    }
    .case-study-new-common .profile-section {
        gap: 40px
    }
}

@media screen and (min-width:1600px) {
    .case-study-container .container {
        max-width: 1466px
    }
    .case-study-new-common p {
        font-size: 28px
    }
    .case-study-new-common .hero-head {
        padding-left: 128px;
        margin-block: 64px
    }
    .case-study-new-common .hero-head .title {
        font-size: 128px
    }
    .case-study-new-common .hero-head .sub-title {
        font-size: 36px
    }
    .case-study-new-common .hero-content .visit-link .text {
        font-size: 32px
    }
    .case-study-new-common .hero-content .visit-link .icon {
        width: 32px;
        height: 32px
    }
    .case-study-new-common .service-section {
        margin-block: 200px
    }
    .case-study-new-common .service-section .content-table .table-info,
    .case-study-new-common .service-section .content-table .table-title {
        font-size: 24px
    }
    .case-study-new-common .typography-section {
        margin-bottom: 40px;
        gap: 40px
    }
    .case-study-new-common .typography-section .box1 .typography-font {
        font-size: 60px;
        top: 35%;
        left: 42px
    }
    .case-study-new-common .typography-section .box1 .typography-letters {
        font-size: 200px;
        left: 42px
    }
    .case-study-new-common .typography-section .color-box span {
        font-size: 24px
    }
    .case-study-new-common .typography-box {
        height: 700px
    }
    .case-study-new-common .content-section {
        padding-block: 120px
    }
}

@media screen and (min-width:1920px) {
    .case-study-container .container {
        max-width: 1680px;
        padding-inline: 0
    }
    .case-study-new-common .hero-banner img {
        width: 100vw;
        height: auto
    }
    .case-study-new-common .hero-head {
        padding-left: 208px;
        margin-block: 80px
    }
    .case-study-new-common .hero-head .title {
        font-size: 128px
    }
    .case-study-new-common .hero-head .sub-title {
        font-size: 36px
    }
    .case-study-new-common .typography-box {
        height: 960px
    }
    .case-study-new-common .graphics-section::after {
        font-size: 88px;
        width: 60%
    }
}

/* Update text colors and sizes to match orbital design */
.hero-content-centered .hero-title {
    color: #1a1a1a !important;
    text-shadow: none !important;
    /* font-size: clamp(48px, 8vw, 96px) !important; */
     font-size: clamp(48px, 8vw, 96px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
}

.hero-content-centered .hero-para {
    color: #4a4a4a !important;
    opacity: 1 !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Also update if you're using the old class names */
.hero-content-box .hero-title,
.hero-title {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-size: clamp(48px, 8vw, 96px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
}

.hero-content-box .hero-para,
.hero-para {
    color: #4a4a4a !important;
    opacity: 1 !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Button styling to match orbital design */
.hero-modern .btn-primary,
.cta-button {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
}
/* Orbital-style button */
.hero-modern .btn-primary,
.hero-content-centered .btn-primary {
    /* Reset gradient background */
    background: #1a1a1a !important;
    color: white !important;
    
    /* Orbital button styling */
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    
    /* Remove margin */
    margin-left: 0 !important;
    
    /* Smooth transitions */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Remove text decoration */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-modern .btn-primary:hover {
    background: #2a2a2a !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.hero-modern .btn-primary:active {
    transform: translateY(-2px) !important;
}

/* Orbital-style button */
.hero-modern .btn-primary,
.hero-content-centered .btn-primary {
    /* Reset gradient background */
    background: #1a1a1a !important;
    color: white !important;
    
    /* Orbital button styling */
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    
    /* Remove margin */
    margin-left: 0 !important;
    
    /* Smooth transitions */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Remove text decoration */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-modern .btn-primary:hover {
    background: #2a2a2a !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.hero-modern .btn-primary:active {
    transform: translateY(-2px) !important;
}
.desk-header,
.innerHeader {
    background: rgba(248, 248, 248, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* ===================================
   RESET & BASE STYLES
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --bg-primary: #f8f8f8;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --accent-color: #6366f1;
    --orbit-color: rgba(160, 160, 160, 0.5);
    
    /* NEW COLORS - USE YOUR BRAND COLORS */
    --orb-1-primary: #dacefc;  /* Lighter color */
    --orb-1-secondary: #b8a7f5;
    --orb-2-primary: #dacefc;  /* Lighter color */
    --orb-2-secondary: #b8a7f5;
    --orb-3-primary: #7f57f6;  /* Darker color (center) */
    --orb-3-secondary: #6b47d9;
    --orb-4-primary: #9f7efa;  /* Medium purple */
    --orb-4-secondary: #8b6be8;
    --orb-5-primary: #dacefc;  /* Lighter color */
    --orb-5-secondary: #9f7efa;

    
    /* Spacing */
    --section-padding: 120px;
    --container-padding: 40px;
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
}

body {
    font-family: var(--font-primary);
   background: #ffffff;
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    perspective: 1500px;
}

/* ===================================
   NAVIGATION
   =================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px 0;
    background: rgba(248, 248, 248, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: translateY(-2px);
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--text-primary) 0%, #4a4a4a 100%);
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
}

.logo-text {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.nav-menu {
    display: flex;
    gap: 48px;
    list-style: none;
}

.nav-menu a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-primary);
    transition: width 0.3s ease;
}

.nav-menu a:hover {
    color: var(--text-primary);
}

.nav-menu a:hover::after {
    width: 100%;
}

.login-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1.5px solid var(--text-primary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-btn:hover {
    background: var(--text-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ===================================
   HERO SECTION
   =================================== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--section-padding) var(--container-padding);
    padding-top: 160px;
    overflow: hidden;
}

.content-wrapper {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===================================
   ORBITAL SYSTEM
   =================================== */
.orbital-system {
    position: absolute;
    top: calc(100% + 150px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 1200px;
    pointer-events: none;
    transform-style: preserve-3d;
    overflow: visible;
}

/* Orbit Rings */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(140, 140, 140, 0.3);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(140, 140, 140, 0.1);
}

/*@keyframes orbitPulse {
    0%, 100% {
        opacity: 0.3;
        border-color: rgba(140, 140, 140, 0.3);
    }
    50% {
        opacity: 0.375;
        border-color: rgba(140, 140, 140, 0.35);
    }
}
*/
.orbit-1 {
    width: 300px;
    height: 300px;
    animation-delay: 0s;
}

.orbit-2 {
    width: 500px;
    height: 500px;
    animation-delay: 1s;
}

.orbit-3 {
    width: 700px;
    height: 700px;
    animation-delay: 2s;
}

.orbit-4 {
    width: 900px;
    height: 900px;
    animation-delay: 3s;
}

/* ===================================
   ORBS - 3D SPHERES
   =================================== */
.orb {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    pointer-events: none;
}

.orb-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Removed self-rotation - orbs now only move along orbital paths */
}

/* Orb Glow Effect */
.orb-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border-radius: 20%;
    filter: blur(8px);
    opacity: 0.1;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Orb Surface */
.orb-surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    box-shadow: 
        inset -10px -10px 20px rgba(0, 0, 0, 0.2),
        inset 10px 10px 20px rgba(255, 255, 255, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateZ(20px);
}

/* Orb Highlight */
.orb-highlight {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translateZ(25px);
    filter: blur(2px);
}

/* Individual Orb Styling */
.orb-1 .orb-surface {
    --gradient-start: var(--orb-1-primary);
    --gradient-end: var(--orb-1-secondary);
}

.orb-1 .orb-glow {
    background: radial-gradient(circle, var(--orb-1-primary) 0%, transparent 70%);
}

.orb-2 .orb-surface {
    --gradient-start: var(--orb-2-primary);
    --gradient-end: var(--orb-2-secondary);
}

.orb-2 .orb-glow {
    background: radial-gradient(circle, var(--orb-2-primary) 0%, transparent 70%);
}

.orb-3 .orb-surface {
    --gradient-start: var(--orb-3-primary);
    --gradient-end: var(--orb-3-secondary);
}

.orb-3 .orb-glow {
    background: radial-gradient(circle, var(--orb-4-primary) 0%, transparent 70%);
}

.orb-4 .orb-surface {
    --gradient-start: var(--orb-4-primary);
    --gradient-end: var(--orb-4-secondary);
}

.orb-4 .orb-glow {
    background: radial-gradient(circle, var(--orb-4-primary) 0%, transparent 70%);
}

.orb-5 .orb-surface {
    --gradient-start: var(--orb-5-primary);
    --gradient-end: var(--orb-5-secondary);
}

.orb-5 .orb-glow {
    background: radial-gradient(circle, var(--orb-5-primary) 0%, transparent 70%);
}

/* Orb Size Variations for Depth */
.orb-1 {
    width: 60px;
    height: 60px;
}

.orb-2 {
    width: 70px;
    height: 70px;
}

.orb-3 {
    width: 90px;
    height: 90px;
}

.orb-4 {
    width: 65px;
    height: 65px;
}

.orb-5 {
    width: 55px;
    height: 55px;
}

/* ===================================
   HERO CONTENT
   =================================== */
.hero-content {
    text-align: center;
    position: relative;
    z-index: 10;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hero-subtitle {
    font-size: clamp(16px, 2vw, 20px);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 48px;
    font-weight: 400;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--text-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.cta-button:active {
    transform: translateY(-2px);
}

.cta-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    position: relative;
    flex-shrink: 0;
}

.cta-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--text-primary);
    border-radius: 50%;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 1024px) {
    .orbital-system {
        max-width: 900px;
        max-height: 900px;
    }
    
    .orbit-1 { width: 250px; height: 250px; }
    .orbit-2 { width: 400px; height: 400px; }
    .orbit-3 { width: 550px; height: 550px; }
    .orbit-4 { width: 700px; height: 700px; }
}

@media (max-width: 768px) {
    .nav-menu {
        gap: 24px;
    }
    
    .nav-menu a {
        font-size: 14px;
    }
    
    .hero-section {
        padding: 100px 20px;
    }
    
    .orbital-system {
        max-width: 600px;
        max-height: 600px;
    }
    
    .orbit-1 { width: 200px; height: 200px; }
    .orbit-2 { width: 320px; height: 320px; }
    .orbit-3 { width: 440px; height: 440px; }
    .orbit-4 { width: 560px; height: 560px; }
    
    .orb-1 { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    .orb-2 { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
    .orb-3 { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    .orb-4 { width: 45px; height: 45px; margin: -22.5px 0 0 -22.5px; }
    .orb-5 { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

@media (max-width: 480px) {
    .nav-menu {
        display: none;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .orbital-system {
        max-width: 400px;
        max-height: 400px;
    }
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */
.orb,
.orbit,
.orb-inner {
    will-change: transform;
}

.orb-glow {
    will-change: opacity, transform;
}

/* Override orbital system positioning for centered layout */
.hero-modern {
    position: relative;
    overflow: hidden;
}

.hero-modern .orbital-system {
    position: absolute;
    top: 90% !important;
    bottom: -50% !important; /* Half the orbital system is below viewport */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    height: 100px;
    z-index: 1;
    pointer-events: none;
}

/* Center the text content */
.hero-content-centered {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 120px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content-centered .hero-title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 24px;
    color: #ffffff;
}

.hero-content-centered .hero-para {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-content-centered .cta-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-content-centered .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-content-centered .hero-para {
        font-size: 1rem;
    }
    
    .orbital-system {
        max-width: 600px;
        height: 600px;
    }
    .hero-content-box .hero-title {
    font-size: 3.1rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 5px;
    color: #1a1a1a; /* Changed from #ffffff */
}

.hero-content-box .hero-para {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 100px;
    opacity: 0.9;
    color: #4a4a4a; /* Changed from #fff */
}
}

/* Navbar white background */
.desk-header,
.innerHeader {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* If navbar has transparency/backdrop filter */
.desk-header,
.innerHeader {
    background: rgba(255, 255, 255, 1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Mobile menu white background too */
.mob-menu {
    background: #ffffff !important;
}

/* Footer Base Styles */
.site-footer {
    background-color: #ffffff;
    color: #000000;
    padding: 60px 20px 30px;
}

.footer-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

/* Brand Column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.brand-logo img {
    height: 50px;
    width: auto;
    display: block;
}

.social-links {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f5f5f5;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links li a:hover {
    background-color: #8d00ea;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(141, 0, 234, 0.3);
}

.social-links img {
    width: 20px;
    height: 20px;
    filter: brightness(0);
}

.social-links li a:hover img {
    filter: brightness(0) invert(1);
}

/* Footer Sections */
.footer-section {
    display: flex;
    flex-direction: column;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-icon {
    display: none;
}

.toggle-icon img {
    width: 16px;
    height: 16px;
    filter: brightness(0);
    transition: transform 0.3s ease;
}

.section-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-links li a {
    color: #000000;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
    display: inline-block;
}

.section-links li a:hover {
    color: #8d00ea;
}

/* Copyright */
.footer-copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
    font-size: 14px;
    color: #666666;
}

/* Tablet Styles */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 20px 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 30px;
    }

    .section-title {
        cursor: pointer;
        padding-bottom: 12px;
        border-bottom: 1px solid #e0e0e0;
    }

    .toggle-icon {
        display: block;
    }

    .section-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, margin-top 0.4s ease;
        gap: 8px;
    }

    .footer-section.is-open .section-links {
        max-height: 300px;
        margin-top: 15px;
    }

    .footer-section.is-open .toggle-icon img {
        transform: rotate(45deg);
    }
}

/* new style for cta section */

.cta-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #0b0f1a;
    color: #fff;
}

.cta-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 60% at 20% 20%, rgba(108,99,255,0.25), transparent),
        radial-gradient(50% 50% at 80% 80%, rgba(0,212,255,0.25), transparent);
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.cta-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    margin-bottom: 24px;
}

.cta-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 16px;
}

.cta-content h2 span {
    background: linear-gradient(90deg, #6c63ff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-content p {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 40px;
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn.primary {
    background: linear-gradient(135deg, #6c63ff, #00d4ff);
    color: #fff;
}

.cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(108,99,255,0.35);
}

.cta-btn.secondary {
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    background: transparent;
}

.cta-btn.secondary:hover {
    background: rgba(255,255,255,0.08);
}


/* next and prev for carsoule */

.work-swiper-prev,
.work-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

.work-swiper-prev {
    left: 10px;
}

.work-swiper-next {
    right: 10px;
}

.work-swiper-prev::after,
.work-swiper-next::after {
    content: '';
    border: solid #fff;
    border-width: 0 2px 2px 0;
    padding: 6px;
    display: inline-block;
}

.work-swiper-prev::after { transform: rotate(135deg); }
.work-swiper-next::after { transform: rotate(-45deg); }




.project-content {
    padding: 15px;
    background: #fff;
    /* border-radius: 10px; */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: left;
}

.project-content h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #222 !important;
}

.project-content p {
    font-size: 13px;
    color: #979db9 !important;
    margin-bottom: 8px;
}

.project-content .tech-stack {
    font-size: 10px;
    color: #b6adad !important;
}

.project-content .read-more-btn {
    display: inline-block;
    padding: 6px 12px;
    background: #007bff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.3s;
}

.project-content .read-more-btn:hover {
    background: #0056b3;
}




/* -------------------- Quote Box Enhancements --------------------  #ac4afd 0, #7926ed */
/* .quote-box-enhanced {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    padding: 80px 30px;
    position: relative;
    overflow: hidden;
}

.quote-box-enhanced h4 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.3;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.4);
}

.quote-box-enhanced .quote-btn {
    position: relative;
    display: inline-block;
    padding: 12px 30px;
    margin: 10px 15px 0 0;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.quote-box-enhanced .quote-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.quote-box-enhanced::before,
.quote-box-enhanced::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    width: 200px;
    height: 200px;
    z-index: 0;
    animation: floatShapes 10s infinite linear alternate;
}

.quote-box-enhanced::before { top: -50px; left: -50px; }
.quote-box-enhanced::after { bottom: -50px; right: -50px; }

@keyframes floatShapes {
    0% { transform: translate(0,0) rotate(0deg);}
    50% { transform: translate(20px, 20px) rotate(180deg);}
    100% { transform: translate(0,0) rotate(360deg);}
} */



/* Floating shapes wrapper */



.anim-link {
    display: inline-block;
    position: relative;
    color: #222;
    text-decoration: none;
    overflow: hidden;
}

.anim-link span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.anim-link:hover span {
    transform: translateY(-2px);
}