@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap);@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);.main-heading,footer .letstalk {
    letter-spacing: -4px;
    text-transform: uppercase
}

#button,.c-btn,.c-btn-reverse,.navbar-brand,.next-project .slider-next-project .slide,.piu,.swiper-slide {
    text-align: center
}

.custom-accordion .accordion-button::after,.custom-accordion .accordion-button:not(.collapsed)::after,.top-agency a img {
    filter: brightness(0) invert(1)
}

*,body {
    box-sizing: border-box
}

.cursor,.cursor-follower {
    position: absolute;
    user-select: none;
    pointer-events: none;
    border-radius: 100%
}

.navbar-toggler,.navbar-toggler:focus {
    outline: 0;
    box-shadow: none
}

.nav-fullpage,.of-none {
    overflow: hidden!important
}

.banner .main .hover,a,a:focus,a:hover {
    text-decoration: none
}

.banner .sub,.piu,body {
    font-family: var(--FF-OS-V)
}

.banner .line-banner,.container {
    max-width: calc(100vw - 10vw)
}

#button,footer .cirlce-a .cirle.active h3 {
    visibility: hidden
}

.banner .banner-h1 .main,.banner .banner-h1 .mainService,.banner .banner-h1 .mainWork {
    letter-spacing: -5px;
    text-transform: uppercase
}

.form-currency .item .btnch,a,a *,a:hover,i {
    cursor: pointer!important
}

@font-face {
    font-family: OpenSans-I;
    src: url(../fonts/fonts-OpenSans-I.woff);
    font-display: swap
}

@font-face {
    font-family: OpenSans-V;
    src: url(../fonts/fonts-OpenSans-V.woff);
    font-display: swap
}

@font-face {
    font-family: BEBAS-REGULAR;
    src: url(../fonts/BEBAS-REGULAR.OTF);
    font-display: swap
}

:root {
    --primary: #55ffcd;
    --white: #fff;
    --black: #000;
    --gray: #707070;
    --FF-OS-I: OpenSans-I,sans-serif;
    --FF-OS-V: 'Poppins',sans-serif;
    --FF-BR: BEBAS-REGULAR,sans-serif
}

html {
    scroll-behavior: smooth
}

html.has-scroll-smooth {
    overflow: hidden
}

* {
    cursor: none;
    margin: 0;
    padding: 0
}

body {
    overflow-x: hidden!important
}

.bg-black {
    background-color: var(--black)!important
}

.bg-white {
    background-color: var(--white)!important
}

#button:focus,#button:hover,.bg-primary {
    background-color: #e3d23e!important
}

.clr-primary {
    color: #e3d23e!important
}

.clr-black {
    color: var(--black)!important
}

.clr-white {
    color: var(--white)!important
}

.cursor {
    background: #e3d23e;
    width: 12px;
    height: 12px;
    z-index: 200;
    transition: transform .5s cubic-bezier(.75, -1.27, .3, 2.33),opacity .2s cubic-bezier(.75, -1.27, .3, 2.33);
    transform: scale(.8)
}

.cursor::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block
}

.piu {
    font-weight: 700;
    display: none;
    font-size: 2px;
    color: var(--black);
    text-transform: uppercase
}

.piu.active {
    display: block;
    transform-origin: center
}

.cursor.active {
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    transform: scale(10)
}

.cursor.active::before {
    opacity: 1
}

.cursor-follower {
    background: var(--white);
    width: 40px;
    height: 40px;
    z-index: 199;
    transition: transform .6s cubic-bezier(.75, -1.27, .3, 2.33),opacity .4s cubic-bezier(.75, -1.27, .3, 2.33);
    transform: translate(4px,4px);
    margin-left: 2px;
    margin-top: 1px
}

.cursor-follower.active {
    opacity: .3;
    transform: scale(0)
}

.arrow::after,.case-category,.case-project,.case-summary .case-summary-text,.navbar-toggler,footer .cirlce-a .cirle,footer .letstalk::after {
    background-color: #e3d23e
}

.cirlce-contact .cirle,footer .cirlce-a .cirle.hovered {
    box-shadow: #55ffcd38 0 0 0 40px,rgb(3 3 3 / 0%) -6px -2px 16px 0
}

.blog-cards:hover .card-footer .blog-person,.blog-cards:hover .card-footer .blog-person-detail .blog-person,.blog-category-list:hover ul li a p,.copyrights p,.inner-service-wrap .service-box:hover h3,.navbar-toggler i,.price-wrap:hover .price-details li::before {
    color: var(--white)
}

#button {
    display: inline-block;
    background-color: var(--black);
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 75px;
    right: 50px;
    transition: background-color .3s,opacity .5s,visibility .5s;
    opacity: 0;
    z-index: 450;
    border-radius: 50%
}

#button.show {
    opacity: 1;
    visibility: visible
}

#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: 50px;
    color: var(--white)
}

#button:focus,#button:hover {
    cursor: pointer;
    box-shadow: rgb(59 59 59 / 15%) 0 0 0 12px,rgb(3 3 3 / 0%) -6px -2px 16px 0
}

.btn-default,a,h1,h2,h3,h4,h5,h6,label,li,p,span,textarea,ul {
    margin: 0;
    padding: 0
}

.price-wrap .price-details,li {
    list-style: none
}

a,a:hover {
    font-family: var(--montserrat)
}

button,input {
    outline: 0!important
}

::-webkit-scrollbar {
    width: 8px;
    background: #000
}

::-webkit-scrollbar-track {
    background: #363636;
    border-radius: 0
}

::-webkit-scrollbar-thumb {
    background: #e3d23e;
    border-radius: 0
}

::-webkit-scrollbar-thumb:hover {
    background: #e3d23e
}

.c-btn-reverse:hover,.c-btn:hover,.service-box-left:hover .service-anchor,.service-box-right:hover .service-anchor,.work-box:hover .work-detail .page-ref a {
    background-position: left
}

.main-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100
}

.inner-header .inner-nav,.main-header .custom-nav {
    background-color: transparent;
    border-bottom: none;
    padding: 1.5rem 0;
    height: 15.088449531737773vh;
    transition: .5s ease-in-out
}

.main-header .custom-nav.active {
    background-color: rgb(0 0 0 / 100%);
    height: 10.40582726326743vh
}

.main-header .custom-nav .navbar-brand,.service-count {
    /* position:relative; */
}

.main-header .custom-nav .nav-logo-inner {
    width: 65px;
    height: 65px;
    transition: .5s ease-in-out;
    border-radius: 100%;
    background-color: #e3d23e;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 120;
    transform: scale(1);
    transition: .5s
}

.main-header .custom-nav .nav-logo-inner.active {
    transform: scale(100)
}

.main-header .custom-nav .nav-logo-inner.nonActive {
    left: -4%!important;
    top: -10px
}

.trasition-0-6 {
    transition: .5s ease-in-out!important
}

.main-header .custom-nav .navbar-brand img {
    width: 12vw;
    transition: width .5s ease-in-out;
    position: relative;
    z-index: 130;
    opacity: 0;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(114%) contrast(106%);
}

.show-logo {
    opacity: 1!important;
    transition: .2s ease-in
}

.main-header .custom-nav.active .navbar-brand .nav-logo-inner {
    width: 63px;
    height: 63px;
    left: -3.3%!important;
    top: -9px
}

.inner-header .inner-nav .navbar-nav,.main-header .custom-nav .navbar-nav {
    gap: 30px;
    grid-gap: 30px;
    justify-content: center
}

.inner-header .inner-nav .nav-item a,.main-footerr .social_links .nav-item a,.main-header .custom-nav .nav-item a {
    font-family: var(--FF-OS-V);
    font-size: .88125vw;
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    position: relative;
    padding-left: 0;
    padding-right: 0
}

.banner .banner-h1 .main,.c-btn,.main-heading,.sub-heading {
    font-family: var(--FF-BR)
}

.main-footerr .social_links {
    position: absolute;
    left: 31px;
    bottom: -55px
}

.main-footerr .social_links .navbar-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row
}

.main-footerr .social_links .navbar-nav li {
    padding-right: 10px
}

.banner .banner-h1:hover .main .hover,.copyrights .footer-ul li a:hover,.copyrights .goto-top:hover i,.inner-header .inner-nav .nav-item a:hover,.main-header .custom-nav .nav-item a:hover,.sub-heading,.work-box .work-detail .page-ref a:hover,.work-box:hover .work-detail .content .work-catogery,footer .footer-info:hover i {
    color: #e3d23e
}

.keypoints:hover h2,.service-box-left:hover .service-anchor i,.service-box-right:hover .service-anchor i,.work-box:hover .work-detail .page-ref a i {
    color: var(--black)
}

.inner-header .inner-nav .nav-item a.nav-btn,.main-header .custom-nav .nav-item a.nav-btn {
    position: relative;
    background-color: #e3d23e;
    padding: 1rem 2rem;
    margin-top: -5px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

.inner-header .inner-nav .nav-item a.nav-btn:hover,.main-header .custom-nav .nav-item a.nav-btn:hover {
    color: var(--white);
    box-shadow: rgb(189 194 197 / 22%) 0 0 0 12px,rgb(3 3 3 / 0%) -6px -2px 16px 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

.nav-fullpage .close-nav,.open-Nav {
    padding: .5rem;
    outline: 0!important;
    transform: scale(1);
    transition: .5s ease-in-out
}

.main-header .custom-nav.active .nav-item a.nav-btn:hover {
    box-shadow: rgb(189 194 197 / 30%) 0 0 0 12px,rgb(3 3 3 / 0%) -6px -2px 16px 0
}

.inner-header .inner-nav .nav-item .anchor::after,.main-header .custom-nav .nav-item .anchor::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #e3d23e;
    bottom: 0;
    border-radius: 5px;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .6s ease-in-out;
    z-index: 10
}

.banner .banner-h1:hover .main .hover::after,.copyrights .footer-ul li a:hover:after,.inner-header .inner-nav .nav-item .anchor.active::after,.inner-header .inner-nav .nav-item .anchor:hover::after,.main-header .custom-nav .nav-item .anchor.active::after,.main-header .custom-nav .nav-item .anchor:hover::after,footer .footer-info a:hover:after {
    transform-origin: left;
    transform: scaleX(1)
}

.nav-fullpage {
    width: 100%;
    height: 100vh;
    background-color: #1a1a1a;
    z-index: 100;
    position: fixed;
    cursor: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.open-Nav,.open-Nav:hover .bar {
    background-color: var(--black)
}

.work-box .img-box,.work-wrap {
    cursor: none!important
}

.opacity-0,.service-box-left .service-bg img,.service-box-right .service-bg img {
    opacity: 0
}

.d-none,.hide-robot,.v-hide {
    display: none
}

.d-block {
    display: block
}

.nav-fullpage .menu-nav {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.nav-fullpage .menu-nav .menus {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem
}

.nav-fullpage .menu-nav .menus:last-child {
    margin-bottom: 0
}

.nav-fullpage .menu-nav .menus a {
    font-family: var(--FF-BR);
    font-size: 7vw;
    line-height: 7vw;
    color: #ccc;
    position: relative
}

.nav-fullpage .menu-nav .menus a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: #ccc;
    bottom: 0;
    z-index: 10;
    left: 0
}

.nav-Digital-Marketing .nav-item .nav-link.active,.nav-fullpage .menu-nav .menus a.active:after,.nav-fullpage .menu-nav .menus a:hover:after {
    background-color: #e3d23e;
    color: var(--black)
}

.nav-fullpage .menu-nav .menus .lineSep {
    background: #ccc;
    height: 5px;
    width: 7.8125vw;
    margin: 0 2rem;
    position: relative
}

.nav-fullpage .menu-nav .menus a.active,.nav-fullpage .menu-nav .menus a:hover {
    color: #e3d23e;
    cursor: pointer!important
}

.nav-fullpage .close-nav {
    background-color: #ccc;
    border-radius: 100%;
    position: fixed;
    right: 5.5%;
    top: 7%;
    border: none!important;
    width: 50px;
    height: 50px;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center
}

.open-Nav .bar,.open-Nav:hover {
    background-color: var(--white)
}

.banner,.open-Nav {
    justify-content: center;
    position: relative
}

.nav-fullpage .close-nav i {
    font-size: 20px
}

.nav-fullpage .close-nav:hover {
    transform: scale(1.4)
}

.open-Nav {
    border-radius: 100%;
    border: none!important;
    width: 2.6041666666666665vw;
    height: 2.6041666666666665vw;
    z-index: 110;
    display: flex;
    align-items: center;
    flex-direction: column;
    top: -5px
}

.open-Nav .bar {
    display: block;
    width: 1.0416666666666667vw;
    height: .15625vw
}

.open-Nav .bar:first-child {
    margin-bottom: 5px
}

.banner {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center
}

.banner .banner-h1 .main {
    font-size: 7.8125vw;
    line-height: 6.8125vw;
    color: var(--white)
}

.banner .main .hover {
    color: var(--white);
    margin-right: 1.5rem;
    transition: .4s ease-in-out;
    position: relative
}

.banner .banner-h1 .main .hover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: #e3d23e;
    bottom: 11px;
    border-radius: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .6s ease-in-out;
    z-index: 10
}

.banner .sub {
    font-size: 1.5625vw;
    line-height: 1.8229166666666667vw;
    color: var(--white);
    width: 70%;
    margin: 2rem auto 1rem!important;
    text-transform: uppercase
}

.banner .line-banner {
    width: 100%;
    position: absolute;
    bottom: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 10vw)
}

.banner .line {
    height: 8.94901144640999vh;
    width: 2px;
    background-color: #e3d23e;
    display: inline-block
}

.mobile-responsive,.sec-pad {
    padding: 7rem 0
}

.sec-pad-awards {
    padding: 7rem 0 5rem!important
}

.pad-t-4 {
    padding-top: 4rem
}

.pad-t-8 {
    padding-top: 8rem
}

.pad-t-10 {
    padding-top: 10rem
}

.sub-heading {
    font-size: 1.9270833333333333vw;
    font-weight: 600;
    text-transform: uppercase
}

.main-heading {
    font-size: 7.8125vw;
    line-height: 7.8125vw;
    color: var(--white);
    margin-bottom: 1.5rem;
    margin-top: 1rem
}

.case-project .case-project-wrap .case-project-detail p,.case-summary .case-summary-text p,.hover-content,.main-para {
    font-family: var(--FF-OS-V);
    font-size: 1.5625vw;
    color: var(--white)
}

.main-heading span {
    padding-left: 1.5rem
}

.main-para {
    font-weight: 500
}

.hover-content {
    margin: 2rem 0
}

.hover-content div {
    display: inline
}

.case-project .case-project-wrap .case-project-detail p span,.case-summary .case-summary-text p span,.hover-content a {
    color: var(--white);
    font-family: var(--FF-OS-I);
    font-weight: 700;
    position: relative;
    z-index: 2
}

.hover-content .hover-item a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--white);
    border-radius: 0;
    left: 0;
    bottom: -4px;
    display: none
}

.hover-content .hover-item img {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50px);
    z-index: 3;
    display: none
}

.hover-content .hover-item a:hover img {
    opacity: 1;
    transition: .5s ease-in
}

.primary-italic {
    color: #e3d23e;
    font-family: var(--FF-OS-I);
    font-weight: 700
}

.main-btn {
    padding: 2rem 0 0
}

.c-btn,.c-btn-reverse {
    width: 13.802083333333334vw;
    padding: .8rem 1rem;
    display: inline-block;
    transition: .3s ease-out;
    font-size: 1.3020833333333333vw
}

.c-btn:nth-child(2) {
    margin-left: 1.5rem
}

.c-btn {
    border: 2px solid var(--gray);
    color: var(--white);
    background: 0 0;
    background: linear-gradient(to left,transparent 50%,#e3d23e 50%) right;
    background-size: 200%
}

.c-btn-reverse,.c-btn:hover {
    border: 2px solid #e3d23e;
    font-family: var(--FF-BR);
    color: var(--black)
}

.c-btn-reverse {
    background: #e3d23e;
    background: linear-gradient(to left,#e3d23e 50%,var(--black) 50%) right;
    background-size: 200%
}

.c-btn-reverse:hover {
    font-family: var(--FF-BR);
    color: var(--white);
    border: 2px solid var(--gray)
}

.awards,.clients {
    padding: 4rem 0 7rem
}

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

    100% {
        transform: translateX(calc(-250px * 7))
    }
}

.sliderContinuous {
    background: var(--black);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,.125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%
}

.sliderContinuous .slide-track {
    animation: 40s linear infinite scroll;
    display: flex;
    width: calc(300px * 14)
}

.sliderContinuous .slide {
    height: 100px;
    width: 300px
}

.service-box-left .service-anchor,.service-box-right .service-anchor,.work-box .work-detail .page-ref a {
    width: 4.166666666666667vw;
    height: 4.166666666666667vw;
    transition: .4s ease-out;
    background: linear-gradient(to left,transparent 50%,var(--white) 50%) right
}

.work-box.first {
    margin-top: 11rem;
    padding-right: 1.2rem
}

.work-box.second {
    margin-top: 0;
    padding-left: 1.2rem;
    position: relative
}

.work-sec .col-12:nth-child(2) {
    margin-top: 0!important
}

.work-sec .col-12:nth-of-type(2n) {
    margin-top: -100px
}

.work-box .img-box {
    overflow: hidden;
    margin-bottom: 3rem
}

.work-box .img-box img {
    cursor: none!important;
    width: 100%;
    transform: scale(1);
    transition: transform .4s ease-in-out
}

.work-box:hover img {
    transform: scale(1.15)
}

.work-box .work-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.work-box .work-detail .content .work-title {
    font-size: 2.0833333333333335vw;
    color: var(--white);
    font-family: var(--FF-OS-V)
}

.work-box .work-detail .content .work-catogery {
    margin-top: .5rem;
    font-size: 1.4583333333333333vw;
    color: var(--white);
    font-family: var(--FF-OS-V);
    transition: .4s ease-in-out
}

.work-box .work-detail .page-ref a {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 200%
}

.service-box-left .service-anchor i,.service-box-right .service-anchor i,.work-box .work-detail .page-ref a i {
    color: var(--white);
    font-size: 1.3020833333333333vw;
    transition: .4s ease-in-out
}

.service-inner {
    padding-top: 5rem
}

.service-box-left,.service-box-right {
    height: 19.53125vw;
    background-color: var(--black);
    padding: 0 5rem;
    position: relative;
    display: flex
}

.service-box-left {
    justify-content: space-between;
    align-items: center;
    border: 1px solid #343434;
    border-left: 2px solid #e3d23e
}

.service-box-left .service-title,.service-box-right .service-title {
    font-family: var(--FF-BR);
    font-size: 5.208333333333333vw;
    line-height: 5.208333333333333vw;
    color: var(--white);
    z-index: 2
}

.service-box-left .service-anchor,.service-box-right .service-anchor {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 200%;
    z-index: 2
}

.service-box-left .service-bg,.service-box-right .service-bg {
    bottom: 0;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0
}

.service-box-left .service-bg {
    z-index: 1;
    background: linear-gradient(to left,transparent 50%,#e3d23e 50%) right;
    background-size: 200%;
    transition: .3s ease-out
}

.service-box-left:hover .service-bg {
    background-position: left;
    transition-delay: 0.3s;
    opacity: 1
}

.service-box-left:hover .service-bg img {
    mix-blend-mode: multiply;
    opacity: 1;
    filter: contrast(1.3);
    transition: .4s ease-out .4s
}

.service-box-right {
    justify-content: space-between;
    align-items: center;
    border: 1px solid #343434;
    border-right: 2px solid #e3d23e
}

.service-box-right .service-bg {
    z-index: 1;
    background: linear-gradient(to right,transparent 50%,#e3d23e 50%) left;
    background-size: 200%;
    transition: .2s ease-out
}

.service-box-right:hover .service-bg {
    background-position: right;
    transition-delay: 0.2s;
    opacity: 1
}

.service-box-right:hover .service-bg img {
    mix-blend-mode: multiply;
    opacity: 1;
    filter: contrast(1.3);
    transition: .2s ease-out .2s
}

.slick-track,.swiper-wrapper {
    height: fit-content
}

.testimonials {
    padding: 7rem 0 10rem
}

.testimonial-sub {
    font-family: var(--FF-OS-V);
    font-size: 1.0416666666666667vw;
    color: var(--gray)
}

.testimonial-slider {
    padding-top: 3rem;
    position: relative
}

.testimonial-slider p {
    font-family: var(--FF-OS-I);
    font-size: 1.5625vw;
    line-height: 2.0833333333333335vw;
    color: var(--white);
    width: 90%;
    margin: 0 auto
}

.testimonial-slider .testimonial-image {
    margin: 1.5rem 0;
    display: inline-block
}

.testimonial-slider .testimonial-title {
    font-family: var(--FF-OS-V);
    font-size: 1.5625vw;
    color: var(--white);
    font-weight: 700;
    margin-bottom: .8rem
}

.testimonial-slider .testimonial-position,.testimonials .next {
    font-family: var(--FF-OS-V);
    font-size: 1.0416666666666667vw;
    color: var(--white)
}

.testimonial-slider .testimonial-line {
    width: calc(100% - 85%);
    height: 5px;
    background-color: #e3d23e;
    display: inline-block;
    margin: 1rem 0
}

.testimonials .next {
    font-weight: bolder;
    outline: 0;
    border: none;
    background: 0 0;
    display: inline-block
}

footer {
    padding: 10rem 0 1rem;
    border-top: 1px solid #8080804a;
    position: relative
}

footer .letstalk {
    font-family: var(--FF-BR);
    font-size: 7.8125vw;
    line-height: 5.8125vw;
    color: #e3d23e;
    margin-bottom: 1.5rem;
    position: relative
}

.copyrights .footer-ul li a,.copyrights .goto-top,.copyrights p {
    font-family: var(--FF-OS-V);
    font-size: 1.0416666666666667vw;
    line-height: 1.0416666666666667vw
}

footer .letstalk::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    bottom: 2px;
    border-radius: 0;
    left: 0;
    right: 0;
    z-index: 10
}

footer .letstalk span {
    position: absolute;
    bottom: -53px;
    left: 0;
    opacity: 0;
    animation: .5s slideback;
    transition: opacity .4s ease-in-out
}

footer .letstalk:hover span {
    animation: .5s slide;
    left: 97%;
    opacity: 1
}

@keyframes slide {
    0% {
        left: 0
    }

    100% {
        left: 97%
    }
}

@keyframes slideback {
    0% {
        left: 97%
    }

    100% {
        left: 0
    }
}

.arrow {
    display: block;
    margin: 30px auto;
    border-top: 15px solid #e3d23e;
    border-left: 15px solid #e3d23e;
    transform: rotate(135deg);
    width: 66px;
    height: 65px
}

.arrow::after {
    content: "";
    display: block;
    width: 8.7px;
    height: 85px;
    transform: rotate(-45deg) translate(23px,0);
    left: 10px;
    top: -1px;
    position: absolute
}

.cirlce-contact .cirle,footer .cirlce-a .cirle {
    border-radius: 100%;
    display: flex;
    transform: scale(1)
}

footer .h-circle {
    height: 19.250780437044746vh
}

footer .cirlce-a {
    width: 9.635416666666666vw;
    margin: 0 auto
}

footer .cirlce-a .cirle {
    position: relative;
    top: 2.6041666666666665vw;
    width: 9.635416666666666vw;
    height: 9.635416666666666vw;
    align-items: center;
    justify-content: center;
    transition: .15s ease-in-out;
    z-index: 2000;
    box-shadow: none
}

.banner-about,footer .footer-info {
    display: flex;
    justify-content: center;
    width: 100%
}

.case-category .cat-titles h3,footer .cirle h3 {
    font-family: var(--FF-BR);
    font-size: 1.5625vw;
    color: var(--white)
}

footer .cirlce-a .cirle.hovered {
    transform: scale(1.3)
}

footer .cirlce-a .cirle.active {
    transition: 1s ease-in-out!important;
    transform: scale(100)!important;
    box-shadow: none!important
}

.br-footer {
    border-right: 1px solid #8080804a
}

footer .footer-info {
    padding: 5rem 0;
    height: 62.43496357960458vh;
    align-items: center;
    flex-direction: column
}

footer .footer-info h3 {
    font-family: var(--FF-BR);
    font-size: 1.5625vw;
    line-height: 1.5625vw;
    color: var(--white)
}

footer .footer-info a {
    font-family: var(--FF-BR);
    font-size: 1.5625vw;
    line-height: 1.5625vw;
    color: #e3d23e;
    margin-left: .5rem;
    position: relative
}

footer .footer-info i {
    font-size: 4.166666666666667vw;
    color: var(--white);
    margin-bottom: 2.5rem;
    transition: .4s ease-in-out
}

.copyrights .footer-ul li a::after,footer .footer-info a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #e3d23e;
    bottom: -5px;
    border-radius: 5px;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .6s ease-in-out;
    z-index: 10
}

footer .footer-info i.t-45 {
    transform: rotate(-45deg)
}

.footer-pad {
    margin: 7rem 0
}

.copyrights .goto-top {
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.copyrights .goto-top i {
    margin-bottom: .5rem;
    font-size: 1.3020833333333333vw
}

.copyrights .footer-ul {
    text-align: end
}

.copyrights .footer-ul li {
    display: inline-block
}

.copyrights .footer-ul li a {
    text-transform: uppercase;
    color: var(--white);
    position: relative;
    transition: .5s ease-in-out
}

.copyrights .footer-ul li:first-child {
    margin-right: 1rem
}

.banner-about {
    align-items: center;
    z-index: 1;
    position: relative;
    overflow: hidden;
    height: 160vh
}

.banner-contact,.loader {
    height: 100vh;
    display: flex
}

.banner-about .about-bg {
    height: 160vh;
    filter: grayscale(1)
}

.banner-about .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    background: linear-gradient(rgb(0 0 0 / 55%),rgb(0 0 0 / 99%));
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2
}

.about-banner-content {
    position: absolute;
    z-index: 5;
    top: 15%
}

.banner-contact,.pos-rel {
    position: relative!important
}

.about-banner-content .banner-h1 h1 {
    font-family: var(--FF-BR);
    font-size: 22.125vw;
    line-height: 18.125vw;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--white);
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: linear-gradient(to right,#e3d23e,#e3d23e 50%,transparent 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: .3s ease-in-out
}

.about-banner-content .banner-h1 h1:hover {
    background-position: 0 100%;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent
}

.about-banner-content .banner-h1 h2 {
    font-family: var(--FF-BR);
    font-size: 20.125vw;
    line-height: 16.125vw;
    letter-spacing: -10px;
    margin: 0;
    padding: 0;
    color: var(--white)
}

.banner-contact {
    justify-content: center;
    align-items: end;
    z-index: 1;
    overflow: hidden;
    width: 100%
}

.banner-contact .main {
    font-family: var(--FF-BR);
    font-size: 13.020833333333334vw;
    line-height: 13.020833333333334vw;
    color: var(--white);
    margin-bottom: 2rem
}

.btn-copy,.form-contact .form-label {
    font-family: var(--FF-OS-V);
    color: var(--white)
}

.contact-border {
    width: 100vw;
    padding-bottom: 8rem
}

.cirlce-contact {
    width: 21.25vw;
    margin: 0 auto
}

.cirlce-contact .cirle {
    top: 50px;
    width: 21.25vw;
    height: 21.25vw;
    background-color: #e3d23e;
    align-items: center;
    justify-content: center;
    transition: 2s ease-in-out!important;
    z-index: 2000!important;
    position: relative
}

.loader,.price-nav {
    justify-content: center
}

.cirlce-contact .cirle h3 {
    font-family: var(--FF-BR);
    font-size: 3.6458333333333335vw;
    color: var(--white);
    display: none
}

.cirlce-contact .cirle.hovered {
    box-shadow: none!important;
    transform: scale(1)!important;
    transition: .2s ease-in-out!important
}

.cirlce-contact .cirle.unhovered {
    transition: .2s ease-in-out!important;
    box-shadow: #55ffcd38 0 0 0 40px,rgb(3 3 3 / 0%) -6px -2px 16px 0
}

.cirlce-contact .cirle.active {
    position: fixed;
    transform: scale(100)!important;
    box-shadow: none!important
}

.contact-form {
    padding: 10rem 0;
    background-color: #161616
}

.form-contact .form-label {
    font-size: .8333333333333334vw
}

.form-contact .form-control,.form-contact select {
    font-family: var(--FF-OS-V);
    font-size: .8333333333333334vw;
    color: var(--white);
    background-color: var(--black);
    border-radius: 0;
    padding: 1.3rem;
    border: 1px solid var(--black)
}

.form-contact .form-control:focus,.form-contact select:focus {
    border: 1px solid #e3d23e;
    box-shadow: none
}

.form-contact textarea {
    height: 350px;
    resize: none
}

.is-invalid {
    border: 1px solid #e3d23e!important
}

.btn-copy {
    background: 0 0;
    outline: 0;
    border: none;
    font-size: 16px
}

.copiedText {
    font-size: 13px;
    position: absolute;
    right: 0;
    bottom: -25px
}

.triangle {
    border: 50vw solid transparent;
    border-top: 0;
    border-bottom: 0 solid #161616;
    position: absolute;
    bottom: 0;
    transition: .2s ease-in-out
}

.primar-text-hollow,.service-count h2 {
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: .3s ease-in-out;
    -webkit-text-stroke-width: 2px;
    overflow: hidden
}

.triangle.active {
    border-bottom: 40vh solid #161616
}

.loader {
    width: 100%;
    background-color: var(--black);
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 199;
    align-items: center
}

.logo-inner,.round-logo {
    border-radius: 100%;
    background-color: #e3d23e
}

.loader-img,.logo-inner {
    left: 50%;
    bottom: 50vh;
    position: absolute
}

.loader-img {
    z-index: 2;
    width: 13.020833333333334vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.logo-inner {
    width: 4.729166666666667vw;
    height: 4.729166666666667vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    bottom: 48.5vh;
    left: 45.4%
}

.a-l-1 {
    animation: .2s 2s forwards goDown
}

.round-logo {
    width: 2.6041666666666665vw;
    height: 2.6041666666666665vw;
    position: absolute;
    bottom: 8vh
}

.a-l-2 {
    animation: .5s ease-out 2.5s forwards scaleLogo
}

@keyframes goDown {
    0% {
        bottom: 50vh;
        width: 5.729166666666667vw;
        height: 5.729166666666667vw
    }

    100% {
        bottom: 8vh;
        width: 2.0833333333333335vw;
        height: 2.0833333333333335vw;
        left: 50%
    }
}

@keyframes fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fade-in {
    opacity: 0;
    animation: .1s ease-in-out forwards fade-in
}

@keyframes fadeout {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes scaleLogo {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(100)
    }
}

@keyframes scale-initial-loader {
    from {
        transform: scale(.5)
    }

    to {
        transform: scale(1)
    }
}

.opacity-1 {
    opacity: 1!important
}

#open-Nav-mobile {
    display: none!important
}

.banner .banner-h1 .mainWork {
    font-family: var(--FF-BR);
    font-size: 10.9375vw;
    line-height: 9.114583333333334vw;
    color: var(--white)
}

.banner .banner-h1 .mainService,.primar-text-hollow {
    font-size: 13.020833333333334vw;
    font-family: var(--FF-BR)
}

.primar-text-hollow {
    line-height: 11.458333333333334vw;
    -webkit-text-stroke-color: #e3d23e;
    position: relative;
    display: inline-block;
    background: linear-gradient(to right,#e3d23e,#e3d23e 50%,transparent 50%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-position: 100%;
    letter-spacing: 0
}

.primar-text-hollow:hover {
    background-position: 0 100%;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: transparent
}

.banner .banner-h1 .mainService {
    line-height: 12.020833333333334vw;
    color: var(--white)
}

.service-wrapper {
    padding: 4rem 0
}

.sec-pad-awards-services {
    padding: 0 0 5rem!important
}

.service-count h2 {
    font-family: var(--FF-BR);
    font-size: 52.083333333333336vw;
    line-height: 43.75vw;
    -webkit-text-stroke-color: var(--white);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-position: 100%;
    writing-mode: vertical-lr;
    transform: scale(-1,-1);
    position: absolute;
    left: -50px
}

.service-wrapper:hover .service-count h2 {
    background-position: 0 100%;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #e3d23e
}

.custom-accordion .accordion-item {
    background-color: var(--black)!important;
    border: 1px solid #585757;
    border-radius: 0!important;
    margin-top: -1px
}

.custom-accordion .accordion-header button {
    font-family: var(--FF-BR);
    font-size: 1.5625vw;
    color: var(--white)!important;
    background-color: var(--black)!important;
    box-shadow: none!important;
    padding: 1.5rem 1.25rem;
    transition: .5s ease-in-out
}

.bold-italic,.italic,.price-wrap .price-details li,.price-wrap .price-details p {
    font-family: var(--FF-OS-I)
}

.custom-accordion .accordion-header button:focus {
    box-shadow: none!important
}

.bold-italic {
    font-weight: 700
}

.custom-accordion p {
    font-size: .9375vw;
    color: var(--white);
    font-family: var(--FF-OS-V)
}

.price-wrap::-webkit-scrollbar {
    width: 8px;
    background: #000
}

.price-wrap::-webkit-scrollbar-track {
    background: #000;
    border-radius: 0
}

.price-wrap::-webkit-scrollbar-thumb {
    background: var(--white);
    border-radius: 0
}

.price-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--white)
}

.price-wrap {
    max-height: 80vh;
    overflow: auto;
    border: 1px solid #e3d23e;
    padding: 3rem 1rem 3rem 3rem;
    margin-bottom: 3.5rem;
    background-color: var(--black);
    transition: .5s ease-in-out
}

.f-w-blog,.h-w-blog {
    border-bottom: 1px solid #303030
}

.price-wrap .sub-heading-price {
    font-family: var(--FF-BR);
    font-size: 1.9270833333333333vw;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase
}

.price-wrap .price {
    font-family: var(--FF-BR);
    font-size: 4.166666666666667vw;
    color: var(--white);
    margin-bottom: 2rem
}

.price-wrap .price-details .price-detail-heading {
    font-family: var(--FF-OS-I);
    font-weight: 700;
    font-size: 1.25vw;
    color: var(--white);
    margin-bottom: .5rem
}

.blog-main-heading,.price-nav .nav-item .nav-link {
    color: var(--white);
    font-size: 1.4vw
}

.price-wrap .price-details li,.price-wrap .price-details p {
    font-size: .8854166666666666vw;
    color: var(--white)
}

.price-wrap .price-details li {
    position: relative;
    padding-left: .4em;
    padding-bottom: 1.5rem
}

.price-wrap .price-details li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f005";
    position: absolute;
    left: -25px;
    color: #e3d23e;
    font-size: .625vw;
    margin-top: 5px;
    transition: .5s ease-in-out
}

.price-wrap:hover .c-btn {
    border: 2px solid var(--white)
}

.price-nav {
    margin: 3rem 0 0
}

.price-nav .nav-item {
    width: 16%
}

.price-nav .nav-item .nav-link {
    text-align: center;
    font-family: var(--FF-BR);
    background-color: transparent!important;
    width: 100%;
    border-bottom: 10px solid #191919;
    border-radius: 0;
    padding-bottom: 1.5rem;
    transition: .5s ease-in-out
}

.price-nav .nav-item .nav-link.active {
    color: #e3d23e;
    border-bottom: 10px solid #e3d23e
}

.price-content {
    padding: 3rem 0
}

.nav-Digital-Marketing {
    justify-content: center;
    margin-bottom: 3rem
}

.nav-Digital-Marketing .nav-item .nav-link {
    color: var(--white);
    font-family: var(--FF-BR);
    font-size: 25px;
    width: 300px;
    us: 0;
    border: 1px solid #e3d23e
}

.price-sub-accordion .price-wrap {
    margin-bottom: .5rem
}

.blog-top-tabs {
    position: relative;
    margin-top: 15.088449531737773vh
}

.f-w-blog {
    padding: 5rem 0 7rem
}

.blog-person-detail {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100px
}

.blog-person-detail .blog-icon {
    width: 2.34375vw;
    height: 2.34375vw;
    margin-right: 1.5rem;
    border-radius: 50%!important
}

.blog-person-detail .blog-person {
    font-family: OpenSans-V;
    font-weight: 100;
    color: #a4a4a4;
    font-size: 1.0416666666666667vw
}

.blog-main-heading {
    font-family: var(--FF-BR);
    margin-bottom: 3rem
}

.h-w-blog,.next-project {
    padding: 5rem 0
}

.blog-inner-heading {
    margin-top: 1.5rem;
    color: var(--white);
    font-family: var(--FF-BR);
    font-size: 4.166666666666667vw;
    letter-spacing: -4px;
    line-height: 4.166666666666667vw
}

.btn-blog-view,.btn-blog-view:hover,.h-w-blog .main-para {
    font-size: 1.3020833333333333vw
}

.blog-details {
    padding-left: 2rem
}

.btn-blog-view {
    margin: 1.5rem 0;
    font-family: var(--FF-BR);
    color: var(--white);
    transition: .5s ease-in-out;
    display: inline-block
}

.btn-blog-view:hover {
    font-family: var(--FF-BR);
    color: #e3d23e
}

.btn-blog-view i {
    padding-left: .8rem;
    font-size: 1.0416666666666667vw
}

.blog-cards {
    border-radius: 0;
    border: 0;
    background-color: transparent;
    margin-bottom: 2rem
}

.blog-cards .card-body {
    background-color: var(--black);
    padding: 2rem 1.5rem;
    border-left: 1px solid #70707087;
    border-right: 1px solid #70707087;
    transition: .5s ease-in-out
}

.blog-cards .card-img,.blog-cards .card-img-top {
    border-radius: 0
}

.blog-cards .card-body .card-title {
    font-family: var(--FF-BR);
    font-size: 2.0833333333333335vw;
    line-height: 2.0833333333333335vw;
    color: var(--white)
}

.blog-nav .nav-item .nav-link,.btn-toggle-mode,.inner-nav-footer li,.inner-nav-footer li a {
    font-family: var(--FF-OS-V);
    font-size: .78125vw
}

.blog-cards .card-footer {
    background-color: var(--black);
    padding: 1rem 1.5rem;
    border: 1px solid #70707087;
    border-radius: 0;
    transition: .5s ease-in-out
}

.blog-cards:hover .card-footer,.blog-category-list:hover {
    background-color: #e3d23e;
    border: 1px solid #e3d23e
}

.blog-cards .card-footer .blog-person-detail {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: fit-content
}

.blog-cards .card-footer .blog-person-detail .blog-icon {
    width: 2.0833333333333335vw;
    height: 2.0833333333333335vw;
    margin-right: .5rem
}

.blog-cards .card-footer .blog-person-detail .blog-person {
    font-family: OpenSans-V;
    font-weight: 100;
    color: #a4a4a4;
    font-size: .8333333333333334vw
}

.blog-cards:hover .card-body {
    background-color: #e3d23e;
    border-left: 1px solid #e3d23e;
    border-right: 1px solid #e3d23e
}

.blog-cards:hover .card-footer {
    border-top: 1px solid var(--white)
}

.list-blogs-all,.pt-7 {
    padding-top: 7rem
}

.blog-category-list {
    border: 1px solid #70707087;
    background-color: var(--black);
    transition: .2s ease-in-out;
    margin-bottom: 1.5rem
}

.blog-category-list .blog-category-list-heading {
    font-family: var(--FF-BR);
    font-size: 1.3020833333333333vw;
    color: #e3d23e;
    text-transform: uppercase;
    border-bottom: 1px solid #70707087;
    padding: 1.5rem;
    transition: .2s ease-in-out
}

.blog-category-list:hover .blog-category-list-heading {
    color: var(--white);
    border-bottom: 1px solid var(--white)
}

.blog-category-list ul li {
    border-bottom: 1px solid #70707087;
    transition: .2s ease-in-out
}

.blog-category-list:hover ul li {
    border-bottom: 1px solid var(--white)
}

.blog-category-list ul li:last-child {
    border-bottom: none
}

.blog-category-list ul li a {
    display: flex;
    padding: 1.5rem;
    align-items: center
}

.blog-category-list ul li a .img-blog-list {
    width: 30%
}

.blog-category-list ul li a p {
    font-family: OpenSans-V;
    color: #a4a4a4;
    font-size: .9375vw;
    padding-left: 1.5rem;
    width: 70%;
    transition: .2s ease-in-out
}

.blog-category-list ul li a .heading-2 {
    font-family: var(--FF-BR);
    font-size: 1.1458333333333333vw;
    line-height: 1.1458333333333333vw;
    color: var(--white);
    width: 70%;
    padding-right: 1.5rem
}

.blog-nav-wrap {
    border-top: 1px solid #70707087;
    border-bottom: 1px solid #70707087;
    padding: 2rem 0;
    align-items: center
}

.blog-nav .nav-item .nav-link {
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase
}

.blog-nav .nav-item .nav-link.active {
    background-color: transparent;
    color: #e3d23e
}

.btn-toggle-mode {
    background-color: transparent;
    color: var(--white);
    border: 0
}

.btn-toggle-mode i {
    padding-right: .5rem
}

.blog-detail-wrap {
    margin-top: 15vh
}

.blog-detail-wrap .main-heading {
    font-size: 4.166666666666667vw;
    line-height: 4.166666666666667vw
}

.blog-detail-wrap .main-para {
    font-size: .9375vw;
    margin-bottom: 1rem
}

.swiper {
    width: 100%;
    height: fit-content;
    margin-bottom: 2rem
}

.swiper-slide {
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.service-inner-vertical-tab .nav-link {
    font-family: var(--FF-BR);
    font-size: 1.9270833333333333vw;
    color: var(--white);
    border-radius: 0;
    text-align: start;
    border-top: 1px solid #7070704f;
    border-bottom: 1px solid #7070704f;
    padding: 1.3rem 2rem
}

.service-inner-vertical-tab .nav-link.active {
    background-color: #e3d23e;
    border-top: 1px solid #e3d23e;
    border-bottom: 1px solid #e3d23e blprim
}

.service-inner-vertical-tab .nav-pills .nav-link:first-child {
    border-top: none!important
}

.service-inner-vertical-tab .nav-pills .nav-link:last-child {
    border-bottom: none!important
}

.slider-left .slide,.slider-right .slide {
    padding: 0 1rem
}

.slider-left .slick-slide img,.slider-right .slick-slide img {
    display: block;
    width: 100%
}

.cat-section {
    z-index: 2;
    position: relative;
    padding-top: 7rem
}

.case-category {
    padding: 0 4rem
}

.case-category .cat-titles {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0
}

.case-project .case-bg-text,.web-design .web-bg-text {
    font-size: 16.145833333333332vw;
    line-height: 18.229166666666668vw;
    color: transparent;
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%
}

.mt-7 {
    margin-top: 7rem
}

.case-project {
    margin-top: -5rem;
    padding: 10rem 0 7rem;
    position: relative
}

.case-project .case-bg-text {
    font-family: var(--FF-BR);
    text-transform: uppercase;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    overflow: hidden;
    top: 30px;
    align-items: center;
    opacity: .2;
    letter-spacing: -10px
}

.logo-animation-wrapper .logo-bg-text,.web-design .web-bg-text {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff40;
    opacity: .5;
    letter-spacing: -15px;
    overflow: hidden;
    text-transform: uppercase
}

.case-project .case-project-wrap .case-project-heading {
    font-family: var(--FF-BR);
    font-size: 1.5625vw;
    color: var(--white);
    margin-bottom: 4rem
}

.case-project .case-project-wrap .case-project-title,.case-summary .case-summary-text h4 {
    font-size: 2.6041666666666665vw;
    line-height: 2.6041666666666665vw;
    color: var(--white);
    font-family: var(--FF-BR)
}

.case-project .case-project-wrap .case-project-title {
    font-weight: 900
}

.case-project .case-project-wrap .case-project-detail p:not(:first-child) {
    margin-top: 2rem
}

.case-summary {
    padding: 3rem 0 7rem
}

.case-summary .case-summary-text {
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 56.4%
}

.case-summary .case-summary-text h2 {
    font-family: var(--FF-BR);
    font-size: 3.90625vw;
    line-height: 3.90625vw;
    color: var(--white);
    margin-bottom: 2rem
}

.h-40,.h-60 {
    height: 60%
}

.web-design {
    padding: 0 0 5rem;
    position: relative
}

.web-design .web-bg-text {
    font-family: var(--FF-BR);
    top: 0;
    align-items: center;
    z-index: -1
}

.case .main-heading,.case .sub-heading,.next-project .slider-next-project .slide a {
    color: var(--white);
    font-family: var(--FF-BR)
}

.case .sub-heading {
    font-size: 1.8229166666666667vw;
    line-height: 1.8229166666666667vw
}

.case .main-heading {
    font-size: 3.90625vw;
    line-height: 3.90625vw;
    margin-top: 0;
    margin-bottom: 2rem
}

.laptop {
    position: relative;
    margin: auto;
    max-width: 75%
}

.laptop .laptop__screen {
    position: relative;
    z-index: 1;
    padding: 3%;
    border-radius: 2rem;
    background: #eaebee;
    background-image: linear-gradient(to bottom,#eaebee,#eaebee);
    box-shadow: 0 .1rem 0 #fff;
    border: 2px solid #fff
}

.laptop .laptop__screen video {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width)/attr(height)
}

.laptop .laptop__bottom {
    position: relative;
    z-index: 1;
    margin-right: -7%;
    margin-left: -7%;
    height: .7rem;
    background: #e9eff5;
    background-image: linear-gradient(to right,#d2dde9 0,#f9fcff 15%,#e5ebf2 40%,#e5ebf2 60%,#f9fcff 85%,#d2dde9 100%)
}

.laptop .laptop__bottom::before {
    display: block;
    margin: 0 auto;
    width: 20%;
    height: .7rem;
    border-radius: 0 0 .2rem .2rem;
    background: #f6f9fc;
    background-image: linear-gradient(to right,#c3cfdb 0,#f6f9fc 10%,#f6f9fc 90%,#c3cfdb 100%);
    content: " "
}

.laptop .laptop__under {
    position: absolute;
    top: 100%;
    left: 25%;
    display: block;
    width: 50%;
    height: 1.5rem;
    background: #e2e8f0;
    background-image: linear-gradient(to bottom,#b1b1b1,#b1b1b170)
}

.laptop .laptop__under::after,.laptop .laptop__under::before {
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    display: block;
    width: 50%;
    border-bottom-left-radius: 100%;
    background: inherit;
    content: " "
}

.laptop .laptop__under::after {
    right: auto;
    left: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 0
}

.laptop .laptop__shadow {
    position: absolute;
    right: -10%;
    bottom: -2.5rem;
    left: -10%;
    z-index: 0;
    height: 2rem;
    background: radial-gradient(ellipse closest-side,#000,transparent);
    opacity: .5
}

.h-50 {
    height: 50%
}

.bg-case {
    padding: 5rem 0 1rem
}

.logo-animation-wrapper {
    padding: 3rem 5rem 10rem;
    position: relative
}

.logo-animation {
    background-color: var(--black);
    border: 5px solid var(--white);
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    width: 80%;
    margin: 0 auto
}

.logo-animation img,.logo-animation video {
    width: auto
}

.logo-animation-wrapper .logo-bg-text {
    font-size: 16.145833333333332vw;
    line-height: 18.229166666666668vw;
    font-family: var(--FF-BR);
    color: transparent;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: -1;
    left: 0;
    bottom: 1%
}

.slider-case-images {
    padding: 5rem 0 8rem
}

.slider-case-images .swiper-scrollbar {
    position: relative;
    border-radius: 2px;
    height: 5px;
    width: 20vw;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: #acacac
}

.slider-case-images .swiper-scrollbar .swiper-scrollbar-drag {
    background: #e3d23e
}

.next-project .slider-next-project {
    display: flex;
    justify-content: center;
    align-items: center
}

.next-project .slider-next-project .slick-list {
    width: 30vw
}

.next-project .slider-next-project .slide a {
    font-size: 4.8125vw;
    line-height: 4.8125vw;
    text-transform: uppercase;
    letter-spacing: -4px
}

.next-project .slider-next-project .slick-next,.next-project .slider-next-project .slick-prev {
    background-color: var(--black);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-size: 20px
}

.next-project .slider-next-project .slick-next:hover,.next-project .slider-next-project .slick-prev:hover {
    background-color: #e3d23e;
    color: #fff;
    border: 1px solid #e3d23e
}

.next-project .slider-next-project .slick-arrow.slick-disabled {
    opacity: .2
}

.bg-cs {
    background-color: #e8282f!important
}

.bg-sculpt {
    background: linear-gradient(331deg,#ff3b64 0,#a962c9 100%) no-repeat!important
}

.bg-cnft {
    background: linear-gradient(329deg,#15215d 0,#1b2a7d 21%,#093a41 100%) no-repeat!important
}

.bg-hinge {
    background: no-repeat #3a7ea5!important
}

.bg-dragon {
    background: no-repeat #da0000!important
}

.case-slider {
    width: 100%
}

.tab-services {
    padding: 2rem 3rem;
    background-color: #000;
    border: 2px solid #7070704f
}

.v-none {
    visibility: hidden!important
}

.inner-header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 100;
    padding: 1.5rem 0;
    height: 10vh
}

.inner-header .inner-nav .navbar-brand img {
    width: 8.958333333333334vw;
    position: relative;
    z-index: 130
}

.inner-nav-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 0;
    width: 100%
}

.inner-nav-footer ul {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.inner-nav-footer li,.inner-nav-footer li a {
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    margin-left: .5rem
}

.service-inner-sec .img-div {
    overflow: hidden;
    width: 100%;
    height: 100%
}

.service-inner-sec .img-div img {
    height: 100%;
    width: 100%
}

.service-inner-sec .inner-service-wrap {
    display: flex;
    flex-direction: column;
    grid-gap: 30px;
    justify-content: center;
    height: 100%
}

.pad-inner-service {
    padding: 0 0 0 3rem
}

.service-inner-sec .inner-service-wrap .heading {
    font-family: var(--FF-BR);
    font-size: 4.166666666666667vw;
    line-height: 4.166666666666667vw;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-top: -15px;
    margin-bottom: 2rem
}

.inner-service-wrap ul li span {
    font-weight: 600!important;
    font-style: italic!important;
    margin-right: 1rem;
    display: contents
}

.inner-service-wrap ul li {
    display: flex!important;
    flex-direction: row!important;
    margin-bottom: 1rem!important;
    padding-left: 3rem;
    color: #fff;
    position: relative
}

.inner-service-wrap ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f111";
    position: absolute;
    left: 0;
    color: #e3d23e;
    font-size: .5vw;
    margin-top: 15px;
    transition: .5s ease-in-out
}

.uc {
    text-transform: uppercase!important
}

.service-pad {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.inner-service-wrap .service-box {
    border: 1px solid #8080804a;
    padding: 3rem 2rem;
    min-height: 400px
}

.inner-service-wrap .service-box h3 {
    font-size: 2.6041666666666665vw;
    margin-bottom: 1.2rem;
    font-weight: 500;
    letter-spacing: -2px
}

.keypoints .counter h3,.keypoints h2 {
    font-size: 2.5vw;
    letter-spacing: -1px;
    font-family: var(--FF-BR);
    text-transform: uppercase
}

.inner-service-wrap .service-box:hover {
    background-color: #e3d23e;
    transition: .3s ease-in-out
}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.w-20 {
    width: 20%!important
}

.w-80 {
    width: 80%!important
}

#check-group {
    animation: .32s ease-in-out 1.03s check-group;
    transform-origin: center
}

#check-group #check {
    animation: .34s cubic-bezier(.65,0,1,1) .8s forwards check;
    stroke-dasharray: 0,75px;
    stroke-linecap: round;
    stroke-linejoin: round
}

#check-group #outline {
    animation: .38s ease-in outline;
    transform: rotate(0);
    transform-origin: center
}

#check-group #white-circle {
    animation: .35s ease-in .35s forwards circle;
    transform: none;
    transform-origin: center
}

@keyframes outline {
    from {
        stroke-dasharray: 0,345.576px
    }

    to {
        stroke-dasharray: 345.576px,345.576px
    }
}

@keyframes circle {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(0)
    }
}

@keyframes check {
    from {
        stroke-dasharray: 0,75px
    }

    to {
        stroke-dasharray: 75px,75px
    }
}

@keyframes check-group {
    from,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.09)
    }
}

.pp-email-color,.tc-email-color {
    color: #73ffcc
}

.keypoints:nth-child(odd) {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 2;
    height: 4.166666666666667vw;
    border: 1px solid #e3d23e;
    background: linear-gradient(to left,transparent 50%,#e3d23e 50%) right;
    background-size: 200%;
    transition: .3s ease-out;
    margin-bottom: 4rem
}

.keypoints:nth-child(2n) .counter,.keypoints:nth-child(odd) .counter {
    width: 6.25vw;
    top: -1.3020833333333333vw;
    justify-content: center;
    display: flex
}

.keypoints:nth-child(odd):hover {
    font-family: var(--FF-BR);
    color: var(--white);
    background-position: left
}

.keypoints:nth-child(odd) .counter {
    height: 6.25vw;
    background-color: #e3d23e;
    position: absolute;
    left: -1.0416666666666667vw;
    border-radius: 100%;
    border: 2px solid #fff;
    align-items: center;
    z-index: 5
}

.keypoints .counter h3 {
    color: var(--black)
}

.keypoints h2 {
    color: var(--white)
}

.blog-detail-wrap ol li,.blog-detail-wrap p,.blog-detail-wrap ul li {
    font-size: 17px;
    font-weight: 500;
    font-family: var(--FF-OS-V)
}

.keypoints:nth-child(2n) {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 2;
    height: 4.166666666666667vw;
    border: 1px solid #e3d23e;
    background: linear-gradient(to right,transparent 50%,#e3d23e 50%) left;
    background-size: 200%;
    transition: .3s ease-out;
    margin-bottom: 4rem
}

.keypoints:nth-child(2n):hover {
    font-family: var(--FF-BR);
    color: var(--white);
    background-position: right
}

.keypoints:nth-child(2n) .counter {
    height: 6.25vw;
    background-color: #e3d23e;
    position: absolute;
    right: -1.0416666666666667vw;
    border-radius: 100%;
    border: 2px solid #fff;
    align-items: center;
    z-index: 5
}

.slider-blog .slick-slide {
    margin-left: 15px;
    margin-right: 15px
}

.slider-blog .slick-list {
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none
}

.slider-blog .swiper-slide {
    text-align: inherit;
    background: 0 0!important
}

.blog-cards .card-img-top {
    height: 200px
}

.top-agency {
    padding: 3rem 0 0;
    display: flex;
    justify-content: center;
    grid-gap: 20px
}

.top-agency a {
    color: var(--white);
    text-transform: uppercase
}

.top-agency a img {
    width: 150px;
    height: fit-content;
    margin-bottom: .5rem;
    transition: .5s ease-in-out
}

.top-agency a:hover img {
    filter: brightness(1) invert(0)
}

.blog-detail-wrap p {
    margin-bottom: 1rem;
    color: var(--white)
}

.blog-detail-wrap ol,.blog-detail-wrap ul {
    margin-bottom: 1rem
}

.blog-detail-wrap ul li {
    color: var(--white);
    margin-bottom: .5rem;
    list-style: disc;
    margin-left: 25px
}

.blog-detail-wrap ol li a,.blog-detail-wrap p a,.blog-detail-wrap ul li a {
    color: #e3d23e;
    text-decoration: underline
}

.blog-detail-wrap ol li {
    color: var(--white);
    margin-bottom: .5rem;
    margin-left: -10px;
    list-style: auto
}

.blog-detail-wrap h1,.blog-detail-wrap h2,.blog-detail-wrap h3,.blog-detail-wrap h4,.blog-detail-wrap h5,.blog-detail-wrap h6 {
    font-family: var(--FF-BR);
    color: var(--white);
    margin-bottom: .5rem;
    letter-spacing: .6px
}

.author-card {
    margin: 5rem 0;
    border: 0
}

.author-card .card-body {
    background-color: var(--black);
    height: 100%;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 3rem
}

.author-card .card-title {
    font-size: 35px;
    color: #e3d23e
}

.blog-detail-wrap b,.blog-detail-wrap strong {
    font-weight: inherit
}

.form-currency {
    position: fixed;
    right: 0;
    top: 50%;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    z-index: 100!important;
    cursor: pointer!important;
    height: 100px;
    width: 50px;
    justify-content: center;
    align-items: center;
    transition: .5s ease-in-out
}

.form-currency .item {
    padding: .5rem;
    border-bottom: 1px solid #000;
    cursor: pointer!important
}

.form-currency .item:last-child {
    border-bottom: 0
}

.form-currency .item .currencySign {
    font-family: var(--FF-OS-V);
    font-weight: 700;
    font-size: 20px;
    margin-right: 5px;
    color: var(--black);
    cursor: pointer!important
}

.form-currency .item .btnch:checked {
    accent-color: #e3d23e
}

.form-currency:before {
    content: "Converter";
    position: absolute;
    left: -60px;
    transform: rotate(270deg);
    background-color: #e3d23e;
    width: 100px;
    top: 38px;
    text-align: center;
    color: #fff;
    font-family: BEBAS-REGULAR
}

.bts-popup.is-visible input,.bts-popup.is-visible textarea {
    padding: 8px 10px;
    border-radius: 8px;
    width: 100%
}

.btn-primary:hover {
    color: #fff;
    background-color: #000;
    border-color: #000
}

.img-replace {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap
}

.bts-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #272146e6;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s,visibility 0s .3s;
    -moz-transition: opacity .3s,visibility 0s .3s;
    transition: opacity .3s,visibility 0s .3s;
    z-index: 0
}

.bts-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .3s,visibility;
    -moz-transition: opacity .3s,visibility;
    transition: opacity .3s,visibility;
    z-index: 102;
    display: flex;
    justify-content: center;
    align-items: center
}

.bts-popup-container .indOfferWrap {
    max-width: 400px;
    width: 100%
}

.bts-popup-container .formHead {
    line-height: 1;
    margin: 21px 0 12px
}

.bts-popup-container .formHead .indText {
    font-family: var(--FF-BR);
    font-weight: 700;
    color: #fd000e;
    font-size: 35px;
    text-transform: Uppercase;
    padding: 0
}

.blinking {
    animation: 1.7s infinite blinkingText
}

.bts-popup.is-visible textarea {
    border: 1px solid #c5c5c5;
    resize: none
}

.bts-popup-container .leftFlag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    display: none
}

.bts-popup-container {
    position: relative;
    width: 100%;
    max-width: 396px;
    max-height: 445px;
    height: 100%;
    margin: 4em auto;
    background: #000;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    overflow: hidden
}

.bts-popup-container p {
    color: #fff;
    padding: 10px 40px
}

.bts-popup-container a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase
}

.bts-popup-container .bts-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px
}

.bts-popup-container .bts-popup-close::after,.bts-popup-container .bts-popup-close::before {
    content: "";
    position: absolute;
    top: 12px;
    width: 16px;
    height: 3px;
    background-color: #fff
}

.bts-popup-container .bts-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px
}

.bts-popup-container .bts-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 6px;
    top: 13px
}

.is-visible .bts-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.indOfferWrap .form-group {
    margin-bottom: 1em;
    padding: 0 18px
}

@keyframes blinkingText {
    0%,60% {
        color: #fff
    }

    100%,30% {
        color: #e3d23e
    }
}