@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

body,
html {
    overflow-x: hidden
}

.btn:hover,
a:hover {
    color: unset
}

body,
li,
p,
span {
    font-weight: 400;
    margin: 0
}

.btn,
.dropdown-mob li a,
body {
    font-size: 16px;
    font-family: var(--font-secondary)
}

.btn,
.dropdown-mob li a,
a,
body,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
span {
    font-family: var(--font-secondary)
}

.cart-bar__lists .cart-bar__item:not(:last-child),
.cart-bar__title {
    margin-bottom: 15px
}

.c-text a,
.c-text a p,
.c-text-1 a,
.c-text-1 a p,
.cart-bar__close a,
.cart-bar__item .content .title a,
.date-visit-btn .date p,
.date-visit-btn .visit-site a,
.dropdown-mob li a,
.footerForm a,
.footer__menu ul li a,
.ourProject a,
.social-links a,
a.careerLink,
a:hover,
ul.inform-social li a {
    text-decoration: none
}

.scroll-wrapper,
html {
    scroll-behavior: smooth
}

:root {
    --font-primary: 'Bebas Neue', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --color-1: #FDB914;
    --section-color: #fff
}

html ::-webkit-scrollbar {
    width: 7px;
    border-radius: 10px;
    height: 5px
}

.aboutbanSlider .abtBan .leftImgBan img,
.bg_img,
.casestudy-Bx a img,
.conecting-bigBx .bigImg .item img,
.informedBx img,
.innerWrapper .process-img img,
.left-small-bx-overlap .smallleftImg .item img,
.left-small-bx-overlap .smallrightImg .item img,
.modal-content,
.panel__content,
.testimonial-img img,
.video-banner video,
table,
ul.referTab li button,
video {
    width: 100%
}

html ::-webkit-scrollbar-track {
    background-color: #ccc
}

html ::-webkit-scrollbar-thumb {
    background-color: var(--color-1);
    border-radius: 10px
}

::-moz-selection {
    background-color: #ccc;
    color: var(--color-1)
}

::selection {
    background-color: #000;
    color: var(--color-1)
}

body {
    background-color: #fff;
    padding: 0;
    position: relative;
    line-height: 29px;
    height: 100%
}

img {
    height: auto;
    transition: .3s ease-out;
    max-width: 100%
}

button {
    cursor: pointer;
    border: none;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.lightbox-btn:focus,
:focus,
button:focus {
    outline: 0
}

.bannerBtn,
.referInnerBx {
    margin-top: 40px
}

.btn {
    background-color: #222;
    padding: 16px 30px;
    border-radius: 50px;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: .3s
}

.cart-bar__title,
.side-info .title {
    font-weight: 600;
    text-transform: uppercase
}

.main-title,
h2 {
    letter-spacing: -2px
}

.nice-select .list .option,
.nice-select span,
.section-heading__black .title,
li,
p,
span {
    color: #000
}

a {
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

li,
p,
span {
    line-height: 2;
    font-size: 18px
}

.nice-select {
    background-color: transparent;
    height: 40px !important;
    line-height: 40px !important;
    min-height: 40px !important;
    padding: 0 30px
}

.nice-select .list li {
    margin-right: 0 !important
}

.nice-select .list .option.selected,
.nice-select .list .option:hover {
    border: none !important
}

.bg_img {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%
}

.dark-bg {
    background-color: #010103
}

.grey-bg {
    background: #f4f1ee
}

.navbar-menu-inner .hover-mnu-reveal .dropdown ul li:hover,
.white {
    color: #fff
}

.f-right {
    float: right
}

.section-heading {
    position: relative;
    z-index: 2
}

.navbar-menu-inner .hover-mnu-reveal .dropdown {
    position: absolute;
    left: -87%;
    top: 60px;
    display: inline-block;
    padding: 17px 22px;
    transition: .3s;
    visibility: hidden;
    opacity: 0;
    width: 310px;
    box-shadow: 0 3px 8px 0 #00000026;
    background: #1a1d1fd6;
    box-shadow: 0 20px 30px 20px rgb(0 0 0 / 37%);
    backdrop-filter: blur(7.6px);
    -webkit-backdrop-filter: blur(7.6px);
    border-radius: 14px
}

.filters ul li:first-child:after,
.navbar-menu-inner .hover-mnu-reveal .dropdown a.w-inline-block,
.owl-carousel .owl-item .mobile-tab-show,
.side-info-wrapper.mm-only.show,
.social-links ul li:nth-child(3):before {
    display: none
}

.navbar-menu-inner .hover-mnu-reveal:hover .dropdown {
    visibility: visible;
    opacity: 1
}

.navbar-menu-inner .hover-mnu-reveal .dropdown ul li a {
    color: #a3a6aa;
    text-align: left;
    font-family: var(--font-secondary);
    text-decoration: none;
    font-size: 16px;
    text-transform: capitalize;
    transition: .2s ease-in
}

.navbar-menu-inner .hover-mnu-reveal .dropdown ul li:hover a {
    color: #fff;
    padding-left: 5px
}

.hover-mnu-reveal {
    color: #fff;
    font-size: 18px;
    cursor: pointer
}

.navbar-menu-inner .hover-mnu-reveal .dropdown ul {
    margin-bottom: 0;
    padding: 0
}

.navbar-menu-inner .hover-mnu-reveal .dropdown ul li {
    padding: 17px 15px;
    transition: .3s;
    border: 1px solid #ffffff00
}

.navbar-menu-inner .hover-mnu-reveal .dropdown ul li:nth-child(3) {
    margin: 0;
    padding: 17px 15px;
    border-top: 1px solid #ffffff2b;
    border-bottom: 1px solid #ffffff2b
}

.section-heading .sub-title {
    color: #fff;
    background: #c7a17a;
    font-family: Jost, sans-serif;
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    padding: 1.5px 13px;
    letter-spacing: 2px;
    border-radius: 3px;
    line-height: 22px;
    margin-bottom: 23px
}

.section-heading .title {
    color: #fff;
    font-size: 55px;
    line-height: 57px;
    text-transform: uppercase
}

.section-heading p,
h5 {
    font-size: 18px
}

.section-heading p:not(:last-child) {
    margin-bottom: 35px
}

.bottom-2-col,
.c-image-container,
.dk-show,
.mobileCasestudy .slick-track,
.pointersWork {
    display: flex
}

.dropdown-mob li a {
    color: #a3a6aa;
    text-align: left;
    transition: .3s ease-in
}

.border-effect a,
.border-effect span.border-effect,
span.border-effect {
    position: relative;
    display: inline;
    background-image: -webkit-gradient(linear, left top, right top, from(currentColor), to(currentColor));
    background-image: -webkit-linear-gradient(left, currentColor 0, currentColor 100%);
    background-image: -o-linear-gradient(left, currentColor 0, currentColor 100%);
    background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
    background-size: 0 2px;
    background-position: 0 95%;
    -webkit-transition: background-size .25s cubic-bezier(.785, .135, .15, .86);
    -o-transition: background-size .25s cubic-bezier(.785, .135, .15, .86);
    transition: background-size .25s cubic-bezier(.785, .135, .15, .86);
    padding: .7% 0;
    background-repeat: no-repeat;
    color: inherit
}

.border-effect a:hover,
.border-effect span.border-effect:hover,
span.border-effect:hover {
    background-size: 100% 2px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.4
}

.c-text a p,
h2 {
    line-height: 1.3
}

h1 {
    font-size: 60px
}

h2 {
    font-size: 48px;
    margin-bottom: 28px
}

h3 {
    font-size: 38px;
    line-height: 1.2
}

h4 {
    font-size: 22px;
    line-height: 2
}

.addWrap-1 h4.footerTitle,
.addWrap-2 h4.footerTitle,
.addWrap-3 h4.footerTitle,
.benefit-point p,
.ptf-animated-block ul li .mainBlk p,
h6 {
    font-size: 16px
}

.hamburger-trigger {
    margin-left: 12px;
    padding: 10px 12px;
    cursor: pointer
}

.side-info {
    padding-left: 20px;
    padding-right: 20px
}

.side-info .title {
    font-family: Jost, sans-serif;
    font-size: 18px
}

.side-info .mb-5 {
    margin-bottom: 5px !important
}

.side-info p {
    font-size: 15x;
    line-height: 28px
}

.side-info__close {
    top: 0;
    left: 0;
    background: #010103;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    border-radius: 50%;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.side-info__close a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff
}

.side-info__close:hover {
    background: #c7a17a
}

.side-info__wrapper {
    padding: 20px
}

.side-info .social-links a:hover {
    color: #c7a17a;
    border-color: #c7a17a
}

.overlay {
    background-color: rgba(0, 0, 0, .7);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -ms-transition: .6s;
    -o-transition: .6s
}

.overlay.active {
    opacity: .5;
    visibility: visible;
    cursor: url(../images/icons/cancel.png), auto
}

.cart-bar-wrapper,
.side-info-wrapper {
    position: fixed;
    overflow-y: auto;
    top: 0;
    right: -330px;
    width: 300px;
    height: 100%;
    display: block;
    background-color: #fff;
    z-index: 100;
    box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .5);
    padding-top: 0;
    -webkit-transition: .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: .6s cubic-bezier(.785, .135, .15, .86);
    transition: .6s cubic-bezier(.785, .135, .15, .86)
}

.black-ribbon,
.c-text-container,
.lenis.lenis-stopped,
.recent-img,
.recent-project,
.redBoxMedia {
    overflow: hidden
}

.cart-bar__item .content .remove,
.cart__count {
    right: 0;
    height: 20px;
    position: absolute;
    width: 20px
}

.cart-bar-wrapper .nav,
.side-info-wrapper .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.cart-bar-wrapper .nav a,
.side-info-wrapper .nav a {
    flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    max-width: 50%;
    color: #010103;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px
}

.cart-bar-wrapper .nav a.active,
.side-info-wrapper .nav a.active {
    background: #010103;
    color: #fff
}

.cart-bar-wrapper.show,
.side-info-wrapper.show,
.testimonialSlider .nextArrow {
    right: 0
}

@media (max-width:991px) {
    .section-heading {
        text-align: center
    }

    .side-info-wrapper.mm-only.show {
        display: inline-block
    }

    .side-info-wrapper.show-all.show {
        display: none
    }
}

.side-info-wrapper .contact__info li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 15px;
    align-items: flex-start
}

.side-info-wrapper .contact__info li span {
    margin-right: 10px;
    flex: 0 0 15px;
    -ms-flex: 0 0 15px;
    max-width: 15px;
    color: #c7a17a;
    font-size: 15px
}

.side-info-wrapper .contact__info li p {
    flex: 0 0 85%;
    -ms-flex: 0 0 85%;
    max-width: 85%
}

.cart__count,
.footer__menu ul {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap
}

.referContent ul li,
.side-info-wrapper .contact__info li:not(:last-child) {
    margin-bottom: 5px
}

.cart {
    margin-left: 10px;
    padding: 10px 12px;
    cursor: pointer
}

.cart__count {
    font-size: 12px;
    color: #fff;
    background: #80a093;
    top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 0
}

.cart-bar__subtotal,
.cart-bar__title {
    border-bottom: 1px solid #f4f1ee;
    display: block
}

.cart-bar-wrapper {
    padding: 60px 20px 25px
}

.cart-bar-wrapper .site-btn {
    font-size: 12px;
    padding: 7px 18px
}

.cart-bar-wrapper .site-btn__borderd {
    color: #010103;
    margin-left: 15px
}

.cart-bar-wrapper .site-btn__borderd:hover,
.contact__form label {
    color: #fff
}

@media (max-width:767px) {
    .section-heading .title {
        font-size: 36px;
        line-height: 38px
    }

    .cart-bar-wrapper .btns {
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start !important
    }

    .cart-bar-wrapper .btns .site-btn__borderd {
        margin-left: 0;
        margin-top: 20px
    }
}

@media only screen and (min-width:576px) and (max-width:767px) {
    .cart-bar-wrapper .btns {
        flex-direction: row;
        justify-content: flex-start !important;
        align-items: center !important
    }

    .cart-bar-wrapper .btns .site-btn__borderd {
        margin-left: 20px;
        margin-top: 0
    }
}

.cart-bar__close {
    position: absolute;
    top: 0;
    left: 0;
    background: #010103;
    width: 40px;
    height: 40px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.cart-bar__close a {
    color: #fff;
    position: relative;
    z-index: 2;
    font-size: 16px;
    left: 0;
    height: 100%
}

.cart-bar__title {
    font-size: 18px;
    font-family: Jost, sans-serif;
    padding-bottom: 15px
}

.border-text,
.c-text a p,
.client-title {
    font-family: var(--font-secondary)
}

.cart-bar__title span,
.list-unstyled a:hover,
.redText {
    color: #000
}

.cart-bar__item .thumb {
    background: #fff;
    min-width: 70px
}

.cart-bar__item .thumb img {
    max-width: 60px
}

.cart-bar__item .content {
    padding-right: 25px;
    position: relative
}

.cart-bar__item .content .title {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase
}

.cart-bar__item .content .title a {
    color: #010103
}

.c-text a p,
.casestudy-Bx .case-content a:hover,
.date-visit-btn .visit-site a:hover {
    color: #fdb914
}

.cart-bar__item .content .price {
    color: #010103;
    font-weight: 600;
    font-size: 15px
}

.cart-bar__item .content .remove {
    top: 50%;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    border-radius: 100%;
    background-color: #80a093;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.cart-bar__subtotal {
    border-top: 1px solid #f4f1ee;
    padding: 7px 0;
    margin-top: 20px;
    margin-bottom: 20px
}

.cart-bar__subtotal span {
    color: #010103;
    text-transform: uppercase;
    font-weight: 600
}

.hero__area {
    z-index: 1;
    padding-top: 169px
}

.stripe-banner {
    z-index: -1
}

.innerBanner {
    z-index: 1;
    padding-top: 9%;
    padding-bottom: 70px
}

.navbar-link-text.hover-mnu-reveal a,
.navbar-menu a .navbar-link-text {
    font-family: var(--font-secondary);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500
}

.main-title {
    color: #000;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    position: relative
}

p.bannerTxt {
    margin-bottom: 90px;
    font-size: 22px;
    font-weight: 400;
    margin-top: 13px
}

h3.bgText {
    color: #2795d2;
    font-size: 70px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--font-primary);
    line-height: 1;
    border-radius: 6px;
    background-color: #f2f2f2;
    border: 2px solid #d6d6d6;
    display: inline-block;
    padding: 13px 10px 6px;
    margin-top: 0;
    letter-spacing: 1px
}

.bg-pattern {
    background-image: url(../images/banner-bg.webp);
    background-size: contain;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 100px
}

.banner-laptop {
    margin: 0 auto
}

.banner-laptop-img {
    width: 45%;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    right: 80px;
    top: -17px
}

.black-ribbon {
    background: url(../images/banner-stripe.png) center/cover;
    position: absolute;
    width: 103%;
    bottom: 62px;
    left: -21px;
    height: 242px;
    right: 0
}

.right-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 950px
}

@keyframes slidereverses {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(300%)
    }
}

.c-text-container {
    display: flex;
    padding: 15px 0;
    position: absolute;
    bottom: 360px;
    transform: rotate(355.6deg)
}

.c-text-slider {
    display: flex;
    white-space: nowrap
}

.c-text,
.c-text-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    box-shadow: 0 0 0 0 rgba(226, 215, 255, .4);
    margin: 0 18px
}

.workWrapper .our-work .owl-nav .next_btn,
.workWrapper .our-work .owl-nav .prev_btn {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    box-shadow: 3px 4px 0 1px #000
}

.c-text a p {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0
}

.c-text img {
    max-width: 100px;
    width: 30px
}

.client-logo,
.section,
.spacing-red {
    padding: 100px 0
}

.tech-logos {
    padding: 50px 0 100px
}

.tech-logos img {
    width: 100%;
    height: 68px;
    object-fit: contain
}

.tech-logos img.bs-logo {
    width: 27%;
    height: auto
}

.tech-logos img.wp-logo {
    width: 57%;
    height: auto
}

.tech-logos img.webflow-logo {
    width: 28%;
    height: auto
}

.tech-logos img.woo-logo {
    width: 35%;
    height: auto
}

.tech-logos img.shopi-logo {
    width: 66%;
    height: auto
}

.client-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 10px;
    text-transform: uppercase;
    color: #000;
    text-align: center;
    margin-bottom: 60px
}

.heading,
.heading .textture-text-1 {
    font-size: 110px
}

.logo-custom-paddimg {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 3.5rem
}

.client-logo .compny-logo img.logo-1 {
    max-width: 50%
}

.client-logo .compny-logo img.logo-2,
.client-logo .compny-logo img.logo-4 {
    max-width: 55%
}

.client-logo .compny-logo img.logo-3 {
    max-width: 30%
}

.client-logo .compny-logo img {
    max-width: 77%
}

.client-logo .compny-logo img.logo-6 {
    max-width: 48%
}

.client-logo .compny-logo img.logo-7 {
    max-width: 46%
}

.client-logo .compny-logo img.logo-14,
.client-logo .compny-logo img.logo-8 {
    max-width: 45%
}

.client-logo .compny-logo img.logo-9 {
    max-width: 62%
}

.client-logo .compny-logo img.logo-10 {
    max-width: 60%
}

.client-logo .compny-logo img.logo-16 {
    max-width: 75%
}

.client-logo .compny-logo img.logo-15 {
    max-width: 40%
}

.client-logo .compny-logo img.logo-11 {
    max-width: 58%
}

.client-logo .compny-logo img.logo-12 {
    max-width: 56%
}

.client-logo .compny-logo img.logo-13 {
    max-width: 66%
}

.floating-bubble-wrapper {
    display: flex;
    position: relative;
    height: 12vh
}

.black,
.fab .fabNav a:hover:before,
.maisonBlack,
.ncbBlk {
    background-color: #000
}

.blue {
    background-color: #2495d2
}

.yellow {
    background-color: #fdb914
}

.bg-red,
.red {
    background-color: #ef3a42
}

.green-1 {
    background-color: #41bead
}

.floating-bubble-wrapper .floating-bubble-1 {
    position: absolute;
    top: 77px;
    left: 42px
}

.floating-bubble-wrapper .floating-bubble-1 img,
.floating-bubble-wrapper .floating-bubble-3 img {
    width: 15px;
    height: 15px
}

.recent-project img,
.recent-project img.avanza,
.recent-project img.crizac,
.recent-project img.croft,
.recent-project img.dazs,
.recent-project img.helme,
.recent-project img.hin,
.recent-project img.indriq,
.recent-project img.milltete,
.recent-project img.shanghai,
.recent-project img.ship,
.recent-project img.thyme {
    width: 100%;
    position: absolute
}

.vert-move {
    -webkit-animation: 1s infinite alternate mover;
    animation: 1s infinite alternate mover
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-100px)
    }
}

@keyframes mover {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-70px)
    }
}

.vert-move-1 {
    -webkit-animation: 1s infinite alternate movernew;
    animation: 1s infinite alternate movernew
}

@-webkit-keyframes movernew {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(150px)
    }
}

@keyframes movernew {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(70px)
    }
}

.floating-bubble-wrapper .floating-bubble-2 {
    border-radius: 100px;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 91px;
    left: 10%
}

.floating-bubble-wrapper .floating-bubble-3 {
    border-radius: 100px;
    position: absolute;
    top: 80px;
    left: 18%
}

.floating-bubble-wrapper .floating-bubble-4 {
    border-radius: 100px;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 81%;
    left: 28%
}

.floating-bubble-wrapper .floating-bubble-5 {
    border-radius: 100px;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 24%;
    left: 38%
}

.floating-bubble-wrapper .floating-bubble-6 {
    border-radius: 100px;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 81%;
    left: 47%
}

.floating-bubble-wrapper .floating-bubble-7 {
    border-radius: 100px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 84px;
    left: 62%
}

.floating-bubble-wrapper .floating-bubble-8 {
    border-radius: 100px;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 15px;
    left: 85%
}

.floating-bubble-wrapper .floating-bubble-9 {
    border-radius: 100px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 78px;
    left: 97%
}

.floating-bubble-wrapper .floating-bubble-10,
.floating-bubble-wrapper .floating-bubble-11,
.floating-bubble-wrapper .floating-bubble-12,
.floating-bubble-wrapper .floating-bubble-13 {
    border-radius: 100px;
    width: 15px;
    height: 15px;
    position: absolute
}

.floating-bubble-wrapper .floating-bubble-10 {
    top: 10px;
    left: 93%
}

.floating-bubble-wrapper .floating-bubble-11 {
    top: 78px;
    left: 76%
}

.floating-bubble-wrapper .floating-bubble-12 {
    bottom: 81%;
    left: 69%
}

.floating-bubble-wrapper .floating-bubble-13 {
    bottom: 81%;
    left: 55%
}

.workWrapper.new-work {
    padding: 120px 0 100px;
    position: relative
}

.workWrapper {
    padding: 200px 0 0;
    position: relative
}

.emailWrap,
.workWrapper .our-work-1 {
    margin-top: 45px
}

.border-text,
.serviceWrapper .section-title,
.workWrapper .section-title {
    margin: 0 37px
}

.heading {
    position: relative
}

.border-text {
    font-size: 80px;
    color: #000;
    -webkit-text-fill-color: #eeeeeeab;
    line-height: .9;
    font-weight: 700
}

.float-1,
.float-2 {
    font-family: var(--font-secondary);
    line-height: 1;
    text-transform: uppercase;
    border-radius: 50px;
    width: auto;
    position: absolute;
    height: auto
}

.float-10,
.float-11,
.float-12,
.float-13,
.float-14,
.float-15,
.float-16,
.float-17,
.float-2,
.float-3,
.float-4,
.float-5,
.float-6,
.float-7,
.float-8,
.float-9 {
    font-size: 20px;
    padding: 9px 20px 5px
}

.float-1,
.float-14 {
    padding: 9px 30px 5px
}

.float-1 {
    font-size: 36px;
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
    left: 39%;
    bottom: 73px
}

.float-2 {
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    right: 31%;
    top: 18px
}

.float-3,
.float-7 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px
}

.float-7 {
    border: 2px solid #000;
    width: auto;
    position: absolute;
    right: 24.9%;
    top: 21px;
    height: auto
}

.float-3 {
    border: 2px solid #000;
    width: auto;
    position: absolute;
    right: 366px;
    bottom: 33px;
    height: auto
}

.float-4,
.float-6 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px;
    height: auto;
    width: auto;
    position: absolute
}

.float-6 {
    border: 2px solid #000;
    right: 269px;
    bottom: 37px
}

.float-4 {
    border: 2px solid #000;
    left: 254px;
    top: 20px
}

.float-13,
.float-5 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px
}

.float-13 {
    border: 2px solid #000;
    width: auto;
    position: absolute;
    left: 214px;
    top: 20px;
    height: auto
}

.float-5,
.float-8 {
    width: auto;
    position: absolute;
    left: 430px;
    height: auto
}

.float-5 {
    border: 2px solid #000;
    bottom: 30px
}

.float-8,
.float-9 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px
}

.float-8 {
    border: 2px solid #000;
    bottom: 28px
}

.float-9 {
    border: 2px solid #000;
    width: auto;
    position: absolute;
    right: 22.5%;
    top: 6px;
    height: auto
}

.float-10,
.float-11 {
    border-radius: 50px;
    width: auto;
    position: absolute;
    text-transform: uppercase;
    background-color: #fff;
    color: #000;
    line-height: 1;
    font-family: var(--font-secondary);
    height: auto
}

.float-10 {
    border: 2px solid #000;
    right: 254px;
    bottom: 81px
}

.float-11 {
    border: 2px solid #000;
    left: 227px;
    top: 30px
}

.float-12 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid #000;
    width: auto;
    position: absolute;
    left: 356px;
    bottom: 105px;
    height: auto;
    z-index: 1
}

.filters ul li,
.mediaHeading {
    line-height: 1.1;
    letter-spacing: unset
}

.our-work .owl-stage-outer,
.service-slider .owl-stage-outer {
    display: inline-block;
    margin-left: -42px
}

.cardStacking .service-slider,
.workWrapper .our-work {
    position: relative;
    margin-top: 60px
}

.aboutbanSlider .swiper-button-next::after,
.aboutbanSlider .swiper-button-prev::after,
.banner-scroll-team,
.banner-scroll-team-1,
.cardStacking .service-slider .owl-nav .next_btn,
.cardStacking .service-slider .owl-nav .prev_btn,
.case-study-listing .casestudy-Bx .case-img img,
.hotspot.main-wrapper,
.ourProcess .our-process .owl-nav .next_btn,
.ourProcess .our-process .owl-nav .prev_btn,
.teamSection .teamSlider .owl-nav .next_btn,
.teamSection .teamSlider .owl-nav .prev_btn,
.workWrapper .our-work .owl-nav .next_btn,
.workWrapper .our-work .owl-nav .prev_btn,
.workWrapper .our-work-1 .owl-nav .next_btn,
.workWrapper .our-work-1 .owl-nav .prev_btn {
    position: absolute
}

.workWrapper .our-work .owl-nav .next_btn {
    right: 17px;
    background-color: #fff;
    border-radius: 50%;
    justify-content: center;
    border: 2px solid #000
}

.workWrapper .our-work .owl-nav .prev_btn {
    left: 0;
    background-color: #fff;
    border-radius: 50%;
    justify-content: center;
    border: 2px solid #000
}

.our-work .owl-stage-outer .owl-item,
.our-work-1 .owl-stage-outer .owl-item,
.service-slider .owl-stage-outer .owl-item {
    transform: scale(.89)
}

.fab.active .fabTrigger,
.lightbox-container.active .lightbox-image-wrapper,
.our-work .owl-stage-outer .owl-item.active.center,
.our-work-1 .owl-stage-outer .owl-item.active.center,
.service-slider .owl-stage-outer .owl-item.active.center {
    transform: scale(1)
}

.our-process .owl-next.disabled,
.our-process .owl-prev.owl-prev.disabled,
.our-work .owl-next.disabled,
.our-work .owl-prev.owl-prev.disabled,
.our-work-1 .owl-next.disabled,
.our-work-1 .owl-prev.owl-prev.disabled,
.teamSection .owl-prev.owl-prev.disabled {
    transition: .2s ease-in;
    opacity: 0;
    visibility: hidden
}

.fab .fabNav a:hover .fabTooltip,
.fab.active .fabNav a {
    visibility: visible;
    opacity: 1
}

.section-title-recent {
    font-size: 70px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px
}

.recent-project img {
    right: 0;
    left: 80px;
    top: 31px
}

.recent-project img.indriq {
    right: 0;
    left: 0;
    transform: scale(1.1);
    top: 33px
}

.recent-project img.croft {
    right: 0;
    left: 0;
    transform: scale(1.5);
    top: 29px
}

.recent-project img.shanghai {
    right: 0;
    left: 0;
    transform: scale(.8);
    top: -14px
}

.recent-project img.thyme {
    right: 0;
    left: 19px;
    transform: scale(1.1);
    top: -44px
}

.recent-project img.milltete {
    right: 0;
    left: 49px;
    transform: scale(1.7);
    top: 126px
}

.recent-project img.crizac {
    right: 0;
    left: 101px;
    transform: scale(1.55);
    top: 72px
}

.recent-project img.hin {
    right: 0;
    left: 101px;
    transform: scale(1.8);
    top: 122px
}

.recent-project img.dazs {
    right: 0;
    left: 60px;
    transform: scale(1.1);
    top: 53px
}

.recent-project img.avanza {
    right: 0;
    left: 20px;
    transform: scale(1.4);
    top: 93px
}

.color-bg-vio {
    background-color: #ebefff
}

.color-bg-pur {
    background-color: #f6f2ff
}

.color-bg-grey {
    background-color: #f5f5f5
}

.color-bg-red {
    background-color: #fff4f4
}

.color-bg-green {
    background-color: #e2fff0
}

.color-bg-yellow {
    background-color: #fff9e3
}

.color-bg-cream {
    background-color: #fff8d8
}

.color-bg-blue {
    background-color: #e4f8ff
}

.recent-project img.ship {
    right: 0;
    left: -15px;
    transform: scale(.7);
    top: -52px
}

.recent-project img.helme {
    right: 0;
    left: -56px;
    transform: scale(1.6);
    top: 110px
}

a.pxp-results-card-1 {
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 0
}

.recent-project {
    border-radius: 20px;
    box-shadow: 0 7px 13px 2px #00000014;
    border: 2px solid #f3f3f3
}

.recent-img {
    position: relative;
    height: 410px
}

.project-na {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.project-na h4 {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: normal
}

.project-na .category {
    color: #fff;
    background-color: #ffffff45;
    border-radius: 5px;
    padding: 4px 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px
}

.filters ul li {
    list-style: none;
    padding: 15px 20px 11px;
    cursor: pointer;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    font-size: 25px;
    font-family: var(--font-primary);
    position: relative;
    letter-spacing: 1px
}

.filters-content {
    margin-top: 30px
}

.date-visit-btn,
.you-might-also-like .casestudy-Bx .case-content h3 a {
    margin-top: 25px
}

.custom-padding-1 {
    --bs-gutter-x: 4.5rem
}

.filters,
.filters-1 {
    display: flex;
    justify-content: center
}

.filters .active {
    color: #d0d0d0
}

.filters ul {
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 60px;
    box-shadow: 3px 4px 0 1px #000;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: end;
    position: relative
}

.filters ul li::after {
    content: '';
    position: absolute;
    top: 24px;
    left: -4px;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background-color: #000
}

.img-carousel,
.img-carousel .imageslider,
.referImg {
    text-align: right
}

.teamBx .team-img .member-bg,
.transitionMedia {
    transition: .3s ease-in
}

.innerContentTop {
    border: 2px solid #000;
    border-radius: 23px;
    padding: 25px 30px
}

.innerContentTop.transitionMedia img {
    width: 60px
}

.innerContentTop:hover,
.left-media:hover,
.right-media:hover {
    box-shadow: 8px 7px 0 1px #000
}

.headingLogo {
    display: flex;
    justify-content: space-between;
    align-items: start
}

.bg-img-new,
.date-visit-btn {
    align-items: center;
    display: flex
}

.mediaHeading {
    margin-bottom: 17px;
    font-size: 23px;
    text-align: left
}

.mediaWrapper p {
    padding-right: 20%;
    line-height: 1.6;
    text-align: left;
    padding-top: 15px;
    padding-bottom: 15px
}

.left-media,
.right-media {
    padding: 25px 30px;
    margin-top: 40px;
    width: 100%;
    text-align: right
}

.date-visit-btn .date p {
    font-family: var(--font-secondary);
    font-size: 18px;
    color: #000;
    transition: .3s ease-in;
    font-weight: 500;
    margin-right: 50px;
    padding: 0
}

.date-visit-btn .visit-site a {
    font-family: var(--font-secondary);
    font-size: 18px;
    color: #000;
    transition: .3s ease-in;
    font-weight: 500
}

.left-media {
    border: 2px solid #000;
    border-radius: 43px;
    margin-right: 20px
}

.right-media {
    border: 2px solid #000;
    border-radius: 43px;
    margin-left: 20px
}

.left-media .logo img,
.right-media .logo img {
    padding-bottom: 30px;
    width: 60px
}

.redBoxMedia {
    border-radius: 43px;
    padding: 100px 30px 40px 33px;
    height: 100%;
    background: url('../images/right-media-pattern.png') center/cover no-repeat, center/cover no-repeat #ef3a42;
    position: relative;
    background-blend-mode: multiply
}

.manMedia img {
    position: absolute;
    bottom: -60px;
    right: 27px
}

.rightTitle {
    color: #fff;
    line-height: 1.1;
    margin-bottom: 10px;
    font-size: 32px
}

.rightmedia-para {
    line-height: 1.5;
    font-size: 18px
}

.logo-media img {
    position: absolute;
    right: 50px;
    top: 50px
}

.contactDetails .phone,
.custom-margin-btm {
    margin-bottom: 50px
}

.custom-padding-2 {
    --bs-gutter-x: 2.5rem
}

.custom-padding-4 {
    padding: 0 0 0 150px
}

.c-image-slider,
.c-logos-slider,
.c-text-slider-1 {
    display: flex;
    white-space: nowrap;
    animation: 80s linear infinite slide
}

.c-img {
    display: flex;
    padding: 8px;
    align-items: end;
    justify-content: center;
    gap: 8px
}

.c-img img {
    width: 100%;
    object-fit: cover;
    display: flex;
    align-items: end;
    justify-content: center
}

.img-carousel .imageslider img,
.reelBlk img {
    width: auto
}

.img-carousel .item {
    text-align: right;
    display: flex;
    justify-content: center
}

.testimonialWrapper {
    padding: 50px 0
}

.bg-img-new {
    background-image: url(../images/testimonal-bg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.hero__content_Inner p {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.9
}

.testimonial-Talk {
    position: relative;
    padding-left: 15%
}

.testimonial-Talk .quoteIcon {
    position: absolute;
    top: -6px;
    left: 69px
}

.footer-top-pattern img,
.testimonial-top-pattern img {
    width: 100%;
    margin-bottom: 4px;
    margin-top: 4px
}

.ceoTalk,
.testimonial-Talk p {
    color: #fff;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.9;
    text-align: left
}

.testimonial-Talk span.red-stripe {
    color: #fff;
    font-size: 35px;
    font-weight: 500;
    z-index: 2;
    position: relative;
    background: url(../images/dflighdf.png);
    line-height: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding: 12px 25px;
    border-radius: 13px;
    margin-top: 4px;
    margin-right: 0;
    margin-left: 103px
}

.logo-review-icon {
    width: 138px
}

.testimonialSlider .nextArrow,
.testimonialSlider .prevArrow {
    color: #fff;
    font-size: 30px;
    position: absolute;
    bottom: 0;
    z-index: 9;
    width: 55px;
    height: 55px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px
}

.testimonialSlider .prevArrow {
    right: 68px
}

.testimonial-Talk span.red-stripe img {
    position: absolute;
    left: -23px;
    right: 0;
    bottom: -14px;
    z-index: -1
}

.testimonail-author {
    display: flex;
    margin-top: 70px;
    align-items: center
}

.ceoName,
.testi h4 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 26px;
    font-weight: 600;
    line-height: 29px;
    font-family: var(--font-secondary);
    text-align: left
}

.panel__options span,
.testi p {
    font-size: 14px
}

.copyright,
.social-links a,
.topText {
    text-align: center
}

.reviews-position {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 21px;
    color: #fff
}

.text,
.text span.highlight-text,
.text.service-text {
    font-size: 80px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-secondary)
}

.section.bogusWrapper .text-1,
.text,
.text.service-text {
    white-space: nowrap;
    line-height: .9
}

.pix-holder {
    align-items: center;
    display: flex
}

.testi p {
    color: #fff;
    font-family: var(--font-secondary);
    padding-right: 0;
    line-height: 1.2;
    font-weight: 400
}

.socialWrap {
    padding-left: 10%
}

.text span.highlight-text {
    color: #ffc107;
    position: relative;
    white-space: nowrap;
    -webkit-text-fill-color: #FFC107;
    -webkit-text-stroke: 0px #ebebeb;
    margin: 0 73px
}

.text {
    color: #000;
    -webkit-text-fill-color: #ffffff00;
    -webkit-text-stroke: 2px #404040;
    margin-bottom: 35px
}

.text.service-text {
    color: #ffc1075e;
    -webkit-text-fill-color: #ffc10721;
    -webkit-text-stroke: 2px #ffc10700;
    margin-bottom: 70px
}

.gallery-thumbs {
    padding-right: 100px
}

.primary-text-color {
    color: #101828
}

.secondary-text-color {
    color: #3065fa
}

.text-gray {
    color: #344054
}

.text-gray-light {
    color: #667085
}

.bg-blue {
    background: #3065fa
}

.bg-purple {
    background: #9a93f4
}

.bg-skyblue-light {
    background: #bce5f6
}

.bg-orange-light {
    background: #fcd1a6
}

.bg-green-light {
    background: #b5e5b8
}

.bgGreen,
.opusGreen {
    background-color: #1fa779
}

.bg-light {
    background: #fefdf6 !important
}

.spacer-y {
    padding: 7.5rem 0
}

.spacer-top {
    padding-top: 7.5rem
}

.spacer-bottom {
    padding-bottom: 7.5rem
}

.spacer-md {
    padding: 3.75rem 0
}

html.lenis {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-scrolling iframe {
    pointer-events: none
}

.panel {
    position: relative;
    z-index: 9
}

.panel__options {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center
}

.panel__options span:first-child:hover {
    color: #9a93f4
}

.panel__options span:nth-child(2):hover {
    color: #bce5f6
}

.panel__options span:nth-child(3):hover {
    color: #fcd1a6
}

.panel__options span:last-child:hover {
    color: #b5e5b8
}

.panel__stack {
    --spacer: 20px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
    justify-items: center;
    overflow-y: visible
}

.panel__stack .panel__card {
    grid-area: 1/1/2/2;
    border-radius: 30px;
    padding: 2.5rem;
    position: absolute;
    height: 35.625rem;
    will-change: transform
}

.panel__stack .panel__card:first-child {
    top: calc(var(--spacer) * 1);
    z-index: 1
}

.panel__stack .panel__card:nth-child(2) {
    top: calc(var(--spacer) * 2);
    z-index: 2
}

.panel__stack .panel__card:nth-child(3) {
    top: calc(var(--spacer) * 3);
    z-index: 3
}

.panel__stack .panel__card:last-child {
    top: calc(var(--spacer) * 4);
    z-index: 4
}

.panel__stack .panel__card ul {
    margin: 0;
    padding-right: 30px
}

.panel__stack .panel__card ul li {
    position: relative;
    margin-bottom: 15px;
    font-size: 1rem;
    padding-left: 27px
}

.blog-content>p:last-child,
.custom-mar,
.featuredBlk .featureContent h2,
.list-content li:last-child,
.panel__stack .panel__card ul li:last-child,
.ptf-animated-block ul li:last-child,
.referContent p,
.referContent ul li:last-child,
.test-title,
.work-list li:last-child,
.workWrapper .text-1 {
    margin-bottom: 0
}

.panel__stack .panel__card picture {
    position: relative;
    right: -10px
}

.panel__image img.img-pane {
    position: absolute;
    right: 0;
    top: 0
}

.panel__card__img {
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 48px;
    max-width: 450px;
    width: 100%;
    margin-left: auto;
    position: relative
}

.sticky-card,
.sticky-notes {
    padding: 10px 15px;
    background: #fff;
    border-radius: 10px;
    display: flex
}

.sticky-notes {
    width: 209px;
    position: absolute;
    flex-direction: column;
    gap: 10px;
    left: -70px;
    bottom: 30px
}

.fabVertical,
.fabVertical .fabNav,
.sticky-card {
    flex-direction: column
}

.sticky-notes .draw-line {
    position: absolute;
    top: -70px;
    left: -80px
}

.sticky-cards__items,
.sticky-notes__items {
    gap: 10px
}

.sticky-notes__items div {
    padding: 10px 30px;
    border-radius: 8px
}

.sticky-notes__items div:first-child {
    background-color: #fad1d1;
    color: #d92d20
}

.sticky-notes__items div:nth-child(2) {
    background-color: #f4fad1;
    color: #f79009
}

.sticky-notes__items div:last-child {
    background-color: #d1fadf;
    color: #039855
}

.sticky-card {
    position: absolute;
    gap: 5px;
    right: -70px;
    top: 30px;
    max-width: 210px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}

.sticky-card .checkbox {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    vertical-align: middle
}

.sticky-card.sticky-card-left {
    bottom: 50px;
    left: -100px;
    top: initial
}

.panel__card--one .panel__card__img {
    background-color: #a9a3ff
}

.panel__card--two .panel__card__img {
    background-color: #d1f2ff
}

.panel__card--three .panel__card__img {
    background-color: #ffc183
}

.panel__card--four .panel__card__img {
    background-color: #98d89c
}

.panel__content .section__heading {
    font-size: 60px;
    color: #ef3a42;
    position: relative;
    line-height: 1;
    letter-spacing: unset;
    margin-bottom: 50px
}

.panel__content .section__heading img {
    position: absolute;
    left: 162px;
    bottom: -12px
}

.panel__content p.text-gray-span {
    font-size: 20px;
    color: #fff;
    background-color: #000;
    font-weight: 500;
    display: inline;
    padding: 8px 15px;
    border-radius: 10px
}

.panel__content .green-bullets li {
    font-size: 20px;
    font-weight: 500
}

.case-content p:not(:last-child),
.contactDetails h5,
.panel__content .green-bullets li:not(:last-child) {
    margin-bottom: 15px
}

.green-bullets {
    margin-top: 30px
}

.cardStacking {
    overflow: hidden;
    padding: 0
}

.cardStacking__cards {
    grid-row-gap: 2em;
    flex-flow: column;
    display: flex
}

.cardStacking .stackCard {
    border-radius: 30px;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 60px 35px;
    transform-origin: 50% -160%;
    border: 3px solid #ef3a42;
    background-color: #fff;
    height: 550px
}

.spacer {
    height: 61px
}

.spacer-1 {
    height: 120px
}

.spacer-2 {
    height: 150px
}

.our-service {
    background-image: url(../images/blur-bg.jpg);
    background-position: center;
    background-size: cover;
    padding: 120px 0
}

.footerForm {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 80px 0 0;
    background-color: #fff
}

.footer-padding-3 {
    padding-top: 25px;
    border-top: 2px solid #000;
    padding-bottom: 25px;
    margin-top: 55px
}

.footer_map img {
    margin-top: -70px;
    width: 100%;
    object-fit: none
}

.testi-item {
    padding: 0 50px
}

.footer_map {
    border-bottom: 1px dashed #ddd
}

.border-wrap {
    padding: 0;
    position: relative;
    border-radius: 20px;
    z-index: 2;
    border: 0 solid #454545a8;
    max-width: 582px;
    margin: 0 auto 0 96px
}

.formTit {
    background: url(../images/dflighdf.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: capitalize;
    margin-bottom: 35px
}

.contact__wrapper {
    position: relative;
    z-index: 2;
    padding: 170px 30px 50px;
    border-bottom: 0;
    background: #272727;
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px
}

.badge-1,
.badge-2 {
    backdrop-filter: blur(7.6px)
}

.contact__wrapper .form-name {
    font-size: 25px;
    background: #fdb914;
    background: linear-gradient(130deg, #fdb914 0, #ffda7f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    margin-bottom: 16px
}

.contact__form input,
.contact__form textarea {
    border: 0;
    border-bottom: 1px solid #3e3e3e;
    font-size: 16px;
    padding: 17px 0;
    color: #fff;
    width: 100%;
    background: 0 0;
    box-shadow: 0 20px 20px 20px #00000000
}

::placeholder {
    color: #fff
}

.contact__form .submit-site-btn {
    padding: 16px 30px;
    border-radius: 50px;
    background-color: transparent;
    color: #fdb914;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: .3s;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 77px 0 0 -46px;
    border: 2px solid #fdb914
}

.contact__form .submit-site-btn:hover {
    background-color: #fcb814;
    color: #000
}

.contact__form .submit-site-btn img {
    padding-left: 20px
}

.banner-scroll-5,
.mt-30 {
    margin-top: 15px
}

.absolute-footer {
    background-color: #000;
    padding: 30px 0
}

.copyright {
    font-size: 16px;
    font-weight: 400;
    color: #222
}

.footer-logo a img {
    width: 180px
}

.social-links ul {
    list-style: none;
    position: relative;
    display: grid;
    padding-left: 0;
    margin-bottom: 0;
    grid-template-columns: 1fr 1fr 1fr
}

.social-links ul li:nth-child(4):after,
.social-links ul::before {
    content: '';
    border-image: linear-gradient(87deg, rgb(255 255 255 / 71%) 0%, rgb(207 207 207 / 29%) 25%, #bfbfbf40 50%, #bfbfbf4a 75%, rgb(255 255 255 / 0%) 100%) 1;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    right: 0;
    left: -36px;
    width: 300px;
    top: 22px;
    bottom: 0;
    opacity: 1;
    border-left: 0;
    height: 1px;
    border-right: 0
}

.social-links ul li:first-child:before,
.social-links ul li:nth-child(2):before,
.social-links ul li:nth-child(3):before,
.social-links ul li:nth-child(4):before {
    height: 140px;
    top: -8px;
    bottom: 0;
    opacity: .8
}

.social-links ul li:first-child:before,
.social-links ul li:nth-child(2):before,
.social-links ul li:nth-child(3):before,
.social-links ul li:nth-child(4):before,
.social-links ul li:nth-child(5):before,
.social-links ul::after {
    content: '';
    border-image: linear-gradient(87deg, rgb(255 255 255 / 71%) 0%, rgb(207 207 207 / 29%) 25%, #bfbfbf40 50%, #bfbfbf4a 75%, rgb(255 255 255 / 0%) 100%) 1;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    right: 0
}

.social-links ul::after {
    left: -36px;
    width: 300px;
    bottom: -21px;
    opacity: 1;
    height: 1px;
    z-index: 9
}

.social-links ul li:nth-child(5):before {
    left: 148px;
    width: 1px;
    height: 177px;
    top: 29px;
    bottom: 0;
    opacity: .8
}

.holder-relative,
.nav-item-link.mobile-drop,
.our-process .owl-stage,
.ourProcess .our-process,
.related-img,
.right-panel,
.social-links ul li:first-child,
.social-links ul li:nth-child(2),
.social-links ul li:nth-child(3),
.social-links ul li:nth-child(4),
.text-container,
.workWrapper .our-work-1 {
    position: relative
}

.footer__menu ul {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0
}

.footer__menu ul li:not(:last-child) {
    margin-right: 55px
}

.footer__menu ul li a {
    color: #222;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-secondary);
    text-transform: capitalize
}

.social-links a:not(:last-child) {
    margin-right: 0
}

.addWrap {
    padding-left: 30%
}

.addWrap-1 {
    padding-left: 21%
}

.addWrap-2,
.addWrap-3 {
    padding-left: 13%
}

.footerTitle {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase
}

.socialWrap .footerTitle {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    padding-left: 23px
}

.footer_menu-1 li {
    line-height: 1;
    margin-top: 1.575rem
}

.footerForm a {
    color: #222;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    transition: .2s
}

.phoneWrap li a {
    text-transform: lowercase;
    font-size: 16px;
    font-weight: 400
}

.footerForm a:hover {
    color: var(--color-1);
    padding-left: 5px
}

.social-links a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 0;
    border-radius: 0;
    font-size: 30px;
    line-height: 41px;
    color: #222;
    padding: 34px 0;
    font-weight: 400
}

.workWrapper .our-work-1 .owl-nav .next_btn,
.workWrapper .our-work-1 .owl-nav .prev_btn {
    top: 47%;
    width: 40px;
    height: 40px;
    align-items: center;
    background-color: #fff;
    display: flex;
    transform: translate(-50%, -50%);
    box-shadow: 1px 1px 0 1px #000
}

.daily-creative .casestudy-Bx .case-content p,
.strategy-dev p {
    padding-right: 0
}

.social-links a i.flaticon-my-business {
    padding-top: 5px;
    font-size: 32px;
    z-index: 1
}

.social-links a i,
.social-links a i.ri-instagram-line {
    font-size: 35px
}

.imag-bg {
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    z-index: 1;
    transform: translate(-50%, -17%)
}

.blur-overlay,
.fade-effect {
    transform: translateX(-50%);
    pointer-events: none
}

.topText {
    position: relative;
    z-index: 2
}

.text-1 span.highlight-text-1 {
    font-size: 48px;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    font-family: var(--font-secondary);
    white-space: nowrap;
    -webkit-text-fill-color: #000;
    -webkit-text-stroke: 0px #000;
    margin: 0 73px
}

.text-1 span.highlight-text-1.texture-text {
    background: url(../images/REC.png) 0 0/cover padding-box text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    font-size: 150px;
    text-transform: uppercase;
    position: relative;
    font-family: var(--font-primary);
    white-space: nowrap;
    font-weight: 400;
    margin: 0 73px
}

.section.bogusWrapper .text-1 {
    font-size: 150px;
    text-transform: uppercase;
    font-family: var(--font-primary);
    color: #000;
    -webkit-text-fill-color: #eeeeeeab;
    font-weight: 400;
    margin-bottom: 50px
}

.section.teamSection .text-1,
.text-1 {
    font-size: 80px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-text-fill-color: #eeeeeeab;
    line-height: .9;
    margin-bottom: 50px;
    font-family: var(--font-secondary);
    color: #000;
    text-transform: uppercase
}

.case-details-body h2,
.gallery-top {
    text-align: left
}

.connecting-green {
    width: 10px;
    height: 10px;
    background-color: #40bead;
    border-radius: 90px;
    position: absolute;
    top: 390px;
    left: 320px;
    padding: 0
}

.client,
.connecting-blue,
.connecting-blue-2,
.connecting-blue-3,
.connecting-blue-4,
.connecting-red,
.connecting-yellow {
    border-radius: 100px
}

.connecting-blue-2 {
    width: 12px;
    height: 12px;
    background-color: #2395d2;
    position: absolute;
    top: 237px;
    left: 601px;
    padding: 0
}

.connecting-blue-3 {
    width: 10px;
    height: 10px;
    background-color: #ef3a42;
    position: absolute;
    top: 390px;
    left: 79%;
    padding: 0
}

.fade-effect {
    position: absolute;
    top: 36px;
    left: 64px;
    width: 240px;
    height: 87%;
    background: #fff;
    background: linear-gradient(93deg, #fff 0, rgb(255 255 255) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1
}

.connecting-blue-4 {
    width: 15px;
    height: 15px;
    background-color: #fdb914;
    position: absolute;
    top: 400px;
    left: 59%;
    padding: 0
}

.blur-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 200px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    z-index: 10
}

.connecting-blue {
    width: 25px;
    height: 25px;
    background-color: #2395d2;
    position: absolute;
    top: 390px;
    right: 1300px
}

.connecting-blue-small {
    width: 13px;
    height: 13px;
    background-color: #000;
    border-radius: 100px;
    position: absolute;
    top: 396px;
    right: 1085px;
    padding: 0
}

.connecting-red {
    width: 10px;
    height: 10px;
    background-color: #ef3a42;
    position: absolute;
    top: 317px;
    left: 0;
    padding: 0
}

.connecting-yellow {
    width: 30px;
    height: 30px;
    background-color: #fdb914;
    position: absolute;
    top: 387px;
    left: 49%;
    padding: 0
}

.bg-pattern-abt,
.bg-pattern-brand {
    background-size: cover;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat
}

.bg-pattern-brand {
    background-image: url(../images/brand-pattern.png);
    padding-bottom: 90px
}

.bg-pattern-abt {
    background-image: linear-gradient(3deg, rgb(255 255 255) 0, rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 0%) 100%), url(../images/brand-pattern.png);
    padding-bottom: 154px
}

h2.wear-red {
    font-size: 200px;
    line-height: 1;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    background: #ff454d;
    background: linear-gradient(100deg, #ff454d 0, #ff000a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: -7px 0 0;
    position: relative
}

img.bottom-icon {
    margin-top: -13px
}

.img-block img {
    margin-top: -270px
}

.ceoImg,
.scroller,
.stuck-socila {
    text-align: center
}

.black-ribbon-1 {
    background: url(../images/brand-stripe.png) center/cover;
    width: 103%;
    bottom: 175px;
    overflow: hidden;
    left: -21px;
    height: 80px;
    right: 0
}

.c-text-container-1 {
    overflow: hidden;
    display: flex;
    padding: 15px 0;
    position: absolute;
    bottom: 2px
}

.c-text-1 a p {
    color: #000;
    font-family: var(--font-secondary);
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.3;
    text-transform: uppercase;
    margin-top: 0
}

.c-text-1 img {
    max-width: 82px;
    width: 25px
}

.client-logo-1 {
    padding: 120px 0 50px
}

.accordion-body ul,
.modalRefer .modal-body,
.strategy-dev {
    padding: 0
}

.accordion-body ul li {
    line-height: 1.5;
    padding: 0 20px;
    margin-bottom: 11px;
    color: #222;
    font-size: 16px
}

.accordion-body ul.jobDescList {
    list-style: inside
}

.accordion-button:focus {
    z-index: 3;
    border-color: #86b6fe00;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 109, 253, 0)
}

.accordion-body p:not(:last-child),
.floating_menu ul li:not(:last-child) {
    margin-bottom: 10px
}

.strategy-dev p {
    margin-bottom: 0;
    line-height: 38px
}

.strategy-dev p:not(:last-child) {
    margin-bottom: 23px
}

.start-img {
    position: unset;
    border-radius: 20px;
    width: 100%;
    height: 100%
}

.find-top {
    margin-top: 20px
}

.strat-dev .left-img {
    padding-right: 7%
}

.bordered {
    border: 2px solid #000
}

.submit-site-btn img {
    padding-left: 2px;
    width: 52px;
    height: 32px
}

.bgcolor-none {
    background-color: transparent
}

.our-work-1 .owl-stage-outer {
    display: inline-block;
    margin-left: -80px
}

.workWrapper .our-work-1 .owl-nav .next_btn {
    right: 124px;
    border-radius: 50%;
    justify-content: center;
    border: 2px solid #000
}

.workWrapper .our-work-1 .owl-nav .prev_btn {
    left: 0;
    border-radius: 50%;
    justify-content: center;
    border: 2px solid #000
}

.ourProcess .our-process .owl-nav .prev_btn img,
.teamSection .teamSlider .owl-nav .prev_btn img,
.workWrapper .our-work-1 .owl-nav .prev_btn img {
    width: 20px;
    margin-right: 4px
}

.ourProcess .our-process .owl-nav .next_btn img,
.teamSection .teamSlider .owl-nav .next_btn img,
.workWrapper .our-work-1 .owl-nav .next_btn img {
    width: 20px;
    margin-left: 4px
}

.our-process .work-img img,
.our-work-1 .work-img img {
    border-radius: 0;
    width: auto
}

.brading-section,
.strat-dev {
    padding: 0 0 100px
}

.float-14 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid #000;
    width: auto;
    position: absolute;
    right: 35%;
    top: 26px;
    height: auto
}

.float-15,
.float-16 {
    border-radius: 50px;
    line-height: 1;
    padding: 9px 30px 5px;
    text-transform: uppercase;
    width: auto;
    position: absolute;
    height: auto;
    background-color: #fff;
    color: #000;
    font-family: var(--font-secondary)
}

.float-15 {
    border: 2px solid #000;
    right: 384px;
    bottom: 75px
}

.float-16 {
    border: 2px solid #000;
    left: 637px;
    top: 25px
}

.float-17 {
    font-family: var(--font-secondary);
    line-height: 1;
    background-color: #fff;
    color: #000;
    padding: 9px 30px 5px;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid #000;
    width: auto;
    position: absolute;
    left: 406px;
    bottom: 75px;
    height: auto;
    z-index: 1
}

.accordion.custom-accord {
    border: 0
}

.custom-accord h2 button {
    font-size: 22px;
    color: #222;
    padding: 25px 20px;
    font-weight: 600;
    line-height: 1.2;
    transition: .3s;
    background-color: #fafafa
}

.custom-accord .accordion-item {
    background-color: #fff;
    border: 0 solid rgba(0, 0, 0, .125);
    border-bottom: 0 solid #e5e5e5
}

.faq-number {
    background-color: #000;
    min-width: 30px;
    max-height: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    font-size: 15px
}

.custom-accord .accordion-button:not(.collapsed) {
    color: #222;
    background-color: transparent;
    box-shadow: inset 0 0 0 transparent;
    transition: .3s;
    border-bottom: 2px dashed #e0e0e0
}

.custom-accord .accordion-body {
    padding: 15px 33px 20px 0
}

.custom-accord .accordion-body p {
    line-height: 36px;
    color: #222;
    font-size: 18px;
    padding: 0 20px
}

.custom-accord .accordion-body h5 {
    padding: 0 20px;
    margin-bottom: 15px;
    margin-top: 20px
}

.custom-accord .accordion-body a {
    margin: 10px 20px 20px;
    font-weight: 600;
    transition: .3s
}

.custom-accord .accordion-body a:hover {
    background-color: #fdb914;
    color: #000
}

.custom-accord .accordion-button::after {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: auto;
    content: "";
    background-image: url(../images/plus.svg);
    background-repeat: no-repeat;
    background-size: 1.5em;
    transition: transform .2s ease-in-out;
    background-position: center;
    border-radius: 50px
}

.our-process .owl-stage::after,
.our-process .owl-stage::before {
    content: '';
    width: 95%;
    border-bottom: 2px dashed silver;
    height: 2px;
    bottom: 0
}

.custom-accord .accordion-button:not(.collapsed)::after {
    background-image: url(../images/minus.svg);
    transform: rotate(-180deg);
    background-size: .9em
}

.our-process .owl-stage-outer {
    display: inline-block
}

.innerWrapper {
    padding: 50px 35px;
    border-radius: 30px;
    border: 2px solid #e0e0e0
}

.connectdotdown,
.connectdotleftdown,
.connectdotleftup,
.connectdotup {
    width: 15px;
    border-radius: 20px;
    height: 15px
}

.processWrapper {
    position: relative;
    background-color: #fff
}

.innerWrapper .content h3 {
    font-size: 34px;
    margin-bottom: 13px;
    margin-top: 24px;
    line-height: 1
}

.processWrapper .content p {
    line-height: 32px;
    padding-right: 50px
}

.connectdotup {
    position: absolute;
    background-color: #000;
    right: 25px;
    top: 30px
}

.connectdotdown {
    position: absolute;
    background-color: #000;
    right: 25px;
    bottom: 30px
}

.connectdotleftdown {
    position: absolute;
    background-color: #000;
    left: 25px;
    bottom: 30px
}

.connectdotleftup {
    position: absolute;
    background-color: #000;
    left: 25px;
    top: 30px
}

.our-process .owl-stage::before {
    top: 39px;
    position: absolute
}

.our-process .owl-stage::after {
    position: absolute;
    top: 519px;
    z-index: -1;
    visibility: visible
}

.case-study-overview {
    padding-bottom: 3%;
    padding-top: 9%
}

.case-study-btn,
.case-study-btn-1 {
    padding: 15px 20px;
    font-size: 22px;
    letter-spacing: 5px;
    width: 100%;
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none
}

.case-study-btn {
    border: 2px solid #000;
    background-color: #222;
    color: #fff;
    border-radius: 50px
}

.case-study-btn:hover,
.creative .left-panel1 h2,
.fab .fabNav a:hover i,
.floating_menu a:hover {
    color: #fff
}

.case-study-btn-1 {
    border: 2px solid #0000000a;
    border-radius: 50px;
    background-color: #f9f9f9
}

.case-study-listing {
    padding: 0 0 90px
}

.casestudy-Bx.blog-Bx .case-img img {
    height: 253px;
    width: 100%
}

.case-content {
    position: relative;
    padding: 0
}

.case-study-listing .case-content {
    position: relative;
    padding: 20px 20px 25px
}

.casestudy-Bx.blog-Bx .case-content {
    position: relative;
    padding: 0 20px;
    height: auto
}

.casestudy-Bx .case-img img {
    height: 277px;
    width: 100%;
    object-fit: cover
}

.daily-creative .casestudy-Bx .case-img img {
    height: auto;
    width: 100%;
    object-fit: cover
}

.case-study-listing.daily-creative .case-content {
    height: auto;
    position: relative;
    padding: 10px 20px
}

.case-study-listing.daily-creative .casestudy-Bx .case-content a {
    font-family: var(--font-secondary);
    font-size: 18px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: .3s ease-in;
    color: #000;
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
    cursor: unset
}

.casestudy-Bx .case-content h3 a {
    font-family: var(--font-secondary);
    font-size: 30px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: .2s ease-in;
    color: #000;
    font-weight: 600;
    display: inline-block;
    margin-top: 25px
}

.casestudy-Bx .case-content a {
    font-family: var(--font-secondary);
    font-size: 18px;
    margin-bottom: 0;
    text-decoration: none;
    transition: .3s ease-in;
    color: #000;
    font-weight: 500;
    display: inline-block;
    margin-top: 10px
}

.blog-grid .casestudy-Bx .case-content h3 a {
    margin-top: 22px
}

.blog-grid .casestudy-Bx .case-content a {
    margin-top: 10px
}

.case-study-listing .casestudy-Bx .case-content a {
    font-family: var(--font-secondary);
    font-size: 23px;
    margin-bottom: 8px;
    text-decoration: none;
    transition: .3s ease-in;
    color: #000;
    font-weight: 600;
    display: block;
    margin-top: 0
}

.casestudy-Bx .case-content p {
    font-family: var(--font-secondary);
    font-size: 18px;
    color: #000;
    padding-right: 150px;
    line-height: 28px
}

.logo-btm img {
    position: absolute;
    right: 0;
    width: 50px;
    bottom: 0
}

.custom-padding-case {
    --bs-gutter-x: 2.1rem;
    --bs-gutter-y: 4rem
}

.custom-padding-case-1 {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem
}

.custom-padding-blog {
    --bs-gutter-x: 7.1rem;
    --bs-gutter-y: 4rem
}

.blog-listing {
    padding: 69px 0 80px
}

.casestudy-Bx .case-content a.hover-underline-animation {
    color: #222;
    display: inline-block;
    position: relative;
    height: 60px;
    line-height: 56px;
    transition: .2s;
    padding: 0 26px;
    z-index: 1
}

.casestudy-Bx .case-content a.hover-underline-animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #fdb914;
    opacity: .5;
    width: 56px;
    height: 56px;
    transition: .3s;
    z-index: -1
}

.casestudy-Bx .case-content a.hover-underline-animation:hover::before {
    width: 100%;
    background: #fdb914;
    opacity: 1
}

.casestudy-Bx .case-content a.hover-underline-animation:hover i {
    transform: translateX(0)
}

.casestudy-Bx .case-content a.hover-underline-animation i {
    position: relative;
    margin-left: 8px;
    font-weight: 500;
    transform: translateX(-5px);
    transition: .3s;
    display: inline-block;
    font-size: 20px
}

.blogListing .filters-1 {
    display: flex;
    justify-content: start
}

.author_date .author-bx,
.author_date .author-bx .author,
.client_field,
.fab .fabNav,
.quote {
    display: flex;
    align-items: center
}

.section.blogListing {
    padding: 9% 0 0
}

.section.ctaSection.blgCta .soloBtn {
    margin-left: auto
}

.floating_menu li+li,
.section.ctaSection.blgCta .soloBtn .btn {
    margin-top: 0
}

.section.ctaSection.blgCta .talk-pat {
    position: absolute;
    top: -261px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%
}

.section.blogInnerDetails {
    padding-top: 150px
}

.blog-inner-banner img {
    border-radius: 30px;
    width: 100%;
    position: relative;
    object-fit: cover;
    overflow: hidden
}

.blog-inner-banner,
.team-img .frame {
    position: relative;
    overflow: hidden
}

.blog-inner-banner .overlap-title {
    padding: 45px 51px;
    position: absolute;
    bottom: 0;
    width: 100%
}

.blog-inner-banner .overlap-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #020024;
    background: linear-gradient(0deg, rgb(0 0 0) 0, rgba(1, 0, 18, .7063200280112045) 49%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 0 30px 30px
}

.blog-inner-banner .overlap-title h1 {
    color: #fff;
    z-index: 2;
    position: relative
}

.blog-content h2 {
    line-height: 1.4;
    margin-top: 60px
}

.blog-content h2 img {
    margin-right: 15px
}

.ctsom-blog-pad,
.mobileCasestudy {
    padding: 60px 0 0
}

img.gmb {
    width: 22px
}

.blog-content h3 img {
    margin-right: 25px
}

.blog-content p {
    line-height: 40px;
    margin-bottom: 35px
}

.blog-content p.author-name {
    line-height: 1.1;
    margin-left: 20px;
    font-weight: 500;
    margin-bottom: 0;
    font-size: 18px
}

.author_date {
    margin: 0 0 20px
}

.author_date .author-bx .datebx {
    margin-left: 25px
}

.author_date .author-bx .datebx p.date {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 0;
    font-size: 18px
}

.section.you-might-also-like h2 {
    margin-bottom: 48px
}

.author_date .author-bx .author-img {
    width: 60px;
    height: 60px
}

.blog-content h4.bgText {
    color: var(--color-1);
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--font-secondary);
    line-height: 1;
    border-radius: 10px;
    background-color: #000;
    display: inline-block;
    margin-bottom: 50px;
    padding: 11px 20px
}

.blog-content h3 {
    font-size: 30px;
    margin-bottom: 15px;
    line-height: 1.3;
    font-weight: 600
}

.blog--middle-img {
    margin-bottom: 80px;
    text-align: left
}

.list-content {
    padding-left: 21px
}

.list-content li {
    margin-bottom: 14px
}

.quote {
    padding: 30px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 70px
}

.quote .quote-img {
    min-width: 139px;
    height: 145px
}

.quote .quote-img img {
    width: 139px;
    height: 145px
}

.quote .quote-text .founder-title {
    font-size: 29px;
    line-height: 1;
    margin-bottom: 8px
}

.banner-scrolll-5 img.banner-image-right,
.quote .quote-text {
    margin-left: 30px
}

.quote .quote-text .bio {
    font-size: 16px;
    line-height: 31px;
    margin-bottom: 0;
    padding-right: 40px;
    text-transform: capitalize
}

.quote .quote-text .desg {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 15px;
    padding-right: 140px
}

.case-study-details .case-title,
.case-study-details .case-title .case-tex {
    font-size: 50px;
    margin-bottom: 35px;
    line-height: 1.3
}

.case-study-details-sec {
    padding: 150px 0 0
}

.client,
.field {
    padding: 15px 25px;
    width: auto;
    background-color: #fff;
    display: inline-block
}

.case-study-details .case-title .case-tex {
    font-weight: 700;
    background: url(../images/dflighdf.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.client {
    border: 2px solid #d7d7d7;
    font-weight: 500
}

.client span {
    color: #000;
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-secondary);
    line-height: 1
}

.client p,
.field p,
.list-unstyled.work-list li {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-secondary)
}

.client p,
.field p {
    color: #000;
    line-height: 1.2;
    text-transform: uppercase
}

.field {
    border-radius: 100px;
    border: 2px solid #d7d7d7;
    margin-left: 20px
}

.field span {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-secondary);
    line-height: 1
}

.workTypeWrapper {
    border-radius: 30px;
    background-color: #fff;
    border: 2px solid #000;
    padding: 30px 22px 20px;
    box-shadow: 3px 4px 0 1px #000;
    margin-left: 150px
}

.workTypeWrapper .work-title {
    font-size: 30px;
    color: #000;
    line-height: 1.2;
    margin-bottom: 15px
}

.list-unstyled.work-list li {
    margin-bottom: 0;
    display: flex;
    padding: 13px 0
}

.list-unstyled.work-list {
    column-count: 2;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0
}

.list-unstyled.work-list li::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 9px;
    margin-top: 4px
}

ul.list-unstyled.work-list li:first-child::before {
    background-image: url(../images/element-cs-1.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

ul.list-unstyled.work-list li:nth-child(2)::before {
    background-image: url(../images/element-cs-2.svg);
    background-position: center;
    background-size: cover
}

ul.list-unstyled.work-list li:nth-child(3)::before {
    background-image: url(../images/element-cs-3.svg);
    background-position: center;
    background-size: cover
}

ul.list-unstyled.work-list li:nth-child(4)::before {
    background-image: url(../images/element-cs-4.svg);
    background-position: center;
    background-size: cover
}

.case-details-body {
    padding: 80px 0 120px
}

.imageWrap img {
    border-radius: 50px;
    border: 2px solid #f2f2f2;
    width: 100%;
    object-fit: cover
}

.outcomeImg img,
.related-img img,
.video-banner-home img.vid-thumb {
    border-radius: 30px
}

.case-content p {
    line-height: 41px;
    margin-left: 0
}

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

.related-img .submit-site-btn {
    position: absolute;
    bottom: 28px;
    left: 28px;
    background-color: #222;
    color: #ffff;
    transition: .3s;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 12px 20px
}

.related-img .submit-site-btn:hover,
.tybtn:hover {
    background-color: #fcb814;
    color: #222
}

h2.wear-blue {
    font-size: 230px;
    line-height: 1;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    color: #2495d2;
    margin: 0;
    position: relative
}

.counterWrapper p,
.spot-title {
    color: #fdb914;
    text-transform: uppercase
}

.hero__content h1.main-title.fz-100 {
    font-size: 100px;
    text-align: left;
    margin-left: 101px;
    margin-bottom: -15px
}

.line-icon-btm img {
    position: absolute;
    bottom: -34px;
    left: -110px
}

.new-inner-banner {
    padding-top: 186px;
    padding-bottom: 120px;
    overflow: hidden
}

.new-dev-ban-img img {
    position: absolute;
    right: 0;
    bottom: 0;
    top: -72px
}

.bg-spot {
    background-image: url(../images/spotlight-banner.png);
    background-position: center;
    background-size: cover;
    overflow: hidden
}

.spot-title {
    font-size: 60px;
    line-height: 1;
    margin-bottom: 20px
}

.number-count,
.number-count h3 span {
    font-size: 80px;
    font-weight: 400;
    font-family: var(--font-secondary)
}

.spot-para {
    color: #fff;
    line-height: 32px;
    margin-bottom: 60px
}

.counterWrapper {
    border-top: 2px solid #ccc
}

.counterWrapper p {
    font-size: 20px;
    letter-spacing: 1px;
    font-family: var(--font-secondary);
    margin-top: 25px
}

.counterWrapper p img {
    margin-right: 10px
}

.number-count {
    color: #fff;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-top: 10px
}

.bottom-text,
.ceoDesg {
    font-size: 18px;
    color: #fff
}

.number-count h3 {
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 100px;
    font-weight: 400
}

.number-count h3 span {
    color: #fff
}

.bottom-text {
    margin-top: 50px
}

.spot-img img {
    position: absolute;
    right: -50px;
    top: -103px;
    bottom: 0;
    width: 742px
}

.wrapper-padding {
    padding: 50px 0 150px
}

.banner-scroll {
    margin-top: 0;
    overflow: hidden
}

.banner-scroll-team .banner-scrolll {
    animation: 180s linear infinite slideVer
}

.banner-scroll-team-1 .banner-scrolll {
    animation: 180s linear infinite sliderevVer
}

.banner-scroll-team .banner-scrolll img,
.banner-scroll-team-1 .banner-scrolll img {
    width: 250px
}

@keyframes slideVer {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-600%)
    }
}

@keyframes sliderevVer {
    from {
        transform: translateY(-600%)
    }

    to {
        transform: translateY(0)
    }
}

.CeoContent {
    padding-left: 160px;
    padding-right: 20px;
    position: relative
}

.ceoDesg {
    font-family: var(--font-secondary);
    line-height: 1;
    margin-top: 8px
}

.ceo-sign {
    position: absolute;
    left: 420px;
    bottom: -100px
}

.signature {
    margin-left: 80px
}

.teamSection .team-item {
    padding: 20px;
    position: relative
}

.team-img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #000;
    top: 18px;
    left: 20px;
    right: 0;
    bottom: 0
}

.teamSection {
    padding-bottom: 110px;
    background-size: contain;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat
}

.name-team,
.team-name {
    font-size: 30px;
    padding: 8px 20px 6px;
    color: #fff;
    font-family: var(--font-secondary)
}

.teamSection .teamBx:hover .name {
    bottom: 6px;
    left: 0
}

.teamSection .teamBx:hover .name.ali,
.teamSection .teamBx:hover .name.gango,
.teamSection .teamBx:hover .name.mi,
.teamSection .teamBx:hover .name.mili,
.teamSection .teamBx:hover .name.pro,
.teamSection .teamBx:hover .name.sus,
.teamSection .teamBx:hover .name.tej {
    bottom: 9px;
    left: 0
}

.teamSection .teamBx:hover .name.isha {
    bottom: 13px;
    left: 0
}

.teamSection .teamBx:hover .name.sarbo {
    bottom: 10px;
    left: 0
}

.teamSection .teamBx:hover .name.sub {
    bottom: 12px;
    left: 0
}

.teamSection .teamBx:hover .name.aman {
    bottom: 17px;
    left: 0
}

.teamSlider .owl-stage-outer {
    display: inline-block;
    padding-bottom: 20px
}

.teambox {
    text-align: center;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.name,
.name.sub {
    text-align: center;
    position: absolute;
    right: 0;
    transition: .5s;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.name {
    bottom: 219px;
    left: -26px
}

.name.sub {
    bottom: 231px;
    left: -16px
}

.name.mi,
.name.pro,
.name.sarbo,
.name.sus {
    text-align: center;
    position: absolute;
    right: 0;
    transition: .5s;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.name.mi,
.name.pro,
.name.sus {
    bottom: 238px;
    left: -8px
}

.name.sarbo {
    bottom: 223px;
    left: -19px
}

.name.ali,
.name.mili {
    text-align: center;
    position: absolute;
    right: 0;
    transition: .5s;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.name.ali {
    bottom: 217px;
    left: -28px
}

.name.mili {
    bottom: 238px;
    left: -19px
}

.name.gango,
.name.tej {
    text-align: center;
    position: absolute;
    right: 0;
    transition: .5s;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.name.gango {
    bottom: 245px;
    left: -38px
}

.name.tej {
    bottom: 225px;
    left: -28px
}

.name.aman,
.name.isha {
    position: absolute;
    right: 0;
    transition: .5s;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    text-align: center
}

.name.aman {
    bottom: 207px;
    left: -28px
}

.name.isha {
    bottom: 239px;
    left: -27px
}

.teamBx .name.pro img {
    width: 113px !important
}

.teamBx .name.sus img {
    width: 125px !important
}

.teamBx .name.mili img {
    width: 94px !important
}

.teamBx .name.ali img {
    width: 117px !important
}

.teamBx .name.gango img {
    width: 126px !important
}

.teamBx .name.tej img {
    width: 111px !important
}

.teamBx .name.aman img,
.teamBx .name.isha img {
    width: 162px !important
}

.teamBx .name.isha img {
    width: 97px !important
}

.teamBx .name.sarbo img,
.teamBx .name.sub img {
    width: 123px !important
}

.name img {
    width: 150px !important
}

.teambox img {
    width: 177px !important
}

.teambox.tej-deg img {
    width: 209px !important
}

.teambox.ama-bx img,
.teambox.isha-bx img {
    width: 155px !important
}

.teambox.sarbo-bx img {
    width: 223px !important
}

.teambox.sub-bx img {
    width: 212px !important
}

.team-name {
    border: 2px solid #000;
    box-shadow: 5px 5px 0 0 #fff
}

.name-team {
    background-color: #000
}

.teamSection .teamSlider .owl-nav .next_btn {
    right: 680px;
    bottom: -39px;
    background: url(../images/next-work.svg) center/28px no-repeat;
    width: 58px;
    height: 58px;
    border-radius: 50px;
    z-index: 9;
    border: 2px solid #000
}

.teamSection .teamSlider .owl-nav .prev_btn {
    bottom: -40px;
    background: url(../images/left.svg) center/28px no-repeat;
    width: 58px;
    height: 58px;
    right: 768px;
    border: 2px solid #000;
    border-radius: 50px;
    display: flex;
    z-index: 9;
    left: unset;
    justify-content: center
}

.blog-content .blog--middle-img img {
    height: 500px;
    object-fit: contain
}

.fab .fabNav a,
.fab .fabTrigger {
    width: 50px;
    height: 50px;
    transition: .35s cubic-bezier(.4, 2.08, .55, 1);
    position: relative;
    outline: 0
}

.scroller {
    animation-name: scroller;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-top: 150px
}

.fab,
.floating_menu ul {
    margin: 0 auto;
    display: flex
}

@keyframes scroller {

    from,
    to {
        transform: translate(0, 0)
    }

    65% {
        transform: translate(0, 15px)
    }
}

.fab {
    align-items: center;
    justify-content: center;
    transform-origin: center;
    transition: .25s;
    z-index: 9;
    width: 65px
}

.fab.active .fabTrigger .icon {
    background: 0 0;
    transition: background .3s
}

.fab.active .fabTrigger .icon,
.fab.active .fabTrigger .icon:after,
.fab.active .fabTrigger .icon:before {
    height: 3px
}

.fab.active .fabTrigger .icon:after,
.fab.active .fabTrigger .icon:before {
    width: 20px;
    transform-origin: 50% 50%;
    transition: .1s, width .1s .1s, transform .3s cubic-bezier(.28, .55, .385, 1.65) .2s
}

.fab.active .fabTrigger .icon:before {
    left: 50%;
    transform: translateX(-50%) rotate(45deg)
}

.fab.active .fabTrigger .icon:after {
    right: 50%;
    transform: translateX(50%) rotate(-45deg)
}

.fab.active .fabNav a {
    transition: .35s cubic-bezier(.4, 2.08, .55, 1)
}

.fab .fabTrigger {
    z-index: 1;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 100px;
    background: #fff;
    transform: scale(.675);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 0 rgba(108, 46, 185, .2)
}

.fab .fabTooltip,
.floating_menu a span {
    position: absolute;
    background-color: #fff;
    white-space: nowrap;
    right: calc(100% + 1.5rem);
    transform-origin: center left;
    opacity: 0;
    font-weight: 600
}

.fab .fabTrigger .icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background .3s
}

.fab .fabTrigger .icon,
.fab .fabTrigger .icon:after,
.fab .fabTrigger .icon:before {
    position: absolute;
    display: block;
    background: #000;
    width: 6px;
    height: 6px;
    border-radius: 10px
}

.fab .fabTrigger .icon:after,
.fab .fabTrigger .icon:before {
    content: "";
    transition: .1s, right .1s .1s, left .1s .1s
}

.fab .fabTrigger .icon:before {
    left: -11px;
    transform: translateX(-50%)
}

.fab .fabTrigger .icon:after {
    right: -11px;
    transform: translateX(50%)
}

.fab .fabNav a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    border: 0;
    text-decoration: none;
    border-radius: 100px;
    opacity: .0001;
    visibility: hidden;
    will-change: transform
}

.fab .fabNav a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transition: .25s
}

.fab .fabNav a i {
    font-size: 20px;
    color: #fff;
    z-index: 2;
    display: flex;
    align-items: center
}

.fab .fabTooltip {
    padding: .7rem 2rem .5rem;
    border-radius: 50px;
    transform: scale(0);
    font-family: var(--font-secondary);
    transition: .3s;
    font-size: 16px;
    box-shadow: 0 0 11px 0 #00000030
}

.fabVertical.active .fabNav.fabNav--left a {
    left: 0;
    transform: scale(1) translateX(0)
}

.fabVertical.active .fabNav.fabNav--right a {
    right: 0;
    transform: scale(1) translateX(0)
}

.fabVertical .fabTrigger {
    margin: 12px 0 0
}

.fabVertical .fabNav a {
    margin: 5px 0
}

.fab.fabVertical.active {
    padding: 1px 6px 7px;
    border-radius: 50px;
    background-color: #333
}

.fabNav.fabNav--left .img {
    width: 21px
}

.fabVertical .fabNav a:hover .fabTooltip {
    right: calc(100% + 10px);
    transform: translate(0, -50%) scale(1)
}

.fabVertical .fabNav.fabNav--left a {
    left: 0;
    transform: scale(.8) translateY(10px)
}

.fabVertical .fabNav.fabNav--left a:first-child {
    transition-delay: 0.3s
}

.fabVertical .fabNav.fabNav--left a:nth-child(2) {
    transition-delay: 0.2s
}

.fabVertical .fabNav.fabNav--left a:nth-child(3),
.fabVertical .fabNav.fabNav--right a:first-child {
    transition-delay: 0.1s
}

.fabVertical .fabNav.fabNav--right a {
    left: 0;
    transform: scale(.8) translateY(-10px)
}

.fabVertical .fabNav.fabNav--right a:nth-child(2) {
    transition-delay: 0.2s
}

.fabVertical .fabNav.fabNav--right a:nth-child(3) {
    transition-delay: 0.3s
}

.fabVertical .fabTooltip {
    top: 50%;
    right: 0;
    transform-origin: center right;
    transform: translate(0, -50%) scale(0)
}

.floating_menu {
    position: fixed;
    top: 300px;
    right: 30px
}

.floating_menu ul li {
    font-size: 0;
    line-height: 0;
    margin-top: 0;
    margin-bottom: 0
}

.floating_menu ul {
    list-style: none;
    padding: 4px;
    background-color: #00304b;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: 0 10px 50px 0 rgba(5, 4, 62, .25)
}

.floating_menu a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    position: relative;
    transition: .3s
}

.floating_menu a.active,
.floating_menu a:focus,
.floating_menu a:hover {
    background-color: #e09512;
    outline: 0
}

.floating_menu a.active span,
.floating_menu a:focus span,
.floating_menu a:hover span {
    transform: scale(1);
    opacity: 1;
    color: #000
}

.floating_menu a i {
    font-size: 28px;
    z-index: 2;
    display: flex;
    align-items: center
}

.floating_menu a span {
    padding: 3.1rem 3.5rem;
    border-radius: 50px;
    transform: scale(0);
    transition: .15s;
    font-size: 20px
}

.posi-fixed {
    position: fixed;
    top: 50%
}

.banner-scrolll {
    animation: 200s linear infinite slide;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 211px
}

.mainSlider .leftSlider {
    padding-left: 55%;
    transform: rotate(16deg)
}

.mainSlider .rightSlider {
    padding-left: 32%;
    transform: rotate(16deg)
}

.banner-scrolll-1 {
    animation: 350s linear infinite slidereverse;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3050px
}

.banner-scrolll-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4600px
}

.banner-scrolll-5 {
    display: flex;
    align-items: center;
    justify-content: center
}

.banner-scrolll-6 {
    animation: 40s linear infinite slide;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1330px
}

.blogListing .hero__content_Inner,
.case-study-overview .hero__content_Inner {
    margin-bottom: 67px
}

.color-red {
    color: #ee3b41
}

.aboutsub-banner {
    color: #000;
    font-size: 50px;
    font-family: var(--font-secondary);
    margin-bottom: 70px;
    margin-top: 7px
}

.banner-scrolll-3 {
    animation: 200s linear infinite slide;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2000px
}

.banner-scrolll-4 {
    animation: 250s linear infinite slidereverse
}

@keyframes slidereverse {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-300%)
    }
}

.connecting-section {
    padding: 120px 0 100px
}

.creative-agency-slider .creative-slider-item {
    border-radius: 20px;
    border: 4px solid #fff;
    box-shadow: 0 6px 20px 15px #0000001a;
    overflow: hidden;
    margin: 31px 31px 43px;
    position: relative
}

.creative-agency-slider .creative-slider-item img {
    width: 100%;
    position: relative
}

.banner-scrolll-5 {
    animation: 80s linear infinite slidereverses;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 920px
}

.blogListing .filters-1 .active {
    color: #222;
    background-color: #00000000;
    border: 2px solid #eee;
    border-bottom: 2px solid #eeeeee00
}

.blogListing .filters-1 .active p {
    border-bottom: 5px solid #fdb914
}

.blogListing .filters-1 ul {
    padding: 0;
    color: #fff;
    border-radius: 0;
    transition: .3s;
    align-items: center;
    justify-content: end;
    position: relative;
    display: flex;
    border-bottom: 2px solid #eee
}

.aboutbanSlider .swiper-pagination,
.blogListing .filters-1 ul li:first-child:after,
.hori-divider-mobile,
.vertical-divider-tab {
    display: none
}

.blogListing .filters-1 ul li {
    list-style: none;
    cursor: pointer;
    padding: 0 20px;
    color: #222;
    background-color: transparent;
    border: 2px solid transparent;
    transition: .5s;
    text-align: center;
    margin: 0 10px;
    border-radius: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 17px;
    font-family: var(--font-secondary);
    position: relative;
    line-height: 1.1;
    font-weight: 600
}

.blogListing .filters-1 ul li:focus-visible {
    border: 0 !important
}

.blogListing .filters-1 ul li p {
    list-style: none;
    padding: 14px 5px;
    cursor: pointer;
    color: #222;
    background-color: transparent;
    border: 0 solid transparent;
    transition: .5s;
    text-align: center;
    margin: 0 10px;
    border-radius: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 5px solid transparent;
    font-size: 16px;
    font-family: var(--font-secondary);
    position: relative;
    line-height: 1.1;
    font-weight: 600
}

.blogListing .filters-1 ul li:first-child,
.section.ctaSection.blg-cta .soloBtn .btn,
.tabdesign ul li.nav-item:first-child {
    margin: 0
}

.projectWrapper {
    border-radius: 30px;
    overflow: hidden;
    padding: 100px 65px;
    position: relative;
    height: 80vh
}

.full-wrapper-1 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center
}

.bg-yellow {
    background-color: #fdba14
}

.bg-gradient-yellow {
    background: #fdb717;
    background: linear-gradient(131deg, #fdb717 59%, #fff 70%, #ef3a43 82%)
}

.bg-gradient-blue {
    background: #4091ce;
    background: linear-gradient(131deg, #4091ce 59%, #fff 70%, #55bdad 82%)
}

.bg-gradient-red {
    background: #ee3d41;
    background: linear-gradient(131deg, #ee3d41 59%, #fff 70%, #fcb814 82%)
}

.bg-gradient-green {
    background: #55bdad;
    background: linear-gradient(131deg, #55bdad 59%, #fff 70%, #4091ce 82%)
}

.bg-blue {
    background-color: #2595d2
}

.bg-green {
    background-color: #40bead
}

.bg-grey {
    background-color: #444
}

.projectContent {
    width: 40%
}

.projectWrapper .color-blk {
    color: #000;
    font-weight: 500
}

.projectWrapper .color-wh {
    color: #fff;
    font-weight: 500
}

.projectWrapper h3 {
    color: #fff;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: unset
}

.badge-1 {
    background: 0 0;
    -webkit-backdrop-filter: blur(7.6px);
    border: 1px solid #00000052
}

.badge-2 {
    background: #ffffff30;
    -webkit-backdrop-filter: blur(7.6px);
    border: 1px solid #81b4db
}

.badge-3,
.badge-4 {
    background: #ffffff30;
    backdrop-filter: blur(7.6px)
}

.badge-3 {
    -webkit-backdrop-filter: blur(7.6px);
    border: 1px solid #f48386
}

.badge-4 {
    -webkit-backdrop-filter: blur(7.6px);
    border: 1px solid #92d5cb
}

.project-desc {
    border-radius: 6px;
    display: inline-block;
    color: #000;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    padding: 7px 20px
}

.product-desc-1 {
    color: #fff;
    font-size: 18px;
    margin-top: 20px;
    width: 67%;
    line-height: 32px
}

.text1,
.text2 {
    font-size: 16px
}

.owl-carousel .owl-item .project-banner img.starinco {
    position: absolute;
    width: 61%;
    right: 40px;
    top: -19px
}

.owl-carousel .owl-item .project-banner img.avanza {
    position: absolute;
    width: 66%;
    right: 40px;
    top: 88px
}

.owl-carousel .owl-item .project-banner img.ship {
    position: absolute;
    width: 62%;
    right: 40px;
    top: 102px
}

.owl-carousel .owl-item .project-banner img.helme {
    position: absolute;
    width: 52%;
    right: 80px;
    top: 142px
}

.owl-carousel .owl-item .project-banner img.sat {
    position: absolute;
    width: 57%;
    right: 10px;
    top: -37px
}

.owl-carousel .owl-item .project-banner img.birla {
    position: absolute;
    width: 54%;
    right: 108px;
    bottom: 75px
}

.owl-carousel .owl-item .project-banner img.birla-dm {
    position: absolute;
    width: 43%;
    right: 224px;
    bottom: -15px
}

.owl-carousel .owl-item .project-banner img.birla-brand {
    position: absolute;
    width: 57%;
    right: -2px;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.thyme {
    position: absolute;
    width: 42%;
    right: 45px;
    bottom: 50px
}

.owl-carousel .owl-item .project-banner img.crizac {
    position: absolute;
    width: 71%;
    right: 90px;
    bottom: 75px
}

.owl-carousel .owl-item .project-banner img.crizac-dm {
    position: absolute;
    width: 63%;
    right: 28px;
    bottom: 22px
}

.owl-carousel .owl-item .project-banner img.crizac-brand {
    position: absolute;
    width: 61%;
    right: 0;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.crizac-1 {
    position: absolute;
    width: 40%;
    right: 215px;
    bottom: 31px
}

.owl-carousel .owl-item .project-banner img.tarson {
    position: absolute;
    width: 60%;
    right: 40px;
    top: 79px
}

.owl-carousel .owl-item .project-banner img.hin {
    position: absolute;
    width: 42%;
    right: 190px;
    bottom: 70px
}

.owl-carousel .owl-item .project-banner img.apt,
.owl-carousel .owl-item .project-banner img.hin-dm {
    position: absolute;
    width: 60%;
    right: 0;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.hin-brand-crizac {
    position: absolute;
    width: auto;
    right: -110px;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.tar {
    position: absolute;
    width: 50%;
    right: 190px;
    bottom: 110px
}

.owl-carousel .owl-item .project-banner img.tar-dm {
    position: absolute;
    width: 55%;
    right: 0;
    bottom: -27px
}

.owl-carousel .owl-item .project-banner img.tar-brand-hin {
    position: absolute;
    width: 57%;
    right: 0;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.hel {
    position: absolute;
    width: 42%;
    right: 190px;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.hel-brand-sha {
    position: absolute;
    width: 46%;
    right: 111px;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.med {
    position: absolute;
    width: 45%;
    right: 190px;
    bottom: 42px
}

.owl-carousel .owl-item .project-banner img.med-brand-indi {
    position: absolute;
    width: 55%;
    right: 174px;
    bottom: 0
}

.owl-carousel .owl-item .project-banner img.dtc {
    position: absolute;
    width: 51%;
    right: 100px;
    bottom: 94px
}

.owl-carousel .owl-item .project-banner img.dtc-brand-daz {
    position: absolute;
    width: 54%;
    right: 100px;
    bottom: 50px
}

.owl-carousel .owl-item .project-banner img.ship-dm {
    position: absolute;
    width: 50%;
    right: 50px;
    top: -30px
}

.owl-carousel .owl-item .project-banner img.ncb {
    position: absolute;
    width: 66%;
    right: 0;
    bottom: 50px
}

.owl-carousel .owl-item .project-banner img.alhiraa {
    position: absolute;
    width: 60%;
    right: 0;
    top: 10px
}

.spacing-set,
.techStack {
    margin-top: 50px
}

.techStack h4 {
    color: #fff;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 17px;
    letter-spacing: unset
}

.icon-grid {
    display: flex;
    gap: 20px
}

.icon-box {
    background-color: #fff;
    padding: 0;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 71px;
    height: 71px
}

.icon-box img {
    max-width: 60%;
    object-fit: contain;
    max-height: 60%
}

.ourProcess .our-process .owl-nav .next_btn {
    right: -40px;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    box-shadow: 1px 1px 0 1px #000
}

.ourProcess .our-process .owl-nav .prev_btn {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    box-shadow: 1px 1px 0 1px #000
}

.cardStacking .service-slider .owl-nav .next_btn,
.cardStacking .service-slider .owl-nav .prev_btn {
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 50px;
    height: 50px;
    box-shadow: 3px 4px 0 1px #000;
    display: flex
}

.tab-design .brz-tabs__nav.brz-tabs__nav--horizontal {
    position: absolute !important;
    top: -108px !important;
    right: 32px !important
}

.cardStacking .service-slider .owl-nav .next_btn {
    right: 41px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: 2px solid #000
}

.cardStacking .service-slider .owl-nav .prev_btn {
    left: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: 2px solid #000
}

.cardStacking .service-slider .owl-nav .next_btn img,
.cardStacking .service-slider .owl-nav .prev_btn img {
    width: 30px
}

.cardStacking .owl-carousel .owl-item img {
    display: block;
    width: auto
}

.connecting-section h2.section-title {
    line-height: 1.3;
    margin-bottom: 15px
}

.connecting-section h2.section-title span.redText {
    font-weight: 700;
    font-size: 48px;
    line-height: 1
}

.banner-scroll-1 {
    margin-top: 60px;
    margin-bottom: 40px
}

.connecting-section p:not(:last-child),
.policyContent .terms-pointer-1,
.policyContent .terms-pointer-2,
.termsContent .terms-pointer-1,
.termsContent .terms-pointer-2 {
    margin-bottom: 30px
}

.connecting-section p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 2.5;
    padding-right: 4%
}

.need-proj,
.text1,
.text2,
h4.proj-comp {
    font-weight: 500
}

.connecting-section h2.section-title img {
    width: 200px;
    margin-top: -15px
}

.serviceContiner {
    width: 85%;
    margin-left: auto;
    padding-right: 15%
}

.creative ul li.active,
.form-group input.active,
.form-group textarea.active,
.gallery-thumbs .swiper-slide-active,
.informedBx:hover .overlayM {
    opacity: 1
}

.text1 {
    color: #eaf6ed45;
    margin-bottom: 10px
}

.text2 {
    color: #eaf6eda3
}

h3.Servicetitle {
    color: #fff;
    font-size: 50px
}

ul.creative-pointers {
    padding-left: 30px;
    margin-bottom: 0
}

ul.creative-pointers li {
    border-bottom: 2px solid #3e3e3e;
    padding: 25px 0 29px
}

ul.creative-pointers li:last-child {
    border-bottom: 0 solid #3e3e3e
}

ul.creative-pointers li p {
    color: #fff;
    font-size: 18px
}

ul.creative-pointers li::marker {
    color: #fdba14;
    font-size: 27px
}

.swiper-slide.swiper-slide-active .imgServ {
    border-radius: 20px;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    padding-bottom: 30px
}

.swiper-slide .imgServ {
    overflow: hidden;
    border-radius: 20px;
    filter: blur(8px);
    -webkit-filter: blur(4px)
}

.swiper-slide .imgServ img {
    border-radius: 20px
}

.swiper-3d .swiper-slide-shadow {
    background: rgb(0 0 0 / 0%)
}

.swiper-button-next::after {
    background: url(../images/next-arrow-1.svg) center/cover no-repeat;
    width: 60px;
    height: 60px
}

.swiper-button-prev::after {
    background: url(../images/left.svg) center/cover no-repeat;
    width: 58px;
    height: 58px;
    left: -87px;
    top: -36px;
    border: 2px solid #000;
    border-radius: 50px;
    background-size: 28px;
    display: flex;
    justify-content: center
}

.swiper-button-next,
.swiper-button-prev {
    font-size: 0;
    font-family: unset;
    width: 60px;
    height: 0;
    color: transparent
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    cursor: auto;
    border-color: #000;
    pointer-events: none
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: 0 0;
    border: 2px solid #e6e6e6;
    opacity: 1;
    border-radius: 5px
}

.swiper-pagination-bullet-active {
    width: 10px;
    transition: width .5s;
    border-radius: 8px;
    background: #e6e6e6;
    border: 1px solid transparent;
    height: 10px
}

.swiper-pagination {
    bottom: -49px !important;
    position: absolute
}

.mobile-drop .nav-item-text {
    text-align: start;
    display: flex;
    justify-content: space-between
}

.dropdown-mob {
    position: relative;
    z-index: 1000;
    padding: 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s, opacity .3s;
    backdrop-filter: blur(7.6px);
    -webkit-backdrop-filter: blur(7.6px)
}

.list-unstyled {
    list-style: none;
    margin: 0;
    padding: 18px 0
}

.list-unstyled li {
    padding: 13px;
    margin-bottom: 0;
    line-height: 1
}

.dropdown-mob .list-unstyled li {
    padding: 13px 0;
    border-bottom: 1px solid #4c4c4c;
    line-height: 1.2
}

.list-unstyled a {
    text-decoration: none;
    font-size: 18px;
    color: #333
}

.dropdown-icon {
    font-size: 26px;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform .3s
}

.informedBx,
.informedBx:hover {
    transition: .3s;
    border-radius: 20px
}

.dropdown-icon i {
    margin-left: 0;
    margin-right: 0;
    color: #fff
}

.antiClock span,
.clockWise span,
.popEffect span,
.pushEffect span {
    color: #00abe9;
    position: absolute;
    overflow: hidden
}

.blogInnerDetails .sticky-top {
    top: 100px;
    z-index: 9
}

.nav-item-link.active .dropdown-mob {
    max-height: 200px;
    opacity: 1;
    margin-top: 0
}

.nav-item-link.active .dropdown-mob ul {
    padding: 0 18px
}

.creative .left-panel1 h2 span.textGrad {
    color: #fcb814;
    font-size: 48px;
    font-weight: 700;
    line-height: 1
}

.creative .left-panel1 h2 span.textGrad.redgrad {
    color: #ee3d41
}

.creative .left-panel1 h2 span.textGrad.bluegrad {
    color: #2694d1
}

.creative .left-panel1 p {
    margin-bottom: 25px;
    padding-right: 5%
}

.creative ul {
    list-style: none;
    padding: 0 15% 0 0;
    margin-bottom: 0
}

.creative ul li {
    padding: 25px 15px 25px 45px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    background-color: transparent;
    transition: background-color .3s;
    position: relative;
    border-bottom: 2px solid #333;
    opacity: .3
}

.creative ul li::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 50px;
    width: 15px;
    height: 15px;
    top: 33px
}

.creative ul li:last-child {
    border-bottom: 0 solid #333
}

.creative ul li .progress-bar {
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    background-color: #ee3d41;
    width: 0;
    transition: width 2s linear
}

.bg-black {
    background-image: url(../images/testimonal-bg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.scroll-wrapper {
    margin-top: 40px
}

.creative {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    background-color: #000;
    border-top: 3px solid #fdb917;
    box-shadow: 0 -50px 110px -20px #000000ba;
    z-index: 1
}

.bx-shadow-none {
    box-shadow: none
}

.need-proj {
    font-size: 30px;
    margin-bottom: 12px
}

.fade-txt1,
.fade-txt2 {
    color: #333;
    text-align: left;
    line-height: 1;
    margin-bottom: 25px
}

.creative .right-panel {
    border-radius: 10px
}

.creative #dynamic-image {
    transition: opacity 1s ease-in-out;
    opacity: 1;
    width: 100%
}

.fadeTxt {
    display: flex;
    flex-direction: column
}

.fade-txt1 {
    font-size: 14px;
    opacity: .8
}

.fade-txt2 {
    font-size: 16px
}

.collab-gola {
    display: flex;
    align-items: center;
    margin-left: 11px
}

.colab-circle1,
.colab-circle2,
.colab-circle3 {
    border: 2px solid #fdb917;
    background-color: #000;
    border-radius: 100px;
    width: 40px;
    height: 40px;
    overflow: hidden
}

.colab-circle4,
.colab-circle5,
.colab-circle6,
.colab-circle7,
.colab-circle8,
.colab-circle9 {
    border: 2px solid #000;
    background-color: #565656;
    border-radius: 100px;
    width: 40px;
    height: 40px
}

.colab-circle2,
.colab-circle3,
.colab-circle5,
.colab-circle6,
.colab-circle8,
.colab-circle9 {
    margin-left: -11px
}

.colab-circle1 img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: 63%
}

.colab-circle2 img,
.colab-circle3 img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: 93%
}

.textture-text {
    background: url(../images/dflighdf.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2
}

.textture-text-1,
.textture-text-2 {
    background: url(../images/dflighdf.png);
    margin-bottom: 0;
    line-height: 1.2;
    font-weight: 700;
    -webkit-text-fill-color: transparent
}

.textture-text-2 {
    -webkit-background-clip: text;
    font-size: 50px
}

.textture-text-1 {
    color: #000;
    -webkit-background-clip: text;
    font-size: 48px
}

.static-text {
    color: #000;
    font-weight: 700;
    font-size: 110px;
    line-height: 1.4
}

.text1121 {
    position: relative;
    overflow: hidden;
    display: inline-block;
    transition: .3s;
    background: url(../images/dflighdf.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.antiClock,
.clockWise,
.popEffect,
.pushEffect {
    display: inline;
    text-indent: 8px
}

.antiClock span {
    animation: 12.5s linear infinite anti;
    -ms-animation: anti 12.5s linear infinite 0s;
    -webkit-animation: 12.5s linear infinite anti;
    opacity: 0
}

.antiClock span:nth-child(2),
.clockWise span:nth-child(2),
.popEffect span:nth-child(2),
.pushEffect span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s
}

.antiClock span:nth-child(3),
.clockWise span:nth-child(3),
.popEffect span:nth-child(3),
.pushEffect span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s
}

.antiClock span:nth-child(4),
.clockWise span:nth-child(4),
.popEffect span:nth-child(4),
.pushEffect span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s
}

.antiClock span:nth-child(5),
.clockWise span:nth-child(5),
.popEffect span:nth-child(5),
.pushEffect span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s
}

@-moz-keyframes anti {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -moz-transform: rotateX(180deg)
    }

    10%,
    25% {
        opacity: 1;
        -moz-transform: translateY(0)
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(0)
    }
}

@-webkit-keyframes anti {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(180deg)
    }

    10%,
    25% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(0)
    }
}

@-ms-keyframes anti {

    0%,
    100%,
    30%,
    5%,
    80% {
        opacity: 0
    }

    10%,
    25%,
    30% {
        -ms-transform: translateY(0)
    }

    5% {
        -ms-transform: rotate(180deg)
    }

    10%,
    25% {
        opacity: 1
    }
}

.clockWise span {
    animation: 12.5s linear infinite clock;
    -ms-animation: clock 12.5s linear infinite 0s;
    -webkit-animation: 12.5s linear infinite clock;
    opacity: 0
}

@-moz-keyframes clock {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -moz-transform: rotate(-180deg)
    }

    10%,
    25% {
        opacity: 1;
        -moz-transform: translateX(0)
    }

    30% {
        opacity: 0;
        -moz-transform: translateX(0)
    }
}

@-webkit-keyframes clock {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(-180deg)
    }

    10%,
    25% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }

    30% {
        opacity: 0;
        -webkit-transform: translateX(0)
    }
}

@-ms-keyframes clock {

    0%,
    100%,
    30%,
    5%,
    80% {
        opacity: 0
    }

    10%,
    25%,
    30% {
        -ms-transform: translateX(0)
    }

    5% {
        -ms-transform: rotate(-180deg)
    }

    10%,
    25% {
        opacity: 1
    }
}

.popEffect span {
    animation: 12.5s linear infinite pop;
    -ms-animation: pop 12.5s linear infinite 0s;
    -webkit-animation: 12.5s linear infinite pop;
    opacity: 0
}

@-moz-keyframes pop {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -moz-transform: rotate(0) scale(.1) skew(0) translate(0)
    }

    10%,
    25% {
        opacity: 1;
        -moz-transform: translateY(0)
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(0)
    }
}

@-webkit-keyframes pop {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(0) scale(.1) skew(0) translate(0)
    }

    10%,
    25% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(0)
    }
}

@-ms-keyframes pop {

    0%,
    100%,
    30%,
    5%,
    80% {
        opacity: 0
    }

    10%,
    25%,
    30% {
        -ms-transform: translateY(0)
    }

    5% {
        -ms-transform: rotate(0) scale(.1) skew(0) translate(0)
    }

    10%,
    25% {
        opacity: 1
    }
}

.pushEffect span {
    animation: 12.5s linear infinite push;
    -ms-animation: push 12.5s linear infinite 0s;
    -webkit-animation: 12.5s linear infinite push;
    opacity: 0
}

@-moz-keyframes push {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -moz-transform: rotate(0) scale(2) skew(0) translate(0)
    }

    10%,
    25% {
        opacity: 1;
        -moz-transform: translateX(0)
    }

    30% {
        opacity: 0;
        -moz-transform: translateX(0)
    }
}

@-webkit-keyframes push {

    0%,
    100%,
    80% {
        opacity: 0
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(0) scale(2) skew(0) translate(0)
    }

    10%,
    25% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }

    30% {
        opacity: 0;
        -webkit-transform: translateX(0)
    }
}

@-ms-keyframes push {

    0%,
    100%,
    30%,
    5%,
    80% {
        opacity: 0
    }

    10%,
    25%,
    30% {
        -ms-transform: translateX(0)
    }

    5% {
        -ms-transform: rotate(0) scale(2) skew(0) translate(0)
    }

    10%,
    25% {
        opacity: 1
    }
}

h4.proj-comp {
    font-size: 16px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 5px
}

h4.proj-comp img {
    width: 22px;
    margin-left: 0
}

.home-ribbon {
    background-color: #fdb914;
    width: 100%;
    height: 65px;
    position: relative;
    overflow: hidden
}

.tri-1,
.tri-8 {
    top: -33px;
    transform: rotate(45deg);
    width: 35px;
    height: 30px;
    background: #fff
}

.tri-1 {
    position: absolute;
    left: 100px;
    transform: rotate(45deg) skew(12deg, 12deg)
}

.tri-8 {
    position: absolute;
    left: 340px;
    transform: rotate(45deg) skew(12deg, 12deg)
}

.tri-10,
.tri-11,
.tri-12,
.tri-13,
.tri-17,
.tri-18,
.tri-19,
.tri-2,
.tri-20,
.tri-3,
.tri-4,
.tri-5,
.tri-6,
.tri-7,
.tri-9,
.tri-bottom-2,
.tri-bottom-3,
.tri-bottom-4,
.tri-bottom-5,
.tri-bottom-6,
.tri-bottom-7 {
    width: 20px;
    height: 23px;
    background-color: #fff;
    position: absolute;
    bottom: -19px;
    transform: rotate(45deg)
}

.tri-top-2,
.tri-top-3,
.tri-top-4,
.tri-top-5,
.tri-top-6,
.tri-top-7 {
    width: 20px;
    height: 23px;
    background-color: #fff;
    position: absolute;
    top: -17px;
    transform: rotate(45deg)
}

.tri-13,
.tri-14,
.tri-15,
.tri-16 {
    width: 35px;
    height: 30px;
    transform: rotate(45deg) skew(12deg, 12deg);
    top: -31px;
    background-color: #fff;
    position: absolute
}

.tri-17 {
    right: 180px
}

.tri-18 {
    right: 120px
}

.tri-19 {
    right: 73px
}

.tri-20 {
    right: 30px
}

.tri-13 {
    left: 561px
}

.tri-14 {
    left: 771px
}

.tri-15 {
    right: 150px
}

.tri-16 {
    right: 40px
}

.tri-2 {
    left: 111px
}

.tri-3 {
    left: 171px
}

.tri-4 {
    left: 231px
}

.tri-5 {
    left: 291px
}

.tri-6 {
    left: 359px
}

.tri-7 {
    left: 429px
}

.tri-bottom-2,
.tri-top-2 {
    right: 971px
}

.tri-bottom-3,
.tri-top-3 {
    right: 851px
}

.tri-bottom-4,
.tri-top-4 {
    right: 731px
}

.tri-bottom-5,
.tri-top-5 {
    right: 621px
}

.tri-bottom-6,
.tri-top-6 {
    right: 519px
}

.tri-bottom-7,
.tri-top-7 {
    right: 379px
}

.tri-9 {
    left: 581px
}

.tri-10 {
    left: 641px
}

.tri-11 {
    left: 701px
}

.tri-12 {
    left: 761px
}

.ProjectCard {
    border-radius: 20px;
    padding: 35px;
    height: 661px;
    overflow: hidden;
    border: 0
}

.bb-border,
.bt-btm {
    border-bottom: 2px dashed #ccc
}

.ProjectCard h3 {
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px
}

.pointersWork li,
.soloBtn .btn {
    font-weight: 500;
    text-transform: uppercase
}

.ProjectCard ul,
.case-content ul.casePointers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.pointersWork li {
    color: #fff;
    font-size: 13px;
    position: relative;
    margin: 5px 0;
    flex: 1 1 calc(50% - 10px);
    display: flex
}

.pointersWork li::before {
    content: "";
    background-color: #fff;
    border-radius: 50px;
    font-weight: 700;
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 11px
}

.compLogo img,
.compLogo img.akorn-logo,
.compLogo img.avalogo,
.compLogo img.dtlogo,
.compLogo img.maisonLogo,
.compLogo img.ncbLogo,
.compLogo img.shiplogo,
.compLogo img.wlLogo {
    object-fit: contain;
    margin-right: auto;
    text-align: left
}

.compLogo,
.year_Design {
    margin-bottom: 25px
}

.cus-mar,
.informed-para {
    margin-bottom: 40px
}

.medhaviYellow {
    background-color: #d99723
}

.maisonYellow {
    background-color: #ad8418
}

.croftlifeGreen {
    background-color: #295227
}

.wlBlk {
    background-color: #282828
}

.dsGrn {
    background-color: #496141
}

.milleteryell {
    background-color: #ecaa00
}

.thyBlk {
    background-color: #191919
}

.crizacOrg {
    background-color: #ff6525
}

.nouRed {
    background-color: #4c0602
}

.dtcBgBlue {
    background-color: #1289cb
}

.shipBGRed {
    background-color: #ec191b
}

.avanzaBlack,
.bgBlk {
    background-color: #303030
}

.thymeYellow {
    background-color: #ffa800
}

.helmeGreen {
    background-color: #0e2c22
}

.akornBlue {
    background-color: #2551d1
}

.bgRed {
    background-color: #9c1d22
}

.bgRedLight {
    background-color: #ea1d2a
}

.bgBlue {
    background-color: #1f78c1
}

.bgBlueLi {
    background-color: #1f77bf
}

.compLogo img {
    height: 63px;
    width: auto
}

.compLogo img.shiplogo {
    width: 149px
}

.compLogo img.ncbLogo,
.compLogo img.wlLogo {
    width: 220px;
    height: 63px
}

.compLogo img.maisonLogo {
    height: 63px
}

.compLogo img.avalogo {
    width: 179px
}

.compLogo img.dtlogo {
    width: auto;
    height: 63px
}

.compLogo img.akorn-logo {
    width: 150px;
    height: 63px
}

.compLogo img.med-logo {
    width: 175px;
    height: 63px;
    object-fit: contain;
    margin-right: auto;
    text-align: left
}

.compLogo img.hlm-logo,
.compLogo img.thymelogo {
    width: 180px;
    margin-right: auto;
    text-align: left;
    object-fit: contain
}

.compLogo img.hlm-logo {
    height: 63px
}

.compLogo img.thymelogo {
    max-height: 63px
}

.wokImg img.ava-img {
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 100%
}

.wokImg img.nad-ship {
    position: absolute;
    bottom: -303px;
    transform: scale(2);
    right: -68px
}

.wokImg img.ava-im1 {
    position: absolute;
    bottom: -184px;
    transform: scale(1.85);
    right: 91px
}

.wokImg img.dm-ship,
.wokImg img.dtc-w,
.wokImg img.home-medha,
.wokImg img.home-ncb,
.wokImg img.home-opus,
.wokImg img.home-ship,
.wokImg img.nad-akorn,
.wokImg img.nad-avanza,
.wokImg img.nad-hlm,
.wokImg img.th-work {
    right: 0;
    width: 100%;
    position: absolute
}

.wokImg img.dtc-w {
    bottom: -65px
}

.wokImg img.home-opus {
    bottom: -70px
}

.wokImg img.home-medha {
    bottom: -20px
}

.wokImg img.home-ship {
    bottom: -75px;
    transform: scale(1.1)
}

.wokImg img.dm-ship {
    bottom: -41px
}

.wokImg img.home-ncb {
    bottom: -78px
}

.wokImg img.nad-akorn {
    bottom: -40px
}

.wokImg img.nad-hlm {
    bottom: -58px
}

.wokImg img.nad-avanza {
    bottom: -45px
}

.wokImg img {
    position: absolute;
    bottom: 61px;
    right: 60px
}

.wokImg img.th-work {
    bottom: -84px
}

.wokImg img.dm-ncb {
    position: absolute;
    bottom: 31px;
    transform: scale(1.5);
    right: -20px
}

.wokImg img.dm-maison {
    position: absolute;
    bottom: -190px;
    transform: scale(1.4);
    right: -40px
}

.wokImg img.dm-wl {
    position: absolute;
    bottom: 131px;
    transform: scale(1.9);
    right: -220px
}

.wokImg img.brnd-croft,
.wokImg img.dm-ds {
    position: absolute;
    bottom: 0;
    width: 100%;
    right: 0
}

.wokImg img.brnd-maison {
    position: absolute;
    bottom: -60px;
    width: 100%;
    right: 0
}

.wokImg img.brnd-mille {
    position: absolute;
    bottom: -50px;
    transform: scale(1);
    right: 100px
}

.wokImg img.brnd-thy {
    position: absolute;
    bottom: 48px;
    transform: scale(1);
    right: 60px
}

.wokImg img.brnd-cri {
    position: absolute;
    bottom: 39px;
    transform: scale(1.3);
    right: -68px
}

.wokImg img.brnd-nou {
    position: absolute;
    bottom: -38px;
    right: 0
}

.wokImg img.nad-medhai {
    position: absolute;
    bottom: 26px;
    transform: scale(1.6);
    right: 13px
}

.wokImg img.nad-maison {
    position: absolute;
    bottom: -62px;
    width: 100%;
    right: 0
}

.wokImg.work-hin img {
    position: absolute;
    bottom: -80px;
    transform: scale(1);
    right: -15px
}

.ourWork .swiper-button-next::after,
.ourWork .swiper-button-prev::after {
    position: unset
}

.ourWork .swiper-button-next::after {
    background: url(../images/next-work.svg) center/28px no-repeat;
    width: 58px;
    height: 58px;
    top: -1px;
    border-radius: 50px;
    border: 2px solid #000;
    left: 9px
}

.ourWork .swiper-button-next {
    width: 58px;
    left: unset;
    right: 18px;
    height: 58px;
    bottom: unset;
    top: -36px;
    margin-top: 0;
    position: unset
}

.blog-grid .casestudy-Bx .case-content h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.ourWork .swiper-button-prev.swiper-button-disabled::after {
    background: url(../images/left.svg) center/28px no-repeat;
    left: -87px;
    top: -36px;
    border: 2px solid #c3c3c3;
    border-radius: 50px;
    display: flex;
    justify-content: center
}

.ourWork .swiper-button-next.swiper-button-disabled::after {
    border: 2px solid #c3c3c3;
    border-radius: 50px;
    display: flex;
    justify-content: center
}

.footer-logo {
    text-align: start
}

.Benefits h2,
.overlayM a,
.para-1,
.watch-reels {
    text-align: center
}

.vertical-line {
    background-color: #d9d8dd;
    width: 1px;
    height: 64px;
    margin-left: 40px;
    margin-right: 40px
}

.ourWork .swiper-button-prev,
.ourWork .swiper-rtl .swiper-button-next {
    right: 0;
    width: 58px;
    height: 58px;
    position: unset;
    margin-top: 0;
    margin-right: 16px
}

.swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: -45px
}

.ourProject .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: 0 0;
    border: 1px solid #ffc0cb00;
    opacity: 1
}

.ourProject .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgb(0 0 0 / 80%);
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.ourProject .swiper-pagination-bullet-active {
    width: 20%;
    border-radius: 5px;
    background: #2d2c2a;
    border: 1px solid transparent;
    height: 6px;
    position: absolute;
    left: 0
}

.wokImg.mangal img {
    position: absolute;
    bottom: 81px;
    transform: scale(1);
    right: 60px
}

.bgImgwork {
    background-image: url(../new-images/ball.webp);
    background-position: 98% 15%;
    background-repeat: no-repeat;
    background-color: #9c1d22
}

.bgImgworkDTC,
.bgImgworkNCB,
.bgImgworkOpus,
.bgImgworkTH,
.bgImgworkava,
.bgImgworkmed,
.bgImgworkship {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.bgImgworkOpus {
    background-image: url(../new-images/ourwork-opus.webp);
    background-color: #1fa779
}

.bgImgworkDTC {
    background-image: url(../new-images/word-dtc-port.webp);
    background-color: #1289cc
}

.bgImgworkNCB {
    background-image: url(../new-images/dm-ncb.webp);
    background-color: #000
}

.bgImgworkTH {
    background-image: url(../new-images/work-hin.webp);
    background-color: #1f77c0
}

.bgImgworkmed {
    background-image: url(../new-images/new-age-medhavi.webp);
    background-color: #d99823
}

.bgImgworkship {
    background-image: url(../new-images/work-card.webp);
    background-color: #ec1d2a
}

.bgImgworkava {
    background-image: url(../new-images/work-ava-lap.webp);
    background-color: #303030
}

.bg-REDD {
    background-color: #ea494a
}

.arrowWrapper {
    z-index: 999;
    position: relative
}

.informedBx {
    overflow: hidden;
    position: relative;
    height: 610px
}

.overlayM,
.reelBlk {
    position: absolute;
    width: 100%;
    bottom: 0
}

img.icon-re {
    width: 32px
}

.informed-para {
    line-height: 1.3
}

.informedBx:hover {
    overflow: hidden
}

.overlayM {
    height: 190px;
    background: #efa800;
    background: linear-gradient(180deg, rgba(239, 168, 0, 0) 0, rgba(0, 0, 0, .9332107843137255) 56%, rgba(0, 0, 0, .8295693277310925) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.alternate-bg,
.banner-four-element .first-ele,
.banner-four-element .fourth-ele,
.banner-four-element .sec-ele,
.banner-four-element .third-ele,
.soloBtn .btn {
    transition: .3s
}

.overlayM.redover {
    background: #efa800;
    background: linear-gradient(180deg, rgba(239, 168, 0, 0) 0, rgba(235, 80, 81, .8883928571428571) 51%, rgba(235, 80, 81, .9640231092436975) 74%, #eb5051 100%)
}

.overlayM a {
    text-decoration: none;
    color: inherit
}

.watch-reels {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 20px;
    background: 0 0;
    text-decoration: underline;
    cursor: pointer
}

.beInformed {
    background-image: url(../images/bg-pat.png);
    background-position: unset;
    background-size: cover;
    background-repeat: no-repeat
}

.connecting-section,
.ctaSection {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.beInformed.brand-be-inform {
    border-bottom: 2px dashed #101010
}

.connecting-section {
    overflow: hidden;
    position: relative
}

.banner-scrolll-1 .banner-image-right {
    margin-left: -33px
}

ul.inform-social {
    display: flex;
    padding: 0;
    list-style: none;
    justify-content: end
}

ul.inform-social li {
    padding: 0 20px
}

ul.inform-social li:nth-child(2) {
    border-left: 1px solid #e5e5e5
}

ul.inform-social li a i {
    text-decoration: none;
    font-size: 35px;
    line-height: 1.3
}

.scroll-container {
    background-color: #fbe8de00;
    padding-top: 80px;
    padding-bottom: 0;
    position: relative
}

.scroll-section {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #fff;
    position: relative
}

.scroll-section img {
    margin: 0 20px;
    width: 230px
}

.heading-s {
    color: #fff;
    letter-spacing: -.5px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4
}

.para-1,
.para-l,
.soloBtn .btn {
    line-height: 1.5
}

.holder-center-align {
    text-align: center;
    flex-direction: column;
    display: flex;
    z-index: 2;
    position: relative
}

.benefit-point,
.soloBtn .btn {
    display: flex;
    align-items: center
}

.para-l {
    color: #222;
    margin-bottom: 0;
    font-size: 20px
}

.talk-pat {
    position: absolute;
    top: -271px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%
}

.beneBx,
.div-block-99,
.soloBtn {
    position: relative
}

.pix-pat img {
    margin-top: -33px;
    margin-right: 40px
}

.para-1 {
    color: #fff;
    margin-bottom: 0;
    font-size: 16px;
    padding: 0 17%
}

.referTile,
.referTile span {
    line-height: 1.1
}

.div-block-99 {
    max-width: 800px;
    margin: 40px auto;
    z-index: 2
}

.soloBtn {
    margin-top: 0;
    max-width: max-content;
    margin-left: auto;
    z-index: 2
}

.soloBtn .btn {
    padding: 0 7px 0 20px;
    border-radius: 50px;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    letter-spacing: 5px;
    border: 2px solid var(--color-1);
    justify-content: center;
    margin: 50px auto 0;
    height: 60px;
    width: max-content
}

.alternate-bg:hover,
.referTabs .nav-pills .nav-link.active a.btn--6 {
    color: #fff;
    background-color: #222
}

.ctaSection {
    background-color: #000;
    background-image: url(../images/testimonal-bg.webp)
}

.ctaSection.blgCta {
    padding: 150px 0;
    overflow: hidden
}

.section.Benefits,
section.video-banner {
    padding-top: 100px
}

.beneBx h3 {
    font-size: 24px;
    color: #000;
    margin-bottom: 19px;
    font-weight: 600
}

.beneBx p {
    font-size: 18px;
    color: #000;
    padding: 0
}

.bb-border {
    padding-bottom: 34px;
    margin-bottom: 25px;
    padding-top: 24px
}

.benefit-point {
    justify-content: start
}

.c-logo,
.circle {
    display: flex;
    align-items: center
}

.benefit-point img {
    margin-right: 18px
}

.benefit-point h4 {
    font-size: 36px;
    margin-right: 14px
}

.Benefits h2 {
    margin-bottom: 44px
}

.iconbx img {
    margin-bottom: 30px;
    width: 100%;
    height: 250px
}

.beneBx {
    text-align: left;
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #d9d9d9
}

.custom-benefit-spacing {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 2rem
}

.custom-pad-1 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 2rem
}

.c-logos-container {
    overflow: hidden;
    display: flex
}

.bb-add-bt {
    border-bottom: 2px solid #000;
    margin-bottom: 38px
}

.c-logo {
    padding: 8px;
    justify-content: center;
    gap: 8px;
    border-radius: 16px;
    border: 2px solid #ededed;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(226, 215, 255, .4);
    width: 150px;
    height: 100px;
    margin-right: 23px
}

.referSection,
.thumbnail {
    background-size: cover;
    background-position: center
}

.c-logo img {
    max-width: 90px;
    height: auto;
    object-fit: contain
}

.c-logo img.th {
    max-width: 63px;
    height: auto;
    object-fit: contain
}

.c-logo img.mari {
    max-width: 71px;
    height: auto;
    object-fit: contain
}

.form-group.dim {
    opacity: .4;
    pointer-events: none
}

@keyframes slide {

    0%,
    from {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-300%)
    }

    to {
        transform: translateX(-100%)
    }
}

.form-group input,
.form-group textarea {
    transition: .5s
}

.tabName h5 span.tab-1,
.tabName h5 span.tab-2,
.tabName h5 span.tab-3 {
    color: #000;
    font-size: 16px;
    font-weight: 700
}

.tab-item.slick-slide.slick-current.slick-active .tabName {
    background-color: #f3f4f6;
    color: #000;
    padding: 10px 15px;
    border-radius: 50px;
    text-align: center;
    border: 2px solid #fcb814
}

.nav-pills .nav-link .tabName {
    background-color: #fff;
    color: #000;
    padding: 10px 15px;
    border-radius: 50px;
    text-align: center;
    border: 2px solid #333;
    transition: .5s;
    min-width: 296px
}

.nav-pills .nav-link .tabName.crea-tab {
    border: 2px solid #fcb814
}

.nav-pills .nav-link .tabName.med-tab {
    border: 2px solid #2694d1
}

.nav-pills .nav-link .tabName.tech-tab {
    border: 2px solid #ee3d41
}

.mobileCasestudy .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0
}

.mobileCasestudy .nav-link {
    padding: 0;
    margin-bottom: 11px
}

.mobileCasestudy .nav.nav-pills li:nth-child(2),
.tabdesign ul li.nav-item {
    margin: 0 15px
}

.mobileCasestudy .nav-pills .nav-link.active,
.mobileCasestudy .nav-pills .show>.nav-link {
    color: #fff;
    background-color: transparent
}

.mobileCasestudy .slider-nav .slick-slide {
    min-width: 240px;
    margin-right: 20px;
    margin-bottom: 22px
}

.bogus-img img {
    height: auto;
    width: 100%
}

.referSection h1 span {
    color: var(--color-1);
    font-size: 60px;
    font-weight: 700
}

.referTile {
    margin-bottom: 22px
}

.referSection {
    padding-top: 180px;
    padding-bottom: 60px;
    background-image: linear-gradient(3deg, rgb(255 255 255) 0, rgb(255 255 255 / 62%) 50%, rgb(255 255 255) 100%), url(../images/brand-pattern.png)
}

.aboutbanSlider .abtBan .leftImgBan,
.aboutbanSlider .abtBan .rightSlider,
ul.referTab li {
    width: 50%
}

.referTabs .tab-content {
    margin-top: 80px
}

p.referPara {
    padding-right: 26%
}

.alternate-bg {
    background-color: var(--color-1);
    color: #000;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2px
}

.iam,
.text1121 {
    font-weight: 700
}

.policyContent p,
.ptf-animated-block ul li,
.referContent h2,
.termsContent p {
    margin-bottom: 20px
}

.referContent h4 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600
}

.section.terms,
section.referTabs {
    padding-top: 9%
}

.referTab {
    gap: 50px;
    flex-wrap: nowrap
}

.referTab .nav-link {
    background-color: #fff;
    text-transform: uppercase;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 5px;
    transition: .3s;
    border-radius: 50px;
    padding: 0
}

.circle {
    width: 42px;
    height: 46px;
    line-height: 1;
    justify-content: center
}

.text1121,
span.typed-cursor {
    line-height: 1.4;
    font-size: 110px
}

.button-container {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    border: 2px solid #f2f2f2;
    border-radius: 100px;
    padding: 10px 20px 10px 10px;
    background-color: #fff;
    -webkit-animation: 1s infinite alternate floatbtn;
    animation: 1.5s infinite alternate floatbtn;
    position: absolute;
    right: 0;
    top: -51px;
    height: 74px
}

.thumbnail,
.video-container {
    width: 100%;
    border-radius: 20px
}

.button-container .button-text {
    font-size: 24px;
    font-weight: 500;
    color: #000;
    margin-left: 12px
}

@-webkit-keyframes floatbtn {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-10px)
    }
}

@keyframes floatbtn {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-10px)
    }
}

.banner-four-element {
    display: flex;
    gap: 55px;
    justify-content: center;
    align-items: center
}

.banner-four-element .first-ele {
    margin-right: -20px
}

.banner-four-element .first-ele img,
.banner-four-element .fourth-ele img,
.banner-four-element .sec-ele img,
.banner-four-element .third-ele img {
    width: 280px
}

.btn-----9:hover span,
.btn----8:hover span,
.btn---7:hover span,
.btn--6:hover span,
.referTabs .nav-pills .nav-link.active .btn-----9:hover span,
.referTabs .nav-pills .nav-link.active .btn----8:hover span,
.referTabs .nav-pills .nav-link.active .btn---7:hover span {
    width: 225%;
    height: 562.5px
}

.banner-four-element .first-ele:hover,
.banner-four-element .fourth-ele:hover,
.banner-four-element .sec-ele:hover,
.banner-four-element .third-ele:hover,
.lightbox-enabled:hover {
    transform: scale(1.1)
}

.iam {
    color: #000;
    font-size: 110px;
    padding: 15px
}

.text1121 {
    color: #000
}

span.typed-cursor {
    font-weight: 400
}

.spacer-line {
    border-top: 1px solid #2d2d2d;
    margin: 70px 0 80px
}

.spacer-line1 {
    border-top: 1px solid #ddd;
    margin: 70px 0 20px
}

p.address-text {
    color: #222;
    font-size: 16px;
    padding-right: 23%
}

.foooter-pad-btm {
    padding-bottom: 0
}

.video-container {
    position: relative;
    background-color: #000;
    overflow: hidden;
    height: 98%
}

.thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-repeat: no-repeat
}

.play-button,
.play-button i {
    border-radius: 50%;
    display: flex
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform .3s;
    z-index: 10
}

.play-button i {
    font-size: 24px;
    width: 70px;
    color: #fff;
    height: 70px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    padding-left: 2px
}

.btn-----9 span,
.btn----8 span,
.btn---7 span,
.btn--6 span,
.referTabs .nav-pills .nav-link.active .btn--6 span {
    width: 0;
    height: 0;
    transition: width .4s ease-in-out, height .4s ease-in-out;
    z-index: -1;
    transform: translate(-50%, -50%)
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1)
}

.pause-icon,
.play-icon {
    width: auto;
    height: auto
}

[class^=btn---],
[class^=btn--] {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    border-radius: 50px;
    font-size: 22px;
    letter-spacing: 5px;
    text-transform: uppercase
}

.play-icon i {
    font-size: 30px
}

.pause-icon {
    border-width: 0 10px 0 0;
    border-left: 4px solid #000;
    margin-right: 0;
    height: 20px
}

.pause-icon::after {
    content: '';
    border-left: 4px solid #000;
    height: 20px;
    display: inline-block;
    margin-left: 4px
}

[class^=btn--] {
    border: 1px solid #222;
    background-color: #222;
    padding: 15px 20px;
    text-decoration: none;
    text-align: center
}

.nav-link .btn-----9,
.nav-link .btn----8,
[class^=btn---] {
    background-color: transparent
}

.btn--6 {
    color: #fff
}

.btn--6:hover {
    color: #222;
    z-index: 2
}

.btn--6 span,
.referTabs .nav-pills .nav-link.active .btn--6 span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: #fff
}

.referTabs .nav-pills .nav-link.active .btn-----9:active,
.referTabs .nav-pills .nav-link.active .btn----8:active,
.referTabs .nav-pills .nav-link.active .btn---7:active {
    background-color: #538e8f
}

[class^=btn---] {
    border: 1px solid #222;
    padding: 15px 20px;
    text-decoration: none;
    text-align: center
}

[class^=btn-----],
[class^=btn----] {
    border-radius: 50px;
    font-size: 22px;
    letter-spacing: 5px;
    padding: 15px 20px;
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase
}

[class^=btn----] {
    line-height: 1.5;
    font-weight: 500;
    border: 1px solid #222
}

[class^=btn-----] {
    border: 1px solid #222
}

.nav-link.active .btn-----9,
.nav-link.active .btn----8 {
    color: #fff;
    background-color: #222
}

.nav-link .btn-----9,
.nav-link .btn----8 {
    color: #222
}

.btn-----9:active,
.btn----8:active,
.btn---7:active {
    background-color: #538e8f
}

.btn-----9:hover,
.btn----8:hover,
.btn---7:hover {
    color: #fff;
    z-index: 2
}

.btn-----9 span,
.btn----8 span,
.btn---7 span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: #222
}

.brading-section .accordian-wrapper,
.dm-section .accordian-wrapper,
.section.FaqWrapper .accordian-wrapper,
.web-section .accordian-wrapper {
    background: #f8f8f8;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px
}

.custom-accord .accordion-item:first-child .accordian-wrapper,
.custom-accord .accordion-item:nth-child(2) .accordian-wrapper,
.custom-accord .accordion-item:nth-child(3) .accordian-wrapper,
.custom-accord .accordion-item:nth-child(4) .accordian-wrapper,
.custom-accord .accordion-item:nth-child(5) .accordian-wrapper,
.custom-accord .accordion-item:nth-child(6) .accordian-wrapper,
.custom-accord .accordion-item:nth-child(7) .accordian-wrapper,
.custom-accord .accordion-item:nth-child(8) .accordian-wrapper {
    border-left: 5px solid #dbdbdb
}

.btn--6:active {
    background-color: #538e8f
}

.vertical-divider {
    width: 2px;
    background: linear-gradient(87deg, rgb(253 253 253) 0, rgb(243 243 243) 25%, rgb(227 227 227) 50%, rgb(241 241 241) 75%, rgb(255 255 255) 100%);
    height: 237px;
    position: absolute;
    top: 0;
    right: 0
}

.referImg img {
    max-width: 67%
}

.contact__form label::before {
    content: attr(data-number);
    font-size: .875rem;
    left: -49px;
    position: absolute;
    font-weight: 500;
    top: 17px;
    opacity: .5
}

.contact__form {
    padding: 0 70px
}

.footer_menu-1,
.ptf-animated-block ul,
.socialMedia ul {
    list-style: none;
    padding-left: 0
}

.aboutbanSlider,
.contact__form .form-group,
.featuredBlk,
.social-links a,
.video-banner-home {
    position: relative
}

.formHeader img {
    position: absolute;
    top: 0;
    left: -98px;
    width: 350px
}

.ptf-animated-block ul {
    margin-bottom: 0
}

.abtBan,
.btn-wrapper-ty,
.ptf-animated-block ul li .mainBlk,
.ptf-animated-block ul li a,
.socialMedia {
    display: flex;
    align-items: center
}

.ptf-animated-block ul li .mainBlk .icon i,
.ptf-animated-block ul li a i {
    display: flex;
    align-items: center;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    justify-content: center;
    border: 1px solid #e1e1e1;
    font-size: 20px;
    margin-right: 15px
}

.featureBlog {
    padding-bottom: 100px
}

.featuredBlk .featureContent {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 0 2.5rem 3.75rem 4.6875rem
}

.featuredBlk .featureContent h2 a {
    text-decoration: none;
    font-size: 48px;
    font-weight: 600;
    color: #fff
}

.featuredBlk .featureContent span.date {
    font-size: 18px;
    color: #fff
}

.featuredBlk .featureImg::after {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), color-stop(76%, transparent));
    background-image: -webkit-linear-gradient(to top, rgb(0 0 0 / 100%), #00000026 83%);
    background-image: linear-gradient(to top, rgb(0 0 0 / 100%), #00000026 83%)
}

.featureBlogSLider .nextArrow,
.featureBlogSLider .prevArrow {
    color: #fdb914;
    font-size: 30px;
    position: absolute;
    bottom: 50px;
    z-index: 9;
    width: 55px;
    height: 55px;
    border: 2px solid #fdb914;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px
}

.connecting-content .section-title,
.creative-bg {
    font-size: 48px
}

.featureBlogSLider .nextArrow,
.right {
    right: 50px
}

.featureBlogSLider .prevArrow {
    right: 118px
}

.featureBlogSLider .slick-list {
    border-radius: 15px
}

.blog-listing .casestudy-Bx.blog-Bx,
.you-might-also-like .casestudy-Bx.blog-Bx {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: none;
    padding: 0
}

.case-study-listing .casestudy-Bx .case-img {
    border-radius: 0;
    height: 706px;
    position: relative;
    width: 100%;
    object-fit: cover;
    overflow: hidden
}

.case-study-listing.daily-creative .casestudy-Bx,
.casestudy-Bx {
    padding: 0;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, .1) 0 10px 50px
}

.case-study-listing .casestudy-Bx .case-img img.videoIcon {
    position: absolute;
    top: 0;
    right: 0;
    width: auto
}

.case-study-listing .casestudy-Bx .case-img img.case-thyme {
    height: 77%;
    width: 100%;
    object-fit: contain;
    bottom: 53px;
    right: -14px
}

.case-study-listing .casestudy-Bx .case-img img.case-crizac {
    height: 100%;
    width: 100%;
    object-fit: contain;
    bottom: -352px;
    right: -183px;
    transform: scale(2.7)
}

.case-study-listing .casestudy-Bx .case-img img.case-med {
    height: 77%;
    width: auto;
    bottom: -33px;
    right: 50px;
    transform: scale(1.2)
}

.case-study-listing .casestudy-Bx .case-img img.case-ncb {
    height: 85%;
    width: auto;
    bottom: -43px;
    right: -9px;
    transform: scale(1.2)
}

.case-study-listing .casestudy-Bx .case-img img.case-wl {
    width: auto;
    bottom: 80px;
    right: -181px;
    transform: scale(1.9)
}

.case-study-listing .casestudy-Bx .case-img img.case-maison-new {
    height: 85%;
    width: auto;
    bottom: -133px;
    right: -77px;
    transform: scale(3.2)
}

.case-study-listing .casestudy-Bx .case-img img.case-ds {
    height: auto;
    width: auto;
    bottom: -260px;
    right: 66px;
    transform: scale(1.4)
}

.case-study-listing .casestudy-Bx .case-img img.case-shiop {
    height: auto;
    width: auto;
    bottom: -290px;
    right: 76px;
    transform: scale(.9)
}

.case-study-listing .casestudy-Bx .case-img img.case-hlm {
    height: auto;
    width: auto;
    bottom: -113px;
    right: -66px;
    transform: scale(1.6)
}

.case-study-listing .casestudy-Bx .case-img img.case-akorn {
    height: auto;
    width: auto;
    bottom: -113px;
    right: -17px;
    transform: scale(1.8)
}

.case-study-listing .casestudy-Bx .case-img img.case-ship {
    height: auto;
    width: auto;
    bottom: -280px;
    right: -50px;
    transform: scale(1.5)
}

.case-study-listing .casestudy-Bx .case-img img.case-avan {
    height: auto;
    width: auto;
    bottom: -170px;
    right: 50px;
    transform: scale(1.5)
}

.case-study-listing .casestudy-Bx .case-img img.case-thy {
    height: auto;
    width: auto;
    bottom: -3px;
    right: 20px;
    transform: scale(1.4)
}

.case-study-listing .casestudy-Bx .case-img img.case-maison-1 {
    height: 77%;
    width: auto;
    bottom: -62px;
    right: -30px;
    transform: scale(1.3)
}

.case-study-listing .casestudy-Bx .case-img img.case-dtc {
    height: auto;
    width: auto;
    bottom: 10px;
    left: -103px
}

.case-study-listing .casestudy-Bx .case-img img.case-croft {
    height: auto;
    width: 62%;
    bottom: 19px;
    right: 71px
}

.case-study-listing .casestudy-Bx .case-img img.case-mille {
    height: auto;
    width: 52%;
    bottom: -133px;
    right: 107px
}

.case-study-listing .casestudy-Bx .case-img img.case-maison {
    height: 76%;
    width: auto;
    bottom: 40px;
    right: 30px
}

.case-study-listing .casestudy-Bx .case-img img.opus-img {
    height: auto;
    width: 100%;
    bottom: -130px;
    right: 0
}

.case-logo img.maisonLogo,
.case-logo img.opus-logo {
    width: 55px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-study-listing .casestudy-Bx .case-img img.case-nou {
    height: auto;
    width: 64%;
    bottom: -354px;
    right: 89px
}

.bg-glow {
    background: url(../images/nou-glow.png) 40px -110px/cover no-repeat #520000
}

.bg-pattern-career,
.section.section.ceo-section {
    background-position: center;
    background-size: cover
}

.case-logo img.avalogo,
.case-logo img.croftLogo,
.case-logo img.med-logo,
.case-logo img.shiplogo,
.case-logo img.thyLogo,
.case-logo img.thymelogo {
    width: 120px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-logo img.akorn-logo,
.case-logo img.dtlogo,
.case-logo img.hlm-logo {
    width: 134px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-logo img.wlLogo {
    width: 176px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-logo img.dsLogo {
    width: 112px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-logo img.ncbLogo {
    width: 145px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-logo img.criLogo {
    width: 90px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

.case-logo img.mille-logo,
.case-logo img.nuouLogo {
    width: 100px;
    position: absolute;
    top: 30px;
    z-index: 1;
    height: auto;
    left: 30px
}

ul.casePointers li::before {
    content: "";
    background-color: #222;
    border-radius: 50px;
    font-weight: 700;
    min-width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 9px;
    margin-top: 4px
}

ul.casePointers li:first-child::before {
    background-color: #e55858
}

ul.casePointers li:nth-child(2)::before {
    background-color: #fdb816
}

ul.casePointers li:nth-child(3)::before {
    background-color: #519ed4
}

ul.casePointers li:nth-child(4)::before {
    background-color: #44bdad
}

ul.casePointers li {
    color: #222;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    margin: 11px 0 1px;
    flex: 1 1 calc(50% - 0px);
    display: flex;
    align-items: start;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3
}

.casestudy-Bx {
    background-color: #fff;
    overflow: hidden;
    position: relative;
    height: 100%
}

.yellowbx,
a.faq-tab .faq-tab-1 p {
    background-color: #ee3d41
}

.blueBx,
.greenBx,
.yellowbx {
    height: 450px;
    border-radius: 20px;
    width: 100%
}

.case-study-listing.daily-creative .casestudy-Bx {
    background-color: #fff
}

.bt-top {
    border-top: 2px dashed #e7e7e7
}

.form-group input.hover-active::placeholder,
.form-group textarea.hover-active::placeholder {
    color: #fff;
    transition: color .3s
}

.form-group input.active::placeholder,
.form-group textarea.active::placeholder {
    color: #fff
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: gray;
    transition: color .3s
}

.minus-value {
    margin-top: -197px
}

.strat-dev.digital-strat h2.section-title {
    padding-right: 10%
}

.strat-dev.new-age-strat h2.section-title {
    padding-right: 20%
}

.section.FaqWrapper.carrersJob,
section.you-might-also-like {
    padding-top: 0
}

.termsContent h2 {
    font-size: 38px;
    margin-bottom: 15px
}

.termsContent h1.heading-1 {
    margin-bottom: 106px;
    line-height: 1
}

.termsContent h4 {
    margin-bottom: 0;
    margin-top: 61px
}

.policyContent h3,
.termsContent h3 {
    margin-bottom: 28px
}

.policyContent a.links,
.termsContent a.links {
    color: #fcb814;
    text-decoration: none
}

section.terms-condition {
    padding-top: 160px
}

.policyContent h1.heading-1 {
    margin-bottom: 66px;
    line-height: 1.3
}

.policyContent h4 {
    margin-bottom: 0;
    margin-top: 35px
}

.policyContent h2 {
    font-size: 38px;
    margin-bottom: 20px;
    margin-top: 61px
}

p.carrerText {
    font-weight: 500
}

.blueBx {
    background-color: #fdb914
}

.greenBx {
    background-color: #44bdad
}

.careers-custom-pad {
    --bs-gutter-x: 3.5rem
}

.bg-pattern-career {
    background-image: linear-gradient(3deg, rgb(255 255 255) 0, rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 0%) 100%), url(../images/bg-pat.png);
    width: 100%;
    padding-bottom: 120px;
    background-repeat: no-repeat
}

.custom-accord .accordion-body a.careerLink:hover {
    background-color: transparent;
    color: #fdb914
}

.section.section.ceo-section {
    background-image: url(../images/testimonal-bg.png);
    padding: 150px 0 202px;
    overflow: hidden;
    position: relative
}

.quoteIcon {
    position: absolute;
    top: -5px;
    left: 100px
}

.aboutbanSlider .abtBan .rightSlider img {
    width: 88px;
    object-fit: contain;
    margin-bottom: 20px
}

.aboutbanSlider .abtBan .rightSlider p {
    font-size: 18px;
    font-weight: 400;
    line-height: 39px
}

.aboutbanSlider .abtBan .rightSlider {
    padding-left: 50px;
    padding-right: 99px
}

.aboutbanSlider .abtBan .rightSlider h3 {
    font-size: 30px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 15px
}

.aboutbanSlider .swiper-slide {
    padding: 0 31px
}

.adjust-navbar {
    z-index: 9 !important
}

.button-vid {
    display: inline-block;
    position: absolute;
    transform: translate(-50%, 240%);
    top: 50%;
    left: 50%
}

.button-vid.is-play {
    background-color: #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px
}

.button-vid.is-play .button-outer-circle {
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%
}

.button-vid.is-play .button-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%)
}

.button-vid.is-play .button-icon .triangle {
    -webkit-animation: 7s fadeIn;
    animation: 7s fadeIn
}

.button-vid.is-play .button-icon .path {
    stroke-dasharray: 90;
    stroke-dashoffset: 0;
    -webkit-animation: 3s triangleStroke;
    animation: 3s triangleStroke
}

.has-scale-animation {
    -webkit-animation: 3s infinite smallScale;
    animation: 3s infinite smallScale
}

.slideleft,
.slideright {
    animation-duration: .5s;
    animation-timing-function: ease
}

.has-delay-short {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes triangleStroke {
    from {
        stroke-dashoffset: 90
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes triangleStroke {
    from {
        stroke-dashoffset: 90
    }

    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

@keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

.aboutbanSlider .swiper-button-next::after {
    background: url(../images/next-work.svg) center/28px no-repeat;
    width: 58px;
    height: 58px;
    top: 380px;
    border-radius: 50px;
    z-index: 9;
    border: 2px solid #000;
    right: 690px
}

.aboutbanSlider .swiper-button-next.swiper-button-disabled,
.aboutbanSlider .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.aboutbanSlider .swiper-button-next,
.aboutbanSlider .swiper-button-prev {
    width: 58px;
    left: unset;
    right: 0;
    height: 58px;
    top: 0;
    margin-top: 0
}

.aboutbanSlider .swiper-button-prev::after {
    background: url(../images/left.svg) center/28px no-repeat;
    width: 58px;
    height: 58px;
    right: 768px;
    top: 381px;
    border: 2px solid #000;
    border-radius: 50px;
    display: flex;
    z-index: 9;
    left: unset;
    justify-content: center
}

.ceoImg img {
    position: absolute;
    top: -83px;
    left: -49px;
    width: 47%
}

.hotspot {
    display: block;
    position: absolute;
    border-radius: 50%;
    filter: blur(2px)
}

.hotspot.dots-container {
    position: absolute;
    right: -60px;
    top: -110px
}

.hotspot.dot1 {
    width: 11px;
    height: 11px;
    border: 5px solid #44bdad;
    background-color: transparent;
    z-index: 1;
    opacity: .2;
    animation: 2s infinite dot1
}

.hotspot.dot2,
.hotspot.dot222 {
    width: 11px;
    height: 11px;
    background-color: #fcb813;
    z-index: 2;
    animation: 2s infinite dot2
}

.hotspot.dot3,
.hotspot.dot333 {
    width: 11px;
    height: 11px;
    background-color: #fcb813;
    z-index: 3;
    animation: 1s infinite alternate dot3
}

.hotspot.dot11,
.hotspot.dot111 {
    width: 11px;
    height: 11px;
    border: 5px solid #fcb813;
    background-color: transparent;
    z-index: 1;
    opacity: .2;
    animation: 2s infinite dot1
}

.hotspot.dot22,
.hotspot.dot33 {
    background-color: #44bdad;
    width: 11px;
    height: 11px
}

.hotspot.dot22 {
    z-index: 2;
    animation: 2s infinite dot2
}

.hotspot.dot33 {
    z-index: 3;
    animation: 1s infinite alternate dot3
}

.hotspot.dot1111 {
    width: 11px;
    height: 11px;
    border: 5px solid #ee3b42;
    background-color: transparent;
    z-index: 1;
    opacity: .2;
    animation: 2s infinite dot1
}

.hotspot.dot2222,
.hotspot.dot3333 {
    background-color: #ee3b42;
    width: 11px;
    height: 11px
}

.hotspot.dot2222 {
    z-index: 2;
    animation: 2s infinite dot2
}

.hotspot.dot3333 {
    z-index: 3;
    animation: 1s infinite alternate dot3
}

@keyframes dot1 {
    0% {
        opacity: .2;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5)
    }
}

@keyframes dot2 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2)
    }
}

@keyframes dot3 {
    0% {
        transform: translate(-50%, -50%)
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1)
    }
}

@keyframes dot11 {
    0% {
        opacity: .2;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5)
    }
}

@keyframes dot22 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2)
    }
}

@keyframes dot33 {
    0% {
        transform: translate(-50%, -50%)
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1)
    }
}

@keyframes dot111 {
    0% {
        opacity: .2;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5)
    }
}

@keyframes dot222 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2)
    }
}

@keyframes dot333 {
    0% {
        transform: translate(-50%, -50%)
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1)
    }
}

@keyframes dot1111 {
    0% {
        opacity: .2;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5)
    }
}

@keyframes dot2222 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2)
    }
}

@keyframes dot3333 {
    0% {
        transform: translate(-50%, -50%)
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1)
    }
}

span.hotspot.dots-container-1 {
    position: absolute;
    right: -100px;
    top: 50px
}

span.hotspot.dots-container-2 {
    position: absolute;
    right: -50px;
    top: 170px
}

span.hotspot.dots-container-3 {
    position: absolute;
    right: -160px;
    top: -220px
}

span.hotspot.dots-container-4 {
    position: absolute;
    right: -630px;
    top: -60px
}

span.hotspot.dots-container-5 {
    position: absolute;
    right: -620px;
    top: 201px
}

span.hotspot.dots-container-6 {
    position: absolute;
    right: -570px;
    top: 61px
}

span.hotspot.dots-container-7 {
    position: absolute;
    right: -520px;
    top: -229px
}

.hotspot.dot-blue {
    width: 11px;
    height: 11px;
    border: 5px solid #2494d2;
    background-color: transparent;
    z-index: 1;
    opacity: .2;
    animation: 2s infinite dot1
}

.hotspot.dot-blue-2,
.hotspot.dot-blue-3 {
    width: 11px;
    height: 11px;
    background-color: #2494d2
}

.hotspot.dot-blue-2 {
    z-index: 2;
    animation: 2s infinite dot2
}

.hotspot.dot-blue-3 {
    z-index: 3;
    animation: 1s infinite alternate dot3
}

@keyframes dot-blue {
    0% {
        opacity: .2;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5)
    }
}

@keyframes dot-blue-2 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2)
    }
}

@keyframes dot-blue-3 {
    0% {
        transform: translate(-50%, -50%)
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1)
    }
}

.tabdesign ul li button {
    list-style: none;
    cursor: pointer;
    color: #222;
    padding: 0;
    background-color: transparent;
    border: 2px solid #eee;
    transition: .5s;
    text-align: center;
    border-radius: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 17px;
    font-family: var(--font-secondary);
    position: relative;
    line-height: 3;
    border-bottom: 2px solid #eeeeee00;
    font-weight: 600
}

.tabdesign ul li button.active p {
    padding: 0;
    border-bottom: 5px solid #fdb914
}

.tabdesign ul li button p {
    padding: 0;
    border-bottom: 5px solid #fdb91400;
    font-size: 16px;
    font-family: var(--font-secondary);
    position: relative;
    font-weight: 600
}

.tabdesign ul li button.nav-link.active {
    color: #222;
    background-color: #00000000;
    border: 2px solid #eee;
    border-bottom: 1px solid #eeeeee00
}

.tabdesign ul li button.nav-link {
    color: #222;
    padding: 8px 25px 0;
    background-color: #00000000;
    border: 2px solid #eeeeee00;
    border-bottom: 1px solid #fdb91400
}

.tabdesign ul.nav.nav-pills {
    padding: 0;
    color: #fff;
    border-radius: 0;
    transition: .3s;
    align-items: center;
    justify-content: start;
    position: relative;
    display: flex;
    margin-bottom: 50px;
    border-bottom: 2px solid #eee
}

.modalRefer .modal-body .contact__wrapper {
    padding: 161px 20px 50px
}

.modalRefer .modal-body .contact__wrapper .contact__form {
    padding: 0 32px 0 70px
}

.modalRefer .modal-body .border-wrap {
    margin-left: 0
}

.z-index-999 {
    z-index: 999
}

.modalRefer .btn-close {
    height: 30px;
    position: absolute;
    cursor: pointer;
    right: 26px;
    text-align: center;
    top: 19px;
    padding: 0;
    width: 30px;
    text-decoration: none;
    z-index: 99
}

.modalRefer .btn-close i {
    color: #fff;
    font-size: 35px
}

.modalRefer .modal-content {
    background-color: transparent;
    border: 0
}

.rightSlider .year_Design p.year {
    background-color: #fff;
    display: inline;
    border: 2px solid #000;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: 2px 4px 0 0 #fdb914
}

.conecting-bigBx .bigImg,
.left-small-bx-overlap .smallleftImg,
.right-small-bx-overlap .smallrightImg {
    box-shadow: 0 20px 50px -25px rgb(0 0 0 / 28%);
    overflow: hidden;
    border-radius: 25px
}

.conecting-bigBx .bigImg {
    width: 82%;
    margin: 0 auto
}

.left-small-bx-overlap .smallleftImg {
    width: 38%;
    height: 436px
}

.smallleftImg {
    position: absolute;
    bottom: -70px;
    left: -120px
}

.right-small-bx-overlap .smallrightImg {
    width: 45%;
    height: 246px
}

.swiper-gal::after,
.swiper-gal::before {
    content: "";
    height: 100px;
    position: absolute
}

.smallrightImg {
    position: absolute;
    top: -110px;
    right: -50px
}

.team-img .member-name {
    position: absolute;
    bottom: 0;
    width: 100% !important;
    left: 0;
    border-radius: 0 0 10px 10px
}

.teamBx .team-img:hover .member-bg {
    filter: grayscale(0)
}

.creative-bg {
    background: url(../images/dflighdf.png);
    color: #000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 0;
    line-height: .8;
    background-position: center
}

.bg-grey-gal,
.swiper-gal::after,
.swiper-gal::before {
    background: var(--section-color)
}

.connecting-content .agency {
    font-size: 100px;
    font-weight: 700;
    line-height: .8
}

.creative-img img {
    position: absolute;
    width: 64%;
    right: -300px;
    bottom: 8px
}

.trans3d {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform-style: preserve-3d;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform-style: preserve-3d;
    -ms-transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0)
}

#contentContainer {
    position: absolute;
    margin-left: -500px;
    margin-top: -500px;
    left: 50%;
    top: 50%;
    width: 1000px;
    height: 1000px
}

#carouselContainer {
    position: unset;
    padding: 150px 0 410px
}

.carouselItemInner {
    width: 370px;
    height: 150px;
    position: absolute;
    color: #0ff;
    font-size: 72px;
    left: 50%;
    top: 50%;
    margin-left: -160px;
    margin-top: -90px;
    text-align: center;
    padding-top: 50px
}

.swiper-gal {
    position: relative;
    margin-inline: auto
}

.swiper-gal .swiper-slide img {
    width: 100%;
    height: 550px;
    border-radius: 20px;
    object-fit: cover
}

.swiper-gal::before {
    top: -70px;
    left: -10%;
    width: 120%;
    border-radius: 500%;
    z-index: 2
}

.swiper-gal::after {
    bottom: -67px;
    left: -360px;
    width: 149%;
    border-radius: 100%;
    z-index: 1
}

.gallery-full h3 {
    z-index: 3;
    position: relative;
    margin-bottom: 40px
}

.creative-agency-slider .nextArrow,
.creative-agency-slider .prevArrow {
    color: #000;
    font-size: 25px;
    position: absolute;
    bottom: 0;
    z-index: 9;
    width: 40px;
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    top: 287px;
    box-shadow: 0 0 8px 3px #00000012
}

.creative-agency-slider .nextArrow {
    right: 13px
}

.creative-agency-slider .prevArrow {
    left: 13px
}

.creative-agency-slider .creative-slider-item h3 {
    position: absolute;
    bottom: 33px;
    left: 33px;
    z-index: 2;
    color: #fff
}

.image-overlay {
    position: relative;
    width: 100%
}

.image-overlay img {
    display: block;
    width: 100%;
    height: auto
}

.bg-patter-crea {
    position: absolute;
    right: -852px;
    top: -201px;
    z-index: -1
}

.bg-patter-crea img {
    width: 1052px;
    height: 995px
}

.creative-icon img:first-child {
    position: absolute;
    bottom: 40px;
    right: 290px;
    z-index: 1;
    width: 70px
}

.creative-icon img:nth-child(2) {
    position: absolute;
    top: 40px;
    right: 130px;
    z-index: 1;
    width: 80px
}

.creative-icon img:nth-child(3) {
    position: absolute;
    top: 40px;
    right: 787px;
    z-index: 1
}

.creative-icon img:nth-child(4) {
    position: absolute;
    bottom: 40px;
    left: 54%;
    z-index: 1
}

.creative-icon img:nth-child(5) {
    position: absolute;
    bottom: 206px;
    right: -93px;
    z-index: 1;
    display: none
}

.creative-icon img:nth-child(6) {
    position: absolute;
    bottom: -70px;
    right: 80px;
    z-index: 1;
    display: none
}

.ceao-block {
    margin-top: 70px
}

.lightboxpreview {
    transition: .3s linear;
    padding-top: 60%;
    cursor: pointer;
    background-size: cover
}

.lightbox-content {
    max-height: 75vh;
    height: 75vh;
    width: 100%;
    max-width: 1000px
}

.lightbox-close {
    cursor: pointer;
    margin-left: auto;
    position: absolute;
    right: -30px;
    top: -30px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1
}

.modal_inner_image {
    min-height: 400px;
    z-index: 1000
}

.modalscale {
    transform: scale(0);
    opacity: 0
}

.lightbox-btn,
.lightbox-container,
.lightbox-enabled,
.lightbox-image-wrapper {
    transition: .4s ease-in-out
}

.lightbox_img_wrap {
    position: relative;
    height: 100%
}

.lightbox-enabled {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
    cursor: pointer
}

.lightbox-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .6);
    z-index: 9999;
    opacity: 0;
    pointer-events: none
}

.lightbox-container.active {
    opacity: 1;
    pointer-events: all
}

.lightbox-image-wrapper {
    display: flex;
    transform: scale(0);
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90vh;
    position: relative
}

#close,
.lightbox-btn {
    color: #fff;
    z-index: 9999999;
    cursor: pointer;
    position: absolute;
    font-size: 50px
}

.left {
    left: 50px
}

#close {
    top: 50px;
    right: 50px
}

.lightbox-image {
    width: 100%;
    -webkit-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, .19);
    box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, .19);
    max-height: 95vh;
    object-fit: cover
}

@keyframes slideleft {
    33% {
        transform: translateX(-300px);
        opacity: 0
    }

    66% {
        transform: translateX(300px);
        opacity: 0
    }
}

.slideleft {
    animation-name: slideleft
}

@keyframes slideright {
    33% {
        transform: translateX(300px);
        opacity: 0
    }

    66% {
        transform: translateX(-300px);
        opacity: 0
    }
}

.slideright {
    animation-name: slideright
}

.dc-custom-padding {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem
}

.thankyouWrapper {
    padding: 180px 0 100px
}

.tytxt {
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 400;
    margin-top: 13px;
    line-height: 1.5
}

.tybtn {
    background-color: #222;
    color: #ffff;
    transition: .3s;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 12px 30px
}

.thankyou-intro {
    margin-left: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500
}

.thankyou-intro img {
    margin-left: 10px
}

.pulse {
    animation: 2s infinite j
}

@keyframes j {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .5)
    }

    70% {
        box-shadow: 0 0 0 80px transparent
    }

    to {
        box-shadow: 0 0 0 100px transparent
    }
}

.playbtn,
.playbtn-1 {
    align-items: center;
    background-color: #ee3942;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    left: 43%;
    position: absolute;
    right: 0;
    text-align: center;
    -webkit-transition: .5s
}

.playbtn {
    bottom: 0;
    height: 100px;
    top: 39%;
    width: 100px
}

.playbtn img {
    margin-left: 7px;
    width: 35px
}

.whatsapp-link img {
    max-width: 55px
}

.whatsapp-link {
    bottom: 3%;
    right: 2%;
    z-index: 99
}

.FaqWrapper {
    padding: 180px 0 80px
}

a.faq-tab {
    text-decoration: none;
    text-align: center
}

a.faq-tab .faq-tab-1 p:hover {
    background-color: #222;
    color: #fff;
    text-transform: uppercase;
    transform: translateY(-7px)
}

a.faq-tab .faq-tab-1 p {
    box-shadow: 4px 4px 14px 0 rgba(34, 34, 34, .21);
    color: #fff;
    font-size: 1.125rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 17px 20px;
    text-transform: uppercase;
    transition: .2s ease-in;
    border-radius: 10px
}

.contactPageWrapper {
    padding: 200px 0 120px
}

.grayscale-map {
    -webkit-backface-visibility: hidden;
    filter: gray;
    -webkit-filter: grayscale(99%);
    margin-bottom: -8px
}

.contactDetails .email {
    margin: 50px 0
}

.contactDetails .address p,
.contactDetails .email a,
.contactDetails .phone a {
    font-size: 20px;
    text-decoration: none
}

.socialMedia ul {
    display: flex;
    align-items: center;
    margin-bottom: 0
}

.socialMedia ul li a {
    text-decoration: none;
    backface-visibility: hidden;
    display: inline-flex;
    border-radius: 50%;
    border: 2px solid #cccccc8f;
    color: #000;
    height: 3.2rem;
    line-height: 0;
    width: 3.2rem;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in
}

.socialMedia ul li a.instagram:hover {
    background: linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff
}

.socialMedia ul li a.twitter:hover {
    background: #0077b5;
    color: #fff
}

.socialMedia ul li a.dribble:hover {
    background: #ea4c89;
    color: #fff
}

.socialMedia ul li a.behance:hover {
    background: #053eff;
    color: #fff
}

.socialMedia ul li a.gmb:hover {
    background: #4285f4;
    color: #fff
}

.socialMedia ul li a i {
    font-size: 22px;
    transition: .3s ease-in
}

.socialMedia ul li:nth-child(2),
.socialMedia ul li:nth-child(3),
.socialMedia ul li:nth-child(4),
.socialMedia ul li:nth-child(5),
.socialMedia ul li:nth-child(6) {
    margin-left: 1.4375rem
}

.contactPageWrapper .contact__wrapper {
    padding: 80px 30px;
    background-color: #fff;
    box-shadow: 0 7px 20px 8px #0000000f;
    margin-left: 30px
}

.contactPageWrapper .contact__form label {
    color: #000
}

.contactPageWrapper .contact__form input,
.contactPageWrapper .contact__form textarea {
    color: #000;
    border-bottom: 1px solid #3e3e3e3d
}

.contactPageWrapper .contact__form .submit-site-btn {
    padding: 16px 30px;
    border-radius: 50px;
    background-color: transparent;
    color: #fdb914;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: .3s;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 46px 0 0 -46px;
    border: 2px solid #fdb914
}

.social-links a i {
    transition: .2s ease-in;
    color: #000
}

.social-links a i.ri-linkedin-fill:hover {
    color: #0077b5
}

.social-links a i.ri-instagram-line:hover {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background-clip: text;
    -webkit-background-clip: text
}

.social-links a i.ri-behance-fill:hover {
    color: #053eff
}

.social-links a i.ri-dribbble-line:hover {
    color: #ea4c89
}

.social-links a i.flaticon-my-business:hover {
    color: #4285f4
}

.team-img-full img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44%;
    object-fit: contain;
    height: 100%
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: rgb(0 0 0 / 0%) !important;
}




.iti__selected-dial-code {
    color: #fff;
}


.iti__country-list {
    border-radius: 18px 18px 18px 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.iti__country-list::-webkit-scrollbar {
    display: none;
}

.iti__dial-code {
    color: #000 !important;
    font-size: 13px;
}

.iti__country {
    padding: 1px 19px !important;
    outline: none;
    border-radius: 10px !important;
}

.iti__flag-box,
.iti__country-name {
    margin-right: 6px;
    font-size: 13px;
}