@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.mrq {
    font-size: 10rem;
    font-weight: 800;
    color: #002664;
    opacity: 0.2;
    margin: 0;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    transition: all 0.3s ease-in;
}

.mrq:hover {
    opacity: 1;
}

.mrq marquee {
    height: 221px;
}

.img-cont-sec-image img {
    width: 100%;
}

section.contact-bg .map_area {
    padding: 0 1rem;
}

section.contact-bg .map_area iframe {
    height: 500px;
    border-radius: 13px;
    width: 100%;
}

section.contact-bg .map_area ul {
    display: flex;
}

section.contact-bg .map_area ul li {
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
    margin: 17px 9px;
    list-style: none;
    padding: 17px 2rem;
    width: 100%;
    text-align: center;
    border-radius: 7px;
}

section.contact-bg .map_area ul li a {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

section.contact-bg {
    padding: 4rem 0;
}

section.contact-bg h4 {
    font-size: 39px;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

section.contact-bg p {
    font-size: 18px;
}

section.contact-bg form {}

section#about-company-bg {
    margin: 0;
}

section#about-company-bg h1 {
    font-size: 39px;
    width: 75%;
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 800;
}

section#about-company-bg p.first-para {
    font-size: 16px;
    width: 66%;
    margin: 2rem auto 9rem;
}

h1 {
    padding-bottom: 20px
}

a:hover {
    color: #eb3840
}

a {
    color: #000
}

::focus {
    box-shadow: 0 0 0 .25rem rgb(250 19 13 / 32%) !important
}

body {
    background-image: url(../images/bg-repeat.webp);
    background-repeat: repeat;
    overflow-x: hidden;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    font-family: "Montserrat", sans-serif;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
    height: 100%;
    margin-top: 70px;
    scroll-behavior: smooth;
}

#accordionExample .col-md-6 {
    padding: 10px 37px;
}

.nav-sideBar,
.nav-sideBar .nav_row {
    height: 100vh
}

.menu_ul li,
.menu_ul li i {
    margin: 15px 0
}

h1 {
    font-size: 35px;
    font-weight: 700
}

.mobile-menu .nveMenu.is-opened,
ul.dropdown_ul .fade {
    opacity: 1;
    transform: translateX(0)
}

.banner-btn a,
.banner-btn-1,
.banner-btn-4,
.inner_case-detail-txt a,
.mobile-menu .navlinks li a:hover,
.navigation li,
a,
a:focus,
a:hover {
    text-decoration: none
}

.banner-btm-bg.row.col-md-12 {
    display: none;
}

.counter-card,
.fixed-cta a,
.form-button,
.number-counter h2,
.our-cilents-bg h2,
.portfolio-menu,
.ptf-head h2,
.thank-you-model-body {
    text-align: center
}

.inf_item a:hover,
.inf_item_reverse a:hover {
    text-decoration: underline 5px;
    text-underline-offset: 13px
}

.portfolio-section .d-grid,
.tabbox ul {
    grid-template-columns: 25% 25% 25% 25%
}

.cursor,
.noContent.home-sec-carousal .resize_images img,
.portfoliobox a img,
.teambox img {
    object-position: center
}

.btn-default,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
span,
textarea,
ul {
    margin: 0;
    padding: 0;
    object-fit: cover;
    background-position: center center
}

.menu_ul {
    list-style: none;
    font-size: 25px;
    font-weight: 700;
    margin-top: 30px
}

.back {
    opacity: 1 !important
}

#back {
    opacity: 0;
    background: rgb(0 0 0 / 25%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
}

.nav-sideBar {
    width: 100%
}

.nav-first-half {
    padding: 0 0 0 30px;
    background: rgb(58 109 215 / 91%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
}

.menu_ul li a:hover {
    margin: 15px 0;
    color: #002664 !important;
    cursor: pointer
}

.menu_ul li a:hover i {
    color: #fff !important
}

.menu_ul li i {
    color: #ffffff;
    cursor: pointer
}

.menu_ul li a {
    color: #fff !important;
    white-space: nowrap
}

.dropdown_ul {
    display: none;
    list-style: square;
    padding-left: 30px
}

.btn-group-vertical,
.checklist .btn-group,
.contacttext h4 span,
.cursor.inview,
.dropdown_ul.showing,
.employebenfit h3 span,
.howweworktext h3 span,
.nav-bar-number {
    display: block
}

.marketing {
    list-style: circle !important
}

.arrow_icon {
    color: #fff;
    font-size: 20px;
    transition: transform 1s cubic-bezier(.7, 0, .3, 1)
}

.navigation__bar,
.navigation__bar--is-visible .navigation__bar {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all
}

.rotate {
    transform: rotatez(180deg)
}

ul.dropdown_ul li {
    font-size: 20px;
    font-weight: 300;
    transform: translateX(-50px);
    transition: 1s cubic-bezier(.7, 0, .3, 1);
    opacity: 0
}

.my-dot-class {
    color: #fff;
    background: #1e222b;
    width: 218px;
    padding: 13px 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 #000b1d;
    cursor: pointer;
    border: 0;
    box-shadow: inset 0 0 0 0 #e7383f
}

.card-sec h2 {
    line-height: unset !important;
    margin: 40px 0 !important;
    font-size: 35px !important;
    font-weight: 700;
    color: #ed045b !important
}

.card-sec h2 span,
.paragraph li {
    color: #000 !important
}

.card-sec p {
    max-width: none !important;
    font-size: 20px;
    padding: 0 70px
}

.paragraph {
    display: block !important;
    padding: 0;
    margin: 19px 0 0 31px
}

.paragraph li {
    font-size: 15px !important;
    letter-spacing: unset !important;
    font-weight: inherit !important;
    list-style-image: url("../images/icon.html") !important;
    display: list-item !important;
    margin: 10px 0
}

.my-dot-class:first-child::before {
    content: "WEB DESIGN";
    font-weight: 700
}

.my-dot-class:nth-child(2)::before {
    content: "E-COMMERCE";
    font-weight: 700
}

.my-dot-class:nth-child(3)::before {
    content: "BRANDING";
    font-weight: 700
}

.my-dot-class:nth-child(4)::before {
    content: "DOMAIN";
    font-weight: 700
}

.my-dot-class:nth-child(5)::before {
    content: "DIGITAL MARKETING";
    font-weight: 700
}

.my-dot-class.active {
    box-shadow: inset 400px 0 0 0 #c9004d;
    border-radius: 0 !important;
    transition: border-radius .1s ease-out, box-shadow 7.5s ease-in-out
}

.banner-btn-1-slide:hover,
.banner-btn-3-slide:hover,
.header-btn-slide:hover {
    box-shadow: inset 400px 0 0 0 #000
}

.my-dots-class {
    background: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    top: -100px;
    position: absolute
}

.extra-margin {
    margin-top: 200px
}

.container {
    max-width: 90%
}

body::-webkit-scrollbar {
    width: 8px
}

body::-webkit-scrollbar-track {
    background: #a2a0a0
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fa130d
}

::-webkit-scrollbar-track {
    background: #a2a0a0
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fa130d
}

.preloader,
section.contactsec,
section.contactsec:before {
    background-repeat: no-repeat
}

.employee-inner p,
.our-work-content h4 span,
p {
    color: #000
}

.hamburger {
    margin: 0 10px 0 0
}

.hamburger .line {
    width: 30px;
    height: 3px;
    background-color: #000;
    display: block;
    margin: 4px auto;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.mobile-menu .circle,
.mobile-menu .mobile-cross {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 50%;
    background: #005879;
    font-size: 16px;
    top: 40px
}

.mobile-menu .nveMenu,
.mobile-menu .overlay {
    position: fixed;
    transition: .5s cubic-bezier(.7, 0, .3, 1);
    opacity: 0;
    visibility: hidden
}

.hamburger:hover {
    cursor: pointer
}

#hamburger-1.is-active .line:nth-child(2),
.teambox img:hover {
    opacity: 0
}

#hamburger-1.is-active .line:first-child {
    transform: translatey(7px) rotate(45deg)
}

#hamburger-1.is-active .line:nth-child(3) {
    transform: translatey(-7px) rotate(-45deg)
}

.mobile-menu,
.typed-cursor {
    display: none
}

.mobile-menu .circle {
    margin: 0 auto;
    position: fixed;
    right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2
}

.cta-btns {
    display: flex;
    justify-content: center;
    margin: 12% 0 0
}

.cta-btns a {
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 51px !important;
    border-radius: 0 !important;
    width: 180px !important;
    margin: 0 2% !important
}

.mobile-menu .mobile-cross {
    margin: 0 auto;
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999
}

.icon__menu:before,
.navigation__bar {
    line-height: 60px
}

.mobile-menu .nveMenu {
    top: 0;
    left: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transform: translateX(-320px);
    padding: 40px 20px
}

.mobile-menu .nveMenu.is-opened {
    visibility: visible
}

.mobile-menu .overlay {
    top: 0;
    right: 0;
    width: calc(100% - 280px);
    height: 100%;
    background: rgba(0, 0, 0, .71)
}

.mobile-menu .overlay.is-on {
    opacity: 1;
    visibility: visible;
    z-index: 999
}

.mobile-menu .navlinks li {
    display: block;
    padding: 12px 0
}

.mobile-menu .navlinks li a {
    text-transform: uppercase;
    color: #666;
    font-weight: 700
}

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-image: url("../images/preloader.gif");
    background-color: #fff;
    background-position: center
}

.active-class {
    border: none;
}

.navigation__bar {
    padding: 0 60px;
    height: 75px;
    position: absolute;
    left: 0;
    top: 30px;
    border-bottom: 1px solid #e9e9e9;
    width: 100%;
    z-index: 900;
    cursor: pointer;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: translate(0, -60px);
    -moz-transform: translate(0, -60px);
    -ms-transform: translate(0, -60px);
    transform: translate(0, -60px);
    transition-property: all;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -ms-transition-duration: .25s;
    transition-duration: .25s
}

.navigation__bar.active {
    top: 0;
    position: fixed;
    z-index: 1000;
}

.navigation__menu {
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    width: 100%;
    z-index: 800;
    opacity: 0;
    padding: 0;
    margin: 0;
    transform: translatex(-100%);
    transition-property: all;
    transition-duration: 1s;
    background: 0 0
}

.card,
.contactinput,
.meet-our-team-bg,
.nav_ul,
.navigation li,
.our-services-bg,
.portfolio-inner,
.video-banner {
    position: relative
}

.company-logo {
    margin: auto 0 auto 215px;
}

.company-logo img {
    width: 212px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(41deg) brightness(87%) contrast(106%);
}

.icon__menu,
.nav-bar-contact {
    display: flex;
    align-items: center
}

.navigation__bar--is-visible .navigation__bar {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    transition-property: all;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -ms-transition-duration: .25s;
    transition-duration: .25s
}

.aboutsec .col-md-6,
.howweworksec .col-md-4,
.navigation__menu--is-visible body {
    overflow: hidden
}

.navigation__menu--is-visible .navigation__menu {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    transition-duration: .6s
}

.inf-scroll,
.inf-scroll-reverse {
    transform: translateX(0) translateZ(0)
}

span.screen-reader-text {
    letter-spacing: 1.22px;
    color: #000;
    font-weight: 700;
    font-size: 18px;
}

.menu-gif {
    width: 25px !important;
    margin-right: 10px
}

ul.dropdown li {
    display: block;
    float: left;
    padding: 10px 0;
    color: #000
}

ul.dropdown li a {
    font-size: 19px;
    color: #000;
    background-color: transparent !important
}

.navigation li {
    color: #fff;
    display: block;
    float: left;
    transition-duration: .5s
}

.banner-content h4,
.banner-text-rotate-2 .scrol,
.case-study-content h3,
.case-study-content h4,
.menu-us-btm a:hover,
.navigation li a,
.socailicon ul li a,
.we-serve-bg .gray-box:hover .para,
.we-serve-bg .gray-box:hover h7 {
    color: #fff
}

.card {
    background-color: #fff0;
    border: none
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem;
    width: 100%
}

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

.navigation li a:hover {
    background: #000;
    cursor: pointer;
    color: #fff;
    z-index: 1111
}

.navigation ul li ul {
    background: 0 0;
    visibility: hidden;
    opacity: 0;
    width: 20rem;
    position: absolute;
    transition: .5s;
    margin-top: 1rem;
    left: 0;
    display: none
}

.navigation ul li ul:hover,
.navigation ul li:hover>ul {
    visibility: visible;
    opacity: 1;
    display: block;
    background-color: transparent
}

.navigation ul li ul li {
    clear: both;
    width: 100%
}

.banner-inner {
    position: absolute
}

.banner-content {
    padding: 20vh 0 52px;
    height: auto
}

.image-banner img {
    height: 75vh;
    object-fit: cover;
    width: 100%
}

.image-banner,
.ptf-head {
    padding: 0
}

.banner-content h1 {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    padding: 15px
}

.banner-btm-social-icons ul li i,
.banner-content p {
    font-size: 25px
}

.banner-content span {
    color: #d71921;
    border-radius: 10px;
    background-color: #fff;
    padding: 0 150px;
    border: 2px solid #000
}

.banner-btn {
    padding: 2vw 0 0
}

.banner-btn a {
    color: #fff;
    font-size: 22px;
    letter-spacing: 1.33px
}

.banner-btn-1 {
    background-color: #002664;
    padding: 5px 0;
    line-height: 40px;
    width: 230px;
    color: #fff;
    border: 2px solid #002664;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #002664;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    transition: .8s ease-out
}

.banner-btn-2,
.banner-btn-3,
.tabbox ul li.portfoliobox .cap-box .quotebtnbox a {
    display: flex;
    justify-content: center;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out
}

.banner-btn-2,
.tabbox ul li.portfoliobox .cap-box .quotebtnbox a {
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
    padding: 12px 0;
    height: 55px;
    width: 230px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #ed045b;
    transition: .8s ease-out
}

.banner-btn-3,
.banner-btn-4 {
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #332a2a;
    height: 55px;
    width: 230px;
    background-color: #332a2a;
}

.banner-btn-3 {
    padding: 10px 0;
    border: 2px solid #002664;
    border-radius: 5px;
    transition: .8s ease-out
}

.banner-btn-4,
.header-btn {
    justify-content: center;
    display: flex
}

.banner-btn-3-slide:hover {
    border: 2px solid #000
}

.banner-btn-4 {
    padding: 10px 0 15px;
    font-size: 20px;
    border: 2px solid #002664;
    border-radius: 5px;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    transition: .8s ease-out;
    margin: 20px 10px !important
}

.banner-btn-4-slide:hover,
.banner-btn-5-slide:hover {
    box-shadow: inset 400px 0 0 0 #000;
    border: 2px solid #000;
    color: #fff
}

.header-btn,
.homepage-contact-btn {
    border-radius: 5px;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    color: #fff;
    font-size: 14px;
    background: #1e222b;
}

.header-btn {
    padding: 11px 20px;
    margin: 0 0 0 30px;
    line-height: normal;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 0 #002664;
    transition: .8s ease-out;
    font-weight: 800;
}

.banner-btn-5,
.homepage-contact-btn {
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #002664;
    text-decoration: none
}

.homepage-contact-btn {
    padding: 18px 30px;
    margin: 3% 0 0;
    align-items: center;
    transition: .8s ease-out;
    float: left;
}

.header-btn-slide:hover {
    color: #fff
}

.banner-btn-5 {
    background-color: transparent;
    padding: 10px 0 15px;
    height: 55px;
    font-size: 20px;
    width: 230px;
    display: flex;
    color: #002664;
    border: 2px solid #002664;
    border-radius: 5px;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    transition: .8s ease-out;
    margin: 20px 10px !important
}

.typed-text {
    color: #fff;
    padding: 30px 15px;
    font-weight: 700;
    font-size: 45px;
    line-height: 1.4;
    text-transform: uppercase
}

.text {
    color: #ff1e00
}

.banner-text-rotate .scrol,
.img-cont-sec-content h2 span,
.modal-body h5 span,
.testimonial-content .active,
.testimonial-content h8 {
    color: #ed045b
}

.banner-text-rotate .card-content {
    position: relative;
    height: 90px;
    width: 90px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-text-rotate .txt-box,
.banner-text-rotate-2 .txt-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: .3s;
    transform: translate(-50%, -50%)
}

.banner-text-rotate .txt-box .rotate-text,
.banner-text-rotate-2 .txt-box .rotate-text {
    position: relative;
    animation: 13s linear infinite rotateTxt;
    z-index: 999
}

.banner-text-rotate .rotate-text svg {
    fill: currentColor;
    height: auto;
    transform-origin: center;
    width: 90px;
    transition: .5s
}

.banner-text-rotate .rotate-text svg text {
    color: #ed045b;
    font-size: 14px;
    letter-spacing: .5px
}

.banner-text-rotate .my-btns,
.banner-text-rotate-2 .my-btns {
    padding: 60px 0 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.banner-text-rotate .my-btns a,
.banner-text-rotate-2 .my-btns a {
    margin: 0 25px
}

.banner-text-rotate .scrol i,
.banner-text-rotate-2 .scrol i {
    font-size: 23px
}

.fixed-cta {
    position: fixed !important;
    bottom: 0;
    right: 12px;
    width: 100%;
    z-index: 9999;
    justify-content: center;
    display: none
}

.glowing {
    text-decoration: none;
    -webkit-animation: 1.5s infinite glowing;
    -moz-animation: 1.5s infinite glowing;
    -o-animation: 1.5s infinite glowing;
    animation: 1.5s infinite glowing
}

@-webkit-keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        -webkit-box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        -webkit-box-shadow: 0 0 40px red
    }
}

@-moz-keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        -moz-box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        -moz-box-shadow: 0 0 40px red
    }
}

@-o-keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        box-shadow: 0 0 40px red
    }
}

@keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        box-shadow: 0 0 40px red
    }
}

.fixed-cta a {
    width: 100%;
}

.banner-btm-bg {
    padding: 0 3vw 2vw;
    position: relative;
    bottom: 0;
    justify-content: space-between
}

.banner-btm-bg .col-md-6 {
    position: fixed;
    bottom: 100px;
    z-index: 10000;
    width: auto;
    display: none;
}

.banner_msg-underline {
    margin-top: 5px;
    width: 100%;
    height: 2px;
    background: #fff;
    background-blend-mode: difference;
    mix-blend-mode: difference
}

.banner-btm-bg .col-md-6:first-child {
    bottom: 120px;
    left: -30px;
}

.banner-btm-bg .col-md-6:nth-child(2) {
    right: 20px
}

.banner-message {
    display: none !important
}

.banner-btm-social-icons ul:before {
    position: absolute;
    content: url('../images/social-icon.webp');
    top: -38px;
    left: 68px;
    z-index: 33;
    width: 41px;
    height: 50px;
    transform: scale(.17)
}

.banner-btm-social-icons ul:hover:before {
    /* content: url('../images/social-icon-hover.webp'); */
}

.banner-btm-social-icons ul li {
    position: absolute;
    list-style: none;
    left: 90px;
    transition: 1s
}

.banner-btm-social-icons ul li a {
    display: block;
    width: 45px;
    height: 45px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 50%;
    margin: 0 12px;
    font-size: 33px;
    text-decoration: none
}

.menu-bg ul li a,
.menu-us h9 {
    text-decoration: none;
    font-size: 23px;
    color: #fff
}

#twitter {
    transform: rotate(60deg)
}

#google-plus,
.banner-btm-social-icons ul li:nth-child(3) i {
    transform: rotate(120deg)
}

#instagram {
    transform: rotate(180deg)
}

#whatsapp {
    transform: rotate(240deg)
}

#linkedin {
    transform: rotate(300deg)
}

.banner-btm-social-icons ul li:nth-child(2) i {
    transform: rotate(55deg)
}

.banner-btm-social-icons ul li:nth-child(4) i {
    transform: rotate(90deg)
}

.banner-btm-social-icons ul li:nth-child(5) i {
    transform: rotate(-120deg)
}

.banner-btm-social-icons ul li:nth-child(6) i {
    transform: rotate(-60deg)
}

.banner-btm-social-icons ul li:first-child a {
    transition: 0s ease-in-out .1s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(2) a {
    box-shadow: 1px 1px 10px 2px #00000029;
    background: #000;
    transition: .1s ease-in-out .2s;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(3) a {
    box-shadow: 1px 1px 10px 2px #00000029;
    background: #000;
    transition: .2s ease-in-out .3s;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(4) a {
    transition: .3s ease-in-out .4s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(5) a {
    transition: .5s ease-in-out .6s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(6) a {
    transition: .6s ease-in-out .7s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul:hover li:first-child a {
    transform: translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(2) a {
    transform: rotateZ(-60deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(3) a {
    transform: rotateZ(-120deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(4) a {
    transform: rotateZ(-180deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(5) a {
    transform: rotateZ(-240deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(6) a {
    transform: rotateZ(-300deg) translatex(60px)
}

.menu-bg {
    padding: 45px 0
}

.menu-bg ul {
    list-style: none;
    display: flex;
    flex-direction: column
}

.menu-bg ul li {
    text-decoration: none;
    padding: 15px 0
}

.menu-bg ul li a {
    text-transform: uppercase;
    font-weight: 700;
    padding: 20px 30px
}

.menu-bg ul li a:hover {
    color: #fff;
    transition: .5s;
    background: 0 0
}

.menu-bg .dropdown li a {
    color: #000;
    white-space: nowrap
}

.menu-bg-inner-tab a {
    font-weight: 700;
    padding: 5px 0 !important;
    text-decoration: none
}

.menu-us h9 {
    line-height: 80px;
    font-weight: bolder;
    padding: 20px 0
}

.menu-us h11 {
    color: #fff;
    font-weight: 500;
    padding: 8px 0;
    font-size: 18px;
    line-height: 22px
}

.menu-us a {
    text-decoration: none !important
}

.menu-us-btm a {
    font-size: 30px;
    color: #000
}

.services-eagle {
    animation: 5s ease-in-out infinite element-2;
    width: 20% !important;
    opacity: 0.2;
    position: absolute
}

@keyframes element-2 {

    0%,
    100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(40px)
    }
}

.our-services-bg .services-content {
    padding: 100px 0 180px 20px;
    position: relative
}

.our-services-bg .services-content h5 {
    margin: 0 0 30px;
    padding: 0 0 10px;
    text-transform: uppercase;
    font-size: 26px;
    font-weight: 700;
    border-bottom: 1px solid #c4171e;
    width: fit-content
}

.our-services-bg .services-content h4 {
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0 20px
}

.our-services-bg .owl-theme .owl-nav {
    margin-top: 11px;
    position: absolute;
    bottom: 5.5%;
    left: 3%;
    font-size: 30px
}

.main-services img {
    height: 700px !important;
    width: 1000px !important
}

.services-content p {
    width: 100%;
    height: 160px;
    overflow: scroll;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.services-content p::-webkit-scrollbar {
    display: none
}

.our-services-bg .owl-theme .owl-nav [class*=owl-]:hover,
.testimonial-bg .owl-theme .owl-nav [class*=owl-]:hover,
.we-serve-bg .owl-theme .owl-nav [class*=owl-]:hover {
    background: 0 0;
    color: #ed045b;
    text-decoration: none
}

.case-study-bg {
    background: url(../images/portfolio-after.webp);
    padding: 50px 0
}

.case-study-bg .case-study-inner,
.case-study-bg .view-study-inner {
    /* padding-left: 50px; */
}

.case-study-bg .case-study-inner .upper-text h7,
.testimonial-bg .testimonial-content h6 {
    text-transform: uppercase;
    color: #fff;
    font-size: 43px;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    width: fit-content;
    padding: 0 0 10px
}

.case-study-bg .case-study-inner .upper-text h1 {
    text-transform: uppercase;
    color: #000;
    width: fit-content;
    font-size: 45px;
    font-weight: 700;
    padding: 40px 0 20px;
    letter-spacing: -.99px
}

.banner-text-rotate-2 .card-content {
    position: relative;
    height: 230px;
    width: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

@keyframes rotateTxt {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.banner-text-rotate-2 .rotate-text svg {
    fill: currentColor;
    height: auto;
    transform-origin: center;
    width: 158px;
    transition: .5s;
    position: relative;
}

.banner-text-rotate-2 .rotate-text svg text {
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px
}

.case-study-bg .item-counter {
    position: relative;
    padding: 15px 30px 0 0
}

.case-study-bg .item-counter li:first-child {
    position: relative;
    padding: 0 0 54px
}

.case-study-bg .item-counter li:first-child::before {
    position: absolute;
    content: "";
    background-color: #002664;
    width: 3px;
    height: 47px;
    bottom: 0;
    left: 4px
}

.case-study-bg .item-counter li {
    color: #fff;
    font-size: 12px;
    list-style: none
}

.case-study-bg .view-case-img {
    background-color: transparent;
    border-radius: 10px;
    margin: 0 30px;
    position: relative
}

.view-case-content h5 {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 0 23px #00000073;
    opacity: 1;
    text-transform: uppercase
}

.case-study-bg .view-case-img img,
.industry-vide-sec video {
    border-radius: 10px
}

.view-case-content h14 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4.82px;
    color: #fff;
    text-shadow: 0 3px 12px #00000029;
    opacity: 1
}

.view-case-content {
    position: absolute;
    right: -135px;
    top: 199px
}

.testimonial-content {
    background: no-repeat padding-box #002664;
    padding: 50px 60px;
    border-radius: 15px
}

.testimonial-bg .testimonial-content h2 {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -.99px;
    color: #ed045b;
    padding: 35px 0 0
}

.testimonial-bg .testimonial-content h5 {
    letter-spacing: -.3px;
    color: #fff;
    opacity: 1;
    font-size: 22px;
    padding: 10px 0 0
}

.main-popup-content ul,
.portfolio-item li,
.testimonial-content ul li {
    list-style: none
}

.testimonial-content ul li a {
    color: #fff;
    padding: 0 0 0 5px;
    font-size: 10px
}

.testimonial-content p {
    font-size: 18px;
    letter-spacing: -.3px;
    color: #cbc4c4;
    height: 175px;
    overflow: hidden;
    padding: 10px 0 30px
}

.testimonial-bg .owl-nav {
    position: absolute;
    bottom: 0;
    left: 39%;
    font-size: 25px;
    color: #fff
}

.testimonial-bg {
    padding: 120px 0 20px
}

.testimonial-i-img img {
    width: 52%;
    z-index: 2;
    position: relative;
    right: -50px;
    top: -50px
}

.sec-paqs {
    background-color: #000;
    padding: 55px 0
}

.sec-paqs .sec-title {
    text-align: -webkit-center
}

.sec-paqs .head-border h3,
.sec-paqs .sec-title h3,
.sec-paqs .sec-title h7 {
    font-weight: 400;
    font-size: 26px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 2px;
    position: relative
}

.sec-paqs .sec-title h7::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 80px;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .sec-title h3::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 30%;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .head-border h3::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 32%;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .title-border h3::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 22%;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .sec-title h4 {
    font-size: 45px;
    color: #ed045b;
    line-height: 52px;
    padding-top: 11px;
    text-transform: uppercase;
    font-weight: 700
}

.sec-paqs .sec-title h4 span {
    color: #ed045b;
    display: block
}

.checklist,
.sec-paqs .faqs-box {
    padding: 30px 0
}

.sec-paqs .faqs-box .faqs-2 {
    padding-left: 100px
}

.sec-paqs .faqs-box .accordion-item {
    background-color: transparent;
    border: none;
    margin: 0 0 16px
}

.sec-paqs .faqs-box .accordion-item .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: transparent;
    box-shadow: unset;
    width: 100%;
    border-bottom: 1px solid #ed045b
}

.sec-paqs .faqs-box .accordion-item .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem .25rem;
    font-size: 21px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    background-color: transparent;
    border-bottom: 2px solid #ffffff36;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s
}

.sec-paqs .faqs-box .accordion-item .accordion-button:focus {
    border-width: 0 0 2px;
    border-color: #ed045b;
    border-style: solid;
    box-shadow: none
}

.sec-paqs .faqs-box .accordion-item .accordion-button::after {
    content: "\f0dd";
    font-family: "Font Awesome 6 Pro";
    background-image: none;
    font-weight: 700
}

.sec-paqs .faqs-box .accordion-item .accordion-body {
    padding: 1rem 1.25rem;
    color: #cbcaca;
    font-size: 20px
}

section.contactsec {
    padding: 50px 50px 50px 0;
    position: relative;
    background-position: center center;
    background-size: cover;
    z-index: 0;
}

.price-filter {
    padding: 27px 0 22px
}

.contacttext {
    padding: 0 42px 0vw;
}

.contacttext p {
    padding-top: 69px;
    color: #fff;
    font-size: 20px;
    line-height: 45px;
    font-weight: 400;
    width: 75%
}

section.contactsec:before {
    content: "";
    background: #4265cc;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 36%;
    background-size: contain;
    z-index: -1;
    height: 100%;
    background-position: center center
}

.contacttext h4 {
    color: #fff;
    font-size: 45px;
    line-height: 70px;
    font-weight: 700
}

.contactlist {
    padding: 39px 0 32px;
}

.contactlist ul li p {
    color: #fff;
    font-size: 20px;
    line-height: 42px;
    font-weight: 400;
    width: 100%
}

.contactlist ul li a {
    color: #fff;
    font-size: 20px;
    line-height: 42px;
    font-weight: 400;
    text-decoration: none
}

.contactlist ul li {
    padding: 32px 0 0;
    width: 58%;
    list-style: none
}

.scroll-line-text,
.socailicon ul {
    display: flex
}

.socailicon ul li {
    font-size: 24px;
    margin: 0 .6vw;
    list-style: none
}

.contactinput label {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    margin: 6px 5px
}

.contactinput input,
.contactinput select {
    font-weight: 400;
    background-color: transparent;
    color: #060506;
    height: 50px
}

.contactinput input {
    font-size: 14px;
    line-height: 24px;
    border: 0;
    border-bottom: 1px solid #707070;
    border-radius: 0;
    margin-bottom: 1vw
}

.contactinput select {
    font-size: 17px;
    line-height: 20px;
    border: 0;
    border-bottom: 1px solid #707070;
    border-radius: 0
}

.contactinput i {
    position: absolute;
    bottom: 13px;
    color: #000000;
    right: 0;
    font-size: 26px
}

.form-button {
    border: 1px solid #000000;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    padding: 5px 9px;
    margin: 5px;
    border-radius: 10px;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    min-width: 20%;
    line-height: 25px;
    transition: .3s ease-in
}

.form-button-active,
.form-button:hover {
    background: #000000 !important;
    color: #fff !important
}

.contactinput .button-3 {
    background-color: #000;
    margin: 30px 0 0;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 14px 60px;
    border: 0;
    border-radius: 5px
}

.price-filter output {
    margin: 0 auto;
    display: table;
    color: #ed045b;
    font-size: 18px;
    font-weight: 400
}

.price-filter range-slider:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--track-height);
    border-radius: calc(var(--track-height)/ 2);
    background: linear-gradient(#e73f45, #e74148) 0/var(--value-percent, 0) 100% no-repeat #bebebe !important
}

.price-filter .thumb {
    background-color: #e7454c
}

.inp-rd,
nav {
    display: flex;
    justify-content: space-between
}

.inp-rd h6 {
    color: #bebebe;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500
}

.bg-footer {
    padding: 40px 0 0;
    background: url(../images/ft.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
}

.bg-footer .logo-img {
    filter: brightness(0) invert(1);
    width: 48%;
    display: block
}

.bg-footer .para {
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    line-height: 20px;
    width: 83%;
    padding-bottom: 20px
}

.bg-footer .social-link,
.contact-bg,
.customer-review-box p,
.nav_drpdown .dropdown,
.terms-bg p {
    padding: 10px 0
}

.bg-footer .social-link ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 20px
}

.bg-footer .payment-method ul li,
.bg-footer .social-link ul li {
    padding-right: 10px;
    list-style: none
}

.bg-footer .social-link ul li a {
    font-size: 14px;
    color: #fff
}

.bg-footer .social-link ul li .white-rec {
    background-color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 10px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bg-footer .social-link ul li .white-rec small {
    font-weight: 400;
    font-size: 10px;
    color: #000
}

.bg-footer .social-link ul li .white-rec small i {
    color: green
}

.bg-footer .social-link ul li .white-rec .review {
    padding-right: 20px
}

.bg-footer .payment-method h10 {
    font-weight: 500;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    padding-top: 10px
}

.bg-footer .footer-list h7,
.bg-footer .footer-list ul li a,
.bg-footer .lower-footer .lower-2 ul li a,
.bg-footer .news-letter .lets-talk h12,
.bg-footer .news-letter .lets-talk ul li a,
.bg-footer .news-letter h11,
.we-serve-bg .gray-box .para {
    font-weight: 400
}

.bg-footer .payment-method ul {
    display: flex;
    align-items: center;
    padding-top: 5px
}

.bg-footer .footer-list h7 {
    font-size: 26px;
    color: #ffffff;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.bg-footer .footer-list ul li {
    padding-top: 8px;
    list-style: none;
    font-size: 18px
}

.bg-footer .footer-list ul li a {
    font-size: 16px;
    color: #fff;
    transition: .5s;
    text-decoration: none
}

.bg-footer .footer-list ul li a:hover,
.bg-footer .lower-footer .lower-2 ul li a:hover,
.bg-footer .news-letter .lets-talk ul li a:hover {
    color: #7b7b7b
}

.bg-footer .news-letter {
    padding: 10px 30px 0
}

.bg-footer .news-letter h11 {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase
}

.bg-footer .news-letter .news-field {
    padding: 15px 0 0;
    position: relative
}

.news-letter-btn {
    background: 0 0;
    border: unset
}

.bg-footer .news-letter .news-field .input-news {
    padding: 8px 10px;
    margin: -2px 0 0;
    border-radius: 7px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    color: #000
}

.bg-footer .news-letter .news-field .input-news:focus {
    box-shadow: none
}

.bg-footer .news-letter .news-field .share-btn {
    position: absolute;
    top: 19px;
    right: 20px
}

.bg-footer .news-letter .news-field .share-btn a {
    color: #002664;
    font-size: 18px
}

.bg-footer .news-letter .lets-talk,
.portfolio-item {
    padding-top: 30px
}

.bg-footer .news-letter .lets-talk h12 {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase
}

.bg-footer .news-letter .lets-talk ul li {
    padding: 5px 0;
    border-bottom: 1px solid #ffffff59;
    list-style: none;
    text-decoration: none
}

.bg-footer .news-letter .lets-talk ul li a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    transition: .5s
}

.bg-footer .lower-footer {
    border-top: 1px solid #fff;
    margin-top: 30px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bg-footer .lower-footer .lower-2 ul {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bg-footer .lower-footer .lower-2 ul li {
    padding-right: 15px;
    list-style: none
}

.bg-footer .lower-footer .lower-2 ul li a {
    font-size: 14px;
    color: #fff;
    transition: .5s;
    text-decoration: none
}

.thank-you {
    border-radius: 1rem !important;
    width: 600px
}

.thank-you-model h4 {
    font-size: 45px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 2vw;
    color: #000;
    text-transform: uppercase
}

.pkg-details p small,
.thank-you-model p,
p.first-para {
    font-size: 19px;
}

.modal-dialog-centered {
    justify-content: center;
}

.thank-you-model {
    padding: 30px
}

.our-work-content h7,
.we-serve-content h7 {
    text-transform: uppercase;
    color: #000;
    font-size: 26px;
    font-weight: 700;
    border-bottom: 1px solid #ed045b;
    width: fit-content;
    padding: 0 0 10px
}

.we-serve-bg {
    letter-spacing: 1.33px;
    font-size: 26px;
    position: relative;
    margin: 6rem 0;
}

.we-serve-bg a {
    text-decoration: none;
    color: #000
}

.we-serve-content h4 {
    letter-spacing: -.99px;
    color: #000;
    font-size: 45px;
    font-weight: 700;
    padding: 1vw 0 2vw
}

.we-serve-bg .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    right: 0;
    top: -80px
}

.gray-box.firstbox {
    background-color: #f8d9da85
}

.gray-box.firstboxx {
    background-color: #00266442
}

.gray-box.eightbox,
.gray-box.thirdbox,
.slide-item.thirdbox {
    background-color: #f9f9f9
}

.gray-box.sixbox {
    background-color: #8fad8547
}

.gray-box.tenbox {
    background-color: #f6941f54
}

.gray-box.secondbox {
    background-color: #d5dbe442
}

.gray-box.fourthbox {
    background-color: #1e83c73b
}

.gray-box.sevenbox {
    background-color: #961cc11f
}

.gray-box.twlvebox {
    background-color: #a8739d29
}

.gray-box.elevenbox {
    background-color: #d1c52724
}

.we-serve-bg .gray-box i:hover,
.we-serve-bg .gray-box:hover {
    background-color: #e53a41;
    color: #fff
}

.we-serve-bg .gray-box i:hover {
    background-color: transparent !important
}

.we-serve-bg .gray-box .icon-img img {
    width: 60px
}

.we-serve-bg .gray-box h7 {
    font-weight: 500;
    font-size: 26px;
    color: #000;
    padding: 1.2vw 0 1vw
}

.we-serve-bg .gray-box .para {
    font-size: 16px;
    color: #434242;
    margin-top: 8px
}

.we-serve-bg .gray-box {
    border: 1px solid #ddd;
    padding: 25px 40px;
    margin: 24px;
    transition: .5s;
    height: 330px;
    border-radius: 13px;
    position: relative;
    line-height: normal
}

.contactbody {
    padding: 0 50px
}

.our-work-bg .screen {
    display: block;
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 30px 0 !important;
    border-radius: 20px;
    border: 1px solid #ddd
}

.our-work-bg .screen img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0
}

.mega-pkg-bg .pkg-details h6,
.ptf-head h2 {
    text-transform: uppercase;
    padding: 0 0 10px;
    font-weight: 700
}

.ptf-head h2 {
    margin: 0 auto;
    color: #000;
    font-size: 26px;
    border-bottom: 1px solid #ed045b;
    width: 16%
}

.ptf-head p {
    padding: 20px 0 0
}

.our-work-content h4 {
    font-size: 45px;
    color: #ed045b;
    line-height: 70px;
    padding-top: 2.5vw;
    text-transform: uppercase;
    font-weight: 700
}

.our-work-content {
    padding: 0 60px 60px 0
}

.our-work-bg-2 .screen {
    height: 350px !important
}

.our-work-inner-2 img {
    padding: 28px 0;
    object-position: top;
}

.mega-pkg-bg h4 {
    letter-spacing: -.99px;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 0;
    text-align: center;
}

.mega-pkg-bg .mega-pkg-head ul li button {
    letter-spacing: -.39px;
    color: #a2a0a0;
    font-size: 22px;
    font-weight: 700;
}

.mega-pkg-bg .mega-pkg-head ul li button:hover {
    color: #6b79cf;
}

.mega-pkg-head .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
}

.mega-pkg-head-inner .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #000 !important;
    border: 1px solid #000 !important
}

.mega-pkg-bg .mega-pkg-head-inner ul li button,
.pkg-head-child ul li button {
    letter-spacing: -.39px;
    color: #000;
    font-size: 15px;
    border: 1px solid #000;
    margin: 8px;
    width: 180px
}

.mega-pkg-bg .mega-pkg-head-inner ul#pills-tab {
    white-space: nowrap;
    padding: 18px 0;
    list-style: none;
    display: flex
}

.mega-pkg-bg .pkg-head-child ul li button {
    letter-spacing: -.39px;
    color: #000;
    font-size: 16px;
    border: 2px solid #000;
    margin: 8px;
    text-transform: uppercase;
    width: 180px;
    font-weight: 400
}

.mega-pkg-bg .pkg-head-child .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff !important;
    background: linear-gradient(#ed045b, #ef585e);
    border: 1px solid transparent;
    font-weight: 700
}

.mega-pkg-bg .pkg-details h6 {
    color: #000;
    font-size: 40px;
    border-bottom: 1px solid #002664;
    width: fit-content;
    letter-spacing: -.69px
}

.employebenfit h5:before,
.howweworktext h5:before {
    position: absolute;
    border-bottom: 1px solid #ed045b;
    bottom: -8px;
    content: ""
}

.pkg-details p {
    font-size: 50px;
    letter-spacing: -.69px;
    color: #ed045b;
    font-weight: 700
}

.employebenfit h5,
.employebenfit p,
.howweworktext h5 {
    color: #000;
    letter-spacing: -1px
}

.pkg-head-child-tab-content {
    background-color: #d5dbe442;
    padding: 30px;
    margin: 40px 0 0;
    border: 1px solid #ddd;
    border-radius: 6px
}

.pkg-details-inner ul li {
    list-style: none;
    padding: 7px 0;
    display: flex;
    font-size: 20px
}

.pkg-details-inner ul {
    padding: 10px 10px 20px
}

.pkg-details-inner .main-scroller {
    overflow-x: scroll;
    height: 100%;
    overflow-y: hidden;
    padding: 16px
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
    background: #ed045b
}

.border_red,
.border_red_d {
    border-right: 1px solid #ed045b;
    height: 70%
}

.pkg-details-inner ul li img {
    padding: 8px 10px 0 0;
    height: 22px
}

.customer-review-bg,
.employee-bg,
.employee-inner,
.testimonials-bg,
section.howweworksec {
    padding: 50px 0
}

.howweworktext h5 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
    margin: 0 0 35px;
    position: relative
}

.howweworktext h5:before {
    width: 15%;
    margin: 0 auto;
    display: table;
    left: 0;
    right: 0
}

.howweworktext h3 {
    font-size: 45px;
    line-height: 68px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 4vw
}

.employebenfit h5 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    margin: 0 0 60px;
    position: relative
}

.employebenfit h5:before {
    width: 25%;
    margin: 0;
    display: table;
    left: 0;
    right: 0
}

.employebenfit h3 {
    font-size: 50px;
    line-height: 55px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 20px
}

.employebenfit p {
    font-size: 20px;
    line-height: 32px;
    max-width: 580px;
    margin-bottom: 30px
}

.employebenfit h4 {
    font-size: 23px;
    line-height: 32px;
    color: #002664
}

.workimg {
    display: flex;
    margin-bottom: 10px;
    min-height: 70px;
    flex-direction: row;
    align-items: center
}

.workcard {
    display: flex;
    align-items: baseline
}

.border_red_d {
    border-left: 1px solid #ed045b
}

.workimg h4 {
    color: #002664;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500
}

.workcard img,
.workimg img {
    margin: 0 9px 0 0;
    object-fit: contain
}

.workbox {
    padding: 0 21px 40px 30px
}

.workbody p {
    color: #434242;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500
}

.our-cilents-bg h2,
.our-culture-bg h2 {
    color: #000;
    font-size: 45px;
    font-weight: 700
}

.our-culture-bg {
    padding: 120px 0 200px;
    position: relative
}

.our-culture-bg h2 {
    letter-spacing: -.99px;
    padding: 42px 0 0 30px
}

.our-culture-bg .culture_slide {
    padding: 30px 20px;
    border: 2px solid #ed045b;
    border-radius: 15px
}

.our-culture-bg .culture_slide h4 {
    font-size: 45px;
    line-height: 68px;
    font-weight: 700;
    color: #ed045b;
    margin-bottom: 1vw
}

.our-culture-bg .culture_slide h5 {
    font-size: 26px;
    line-height: 34px;
    color: #002664;
    height: 80px
}

.our-culture-bg .culture_slide p {
    font-size: 16px;
    line-height: 26px;
    color: #434242;
    height: 140px;
    overflow-y: scroll
}

.our-culture-bg .owl-theme .owl-nav {
    margin-top: 2.5vw;
    position: absolute;
    left: -35.5%;
    top: 200px;
    font-size: 22px;
    color: #ed045b
}

.our-culture-bg .owl-theme .owl-nav [class*=owl-]:hover,
.our-work-carousel-careers .owl-nav [class*=owl-]:hover,
.our-work-carousel-careers-2 .owl-nav [class*=owl-]:hover {
    background: 0 0;
    color: #002664;
    text-decoration: none
}

.our-work-carousel-careers .owl-nav {
    margin-top: 2.5vw;
    position: absolute;
    left: 50%;
    top: -74px;
    font-size: 22px;
    color: #ed045b
}

.our-work-carousel-careers-2 .owl-nav {
    margin-top: 2.5vw;
    position: absolute;
    left: 50%;
    top: 266px;
    font-size: 22px;
    color: #ed045b
}

.our-cilents-bg {
    padding: 0;
    margin: 70px 0
}

.our-cilents-inner img {
    width: 150px !important;
    margin: 0 auto
}

.our-cilents-bg h2 {
    line-height: 70px;
    padding: 25px 0
}

.our-cilents-bg span {
    color: #ed045b !important
}

.about-company-bg .bestwebdesignsec,
.inner-case-study-carousel-bg,
.teams_cards {
    padding: 100px 0
}

.about-company-bg h5 {
    color: #000;
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    margin: 0 0 35px;
    position: relative;
    letter-spacing: -1px
}

.abouthead h3,
.abouttext h2,
.abouttext h3,
.sec-tab h2,
.tab-cont h3 {
    margin: 0 0 1vw;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -1px
}

.abouttext p {
    color: #000;
    max-width: 580px
}

.whowetext {
    display: flex;
    flex-direction: column
}

.whowetext ul {
    order: 1
}

.about-company-bg h5:before,
.about-cont h2:before,
.abouttext h5:before,
.tab-cont h2:before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #ed045b;
    width: 15%;
    bottom: -8px
}

.abouttext h2,
.sec-tab h2,
.tab-cont h3 {
    font-size: 42px;
    line-height: 58px;
    font-weight: 700
}

.my-h3 {
    font-size: 35px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    margin: 0 0 2vw !important;
    color: #000 !important;
    text-transform: uppercase !important
}

.inf_item,
.inf_item_reverse {
    white-space: nowrap;
    font-size: 100px;
    word-spacing: 55px
}

.abouttext h3 {
    font-size: 45px;
    line-height: 60px;
    font-weight: 700
}

.abouttext {
    padding: 0 25px
}

.abouthead h3 {
    font-size: 40px;
    font-weight: 600;
    line-height: 40px
}

.aboutimg {
    padding: 0 10px
}

.aboutimg img {
    mix-blend-mode: multiply
}

.bestdesigntext h4 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 30px
}

.about-cont h2,
.about-cont h3,
.abouttext h5,
.tab-cont h2 {
    margin: 0 0 2vw;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    position: relative
}

.bestdesigntext h2 {
    font-size: 45px;
    font-weight: 700;
    line-height: 68px;
    color: #000;
    text-transform: uppercase
}

.abouthead h2 {
    color: #000;
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 1px
}

.about-cont h2,
.abouttext h5,
.tab-cont h2 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 500
}

.about-cont h3 {
    font-size: 35px;
    line-height: 40px;
    font-weight: 700
}

.aboutsec {
    padding: 3vw 0;
}

.aboutpadding {
    padding: 2vw 0
}

.aboutsec ul {
    padding: 5px 0 0 0;
    margin: 0 10px;
}

.aboutsec ul li {
    color: #838181;
    list-style: none;
    font-size: 16px;
    padding: 9px;
    margin: 0;
    border-radius: 10px;
    list-style: circle;
}

.aboutsec ul li b {
    display: block;
    color: #002664;
    font-size: 14px;
    margin: 4px 0;
}

.branding-tabs-2 li button,
.video_tabs {
    letter-spacing: -.39px
}

.awards-content h2 {
    font-size: 45px;
    font-weight: 700;
    color: #000;
    padding: 0 0 2vw
}

.awards-bg img {
    width: 160px
}

.awards-bg .item img {
    width: auto;
    margin: auto;
    height: 90px
}

section.awards-bg {
    padding: 2vw 0 5vw
}

.branding-carousel a {
    display: flex;
    align-content: center
}

.number-counter {
    padding: 80px 0
}

.counter-card {
    border-radius: 9%;
    padding: 55px 45px 39px;
    background: #fff;
    margin: 10px;
    box-shadow: 0 0 5px 1px #434242
}

.number-counter span {
    font: bold 66px/40px Neue Montreal;
    letter-spacing: -.99px;
    color: #e7383f
}

.number-counter h2 {
    letter-spacing: -.45px;
    color: #434242;
    font-size: 17px;
    padding: 10px 0;
    font-weight: 500
}

.your-story-bg h2,
.your-story-bg h3 {
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff
}

.your-story-bg h2 {
    padding: 19px 0 31px;
}

.your-story-bg h3 {
    padding: 19px 0 0
}

.your-story-bg p {
    color: #fff;
    font-size: 18px
}

.your-story-content h2,
.your-story-content h4 {
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase
}

.your-story-bg .nav-item button {
    background-color: #1e1c1c;
    margin: 15px 28px;
    box-shadow: 0 0 0 5px #544f4f69;
    border-radius: 10px;
    height: 75px;
    width: 85px;
    padding: 10px
}

.your-story-bg .nav-item img {
    width: 55px
}

.nav-pills .show>.nav-link,
.your-story-bg .nav-pills .nav-link.active {
    background-color: #fff;
    border-radius: 10px;
    height: 75px
}

.your-story-content h2 {
    font-size: 55px;
    padding: 100px 0 50px
}

.your-story-content h4 {
    font-size: 35px;
    padding: 20px 0 30px
}

.your-story-content p {
    padding: 0 70px
}

.inf-scroll {
    animation: 50s linear infinite marquee
}

.inf_item {
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: #000
}

.inf_item a {
    word-spacing: 15px
}

.inf_item a:hover {
    color: #000
}

@keyframes marquee {
    0% {
        transform: translateX(0) translateZ(0)
    }

    100% {
        transform: translateX(-445%) translateZ(0)
    }
}

.inf-scroll-reverse {
    animation: 50s linear infinite marquee-reverse
}

.inf_item_reverse {
    font-weight: 700;
    text-transform: uppercase
}

.ticker_item,
.ticker_item-reverse {
    font-size: 75px;
    font-weight: 700;
    text-transform: uppercase
}

.inf_item_reverse a {
    word-spacing: 15px;
    color: rgb(227 27 35 / 85%) !important
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(-445%) translateZ(0)
    }

    100% {
        transform: translateX(0) translateZ(0)
    }
}

@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes ticker-reverse {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    height: 5rem;
    background-color: transparent;
    padding-left: 70%
}

.ticker,
.ticker-reverse {
    height: 4rem;
    line-height: 4rem;
    padding-right: 100%;
    display: inline-block;
    white-space: nowrap
}

.ticker-reverse {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker-reverse;
    animation-name: ticker-reverse;
    -webkit-animation-duration: 25s;
    animation-duration: 38s
}

.ticker {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 15s;
    animation-duration: 28s
}

.ticker_item-reverse {
    display: inline-block;
    color: #ed045b
}

.ticker_item {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 4px #000
}

.branding-tabs li button {
    letter-spacing: -.39px;
    color: #000 !important;
    font-size: 16px;
    border: 2px solid #000 !important;
    margin: 8px;
    width: 169px;
    text-transform: capitalize;
    background-color: #ed045b
}

.branding-tabs-2 li button,
.branding-tabs-4 li button {
    color: #000 !important;
    font-size: 16px;
    border: 1px solid #000 !important;
    margin: 8px;
    width: 247px;
    text-transform: capitalize;
    background-color: #ed045b
}

.branding-tabs-4 li button {
    letter-spacing: -.1px
}

.branding-tabs-3 li button,
.branding-tabs-5 li button {
    font-size: 14px;
    border: 1px solid #000 !important;
    margin: 8px;
    text-align: left;
    text-transform: uppercase !important;
    padding: 12px 18px;
    background-color: #000 !important;
    font-weight: 700;
    color: #fff !important
}

.branding-tabs-3 li button img,
.branding-tabs-5 li button img {
    margin-right: 20px
}

.branding-tabs-3 li button {
    width: 250px
}

.branding-tabs .nav-link.active,
.branding-tabs-3 .nav-link.active,
.branding-tabs-5 .nav-link.active {
    color: #fff !important;
    background-color: #ed045b !important;
    border: 1px solid #ed045b !important
}

.branding-tabs-5 li button {
    width: 537px
}

.main-case-study {
    padding: 100px 0;
    position: relative
}

.main-case-study .view-case-img {
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.main-case-study-content {
    position: absolute;
    top: 265px;
    left: 13%;
    overflow: hidden
}

.main-case-study-content h2,
.main-case-study-content h6 {
    text-align: start;
    color: #fff;
    font-weight: 700
}

.main-case-study-content h2 {
    font-size: 50px
}

section.techies-bg {
    padding: 130px 0 20px
}

.employee-inner ul {
    overflow-x: scroll
}

.employee-inner h5 {
    color: #ed045b;
    text-transform: uppercase;
    font-weight: 600
}

.employee-inner h2,
.employee-inner h6,
.main-popup-content h5 {
    color: #002664;
    text-transform: uppercase
}

.employee-inner h6 {
    font-weight: 700
}

.employee-inner h2 {
    font-weight: 600
}

.main-popup-1 .btn-close {
    color: #fff !important;
    background-color: #ed045b;
    box-shadow: 1px 1px 10px 2px #000000bf
}

.main-popup-1 .main-popup-1-inner {
    padding: 50px
}

.main-popup-content h2 {
    font-size: 40px;
    font-weight: 700;
    padding: 0 0 20px;
    text-transform: uppercase
}

.main-popup-content h5 {
    font-weight: 700
}

.main-popup-content p {
    color: #000;
    padding: 20px 0
}

.main-popup-content ul li {
    padding: 14px 0;
    display: flex
}

.main-popup-content ul li img {
    height: 15px;
    margin: 7px 5px 0 0
}

.contact-bg .contact-img-1 {
    animation: 2s ease-in-out infinite element-3;
    width: 18% !important;
    position: absolute;
    margin: 0
}

.contact-bg .contact-img-2 {
    position: relative;
    max-height: 500px;
    width: 70%;
    object-fit: contain
}

.mbl-img-1 {
    width: 250px !important;
    height: 500px !important
}

.mbl-img-2 {
    width: 200px !important;
    height: 400px !important
}

.mbl-img-3 {
    width: 175px !important;
    height: 350px !important
}

.feebback-bg {
    padding: 40px 0 0
}

.feebback-bg h3 {
    font-size: 25px;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px
}

.feebback-bg h4 {
    font-weight: 700;
    font-size: 20px;
    color: #ed045b
}

.feebback-bg img {
    width: 50px;
    height: 50px;
    margin: 12px 10px 12px 0
}

.testimonial-cards .col-3 {
    background-color: #fff;
    box-shadow: 0 0 7px 1px #00000059;
    margin: 20px;
    border-radius: 13px
}

.testimonials-bg video {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    border-radius: 20px
}

.host-padding,
.testimonials-content {
    padding: 20px
}

.testimonials-content h2 {
    font-size: 20px;
    color: #000;
    font-weight: 700;
    line-height: 1;
    padding: 0 0 15px;
    text-align: center;
    text-transform: uppercase
}

.testimonials-content p {
    text-align: center;
    padding: 15px 0;
    height: 161px;
    overflow: scroll;
    overflow-x: hidden
}

.testimonials-content h5,
.testimonials-content h6 {
    color: #ed045b;
    text-align: center
}

.testimonials-bg .owl-theme .owl-nav {
    margin: 0 0 0 40px;
    font-size: 22px
}

.testimonials-bg .owl-theme .owl-nav [class*=owl-]:hover {
    background: #fff;
    color: #ed045b;
    text-decoration: none
}

.testimonial-video {
    display: flex;
    justify-content: center
}

.controls,
.portfolilist ul {
    justify-content: center
}

.customer-review-content h2 {
    font-size: 50px;
    font-weight: 700
}

.customer-review-box {
    padding: 30px;
    margin: 10px;
    height: 358px;
    box-shadow: 0 0 16px 7px #00000017
}

.tabbox ul li.portfoliobox,
.video_size {
    overflow: hidden;
    box-shadow: 0 0 20px 0 #00000021;
    animation: .5s forwards fadeIn
}

.customer-review-inner-1 {
    width: 80px;
    height: 80px
}

.aboutimg img,
.customer-review-inner-1 img,
.img-cont-sec-image iframe,
.img-cont-sec-image img {
    border-radius: 50px
}

.customer-review-inner h6 {
    padding: 20px 15px;
    color: #ed045b
}

.customer-review-inner-2 img {
    width: 180px !important;
    padding: 15px 0
}

.customer-review-2 p {
    height: 255px;
    overflow-y: scroll
}

.project-detail-bg {
    padding: 40px 0 80px
}

.project-detail-bg h3 {
    color: #002664;
    font-size: 28px;
    padding: 50px 0
}

.project-detail-bg h5 {
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
    color: #000
}

.project-detail-bg h1 {
    color: #002664;
    line-height: 57px;
    font-size: 45px;
    padding: 30px 0;
    font-weight: 700
}

.project-detail-bg p {
    color: #434242
}

.project-detail-bg ul li {
    list-style: none;
    font-size: 26px;
    color: #000;
    padding: 5px 0
}

.project-detail-bg ul {
    padding: 20px 0
}

.case-study-inner .thumb {
    width: 67%;
    height: 81vh;
    margin: 50px auto;
    perspective: 1000px
}

.case-study-inner .thumb a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)) 0 0/0, url("../images/case-study/mock/1.html") 0 0/cover;
    transform-style: preserve-3d;
    transition: .5s
}

.case-study-inner .thumb:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom
}

.case-study-inner .thumb a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom
}

.case-study-inner .thumb a span {
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px Montserrat;
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1
}

.case-study-inner .thumb a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, .5);
    transition: .5s;
    opacity: .15;
    transform: rotateX(95deg) translateZ(-80px) scale(.75);
    transform-origin: bottom
}

.case-study-inner .thumb:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, .5);
    transform: rotateX(0) translateZ(-60px) scale(.85)
}

.industry-img-zoom img {
    transition: .9s;
    width: 100%;
    margin: 100px auto;
    object-fit: contain;
    height: 100%
}

.industry-img-zoom img:hover {
    transform: scale(.7);
    transition: .9s
}

.industry-vide-sec {
    padding: 200px 0 100px
}

.meet-our-team-inner {
    position: absolute;
    top: 48%;
    padding: 0 auto
}

.meet-our-team-inner h4 {
    font-size: 45px;
    font-weight: 700;
    color: #fff
}

.case-study-content {
    padding: 30vh 0 52px;
    height: auto
}

.case-study-content h1 {
    font-size: 100px !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase
}

.case-services-provide,
.portfolio-section,
section.portfoliosec {
    padding: 150px 0
}

.case-services-provide .contact-img-1 {
    animation: 4s ease-in-out infinite element-3;
    width: 30%;
    position: absolute;
    margin: 0
}

.case-services-provide .contact-img-2 {
    animation: 3s ease-in-out infinite element-4;
    width: 60%;
    position: relative;
    left: 120px
}

@keyframes element-4 {

    0%,
    100% {
        transform: translatex(0)
    }

    50% {
        transform: translatex(40px)
    }
}

.case-services-provide .contact-img-3 {
    animation: 2s ease-in-out infinite element-5;
    width: 60%;
    position: relative;
    right: 90px
}

@keyframes element-5 {

    0%,
    100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(40px)
    }
}

.ellipse-bg .contact-img-1 {
    animation: 4s ease-in-out infinite element-3;
    width: 30% !important;
    position: absolute;
    margin: -190px 0 0
}

.portfolio-overlay::after,
.portfolio-overlay::before {
    width: 0;
    height: 0;
    border-width: 0;
    z-index: 3;
    position: absolute;
    content: ""
}

@keyframes element-3 {

    0%,
    100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(40px)
    }
}

.terms-bg h2 {
    color: #000;
    font-weight: 700;
    padding: 30px 0
}

.terms-bg h5 {
    color: #002664
}

.terms-bg ul li {
    list-style: none;
    padding: 8px 0;
    display: flex
}

.terms-bg ul li img {
    width: 35px;
    height: 25px;
    padding: 5px 5px 0 0
}

.control,
.portfolilist ul li a {
    font-size: 15px;
    margin: 5px;
    cursor: pointer;
    width: 200px
}

.control,
.portfolilist ul li {
    padding: 8px 10px
}

.portfolio-section h2 {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase
}

.control {
    color: #000;
    border: 1px solid #000;
    border-radius: 3px;
    -webkit-transition: 5s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    transition: .5s
}

.control:hover {
    background: #343a40
}

.mixitup-control-active,
.portfolilist ul li a.active {
    color: #fff;
    background: linear-gradient(#ed045b, #ef585e)
}

.fancybox-container button:focus {
    outline: 0;
    box-shadow: none
}

.pd {
    padding: 10px
}

.pd img {
    height: 180px;
    transition: .5s
}

.portfolio-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    transition: .5s;
    transform: scale(0)
}

.nav_drpdown2,
.nav_drpdown3 {
    background: 0 0 !important;
    opacity: 1;
    z-index: 999;
    border-radius: 5px;
    width: 400px
}

.portfolio-overlay a,
.portfolio-overlay p {
    position: relative;
    z-index: 4
}

.portfolio-overlay::before {
    left: 10%;
    top: 10%;
    transition: height 50ms 150ms
}

.portfolio-overlay::after {
    right: 10%;
    bottom: 10%;
    transition: width .1s .2s
}

.portfolio-item:hover .portfolio-overlay::before {
    width: 80%;
    height: 80%;
    border-top: 1px solid #50977f;
    border-right: 1px solid #50977f;
    transition: width .1s .3s, height .1s .5s
}

.portfolio-item:hover .portfolio-overlay::after {
    width: 80%;
    height: 80%;
    border-bottom: 1px solid #50977f;
    border-left: 1px solid #50977f;
    transition: width .1s .6s, height .1s .7s
}

.portfolio-item li:hover .portfolio-overlay {
    visibility: visible;
    transform: scale(1)
}

.portfolio-overlay .category {
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 500
}

.portfolio-overlay .magnify-icon {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #50977f;
    margin: 0 5px;
    cursor: pointer;
    display: inline-block;
    transition: .25s
}

.portfolio-scroll .screen,
.portfolio-scroll .screen-2,
.portfolio-scroll .screen-3,
.portfolio-scroll .screen-4 {
    margin: 30px 0 !important;
    border-radius: 20px;
    box-shadow: -3px 1px 8px 3px #00000030;
    width: 100%
}

.portfolio-overlay .magnify-icon:hover {
    background: #000
}

.portfolio-overlay .magnify-icon p span i {
    font-size: 15px;
    color: #fff;
    line-height: 40px;
    cursor: pointer
}

.portfolio-scroll .screen {
    display: block;
    height: 350px;
    overflow: hidden;
    position: relative
}

.portfolio-scroll .screen img {
    bottom: -1400px;
    width: 100%;
    height: auto;
    position: absolute;
    margin: 0;
    padding: 0;
    -webkit-transition: top 11s;
    -moz-transition: top 11s;
    -ms-transition: top 11s;
    -o-transition: top 11s
}

.portfolio-scroll .screen:hover img {
    bottom: 0;
    -webkit-transition: 11s;
    -moz-transition: 11s;
    -ms-transition: 11s;
    -o-transition: 11s;
    transition: 11s
}

.portfolio-scroll .screen-2 {
    height: 350px;
    overflow: hidden;
    transition: transform .3s
}

.portfolio-scroll .screen-2 img {
    width: 100%;
    height: 350px;
    margin: 0;
    padding: 0;
    transition: transform .3s
}

.portfolio-scroll .screen-2:hover img,
.portfolio-scroll .screen-3:hover img {
    transform: scale(1.2);
    border-radius: 25px
}

.portfolio-scroll .screen-3 {
    height: 600px;
    overflow: hidden;
    transition: transform .3s
}

.portfolio-scroll .screen-3 img {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    transition: transform .3s
}

.portfolio-scroll .screen-4 {
    height: 400px
}

.portfolio-scroll .screen-4 img {
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    transition: transform .3s
}

.portfolio-inner .screen-4 {
    margin: 20px 0
}

.aboutimg .aos-init.aos-animate {
    transform: translateX(0) !important
}

.aboutimg .tab-pane img {
    height: 562px;
    max-height: 100%
}

.nav_drpdown {
    position: relative;
    background: 0 0 !important;
    opacity: 1;
    z-index: 999;
    border-radius: 5px;
    padding: 0 !important
}

.nav_drpdown3 {
    position: absolute;
    top: 373px;
    left: 280px
}

.nav_drpdown2 {
    padding: 0 0 0 30px;
    position: absolute;
    top: 114px;
    left: 66%
}

@keyframes Leftbefore {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.Leftbefore {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    z-index: 0
}

.cursor,
.tabbox,
.video_size {
    display: none
}

.Leftbefore:before {
    width: 100%;
    will-change: transform;
    position: absolute;
    top: -5px;
    bottom: 0;
    left: 0;
    background-color: #000;
    content: "";
    z-index: 2;
    -webkit-transform: translate3d(101%, 0, 0);
    transform: translate3d(101%, 0, 0);
    height: 105%;
    -webkit-animation-duration: .8;
    animation-duration: 1.9s;
    -webkit-animation-name: Leftbefore;
    animation-name: Leftbefore
}

.portfolilist ul {
    display: flex;
    align-items: center;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto 3%
}

.tabbox ul,
.team_card ul {
    display: grid;
    gap: 25px;
    list-style: none;
    grid-area: auto
}

.portfolilist ul li a {
    color: #000;
    border: 1px solid #000;
    padding: 8px 10px;
    border-radius: 3px;
    -webkit-transition: 5s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    transition: .5s;
    text-decoration: none;
    display: block;
    text-align: center
}

.tabbox ul li.portfoliobox {
    position: relative;
    margin: 30px 0;
    border-radius: 20px;
    height: 320px;
    width: 100%;
    transform: inherit;
    transition: 1s;
    transform: scale(1.5);
    border: 2px solid #dbdbdb
}

.tabbox ul li.portfoliobox .cap-box {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    0;
    bottom: 30px;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-transition: .5s;
    transition: .5s
}

.tabbox ul li.portfoliobox .cap-box .quotebtnbox {
    position: relative;
    display: block;
    padding: 25px 35px;
    border-radius: 7px
}

.cta-back-1,
.cta-women,
.cursor,
.cursor::after {
    position: absolute
}

.tabbox ul li.portfoliobox .portfolioinnerbox:before {
    content: "";
    position: absolute;
    background-color: rgb(0 0 0 / 60%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .5s ease-in-out
}

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

.portfoliobox.cntr a img {
    object-position: center
}

.portfoliobox.cntr2 a img {
    object-position: left
}

.cntr2 {
    margin: 10px 0 !important;
    height: 260px !important;
    width: 100% !important
}

.item:hover .inner-box,
.tabbox ul li.portfoliobox:hover .portfolioinnerbox:before {
    opacity: 1
}

.tabbox ul li.portfoliobox:hover .cap-box {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

@keyframes fadeIn {
    100% {
        opacity: 1;
        transform: none
    }
}

.portfolilist.inner_tab-navs ul {
    display: flex;
    width: 100%;
    gap: 5px;
}

.portfolilist.inner_tab-navs ul li a {
    width: auto;
    white-space: nowrap;
    padding: 8px 15px;
    margin: 0
}

.portfolio-section .d-grid {
    gap: 25px
}

.industry_video-wrapper {
    overflow: hidden;
    height: 90vh;
    text-align: center
}

.industry_video.aos-init {
    transform: scale(1.5)
}

.industry_video.aos-init.aos-animate {
    transform: scale(1)
}

.industry-img-zoom {
    max-height: unset;
    width: 80%;
    overflow: hidden;
    margin: 0 auto
}

.h-88vh img {
    height: 88vh
}

.inner_case-detail-txt h3 {
    color: #000;
    font-size: 36px;
    padding: 40px 0 20px;
    font-weight: 700
}

.inner_case-detail-txt h5 {
    padding: 10px 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
    color: #000
}

.inner-case-study-carousel-bg .item {
    cursor: grab
}

.pt-150 {
    padding-top: 150px !important
}

.py-4 .container .row .fadeInLeft img {
    max-height: 400px;
    width: 100%;
    object-fit: contain
}

.cursor {
    border-radius: 50%;
    z-index: 9999999
}

.cursor::after {
    content: "drag";
    width: 110px;
    height: 105px;
    border: 2px solid #000;
    border-radius: 50%;
    opacity: 1;
    top: -33px;
    left: -38px;
    padding: 12px 0 4px;
    font-size: 0px;
    text-align: center
}

.pager__item {
    width: 100%;
    text-align: center;
    padding: 2px 4px;
    background-color: #1e1c1c;
    height: 1px;
    border-radius: 2px;
    margin: 0
}

.slick-active .pager__item {
    background: #fff
}

.nav-bar-number p {
    font-size: 11px;
    line-height: 10px
}

.resize_images img {
    height: 500px;
    object-fit: cover
}

.mobile-dev-page-carousel {
    object-fit: contain !important
}

.teams_card {
    padding: 0 50px 30px
}

.teams_card h2 {
    font-size: 45px;
    font-weight: 700;
    line-height: 68px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center
}

.teams_card p {
    color: #fff;
    margin-bottom: 30px;
    text-align: center
}

.team_card ul {
    grid-template-columns: auto auto auto auto
}

.team_card ul li.teambox {
    overflow: hidden;
    position: relative;
    margin: 30px 0 !important;
    border-radius: 20px;
    box-shadow: -3px 1px 8px 3px #00000030;
    height: 450px
}

.teambox img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 1;
    -webkit-transition: 1s;
    transition: 1s
}

.fast-food-page-carousal img {
    width: 40% !important
}

.video_size {
    margin: 30px 0;
    border-radius: 20px;
    transform: inherit;
    transition: 1s;
    transform: scale(1.5);
    border: 2px solid #dbdbdb
}

.video_tabs {
    background: 0 0;
    color: #000;
    font-size: 16px;
    border: 1px solid #000;
    margin: 8px;
    font-weight: 700;
    text-transform: uppercase;
    width: 180px;
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.inner-box,
.inner-box a {
    transition: .3s ease-out
}

.video_tabs:active,
.video_tabs:focus,
.video_tabs:target {
    color: #fff !important;
    background: linear-gradient(#ed045b, #ef585e);
    border: 1px solid transparent
}

.video_tabbing {
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.video_tabbing::-webkit-scrollbar {
    display: none
}

.noContent {
    color: #000 !important;
    background-color: transparent !important
}

.cta-women {
    width: 43%;
    left: 6%;
    bottom: 0;
    z-index: 99
}

.cta-box {
    background: #ed045b;
    border-radius: 9px;
    position: relative;
    padding: 50px 0;
    width: 91%;
    margin: 13rem 0 0
}

.cta-box-content {
    padding: 0 0 0 14%
}

.cta-box h1 {
    font-size: 50px;
    color: #fff;
    font-weight: 700
}

.cta-box h2 {
    font-size: 15px;
    color: #000;
    font-weight: 700
}

.cta-box p {
    font-size: 23px;
    color: #fff;
    font-weight: 500
}

.cta-back-1 {
    width: 10%;
    left: 31%;
    top: 0
}

.cta-back-2,
.cta-back-3 {
    width: 5%;
    left: 51%;
    position: absolute
}

.cta-back-2 {
    top: -4%
}

.cta-back-3 {
    top: 0
}

.cta-back-4 {
    width: 6%;
    top: 35%;
    right: 5%;
    position: absolute;
    animation-name: spin;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.cta-back-5 {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background: #ed045b;
    top: -7%;
    right: 19%;
    position: absolute;
    box-shadow: 1px 0 20px 20px #ed045b;
    -webkit-animation: .5s infinite alternate scrollDownAnimation
}

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

    to {
        transform: translateY(-10px)
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.sec-margin {
    margin: 7rem 0
}

.tab-btn {
    padding: 0 0 0 10px
}

.tabs-btn {
    width: 316px
}

.host-sec {
    padding: 20px 20px 40px;
    background-color: #fff;
    box-shadow: 0 1px 5px 7px #a1949461;
    border-radius: 20px
}

.host-sec img {
    width: 10%;
    object-fit: cover;
    padding-bottom: 10px
}

.host-row {
    margin-top: 30px;
    justify-content: center
}

.host-row div {
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center
}

.host-sec h3 {
    color: #002664;
    font-size: 22px;
    line-height: 20px;
    font-weight: 500
}

.host-sec p {
    margin-top: 5px;
    padding-top: 0
}

.web-cont h2 {
    font-weight: 600;
    font-size: 40px;
    margin-bottom: 20px;
    text-transform: uppercase
}

.hero_content h2,
.hero_content h4 {
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    text-transform: uppercase
}

.web-cont {
    margin-bottom: 60px
}

.banner-text-rotate-2 {
    position: absolute;
    right: 5%;
    top: 8%
}

.hero_background .row {
    justify-content: center;
    text-align: center;
    padding: 50px 0 0 30px
}

.hero_content h2 {
    font-size: 32px;
    padding: 35px 15px 15px
}

.hero_content h4 {
    font-size: 20px;
    padding: 15px
}

.hero_content p,
.img-cont-sec-content p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
    padding: 0 15px 15px
}

.social-media-icons {
    position: fixed;
    bottom: 100px;
    left: -30px
}

.hero_background {
    background-size: cover;
    background-repeat: no-repeat;
}

.hero_background .row .col .text {
    color: #d71921;
    font-size: 45px;
    border-radius: 10px;
    background-color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 15px;
    border: 2px solid #000
}

.img-cont-sec-content h5::after {
    content: ' ';
    width: 60%;
    display: block;
    border-bottom: 2px solid #ed045b;
    margin: 5px 0 0;
    margin: 10px auto 0;
}

.img-cont-sec-content h5 {
    color: #000;
    font-weight: 700;
    width: fit-content;
    text-transform: uppercase;
    margin: 0 0 13px;
    font-size: 25px
}

.img-cont-sec-content {
    padding: 0 90px 0 0
}

.img-cont-sec-content p {
    color: #000000b8;
    padding: 15px 0
}

.img-cont-sec-content h2,
.modal-body h5 {
    font-weight: 700;
    font-size: 45px
}

.section-padding3 {
    padding: 0 0 75px
}

.card-sec-border {
    border-right: 2px solid #ed045b;
    height: 70%;
    padding: 0 25px 0 0 !important
}

.client-box,
.inner-box,
.web-button {
    width: 100%;
    height: 100%
}

.workcard {
    display: flex;
    align-items: baseline;
    padding: 0 35px;
    margin: 20px 0
}

.workcard h4 {
    color: #002664;
    font-size: 26px;
    line-height: 34px;
    font-weight: 500;
    margin-bottom: 10px
}

.workcard p {
    color: #434242;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500
}

.your-story-bg {
    background: #ce034e;
    padding: 95px 100px;
    margin: 0
}

.faq h5::after {
    width: 100% !important
}

.client-box {
    position: absolute;
    top: 0;
    padding: 28px 0
}

.item:hover .inner-box a {
    transform: translateY(0);
    opacity: 1
}

.inner-box {
    background-color: #00000075;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    gap: 20px
}

.inner-box a {
    text-decoration: none;
    color: #fff;
    font-size: 22px;
    transform: translateY(100%);
    letter-spacing: 1.33px
}

.inner-box .btn-clr {
    background-color: #101c3d;
    box-shadow: inset 0 0 0 0 #101c3d;
    border-color: #101c3d
}

.banner-btn-2-slide:hover {
    box-shadow: inset 400px 0 0 0 #000;
    border-color: #000
}

.our-cilents-carousel .item {
    box-shadow: 0 0 18px 2px #0000001f;
    padding: 10px;
    margin: 15px 0;
    background: #fff
}

.web-button {
    position: absolute !important;
    top: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.img-cont-sec-content.left {
    padding: 0 0 0 90px
}

.mega-pkg-bg {
    padding: 5rem 0;
    background: url(../images/pattern-1.webp);
    color: #fff;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

.mega-pkg-bg h2 {
    margin: 0 0 1rem 0;
    color: #181515;
}

.mega-pkg-bg .crd_1 {
    background: #ffffff;
    padding: 2rem 2rem;
    border-radius: 12px;
    border: 2px solid #4664cb45;
    transition: all 0.2s ease-in;
    height: auto !important;
}

.mega-pkg-bg .crd_1.active {
    background: #d9ddebbf;
}

.mega-pkg-bg .crd_1:hover {
    background: #d9ddebbf;
}

.mega-pkg-bg .crd_1 h4 {}

.mega-pkg-bg .crd_1 h3 {
    text-align: center;
    font-weight: 800;
    font-size: 3rem;
    color: #396dd8;
    display: none;
}

.mega-pkg-bg .crd_1 p {
    font-size: 14px;
    text-align: center;
}

.mega-pkg-bg .crd_1 span {
    text-align: center;
    display: block;
    padding: 10px 0 0;
    color: #767070;
}

.mega-pkg-bg .crd_1 ul {
    background: #d9ddebbf;
    overflow-y: scroll;
    height: 270px;
    margin: 26px 0;
    padding: 12px 32px;
    border-radius: 5px;
}

.mega-pkg-bg .crd_1:hover li::after {
    transform: rotate(50deg);
}

.mega-pkg-bg .crd_1 li {
    list-style: none;
    line-height: 2.3;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    position: relative;
}

.mega-pkg-bg .crd_1 li::After {
    content: '';
    position: absolute;
    width: 23px;
    height: 23px;
    background: url(../images/check.webp) no-repeat;
    left: -26px;
    border-radius: 50%;
    background-position: 100% 100%;
    background-size: cover;
    top: 4px;
    transition: all 0.4s ease-in;
}

.mega-pkg-bg .crd_1 .btns {}

.mega-pkg-bg .crd_1 .btns button {
    width: 100%;
    display: block;
    border: none;
    margin: 10px 0;
}

.mega-pkg-bg .crd_1 .btns a {
    margin: 0;
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
}

@media screen and (min-width: 1500px) {
    .banner-content2 {
        padding: 47vh 0 52px !important
    }
}

@media screen and (min-width: 900px) {
    .inverse {
        order: 1;
        display: flex
    }
}

@media screen and (max-width: 900px) and (min-width:725px) {

    .inf_item,
    .inf_item_reverse {
        word-spacing: 15px
    }

    .navigation__bar {
        padding: 0 20px;
        height: 75px
    }

    h8 {
        font-size: 40px;
        font-weight: 700
    }

    .banner-text-rotate-2,
    .checklist,
    .display-small-hidden,
    .nav-bar-contact,
    .pkg-details h4 small,
    .scrol {
        display: none
    }

    a.company-logo img {
        width: 135px
    }

    .menu-gif {
        width: 25px !important
    }

    .aboutsec ul,
    .abouttext,
    .banner-btn,
    .banner-content,
    .contact-bg,
    .contactbody,
    .employee-bg,
    .number-counter,
    .our-cilents-bg,
    .teams_card,
    .type-text,
    section.techies-bg {
        padding: 0
    }

    .banner-text-rotate .rotate-text svg {
        width: 50px
    }

    .cta-btns {
        margin: 25% 0 0
    }

    .banner-btn-2 {
        padding: 10px 0;
        height: 40px;
        width: 220px;
        line-height: 20px
    }

    .banner-btn-1 {
        padding: 0;
        height: 40px;
        width: 220px
    }

    .banner-btn-3,
    .contactlist,
    .employee-inner,
    .our-services-bg .services-content,
    .pkg-details-inner ul {
        padding: 10px 0
    }

    .banner-btn a,
    .cta-box h2 {
        font-size: 10px !important;
    }

    .banner-btm-bg,
    .our-work-carousel,
    .we-serve-carousel-2:first-child {
        display: none !important
    }

    .our-services-bg .services-content h2 {
        font-size: 25px;
        padding: 0 0 20px
    }

    .our-services-bg .services-content h5 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        letter-spacing: 1px
    }

    .services-content p {
        width: 100%
    }

    .services-eagle {
        width: 100% !important
    }

    .our-services-bg .owl-theme .owl-nav {
        bottom: -6%;
        left: 3%;
        margin: 0 auto
    }

    .main-services {
        margin: 40px 0 !important
    }

    .case-study-bg .case-study-inner .upper-text h1 {
        font-size: 30px;
        padding: 20px 10px
    }

    .case-study-bg .case-study-inner .upper-text h6,
    .project-detail-bg ul li,
    .testimonial-bg .testimonial-content h6,
    .we-serve-content h6 {
        font-size: 15px;
        padding: 0
    }

    .case-study-bg .case-study-inner,
    .case-study-bg .view-study-inner {
        padding: 35px 0
    }

    .banner-text-rotate-2 .card-content {
        height: 120px;
        width: 100px
    }

    .view-case-content {
        right: -194px;
        left: 2px;
        top: 170px
    }

    .view-case-content h2 {
        font-size: 35px;
        letter-spacing: .03px
    }

    .banner-btn-3 {
        height: 40px;
        font-size: 12px !important;
        width: 139px;
        margin: 8px 0
    }

    .case-study-bg .item-counter {
        padding: 5px 0 0 5px
    }

    .banner-text-rotate-2 .rotate-text svg {
        width: 85px
    }

    .case-study-bg .view-case-img {
        margin: 0 0 0 10px;
        box-shadow: 0 0 0 0 #000000d9
    }

    .view-case-content h5 {
        font-size: 13px;
        padding: 4px 0
    }

    .testimonial-i-img img {
        width: 77% !important;
        right: 6%;
        top: 38px
    }

    .testimonial-bg {
        padding: 60px 0
    }

    .testimonial-bg .testimonial-content h2 {
        font-size: 20px;
        padding: 10px 0 0
    }

    .testimonial-content p {
        height: 255px;
        overflow: scroll;
        padding: 5px 0
    }

    .testimonial-content {
        background: no-repeat padding-box #002664;
        padding: 60px 25px 15px;
        height: 90vh
    }

    .testimonial-bg .owl-nav {
        bottom: 0;
        left: 33%
    }

    .mega-pkg-bg h2 {
        font-size: 30px;
        padding: 20px 0
    }

    .pkg-details h4 {
        font-size: 20px;
        font-weight: 500
    }

    .mega-pkg-bg .pkg-details h3 {
        font-size: 12px;
        letter-spacing: .31px
    }

    .mega-pkg-bg .pkg-head-child ul li button {
        width: 119px;
        justify-content: center
    }

    .sec-paqs {
        margin: 0 0 50px
    }

    .sec-paqs .faqs-box .accordion-item .accordion-body,
    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 14px
    }

    .pkg-details-inner ul li {
        font-size: small
    }

    .banner-btn-4,
    .banner-btn-5 {
        padding: 10px 0;
        height: 40px;
        width: 230px;
        font-size: 11px;
        margin: 20px 5px !important
    }

    .sec-paqs .sec-title h2 {
        font-size: 25px;
        line-height: 30px;
        padding-top: 20px
    }

    .number-counter h2,
    .our-work-content h6,
    .sec-paqs .sec-title h5 {
        font-size: 15px
    }

    .sec-paqs .faqs-box .faqs-2 {
        padding-left: 0
    }

    .we-serve-bg {
        padding: 10px;
        letter-spacing: 1.33px;
        font-size: 20px
    }

    .we-serve-content h2 {
        font-size: 22px;
        padding: 18px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        margin-top: 10px;
        position: absolute
    }

    .mega-pkg-bg .mega-pkg-head ul li button {
        letter-spacing: .61px;
        font-size: 13px
    }

    .mega-pkg-bg .mega-pkg-head .nav-link {
        display: flex;
        padding: .5rem
    }

    .our-work-bg .screen {
        width: 100%;
        height: 300px
    }

    .customer-review-bg,
    section.our-work-bg,
    section.our-work-bg-2 {
        padding: 0 0 50px
    }

    .our-work-content {
        margin: 24px 0 0;
        padding: 0;
        text-align: center !important
    }

    .meet-our-team-inner {
        top: 44%
    }

    .awards-content h2,
    .banner-content h4,
    .meet-our-team-inner h1 {
        font-size: 20px
    }

    section.contactsec:before {
        content: "";
        width: 100%
    }

    .contacttext,
    section.contactsec {
        padding: 10px
    }

    .contacttext h4 {
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        padding: 0 0 10px
    }

    .contactlist ul li,
    .contacttext p {
        padding: 0;
        width: 100%;
        text-align: center
    }

    .contacttext p {
        font-size: 16px;
        line-height: 27px
    }

    .contactlist ul li {
        list-style: none
    }

    .contactlist ul li p {
        font-size: 14px;
        line-height: 25px;
        width: 100%;
        text-align: center
    }

    .contactlist ul li a {
        font-size: 14px;
        text-align: center
    }

    .socailicon ul {
        justify-content: space-evenly;
        padding: 0 0 17px
    }

    .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f5efef;
        outline: 0;
        box-shadow: unset
    }

    .contactinput input::-webkit-input-placeholder {
        color: #f5efef
    }

    .contactinput input::-moz-placeholder {
        color: #f5efef
    }

    .contactinput input::-ms-placeholder {
        color: #f5efef
    }

    .contactinput input::placeholder {
        color: #f5efef
    }

    .contactinput i,
    .contactinput select {
        color: #f5efef
    }

    .contactinput option {
        color: red
    }

    .center-res {
        text-align: center
    }

    .center-res img {
        margin-bottom: 10px
    }

    .center-res p {
        width: 100% !important;
        font-size: 11px !important;
        text-align: left;
    }

    .bg-footer .row div:nth-child(0),
    .bg-footer .row div:nth-child(3) {
        order: 3
    }

    .aboutsec div:first-child,
    .bg-footer .row div:first-child {
        order: 1
    }

    .bg-footer .row div:nth-child(2) {
        order: 4
    }

    .aboutsec div:nth-child(0),
    .bg-footer .row div:nth-child(4) {
        order: 2
    }

    .bg-footer .row div:nth-child(5) {
        order: 5
    }

    .bg-footer .social-link ul {
        justify-content: center
    }

    .payment-method img {
        width: 75%
    }

    .bg-footer .footer-list h4 {
        font-size: 18px
    }

    .bg-footer .footer-list ul li a {
        font-size: 13px
    }

    .bg-footer .news-letter {
        padding: 30px 0 0;
        text-align: center
    }

    .abouttext p,
    .bg-footer .news-letter .lets-talk ul li a,
    .bg-footer .news-letter h5,
    .feebback-bg h4,
    .teams_card p {
        font-size: 16px
    }

    .bg-footer .lower-footer {
        border-top: none;
        margin-top: 5px;
        padding: 12px 0;
        display: block;
        text-align: center
    }

    .bg-footer .lower-footer .lower-1 {
        margin: 0 0 10px
    }

    .image-banner img {
        height: 60vh
    }

    .aboutsec,
    .industry-vide-sec,
    .inner-case-study-carousel-bg,
    .project-detail-bg,
    section.portfoliosec {
        padding: 25px 0
    }

    .industry_video-wrapper {
        height: 30vh
    }

    .banner-content h1 {
        font-size: 27px
    }

    .banner-content span {
        font-size: 19px;
        padding: 0 5px
    }

    .aboutsec .row {
        flex-direction: row
    }

    .abouttext h5 {
        font-size: 13px;
        margin: 9px 0
    }

    .abouttext h5:before {
        bottom: 3px
    }

    .abouttext h3 {
        font-size: 20px;
        line-height: 25px
    }

    .abouttext .banner-btn {
        margin: 15px 0
    }

    .inf_item {
        font-size: 0
    }

    .inf_item a,
    .inf_item_reverse a {
        font-size: 35px;
        word-spacing: 0px
    }

    .aboutsec ul li {
        width: 50%
    }

    .branding-tabs li button {
        font-size: 13px;
        width: 90%
    }

    .aboutimg .tab-pane img {
        height: auto
    }

    .workcard {
        display: flex;
        align-items: baseline;
        padding: 0;
        margin: 20px 0
    }

    .border_red {
        border-right: none
    }

    section.howweworksec {
        padding: 30px 0
    }

    .counter-card {
        border-radius: 9%;
        padding: 0;
        background: 0 0;
        margin: 10px;
        box-shadow: unset;
        text-align: center
    }

    .feebback-bg h3,
    .main-case-study-content h2,
    .number-counter span {
        font-size: 25px
    }

    .owl-carousel .owl-item img {
        width: 100%;
        margin: 0 0 0 29px
    }

    .resize_images img {
        height: 300px
    }

    .our-culture-bg {
        padding: 0;
        margin: 0 0 50px
    }

    .our-culture-bg h2 {
        letter-spacing: 1px;
        font-size: 25px;
        padding: 0 0 25px
    }

    .our-culture-bg .owl-theme .owl-nav {
        left: 40%;
        top: 96%
    }

    .our-culture-bg .culture_slide {
        padding: 10px;
        text-align: center;
        margin: 0 0 0 109px !important;
        width: 101%;
        height: 259px
    }

    .our-culture-bg .culture_slide h4 {
        font-size: 31px;
        line-height: 18px
    }

    .our-culture-bg .culture_slide h5 {
        font-size: 20px;
        line-height: 27px;
        height: auto
    }

    .our-culture-bg .culture_slide p {
        font-size: 16px;
        line-height: 25px;
        height: auto
    }

    .bestdesigntext h2 {
        font-size: 25px;
        line-height: 34px
    }

    .employee-inner p {
        padding: 0;
        margin: 0 0 20px
    }

    .teams_cards {
        padding: 20px 0
    }

    .teams_card h2 {
        font-size: 25px;
        line-height: 2px
    }

    .team_card ul li.teambox {
        margin: 5px 0 !important;
        height: auto
    }

    .tabbox ul li.portfoliobox {
        height: 240px;
        width: 300px
    }

    .portfoliobox a img {
        object-fit: cover;
        width: 100% !important;
        margin: 0 !important
    }

    .portfoliobox.cntr a img {
        object-position: center
    }

    .cntr2 {
        margin: 10px 0 !important;
        height: 240px !important;
        width: 300px !important
    }

    .portfoliobox.cntr2 a img {
        object-position: top;
        object-fit: fill
    }

    .testimonials-bg {
        padding: 50px 0
    }

    .testimonials-bg video {
        width: 96%;
        height: auto
    }

    .testimonials-content h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0
    }

    .testimonials-content {
        padding: 0 0 0 14px
    }

    .testimonials-content p {
        padding: 25px 0;
        height: 250px;
        overflow: scroll;
        overflow-x: hidden
    }

    .testimonials-bg .owl-theme .owl-nav {
        margin-top: 0
    }

    .customer-review-content h2 {
        font-size: 25px;
        padding: 0 0 25px
    }

    .menu-bg ul li a,
    .menu-us h1 {
        text-decoration: none;
        font-size: 20px
    }

    .menu-bg,
    .menu-us h1,
    .project-detail-bg ul {
        padding: 15px 0
    }

    .checklist label.btn.btn-outline-primary {
        font-size: 15px !important;
        padding: 5px 9px;
        border-radius: 10px;
        width: 45% !important;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-bg ul li a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 6px
    }

    .menu-us h1 {
        color: #000;
        font-weight: bolder
    }

    .navigation__menu {
        height: 100%;
        padding-right: 0;
        width: 100%
    }

    .navigation li {
        padding: 17px 80px 0 0
    }

    .menu-us h3 {
        padding: 20px 0;
        font-size: 18px
    }

    .case-study-bg {
        background: #1c1717;
        padding: 40px 0;
        height: 704px;
        margin: 40px 0
    }

    .case-study-bg .view-study-inner {
        padding: 0 0 170px !important
    }

    .row.services-reserve {
        flex-flow: column-reverse
    }

    .project-detail-bg h1 {
        line-height: 25px;
        font-size: 25px;
        padding: 20px 0
    }

    .project-detail-bg h5 {
        font-size: 16px;
        line-height: 26px
    }

    .h-88vh img {
        width: 100%;
        height: auto
    }

    .inner_case-detail-txt h3 {
        padding: 23px 0 0;
        font-size: 26px
    }

    .inner_case-detail-txt h5 {
        padding: 0;
        font-size: 17px
    }

    .inner-case-study-carousel-2 .px-5 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .banner-inner {
        margin: 140px 0 0
    }

    .pt-150 {
        padding-top: 25px !important
    }

    .bestdesigntext h4,
    .howweworktext h3 {
        font-size: 25px;
        line-height: 25px
    }

    .howweworktext h5 {
        font-size: 15px;
        margin: 0 0 8px
    }

    .howweworktext h5:before {
        width: 29%;
        bottom: 2px
    }

    .our-work-content h2 {
        font-size: 25px;
        padding: 0 0 28px;
        line-height: 25px
    }

    .our-work-bg .screen img {
        bottom: -640px !important
    }

    .our-work-carousel-careers .owl-nav {
        left: 44%;
        top: -35px
    }

    .our-cilents-bg h2 {
        font-size: 19px;
        line-height: 33px;
        padding: 25px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        bottom: -40px !important;
        right: 40% !important;
        top: 470px !important
    }

    .awards-bg img {
        width: 50%;
        margin: 0 auto
    }

    .industry-img-zoom img {
        margin: 50px auto
    }

    .main-case-study {
        padding: 50px 15px
    }

    .main-case-study-content {
        top: 40%;
        left: 7%
    }

    .case-study-content h1 {
        font-size: 25px !important
    }

    .case-study-content h3,
    .case-study-content h4 {
        font-size: 12px
    }

    .case-study-content {
        padding: 18px 0 0;
        height: 102px
    }

    .project-detail-bg h3 {
        color: #002664;
        font-size: 28px;
        padding: 10px 0
    }

    .case-services-provide .contact-img-2 {
        left: 0;
        top: 40px
    }

    .case-services-provide .contact-img-3 {
        right: 80px;
        top: -50px
    }

    .mbl-img-3 {
        width: 100px !important;
        height: 200px !important
    }

    .mbl-img-2 {
        width: 125px !important;
        height: 250px !important
    }

    .mbl-img-1 {
        width: 150px !important;
        height: 300px !important
    }

    .contactform {
        margin: 0
    }

    .feebback-bg {
        padding: 40px 0 0
    }

    .contact-bg .contact-img-1 {
        width: 24% !important;
        margin: 0 0 50px
    }

    .your-story-bg {
        margin: 50px 0 0
    }

    .your-story-bg .nav-item button {
        margin: 15px
    }

    .your-story-content h2 {
        font-size: 30px;
        padding: 0
    }

    .your-story-bg h2 {
        font-size: 25px;
        padding: 10px 0 20px
    }

    .portfolio-scroll .screen-2,
    .portfolio-scroll .screen-2 img,
    .portfolio-scroll .screen-3,
    .portfolio-scroll .screen-3 img {
        height: 100%
    }

    .portfolio-scroll .screen-3 {
        height: 100%;
        margin: 0
    }

    .portfolio-scroll .screen img {
        bottom: -390px
    }

    .portfolio-section .d-grid {
        grid-template-columns: auto;
        gap: 0
    }

    .portfolio-section {
        padding: 50px 0 0
    }

    .sec-margin {
        margin: 10rem 0 7rem !important
    }

    .cta-back-4 {
        width: 30% !important;
        top: -19% !important;
        right: 72% !important
    }

    .cta-back-5 {
        width: 40px !important;
        height: 39px !important;
        top: -23% !important;
        right: 8% !important
    }

    .cta-women {
        width: 45% !important;
        left: 29% !important;
        top: -41% !important;
        bottom: 0
    }

    .cta-box {
        padding: 70px 25px 25px !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important
    }

    .cta-box-content {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important
    }

    .cta-box h1 {
        font-size: 26px !important
    }

    .cta-box p {
        font-size: 18px !important
    }
}

@media screen and (max-width: 725px) and (min-width:577px) {

    .inf_item,
    .inf_item_reverse {
        word-spacing: 15px
    }

    .navigation__bar {
        padding: 0 20px;
        height: 75px
    }

    .cta-btns {
        margin: 20% 0 0
    }

    .header-btn {
        display: block
    }

    .banner-text-rotate-2,
    .checklist,
    .display-small-hidden,
    .nav-bar-contact,
    .pkg-details h4 small,
    .scrol {
        display: none
    }

    a.company-logo img {
        width: 135px
    }

    .menu-gif {
        width: 25px !important
    }

    .aboutsec ul,
    .abouttext,
    .banner-btn,
    .banner-content,
    .contactbody,
    .employee-bg,
    .number-counter,
    .our-cilents-bg,
    .teams_card,
    .type-text,
    section.our-work-bg,
    section.our-work-bg-2,
    section.techies-bg {
        padding: 0
    }

    .banner-text-rotate .rotate-text svg {
        width: 50px
    }

    .banner-btn-2 {
        padding: 10px 0;
        height: 40px;
        width: 220px;
        line-height: 20px
    }

    .banner-btn-1 {
        padding: 0;
        height: 40px;
        width: 220px
    }

    .banner-btn-3,
    .contactlist,
    .employee-inner,
    .our-services-bg .services-content,
    .pkg-details-inner ul {
        padding: 10px 0
    }

    .banner-btn a {
        font-size: 13px !important
    }

    .banner-btm-bg,
    .our-work-carousel,
    .we-serve-carousel-2:first-child {
        display: none !important
    }

    .our-services-bg .services-content h2 {
        font-size: 25px;
        padding: 0 0 20px
    }

    .our-services-bg .services-content h5 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        letter-spacing: 1px
    }

    .services-content p {
        width: 100%
    }

    .services-eagle {
        width: 100% !important
    }

    .our-services-bg .owl-theme .owl-nav {
        left: 3%;
        bottom: -7%;
        margin: 0 auto
    }

    .case-study-bg .case-study-inner .upper-text h1 {
        font-size: 30px;
        padding: 20px 10px
    }

    .case-study-bg .case-study-inner .upper-text h6,
    .project-detail-bg ul li,
    .testimonial-bg .testimonial-content h6,
    .we-serve-content h6 {
        font-size: 15px;
        padding: 0
    }

    .case-study-bg .case-study-inner,
    .case-study-bg .view-study-inner {
        padding: 35px 0
    }

    .banner-text-rotate-2 .card-content {
        height: 120px;
        width: 100px
    }

    .view-case-content {
        right: -194px;
        left: 2px;
        top: 170px
    }

    .view-case-content h2 {
        font-size: 35px;
        letter-spacing: .03px
    }

    .banner-btn-3 {
        height: 40px;
        font-size: 12px !important;
        width: 139px;
        margin: 8px 0
    }

    .case-study-bg .item-counter {
        padding: 5px 0 0 5px
    }

    .banner-text-rotate-2 .rotate-text svg {
        width: 85px
    }

    .case-study-bg .view-case-img {
        margin: 0 0 0 10px;
        box-shadow: 0 0 0 0 #000000d9
    }

    .view-case-content h5 {
        font-size: 13px;
        padding: 4px 0
    }

    .testimonial-i-img img {
        width: 25% !important;
        right: 36%;
        top: 50px
    }

    .testimonial-bg {
        padding: 60px 0
    }

    .testimonial-bg .testimonial-content h2 {
        font-size: 20px;
        padding: 10px 0 0
    }

    .testimonial-content p {
        height: 320px;
        padding: 5px 0
    }

    .testimonial-content {
        background: no-repeat padding-box #002664;
        padding: 60px 25px 15px;
        height: 83vh
    }

    .testimonial-bg .owl-nav {
        bottom: 0;
        left: 47%
    }

    .mega-pkg-bg h2 {
        font-size: 30px;
        padding: 20px 0
    }

    .pkg-details h4 {
        font-size: 20px;
        font-weight: 500
    }

    .mega-pkg-bg .pkg-details h3 {
        font-size: 12px;
        letter-spacing: .31px
    }

    .mega-pkg-bg .pkg-head-child ul li button {
        width: 119px;
        justify-content: center
    }

    .sec-paqs {
        margin: 0 0 50px
    }

    .sec-paqs .faqs-box .accordion-item .accordion-body,
    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 14px
    }

    .pkg-details-inner ul li {
        font-size: small
    }

    .banner-btn-4,
    .banner-btn-5 {
        padding: 10px 0;
        height: 40px;
        width: 230px;
        font-size: 11px;
        margin: 20px 5px !important
    }

    .sec-paqs .sec-title h2 {
        font-size: 25px;
        line-height: 30px;
        padding-top: 20px
    }

    .number-counter h2,
    .our-work-content h6,
    .sec-paqs .sec-title h5 {
        font-size: 15px
    }

    .sec-paqs .faqs-box .faqs-2 {
        padding-left: 0
    }

    .we-serve-bg {
        padding: 10px;
        letter-spacing: 1.33px;
        font-size: 20px
    }

    .we-serve-content h2 {
        font-size: 22px;
        padding: 18px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        margin-top: 10px;
        position: absolute
    }

    .mega-pkg-bg .mega-pkg-head ul li button {
        letter-spacing: .61px;
        font-size: 13px
    }

    .mega-pkg-bg .mega-pkg-head .nav-link {
        display: flex;
        padding: .5rem
    }

    .our-work-bg .screen {
        width: 85%;
        height: 300px
    }

    .our-work-content {
        margin: 24px 0 0;
        padding: 0;
        text-align: center !important
    }

    .meet-our-team-inner {
        top: 44%
    }

    .awards-content h2,
    .meet-our-team-inner h1 {
        font-size: 20px
    }

    section.contactsec:before {
        content: "";
        width: 100%
    }

    .contacttext,
    section.contactsec {
        padding: 10px
    }

    .contacttext h4 {
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        padding: 0 0 10px
    }

    .contactlist ul li,
    .contacttext p {
        padding: 0;
        width: 100%;
        text-align: center
    }

    .contacttext p {
        font-size: 16px;
        line-height: 27px
    }

    .contactlist ul li {
        list-style: none
    }

    .contactlist ul li p {
        font-size: 14px;
        line-height: 25px;
        width: 100%;
        text-align: center
    }

    .contactlist ul li a {
        font-size: 14px;
        text-align: center
    }

    .socailicon ul {
        justify-content: space-evenly;
        padding: 0 0 17px
    }

    .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f5efef;
        outline: 0;
        box-shadow: unset
    }

    .contactinput input::-webkit-input-placeholder {
        color: #f5efef
    }

    .contactinput input::-moz-placeholder {
        color: #f5efef
    }

    .contactinput input::-ms-placeholder {
        color: #f5efef
    }

    .contactinput input::placeholder {
        color: #f5efef
    }

    .contactinput i,
    .contactinput select {
        color: #f5efef
    }

    .contactinput option {
        color: red
    }

    .center-res {
        text-align: center
    }

    .center-res img {
        margin-bottom: 10px
    }

    .center-res p {
        width: 100% !important;
        font-size: 13px !important
    }

    .bg-footer .row div:nth-child(0),
    .bg-footer .row div:nth-child(3) {
        order: 3
    }

    .aboutsec div:first-child,
    .bg-footer .row div:first-child {
        order: 1
    }

    .bg-footer .row div:nth-child(2) {
        order: 4
    }

    .aboutsec div:nth-child(0),
    .bg-footer .row div:nth-child(4) {
        order: 2
    }

    .bg-footer .row div:nth-child(5) {
        order: 5
    }

    .bg-footer .social-link ul {
        justify-content: center
    }

    .payment-method img {
        width: 75%
    }

    .bg-footer .footer-list h4 {
        font-size: 18px
    }

    .bg-footer .footer-list ul li a {
        font-size: 13px
    }

    .bg-footer .news-letter {
        padding: 30px 0 0;
        text-align: center
    }

    .abouttext p,
    .banner-content h4,
    .bg-footer .news-letter .lets-talk ul li a,
    .bg-footer .news-letter h5,
    .feebback-bg h4,
    .teams_card p {
        font-size: 16px
    }

    .bg-footer .lower-footer {
        border-top: none;
        margin-top: 5px;
        padding: 12px 0;
        display: block;
        text-align: center
    }

    .bg-footer .lower-footer .lower-1 {
        margin: 0 0 10px
    }

    .image-banner img {
        height: 60vh
    }

    .aboutsec,
    .industry-vide-sec,
    .inner-case-study-carousel-bg,
    .project-detail-bg,
    section.portfoliosec {
        padding: 25px 0
    }

    .industry_video-wrapper {
        height: 30vh
    }

    .banner-content h1 {
        font-size: 27px
    }

    .banner-content span {
        font-size: 19px;
        padding: 0 5px
    }

    .aboutsec .row {
        flex-direction: row
    }

    .abouttext h5 {
        font-size: 13px;
        margin: 9px 0
    }

    .abouttext h5:before {
        bottom: 3px
    }

    .abouttext h3 {
        font-size: 20px;
        line-height: 25px
    }

    .abouttext .banner-btn {
        margin: 25px 0 0
    }

    .inf_item {
        font-size: 0
    }

    .inf_item a,
    .inf_item_reverse a {
        font-size: 35px;
        word-spacing: 0px
    }

    .aboutsec ul li {
        width: 50%
    }

    .branding-tabs li button {
        font-size: 13px;
        width: 90%
    }

    .aboutimg .tab-pane img {
        height: auto
    }

    .workcard {
        display: flex;
        align-items: baseline;
        padding: 0;
        margin: 20px 0
    }

    .border_red {
        border-right: none
    }

    section.howweworksec {
        padding: 30px 0
    }

    .counter-card {
        border-radius: 9%;
        padding: 0;
        background: 0 0;
        margin: 10px;
        box-shadow: unset;
        text-align: center
    }

    .feebback-bg h3,
    .main-case-study-content h2,
    .number-counter span {
        font-size: 25px
    }

    .owl-carousel .owl-item img {
        width: 85%;
        margin: 0 0 0 29px
    }

    .resize_images img {
        height: 300px
    }

    .our-culture-bg {
        padding: 0;
        margin: 0 0 50px
    }

    .our-culture-bg h2 {
        letter-spacing: 1px;
        font-size: 25px;
        padding: 0 0 25px
    }

    .our-culture-bg .owl-theme .owl-nav {
        left: 40%;
        top: 96%
    }

    .our-culture-bg .culture_slide {
        padding: 10px;
        text-align: center;
        margin: 0 0 0 109px !important;
        width: 101%;
        height: 259px
    }

    .our-culture-bg .culture_slide h4 {
        font-size: 31px;
        line-height: 18px
    }

    .our-culture-bg .culture_slide h5 {
        font-size: 20px;
        line-height: 27px;
        height: auto
    }

    .our-culture-bg .culture_slide p {
        font-size: 16px;
        line-height: 25px;
        height: auto
    }

    .bestdesigntext h2 {
        font-size: 25px;
        line-height: 34px
    }

    .employee-inner p {
        padding: 0;
        margin: 0 0 20px
    }

    .teams_cards {
        padding: 20px 0
    }

    .teams_card h2 {
        font-size: 25px;
        line-height: 2px
    }

    .team_card ul li.teambox {
        margin: 5px 0 !important;
        height: auto
    }

    .tabbox ul li.portfoliobox {
        height: 240px;
        width: 300px
    }

    .portfoliobox a img {
        object-fit: cover;
        width: 100% !important;
        margin: 0 !important
    }

    .portfoliobox.cntr a img {
        object-position: center
    }

    .cntr2 {
        margin: 10px 0 !important;
        height: 240px !important;
        width: 300px !important
    }

    .portfoliobox.cntr2 a img {
        object-position: top;
        object-fit: fill
    }

    .contact-bg,
    .testimonials-bg {
        padding: 50px 0
    }

    .testimonials-bg video {
        width: 96%;
        height: auto
    }

    .testimonials-content h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0
    }

    .testimonials-content {
        padding: 0 0 0 14px
    }

    .testimonials-content p {
        padding: 25px 0;
        height: 250px;
        overflow: scroll;
        overflow-x: hidden
    }

    .testimonials-bg .owl-theme .owl-nav {
        margin-top: 0
    }

    .customer-review-bg {
        padding: 0 0 50px
    }

    .customer-review-content h2 {
        font-size: 25px;
        padding: 0 0 25px
    }

    .menu-bg ul li a,
    .menu-us h1 {
        text-decoration: none;
        font-size: 20px
    }

    .menu-bg,
    .menu-us h1,
    .project-detail-bg ul {
        padding: 15px 0
    }

    .checklist label.btn.btn-outline-primary {
        font-size: 15px !important;
        padding: 5px 9px;
        border-radius: 10px;
        width: 45% !important;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-bg ul li a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 6px
    }

    .menu-us h1 {
        color: #000;
        font-weight: bolder
    }

    .navigation__menu {
        height: 100%;
        padding-right: 0;
        width: 100%
    }

    .navigation li {
        padding: 17px 80px 0 0
    }

    .menu-us h3 {
        padding: 20px 0;
        font-size: 18px
    }

    .case-study-bg {
        background: linear-gradient(#ed045b, #ed045ba3);
        padding: 40px 0;
        height: 108vh;
        margin: 40px 0
    }

    .case-study-bg .view-study-inner {
        padding: 0 0 170px !important
    }

    .row.services-reserve {
        flex-flow: column-reverse
    }

    .project-detail-bg h1 {
        line-height: 25px;
        font-size: 25px;
        padding: 20px 0
    }

    .project-detail-bg h5 {
        font-size: 16px;
        line-height: 26px
    }

    .h-88vh img {
        width: 100%;
        height: auto
    }

    .inner_case-detail-txt h3 {
        padding: 23px 0 0;
        font-size: 26px
    }

    .inner_case-detail-txt h5 {
        padding: 0;
        font-size: 17px
    }

    .inner-case-study-carousel-2 .px-5 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .banner-inner {
        margin: 140px 0 0
    }

    .pt-150 {
        padding-top: 25px !important
    }

    .bestdesigntext h4,
    .howweworktext h3 {
        font-size: 25px;
        line-height: 25px
    }

    .howweworktext h5 {
        font-size: 15px;
        margin: 0 0 8px
    }

    .howweworktext h5:before {
        width: 29%;
        bottom: 2px
    }

    .our-work-content h2 {
        font-size: 25px;
        padding: 0 0 28px;
        line-height: 25px
    }

    .our-work-bg .screen img {
        bottom: -640px !important
    }

    .our-work-carousel-careers .owl-nav {
        left: 44%;
        top: -35px
    }

    .our-cilents-bg h2 {
        font-size: 19px;
        line-height: 33px;
        padding: 25px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        bottom: -40px !important;
        right: 40% !important;
        top: 470px !important
    }

    .awards-bg img {
        width: 50%;
        margin: 0 auto
    }

    .industry-img-zoom img {
        margin: 50px auto
    }

    .main-case-study {
        padding: 50px 15px
    }

    .main-case-study-content {
        top: 40%;
        left: 7%
    }

    .case-study-content h1 {
        font-size: 25px !important
    }

    .case-study-content h3,
    .case-study-content h4 {
        font-size: 12px
    }

    .case-study-content {
        padding: 18px 0 0;
        height: 102px
    }

    .project-detail-bg h3 {
        color: #002664;
        font-size: 28px;
        padding: 10px 0
    }

    .case-services-provide .contact-img-2 {
        left: 0;
        top: 40px
    }

    .case-services-provide .contact-img-3 {
        right: 80px;
        top: -50px
    }

    .mbl-img-3 {
        width: 100px !important;
        height: 200px !important
    }

    .mbl-img-2 {
        width: 125px !important;
        height: 250px !important
    }

    .mbl-img-1 {
        width: 150px !important;
        height: 300px !important
    }

    .contactform {
        margin: 86px 0 0
    }

    .feebback-bg {
        padding: 40px 0 0
    }

    .contact-bg .contact-img-1 {
        width: 96% !important;
        margin: 0
    }

    .your-story-bg {
        margin: 50px 0 0
    }

    .your-story-bg .nav-item button {
        margin: 15px
    }

    .your-story-content h2 {
        font-size: 30px;
        padding: 0
    }

    .your-story-bg h2 {
        font-size: 25px;
        padding: 10px 0 20px
    }

    .portfolio-scroll .screen-2,
    .portfolio-scroll .screen-2 img,
    .portfolio-scroll .screen-3,
    .portfolio-scroll .screen-3 img {
        height: 100%
    }

    .portfolio-scroll .screen-3 {
        height: 100%;
        margin: 0
    }

    .portfolio-scroll .screen img {
        bottom: -390px
    }

    .portfolio-section .d-grid {
        grid-template-columns: auto;
        gap: 0
    }

    .portfolio-section {
        padding: 50px 0 0
    }
}

@media only screen and (max-width: 1500px) {

    .cta-box p,
    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 17px;
        line-height: 31px;
    }

    .main-case-study img {
        width: 80%
    }

    .we-serve-bg .gray-box {
        height: 350px
    }

    .testimonial-bg .owl-nav {
        bottom: 0
    }

    .image-banner img {
        height: 100vh
    }

    .banner-content h1 {
        font-size: 35px
    }

    .banner-content span {
        padding: 0 26px
    }

    .cta-back-5 {
        top: 0;
        right: 19%
    }

    .cta-back-3 {
        top: 10%
    }

    .cta-back-2 {
        top: 7%
    }

    .cta-back-4 {
        top: 35%;
        right: 3%
    }

    .cta-back-1 {
        top: 12%;
        left: 26%
    }

    .cta-women {
        left: 35px;
        bottom: 0
    }

    .cta-box {
        width: 85%
    }

    .cta-box h1 {
        font-size: 36px
    }

    .cta-box h2 {
        font-size: 13px
    }
}

@media only screen and (max-width: 576px) {

    h4,
    h7 {
        padding: 0 !important
    }

    .portfolio-section .d-grid,
    .tabbox ul,
    .team_card ul {
        grid-template-columns: auto
    }

    .pkg-details p,
    h1 {
        font-size: 30px
    }

    h4 {
        font-size: 17px !important;
    }

    h7 {
        font-size: 15px !important
    }

    .our-work-content h4 {
        line-height: 40px
    }

    .navigation__bar {
        padding: 0 20px;
        height: 75px
    }

    .my-dots-class {
        flex-wrap: wrap;
        top: -230px
    }

    .cta-btns,
    .header-btn,
    .nav-bar-contact,
    .our-services-bg video,
    .scrol {
        display: none
    }

    .my-dot-class {
        width: 160px
    }

    .extra-margin {
        margin-top: 260px
    }

    .my-dot-class:nth-child(5),
    .tabbox ul li.portfoliobox {
        width: 100%
    }

    .banner-content h1 {
        font-size: 20px;
        padding: 0
    }

    .abouttext h2 {
        font-size: 25px;
        text-align: left
    }

    .card-sec h2 {
        line-height: normal !important;
        margin: 10px 0 !important
    }

    .abouttext,
    .banner-content,
    .card-body,
    .card-sec p,
    .case-study-bg .case-study-inner .upper-text h7,
    .contactbody,
    .employee-bg,
    .img-cont-sec-content,
    .img-cont-sec-content.left,
    .nav_drpdown .dropdown,
    .number-counter,
    .our-cilents-bg,
    .our-services-bg .services-content,
    .teams_card,
    .type-text,
    .your-story-content p,
    section.our-work-bg,
    section.our-work-bg-2,
    section.techies-bg {
        padding: 0
    }

    .host-row div {
        margin: 0 0 25px;
        height: auto
    }

    .element-item,
    .paragraph li,
    .services-eagle {
        width: 100% !important
    }

    .banner-content p,
    .number-counter h2,
    .our-work-content h6,
    .sec-paqs .sec-title h5 {
        font-size: 15px
    }

    .typed-text {
        padding: 10px;
        font-size: 0px
    }

    h8 {
        font-size: 24px;
        font-weight: 700
    }

    .homepage-contact-btn {
        padding: 8px 4px 18px;
        font-size: 12px;
    }

    .services-content .homepage-contact-btn {
        margin: 0 0 0 6px
    }

    a.company-logo img {
        width: 135px
    }

    .menu-gif {
        width: 25px !important
    }

    .banner-btn {
        justify-content: start;
        padding: 0
    }

    .banner-text-rotate .rotate-text svg {
        width: 50px
    }

    .banner-btn-2 {
        padding: 10px 0;
        height: 40px;
        width: 220px;
        line-height: 20px
    }

    .banner-btn-1 {
        padding: 0;
        height: 40px;
        width: 220px
    }

    .banner-btn a,
    .cta-box h2 {
        font-size: 13px !important
    }

    .banner-btm-bg,
    .our-work-carousel,
    .we-serve-carousel-2:first-child {
        display: none !important
    }

    .fixed-cta {
        display: block;
        background: red;
    }

    .our-services-bg .services-content h2 {
        font-size: 25px;
        padding: 0 0 20px
    }

    .our-services-bg .services-content h5 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        letter-spacing: 1px
    }

    .services-content p {
        width: 100%;
        height: 260px;
        overflow: scroll;
        margin: 0 0 20px;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .services-content p::-webkit-scrollbar {
        display: none
    }

    .our-services-bg .owl-theme .owl-nav {
        bottom: -78px;
        left: 41%;
        margin: 0 auto
    }

    .case-study-bg .case-study-inner .upper-text h1 {
        font-size: 30px;
        padding: 20px 10px
    }

    .case-study-bg .case-study-inner .upper-text h6,
    .testimonial-bg .testimonial-content h6 {
        margin: 0 0 10px;
        font-size: 15px;
        padding: 0
    }

    .case-study-bg .case-study-inner,
    .case-study-bg .view-study-inner {
        padding: 35px 0
    }

    .banner-text-rotate-2 .card-content {
        height: 120px;
        width: 100px
    }

    .view-case-content {
        right: -194px;
        left: 2px;
        top: 170px
    }

    .view-case-content h2 {
        font-size: 35px;
        letter-spacing: .03px
    }

    .banner-btn-3 {
        padding: 10px 0;
        height: 40px;
        font-size: 12px !important;
        width: 185px;
        margin: 8px 0
    }

    .case-study-bg .item-counter {
        padding: 5px 0 0 5px
    }

    .banner-text-rotate-2 .rotate-text svg {
        width: 85px
    }

    .case-study-bg .view-case-img {
        margin: 0 0 0 10px;
        box-shadow: 0 0 0 0 #000000d9
    }

    .view-case-content h5 {
        font-size: 13px;
        padding: 4px 0
    }

    .testimonial-i-img img {
        width: 50% !important;
        right: 23%;
        top: 50px
    }

    .testimonial-bg,
    section.howweworksec {
        padding: 30px 0
    }

    .testimonial-bg .testimonial-content h2 {
        font-size: 20px;
        padding: 10px 0 0
    }

    .button-group {
        justify-content: start !important;
        overflow: scroll
    }

    .testimonial-content p {
        height: 245px;
        overflow: scroll;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 5px 0
    }

    .testimonial-content p::-webkit-scrollbar {
        width: 5px;
        height: 0
    }

    .testimonial-content {
        background: no-repeat padding-box #002664;
        padding: 100px 25px 15px;
        height: 76vh
    }

    .counter-card,
    .our-work-bg .owl-theme .owl-nav:active,
    .our-work-bg .owl-theme .owl-nav:checked,
    .our-work-bg .owl-theme .owl-nav:focus,
    .our-work-bg .owl-theme .owl-nav:hover {
        background: 0 0
    }

    .testimonial-bg .owl-nav {
        bottom: -10px;
        left: 40%
    }

    .mega-pkg-bg h2 {
        font-size: 30px;
        padding: 20px 0
    }

    .pkg-details h4 {
        font-size: 20px;
        font-weight: 500
    }

    .banner-text-rotate-2,
    .checklist,
    .display-small-hidden,
    .hidden,
    .pkg-details h4 small {
        display: none
    }

    .awards-content h2,
    .meet-our-team-inner h1,
    .mega-pkg-bg .pkg-details h6 {
        font-size: 20px
    }

    .mega-pkg-bg .pkg-details h3 {
        font-size: 12px;
        letter-spacing: .31px
    }

    .mega-pkg-bg .pkg-head-child ul li button {
        width: 119px;
        justify-content: center
    }

    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 14px !important
    }

    .sec-paqs .faqs-box .accordion-item .accordion-body,
    .workcard p {
        font-size: 14px
    }

    .pkg-details-inner ul li {
        font-size: small
    }

    .contactlist,
    .employee-inner,
    .pkg-details-inner ul {
        padding: 10px 0
    }

    .my-wrap {
        flex-wrap: nowrap;
        overflow-x: scroll !important;
        justify-content: flex-start !important
    }

    .banner-btn-4,
    .banner-btn-5 {
        padding: 10px 0;
        height: 40px;
        width: 230px;
        font-size: 11px;
        margin: 20px 5px !important
    }

    .sec-paqs .sec-title h2 {
        font-size: 25px;
        line-height: 30px;
        padding-top: 20px
    }

    .sec-paqs .faqs-box .faqs-2 {
        padding-left: 0
    }

    .we-serve-bg {
        padding: 10px;
        letter-spacing: 1.33px;
        font-size: 20px
    }

    .we-serve-content h2 {
        font-size: 22px;
        padding: 18px 0 0
    }

    .we-serve-bg .gray-box {
        height: 300px !important;
        width: 310px !important
    }

    .project-detail-bg ul li,
    .we-serve-content h6 {
        font-size: 15px;
        padding: 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        margin-top: 10px;
        position: absolute
    }

    .mega-pkg-bg .mega-pkg-head ul li button {
        letter-spacing: .61px;
        font-size: 13px
    }

    .mega-pkg-bg .mega-pkg-head .nav-link {
        display: flex;
        padding: .5rem
    }

    .our-work-bg .screen {
        margin: 0 0 0 28px !important;
        width: 85%;
        height: 300px
    }

    .our-work-carousel-2 .owl-nav {
        margin: 34px 0 !important;
        font-size: 30px
    }

    .our-work-content {
        margin: 50px 0;
        padding: 0;
        text-align: center !important
    }

    .bg-footer .news-letter .lets-talk ul,
    .workcard {
        margin: 20px 0
    }

    .meet-our-team-inner {
        top: 44%
    }

    section.contactsec:before {
        content: "";
        width: 100%
    }

    .contacttext,
    section.contactsec {
        padding: 10px
    }

    .contacttext h4 {
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        padding: 0 0 10px
    }

    .contactlist ul li,
    .contacttext p {
        padding: 0;
        width: 100%;
        text-align: center
    }

    .contacttext p {
        font-size: 16px;
        line-height: 27px
    }

    .contactlist ul li {
        list-style: none
    }

    .contactlist ul li p {
        font-size: 14px;
        line-height: 25px;
        width: 100%;
        text-align: center
    }

    .contactlist ul li a {
        font-size: 14px;
        text-align: center
    }

    .socailicon ul {
        justify-content: space-evenly;
        padding: 0 0 17px
    }

    .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f5efef;
        outline: 0;
        box-shadow: unset
    }

    .contactinput input::-webkit-input-placeholder {
        color: #f5efef
    }

    .contactinput input::-moz-placeholder {
        color: #f5efef
    }

    .contactinput input::-ms-placeholder {
        color: #f5efef
    }

    .contactinput input::placeholder {
        color: #f5efef
    }

    .contactinput i,
    .contactinput select {
        color: #f5efef
    }

    .contactinput option {
        color: red
    }

    .center-res {
        text-align: center
    }

    .center-res img {
        margin-bottom: 10px
    }

    .center-res p {
        width: 100% !important;
        font-size: 13px !important
    }

    .bg-footer .row div:nth-child(0),
    .bg-footer .row div:nth-child(3) {
        order: 3
    }

    .aboutsec div:first-child,
    .bg-footer .row div:first-child {
        order: 1
    }

    .bg-footer .row div:nth-child(2) {
        order: 4
    }

    .aboutsec div:nth-child(0),
    .bg-footer .row div:nth-child(4) {
        order: 2
    }

    .bg-footer .row div:nth-child(5) {
        order: 5
    }

    .bg-footer .social-link ul {
        justify-content: center
    }

    .payment-method img {
        width: 75%
    }

    .bg-footer .footer-list h4 {
        font-size: 18px
    }

    .bg-footer .footer-list ul li a {
        font-size: 13px
    }

    .bg-footer .news-letter {
        padding: 30px 0 0;
        text-align: center
    }

    .abouttext p,
    .banner-content h4,
    .bg-footer .news-letter .lets-talk ul li a,
    .bg-footer .news-letter h5,
    .feebback-bg h4,
    .teams_card p {
        font-size: 16px
    }

    .bg-footer .news-letter .lets-talk ul li {
        line-height: 30px
    }

    .bg-footer .lower-footer {
        border-top: none;
        margin-top: 5px;
        padding: 12px 0;
        display: block;
        text-align: center
    }

    .bg-footer .lower-footer .lower-1 {
        margin: 0 0 10px
    }

    .image-banner img {
        max-height: 45vh
    }

    .industry-vide-sec,
    .inner-case-study-carousel-bg,
    .project-detail-bg,
    section.portfoliosec {
        padding: 25px 0
    }

    .industry_video-wrapper {
        height: 30vh
    }

    .banner-content span {
        font-size: 19px;
        padding: 0 5px !important
    }

    .aboutsec,
    .contact-bg,
    .testimonials-bg,
    .your-story-bg {
        padding: 50px 0
    }

    .aboutsec ul {
        padding: 0 0 20px
    }

    .aboutsec .row {
        flex-direction: row
    }

    .abouttext h2 {
        margin: 0 0 20px
    }

    .abouttext h5 {
        font-size: 13px;
        margin: 9px 0
    }

    .abouttext h5:before {
        bottom: 3px
    }

    .abouttext h3 {
        font-size: 20px;
        line-height: 25px
    }

    .abouttext .banner-btn {
        margin: 15px 0
    }

    .whowetext ul {
        order: 0
    }

    .inf_item {
        word-spacing: 15px;
        font-size: 0
    }

    .inf_item a,
    .inf_item_reverse a {
        font-size: 35px;
        word-spacing: 0px
    }

    .inf_item_reverse {
        word-spacing: 15px;
        font-size: 0px
    }

    .aboutsec ul li {
        width: 50%
    }

    .branding-tabs li button {
        font-size: 13px;
        width: 90%
    }

    .aboutimg .tab-pane img,
    .nav-pills .show>.nav-link,
    .your-story-bg .nav-pills .nav-link.active {
        height: auto
    }

    .workcard {
        display: flex;
        align-items: baseline;
        padding: 0
    }

    .awards-carousel .item,
    .our-cilents-carousel .item {
        justify-content: center;
        display: flex
    }

    .border_red {
        border-right: none
    }

    .counter-card {
        border-radius: 9%;
        padding: 0;
        margin: 10px;
        box-shadow: unset;
        text-align: center
    }

    .feebback-bg h3,
    .main-case-study-content h2,
    .number-counter span {
        font-size: 25px
    }

    .owl-carousel .owl-item img {
        margin: 0;
        width: 100%
    }

    .resize_images img {
        height: 300px
    }

    .our-culture-bg {
        padding: 0;
        margin: 0 0 50px
    }

    .our-culture-bg h2 {
        letter-spacing: 1px;
        font-size: 25px;
        padding: 0 0 25px
    }

    .our-culture-bg .owl-theme .owl-nav {
        left: 40%;
        top: 96%
    }

    .our-culture-bg .culture_slide {
        padding: 10px;
        text-align: center;
        margin: 0 0 0 109px !important;
        width: 101%;
        height: 259px
    }

    .our-culture-bg .culture_slide h4 {
        font-size: 31px;
        line-height: 18px
    }

    .our-culture-bg .culture_slide h5 {
        font-size: 20px;
        line-height: 27px;
        height: auto
    }

    .our-culture-bg .culture_slide p {
        font-size: 16px;
        line-height: 25px;
        height: auto
    }

    .bestdesigntext h2 {
        font-size: 16px;
        line-height: 34px
    }

    .employee-inner p {
        padding: 0;
        margin: 0 0 20px
    }

    .teams_cards {
        padding: 20px 0
    }

    .teams_card h2 {
        font-size: 25px;
        line-height: 2px
    }

    .team_card ul li.teambox {
        margin: 5px 0 !important;
        height: auto
    }

    .portfolilist.inner_tab-navs ul {
        overflow: scroll;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .portfoliobox a img {
        object-fit: cover;
        width: 100% !important;
        margin: 0 !important
    }

    .portfoliobox.cntr a img {
        object-position: center
    }

    .cntr2 {
        margin: 30px 0 !important;
        height: 200px !important;
        width: 250px !important
    }

    .portfoliobox.cntr2 a img {
        object-position: top;
        object-fit: fill
    }

    .testimonials-bg video {
        width: 315px;
        height: 177px
    }

    .testimonials-content h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0
    }

    .testimonials-content {
        padding: 0 0 0 14px
    }

    .testimonials-content p {
        padding: 25px 0;
        height: 250px;
        overflow: scroll;
        overflow-x: hidden
    }

    .testimonials-bg .owl-theme .owl-nav {
        margin-top: 0
    }

    .customer-review-bg {
        padding: 0 0 50px
    }

    .customer-review-content h2 {
        font-size: 25px;
        padding: 0 0 25px
    }

    .menu-bg ul li a,
    .menu-us h1 {
        text-decoration: none;
        font-size: 20px
    }

    .menu-bg,
    .menu-us h1,
    .project-detail-bg ul {
        padding: 15px 0
    }

    .checklist label.btn.btn-outline-primary {
        font-size: 15px !important;
        padding: 5px 9px;
        border-radius: 10px;
        width: 45% !important;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-bg ul li a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 6px
    }

    .menu-us h1 {
        color: #000;
        font-weight: bolder
    }

    .menu-bg .dropdown li a {
        color: #000;
        font-weight: 500;
        font-size: 16px
    }

    .navigation__menu {
        height: 100%;
        padding-right: 0;
        width: 100%
    }

    .navigation li {
        padding: 17px 80px 0 0
    }

    .menu-us h3 {
        padding: 20px 0;
        font-size: 18px
    }

    .case-study-bg {
        background: linear-gradient(#ed045b, #ed045ba3);
        padding: 20px 0;
        height: 525px;
        margin: 0
    }

    .view-case-content h14 {
        letter-spacing: 1.82px
    }

    .case-study-bg .view-study-inner {
        padding: 0 0 170px !important
    }

    .row.services-reserve {
        flex-flow: column-reverse
    }

    .project-detail-bg h1 {
        line-height: 25px;
        font-size: 25px;
        padding: 20px 0
    }

    .project-detail-bg h5 {
        font-size: 16px;
        line-height: 26px
    }

    .h-88vh img {
        width: 100%;
        height: auto
    }

    .inner_case-detail-txt h3 {
        padding: 23px 0 0;
        font-size: 26px
    }

    .inner_case-detail-txt h5 {
        padding: 0;
        font-size: 17px
    }

    .inner-case-study-carousel-2 .px-5 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .banner-inner {
        margin: 61px 0 0
    }

    .pt-150 {
        padding-top: 25px !important
    }

    .bestdesigntext h4,
    .howweworktext h3 {
        font-size: 25px;
        line-height: 25px
    }

    .howweworktext h5 {
        font-size: 15px;
        margin: 0 0 8px
    }

    .howweworktext h5:before {
        width: 29%;
        bottom: 2px
    }

    .our-work-content h2 {
        font-size: 25px;
        padding: 0 0 28px;
        line-height: 25px
    }

    .our-work-bg .screen img {
        bottom: -640px !important
    }

    .our-work-carousel-careers .owl-nav {
        left: 44%;
        top: -35px
    }

    .our-cilents-bg h2 {
        font-size: 19px;
        line-height: 33px;
        padding: 25px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        bottom: -40px !important;
        right: 40% !important;
        top: 470px !important
    }

    .awards-bg img {
        width: 50%;
        margin: 0 auto
    }

    .awards-carousel .item {
        width: 100%
    }

    .awards-carousel .item img {
        width: 60%
    }

    .awards-carousel .item a {
        justify-content: center;
        display: flex
    }

    .industry-img-zoom img {
        margin: 50px auto
    }

    .main-case-study {
        padding: 70px 15px
    }

    .main-case-study-content {
        top: 84%;
        left: 7%;
        z-index: 99
    }

    .case-study-content h1 {
        font-size: 25px !important
    }

    .case-study-content h3,
    .case-study-content h4 {
        font-size: 12px
    }

    .case-study-content {
        padding: 100px 0 0;
        height: 102px
    }

    .project-detail-bg h3 {
        color: #002664;
        font-size: 28px;
        padding: 10px 0
    }

    .case-services-provide .contact-img-2 {
        left: 0;
        top: 40px
    }

    .case-services-provide .contact-img-3 {
        right: 80px;
        top: -50px
    }

    .mbl-img-3 {
        width: 100px !important;
        height: 200px !important
    }

    .mbl-img-2 {
        width: 125px !important;
        height: 250px !important
    }

    .mbl-img-1 {
        width: 150px !important;
        height: 300px !important
    }

    .contactform {
        margin: -22px 0 0;
    }

    .feebback-bg {
        padding: 40px 0 0
    }

    .contact-bg .contact-img-1 {
        width: 65% !important;
        margin: 0
    }

    .aboutimg,
    .your-story-bg {
        margin: 50px 0 0
    }

    .your-story-content h2 {
        font-size: 30px;
        padding: 0
    }

    .your-story-bg h2 {
        font-size: 25px;
        padding: 10px 0 20px
    }

    .portfolio-scroll .screen-2,
    .portfolio-scroll .screen-2 img,
    .portfolio-scroll .screen-3,
    .portfolio-scroll .screen-3 img {
        height: 100%
    }

    .portfolio-scroll .screen-3 {
        height: 100%;
        margin: 0
    }

    .portfolio-scroll .screen img {
        bottom: -390px
    }

    .portfolio-section .d-grid {
        gap: 0
    }

    .hero_background .row,
    .portfolio-section {
        padding: 0 0 0;
    }

    .nav_drpdown,
    .nav_drpdown2 {
        position: relative;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        transition: 2s ease-in
    }

    .nav_drpdwn-arrow-btn::before {
        right: -15px;
        top: 16%
    }

    ul.dropdown li {
        padding: 5px 0
    }

    .sec-margin {
        margin: 10rem 0 7rem !important
    }

    .cta-back-4 {
        width: 30% !important;
        top: -19% !important;
        right: 72% !important
    }

    .cta-back-5 {
        width: 40px !important;
        height: 39px !important;
        top: -23% !important;
        right: 8% !important
    }

    .cta-women {
        width: 50% !important;
        left: 25% !important;
        top: -50% !important;
        bottom: 0
    }

    .cta-box {
        padding: 70px 25px 25px !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important
    }

    .cta-box-content {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important
    }

    .cta-box h1 {
        font-size: 26px !important
    }

    .cta-box p {
        font-size: 18px !important
    }

    .hero_content h4 {
        font-size: 20px !important;
        padding: 0 !important
    }

    .hero_background .row .col .text {
        font-size: 25px;
        padding: 6px 8px
    }

    .hero_content h1 {
        font-size: 24px;
        padding: 20px 0 10px
    }

    .hero_content p,
    .img-cont-sec-content p {
        font-size: 14px !important;
        padding: 0 15px 15px
    }

    .img-cont-sec-content h2 {
        font-size: 24px !important;
        margin-bottom: 12px;
    }

    .img-cont-sec-content h5 {
        margin: 0 0 5px;
        font-size: 15px !important
    }

    .tab-cont h3,
    .workcard h4 {
        font-size: 22px
    }

    .section-padding3 {
        padding: 0 0 40px
    }

    .your-story-bg .nav-item button {
        margin: 15px;
        height: auto;
        width: 60px
    }

    .your-story-content h4 {
        font-size: 22px !important;
        padding-bottom: 13px !important
    }

    .your-story-bg p {
        color: #fff;
        font-size: 14px
    }

    .sec-paqs {
        margin: 0
    }

    .floatbutton {
        display: none;
    }

    .contactinput i {
        right: 17px;
    }

    section.contact-bg .map_area iframe {
        height: 282px;
        width: 100%;
        margin: 1rem 0 0 0;
    }

    .inner_banner {
        padding: 5rem 0 3rem !important;
    }

    .cta_red .contact .btn-cta {
        font-size: 14px !important;
        margin: 20px 0 0 !important;
    }

    .cta_red .contact img {
        float: inline-end !important;
        margin: 10px !important;
    }

    .nav-first-half {
        width: 100%;
    }

    .abouttext h2,
    .sec-tab h2,
    .tab-cont h3 {
        line-height: 33px;
    }

    .modal_web img {
        display: none;
    }

    .modal_web form button {
        display: block;
    }

    .modal_web p {
        font-size: 16px;
        text-align: center;
        line-height: 20px;
        margin: 9px 0;
    }

    .modal_web h4 {
        text-align: center;
        font-size: 26px !IMPORTANT;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.payment-method h5 {
    color: #fff;
    text-transform: uppercase;
    margin: 33px 0 0;
}

.mrq {
    font-size: 10rem;
    font-weight: 800;
    color: #002664;
    opacity: 0.2;
    margin: 0;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    transition: all 0.3s ease-in;
}

.mrq:hover {
    opacity: 1;
}

.mrq marquee {
    height: 221px;
}

.img-cont-sec-image img {
    width: 100%;
}

section.contact-bg .map_area {
    padding: 0 1rem;
}

section.contact-bg .map_area iframe {
    height: 250px;
    border-radius: 13px;
    width: 100%;
}

section.contact-bg .map_area ul {
    display: flex;
}

section.contact-bg .map_area ul li {
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
    margin: 17px 9px;
    list-style: none;
    padding: 17px 2rem;
    width: 100%;
    text-align: center;
    border-radius: 7px;
}

section.contact-bg .map_area ul li a {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

section.contact-bg {
    padding: 4rem 0;
}

section.contact-bg h4 {
    font-size: 39px;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

section.contact-bg p {
    font-size: 18px;
}

section.contact-bg form {}

section#about-company-bg {
    margin: 0;
}

section#about-company-bg h1 {
    font-size: 39px;
    width: 75%;
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 800;
}

section#about-company-bg p.first-para {
    font-size: 16px;
    width: 66%;
    margin: 2rem auto 9rem;
}

h1 {
    padding-bottom: 20px
}

a:hover {
    color: #eb3840
}

a {
    color: #000
}

::focus {
    box-shadow: 0 0 0 .25rem rgb(250 19 13 / 32%) !important
}

body {
    background-image: url(../images/bg-repeat.webp);
    background-repeat: repeat;
    overflow-x: hidden;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    font-family: "Montserrat", sans-serif;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
    height: 100%;
    margin-top: 70px;
    scroll-behavior: smooth;
}

#accordionExample .col-md-6 {
    padding: 10px 37px;
}

.nav-sideBar,
.nav-sideBar .nav_row {
    height: 100vh
}

.menu_ul li,
.menu_ul li i {
    margin: 15px 0
}

h1 {
    font-size: 35px;
    font-weight: 700
}

.mobile-menu .nveMenu.is-opened,
ul.dropdown_ul .fade {
    opacity: 1;
    transform: translateX(0)
}

.banner-btn a,
.banner-btn-1,
.banner-btn-4,
.inner_case-detail-txt a,
.mobile-menu .navlinks li a:hover,
.navigation li,
a,
a:focus,
a:hover {
    text-decoration: none
}

.banner-btm-bg.row.col-md-12 {
    display: none;
}

.counter-card,
.fixed-cta a,
.form-button,
.number-counter h2,
.our-cilents-bg h2,
.portfolio-menu,
.ptf-head h2,
.thank-you-model-body {
    text-align: center
}

.inf_item a:hover,
.inf_item_reverse a:hover {
    text-decoration: underline 5px;
    text-underline-offset: 13px
}

.portfolio-section .d-grid,
.tabbox ul {
    grid-template-columns: 25% 25% 25% 25%
}

.cursor,
.noContent.home-sec-carousal .resize_images img,
.portfoliobox a img,
.teambox img {
    object-position: center
}

.btn-default,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
span,
textarea,
ul {
    margin: 0;
    padding: 0;
    object-fit: cover;
    background-position: center center
}

.menu_ul {
    list-style: none;
    font-size: 25px;
    font-weight: 700;
    margin-top: 30px
}

.back {
    opacity: 1 !important
}

#back {
    opacity: 0;
    background: rgb(0 0 0 / 25%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
}

.nav-sideBar {
    width: 100%
}

.nav-first-half {
    padding: 0 0 0 30px;
    background: rgb(58 109 215 / 91%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
}

.menu_ul li a:hover {
    margin: 15px 0;
    color: #002664 !important;
    cursor: pointer
}

.menu_ul li a:hover i {
    color: #fff !important
}

.menu_ul li i {
    color: #ffffff;
    cursor: pointer
}

.menu_ul li a {
    color: #fff !important;
    white-space: nowrap
}

.dropdown_ul {
    display: none;
    list-style: square;
    padding-left: 30px
}

.btn-group-vertical,
.checklist .btn-group,
.contacttext h4 span,
.cursor.inview,
.dropdown_ul.showing,
.employebenfit h3 span,
.howweworktext h3 span,
.nav-bar-number {
    display: block
}

.marketing {
    list-style: circle !important
}

.arrow_icon {
    color: #fff;
    font-size: 20px;
    transition: transform 1s cubic-bezier(.7, 0, .3, 1)
}

.navigation__bar,
.navigation__bar--is-visible .navigation__bar {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all
}

.rotate {
    transform: rotatez(180deg)
}

ul.dropdown_ul li {
    font-size: 20px;
    font-weight: 300;
    transform: translateX(-50px);
    transition: 1s cubic-bezier(.7, 0, .3, 1);
    opacity: 0
}

.my-dot-class {
    color: #fff;
    background: #1e222b;
    width: 218px;
    padding: 13px 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 #000b1d;
    cursor: pointer;
    border: 0;
    box-shadow: inset 0 0 0 0 #e7383f
}

.card-sec h2 {
    line-height: unset !important;
    margin: 40px 0 !important;
    font-size: 35px !important;
    font-weight: 700;
    color: #ed045b !important
}

.card-sec h2 span,
.paragraph li {
    color: #000 !important
}

.card-sec p {
    max-width: none !important;
    font-size: 20px;
    padding: 0 70px
}

.paragraph {
    display: block !important;
    padding: 0;
    margin: 19px 0 0 31px
}

.paragraph li {
    font-size: 15px !important;
    letter-spacing: unset !important;
    font-weight: inherit !important;
    list-style-image: url("../images/icon.html") !important;
    display: list-item !important;
    margin: 10px 0
}

.my-dot-class:first-child::before {
    content: "WEB DESIGN";
    font-weight: 700
}

.my-dot-class:nth-child(2)::before {
    content: "E-COMMERCE";
    font-weight: 700
}

.my-dot-class:nth-child(3)::before {
    content: "BRANDING";
    font-weight: 700
}

.my-dot-class:nth-child(4)::before {
    content: "DOMAIN";
    font-weight: 700
}

.my-dot-class:nth-child(5)::before {
    content: "DIGITAL MARKETING";
    font-weight: 700
}

.my-dot-class.active {
    box-shadow: inset 400px 0 0 0 #c9004d;
    border-radius: 0 !important;
    transition: border-radius .1s ease-out, box-shadow 7.5s ease-in-out
}

.banner-btn-1-slide:hover,
.banner-btn-3-slide:hover,
.header-btn-slide:hover {
    box-shadow: inset 400px 0 0 0 #000
}

.my-dots-class {
    background: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    top: -100px;
    position: absolute
}

.extra-margin {
    margin-top: 200px
}

.container {
    max-width: 95%;
}

body::-webkit-scrollbar {
    width: 8px
}

body::-webkit-scrollbar-track {
    background: #a2a0a0
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fa130d
}

::-webkit-scrollbar-track {
    background: #a2a0a0
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fa130d
}

.preloader,
section.contactsec,
section.contactsec:before {
    background-repeat: no-repeat
}

.employee-inner p,
.our-work-content h4 span,
p {
    color: #000
}

.hamburger {
    margin: 0 10px 0 0
}

.hamburger .line {
    width: 30px;
    height: 3px;
    background-color: #000;
    display: block;
    margin: 4px auto;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.mobile-menu .circle,
.mobile-menu .mobile-cross {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 50%;
    background: #005879;
    font-size: 16px;
    top: 40px
}

.mobile-menu .nveMenu,
.mobile-menu .overlay {
    position: fixed;
    transition: .5s cubic-bezier(.7, 0, .3, 1);
    opacity: 0;
    visibility: hidden
}

.hamburger:hover {
    cursor: pointer
}

#hamburger-1.is-active .line:nth-child(2),
.teambox img:hover {
    opacity: 0
}

#hamburger-1.is-active .line:first-child {
    transform: translatey(7px) rotate(45deg)
}

#hamburger-1.is-active .line:nth-child(3) {
    transform: translatey(-7px) rotate(-45deg)
}

.mobile-menu,
.typed-cursor {
    display: none
}

.mobile-menu .circle {
    margin: 0 auto;
    position: fixed;
    right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2
}

.cta-btns {
    display: flex;
    justify-content: center;
    margin: 12% 0 0
}

.cta-btns a {
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 51px !important;
    border-radius: 0 !important;
    width: 180px !important;
    margin: 0 2% !important
}

.mobile-menu .mobile-cross {
    margin: 0 auto;
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999
}

.icon__menu:before,
.navigation__bar {
    line-height: 60px
}

.mobile-menu .nveMenu {
    top: 0;
    left: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transform: translateX(-320px);
    padding: 40px 20px
}

.mobile-menu .nveMenu.is-opened {
    visibility: visible
}

.mobile-menu .overlay {
    top: 0;
    right: 0;
    width: calc(100% - 280px);
    height: 100%;
    background: rgba(0, 0, 0, .71)
}

.mobile-menu .overlay.is-on {
    opacity: 1;
    visibility: visible;
    z-index: 999
}

.mobile-menu .navlinks li {
    display: block;
    padding: 12px 0
}

.mobile-menu .navlinks li a {
    text-transform: uppercase;
    color: #666;
    font-weight: 700
}

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-image: url("../images/preloader.gif");
    background-color: #fff;
    background-position: center
}

.active-class {
    border: none;
}

.navigation__bar {
    padding: 0 60px;
    height: 75px;
    position: absolute;
    left: 0;
    top: 30px;
    border-bottom: 1px solid #e9e9e9;
    width: 100%;
    z-index: 900;
    cursor: pointer;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: translate(0, -60px);
    -moz-transform: translate(0, -60px);
    -ms-transform: translate(0, -60px);
    transform: translate(0, -60px);
    transition-property: all;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -ms-transition-duration: .25s;
    transition-duration: .25s
}

.navigation__bar.active {
    top: 0;
    position: fixed;
    z-index: 1000;
}

.navigation__menu {
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    width: 100%;
    z-index: 800;
    opacity: 0;
    padding: 0;
    margin: 0;
    transform: translatex(-100%);
    transition-property: all;
    transition-duration: 1s;
    background: 0 0
}

.card,
.contactinput,
.meet-our-team-bg,
.nav_ul,
.navigation li,
.our-services-bg,
.portfolio-inner,
.video-banner {
    position: relative
}

.company-logo {
    margin: auto 0 auto 215px;
}

.company-logo img {
    width: 212px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(41deg) brightness(87%) contrast(106%);
}

.icon__menu,
.nav-bar-contact {
    display: flex;
    align-items: center
}

.navigation__bar--is-visible .navigation__bar {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    transition-property: all;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -ms-transition-duration: .25s;
    transition-duration: .25s
}

.aboutsec .col-md-6,
.howweworksec .col-md-4,
.navigation__menu--is-visible body {
    overflow: hidden
}

.navigation__menu--is-visible .navigation__menu {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    transition-duration: .6s
}

.inf-scroll,
.inf-scroll-reverse {
    transform: translateX(0) translateZ(0)
}

span.screen-reader-text {
    letter-spacing: 1.22px;
    color: #000;
    font-weight: 700;
    font-size: 18px;
}

.menu-gif {
    width: 25px !important;
    margin-right: 10px
}

ul.dropdown li {
    display: block;
    float: left;
    padding: 10px 0;
    color: #000
}

ul.dropdown li a {
    font-size: 19px;
    color: #000;
    background-color: transparent !important
}

.navigation li {
    color: #fff;
    display: block;
    float: left;
    transition-duration: .5s
}

.banner-content h4,
.banner-text-rotate-2 .scrol,
.case-study-content h3,
.case-study-content h4,
.menu-us-btm a:hover,
.navigation li a,
.socailicon ul li a,
.we-serve-bg .gray-box:hover .para,
.we-serve-bg .gray-box:hover h7 {
    color: #fff
}

.card {
    background-color: #fff0;
    border: none
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem;
    width: 100%
}

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

.navigation li a:hover {
    background: #000;
    cursor: pointer;
    color: #fff;
    z-index: 1111
}

.navigation ul li ul {
    background: 0 0;
    visibility: hidden;
    opacity: 0;
    width: 20rem;
    position: absolute;
    transition: .5s;
    margin-top: 1rem;
    left: 0;
    display: none
}

.navigation ul li ul:hover,
.navigation ul li:hover>ul {
    visibility: visible;
    opacity: 1;
    display: block;
    background-color: transparent
}

.navigation ul li ul li {
    clear: both;
    width: 100%
}

.banner-inner {
    position: absolute
}

.banner-content {
    padding: 20vh 0 52px;
    height: auto
}

.image-banner img {
    height: 75vh;
    object-fit: cover;
    width: 100%
}

.image-banner,
.ptf-head {
    padding: 0
}

.banner-content h1 {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    padding: 15px
}

.banner-btm-social-icons ul li i,
.banner-content p {
    font-size: 25px
}

.banner-content span {
    color: #d71921;
    border-radius: 10px;
    background-color: #fff;
    padding: 0 150px;
    border: 2px solid #000
}

.banner-btn {
    padding: 2vw 0 0
}

.banner-btn a {
    color: #fff;
    font-size: 22px;
    letter-spacing: 1.33px
}

.banner-btn-1 {
    background-color: #002664;
    padding: 5px 0;
    line-height: 40px;
    width: 230px;
    color: #fff;
    border: 2px solid #002664;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #002664;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    transition: .8s ease-out
}

.banner-btn-2,
.banner-btn-3,
.tabbox ul li.portfoliobox .cap-box .quotebtnbox a {
    display: flex;
    justify-content: center;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out
}

.banner-btn-2,
.tabbox ul li.portfoliobox .cap-box .quotebtnbox a {
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
    padding: 12px 0;
    height: 55px;
    width: 230px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #ed045b;
    transition: .8s ease-out
}

.banner-btn-3,
.banner-btn-4 {
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #332a2a;
    height: 55px;
    width: 230px;
    background-color: #332a2a;
}

.banner-btn-3 {
    padding: 10px 0;
    border: 2px solid #002664;
    border-radius: 5px;
    transition: .8s ease-out
}

.banner-btn-4,
.header-btn {
    justify-content: center;
    display: flex
}

.banner-btn-3-slide:hover {
    border: 2px solid #000
}

.banner-btn-4 {
    padding: 10px 0 15px;
    font-size: 20px;
    border: 2px solid #002664;
    border-radius: 5px;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    transition: .8s ease-out;
    margin: 20px 10px !important
}

.banner-btn-4-slide:hover,
.banner-btn-5-slide:hover {
    box-shadow: inset 400px 0 0 0 #000;
    border: 2px solid #000;
    color: #fff
}

.header-btn,
.homepage-contact-btn {
    border-radius: 5px;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    color: #fff;
    font-size: 14px;
    background: #1e222b;
}

.header-btn {
    padding: 11px 16px;
    margin: 0 0 0 30px;
    line-height: normal;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 0 #002664;
    transition: .8s ease-out;
    font-weight: 800;
}

.banner-btn-5,
.homepage-contact-btn {
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #002664;
    text-decoration: none
}

.homepage-contact-btn {
    padding: 18px 30px;
    margin: 3% 0 0;
    align-items: center;
    transition: .8s ease-out;
    float: left;
}

.header-btn-slide:hover {
    color: #fff
}

.banner-btn-5 {
    background-color: transparent;
    padding: 10px 0 15px;
    height: 55px;
    font-size: 20px;
    width: 230px;
    display: flex;
    color: #002664;
    border: 2px solid #002664;
    border-radius: 5px;
    -webkit-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    transition: .8s ease-out;
    margin: 20px 10px !important
}

.typed-text {
    color: #fff;
    padding: 30px 15px;
    font-weight: 700;
    font-size: 45px;
    line-height: 1.4;
    text-transform: uppercase
}

.text {
    color: #ff1e00
}

.banner-text-rotate .scrol,
.img-cont-sec-content h2 span,
.modal-body h5 span,
.testimonial-content .active,
.testimonial-content h8 {
    color: #ed045b
}

.banner-text-rotate .card-content {
    position: relative;
    height: 90px;
    width: 90px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-text-rotate .txt-box,
.banner-text-rotate-2 .txt-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: .3s;
    transform: translate(-50%, -50%)
}

.banner-text-rotate .txt-box .rotate-text,
.banner-text-rotate-2 .txt-box .rotate-text {
    position: relative;
    animation: 13s linear infinite rotateTxt;
    z-index: 999
}

.banner-text-rotate .rotate-text svg {
    fill: currentColor;
    height: auto;
    transform-origin: center;
    width: 90px;
    transition: .5s
}

.banner-text-rotate .rotate-text svg text {
    color: #ed045b;
    font-size: 14px;
    letter-spacing: .5px
}

.banner-text-rotate .my-btns,
.banner-text-rotate-2 .my-btns {
    padding: 60px 0 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.banner-text-rotate .my-btns a,
.banner-text-rotate-2 .my-btns a {
    margin: 0 25px
}

.banner-text-rotate .scrol i,
.banner-text-rotate-2 .scrol i {
    font-size: 23px
}

.fixed-cta {
    position: fixed !important;
    bottom: 0;
    right: 12px;
    width: 100%;
    z-index: 9999;
    justify-content: center;
    display: none
}

.glowing {
    text-decoration: none;
    -webkit-animation: 1.5s infinite glowing;
    -moz-animation: 1.5s infinite glowing;
    -o-animation: 1.5s infinite glowing;
    animation: 1.5s infinite glowing
}

@-webkit-keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        -webkit-box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        -webkit-box-shadow: 0 0 40px red
    }
}

@-moz-keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        -moz-box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        -moz-box-shadow: 0 0 40px red
    }
}

@-o-keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        box-shadow: 0 0 40px red
    }
}

@keyframes glowing {

    0%,
    100% {
        background-color: #b20000;
        box-shadow: 0 0 3px #b20000
    }

    50% {
        background-color: red;
        box-shadow: 0 0 40px red
    }
}

.fixed-cta a {
    width: 100%;
}

.banner-btm-bg {
    padding: 0 3vw 2vw;
    position: relative;
    bottom: 0;
    justify-content: space-between
}

.banner-btm-bg .col-md-6 {
    position: fixed;
    bottom: 100px;
    z-index: 10000;
    width: auto;
    display: none;
}

.banner_msg-underline {
    margin-top: 5px;
    width: 100%;
    height: 2px;
    background: #fff;
    background-blend-mode: difference;
    mix-blend-mode: difference
}

.banner-btm-bg .col-md-6:first-child {
    bottom: 120px;
    left: -30px;
}

.banner-btm-bg .col-md-6:nth-child(2) {
    right: 20px
}

.banner-message {
    display: none !important
}

.banner-btm-social-icons ul:before {
    position: absolute;
    content: url('../images/social-icon.webp');
    top: -38px;
    left: 68px;
    z-index: 33;
    width: 41px;
    height: 50px;
    transform: scale(.17)
}

.banner-btm-social-icons ul:hover:before {
    /* content: url('../images/social-icon-hover.webp'); */
}

.banner-btm-social-icons ul li {
    position: absolute;
    list-style: none;
    left: 90px;
    transition: 1s
}

.banner-btm-social-icons ul li a {
    display: block;
    width: 45px;
    height: 45px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 50%;
    margin: 0 12px;
    font-size: 33px;
    text-decoration: none
}

.menu-bg ul li a,
.menu-us h9 {
    text-decoration: none;
    font-size: 23px;
    color: #fff
}

#twitter {
    transform: rotate(60deg)
}

#google-plus,
.banner-btm-social-icons ul li:nth-child(3) i {
    transform: rotate(120deg)
}

#instagram {
    transform: rotate(180deg)
}

#whatsapp {
    transform: rotate(240deg)
}

#linkedin {
    transform: rotate(300deg)
}

.banner-btm-social-icons ul li:nth-child(2) i {
    transform: rotate(55deg)
}

.banner-btm-social-icons ul li:nth-child(4) i {
    transform: rotate(90deg)
}

.banner-btm-social-icons ul li:nth-child(5) i {
    transform: rotate(-120deg)
}

.banner-btm-social-icons ul li:nth-child(6) i {
    transform: rotate(-60deg)
}

.banner-btm-social-icons ul li:first-child a {
    transition: 0s ease-in-out .1s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(2) a {
    box-shadow: 1px 1px 10px 2px #00000029;
    background: #000;
    transition: .1s ease-in-out .2s;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(3) a {
    box-shadow: 1px 1px 10px 2px #00000029;
    background: #000;
    transition: .2s ease-in-out .3s;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(4) a {
    transition: .3s ease-in-out .4s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(5) a {
    transition: .5s ease-in-out .6s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul li:nth-child(6) a {
    transition: .6s ease-in-out .7s;
    background: #000;
    box-shadow: 1px 1px 10px 2px #00000029;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-btm-social-icons ul:hover li:first-child a {
    transform: translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(2) a {
    transform: rotateZ(-60deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(3) a {
    transform: rotateZ(-120deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(4) a {
    transform: rotateZ(-180deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(5) a {
    transform: rotateZ(-240deg) translatex(60px)
}

.banner-btm-social-icons ul:hover li:nth-child(6) a {
    transform: rotateZ(-300deg) translatex(60px)
}

.menu-bg {
    padding: 45px 0
}

.menu-bg ul {
    list-style: none;
    display: flex;
    flex-direction: column
}

.menu-bg ul li {
    text-decoration: none;
    padding: 15px 0
}

.menu-bg ul li a {
    text-transform: uppercase;
    font-weight: 700;
    padding: 20px 30px
}

.menu-bg ul li a:hover {
    color: #fff;
    transition: .5s;
    background: 0 0
}

.menu-bg .dropdown li a {
    color: #000;
    white-space: nowrap
}

.menu-bg-inner-tab a {
    font-weight: 700;
    padding: 5px 0 !important;
    text-decoration: none
}

.menu-us h9 {
    line-height: 80px;
    font-weight: bolder;
    padding: 20px 0
}

.menu-us h11 {
    color: #fff;
    font-weight: 500;
    padding: 8px 0;
    font-size: 18px;
    line-height: 22px
}

.menu-us a {
    text-decoration: none !important
}

.menu-us-btm a {
    font-size: 30px;
    color: #000
}

.services-eagle {
    animation: 5s ease-in-out infinite element-2;
    width: 20% !important;
    opacity: 0.2;
    position: absolute
}

@keyframes element-2 {

    0%,
    100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(40px)
    }
}

.our-services-bg .services-content {
    padding: 100px 0 180px 20px;
    position: relative
}

.our-services-bg .services-content h5 {
    margin: 0 0 30px;
    padding: 0 0 10px;
    text-transform: uppercase;
    font-size: 26px;
    font-weight: 700;
    border-bottom: 1px solid #c4171e;
    width: fit-content
}

.our-services-bg .services-content h4 {
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0 20px
}

.our-services-bg .owl-theme .owl-nav {
    margin-top: 11px;
    position: absolute;
    bottom: 5.5%;
    left: 3%;
    font-size: 30px
}

.main-services img {
    height: 700px !important;
    width: 1000px !important
}

.services-content p {
    width: 100%;
    height: 160px;
    overflow: scroll;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.services-content p::-webkit-scrollbar {
    display: none
}

.our-services-bg .owl-theme .owl-nav [class*=owl-]:hover,
.testimonial-bg .owl-theme .owl-nav [class*=owl-]:hover,
.we-serve-bg .owl-theme .owl-nav [class*=owl-]:hover {
    background: 0 0;
    color: #ed045b;
    text-decoration: none
}

.case-study-bg {
    background: url(../images/portfolio-after.webp);
    padding: 50px 0
}

.case-study-bg .case-study-inner,
.case-study-bg .view-study-inner {
    /* padding-left: 50px; */
}

.case-study-bg .case-study-inner .upper-text h7,
.testimonial-bg .testimonial-content h6 {
    text-transform: uppercase;
    color: #fff;
    font-size: 43px;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    width: fit-content;
    padding: 0 0 10px
}

.case-study-bg .case-study-inner .upper-text h1 {
    text-transform: uppercase;
    color: #000;
    width: fit-content;
    font-size: 45px;
    font-weight: 700;
    padding: 40px 0 20px;
    letter-spacing: -.99px
}

.banner-text-rotate-2 .card-content {
    position: relative;
    height: 230px;
    width: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

@keyframes rotateTxt {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.banner-text-rotate-2 .rotate-text svg {
    fill: currentColor;
    height: auto;
    transform-origin: center;
    width: 158px;
    transition: .5s;
    position: relative;
}

.banner-text-rotate-2 .rotate-text svg text {
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px
}

.case-study-bg .item-counter {
    position: relative;
    padding: 15px 30px 0 0
}

.case-study-bg .item-counter li:first-child {
    position: relative;
    padding: 0 0 54px
}

.case-study-bg .item-counter li:first-child::before {
    position: absolute;
    content: "";
    background-color: #002664;
    width: 3px;
    height: 47px;
    bottom: 0;
    left: 4px
}

.case-study-bg .item-counter li {
    color: #fff;
    font-size: 12px;
    list-style: none
}

.case-study-bg .view-case-img {
    background-color: transparent;
    border-radius: 10px;
    margin: 0 30px;
    position: relative
}

.view-case-content h5 {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 0 23px #00000073;
    opacity: 1;
    text-transform: uppercase
}

.case-study-bg .view-case-img img,
.industry-vide-sec video {
    border-radius: 10px
}

.view-case-content h14 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4.82px;
    color: #fff;
    text-shadow: 0 3px 12px #00000029;
    opacity: 1
}

.view-case-content {
    position: absolute;
    right: -135px;
    top: 199px
}

.testimonial-content {
    background: no-repeat padding-box #002664;
    padding: 50px 60px;
    border-radius: 15px
}

.testimonial-bg .testimonial-content h2 {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -.99px;
    color: #ed045b;
    padding: 35px 0 0
}

.testimonial-bg .testimonial-content h5 {
    letter-spacing: -.3px;
    color: #fff;
    opacity: 1;
    font-size: 22px;
    padding: 10px 0 0
}

.main-popup-content ul,
.portfolio-item li,
.testimonial-content ul li {
    list-style: none
}

.testimonial-content ul li a {
    color: #fff;
    padding: 0 0 0 5px;
    font-size: 10px
}

.testimonial-content p {
    font-size: 18px;
    letter-spacing: -.3px;
    color: #cbc4c4;
    height: 175px;
    overflow: hidden;
    padding: 10px 0 30px
}

.testimonial-bg .owl-nav {
    position: absolute;
    bottom: 0;
    left: 39%;
    font-size: 25px;
    color: #fff
}

.testimonial-bg {
    padding: 120px 0 20px
}

.testimonial-i-img img {
    width: 52%;
    z-index: 2;
    position: relative;
    right: -50px;
    top: -50px
}

.sec-paqs {
    background-color: #000;
    padding: 55px 0
}

.sec-paqs .sec-title {
    text-align: -webkit-center
}

.sec-paqs .head-border h3,
.sec-paqs .sec-title h3,
.sec-paqs .sec-title h7 {
    font-weight: 400;
    font-size: 26px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 2px;
    position: relative
}

.sec-paqs .sec-title h7::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 80px;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .sec-title h3::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 30%;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .head-border h3::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 32%;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .title-border h3::before {
    content: "";
    position: absolute;
    background-color: #ed045b;
    width: 22%;
    height: 1px;
    bottom: 0;
    right: 0
}

.sec-paqs .sec-title h4 {
    font-size: 45px;
    color: #ed045b;
    line-height: 52px;
    padding-top: 11px;
    text-transform: uppercase;
    font-weight: 700
}

.sec-paqs .sec-title h4 span {
    color: #ed045b;
    display: block
}

.checklist,
.sec-paqs .faqs-box {
    padding: 30px 0
}

.sec-paqs .faqs-box .faqs-2 {
    padding-left: 100px
}

.sec-paqs .faqs-box .accordion-item {
    background-color: transparent;
    border: none;
    margin: 0 0 16px
}

.sec-paqs .faqs-box .accordion-item .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: transparent;
    box-shadow: unset;
    width: 100%;
    border-bottom: 1px solid #ed045b
}

.sec-paqs .faqs-box .accordion-item .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem .25rem;
    font-size: 21px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    background-color: transparent;
    border-bottom: 2px solid #ffffff36;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s
}

.sec-paqs .faqs-box .accordion-item .accordion-button:focus {
    border-width: 0 0 2px;
    border-color: #ed045b;
    border-style: solid;
    box-shadow: none
}

.sec-paqs .faqs-box .accordion-item .accordion-button::after {
    content: "\f0dd";
    font-family: "Font Awesome 6 Pro";
    background-image: none;
    font-weight: 700
}

.sec-paqs .faqs-box .accordion-item .accordion-body {
    padding: 1rem 1.25rem;
    color: #cbcaca;
    font-size: 20px
}

section.contactsec {
    padding: 50px 50px 50px 0;
    position: relative;
    background-position: center center;
    background-size: cover;
    z-index: 0;
}

.price-filter {
    padding: 27px 0 22px
}

.contacttext {
    padding: 0 42px 0vw;
}

.contacttext p {
    padding-top: 69px;
    color: #fff;
    font-size: 20px;
    line-height: 45px;
    font-weight: 400;
    width: 75%
}

section.contactsec:before {
    content: "";
    background: #4265cc;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 36%;
    background-size: contain;
    z-index: -1;
    height: 100%;
    background-position: center center
}

.contacttext h4 {
    color: #fff;
    font-size: 45px;
    line-height: 70px;
    font-weight: 700
}

.contactlist {
    padding: 39px 0 32px;
}

.contactlist ul li p {
    color: #fff;
    font-size: 20px;
    line-height: 42px;
    font-weight: 400;
    width: 100%
}

.contactlist ul li a {
    color: #fff;
    font-size: 20px;
    line-height: 42px;
    font-weight: 400;
    text-decoration: none
}

.contactlist ul li {
    padding: 32px 0 0;
    width: 58%;
    list-style: none
}

.scroll-line-text,
.socailicon ul {
    display: flex
}

.socailicon ul li {
    font-size: 24px;
    margin: 0 .6vw;
    list-style: none
}

.contactinput label {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    margin: 6px 5px
}

.contactinput input,
.contactinput select {
    font-weight: 400;
    background-color: transparent;
    color: #060506;
    height: 50px
}

.contactinput input {
    font-size: 14px;
    line-height: 24px;
    border: 0;
    border-bottom: 1px solid #707070;
    border-radius: 0;
    margin-bottom: 1vw
}

.contactinput select {
    font-size: 17px;
    line-height: 20px;
    border: 0;
    border-bottom: 1px solid #707070;
    border-radius: 0
}

.contactinput i {
    position: absolute;
    bottom: 13px;
    color: #000000;
    right: 0;
    font-size: 26px
}

.form-button {
    border: 1px solid #000000;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    padding: 5px 9px;
    margin: 5px;
    border-radius: 10px;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    min-width: 20%;
    line-height: 25px;
    transition: .3s ease-in
}

.form-button-active,
.form-button:hover {
    background: #000000 !important;
    color: #fff !important
}

.contactinput .button-3 {
    background-color: #000;
    margin: 30px 0 0;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 14px 60px;
    border: 0;
    border-radius: 5px
}

.price-filter output {
    margin: 0 auto;
    display: table;
    color: #ed045b;
    font-size: 18px;
    font-weight: 400
}

.price-filter range-slider:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--track-height);
    border-radius: calc(var(--track-height)/ 2);
    background: linear-gradient(#e73f45, #e74148) 0/var(--value-percent, 0) 100% no-repeat #bebebe !important
}

.price-filter .thumb {
    background-color: #e7454c
}

.inp-rd,
nav {
    display: flex;
    justify-content: space-between
}

.inp-rd h6 {
    color: #bebebe;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500
}

.bg-footer {
    padding: 40px 0 0;
    background: url(../images/ft.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
}

.bg-footer .logo-img {
    filter: brightness(0) invert(1);
    width: 48%;
    display: block
}

.bg-footer .para {
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    line-height: 20px;
    width: 83%;
    padding-bottom: 20px
}

.bg-footer .social-link,
.contact-bg,
.customer-review-box p,
.nav_drpdown .dropdown,
.terms-bg p {
    padding: 10px 0
}

.bg-footer .social-link ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 20px
}

.bg-footer .payment-method ul li,
.bg-footer .social-link ul li {
    padding-right: 10px;
    list-style: none
}

.bg-footer .social-link ul li a {
    font-size: 14px;
    color: #fff
}

.bg-footer .social-link ul li .white-rec {
    background-color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 10px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bg-footer .social-link ul li .white-rec small {
    font-weight: 400;
    font-size: 10px;
    color: #000
}

.bg-footer .social-link ul li .white-rec small i {
    color: green
}

.bg-footer .social-link ul li .white-rec .review {
    padding-right: 20px
}

.bg-footer .payment-method h10 {
    font-weight: 500;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    padding-top: 10px
}

.bg-footer .footer-list h7,
.bg-footer .footer-list ul li a,
.bg-footer .lower-footer .lower-2 ul li a,
.bg-footer .news-letter .lets-talk h12,
.bg-footer .news-letter .lets-talk ul li a,
.bg-footer .news-letter h11,
.we-serve-bg .gray-box .para {
    font-weight: 400
}

.bg-footer .payment-method ul {
    display: flex;
    align-items: center;
    padding-top: 5px
}

.bg-footer .footer-list h6 {
    font-size: 26px;
    color: #ffffff;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.bg-footer .footer-list ul li {
    padding-top: 8px;
    list-style: none;
    font-size: 18px
}

.bg-footer .footer-list ul li a {
    font-size: 16px;
    color: #fff;
    transition: .5s;
    text-decoration: none
}

.bg-footer .footer-list ul li a:hover,
.bg-footer .lower-footer .lower-2 ul li a:hover,
.bg-footer .news-letter .lets-talk ul li a:hover {
    color: #7b7b7b
}

.bg-footer .news-letter {
    padding: 10px 30px 0
}

.bg-footer .news-letter h11 {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase
}

.bg-footer .news-letter .news-field {
    padding: 15px 0 0;
    position: relative
}

.news-letter-btn {
    background: 0 0;
    border: unset
}

.bg-footer .news-letter .news-field .input-news {
    padding: 8px 10px;
    margin: -2px 0 0;
    border-radius: 7px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    color: #000
}

.bg-footer .news-letter .news-field .input-news:focus {
    box-shadow: none
}

.bg-footer .news-letter .news-field .share-btn {
    position: absolute;
    top: 19px;
    right: 20px
}

.bg-footer .news-letter .news-field .share-btn a {
    color: #002664;
    font-size: 18px
}

.bg-footer .news-letter .lets-talk,
.portfolio-item {
    padding-top: 30px
}

.bg-footer .news-letter .lets-talk h12 {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase
}

.bg-footer .news-letter .lets-talk ul li {
    padding: 9px 0;
    border-bottom: 1px solid #ffffff59;
    list-style: none;
    text-decoration: none
}

.bg-footer .news-letter .lets-talk ul li a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: .5s
}

.bg-footer .lower-footer {
    border-top: 1px solid #fff;
    margin-top: 30px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bg-footer .lower-footer .lower-2 ul {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bg-footer .lower-footer .lower-2 ul li {
    padding-right: 15px;
    list-style: none
}

.bg-footer .lower-footer .lower-2 ul li a {
    font-size: 14px;
    color: #fff;
    transition: .5s;
    text-decoration: none
}

.thank-you {
    border-radius: 1rem !important;
    width: 600px
}

.thank-you-model h4 {
    font-size: 45px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 2vw;
    color: #000;
    text-transform: uppercase
}

.pkg-details p small,
.thank-you-model p,
p.first-para {
    font-size: 19px;
}

.modal-dialog-centered {
    justify-content: center;
}

.thank-you-model {
    padding: 30px
}

.our-work-content h7,
.we-serve-content h7 {
    text-transform: uppercase;
    color: #000;
    font-size: 26px;
    font-weight: 700;
    border-bottom: 1px solid #ed045b;
    width: fit-content;
    padding: 0 0 10px
}

.we-serve-bg {
    letter-spacing: 1.33px;
    font-size: 26px;
    position: relative;
    margin: 6rem 0;
}

.we-serve-bg a {
    text-decoration: none;
    color: #000
}

.we-serve-content h4 {
    letter-spacing: -.99px;
    color: #000;
    font-size: 45px;
    font-weight: 700;
    padding: 1vw 0 2vw
}

.we-serve-bg .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    right: 0;
    top: -80px
}

.gray-box.firstbox {
    background-color: #f8d9da85
}

.gray-box.firstboxx {
    background-color: #00266442
}

.gray-box.eightbox,
.gray-box.thirdbox,
.slide-item.thirdbox {
    background-color: #f9f9f9
}

.gray-box.sixbox {
    background-color: #8fad8547
}

.gray-box.tenbox {
    background-color: #f6941f54
}

.gray-box.secondbox {
    background-color: #d5dbe442
}

.gray-box.fourthbox {
    background-color: #1e83c73b
}

.gray-box.sevenbox {
    background-color: #961cc11f
}

.gray-box.twlvebox {
    background-color: #a8739d29
}

.gray-box.elevenbox {
    background-color: #d1c52724
}

.we-serve-bg .gray-box i:hover,
.we-serve-bg .gray-box:hover {
    background-color: #e53a41;
    color: #fff
}

.we-serve-bg .gray-box i:hover {
    background-color: transparent !important
}

.we-serve-bg .gray-box .icon-img img {
    width: 60px
}

.we-serve-bg .gray-box h7 {
    font-weight: 500;
    font-size: 26px;
    color: #000;
    padding: 1.2vw 0 1vw
}

.we-serve-bg .gray-box .para {
    font-size: 16px;
    color: #434242;
    margin-top: 8px
}

.we-serve-bg .gray-box {
    border: 1px solid #ddd;
    padding: 16px;
    margin: 24px;
    transition: .5s;
    height: 330px;
    border-radius: 13px;
    position: relative;
    line-height: normal
}

.contactbody {
    padding: 0 50px
}

.our-work-bg .screen {
    display: block;
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 30px 0 !important;
    border-radius: 20px;
    border: 1px solid #ddd
}

.our-work-bg .screen img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0
}

.mega-pkg-bg .pkg-details h6,
.ptf-head h2 {
    text-transform: uppercase;
    padding: 0 0 10px;
    font-weight: 700
}

.ptf-head h2 {
    margin: 0 auto;
    color: #000;
    font-size: 26px;
    border-bottom: 1px solid #ed045b;
    width: 16%
}

.ptf-head p {
    padding: 20px 0 0
}

.our-work-content h4 {
    font-size: 45px;
    color: #ed045b;
    line-height: 70px;
    padding-top: 2.5vw;
    text-transform: uppercase;
    font-weight: 700
}

.our-work-content {
    padding: 0 60px 60px 0
}

.our-work-bg-2 .screen {
    height: 350px !important
}

.our-work-inner-2 img {
    padding: 28px 0;
    object-position: top;
}

.mega-pkg-bg h4 {
    letter-spacing: -.99px;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 0;
    text-align: center;
}

.mega-pkg-bg .mega-pkg-head ul li button {
    letter-spacing: -.39px;
    color: #a2a0a0;
    font-size: 22px;
    font-weight: 700;
}

.mega-pkg-bg .mega-pkg-head ul li button:hover {
    color: #6b79cf;
}

.mega-pkg-head .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
}

.mega-pkg-head-inner .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #000 !important;
    border: 1px solid #000 !important
}

.mega-pkg-bg .mega-pkg-head-inner ul li button,
.pkg-head-child ul li button {
    letter-spacing: -.39px;
    color: #000;
    font-size: 15px;
    border: 1px solid #000;
    margin: 8px;
    width: 180px
}

.mega-pkg-bg .mega-pkg-head-inner ul#pills-tab {
    white-space: nowrap;
    padding: 18px 0;
    list-style: none;
    display: flex
}

.mega-pkg-bg .pkg-head-child ul li button {
    letter-spacing: -.39px;
    color: #000;
    font-size: 16px;
    border: 2px solid #000;
    margin: 8px;
    text-transform: uppercase;
    width: 180px;
    font-weight: 400
}

.mega-pkg-bg .pkg-head-child .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff !important;
    background: linear-gradient(#ed045b, #ef585e);
    border: 1px solid transparent;
    font-weight: 700
}

.mega-pkg-bg .pkg-details h6 {
    color: #000;
    font-size: 40px;
    border-bottom: 1px solid #002664;
    width: fit-content;
    letter-spacing: -.69px
}

.employebenfit h5:before,
.howweworktext h5:before {
    position: absolute;
    border-bottom: 1px solid #ed045b;
    bottom: -8px;
    content: ""
}

.pkg-details p {
    font-size: 50px;
    letter-spacing: -.69px;
    color: #ed045b;
    font-weight: 700
}

.employebenfit h5,
.employebenfit p,
.howweworktext h5 {
    color: #000;
    letter-spacing: -1px
}

.pkg-head-child-tab-content {
    background-color: #d5dbe442;
    padding: 30px;
    margin: 40px 0 0;
    border: 1px solid #ddd;
    border-radius: 6px
}

.pkg-details-inner ul li {
    list-style: none;
    padding: 7px 0;
    display: flex;
    font-size: 20px
}

.pkg-details-inner ul {
    padding: 10px 10px 20px
}

.pkg-details-inner .main-scroller {
    overflow-x: scroll;
    height: 100%;
    overflow-y: hidden;
    padding: 16px
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
    background: #ed045b
}

.border_red,
.border_red_d {
    border-right: 1px solid #ed045b;
    height: 70%
}

.pkg-details-inner ul li img {
    padding: 8px 10px 0 0;
    height: 22px
}

.customer-review-bg,
.employee-bg,
.employee-inner,
.testimonials-bg,
section.howweworksec {
    padding: 50px 0
}

.howweworktext h5 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
    margin: 0 0 35px;
    position: relative
}

.howweworktext h5:before {
    width: 15%;
    margin: 0 auto;
    display: table;
    left: 0;
    right: 0
}

.howweworktext h3 {
    font-size: 45px;
    line-height: 68px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 4vw
}

.employebenfit h5 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    margin: 0 0 60px;
    position: relative
}

.employebenfit h5:before {
    width: 25%;
    margin: 0;
    display: table;
    left: 0;
    right: 0
}

.employebenfit h3 {
    font-size: 50px;
    line-height: 55px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 20px
}

.employebenfit p {
    font-size: 20px;
    line-height: 32px;
    max-width: 580px;
    margin-bottom: 30px
}

.employebenfit h4 {
    font-size: 23px;
    line-height: 32px;
    color: #002664
}

.workimg {
    display: flex;
    margin-bottom: 10px;
    min-height: 70px;
    flex-direction: row;
    align-items: center
}

.workcard {
    display: flex;
    align-items: baseline
}

.border_red_d {
    border-left: 1px solid #ed045b
}

.workimg h4 {
    color: #002664;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500
}

.workcard img,
.workimg img {
    margin: 0 9px 0 0;
    object-fit: contain
}

.workbox {
    padding: 0 21px 40px 30px
}

.workbody p {
    color: #434242;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500
}

.our-cilents-bg h2,
.our-culture-bg h2 {
    color: #000;
    font-size: 45px;
    font-weight: 700
}

.our-culture-bg {
    padding: 120px 0 200px;
    position: relative
}

.our-culture-bg h2 {
    letter-spacing: -.99px;
    padding: 42px 0 0 30px
}

.our-culture-bg .culture_slide {
    padding: 30px 20px;
    border: 2px solid #ed045b;
    border-radius: 15px
}

.our-culture-bg .culture_slide h4 {
    font-size: 45px;
    line-height: 68px;
    font-weight: 700;
    color: #ed045b;
    margin-bottom: 1vw
}

.our-culture-bg .culture_slide h5 {
    font-size: 26px;
    line-height: 34px;
    color: #002664;
    height: 80px
}

.our-culture-bg .culture_slide p {
    font-size: 16px;
    line-height: 26px;
    color: #434242;
    height: 140px;
    overflow-y: scroll
}

.our-culture-bg .owl-theme .owl-nav {
    margin-top: 2.5vw;
    position: absolute;
    left: -35.5%;
    top: 200px;
    font-size: 22px;
    color: #ed045b
}

.our-culture-bg .owl-theme .owl-nav [class*=owl-]:hover,
.our-work-carousel-careers .owl-nav [class*=owl-]:hover,
.our-work-carousel-careers-2 .owl-nav [class*=owl-]:hover {
    background: 0 0;
    color: #002664;
    text-decoration: none
}

.our-work-carousel-careers .owl-nav {
    margin-top: 2.5vw;
    position: absolute;
    left: 50%;
    top: -74px;
    font-size: 22px;
    color: #ed045b
}

.our-work-carousel-careers-2 .owl-nav {
    margin-top: 2.5vw;
    position: absolute;
    left: 50%;
    top: 266px;
    font-size: 22px;
    color: #ed045b
}

.our-cilents-bg {
    padding: 0;
    margin: 70px 0
}

.our-cilents-inner img {
    width: 150px !important;
    margin: 0 auto
}

.our-cilents-bg h2 {
    line-height: 70px;
    padding: 25px 0
}

.our-cilents-bg span {
    color: #ed045b !important
}

.about-company-bg .bestwebdesignsec,
.inner-case-study-carousel-bg,
.teams_cards {
    padding: 100px 0
}

.about-company-bg h5 {
    color: #000;
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    margin: 0 0 35px;
    position: relative;
    letter-spacing: -1px
}

.abouthead h3,
.abouttext h2,
.abouttext h3,
.sec-tab h2,
.tab-cont h3 {
    margin: 0 0 1vw;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -1px
}

.abouttext p {
    color: #000;
    max-width: 580px
}

.whowetext {
    display: flex;
    flex-direction: column
}

.whowetext ul {
    order: 1
}

.about-company-bg h5:before,
.about-cont h2:before,
.abouttext h5:before,
.tab-cont h2:before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #ed045b;
    width: 15%;
    bottom: -8px
}

.abouttext h2,
.sec-tab h2,
.tab-cont h3 {
    font-size: 42px;
    line-height: 58px;
    font-weight: 700
}

.my-h3 {
    font-size: 35px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    margin: 0 0 2vw !important;
    color: #000 !important;
    text-transform: uppercase !important
}

.inf_item,
.inf_item_reverse {
    white-space: nowrap;
    font-size: 100px;
    word-spacing: 55px
}

.abouttext h3 {
    font-size: 45px;
    line-height: 60px;
    font-weight: 700
}

.abouttext {
    padding: 0 25px
}

.abouthead h3 {
    font-size: 40px;
    font-weight: 600;
    line-height: 40px
}

.aboutimg {
    padding: 0 10px
}

.aboutimg img {
    mix-blend-mode: multiply
}

.bestdesigntext h4 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 30px
}

.about-cont h2,
.about-cont h3,
.abouttext h5,
.tab-cont h2 {
    margin: 0 0 2vw;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    position: relative
}

.bestdesigntext h2 {
    font-size: 45px;
    font-weight: 700;
    line-height: 68px;
    color: #000;
    text-transform: uppercase
}

.abouthead h2 {
    color: #000;
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 1px
}

.about-cont h2,
.abouttext h5,
.tab-cont h2 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 500
}

.about-cont h3 {
    font-size: 35px;
    line-height: 40px;
    font-weight: 700
}

.aboutsec {
    padding: 3vw 0;
}

.aboutpadding {
    padding: 2vw 0
}

.aboutsec ul {
    padding: 5px 0 0 0;
    margin: 0 10px;
}

.aboutsec ul li {
    color: #838181;
    list-style: none;
    font-size: 16px;
    padding: 9px;
    margin: 0;
    border-radius: 10px;
    list-style: circle;
}

.aboutsec ul li b {
    display: block;
    color: #002664;
    font-size: 14px;
    margin: 4px 0;
}

.branding-tabs-2 li button,
.video_tabs {
    letter-spacing: -.39px
}

.awards-content h2 {
    font-size: 45px;
    font-weight: 700;
    color: #000;
    padding: 0 0 2vw
}

.awards-bg img {
    width: 160px
}

.awards-bg .item img {
    width: auto;
    margin: auto;
    height: 90px
}

section.awards-bg {
    padding: 2vw 0 5vw
}

.branding-carousel a {
    display: flex;
    align-content: center
}

.number-counter {
    padding: 80px 0
}

.counter-card {
    border-radius: 9%;
    padding: 55px 45px 39px;
    background: #fff;
    margin: 10px;
    box-shadow: 0 0 5px 1px #434242
}

.number-counter span {
    font: bold 66px/40px Neue Montreal;
    letter-spacing: -.99px;
    color: #e7383f
}

.number-counter h2 {
    letter-spacing: -.45px;
    color: #434242;
    font-size: 17px;
    padding: 10px 0;
    font-weight: 500
}

.your-story-bg h2,
.your-story-bg h3 {
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff
}

.your-story-bg h2 {
    padding: 19px 0 31px;
}

.your-story-bg h3 {
    padding: 19px 0 0
}

.your-story-bg p {
    color: #fff;
    font-size: 18px
}

.your-story-content h2,
.your-story-content h4 {
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase
}

.your-story-bg .nav-item button {
    background-color: #1e1c1c;
    margin: 15px 28px;
    box-shadow: 0 0 0 5px #544f4f69;
    border-radius: 10px;
    height: 75px;
    width: 85px;
    padding: 10px
}

.your-story-bg .nav-item img {
    width: 55px
}

.nav-pills .show>.nav-link,
.your-story-bg .nav-pills .nav-link.active {
    background-color: #fff;
    border-radius: 10px;
    height: 75px
}

.your-story-content h2 {
    font-size: 55px;
    padding: 100px 0 50px
}

.your-story-content h4 {
    font-size: 35px;
    padding: 20px 0 30px
}

.your-story-content p {
    padding: 0 70px
}

.inf-scroll {
    animation: 50s linear infinite marquee
}

.inf_item {
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: #000
}

.inf_item a {
    word-spacing: 15px
}

.inf_item a:hover {
    color: #000
}

@keyframes marquee {
    0% {
        transform: translateX(0) translateZ(0)
    }

    100% {
        transform: translateX(-445%) translateZ(0)
    }
}

.inf-scroll-reverse {
    animation: 50s linear infinite marquee-reverse
}

.inf_item_reverse {
    font-weight: 700;
    text-transform: uppercase
}

.ticker_item,
.ticker_item-reverse {
    font-size: 75px;
    font-weight: 700;
    text-transform: uppercase
}

.inf_item_reverse a {
    word-spacing: 15px;
    color: rgb(227 27 35 / 85%) !important
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(-445%) translateZ(0)
    }

    100% {
        transform: translateX(0) translateZ(0)
    }
}

@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes ticker-reverse {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    height: 5rem;
    background-color: transparent;
    padding-left: 70%
}

.ticker,
.ticker-reverse {
    height: 4rem;
    line-height: 4rem;
    padding-right: 100%;
    display: inline-block;
    white-space: nowrap
}

.ticker-reverse {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker-reverse;
    animation-name: ticker-reverse;
    -webkit-animation-duration: 25s;
    animation-duration: 38s
}

.ticker {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 15s;
    animation-duration: 28s
}

.ticker_item-reverse {
    display: inline-block;
    color: #ed045b
}

.ticker_item {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 4px #000
}

.branding-tabs li button {
    letter-spacing: -.39px;
    color: #000 !important;
    font-size: 16px;
    border: 2px solid #000 !important;
    margin: 8px;
    width: 169px;
    text-transform: capitalize;
    background-color: #ed045b
}

.branding-tabs-2 li button,
.branding-tabs-4 li button {
    color: #000 !important;
    font-size: 16px;
    border: 1px solid #000 !important;
    margin: 8px;
    width: 247px;
    text-transform: capitalize;
    background-color: #ed045b
}

.branding-tabs-4 li button {
    letter-spacing: -.1px
}

.branding-tabs-3 li button,
.branding-tabs-5 li button {
    font-size: 14px;
    border: 1px solid #000 !important;
    margin: 8px;
    text-align: left;
    text-transform: uppercase !important;
    padding: 12px 18px;
    background-color: #000 !important;
    font-weight: 700;
    color: #fff !important
}

.branding-tabs-3 li button img,
.branding-tabs-5 li button img {
    margin-right: 20px
}

.branding-tabs-3 li button {
    width: 250px
}

.branding-tabs .nav-link.active,
.branding-tabs-3 .nav-link.active,
.branding-tabs-5 .nav-link.active {
    color: #fff !important;
    background-color: #ed045b !important;
    border: 1px solid #ed045b !important
}

.branding-tabs-5 li button {
    width: 537px
}

.main-case-study {
    padding: 100px 0;
    position: relative
}

.main-case-study .view-case-img {
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.main-case-study-content {
    position: absolute;
    top: 265px;
    left: 13%;
    overflow: hidden
}

.main-case-study-content h2,
.main-case-study-content h6 {
    text-align: start;
    color: #fff;
    font-weight: 700
}

.main-case-study-content h2 {
    font-size: 50px
}

section.techies-bg {
    padding: 130px 0 20px
}

.employee-inner ul {
    overflow-x: scroll
}

.employee-inner h5 {
    color: #ed045b;
    text-transform: uppercase;
    font-weight: 600
}

.employee-inner h2,
.employee-inner h6,
.main-popup-content h5 {
    color: #002664;
    text-transform: uppercase
}

.employee-inner h6 {
    font-weight: 700
}

.employee-inner h2 {
    font-weight: 600
}

.main-popup-1 .btn-close {
    color: #fff !important;
    background-color: #ed045b;
    box-shadow: 1px 1px 10px 2px #000000bf
}

.main-popup-1 .main-popup-1-inner {
    padding: 50px
}

.main-popup-content h2 {
    font-size: 40px;
    font-weight: 700;
    padding: 0 0 20px;
    text-transform: uppercase
}

.main-popup-content h5 {
    font-weight: 700
}

.main-popup-content p {
    color: #000;
    padding: 20px 0
}

.main-popup-content ul li {
    padding: 14px 0;
    display: flex
}

.main-popup-content ul li img {
    height: 15px;
    margin: 7px 5px 0 0
}

.contact-bg .contact-img-1 {
    animation: 2s ease-in-out infinite element-3;
    width: 18% !important;
    position: absolute;
    margin: 0
}

.contact-bg .contact-img-2 {
    position: relative;
    max-height: 500px;
    width: 70%;
    object-fit: contain
}

.mbl-img-1 {
    width: 250px !important;
    height: 500px !important
}

.mbl-img-2 {
    width: 200px !important;
    height: 400px !important
}

.mbl-img-3 {
    width: 175px !important;
    height: 350px !important
}

.feebback-bg {
    padding: 40px 0 0
}

.feebback-bg h3 {
    font-size: 25px;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px
}

.feebback-bg h4 {
    font-weight: 700;
    font-size: 20px;
    color: #ed045b
}

.feebback-bg img {
    width: 50px;
    height: 50px;
    margin: 12px 10px 12px 0
}

.testimonial-cards .col-3 {
    background-color: #fff;
    box-shadow: 0 0 7px 1px #00000059;
    margin: 20px;
    border-radius: 13px
}

.testimonials-bg video {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    border-radius: 20px
}

.host-padding,
.testimonials-content {
    padding: 20px
}

.testimonials-content h2 {
    font-size: 20px;
    color: #000;
    font-weight: 700;
    line-height: 1;
    padding: 0 0 15px;
    text-align: center;
    text-transform: uppercase
}

.testimonials-content p {
    text-align: center;
    padding: 15px 0;
    height: 161px;
    overflow: scroll;
    overflow-x: hidden
}

.testimonials-content h5,
.testimonials-content h6 {
    color: #ed045b;
    text-align: center
}

.testimonials-bg .owl-theme .owl-nav {
    margin: 0 0 0 40px;
    font-size: 22px
}

.testimonials-bg .owl-theme .owl-nav [class*=owl-]:hover {
    background: #fff;
    color: #ed045b;
    text-decoration: none
}

.testimonial-video {
    display: flex;
    justify-content: center
}

.controls,
.portfolilist ul {
    justify-content: center
}

.customer-review-content h2 {
    font-size: 50px;
    font-weight: 700
}

.customer-review-box {
    padding: 30px;
    margin: 10px;
    height: 358px;
    box-shadow: 0 0 16px 7px #00000017
}

.tabbox ul li.portfoliobox,
.video_size {
    overflow: hidden;
    box-shadow: 0 0 20px 0 #00000021;
    animation: .5s forwards fadeIn
}

.customer-review-inner-1 {
    width: 80px;
    height: 80px
}

.aboutimg img,
.customer-review-inner-1 img,
.img-cont-sec-image iframe,
.img-cont-sec-image img {
    border-radius: 50px
}

.customer-review-inner h6 {
    padding: 20px 15px;
    color: #ed045b
}

.customer-review-inner-2 img {
    width: 180px !important;
    padding: 15px 0
}

.customer-review-2 p {
    height: 255px;
    overflow-y: scroll
}

.project-detail-bg {
    padding: 40px 0 80px
}

.project-detail-bg h3 {
    color: #002664;
    font-size: 28px;
    padding: 50px 0
}

.project-detail-bg h5 {
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
    color: #000
}

.project-detail-bg h1 {
    color: #002664;
    line-height: 57px;
    font-size: 45px;
    padding: 30px 0;
    font-weight: 700
}

.project-detail-bg p {
    color: #434242
}

.project-detail-bg ul li {
    list-style: none;
    font-size: 26px;
    color: #000;
    padding: 5px 0
}

.project-detail-bg ul {
    padding: 20px 0
}

.case-study-inner .thumb {
    width: 67%;
    height: 81vh;
    margin: 50px auto;
    perspective: 1000px
}

.case-study-inner .thumb a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)) 0 0/0, url("../images/case-study/mock/1.html") 0 0/cover;
    transform-style: preserve-3d;
    transition: .5s
}

.case-study-inner .thumb:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom
}

.case-study-inner .thumb a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom
}

.case-study-inner .thumb a span {
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px Montserrat;
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1
}

.case-study-inner .thumb a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, .5);
    transition: .5s;
    opacity: .15;
    transform: rotateX(95deg) translateZ(-80px) scale(.75);
    transform-origin: bottom
}

.case-study-inner .thumb:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, .5);
    transform: rotateX(0) translateZ(-60px) scale(.85)
}

.industry-img-zoom img {
    transition: .9s;
    width: 100%;
    margin: 100px auto;
    object-fit: contain;
    height: 100%
}

.industry-img-zoom img:hover {
    transform: scale(.7);
    transition: .9s
}

.industry-vide-sec {
    padding: 200px 0 100px
}

.meet-our-team-inner {
    position: absolute;
    top: 48%;
    padding: 0 auto
}

.meet-our-team-inner h4 {
    font-size: 45px;
    font-weight: 700;
    color: #fff
}

.case-study-content {
    padding: 30vh 0 52px;
    height: auto
}

.case-study-content h1 {
    font-size: 100px !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase
}

.case-services-provide,
.portfolio-section,
section.portfoliosec {
    padding: 150px 0
}

.case-services-provide .contact-img-1 {
    animation: 4s ease-in-out infinite element-3;
    width: 30%;
    position: absolute;
    margin: 0
}

.case-services-provide .contact-img-2 {
    animation: 3s ease-in-out infinite element-4;
    width: 60%;
    position: relative;
    left: 120px
}

@keyframes element-4 {

    0%,
    100% {
        transform: translatex(0)
    }

    50% {
        transform: translatex(40px)
    }
}

.case-services-provide .contact-img-3 {
    animation: 2s ease-in-out infinite element-5;
    width: 60%;
    position: relative;
    right: 90px
}

@keyframes element-5 {

    0%,
    100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(40px)
    }
}

.ellipse-bg .contact-img-1 {
    animation: 4s ease-in-out infinite element-3;
    width: 30% !important;
    position: absolute;
    margin: -190px 0 0
}

.portfolio-overlay::after,
.portfolio-overlay::before {
    width: 0;
    height: 0;
    border-width: 0;
    z-index: 3;
    position: absolute;
    content: ""
}

@keyframes element-3 {

    0%,
    100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(40px)
    }
}

.terms-bg h2 {
    color: #000;
    font-weight: 700;
    padding: 30px 0
}

.terms-bg h5 {
    color: #002664
}

.terms-bg ul li {
    list-style: none;
    padding: 8px 0;
    display: flex
}

.terms-bg ul li img {
    width: 35px;
    height: 25px;
    padding: 5px 5px 0 0
}

.control,
.portfolilist ul li a {
    font-size: 15px;
    margin: 5px;
    cursor: pointer;
    width: 200px
}

.control,
.portfolilist ul li {
    padding: 8px 10px
}

.portfolio-section h2 {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase
}

.control {
    color: #000;
    border: 1px solid #000;
    border-radius: 3px;
    -webkit-transition: 5s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    transition: .5s
}

.control:hover {
    background: #343a40
}

.mixitup-control-active,
.portfolilist ul li a.active {
    color: #fff;
    background: linear-gradient(#ed045b, #ef585e)
}

.fancybox-container button:focus {
    outline: 0;
    box-shadow: none
}

.pd {
    padding: 10px
}

.pd img {
    height: 180px;
    transition: .5s
}

.portfolio-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    transition: .5s;
    transform: scale(0)
}

.nav_drpdown2,
.nav_drpdown3 {
    background: 0 0 !important;
    opacity: 1;
    z-index: 999;
    border-radius: 5px;
    width: 400px
}

.portfolio-overlay a,
.portfolio-overlay p {
    position: relative;
    z-index: 4
}

.portfolio-overlay::before {
    left: 10%;
    top: 10%;
    transition: height 50ms 150ms
}

.portfolio-overlay::after {
    right: 10%;
    bottom: 10%;
    transition: width .1s .2s
}

.portfolio-item:hover .portfolio-overlay::before {
    width: 80%;
    height: 80%;
    border-top: 1px solid #50977f;
    border-right: 1px solid #50977f;
    transition: width .1s .3s, height .1s .5s
}

.portfolio-item:hover .portfolio-overlay::after {
    width: 80%;
    height: 80%;
    border-bottom: 1px solid #50977f;
    border-left: 1px solid #50977f;
    transition: width .1s .6s, height .1s .7s
}

.portfolio-item li:hover .portfolio-overlay {
    visibility: visible;
    transform: scale(1)
}

.portfolio-overlay .category {
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 500
}

.portfolio-overlay .magnify-icon {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #50977f;
    margin: 0 5px;
    cursor: pointer;
    display: inline-block;
    transition: .25s
}

.portfolio-scroll .screen,
.portfolio-scroll .screen-2,
.portfolio-scroll .screen-3,
.portfolio-scroll .screen-4 {
    margin: 30px 0 !important;
    border-radius: 20px;
    box-shadow: -3px 1px 8px 3px #00000030;
    width: 100%
}

.portfolio-overlay .magnify-icon:hover {
    background: #000
}

.portfolio-overlay .magnify-icon p span i {
    font-size: 15px;
    color: #fff;
    line-height: 40px;
    cursor: pointer
}

.portfolio-scroll .screen {
    display: block;
    height: 350px;
    overflow: hidden;
    position: relative
}

.portfolio-scroll .screen img {
    bottom: -1400px;
    width: 100%;
    height: auto;
    position: absolute;
    margin: 0;
    padding: 0;
    -webkit-transition: top 11s;
    -moz-transition: top 11s;
    -ms-transition: top 11s;
    -o-transition: top 11s
}

.portfolio-scroll .screen:hover img {
    bottom: 0;
    -webkit-transition: 11s;
    -moz-transition: 11s;
    -ms-transition: 11s;
    -o-transition: 11s;
    transition: 11s
}

.portfolio-scroll .screen-2 {
    height: 350px;
    overflow: hidden;
    transition: transform .3s
}

.portfolio-scroll .screen-2 img {
    width: 100%;
    height: 350px;
    margin: 0;
    padding: 0;
    transition: transform .3s
}

.portfolio-scroll .screen-2:hover img,
.portfolio-scroll .screen-3:hover img {
    transform: scale(1.2);
    border-radius: 25px
}

.portfolio-scroll .screen-3 {
    height: 600px;
    overflow: hidden;
    transition: transform .3s
}

.portfolio-scroll .screen-3 img {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    transition: transform .3s
}

.portfolio-scroll .screen-4 {
    height: 400px
}

.portfolio-scroll .screen-4 img {
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    transition: transform .3s
}

.portfolio-inner .screen-4 {
    margin: 20px 0
}

.aboutimg .aos-init.aos-animate {
    transform: translateX(0) !important
}

.aboutimg .tab-pane img {
    height: 562px;
    max-height: 100%;
    object-fit: cover;
}

.nav_drpdown {
    position: relative;
    background: 0 0 !important;
    opacity: 1;
    z-index: 999;
    border-radius: 5px;
    padding: 0 !important
}

.nav_drpdown3 {
    position: absolute;
    top: 373px;
    left: 280px
}

.nav_drpdown2 {
    padding: 0 0 0 30px;
    position: absolute;
    top: 114px;
    left: 66%
}

@keyframes Leftbefore {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.Leftbefore {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    z-index: 0
}

.cursor,
.tabbox,
.video_size {
    display: none
}

.Leftbefore:before {
    width: 100%;
    will-change: transform;
    position: absolute;
    top: -5px;
    bottom: 0;
    left: 0;
    background-color: #000;
    content: "";
    z-index: 2;
    -webkit-transform: translate3d(101%, 0, 0);
    transform: translate3d(101%, 0, 0);
    height: 105%;
    -webkit-animation-duration: .8;
    animation-duration: 1.9s;
    -webkit-animation-name: Leftbefore;
    animation-name: Leftbefore
}

.portfolilist ul {
    display: flex;
    align-items: center;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto 3%
}

.tabbox ul,
.team_card ul {
    display: grid;
    gap: 25px;
    list-style: none;
    grid-area: auto
}

.portfolilist ul li a {
    color: #000;
    border: 1px solid #000;
    padding: 8px 10px;
    border-radius: 3px;
    -webkit-transition: 5s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    transition: .5s;
    text-decoration: none;
    display: block;
    text-align: center
}

.tabbox ul li.portfoliobox {
    position: relative;
    margin: 30px 0;
    border-radius: 20px;
    height: 320px;
    width: 100%;
    transform: inherit;
    transition: 1s;
    transform: scale(1.5);
    border: 2px solid #dbdbdb
}

.tabbox ul li.portfoliobox .cap-box {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    0;
    bottom: 30px;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-transition: .5s;
    transition: .5s
}

.tabbox ul li.portfoliobox .cap-box .quotebtnbox {
    position: relative;
    display: block;
    padding: 25px 35px;
    border-radius: 7px
}

.cta-back-1,
.cta-women,
.cursor,
.cursor::after {
    position: absolute
}

.tabbox ul li.portfoliobox .portfolioinnerbox:before {
    content: "";
    position: absolute;
    background-color: rgb(0 0 0 / 60%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .5s ease-in-out
}

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

.portfoliobox.cntr a img {
    object-position: center
}

.portfoliobox.cntr2 a img {
    object-position: left
}

.cntr2 {
    margin: 10px 0 !important;
    height: 260px !important;
    width: 100% !important
}

.item:hover .inner-box,
.tabbox ul li.portfoliobox:hover .portfolioinnerbox:before {
    opacity: 1
}

.tabbox ul li.portfoliobox:hover .cap-box {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

@keyframes fadeIn {
    100% {
        opacity: 1;
        transform: none
    }
}

.portfolilist.inner_tab-navs ul {
    display: flex;
    width: 100%;
    gap: 5px;
}

.portfolilist.inner_tab-navs ul li a {
    width: auto;
    white-space: nowrap;
    padding: 8px 15px;
    margin: 0
}

.portfolio-section .d-grid {
    gap: 25px
}

.industry_video-wrapper {
    overflow: hidden;
    height: 90vh;
    text-align: center
}

.industry_video.aos-init {
    transform: scale(1.5)
}

.industry_video.aos-init.aos-animate {
    transform: scale(1)
}

.industry-img-zoom {
    max-height: unset;
    width: 80%;
    overflow: hidden;
    margin: 0 auto
}

.h-88vh img {
    height: 88vh
}

.inner_case-detail-txt h3 {
    color: #000;
    font-size: 36px;
    padding: 40px 0 20px;
    font-weight: 700
}

.inner_case-detail-txt h5 {
    padding: 10px 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
    color: #000
}

.inner-case-study-carousel-bg .item {
    cursor: grab
}

.pt-150 {
    padding-top: 150px !important
}

.py-4 .container .row .fadeInLeft img {
    max-height: 400px;
    width: 100%;
    object-fit: contain
}

.cursor {
    border-radius: 50%;
    z-index: 9999999
}

.cursor::after {
    content: "drag";
    width: 110px;
    height: 105px;
    border: 2px solid #000;
    border-radius: 50%;
    opacity: 1;
    top: -33px;
    left: -38px;
    padding: 12px 0 4px;
    font-size: 0px;
    text-align: center
}

.pager__item {
    width: 100%;
    text-align: center;
    padding: 2px 4px;
    background-color: #1e1c1c;
    height: 1px;
    border-radius: 2px;
    margin: 0
}

.slick-active .pager__item {
    background: #fff
}

.nav-bar-number p {
    font-size: 11px;
    line-height: 10px
}

.resize_images img {
    height: 500px;
    object-fit: cover
}

.mobile-dev-page-carousel {
    object-fit: contain !important
}

.teams_card {
    padding: 0 50px 30px
}

.teams_card h2 {
    font-size: 45px;
    font-weight: 700;
    line-height: 68px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center
}

.teams_card p {
    color: #fff;
    margin-bottom: 30px;
    text-align: center
}

.team_card ul {
    grid-template-columns: auto auto auto auto
}

.team_card ul li.teambox {
    overflow: hidden;
    position: relative;
    margin: 30px 0 !important;
    border-radius: 20px;
    box-shadow: -3px 1px 8px 3px #00000030;
    height: 450px
}

.teambox img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 1;
    -webkit-transition: 1s;
    transition: 1s
}

.fast-food-page-carousal img {
    width: 40% !important
}

.video_size {
    margin: 30px 0;
    border-radius: 20px;
    transform: inherit;
    transition: 1s;
    transform: scale(1.5);
    border: 2px solid #dbdbdb
}

.video_tabs {
    background: 0 0;
    color: #000;
    font-size: 16px;
    border: 1px solid #000;
    margin: 8px;
    font-weight: 700;
    text-transform: uppercase;
    width: 180px;
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.inner-box,
.inner-box a {
    transition: .3s ease-out
}

.video_tabs:active,
.video_tabs:focus,
.video_tabs:target {
    color: #fff !important;
    background: linear-gradient(#ed045b, #ef585e);
    border: 1px solid transparent
}

.video_tabbing {
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.video_tabbing::-webkit-scrollbar {
    display: none
}

.noContent {
    color: #000 !important;
    background-color: transparent !important
}

.cta-women {
    width: 43%;
    left: 6%;
    bottom: 0;
    z-index: 99
}

.cta-box {
    background: #ed045b;
    border-radius: 9px;
    position: relative;
    padding: 50px 0;
    width: 91%;
    margin: 13rem 0 0
}

.cta-box-content {
    padding: 0 0 0 14%
}

.cta-box h1 {
    font-size: 50px;
    color: #fff;
    font-weight: 700
}

.cta-box h2 {
    font-size: 15px;
    color: #000;
    font-weight: 700
}

.cta-box p {
    font-size: 23px;
    color: #fff;
    font-weight: 500
}

.cta-back-1 {
    width: 10%;
    left: 31%;
    top: 0
}

.cta-back-2,
.cta-back-3 {
    width: 5%;
    left: 51%;
    position: absolute
}

.cta-back-2 {
    top: -4%
}

.cta-back-3 {
    top: 0
}

.cta-back-4 {
    width: 6%;
    top: 35%;
    right: 5%;
    position: absolute;
    animation-name: spin;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.cta-back-5 {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background: #ed045b;
    top: -7%;
    right: 19%;
    position: absolute;
    box-shadow: 1px 0 20px 20px #ed045b;
    -webkit-animation: .5s infinite alternate scrollDownAnimation
}

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

    to {
        transform: translateY(-10px)
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.sec-margin {
    margin: 7rem 0
}

.tab-btn {
    padding: 0 0 0 10px
}

.tabs-btn {
    width: 316px
}

.host-sec {
    padding: 20px 20px 40px;
    background-color: #fff;
    box-shadow: 0 1px 5px 7px #a1949461;
    border-radius: 20px
}

.host-sec img {
    width: 10%;
    object-fit: cover;
    padding-bottom: 10px
}

.host-row {
    margin-top: 30px;
    justify-content: center
}

.host-row div {
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center
}

.host-sec h3 {
    color: #002664;
    font-size: 22px;
    line-height: 20px;
    font-weight: 500
}

.host-sec p {
    margin-top: 5px;
    padding-top: 0
}

.web-cont h2 {
    font-weight: 600;
    font-size: 40px;
    margin-bottom: 20px;
    text-transform: uppercase
}

.hero_content h1,
.hero_content h4 {
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    text-transform: uppercase
}

.web-cont {
    margin-bottom: 60px
}

.banner-text-rotate-2 {
    position: absolute;
    right: 5%;
    top: 8%
}

.hero_background .row {
    justify-content: center;
    text-align: center;
    padding: 50px 0 0 30px
}

.hero_content h1 {
    font-size: 45px;
    padding: 35px 15px 15px
}

.hero_content h4 {
    font-size: 20px;
    padding: 15px
}

.hero_content p,
.img-cont-sec-content p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
    padding: 0 15px 15px
}

.social-media-icons {
    position: fixed;
    bottom: 100px;
    left: -30px
}

.hero_background {
    background-size: cover;
    background-repeat: no-repeat;
}

.hero_background .row .col .text {
    color: #d71921;
    font-size: 45px;
    border-radius: 10px;
    background-color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 15px;
    border: 2px solid #000
}

.img-cont-sec-content h5::after {
    content: ' ';
    width: 60%;
    display: block;
    border-bottom: 2px solid #ed045b;
    margin: 5px 0 0;
    margin: 10px auto 0;
}

.img-cont-sec-content h5 {
    color: #000;
    font-weight: 700;
    width: fit-content;
    text-transform: uppercase;
    margin: 0 0 13px;
    font-size: 25px
}

.img-cont-sec-content {
    padding: 0;
}

.img-cont-sec-content p {
    color: #000000b8;
    padding: 15px 0
}

.img-cont-sec-content h2,
.modal-body h5 {
    font-weight: 700;
    font-size: 37px;
}

.section-padding3 {
    padding: 0 0 75px
}

.card-sec-border {
    border-right: 2px solid #ed045b;
    height: 70%;
    padding: 0 25px 0 0 !important
}

.client-box,
.inner-box,
.web-button {
    width: 100%;
    height: 100%
}

ce {
    display: flex;
    align-items: baseline;
    padding: 0 35px;
    margin: 20px 0
}

.workcard h4 {
    color: #002664;
    font-size: 26px;
    line-height: 34px;
    font-weight: 500;
    margin-bottom: 10px
}

.workcard p {
    color: #434242;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500
}

.your-story-bg {
    background: #ce034e;
    padding: 95px 100px;
    margin: 0
}

.faq h5::after {
    width: 100% !important
}

.client-box {
    position: absolute;
    top: 0;
    padding: 28px 0
}

.item:hover .inner-box a {
    transform: translateY(0);
    opacity: 1
}

.inner-box {
    background-color: #00000075;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    gap: 20px
}

.inner-box a {
    text-decoration: none;
    color: #fff;
    font-size: 22px;
    transform: translateY(100%);
    letter-spacing: 1.33px
}

.inner-box .btn-clr {
    background-color: #101c3d;
    box-shadow: inset 0 0 0 0 #101c3d;
    border-color: #101c3d
}

.banner-btn-2-slide:hover {
    box-shadow: inset 400px 0 0 0 #000;
    border-color: #000
}

.our-cilents-carousel .item {
    box-shadow: 0 0 18px 2px #0000001f;
    padding: 10px;
    margin: 15px 0;
    background: #fff
}

.web-button {
    position: absolute !important;
    top: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.img-cont-sec-content.left {
    padding: 0 0 0 90px
}

.mega-pkg-bg {
    padding: 5rem 0;
    background: url(../images/pattern-1.webp);
    color: #fff;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

.mega-pkg-bg h2 {
    margin: 0 0 1rem 0;
    color: #181515;
}

.mega-pkg-bg .crd_1 {
    background: #ffffff;
    padding: 2rem 2rem;
    border-radius: 12px;
    border: 2px solid #4664cb45;
    transition: all 0.2s ease-in;
    height: 672px;
}

.mega-pkg-bg .crd_1.active {
    background: #d9ddebbf;
}

.mega-pkg-bg .crd_1:hover {
    background: #d9ddebbf;
}

.mega-pkg-bg .crd_1 h4 {}

.mega-pkg-bg .crd_1 h3 {
    text-align: center;
    font-weight: 800;
    font-size: 3rem;
    color: #396dd8;
    display: none;
}

.mega-pkg-bg .crd_1 p {
    font-size: 14px;
    text-align: center;
}

.mega-pkg-bg .crd_1 span {
    text-align: center;
    display: block;
    padding: 10px 0 0;
    color: #767070;
}

.mega-pkg-bg .crd_1 ul {
    background: #d9ddebbf;
    overflow-y: scroll;
    height: 270px;
    margin: 26px 0;
    padding: 12px 32px;
    border-radius: 5px;
}

.mega-pkg-bg .crd_1:hover li::after {
    transform: rotate(50deg);
}

.mega-pkg-bg .crd_1 li {
    list-style: none;
    line-height: 2.3;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    position: relative;
}

.mega-pkg-bg .crd_1 li::After {
    content: '';
    position: absolute;
    width: 23px;
    height: 23px;
    background: url(../images/check.webp) no-repeat;
    left: -26px;
    border-radius: 50%;
    background-position: 100% 100%;
    background-size: cover;
    top: 4px;
    transition: all 0.4s ease-in;
}

.mega-pkg-bg .crd_1 .btns {}

.mega-pkg-bg .crd_1 .btns button {
    width: 100%;
    display: block;
    border: none;
    margin: 10px 0;
}

.mega-pkg-bg .crd_1 .btns a {
    margin: 0;
    text-align: center;
    background: linear-gradient(90deg, rgba(55, 111, 218, 1) 0%, rgba(212, 0, 74, 1) 100%);
}

@media screen and (min-width: 1500px) {
    .banner-content2 {
        padding: 47vh 0 52px !important
    }
}

@media screen and (min-width: 900px) {
    .inverse {
        order: 1;
        display: flex
    }
}

@media screen and (max-width: 900px) and (min-width:725px) {

    .inf_item,
    .inf_item_reverse {
        word-spacing: 15px
    }

    .navigation__bar {
        padding: 0 20px;
        height: 75px
    }

    h8 {
        font-size: 40px;
        font-weight: 700
    }

    .banner-text-rotate-2,
    .checklist,
    .display-small-hidden,
    .nav-bar-contact,
    .pkg-details h4 small,
    .scrol {
        display: none
    }

    a.company-logo img {
        width: 135px
    }

    .menu-gif {
        width: 25px !important
    }

    .aboutsec ul,
    .abouttext,
    .banner-btn,
    .banner-content,
    .contact-bg,
    .contactbody,
    .employee-bg,
    .number-counter,
    .our-cilents-bg,
    .teams_card,
    .type-text,
    section.techies-bg {
        padding: 0
    }

    .banner-text-rotate .rotate-text svg {
        width: 50px
    }

    .cta-btns {
        margin: 25% 0 0
    }

    .banner-btn-2 {
        padding: 10px 0;
        height: 40px;
        width: 220px;
        line-height: 20px
    }

    .banner-btn-1 {
        padding: 0;
        height: 40px;
        width: 220px
    }

    .banner-btn-3,
    .contactlist,
    .employee-inner,
    .our-services-bg .services-content,
    .pkg-details-inner ul {
        padding: 10px 0
    }

    .banner-btn a,
    .cta-box h2 {
        font-size: 10px !important;
    }

    .banner-btm-bg,
    .our-work-carousel,
    .we-serve-carousel-2:first-child {
        display: none !important
    }

    .our-services-bg .services-content h2 {
        font-size: 25px;
        padding: 0 0 20px
    }

    .our-services-bg .services-content h5 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        letter-spacing: 1px
    }

    .services-content p {
        width: 100%
    }

    .services-eagle {
        width: 100% !important
    }

    .our-services-bg .owl-theme .owl-nav {
        bottom: -6%;
        left: 3%;
        margin: 0 auto
    }

    .main-services {
        margin: 40px 0 !important
    }

    .case-study-bg .case-study-inner .upper-text h1 {
        font-size: 30px;
        padding: 20px 10px
    }

    .case-study-bg .case-study-inner .upper-text h6,
    .project-detail-bg ul li,
    .testimonial-bg .testimonial-content h6,
    .we-serve-content h6 {
        font-size: 15px;
        padding: 0
    }

    .case-study-bg .case-study-inner,
    .case-study-bg .view-study-inner {
        padding: 35px 0
    }

    .banner-text-rotate-2 .card-content {
        height: 120px;
        width: 100px
    }

    .view-case-content {
        right: -194px;
        left: 2px;
        top: 170px
    }

    .view-case-content h2 {
        font-size: 35px;
        letter-spacing: .03px
    }

    .banner-btn-3 {
        height: 40px;
        font-size: 12px !important;
        width: 139px;
        margin: 8px 0
    }

    .case-study-bg .item-counter {
        padding: 5px 0 0 5px
    }

    .banner-text-rotate-2 .rotate-text svg {
        width: 85px
    }

    .case-study-bg .view-case-img {
        margin: 0 0 0 10px;
        box-shadow: 0 0 0 0 #000000d9
    }

    .view-case-content h5 {
        font-size: 13px;
        padding: 4px 0
    }

    .testimonial-i-img img {
        width: 77% !important;
        right: 6%;
        top: 38px
    }

    .testimonial-bg {
        padding: 60px 0
    }

    .testimonial-bg .testimonial-content h2 {
        font-size: 20px;
        padding: 10px 0 0
    }

    .testimonial-content p {
        height: 255px;
        overflow: scroll;
        padding: 5px 0
    }

    .testimonial-content {
        background: no-repeat padding-box #002664;
        padding: 60px 25px 15px;
        height: 90vh
    }

    .testimonial-bg .owl-nav {
        bottom: 0;
        left: 33%
    }

    .mega-pkg-bg h2 {
        font-size: 30px;
        padding: 20px 0
    }

    .pkg-details h4 {
        font-size: 20px;
        font-weight: 500
    }

    .mega-pkg-bg .pkg-details h3 {
        font-size: 12px;
        letter-spacing: .31px
    }

    .mega-pkg-bg .pkg-head-child ul li button {
        width: 119px;
        justify-content: center
    }

    .sec-paqs {
        margin: 0 0 50px
    }

    .sec-paqs .faqs-box .accordion-item .accordion-body,
    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 14px
    }

    .pkg-details-inner ul li {
        font-size: small
    }

    .banner-btn-4,
    .banner-btn-5 {
        padding: 10px 0;
        height: 40px;
        width: 230px;
        font-size: 11px;
        margin: 20px 5px !important
    }

    .sec-paqs .sec-title h2 {
        font-size: 25px;
        line-height: 30px;
        padding-top: 20px
    }

    .number-counter h2,
    .our-work-content h6,
    .sec-paqs .sec-title h5 {
        font-size: 15px
    }

    .sec-paqs .faqs-box .faqs-2 {
        padding-left: 0
    }

    .we-serve-bg {
        padding: 10px;
        letter-spacing: 1.33px;
        font-size: 20px
    }

    .we-serve-content h2 {
        font-size: 22px;
        padding: 18px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        margin-top: 10px;
        position: absolute
    }

    .mega-pkg-bg .mega-pkg-head ul li button {
        letter-spacing: .61px;
        font-size: 13px
    }

    .mega-pkg-bg .mega-pkg-head .nav-link {
        display: flex;
        padding: .5rem
    }

    .our-work-bg .screen {
        width: 100%;
        height: 300px
    }

    .customer-review-bg,
    section.our-work-bg,
    section.our-work-bg-2 {
        padding: 0 0 50px
    }

    .our-work-content {
        margin: 24px 0 0;
        padding: 0;
        text-align: center !important
    }

    .meet-our-team-inner {
        top: 44%
    }

    .awards-content h2,
    .banner-content h4,
    .meet-our-team-inner h1 {
        font-size: 20px
    }

    section.contactsec:before {
        content: "";
        width: 100%
    }

    .contacttext,
    section.contactsec {
        padding: 10px
    }

    .contacttext h4 {
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        padding: 0 0 10px
    }

    .contactlist ul li,
    .contacttext p {
        padding: 0;
        width: 100%;
        text-align: center
    }

    .contacttext p {
        font-size: 16px;
        line-height: 27px
    }

    .contactlist ul li {
        list-style: none
    }

    .contactlist ul li p {
        font-size: 14px;
        line-height: 25px;
        width: 100%;
        text-align: center
    }

    .contactlist ul li a {
        font-size: 14px;
        text-align: center
    }

    .socailicon ul {
        justify-content: space-evenly;
        padding: 0 0 17px
    }

    .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f5efef;
        outline: 0;
        box-shadow: unset
    }

    .contactinput input::-webkit-input-placeholder {
        color: #f5efef
    }

    .contactinput input::-moz-placeholder {
        color: #f5efef
    }

    .contactinput input::-ms-placeholder {
        color: #f5efef
    }

    .contactinput input::placeholder {
        color: #f5efef
    }

    .contactinput i,
    .contactinput select {
        color: #f5efef
    }

    .contactinput option {
        color: red
    }

    .center-res {
        text-align: center
    }

    .center-res img {
        margin-bottom: 10px
    }

    .center-res p {
        width: 100% !important;
        font-size: 11px !important;
        text-align: left;
    }

    .bg-footer .row div:nth-child(0),
    .bg-footer .row div:nth-child(3) {
        order: 3
    }

    .aboutsec div:first-child,
    .bg-footer .row div:first-child {
        order: 1
    }

    .bg-footer .row div:nth-child(2) {
        order: 4
    }

    .aboutsec div:nth-child(0),
    .bg-footer .row div:nth-child(4) {
        order: 2
    }

    .bg-footer .row div:nth-child(5) {
        order: 5
    }

    .bg-footer .social-link ul {
        justify-content: center
    }

    .payment-method img {
        width: 75%
    }

    .bg-footer .footer-list h4 {
        font-size: 18px
    }

    .bg-footer .footer-list ul li a {
        font-size: 13px
    }

    .bg-footer .news-letter {
        padding: 30px 0 0;
        text-align: center
    }

    .abouttext p,
    .bg-footer .news-letter .lets-talk ul li a,
    .bg-footer .news-letter h5,
    .feebback-bg h4,
    .teams_card p {
        font-size: 13px;
    }

    .bg-footer .lower-footer {
        border-top: none;
        margin-top: 5px;
        padding: 12px 0;
        display: block;
        text-align: center
    }

    .bg-footer .lower-footer .lower-1 {
        margin: 0 0 10px
    }

    .image-banner img {
        height: 60vh
    }

    .aboutsec,
    .industry-vide-sec,
    .inner-case-study-carousel-bg,
    .project-detail-bg,
    section.portfoliosec {
        padding: 25px 0
    }

    .industry_video-wrapper {
        height: 30vh
    }

    .banner-content h1 {
        font-size: 27px
    }

    .banner-content span {
        font-size: 19px;
        padding: 0 5px
    }

    .aboutsec .row {
        flex-direction: row
    }

    .abouttext h5 {
        font-size: 13px;
        margin: 9px 0
    }

    .abouttext h5:before {
        bottom: 3px
    }

    .abouttext h3 {
        font-size: 20px;
        line-height: 25px
    }

    .abouttext .banner-btn {
        margin: 15px 0
    }

    .inf_item {
        font-size: 0
    }

    .inf_item a,
    .inf_item_reverse a {
        font-size: 35px;
        word-spacing: 0px
    }

    .aboutsec ul li {
        width: 100%;
    }

    .branding-tabs li button {
        font-size: 13px;
        width: 90%
    }

    .aboutimg .tab-pane img {
        height: auto
    }

    .workcard {
        display: flex;
        align-items: baseline;
        padding: 0;
        margin: 20px 0
    }

    .border_red {
        border-right: none
    }

    section.howweworksec {
        padding: 30px 0
    }

    .counter-card {
        border-radius: 9%;
        padding: 0;
        background: 0 0;
        margin: 10px;
        box-shadow: unset;
        text-align: center
    }

    .feebback-bg h3,
    .main-case-study-content h2,
    .number-counter span {
        font-size: 25px
    }

    .owl-carousel .owl-item img {
        width: 100%;
        margin: 0 0 0 29px
    }

    .resize_images img {
        height: 300px
    }

    .our-culture-bg {
        padding: 0;
        margin: 0 0 50px
    }

    .our-culture-bg h2 {
        letter-spacing: 1px;
        font-size: 25px;
        padding: 0 0 25px
    }

    .our-culture-bg .owl-theme .owl-nav {
        left: 40%;
        top: 96%
    }

    .our-culture-bg .culture_slide {
        padding: 10px;
        text-align: center;
        margin: 0 0 0 109px !important;
        width: 101%;
        height: 259px
    }

    .our-culture-bg .culture_slide h4 {
        font-size: 31px;
        line-height: 18px
    }

    .our-culture-bg .culture_slide h5 {
        font-size: 20px;
        line-height: 27px;
        height: auto
    }

    .our-culture-bg .culture_slide p {
        font-size: 16px;
        line-height: 25px;
        height: auto
    }

    .bestdesigntext h2 {
        font-size: 25px;
        line-height: 34px
    }

    .employee-inner p {
        padding: 0;
        margin: 0 0 20px
    }

    .teams_cards {
        padding: 20px 0
    }

    .teams_card h2 {
        font-size: 25px;
        line-height: 2px
    }

    .team_card ul li.teambox {
        margin: 5px 0 !important;
        height: auto
    }

    .tabbox ul li.portfoliobox {
        height: 240px;
        width: 300px
    }

    .portfoliobox a img {
        object-fit: cover;
        width: 100% !important;
        margin: 0 !important
    }

    .portfoliobox.cntr a img {
        object-position: center
    }

    .cntr2 {
        margin: 10px 0 !important;
        height: 240px !important;
        width: 300px !important
    }

    .portfoliobox.cntr2 a img {
        object-position: top;
        object-fit: fill
    }

    .testimonials-bg {
        padding: 50px 0
    }

    .testimonials-bg video {
        width: 96%;
        height: auto
    }

    .testimonials-content h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0
    }

    .testimonials-content {
        padding: 0 0 0 14px
    }

    .testimonials-content p {
        padding: 25px 0;
        height: 250px;
        overflow: scroll;
        overflow-x: hidden
    }

    .testimonials-bg .owl-theme .owl-nav {
        margin-top: 0
    }

    .customer-review-content h2 {
        font-size: 25px;
        padding: 0 0 25px
    }

    .menu-bg ul li a,
    .menu-us h1 {
        text-decoration: none;
        font-size: 20px
    }

    .menu-bg,
    .menu-us h1,
    .project-detail-bg ul {
        padding: 15px 0
    }

    .checklist label.btn.btn-outline-primary {
        font-size: 15px !important;
        padding: 5px 9px;
        border-radius: 10px;
        width: 45% !important;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-bg ul li a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 6px
    }

    .menu-us h1 {
        color: #000;
        font-weight: bolder
    }

    .navigation__menu {
        height: 100%;
        padding-right: 0;
        width: 100%
    }

    .navigation li {
        padding: 17px 80px 0 0
    }

    .menu-us h3 {
        padding: 20px 0;
        font-size: 18px
    }

    .case-study-bg {
        background: #1c1717;
        padding: 40px 0;
        height: 704px;
        margin: 40px 0
    }

    .case-study-bg .view-study-inner {
        padding: 0 0 170px !important
    }

    .row.services-reserve {
        flex-flow: column-reverse
    }

    .project-detail-bg h1 {
        line-height: 25px;
        font-size: 25px;
        padding: 20px 0
    }

    .project-detail-bg h5 {
        font-size: 16px;
        line-height: 26px
    }

    .h-88vh img {
        width: 100%;
        height: auto
    }

    .inner_case-detail-txt h3 {
        padding: 23px 0 0;
        font-size: 26px
    }

    .inner_case-detail-txt h5 {
        padding: 0;
        font-size: 17px
    }

    .inner-case-study-carousel-2 .px-5 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .banner-inner {
        margin: 140px 0 0
    }

    .pt-150 {
        padding-top: 25px !important
    }

    .bestdesigntext h4,
    .howweworktext h3 {
        font-size: 25px;
        line-height: 25px
    }

    .howweworktext h5 {
        font-size: 15px;
        margin: 0 0 8px
    }

    .howweworktext h5:before {
        width: 29%;
        bottom: 2px
    }

    .our-work-content h2 {
        font-size: 25px;
        padding: 0 0 28px;
        line-height: 25px
    }

    .our-work-bg .screen img {
        bottom: -640px !important
    }

    .our-work-carousel-careers .owl-nav {
        left: 44%;
        top: -35px
    }

    .our-cilents-bg h2 {
        font-size: 19px;
        line-height: 33px;
        padding: 25px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        bottom: -40px !important;
        right: 40% !important;
        top: 470px !important
    }

    .awards-bg img {
        width: 50%;
        margin: 0 auto
    }

    .industry-img-zoom img {
        margin: 50px auto
    }

    .main-case-study {
        padding: 50px 15px
    }

    .main-case-study-content {
        top: 40%;
        left: 7%
    }

    .case-study-content h1 {
        font-size: 25px !important
    }

    .case-study-content h3,
    .case-study-content h4 {
        font-size: 12px
    }

    .case-study-content {
        padding: 18px 0 0;
        height: 102px
    }

    .project-detail-bg h3 {
        color: #002664;
        font-size: 28px;
        padding: 10px 0
    }

    .case-services-provide .contact-img-2 {
        left: 0;
        top: 40px
    }

    .case-services-provide .contact-img-3 {
        right: 80px;
        top: -50px
    }

    .mbl-img-3 {
        width: 100px !important;
        height: 200px !important
    }

    .mbl-img-2 {
        width: 125px !important;
        height: 250px !important
    }

    .mbl-img-1 {
        width: 150px !important;
        height: 300px !important
    }

    .contactform {
        margin: 0
    }

    .feebback-bg {
        padding: 40px 0 0
    }

    .contact-bg .contact-img-1 {
        width: 24% !important;
        margin: 0 0 50px
    }

    .your-story-bg {
        margin: 50px 0 0
    }

    .your-story-bg .nav-item button {
        margin: 15px
    }

    .your-story-content h2 {
        font-size: 30px;
        padding: 0
    }

    .your-story-bg h2 {
        font-size: 25px;
        padding: 10px 0 20px
    }

    .portfolio-scroll .screen-2,
    .portfolio-scroll .screen-2 img,
    .portfolio-scroll .screen-3,
    .portfolio-scroll .screen-3 img {
        height: 100%
    }

    .portfolio-scroll .screen-3 {
        height: 100%;
        margin: 0
    }

    .portfolio-scroll .screen img {
        bottom: -390px
    }

    .portfolio-section .d-grid {
        grid-template-columns: auto;
        gap: 0
    }

    .portfolio-section {
        padding: 50px 0 0
    }

    .sec-margin {
        margin: 10rem 0 7rem !important
    }

    .cta-back-4 {
        width: 30% !important;
        top: -19% !important;
        right: 72% !important
    }

    .cta-back-5 {
        width: 40px !important;
        height: 39px !important;
        top: -23% !important;
        right: 8% !important
    }

    .cta-women {
        width: 45% !important;
        left: 29% !important;
        top: -41% !important;
        bottom: 0
    }

    .cta-box {
        padding: 70px 25px 25px !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important
    }

    .cta-box-content {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important
    }

    .cta-box h1 {
        font-size: 26px !important
    }

    .cta-box p {
        font-size: 18px !important
    }
}

@media screen and (max-width: 725px) and (min-width:577px) {

    .inf_item,
    .inf_item_reverse {
        word-spacing: 15px
    }

    .navigation__bar {
        padding: 0 20px;
        height: 75px
    }

    .cta-btns {
        margin: 20% 0 0
    }

    .header-btn {
        display: block
    }

    .banner-text-rotate-2,
    .checklist,
    .display-small-hidden,
    .nav-bar-contact,
    .pkg-details h4 small,
    .scrol {
        display: none
    }

    a.company-logo img {
        width: 135px
    }

    .menu-gif {
        width: 25px !important
    }

    .aboutsec ul,
    .abouttext,
    .banner-btn,
    .banner-content,
    .contactbody,
    .employee-bg,
    .number-counter,
    .our-cilents-bg,
    .teams_card,
    .type-text,
    section.our-work-bg,
    section.our-work-bg-2,
    section.techies-bg {
        padding: 0
    }

    .banner-text-rotate .rotate-text svg {
        width: 50px
    }

    .banner-btn-2 {
        padding: 10px 0;
        height: 40px;
        width: 220px;
        line-height: 20px
    }

    .banner-btn-1 {
        padding: 0;
        height: 40px;
        width: 220px
    }

    .banner-btn-3,
    .contactlist,
    .employee-inner,
    .our-services-bg .services-content,
    .pkg-details-inner ul {
        padding: 10px 0
    }

    .banner-btn a {
        font-size: 10px !important;
    }

    .banner-btm-bg,
    .our-work-carousel,
    .we-serve-carousel-2:first-child {
        display: none !important
    }

    .our-services-bg .services-content h2 {
        font-size: 25px;
        padding: 0 0 20px
    }

    .our-services-bg .services-content h5 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        letter-spacing: 1px
    }

    .services-content p {
        width: 100%
    }

    .services-eagle {
        width: 100% !important
    }

    .our-services-bg .owl-theme .owl-nav {
        left: 3%;
        bottom: -7%;
        margin: 0 auto
    }

    .case-study-bg .case-study-inner .upper-text h1 {
        font-size: 30px;
        padding: 20px 10px
    }

    .case-study-bg .case-study-inner .upper-text h6,
    .project-detail-bg ul li,
    .testimonial-bg .testimonial-content h6,
    .we-serve-content h6 {
        font-size: 15px;
        padding: 0
    }

    .case-study-bg .case-study-inner,
    .case-study-bg .view-study-inner {
        padding: 35px 0
    }

    .banner-text-rotate-2 .card-content {
        height: 120px;
        width: 100px
    }

    .view-case-content {
        right: -194px;
        left: 2px;
        top: 170px
    }

    .view-case-content h2 {
        font-size: 35px;
        letter-spacing: .03px
    }

    .banner-btn-3 {
        height: 40px;
        font-size: 12px !important;
        width: 139px;
        margin: 8px 0
    }

    .case-study-bg .item-counter {
        padding: 5px 0 0 5px
    }

    .banner-text-rotate-2 .rotate-text svg {
        width: 85px
    }

    .case-study-bg .view-case-img {
        margin: 0 0 0 10px;
        box-shadow: 0 0 0 0 #000000d9
    }

    .view-case-content h5 {
        font-size: 13px;
        padding: 4px 0
    }

    .testimonial-i-img img {
        width: 25% !important;
        right: 36%;
        top: 50px
    }

    .testimonial-bg {
        padding: 60px 0
    }

    .testimonial-bg .testimonial-content h2 {
        font-size: 20px;
        padding: 10px 0 0
    }

    .testimonial-content p {
        height: 320px;
        padding: 5px 0
    }

    .testimonial-content {
        background: no-repeat padding-box #002664;
        padding: 60px 25px 15px;
        height: 83vh
    }

    .testimonial-bg .owl-nav {
        bottom: 0;
        left: 47%
    }

    .mega-pkg-bg h2 {
        font-size: 30px;
        padding: 20px 0
    }

    .pkg-details h4 {
        font-size: 20px;
        font-weight: 500
    }

    .mega-pkg-bg .pkg-details h3 {
        font-size: 12px;
        letter-spacing: .31px
    }

    .mega-pkg-bg .pkg-head-child ul li button {
        width: 119px;
        justify-content: center
    }

    .sec-paqs {
        margin: 0 0 0px;
    }

    .sec-paqs .faqs-box .accordion-item .accordion-body,
    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 14px
    }

    .pkg-details-inner ul li {
        font-size: small
    }

    .banner-btn-4,
    .banner-btn-5 {
        padding: 10px 0;
        height: 40px;
        width: 230px;
        font-size: 11px;
        margin: 20px 5px !important
    }

    .sec-paqs .sec-title h2 {
        font-size: 25px;
        line-height: 30px;
        padding-top: 20px
    }

    .number-counter h2,
    .our-work-content h6,
    .sec-paqs .sec-title h5 {
        font-size: 15px
    }

    .sec-paqs .faqs-box .faqs-2 {
        padding-left: 0
    }

    .we-serve-bg {
        padding: 10px;
        letter-spacing: 1.33px;
        font-size: 20px
    }

    .we-serve-content h2 {
        font-size: 22px;
        padding: 18px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        margin-top: 10px;
        position: absolute
    }

    .mega-pkg-bg .mega-pkg-head ul li button {
        letter-spacing: .61px;
        font-size: 13px
    }

    .mega-pkg-bg .mega-pkg-head .nav-link {
        display: flex;
        padding: .5rem
    }

    .our-work-bg .screen {
        width: 85%;
        height: 300px
    }

    .our-work-content {
        margin: 24px 0 0;
        padding: 0;
        text-align: center !important
    }

    .meet-our-team-inner {
        top: 44%
    }

    .awards-content h2,
    .meet-our-team-inner h1 {
        font-size: 20px
    }

    section.contactsec:before {
        content: "";
        width: 100%
    }

    .contacttext,
    section.contactsec {
        padding: 10px
    }

    .contacttext h4 {
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        padding: 0 0 10px
    }

    .contactlist ul li,
    .contacttext p {
        padding: 0;
        width: 100%;
        text-align: center
    }

    .contacttext p {
        font-size: 16px;
        line-height: 27px
    }

    .contactlist ul li {
        list-style: none
    }

    .contactlist ul li p {
        font-size: 14px;
        line-height: 25px;
        width: 100%;
        text-align: center
    }

    .contactlist ul li a {
        font-size: 14px;
        text-align: center
    }

    .socailicon ul {
        justify-content: space-evenly;
        padding: 0 0 17px
    }

    .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f5efef;
        outline: 0;
        box-shadow: unset
    }

    .contactinput input::-webkit-input-placeholder {
        color: #f5efef
    }

    .contactinput input::-moz-placeholder {
        color: #f5efef
    }

    .contactinput input::-ms-placeholder {
        color: #f5efef
    }

    .contactinput input::placeholder {
        color: #f5efef
    }

    .contactinput i,
    .contactinput select {
        color: #f5efef
    }

    .contactinput option {
        color: red
    }

    .center-res {
        text-align: center
    }

    .center-res img {
        margin-bottom: 10px
    }

    .center-res p {
        width: 100% !important;
        font-size: 13px !important
    }

    .bg-footer .row div:nth-child(0),
    .bg-footer .row div:nth-child(3) {
        order: 3
    }

    .aboutsec div:first-child,
    .bg-footer .row div:first-child {
        order: 1
    }

    .bg-footer .row div:nth-child(2) {
        order: 4
    }

    .aboutsec div:nth-child(0),
    .bg-footer .row div:nth-child(4) {
        order: 2
    }

    .bg-footer .row div:nth-child(5) {
        order: 5
    }

    .bg-footer .social-link ul {
        justify-content: center
    }

    .payment-method img {
        width: 75%
    }

    .bg-footer .footer-list h4 {
        font-size: 18px
    }

    .bg-footer .footer-list ul li a {
        font-size: 13px
    }

    .bg-footer .news-letter {
        padding: 30px 0 0;
        text-align: center
    }

    .abouttext p,
    .banner-content h4,
    .bg-footer .news-letter .lets-talk ul li a,
    .bg-footer .news-letter h5,
    .feebback-bg h4,
    .teams_card p {
        font-size: 16px
    }

    .bg-footer .lower-footer {
        border-top: none;
        margin-top: 5px;
        padding: 12px 0;
        display: block;
        text-align: center
    }

    .bg-footer .lower-footer .lower-1 {
        margin: 0 0 10px
    }

    .image-banner img {
        height: 60vh
    }

    .aboutsec,
    .industry-vide-sec,
    .inner-case-study-carousel-bg,
    .project-detail-bg,
    section.portfoliosec {
        padding: 25px 0
    }

    .industry_video-wrapper {
        height: 30vh
    }

    .banner-content h1 {
        font-size: 27px
    }

    .banner-content span {
        font-size: 19px;
        padding: 0 5px
    }

    .aboutsec .row {
        flex-direction: row
    }

    .abouttext h5 {
        font-size: 13px;
        margin: 9px 0
    }

    .abouttext h5:before {
        bottom: 3px
    }

    .abouttext h3 {
        font-size: 20px;
        line-height: 25px
    }

    .abouttext .banner-btn {
        margin: 25px 0 0
    }

    .inf_item {
        font-size: 0
    }

    .inf_item a,
    .inf_item_reverse a {
        font-size: 35px;
        word-spacing: 0px
    }

    .aboutsec ul li {
        width: 50%
    }

    .branding-tabs li button {
        font-size: 13px;
        width: 90%
    }

    .aboutimg .tab-pane img {
        height: auto
    }

    .workcard {
        display: flex;
        align-items: baseline;
        padding: 0;
        margin: 20px 0;
        text-align: center;
    }

    .border_red {
        border-right: none
    }

    section.howweworksec {
        padding: 30px 0
    }

    .counter-card {
        border-radius: 9%;
        padding: 0;
        background: 0 0;
        margin: 10px;
        box-shadow: unset;
        text-align: center
    }

    .feebback-bg h3,
    .main-case-study-content h2,
    .number-counter span {
        font-size: 25px
    }

    .owl-carousel .owl-item img {
        width: 85%;
        margin: 0 0 0 29px
    }

    .resize_images img {
        height: 300px
    }

    .our-culture-bg {
        padding: 0;
        margin: 0 0 50px
    }

    .our-culture-bg h2 {
        letter-spacing: 1px;
        font-size: 25px;
        padding: 0 0 25px
    }

    .our-culture-bg .owl-theme .owl-nav {
        left: 40%;
        top: 96%
    }

    .our-culture-bg .culture_slide {
        padding: 10px;
        text-align: center;
        margin: 0 0 0 109px !important;
        width: 101%;
        height: 259px
    }

    .our-culture-bg .culture_slide h4 {
        font-size: 31px;
        line-height: 18px
    }

    .our-culture-bg .culture_slide h5 {
        font-size: 20px;
        line-height: 27px;
        height: auto
    }

    .our-culture-bg .culture_slide p {
        font-size: 16px;
        line-height: 25px;
        height: auto
    }

    .bestdesigntext h2 {
        font-size: 25px;
        line-height: 34px
    }

    .employee-inner p {
        padding: 0;
        margin: 0 0 20px
    }

    .teams_cards {
        padding: 20px 0
    }

    .teams_card h2 {
        font-size: 25px;
        line-height: 2px
    }

    .team_card ul li.teambox {
        margin: 5px 0 !important;
        height: auto
    }

    .tabbox ul li.portfoliobox {
        height: 240px;
        width: 300px
    }

    .portfoliobox a img {
        object-fit: cover;
        width: 100% !important;
        margin: 0 !important
    }

    .portfoliobox.cntr a img {
        object-position: center
    }

    .cntr2 {
        margin: 10px 0 !important;
        height: 240px !important;
        width: 300px !important
    }

    .portfoliobox.cntr2 a img {
        object-position: top;
        object-fit: fill
    }

    .contact-bg,
    .testimonials-bg {
        padding: 50px 0;
    }

    .testimonials-bg video {
        width: 96%;
        height: auto
    }

    .testimonials-content h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0
    }

    .testimonials-content {
        padding: 0 0 0 14px
    }

    .testimonials-content p {
        padding: 25px 0;
        height: 250px;
        overflow: scroll;
        overflow-x: hidden
    }

    .testimonials-bg .owl-theme .owl-nav {
        margin-top: 0
    }

    .customer-review-bg {
        padding: 0 0 50px
    }

    .customer-review-content h2 {
        font-size: 25px;
        padding: 0 0 25px
    }

    .menu-bg ul li a,
    .menu-us h1 {
        text-decoration: none;
        font-size: 20px
    }

    .menu-bg,
    .menu-us h1,
    .project-detail-bg ul {
        padding: 15px 0
    }

    .checklist label.btn.btn-outline-primary {
        font-size: 15px !important;
        padding: 5px 9px;
        border-radius: 10px;
        width: 45% !important;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-bg ul li a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 6px
    }

    .menu-us h1 {
        color: #000;
        font-weight: bolder
    }

    .navigation__menu {
        height: 100%;
        padding-right: 0;
        width: 100%
    }

    .navigation li {
        padding: 17px 80px 0 0
    }

    .menu-us h3 {
        padding: 20px 0;
        font-size: 18px
    }

    .case-study-bg {
        background: linear-gradient(#ed045b, #ed045ba3);
        padding: 40px 0;
        height: 108vh;
        margin: 40px 0
    }

    .case-study-bg .view-study-inner {
        padding: 0 0 170px !important
    }

    .row.services-reserve {
        flex-flow: column-reverse
    }

    .project-detail-bg h1 {
        line-height: 25px;
        font-size: 25px;
        padding: 20px 0
    }

    .project-detail-bg h5 {
        font-size: 16px;
        line-height: 26px
    }

    .h-88vh img {
        width: 100%;
        height: auto
    }

    .inner_case-detail-txt h3 {
        padding: 23px 0 0;
        font-size: 26px
    }

    .inner_case-detail-txt h5 {
        padding: 0;
        font-size: 17px
    }

    .inner-case-study-carousel-2 .px-5 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .banner-inner {
        margin: 140px 0 0
    }

    .pt-150 {
        padding-top: 25px !important
    }

    .bestdesigntext h4,
    .howweworktext h3 {
        font-size: 25px;
        line-height: 25px
    }

    .howweworktext h5 {
        font-size: 15px;
        margin: 0 0 8px
    }

    .howweworktext h5:before {
        width: 29%;
        bottom: 2px
    }

    .our-work-content h2 {
        font-size: 25px;
        padding: 0 0 28px;
        line-height: 25px
    }

    .our-work-bg .screen img {
        bottom: -640px !important
    }

    .our-work-carousel-careers .owl-nav {
        left: 44%;
        top: -35px
    }

    .our-cilents-bg h2 {
        font-size: 19px;
        line-height: 33px;
        padding: 25px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        bottom: -40px !important;
        right: 40% !important;
        top: 470px !important
    }

    .awards-bg img {
        width: 50%;
        margin: 0 auto
    }

    .industry-img-zoom img {
        margin: 50px auto
    }

    .main-case-study {
        padding: 50px 15px
    }

    .main-case-study-content {
        top: 40%;
        left: 7%
    }

    .case-study-content h1 {
        font-size: 25px !important
    }

    .abouttext h2,
    .sec-tab h2,
    .tab-cont h3 {
        font-size: 30px;
        line-height: 42px;
    }

    .case-study-content h3,
    .case-study-content h4 {
        font-size: 12px
    }

    .your-story-content p {
        padding: 0;
    }

    .mega-pkg-bg {
        padding: 0;
    }

    .mega-pkg-bg .crd_1 .btns a {
        text-align: center;
    }

    .case-study-content {
        padding: 18px 0 0;
        height: 102px
    }

    .img-cont-sec-content h2,
    .modal-body h5 {
        font-size: 29px;
    }

    .project-detail-bg h3 {
        color: #002664;
        font-size: 28px;
        padding: 10px 0
    }

    .case-services-provide .contact-img-2 {
        left: 0;
        top: 40px
    }

    .case-services-provide .contact-img-3 {
        right: 80px;
        top: -50px
    }

    .mbl-img-3 {
        width: 100px !important;
        height: 200px !important
    }

    .mbl-img-2 {
        width: 125px !important;
        height: 250px !important
    }

    .mbl-img-1 {
        width: 150px !important;
        height: 300px !important
    }

    .contactform {
        margin: 0;
        background: #ffffff00;
        padding: 2rem;
        border-radius: 9px;
        margin: 0 0 3rem 0px;
    }

    .contactform textarea,
    .contactform textarea:focus {
        background-color: #6a6767;
        color: #fff;
    }

    .hero_content h1 {
        font-size: 34px;
    }

    .feebback-bg {
        padding: 40px 0 0
    }

    .contact-bg .contact-img-1 {
        width: 96% !important;
        margin: 0
    }

    .your-story-bg {
        margin: 50px 0 0
    }

    .your-story-bg .nav-item button {
        margin: 15px
    }

    .your-story-content h2 {
        font-size: 30px;
        padding: 0
    }

    .your-story-bg h2 {
        font-size: 25px;
        padding: 10px 0 20px
    }

    .portfolio-scroll .screen-2,
    .portfolio-scroll .screen-2 img,
    .portfolio-scroll .screen-3,
    .portfolio-scroll .screen-3 img {
        height: 100%
    }

    .portfolio-scroll .screen-3 {
        height: 100%;
        margin: 0
    }

    .portfolio-scroll .screen img {
        bottom: -390px
    }

    .portfolio-section .d-grid {
        grid-template-columns: auto;
        gap: 0
    }

    .portfolio-section {
        padding: 50px 0 0
    }
}

@media only screen and (max-width: 1500px) {

    .cta-box p,
    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 17px;
        line-height: 31px;
    }

    .main-case-study img {
        width: 80%
    }

    .we-serve-bg .gray-box {
        height: 350px
    }

    .testimonial-bg .owl-nav {
        bottom: 0
    }

    .image-banner img {
        height: 100vh
    }

    .banner-content h1 {
        font-size: 35px
    }

    .banner-content span {
        padding: 0 26px
    }

    .cta-back-5 {
        top: 0;
        right: 19%
    }

    .cta-back-3 {
        top: 10%
    }

    .cta-back-2 {
        top: 7%
    }

    .cta-back-4 {
        top: 35%;
        right: 3%
    }

    .cta-back-1 {
        top: 12%;
        left: 26%
    }

    .cta-women {
        left: 35px;
        bottom: 0
    }

    .cta-box {
        width: 85%
    }

    .cta-box h1 {
        font-size: 36px
    }

    .cta-box h2 {
        font-size: 13px
    }
}

@media only screen and (max-width: 576px) {
    h4 {
        padding: 0 !important
    }

    .bg-footer .payment-method ul {
        justify-content: center;
    }

    .portfolio-section .d-grid,
    .tabbox ul,
    .team_card ul {
        grid-template-columns: auto
    }

    .pkg-details p,
    h1 {
        font-size: 30px
    }

    h4 {
        font-size: 17px !important;
    }

    h7 {
        font-size: 15px !important
    }

    .our-work-content h4 {
        line-height: 40px
    }

    .navigation__bar {
        padding: 0 20px;
        height: 75px
    }

    .my-dots-class {
        flex-wrap: wrap;
        top: -230px
    }

    .cta-btns,
    .header-btn,
    .nav-bar-contact,
    .our-services-bg video,
    .scrol {
        display: block;
        font-size: 12px;
    }

    .my-dot-class {
        width: 160px
    }

    .extra-margin {
        margin-top: 260px
    }

    .my-dot-class:nth-child(5),
    .tabbox ul li.portfoliobox {
        width: 100%
    }

    .banner-content h1 {
        font-size: 20px;
        padding: 0
    }

    .abouttext h2 {
        font-size: 21px;
        text-align: left
    }

    .card-sec h2 {
        line-height: normal !important;
        margin: 10px 0 !important
    }

    .abouttext,
    .banner-content,
    .card-body,
    .card-sec p,
    .case-study-bg .case-study-inner .upper-text h7,
    .contactbody,
    .employee-bg,
    .img-cont-sec-content,
    .img-cont-sec-content.left,
    .nav_drpdown .dropdown,
    .number-counter,
    .our-cilents-bg,
    .our-services-bg .services-content,
    .teams_card,
    .type-text,
    .your-story-content p,
    section.our-work-bg,
    section.our-work-bg-2,
    section.techies-bg {
        padding: 0
    }

    .host-row div {
        margin: 0 0 25px;
        height: auto
    }

    .element-item,
    .paragraph li,
    .services-eagle {
        width: 100% !important
    }

    .banner-content p,
    .number-counter h2,
    .our-work-content h6,
    .sec-paqs .sec-title h5 {
        font-size: 15px
    }

    .typed-text {
        padding: 10px;
        font-size: 0px
    }

    h8 {
        font-size: 24px;
        font-weight: 700
    }

    .homepage-contact-btn {
        padding: 8px 4px 18px;
        font-size: 12px;
    }

    .services-content .homepage-contact-btn {
        margin: 0 0 0 6px
    }

    a.company-logo img {
        width: 135px
    }

    .menu-gif {
        width: 25px !important
    }

    .banner-btn {
        justify-content: start;
        padding: 0
    }

    .banner-text-rotate .rotate-text svg {
        width: 50px
    }

    .banner-btn-2 {
        padding: 10px 0;
        height: 40px;
        width: 220px;
        line-height: 20px
    }

    .banner-btn-1 {
        padding: 0;
        height: 40px;
        width: 220px
    }

    .banner-btn a,
    .cta-box h2 {
        font-size: 13px !important
    }

    .banner-btm-bg,
    .our-work-carousel,
    .we-serve-carousel-2:first-child {
        display: none !important
    }

    .fixed-cta {
        display: block;
        background: red;
    }

    .our-services-bg .services-content h2 {
        font-size: 25px;
        padding: 0 0 20px
    }

    .our-services-bg .services-content h5 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        letter-spacing: 1px
    }

    .services-content p {
        width: 100%;
        height: 260px;
        overflow: scroll;
        margin: 0 0 20px;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .services-content p::-webkit-scrollbar {
        display: none
    }

    .our-services-bg .owl-theme .owl-nav {
        bottom: -78px;
        left: 41%;
        margin: 0 auto
    }

    .case-study-bg .case-study-inner .upper-text h1 {
        font-size: 30px;
        padding: 20px 10px
    }

    .case-study-bg .case-study-inner .upper-text h6,
    .testimonial-bg .testimonial-content h6 {
        margin: 0 0 10px;
        font-size: 15px;
        padding: 0
    }

    .case-study-bg .case-study-inner,
    .case-study-bg .view-study-inner {
        padding: 35px 0
    }

    .banner-text-rotate-2 .card-content {
        height: 120px;
        width: 100px
    }

    .view-case-content {
        right: -194px;
        left: 2px;
        top: 170px
    }

    .view-case-content h2 {
        font-size: 35px;
        letter-spacing: .03px
    }

    .banner-btn-3 {
        padding: 10px 0;
        height: 40px;
        font-size: 12px !important;
        width: 185px;
        margin: 8px 0
    }

    .case-study-bg .item-counter {
        padding: 5px 0 0 5px
    }

    .banner-text-rotate-2 .rotate-text svg {
        width: 85px
    }

    .case-study-bg .view-case-img {
        margin: 0 0 0 10px;
        box-shadow: 0 0 0 0 #000000d9
    }

    .view-case-content h5 {
        font-size: 13px;
        padding: 4px 0
    }

    .testimonial-i-img img {
        width: 50% !important;
        right: 23%;
        top: 50px
    }

    .testimonial-bg,
    section.howweworksec {
        padding: 30px 0
    }

    .testimonial-bg .testimonial-content h2 {
        font-size: 20px;
        padding: 10px 0 0
    }

    .button-group {
        justify-content: start !important;
        overflow: scroll
    }

    .testimonial-content p {
        height: 245px;
        overflow: scroll;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 5px 0
    }

    .testimonial-content p::-webkit-scrollbar {
        width: 5px;
        height: 0
    }

    .testimonial-content {
        background: no-repeat padding-box #002664;
        padding: 100px 25px 15px;
        height: 76vh
    }

    .counter-card,
    .our-work-bg .owl-theme .owl-nav:active,
    .our-work-bg .owl-theme .owl-nav:checked,
    .our-work-bg .owl-theme .owl-nav:focus,
    .our-work-bg .owl-theme .owl-nav:hover {
        background: 0 0
    }

    .testimonial-bg .owl-nav {
        bottom: -10px;
        left: 40%
    }

    .mega-pkg-bg h2 {
        font-size: 30px;
        padding: 20px 0
    }

    .pkg-details h4 {
        font-size: 20px;
        font-weight: 500
    }

    .banner-text-rotate-2,
    .checklist,
    .display-small-hidden,
    .hidden,
    .pkg-details h4 small {
        display: none
    }

    .awards-content h2,
    .meet-our-team-inner h1,
    .mega-pkg-bg .pkg-details h6 {
        font-size: 20px
    }

    .mega-pkg-bg .pkg-details h3 {
        font-size: 12px;
        letter-spacing: .31px
    }

    .mega-pkg-bg .pkg-head-child ul li button {
        width: 119px;
        justify-content: center
    }

    .sec-paqs .faqs-box .accordion-item .accordion-button {
        font-size: 14px !important
    }

    .sec-paqs .faqs-box .accordion-item .accordion-body,
    .workcard p {
        font-size: 14px
    }

    .pkg-details-inner ul li {
        font-size: small
    }

    .contactlist,
    .employee-inner,
    .pkg-details-inner ul {
        padding: 10px 0
    }

    .my-wrap {
        flex-wrap: nowrap;
        overflow-x: scroll !important;
        justify-content: flex-start !important
    }

    .banner-btn-4,
    .banner-btn-5 {
        padding: 10px 0;
        height: 40px;
        width: 230px;
        font-size: 11px;
        margin: 20px 5px !important
    }

    .sec-paqs .sec-title h2 {
        font-size: 25px;
        line-height: 30px;
        padding-top: 20px
    }

    .sec-paqs .faqs-box .faqs-2 {
        padding-left: 0
    }

    .we-serve-bg {
        padding: 10px;
        letter-spacing: 1.33px;
        font-size: 20px
    }

    .we-serve-content h2 {
        font-size: 22px;
        padding: 18px 0 0
    }

    .we-serve-bg .gray-box {
        height: 300px !important;
        width: 310px !important
    }

    .project-detail-bg ul li,
    .we-serve-content h6 {
        font-size: 15px;
        padding: 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        margin-top: 10px;
        position: absolute
    }

    .mega-pkg-bg .mega-pkg-head ul li button {
        letter-spacing: .61px;
        font-size: 13px
    }

    .mega-pkg-bg .mega-pkg-head .nav-link {
        display: flex;
        padding: .5rem
    }

    .our-work-bg .screen {
        margin: 0 0 0 28px !important;
        width: 85%;
        height: 300px
    }

    .our-work-carousel-2 .owl-nav {
        margin: 34px 0 !important;
        font-size: 30px
    }

    .our-work-content {
        margin: 50px 0;
        padding: 0;
        text-align: center !important
    }

    .bg-footer .news-letter .lets-talk ul,
    .workcard {
        margin: 20px 0
    }

    .meet-our-team-inner {
        top: 44%
    }

    section.contactsec:before {
        content: "";
        width: 100%
    }

    .contacttext,
    section.contactsec {
        padding: 10px
    }

    .contacttext h4 {
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        padding: 0 0 10px
    }

    .contactlist ul li,
    .contacttext p {
        padding: 0;
        width: 100%;
        text-align: center
    }

    .contacttext p {
        font-size: 16px;
        line-height: 27px
    }

    .contactlist ul li {
        list-style: none
    }

    .contactlist ul li p {
        font-size: 14px;
        line-height: 25px;
        width: 100%;
        text-align: center
    }

    .contactlist ul li a {
        font-size: 14px;
        text-align: center
    }

    .socailicon ul {
        justify-content: space-evenly;
        padding: 0 0 17px
    }

    .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f5efef;
        outline: 0;
        box-shadow: unset
    }

    .contactinput input::-webkit-input-placeholder {
        color: #f5efef
    }

    .contactinput input::-moz-placeholder {
        color: #f5efef
    }

    .contactinput input::-ms-placeholder {
        color: #f5efef
    }

    .contactinput input::placeholder {
        color: #f5efef
    }

    .contactinput i,
    .contactinput select {
        color: #f5efef
    }

    .contactinput option {
        color: red
    }

    .center-res {
        text-align: center
    }

    .center-res img {
        margin-bottom: 10px
    }

    .center-res p {
        width: 100% !important;
        font-size: 13px !important
    }

    .bg-footer .row div:nth-child(0),
    .bg-footer .row div:nth-child(3) {
        order: 3
    }

    .aboutsec div:first-child,
    .bg-footer .row div:first-child {
        order: 1;
        padding: 0 18px;
    }

    .bg-footer .row div:nth-child(2) {
        order: 4;
        padding: 0 26px;
    }

    .aboutsec div:nth-child(0),
    .bg-footer .row div:nth-child(4) {
        order: 2
    }

    .bg-footer .row div:nth-child(5) {
        order: 5
    }

    .bg-footer .social-link ul {
        justify-content: center
    }

    .payment-method img {
        width: 75%
    }

    .bg-footer .footer-list h4 {
        font-size: 18px
    }

    .bg-footer .footer-list ul li a {
        font-size: 13px
    }

    .bg-footer .news-letter {
        padding: 30px 0 0;
        text-align: center
    }

    .abouttext p,
    .banner-content h4,
    .bg-footer .news-letter .lets-talk ul li a,
    .bg-footer .news-letter h5,
    .feebback-bg h4,
    .teams_card p {
        font-size: 16px
    }

    .bg-footer .news-letter .lets-talk ul li {
        line-height: 30px
    }

    .bg-footer .lower-footer {
        border-top: none;
        margin-top: 5px;
        padding: 12px 0;
        display: block;
        text-align: center
    }

    .bg-footer .lower-footer .lower-1 {
        margin: 0 0 10px
    }

    .image-banner img {
        max-height: 45vh
    }

    .industry-vide-sec,
    .inner-case-study-carousel-bg,
    .project-detail-bg,
    section.portfoliosec {
        padding: 25px 0
    }

    .industry_video-wrapper {
        height: 30vh
    }

    .banner-content span {
        font-size: 19px;
        padding: 0 5px !important
    }

    .aboutsec,
    .contact-bg,
    .testimonials-bg,
    .your-story-bg {
        padding: 50px 0
    }

    .aboutsec ul {
        padding: 0 0 20px;
    }

    .aboutsec .row {
        flex-direction: row
    }

    .abouttext h2 {
        margin: 0 0 20px
    }

    .abouttext h5 {
        font-size: 13px;
        margin: 9px 0
    }

    .abouttext h5:before {
        bottom: 3px
    }

    .abouttext h3 {
        font-size: 20px;
        line-height: 25px
    }

    .abouttext .banner-btn {
        margin: 15px 0
    }

    .whowetext ul {
        order: 0
    }

    .inf_item {
        word-spacing: 15px;
        font-size: 0
    }

    .inf_item a,
    .inf_item_reverse a {
        font-size: 35px;
        word-spacing: 0px
    }

    .inf_item_reverse {
        word-spacing: 15px;
        font-size: 0px
    }

    .aboutsec ul li {
        width: 100%;
    }

    .branding-tabs li button {
        font-size: 13px;
        width: 90%
    }

    .aboutimg .tab-pane img,
    .nav-pills .show>.nav-link,
    .your-story-bg .nav-pills .nav-link.active {
        height: auto
    }

    .workcard {
        display: flex;
        align-items: baseline;
        padding: 0
    }

    .awards-carousel .item,
    .our-cilents-carousel .item {
        justify-content: center;
        display: flex
    }

    .border_red {
        border-right: none
    }

    .counter-card {
        border-radius: 9%;
        padding: 0;
        margin: 10px;
        box-shadow: unset;
        text-align: center
    }

    .feebback-bg h3,
    .main-case-study-content h2,
    .number-counter span {
        font-size: 25px
    }

    .owl-carousel .owl-item img {
        margin: 0;
        width: 100%
    }

    .resize_images img {
        height: 300px
    }

    .our-culture-bg {
        padding: 0;
        margin: 0 0 50px
    }

    .our-culture-bg h2 {
        letter-spacing: 1px;
        font-size: 25px;
        padding: 0 0 25px
    }

    .our-culture-bg .owl-theme .owl-nav {
        left: 40%;
        top: 96%
    }

    .our-culture-bg .culture_slide {
        padding: 10px;
        text-align: center;
        margin: 0 0 0 109px !important;
        width: 101%;
        height: 259px
    }

    .our-culture-bg .culture_slide h4 {
        font-size: 31px;
        line-height: 18px
    }

    .our-culture-bg .culture_slide h5 {
        font-size: 20px;
        line-height: 27px;
        height: auto
    }

    .our-culture-bg .culture_slide p {
        font-size: 16px;
        line-height: 25px;
        height: auto
    }

    .bestdesigntext h2 {
        font-size: 16px;
        line-height: 34px
    }

    .employee-inner p {
        padding: 0;
        margin: 0 0 20px
    }

    .teams_cards {
        padding: 20px 0
    }

    .teams_card h2 {
        font-size: 25px;
        line-height: 2px
    }

    .team_card ul li.teambox {
        margin: 5px 0 !important;
        height: auto
    }

    .portfolilist.inner_tab-navs ul {
        overflow: scroll;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .portfoliobox a img {
        object-fit: cover;
        width: 100% !important;
        margin: 0 !important
    }

    .portfoliobox.cntr a img {
        object-position: center
    }

    .cntr2 {
        margin: 30px 0 !important;
        height: 200px !important;
        width: 250px !important
    }

    .portfoliobox.cntr2 a img {
        object-position: top;
        object-fit: fill
    }

    .testimonials-bg video {
        width: 315px;
        height: 177px
    }

    .testimonials-content h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0
    }

    .testimonials-content {
        padding: 0 0 0 14px
    }

    .testimonials-content p {
        padding: 25px 0;
        height: 250px;
        overflow: scroll;
        overflow-x: hidden
    }

    .testimonials-bg .owl-theme .owl-nav {
        margin-top: 0
    }

    .customer-review-bg {
        padding: 0 0 50px
    }

    .customer-review-content h2 {
        font-size: 25px;
        padding: 0 0 25px
    }

    .menu-bg ul li a,
    .menu-us h1 {
        text-decoration: none;
        font-size: 20px
    }

    .menu-bg,
    .menu-us h1,
    .project-detail-bg ul {
        padding: 15px 0
    }

    .checklist label.btn.btn-outline-primary {
        font-size: 15px !important;
        padding: 5px 9px;
        border-radius: 10px;
        width: 45% !important;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-bg ul li a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 6px
    }

    .menu-us h1 {
        color: #000;
        font-weight: bolder
    }

    .menu-bg .dropdown li a {
        color: #000;
        font-weight: 500;
        font-size: 16px
    }

    .navigation__menu {
        height: 100%;
        padding-right: 0;
        width: 100%
    }

    .navigation li {
        padding: 17px 80px 0 0
    }

    .menu-us h3 {
        padding: 20px 0;
        font-size: 18px
    }

    .case-study-bg {
        background: linear-gradient(#ed045b, #ed045ba3);
        padding: 20px 0;
        height: 525px;
        margin: 0
    }

    .view-case-content h14 {
        letter-spacing: 1.82px
    }

    .case-study-bg .view-study-inner {
        padding: 0 0 170px !important
    }

    .row.services-reserve {
        flex-flow: column-reverse
    }

    .project-detail-bg h1 {
        line-height: 25px;
        font-size: 25px;
        padding: 20px 0
    }

    .project-detail-bg h5 {
        font-size: 16px;
        line-height: 26px
    }

    .h-88vh img {
        width: 100%;
        height: auto
    }

    .inner_case-detail-txt h3 {
        padding: 23px 0 0;
        font-size: 26px
    }

    .inner_case-detail-txt h5 {
        padding: 0;
        font-size: 17px
    }

    .inner-case-study-carousel-2 .px-5 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .banner-inner {
        margin: 61px 0 0
    }

    .pt-150 {
        padding-top: 25px !important
    }

    .bestdesigntext h4,
    .howweworktext h3 {
        font-size: 25px;
        line-height: 25px
    }

    .howweworktext h5 {
        font-size: 15px;
        margin: 0 0 8px
    }

    .howweworktext h5:before {
        width: 29%;
        bottom: 2px
    }

    .our-work-content h2 {
        font-size: 25px;
        padding: 0 0 28px;
        line-height: 25px
    }

    .our-work-bg .screen img {
        bottom: -640px !important
    }

    .our-work-carousel-careers .owl-nav {
        left: 44%;
        top: -35px
    }

    .our-cilents-bg h2 {
        font-size: 19px;
        line-height: 33px;
        padding: 25px 0 0
    }

    .we-serve-bg .owl-theme .owl-nav {
        bottom: -40px !important;
        right: 40% !important;
        top: 470px !important
    }

    .awards-bg img {
        width: 50%;
        margin: 0 auto
    }

    .awards-carousel .item {
        width: 100%
    }

    .awards-carousel .item img {
        width: 60%
    }

    .awards-carousel .item a {
        justify-content: center;
        display: flex
    }

    .industry-img-zoom img {
        margin: 50px auto
    }

    .main-case-study {
        padding: 70px 15px
    }

    .main-case-study-content {
        top: 84%;
        left: 7%;
        z-index: 99
    }

    .case-study-content h1 {
        font-size: 25px !important
    }

    .case-study-content h3,
    .case-study-content h4 {
        font-size: 12px
    }

    .case-study-content {
        padding: 100px 0 0;
        height: 102px
    }

    .project-detail-bg h3 {
        color: #002664;
        font-size: 28px;
        padding: 10px 0
    }

    .case-services-provide .contact-img-2 {
        left: 0;
        top: 40px
    }

    .case-services-provide .contact-img-3 {
        right: 80px;
        top: -50px
    }

    .mbl-img-3 {
        width: 100px !important;
        height: 200px !important
    }

    .mbl-img-2 {
        width: 125px !important;
        height: 250px !important
    }

    .mbl-img-1 {
        width: 150px !important;
        height: 300px !important
    }

    .contactform {
        margin: -22px 0 0;
    }

    .feebback-bg {
        padding: 40px 0 0
    }

    .contact-bg .contact-img-1 {
        width: 65% !important;
        margin: 0
    }

    .aboutimg,
    .your-story-bg {
        margin: 50px 0 0
    }

    .your-story-content h2 {
        font-size: 30px;
        padding: 0
    }

    .your-story-bg h2 {
        font-size: 25px;
        padding: 10px 0 20px
    }

    .portfolio-scroll .screen-2,
    .portfolio-scroll .screen-2 img,
    .portfolio-scroll .screen-3,
    .portfolio-scroll .screen-3 img {
        height: 100%
    }

    .portfolio-scroll .screen-3 {
        height: 100%;
        margin: 0
    }

    .portfolio-scroll .screen img {
        bottom: -390px
    }

    .portfolio-section .d-grid {
        gap: 0
    }

    .hero_background .row,
    .portfolio-section {
        padding: 0 0 0;
    }

    .nav_drpdown,
    .nav_drpdown2 {
        position: relative;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        transition: 2s ease-in
    }

    .nav_drpdwn-arrow-btn::before {
        right: -15px;
        top: 16%
    }

    ul.dropdown li {
        padding: 5px 0
    }

    .sec-margin {
        margin: 10rem 0 7rem !important
    }

    .cta-back-4 {
        width: 30% !important;
        top: -19% !important;
        right: 72% !important
    }

    .cta-back-5 {
        width: 40px !important;
        height: 39px !important;
        top: -23% !important;
        right: 8% !important
    }

    .cta-women {
        width: 50% !important;
        left: 25% !important;
        top: -50% !important;
        bottom: 0
    }

    .cta-box {
        padding: 70px 25px 25px !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important
    }

    .cta-box-content {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important
    }

    .cta-box h1 {
        font-size: 26px !important
    }

    .cta-box p {
        font-size: 18px !important
    }

    .hero_content h4 {
        font-size: 20px !important;
        padding: 0 !important
    }

    .hero_background .row .col .text {
        font-size: 25px;
        padding: 6px 8px
    }

    .hero_content h1 {
        font-size: 24px;
        padding: 20px 0 10px;
        margin: 2rem 0 0;
    }

    .hero_content p,
    .img-cont-sec-content p {
        font-size: 14px !important;
        padding: 0 15px 15px
    }

    .img-cont-sec-content h2 {
        font-size: 24px !important;
        margin-bottom: 12px;
    }

    .img-cont-sec-content h5 {
        margin: 0 0 5px;
        font-size: 15px !important
    }

    .tab-cont h3,
    .workcard h4 {
        font-size: 22px
    }

    .section-padding3 {
        padding: 58px 0 40px;
        text-align: center;
    }

    .your-story-bg .nav-item button {
        margin: 15px;
        height: auto;
        width: 60px
    }

    .your-story-content h4 {
        font-size: 22px !important;
        padding-bottom: 13px !important
    }

    .your-story-bg p {
        color: #fff;
        font-size: 14px
    }

    .sec-paqs {
        margin: 0
    }

    .floatbutton {
        display: none;
    }

    .contactinput i {
        right: 17px;
    }

    section.contact-bg .map_area iframe {
        height: 282px;
        width: 100%;
        margin: 1rem 0 0 0;
    }

    .inner_banner {
        padding: 5rem 0 3rem !important;
    }

    .cta_red .contact .btn-cta {
        font-size: 14px !important;
        margin: 20px 0 0 !important;
    }

    .cta_red .contact img {
        float: inline-end !important;
        margin: 10px !important;
    }

    .nav-first-half {
        width: 100%;
    }

    .abouttext h2,
    .sec-tab h2,
    .tab-cont h3 {
        line-height: 33px;
    }

    .modal_web img {
        display: none;
    }

    .modal_web form button {
        display: block;
    }

    .modal_web p {
        font-size: 16px;
        text-align: center;
        line-height: 20px;
        margin: 9px 0;
    }

    .modal_web h4 {
        text-align: center;
        font-size: 26px !IMPORTANT;
    }
}