/* Version: 1.4 | Last updated: 01-04-2026 */

:root {
    --first-color: #0dacaf;
    --second-color: #089674;
    --third-color: #1EA29B;
    --white-color: #ffffff;
    --black-color: #000000;
    --gray-color: #e2e2e2;
    --purple-color: #3832a0;
    --blue-color: #0859d3;
    --brown-color: #35312f;
    --golden-color: #a68b4f;
    --golden-color-1: #c0a16b;
    --red-color: #EA0009;
    --orange-color: #F15A24;
    --green-color: #A5CB39;
    --dark-green-color: #036800;
    --black2-color: #1B1B1B;
    --light-grey: #f0f0f0;
    --light-blue-color: #0097DE;
    --gray-color: #6c757d;
    --gray-color-2: #e9ecef;
    --wheat: #f5deb3;
    --dur: .15s;
    --delay: .15s;
    --radius: 10px;
    --font-family: 'Manrope';
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #e8e8e8;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--first-color);
}

::-webkit-scrollbar-thumb {
    background-image: -webkit-linear-gradient(45deg, var(--first-color), var(--second-color));
    background-image: -o-linear-gradient(45deg, var(--first-color), var(--second-color));
    background-image: linear-gradient(45deg, var(--first-color), var(--second-color));
}

::-moz-selection {
    background: rgba(166, 175, 189, 0.3);
}

::selection {
    background: rgba(166, 175, 189, 0.3);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-os-font-smoothing: grayscale;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    vertical-align: baseline;
}

body {
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Proxima Nova Alt Rg'; */
    font-family: var(--font-family);
    color: var(--black-color);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    font-size: 17px;
    outline: none;
    overflow-x: hidden;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family);
    color: #000000;
    font-weight: 800;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    padding: 0;
    margin: 0;
}

a {
    color: var(--first-color);
    text-decoration: none;
}

a:hover {
    color: var(--first-color);
    cursor: pointer;
}

ul {
    list-style: disc;
}

.nav-list {
    margin-left: 10px;
}

ul li {
    line-height: 30px;
    margin-left: 0px;
}

a:hover {
    text-decoration: none;
}

button:focus {
    outline: none !important;
}

.fa-icon {
    margin-left: 5px;
    font-size: 12px;
}

.header-heading .fa-icon {
    margin-left: 5px;
    font-size: 12px;
    animation: 2s infinite arrowanim;
    -webkit-animation: 2s infinite arrowanim;
}

.common-heading {
    padding: 0;
    text-align: left;
    position: relative;
    z-index: 10;
}

/* .common-heading h2 {
    margin-bottom: 60px;
} */

.inner-heading h2 {
    margin-bottom: 30px;
}

.v-center {
    align-self: center;
    align-items: center;
}

button {
    position: relative;
    overflow: hidden;
}

.lnk {
    position: relative;
    overflow: hidden;
}

.animation,
a,
.isotope_item,
input,
button,
.custom-btn,
.circle,
.s-block,
.clients-logo,
.icon-set,
.link-hover,
.sticky,
.navbar,
.dropdown-toggle,
.hover-scale img,
.sub-menu-sec a,
.main-header.sticky,
.main-header,
.circle2,
.hoshd {
    -webkit-transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    -o-transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    transition: 1.2s cubic-bezier(.17, .85, .438, .99);
}

.no-shadow {
    box-shadow: none !important;
}

span.circle {
    background: rgba(255, 255, 255, 0.2);
    display: block;
    position: absolute;
    top: -10%;
    right: -130px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: none;
}

.lnk:hover span.circle {
    top: -10%;
    right: -80px;
}

span.circle2 {
    background: rgba(255, 255, 255, 0.2);
    display: block;
    position: absolute;
    top: -10%;
    right: -50px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.lnk:hover span.circle2 {
    top: -10%;
    right: -40px;
}

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

.f-medium {
    font-weight: 600;
}

.f-bold {
    font-weight: 700;
}

.light-blue {
    background: #f8fdff;
}

.text-radius {
    border-radius: 3px;
    padding: 0 3px;
}

.text-primary {
    color: var(--first-color);
}

.text-second {
    color: var(--first-color);
}

.text-bold {
    font-weight: bold;
}

.header-icon-nav a {
    background: #ffffff7a;
    padding: 12px;
    margin: 5px;
    border-radius: 50%;
    color: #0a2233;
}

.sticky .dsk-logo {
    line-height: 70px;
}

.sticky .custom-nav .nav-list li a.menu-links {
    line-height: 70px;
}

.main-header.sticky {
    height: 70px;
}

.top-header {
    position: relative;
    z-index: 999;
}

.navbar .mobile-menu {
    display: none;
}

.navbar .mobilemenu {
    color: #0a2233;
    top: -4px;
    position: relative;
}

.navbar .mobilemenu i {
    font-size: 25px;
}

.mob-nav {
    display: flex;
}

.mob-nav li {
    position: relative;
}

.ml8 {
    margin-left: 8px;
}

.animate {
    animation-duration: 0.4s;
    -webkit-animation-duration: 0.4s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.top-header .dropdown-toggle::after {
    display: inline-block;
    margin-left: 3px;
    vertical-align: baseline;
    content: "+";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 100px;
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #ffffff;
    outline: none;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #0a2233;
    text-decoration: none;
    background-color: #ffffff;
    outline: none;
}

.dropdown-menu {
    border: 0px solid rgba(0, 0, 0, .15);
}

header .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 10px 0;
    margin: 0;
    font-size: 16px;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: var(--white-color);
    background-clip: padding-box;
    border: 0;
    border-top: 0px solid rgb(0, 186, 255);
    border-radius: 0px 0px 8px 8px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.dropdown-item {
    display: block;
    width: 100%;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 15px;
    color: #0a2233;
    font-family: var(--font-family);
    font-weight: 500;
    padding: 10px 15px;
}

.navbar-toggler {
    background-color: var(--white-color);
    border: 1px solid #fff;
}

.top-header .sticky {
    background: #fff;
    -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
    box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
    height: 70px;
}

.nav-item.dropdown:hover {
    background: #fff;
}

.list-mnu li a {
    white-space: break-spaces;
    line-height: 24px;
    padding: 5px 10px;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    font-size: 16px;
    color: #0a2233;
    font-family: var(--font-family);
    font-weight: 500;
    padding: 0px 15px;
    line-height: 48px;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    padding-top: 0;
    padding-bottom: 0;
    height: 100px;
}

.brand-logo a {
    display: block;
}

.brand-logo:hover img {
    transform: scale(1.1);
}

.top-header .navbar .custom-btn {
    padding: 0px 32px;
    color: var(--white-color);
    font-weight: 400;
}

.top-header .navbar .custom-btn:hover,
.top-header .navbar .custom-btn:focus {
    color: var(--white-color);
}

/* .modal-backdrop {
    background: linear-gradient(135deg, #0c0004 0%, var(--black-color)e0c 100%);
} */
.modal {

    background: rgba(0, 0, 0, 0.35);
    /* dark transparent overlay */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
}

.abt {
    position: absolute;
    right: 15px !important;
    top: 0px !important;
    z-index: 9999999;
}

.popup-modalfull .modal-dialog {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
}

.popup-modalfull .modal-content {
    border: 0;
    height: 100%;
    border-radius: 0;
}



.popup-modalfull .modal-body {
    overflow-y: auto;
}

.main-header.sticky .nx-dropdown {
    top: 65px;
}

.nav-bg-b .custom-nav .nav-list li a.menu-links {
    color: var(--white-color);
}

.main-header.sticky {
    background: #fff;
    -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
    box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
}

.main-header {
    padding: 0 10px;
    height: 85px;
    z-index: 99999;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

.fa-ani {
    margin-left: 5px;
    font-size: 12px;
    animation: 2s infinite arrowanim;
    -webkit-animation: 2s infinite arrowanim;
}

.sub-menu-center-block {
    display: flex;
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 20px;
    width: 100%;
}

.right-bddr {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0px 10px 0 0px !important;
    margin: 0 20px 0 0;
}

.custom-nav .sbmenu .first-menu::before {
    display: none;
}

.custom-nav .sbmenu>a::before {
    content: "+";
    position: absolute;
    right: 4px;
}

.custom-nav .sbmenu.hover>a::before {
    content: "-";
}

.main-header.sticky .custom-nav .nav-list li a.menu-links {
    color: #050748;
}

.main-header.sticky .mega-white-logo {
    display: none;
}

.main-header .mega-white-logo {
    display: none;
}

.nav-bg-b.main-header.sticky .mega-white-logo {
    display: none;
}

.nav-bg-b.main-header .mega-white-logo {
    display: inline-block;
}

.nav-bg-b.main-header .mega-darks-logo {
    display: none;
}

.main-header.sticky .mega-darks-logo {
    display: inline-block;
}

.dsk-logo {
    float: left;
    line-height: 85px;
    width: 235px;
}

.dsk-logo .nav-brand img {
    max-height: 60px;
}

.custom-nav {
    float: right;
}

.custom-nav .menu-dorpdown {
    width: 240px;
    margin: 0 auto;
}

.custom-nav .smfull {
    width: 100%;
}

.custom-nav .nav-list li {
    display: inline-flex;
}

.custom-nav .nav-list li.rpdropdown {
    position: relative;
}

.custom-nav .nav-list li a.menu-links {
    font-size: 12px;
    color: #050748;
    font-family: var(--font-family);
    font-weight: 500;
    padding: 0px 14px;
    line-height: 85px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.btn-br {
    line-height: 48px;
    color: var(--white-color);
    border-radius: 100px;
    padding: 0 20px;
}

.btn-br:hover {
    color: var(--white-color);
}

.btn-round- {
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    padding: 0;
    margin-right: 8px;
    position: relative;
    display: inline-block;
}

.btn-round-.trngl:after {
    content: '';
    position: absolute;
    right: 17px;
    top: 85%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #e8e8e8;
    clear: both;
    transform: translateY(-50%);
}

.btshad-b1 {
    -webkit-box-shadow: 0 10px 15px 0px rgba(175, 0, 87, .2);
    box-shadow: 0 10px 15px 0px rgba(175, 0, 87, .2);
}

.btshad-b2 {
    -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
    box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
}

.nx-dropdown {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 80px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

div.custom-nav>ul>li:hover .nx-dropdown {
    opacity: 1;
    height: auto;
    overflow: inherit;
}

.submenu-btnset {
    position: relative;
    display: block;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    white-space: normal;
}

.sub-menu-column {
    width: 25%;
    float: left;
    padding: 0 20px;
}

.sub-menu-column .menuheading {
    color: #050748;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .2px;
    margin: 0 0 16px 0;
    padding: 0 0 14px 0;
    border-bottom: 1px solid #dadada;
}

.sub-menu-column ul {
    width: 100%;
    display: inline-block;
    position: relative;
}

.sub-menu-column ul li {
    width: 100%;
    height: auto;
    float: left;
    padding: 0;
    margin-right: 0;
    margin-bottom: 9px;
}

.sub-menu-column ul li a {
    width: 100%;
    font-size: 15px;
    color: #050748;
    position: relative;
    line-height: 25px;
    font-weight: 600;
}

.sub-menu-section {
    box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 0.04);
    border-top: 2px solid #f3f3f3;
    width: 100%;
    padding: 0px 0;
    display: inline-block;
    background-color: #ffffff;
    margin-top: 4px;
}

.btn-block a {
    min-width: 230px;
    text-align: center;
    -webkit-box-shadow: 0 10px 15px 0px rgba(47, 0, 16, 0.15);
    box-shadow: 0 10px 15px 0px rgba(47, 0, 16, 0.15);
}

.bgtspnt {
    background: transparent !important;
}

div.custom-nav>ul>li.sbmenu>a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background: #4f4daf;
    left: -100%;
    bottom: 0px;
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

div.custom-nav>ul>li.sbmenu:hover>a:after {
    left: 0;
    opacity: 1;
}

.contact-show {
    position: relative;
}

.contact-show:hover .contact-inquiry {
    display: block;
}

.contact-inquiry {
    width: 285px;
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 99;
    display: none;
    transition: all 2s linear;
}

.hrbg {
    background: #e4e8ff;
}

.contact-info- .contct-heading {
    font-size: 19px;
    color: #3c4147;
    font-weight: 700;
    padding: 11px 20px;
    letter-spacing: .2px;
}

.contact-info- .inquiry-card-nn .title-inq-c {
    font-size: 14px;
    font-weight: bold;
}

.contact-info- .inquiry-card-nn ul li a {
    font-size: 16px;
    color: #050748;
    font-weight: 700;
    text-decoration: none;
}

.contact-info- .inquiry-card-nn {
    border-top: 1px solid #e1e1e2;
    position: relative;
    padding: 15px 20px;
    text-align: left;
}

.contact-info- {
    width: 100%;
    display: inline-block;
    padding: 0;
    background: #fff;
    border-radius: 5px;
    margin-top: 20px;
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.contact-info- .inquiry-card-nn ul li {
    list-style: none;
    margin: 14px 0;
    text-align: left;
    display: block;
}

.contact-info- .inquiry-card-nn ul li.mb0 {
    margin-bottom: 0;
}

.contact-info- .inquiry-card-nn ul li i {
    font-size: 20px;
    margin: 0 11px 0 0px;
    color: #8BC34A;
}

.contact-info- .inquiry-card-nn span {
    font-size: 13px;
    color: #828282;
}

.contact-info- .inquiry-card-nn .fa-envelope {
    color: #012169;
}

.contact-info-:after {
    content: '';
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid rgba(255, 255, 255, .95);
    top: -14px;
    right: 22px;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

a.play-video {
    min-width: 70px;
    min-height: 70px;
    display: inline-flex;
    background: #ffffff;
    border-radius: 1000px;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
    align-items: center;
}

a.play-video::after {
    content: '';
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 6px solid #ffffff;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring-ani 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
    box-shadow: 0 0 0 0 rgba(12, 108, 211, 0.5);
}

@-webkit-keyframes ring-ani {
    to {
        box-shadow: 0 0 0 18px rgba(12, 108, 211, 0);
    }
}

.triangle-play {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 25px solid #ff2d8d;
    border-bottom: 15px solid transparent;
    text-align: center;
    margin: 0 auto 0;
}

.hero-card-web {
    position: relative;
    overflow: hidden;
    padding-top: 150px;
    padding-bottom: 100px;
    height: 100vh;
    align-items: center;
    display: flex;
}

/* .hero-main-rp {
    padding: 100px 180px 0px;
} */

.hero-heading-sec h2 {
    color: var(--white-color);
    font-size: 55px;
    line-height: 67px;
    text-transform: uppercase;
    font-weight: 700;
}

.hero-heading-sec h2 span {
    display: block;
}

.hero-heading-sec>p {
    color: #fff000;
    font-size: 18px;
    max-width: 400px;
    margin: 40px 0;
}

.flags-size {
    width: 25px;
}

.awards-block-tt {
    margin-top: 40px;
}

.hero-content-sec {
    display: inline-flex;
    align-items: center;
}

.title-hero-oth p {
    font-size: 20px;
    color: var(--white-color);
    margin: 0 0 0 25px;
    text-transform: uppercase;
}

.title-hero-oth p span {
    display: block;
    color: #fff000;
}

.hero-service-cards {
    margin-top: 100px;
}

.service-slide {
    border-radius: 30px;
    max-width: 280px;
    overflow: hidden;
    margin: 20px 0;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.service-card-hh {
    transform: translateZ(20px);
    display: block;
}

.image-sr-mm {
    height: 250px;
    width: 100%;
    padding: 0px 0 0px 0;
    position: relative;
    margin: 0 auto;
}

.image-sr-mm img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto 0;
    max-width: 100%;
    max-height: 100%;
    width: initial !important;
}

.title-serv-c {
    color: var(--white-color);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    padding: 20px 20px 35px;
}

.title-serv-c span {
    display: block;
}

.card-bg-a {
    background: #3faee5;
    background: -moz-linear-gradient(top, #3faee5 0, #6d03ce 100%);
    background: -webkit-linear-gradient(top, #3faee5 0, #6d03ce 100%);
    background: linear-gradient(to bottom, #3faee5 0, #6d03ce 100%);
}

.card-bg-b {
    background: #ff92f6;
    background: -moz-linear-gradient(top, #ff92f6 0, #b300a5 100%);
    background: -webkit-linear-gradient(top, #ff92f6 0, #b300a5 100%);
    background: linear-gradient(to bottom, #ff92f6 0, #b300a5 100%);
}

.card-bg-c {
    background: #3e35b7;
    background: -moz-linear-gradient(top, #3e35b7 0, #4c4aff 100%);
    background: -webkit-linear-gradient(top, #3e35b7 0, #4c4aff 100%);
    background: linear-gradient(to bottom, #3e35b7 0, #4c4aff 100%);
}

.card-bg-d {
    background: #f72c8c;
    background: -moz-linear-gradient(top, #f72c8c 0, #b82dcf 100%);
    background: -webkit-linear-gradient(top, #f72c8c 0, #b82dcf 100%);
    background: linear-gradient(to bottom, #ffa76a 0, #ff8e38 100%);
}

.card-bg-e {
    background: #5782ea;
    background: -moz-linear-gradient(top, #5782ea 0, #2251af 100%);
    background: -webkit-linear-gradient(top, #5782ea 0, #2251af 100%);
    background: linear-gradient(to bottom, #5782ea 0, #2251af 100%);
}

.card-bg-f {
    background: #95e5ff;
    background: -moz-linear-gradient(top, #95e5ff 0, #009688 100%);
    background: -webkit-linear-gradient(top, #95e5ff 0, #009688 100%);
    background: linear-gradient(to bottom, #95e5ff 0, #009688 100%);
}

.shape-bg3:before {
    content: "";
    background: url(images/shape/shape-12.svg);
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.03;
}

.hero-bg-bg1:before {
    content: "";
    background: url(images/hero/banner-shap-2.webp);
    position: absolute;
    height: 100vh;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    background-position: left 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.hero-section {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
    height: 100vh;
    align-items: center;
    display: grid;
}

.btn-main:hover {
    color: var(--white-color);
}

.btn-main {
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-family);
    padding: 0px 32px;
    line-height: 56px;
    text-align: center;
    outline: none;
    color: var(--white-color);
    background-color: var(--first-color);
    border: none;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    display: inline-block;
    position: relative;
    /* -webkit-box-shadow: 0 10px 15px 0px rgba(233, 30, 99, .15);
	box-shadow: 0 10px 15px 0px rgba(233, 30, 99, .15); */
}

.header-heading h1 {
    font-size: 60px;
    line-height: 72px;
    font-weight: 700;
    margin-bottom: 30px;
}

.header-heading p {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 35px;
}

.about-agency .common-heading h2 {
    margin-bottom: 20px;
}

.about-agency {
    position: relative;
    overflow: hidden;
}

/* .about-agency:before {
    content: "";
    background: url(images/shape/dot_bg.webp);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
} */

.text-l {
    text-align: left !important;
}

.common-heading>span {
    color: var(--first-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 15px 0;
    display: block;
}

.quote {
    font-weight: 500;
    padding: 25px;
    position: relative;
    border-left: 4px solid #ff358f;
    margin: 30px 0;
    background: #FAFAFB;
    color: #6a6a8e;
    font-family: var(--font-family);
}

.user- .user-image img {
    border-radius: 100%;
    width: 80px;
}

.user-info {
    margin: 0px 0 0 0px;
    text-align: left;
}

.user-info p span {
    font-weight: 700;
}

.service-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.image-block img {
    width: 100%;
    border-radius: 8px;
}

.img-block img {
    width: 100%;
    border-radius: 8px;
}

.white-text {
    color: #fff !important;
}

.shape-num .shape-loc:first-child:before {
    content: '';
    background: url(images/shape/shape-1.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    left: -40px;
    bottom: -60px;
    z-index: -1;
}

.shape-num .shape-loc:last-child:after {
    content: '';
    background: url(images/shape/shape-2.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    right: -40px;
    bottom: -60px;
    z-index: -1;
}

.shape-bg2 img {
    z-index: 1;
    position: relative;
}

.shape-bg2 {
    position: relative;
}

.shape-bg2:after {
    content: '';
    background: url(images/shape/shape-2.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    right: -40px;
    bottom: -60px;
    z-index: -1;
}

.shape-bg2:before {
    content: '';
    background: url(images/shape/shape-1.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    left: -40px;
    bottom: -60px;
    z-index: 0;
}

/* .service-section:before {
    content: "";
    background: url(images/shape/dot-shape.webp) #d7f0fd; 
    position: absolute;
    height: 400px;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    background-position: center top;
    background-size: contain;
    background-repeat: repeat;
}*/

.s-block {
    background: #fff;
    text-align: center;
    background-size: 200%;
    background-position: top right;
    background-repeat: no-repeat;
    text-align: center;
    padding: 50px 20px;
    margin: 0;
    position: relative;
    /* border: 1px solid #d4f0ff; */
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /* -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2); */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.service-section .s-block {
    background: url(images/shape/shape-7.svg) #fff;
    background-size: 180px;
    background-position: top right;
    background-repeat: no-repeat;
}

.s-card-icon {
    width: 50%;
    /* margin: 0 auto 30px; */
}

.s-block h4 {
    margin: 0 0 10px 0;
}

.s-block a {
    display: inline-block;
    margin: 30px 0 0 0;
    color: #050748;
    font-family: var(--font-family);
}

.upset {
    position: relative;
    z-index: 5;
}

.service-2:before {
    background-color: #f9f9f9;
}

.wide-block {
    padding: 40px 30px;
    margin: 5px 0;
    position: relative;
    border: 0px solid #d4f0ff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.service-img1 {
    background: #e9ddff;
}

.service-img1:after {
    background: url(images/service/service-img-1.webp);
}

.service-img2 {
    background: #ffdadb;
}

.service-img2:after {
    background: url(images/service/service-img-2.webp);
}

.service-img3 {
    background: #d6edff;
}

.service-img3:after {
    background: url(images/service/service-img-3.webp);
}

.service-img4 {
    background: #ffede1;
}

.service-img4:after {
    background: url(images/service/service-img-4.webp);
}

.wide-block:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-size: 280px;
    background-position: right center;
    background-repeat: no-repeat;
}

.block-space- {
    max-width: 50%;
    position: relative;
    z-index: 555;
}

.wide-block h4 {
    margin: 20px 0 30px 0;
}

.tilt3d .statistics-img {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.tilt3d .statistics-img img {
    transform: translateZ(20px);
}

.about-statistics {
    background-image: url(../images/banner/banner.webp);
    background-size: cover;
    background-attachment: fixed;
}

.statistics {
    align-items: center;
    display: flex;
    justify-content: center;
}

.statistics p {
    font-size: 20px;
    margin: 10px 0 0 0;
    font-weight: 500;
    color: var(--white-color);
}

.statistics span {
    font-size: 45px;
    color: var(--white-color);
    font-weight: 700;
    display: inline-block;
}

.statistics-img {
    width: 100px;
    height: 100px;
    float: left;
    padding: 15px;
    background: #fff;
    border-radius: 8px 40px 8px 40px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

/* .statnumb {
    margin: 0 0 0 20px;
    text-align: left;
    float: left;
} */

.small .statistics-img {
    width: 75px;
    height: 75px;
}

.t-ctr {
    text-align: center;
}

.small .statistics span {
    font-size: 35px;
    color: #050748;
}

.in-stats .statistics span {
    font-size: 40px;
    color: var(--white-color);
}

.small .statistics p {
    font-size: 18px;
    line-height: 24px;
}

.small {
    margin-top: 100px;
}

.in-stats .statistics {
    text-align: center;
}

.card-stats .statistics {
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    background: #ffffff;
    -webkit-box-shadow: -30px 30px 60px #f2f2f2, 30px -30px 60px #ffffff;
    box-shadow: -30px 30px 60px #f2f2f2, 30px -30px 60px #ffffff;
}

.breadcrumb-areav2.portfolio-new-section{
    background: url('../images/banner/portfolio-banner.webp') !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 100vh !important; */
}

.portfolio-section {
    background: var(--light-grey);
    position: relative;
}

.portfolio-section .nav-link {
    color: var(--white-color);
    background-color: var(--black-color);
    margin-right: 8px;
    margin-bottom: 5px;
}

.portfolio-section .nav-tabs .nav-item.show .nav-link,
.portfolio-section .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--first-color);
    border-color: var(--first-color);
}

/* .portfolio-section:before {
    content: "";
    background: url(images/shape/dot-pattern.webp);
    position: absolute;
    height: 400px;
    right: 0;
    left: 0;
    top: 0;
    background-size: auto;
    background-repeat: repeat;
} */

.isotope_item {
    position: relative;
}

.item-info {
    padding: 20px 0 0px 0;
}

.isotope_item h4 {
    font-weight: 600;
    margin: 0 0 10px 0;
}

.isotope_item h4 a {
    color: #050748;
}

.item-image {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f9ff;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.item-image img {
    width: 100%;
}

.portfolio-block {
    position: relative;
    padding: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portfolio-item-info h3 a {
    color: #050748;
}

.portfolio-item-info {
    width: 50%;
    padding-right: 40px;
}

.portfolio-item-image {
    width: 50%;
    text-align: center;
}

.portfolio-item-info .-reviewr {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 15px;
}

.portfolio-item-info .review-text {
    padding: 0px 0 20px 0;
}

.portfolio-item-info .reviews-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 25px;
    border-radius: 8px;
}

.clients-logo {
    background: #ffffff;
    padding: 0px 15px;
    max-height: 150px;
    min-height: 150px;
    margin: 0 15px;
    border: 1px solid #d4f0ff;
    align-items: center;
    display: flex;
    position: relative;
    border-radius: 8px;
    -webkit-box-shadow: -20px 20px 40px #ece0f2, 20px -20px 40px #fff8ff;
    box-shadow: -20px 20px 40px #ece0f2, 20px -20px 40px #fff8ff;
}

.clients-section {
    background: #fffaf5;
    background: -moz-linear-gradient(top, #fffaf5 0%, #f8ecff 100%);
    background: -webkit-linear-gradient(top, #fffaf5 0%, #f8ecff 100%);
    background: linear-gradient(to bottom, #fffaf5 0%, #f8ecff 100%);
}

.clients-logo img {
    margin: 0 auto;
    display: block;
    width: 160px;
}

.opl ul {
    display: contents;
}

.opl ul li {
    width: 20%;
    float: left;
    position: relative;
}

.work-category {
    background: #fbf9ed;
    background: -moz-linear-gradient(top, #fbf9ed 0%, #fbeaf8 100%);
    background: -webkit-linear-gradient(top, #fbf9ed 0%, #fbeaf8 100%);
    background: linear-gradient(to bottom, #fbf9ed 0%, #fbeaf8 100%);
    position: relative;
}

.work-category .common-heading h2 {
    margin-bottom: 30px;
}

.work-card p {
    color: #050748;
    font-family: var(--font-family);
    line-height: 24px;
    font-size: 16px;
    margin: 5px 0 0 0;
    padding: 0 12px;
}

.icon-bg {
    display: block;
    height: 62px;
    width: 62px;
    margin: 0 auto;
    text-align: center;
}

.icon-set {
    width: 25%;
    display: inline-block;
    float: left;
    position: relative;
}

.work-card {
    margin: 10px;
    padding: 30px 20px;
    max-height: 170px;
    text-align: center;
    min-height: 170px;
    border-radius: 8px 40px 8px 40px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.cd1 {
    background: #70e4e8;
}

.cd2 {
    background: #f5eb92;
}

.cd3 {
    background: #a3ffe2;
}

.cd4 {
    background: #ffbc7a;
}

.cd5 {
    background: #e3ff8e;
}

.cd6 {
    background: #ffa0c6;
}

.cd7 {
    background: #f3a6ff;
}

.cd8 {
    background: #97ffaf;
}

.cd9 {
    background: #6cfffa;
}

.cd10 {
    background: #77baff;
}

.cd11 {
    background: #ffefd4;
}

.cd12 {
    background: #7affdb;
}

.testinomial-section {
    background: url(images/shape/shape-9.svg) #fff;
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat;
}

.testimonial-card .t-text p {
    font-size: 16px;
    line-height: 28px;
}

.testinomial-section .owl-carousel .owl-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    background: #ffffff;
    width: 100px;
    margin: 0;
    height: 50px;
    padding: 25px 0 0 0;
}

.user-info p {
    font-size: 16px;
    line-height: 24px;
}

.owl-carousel .user-image img {
    border-radius: 100%;
    width: 80px;
}

/* .owl-carousel .owl-dots .owl-dot:before {
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    opacity: 0;
    background: 0 0;
     border: 1px solid var(--second-color);
} */

/* .owl-carousel .owl-dots .owl-dot:after,
.owl-carousel .owl-dots .owl-dot:before {
    content: '';
    position: absolute;
    border-radius: 50%;
    -webkit-transition: ease-out .16s;
    transition: ease-out .16s;
}

.owl-carousel .owl-dots .owl-dot {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px;
    vertical-align: middle;
}

.owl-carousel .owl-dots .owl-dot.active:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.owl-carousel .owl-dots .owl-dot:after {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: .4;
    background: var(--second-color);
    width: 4px;
    height: 4px;
}

.owl-carousel .owl-dots .owl-dot.active:after,
.owl-carousel .owl-dots .owl-dot.active:before {
    opacity: 1;
}

.owl-carousel .owl-dots .owl-dot.active:after,
.owl-carousel .owl-dots .owl-dot:focus:after,
.owl-carousel .owl-dots .owl-dot:hover:after {
    opacity: 1;
} */

.light-bgs {
    background: rgba(255, 255, 255, 0.52);
    padding: 30px;
    border-radius: 8px;
}

.enquire-form {
    background: #D6FFFC;
    background: -moz-linear-gradient(top, #D6FFFC 0%, #ffeff5 100%);
    background: -webkit-linear-gradient(top, #D6FFFC 0%, #ffeff5 100%);
    background: linear-gradient(to bottom, #D6FFFC 0%, #ffeff5 100%);
}

.custom-file-label::after {
    line-height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    border: 0;
    height: auto;
    padding: 0px 15px;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0;
    cursor: pointer;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    padding: 0px 15px;
    font-weight: 400;
    height: 50px;
    line-height: 46px;
    background-color: var(--white-color);
    border: 2px solid #ced4da;
    border-radius: 4px;
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
}

.modal-backdrop.show {
    /* opacity: 0.9; */
    z-index: 99999;
}

.fdgn2 input,
.fdgn2 select,
.fdgn2 textarea {
    border: 2px solid #e6e6e6 !important;
}

.form-block input:focus,
.form-block textarea:focus {
    /* border-bottom: 2px solid var(--second-color); */
    border-bottom: 2px solid var(--first-color);
}

.form-block input {
    width: 100%;
    height: 50px;
    /* padding: 0px 15px; */
    margin: 0px 0 15px 0;
    color: #172b43;
    font-size: 16px;
    outline: none;
    /* background: #fff; */
    background: white;
    border: 0;
    /* border-bottom: 2px solid #e6e6e6; */
    border-bottom: 2px solid #fff;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.form-block textarea {
    height: 100px;
    width: 100%;
    /* padding: 15px; */
    margin: 0px 0 15px 0;
    color: #172b43;
    font-size: 16px;
    outline: none;
    /* background: #fff; */
    background: var(--white-color);
    border: 0;
    /* border-bottom: 2px solid #e6e6e6; */
    border-bottom: 2px solid #fff;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.form-block .form-group {
    margin-bottom: 0;
}

.form-group.from-cta-left-img .from-cta-img-content {
    padding: 40px 0px 0px 27px;

}

.form-group.from-cta-left-img .from-cta-img-content h3,
.form-group.from-cta-left-img .from-cta-img-content p {
    color: var(--white-color);

}

.form-group.from-cta-left-img .from-cta-img-content .modal-icons {
    display: flex;
    gap: 12px;
}

.form-group.from-cta-left-img .from-cta-img-content .modal-icon {
    display: flex;
    align-items: center;
    color: var(--white-color);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border-radius: 16px;
    gap: 12px;
    padding: 10px 10px;
    margin: 30px 0 0 0;
}

.form-group.from-cta-left-img .from-cta-img-content .cta-review-bottom {
    width: fit-content;
    color: var(--white-color);
    background: rgba(22, 22, 22, 0.397);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border-radius: 16px;
    border: 2px solid #D4AF37;
    gap: 12px;
    padding: 10px 10px;
    margin: 30px 0 0 0;
}


.form-block select {
    width: 100%;
    height: 50px;
    padding: 0px;
    margin: 0px 0 15px 0;
    color: var(--white-color);
    font-size: 16px;
    outline: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #e6e6e6;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.help-block.with-errors {
    color: #ff5050;
    margin: 0px 0 0 10px;
    font-size: 13px;
    position: relative;
    bottom: 12px;
}

.messages .alert {
    position: relative;
    padding: 6px 25px 6px 6px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 14px;
}

.form-block .messages button:hover {
    background-color: transparent;
}

.messages .close {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--black-color);
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-align: right;
    position: absolute;
    right: 5px;
    top: 0;
}

.custom-control-input:checked~.custom-control-label::before {
    color: var(--white-color);
    border-color: var(--first-color);
    background-color: var(--first-color);
}

.custom-control-input:focus~.custom-control-label::before {
    -webkit-box-shadow: 0 3px 6px rgba(91, 130, 148, .08);
    box-shadow: 0 3px 6px rgba(91, 130, 148, .08);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #ffbc80;
}

.custom-control-label::before {
    position: absolute;
    top: -1px;
    left: -1.5rem;
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
    content: "";
    background-color: var(--white-color);
    border: #adb5bd solid 1px;
}

.custom-control-label::after {
    position: absolute;
    top: -3px;
    left: -26px;
    display: block;
    width: 25px;
    height: 25px;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.custom-control {
    margin-bottom: 10px;
}

.form-block label input {
    height: 20px;
    width: 20px;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
}

.fieldsets label {
    position: relative;
    top: -14px;
    font-size: 14px;
    color: var(--first-color);
    margin: 0;
    padding: 0;
    display: inline;
}

.custom-control label {
    text-indent: -21px;
    padding: 2px 0 0 21px;
    font-size: 14px;
}

.form-block label a {
    color: var(--black-color);
}

.form-block p.trm {
    font-size: 13px;
    width: 100%;
    text-align: center;
    margin: 10px 0 0 0;
}

.form-block p.trm i {
    padding: 5px 5px 0 0;
}

.form-block button:hover {
    background-color: var(--first-color);
}

.inquiry-from .form-block button {
    width: 100%;

}

.inquiry-from .common-heading ul li {
    display: flex;
    align-items: center;
    gap: 22px;

}

.inquiry-from .common-heading ul li a,
.inquiry-from .common-heading ul li i {
    color: var(--black2-color);
}


.inquiry-from .common-heading .fttlnks .ff-social-icons i {
    color: var(--first-color) !important;
    border: 2px solid var(--first-color);
    padding: 10px;
    border-radius: 30px;
}

/* .form-block button {
	width: 100%;
} */

.our-office {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.shape-bg1,
.shape-num,
.shape-num {
    position: relative;
}

.shape-numm .shape-loc:first-child:before {
    content: '';
    background: url(images/shape/shape-1.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    left: -40px;
    top: -55px;
    z-index: -1;
}

.shape-numm .shape-loc:last-child:after {
    content: '';
    background: url(images/shape/shape-2.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    right: -40px;
    top: -55px;
    z-index: -1;
}

.shape-bg1:before {
    content: '';
    background: url(images/shape/shape-1.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    left: -40px;
    top: -55px;
    z-index: -1;
}

.shape-bg1:after {
    content: '';
    background: url(images/shape/shape-2.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    right: -30px;
    top: -80px;
    z-index: -1;
}

.office-text {
    padding: 20px 0 0 0;
}

.office-text h4 {
    margin: 0 0 10px 0;
}

.office-text p {
    padding: 0 50px 0 0;
    margin: 0 0 20px 0;
}

.skyline-img {
    background: #fbf4f1;
    padding: 20px;
    border-radius: 8px 40px 8px 0px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.-address-list li a {
    color: #6a6a8e;
}

.-address-list li a i {
    width: 25px;
}

.-address-list li {
    line-height: 35px;
}

#scrollUp:hover {
    opacity: 1;
    background: url(../images/icons/up-arrow.svg) var(--second-color);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center center;
    background-repeat: no-repeat;
}

#scrollUp {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    color: var(--white-color);
    /* opacity: .4; */
    background: url(../images/icons/up-arrow.svg) var(--first-color);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center center;
    background-repeat: no-repeat;
}

footer {
    position: relative;
}

.footer-svg {
    height: 80px;
    overflow: hidden;
    margin: -20px 0 0 0px;
}

.footer-svg svg path {
    fill: #FFF0F5;
}

footer .row {
    position: relative;
    z-index: 1;
}

footer.ftshap:after {
    content: "";
    background: url(images/shape/shape-1.webp);
    position: absolute;
    width: 200px;
    height: 370px;
    background-repeat: no-repeat;
    top: 35%;
    z-index: 0;
    right: 0;
    background-position: center right;
    background-size: 80%;
    opacity: 0.5;
}

footer.ftshap:before {
    content: "";
    background: url(images/shape/shape-2.webp);
    position: absolute;
    width: 250px;
    height: 250px;
    bottom: 0;
    z-index: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100%;
    opacity: 0.5;
}

.footer-row1 {
    background: #fffdf2;
    background: -moz-linear-gradient(top, #fffdf2 0%, #ffeff5 100%);
    background: -webkit-linear-gradient(top, #fffdf2 0%, #ffeff5 100%);
    background: linear-gradient(to bottom, #fffdf2 0%, #ffeff5 100%);
    padding: 80px 0;
}

.footer-row2 {
    background: #ffffff;
    padding: 50px 0 80px 0;
}

.footer-row3 {
    background: #ffffff;
    padding: 40px 0;
}

.email-subs h3 {
    margin-bottom: 10px;
}

.hline {
    border-top: 1px solid #e2eaef;
    margin: 0;
    position: relative;
}

.email-subs-form {
    position: relative;
}

.email-subs-form form {
    align-items: center;
    justify-content: center;
    display: flex;
}

.email-subs-form input {
    width: 100%;
    height: 65px;
    padding: 0px 175px 0px 30px;
    margin: 0px 0 0px 0;
    color: #172b43;
    font-size: 16px;
    outline: none;
    background: #fff;
    border: 1px solid #e6e6e6;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: -6px 6px 11px #f2f2f2, 6px -6px 11px #fff0e8;
    box-shadow: -6px 6px 11px #f2f2f2, 6px -6px 11px #fff0e8;
}

.email-subs-form button {
    width: max-content;
    position: absolute;
    right: 5px;
    border-radius: 28px 100px 100px 28px;
    padding: 0 30px;
    line-height: 55px;
    box-shadow: none;
}

.footer-row2 h5 {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 500;
    margin-top: 30px;
}

.footer-address-list li p {
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-family);
    line-height: 25px;
}

.footer-address-list li p span {
    display: flex;
    font-weight: 400;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}

.footer-address-list li>span {
    position: relative;
    top: 5px;
}

.footer-address-list li {
    color: #6a6a8e;
    display: flex;
    padding: 0 0 5px 0;
}

.footer-address-list li:last-child {
    padding: 0 0 0px 0;
}

.footer-address-list li a {
    color: #6a6a8e;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.footer-address-list li i {
    margin: 0 15px 0 0;
    display: initial;
    font-size: 21px;
}

.ftr-details li {
    padding: 0 0 15px 0;
}

.footer-block {
    padding: 20px 0;
}

.social-links {
    text-align: right;
}

.social-links a {
    color: #6a6a8e;
    font-size: 25px;
    line-height: 1;
}

.footer-social-media-icons a:hover {
    color: var(--second-color) !important;
}

.footer-social-media-icons a {
    color: #6a6a8e;
    font-size: 26px;
    border-radius: 4px;
    margin: 0 20px;
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    line-height: 34px;
}

.copyright {
    text-align: center;
    color: #6a6a8e;
}

.footer-social-media-icons {
    margin: 0 0 30px 0;
}

.footer- p a {
    color: #6a6a8e;
}

.link-hover a {
    color: var(--black-color);
    font-family: var(--font-family);
    display: inline-block;
    padding: 3px 0;
    position: relative;
    overflow: hidden;
    -webkit-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    -o-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    z-index: 1;
}

.link-hover a::after {
    content: "";
    width: 0;
    height: 1px;
    bottom: 0;
    position: absolute;
    left: auto;
    right: 0;
    z-index: -1;
    -webkit-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    -o-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background: currentColor;
}

.link-hover a:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.link-hover a:hover {
    color: var(--first-color) !important;
}

.breadcrumb-area {
    padding: 250px 0px 250px 0px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.breadcrumb-areav2 {
    padding: 150px 0px 80px 0px;
    /*position: relative;
    overflow: hidden;
    background-image: url(../images/banner/banner.webp);
    background-size: cover;
     background-position: center center; 
    background-repeat: no-repeat;*/
    background: url(../images/banner/main-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* height: 100vh; */
}

/* xxxxxxxxxxxx */

.bread-titlev2 {
    text-align: left;
}

.statistics-wrap {
    padding: 30px 0;
    -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.05);
}

/*.breadcrumb-areav2:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: .85;
    right: 0;
    left: 0;
    z-index: 0;
     background: -moz-linear-gradient(-45deg, #ffdee9 0%, #c8fff4 100%);
	background: -webkit-linear-gradient(-45deg, #ffdee9 0%, #c8fff4 100%);
	background: linear-gradient(135deg, #ffdee9 0%, #c8fff4 100%); 
}*/

.breadcrumb-area:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: .85;
    right: 0;
    left: 0;
    z-index: 0;
}

.breadcrumb-area:after {
    content: '';
    z-index: 0;
    background: url(images/banner/banner-shap-2.webp);
    background-size: auto;
    position: absolute;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    right: 0;
    top: 0;
    z-index: 1;
    background-position: center right;
    background-size: contain;
}

.breadcrumb-area ul li {
    display: block;
    display: inline-block;
}

.breadcrumb-area .bread-menu li a {
    color: #6a6a8e;
    font-size: 16px;
    font-weight: 400;
    padding-right: 6px;
    display: inline-block;
}

.breadcrumb-area .bread-menu li+li::before {
    font-size: 5px;
    font-family: 'Font Awesome 5 Free';
    content: "\f111";
    font-weight: bold;
    margin: 0 10px 0 0;
    position: relative;
    top: -3px;
}

.text-block {
    position: relative;
    z-index: 55;
}

.bread-title h2 {
    font-weight: 600;
    font-size: 35px;
    line-height: 47px;
    margin: 15px 0 0 0;
    text-align: left;
}

.bread-title h6 {
    text-align: left;
}

.banner-process background-image {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* .bread-inner p {
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    float: right;
} */

.block-1 p+p {
    margin: 25px 0 0 0;
}

.block-1 .small {
    margin-top: 50px;
}

.block-1 .statnumb {
    margin: 0 0 0 0px;
}

/* .why-choose {
    background: #f7fcff;
} */

.banner-4 {
    background: url(images/banner/2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.team {
    overflow: hidden;
}

.bg-gradient99 {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #eef4fd 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #eef4fd 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #eef4fd 100%);
}

.image-div {
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
}

.info-text-block {
    padding: 20px 0 0px 0;
}

.info-text-block h4 {
    margin: 0 0 10px 0;
}

.info-text-block h4 a {
    color: #050748;
}

.full-image-card {
    margin-top: 60px;
}

.otherinfo {
    margin: 30px 0 0 0px;
}

.otherinfo p {
    line-height: 28px;
}

.social-media-profile {
    margin: 30px 0 0 0px;
}

.social-media-profile a {
    color: #6a6a8e;
    font-size: 22px;
    margin: 0 30px 0 0;
    display: inline-block;
    line-height: 34px;
}

.social-media-profile a:hover {
    color: var(--first-color);
}

.bg-shape img {
    position: relative;
    z-index: 5;
}

.bg-shape:after {
    content: '';
    background: url(images/shape/shape-1.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    left: -55px;
    top: -55px;
    z-index: 0;
}

.bg-shape:before {
    content: '';
    background: url(images/shape/shape-2.svg);
    background-size: auto;
    position: absolute;
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    right: -55px;
    bottom: -55px;
    z-index: 0;
}

.banner-3 {
    background: url(images/banner/5.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.common-heading.pp h2 {
    margin-bottom: 0px;
}

.common-heading.pp {
    padding: 0;
    text-align: left;
}

.common-heading.pp p {
    margin: 20px 0 0 0;
}

.single-card-item {
    margin-top: 60px;
}

.filter-menu {
    text-align: right;
}

.filters .filter-menu.recent {
    list-style: none;
    padding: 0;
    bottom: 0;
    position: inherit;
    text-align: right;
    margin: 35px 0 0 0;
}

.filters .filter-menu li {
    display: inline-block;
    padding: 20px;
    color: var(--white-color);
    cursor: pointer;
    background: var(--first-color);
    -webkit-border-radius: 100px;
    border-radius: 40px 40px 40px 20px;
}

.filters .filter-menu li.is-checked {
    background: var(--second-color);
    color: var(--white-color);
}

.portfolio-meta ul li {
    font-size: 14px;
    color: var(--white-color);
    display: block;
    text-align: left;
    background: #fff;
    position: relative;
    padding: 15px 20px 15px 55px;
    border-bottom: 1px solid #ebebeb;
}

.portfolio-meta ul li p {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 28px;
    background: #fff;
    display: inline-block;
    color: #050748;
    font-weight: 600;
}

.portfolio-meta ul li p span {
    font-family: 'Open Sans', sans-serif;
    display: block;
    margin-top: 2px;
    color: #6a6a8e;
    font-weight: 400;
}

.portfolio-meta ul li i {
    position: absolute;
    left: 10px;
    color: #050748;
    font-size: 25px;
    top: 50%;
    margin-top: -12.5px;
}

.pv-:hover .item-image img {
    transform: scale(1.0);
}

.h-scroll {
    width: 100%;
    padding: 50px 10px;
}

.tech-icons img {
    width: 45px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    transform: translatey(-50%);
}

.tech-icons li {
    margin: 6px;
    display: inline-block;
}

.tech-icons a:hover {
    border: 4px solid #d9cbff;
}

.tech-icons a {
    border: 4px solid #fff;
    display: inline-block;
    height: 100%;
    position: relative;
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 100%;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.techonology-used {
    background: #f9f9f9;
}

.banner-2 {
    background: url(images/banner/6.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.blog-banner {
    background: url(../images/banner/blog1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center center; */
}

.blog-banner h2 {
    color: #ffffff;
}

.blog-banner h1 {
    color: #ffffff;
}

.blog-banner h4 {
    color: #ffffff;
}

.thanks-banner {
    background: url(../images/banner/thank-you.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.service {
    overflow: hidden;
}

.service .common-heading h2 {
    margin-bottom: 20px;
}

.cta-area {
    position: relative;
    overflow: hidden;
    background: #e0f8ff;
    background: -moz-linear-gradient(top, #e0f8ff 0%, #fff0e5 100%);
    background: -webkit-linear-gradient(top, #e0f8ff 0%, #fff0e5 100%);
    background: linear-gradient(to bottom, #e0f8ff 0%, #fff0e5 100%);
}

.btn-outline {
    border: 2px solid var(--black2-color) 248;
    color: var(--white-color);
    display: inline-block;
    padding: 0px 35px;
    font-family: var(--font-family);
    font-size: 16px;
    background: var(--black2-color);
    -webkit-box-shadow: 0 10px 15px 0px rgba(3, 35, 68, 0.1);
    box-shadow: 0 10px 15px 0px rgba(3, 35, 68, 0.1);
    line-height: 42px;
    -webkit-border-radius: 100px;
    /* border-radius: 100px; */
}

.btn-outline:hover {
    line-height: 42px;

    padding: 0 35px;
    background: var(--first-color);
    color: var(--white-color);
    border: 2px solid var(--first-color);
}

.cta-call {
    margin: 30px 0 0 0;
}

.cta-call i {
    margin: 0 5px 0 0px;
}

.cta-call a {
    font-family: var(--font-family);
    font-size: 24px;
    color: #6a6a8e;
    display: inline-block;
    padding: 0 0 0 10px;
}

.cta-area .common-heading h2 {
    margin-bottom: 40px;
}

.shape {
    position: absolute;
}

.shape-a1 {
    bottom: -20px;
    left: 0;
}

.shape-a2 {
    bottom: -30px;
    right: 0;
}

.shape-a3 {
    top: 0px;
    right: 0;
}

.shape-a4 {
    top: -150px;
    right: 20%;
}

.common-heading.ptag h2 {
    margin-bottom: 15px;
}

/* .common-heading.ptag p {
    font-size: 16px;
    line-height: 28px;
} */

.ps-block span {
    font-size: 60px;
    font-family: var(--font-family);
    border-radius: 100%;
    border: 1px solid #e8e8e8;
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
    line-height: 100px;
    margin: 0 0 20px 0;
    color: #6a6a8e;
    border-radius: 68% 32% 64% 36% / 59% 59% 41% 41%;
    background: #f5f5ff;
    animation: border-transform 6s linear infinite;
}

.ps-block h3 {
    margin-bottom: 20px;
}

.ps-block p {
    font-size: 16px;
    line-height: 28px;
}

.ps-block {
    padding: 0 25px;
}

.featured-project .isotope_item {
    margin-top: 60px;
}

.featured-project {
    /* background: #f3fbff;
	background: -moz-linear-gradient(top, #f3fbff 0%, #fffdf6 100%);
	background: -webkit-linear-gradient(top, #f3fbff 0%, #fffdf6 100%);
	background: linear-gradient(to bottom, #f3fbff 0%, #fffdf6 100%); */
    background-color: var(--white-color);
}

.maga-btn {
    text-align: center;
}

.image-block1 img {
    -webkit-box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    width: 100%;
}

.image-block img {
    -webkit-box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    -webkit-border-radius: 8px;
}

.wide-sblock {
    display: inline-flex;
    text-align: left;
    padding: 30px 20px;
}

.s-block-content {
    margin: 0 0 0 20px;
}

.key-points {
    display: block;
}

.key-points li {
    padding: 8px 0 8px 35px;
    position: relative;
    line-height: 28px;
    font-size: 17px;
}

.key-points li:before {
    content: "\f00c";
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    left: 0;
    top: 9px;
    background: #ffc627;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    color: #333;
}

.service-point-2 {
    display: flow-root;
}

.service-point-2 li {
    font-size: 17px;
    font-weight: 600;
    line-height: 25px;
    padding: 4px 0;
    float: left;
    width: 50%;
}

.s-card-icon-large {
    width: 150px;
}

.s-block-content-large {
    margin: 0 0 0 20px;
    width: calc(100% - 150px);
}

.pricing-table {
    position: relative;
    text-align: center;
    padding: 30px 30px 0;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: -30px 30px 60px #f2f2f2, 30px -30px 60px #ffffff;
    box-shadow: -30px 30px 60px #f2f2f2, 30px -30px 60px #ffffff;
}

.pricing-table img {
    background: #e9f8ff;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    padding: 10px;
    border: 8px solid #fbfbfb;
    animation: border-transform 6s linear infinite;
}

.pricing-table .title {
    margin: 30px 0 10px 0;
    font-size: 16px;
    font-family: var(--font-family);
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    display: block;
    letter-spacing: 0.5px;
}

.pricing-table .title-sub {
    margin: 0 0 30px 0;
}

.pricing-table .inner-table h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--first-color);
    margin-bottom: 3px;
}

.pricing-table .inner-table p.duration {
    color: #72729a;
    font-weight: 500;
    margin-bottom: 0;
}

.pricing-table .inner-table .details {
    margin-top: 35px;
    padding-top: 28px;
    padding-bottom: 30px;
    line-height: 42px;
    border-top: 1px solid #e5e5e5;
}

.pricing-table a {
    margin-bottom: -26px;
    display: inline-block;
}

.pricing-table .inner-table .details ul {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

.pricing-table.best-plan .inner-table h2 {
    color: #2a89ea;
}

.pricing-table.best-plan img {
    background: #ccf0ff;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    padding: 10px;
    border: 8px solid #e9f8ff;
}

.banner-5 {
    background: url(images/banner/7.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.case-study1 {
    overflow: hidden;
}

.case-study3 {
    overflow: hidden;
}

.case-study .image-div {
    border-radius: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.case-study2 {
    background: #fee;
}

.image-div img {
    width: 100%;
}

.case-study2 .s-block {
    text-align: center;
    background: #fff;
    padding: 50px 20px;
    margin: 5px 0;
    position: relative;
    border: 1px solid #d4f0ff;
    -webkit-box-shadow: -25px 25px 45px #f0dede, 25px -25px 45px #fff6f6;
    box-shadow: -25px 25px 45px #f0dede, 25px -25px 45px #fff6f6;
}

.case-study3 .image-block img,
.case-study1 .image-block img {
    -webkit-box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    width: 100%;
}

.case-study4 {
    background: #fff;
}

.project-platform {
    display: inline-flex;
}

.project-platform-used a {
    display: flex;
    margin: 0 auto;
    align-items: center;
    height: 100%;
}

.project-platform-used img {
    width: 40px;
    margin: 0 auto;
}

.project-platform-used {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 100%;
    text-align: center;
}

.screen-splits {
    padding: 0 10px;
}

.vrbloglist+.vrbloglist {
    margin-top: 60px;
}

.entry-blog {
    text-transform: capitalize;
    font-weight: 400;
    font-size: 15px;
    margin: 5px 0 15px 0;
}

.entry-blog a {
    color: #6a6a8e;
}

.entry-blog a i {
    margin-right: 4px;
}

.bypost {
    margin-right: 10px;
}

.item-image {
    position: relative;
}

.category-blog {
    position: absolute;
    left: 0;
    bottom: 0;
}

.posted-on {
    margin-right: 10px;
}

.category-blog a {
    display: inline-block;
    padding: 5px;
    background: #fe409c;
    color: var(--white-color);
}

.image-set {
    border-radius: 8px;
    overflow: hidden;
}

.image-set img {
    width: 100%;
}

.blog-header .user-image img {
    border-radius: 100%;
    width: 50px;
}

.blog-header .user-info {
    font-family: var(--font-family);
    margin: 0px 0 0 20px;
}

.postwatch {
    text-align: right;
}

.ul-list {
    padding: 0 0 0 20px;
}

.ul-list li {
    font-size: 16px;
    line-height: 38px;
    list-style-type: circle;
}

.rd-quote {
    padding: 30px;
    position: relative;
    border-left: 4px solid #fc4899;
    font-size: 20px;
    line-height: 32px;
    font-style: italic;
    margin: 40px 0;
    background: #FAFAFB;
}

.author-block {
    position: relative;
    padding: 30px;
    margin-top: 50px;
    border-top: none;
    background: #fafafb;
    border-radius: 10px;
}

.author-block .user-image img {
    width: 80px;
    border-radius: 100px;
}

.comments-block h2 {
    font-weight: 600;
    font-size: 25px;
    line-height: 35px;
}

.comments-block .user-info h5 span {
    font-size: 15px;
    text-align: right;
    float: right;
    color: #6a6a8e;
}

.comments-block .user-info h5 {
    font-size: 20px;
    display: flow-root;
}

.comments-block .user-info h5 a {
    display: inline-block;
    padding: 0 0 0 6px;
    color: #00b2ff;
}

.comments-block .user-image img {
    width: 50px;
    border-radius: 100px;
}

.replied {
    padding-left: 60px;
}

.form-blog button {
    width: max-content;
}

.comments-block .media+.media {
    margin-top: 60px;
}

.form-blog {
    background: #fafafb;
    padding: 40px;
    border-radius: 8px;
}

.offer-image {
    border-radius: 8px;
    overflow: hidden;
}

.offer-image img {
    width: 100%;
}

.recent-post .post-info p {
    font-size: 16px;
    line-height: 28px;
}

.recent-post .post-image img {
    border-radius: 8px;
    width: 80px;
}

.recent-post .post-image a {
    display: block;
}

.recent-post .post-info h5 a {
    color: #050748;
}

.recent-post .post-info h5 a:hover {
    color: #2196f3;
}

.recent-post .post-info h5 {
    font-size: 16px;
    line-height: 26px;
}

.post-info {
    margin: 0px 0 0 20px;
}

.widgets h3 {
    font-size: 20px;
}

.recent-post .media+.media {
    margin-top: 20px;
}

.tabs a {
    font-size: 15px;
    font-weight: 400;
    text-transform: lowercase;
    padding: 0px 10px;
    line-height: 30px;
    border-radius: 4px;
    border: none;
    color: inherit;
    margin: 0 4px 8px 0;
    display: inline-block;
    background: #F6F5FA;
    font-family: var(--font-family);
}

.blog-categories ul li:first-child a {
    padding-top: 0;
}

.blog-categories ul li a {
    font-family: var(--font-family);
    display: block;
    padding: 10px 0;
    font-size: 16px;
    line-height: 28px;
    border-bottom: 1px solid #D3D3D3;
    text-decoration: none;
    color: #757589;
    position: relative;
}

.blog-categories ul li span.categories-number {
    position: absolute;
    right: 0;
}

.blog-categories ul li:first-child {
    border-top: 0px solid;
}

.blog-post-tag span {
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-bottom: 17px;
    color: rgb(6, 42, 77);
}

.blog-share-icon span {
    font-size: 18px;
    font-weight: 700;
    color: rgb(6, 42, 77);
    display: block;
    margin-bottom: 17px;
}

.blog-share-icon a {
    color: #6a6a8e;
    font-size: 18px;
    margin-right: 22px;
}

.blog-post-tag a {
    color: #6a6a8e;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(234, 237, 255);
    border-image: initial;
    padding: 12px 24px;
    border-radius: 5px;
}

.blog-share-icon a:last-child {
    margin-right: 0px;
}

.post-navigation span a {
    color: #6a6a8e;
    margin-bottom: 5px;
    display: block;
}

.post-navigation h4 a {
    color: #050748;
}

.banner-6 {
    background: url(../images/banner/4.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.contact-location {
    overflow: hidden;
}

.info-card {
    padding: 30px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.contact-card {
    background: var(--second-color);
}

.email-card {
    background: var(--first-color);
}

.skype-card {
    background: #eafffd;
}

.info-card span i {
    margin-right: 10px;
}

.info-card span {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-family);
}

.info-card p {
    font-size: 16px;
    line-height: 28px;
    margin: 20px 0 10px 0;
}

.info-card a {
    font-size: 20px;
    color: inherit;
    font-weight: 600;
}

.bglight {
    background: #fbfbfb;
}

.list-ul li {
    padding: 0 0px 12px 29px;
    position: relative;
    line-height: 22px;
    font-size: 16px;
}

.list-ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 15px;
}

.ul-check li:before {
    content: "\f00c";
}

.ul-circle li:before {
    content: "\f0a9";
}

.ul-numm li {
    list-style-type: decimal;
    padding: 0 0px 12px 5px;
}

.ul-abc li {
    list-style-type: upper-latin;
    padding: 0 0px 12px 5px;
}

.ul-liin {
    padding: 0 0 0 20px;
}

.error {
    height: 100vh;
}

.error-block {
    padding-top: 50px;
    position: relative;
    z-index: 5;
}

.layer-div {
    position: relative;
}

.error-block a {
    margin-top: 40px;
}

.layer-div:before {
    background: url(images/icons/404.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center center;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    right: 0;
    left: 0;
    z-index: 0;
}

.card-2 .card-header button:hover {
    color: #050748;
}

.card-2 .card-header {
    padding: 10px;
    border: 0;
}

.card-2 .card-header button {
    border: 0;
    padding: 0;
    color: #050748;
    font-size: 18px;
    font-weight: 600;
}

.accordion .acc-icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f068";
    font-weight: bold;
    position: absolute;
    font-size: 14px;
    right: 5px;
    top: 5px;
    color: #050748;
}

.accordion .acc-icon.collapsed:after {
    content: "\f067";
    font-weight: bold;
}

.accordion .card-title:after {
    font-family: "Font Awesome 5 Free";
    content: "\f068";
    font-weight: bold;
    position: absolute;
    font-size: 14px;
    right: 5px;
    top: 2px;
    background: #00baff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 100px;
    color: var(--white-color);
}

.accordion .card-title.collapsed:after {
    content: "\f067";
    font-weight: bold;
}

.card-header .btn-link:hover {
    color: #6a6a8e;
    text-decoration: none;
}

.card-header .btn-link.focus,
.btn-link:focus {
    text-decoration: none;
    box-shadow: none;
}

.accordion .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0px 15px 15px 15px;
}

.panel .panel-collapse .collapse {
    transition: transform .25s ease-in-out;
    -webkit-transition: -webkit-transform .25s ease-in-out;
}

.card-1 .card-header {
    padding: 10px 15px;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 0;
    position: relative;
    cursor: pointer;
}

.card-1 {
    border: 1px solid #d4f0ff;
    overflow: hidden;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 0px;
}

.card-1 .card-title {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: #6a6a8e;
    padding: 2px 40px 2px 0;
}

.tabs-layout .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #00baff;
    border-color: #00baff;
    border-radius: 100px;
}

.tabs-layout .nav-tabs .nav-link {
    border: 0px solid transparent;
    color: #6a6a8e;
    background-color: #efefef;
    border-radius: 100px;
    padding: 10px 35px;
}

.tabs-layout .nav-tabs .nav-item+.nav-item {
    margin: 0 10px;
}

.tabs-layout .nav-tabs .nav-item+.nav-item:last-child {
    margin: 0px;
}

.tabs-layout .nav-tabs {
    border-bottom: 0px solid #dee2e6;
}

.tabs-layout .tab-content {
    padding: 20px 0 0px 0;
}

.outline-tabs.tabs-layout .nav-tabs .nav-link {
    border: 1px solid #efefef;
    color: #6a6a8e;
    background-color: #ffffff;
    border-radius: 100px;
}

.outline-tabs.tabs-layout .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #00baff;
    border-color: #00baff;
    border-radius: 100px;
}

.reviews-block {
    background: var(--light-grey);
}

.pr-shadow {
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.revbx-lr {
    font-size: 40px;
}

.revbx-rl {
    text-align: right;
    display: block;
}

.revbx-rl img {
    max-width: 130px;
}

.reviews-card {
    position: relative;
    z-index: 9;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
}

.reviews-card .card-body {
    padding: 0px;
}

.right-review-box p {
    color: #676767;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.4px;
    font-style: inherit;
}

.review-text {
    padding: 30px 0;
}

.left-review-box h4 {
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;
    padding: 8px 0 0 0;
}

.-client-details- {
    display: block;
}

.-reviewr {
    width: 70px;
    height: 70px;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 15px;
}

.reviewer-text h4 {
    color: #333;
    padding: 5px 0 0 0;
    font-size: 16px;
    line-height: 24px;
}

.review-text {
    text-align: left;
    direction: ltr;
}

.reviewer-text {
    direction: ltr;
}

.reviewer-text p {
    font-size: 15px;
    line-height: 20px;
}

.star-rate li {
    display: inline-block;
    margin: 0 2px;
}

.star-rate {
    margin-top: 5px;
}

.star-rate li a.chked {
    color: #ff711c;
}

.star-rate li a {
    color: #6a6a8e;
}

.fl-hero {
    background: url(images/shape/hero-shape.svg), #ffd6d6;
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.showin-mobile {
    display: none;
}

.follow-label {
    display: flex;
}

.follow-label h6 {
    margin: 0 40px 0 0px;
    position: relative;
}

.follow-label h6:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -38px;
    width: 30px;
    height: 1px;
    background: #6a6a8e;
}

.follow-label a {
    color: #6a6a8e;
    padding: 5px 10px;
    font-size: 20px;
}

.bhv-service {
    overflow: hidden;
}

.counter-number {
    transform: translateZ(20px);
}

.hexagon {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    text-align: center;
    min-width: 240px;
    height: auto;
    padding: 20px 30px;
    margin: 0px 20px;
    background: #fff;
    border-radius: 8px 40px 8px 40px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.hexa1 {
    border: 2px solid #ffc3fe;
}

.hexa2 {
    border: 2px solid #ffe6ba;
}

.hexa3 {
    border: 2px solid #addaff;
}

.hexa4 {
    border: 2px solid #ffbaba;
}

.counter-no span {
    font-size: 50px;
    font-weight: 700;
    color: #050748;
}

.counter-no p {
    font-size: 20px;
    margin: 10px 0 0 0;
    font-weight: 500;
}

.counter-no {
    display: inline-block;
}

.freelance-service {
    background: #d4f0ff;
}

.header-heading .title- {
    display: block;
    margin-bottom: 15px;
}

.header-heading span {
    color: #e60072;
}

.lead-hero {
    background: url(images/hero/bg-gradient.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.follow-label {
    display: flex;
}

.lead-gen-client .clients-logo {
    background: #ffffff;
    padding: 0px 15px;
    max-height: 150px;
    min-height: 150px;
    margin: 0 0px;
    border: 1px solid #d4f0ff;
    align-items: center;
    display: flex;
    position: relative;
    border-radius: 8px;
    -webkit-box-shadow: -20px 20px 40px #ece0f2, 20px -20px 40px #fff8ff;
    box-shadow: -20px 20px 40px #ece0f2, 20px -20px 40px #fff8ff;
}

.itm-media-object .media .img-media {
    width: 65px;
    background: #d3f3ff;
    padding: 10px;
    border-radius: 8px;
}

.itm-media-object .media-body {
    margin-left: 30px;
}

.why-choos-lg {
    position: relative;
}

.why-choos-lg:before {
    content: "";
    background: url(images/shape/dot_bg.webp);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.itm-media-object h4 {
    text-align: left;
}

.srvc-bg-nx {
    background: #fff;
    overflow: hidden;
    border-radius: 6px;
    margin: 0 10px;
    height: 240px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.about-sec-rpb {
    background: #fff8f2;
}

.about-sec-rpb.pad-tb {
    padding-bottom: 200px;
}

.badges-content {
    text-align: center;
}

.badges-content p {
    font-size: 15px;
    line-height: 22px;
    padding: 0 50px;
    margin-top: 10px;
}

.w-txt h2 {
    color: var(--white-color);
}

.common-heading.w-txt>span {
    color: var(--white-color);
}

.-service-list li:first-child {
    padding-left: 0;
}

.-service-list li {
    text-transform: uppercase;
    list-style: none;
    padding: 0 8px;
    border-right: 1px solid #d4d4d4;
    display: inline-block;
}

.-service-list li:last-child {
    border-right: none;
}

.service-sec-list p {
    font-size: 15px;
    line-height: 24px;
    margin: 14px 0 0 0;
}

.-service-list li a {
    font-size: 13px;
    color: #6a6a8e;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 5px;
    display: inline-block;
    font-weight: 700;
}

.link-prb {
    display: block;
}

.col-lg-6-cus {
    width: 40%;
}

.col-lg-3-cus {
    width: 30%;
}

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

.text-w,
.text-w h4,
.text-w a,
.text-w h1,
.text-w h2,
.text-w h3,
.text-w h5,
.text-w h6 {
    color: var(--white-color);
}

.service-section-prb {
    position: relative;
    margin-top: -200px;
}

.bg-shape-dez {
    position: relative;
}

.bg-shape-dez::after,
.bg-shape-dez::before {
    position: absolute;
    z-index: 0;
    content: '';
    width: 50%;
    height: 50%;
    background: #007bff;
    background: -webkit-linear-gradient(left, #007bff 0%, var(--second-color) 100%);
    background: linear-gradient(to right, #007bff 0%, var(--second-color) 100%);
}

.bg-shape-dez::after {
    top: -10px;
    right: -10px;
    border-radius: 0px 8px 0px 0px;
}

.single-image img {
    position: relative;
    z-index: 5;
    border-radius: 8px;
}

.bg-shape-dez::before {
    bottom: -10px;
    left: -10px;
    border-radius: 0px 0px 0px 8px;
}

.single-image img {
    position: relative;
    z-index: 5;
    border-radius: 8px;
}

.srcl1 {
    /* background: var(--first-color); */
    background: #087072;
    border-bottom: 4px solid var(--second-color);
}

.srcl2 {
    /* background: var(--first-color); */
    background: #087072;
    border-bottom: 4px solid var(--second-color);
}

.srcl3 {
    /* background: var(--first-color); */
    background: #087072;
    border-bottom: 4px solid var(--second-color);
}

.srcl4 {
    /* background: var(--first-color); */
    background: #087072;
    border-bottom: 4px solid var(--second-color);
}

.srcl5 {
    /* background: var(--first-color); */
    background: #087072;
    border-bottom: 4px solid var(--second-color);
}

.service-sec-list p {
    display: none;
}

.service-sec-list {
    padding: 52px 25px;
}

.service-sec-brp {
    padding: 30px 25px;
}

.service-sec-list img {
    -moz-transition: width 0.5s, height 0.5s;
    -webkit-transition: width 0.5s, height 0.5s;
    transition: width 0.5s, height 0.5s;
    height: 60px;
    width: 60px;
    margin-bottom: 10px;
}

.service-sec-list:hover {
    padding: 25px;
}

.service-sec-list:hover img {
    height: 0px;
    width: 60px;
}

.service-sec-list:hover p {
    display: block;
}

.service-sec-list:hover p,
.service-sec-list:hover,
.service-sec-list {
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.-cta-btn {
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.-cta-btn p {
    font-size: 30px;
    color: #050748;
    margin: 0 30px 0 0px;
}

.-cta-btn p span {
    font-weight: bold;
}

/* .free-cta-title {
    display: inline-flex;
} */

.key-block.shadow-box {
    padding: 15px;
    margin-bottom: 20px;
    border-top: 3px solid #a241bb;
    transition: all .3s ease-out 0s;
}

.key-icon {
    margin-right: 15px;
    float: left;
}

.clients-logos ul li p {
    font-size: 12px;
    padding-top: 0.5em;
    letter-spacing: 0px;
    font-weight: 300;
    color: #959595;
}

.clients-logos ul li {
    display: inline-block;
    padding: 30px 0 0 0;
}

/* .brand-logo {
    max-width: 180px;
    margin: 0 auto;
    padding: 10px;
} */

.video-review {
    border-radius: 8px;
    overflow: hidden;
}

.video-review a {
    position: relative;
    display: inline-block;
}

.video-review a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: -moz-linear-gradient(top, rgb(30, 87, 153, 0) 0%, rgb(32, 124, 202, 0) 70%, rgb(0, 0, 0, 0.5) 100%);
    background: -webkit-linear-gradient(top, rgb(30, 87, 153, 0) 0%, rgb(32, 124, 202, 0) 70%, rgb(0, 0, 0, 0.5) 100%);
    background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 0%, rgba(32, 124, 202, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
}

.review-vid-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 0;
    z-index: 10;
}

.review-vid-details p {
    font-weight: bold;
    color: var(--white-color);
    font-size: 20px;
}

.-vid-ico {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    background: #ffffff;
    border-radius: 1000px;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
    align-items: center;
}

.triangle-play2 {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 12px solid #ff2d8d;
    border-bottom: 7px solid transparent;
    text-align: center;
    margin: 0 auto 0;
}

.rount-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    text-align: center;
    font-size: 18px;
    border: 2px solid #dcdcdc;
}

.review-ref {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.review-icons a {
    display: inline-block;
    padding: 0 20px;
}

.bg-none {
    background: none;
}

.img-with-shape {
    position: relative;
    text-align: center;
}

.dg-hero-img0 {
    border-radius: 8px;
    transform: translateZ(60px);
    position: relative;
    z-index: 9;
}

.dg-hero-shp1a {
    top: 0px;
    left: 0px;
}

.dg-hero-shp1 {
    top: -50px;
    left: 0px;
}

.dg-hero-shp2 {
    transform: translatez(80px);
    top: 40%;
    z-index: 999;
    left: 0px;
    max-width: 120px;
}

.dg-hero-shp3 {
    bottom: -80px;
    right: 0px;
}

.shape-dg-1 {
    position: absolute;
}

.dark-main p,
.dark-main .-content-sec .title-hero-oth p,
.dark-main .footer-address-list li a,
.dark-main .post-social a,
.dark-main a {
    color: #a2a2a2;
}

.dark-main h2,
.dark-main h3,
.dark-main h4,
.dark-main h5,
.dark-main h6,
.dark-main .title-hero-oth p,
.dark-main .statistics span,
.dark-main .single-blog-info h4 a,
.dark-main .review-vid-details p,
.dark-main .isotope_item h4 a,
.dark-main .link-reviewrr a,
.dark-main .entry-blog-post a,
.dark-main h1 {
    color: #e6e6e6;
}

.dark-main a.lnk,
.dark-main a.bg-btn {
    color: var(--white-color);
}

.dark-main input,
.dark-main textarea {
    box-shadow: none;
}

.dark-main .s-block {
    background: #1d1d1d;
    border: 1px solid #1d1d1d;
}

.dark-main .single-blog-post {
    background: #1d1d1d;
    border: 1px solid #1d1d1d;
}

.dark-main .post-social {
    border-top: 1px solid #2b2b2b;
}

.dark-main .blog-content-tt {
    border: 0px solid #ececec;
}

.f-weight .-cta-btn p span {
    font-weight: 900;
}

p.video-lab-- {
    color: #6a6a8e;
}

.mr25 {
    margin-right: 25px;
}

.dg-bg2 {
    /* background-image: -moz-linear-gradient(45deg, #ff3870 0%, #ff3870 50%, #c300c3 100%) !important;
	background-image: -webkit-linear-gradient(45deg, #ff3870 0%, #ff3870 50%, #c300c3 100%) !important;
	background-image: linear-gradient(45deg, #ff0048 0%, #ff3870 50%, #c300c3 100%) !important; */
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
}

.hero-digital-agency-1 p {
    color: #bdbfca;
}

.hero-digital-agency-1 .header-heading h1 {
    font-size: 80px;
    line-height: 90px;
    font-weight: 900;
}

.-content-sec .triangle-play {
    border-left: 25px solid #ffffff;
}

.-content-sec a.play-video::after {
    border: 6px solid #ff2d8d;
}

.-content-sec a.play-video {
    background: #ff2d8d;
}

.-content-sec .title-hero-oth p {
    font-size: 18px;
    color: #6a6a8e;
    margin: 0 0 0 20px;
    text-transform: capitalize;
}

.dg-btn {
    background-color: transparent;
    border: 1px solid #fff;
}

.dg-bg {
    background-color: #202020;
}

.dg-bg--1 {
    background-color: #111111;
}

.dg-bg--2 {
    background-color: #171717;
}

.dg-clients-section .opl ul li {
    display: inline-block;
    padding: 30px 0 0 0;
}

.dg-clients-section .opl ul li p {
    font-size: 12px;
    padding-top: 0.5em;
    letter-spacing: 0px;
    font-weight: 300;
    color: #959595;
}

.dg-testinomial-section .owl-carousel .owl-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    background: transparent;
    width: 100px;
    margin: 0;
    height: 50px;
    padding: 25px 0 0 0;
}

.quote-css {
    font-size: 45px;
    padding: 0 20px 0 0;
    color: #909090;
}

.video-testimonial {
    display: flex;
}

.dg-statistics-section .statistics span {
    font-size: 45px;
    font-weight: 900;
}

.common-heading-2 {
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 10;
}

.common-heading-2 h2 {
    font-weight: 900;
}

.common-heading-2>span {
    color: #e60072;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 15px 0;
    display: block;
    font-weight: 900;
}

.itm-media-object .media img {
    width: 100%;
}

.itm-media-object .media .img-ab- {
    background: #f5f5f5;
    border-radius: 8px;
    width: 65px;
    padding: 10px;
}

.overlay-- .s-block {
    background: #222;
    border: 1px solid #222;
    padding: 30px;
    overflow: hidden;
}

.ovr-bg1 .ovr-base:before {
    content: "";
    background: -webkit-linear-gradient(45deg, #ff0048 0%, #ff3870 50%, #c300c3 100%);
    background: linear-gradient(45deg, #ff0048 0%, #ff3870 50%, #c300c3 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: 0;
}

.nn-card-set {
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.ho-gdnt .s-block:hover:before {
    opacity: 1;
}

.ho-gdnt .s-block {
    overflow: hidden;
}

.ho-gdnt .ovr-base:before {
    -webkit-transition: 0.8s cubic-bezier(.17, .85, .438, .99);
    -o-transition: 0.8s cubic-bezier(.17, .85, .438, .99);
    transition: 0.8s cubic-bezier(.17, .85, .438, .99);
}

.ho-gdnt .s-block:hover p,
.ho-gdnt .s-block:hover a,
.ho-gdnt .s-block:hover h4 {
    color: #ffffff;
}

.dg2-main .isotope_item h4 a {
    color: var(--white-color);
}

.up-hor:hover {
    transform: translateY(-10px);
    /* transform: scale(1.1); */
}

.h-scl- .h-scl-base {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.h-scl-:hover .h-scl-base {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
}

.h-scl-:hover .h-scl-base img {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}

.h-scl- .h-scl-base {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.h-scl- .h-scl-base,
.h-scl-base img,
.up-hor,
.bd-hor .bd-hor-base:after {
    -webkit-transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    -o-transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    transition: 1.2s cubic-bezier(.17, .85, .438, .99);
}

.itm-media-object h4 {
    text-align: left;
    margin-bottom: 10px;
}

.single-blog-post {
    border-radius: 8px;
    background: #fff;
}

.single-blog-img img {
    border-radius: 8px 8px 0px 0px;
}

.single-blog-img {
    position: relative;
}

.entry-blog-post {
    /* border-radius: 100px; */
    padding: 10px 15px;
    /* margin: 0 20px; */
    /* position: absolute; */
    bottom: -18px;
    right: 0;
    left: 0;
    justify-content: space-between;
    display: flex;
}

.entry-blog-post a {
    color: var(--white-color);
    font-size: 14px;
}

.single-blog-info h4 {
    margin-bottom: 18px;
}

.single-blog-info h4 a {
    color: #050748;
}

.post-social {
    margin: 30px 0 0 0;
    border-top: 1px solid #dadada;
    padding-top: 30px;
}

.post-social a {
    color: #6a6a8e;
    display: inline-block;
    padding: 0 10px 0 0;
}

.blog-content-tt {
    /* padding: 25px 25px; */
    border: 1px solid #ececec;
    border-top: 0;
    border-radius: 0px 0px 8px 8px;
}

.single-blog-info {
    padding: 25px 25px;
}

.link-reviewrr {
    margin: 30px 0 0 0;
}

.link-reviewrr a {
    display: block;
    padding: 0 0 4px 0;
    color: #6a6a8e;
}

.dark-footer,
.dark-footer .footer-address-list li a,
.dark-footer .footer-address-list li>span,
.dark-footer .footer-address-list li p,
.dark-footer .ff-social-icons a,
.dark-footer .footer-link-- li a {
    color: var(--white-color);
}

.dark-footer h5,
.dark-footer h3 {
    color: #e6e6e6;
}

.dg2-main .footer-address-list li a {
    color: #bdbfca;
}

.footer-copyrights- a {
    color: #bdbfca;
}

.footer-link-- {
    text-align: right;
}

.footer-link-- li {
    display: inline-block;
}

.footer-link-- li a {
    color: #bdbfca;
    margin-left: 15px;
    font-size: 16px;
}

.end-footer- {
    border-top: 1px solid rgba(237, 237, 237, 0.05);
    margin-top: 70px;
    padding: 35px 0;
}

.ff-social-icons a {
    color: var(--white-color);
    padding: 0 20px 0 0;
    font-size: 18px;
}

.video-bg- {
    background: var(--black-color);
}

.full-video {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.3;
}

.email-subs-form .form-cta {
    align-items: center;
    justify-content: center;
    display: flex;
}

.hero-creative-agenc1 {
    background-size: cover;
    background-position: center center;
}

.hero-creative-agenc1 .header-heading h1 {
    font-weight: 900;
}

.ovr-bg2 .ovr-base:before {
    content: "";
    background: -webkit-linear-gradient(135deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background: linear-gradient(135deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: 0;
}

.sec-dark h2,
.sec-dark h4,
.sec-dark h5 {
    color: var(--white-color);
}

.sec-dark p {
    color: #bdbfca;
}

.hero-creative-agenc2 .container {
    max-width: 1320px;
}

.img-design {
    display: inline-flex;
    align-items: center;
}

.ag-dg1 {
    z-index: 1;
    border-radius: 8px 8px 8px 100px;
    min-width: 100%;
    top: 0;
    left: 30px;
    position: relative;
}

.ag-dg2 {
    z-index: 0;
    border-radius: 8px 8px 100px 8px;
    bottom: 0;
    right: 30px;
    min-width: 100%;
    position: relative;
}

.shpdzz {
    position: absolute;
}

.shpdez1 {
    width: 90px;
    height: 90px;
    background: #FFC107;
    border-radius: 100px 100px 00px 100px;
    left: 0;
    bottom: 0;
}

.shpdez2 {
    width: 140px;
    height: 140px;
    background: #00BCD4;
    border-radius: 00px 100px 100px 100px;
    left: 0;
    top: 0px;
    z-index: 5;
}

.shpdez3 {
    width: 40px;
    height: 40px;
    background: #4caf50;
    border-radius: 100px 0px 100px 100px;
    left: 160px;
    top: 0px;
}

.shpdez4 {
    width: 140px;
    height: 80px;
    background: #ff6c89;
    border-radius: 100px;
    left: 130px;
    bottom: 0px;
    z-index: 5;
}

.img-block-ca2 .abt-ca2 {
    border-radius: 100px 00px 100px 0px;
    position: relative;
    z-index: 5;
    width: 80%;
}

.img-block-ca2 .dot-sp-ca2 {
    position: relative;
    z-index: 0;
}

.div-portfolio- {
    background: #1d1d1d;
    padding: 60px;
    border-radius: 8px;
}

.itm-tag {
    font-weight: 700;
    font-style: italic;
}

.div-item-image img {
    border-radius: 8px;
    width: inherit !important;
    margin: 0 auto;
}

.porto-slide .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.img-ca2set {
    max-height: 370px;
    overflow: hidden;
    border-radius: 8px;
}

.aa a:hover {
    color: var(--second-color) !important;
}

.bd-hor .bd-hor-base {
    overflow: hidden;
}

.bd-hor .bd-hor-base:hover:after {
    width: 100%;
    overflow: hidden;
}

.bd-hor .bd-hor-base:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0%;
    bottom: 0;
    height: 4px;
    background: -webkit-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background: linear-gradient(135deg, #9100ff 0%, #3663ff 54%, #00e2ff 100%);
}

.dot-c1 {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    border: 0;
}

.dot-c1 img {
    width: 70px;
    border-radius: 100px;
}

.tcc1 {
    background: #ffc107;
    width: 130px;
    text-align: left;
    padding-left: 5px;
    border-radius: 100px 100px 100px 100px;
}

.tcc2 {
    background: #f44336;
    right: 0;
    width: 120px;
    text-align: right;
    padding-right: 5px;
    border-radius: 0px 100px 100px 0px;
}

.tcc3 {
    background: #00bcd4;
    right: 120px;
    width: 130px;
    top: 200px;
    border-radius: 100px 8px 100px 100px;
    text-align: left;
    padding-left: 5px;
}

.tcc4 {
    background: #ff6c89;
    left: 150px;
    top: 110px;
    width: 150px;
    border-radius: 100px 100px 100px 8px;
    text-align: right;
    padding-right: 5px;
}

.tcc5 {
    background: #4caf50;
    right: 0px;
    bottom: 0px;
    border-radius: 100px 100px 100px 8px;
    width: 130px;
    text-align: right;
    padding-right: 5px;
}

.tcc6 {
    background: #9C27B0;
    bottom: 0;
    left: 10%;
    width: 150px;
    text-align: left;
    padding-left: 5px;
    border-radius: 100px 8px 100px 100px;
}

.dot-c1.active {
    box-shadow: 6px 6px 0px rgb(255 255 255 / .5);
}

.instagram-post .thumb {
    overflow: hidden;
}

.instagram-post {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
}

.minimal-portfolio {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.minimal-portfolio .dzname {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}

h3 a {
    color: #050748;
}

.br-blog-post- {
    position: relative;
}

.link-blog-post a {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: #fff;
    color: #050748;
    font-weight: 600;
}

.btn-flnc {
    align-items: flex-end;
    display: flex;
}

.post-newsltr .owl-stage {
    padding-left: 0px !important;
}

.bg-light-f7 {
    background: #f7f7f7;
}

.img-hro img {
    border-radius: 8px;
}

/* .lower-banner {
    position: relative;
} */

/*.upper-banner {
    position: absolute;
    height: 1000px;
    width: 1920px; 
} */

.hero-heading-sec2 h1 {
    color: var(--white-color);
    display: inline-block;
    font-weight: 700;
}

.hero-heading-sec2 h1 span {
    color: var(--first-color);
}

.hero-heading-sec2>p {
    color: var(--white-color);
    margin: 40px 0;
}

.wide-sblock {
    display: inline-flex;
    text-align: center;
    padding: 30px 20px 20px;
}

.img100w {
    max-width: 100% !important;
    width: auto !important;
}

.funfct {
    box-shadow: 0 11px 20px rgb(123 149 162 / 15%);
    line-height: 26px;
    padding: 30px;
    border-radius: 8px 8px 8px 40px;
    margin-top: 30px;
    position: relative;
    text-align: center;
}

.funfct p {
    font-weight: 600;
    color: var(--white-color);
}

.funfct img {
    width: 65px;
    margin: 0 auto 15px;
    display: block;
    filter: invert(1);
}

.funfct .services-cuntr {
    display: inline-block;
    font-weight: 900;
    font-size: 30px;
    color: var(--white-color);
    padding: 15px 0;
}

.about-sec-app {
    background: url(images/shape/bg-light2.webp);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center center;
}

.service-section-app {
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center bottom;
    position: relative;
}

.service-section-app .servive-card-col .card {
    background: var(--light-grey);

    position: relative;
    height: 470px;
    overflow: hidden;
    border-radius: 25px;
}

.services-img-div {
    width: 15%;
}

.services-card-rows .servive-card-col.service-one .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/android-app-development.webp") center /cover no-repeat;
}

.services-card-rows .servive-card-col.service-two .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/ios-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.service-three .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/cross-platform-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.service-four .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/game-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.service-five .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/web-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.service-six .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/wearable-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.service-seven .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/ar-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.service-eight .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/vr-app-development.webp") center /cover no-repeat;
}

.services-card-rows .servive-card-col.service-nine .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/mr-app-development.webp") center /cover no-repeat;

}

.services-card-rows .servive-card-col.iot-app-development .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/iot-app-development.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.industrial-app-development .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/industrial-app-development.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.animation-services .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/animation-services.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.Three-D-exterior .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/3D-exterior.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.Three-D-Interior .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/3D-Interior.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.floor-Plan .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/floor-Plan.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.two-d-art .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/2d-art.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.three-d-art .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/3D-art.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col.e-commerce-service .card:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)), url("../images/services-banner/e-commerce-service.jpg") center /cover no-repeat;

}

.services-card-rows .servive-card-col .card:hover .services-img-div {
    display: none;
}

.services-card-rows .servive-card-col .card .services-text-div p {
    color: var(--black-color);
    font-weight: 500;
    word-spacing: 2px;
}

.services-card-rows .servive-card-col .card:hover .services-text-div p {
    color: var(--white-color);
    font-weight: 500;
    word-spacing: 2px;
}

.services-card-rows .servive-card-col .card:hover .service-heading h3 {
    font-size: 34px;
    line-height: 40px;
    color: var(--white-color);
}

.service-card:hover .service-heading h3 {
    color: var(--white-color);
}

.service-card:hover .services-img-div img {
    filter: invert(1);
}
    
.scale-up-services-section {
    background: var(--light-grey);
    /* background: linear-gradient(135deg, #FFFFFF 0%, var(--light-grey) 100%); */
    font-family: 'Inter', sans-serif;
}

.scale-up-services-section img {
    border-radius: 10px;
    margin-top: 32px;
}

.scale-up-services-section .achievements-count {
    background-color: var(--white-color);
    border-radius: 30px;
}

.servive-card-col .link-prbs {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.service-section-app .servive-card-col .card .card-body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 60px;
}

.services-tital {
    display: flex;
    flex-direction: column;
}

.service-section-app .owl-theme .owl-nav {
    position: absolute;
    top: 40%;
}

.service-section-app .owl-theme .owl-nav .owl-prev {
    left: -55px;
    font-size: 60px;
}

.service-section-app .owl-theme .owl-nav .owl-next {
    right: -1255px;
    font-size: 60px;


}


/* .service-section-app .card:hover {
    background-color: var(--first-color);
}

.service-section-app .card:hover img {
    filter: invert(1);
} */

/* .service-section-app .card:hover h4, .service-section-app .card:hover p, .service-section-app .card:hover a {
    color: var(--white-color);
} */

.service-section-app .card:hover i {
    transform: rotateZ(45deg);
    transition: 0.3s;
}

.green-bg {
    background: var(--white-color);
    border: 3px solid var(--first-color);
}

/* .our-work1 {
    background-image: url(../images/services/industrial-automation/industrial-automation-banner-1.webp);
    background-size: cover;
    padding: 90px 0px 50px;
}

.our-work2 {
    background-image: url(../images/services/industrial-automation/industrial-automation-banner-2.webp);
    background-size: cover;
    padding: 90px 0px 50px;
}

.our-work3 {
    background-image: url(../images/services/industrial-automation/industrial-automation-banner-3.webp);
    background-size: cover;
    padding: 90px 0px 50px;
} */

.our-works {
    background-image: url(../images/services/industrial-automation/industrial-automation-banner.webp);
    background-size: cover;
    padding: 90px 0px 50px;
}

.-service-list li:first-child {
    padding-left: 0;
}

.-service-list li {
    text-transform: uppercase;
    list-style: none;
    padding: 0 8px;
    border-right: 1px solid #d4d4d4;
    display: inline-block;
}

.link-prbs {
    display: block;
    color: var(--black-color);
    font-size: 36px;
    /* font-family: var(--font-family); */
}

.link-prbs i {
    /* transform: rotateZ(-45deg); */
}

.tec-icon ul li .img-iconbb {
    display: inline-flex;
    border-radius: 100%;
    background: #f5f7ff;
    width: 60px;
    height: 60px;
    align-items: center;
}

.tec-icon ul li img {
    width: 40px;
    margin: 0 auto;
}

.tec-icon ul li {
    display: inline-block;
    margin: 0 10px 0 0;
}

.service-card-app {
    display: block;
    background: #fff;
    box-shadow: 0 11px 20px rgb(123 149 162 / 50%);
    font-weight: 400;
    font-size: 14px;
    padding: 30px;
    /* border-radius: 40px 8px 40px 8px; */
    position: relative;
}

.servc-icon-sldr {
    display: flex;
}

.clients-section-app {
    background: #4302ae;
}

/* .item-info-div {
    background: #fff;
    padding: 20px 30px;
    position: relative;
    top: -40px;
    width: 95%;
    border-radius: 40px 8px 40px 8px;
    margin: 0 auto;
    text-align: center;
} */

.item-info-div h4 {
    margin: 0;
}

.industry-workfor {
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.hoshd:hover {
    /* box-shadow: 0 15px 39px -11px #46638e45;
    transform: translate(0px, -5px); */
}

.industry-workfor img {
    width: 55px;
}

.industry-workfor h6 {
    margin: 0 0 0 15px;
}

.tcd iframe {
    width: 100%;
    max-width: 350px;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
    border: none;
    outline: none;
}

.tcd {
    display: block;
    background: #1B1B1B;
    color: var(--white-color);
    box-shadow: 0 11px 20px rgb(123 149 162 / 15%);
    font-weight: 400;
    font-size: 14px;
    padding: 30px 30px;
    border-radius: 40px 8px 40px 8px;
    border: none;
}

.tcd h3 {
    color: var(--white-color);
}

.posiqut {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 60px;
    color: #00f2a6;
}

.pl50 {
    padding-left: 50px !important;
}

.tcd .owl-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    margin: 15px;
}

.app-cta {
    background: var(--second-color);
    position: relative;
    overflow: hidden;
}

.shape-c1 {
    background: transparent;
    width: 200px;
    height: 200px;
    border-radius: 100px 100px 100px 100px;
    border: 6px solid #f8d873;
}

.shape-c2 {
    background: transparent;
    width: 200px;
    height: 200px;
    border-radius: 100px 100px 100px 30px;
    border: 6px solid #00f2a6;
    right: -20px;
    top: -70px;
}

.shape-c3 {
    background: transparent;
    width: 100px;
    height: 100px;
    border-radius: 100px 100px 100px 30px;
    border: 6px solid #fff;
    right: 90px;
    bottom: -20px;
}

.apppg .brand-logo {
    max-width: 180px;
    margin: 0 auto;
    padding: 20px 10px;
    background: #fff;
    border-radius: 8px;
}

/* .client-logoset img {
    max-width: 120px;
} */

.apppg li p {
    color: var(--white-color);
    margin: 10px 0 0 0;
}

.info-text-div {
    padding: 20px;
    background: #fff;
    box-shadow: 0px 20px 30px -20px rgb(0 21 167 / 20%);
    border-radius: 8px 8px 8px 8px;
    border-bottom: 5px solid #b0bdff;
}

.landscp {
    text-align: center;
    background: #fbfbfb;
}

.bg-text {
    position: relative;
}

.sctxt {
    /* font-size: 90px; */
    position: relative;
    /* right: 0;
    left: 0;
    top: 0; */
    z-index: 1;
    text-align: start;
    font-weight: 900;
    text-transform: uppercase;
    -webkit-text-stroke: 1px var(--black2-color);
    -webkit-text-fill-color: var(--black2-color);
}

body .bg-text:after {
    bottom: 0px;
    color: var(--gray-color);
    content: attr(data-text);
    font-size: 190px;
    font-style: normal;
    font-weight: 700;
    left: 0;
    letter-spacing: -.03em;
    line-height: 0px;
    position: absolute;
    width: 1600px;
    z-index: 1;
}

body .light-bg-text:after {
    opacity: .25;
}

body .dark-bg-text:after {
    opacity: .05;
}

body .bg-text:hover:after {
    animation: hoverFx 1s infinite;
}

.testimonials-section-app .bg-text,
.technologies .bg-text,
.badges-section .bg-text {
    margin-bottom: 40px;
}

.process-block .bg-text:after,
.key-highlights .bg-text:after,
.why-choose-section .bg-text:after {
    top: 0;
}

.technologies-stack .bg-text:after {
    top: -10px;
}

.testimonials-section-app .bg-text:after {
    top: 0px;
}

@keyframes hoverFx {
    0% {
        bottom: 0;
        left: 0
    }

    20% {
        bottom: -.01em;
        left: .1em
    }

    40% {
        bottom: .001em;
        left: -.005em
    }

    60% {
        bottom: -.005em;
        left: -.1em
    }

    80% {
        bottom: .001em;
        left: .005em
    }

    to {
        bottom: 0;
        left: 0
    }
}

.business-startup {
    background: url(images/hero/wave-hero.svg);
    background-repeat: no-repeat;
    background-position: center top;
}

.bg-light-ylo {
    background: #e9f5ff;
}

.up-curvs {
    position: absolute;
    right: 0;
    left: 0;
    top: -50px;
}

.bottom-curvs {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -50px;
}

.bg-flat5 {
    background: #fff9f1;
}

.bg-flat6 {
    background: #fff3f3;
}

.login-form-div {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
}

.login-page {
    background: url(images/shape/bg-rectangles-.webp), #101010;
    display: flex;
    height: 100vh;
}

.fb-btn {
    line-height: 46px;
    background-color: #3b5998 !important;
}

.google-btn {
    line-height: 46px;
    background-color: #e94235 !important;
}

.closes {
    right: 8px;
    font-size: 35px;
    font-weight: 700;
    top: -2px;
    color: #d6d6d6;
    border: 0;
    background: transparent;
}

.popup-modals .modal-dialog {
    max-width: 600px;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /* padding: 30px; */
    background: var(--light-grey);
}

@media (min-width: 1200px) {
    .shop-container {
        max-width: 1110px !important;
    }
}

.shop-tags-list li {
    display: inline-block;
    margin-top: 10px;
    margin-right: 2px;
    margin-left: 2px;
}

.shop-tags-list li a {
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #f2effc;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 225, 0.08);
    color: #050748;
    padding: 12px 16px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
}

.shop-tags-list li a.active {
    background-color: #436ad6;
    color: var(--white-color);
}

.shop-tags-list {
    text-align: center;
}

.shop-tags-list li a span {
    display: inline-block;
    margin: 0 0 0 4px;
}

.main-shop-catte a {
    display: inline-block;
    background-color: #e2e2ef;
    border: 1px solid #f2effc;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 225, 0.08);
    color: #050748;
    padding: 18px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
}

.main-shop-catte a.active {
    background-color: #436ad6;
    color: var(--white-color);
}

.main-shop-catte {
    text-align: center;
}

.shop-products-bhv {
    background: #fafafa;
}

.rpb-shop-items-dv {
    padding: 0;
    margin: 0;
    border: 0;
    text-align: inherit;
}

.rpb-shop-items-dv a {
    padding: 0;
    margin: 0;
}

.rpb-shop-items-img {}

.rpb-shop-items-info {
    padding: 16px;
}

.rpb-shop-items-tittl h3 {
    font-size: 16px;
    line-height: 1;
}

.rpb-shop-items-tittl h3 a {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 24px;
}

.rpb-shop-items-tittl p.tags-itmm {
    font-size: 14px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    color: #6a6a8e;
}

.rpb-shop-items-flex {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.rpb-shop-inf-ll {}

.rpb-itm-pric span.regular-prz {
    font-size: 20px;
    font-weight: 100;
    color: #6a6a8e;
    text-decoration: line-through;
    margin: 0 0 0 6px;
}

.rpb-itm-pric span.offer-prz {
    font-size: 20px;
    font-weight: 700;
    color: #050748;
}

.rpb-tim-rate ul li a {
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.rpb-tim-rate ul li {
    margin: 0;
}

.rpb-tim-rate {
    margin-top: 5px;
}

.rpb-itm-sale {
    margin-top: 10px;
    display: block;
    font-size: 14px;
}

.rpb-shop-inf-rr {
    align-items: flex-end;
    display: flex;
}

.rpb-shop-inf-rr a.rpb-shop-prev {
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #f2effc;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 225, 0.08);
    color: #050748;
    padding: 12px 16px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
}

.pagination {
    display: -ms-flexbox;
    list-style: none;
    border-radius: .25rem;
    align-items: center;
    margin: 60px 0 0 0;
    text-align: center;
}

.pagination a {
    /* text-align: center; */
    /* align-items: center; */
    display: inline-block;
    padding: 10px 18px;
    color: #222;
}

.pagi1 a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
}

.pagi1 a.is-active {
    background-color: #436ad6;
    border-radius: 100%;
    color: var(--white-color);
}

.rpb-shop-prevw {
    margin-bottom: 40px;
    background-color: #f6f6f7;
    padding: 20px;
}

.tab-17 .nav-tabs {
    background: #f6f6f7;
    padding: 0px 15px;
}

.tab-17.tabs-layout .nav-tabs .nav-link.active {
    color: #6a6a8e;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
    border-bottom: 2px solid #ff358d;
}

.tab-17.tabs-layout .nav-tabs .nav-link {
    border: 0px solid transparent;
    color: #6a6a8e;
    background-color: transparent;
    border-radius: 0;
    padding: 15px;
    border-bottom: 2px solid #f6f6f7;
}

.badges {
    display: inline-block;
    padding: .25em .4em;
    font-size: 50%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.rpb-item-review .reviews-card {
    position: relative;
    z-index: 9;
    background: #f6f6f7;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.rpb-item-infodv {
    margin-bottom: 40px;
    background-color: #f6f6f7;
    padding: 20px;
}

.nx-rt {
    float: right;
    font-size: 15px;
    width: 60%;
    text-align: right;
}

.rpb-item-infodv ul li strong {
    color: #050748;
    font-size: 15px;
    float: left;
    width: 40%;
}

.rpb-item-infodv ul li+li {
    border-top: 1px solid #e0e0e0;
}

.rpb-item-infodv ul li {
    padding: 15px 0;
    display: flow-root;
}

.btn-grp a {
    margin: 0 10px;
}

.div-for-data {
    border: 1px solid #e0e0e0;
    margin: 0;
    text-align: left;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    border-collapse: separate;
}

.rpb-cart-table table.cart_table th {
    padding: 15px 20px;
    color: #050748;
    font-size: 17px;
}

.rpb-cart-table table.cart_table td {
    border-top: 1px solid #e0e0e0;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #050748;
}

.rpb-cart-table table .product-thumbnail img {
    width: 60px;
}

.rpb-cart-table table .product-name a {
    color: #050748;
}

.rpb-cart-table a.remove {
    display: block;
    font-size: 24px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 25px;
    border-radius: 100%;
    color: #ff0000 !important;
    text-decoration: none;
    font-weight: 700;
    border: 0;
    background: #efefef;
}

.update-cart {
    text-align: right;
}

.cart-pg-coupon input {
    width: 180px;
    height: 45px;
    padding: 0px 10px;
    margin: 0px 0 0px 0;
    color: #172b43;
    font-size: 16px;
    outline: none;
    background: #fff;
    border: 1px solid #e6e6e6;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

button.smllbtnn {
    line-height: 45px;
    color: var(--white-color);
    border-radius: 8px;
    padding: 0 20px;
    border: 0;
}

.cart-extra-sevc {
    padding: 20px;
}

.post-info h5 a {
    color: #050748;
    font-size: 16px;
}

.mt5 {
    margin-top: 5px;
}

table {
    color: #050748;
}

table.border {
    border-radius: 8px;
}

.btn-small {
    font-size: 15px;
    font-weight: 400;
    padding: 0px 20px;
    line-height: 35px;
}

.media+.media {
    margin-top: 20px;
}

.map-div iframe {
    width: 100%;
    height: 200px;
    border: 0;
}

.contact2dv {
    background: #e7fbff;
    padding: 30px;
}

.info-wrapr .dbox p span {
    color: #6a6a8e;
    font-size: 20px;
    display: block;
    text-transform: capitalize;
    font-weight: 700;
}

.info-wrapr .dbox {
    width: 100%;
    color: #6a6a8e;
    margin-bottom: 25px;
}

.info-wrapr .icon i {
    font-size: 25px;
}

.info-wrapr .text a {
    color: #6a6a8e;
}

.pr30 {
    padding-right: 30px;
}

.pl30 {
    padding-left: 30px;
}

.addtocart {
    width: 20px;
    height: 20px;
    background: #fafafa;
    display: block;
    position: absolute;
    top: 1px;
    right: -6px;
    line-height: 20px;
    border-radius: 100%;
    color: #050748;
    box-shadow: 0px 5px 10px rgb(93 0 39 / 44%);
    font-size: 14px;
    font-weight: bold;
}

.custom-file-input:focus~.custom-file-label {
    border-color: #ced4da;
    box-shadow: none;
}

.dropcap {
    float: left;
    font-size: 45px;
    line-height: 1;
    padding-right: 10px;
    text-transform: uppercase;
}

.list-style- {
    padding: 0 0 0 20px;
    text-align: left;
}

.list-style- li {
    line-height: 32px;
    list-style-type: circle;
}

.img-ctr {
    text-align: center;
    display: block;
}

.footer-link-v2 li {
    display: inline-flex;
    padding: 0px 15px;
}

.footer-badges- {
    display: flex;
    justify-content: space-between;
}

.footer-badges- li {
    display: inline-block;
}

.footer-badges- li a img {
    width: 150px;
}

.footer-brands {
    background: #f8f9fa;
    padding: 30px 0;
}

.single-blog- img {
    height: 70px;
    width: 70px;
    display: block;
    border-radius: 8px;
}

.single-blog- .post-meta i {
    margin: 0 5px 0 0;
}

.single-blog- .post-meta {
    font-size: 13px;
}

.single-blog- .content .title {
    line-height: 20px;
    font-size: 15px;
}

.single-blog- .content .title a {
    color: #050748;
}

.single-blog- .content .title a:hover {
    color: var(--first-color);
}

.post-thumb {
    margin-right: 15px;
}

.single-blog- {
    display: inline-flex;
}

.footer-blog- .single-blog-:last-child {
    margin-top: 20px;
}

.icon-card- {
    text-align: center;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
}

.icon-card- img {
    width: 60px;
}

.icon-card- h4 {
    margin: 20px 0;
}

.onloadpage {
    position: fixed;
    z-index: 99999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: #ffffff;
}

.onloadpage .pre-content {
    top: 50%;
    position: relative;
    right: 0;
    left: 0;
    text-align: center;
    transform: translateY(-50%);
}

.onloadpage .pre-text- {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    width: 30%;
    margin: 0 auto;
}

.onloadpage .pre-text- span {
    display: block;
}

.logo-pre {
    background: linear-gradient(to bottom, #fffce9 0%, #ffe1ec 100%);
    border-radius: 50%;
    height: 100px;
    width: 100px;
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
    animation: pulse 2s infinite;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    padding: 8px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
    }

    70% {
        box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.tilt-3d .base {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.tilt-3d .layer {
    transform: translateZ(20px);
}

.shdo {
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.-shadow {
    -webkit-box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
    box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #ffffff;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}

h1 {
    font-size: 45px;
    line-height: 57px;
}

h2 {
    font-size: 40px;
    line-height: 52px;
}

h3 {
    font-size: 34px;
    line-height: 46px;
}

h4 {
    font-size: 22px;
    line-height: 32px;
}

h5 {
    font-size: 20px;
    line-height: 30px;
}

h6 {
    font-size: 16px;
    line-height: 26px;
}

p {
    font-size: 17px;
    line-height: 28px;
}

.pad-tb {
    padding-top: 100px;
    padding-bottom: 100px;
}

.pr--100 {
    padding-right: 100px;
}

.pl--100 {
    padding-left: 100px;
}

.pl--50 {
    padding-left: 50px;
}

.pr--50 {
    padding-right: 50px;
}

.mr15 {
    margin-right: 15px;
}

html .pl5 {
    padding-left: 5px !important;
}

html .pt0 {
    padding-top: 0;
}

html .pm0 {
    padding-bottom: 0;
}

html .mt0 {
    margin-top: 0px;
}

html .mb0 {
    margin-bottom: 0;
}

html .mt10 {
    margin-top: 10px;
}

html .ml10 {
    margin-left: 10px;
}

html .mt20 {
    margin-top: 20px;
}

html .mt30 {
    margin-top: 30px;
}

html .mt40 {
    margin-top: 40px;
}

html .mt50 {
    margin-top: 50px;
}

html .mt60 {
    margin-top: 60px;
}

html .mt70 {
    margin-top: 70px;
}

html .mt80 {
    margin-top: 80px;
}

html .mt90 {
    margin-top: 90px;
}

html .mt100 {
    margin-top: 100px;
}

html .mb10 {
    margin-bottom: 10px;
}

html .mb20 {
    margin-bottom: 20px;
}

html .mb25 {
    margin-bottom: 25px;
}

html .mb30 {
    margin-bottom: 30px;
}

html .mb40 {
    margin-bottom: 40px;
}

html .mb50 {
    margin-bottom: 50px;
}

html .mb60 {
    margin-bottom: 60px;
}

html .mb70 {
    margin-bottom: 70px;
}

html .mb80 {
    margin-bottom: 80px;
}

html .mb90 {
    margin-bottom: 90px;
}

html .mb100 {
    margin-bottom: 100px;
}

html .m0 {
    margin: 0px !important;
}

html .p0 {
    padding: 0px !important;
}

html .pt10 {
    padding-top: 10px;
}

html .pt20 {
    padding-top: 20px;
}

html .pt30 {
    padding-top: 30px;
}

html .pt40 {
    padding-top: 40px;
}

html .pt50 {
    padding-top: 50px;
}

html .pt60 {
    padding-top: 60px;
}

html .pt70 {
    padding-top: 70px;
}

html .pt80 {
    padding-top: 80px;
}

html .pt90 {
    padding-top: 90px;
}

html .pt100 {
    padding-top: 100px;
}

html .pt110 {
    padding-top: 110px;
}

html .pt120 {
    padding-top: 120px;
}

html .pt130 {
    padding-top: 130px;
}

html .pt140 {
    padding-top: 140px;
}

html .pb10 {
    padding-bottom: 10px;
}

html .pb20 {
    padding-bottom: 20px;
}

html .pb30 {
    padding-bottom: 30px;
}

html .pb40 {
    padding-bottom: 40px;
}

html .pb50 {
    padding-bottom: 50px;
}

html .pb60 {
    padding-bottom: 60px;
}

html .pb70 {
    padding-bottom: 70px;
}

html .pb80 {
    padding-bottom: 80px;
}

html .pb90 {
    padding-bottom: 90px;
}

html .pb100 {
    padding-bottom: 100px;
}

html .pb110 {
    padding-bottom: 110px;
}

html .pb120 {
    padding-bottom: 120px;
}

html .pb130 {
    padding-bottom: 130px;
}

html .pb140 {
    padding-bottom: 140px;
}

.badge-warning {
    color: #212529;
    background-color: #ffc107;
    text-align: center;
    display: inline;
}

.xhighlight {
    display: block;
    color: #ff2c8e;
}

.pl25 {
    padding-left: 25px !important;
}

.pr25 {
    padding-right: 25px !important;
}

.text-effect-1 {
    background-image: -moz-linear-gradient(45deg, #ff3870 0%, #ff3870 50%, #c300c3 100%);
    background-image: -webkit-linear-gradient(45deg, #ff3870 0%, #ff3870 50%, #c300c3 100%);
    background-image: linear-gradient(45deg, #ff3870 0%, #ff3870 50%, #c300c3 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-effect-2 {
    background: #fc00c7;
    background-image: -moz-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background-image: -webkit-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background-image: linear-gradient(135deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-btn {
    /*background: #673AB7;
    background: -moz-linear-gradient(left, #673AB7 0%, #2196F3 100%);
    background: -webkit-linear-gradient(left, #673AB7 0%, #2196F3 100%);
    background: linear-gradient(to right, #673AB7 0%, #2196F3 100%); */
    background: -moz-linear-gradient(left, var(--first-color) 0%, var(--second-color) 100%);
    background: -webkit-linear-gradient(left, var(--first-color) 0%, var(--second-color) 100%);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
    /* -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
	box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2); */
}

.bg-btn2 {
    /*background: #673AB7;
     background: -moz-linear-gradient(left, #673AB7 0%, #2196F3 100%);
    background: -webkit-linear-gradient(left, #673AB7 0%, #2196F3 100%);
    background: linear-gradient(to right, #673AB7 0%, #2196F3 100%); */
    background: -moz-linear-gradient(left, var(--first-color) 0%, var(--second-color) 100%);
    background: -webkit-linear-gradient(left, var(--first-color) 0%, var(--second-color) 100%);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
    /* -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
	box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2); */
}

.bg-btn3 {
    /*background: #673AB7;
    background: -moz-linear-gradient(left, #673AB7 0%, #2196F3 100%);
    background: -webkit-linear-gradient(left, #673AB7 0%, #2196F3 100%);
    background: linear-gradient(to right, #673AB7 0%, #2196F3 100%); */
    background: -moz-linear-gradient(left, var(--first-color) 0%, var(--second-color) 100%);
    background: -webkit-linear-gradient(left, var(--first-color) 0%, var(--second-color) 100%);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
    /* -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
	box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2); */
}

.bg-btn-scalup {
    padding: 10px 13px;
}

.bg-btn4 {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #fff;
}

.bg-btn5 {
    background: #ff0048;
    background-image: -webkit-linear-gradient(45deg, #ff3870 0%, #ff3870 50%, #c300c3 100%);
    background-image: linear-gradient(45deg, #ff0048 0%, #ff3870 50%, #c300c3 100%);
    /* -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
	box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2); */
}

.bg-btn6 {
    background: #fc00c7;
    background: -moz-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background: -webkit-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background: linear-gradient(135deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
}

.bg-btn7 {
    background: #fc00c7;
    background: -moz-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background: -webkit-linear-gradient(-45deg, #fc00c7 0%, #1c4efd 54%, #00aded 100%);
    background: linear-gradient(135deg, #9100ff 0%, #3663ff 54%, #00e2ff 100%);
    /* -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);
	box-shadow: 0 10px 15px 0px rgb(0 49 189 / .2); */
}

.hover-scale img {
    transform: scale(1.0);
}

.hover-scale:hover img {
    transform: scale(1.05);
}

.text-animation {
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}

.bg-a {
    background-image: linear-gradient(to right, var(--second-color) 0%, #ffbd84 36%, #ffbd84 65%, var(--second-color) 100%);
}

.bg-b {
    background-image: linear-gradient(to right, #673AB7 0%, #E91E63 36%, #E91E63 65%, #673AB7 100%);
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }

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

    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

@keyframes hue {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 2000px 0;
    }
}

@keyframes arrowanim {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(8px, 0);
    }

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

@-webkit-keyframes arrowanim {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(8px, 0);
    }

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

@keyframes updonanim {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 8px);
    }

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

@-webkit-keyframes updonanim {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 8px);
    }

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

@keyframes border-transform {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.lead-intro- img {
    animation: 3s infinite updonanim;
    -webkit-animation: 3s infinite updonanim;
}

.bg-gradient {
    background: #c7ecff;
    background: -moz-linear-gradient(top, #c7ecff 0%, #f9efff 100%);
    background: -webkit-linear-gradient(top, #c7ecff 0%, #f9efff 100%);
    background: linear-gradient(to bottom, #c7ecff 0%, #f9efff 100%);
}

.bg-gradient1 {
    /* background: #ffe2e2; */
    background: -moz-linear-gradient(top, #ffe2e2 0%, #fff9f4 100%);
    background: -webkit-linear-gradient(top, #ffe2e2 0%, #fff9f4 100%);
    background: linear-gradient(to bottom, #ffe2e2 0%, #fff9f4 100%);
    background: #fff;
}

.bg-gradient2 {
    background: #fdffed;
    background: -moz-linear-gradient(top, #fdffed 0%, #effff8 100%);
    background: -webkit-linear-gradient(top, #fdffed 0%, #effff8 100%);
    background: linear-gradient(to bottom, #fdffed 0%, #effff8 100%);
    background: #fff;
}

.bg-gradient3 {
    background: #e2f3ff;
    background: -moz-linear-gradient(top, #e2f3ff 0%, #fffbef 100%);
    background: -webkit-linear-gradient(top, #e2f3ff 0%, #fffbef 100%);
    background: linear-gradient(to bottom, #e2f3ff 0%, #fffbef 100%);
    background: #fff;
}

.bg-gradient4 {
    background: #c1eeff;
    background: -moz-linear-gradient(top, #c1eeff 0%, #f5faff 100%);
    background: -webkit-linear-gradient(top, #c1eeff 0%, #f5faff 100%);
    background: linear-gradient(to bottom, #c1eeff 0%, #f5faff 100%);
}

.bg-gradient5 {
    background: #fff6f3;
    background: -moz-linear-gradient(top, #fff6f3 0%, #fffefb 100%);
    background: -webkit-linear-gradient(top, #fff6f3 0%, #fffefb 100%);
    background: linear-gradient(to bottom, #fff6f3 0%, #fffefb 100%);
}

.bg-gradient6 {
    background: #e0f7f4;
    background: -moz-linear-gradient(135deg, #e0f7f4 0%, #ccf2f4 50%, #e0ffe8 100%);
    background: -webkit-linear-gradient(135deg, #e0f7f4 0%, #ccf2f4 50%, #e0ffe8 100%);
    background: linear-gradient(135deg, #e0f7f4 0%, #ccf2f4 50%, #e0ffe8 100%);
}

.bg-gradient7 {
    background: #ffe2e2;
    background: -moz-linear-gradient(top, #ffe2e2 0%, #fff9f4 100%);
    background: -webkit-linear-gradient(top, #ffe2e2 0%, #fff9f4 100%);
    background: linear-gradient(to bottom, #ffe2e2 0%, #fff9f4 100%);
}

.bg-gradient8 {
    background: #fff8fb;
    background: -moz-linear-gradient(top, #fff8fb 0%, #d0fcf6 100%);
    background: -webkit-linear-gradient(top, #fff8fb 0%, #d0fcf6 100%);
    background: linear-gradient(to bottom, #fff8fb 0%, #d0fcf6 100%);
}

.bg-gradient9 {
    background: #e5ffee;
    background: -moz-linear-gradient(top, #ffe2e2 0%, #fff9f4 100%);
    background: -webkit-linear-gradient(top, #ffe2e2 0%, #fff9f4 100%);
    background: linear-gradient(to bottom, #e5ffee 0%, #e2f6ff 100%);
}

.bg-gradient10 {
    background: #e4fffe;
    background: -moz-linear-gradient(top, #e4fffe 0%, #ffedf3 100%);
    background: -webkit-linear-gradient(top, #e4fffe 0%, #ffedf3 100%);
    background: linear-gradient(to bottom, #e4fffe 0%, #ffedf3 100%);
}

.bg-gradient11 {
    background: var(--second-color);
    background: -moz-linear-gradient(left, var(--second-color) 0%, #007bff 100%);
    background: -webkit-linear-gradient(left, var(--second-color) 0%, #007bff 100%);
    background: linear-gradient(to right, var(--second-color) 0%, #007bff 100%);
}

.bg-gradient12 {
    background: #3f36b9;
    background: -moz-linear-gradient(left, #3f36b9 0%, #20206b 100%);
    background: -webkit-linear-gradient(left, #3f36b9 0%, #20206b 100%);
    background: linear-gradient(to right, #3f36b9 0%, #20206b 100%);
}

.bg-gradient13 {
    background: #9C27B0;
    background: -moz-linear-gradient(left, #9C27B0 0%, #673AB7 100%);
    background: -webkit-linear-gradient(left, #9C27B0 0%, #673AB7 100%);
    background: linear-gradient(to right, #9C27B0 0%, #673AB7 100%);
}

.bg-gradient14 {
    background: #ff2d8d;
    background: -moz-linear-gradient(top, #ff2d8d 0%, #653db9 100%);
    background: -webkit-linear-gradient(top, #ff2d8d 0%, #653db9 100%);
    background: linear-gradient(to bottom, #ff2d8d 0%, #653db9 100%);
}

.bg-gradient15 {
    background: #fffdf2;
    background: -moz-linear-gradient(top, #fffdf2 0%, #ffeff5 100%);
    background: -webkit-linear-gradient(top, #fffdf2 0%, #ffeff5 100%);
    background: linear-gradient(to bottom, #fffdf2 0%, #ffeff5 100%);
}

.bg-gradient16 {
    background-image: -moz-linear-gradient(45deg, #9217de 0%, #4775ff 50%, #00b6d4 100%);
    background-image: -webkit-linear-gradient(45deg, #9217de 0%, #4775ff 50%, #00b6d4 100%);
    background-image: linear-gradient(45deg, #9217de 0%, #4775ff 50%, #00b6d4 100%);
}

.bg-flat1 {
    background: #f5f5f5;
}

.classic-bg1 {
    background: #fffef9;
}

.classic-bg2 {
    background: #f3fffe;
}

.classic-bg3 {
    background: #fef9ff;
}

.classic-bg4 {
    background: #3f36b9;
}

.classic-bg5 {
    background: #fffef4;
}

.mobile-menu2 {
    display: none;
}

.mobile-menu2 .navm- {
    margin: 0px 0 0 10px;
}

.mob-nav2 {
    display: flex;
}

.mob-nav2 li {
    position: relative;
}

html.hc-nav-yscroll {
    overflow-y: scroll;
}

body.hc-nav-open {
    overflow: visible;
    position: relative;
    width: 100%;
    min-height: 100%;
}

.hc-offcanvas-nav {
    visibility: hidden;
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 9999999;
}

.hc-offcanvas-nav.is-ios * {
    cursor: pointer !important;
}

.hc-offcanvas-nav .nav-container {
    position: fixed;
    z-index: 9998;
    top: 0;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    transition: transform .4s ease;
}

.hc-offcanvas-nav .nav-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.hc-offcanvas-nav .nav-content {
    height: 100%;
}

.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
}

.hc-offcanvas-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-offcanvas-nav li {
    position: relative;
    display: block;
}

.hc-offcanvas-nav li.level-open>.nav-wrapper {
    visibility: visible;
}

.hc-offcanvas-nav li:not(.custom-content) a {
    position: relative;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
}

.hc-offcanvas-nav li:not(.custom-content) a[disabled] {
    cursor: not-allowed;
}

.hc-offcanvas-nav li:not(.custom-content) a,
.hc-offcanvas-nav li:not(.custom-content) a:hover {
    text-decoration: none;
}

.hc-offcanvas-nav input[type="checkbox"] {
    display: none;
}

.hc-offcanvas-nav label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
}

.hc-offcanvas-nav .nav-item {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.hc-offcanvas-nav.disable-body::after,
.hc-offcanvas-nav .nav-wrapper::after {
    content: '';
    position: fixed;
    z-index: 9990;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s ease .4s, opacity .4s ease;
}

.hc-offcanvas-nav.disable-body.nav-open::after,
.hc-offcanvas-nav .sub-level-open::after {
    visibility: visible;
    opacity: 1;
    transition-delay: .05s;
}

.hc-offcanvas-nav:not(.nav-open)::after {
    pointer-events: none;
}

.hc-offcanvas-nav.nav-levels-expand .nav-wrapper::after {
    display: none;
}

.hc-offcanvas-nav.nav-levels-expand .nav-wrapper.nav-wrapper-0 {
    max-height: 100vh;
}

.hc-offcanvas-nav.nav-levels-expand .nav-wrapper.nav-wrapper-0>.nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
    max-height: 100vh;
}

.hc-offcanvas-nav.nav-levels-expand ul .nav-wrapper {
    min-width: 0;
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transition: height 0s ease .4s;
}

.hc-offcanvas-nav.nav-levels-expand .level-open>.nav-wrapper {
    max-height: none;
    overflow: visible;
    visibility: visible;
}

.hc-offcanvas-nav.nav-levels-overlap .nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
    max-height: 100vh;
}

.hc-offcanvas-nav.nav-levels-overlap .nav-wrapper {
    max-height: 100vh;
}

.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper {
    position: absolute;
    z-index: 9999;
    top: 0;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s ease .4s, transform .4s ease;
}

.hc-offcanvas-nav.nav-levels-overlap ul li.nav-parent {
    position: static;
}

.hc-offcanvas-nav.nav-levels-overlap ul li.level-open>.nav-wrapper {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: transform .4s ease;
}

.hc-offcanvas-nav.nav-position-left {
    left: 0;
}

.hc-offcanvas-nav.nav-position-left .nav-container {
    left: 0;
}

.hc-offcanvas-nav.nav-position-left.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(-100%, 0, 0);
}

.hc-offcanvas-nav.nav-position-right {
    right: 0;
}

.hc-offcanvas-nav.nav-position-right .nav-container {
    right: 0;
}

.hc-offcanvas-nav.nav-position-right.nav-levels-overlap li .nav-wrapper {
    right: 0;
    transform: translate3d(100%, 0, 0);
}

.hc-offcanvas-nav.nav-position-top {
    top: 0;
}

.hc-offcanvas-nav.nav-position-top .nav-container {
    top: 0;
    width: 100%;
}

.hc-offcanvas-nav.nav-position-top.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(0, -100%, 0);
}

.hc-offcanvas-nav.nav-position-bottom {
    top: auto;
    bottom: 0;
}

.hc-offcanvas-nav.nav-position-bottom .nav-container {
    top: auto;
    bottom: 0;
    width: 100%;
}

.hc-offcanvas-nav.nav-position-bottom.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(0, 100%, 0);
}

.hc-offcanvas-nav.nav-open[class*='hc-nav-'] div.nav-container {
    transform: translate3d(0, 0, 0);
}

.hc-offcanvas-nav.rtl li {
    text-align: right;
}

.hc-offcanvas-nav.rtl .nav-next span,
.hc-offcanvas-nav.rtl .nav-back span,
.hc-offcanvas-nav.rtl .nav-close span {
    left: 0;
    right: unset;
}

.hc-nav-trigger {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
    top: 20px;
    z-index: 9980;
    width: 30px;
    min-height: 48px;
}

.hc-nav-trigger span {
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: 50% 50%;
}

.main-header.sticky .hc-nav-trigger span,
.main-header.sticky .hc-nav-trigger span::before,
.main-header.sticky .hc-nav-trigger span::after {
    background: #050748;
}

.hc-nav-trigger span,
.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
    display: block;
    position: absolute;
    left: 0;
    height: 4px;
    background: #050748;
    transition: all .2s ease;
}

.nav-bg-b .hc-nav-trigger span,
.nav-bg-b .hc-nav-trigger span::before,
.nav-bg-b .hc-nav-trigger span::after {
    background: #fff;
}

.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
    content: '';
    width: 100%;
}

.hc-nav-trigger span::before {
    top: -10px;
}

.hc-nav-trigger span::after {
    bottom: -10px;
}

.hc-nav-trigger.toggle-open span {
    background: rgba(0, 0, 0, 0) !important;
    transform: rotate(45deg);
}

.hc-nav-trigger.toggle-open span::before {
    transform: translate3d(0, 9px, 0);
}

.hc-nav-trigger.toggle-open span::after {
    transform: rotate(-90deg) translate3d(10px, 0, 0);
}

.hc-offcanvas-nav::after,
.hc-offcanvas-nav .nav-wrapper::after {
    background: rgba(0, 0, 0, 0.5);
}

.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
    background: #101010;
}

.hc-offcanvas-nav h2 {
    font-size: 22px;
    font-weight: normal;
    text-align: left;
    padding: 10px 17px;
    color: #101010 !important;
    background: #fff;
}

.hc-offcanvas-nav .nav-item {
    padding: 14px 17px;
    font-size: 15px;
    color: var(--white-color);
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    border-bottom: 0px solid #fff;
}

.hc-offcanvas-nav .nav-item:focus,
.hc-offcanvas-nav .nav-item:focus-within {
    z-index: 10;
}

.hc-offcanvas-nav .nav-item-wrapper {
    position: relative;
}

.hc-offcanvas-nav .nav-highlight {
    background: #2e6296;
}

.hc-offcanvas-nav .nav-close:focus,
.hc-offcanvas-nav .nav-next:focus,
.hc-offcanvas-nav .nav-back:focus {
    z-index: 10;
}

.hc-offcanvas-nav li:not(.custom-content) a {
    padding: 14px 15px;
    font-size: 15px;
    color: var(--white-color);
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    border-bottom: 0px solid #2c5d8f;
}

.hc-offcanvas-nav li:not(.custom-content) a[disabled] {
    color: rgba(255, 255, 255, 0.5);
}

.hc-offcanvas-nav:not(.touch-device) li:not(.custom-content) a:hover {
    background: #101010;
}

.hc-offcanvas-nav ul:first-of-type:not(:first-child)>li:first-child:not(.nav-back):not(.nav-close)>a {
    border-top: 1px solid #2c5d8f;
    margin-top: -1px;
}

.hc-offcanvas-nav li {
    text-align: left;
}

.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav li.nav-back a {
    background: #ffffff;
    color: #101010;
}

.hc-offcanvas-nav li.nav-close a:hover,
.hc-offcanvas-nav li.nav-back a:hover {
    background: #fff;
}

.hc-offcanvas-nav li.nav-close:not(:first-child) a,
.hc-offcanvas-nav li.nav-back:not(:first-child) a {
    margin-top: -1px;
}

.hc-offcanvas-nav li.nav-parent .nav-item:last-child {
    padding-right: 35px;
}

.hc-offcanvas-nav li.nav-parent .nav-item:not(:last-child) {
    margin-right: 44px;
}

.hc-offcanvas-nav li.nav-close span,
.hc-offcanvas-nav li.nav-parent .nav-next,
.hc-offcanvas-nav li.nav-back span {
    width: 45px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease;
}

.hc-offcanvas-nav li.nav-close span::before,
.hc-offcanvas-nav li.nav-close span::after {
    content: '';
    position: absolute;
    top: 46%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-top: -3px;
    border-top: 2px solid #101010;
    border-left: 2px solid #101010;
}

.hc-offcanvas-nav li.nav-close span::before {
    margin-left: -11px;
    transform: rotate(135deg);
}

.hc-offcanvas-nav li.nav-close span::after {
    transform: rotate(-45deg);
}

.hc-offcanvas-nav a.nav-next {
    border-left: 1px solid #2c5d8f;
}

.hc-offcanvas-nav .nav-next span::before,
.hc-offcanvas-nav li.nav-back span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -2px;
    box-sizing: border-box;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform-origin: center;
}

.hc-offcanvas-nav .nav-next span {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.hc-offcanvas-nav .nav-next span::before {
    transform: translate(-50%, -50%) rotate(135deg);
}

.hc-offcanvas-nav li.nav-back span::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hc-offcanvas-nav.nav-position-left.nav-open .nav-wrapper {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-right.nav-open .nav-wrapper {
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-right .nav-next span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hc-offcanvas-nav.nav-position-right li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(135deg);
}

.hc-offcanvas-nav.nav-position-top.nav-open .nav-wrapper {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-top .nav-next span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hc-offcanvas-nav.nav-position-top li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hc-offcanvas-nav.nav-position-bottom.nav-open .nav-wrapper {
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-bottom .nav-next span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hc-offcanvas-nav.nav-position-bottom li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hc-offcanvas-nav.nav-levels-expand .nav-container ul .nav-wrapper,
.hc-offcanvas-nav.nav-levels-none .nav-container ul .nav-wrapper {
    box-shadow: none;
    background: transparent;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container ul h2,
.hc-offcanvas-nav.nav-levels-none .nav-container ul h2 {
    display: none;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container ul ul .nav-item,
.hc-offcanvas-nav.nav-levels-none .nav-container ul ul .nav-item {
    font-size: 13px;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li,
.hc-offcanvas-nav.nav-levels-none .nav-container li {
    transition: background .3s ease;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open {
    background: #101010;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>.nav-item-wrapper>a,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>.nav-item-wrapper>a {
    border-bottom: 0px solid #fff;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>.nav-item-wrapper>a:hover,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>.nav-item-wrapper>a:hover {
    background: #101010;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>.nav-item-wrapper>.nav-next span::before,
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>.nav-item-wrapper>a>.nav-next span::before,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>.nav-item-wrapper>.nav-next span::before,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>.nav-item-wrapper>a>.nav-next span::before {
    margin-top: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hc-offcanvas-nav.nav-levels-expand .nav-container .nav-next span::before,
.hc-offcanvas-nav.nav-levels-none .nav-container .nav-next span::before {
    margin-top: -2px;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hc-offcanvas-nav.rtl a.nav-next {
    border-left: none;
    border-right: 0px solid #fff;
}

.hc-offcanvas-nav.rtl li.nav-parent .nav-item {
    padding-right: 17px;
    padding-left: 58px;
}

#main-nav {
    display: none;
}

.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
    padding-bottom: 41px;
}

.hc-offcanvas-nav h2 {
    font-weight: 400;
}

.hc-offcanvas-nav a {
    font-size: 16px;
}

.hc-offcanvas-nav li .custom-message {
    font-size: 12px;
}

.hc-offcanvas-nav li .custom-message a {
    color: var(--white-color);
    font-size: 13px;
}

.hc-offcanvas-nav li .custom-message a:hover {
    text-decoration: none;
}

.hc-offcanvas-nav.nav-position-top ul.bottom-nav,
.hc-offcanvas-nav.nav-position-bottom ul.bottom-nav {
    position: relative;
    border-top: none;
}

.hc-offcanvas-nav.nav-position-top .nav-wrapper-0>.nav-content,
.hc-offcanvas-nav.nav-position-bottom .nav-wrapper-0>.nav-content {
    padding-bottom: 0;
}

.hc-offcanvas-nav ul.bottom-nav {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    display: contents;
    flex-wrap: nowrap;
    align-items: stretch;
    border-top: 0px solid #101010;
    background: #101010;
}

.hc-offcanvas-nav ul.bottom-nav li {
    flex: auto;
}

.hc-offcanvas-nav ul.bottom-nav li a {
    padding: 10px;
    text-align: left;
    height: 100%;
    border-bottom: none;
}

.hc-offcanvas-nav ul.bottom-nav li svg {
    fill: #fff;
    display: inline-block;
    vertical-align: middle;
}

.hc-offcanvas-nav ul.bottom-nav li.prb svg {
    width: 18px;
    height: 18px;
}

.hc-offcanvas-nav.close-no-label:not(.rtl) .nav-title {
    padding-right: 60px;
}

.hc-offcanvas-nav.close-no-label .nav-title+ul>.nav-close:first-child a {
    position: absolute;
    width: 45px;
    height: 56px;
    top: 0;
    right: 0;
    transform: translateY(-100%);
}

.custom-nav .menu-dorpdown {
    width: 240px;
    margin: 0 auto;
    border-radius: 0px 0px 20px 20px;
}

.custom-nav .menu-dorpdown .sub-menu-section {
    border-radius: 0px 0px 20px 20px;
}

.shape-bg3:before {
    height: 100%;
    width: 100%;
    opacity: 0.03;
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    right: 0;
}

.onloadpage {
    z-index: 999999999;
}

.hc-offcanvas-nav h2 {
    line-height: 36px;
}

a.smllbtnn {
    line-height: 45px;
    color: var(--white-color);
    border-radius: 8px;
    padding: 0 20px;
    border: 0;
}

.switch-wrapper {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 55555;
    top: 50%;
    transform: translateY(-50%);
    transform: rotate(90deg);
}

.switch-wrapper .switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.switch-wrapper .switch input {
    display: none;
}

.switch-wrapper .slider {
    background-color: var(--white-color);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
    border: 1px solid #e2e2e2;
    box-shadow: 10px 0px 10px 0px rgb(0 0 0 / 15%);
}

.switch-wrapper .slider:before {
    bottom: 4px;
    content: "";
    background: url("images/icons/sun.svg") rgb(255, 196, 0) no-repeat center center;
    height: 24px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 24px;
}

.switch-wrapper input:checked+.slider {
    background-color: rgb(36, 36, 36);
    border: 1px solid #ffffff57;
}

.switch-wrapper input:checked+.slider:before {
    transform: translateX(26px);
    content: "";
    background: url(images/icons/moon.svg) #2196f3 no-repeat center center;
}

.switch-wrapper .slider.round {
    border-radius: 50px;
}

.switch-wrapper .slider.round:before {
    border-radius: 50%;
}

.digitalagency20 {
    background: url(images/shape/bg-glass.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
}

.glassmorphism .service-slide {
    backdrop-filter: blur(10px);
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 50%);
}

.niwaxheroscroll {
    position: absolute;
    width: 100%;
    height: 100%;
}

.niwaxheroscroll img {
    position: absolute;
}

.nxhs1 {
    left: -4%;
    bottom: 0;
}

.nxhs2 {
    right: 50%;
    top: 50%;
}

.nxhs3 {
    right: 30%;
    bottom: 0;
}

.nxhs4 {
    left: 6%;
    top: 14%;
}

.nxhs5 {
    left: 0%;
    bottom: 30%;
}

.row-forfullcard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 60px 0;
    background: url(images/shape/tt-work-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.fullservicecard .nxgls {
    padding: 30px 20px;
    margin: 0;
    box-shadow: none;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(255 255 255 / 50%);
}

.intgrdtd {
    background-image: linear-gradient(135deg, #f34079, #f65b69 50%, #fc8b4c);
}

.glassmorphism .badges-content {
    text-align: center;
    backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(255 255 255 / 50%);
}

.glassmorphism .work-card {
    backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(255 255 255 / 50%);
}

.glassmorphism .work-categorys {
    background-color: #fbf9ed;
    position: relative;
    background-image: url(images/shape/tt-work-bg.webp);
    background-size: cover;
    background-position: center center;
}

.glassmorphism .statistics-img {
    background: url(images/shape/shape-f.webp), #feefff;
    background-position: left top;
    background-size: 130px;
    background-repeat: no-repeat;
}

.footer {
    background-color: #191919;
    /* padding: 90px 0; */
    position: relative;
    z-index: 5;
}

.fttlnks h3 {
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 500;
}

.fttlnks h4 {
    margin-bottom: 10px;
    /* font-size: 18px; */
    font-weight: 500;
}

.contactinfo a {
    display: block;
    font-size: 20px;
    color: var(--white-color);
    line-height: 2;
}

.dark-footer h4,
.dark-footer h2 {
    color: #e6e6e6;
}

.flexend {
    align-items: flex-end;
}

.rffc {
    grid-gap: 0;
    padding: 0;
}

.rffc .fullservicecard .nxgls {
    border-radius: 0;
    backdrop-filter: blur(1px);
    background: rgb(21 0 49 / 75%);
    border: 0px solid rgb(255 255 255 / 50%);
}

.portfolio-main-tag {
    display: flex;
    gap: 10px;
}

.widebloktag span {
    background: #000000;
    padding: 5px 14px;
    font-size: 14px;
    border-radius: 26px;
    border: 1px solid gray;
    color: #fff;
}

.green-tag span {
    background-color: var(--first-color);
    color: var(--white-color);
}

.widebloktag span+span {
    margin-left: 8px;
}

.pbwide {
    position: relative;
    padding: 0 50px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto 55%;
    align-items: center;
    grid-gap: 20px;
}

.portfolio-item-info-tt p {
    font-size: 14px;
    word-spacing: 3px;
    font-weight: 500;
    color: var(--black-color);
}

.info-list-ul {
    /* display: grid; */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-list-ul li {
    line-height: 27px;
    font-size: 13px;
    color: #000;
    background: #D9D9D9;
    width: fit-content;
    margin-top: 14px;
    padding: 0px 30px 0 30px;
    border-radius: 30px;
    border: 1px solid gray;
}

.info-list-ul li:before {
    /* content: "▶"; */
    font-size: 14px;
    margin: 0 5px 0 0px;
}

.portfolio-wide-image img {
    display: block;
    width: 100%;
    margin: 0px 10px 30px -94px;
}

.img-wide-blocktt {
    position: relative;
    right: -80px;
}

.portfolio-item-info-tt {
    padding: 0;
}

.portfolio-item-info-tt h3 {
    font-size: 50px;
    line-height: 40px;
    font-weight: 900;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #314252;
}

.desktopblock {
    position: relative;
    width: 100%;
    border: 10px solid rgb(255 255 255 / 50%);
    border-radius: 28px;
    overflow: hidden;
}

.mobileblock {
    position: absolute;
    max-width: 190px;
    left: -80px;
    top: 0;
    border: 8px solid rgb(255 255 255 / 60%);
    border-radius: 28px;
    overflow: hidden;
    transform: scale(1.1);
}

.shadow1 {
    -webkit-box-shadow: 0 10px 15px 0px rgb(3 35 68 / 15%);
    box-shadow: 0 10px 15px 0px rgb(3 35 68 / 15%);
}

.wptbb:nth-child(2n+2) {
    margin-top: 40px;
}

.forfullcard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center center;
}

.forfullcard .srvc-bg-nx {
    margin: 0;
}

.tilt-outer {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.tilt-inner {
    transform: translateZ(20px);
}

.pctmc {
    padding: 30px 15px;
}

.srcl0 {
    background: #f9d59e;
    border-bottom: 4px solid #ebc183;
}

.srcl6 {
    background: #fff1f1;
    border-bottom: 4px solid #ffa2a2;
}

.srcl7 {
    background: #ebfffa;
    border-bottom: 4px solid #a2ffe9;
}

.floating-label {
    position: relative;
    margin-bottom: 20px;
}

.floating-input,
.floating-select {
    font-size: 14px;
    padding: 4px 4px;
    display: block;
    width: 100%;
    height: 45px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #C5C5C5;
}

.floating-input:focus,
.floating-select:focus {
    outline: none;
    border-bottom: 1px solid #6B3489;
}

.floating-label label {
    color: #999;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 30px;
    top: 16px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    margin-bottom: 0;
}

.floating-input:focus~label,
.floating-input:not(:placeholder-shown)~label,
.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
    top: -4px;
    font-size: 12px;
    color: #828282;
}

.hero-slider {
    width: 100%;
    /* height: 1000px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 0;
}

.hero-slider .slide-inner {
    position: relative;
}

.hero-slider .slide-inner:before {
    content: "";
    position: absolute;
    background: var(--black-color);
    width: 100%;
    height: 100%;
    opacity: 0.30;
    top: 0;
    left: 0px;
    right: 0;
}

.hero-slider .swiper-slide {
    overflow: hidden;
    color: var(--white-color);
}

.hero-slider .swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.hero-slider .slide-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    background: transparent;
    width: 55px;
    height: 55px;
    line-height: 53px;
    margin-top: -30px;
    text-align: center;
    border: 2px solid #d4d3d3;
    border-radius: 55px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

.hero-slider:hover .swiper-button-prev,
.hero-slider:hover .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.hero-slider .swiper-button-prev {
    left: 25px;
    transform: translateX(50px);
}

/* .hero-slider .swiper-button-prev:before {
    font-family: "Font Awesome 6 Free";
    content: "\f053";
    font-size: 15px;
    color: #d4d3d3;
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
} */

.hero-slider .swiper-button-next {
    right: 25px;
    transform: translateX(-50px);
}

/* .hero-slider .swiper-button-next:before {
    font-family: "Font Awesome 6 Free";
    content: "\f054";
    font-size: 15px;
    color: #d4d3d3;
    font-style: normal;
    display: inline-block;
    font-weight: 900;
} */

.hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    text-align: left;
    line-height: 12px;
    font-size: 12px;
    color: var(--black-color);
    opacity: 0.3;
    background: #fff;
    transition: all .2s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
}

.hero-slider .swiper-container-horizontal>.swiper-pagination-bullets,
.hero-slider .swiper-pagination-custom,
.hero-slider .swiper-pagination-fraction {
    bottom: 30px;
}

.swiper-pagination {
    text-align: center;
}

.hero-slider .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 30px;
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

.hero-style .slide-title,
.hero-style .slide-text,
.hero-style .slide-btns {
    max-width: 600px;
}

.hero-style .slide-title h2 {
    font-size: 60px;
    line-height: 70px;
    color: #ffffff;
    margin: 0 0 20px;
    transition: all .4s ease;
}

.hero-style .slide-text p {
    font-size: 20px;
    letter-spacing: normal;
    color: #ffffff;
    margin: 0 0 30px;
    transition: all .4s ease;
}

.hero-style .slide-btns>a:first-child {
    margin-right: 10px;
}

.freelancerv2 {
    background-color: #05081a;
}

.freelancerv2 .footer {
    background-color: #0b0e22;
}

.flv2 .header-heading h1 {
    font-size: 60px;
    line-height: 74px;
    margin-bottom: 30px;
}

.freelancerv2:before {
    content: "";
    background-image: url(images/shape/stars.svg);
    position: absolute;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: auto;
}

.text-effect-3 {
    background: url(images/shape/bg-gradient.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.font-bold h1,
.font-bold h2,
.font-bold h3 {
    font-weight: 900;
}

html .mb15 {
    margin-bottom: 15px;
}

html .mt15 {
    margin-top: 15px;
}

.card-dark-2 {
    overflow: hidden;
    border: 1px solid hsla(0, 0%, 100%, .05);
    background-color: hsla(0, 0%, 100%, .05);
    border-radius: 14px;
}

.inforcardtt h3 {
    font-size: 22px;
    line-height: 32px;
    color: var(--white-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.inforcardttt h2 {
    font-size: 30px;
    line-height: 40px;
    color: var(--white-color);
    font-weight: 600;
}

.inforcardttt h3 {
    font-size: 20px;
    line-height: 30px;
    color: #787c97;
    font-weight: 600;
}

.srve .inforcardtt {
    padding: 24px;
}

.inforcardtt {
    padding: 24px;
    padding-bottom: 0;
}

.footerlinkcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    padding: 20px 0 20px 0;
    border-top: 1px solid #2f3140;
    margin-top: 24px;
    color: var(--white-color);
}

.footerlinkcard:hover {
    color: var(--white-color);
}

.ffvsocial a {
    display: block;
}

.ffvsocial a+a {
    margin-top: 20px;
}

.freelancerv2 .form-block h3 {
    color: var(--white-color);
    font-weight: 600;
}

.freelancerv2 p,
.freelancerv2 .follow-label h6,
.freelancerv2 .follow-label a {
    color: #85879b;
}

.freelancerv2 .form-block label a {
    color: #85879b;
}

.freelancer-footer {
    padding: 90px 0 0px 0;
}

.freelancer-footer p.ffttrr {
    padding: 20px 0 20px 0;
    border-top: 1px solid #303240;
    margin-top: 60px;
}

.freelancerv2 .hexagon {
    background: #05081a;
}

.freelancerv2 .counter-no span {
    color: var(--white-color);
}

.freelancerv2 .reviewer-text h4 {
    color: #85879b;
}

.niwaxheroscroll-v2 {
    position: relative;
    overflow-x: clip;
}

.niwaxheroscroll-v2 img {
    position: absolute;
}

.nxhs10 {
    top: 0;
    left: -60px;
    filter: blur(80px);
}

.nxhs20 {
    top: -10px;
    left: -20px;
    filter: blur(70px);
}

.nxhs30 {
    top: -5%;
    right: -5%;
    filter: blur(100px);
}

.nxhs40 {
    right: -70px;
    filter: blur(50px);
}

.nxhs50 {
    top: 0;
    left: 0;
}

.grid-x {
    position: fixed;
    width: 100%;
    z-index: 1;
}

.grid-line {
    height: 100vh;
    border-left: 1px solid #1e2131;
}

.freelancerv2 .section {
    position: relative;
    z-index: 2;
}

.innericodiv {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    padding: 18px;
    margin: 30px 0 0 30px;
}

.innidv1 {
    background: linear-gradient(135deg, #9100ff 0%, #3663ff 54%, #00e2ff 100%);
}

.innidv2 {
    background: linear-gradient(to right, #ffbd84 0%, var(--second-color) 100%);
}

.innidv3 {
    background: linear-gradient(to right, #f92c8b 0%, #b02cd6 100%);
}

.mouse-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
}

.cursor.cursor2 {
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
}

.cursor {
    margin-left: -4px;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    z-index: 21474836490;
    background: linear-gradient(to right, #ffbd84 0%, var(--second-color) 100%);
    -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
    -o-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
    transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
    opacity: 0.9;
}

.cursor.cursor-hover {
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    background-color: #ffbd84;
    opacity: .2;
}

.cursor-follow {
    margin-left: -18px;
    margin-top: -19px;
    width: 38px;
    height: 38px;
    border: 1px solid #ffbd84;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 21474836490;
    opacity: .8;
    -webkit-transition: all .08s ease-out;
    -o-transition: all .08s ease-out;
    transition: all .08s ease-out;
}

.cursor-follow.cursor-hover {
    opacity: 0;
}

.nxbg-a {
    background-color: #f8edff;
}

.nxbg-b {
    background-color: #d1d8ff;
}

.connect-block a {
    border-radius: 8px;
    /* background: var(--second-color); */
    background: #087072;
    border: 1px solid #087072;
    padding: 20px;
    display: flex;
}

.icon-fld-nx {
    text-align: center;
    font-size: 25px;
    margin: 0px 20px 0 0px;
    color: var(--white-color);
}

.text-fld-nx {
    border-left: 1px solid #ffa7a7;
    padding: 0 0 0 20px;
}

.connect-block a span.small-text {
    font-size: 14px;
    color: var(--white-color);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2.2px;
}

.text-fld-nx span {
    display: block;
}

.connect-block a span.large-text {
    font-size: 20px;
    color: var(--white-color);
    line-height: 34px;
    font-weight: 500;
}

.common-heading.text-l>p {
    margin-top: 10px;
    color: var(--black2-color);
}

.contact-block-btm {
    padding: 50px 30px;
    /*
     background: var(--second-color);
     */
    background: #087072;
    border-radius: 8px;
    margin-left: 50px;
}

.footerdex {
    background-color: var(--black2-color);
    /* background-image: linear-gradient(to right, rgba(0, 0, 0), rgb(0, 39, 53)); */
}

#progress-bar {
    --scrollAmount: 0%;
    background-image: linear-gradient(to right, #673AB7 0%, #2196F3 100%);
    width: var(--scrollAmount);
    height: 3px;
    position: fixed;
    top: 0;
    z-index: 999999999;
}


/* Custom */

.main-header {
    background-color: transparent;
}

.main-header.sticky {
    background-color: var(--white-color);
}

.flup-flex-ileft p.title2 {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.flup-flex-ileft p.title {
    color: var(--first-color);
    font-size: 22px;
    font-weight: 600;
}

.android-sprit {
    background-image: url(images/service/10.webp);
    display: inline-block;
    position: relative;
}

.android-sprit-1 {
    background-position: -7px -149px;
    background-size: 731%;
    width: 40px;
    height: 54px;
    margin-right: 5px;
}

.android-sprit-2 {
    background-position: -60px -149px;
    background-size: 731%;
    width: 40px;
    height: 54px;
    margin-right: 5px;
}

.android-sprit-3 {
    background-position: -113px -149px;
    background-size: 731%;
    width: 40px;
    height: 54px;
    margin-right: 5px;
}

.android-sprit-4 {
    background-position: -166px -149px;
    background-size: 731%;
    width: 40px;
    height: 54px;
    margin-right: 5px;
}

.android-sprit-5 {
    background-position: -419px -304px;
    background-size: 700%;
    width: 80px;
    height: 80px;
}

.android-sprit-6 {
    background-position: -12px -402px;
    background-size: 700%;
    width: 80px;
    height: 80px;
}

.android-sprit-7 {
    background-position: -106px -402px;
    background-size: 700%;
    width: 80px;
    height: 80px;
}

.android-sprit-8 {
    background-position: -198px px -381px;
    background-size: 668%;
    width: 80px;
    height: 80px;
}

.android-sprit-9 {
    background-position: -320px -429px;
    background-size: 740%;
    width: 80px;
    height: 80px;
}

.android-sprit-10 {
    background-position: -408px -429px;
    background-size: 740%;
    width: 80px;
    height: 80px;
}

.android-sprit-11 {
    background-position: -496px -429px;
    background-size: 740%;
    width: 80px;
    height: 80px;
}

.android-sprit-12 {
    background-position: -13px -531px;
    background-size: 740%;
    width: 80px;
    height: 80px;
}

.flup-theme {
    color: var(--first-color);
}

.key-points {
    list-style-type: none;
}

.listSec ul li {
    list-style: none;
    margin: 0 0 25px;
    display: block;
}

.listSec ul li img {
    display: inline-block;
    vertical-align: top;
    margin: 10px 0 0;
    max-width: 35px;
}

.listSec ul li p {
    width: 80%;
    display: inline-block;
    margin: 0 0 0 15px;
}

.listSec ul li p span {
    font-size: 24px;
    font-weight: bold;
    display: block;
    color: var(--black-color);
}

.choose-us {
    background: var(--light-grey);
    /* text-align: center; */
    background-size: 200%;
    background-position: top right;
    background-repeat: no-repeat;
    /* text-align: center; */
    padding: 20px;
    margin: 0;
    position: relative;
    border: 1px solid #d4f0ff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgb(0 0 0 / 6%), 0 8.2px 8.9px -30px rgb(0 0 0 / 7%), 0 25px 40px -30px rgb(0 0 0 / 20%);
    box-shadow: 0 3.4px 2.7px -30px rgb(0 0 0 / 6%), 0 8.2px 8.9px -30px rgb(0 0 0 / 7%), 0 25px 40px -30px rgb(0 0 0 / 20%);
    height: 100%;
    background: linear-gradient(#ffffff 50%, var(--first-color) 50%);
    background-size: 100% 200%;
    background-position: 0% 2.5%;
    cursor: pointer;
    transition: 0.5s;
}

.choose-us:hover {
    background-position: 0 100%;
}

.choose-us img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(45%) saturate(600%) hue-rotate(135deg) brightness(95%) contrast(90%);
}

.choose-us:hover img {
    filter: invert(1);
}

.choose-us:hover h4,
.choose-us:hover p {
    color: var(--white-color);
}

/* .services-img-div {
    padding-top: 15px;
} */

.service-heading {
    padding-top: 20px;
}

.service-heading h3 {
    color: var(--first-color);
    font-size: 26px;
    line-height: 32px;
}

.service-heading h4 {
    color: var(--first-color);
}

.services-text-div {
    /* text-align: center; */
    padding-top: 15px;
}

.features-tab {
    border-color: var(--white-color);
}

.icon-img {
    width: 80px !important;
    height: 80px;
}

.why-media {
    background-color: var(--white-color);
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hero-main-rp {
    position: absolute;
    /* z-index: 3; */
}

/* Technology */

.boximageicon-seo {
    padding: 10px;
    margin-right: 25px;
    background: #fff;
    border-radius: 5px;
    font-size: 40px;
    border: 1px solid #d4f0ff;
}

.boximageicon-seo img {
    width: 40px;
    height: 40px;
}

.p-50 {
    padding: 50px !important;
}

.backgroundwhite-tabsd {
    -webkit-box-shadow: 0 10px 45px -9px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 10px 45px -9px rgba(0, 0, 0, .2);
    box-shadow: 0 10px 45px -9px rgb(0 0 0 / 20%);
}

.boxseo-data img {
    width: 70px;
    display: inline-block;
}

.boxseo-data h3 {
    padding-left: 15px;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.android-tech-tabs {
    border-bottom: 1px solid transparent;
}

.android-tech-tabs li {
    margin-left: 0px;
}

.fade.in {
    opacity: 1;
}

.tab-body {
    background-color: var(--white-color);
    border-radius: 5px;
    padding: 40px;
    border: 1px solid #d4f0ff;
}

.techonology-used .nav-link {
    color: #495057;
    background-color: #fff;
    /* border-color: var(--black-color); */
}

.techonology-used .nav-link.active {
    color: #495057;
    background-color: var(--second-color);
    /* border-color: var(--second-color); */
}

/* Mega Menu */

/* Mega Menu */

.megamenu-heading {
    margin: 0 0 1.1em;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.companydetailmenu h3 {
    font-size: 22px;
    line-height: 32px;
}

.companydetailmenu h4 {
    font-size: 20px;
    line-height: 30px;
}

.menu-item-img {
    width: 20%;
    display: inline-block;
    /* border: 2px solid var(--first-color); */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 5px;
}

.megamenu ul li {
    width: 100%;
}

.services-icons {
    padding: 8px 10px;
    width: 46px;
}

.menu-item-title {
    width: 75%;
    display: inline-block;
    /* margin-bottom: 6px; */
    color: var(--black-color);
    font-weight: 600;
    line-height: 30px;
}

.menu-item-description {
    color: var(--first-color);
    font-weight: 400;
}

.megamenu {
    padding: 20px;
}

.megamenu ul {
    /* display: grid; ;*/
}

/*.megamenu ul li a:hover {
    background: var(--second-color);
    padding: 20px 10px;
    color: var(--black-color); 
    
}*/

.megamenu ul li a .menu-item-title:hover {
    color: var(--second-color);
}

.group-dark {
    /* background-color: #f3f6f9; */
    padding: 100px 20px;
}

.dark-group {
    background-color: #f3f6f9;
    padding: 40px 20px;
}

.megamenu .main-menu li {
    display: inline-block;
    width: 100%;
}

.megamenu .main-submenu {
    /* margin-top: 10px; */
    margin-left: 60px;
    display: inline-block;
    width: 100%;
}

.megamenu .main-submenu li a:hover {
    /* margin-left: 18px; */
    background: transparent;
    font-weight: 900;
    padding: 0px;
}

/* .megamenu .main-submenu li a:hover::before {
    position: absolute;
    content: '\f324';
    height: 2px;
    background: var(--second-color);
    width: 15px;
    display: inline;
    margin-left: -23px;
    margin-top: 0px;
    font-family: "Font Awesome 6 Pro";
} */

.main-submenu li a {
    color: var(--first-color);
}

.main-submenu li {
    line-height: 20px;
    width: 100%;
}

.img-2 {
    width: 33%;
    display: inline-block;
    float: left;
}

.img-1 {
    width: 33%;
    display: inline-block;
}

.img-3 {
    width: 33%;
    display: inline-block;
}

.lst-new {
    margin: 0 0 0 60px;
}

.banner-para {
    color: var(--white-color);
    text-align: left;
    line-height: 1.5;
    /* font-size: 19px;
    font-weight: 500; */
    display: inline-block;
    padding: 0px 0px 0 0;
    text-align: left;
}

.banner-heading {
    font-family: var(--font-family);
    color: #ffffff;
    font-weight: 700;
}


/* Fluper Pages */

.ios-sprit {
    background: url(../images/service/11.webp) no-repeat;
    display: block;
    margin: 0 auto;
}

.ios-sprit-1 {
    background-position: -8px -8px;
    background-size: 740%;
    width: 60px;
    height: 60px;
    float: left;
}

.ios-sprit-2 {
    background-position: -90px -9px;
    background-size: 740%;
    width: 60px;
    height: 60px;
    float: left;
}

.ios-sprit-3 {
    background-position: -172px -9px;
    background-size: 740%;
    width: 60px;
    height: 60px;
    float: left;
}

.ios-sprit-4 {
    background-position: -253px -9px;
    background-size: 740%;
    width: 60px;
    height: 60px;
    float: left;
}

.para-title {
    font-size: 20px !important;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px !important;
}

hr.space {
    border: none !important;
    clear: both;
    height: 20px;
    margin: 0;
}

.ios-sprit-5 {
    background-position: -441px -12px;
    background-size: 740%;
    width: 80px;
    height: 80px;
}

.ios-sprit-6 {
    background-position: 2px -117px;
    background-size: 740%;
    width: 80px;
    height: 80px;
}

.ios-sprit-7 {
    background-position: -73px -84px;
    background-size: 590%;
    width: 80px;
    height: 80px;
}

.ios-sprit-8 {
    background-position: -188px -96px;
    background-size: 650%;
    width: 80px;
    height: 80px;
}

.other-links-wrapper {
    background: linear-gradient(135deg, #56e39f 5%, #12c46e 50%, #56e39f 100%);
    padding: 35px 0;
    color: var(--white-color);
    border-radius: 8px;
    margin: -40px 7px -28px;
}

.other-links-wrapper {
    background: linear-gradient(135deg, #56e39f 5%, #12c46e 50%, #56e39f 100%);
    padding: 35px 0;
    color: var(--white-color);
    border-radius: 8px;
    margin: -40px 7px -28px;
}

ul.android-other-links li {
    border-bottom: 1px dotted #fff;
    padding: 10px 0;
}

.block-height {
    height: 200px;
}

.blog-size {
    height: 180px;
}

.size-blog2 {
    height: 350px;
}


/* */

.img-container {
    position: relative;
    width: 50%;
    padding-right: 0px;
    padding-left: 0px;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.img-container:hover .image {
    opacity: 0.3;
}

.img-container:hover .middle {
    opacity: 1;
}

.apppg {
    list-style: none;
}


/* Side Menu */

.side-menu.--center {
    top: 50%;
    transform: translateY(-50%);
}

.side-menu {
    position: fixed;
    z-index: 999;
}

.side-menu,
.side-menu * {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    background: 0 0;
    line-height: 1;
    border-radius: 10px 0 0 10px;
}

.side-menu.-right.-medium .sm-item {
    right: calc(-100% + 40px);
}


/* .side-menu.-shadow .sm-item {

    box-shadow: 0 0 8px rgb(0 0 0 / 50%);

} */

.side-menu.-space .sm-item {
    margin: 2px 0;
}

.side-menu .sm-item {
    position: relative;
    transition: .4s all linear;
}

.side-menu .sm-item a {
    display: flex;
}

.side-menu [class$=black] {
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
}

.side-menu [class^=white] {
    color: var(--white-color);
}

.side-menu.-medium .sm-icon {
    width: 40px;
}

.side-menu.-medium .sm-icon,
.side-menu.-medium .sm-label {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
}

.side-menu .sm-icon {
    text-align: center;
}

.side-menu.-right .sm-label {
    padding-right: 10px;
}

.side-menu.-right .sm-item:hover,
.side-menu.-right.-list-show .sm-list:hover {
    right: 0;
}

.side-menu.-space .sm-item {
    margin: 2px 0;
}


/* Start Loader */

.loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: var(--white-color);
}

.loader:before,
.loader:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin linear infinite;
}

.loader:after {
    color: #FF3D00;
    transform: rotateY(70deg);
    animation-delay: .4s;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}

@keyframes rotateccw {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes spin {

    0%,
    100% {
        box-shadow: .2em 0px 0 0px currentcolor;
    }

    12% {
        box-shadow: .2em .2em 0 0 currentcolor;
    }

    25% {
        box-shadow: 0 .2em 0 0px currentcolor;
    }

    37% {
        box-shadow: -.2em .2em 0 0 currentcolor;
    }

    50% {
        box-shadow: -.2em 0 0 0 currentcolor;
    }

    62% {
        box-shadow: -.2em -.2em 0 0 currentcolor;
    }

    75% {
        box-shadow: 0px -.2em 0 0 currentcolor;
    }

    87% {
        box-shadow: .2em -.2em 0 0 currentcolor;
    }
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loader-container>div {
    width: 3vw;
    height: 3vw;
    border-radius: 100%;
    margin: 2vw;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    animation: bounce 1.5s 0.5s linear infinite;
}

.yellow {
    background-color: var(--first-color);
}

.red {
    background-color: var(--first-color);
    animation-delay: 0.1s;
}

.blue {
    background-color: var(--first-color);
    animation-delay: 0.2s;
}

.violet {
    background-color: var(--first-color);
    animation-delay: 0.3s;
}

@keyframes bounce {

    0%,
    50%,
    100% {
        transform: scale(1);
        filter: blur(0px);
    }

    25% {
        transform: scale(0.6);
        filter: blur(3px);
    }

    75% {
        filter: blur(3px);
        transform: scale(1.4);
    }
}


/* End Loader */

.banner-heading {
    color: var(--white-color);
}

.form-card {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 25px;
}

input#name::placeholder,
input#email::placeholder,
input#mobile::placeholder,
textarea#message::placeholder {
    color: var(--white-color);
}

.app-service-block {
    height: calc(100%);
    border-radius: 0px;
}

.first-featured:before {
    top: -10px;
    right: 0;
    bottom: 0;
    left: -10px;
    position: absolute;
    z-index: -1;
    content: '';
    width: calc(50% + 10px);
    height: calc(50% + 10px);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
}

.last-featured:before {
    right: -10px;
    bottom: -10px;
    position: absolute;
    z-index: -1;
    content: '';
    width: calc(50% + 10px);
    height: calc(50% + 10px);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
}

/* Our Process */

.timeline {
    width: 100%;
    height: 100%;
    padding: 2em 1.5em;
    background: linear-gradient(#ffffff 50%, var(--first-color) 50%);
    background-size: 100% 200%;
    background-position: 0 2.5%;
    border-radius: 5px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: 0.5s;
}

.timeline:hover {
    background-position: 0 100%;
}

.timeline .timeline-year {
    background-color: var(--first-color);
    font-size: 30px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    text-align: center;
    display: block;
    margin: 0px 0px 15px;
    padding: 18px 0px;
    color: var(--white-color);
}

.timeline .title {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    width: auto;
    line-height: 30px;
}

.timeline .description {
    padding-top: 15px;
}

.timeline:hover .timeline-year {
    background-color: var(--white-color);
    color: var(--first-color);
}

.timeline:hover .title,
.timeline:hover .description,
.timeline:hover ul li {
    color: var(--white-color);
}

.why-block {
    height: calc(100%);
    display: block;
}

.img-block img {
    width: 30%;
    display: block;
    margin: 0 auto;
}


/* Accordion */

/* .accordion {
    margin: 40px 0;
} */

.accordion .item {
    border: none;
    margin-bottom: 30px;
    background: none;
}

.t-p {
    color: var(--black-color);
    padding: 30px 30px 0px 30px;
    line-height: 25px;
}

.accordion .item .item-header h2 button.btn.btn-link {
    background: #fff;
    color: var(--black-color);
    border-radius: 0px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 600;
    line-height: 2.5;
    text-decoration: none;
    border: 1px solid #d4f0ff;
}

.accordion .item .item-header {
    border-bottom: none;
    background: transparent;
    padding: 0px;
    margin: 2px;
}

.accordion .item .item-header h2 button {
    color: var(--white-color);
    font-size: 20px;
    padding: 15px;
    display: block;
    width: 100%;
    text-align: left;
}

.accordion .item .item-header h2 i {
    float: right;
    font-size: 20px;
    color: var(--first-color);
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

button.btn.btn-link[aria-expanded=true] .fa-plus {
    display: none;
}

button.btn.btn-link[aria-expanded=false] .fa-minus {
    display: none;
}

.tech-logo {
    width: 50px !important;
    margin: 0 auto;
}

.technologies-stack h4 {
    font-size: 15px;
    text-align: center;
    line-height: 20px;
}

.nav-tabs {
    border-bottom: 1px solid transparent;
}

/* .con-h {
    height: 170px;
} */

.technologies-stack h3 {
    font-size: 24px;
}

.technologies-stack .card {
    background-color: #ECEFF0;
    border-radius: 0px;
}

.technologies-stack .card:hover,
.technologies-stack .card:hover h4,
.technologies-stack .card:hover h3 {
    background-color: var(--first-color);
    color: var(--white-color);
}

.technologies-stack .nav-link {
    color: var(--white-color);
    background-color: var(--black-color);
    margin-right: 8px;
    margin-bottom: 5px;
}

/* Awards */

.award-img {
    width: 60% !important;
    display: block;
    margin: 0 auto;
}

/* .award-item {
    width: 285px;
    height: 300px;
    margin-bottom: 10px;
}

.award-item div div div {
    height: 300px;
} */

.odd-item {
    margin-top: 50px;
}

.awards-slider .owl-nav {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    display: none;
}

.form-block input::placeholder {
    color: var(--black-color);
}

.awards-slider .owl-prev {
    font-size: 20px !important;
    color: var(--second-color) !important;
    margin-right: 30px;
}

.awards-slider .owl-next {
    font-size: 20px !important;
    color: var(--second-color) !important;
}

/*.awards-slider .owl-item {*/
/*    width: 300px !important;*/
/*    margin-right: 20px !important;*/
/*}*/

.awards-slider .owl-item .card {
    border-radius: 30px;
    border: 4px solid gray;
}

.awards-slider .owl-item .card {
    border-radius: 30px;
    filter: grayscale(5);
    transition: all ease-in-out 0.3s;
    opacity: 0.9;
}

.awards-slider .owl-item .card:hover {
    filter: grayscale(0);
    opacity: 10;
}

.awards-slider .owl-item .card img {
    transform: scaleY(1);
    transition: all 0.3s ease-in;


}

.awards-slider .owl-item .card:hover img {
    transform: scaleY(1.1);
    transition: all 0.3s ease-in;

}

ul.order-list li {
    list-style: none;
    font-size: 14px;
}

.form-block select option {
    background: transparent !important;
    color: var(--black-color) !important;
}

.services-item {
    width: 350px;
    height: 430px;
    margin-bottom: 10px;
}

.services-item div div div {
    height: 430px;
}

.services-img {
    width: 144px !important;
    margin: 0 auto;
}

/*.home-services {*/
/*    height: 447px;*/
/*}*/

.main-timeline .our-process-timeline {
    width: 49%;
    /* width: 100%; */
    padding: 20px 0 0;
    margin: 0 0 25px 5px;
    float: right;
    height: 340px;
}

.ds-block {
    height: 520px;
}

.header-quote-form input,
.header-quote-form textarea,
.header-quote-form select {
    padding: 0 0 0 20px;
    border: 2px solid #d9d9d9;
    border-radius: 20px;
}

.header-quote-form textarea {
    padding: 20px 0 0 20px;

}


/* 
.header-quote-form input::placeholder,
.header-quote-form textarea::placeholder,
.header-quote-form select::placeholder {
color: red;
} */

.form-block input::placeholder {
    color: var(--black-color) !important;
}

.header-quote-form input::placeholder,
.header-quote-form textarea::placeholder {
    color: var(--black2-color) !important;
}

.header-quote-form textarea {
    color: var(--black-color) !important;
    background-color: var(--white-color);


}

.header-quote-form select {
    color: var(--black-color) !important;
    background-color: var(--white-color);
    /* border-bottom: 2px solid var(--black-color) !important; */
}

.header-quote-form .modal-footer {
    border-top: 1px solid transparent;
    justify-content: center;
}

.header-quote-form .modal-footer button {
    padding: 10px 190px;
}

.mobile-contact-form input::placeholder,
.mobile-contact-form textarea::placeholder {
    color: var(--black-color);
}

.info-list-ul {
    list-style: none;
}
.contact-us{
    background-image: url('../images/banner/contactus-new-banner.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.contact-us-form input,
.contact-us-form textarea {
    padding: 10px 0px 10px 20px;
    /* border-bottom: 2px solid var(--black-color) !important; */
    border: 2px solid var(--light-grey);
    border-radius: 13px;
}

.contact-us-form input::placeholder,
.contact-us-form textarea {
    color: var(--black2-color) !important;
}

.contact-us-form textarea::placeholder {
    color: var(--black-color) !important;
}

.contact-us-form select {
    color: var(--black-color) !important;
    padding: 10px 0px 10px 20px;
    /* border-bottom: 2px solid var(--black-color) !important; */
    border: 2px solid var(--light-grey);
    border-radius: 13px;
}

.inquiry-from {
    background-color: var(--light-grey);
    padding: 20px 20px 6px 20px;
}

.inquiry-from img {
    /* border: 2px solid black; */
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(180, 195, 205, 0.25);
}

/* .solutions-title {
    text-align: center;
} */

.solutions-title p {
    font-size: 20px;
}

.solution-desc {
    color: var(--white-color);
}

/* .industry-title, .industry-title .banner-heading, .industry-title .banner-para {
    text-align: center;
} */

/* Start Game Page */
ul.service_box:nth-child(odd) li:nth-child(odd) {
    /* background: #f5f5f5; */
}

ul.service_box:nth-child(odd) li:nth-child(even) {
    border-left: none;
    border-right: none;
}

ul.service_box li {
    display: inline-block;
    width: 33.33%;
    border: 1px solid;
    text-align: center;
    float: left;
    background: #fff;
    padding: 15px 55px;
    transition: all .3s;
}

ul.service_box li h5 {
    font-size: 17px;
    width: 125px;
}

ul.service_box:nth-child(even) li:nth-child(2n) {
    border: none;
    /* background: #f5f5f5; */
}

ul.service_box:nth-child(even) li:nth-child(n) {
    border-top: none;
    border-bottom: none;
}

/*.game-img {*/
/*    transform: translate(-100px, 48px);*/
/*}*/

.game-choose-section .timeline-centered:before {
    height: 500px;
}

.flup-theme-quote {
    color: var(--first-color);
    font-size: 32px;
    position: relative;
}

.cnt-btn {
    color: var(--first-color);
    background: #fff;
}

.cnt-btn:hover {
    border: 1px solid #fff;
}

.filters .filter-menu1.recent {
    list-style: none;
    padding: 0;
    bottom: 0;
    position: inherit;
}

.filters .filter-menu1 li {
    display: inline-block;
    padding: 20px;
    color: #ffffff;
    cursor: pointer;
    /* background: #feeee3; */
    -webkit-border-radius: 100px;
    border-radius: 40px 40px 40px 20px;
    background: var(--second-color);
    /* float: right; */
    margin-right: 10px;
}

.filters .filter-menu1 li.is-checked {
    /* background: #ec2b19; */
    /* background: var(--second-color);
color: var(--white-color); */
}

/* .clients-banner {
    background: url(../images/banner/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #ffffff;
} */

/* .banner-ourclient h2 {
    color: #ffffff;
}

.banner-ourclient h6 {
    color: #ffffff;
}

.banner-client {
    background: url(../images/banner/client-01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #ffffff;
}

.banner-client h2 {
    color: #ffffff;
}

.banner-client h6 {
    color: #ffffff;
} */

/* .career-banner {
    background: url(../images/banner/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
} */

.career-banner img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* .career-banner h2 {
    color: #ffffff;
}

.career-banner h6 {
    color: #ffffff;
} */

/* .process-banner {
    background: url(../images/banner/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
} */

/* .banner-process h2 {
    color: #ffffff;
}

.banner-process h6 {
    color: #ffffff;
} */

/* .testimonial-banner {
    background: url(../images/banner/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
} */

/* .banner-testimonial h2 {
    color: #ffffff;
} */

/* .banner-aboutus {
    background: url(../images/banner/6.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
} */

.banner-aboutus h2 {
    color: #ffffff;
}

.banner-contactus {
    background: url(../images/banner/contactus-01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.banner-contactus h2 {
    color: #ffffff;
}

.banner-contactus h6 {
    color: #ffffff;
}

.our-pro-icon {
    height: 50px;
    width: 50px;
}


/* icon css */

.general-icon {
    max-width: 70%;
    height: auto;
}

.iot-icon {
    max-width: 80%;
    height: auto;
}

.android-icon {
    max-width: 70%;
    height: auto;
}

.cross-icon {
    max-width: 70%;
    height: auto;
}

.ios-icon {
    max-width: 70%;
    height: auto;
}

.scrollbar {
    height: 180px;
    padding: 20px;
    overflow-y: scroll;
}

.game-icon {
    height: 65px;
    width: 65px;
}


/* 
.game-icon:hover {
    background-color: var(--black-color);
}
*/

.service_box li:hover {
    /* transform: scale(1.5); */
    background-color: #04202B;
}

.service_box li:hover h5 {
    /* transform: scale(1.5); */
    /* background-color: var(--black-color); */
    color: var(--white-color);
}


/* .service_box li>h5:hover { */


/* transform: scale(1.5); */


/* background-color: var(--black-color); */


/* color: var(--white-color); */


/* } */


/* nav {
    text-align: center;
    align-items: center;
} */


/* .header img {
    float: left;
    width: 100px;
    height: 100px;
    background: #555;
}

.header h1 {
    position: relative;
    top: 18px;
    left: 10px;
} */

.logowide img {
    width: 20%;
}

.banner1 {
    background-size: cover;
    /* background-position: center center; */
    background-repeat: no-repeat;
}

.banner-1 h2 {
    color: #ffffff;
}

.banner-1 h6 {
    color: #ffffff;
}

.about-icon {
    height: 80px;
    width: 80px;
}

.vr-sec7 {
    width: 500px;
    height: 800px;
}

.vr-sec4 {
    width: 500px;
    height: 600px;
}

.ar-sec3 {
    width: 500px;
    height: 600px;
}

.ar-sec4 {
    width: 500px;
    height: 500px;
}

.stack-hov:hover {
    background-color: #009688;
}

.para-font {
    font-size: 20px !important;
}

.head-size {
    font-size: larger;
}

.indus-icon {
    height: 100px;
    width: 100px;
}

.cus1-img {
    height: 70px;
    width: 70px;
}


/* .cus2-img {
    height: 150%;
    width: 150%;
} */


/* for modal form */

.floating-label {
    position: relative;
    margin-bottom: 20px;
}

.floating-input,
.floating-select {
    font-size: 14px;
    padding: 4px 4px;
    display: block;
    width: 100%;
    height: 45px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #C5C5C5;
}

.floating-input:focus,
.floating-select:focus {
    outline: none;
    border-bottom: 1px solid #6B3489;
}

.floating-label label {
    color: #999;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 30px;
    top: 16px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    margin-bottom: 0;
}

.floating-input:focus~label,
.floating-input:not(:placeholder-shown)~label,
.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
    top: -4px;
    font-size: 12px;
    color: #828282;
}

.leadpopup .modal-body {
    padding: 0;
}

.modal.show .modal-dialog {
    transform: none;
}

.leadpopup .modal-dialog {
    max-width: 800px;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.from-cta-left-img {
    background: url("../images/cta-button/cta-background-img.png") right/ cover no-repeat;


    border-radius: 20px 0px 0px 20px;


}

.leadpopup .modal-content {
    border-radius: 0;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--white-color);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 20px;
    outline: 0;
}

.leadpopup .modal-body {
    padding: 0;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /* padding: 30px; */
    border-radius: 20px;
}

.innerbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

.innerleft {
    padding: 30px;
}

.innerright {
    background: #0CA9A7;
    padding: 50px 30px;
}

.leadbtnclose {
    position: absolute;
    right: 5px;
    top: 5px;
    /* background: #fff; */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

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


/* 
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
} */

.txt-rt {
    text-align: right;
}

.txt-lt {
    text-align: left;
}

/* Start Solutions Page */

.solutions-banner {
    background: var(--black2-color);
    background: url('../images/banner/solution-banner.webp')  center center/ cover no-repeat;
}

.solutions-link {
    position: relative;
}

.solutions-image {
    position: relative;
}

.solutions-text {
    position: absolute;
    top: 80%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.solutions-text h5 {
    line-height: 25px;
}

.solutions-links {
    position: absolute;
    top: 80%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    color: var(--white-color);
    font-size: 24px;
}

.solutions-link:hover .solutions-links {
    opacity: 1;
}

.solutions-link:hover .solutions-text {
    top: 65%;
}

.solutions p {
    text-align: left;
}

.booking-app {
    background-image: url(../images/banner/booking-app-banner.webp);
}

.loyalty-app {
    background-image: url(../images/banner/loyalty-app-banner.webp);
}

.restaurant-app {
    background-image: url(../images/banner/restaurant-app-banner.webp);
}

.fitness-app {
    background-image: url(../images/banner/fitness-app-banner.webp);
}

.mover-app {
    background-image: url(../images/banner/mover-app-banner.webp);
}

.shopping-express-app {
    background-image: url(../images/banner/shopping-app-banner.webp);
}

.fleet-app {
    background-image: url(../images/banner/fleet-app-banner.webp);
}

.real-estate-app {
    background-image: url(../images/banner/real-state-app-banner.webp);
}

.sports-app {
    background-image: url(../images/banner/sports-app-banner.webp);
}

/* End Solutions Page */

/* Industries Page */

.industries-banner {
    background: var(--black2-color);
    background:url('../images/banner/industries-banner.webp')  right/ cover no-repeat;
}

.industries-link {
    position: relative;
}

.industries-image {
    position: relative;
}

.industries-text {
    position: absolute;
    top: 80%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.industries-text h5 {
    line-height: 25px;
}

.industries-text h3 {
    line-height: 25px;
    font-size: 20px;
}

.industries-links {
    position: absolute;
    top: 80%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    color: var(--white-color);
    font-size: 24px;
}

.industries-link:hover .industries-links {
    opacity: 1;
}

.industries-link:hover .industries-text {
    top: 65%;
}

.advertising {
    background-image: url(../images/industries/adversting-app-banner.webp);
}

.healthcare {
    background-image: url(../images/industries/health-app-banner.webp);
}

.ecommerce-retail {
    background-image: url(../images/industries/e-commerce-app-banner.webp);
}

.education {
    background-image: url(../images/industries/education-app-banner.webp);
}

.software {
    background-image: url(../images/industries/software-app-banner.webp);
}

.automative {
    background-image: url(../images/industries/automotive-app-banner.webp);
}

.gaming-leisure {
    background-image: url(../images/industries/game-app-banner.webp);
}

.financial {
    background-image: url(../images/industries/education-app-banner.webp);
}

.media-entertainment {
    background-image: url(../images/industries/media-app-banner.webp);
}

.travel-hospitality {
    background-image: url(../images/industries/travel-app-banner.webp);
}

.real-estate {
    background-image: url(../images/industries/real-estate-app-banner.webp);
}

.sports {
    background-image: url(../images/industries/sports-app-banner.webp);
}

.industries h6 {
    text-align: center;
}

.industry-type-block {
    display: block;
    text-align: center;
    height: 100%;
    background: linear-gradient(#ffffff 50%, var(--second-color) 50%);
    background-size: 100% 200%;
    background-position: 0 -2.5%;
}

.industry-type-block:hover {
    background-position: 0 -100%;
}

.industry-type-block:hover h6 {
    color: var(--white-color);
}

.mobile-app-development {
    background-image: url(../images/industries/mobile-app-development.webp);
    background-size: cover;
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.industry-type-block:hover .mobile-app-development {
    background-image: url(../images/industries/mobile-app-development-hover.webp);
}

.mobile-product-strategy {
    background-image: url(../images/industries/mobile-product-strategy.webp);
    background-size: cover;
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.industry-type-block:hover .mobile-product-strategy {
    background-image: url(../images/industries/mobile-product-strategy-hover.webp);
}

.strategic-design-consultancy {
    background-image: url(../images/industries/strategic-design-consultancy.webp);
    background-size: cover;
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.industry-type-block:hover .strategic-design-consultancy {
    background-image: url(../images/industries/strategic-design-consultancy-hover.webp);
}

.mobile-app-qa-testing {
    background-image: url(../images/industries/mobile-app-qa-and-testing.webp);
    background-size: cover;
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.industry-type-block:hover .mobile-app-qa-testing {
    background-image: url(../images/industries/mobile-app-qa-and-testing-hover.webp);
}

.connected-devices {
    background-image: url(../images/industries/connected-devices.webp);
    background-size: cover;
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.industry-type-block:hover .connected-devices {
    background-image: url(../images/industries/connected-devices-hover.webp);
}

.web-portal-development {
    background-image: url(../images/industries/web-portal-and-development.webp);
    background-size: cover;
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.industry-type-block:hover .web-portal-development {
    background-image: url(../images/industries/web-portal-and-development-hover.webp);
}

/* Services Page */

.services-banner {
    background-image: url('../images/banner/service-new-banner.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.services-content-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style-type: circle;
    padding-left: 20px;
}

.services-content-list li {
    margin-bottom: 15px;
}

.content-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.content-list li {
    list-style: inside;
    margin-left: 15px;
    color: var(--white-color);
    width: auto;
}

.ar-choose-section h2 {
    padding: 10px 0px;
}

.game-choose-section h2 {
    padding: 10px 0px;
}

.leadpopup .form-block input,
.leadpopup .form-block textarea {
    border: 2px solid var(--second-color);

}

.services-img-div img {
    width: 75px;
}

/* New */

.shape.shape-a1 {
    display: none;
}

.award-item .card {
    height: 310px;
}

.blogs-section h3 {
    font-size: 22px;
    line-height: 32px;
}

.blogs-section h3 a {
    color: var(--black-color);
}

.blogs-section h3 a:hover {
    color: var(--first-color);
}

/* .blogs-section {
    display: none;
} */

h3.modal-title {
    font-size: 22px;
}

/* Start Home Page */

/* .gradient-border {
    border-radius: 3px;
}

.gradient-border::after {
    position: absolute;
    content: "";
    top: calc(-1 * 3px);
    left: calc(-1 * 3px);
    z-index: -1;
    width: calc(100% + 3px * 2);
    height: calc(100% + 3px * 2);
    background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * 3px);
    animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
    50% {
        background-position: 100% 50%;
   }
} */

/* .service-card-app:hover {
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
}

.service-card-app:hover p, .service-card-app:hover a, .service-card-app:hover h4 {
    color: var(--white-color);
}

.service-card-app:hover .services-img-div {
    border: 2px solid #fff;
} */

/* .service-card-app:hover:before {
    top: -5px;
    right: 0;
    bottom: 0;
    left: -5px;
    position: absolute;
    z-index: -1;
    content: '';
    width: calc(50% + 10px);
    height: calc(50% + 10px);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
}

.service-card-app:hover:after {
    right: -5px;
    bottom: -5px;
    position: absolute;
    z-index: -1;
    content: '';
    width: calc(50% + 10px);
    height: calc(50% + 10px);
    background: linear-gradient(to right, var(--first-color) 0%, var(--second-color) 100%);
} */

.service-card-app {
    height: calc(100%);
}

.service-card-app {
    width: 100%;
    height: 100%;
    padding: 2em 1.5em;
    background: linear-gradient(#ffffff 50%, var(--first-color) 50%);
    background-size: 100% 200%;
    background-position: 0 -2.5%;
    border-radius: 20px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: 0.5s;
}

.service-card-app:hover {
    background-position: 0 -100%;
}

.service-card-app:hover h3,
.service-card-app:hover h4,
.service-card-app:hover p,
.service-card-app:hover a {
    color: var(--white-color);
}

.service-card-app:hover img {
    filter: invert(1);
}

.service-card {
    height: calc(100%);
}

.service-card {
    width: 100%;
    height: 100%;
    padding: 2em 1.5em;
    background: linear-gradient(#ffffff 50%, var(--first-color) 50%);
    background-size: 100% 200%;
    background-position: 0 2.5%;
    border-radius: 5px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: 0.5s;
}

.service-card:hover {
    background-position: 0 100%;
}

.service-card:hover h4,
.service-card:hover p,
.service-card:hover a {
    color: var(--white-color);
}

/* .service-card:hover .services-img-div {
    border: 2px solid var(--second-color);
} */

/* Home */

/* Start Banners */

#hero-slider {
    /* background-image: url(../images/banner/main-banner-background.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed; */
    height: 100vh;
}

video {
    position: relative;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.nav-link {
    color: var(--first-color);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--first-color);
}

.nav-pills .nav-link:hover {
    color: #fff;
    background-color: var(--first-color);
}

.features-tab .nav-link {
    color: var(--white-color);
    background-color: var(--black-color);
    margin-right: 8px;
    margin-bottom: 5px;
}

.features-tab .nav-item.show .nav-link,
.features-tab .nav-link.active {
    color: #fff;
    background-color: var(--first-color);
    border-color: var(--first-color);
}

.features-tab .nav-link:hover {
    color: #fff;
    background-color: var(--first-color);
}

/* 

.mobile-app {
    background-image: url(../images/banner/main-banner-background.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}


.mobile-app-1 {
    background-image: url(../images/banner/banner-1.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-2 {
    background-image: url(../images/banner/banner-2.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-3 {
    background-image: url(../images/banner/banner-3.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-4 {
    background-image: url(../images/banner/banner-4.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-5 {
    background-image: url(../images/banner/banner-5.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-6 {
    background-image: url(../images/banner/banner-6.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-7 {
    background-image: url(../images/banner/banner-7.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-8 {
    background-image: url(../images/banner/banner-8.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-9 {
    background-image: url(../images/banner/banner-9.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-10 {
    background-image: url(../images/banner/banner-10.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-11 {
    background-image: url(../images/banner//banner-11.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
}

.mobile-app-12 {
    background-image: url(../images/banner/banner-12.webp);
    background-size: cover; 
    position: relative;
    background-attachment: fixed;
} */

/* .mobile-app-3 .hero-heading-sec2 h1, .mobile-app-5 .hero-heading-sec2 h1, 
 .mobile-app-12 .hero-heading-sec2 h1 {
    color: var(--black-color);
}

  .mobile-app-3 .hero-heading-sec2>p,
 .mobile-app-12 .hero-heading-sec2>p, .mobile-app-5 .hero-heading-sec2>p {
    color: var(--black-color);
}

  .mobile-app-6 .awrd-sec h5, .mobile-app-3 .awrd-sec h5, 
 .mobile-app-12 .awrd-sec h5.mobile-app-5 .awrd-sec h5 {
    color: var(--black-color); 
}
*/
/* ----------------- */

.mobile-app-1 .hero-heading-sec2 h1,
.mobile-app-8 .hero-heading-sec2 h1,
.mobile-app-2 .hero-heading-sec2 h1,
.mobile-app-4 .hero-heading-sec2 h1,
.mobile-app-3 .hero-heading-sec2 h1,
.mobile-app-5 .hero-heading-sec2 h1,
.mobile-app-12 .hero-heading-sec2 h1 .mobile-app-7 .hero-heading-sec2 h1,
.mobile-app-11 .hero-heading-sec2 h1,
.mobile-app-9 .hero-heading-sec2 h1,
.mobile-app-6 .hero-heading-sec2 h1,
.mobile-app-10 .hero-heading-sec2 h1 {
    color: var(--white-color);
}

.mobile-app-1 .hero-heading-sec2>p,
.mobile-app-8 .hero-heading-sec2>p,
.mobile-app-2 .hero-heading-sec2>p,
.mobile-app-4 .hero-heading-sec2>p,
.mobile-app-3 .hero-heading-sec2>p,
.mobile-app-12 .hero-heading-sec2>p,
.mobile-app-5 .hero-heading-sec2>p .mobile-app-7 .hero-heading-sec2>p,
.mobile-app-11 .hero-heading-sec2>p,
.mobile-app-9 .hero-heading-sec2>p,
.mobile-app-6 .hero-heading-sec2>p,
.mobile-app-10 .hero-heading-sec2>p {
    color: var(--white-color);
}

.mobile-app-1 .awrd-sec h5,
.mobile-app-8 .awrd-sec h5,
.mobile-app-4 .awrd-sec h5,
.mobile-app-1 .hero-heading-sec2 h1,
.mobile-app-8 .hero-heading-sec2 h1,
.mobile-app-2 .hero-heading-sec2 h1,
.mobile-app-4 .hero-heading-sec2 h1,
.mobile-app-6 .awrd-sec h5,
.mobile-app-3 .awrd-sec h5,
.mobile-app-12 .awrd-sec h5.mobile-app-5 .awrd-sec h5,
.mobile-app-7 .awrd-sec h5,
.mobile-app-11 .awrd-sec h5,
.mobile-app-9 .awrd-sec h5,
.mobile-app-6 .awrd-sec h5,
.mobile-app-2 .awrd-sec h5,
.mobile-app-10 .awrd-sec h5 {
    color: var(--white-color);
}

/* End Banners */

.awrd-sec h5 {
    color: var(--white-color);
    position: relative;
}

.testimonial-card {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: space-between; */
    /* gap: 10px; */
}

.testimonial-card p {
    text-align: left;
}

.hire-developers {
    /* background-image: url(../images/banner/hire-developers-bg.webp); */
    background: var(--black2-color);
    background-attachment: fixed;
    background-size: cover;
}

.scroller {
    height: 400px;
    overflow-y: scroll;
    background: var(--black2-color);
}

.scroller::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px var(--first-color); */
    border-radius: 10px;
    background-color: var(--black2-color);
}

.scroller::-webkit-scrollbar {
    width: 8px;
    background-color: var(--black2-color);
}

.scroller::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /* -webkit-box-shadow: inset 0 0 6px var(--first-color); */
    background-color: var(--black2-color);
}

.hire-developers img {
    width: 120px;
    height: 120px;
}

.stack-hov:hover p,
.stack-hov:hover h4,
.stack-hov:hover a {
    color: var(--white-color);
}

.button-arounder {
    background: var(--first-color);
    color: hsl(190deg, 10%, 95%);
    box-shadow: 0 0px 0px hsla(190deg, 15%, 5%, .2);
    transfrom: translateY(0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    transition:
        border-top-left-radius var(--dur) var(--delay) ease-out,
        border-top-right-radius var(--dur) calc(var(--delay) * 2) ease-out,
        border-bottom-right-radius var(--dur) calc(var(--delay) * 3) ease-out,
        border-bottom-left-radius var(--dur) calc(var(--delay) * 4) ease-out,
        box-shadow calc(var(--dur) * 4) ease-out,
        transform calc(var(--dur) * 4) ease-out,
        background calc(var(--dur) * 4) steps(4, jump-end);
}

.button-arounder:hover,
.button-arounder:focus {
    box-shadow: 0 4px 8px hsla(190deg, 15%, 5%, .2);
    transform: translateY(-4px);
    background: var(--first-color);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    color: var(--white-color);
}

/* i.fa-brands.fa-facebook {
    color: #316FF6;
    font-size: 20px;
}

i.fa-brands.fa-x-twitter {
    color: #000000;
    background-color: var(--white-color);
    font-size: 20px;
}

i.fa-brands.fa-linkedin-in {
    color: #0072b1;
    font-size: 20px;
}

i.fa-brands.fa-instagram {
    color: #8a3ab9;
    font-size: 20px;
} */

.niwax23form {
    background: #fff;
    padding: 20px 30px;
    margin: 30px 0;
    border-radius: 14px;
    border: 2px solid var(--light-grey);
}

/* .contact, .location {
    background-color: var(--light-grey);
} */

.portfolio-page div nav div:nth-child(1) {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.portfolio-page div nav div:nth-child(2) div {
    display: none;
}

.contact .nav-link.active {
    background-color: transparent;
    border: 2px solid #089674;
}

.contact .nav-link {
    color: var(--white-color);
}

.common-heading span {
    color: var(--first-color);
}

/* .hero-slider:hover img {
    animation: hoverFx 1s infinite;
} */

@keyframes hoverFx {
    0% {
        bottom: 0;
        left: 0;
    }

    20% {
        bottom: -0.01em;
        left: 0.1em;
    }

    40% {
        bottom: 0.001em;
        left: -0.005em;
    }

    60% {
        bottom: -0.005em;
        left: -0.1em;
    }

    80% {
        bottom: 0.001em;
        left: 0.005em;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

/* .swiper {
    width: 100%;
    height: 100%;
} */

/* .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* .service-section-app .common-heading h2, .service-section-app .common-heading p {
    color: var(--white-color);
} */

.why-choose-section .card {
    background: var(--light-grey);
    border-radius: 20px;
}

.why-choose-section h3 {
    font-size: 20px;
    line-height: 30px;
}

.why-choose-section h2 span {
    color: var(--first-color);
}

/* .key-highlights {
    background-image: url(../images/banner/banner.webp);
    background-size: cover;
    background-attachment: fixed;
} */

/* .key-highlights h2, .key-highlights h6, .key-highlights h3, .key-highlights p {
    color: var(--white-color);
} */


.achievements-count {
    /* background-color: var(--black2-color); */
    background-color: var(--light-grey);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 60px 0px;
    border-radius: 10px 60px 0px 60px;
}

.achievements-count h2,
.achievements-count p {
    /* color: var(--white-color); */
    color: var(--black-color);
}

.achievements-count div {
    /* border-right: 2px solid var(--white-color); */
    border-right: 2px solid var(--black-color);
}

.achievements-count div:last-child {
    border-right: 0px solid var(--white-color);
}

.numbers-about,
.numbers-count {
    text-align: center;
}

.testimonials-section-app {
    background-color: var(--black2-color);
}

.review-div img {
    background: white;
    padding: 15px;
    border-radius: 20px;
}

.clients span {
    color: var(--first-color);
}

/* .client {
    background-color: var(--light-grey);
} */

.custom-border div {
    border-top: 1px solid var(--light-grey);
    border-right: 1px solid var(--light-grey);
    border-bottom: 1px solid var(--light-grey);
    border-left: 1px solid var(--light-grey);
    transition: 500ms ease;
    background: var(--white-color);
    padding: 20px 0px;
    border-radius: 20px;
}

.certificates,
.badges-section {
    background-color: var(--black2-color);
}

.certificates .certificate div {
    display: block;
    border-radius: 20px;
    background: var(--white-color);
    padding: 20px 0px;
    width: 300px;
    margin: 0 auto;
}

.certificates h3 {
    font-size: 16px;
    line-height: 26px;
}


/* End Home Page */

/* Start About Us Page */

.about-us-banner {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../images/about-us/about-us-hero-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-us-banner h1 span {
    color: var(--first-color);
    border-bottom: 4px solid var(--first-color);
}

.about-us-banner p {
    margin-top: 20px;
}

.why-choose-us h3 {
    font-size: 22px;
    line-height: 32px;
}

.why-choose-us .choose-us:hover h3 {
    color: var(--white-color);
}

.main-timeline {
    position: relative;
}

.main-timeline:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: #c6c6c6;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.main-timeline .process-timeline {
    margin-bottom: 40px;
    position: relative;
}

.main-timeline .process-timeline:after {
    content: "";
    display: block;
    clear: both;
}

.main-timeline .icon {
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.main-timeline .icon:before,
.main-timeline .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s;
}

.main-timeline .icon:before {
    background: #fff;
    border: 2px solid #232323;
    left: -3px;
}

.main-timeline .icon:after {
    border: 2px solid #c6c6c6;
    left: 3px;
}

.main-timeline .process-timeline:hover .icon:before {
    left: 3px;
}

.main-timeline .process-timeline:hover .icon:after {
    left: -3px;
}

.main-timeline .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative;
}

.main-timeline .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: #c6c6c6;
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
}

.main-timeline .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1;
}

.main-timeline .date-outer:before,
.main-timeline .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s;
}

.main-timeline .date-outer:before {
    background: #fff;
    border: 2px solid #232323;
    left: -6px;
}

.main-timeline .date-outer:after {
    border: 2px solid #c6c6c6;
    left: 6px;
}

.main-timeline .process-timeline:hover .date-outer:before {
    left: 6px;
}

.main-timeline .process-timeline:hover .date-outer:after {
    left: -6px;
}

.main-timeline .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 43%;
    left: 0;
}

.main-timeline .month {
    font-size: 18px;
    font-weight: 700;
}

.main-timeline .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323;
    line-height: 36px;
}

.main-timeline .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
    float: right;
}

.main-timeline .title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 15px 0;
    color: var(--first-color);
}

.main-timeline .description {
    margin-bottom: 0;
}

.main-timeline .process-timeline:nth-child(2n) .date-content {
    float: right;
}

.main-timeline .process-timeline:nth-child(2n) .date-content:before {
    left: 10px;
}

.main-timeline .process-timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right;
}

/* End About Us Page */

/* Start Career Page */

.career-banner {
    background-image: url(../images/banner/about-us-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.career-icons {
    width: 48px;
}

.recruitment-process h3,
.perk h3 {
    font-size: 22px;
    line-height: 32px;
}

.career-form {
    background: url(../images/banner/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.recruitment-process .card {
    padding: 2em 1.5em;
    border-radius: 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid transparent;
}

.recruitment-process .card:before {
    position: absolute;
    width: 0;
    height: 2px;
    content: '';
    background: var(--first-color);
    top: -2px;
    left: -2px;
    transition: 100ms width ease 300ms;
    -web-kit-transition: 100ms width ease 300ms;
}

.recruitment-process .card:after {
    position: absolute;
    width: 2px;
    height: 0;
    content: '';
    background: var(--first-color);
    top: -2px;
    right: -2px;
    transition: 100ms height ease 200ms;
    -web-kit-transition: 100ms height ease 200ms;
}

.recruitment-process .card-body:after {
    position: absolute;
    width: 0;
    height: 2px;
    content: '';
    background: var(--first-color);
    bottom: -2px;
    right: -2px;
    transition: 100ms width ease 100ms;
    -web-kit-transition: 100ms width ease 100ms;
}

.recruitment-process .card-body:before {
    position: absolute;
    width: 2px;
    height: 0;
    content: '';
    background: var(--first-color);
    bottom: -2px;
    left: -2px;
    transition: 100ms height ease 0ms;
    -web-kit-transition: 100ms height ease 0ms;
}

.recruitment-process .card:hover {
    border-color: transparent;
    /* background: #0f2834; */
    transition: all 0.2s ease-out;
    top: -4px;
}

.recruitment-process .card:hover:before {
    width: 100%;
    transition: 100ms width ease 0ms;
    -web-kit-transition: 100ms width ease 0ms;
}

.recruitment-process .card:hover:after {
    height: 100%;
    transition: 100ms height ease 100ms;
    -web-kit-transition: 100ms height ease 100ms;
}

.recruitment-process .card:hover .card-body:after {
    width: 100%;
    transition: 100ms width ease 200ms;
    -web-kit-transition: 100ms width ease 200ms;
}

.recruitment-process .card:hover .card-body:before {
    height: 100%;
    transition: 100ms height ease 300ms;
    -web-kit-transition: 100ms height ease 300ms;
}


.perk .card {
    padding: 2em 1.5em;
    border-radius: 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid transparent;
}

.perk .card:before {
    position: absolute;
    width: 0;
    height: 2px;
    content: '';
    background: var(--first-color);
    top: -2px;
    left: -2px;
    transition: 100ms width ease 300ms;
    -web-kit-transition: 100ms width ease 300ms;
}

.perk .card:after {
    position: absolute;
    width: 2px;
    height: 0;
    content: '';
    background: var(--first-color);
    top: -2px;
    right: -2px;
    transition: 100ms height ease 200ms;
    -web-kit-transition: 100ms height ease 200ms;
}

.perk .card-body:after {
    position: absolute;
    width: 0;
    height: 2px;
    content: '';
    background: var(--first-color);
    bottom: -2px;
    right: -2px;
    transition: 100ms width ease 100ms;
    -web-kit-transition: 100ms width ease 100ms;
}

.perk .card-body:before {
    position: absolute;
    width: 2px;
    height: 0;
    content: '';
    background: var(--first-color);
    bottom: -2px;
    left: -2px;
    transition: 100ms height ease 0ms;
    -web-kit-transition: 100ms height ease 0ms;
}

.perk .card:hover {
    border-color: transparent;
    /* background: #0f2834; */
    transition: all 0.2s ease-out;
    top: -4px;
}

.perk .card:hover:before {
    width: 100%;
    transition: 100ms width ease 0ms;
    -web-kit-transition: 100ms width ease 0ms;
}

.perk .card:hover:after {
    height: 100%;
    transition: 100ms height ease 100ms;
    -web-kit-transition: 100ms height ease 100ms;
}

.perk .card:hover .card-body:after {
    width: 100%;
    transition: 100ms width ease 200ms;
    -web-kit-transition: 100ms width ease 200ms;
}

.perk .card:hover .card-body:before {
    height: 100%;
    transition: 100ms height ease 300ms;
    -web-kit-transition: 100ms height ease 300ms;
}

/* End Career Page */

/* Start Our Process Page */

.our-process-banner {
    background-image: url(../images/banner/about-us-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Our Process Page */

/* Start Testimonials Page */

.testimonials-banner {
    background-image: url(../images/banner/about-us-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Testimonials Page */

/* Start Client Page */

.client-banner {
    background-image: url(../images/banner/about-us-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Client Page */

/* Start Tech Stack Page */

.tech-stack-banner {
    background-image: url(../images/banner/about-us-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Tech Stack Page */

/* Start Services Page */

.why-choose {
    background: var(--black2-color);
}

.why-choose .timeline-year {
    /* border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 2px solid var(--second-color);
    text-align: center;*/
    padding: 0px;
    background-color: transparent;
}

.why-choose:hover .timeline-year {
    background-color: transparent;
}

.timeline:hover .timeline-year img {
    filter: invert(1);
}

.accordion {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.accordion-item {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-left: 1px solid rgba(0, 0, 0, 0);
    border-right: 1px solid rgba(0, 0, 0, 0);
}

.accordion-item:first-of-type {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.accordion-button:not(.collapsed) {
    color: var(--black-color);
    background-color: var(--white-color);
    /* border-bottom: 1px solid var(--gray-color); */
    box-shadow: none;
}

.accordion-button {
    color: var(--black-color);
    background-color: var(--white-color);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    /* border-bottom: 1px solid var(--gray-color); */
}

.accordion-body ul li {
    list-style: circle;
}

/* Mobile App Development */

.mobile-app-banner {
    background: url(../images/banner/mobile-app-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Start Android App Development */

.android-app-banner {
    background: url(../images/banner/android-app-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Android App Development */

/* Start iOS App Development */

.ios-app-banner {
    background: url(../images/banner/ios-app-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End iOS App Development */

/* Start Cross Platform App Development */

.cross-platform-app-banner {
    background: url(../images/banner/cross-platform-app-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Cross Platform App Development */

/* Start Game App Development */

.game-app-banner {
    background: url(../images/banner/game-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.game-intro-section {
    /* background: url(../images/services/game-app-development/games-banner.webp) no-repeat; */
    background-size: cover;
    background-position: center;
    /* height: 1080px; */
}

.game-choose-section {
    background: url(../images/services/game-app-development/game-choose-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.game-section {
    background: url(../images/services/game-app-development/game-section-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.game-img-div {
    transform: translate(-120px, 00px);
}

.game-process-section {
    background: url(../images/services/game-app-development/game-process-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
    position: relative;
}

.game-service-item .card-body {
    height: 430px;
}

.game-service-slider .owl-nav {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.game-service-slider .owl-prev {
    font-size: 20px !important;
    color: var(--second-color) !important;
    margin-right: 30px;
}

.game-service-slider .owl-next {
    font-size: 20px !important;
    color: var(--second-color) !important;
    margin-right: 30px;
}

.vertical-timeline {
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 67px;
    height: 100%;
    width: 4px;
    /* background: #e9ecef; */
    border-radius: .25rem
}

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem
}

.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s
}

.vertical-timeline-element-icon {
    position: absolute;
    top: 5px;
    left: 60px
}

.numbers {
    display: block;
    position: relative;
    background: #0ca7a0;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    right: 6px;
    bottom: 5px;
}

.number {
    text-align: center;
    font-size: 16px;
    padding: 2px;
}

.vertical-timeline-element-content {
    position: relative;
    margin-left: 95px;
    font-size: .8rem
}

.vertical-timeline-element-content .timeline-title {
    font-size: .8rem;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    padding: 2px 0 0;
    font-weight: bold
}

.vertical-timeline-element-content .vertical-timeline-element-date {
    display: block;
    position: absolute;
    left: -90px;
    top: 0;
    padding-right: 10px;
    text-align: right;
    color: #adb5bd;
    font-size: .7619rem;
    white-space: nowrap
}

.vertical-timeline-element-content:after {
    content: "";
    display: table;
    clear: both
}

.timeline-centered {
    position: relative;
}

.timeline-centered.timeline-sm .timeline-entry {
    margin-bottom: 20px !important;
}

.timeline-centered.timeline-sm .timeline-entry .timeline-entry-inner .timeline-label {
    padding: 1em;
}

.timeline-centered:before,
.timeline-centered:after {
    content: " ";
    display: table;
}

.timeline-centered:after {
    clear: both;
}

.timeline-centered:before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    /* background: #099c85; */
    left: 10.5%;
    top: 20px;
    bottom: 20px;
    margin-left: -4px;
    height: 833px;
}

.timeline-centered .timeline-entry {
    position: relative;
    width: 80%;
    /* float: right; */
    clear: both;
    display: block;
    margin: 0 auto 30px;
}

.timeline-centered .timeline-entry:before,
.timeline-centered .timeline-entry:after {
    content: " ";
    display: table;
}

.timeline-centered .timeline-entry:after {
    clear: both;
}

.timeline-centered .timeline-entry.begin {
    margin-bottom: 0;
}

.timeline-centered .timeline-entry .timeline-entry-inner {
    position: relative;
    margin-left: -31px;
}

.timeline-centered .timeline-entry .timeline-entry-inner:before,
.timeline-centered .timeline-entry .timeline-entry-inner:after {
    content: " ";
    display: table;
}

.timeline-centered .timeline-entry .timeline-entry-inner:after {
    clear: both;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
    position: absolute;
    left: -115px;
    text-align: right;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span {
    display: block;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:first-child {
    font-size: 18px;
    font-weight: bold;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:last-child {
    font-size: 12px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
    background: #fff;
    color: #999999;
    display: block;
    width: 70px;
    height: 70px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
    float: left;
    transform: rotate(45deg);
    padding: 5px;
    margin-top: 15px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
    position: relative;
    padding: 0.5em 0.7em;
    margin-left: 85px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.timeline-label h3 {
    font-size: 22px;
    line-height: 32px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
    color: var(--white-color);
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p+p {
    margin-top: 15px;
}

.why-choose-img {
    width: 90px;
    /* height: 100px; */
    transform: rotate(-45deg);
}

.game-development-col {
    position: relative;
}

.center-text {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    width: 50%;
    text-align: center;
}

.game-choose-section .timeline-icon {
    width: 70px;
    height: 70px;
    background-color: var(--white-color);
    border-radius: 50%;
    padding: 10px !important;
}

.game-choose-section .timeline-icon img {
    width: 45px;
    height: 45px;
}

/* End Game App Development */

/* Start Cross App Development */

.flutter-app-dev-img {
    background-image: url(../images/services/cross-app-development/flutter-app-development.webp);
    background-size: cover;
    width: 40px;
    height: 40px;
}

.service-card-app:hover .flutter-app-dev-img {
    background-image: url(../images/services/cross-app-development/flutter-app-development-hover.webp);
}

.react-native-app-img {
    background-image: url(../images/services/cross-app-development/react-native-app-development.webp);
    background-size: cover;
    width: 40px;
    height: 40px;
}

.service-card-app:hover .react-native-app-img {
    background-image: url(../images/services/cross-app-development/react-native-app-development-hover.webp);
}

.xamarin-app-dev-img {
    background-image: url(../images/services/cross-app-development/xamarin-app-development.webp);
    background-size: cover;
    width: 40px;
    height: 40px;
}

.service-card-app:hover .xamarin-app-dev-img {
    background-image: url(../images/services/cross-app-development/xamarin-app-development-hover.webp);
}

.ionic-app-dev-img {
    background-image: url(../images/services/cross-app-development/ionic-app-development.webp);
    background-size: cover;
    width: 40px;
    height: 40px;
}

.service-card-app:hover .ionic-app-dev-img {
    background-image: url(../images/services/cross-app-development/ionic-app-development-hover.webp);
}

/* End Cross App Development */

/* Start Web Portal App Development */

.web-portal-banner {
    background: url(../images/banner/web-portal-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Web Portal App Development */

/* Start E-Commerce App Development */

.e-commerce-app-banner {
    background: url(../images/banner/e-commerce-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.custom-pills .nav-link {
    color: var(--white-color);
    background-color: var(--black-color);
    margin-right: 8px;
}


/* End E-Commerce App Development */

/* Start Web App Development */

.web-app-banner {
    background: url(../images/banner/web-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Web App Development */

/* Start XR App Development */

.xr-app-banner {
    background: url(../images/banner/xr-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End XR App Development */

/* Start MR App Development */

.mr-app-banner {
    background: url(../images/banner/mr-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End MR App Development */

/* Start AR App Development */

.ar-app-banner {
    background: url(../images/banner/ar-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.ar-intro-section {
    background: url(../images/services/ar-app-development/ar-app-development-services.webp) no-repeat;
    background-size: cover;
    background-position: center;
    height: 1080px;
}

.ar-choose-section {
    background: url(../images/services/ar-app-development/why-choose-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.ar-game-section {
    background: url(../images/services/ar-app-development/game-section-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.ar-process-section {
    background: url(../images/services/ar-app-development/ar-process-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.ar-pills .nav-link {
    color: var(--white-color);
    background-color: var(--black-color);
    margin-right: 8px;
}

.ar-pills .nav-link:focus,
.ar-pills .nav-link:hover {
    color: var(--white-color);
    background-color: var(--first-color);
}

/* End AR App Development */

/* Start VR App Development */

.vr-app-banner {
    background: url(../images/banner/vr-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.vr-intro-section {
    background: url(../images/services/vr-app-development/vr-app-development-services.webp) no-repeat;
    background-size: cover;
    background-position: center;
    height: 1080px;
}

.vr-choose-section {
    background: url(../images/services/vr-app-development/why-chooser-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.vr-game-section {
    background: url(../images/services/vr-app-development/game-section-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.vr-process-section {
    background: url(../images/services/vr-app-development/vr-process-banner.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* End VR App Development */

/* Start XR App Development */

.xr-ar-img {
    position: absolute;
    top: 20px;
    left: 0;
    height: 85%;
}

.xr-vr-img {
    position: absolute;
    top: 20px;
    right: 0;
    height: 85%;
}

.xr-mr-img {
    position: absolute;
    top: 20px;
    left: 0;
    height: 85%;
}

ul.list {
    list-style: lower-roman;
    padding: 15px 35px;
}

/* End XR App Development */

/* Start Connected Devices */

.connected-devices-banner {
    background: url(../images/banner/connect-devices-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Connected Devices */

/* Start IoT App Development */

.iot-app-banner {
    background: url(../images/banner/iot-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End IoT App Development */

/* Start Wearable App Development */

.wearable-app-banner {
    background: url(../images/banner/wearable-app-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Wearable App Development */

/* Start Industrial Automation */

.industrial-automation {
    background: url(../images/banner/industrial-automation-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.automation-services h3 {
    font-size: 22px;
    line-height: 32px;
}

/* End Industrial Automation */

/* Start Digital Marketing */

.digital-marketing-banner {
    background: url(../images/banner/digital-marketing.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Digital Marketing */

/* Start Animation Services */

.animation-banner {
    background: url(../images/banner/animation-services.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Animation Services */

/* Start 2D Art */

.twod-art-banner {
    background-image: url(../images/banner/2d-art-banner.webp);
    background-size: cover;
    background-position: center;
}

.twod-art-page h1 span {
    color: var(--first-color);
}

.twod-art-services h2 span {
    color: var(--first-color);
}

.twod-art-services .card::before,
.twod-art-services .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--first-color);
    height: 4px;
}

.twod-art-services .card::before {
    width: 0;
    opacity: 0;
    transition: opacity 0 ease, width 0 ease;
    transition-delay: 0.5s;
}

.twod-art-services .card::after {
    width: 100%;
    background: #fff;
    transition: width 0.5s ease;
}

.twod-art-services .card {
    height: 100%;
    border-radius: 0px;
    /* border: 1px solid rgba(0, 0, 0, 1); */
    transition: transform .2s;
    /* background: -moz-linear-gradient(left, #0069A2 0%, #003358 100%);
	background: -webkit-linear-gradient(left, #0069A2 0%, #003358 100%);
	background: linear-gradient(to right, #0069A2 0%, #003358 100%); */
}

.twod-art-services .card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}

.twod-art-services .card:hover::before {
    width: 100%;
    opacity: 1;
    transition: opacity 0.5s ease, width 0.5s ease;
    transition-delay: 0;
}

.twod-art-services .card:hover::after {
    width: 0;
    opacity: 0;
    transition: width 0 ease;
}

.twod-character-design {
    background: url(../images/services/2d-art/2d-character-design-bg.webp) no-repeat fixed;
    background-size: cover;
}

.twod-character-design .card {
    background: var(--white-color);
}

.twod-character-design p {
    padding-top: 10px;
    line-height: 25px;
}

.twod-character-design .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.twod-character-design .nav-tabs .nav-item .nav-link {
    color: #000;
}

.twod-character-design .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.twod-character-design .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.twod-character-design .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.twod-character-design .tab-pane {
    position: relative;
}

.twod-art-bottom-center {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 80%;
}

.twod-character-design .consultant-card {
    background: url(../images/services/2d-art/2d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.twod-environment-design {
    background: url(../images/services/2d-art/2d-environment-design-bg.webp) no-repeat fixed;
    background-size: cover;
}

.twod-environment-design .card {
    background: var(--white-color);
}

.twod-environment-design p {
    padding-top: 10px;
    line-height: 25px;
}

.twod-environment-design .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.twod-environment-design .nav-tabs .nav-item .nav-link {
    color: #000;
}

.twod-environment-design .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.twod-environment-design .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.twod-environment-design .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.twod-environment-design .tab-pane {
    position: relative;
}

.twod-environment-design .consultant-card {
    background: url(../images/services/2d-art/2d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.twod-game-ui-ux-design {
    background: url(../images/services/2d-art/2d-game-ui-bg.webp) no-repeat fixed;
    background-size: cover;
}

.twod-game-ui-ux-design .card {
    background: var(--white-color);
}

.twod-game-ui-ux-design p {
    padding-top: 10px;
    line-height: 25px;
}

.twod-game-ui-ux-design .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.twod-game-ui-ux-design .nav-tabs .nav-item .nav-link {
    color: #000;
}

.twod-game-ui-ux-design .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.twod-game-ui-ux-design .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.twod-game-ui-ux-design .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.twod-game-ui-ux-design .tab-pane {
    position: relative;
}

.twod-game-ui-ux-design .consultant-card {
    background: url(../images/services/2d-art/2d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.twod-concept-art {
    background: url(../images/services/2d-art/2d-concept-art-bg.webp) no-repeat fixed;
    background-size: cover;
}

.twod-concept-art .card {
    background: var(--white-color);
}

.twod-concept-art p {
    padding-top: 10px;
    line-height: 25px;
}

.twod-concept-art .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.twod-concept-art .nav-tabs .nav-item .nav-link {
    color: #000;
}

.twod-concept-art .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.twod-concept-art .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.twod-concept-art .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.twod-concept-art .tab-pane {
    position: relative;
}

.twod-concept-art .consultant-card {
    background: url(../images/services/2d-art/2d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.twod-art-consultation .card {
    background-image: url(../images/services/2d-art/2d-art-free-consultation.webp);
    background-size: cover;
}

.twod-art-consultation .btn {
    background-color: #fff;
    color: #5D1EAA;
    border-color: #fff;
    font-weight: 700;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.twod-art-consultation .btn:hover {
    background-color: #fff;
    color: #fff;
    border-color: #5D1EAA;
    font-weight: 700;
    box-shadow: 0 0 0 0 #5D1EAA, inset 6em 3.5em 0 0 #5D1EAA;
}

.twod-art-benefits-section {
    position: relative;
    background-image: url(../images/services/2d-art/2d-art-benefits-banner.webp);
    background-size: cover;
}

.twod-art-benefits-section h2 span {
    color: var(--first-color);
}

.twod-art-benefit {
    position: absolute;
    right: 0;
    height: 80%;
}

.twod-why-choose-section {
    background-image: url(../images/why-choose/2d-art-why-choose-section.webp);
    background-size: cover;
    background-attachment: fixed;
}

.twod-concept-art h2 span,
.twod-game-ui-ux-design h2 span,
.twod-environment-design h2 span,
.twod-character-design h2 span {
    color: var(--first-color);
}

.twod-consultant-card p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

.twod-art-consultation .discuss-project {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

/* 3D Art */

.threed-art-banner {
    background-image: url(../images/banner/3d-art-banner.webp);
    background-size: cover;
    background-position: center;
}

.threed-art-page h1 span {
    color: #000;
}

.threed-art-services h2 span {
    color: var(--first-color);
}

.threed-art-services .card::before,
.threed-art-services .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--second-color);
    height: 4px;
}

.threed-art-services .card::before {
    width: 0;
    opacity: 0;
    transition: opacity 0 ease, width 0 ease;
    transition-delay: 0.5s;
}

.threed-art-services .card::after {
    width: 100%;
    background: #fff;
    transition: width 0.5s ease;
}

.threed-art-services .card {
    height: 100%;
    border-radius: 0px;
    /* border: 1px solid rgba(0, 0, 0, 1); */
    transition: transform .2s;
    /* background: -moz-linear-gradient(left, #0069A2 0%, #003358 100%);
	background: -webkit-linear-gradient(left, #0069A2 0%, #003358 100%);
	background: linear-gradient(to right, #0069A2 0%, #003358 100%); */
}

.threed-art-services .card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}

.threed-art-services .card:hover::before {
    width: 100%;
    opacity: 1;
    transition: opacity 0.5s ease, width 0.5s ease;
    transition-delay: 0;
}

.threed-art-services .card:hover::after {
    width: 0;
    opacity: 0;
    transition: width 0 ease;
}

.threed-character-design {
    background: url(../images/services/3d-art/3d-character-design-bg.webp) no-repeat fixed;
    background-size: cover;
}

.threed-character-design .card {
    background: var(--white-color);
}

.threed-character-design p {
    padding-top: 10px;
    line-height: 25px;
}

.threed-character-design .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.threed-character-design .nav-tabs .nav-item .nav-link {
    color: #000;
}

.threed-character-design .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.threed-character-design .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.threed-character-design .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.threed-character-design .tab-pane {
    position: relative;
}

.threed-art-bottom-center {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 80%;
}

.threed-character-design .consultant-card {
    background: url(../images/services/3d-art/3d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.threed-environment-design {
    background: url(../images/services/3d-art/3d-environment-bg.webp) no-repeat fixed;
    background-size: cover;
}

.threed-environment-design .card {
    background: var(--white-color);
}

.threed-environment-design p {
    padding-top: 10px;
    line-height: 25px;
}

.threed-environment-design .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.threed-environment-design .nav-tabs .nav-item .nav-link {
    color: #000;
}

.threed-environment-design .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.threed-environment-design .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.threed-environment-design .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.threed-environment-design .tab-pane {
    position: relative;
}

.threed-environment-design .consultant-card {
    background: url(../images/services/3d-art/3d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.threed-game-assets-design {
    background: url(../images/services/3d-art/3d-game-assets-bg.webp) no-repeat fixed;
    background-size: cover;
}

.threed-game-assets-design .card {
    background: var(--white-color);
}

.threed-game-assets-design p {
    padding-top: 10px;
    line-height: 25px;
}

.threed-game-assets-design .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.threed-game-assets-design .nav-tabs .nav-item .nav-link {
    color: #000;
}

.threed-game-assets-design .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.threed-game-assets-design .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.threed-game-assets-design .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.threed-game-assets-design .tab-pane {
    position: relative;
}

.threed-game-assets-design .consultant-card {
    background: url(../images/services/3d-art/3d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.threed-sculpting-service {
    background: url(../images/services/3d-art/3d-sculpturing-bg.webp) no-repeat fixed;
    background-size: cover;
}

.threed-sculpting-service .card {
    background: var(--white-color);
}

.threed-sculpting-service p {
    padding-top: 10px;
    line-height: 25px;
}

.threed-sculpting-service .nav-tabs .nav-item {
    margin: 0px 10px 10px 0px;
    width: 230px;
    background-color: #fff;
    border-radius: 0px;
}

.threed-sculpting-service .nav-tabs .nav-item .nav-link {
    color: #000;
}

.threed-sculpting-service .nav-tabs .nav-item .nav-link:hover {
    border: 5px solid var(--first-color);
    height: 100%;
}

.threed-sculpting-service .nav-tabs .nav-item .nav-link.active {
    border: 3px solid var(--first-color);
    background-color: var(--first-color);
    height: 100%;
}

.threed-sculpting-service .nav-tabs .nav-item .nav-link.active p {
    color: var(--white-color);
}

.threed-sculpting-service .tab-pane {
    position: relative;
}

.threed-sculpting-service .consultant-card {
    background: url(../images/services/3d-art/3d-art-consultation.webp) no-repeat fixed;
    background-size: cover;
}

.threed-art-consultation .card {
    background-image: url(../images/services/3d-art/3d-art-free-consultation.webp);
    background-size: cover;
}

.threed-art-consultation .btn {
    background-color: #fff;
    color: #5D1EAA;
    border-color: #fff;
    font-weight: 700;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.threed-art-consultation .btn:hover {
    background-color: #fff;
    color: #fff;
    border-color: #5D1EAA;
    font-weight: 700;
    box-shadow: 0 0 0 0 #5D1EAA, inset 6em 3.5em 0 0 #5D1EAA;
}

.threed-art-benefits-section {
    position: relative;
    background-image: url(../images/services/3d-art/3d-art-benefits-banner.webp);
    background-size: cover;
}

.threed-art-benefits-section h2 span {
    color: var(--first-color);
}

.threed-art-benefit {
    position: absolute;
    right: 0;
    height: 80%;
}

.threed-why-choose-section {
    background-image: url(../images/why-choose/3d-art-why-choose-section.webp);
    background-size: cover;
    background-attachment: fixed;
}

.threed-art-extra-services-text,
.threed-art-extra-services-heading {
    text-align: center;
}

.threed-character-design h2 span,
.threed-environment-design h2 span,
.threed-game-assets-design h2 span,
.threed-sculpting-service h2 span {
    color: var(--first-color);
}

.threed-consultant-card p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

.threed-art-consultation .discuss-project {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

/* End 3D Art */

/* Start 3D Exterior */

.exterior-3d-banner {
    background: url(../images/banner/threed-exterior.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.threed-exterior-showcase img {
    height: 100%;
    width: 100%;
}

/* End 3D Exterior */

/* Start 3D Interior */

.interior-3d-banner {
    background: url(../images/banner/threed-interior.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.threed-interior-showcase img {
    height: 100%;
    width: 100%;
}

/* End 3D Exterior */

/* Start Floor Plan */

.floor-plan {
    background: url(../images/banner/2d-3d-floor-plan.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* End Floor Plan */

/* Start 3D Interior */

.design-and-animation-banner {
    background: url(../images/banner/design-and-animation-services-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.threed-interior-showcase img {
    height: 100%;
    width: 100%;
}

.threed-art-extra-services-heading {
    font-size: 22px;
    line-height: 32px;
}

/* End 3D Exterior */

/* End Services Page */

.hidden {
    display: none;
}

footer h4 {
    color: var(--white-color);
    font-size: 16px;
    line-height: 26px;
}

.contact p {
    text-align: center;
}

.portfolio,
.contact-us,
.about-us,
.our-process,
.clients,
.testimonials,
.career,
.thank-you {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

/* .technologies h6 {
    font-size: 16px;
    line-height: 26px;
}

.badges-section h5 {
    font-size: 20px;
    line-height: 30px;
}

.service-heading h4, .item-info-div h4, .blogs-section h4 {
    font-size: 22px;
    line-height: 32px;
}

.contact h2, .footer h2 {
    font-size: 40px;
}

.footer h5 {
    font-size: 24px;
    line-height: 30px;
}

.footer h6 {
    font-size: 20px;
    line-height: 26px;
} */

/* Portfolio */

.scrollHalf {
    position: relative;
    overflow: hidden;
}

.scrollHalf__grupo {
    position: relative;
    height: 100vh;
}

.scrollHalf__grupo__imagen {
    overflow: hidden;
}

.scrollHalf__grupo__contenido {
    padding: 3rem;
}

.scrollHalf__grupo[data-scroll="out"] {
    opacity: 0;
}

.scrollHalf__grupo[data-scroll="in"] {
    opacity: calc(var(--visible-y)*1.9);
}

.app-first-cs,
.web-first-cs {
    background-color: var(--orange-color);
}

.app-second-cs,
.web-second-cs {
    background-color: var(--brown-color);
}

/* Start Case Studies */

/*  Start Travel Agency */

.travel-agency-app {
    background-image: url(../images/case-studies/travel-agency-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.about-goal-travel {
    background: linear-gradient(to right, var(--purple-color), var(--blue-color));
    background-attachment: fixed;
}

.visuals-travel-background {
    background-image: url(../images/case-studies/travel-agency-app/visuals-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.about-travel h2,
.project-idea-travel h2,
.target-audience-travel h2,
.project-challanges-travel h2,
.solutions-delivered-travel h2,
.results-impact-travel h2,
.conclusion-travel h2,
.design-process-travel h2,
.sketching-travel h2,
.wireframe-travel h2,
.color-travel h2,
.typography-travel h2,
.features-travel h2,
.sitemap-travel h2,
.project-timeline h2,
.shapes-travel h2,
.type-faces-travel h2,
.mockups-travel h2,
.visuals-travel h2 {
    color: var(--black-color);
}

.about-travel .span {
    color: var(--purple-color);
}

.travel-agency-web {
    background-image: url(../images/case-studies/travel-agency-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.travel-agency-portfolio {
    background-image: url(../images/case-studies/travel-agency-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.travel-website-background,
.travel-app-background,
.travel-creative-background,
.travel-mockup-background {
    background-image: url(../images/case-studies/travel-agency-portfolio/visuals-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.travel-sitemap-img-div {
    background-image: url(../images/case-studies/travel-agency-web/visuals-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.color-travel h4 {
    color: var(--purple-color);
    padding-bottom: 15px;
}

.travel-app-sketching-icon,
.travel-app-wireframe-icon {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.travel-app-sketching-icon img,
.travel-app-wireframe-icon img {
    width: 75px;
    height: 75px;
}

.travel-app-branding-icon,
.travel-app-visuals-icon {
    border: 1px solid var(--purple-color);
    background-color: var(--purple-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.travel-app-branding-icon img,
.travel-app-visuals-icon img {
    width: 75px;
    height: 75px;
}

.travel-web-user-and-research,
.travel-web-competitive-analysis {
    background-color: var(--purple-color);
    border: 1px solid var(--purple-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.travel-web-user-and-research img,
.travel-web-competitive-analysis img {
    width: 75px;
    height: 75px;
}

.travel-web-problem-and-solutions,
.travel-web-wireframe-icons {
    border: 1px solid var(--purple-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.travel-web-problem-and-solutions img,
.travel-web-wireframe-icons img {
    width: 75px;
    height: 75px;
}

.features-travel h5 {
    color: var(--purple-color);
}

/*  End Travel Agency */

/* Start Real Estate */

.real-estate-apps {
    background-image: url(../images/case-studies/real-estate-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.real-estate-about h2,
.real-estate-project-idea h2,
.real-estate-target-audience h2,
.real-estate-project-challanges h2,
.real-estate-solutions-delivered h2,
.real-estate-results-impact h2,
.real-estate-conclusion h2,
.real-estate-design-process h2,
.real-estate-sketching h2,
.real-estate-wireframe h2,
.real-estate-color h2,
.real-estate-typography h2,
.real-estate-features h2,
.real-estate-sitemap h2,
.real-estate-project-timeline h2,
.real-estate-shapes h2,
.real-estate-type-faces h2,
.real-estate-mockups h2,
.real-estate-components h2,
.real-estate-visuals h2 {
    color: var(--brown-color);
}

.real-estate-goal {
    background-image: url(../images/case-studies/real-estate-app/real-estate-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.real-estate-visuals-background {
    background-image: url(../images/case-studies/real-estate-app/real-estate-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.real-estate-web {
    background-image: url(../images/case-studies/real-estate-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.real-estate-web .span,
.real-estate-apps .span {
    color: var(--golden-color);
}

.real-estate-sitemap-img {
    background-image: url(../images/case-studies/real-estate-app/real-estate-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.real-estate-apps h1,
.real-estate-web h1 {
    text-transform: uppercase;
}

.real-estate-apps h3,
.real-estate-web h3 {
    text-transform: uppercase;
}

.real-estate-app-sketching-icon,
.real-estate-app-wireframe-icon {
    background-color: var(--brown-color);
    border: 1px solid var(--brown-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.real-estate-app-sketching-icon img,
.real-estate-app-wireframe-icon img {
    width: 75px;
    height: 75px;
}

.real-estate-app-branding-icon,
.real-estate-app-visuals-icon {
    background-color: var(--golden-color);
    border: 1px solid var(--golden-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.real-estate-app-branding-icon img,
.real-estate-app-visuals-icon img {
    width: 75px;
    height: 75px;
}

.real-estate-web-user-and-research,
.real-estate-web-problem-and-solutions {
    background-color: var(--brown-color);
    border: 1px solid var(--brown-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.real-estate-web-user-and-research img,
.real-estate-web-problem-and-solutions img {
    width: 75px;
    height: 75px;
}

.real-estate-web-competitive-analysis,
.real-estate-web-wireframe-icons {
    background-color: var(--golden-color);
    border: 1px solid var(--golden-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.real-estate-web-wireframe-icons img,
.real-estate-web-wireframe-icons img {
    width: 75px;
    height: 75px;
}

.real-estate-features {
    color: var(--brown-color);
}

/* End Real Estate */

/* Start Loyalty */

.loyalty-apps {
    background-image: url(../images/case-studies/loyalty-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.loyalty-about h2,
.loyalty-project-idea h2,
.loyalty-target-audience h2,
.loyalty-project-challanges h2,
.loyalty-solutions-delivered h2,
.loyalty-results-impact h2,
.loyalty-conclusion h2,
.loyalty-design-process h2,
.loyalty-sketching h2,
.loyalty-wireframe h2,
.loyalty-color h2,
.loyalty-typography h2,
.loyalty-features h2,
.loyalty-sitemap h2,
.loyalty-project-timeline h2,
.loyalty-shapes h2,
.loyalty-type-faces h2,
.loyalty-mockups h2,
.loyalty-components h2,
.loyalty-visuals h2 {
    color: var(--black-color);
}

.loyalty-goal {
    background: linear-gradient(to right, #a30007, #e70009, #cc1a1a);
    /* background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat; */
}

.loyalty-visuals-background {
    background-image: url(../images/case-studies/loyalty-app/loyalty-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.loyalty-web {
    background-image: url(../images/case-studies/loyalty-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.loyalty-web .span,
.loyalty-apps .span {
    color: var(--black-color);
}

.loyalty-app-sketching-icon,
.loyalty-app-wireframe-icon {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.loyalty-app-sketching-icon img,
.loyalty-app-wireframe-icon img {
    width: 75px;
    height: 75px;
}

.loyalty-app-branding-icon,
.loyalty-app-visuals-icon {
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.loyalty-app-branding-icon img,
.loyalty-app-visuals-icon img {
    width: 75px;
    height: 75px;
}

.loyalty-features hr {
    color: var(--red-color);
    width: 40%;
    height: 3px;
    opacity: 1;
}

.loyalty-web-user-and-research,
.loyalty-web-problem-and-solutions {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.loyalty-web-user-and-research img,
.loyalty-web-problem-and-solutions img {
    width: 75px;
    height: 75px;
}

.loyalty-web-competitive-analysis,
.loyalty-web-wireframe-icons {
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.loyalty-web-wireframe-icons img,
.loyalty-web-wireframe-icons img {
    width: 75px;
    height: 75px;
}

.loyalty-web-features {
    color: var(--brown-color);
}

.loyalty-sitemap-img {
    background-image: url(../images/case-studies/loyalty-app/loyalty-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/* End Loyalty */

/* Start Gym */

.gym-app {
    background-image: url(../images/case-studies/gym-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.gym-about h2,
.gym-project-idea h2,
.gym-target-audience h2,
.gym-project-challanges h2,
.gym-solutions-delivered h2,
.gym-results-impact h2,
.gym-conclusion h2,
.gym-design-process h2,
.gym-sketching h2,
.gym-wireframe h2,
.gym-color h2,
.gym-typography h2,
.gym-features h2,
.gym-sitemap h2,
.gym-project-timeline h2,
.gym-shapes h2,
.gym-type-faces h2,
.gym-mockups h2,
.gym-components h2,
.gym-visuals h2 {
    color: var(--black-color);
}

.gym-goal {
    background-image: url(../images/case-studies/gym-app/gym-background.webp);
    /* background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat; */
}

.gym-visuals-background {
    background-image: url(../images/case-studies/gym-app/gym-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.gym-web {
    background-image: url(../images/case-studies/gym-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.gym-web .span,
.gym-app .span,
.gym-about .span {
    color: var(--orange-color);
}

.gym-about span {
    color: var(--orange-color);
}

.gym-app-sketching-icon,
.gym-app-wireframe-icon {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.gym-app-sketching-icon img,
.gym-app-wireframe-icon img {
    width: 75px;
    height: 75px;
}

.gym-app-branding-icon,
.gym-app-visuals-icon {
    background-color: var(--orange-color);
    border: 1px solid var(--orange-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.gym-app-branding-icon img,
.gym-app-visuals-icon img {
    width: 75px;
    height: 75px;
}

.gym-features hr {
    color: var(--orange-color);
    width: 40%;
    height: 3px;
    opacity: 1;
}

.gym-web-user-and-research,
.gym-web-problem-and-solutions {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.gym-web-user-and-research img,
.gym-web-problem-and-solutions img {
    width: 75px;
    height: 75px;
}

.gym-web-competitive-analysis,
.gym-web-wireframe-icons {
    background-color: var(--orange-color);
    border: 1px solid var(--orange-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.gym-web-wireframe-icons img,
.gym-web-wireframe-icons img {
    width: 75px;
    height: 75px;
}

.gym-web-features {
    color: var(--orange-color);
}

.gym-sitemap-img {
    background-image: url(../images/case-studies/gym-app/gym-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.gym-sitemap-web-img {
    background: var(--black-color);
}

/* End Gym */

/* Start Mover */

.mover-apps {
    background-image: url(../images/case-studies/mover-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.mover-about h2,
.mover-project-idea h2,
.mover-target-audience h2,
.mover-project-challanges h2,
.mover-solutions-delivered h2,
.mover-results-impact h2,
.mover-conclusion h2,
.mover-design-process h2,
.mover-sketching h2,
.mover-wireframe h2,
.mover-color h2,
.mover-typography h2,
.mover-features h2,
.mover-sitemap h2,
.mover-project-timeline h2,
.mover-shapes h2,
.mover-type-faces h2,
.mover-mockups h2,
.mover-components h2,
.mover-visuals h2 {
    color: var(--black-color);
}

.mover-goal {
    background-image: url(../images/case-studies/mover-app/mover-green-background.webp);
    /* background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat; */
}

.mover-visuals-background {
    background-image: url(../images/case-studies/mover-app/mover-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.mover-web {
    background-image: url(../images/case-studies/mover-header-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.mover-web .span,
.mover-apps .span {
    color: var(--green-color);
}

.mover-about .span {
    color: var(--green-color);
}

.mover-app-sketching-icon,
.mover-app-wireframe-icon {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.mover-app-sketching-icon img,
.mover-app-wireframe-icon img {
    width: 75px;
    height: 75px;
}

.mover-app-branding-icon,
.mover-app-visuals-icon {
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.mover-app-branding-icon img,
.mover-app-visuals-icon img {
    width: 75px;
    height: 75px;
}

.mover-features hr {
    color: var(--green-color);
    width: 40%;
    height: 3px;
    opacity: 1;
}

.mover-web-user-and-research,
.mover-web-problem-and-solutions {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.mover-web-user-and-research img,
.mover-web-problem-and-solutions img {
    width: 75px;
    height: 75px;
}

.mover-web-competitive-analysis,
.mover-web-wireframe-icons {
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    padding: 35px;
}

.mover-web-wireframe-icons img,
.mover-web-wireframe-icons img {
    width: 75px;
    height: 75px;
}

.mover-web-features {
    color: var(--orange-color);
}

.mover-sitemap-img {
    background-image: url(../images/case-studies/mover-app/mover-background.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.mover-sitemap-web-img {
    background: var(--black-color);
}

/* End Mover */

/* Start Boujee Beachin */

.boujee-beachin-app {
    background: linear-gradient(to bottom, #00A9F8 0%, #00A9F8 8%, transparent 25%), url("../images/case-studies/boujee-beachin/boujee-beachin-background1.webp") center/cover no-repeat;
}

.boujee-beachin-app .boujee-beachin-logo {
    width: 100%;
    max-width: 200px;
}


.boujee-beachin-app h1 span {
    color: var(--light-blue-color);
    font-weight: bold;
}

.case-tag {
    background-color: var(--light-blue-color);
    color: var(--white-color);
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: 700;
    width: fit-content;
    text-align: center;
}


.boujee-beachin-problem img {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
}

/* .boujee-beachin-objectives h2 {
    background-color: var(--light-blue-color);
    color: var(--white-color);
    display: inline-block;
    padding: 10px;
    border-radius: 20px;
    font-weight: 700;
} */

.boujee-beachin-objectives img {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 0 auto;
}

.boujee-beachin-objectives .info-card1 {
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #007599;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.boujee-beachin-objectives .info-card1:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.boujee-beachin-objectives .card-number-circle {
    width: 45px;
    height: 45px;
    background-color: var(--white-color);
    border: 4px solid var(--light-blue-color);
    color: var(--black-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.boujee-beachin-objectives p {
    color: var(--gray-color);
    line-height: 1.6;
}

.boujee-beachin-designs .container {
    position: relative;
}

.boujee-beachin-designs .central-line {
    position: absolute;
    width: 4px;
    background-color: var(--light-blue-color);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.boujee-beachin-designs .text-theme-blue {
    color: var(--light-blue-color);
    font-weight: 600;
}

.boujee-beachin-designs .feature-box {
    background: var(--white-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

/* .boujee-beachin-wireframe h2 {
    color: var(--light-blue-color);
} */

.boujee-beachin-wireframe ul {
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 1.5rem 0;
    list-style: none;
}

.boujee-beachin-wireframe ul li {
    background: #f8f9fa;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    font-size: 0.95rem;
    font-weight: 500;
    color: #007bff;
    transition: all 0.3s ease;
    cursor: default;
}


.wireframes-section ul li:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    transform: translateY(-3px);
}

.target-users-card {
    height: 90px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}


.target-users-card img {
    width: 22px;
    height: auto;
    object-fit: contain;
}

.target-users-card p {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.challenges-section {
    line-height: 50px;
}

.challenges-heading span {
    font-size: 28px;
    font-weight: 700;
    color: var(--white-color);
    background-color: #007bff;
    margin: 10px;
    padding: 10px;
    border-radius: 14px;
    word-spacing: 4px;
}

.challenges-heading p {
    font-size: 16px;
    margin-top: 10px;
    color: #555;
}

.challenges ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.challenges ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.challenges ul li img {
    width: 24px;
    height: 24px;
}

.challenges ul li p {
    margin: 0;
    font-size: 15px;
    color: #444;
}

.challenges-img {
    width: 100%;
    max-width: 680px;
    border-radius: 10px;
}

.pernal-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    line-height: 22px;
    margin-bottom: 15px;
}

.right-info {
    border-left: 3px solid var(--white-color);
    padding-left: 22px;
}

.persona-heading {
    color: var(--wheat);
}

.persona-wrapper {
    background-color: #3a3a3a;
    color: var(--white-color);
    padding: 20px;
    border-radius: 20px;
}

.persona-card {
    background-color: #4f4f4f;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 46%;
}

.card-body {
    padding: 1.5rem;
}

.border-top-accent {
    border-top: 4px solid #0097DE !important;
}

.text-accent {
    color: #67e0e3 !important;
}

.text-secondary-light {
    color: #dcdcdc;
}

.custom-list {
    padding-left: 1.2rem;
}

.custom-list li {
    list-style: circle;
    margin-bottom: 0.5rem;
    color: #dcdcdc;
}

.profile-img-container {
    width: 160px;
    height: 160px;
    margin: 0 auto 1.5rem;
    padding: 5px;
    border: 3px solid #ffffff;
    border-radius: 50%;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.demographics-table {
    margin: 2rem auto;
    width: 80%;
    font-size: 0.9rem;
}

.demographics-table td {
    padding: 4px 0;
}

.demog-label {
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;
    padding-right: 15px;
    width: 50%;
    color: var(--white-color);
}

.demog-value {
    color: var(--white-color);
    text-align: left;
}

.personality-tag {
    background-color: #f8f9fa;
    color: var(--light-blue-color);
    font-weight: 600;
    padding: 1em;
    font-size: 0.85rem;
}

.progress-label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    display: block;
}

.progress {
    height: 8px;
    background-color: #6c757d;
    margin-bottom: 1rem;
}

.progress-bar-accent {
    background-color: var(--light-blue-color);
}

.user-testing-card {
    height: auto;
    position: relative;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 60px 20px 20px;
    background: #fff;
    transition: 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.0.8);
}

.user-testing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.user-testing-img {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.user-testing-img img {
    width: 85px;
    height: auto;
    object-fit: contain;
}

.user-testing-img p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.user-testing-card ul {
    margin: 0;
    padding-left: 18px;
}

.user-testing-card li {
    list-style: circle;
    margin-top: 18px;
    line-height: 1.6;
    padding-left: 22px;
}


/* ========================= */
/* RESPONSIVE BREAKPOINTS   */
/* ========================= */




/*End hassan User Testing & Feedback  */


/* by hassan Client Testimonial  --> */

.boujee-Testimonial h4 {
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
}

.boujee-Testimonial p,
b {
    font-family: "Nunito", sans-serif;
    font-weight: 300;
}

.testimonialsCard {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    transition: 0.3s ease;
}

.testimonialsCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

.testimonials-img-section p {
    font-size: 14px;
    opacity: 0.8;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.boujee-beachin-conclusion p {
    font-size: 16px;
    line-height: 1.9;
    border-left: 7px solid var(--light-blue-color);
    padding-left: 22px;
}

.conclusion-right img {
    max-width: 100%;
    border-radius: 14px;
    transition: 0.3s ease;
}

.conclusion-right img:hover {
    transform: scaley(1.02);
}


.tech-card {
    background: #fff;
    padding: 20px 10px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
    height: 100%;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.tech-card h6 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.tech-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 8px;
}

.tech-card p {
    font-size: 13px;
    margin: 0;
    font-weight: 500;
}

.morkup-boujee-beachin img {
    width: 100%;
    max-width: 1800px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.boujee-beachin-testimonial .testimonial-card {
    background: var(--white-color);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    transition: 0.3s ease;
}

.boujee-beachin-testimonial .testimonials-img-section img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}

.boujee-beachin-testimonial .star {
    width: 15%;
}

/* End Boujee Beachin */

/* End Boujee Beachin */

/* Start Wood Land  */

.wood-land-app {
    background: url("../images/case-studies/wood-land-app/wood-land-background-img.webp") center/cover no-repeat;
}

.wood-land-hero-img img {
    padding-left: 22px;
    width: 100%;
}

.wood-land-app h1,
.wood-land-app p {
    color: var(--white-color);
    font-weight: bold;
}

.wood-land-app h1 span,
.wood-land-app p span {
    color: #58D39C;
    font-weight: bold;
}

.wood-land-button {
    background-color: #58D39C;
    color: var(--black-color);
    padding: 10px 25px;
    border-radius: 10px;
    font-weight: bold;
    width: fit-content;
    text-align: center;
    cursor: pointer;
}

.wood-land-button:hover {
    background-color: transparent;
    color: var(--white-color);
    border: 1px solid #58D39C;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
}

.client-wood-land-wrapper {
    background-color: #F8F8F8;
    border-radius: 20px;
    padding: 20px;
}

.wood-land-client-overview h2,
h6 {
    color: var(--black-color);
    padding-top: 10px;
}

.wood-land-client-overview h2 {
    color: var(--black-color);
    padding-bottom: 10px;
}

.wood-land-client-overview p {
    color: var(--black-color);
    padding-bottom: 13px;
}

.wood-land-client-overview .left-border-clint-overview {
    padding-left: 10px;
    border-left: 2px solid #67FFBB;
}

.wood-land-development-challenges {
    background: url("../images/case-studies/wood-land-app/development-challange-background-img.webp") center/cover no-repeat;
    border-radius: 30px;
    padding: 40px 25px;
}


.development-challenges-left {
    border-left: 2px solid #67FFBB;
    padding-left: 15px;
}

.development-challenges-left h2,
.development-challenges-left p {
    color: #fff;
}

.wood-land-development-challenges .info-card {
    height: 240px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.wood-land-development-challenges .info-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-5px);
}

.wood-land-development-challenges .info-card .card-number-circle {
    border: 4px solid #67FFBB;
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 10px;
}

.wood-land-development-challenges .info-card p {
    color: #000;
}

.wood-land-wireframe {
    background: #f7f9fb;
    border-radius: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.wood-land-wireframe p {
    color: #000;
    padding-bottom: 30px;
}

.wire-img {
    width: 100%;
    max-width: 380px;
    border-radius: 12px;
    transition: transform .3s ease, box-shadow .3s ease;
    display: block;
    margin: 0 auto;
}

.wire-img:hover {
    transform: scale(1.09);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wireframe-gallery .col-6 {
    display: flex;
    justify-content: center;
}

.wood-land-project-goals {
    border-radius: 20px;
}

.wood-land-project-goals img {
    object-fit: cover;
    width: 90%;
}

.wood-land-project-goals .info-card {

    border-radius: 14px;
    padding: 22px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: all .3s ease;
}

.wood-land-project-goals .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.wood-land-project-goals .wood-land-project-goals .info-card h5 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
    color: #2d2926;
}

.wood-land-project-goals .green {
    background: #D5FFEC;
    border: 1px solid black;
}

.wood-land-project-goals .green h5,
.wood-land-project-goals .green p {
    color: var(--black-color);
}

.wood-land-project-goals .black {
    background: #1B252D;
    border: 1px solid wheat;

}

.wood-land-project-goals .black h5,
.wood-land-project-goals .black p {
    color: var(--white-color);
}

.wood-land-designs .container {
    position: relative;
}

.wood-land-designs .wood-land-central-line {
    position: absolute;
    width: 4px;
    background-color: #37424A;
    top: 14%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.wood-land-designs .wood-land-text-theme {
    color: var(--black-color);
    font-weight: 600;
}

.wood-land-feature-box:hover {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.left-column-wood-land .wood-land-feature-box-group .wood-land-feature-box {
    background: #D5FFEC;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.left-column-wood-land .wood-land-feature-box-group .wood-land-feature-box:nth-child(2) {
    background-color: #1B252D;
}

.left-column-wood-land .wood-land-feature-box-group .wood-land-feature-box:nth-child(2) h4,
.left-column-wood-land .wood-land-feature-box-group .wood-land-feature-box:nth-child(2) p {
    color: var(--white-color);
}

.right-column-wood-land .wood-land-feature-box-group .wood-land-feature-box {
    background: #1B252D;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.right-column-wood-land .wood-land-text-theme {
    color: var(--white-color);
    font-weight: 600;
}

.right-column-wood-land .wood-land-feature-box-group .wood-land-feature-box:nth-child(2) {
    background-color: #D5FFEC;
}

.right-column-wood-land .wood-land-feature-box-group .wood-land-feature-box:nth-child(2) h4,
.right-column-wood-land .wood-land-feature-box-group .wood-land-feature-box:nth-child(2) p {
    color: var(--black-color);
}

/* End Wood Land App  */

/* Start  Neuro Knights App */

.neuro-knight-app {
    background: linear-gradient(to bottom, #4A8ADD 0%, #4A8ADD 5%, transparent 20%);
}

.neuro-knight-app .logo {
    width: 100%;
    max-width: 300px;
}

.neuro-night-hero-img img {
    padding-left: 22px;
    width: 100%;
}

.neuro-knight-app h1 span,
.neuro-knight-app p span {
    color: #007599;
    font-weight: bold;
}

.wood-land-button:hover {
    background-color: transparent;
    color: var(--white-color);
    border: 1px solid #58D39C;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
}

.NeuroKnights-problem .common-heading {
    padding-left: 32px;
}

.NeuroKnights-problem .common-heading h2 {
    font-weight: bold;
}

.NeuroKnights-problem .common-heading p {
    font-weight: bold;
}

.NeuroKnights-problem .common-heading h2>span {
    color: #007599;
}

.neuro-night-designs .container {
    position: relative;
}

.neuro-night-designs .neuro-night-central-line {
    position: absolute;
    width: 4px;
    background-color: #37424A;
    top: 14%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.neuro-night-designs .neuro-night-text-theme {
    color: var(--white-color);
    font-weight: 600;
}

.neuro-night-feature-box:hover {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.left-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box {
    background: #FF6C69;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.left-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box:nth-child(2) {
    background-color: #4A8ADD;
}

.right-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box {
    background: #4A8ADD;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.right-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box:nth-child(2) {
    background-color: #FF6C69;
}

.neuro-night-feature-box-group .neuro-night-feature-box h4,
.left-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box p,
.right-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box p {
    color: var(--white-color);
}

.Tech-Stack-section {
    background: #f8f8f8;
    border-radius: 12px;
    border: 1px solid black;

}

.tech-img-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-right: 20px;
    flex: 1;
}

.tech-img-box img {
    width: 150px;
    height: auto;
    object-fit: contain;
}


.tech-img-box .common-heading h6 {
    margin: 0 0 5px;
    font-weight: 600;
}

.tech-img-box .common-heading p {
    margin: 0;
    color: #555;
}

.neuro-night-project-card {

    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #007599;
    color: var(--white-color);
    padding: 30px;
    border-radius: 20px;
}

.neuro-night-project-card .card-number-circle {
    border: 4px white solid;
    background-color: #007599;
    color: var(--white-color);
    padding: 10px;
}

/* End  Neuro Knights App */

/* End Case Studies */

.automation-services .card {
    height: 100%;
    border-radius: 0px;
    transition: transform .2s;
}

.automation-services .card {
    height: 100%;
}

.card {
    border-radius: 13px;
}

.automation-services .card::before {
    width: 0;
    opacity: 0;
    transition: opacity 0 ease, width 0 ease;
    transition-delay: 0.5s;
}

.automation-services .card::before,
.automation-services .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--first-color);
    height: 4px;
}

.automation-services .card::after {
    width: 100%;
    background: #fff;
    transition: width 0.5s ease;
}

.automation-services .card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}


.emergency-services {
    background: url(../images/services/industrial-automation/emergency-services-banner.webp) no-repeat fixed;
    background-size: cover;
}

.emergency-services .card {
    height: 100%;
    border-radius: 0px;
    transition: transform .2s;
}

.advantages-list .fa-circle {
    font-size: 10px;
    padding-right: 5px;
    vertical-align: middle;
    color: #31b28a;
}

/* .fa-solid,
.fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
} */

ul {
    list-style: none;
}

h3 {
    font-size: 34px;
    line-height: 46px;
}

i.fa-solid.fa-circle {
    font-size: 10px;
    padding-right: 5px;
    vertical-align: middle;
    color: #31b28a;
}

.fa-circle:before {
    content: "\f111";
}

ul li {
    line-height: 30px;
    margin-left: 0px;
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-phone-alt:before,
.fa-phone-flip:before {
    content: "\f879";
}

/* .img-left {
    position: absolute;
    top: 0;
    left: 0;
}

.image-spliter,
img,
.mover {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img {
    max-width: 100%;
    height: auto;
}

.image-spliter {
    position: relative;
}

.mover {
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 50%;
    z-index: 10;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
} */


.award-item h5 {
    text-transform: capitalize;
    font-size: 16px;
    line-height: 26px;
    margin-top: 22px;
}

/* img.img-fluid.d-block.mx-auto {
    width: 40% !important;
} */

.contact-div {
    background-color: var(--black2-color);
    padding: 4rem 0rem;
}

.contact-div p {
    color: var(--white-color);
    font-size: 42px;
    font-weight: 800;
}

.contact-div p span {
    color: var(--first-color);
}

.hire-developer p {
    font-size: 42px;
    font-weight: 800;
    line-height: 50px;
}

.hire-developer p span {
    color: var(--first-color);
}

.client-logoset .card {
    border-radius: 20px;
    max-width: 180px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0);
}

/* .client-logoset .card:hover {
    border: 1px solid var(--first-color);
}

.client-logoset .card-body {
    padding: 20px;
} */

.client-logoset .card-body:hover img {
    transform: scale(1.2);
}

.tcd.card {
    border-radius: 40px 8px 40px 8px;
}

.tcd .card-body {
    padding: 0px;
}

.stamp-widget_rating {
    color: #fff !important;
}

.clutch-widget iframe .stamp-widget_top {
    background: #fff !important;
}

.testimonial-card-a .owl-stage {
    display: flex;
}

.testimonial-card-a .owl-item {
    margin: 30px 4px 0px;
}

.testimonial-card-a .owl-item .tcd {
    box-shadow: 0 11px 20px rgb(123 149 162 / 0%);
}

/* Locations */

.breadcrumb-areav2 .form-block input {
    /* border-bottom: 2px solid var(--black-color); */
}

input::placeholder,
textarea::placeholder {
    color: #000;
    opacity: 1;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1;
}

.breadcrumb-areav2 h2 span {
    color: var(--first-color);
}

.breadcrumb-areav2 .card {
    background-color: rgba(0, 0, 0, 0.5);
}

.hire-developer-app-development {
    background: url(../images/locations/hire-developer-background.webp);
    position: relative;
    padding: 100px 0px;
}

.hire-developer-img {
    position: relative;
}

.hire-developer-app-development img {
    position: absolute;
    top: -338px;
    right: 0px;
    width: 500px;
}

.services-carousel img {
    position: relative;
}

.services-carousel .text {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
}

.services-carousel .text h3 {
    color: #fff;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.4;
    margin-bottom: 45px;
    text-align: center;
}

.solutions-section .nav-tabs .nav-item.show .nav-link,
.solutions-section .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--first-color);
    border-color: var(--first-color);
}

.solutions-section .nav-tabs .nav-link {
    border-radius: 0.25rem;
}

.solutions-section .nav-link {
    color: var(--white-color);
    background-color: var(--black-color);
    margin-right: 8px;
    margin-bottom: 5px;
}

.lets-connect {
    background: url(../images/locations/let-connect-banner.webp);
    position: relative;
    padding: 100px 0px;
    margin: 200px 0px 150px;
}

.lets-connect-img {
    position: relative;
}

.lets-connect img {
    position: absolute;
}

.wrap {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}

/* .solution-bg-img, .login-wrap {
    width: 50%;
} */

.login-wrap {
    position: relative;
    background: #fff;
    font-weight: 300;
}

.booking-app-bg {
    background-image: url(../images/locations/booking-app/booking-app-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.fitness-app-bg {
    background-image: url(../images/locations/fitness-app/fitness-app-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.loyalty-app-bg {
    background-image: url(../images/locations/loyalty-app/loyalty-app-background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.mover-app-bg {
    background-image: url(../images/locations/mover-app/mover-app-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.real-estate-app-bg {
    background-image: url(../images/locations/real-estate-app/real-estate-app-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.sports-app-bg {
    background-image: url(../images/locations/sports-app/sports-app-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
}


.booking-app-carousel .owl-dots,
.fitness-app-carousel .owl-dots,
.loyalty-app-carousel .owl-dots,
.mover-app-carousel .owl-dots,
.real-estate-app-carousel .owl-dots,
.sports-app-carousel .owl-dots {
    margin-bottom: 10px;
}

.booking-app-carousel .owl-theme .owl-dots .owl-dot.active span,
.booking-app-carousel .owl-theme .owl-dots .owl-dot:hover span {
    color: #fff !important;
}

.booking-app-carousel .owl-theme .owl-dots .owl-dot span {
    color: #fff !important;
    opacity: 0.5 !important;
}

/* Locations */

.locations ul li {
    list-style: disc;
    margin-left: 20px;
}

.locations h3,
.location h3 {
    font-size: 22px;
    line-height: 32px;
}

.locations .card {
    border-radius: 20px;
    border: 1px dashed var(--first-color);
}

.location-heading h2 a:hover {
    color: var(--first-color) !important;
}

.locations .card .card-body ul li a:hover {
    color: var(--first-color) !important;
}

.solutions-carousel,
.solutions-section {
    position: relative;
}

.solutions-section .owl-counter {
    position: absolute;
    z-index: 999;
    bottom: 18%;
    right: 25%;
    display: flex;
    justify-content: space-between;
    width: 200px;
    background: 0 0;
    align-items: center;
    pointer-events: none;
}

.solutions-section .owl-counter span {
    font-weight: 500;
    font-size: 20px;
    color: var(--white-color);
}

.solutions-section .owl-dots {
    position: absolute;
    bottom: 20%;
    right: 26%;
}

.solutions-section .owl-dots .owl-dot {
    width: 30px;
    height: 3px;
    background: rgba(255, 255, 255, .2196078431) !important;
    display: inline-block;
    vertical-align: middle;
}

.solutions-section .owl-dots .owl-dot.active {
    width: 40px;
    height: 8px;
    background: #fff !important;
    display: inline-block;
    border-radius: 10px;
    vertical-align: middle;
    margin-bottom: 0px;
}

.solutions-section .owl-theme .owl-dots .owl-dot span {
    background: transparent;
}

.solutions-section .owl-nav {
    position: absolute;
    top: auto;
    bottom: 19.5%;
    right: 13%;
}

.solutions-section .owl-nav button.owl-prev,
.solutions-section .owl-nav button.owl-next {
    background: #fff;
    border: 1px solid var(--white-color);
    width: 42px;
    height: 42px;
    border-radius: 100%;
}

.solutions-section .owl-nav i {
    margin-top: 3px;
    font-size: 20px;
    color: var(--first-color);
}

.solutions-section .owl-nav [class*=owl-]:hover {
    background: var(--first-color);
    text-decoration: none;
    border: 1px solid var(--first-color);
}

.solutions-section .owl-nav [class*=owl-]:hover i {
    color: var(--white-color);
}

.service-section .card {
    border: 1px dashed var(--first-color);
}

/* Start USA */

.usa-banner {
    background: url(../images/locations/usa/usa-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.usa-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.usa-about,
.about2 {
    background: url(../images/locations/usa/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.usa-partner {
    background: url(../images/locations/usa/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End USA */

/* Start New York */

.new-york-banner {
    background: url(../images/locations/new-york/new-york-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.new-york-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.new-york-about,
.about2 {
    background: url(../images/locations/new-york/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.new-york-partner {
    background: url(../images/locations/new-york/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End New York */

/* Start Los Angeles */

.los-angeles-banner {
    background: url(../images/locations/los-angeles/los-angeles-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.los-angeles-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.los-angeles-about {
    background: url(../images/locations/austin/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.los-angeles-partner {
    background: url(../images/locations/los-angeles/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Los Angeles */

/* Start Houston */

.houston-banner {
    background: url(../images/locations/houston/houston-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.houston-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.houston-about {
    background: url(../images/locations/houston/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.houston-partner {
    background: url(../images/locations/houston/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Houston */

/* Start Austin */

.austin-banner {
    background: url(../images/locations/austin/austin-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.austin-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.austin-about {
    background: url(../images/locations/austin/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.austin-partner {
    background: url(../images/locations/austin/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Houston */

/* Start Dallas */

.dallas-banner {
    background: url(../images/locations/dallas/dallas-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.dallas-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.dallas-about {
    background: url(../images/locations/dallas/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.dallas-partner {
    background: url(../images/locations/dallas/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Dallas */

/* Start San Francisco */

.san-francisco-banner {
    background: url(../images/locations/san-francisco/san-francisco-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.san-francisco-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.san-francisco-about {
    background: url(../images/locations/san-francisco/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.san-francisco-partner {
    background: url(../images/locations/san-francisco/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End San Francisco */

/* Start Washington */

.washington-banner {
    background: url(../images/locations/washington/washington-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.washington-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.washington-about {
    background: url(../images/locations/washington/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.washington-partner {
    background: url(../images/locations/washington/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Washington */

/* Start Miami */

.miami-banner {
    background: url(../images/locations/miami/miami-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.miami-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.miami-about {
    background: url(../images/locations/miami/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.miami-partner {
    background: url(../images/locations/miami/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Miami */

/* Start Montana */

.montana-banner {
    background: url(../images/locations/montana/montana-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.montana-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.montana-about {
    background: url(../images/locations/montana/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.montana-partner {
    background: url(../images/locations/montana/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Montana */

/* Start GCC */

.gcc-banner {
    background: url(../images/locations/gcc/gcc-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.gcc-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.gcc-about,
.about2 {
    background: url(../images/locations/gcc/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.gcc-partner {
    background: url(../images/locations/gcc/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End GCC */

/* Start Saudi Arabia */

.saudi-arabia-banner {
    background: url(../images/locations/saudi-arabia/saudi-arabia-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.saudi-arabia-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.saudi-arabia-about,
.about2 {
    background: url(../images/locations/saudi-arabia/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.saudi-arabia-partner {
    background: url(../images/locations/saudi-arabia/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Saudi Arabia */

/* Start Riyadh */

.riyadh-banner {
    background: url(../images/locations/riyadh/riyadh-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.riyadh-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.riyadh-about {
    background: url(../images/locations/riyadh/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.riyadh-partner {
    background: url(../images/locations/riyadh/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Riyadh */

/* Start Bahrain */

.bahrain-banner {
    background: url(../images/locations/bahrain/bahrain-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bahrain-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.bahrain-about {
    background: url(../images/locations/bahrain/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.bahrain-partner {
    background: url(../images/locations/bahrain/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Bahrain */

/* Start Oman */

.oman-banner {
    background: url(../images/locations/oman/oman-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.oman-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.oman-about {
    background: url(../images/locations/oman/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.oman-partner {
    background: url(../images/locations/oman/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Oman */

/* Start Kuwait */

.kuwait-banner {
    background: url(../images/locations/kuwait/kuwait-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.kuwait-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.kuwait-about {
    background: url(../images/locations/kuwait/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.kuwait-partner {
    background: url(../images/locations/kuwait/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Kuwait */

/* Start UAE */

.uae-banner {
    background: url(../images/locations/uae/uae-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.uae-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.uae-about,
.about2 {
    background: url(../images/locations/uae/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.uae-partner {
    background: url(../images/locations/uae/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End UAE */

/* Start Dubai */

.dubai-banner {
    background: url(../images/locations/dubai/dubai-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.dubai-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.dubai-about {
    background: url(../images/locations/dubai/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.dubai-partner {
    background: url(../images/locations/dubai/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Dubai */

/* Start Qatar */

.qatar-banner {
    background: url(../images/locations/qatar/qatar-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.qatar-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.qatar-about {
    background: url(../images/locations/qatar/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.qatar-partner {
    background: url(../images/locations/qatar/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Qatar */

/* Start UK */

.uk-banner {
    background: url(../images/locations/uk/uk-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.uk-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.uk-about,
.about2 {
    background: url(../images/locations/uk/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.uk-partner {
    background: url(../images/locations/uk/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End UK */

/* Start London */

.london-banner {
    background: url(../images/locations/london/london-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.london-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.london-about {
    background: url(../images/locations/london/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.london-partner {
    background: url(../images/locations/london/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End London */

/* Start Leeds */

.leeds-banner {
    background: url(../images/locations/leeds/leeds-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.leeds-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.leeds-about {
    background: url(../images/locations/leeds/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.leeds-partner {
    background: url(../images/locations/leeds/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Leeds */

/* Start Birmingham */

.birmingham-banner {
    background: url(../images/locations/birmingham/birmingham-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.birmingham-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.birmingham-about {
    background: url(../images/locations/birmingham/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.birmingham-partner {
    background: url(../images/locations/birmingham/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Birmingham */

/* Start Africa */

.africa-banner {
    background: url(../images/locations/africa/africa-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.africa-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.africa-about,
.about2 {
    background: url(../images/locations/africa/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.africa-partner {
    background: url(../images/locations/africa/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Africa */

/* Start Johannesburg */

.johannesburg-banner {
    background: url(../images/locations/johannesburg/johannesburg-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.johannesburg-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.johannesburg-about {
    background: url(../images/locations/johannesburg/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.johannesburg-partner {
    background: url(../images/locations/johannesburg/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Johannesburg */

/* Start Morocco */

.morocco-banner {
    background: url(../images/locations/morocco/morocco-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.morocco-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.morocco-about {
    background: url(../images/locations/morocco/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.morocco-partner {
    background: url(../images/locations/morocco/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Morocoo */

/* Start Europe */

.europe-banner {
    background: url(../images/locations/europe/europe-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.europe-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.europe-about,
.about2 {
    background: url(../images/locations/europe/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.europe-partner {
    background: url(../images/locations/europe/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Europe */

/* Start Italy */

.italy-banner {
    background: url(../images/locations/italy/italy-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.italy-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.italy-about,
.about2 {
    background: url(../images/locations/italy/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.italy-partner {
    background: url(../images/locations/italy/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Italy */

/* Start Rome */

.rome-banner {
    background: url(../images/locations/rome/rome-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.rome-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.rome-about {
    background: url(../images/locations/rome/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.rome-partner {
    background: url(../images/locations/rome/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Rome */

/* Start Germany */

.germany-banner {
    background: url(../images/locations/germany/germany-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.germany-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.germany-about {
    background: url(../images/locations/germany/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.germany-partner {
    background: url(../images/locations/germany/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Germany */

/* Start Australia */

.australia-banner {
    background: url(../images/locations/australia/australia-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.australia-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.australia-about,
.about2 {
    background: url(../images/locations/australia/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.australia-partner {
    background: url(../images/locations/australia/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Australia */

/* Start Melbourne */

.melbourne-banner {
    background: url(../images/locations/melbourne/melbourne-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.melbourne-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.melbourne-about {
    background: url(../images/locations/melbourne/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.melbourne-partner {
    background: url(../images/locations/melbourne/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Melbourne */

/* Start Sydney */

.sydney-banner {
    background: url(../images/locations/sydney/sydney-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.sydney-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.sydney-about {
    background: url(../images/locations/sydney/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.sydney-partner {
    background: url(../images/locations/sydney/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Sydney */

/* Start Canada */

.canada-banner {
    background: url(../images/locations/canada/canada-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.canada-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.canada-about,
.about2 {
    background: url(../images/locations/canada/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.canada-partner {
    background: url(../images/locations/canada/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Canada */

/* Start Toronto */

.toronto-banner {
    background: url(../images/locations/toronto/toronto-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.toronto-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.toronto-about {
    background: url(../images/locations/toronto/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.toronto-partner {
    background: url(../images/locations/toronto/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Toronto */

/* Start Pakistan */

.pakistan-banner {
    background: url(../images/locations/pakistan/pakistan-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.pakistan-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.pakistan-about,
.about2 {
    background: url(../images/locations/pakistan/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.pakistan-partner {
    background: url(../images/locations/pakistan/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Pakistan */

/* Start Karachi */

.karachi-banner {
    background: url(../images/locations/karachi/karachi-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.karachi-banner .niwax23form {
    background: rgba(255, 255, 255, 1);
}

.karachi-about {
    background: url(../images/locations/karachi/scale-your-business-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.karachi-partner {
    background: url(../images/locations/karachi/partner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* End Karachi */

/* Start Testimonials */

.testimonial-items {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}

.collapsible-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

.collapsible-text.expanded {
    -webkit-line-clamp: unset;
    display: block;
}

.testimonial-slider .owl-dots {
    display: block !important;
}

.toggle-btn {
    text-decoration: none;
    color: var(--first-color);
    padding-left: 0px;
}

.toggle-btn:hover {
    color: var(--second-color);
    text-decoration: underline;
}

.pilot-slider .testimonial-items img {
    display: block;
    width: auto;
}

.pilot-slider .owl-stage {
    display: flex;
}

.collapsible-heading {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

/* End Testimonials */

/* Start Cost Calculator */


.cost-calculator-new .wizard-form {
    margin-top: 40px;
}

.cost-calculator .wizard-form .book-a-consultant-now {
    position: relative;
    border-radius: 10px;
    padding: 40px 0;
    background: var(--vertical-gradient, linear-gradient(75deg, #089674 .15%, #000 100%));
    z-index: 2;
    bottom: 5%;
}

.cost-calculator .wizard-form .book-a-consultant-now .text-cont {
    margin-left: 45%;
}

.cost-calculator .wizard-form .book-a-consultant-now .text-cont h2 {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.cost-calculator .wizard-form .book-a-consultant-now .text-cont p {
    margin-bottom: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}

.cost-calculator .cost-icons {
    width: 36px;
}

.cost-calculator .wizard-form .book-a-consultant-now a {
    border-radius: 10px;
    background: #089674;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.cost-calculator .wizard-form .wizard {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cost-calculator .wizard-form .wizard .steps {
    position: relative;
    display: block !important;
    width: 30%;
    z-index: 1;
    background: #fff;
}

.cost-calculator .wizard-form .wizard .steps .current-info {
    position: absolute;
    left: -999em;
}

.cost-calculator .wizard-form .wizard .steps a {
    display: block;
    width: auto;
    font-size: 14px;
    padding: 5px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.cost-calculator .wizard-form .wizard .steps .done a {
    color: #000;
}

.cost-calculator .wizard-form .wizard .steps .current a {
    border-radius: 4px;
    background: #089674;
    color: #fff;
    cursor: default;
}

.cost-calculator .wizard-form .wizard .steps>ul {
    display: block !important;
    border-bottom: 0;
    border-right: 1px solid #f6f6f6;
    padding-right: 25px;
    list-style: none;
    padding-left: 0px;
}

.cost-calculator .wizard-form .wizard .steps>ul li a {
    width: 100%;
    border: 0;
    border-radius: 0;
    text-align: left;
    color: #c2c2c2;
    font-size: 16px;
    font-weight: 500;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: auto;
    background: #fff;
    text-decoration: none;
}

.cost-calculator .wizard-form .wizard .steps>ul li a span.number {
    display: none;
}

.cost-calculator .wizard-form .wizard .steps>ul li .active {
    border-radius: 4px;
    background: #089674;
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 8px;
}

.cost-calculator .wizard-form .wizard .content .title {
    position: absolute;
    left: -999em;
}

.cost-calculator .wizard-form .wizard .content .text-cont {
    margin-left: 15px;
    margin-bottom: 10px;
}

.cost-calculator .wizard-form .wizard .content .text-cont h1 {
    color: #000;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cost-calculator .wizard-form .wizard .content .text-cont h1 span {
    color: #089674;
}

.cost-calculator .wizard-form .wizard .content .text-cont p {
    color: #000;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
}

/* .cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label {
	width: 28%;
} */

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label.error {
    position: relative;
    top: 0;
    color: #089674;
    font-weight: 600;
    border: 0;
    cursor: default;
    z-index: 5;
    width: 100%;
    justify-content: left;
    left: 0px;
    height: 0vh !important;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio],
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label,
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label {
    border: 1px solid #089674;
    background: #089674;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label p,
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label p {
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label {
    width: 16%;
    padding: 25px 10px;
    display: flex;
    margin: 12px 16px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #089674;
    transition: .3s;
    cursor: pointer;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label:hover {
    border: 1px solid #089674;
    background: #089674;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label.error:hover {
    background: 0 0;
}

.cost-calculator .wizard-form .wizard .content fieldset.form-input.body {
    display: none;
}

.cost-calculator .wizard-form .wizard .content fieldset.form-input.body.current {
    display: block;
}

.cost-calculator .wizard-form .wizard .actions {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-top: 25px;
    display: block !important;
}

.cost-calculator-new .wizard-form .wizard .actions ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 0 25px;
    position: relative;
    z-index: 999;
    padding-left: 0px;
}

.cost-calculator .wizard-form .wizard .actions ul li a {
    border-radius: 10px;
    border: 1px solid #089674;
    color: #089674;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 13px 0;
    min-width: 150px;
    display: block;
    text-align: center;
}

.cost-calculator .wizard-form .wizard .actions ul li a:hover {
    border: 1px solid #089674;
    color: #ffffff;
    background-color: #089674;
}

.cost-calculator .wizard-form .wizard .actions ul .disabled {
    opacity: 0;
}

.cost-calculator .wizard-form .wizard .actions ul .disabled a {
    cursor: default;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form textarea {
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    width: 100%;
    resize: none;
    outline: 0;
    padding: 0 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}

/* body:has(.cost-calculator) .modal-backdrop {
	opacity: .8;
} */

.cost-calculator-new .wizard-form .book-a-consultant-now {
    position: relative;
    border-radius: 10px;
    padding: 40px 0;
    background: var(--vertical-gradient, linear-gradient(75deg, #089674 .15%, #000 100%));
    z-index: 2;
    bottom: 5%;
}

.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont {
    margin-left: 45%;
}

.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont h2 {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont p {
    margin-bottom: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}

.cost-calculator-new .wizard-form .book-a-consultant-now a {
    border-radius: 10px;
    background: #089674;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.cost-calculator-new .wizard-form .wizard {
    display: block;
    width: 100%;
}

.cost-calculator-new .wizard-form .wizard .steps a {
    display: block;
    width: auto;
    font-size: 14px;
    padding: 5px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.cost-calculator-new .wizard-form .wizard .steps .done a {
    color: #000;
}

.cost-calculator-new .wizard-form .wizard .steps .current a,
.cost-calculator-new .wizard-form .wizard .steps .done a {
    background: rgba(0, 0, 0, 0);
    color: #089674;
    cursor: default;
}

.cost-calculator-new .wizard-form .wizard .steps .current a .number,
.cost-calculator-new .wizard-form .wizard .steps .done a .number {
    background: #089674;
    color: #fff;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cost-calculator-new .wizard-form .wizard .steps .current:after,
.cost-calculator-new .wizard-form .wizard .steps .done:after {
    background: #089674;
}

.cost-calculator-new .wizard-form .wizard .steps>ul {
    display: flex !important;
    border: 0;
    padding-right: 25px;
    list-style: none;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li {
    margin: 0 20px;
    position: relative;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li:after {
    content: "";
    width: 120px;
    height: 2px;
    background: #d9d9d9;
    position: absolute;
    top: 35px;
    left: 45px;
    z-index: -1;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li a {
    width: 100%;
    border: 0;
    border-radius: 0;
    text-align: left;
    color: #000;
    font-size: 12px;
    font-weight: 500;
    padding: 13px 15px;
    display: block;
    align-items: center;
    cursor: auto;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0);
    text-decoration: none;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li a span.number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin: auto;
    border-radius: 100%;
    background: #d9d9d9;
    color: #202020;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li .active span.number {
    background: #089674;
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li:nth-last-child(1):after {
    display: none;
}

.cost-calculator-new .wizard-form .wizard .content .title {
    position: absolute;
    left: -999em;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont {
    margin-left: 15px;
    margin-bottom: 10px;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont h1 {
    color: #000;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont h1 span {
    color: #089674;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont p {
    color: #000;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label {
    width: 16%;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio],
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label,
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label {
    border: 1px solid #089674;
    background: #089674;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label p,
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label p {
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}


.cost-calculator-new .wizard-form .wizard .content fieldset.form-input.body {
    display: none;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.form-input.body.current {
    display: block;
}

.cost-calculator-new .wizard-form .wizard .actions ul .disabled {
    opacity: 0;
}

.cost-calculator-new .wizard-form .wizard .actions ul .disabled a {
    cursor: default;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form textarea {
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    width: 100%;
    resize: none;
    outline: 0;
    padding: 0 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}

.cost-calculator .wizard-form .book-a-consultant-now {
    position: relative;
    border-radius: 10px;
    padding: 40px 0;
    background: var(--vertical-gradient, linear-gradient(75deg, #089674 .15%, #000 100%));
    z-index: 2;
    bottom: 5%;
}

.cost-calculator .wizard-form .book-a-consultant-now .text-cont {
    margin-left: 45%;
}

.cost-calculator .wizard-form .book-a-consultant-now .text-cont h2 {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.cost-calculator .wizard-form .book-a-consultant-now .text-cont p {
    margin-bottom: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}

.cost-calculator .wizard-form .book-a-consultant-now a {
    border-radius: 10px;
    background: #089674;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.cost-calculator .wizard-form .wizard .steps a {
    display: block;
    width: auto;
    font-size: 14px;
    padding: 5px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.cost-calculator .wizard-form .wizard .steps .done a {
    color: #000;
}

.cost-calculator .wizard-form .wizard .steps>ul li a {
    width: 100%;
    border: 0;
    border-radius: 0;
    text-align: left;
    color: #c2c2c2;
    font-size: 16px;
    font-weight: 500;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: auto;
    background: #fff;
    text-decoration: none;
}

.cost-calculator .wizard-form .wizard .steps>ul li a span.number {
    display: none;
}

.cost-calculator .wizard-form .wizard .steps>ul li .active {
    border-radius: 4px;
    background: #089674;
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content .title {
    position: absolute;
    left: -999em;
}

.cost-calculator .wizard-form .wizard .content .text-cont {
    margin-left: 15px;
    margin-bottom: 10px;
}

.cost-calculator .wizard-form .wizard .content .text-cont h1 {
    color: #000;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cost-calculator .wizard-form .wizard .content .text-cont h1 span {
    color: #089674;
}

.cost-calculator .wizard-form .wizard .content .text-cont p {
    color: #000;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio],
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label p,
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label p {
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator .wizard-form .wizard .content fieldset.form-input.body {
    display: none;
}

.cost-calculator .wizard-form .wizard .content fieldset.form-input.body.current {
    display: block;
}

.cost-calculator .wizard-form .wizard .actions ul .disabled {
    opacity: 0;
}

.cost-calculator .wizard-form .wizard .actions ul .disabled a {
    cursor: default;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form textarea {
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    width: 100%;
    resize: none;
    outline: 0;
    padding: 0 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}

.cost-calculator-new .wizard-form .book-a-consultant-now {
    position: relative;
    border-radius: 10px;
    padding: 40px 0;
    background: var(--vertical-gradient, linear-gradient(75deg, #089674 .15%, #000 100%));
    z-index: 2;
    bottom: 5%;
}

.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont {
    margin-left: 45%;
}

.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont h2 {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont p {
    margin-bottom: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}

.cost-calculator-new .wizard-form .book-a-consultant-now a {
    border-radius: 10px;
    background: #089674;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.cost-calculator-new .wizard-form .wizard .steps a {
    display: block;
    width: auto;
    font-size: 14px;
    padding: 5px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.cost-calculator-new .wizard-form .wizard .steps .done a {
    color: #000;
}

.cost-calculator-new .wizard-form .wizard .steps .current:after,
.cost-calculator-new .wizard-form .wizard .steps .done:after {
    background: #089674;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li a {
    width: 100%;
    border: 0;
    border-radius: 0;
    text-align: left;
    color: #000;
    font-size: 12px;
    font-weight: 500;
    padding: 13px 15px;
    display: block;
    align-items: center;
    cursor: auto;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0);
    text-decoration: none;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li a span.number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 100%;
    background: #d9d9d9;
    color: #202020;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li .active span.number {
    background: #089674;
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li:nth-last-child(1):after {
    display: none;
}

.cost-calculator-new .wizard-form .wizard .content .title {
    position: absolute;
    left: -999em;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont {
    margin-left: 15px;
    margin-bottom: 10px;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont h1 {
    color: #000;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont h1 span {
    color: #089674;
}

.cost-calculator-new .wizard-form .wizard .content .text-cont p {
    color: #000;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio],
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label p,
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label p {
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover p {
    color: #fff;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center {
    text-align: -webkit-center;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center p {
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 20px;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.form-input.body {
    display: none;
}

.cost-calculator-new .wizard-form .wizard .content fieldset.form-input.body.current {
    display: block;
}

.cost-calculator-new .wizard-form .wizard .actions ul .disabled {
    opacity: 0;
}

.cost-calculator-new .wizard-form .wizard .actions ul .disabled a {
    cursor: default;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form textarea {
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    width: 100%;
    resize: none;
    outline: 0;
    padding: 0 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}

.cost-calculator .wizard-form .book-a-consultant-now img {
    position: absolute;
    left: -11.5%;
    bottom: 15%;
}

.cost-calculator .wizard-form .wizard .steps .done a img {
    filter: brightness(0);
}

.cost-calculator .wizard-form .wizard .steps .current a img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .steps>ul li a img {
    margin-right: 15px;
}

.cost-calculator .wizard-form .wizard .steps>ul li .active img {
    filter: brightness(9);
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label img,
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label:hover img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator .rough-estimate {
    background: #f6f6f6;
    height: auto;
    padding: 30px;
}

.cost-calculator .rough-estimate h2 {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.cost-calculator .rough-estimate h2 span {
    color: #089674;
}

.cost-calculator .rough-estimate form p {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

.cost-calculator .rough-estimate form .input-group {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 25px 0 rgba(0, 0, 0, .07);
    margin-bottom: 35px;
    padding: 6px 10px;
}

.cost-calculator .rough-estimate form .input-group input {
    border: 0;
    box-shadow: none;
    outline: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 8px #000;
}

.cost-calculator .rough-estimate form .input-group input::placeholder {
    color: #000;
}

.cost-calculator .rough-estimate form .input-group .input-group-prepend .input-group-text {
    border: 0;
    background: #fff;
    color: #089674;
    font-size: 14px;
    font-weight: 600;
}

.cost-calculator .cost-calculator-modal .modal-dialog {
    max-width: 875px;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content {
    border-radius: 20px;
    position: relative;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body {
    padding: 55px 45px;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body .btn-close {
    position: absolute;
    right: -15px;
    top: -15px;
    height: 32px;
    width: 32px;
    background: #089674;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 {
    color: #000;
    text-align: center;
    font-size: 41px;
    font-weight: 600;
    margin-bottom: 35px;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 span {
    color: #089674;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form p {
    color: #089674;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form input {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 35px;
    padding: 4px 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    outline: 0;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form button {
    border-radius: 16px;
    background: #089674;
    padding: 15px 58px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3.2px;
    border: 0;
    margin-top: 43px;
}

.cost-calculator-new .wizard-form .book-a-consultant-now img {
    position: absolute;
    left: -11.5%;
    bottom: 15%;
}

.cost-calculator-new .wizard-form .wizard .steps .done a img {
    filter: brightness(0);
}

.cost-calculator-new .wizard-form .wizard .steps>ul li a img {
    display: none;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li .active img {
    filter: brightness(9);
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover img {
    filter: brightness(30);
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label img,
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label img {
    filter: brightness(30);
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover img {
    filter: brightness(30);
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator-new .rough-estimate h2 span {
    color: #089674;
}

.cost-calculator-new .rough-estimate form .input-group input {
    border: 0;
    box-shadow: none;
    outline: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 8px #000;
}

.cost-calculator-new .rough-estimate form .input-group input::placeholder {
    color: #000;
}

.cost-calculator-new .rough-estimate form .input-group .input-group-prepend .input-group-text {
    border: 0;
    background: #fff;
    color: #089674;
    font-size: 14px;
    font-weight: 600;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog {
    max-width: 875px;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content {
    border-radius: 20px;
    position: relative;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body {
    padding: 55px 45px;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body .btn-close {
    position: absolute;
    right: -15px;
    top: -15px;
    height: 32px;
    width: 32px;
    background: #089674;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 {
    color: #000;
    text-align: center;
    font-size: 41px;
    font-weight: 600;
    margin-bottom: 35px;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 span {
    color: #089674;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form p {
    color: #089674;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form input {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 35px;
    padding: 4px 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    outline: 0;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form button {
    border-radius: 16px;
    background: #089674;
    padding: 15px 58px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3.2px;
    border: 0;
    margin-top: 43px;
}

.cost-calculator-new .business-analyst {
    background-image: url("analyst-bg.webp");
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 20px 0 0px;
}

.cost-calculator-new .business-analyst.lzl:not(.lzl-ed),
.cost-calculator-new .business-analyst.lzl-ing:not(.lzl-ed) {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS4AAABlCAYAAADzqA5YAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACLElEQVR4Ae3QMQEAAADCoPVPbQlPiEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBwGxjdDAAB4FI1RAAAAABJRU5ErkJggg==");
}

.cost-calculator-new .business-analyst ul {
    display: flex;
    list-style: none;
    padding: 0;
    position: relative;
    justify-content: space-between;
}

.cost-calculator-new .business-analyst ul li {
    width: 33.333%;
}

.cost-calculator-new .business-analyst ul li:nth-child(1) {
    position: absolute;
    bottom: 0px;
    left: 0;
}

.cost-calculator-new .business-analyst ul li:nth-child(2) {
    margin-left: 5rem;
}

.cost-calculator-new .business-analyst ul li:nth-child(3) {
    position: absolute;
    right: 0;
    bottom: 6px;
}

.cost-calculator-new .business-analyst ul li h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}

.cost-calculator-new .business-analyst ul li h4,
.cost-calculator-new .business-analyst ul li h5 {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.cost-calculator-new .business-analyst ul li h5 {
    margin-top: 20px;
}

.cost-calculator-new .business-analyst ul li a {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    text-decoration: none;
    border-radius: 10px;
    background: #089674;
    padding: 10px 20px;
}

.cost-calculator .wizard-form .book-a-consultant-now img {
    position: absolute;
    left: -11.5%;
    bottom: 15%;
}

.cost-calculator .wizard-form .wizard .steps .done a img {
    filter: brightness(0);
}

.cost-calculator .wizard-form .wizard .steps .current a img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .steps>ul li a img {
    margin-right: 15px;
}

.cost-calculator .wizard-form .wizard .steps>ul li .active img {
    filter: brightness(9);
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label img,
.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label:hover img {
    filter: brightness(30);
}

.cost-calculator .wizard-form .wizard .content fieldset .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator .rough-estimate h2 span {
    color: #089674;
}

.cost-calculator .rough-estimate form .input-group input {
    border: 0;
    box-shadow: none;
    outline: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 8px #000;
}

.cost-calculator .rough-estimate form .input-group input::placeholder {
    color: #000;
}

.cost-calculator .rough-estimate form .input-group .input-group-prepend .input-group-text {
    border: 0;
    background: #fff;
    color: #089674;
    font-size: 14px;
    font-weight: 600;
}

.cost-calculator .cost-calculator-modal .modal-dialog {
    max-width: 875px;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content {
    border-radius: 20px;
    position: relative;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body {
    /* padding: 55px 45px; */
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body .btn-close {
    position: absolute;
    right: -15px;
    top: -15px;
    height: 32px;
    width: 32px;
    background: #089674;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 {
    color: #000;
    text-align: center;
    font-size: 41px;
    font-weight: 600;
    margin-bottom: 35px;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 span {
    color: #089674;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form p {
    color: #089674;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form input {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 35px;
    padding: 4px 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    outline: 0;
}

.cost-calculator .cost-calculator-modal .modal-dialog .modal-content .modal-body form button {
    border-radius: 16px;
    background: #089674;
    padding: 15px 58px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3.2px;
    border: 0;
    margin-top: 43px;
}

.cost-calculator-new .wizard-form .book-a-consultant-now img {
    position: absolute;
    left: -11.5%;
    bottom: 15%;
}

.cost-calculator-new .wizard-form .wizard .steps .done a img {
    filter: brightness(0);
}

.cost-calculator-new .wizard-form .wizard .steps>ul li a img {
    display: none;
}

.cost-calculator-new .wizard-form .wizard .steps>ul li .active img {
    filter: brightness(9);
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover img {
    filter: brightness(30)
}

.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label img,
.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label img {
    filter: brightness(30)
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover img {
    filter: brightness(30)
}

.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center img {
    display: block;
}

.cost-calculator-new .rough-estimate h2 span {
    color: #089674;
}

.cost-calculator-new .rough-estimate form .input-group input {
    border: 0;
    box-shadow: none;
    outline: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 8px #000;
}

.cost-calculator-new .rough-estimate form .input-group input::placeholder {
    color: #000;
}

.cost-calculator-new .rough-estimate form .input-group .input-group-prepend .input-group-text {
    border: 0;
    background: #fff;
    color: #089674;
    font-size: 14px;
    font-weight: 600;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog {
    max-width: 875px;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content {
    border-radius: 20px;
    position: relative;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body {
    /* padding: 55px 45px; */
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body .btn-close {
    position: absolute;
    right: -15px;
    top: -15px;
    height: 32px;
    width: 32px;
    background: #089674;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 {
    color: #000;
    text-align: center;
    font-size: 41px;
    font-weight: 600;
    margin-bottom: 35px;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 span {
    color: #089674;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form p {
    color: #089674;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form input {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 35px;
    padding: 4px 0 8px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    outline: 0;
}

.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form button {
    border-radius: 16px;
    background: #089674;
    padding: 15px 58px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3.2px;
    border: 0;
    margin-top: 43px;
}

.cost-calculator-new .business-analyst.lzl:not(.lzl-ed),
.cost-calculator-new .business-analyst.lzl-ing:not(.lzl-ed) {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS4AAABlCAYAAADzqA5YAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACLElEQVR4Ae3QMQEAAADCoPVPbQlPiEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBwGxjdDAAB4FI1RAAAAABJRU5ErkJggg==");
}

.cost-calculator-new .business-analyst ul li {
    width: 33.333%;
}

.cost-calculator-new .business-analyst ul li:nth-child(2) {
    margin-left: 5rem;
}

.cost-calculator-new .business-analyst ul li:nth-child(3) {
    position: absolute;
    right: 0;
    bottom: 15px;
}

.cost-calculator-new .business-analyst ul li h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}

.cost-calculator-new .business-analyst ul li h4,
.cost-calculator-new .business-analyst ul li h5 {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.cost-calculator-new .business-analyst ul li h5 {
    margin-top: 20px;
}

.cost-calculator-new .business-analyst ul li a {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    text-decoration: none;
    border-radius: 10px;
    background: #089674;
    padding: 10px 20px;
}

.steps .error {
    height: 0vh;
}

/* End Cost Calculator */

/* royal ride case study by hassan */
/*  hero section by hassan */
.hero-section-royalRide {
    background: linear-gradient(to bottom, #C39449 0%, #C39449 5%, transparent 20%);


    padding-top: 295px;
    background-color: #f8f8f8;
}

.royalRideLogo p {
    color: #C39449;
}

.royalRideLogo h1 {
    font-size: 80px;
    line-height: 92px;
}

.royalRideLogo img {
    width: 110px;
}

.hero-img-1 img {
    max-width: 90%;
    height: auto;
}

/* responsive hero section */
/* 992px */
@media (min-width: 768px) and (max-width: 992px) {
    .hero-section-royalRide {
        background: linear-gradient(to bottom, #C39449 0%, #C39449 5%, transparent 20%);
        padding-top: 90px;
        margin-bottom: 2px;

    }


    .royalRideLogo h1 {
        font-size: 50px;
        line-height: 62px;
    }

    .royalRideLogo img {
        width: 110px;
    }

    .hero-img-1 img {
        max-width: 100%;
        height: auto;
    }
}

/* 767px */
@media (min-width:375px) and (max-width: 767px) {
    .hero-section-royalRide {
        background: linear-gradient(to bottom, #C39449 0%, #C39449 5%, transparent 10%);
        padding-top: 100px;
        margin-bottom: 2px;

    }

    .royalRideLogo p {
        text-align: center;
    }

    .royalRideLogo h1 {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 50px;
        line-height: 62px;
    }

    .royalRideLogo img {
        width: 110px;
    }

    .hero-img-1 img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 374px) {
    .hero-section-royalRide {
        padding-top: 140px;
        margin-bottom: 32px;

    }

    .royalRideLogo p {
        text-align: center;
    }

    .royalRideLogo h1 {
        font-size: 50px;
        line-height: 62px;
    }

    .royalRideLogo img {
        width: 110px;
    }

    .hero-img-1 img {
        max-width: 100%;
        height: auto;
    }
}

/* end hero by hassan */


/* by hassan Problem-section  */
/* --- Base Styling --- */
.Problem-section {
    padding: 60px 0;
}

/* Text Styles */
.Problem-section h2 {
    font-size: 32px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 20px;
}

.Problem-section p {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 19px;
}

/* --- Large Screens (Desktops) --- */
@media (min-width: 1200px) {

    .problem-left-container img,
    .problem-right-container img {
        width: 800px;
        height: 600px;
    }
}

/* --- Tablets (768px to 1199px) --- */
@media (max-width: 1199px) {
    .Problem-section {
        padding: 50px 0;
    }

    .problem-left-container img,
    .problem-right-container img {
        max-width: 420px;
    }
}

/* --- Mobile (up to 767px) --- */
@media (max-width: 767px) {
    .Problem-section {
        padding: 10px 0;
        text-align: center;
    }

    .problem-left-container,
    .problem-right-container {
        margin-bottom: 30px;
    }

    .Problem-section h2 {
        font-size: 26px;
    }

    .Problem-section p {
        font-size: 15px;
    }

    .problem-left-container img,
    .problem-right-container img {
        max-width: 100%;
    }
}

/* End hassan Problem-section  */


/* by hassan Objectives & Goals section */
.Objectives-section {
    margin-top: 22px;
}

.Objectives-section .info-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.Objectives-section .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.card-number-circle {
    width: 45px;
    height: 45px;
    background-color: var(--white-color);
    border: 4px solid #ff7f00;
    color: #ff7f00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 10px;
}

.card-description {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
}


.phone-screen img {
    width: 260px;

}



.calendar-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.day-label,
.date-number {
    padding: 8px;
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.9rem;
}

.day-label {
    font-weight: bold;
    color: #343a40;
}

.date-number.current-month {
    background-color: #f0f2f5;
}

.date-number.selected {
    background-color: #ff7f00;
    color: #fff;
    font-weight: bold;
}

.date-number.other-month {
    color: #ced4da;
}

@media (max-width:992px) {

    .Objectives-section h3 {
        text-align: center;
        margin-top: 22px;
    }
}

/* end hassan Objectives & Goals section */




/* by hassan Business Challenges */

.busniess-img-paytem img,
.busniess-img-phone img,
.bussness-img-lady img {
    width: 102%;
    height: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}

@media (max-width:1399px) {

    .busniess-img-paytem img,
    .busniess-img-phone img,
    .bussness-img-lady img {
        width: 300px;
        height: auto;
        padding-left: 22px;
    }
}

@media (max-width: 992px) {

    .busniess-img-paytem img,
    .busniess-img-phone img,
    .bussness-img-lady img {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
        /* center the image */
        display: block;
        /* ensures centering works */
        padding-left: 0;
        /* remove fixed padding */
    }
}

/* end hassan Business Challenges */

/* by hassan USER PERSONA section */
.persona-top-heading {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 50px;

}

.persona-top-heading h3 {

    font-weight: 800;
}

.persona-top-heading p {
    font-weight: 600;
}


.white-background {
    background-color: var(--white-color);
    border-radius: 20px;
}


.persona-section-wrapper {
    background-color: var(--white-color);
    padding: 20px;
    border: 1px #0000002e solid;
    border-radius: 20px;
    margin: 0;
}

.persona-card {

    background-color: #4e4a4a14;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 10px;
    display: flex;
    flex-direction: column;
}


.persona-left-column-card {
    text-align: center;
    align-items: center;
    height: 100%;

}

.persona-name-section img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ff7f00;
    margin-bottom: 20px;
}

.persona-name-section h4 {
    font-size: 1.8rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #212529;
}

.persona-name-section p {
    font-size: 1rem;
    color: #6c757d;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
    margin-bottom: 30px;
}

.persona-background-section h3,
.persona-goals-section h3,
.persona-painpoints-section h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 5px;
    display: inline-block;
}

@media (min-width: 768px) {

    .persona-goals-section h3,
    .persona-painpoints-section h3 {
        display: block;
        border-bottom: 2px solid #ff7f00;
        width: 100%;
    }
}

.persona-background-section p {
    font-size: 1rem;
    color: #495057;
}

.persona-background-section p b {
    font-weight: 600;
    color: #212529;
}

.persona-goals-section ul,
.persona-painpoints-section ul {
    list-style: none;
    padding-left: 0;
}

.persona-goals-section ul li,
.persona-painpoints-section ul li {
    position: relative;
    padding-left: 25px;
    font-size: 1rem;
    color: #495057;
}

.persona-goals-section ul li::before,
.persona-painpoints-section ul li::before {
    content: "\2022";
    color: #ff7f00;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    position: absolute;
    left: 0;
    top: 0;
}


@media (min-width: 768px) {
    .persona-card {
        margin-bottom: 0;
    }
}

/* end hassan USER PERSONA section */



/* by hassan uiux section  */

/* ----------------------------- */
/*      UI/UX Section Styles      */
/* ----------------------------- */

.uiux-section-wrapper {
    padding: 70px 0;
}

.uiux-main-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
}

.uiux-content-block {
    margin-bottom: 25px;
}

.uiux-subtitle {
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 8px;
}

.uiux-paragraph {
    font-size: 16px;
    line-height: 1.6;
}

/* Image Styling */
.uiux-image-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiux-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* ----------------------------- */
/*      Large Screens (≥1200px)  */
/* ----------------------------- */
@media (min-width: 1200px) {
    .uiux-main-title {
        font-size: 36px;
    }

    .uiux-image {
        max-width: 990px;
    }
}

/* ----------------------------- */
/*    Tablets (768px–1199px)     */
/* ----------------------------- */
@media (max-width: 1199px) {
    .uiux-section-wrapper {
        padding: 60px 0;
    }

    .uiux-image {
        max-width: 450px;
    }
}

/* ----------------------------- */
/*       Mobile (≤767px)         */
/* ----------------------------- */
@media (max-width: 767px) {
    .uiux-section-wrapper {
        padding: 50px 0;
        text-align: center;
    }

    .uiux-text-col {
        margin-bottom: 40px;
    }

    .uiux-main-title {
        font-size: 28px;
    }

    .uiux-subtitle {
        font-size: 18px;
    }

    .uiux-paragraph {
        font-size: 15px;
    }

    .uiux-image {
        max-width: 100%;
    }
}

/* end hassan uiux section  */




/* by hassan User Research section  */

.user-research-section {
    background-color: #f8f8f8;
    color: #1a1a1a;
}


.uiux-subtitle {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c0a16b;
}

.uiux-title {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
    color: #000000;
}


.uiux-paragraph {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444444;
}


.research-image {
    max-height: 570px;
    width: auto;
    border-radius: 8px;
}

/* --- Responsiveness Improvement --- */


@media (max-width: 767.98px) {
    .uiux-title {
        font-size: 2rem;
    }

    .uiux-paragraph {
        margin-bottom: 2rem;
    }

    .research-image {
        margin-bottom: 2rem;
    }
}

/* end hassan User Research section  */

.comp-analysis-container {
    margin: 0 auto;
    padding: 0 15px;
}

.comp-analysis-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.comp-analysis-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.comp-analysis-image {
    width: 100%;
    height: auto;
    max-width: 100%;
}


@media (max-width: 480px) {
    .comp-analysis-title {
        font-size: 1.2rem;
    }

    .comp-analysis-image {
        width: 100%;
    }
}


@media (min-width: 481px) and (max-width: 768px) {
    .comp-analysis-title {
        font-size: 1.3rem;
    }

    .comp-analysis-image {
        width: 90%;
    }
}


@media (min-width: 769px) and (max-width: 1024px) {
    .comp-analysis-title {
        font-size: 1.4rem;
    }

    .comp-analysis-image {
        width: 80%;
    }
}


@media (min-width: 1025px) {
    .comp-analysis-title {
        font-size: 1.6rem;
    }

    .comp-analysis-image {
        width: 70%;
    }
}

.section-wrapper {
    position: relative;
    padding-top: 100px;
}

.start-connector {
    position: absolute;
    top: 0;
    left: 120px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.start-plus-circle {
    width: 60px;
    height: 60px;
    background-color: #dcb880;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.connector-line-vertical {
    width: 2px;
    height: 140px;
    background-color: #dcb880;
}

.connector-line-horizontal {
    position: absolute;
    top: 200px;
    left: 50px;
    width: 50px;
    height: 2px;
    background-color: #dcb880;
    display: none;
}

@media (min-width: 992px) {
    .start-connector {
        left: calc((100% - 1320px) / 226 + 20px);
    }

    .section-wrapper::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 50px;
        width: 2px;
        height: 150px;
        background-color: #dcb880;
        z-index: 0;
    }

    .section-wrapper::after {
        content: '';
        position: absolute;
        top: 210px;
        left: 50px;
        width: 60px;
        height: 2px;
        background-color: #dcb880;
        z-index: 0;
    }
}

@media (max-width: 991px) {

    .section-wrapper::before,
    .section-wrapper::after,
    .start-connector {
        display: none;
    }

    .section-wrapper {
        padding-top: 20px;
    }
}

.card-custom {
    border: none;
    border-radius: 15px;
    padding: 30px 20px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.3s ease;
}

.card-custom:hover {
    transform: translateY(-5px);
}

.bg-gold {
    background-color: #dcb880;
    color: #2c2c2c;
}

.bg-white-custom {
    background-color: #fff;
    color: #2c2c2c;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.number-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 30px;
}

.card-title-custom {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.card-text-custom {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}

.card-connector-plus {
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #eaddcf;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 5;
    font-size: 18px;
}

.col-custom:last-child .card-connector-plus {
    display: none;
}

@media (max-width: 991px) {
    .card-connector-plus {
        display: none;
    }

    .card-custom {
        min-height: auto;
        margin-bottom: 20px;
    }

    .number-circle {
        margin-bottom: 15px;
    }
}

.row-five-cols {
    display: flex;
    flex-wrap: wrap;
}

.row-five-cols>.col-custom {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 768px) {
    .row-five-cols>.col-custom {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .row-five-cols>.col-custom {
        width: 20%;
        padding: 0 10px;
    }

    .section-wrapper {
        padding-left: 50px;
    }
}

.card-inner {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 450px;
    /* same as image height */
    max-height: 500px;
    transform-style: preserve-3d;
    /* important for 3D flip */
    transition: transform 0.9s;
}

/* Flip on hover */
.isotope_item.up-hor:hover .card-inner {
    transform: rotateY(180deg);
}

/* Front and back images stay as is */
.item-image-front,
.item-image-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    /* hide the back when rotated */
    border-radius: 10px;
    overflow: hidden;
}

.item-image-front img,
.item-image-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* :fire: main cheez */
    display: block;
    padding-left: 40px;
}

.item-image-back {
    transform: rotateY(180deg);
    /* back is initially flipped */
}

.left {
    border-left: 1px solid #000;
    padding-left: 20px;
}

.item-info-div {
    padding: 25px;
    position: relative;
    top: 15px;
    width: 95%;
    margin: 0 auto;
    text-align: start;
    font-family: Poppins, sans-serif;
}

.item-info-div a,
.item-info-div h5 {
    margin: 0;
    color: #314252;
}

.item-info-div h5 {
    background-color: #0e0c0cb0;
    border: 2px solid white;
    width: fit-content;
    padding: 0px 26px;
    border-radius: 20px;
    font-size: 17px;
    color: var(--white-color);
    font-weight: bold;
    margin: 10px 0;
}

.item-info-div .casestudyButton {
    /* background-color: #007bff; */
    color: crimson;
    border: 1px solid var(--first-color);
    width: fit-content;
    margin: 20px 0 0 0;
    padding: 10px 30px;
    border-radius: 20px;
}

.item-info-div .casestudyButton:hover {
    background-color: var(--first-color);
}

.item-info-div .casestudyButton:hover a {
    color: var(--white-color);
}

.item-info-div p {
    color: #314252;
    font-weight: normal;
}


/* start mike miths case study */


/*Start mike mathis case study*/
/* Start hero section  */
.mike-mathis-app {
    background: url("../images/case-studies/mike-mathis-app/background-hero-section.webp") center/cover no-repeat;
}

.mike-mathis-app .logo {
    width: 100%;
    max-width: 200px;
}

.mike-mathis-app img {
    padding-left: 22px;
    width: 100%;
}




.mike-mathis-app h1,
.mike-mathis-app p {
    color: var(--white-color);
    font-weight: bold;
}

/* End hero section  */

/*Start mike-mithis project description section */
.mike-mithis-project-description-right {
    text-align: start;
    margin-top: 30px;
}

.mike-mithis-project-description img {
    padding-left: 22px;
    width: 100%;
    max-width: 200px;
    height: auto;

}

/*End mike-mithis project description section */


/*Start Project-info */

.Project-info {
    background-color: var(--white-color)smoke;
    border-radius: 30px;
    padding: 60px 0;
    background-size: 100% 65%;
    text-align: start;
}

.Project-info-img img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    padding-left: 0;
    margin: 20px auto 0;
    display: block;
}

.Project-info-contant h2 {
    font-size: 54px;
    font-weight: bold;
    margin-bottom: 25px;
    color: var(--black-color);
    word-spacing: 8px;
}

.Project-info-contant p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: bold;
    color: var(--black-color);
    margin-bottom: 10px;
}



/*End Project-info */


/* ===== start Project-Description  ===== */
.Project-Description {
    padding: 60px 0;
    background: url("../images/case-studies/mike-mathis-app/Project-Description-background.webp") center/cover no-repeat;
    background-size: 100% 70%;
}

.Project-Description .Project-Description-left-container img {
    width: 100%;
    max-width: 350px;
    border-radius: 8px;
    padding-left: 0;
    margin: 20px auto 0;
    display: block;
}

.Project-Description-title {
    font-size: 54px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--white-color);
}

.Project-Description-titleparagraph {
    font-size: 14px;
    line-height: 1.9;
    font-weight: bold;
    color: var(--white-color);
}

/* ===== end Project-Description  ===== */


/* ===== Start Project challenges  ===== */
.Project-Challenges {
    padding: 60px 0;
    background: url("../images/case-studies/mike-mathis-app/project-challenges-background.webp") center/cover no-repeat;
    background-size: 100% 65%;
}

.Project-Challenges .Project-Challenges-left-container img {
    width: 100%;
    max-width: 350px;
    border-radius: 8px;
    padding-left: 0;
    margin: 20px auto 0;
    display: block;
}

/* ===== End Project challenges  ===== */
.mike-mathis-Objectives .card-number-circle {
    border: 4px solid black;
    color: #000;
    padding: 30px;
}

.mike-mathis-Objectives .phone-screen img {
    width: 100%;
    max-width: 350px;
    margin-top: 25px;
}

/* Start user research section */
.user-research {
    padding: 50px 0;
}

.user-research h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.user-research-ul {
    padding-left: 20px;
}

.user-research-ul li {
    background-color: #E9EBF0;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    border: 1px solid black;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px 0 rgba(19, 0, 46, .0);
}

.user-research-ul li:hover {
    transition: ease-in-out;
    box-shadow: 0 4px 6px 0 rgba(19, 0, 46, 1.0);
}

.user-research img {
    width: 100%;
    max-width: 350px;
    border-radius: 8px;
    padding-left: 0;
    margin: 20px auto 0;
    display: block;
}

/* End user research section */



/*Start mike-mathi Wireframes section */
.mike-mathis-wireframe {
    background: #071739;
    border-radius: 30px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-left: 8px;
    margin-right: 8px;
}

.mike-mathis-wireframe p {
    color: var(--white-color);
    padding-bottom: 30px;
}

.mike-mathis-wireframe h2,
.mike-mathis-wireframe h4 {
    color: var(--white-color);
    padding-bottom: 30px;
}

.mike-mathis-wireframe-gallery .col-6 {
    display: flex;
    justify-content: center;
}

.mike-mathis-wireframe .wire-img {
    width: 100%;
    max-width: 350px;
}

/*End mike-mathi Wireframes section */



/*Start mike-mathi uiux design phase section */
.mike-mathis-design-phase {
    padding: 60px 0;
    text-align: start;
}

.mike-mathis-design-phase .mike-mathis-design-phase-left-container img {
    width: 100%;
    border-radius: 10px;
}

.mike-mathis-design-phase-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.mike-mathis-design-phase-paragraph {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
}


.uiux-text-col {
    text-align: start;
    margin-bottom: 30px;
}

/*End mike-mathi uiux design phase section */
/* End mike miths case study */




/* start grave love case study */
/* Start hero section */
.grave-love-app {
    background: url("../images/case-studies/grave-love-app/grave-love-hero-backgroung.webp") center/cover no-repeat;
}

.grave-love-app .logo {
    width: 100%;
    max-width: 200px;
    margin: 0;
}

.grave-love-hero-img img {
    margin-left: 122px;
    margin-top: 200px;
    width: 100%;
}


.grave-love-app h1,
.grave-love-app h4,
.grave-love-app p {
    color: #FBF0C4;
    font-weight: bold;
}

.grave-love-app .playStore-img img {
    width: 300px;
}

/* End hero section */

/* Start  Problem-section  */
.grave-love-problem-section {
    background: url("../images/case-studies/grave-love-app/problem-backgrond.webp") center/cover no-repeat;
    background-size: 90% 60%;
}

.grave-love-problem-contant {
    margin: 10px 10px 10px 10px;
}

.grave-love-problem-contant h2,
.grave-love-problem-contant p {
    color: var(--white-color);
}

/* End grave love problem-section  */


/* End grave love problem solution  */
.grave-problem-solution .card-connector-plus,
.grave-problem-solution .start-plus-circle {
    background-color: #373631;
    color: var(--white-color);
}

.grave-problem-solution .section-wrapper::before,
.grave-problem-solution .section-wrapper::after {
    background-color: #373631;
}

/* End solution section  */

/* start grave love problem solution  */
.bg-custom-gray {
    background-color: #373631;
    color: var(--white-color);
}

.bg-custom-gray h4 {
    color: var(--white-color);
}

.bg-custom-gray .number-circle {
    border: 2px solid white;
}

.bg-custom-white {
    background-color: var(--white-color);
    color: var(--black-color);
    border: 1px solid #373631;
}

.bg-custom-white h4,
.bg-custom-white p {
    color: #000;
}

/* End grave love problem solution  */

/*Start  grave love wireframe */

.grave-love-wireframe {
    background: url("../images/case-studies/grave-love-app/wireframe-background.webp") center/cover no-repeat;
    border-radius: 30px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-left: 8px;
    margin-right: 8px;
}

.grave-love-wireframe p {
    color: var(--white-color);
    padding-bottom: 30px;
}

.grave-love-wireframe h2,
.grave-love-wireframe h4 {
    color: var(--white-color);
    padding-bottom: 30px;
}

.grave-love-wireframe-gallery .col-6 {
    display: flex;
    justify-content: center;
}

/*End  grave love wireframe */
/*Start grave love apps screen */
.grave-love-apps img {
    max-width: 290px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/*End grave love apps screen */

/* start grave-love project goal */
.grave-love-project-goals {
    border-radius: 20px;
}

.grave-love-project-goals img {
    object-fit: cover;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}


.grave-love-project-goals .info-card3 {

    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: all .3s ease;
}

.grave-love-project-goals .info-card3:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.grave-love-project-goals .grave-love-project-goals .info-card3 h5 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
    color: #2d2926;
}


.grave-brown {
    background: #42262B;
    border: 1px solid black;
    border-radius: 20px;
}

.grave-brown h5,
.grave-brown h6,
.grave-brown p {
    color: var(--white-color);
    padding: 0;
    margin: 0;
}

.grave-light {
    background: #F1F1F1;
    border: 1px solid black;
    border-radius: 20px;

}

.grave-light h5,
.grave-light h6,
.grave-light p {
    color: var(--black-color);
    margin: 0;

}

/* End grave-love project goal */



/*Start the result Section */
.grave-result-section {
    background-color: #fafafa;
}

/* Card */
.grave-result-card {
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
}

.grave-result-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.grave-result-card img {
    width: 48px;
    margin-bottom: 1rem;
}

.grave-result-card h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.grave-result-card p {
    font-size: 0.95rem;
    color: #555;
}

/* Image */
.grave-result-image img {
    width: 100%;
    max-width: 636px;
}

/*End the result Section */



/* End grave love case study */








/*start bomb defuse section  */
#bomb-defuse-background {
    background: url("../images/case-studies/bomb-defuse-app/background812.webp")top center/cover no-repeat;
    background-size: 100% 76%;
}

.bomb-defuse-spaceing {
    margin: 120px 0 120px 0;
}

/* start hero section bomb defuse */
.bomb-defuse-app {
    padding: 200px 0px 190px 0px;

}

.bomb-defuse-app .bread-titlev2 {
    text-align: center;
    color: var(--white-color);
}

.bomb-defuse-app .bread-titlev2 h1 {
    color: #FAAF3A;
    margin-top: 20px;
}

.bomb-defuse-app .bread-titlev2 p {
    margin: 30px;
    font-size: 29px;
    word-spacing: 2px;

}

.bomb-defuse-app .logo {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}

/* End hero section bomb defuse */


/*Start introduction bomb squad Section*/
.introduction-bomb-squad .introduction-bomb-squad-content h2 {
    padding-bottom: 20px;
}

.introduction-bomb-squad .introduction-bomb-squad-content h2,
.introduction-bomb-squad .introduction-bomb-squad-content p {
    color: var(--white-color);
    margin-bottom: 20px;
}

.introduction-bomb-squad .introduction-bomb-squad-content h2 span,
.introduction-bomb-squad .introduction-bomb-squad-content p span {
    color: #FAAF3A;
}

.introduction-bomb-squad-img img {
    width: 100%;
    max-width: 380px;
    display: block;
    margin: 0 auto;
}

/*End introduction bomb squad Section*/



/*start project idea bomb defuse squad Section*/
.project-idea-bomb-defuse .project-idea-content h2 {
    padding-bottom: 20px;
}

.project-idea-bomb-defuse .project-idea-content h2,
.project-idea-bomb-defuse .project-idea-content p {
    color: var(--white-color);
}

.project-idea-bomb-defuse .project-idea-content h2 span,
.project-idea-bomb-defuse .project-idea-content p span {
    color: #FAAF3A;
}

.project-idea-bomb-defuse-img img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

/*End project idea bomb defuse Section */


/*Start bomb defuse Ranking section */
.bomb-defuse-Ranking-section h2 {
    color: #FAAF3A;
    text-align: center;
    padding: 50px 0 50px 0;

}

.bomb-defuse-Ranking-section img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

/* start bomb-defuse-mockup section */
.bomb-defuse-mockup h2 {
    color: #FAAF3A;
    text-align: center;
    padding: 50px 0 50px 0;
}

.bomb-defuse-mockup img {
    display: block;
    margin: 0 auto;
}

/* End bomb-defuse-mockup section */


/* start bomb defuse Achievements section  */
.achievements-bomb-defuse h2 {
    color: wheat;
    margin: 10px 0 10px 0;
}

.achievements-bomb-defuse h2 span {
    color: #FAAF3A;
}

.achievements-bomb-defuse p {
    color: var(--white-color);
    line-height: 40px;
}

/* End bomb defuse Achievements section  */

/*Start bomb defuse result section  */
.bomb-defuse-result-section {
    text-align: center;
}

.bomb-defuse-result-section h2 {
    color: wheat;
}

.bomb-defuse-result-section h2 span {
    color: #FAAF3A;
}

.bomb-defuse-result-section p {
    color: var(--white-color);
    line-height: 40px;
}

/* 
    /*End bomb defuse result section  */
/*End bomb defuse section  */


/* start couple app case study */
.couple-app {
    background: url("../images/case-studies/couple-app/hero-background-couple-app.webp") center/cover no-repeat;
}

.couple-app .logo {
    width: 100%;
    max-width: 150px;
    margin-bottom: 40px;
}

.couple-app-hero-img img {
    width: 100%;
    display: block;
    margin: 0 100px auto;
}


.couple-app h1,
.couple-app p {
    color: #FFFFFF;
    font-weight: bold;
}

.couple-app h1 {
    font-size: 52px;
}

.couple-app p {
    line-height: 42px;
    font-size: 25px;
    word-spacing: 2px;
    border-left: 3px solid #ffffff;
    padding: 12px 0 12px 19px;

}

.couple-app .couple-tag {
    background-color: #440414;
    color: #ffffff;
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
}

/* End couple app case study */

/* start couple app Client Overview Section */
.couple-app-land-wrapper {
    background: url("../images/case-studies/couple-app/client-overview-background.webp")center/cover no-repeat;
    background-size: 100% 68%;
    border-radius: 20px;
    padding: 45px 0px 44px 15px;
}

.couple-app-client-overview h2,
.couple-app-client-overview h6 {
    color: var(--black-color);
    padding-top: 10px;
}

.couple-app-client-overview h2 {
    color: #440414;
    padding-bottom: 10px;
}

.couple-app-client-overview p {
    color: var(--black-color);
    padding-bottom: 13px;
}

.couple-app-client-overview .left-border-clint-overview {
    padding: 0px 0px 0px 15px;
    margin: 20px;
    border-left: 2px solid #440414;
}

/* End couple app Client Overview Section */

/*start Key Problems Section*/
.couple-app-key-problems {
    background: url("../images/case-studies/couple-app/key-problems-background-img.webp") center/cover no-repeat;
    border-radius: 30px;
    padding: 40px 25px;
}


.development-challenges-left {
    border-left: 4px solid #ffffff;
    padding-left: 15px;
}




.couple-app-key-problems .info-card3 p {
    border-left: 2px solid #440414;
    padding-left: 20px;
}

.couple-app-key-problems .info-card3 {
    height: 240px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.couple-app-key-problems .info-card3:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-5px);
}


.couple-app-key-problems .info-card3 .card-number-circle {
    border: 4px solid #440414;
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 10px;
}


.couple-app-key-problems .info-card3 p {
    color: #000;
}

/*End Key Problems Section*/



/*Start couple persona section */
.couple-persona-section .persona-card img,
.couple-persona-section .persona-card h3 {
    color: #440414;
    border-color: #440414;
}


.couple-persona-section .persona-goals-section ul li::before,
.couple-persona-section .persona-painpoints-section ul li::before {
    content: "\2022";
    color: #440414;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    position: absolute;
    left: 0;
    top: 0;
}

/*END couple persona section */

/*Start couple app uiux section */
.couple-app-uiux-section-wrapper {
    background: linear-gradient(#F4F4F4 0%, #FFFFFF 100%);
}

.couple-app-uiux-section-wrapper .uiux-subtitle {
    font-size: 22px;
    color: #440414;

}

/*End couple app uiux section */


/*Start designing section */

/* project design goal */
.couple-app-designs .container {
    position: relative;
}

.couple-app-designs .common-heading h2 span {
    color: #BC8A4D;
}

.couple-app-designs .neuro-night-central-line {
    position: absolute;
    width: 4px;
    background-color: #37424A;
    top: 14%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.couple-app-designs .neuro-night-text-theme {
    color: var(--white-color);
    font-weight: 600;
}

.couple-app-designs .neuro-night-feature-box:hover {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.couple-app-designs .left-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box {
    background: #BB8A4D;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.couple-app-designs .left-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box:nth-child(2) {
    background-color: #440314;
}



.couple-app-designs .right-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box {
    background: #440314;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}



.couple-app-designs .right-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box:nth-child(2) {
    background-color: #BB8A4D;
}

.couple-app-designs .neuro-night-feature-box-group .neuro-night-feature-box h4,
.couple-app-designs .left-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box p,
.couple-app-designs .right-column-neuro-night .neuro-night-feature-box-group .neuro-night-feature-box p {
    color: var(--white-color);
}

/* End project design goal */
/* End couple app case study */




/* start car mechanic case study Section*/
#car-mechanic-background {
    background: url("../images/case-studies/car-mechanic-app/background-car-mechanic.webp")top center / cover no-repeat;
    background-size: 100% 78%;
}

/* start hero car mechanic */
.car-mechanic {
    padding: 200px 0px 190px 0px;

}

.car-mechanic .bread-titlev2 {
    text-align: center;
    color: var(--white-color);
}

.car-mechanic .bread-titlev2 h1 {
    color: var(--white-color);
    margin-top: 20px;
}

.car-mechanic .bread-titlev2 p {
    margin: 30px;
    font-size: 29px;
    word-spacing: 2px;

}

.car-mechanic .bread-titlev2 h1 span {
    color: #FF5E00;
}

.car-mechanic .logo {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

.car-mechanic .car-mechanic-hero-tag {
    background-color: var(--white-color);
    color: #FF5E00;
    padding: 20px 10px 20px 10px;
    text-align: center;
    display: inline-block;
    border-radius: 10px;
    font-weight: bold;
}


/* Start introduction bomb squad Section   */
.car-mehanic .car-mehanic-content h2 {
    padding-bottom: 20px;
}

.car-mehanic .car-mehanic-content h2,
.car-mehanic .car-mehanic-content p {
    color: var(--white-color);
    margin-bottom: 20px;
}

.car-mehanic .car-mehanic-content h2 span,
.car-mehanic .car-mehanic-content p span {
    color: #FF5E00;
}

.car-mehanic-img img {
    width: 100%;
    max-width: 380px;
    display: block;
    margin: 0 auto;
}

/* Start introduction bomb squad Section   */



/*start project idea car mechanic Section*/
.project-idea-car-mechanic .project-idea-content h2 {
    padding-bottom: 20px;
}

.project-idea-car-mechanic .project-idea-content h2,
.project-idea-car-mechanic .project-idea-content p {
    color: var(--white-color);
}

.project-idea-car-mechanic .project-idea-content h2 span,
.project-idea-car-mechanic .project-idea-content p span {
    color: #FF5E00;
}

.project-idea-car-mechanic-img img {
    width: 100%;
    max-width: 380px;
    display: block;
    margin: 0 auto;
}

/*End project idea car mechanic Section*/
.car-mechanic-result-section h2,
.car-mechanic-result-section p {
    color: var(--white-color);
    text-align: center;
}

.car-mechanic-result-section h2 span,
.car-mechanic-result-section p span {
    color: #FF5E00;
}

/* End car mechanic case study Section*/




/* start toy sort puzzle case studys section  */
#toy-sort-puzzle {
    background: url("../images/case-studies/toy-sort-puzzle/toy-sort-puzzle-background.webp")top center / cover no-repeat;
    background-size: 100% 76.1%;

}

/*Start toy sort hero section */
.toy-sort-puzzle {
    padding: 220px 0px 235px 0px;

}

.toy-sort-puzzle .bread-titlev2 h1,
.toy-sort-puzzle .bread-titlev2 p {
    text-align: center;
    color: var(--white-color);

}

/* ===== Floating Animation ===== */
.imageFloteLeft img,
.imageFloteRight img {
    width: 100%;
    max-width: 80px;
    height: auto;
    animation: floatY 3s ease-in-out infinite;
}

@keyframes floatY {
    0% {
        transform: translateY(0);
    }

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

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

/* Logo center */
.logo {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

/*End toy sort hero section */

/* start toy sort introduction */
.toy-sort-introduction .imageFloteRight img {
    max-width: 200px;

}

.toy-sort-introduction .toy-sort-title,
.toy-sort-introduction .toy-sort-paragraph {
    color: var(--white-color);
}

.toy-sort-introduction .toy-sort-title span,
.toy-sort-introduction .toy-sort-paragraph span {
    color: #FFEC00;
    text-align: start;
}

/* end toy sort introduction */

/*start toy sort  project-idea section*/
.toy-sort-project-idea .imageFloteRight img {
    max-width: 80px;

}

.toy-sort-project-idea .toy-sort-title,
.toy-sort-project-idea .toy-sort-paragraph {
    color: var(--white-color);
}

.toy-sort-project-idea .toy-sort-title span,
.toy-sort-project-idea .toy-sort-paragraph span {
    color: #FFEC00;
    text-align: start;
}

/*End toy sort  project-idea section */

/*start toy sort target audience  section*/
.toy-sort-audience-target h2,
.toy-sort-audience-target p {
    text-align: center;
    color: var(--white-color);
}

.toy-sort-audience-target h2 span {
    color: #FFEC00;
}

.toy-sort-target-audience-img img {
    width: 100%;
    max-width: 900px;
}

/*End toy sort target audience  section*/



/*start toy sort element section*/
.toy-sort-Element h2 {
    color: var(--white-color);
    text-align: center;
}

.toy-sort-Element .imageFloteLeft img {
    width: 100%;
    max-width: 100px;

}

.toy-sort-Element img {
    width: 100%;
    max-width: 900px;
}

/*end toy sort element section*/


/*start toy sort player feedback section */
.toy-sort-player-feedback h2 {
    color: var(--white-color);
}

.toy-sort-player-feedback .imageFloteLeft img,
.toy-sort-player-feedback .imageFloteRight img {
    width: 100%;
    max-width: 100px;
}

.toy-sort-user-feedback-img img {
    width: 100%;
    max-width: 320px;
}

/*End toy sort player feedback section */




/* new case study start  royal relax spa */
/* start hero royal relax spa section */
.royal-relax-spa {
    background:
        linear-gradient(to bottom,
            #6D5AE6 0%,
            #6D5AE6 8%,
            #CDC4F2 15%,
            transparent 30%),
        url("../images/case-studies/royal-relax-spa/royal-spa-hero-background.webp") top center / cover no-repeat;
}

.royal-relax-spa h1 {
    color: var(--black-color);
    font-weight: bold;
    line-height: 60px;
}

.royal-relax-spa h1 span {
    color: #6D5AE6;
}

.royal-relax-spa p {
    color: #3F3F3F;
    border: 1px solid #6D5AE8;
    width: fit-content;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0 10px 0px;
    font-family: sans-serif;
    letter-spacing: 0.1px;
    word-spacing: 1.2px;
    line-height: 36px;
}


.royal-relax-spa-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    font-weight: 600;
    color: #ffffff;

    background-color: #6D5AE6;
    padding: 8px 14px;
    border-radius: 999px;

    cursor: pointer;
    transition: all 0.3s ease;
}

.royal-relax-spa-tag i {
    transition: transform 0.3s ease;
}

.royal-relax-spa-tag:hover i {
    transform: translateX(4px);
}

.royal-relax-spa-tag:hover {
    background-color: #CDC4F2;
    color: #6D5AE6;
}

.royal-relax-spa-hero-img img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

/* end hero royal relax spa section */



/*start royal relax project Description section */
.royal-relax-project-description-section {
    background: url("../images/case-studies/royal-relax-spa/project-dec-background.webp") center/cover no-repeat;
    background-size: 100% 100%;
}

.royal-relax-project-description-contant h2,
.royal-relax-project-description-contant p {
    color: var(--white-color);
}

.royal-relax-project-description-img img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
    padding: 30px;
}

/*End royal relax project Description section */

/* start royal relax spa problem-solution section */
.royal-relax-spa-problem-solution .section-wrapper::before,
.royal-relax-spa-problem-solution .section-wrapper::after {
    background-color: #6D5AE8;

}

.royal-relax-spa-problem-solution .start-plus-circle {
    background-color: #6D5AE8;
    color: var(--white-color);
}

.royal-relax-spa-problem-solution .card-connector-plus {
    background-color: #6D5AE8;
    color: var(--white-color);
}

.royal-relax-spa-problem-solution .card-custom {
    justify-content: center;
}

.royal-relax-spa-problem-solution .bg-custom-gray {
    background-color: #6D5AE8;
}

/* End royal relax spa problem-solution section */


/* start royal relax spa project-goals section */
.royal-relax-spa-project-goals .info-card {
    box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.18);
    border: none
}

.royal-relax-spa-project-goals .grave-brown {
    background-color: #6D5AE6;
}

/* End royal relax spa project-goals section */


/* start royal relax spa persona  section*/
.royal-relax-spa-persona .persona-name-section img {
    border: none;
}

.royal-relax-spa-persona .persona-background-section h3,
.persona-goals-section h3,
.persona-painpoints-section h3 {
    color: #000;
    border: none;
}

.royal-relax-spa-persona .persona-goals-section ul li::before,
.persona-painpoints-section ul li::before {
    color: #000;
}

/* End royal relax spa persona  section*/


/*stat royal relax spa wireframe section*/
.royal-relax-spa-wireframe {
    background: url("../images/case-studies/royal-relax-spa/wirefram-background.webp")top center/cover no-repeat;
    padding: 30px;
}

.royal-relax-spa-wireframe h2,
.royal-relax-spa-wireframe p,
.royal-relax-spa-wireframe h4 {
    color: var(--white-color);
}

/*End royal relax spa wireframe section*/

.royal-relax-Features-mockup img {
    width: 100%;
    max-width: 900px;
    display: block;
    margin: 0 auto;

}

.royal-relax-spaceing {
    margin: 190px 0 80px 0;
}

/* new case study end  royal relax spa */



/* load board case study start */

/* start load board  hero section */
.load-board-hero-section {
    background: url("../images/case-studies/Load-board/hero-background.webp") top center/ cover no-repeat;
}


.load-board-hero-section .logo img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

.load-board-hero-section .load-board-hero-img img {
    width: 100%;
    max-width: 1000px;
    display: block;
    margin: 0 auto;

}

.load-board-hero-section h1,
.load-board-hero-section h5,
.load-board-hero-section p {
    text-align: center;
    color: var(--white-color);
    padding: 10 px 0 20px 0;
}

.load-board-hero-section p {
    font-size: 12px;
}

.load-board-hero-section h5 {
    display: block;
    width: fit-content;
    margin: 10px auto;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(90deg, #1070A2 0%, #06293C 100%);
    border-radius: 20px;
    padding: 18px 18px;
}

.load-board-hero-section .hero-img img {
    width: 100%;
    max-width: 800px;
}

/* End load board  hero section */


/* start load board Project Overview section */
.load-board-project-overview-section {
    background: url("../images/case-studies/Load-board/circle.webp")left top / contain no-repeat;
    background-size: 100% 100%;
}

.load-board-project-overview-section .load-board-project-overview-contant p {
    font-size: 14px;
    word-spacing: 3px;
    font-weight: bold;
    color: #555;

}

.load-board-project-overview-section .load-board-project-overview-img img {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0 auto;


}

/* End load board Project Overview section */

/* Start load board problem challenges section */
.load-board-problem-challenges-section {
    background: url("../images/case-studies/Load-board/problem-challenges-background.webp") top center/ cover no-repeat;
}

.load-board-problem-challenges-section .load-board-problem-challenges-img img {
    width: 100%;
    max-width: 575px;
    display: block;
    margin: 0 auto;
}

.load-board-problem-challenges-section .load-board-problem-challenges-contant p {
    margin-bottom: 75px;
    font-size: 14px;
    word-spacing: 3px;
    font-weight: bold;
    color: #555;
}

/* End load board problem challenges section */



/* Start load boardKey Challenges Faced section */
.Key-Challenges-Faced-section {
    background: url("../images/case-studies/Load-board/circle.webp")left top / contain no-repeat;
    background-size: 20% 100%;
}

.Key-Challenges-Face {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0;
}

.key-challenge-box {
    background-color: #f9f9f9;
    border: 1px solid #00ADF0;
    border-radius: 12px;
    padding: 1.8rem 1.5rem;
    flex: 1 1 calc(50% - 2rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.key-challenge-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


.key-challenge-box h4 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #333;
}


.key-challenge-box p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* End load boardKey Challenges Faced section */

/*start load board  tech section */
.load-board-tech {
    background: url("../images/case-studies/Load-board/tecnology-background.webp") top center/cover no-repeat;
    padding: 60px 20px;
    /* more breathing space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    text-align: center;
}


.load-board-tech .common-heading h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.load-board-tech .common-heading p {
    color: #fff;
    font-size: 1.05rem;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

.load-board-tech-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 15px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.load-board-tech-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

.load-board-tech-card p {
    color: #fff;
    font-weight: 500;
    margin: 0;
}

/* Hover effect for interaction */
.load-board-tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


/*End load board  tech section */

/* Start load board testing section */
.load-board-testing .testimonial-card {
    border: 1px solid #00ADF0;
}

/* End load board testing section */



/* start load Project Goals Infographic  section */
.load-board-infographic-section {
    background: url("../images/case-studies/Load-board/circle.webp")center / contain no-repeat;
    background-size: 100% 140%;
    z-index: 1;
}

.load-board-infographic-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 40px 0;
}

/* Title */
.load-board-infographic-container h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 10px;
}

.load-board-infographic-container h4 {
    text-align: center;
    color: #3F83F8;
    /* bootstrap primary blue */
    margin-bottom: 40px;
}

/* Vertical dotted line */
.load-board-vertical-line {
    position: absolute;
    top: 170px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px dotted #3F83F8;
    height: 75%;
    z-index: 2;
}

.load-board-vertical-line::before {
    position: relative;
    top: -5px;
    content: "0";
    color: #0d6efd;
    padding-left: 10px;
    border-radius: 50%;
    margin: 10px 0 10px -11px;
    width: 110px;
    height: 110px;
    background: #0d6efd;
}

.load-board-vertical-line::after {
    position: relative;
    top: 100%;
    content: "0";
    color: #0d6efd;
    padding-left: 10px;
    border-radius: 50%;
    margin: 10px 0 10px -21px;
    width: 110px;
    height: 110px;
    background: #0d6efd;
}

/* Step number circle */
.load-board-step-number {
    background: #3F83F8;
    color: var(--white-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 0 8px rgba(63, 131, 248, 0.6);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Left step number position and arrow */
.load-board-step-left .load-board-step-number {
    top: 160px;
    right: 34px;
}

.load-board-step-left .load-board-step-number::before {
    content: "";
    position: absolute;
    left: 148px;
    top: -289%;

    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: #3F83F8;
}

/* Right step number position and arrow */
.load-board-step-right .load-board-step-number {
    top: 25px;
    left: 35px;
}

.load-board-step-right .load-board-step-number::before {
    content: "";
    position: absolute;
    right: 148px;
    top: 385%;

    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: #3F83F8;
}


/* Step content card */
.load-board-step-content {
    background: #3f83f81c;
    border: 1px solid #007bff;
    border-radius: 12px;
    padding: 20px 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
}

/* Left step text alignment */
.load-board-step-left .load-board-step-content {
    text-align: right;
    margin-right: 60px;
}

/* Right step text alignment */
.load-board-step-right .load-board-step-content {
    text-align: left;
    margin-left: 60px;
}

/* Step title */
.load-board-step-content h5 {
    margin-bottom: 8px;
    font-weight: bolder;
}

.load-board-step-content p {
    color: #333333;
    font-weight: 600;
}

/* End load Project Goals Infographic  section */


/* all traders case study start */

/* start hero all traders case styudy  section */
.all-traders-app {
    background:
        linear-gradient(to bottom,
            #047DCB 0%,
            #92D7F4 15%,
            rgba(255, 255, 255, 0) 30%),
        url("../images/case-studies/all-traders-app/hero-background.webp")top center/cover no-repeat;
}

.all-traders-app .logo {
    width: 100%;
    max-width: 200px;
    margin: 0;
}

.all-traders-hero-content h1 {

    color: #0277C6;
}

.all-traders-hero-content p {
    border-left: 4px solid #0277C6;
    padding: 15px 15px;

}

.all-traders-hero-content .tagcase {
    border: none;
    background: #ED000A;
    color: var(--white-color);
    width: fit-content;
    padding: 10px;
    border-radius: 10px;

}

.all-traders-app .hero-img img {
    width: 100%;
    max-width: 530px;
    display: block;
    margin: 0 auto;
}

/* end hero all traders case styudy  section */

/* Start all traders clients overview  section */
.all-traders-clients-overview .common-heading {
    background: url("../images/case-studies/all-traders-app/hero-background.webp")top center/cover no-repeat;
    padding: 40px;
    margin-top: 124px;
    height: 64vh;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #FCD5D7;

}

.all-traders-clients-overview .common-heading .points-client-review {
    padding-left: 10px;
    border-left: 3px solid #ED000A;
}

.all-traders-clients-overview .common-heading .points-client-review p {
    color: #333333;
}

.all-traders-clients-overview .client-overview-img img {
    width: 100%;
    max-width: 635px;
    display: block;
    margin: 0 auto;
}

/* end all traders clients overview  section */

/* start all traders  problm section  */
.all-traders-problem-section .all-traders-problem-img img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}

.all-traders-problem-section .all-traders-problem-box-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15%;
}

.all-traders-problem-box-wrapper .all-traders-box {
    border: 2px dotted #ED000A;
    border-radius: 10px;
    padding: 40px 40px 40px 40px
}

.all-traders-problem-box-wrapper .all-traders-problem-box h2 {
    text-align: center;
    font-size: 22px;
}

.all-traders-problem-box-wrapper .all-traders-box li {
    text-align: start;
    font-weight: 300;
    font-size: 12px;
    margin: 20px 0 20px 0;

}

.all-traders-problem-box-wrapper .all-traders-box li p {
    background-color: #007bff;
    padding: 5px;
    margin-right: 6px;
    color: var(--white-color);
    font-size: 12px;
    border-radius: 50%;
    display: inline;
}

/* End all traders  problm section  */

/* Start Our Design Objectives Section */
.all-traders-app-design-objectives {
    position: relative;
}

.all-traders-app-design-objectives .central-line {
    position: absolute;
    background-color: #ED000A;
    width: 4px;
    height: 70%;
    transform: translateX(-50%);
    top: 160px;
    bottom: 0;
    left: 50%;
    z-index: 999;
}

.all-traders-app-design-objectives .feature-box {
    background: var(--white-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.all-traders-app-design-objectives .common-heading {
    text-align: center;
    padding: 10px 0 45px 0;

}

.all-traders-app-design-objectives .feature-box-group .text-theme {
    color: #026DBF;

}

.all-traders-app-design-objectives .feature-box-group .feature-box {
    border: 1px dotted #026DBF;

}

/* End Our Design Objectives Section */

/* start all tarders wireframe section*/
.all-tarders-wireframe {
    background: url("../images/case-studies/all-traders-app/wirefram-background.png") center/cover no-repeat;
    padding: 20px;
}

.all-tarders-wireframe .common-heading h2,
.all-tarders-wireframe .common-heading h5,
.all-tarders-wireframe .common-heading {
    text-align: center;
    color: var(--white-color);
}

/* End all tarders wireframe section*/



/* Start challenges turned section */
.challenges-turned-section .challenges-turned-box img {
    width: 100%;
    max-width: 460px;
    display: block;
    margin: 0 auto;
}

.challenges-turned-section .challenges-turned-box {
    border-radius: 10px;
    background: #fff;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4);
    padding: 13px;
}

.challenges-turned-section .challenges-turned-box .challenges-turned-contant p {
    color: var(--black-color);
    font-weight: 400;
}

.challenges-turned-section .challenges-turned-box .challenges-turned-contant .challenges-turned-tital {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0 10px 0;
}

.challenges-turned-section .challenges-turned-box .challenges-turned-contant .challenges-turned-tital h4 {
    font-size: 19px;
}

.challenges-turned-section .challenges-turned-box .challenges-turned-contant .challenges-turned-tital span {
    background: #026DBF;
    color: var(--white-color);
    padding: 10px;
    border-radius: 50%;
}

/* End challenges turned section */
/* all traders case study end */


/* start Alejandro Case study */

/* start Alejandro hero section */
.Alejandro-hero-section {
    background: url("../images/case-studies/Alejandro-app/hero-background.webp") center/cover no-repeat;
    padding: 20px;
    text-align: center;
    font-family: sans-serif;
}

.Alejandro-hero-section.breadcrumb-areav2 {
    align-items: start;
}


.Alejandro-hero-section .bread-titlev2 h1,
.Alejandro-hero-section .bread-titlev2 p {
    text-align: center;
    color: var(--white-color);
}

.Alejandro-hero-section .logo {
    display: block;
    margin: 10% auto 0 auto;
    width: 100%;
    max-width: 120px;

}

.Alejandro-hero-section .hero-img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1120px;
    /* margin-top: 1px; */
}

/* End Alejandro hero section */

/* start Alejandro client overview section*/
.Alejandro-client-overview .left-border-clint-overview {
    border-left: 1px solid #191463;
    margin: 10px 0;
    padding: 0 0 0 10px;
}

/* End Alejandro client overview section*/


/*Start Alejandro problem solution section */
.Alejandro-problem-solution .bg-custom-gray {
    background-color: #191463;
}

.Alejandro-problem-solution .start-plus-circle,
.Alejandro-problem-solution .card-connector-plus,
.Alejandro-problem-solution .section-wrapper::before,
.Alejandro-problem-solution .section-wrapper::after {
    background-color: #191463;
    color: var(--white-color);
    z-index: 10;
}

.Alejandro-problem-solution .card-custom {
    display: flex;
    justify-content: space-evenly;
    z-index: 20;
}

/*End Alejandro problem solution section */

/*start Alejandro objective Goals section*/
.Alejandro-objectives-section {
    position: relative;
}

.Alejandro-objectives-section .central-line {
    position: absolute;
    background-color: #343536;
    width: 4px;
    height: 70%;
    transform: translateX(-50%);
    top: 160px;
    bottom: 0;
    left: 50%;
    z-index: 999;
}

.Alejandro-objectives-section .feature-box-group .feature-box {
    border: 1px dotted #026DBF;
}

.Alejandro-objectives-section .feature-box {
    background: var(--white-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    border: 1px solid var(--gray-color-2);
}

.Alejandro-objectives-section .feature-box-group .text-theme {
    color: #026DBF;
}

/*End Alejandro objective Goals section*/

/*Start Alejandro wireframe  section*/
.Alejandro-wireframe {
    background: url("../images/case-studies/Alejandro-app/wireFram-background.webp") center/cover no-repeat;
    padding: 20px;
    color: var(--white-color);
}

.Alejandro-wireframe h2,
.Alejandro-wireframe h4 {
    color: var(--white-color);

}

/*End Alejandro wireframe  section*/



/*start Alejandro Designs section */
.Alejandro-Designs-section h2,
.Alejandro-Designs-section p {
    text-align: center;
}

.Alejandro-Designs-section h2 {
    color: #191463;
}

/*End Alejandro Designs section */

/* End Alejandro Case study */


/* ===== Start BANNERS Section ===== */
.banner-box-section .banner-box-image {
    aspect-ratio: 1728 / 549;
    border-radius: 30px;
    padding: 24px 0 23px 63px
}

.banner-box-image h2 {
    color: var(--white-color);
    font-weight: bolder;
}

.banner-box-image h2 span {
    color: var(--first-color);
}

.banner-box-image p {
    margin: 10px 0 10px 0;
    font-size: 14px;
}

.banner-box-image .banner-btn {
    display: flex;
    gap: 20px;
}

.banner-box-image .banner-btn a {
    background-color: var(--first-color);
    color: var(--white-color);
    padding: 11px 9px 11px 9px;
    border-radius: 10px;
}

.banner-box-image .banner-btn a:hover {
    background-color: transparent;
    color: var(--white-color);
    border: 2px solid var(--first-color);
}

.banner-box-image .banner-btn a.active {
    background-color: transparent;
    color: var(--white-color);
    border: 2px solid var(--first-color);
}

.banner-box-image .banner-btn a.active:hover {
    background-color: var(--first-color);
    color: var(--white-color);
    border: none;
}

/* ===== End BANNERS Section ===== */

/* ===== Start services BANNERS Section ===== */
.services-box-section .banner-box-image {
    aspect-ratio: 1171 / 549;
    border-radius: 30px;
    padding: 24px 0 23px 63px;
}

.services-box-section .owl-theme .owl-dots .owl-dot.active {
    padding: 0;
    border: 3px solid var(--first-color) !important;
    border-radius: 50%;
}

.services-box-section .owl-theme .owl-dots .owl-dot span {
    height: 0.6em;
    width: 0.6em;
    margin: 5px;
}

.services-box-section .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: -46px;
}

/* ===== End services BANNERS Section ===== */





/* =====start new process section css ===== */
.process-tabs-section {
    background-color: var(--light-grey);
    padding: 20px 0 140px 0;
}

.process-btns {
    line-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    background: url("../images/banner/banner.webp") no-repeat left;
    background-size: 25% 100%;
    /* width 10%, height 10% */
    border-radius: 20px;

}

.tabBtn {
    display: flex;
    gap: 25px;
    align-items: center;
    width: 100%;
    padding: 18px 25px;
    background-color: #FFFFFF;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 8px 20px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.tabBtn i {
    font-size: 25px;
    margin-right: 15px;
    color: #64748b;
    transition: color 0.3s ease;
    width: 25px;
    text-align: center;
}

.tabBtn span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #475569;
}

.tabBtn.active {
    background-color: #0F766E;
    transform: translateX(8px);
    box-shadow: 0 10px 15px -3px rgba(15, 118, 110, 0.25);
    border-left: 5px solid #74E3D3;
    background: #085E5D;
}

.tabBtn.active i {
    color: #5EEAD4;
}

.tabBtn.active span {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
}

.tabBtn:not(.active):hover {
    background-color: #F8FAFC;
    transform: translateX(5px);
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08);
}

.tabBtn:not(.active):hover i {
    color: #0F766E;
}

/* ===== Sticky Tabs Wrapper ===== */
.process-tabs {
    position: sticky;
    top: 150px;
    z-index: 0;
}

/* ===== Tabs Content ===== */
.process-tabs .tabs {
    display: none;
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 40px;
    max-width: 800px;
    height: 640px;
    box-shadow: -8px 8px 20px rgba(0, 0, 0, 0.5);
    flex-direction: column;
    gap: 24px;
}

.process-tabs .tabs:first-child {
    display: block;
}

.process-tabs .tabs h2 {
    color: #111827;
    font-family: 'Poppins', sans-serif;
    font-size: 31px;
    font-weight: 600;
    margin-bottom: 17px;
}

.process-tabs .tabs ul {
    list-style: none;
    padding: 0;
    margin-bottom: 10px;
}

.process-tabs .tabs ul li {
    color: #111827;
    font-size: 19px;
    line-height: 1.6;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-weight: 600;
}

.process-tabs .tabs ul li::before {
    content: "•";
    color: #111827;
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 20px;
}

.process-tabs .tabs a {
    background-color: var(--first-color);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    margin: 50px 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.4);
    transition: all 0.3s ease;
}

.process-tabs .tabs a:hover {
    background-color: var(--first-color);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);
    /* transform: translateY(-2px); */
}

.process-tabs .tabs .tabs-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 26px;
    border-top: 3px solid #F1F5F9;
}

.process-tabs .tabs .tabs-icons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-tabs .tabs .tabs-icons-wrapper i {
    text-align: center;
    font-size: 64px;
    color: #374151;
    font-weight: 300;
}

.process-tabs .tabs .tabs-icons .tabs-icons-wrapper span {
    display: block;
    padding: 10px 30px 0 30px;
    color: var(--black-color);
    text-align: center;
}

/* ===== Button Effects ===== */
.process-btn-effect {
    border: none;
    color: #000;
    position: relative;
}

.process-btn-effect:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
}

.process-btn-effect:hover {
    color: #000;
}

.process-btn-effect:hover:after {
    left: auto;
    right: 0;
    width: 100%;
}

.process-btn-effect:active {
    top: 2px;
}

/* ===== End new process section css ===== */


/* hero bages slider start */
.hero-bages-slides-div {
    margin-top: 45px;
}

.hero-slider {}

.hero-slider .hero-bage-p {
    margin-top: 7%;
    border-right: 2px solid var(--first-color);
    line-height: 100px;
    color: var(--white-color);
    font-weight: 800;
    font-size: 18px;
}




.hero-bages-slider .h-img img {
    width: 100%;
    max-width: 150px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border-radius: 16px;
    /* padding: 12px 8px;
    
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 0 0.5px rgba(255, 255, 255, 0.6); */
    color: #ffffff;
}

/* hero bages slider End */

/* start about page bages slider */
.about-bages-slides-div {
    margin-top: 45px;
}




.about-bages-slider .h-img {
    width: 100%;
    max-width: 450px;
    height: 100%;
    max-height: 420px;
    background: rgb(150 185 185 / 22%);
    padding: 10px 20px;
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #ffffff;
    display: block;
    margin: auto 0;
}

.about-bages-slider .h-img img {
    width: 100%;
    max-width: 120px;
    filter: brightness(2);
}

/* End about page bages slider */

.vision-section {
    background: var(--light-grey);
}

.vision-tabs .nav-link {
    border-radius: 30px;
    border: 1px solid gray;
    padding: 10px 30px;
    margin: 5px;
    color: gray;
    background: white;
    font-weight: 500;
    transition: 0.3s;
}

.vision-tabs .nav-link:hover {
    background: var(--first-color);
    color: #fff;
}

.vision-tabs .nav-link.active {
    background: var(--first-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.vision-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.vision-text {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
}

.vision-img {
    max-width: 100%;
    border-radius: 12px;
}

/* start map new section */
.map-new {
    position: relative;
}

.map-new .distribution-map img {
    filter:
        grayscale(100%) sepia(100%) hue-rotate(120deg) saturate(500%) brightness(0.95);
}


/* Expanded state */
.distribution-map .map-point:focus,
.distribution-map .map-point:active {
    width: 320px;
    height: 240px;
    border-radius: 12px;
    opacity: 1;
}

.distribution-map .map-point i {
    color: var(--black2-color);
    font-size: 28px;
    background-color: transparent;
}

.distribution-map .map-point:focus i {
    display: none;
}

.distribution-map .map-point.map-button-first {
    top: 28%;
    left: 44.8%;
}

.distribution-map .map-point.map-button-second {
    top: 39%;
    left: 50%
}

.distribution-map .map-point.map-button-third {
    top: 83%;
    left: 86%;
}

.distribution-map .map-point.map-button-four {
    top: 38%;
    left: 25.6%
}

.distribution-map .map-point.map-button-five {
    top: 43%;
    left: 15%
}

.distribution-map .map-point.map-button-six {
    top: 30%;
    left: 47%;
}

.distribution-map .map-point.map-button-seven {
    top: 52%;
    left: 60%;
}

.distribution-map .map-point.map-button-eight {
    top: 52%;
    left: 62%;
}

.distribution-map .map-point.map-button-nine {
    top: 33%;
    left: 45.4%;
}
.distribution-map .map-point.map-button-ten {
      top: 50%;
    left: 66%;
}



/* Content wrapper */
.distribution-map .map-point .content {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s ease 0.15s;
    overflow: hidden;
}

/* Show content on open */
.distribution-map .map-point:focus .content,
.distribution-map .map-point:active .content {
    opacity: 1;
}

/* Google Map iframe (BACKGROUND) */
.distribution-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 0;
    filter: grayscale(100%) brightness(0.85);
}

/* Text overlay (FOREGROUND) */
.distribution-map .info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.1));
    z-index: 2;
    text-align: left;
}

.distribution-map h2 {
    font-size: 16px;
    margin: 0 0 6px;
    color: #ffffff;
}

.distribution-map p {
    font-size: 13px;
    margin: 0;
    color: #e5e5e5;
}

/* End map new section */

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centered-y {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.distribution-map {
    position: relative;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

.distribution-map>img {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.distribution-map .map-point {
    cursor: pointer;
    outline: none;
    z-index: 0;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    transform: translate(-50%, -50%);
    -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
    transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    background: transparent;
    border: none;
}

.distribution-map .map-point .content {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    overflow: overlay;
}

.distribution-map .map-point:active,
.distribution-map .map-point:focus {
    margin: 0;
    padding: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    width: 300px;
    height: 220px;
    color: #e5e5e5;
    z-index: 1;
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}

.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0s, 0s;
    transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    overflow: hidden;
}

.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
    color: #afe1fa;
}

 /* Connect With Us section */
 .connect-with-us .info-cards .cont-prt{
 background: var(--light-grey);
 padding: 50px 10px;
 border: 1px solid var(--gray-color);
 border-radius: 30px;
     transition: transform 0.3s ease; 
 }
 .connect-with-us .info-cards .cont-prt:hover{
     transform: scale(1.05);
 border: 1px solid var(--first-color);
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
   background: var(--first-color);

 }
 .connect-with-us .info-cards .cont-prt:hover h4,
 .connect-with-us .info-cards .cont-prt:hover .txt{
    color: var(--white-color);
 }

.info-cards .cont-prt {
    text-align: center;
}