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

#teamSlider, #teamSlider * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none
}

    #teamSlider img {
        pointer-events: none;
        -webkit-user-drag: none
    }

.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.ball {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #f76301c9;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    transition: all 0.1s ease;
    z-index: 999
}

.inner-ball {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ffae7b78;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    transition: all 0.3.9s ease;
    z-index: 9999
}

.div-1 {
    padding: 20px
}

button {
    border: 2px solid red;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 22px;
    background-color: red;
    color: #fff;
    transition: 0.2s ease all;
    cursor: pointer;
    color: #f763017a
}

::selection {
    color: #fff;
    background: #f76301
}

.btn-1 {
    text-align: center
}

button.btn-1 {
    position: relative;
    padding: 12px 22px;
    border-radius: 5px;
    font-size: 22px;
    text-decoration: none;
    background: #F05C22;
    background-color: #F05C22;
    color: #fff;
    transition: 0.5s ease all;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #F05C22
}

    button.btn-1:hover {
        background-color: #fff;
        color: #F05C22
    }

    button.btn-1 span {
        display: inline-block;
        position: relative;
        transform: translateY(0);
        opacity: 1;
        transition: none
    }

    button.btn-1:hover span {
        animation: text-drop 0.5s forwards
    }

        button.btn-1:hover span:nth-child(1) {
            animation-delay: 0.05s
        }

        button.btn-1:hover span:nth-child(2) {
            animation-delay: 0.10s
        }

        button.btn-1:hover span:nth-child(3) {
            animation-delay: 0.15s
        }

        button.btn-1:hover span:nth-child(4) {
            animation-delay: 0.20s
        }

        button.btn-1:hover span:nth-child(5) {
            animation-delay: 0.25s
        }

        button.btn-1:hover span:nth-child(6) {
            animation-delay: 0.30s
        }

        button.btn-1:hover span:nth-child(7) {
            animation-delay: 0.35s
        }

        button.btn-1:hover span:nth-child(8) {
            animation-delay: 0.40s
        }

        button.btn-1:hover span:nth-child(9) {
            animation-delay: 0.45s
        }

        button.btn-1:hover span:nth-child(10) {
            animation-delay: 0.50s
        }

        button.btn-1:hover span:nth-child(11) {
            animation-delay: 0.55s
        }

        button.btn-1:hover span:nth-child(12) {
            animation-delay: 0.60s
        }

        button.btn-1:hover span:nth-child(13) {
            animation-delay: 0.65s
        }

        button.btn-1:hover span:nth-child(14) {
            animation-delay: 0.70s
        }

        button.btn-1:hover span:nth-child(15) {
            animation-delay: 0.75s
        }

        button.btn-1:hover span:nth-child(16) {
            animation-delay: 0.8s
        }

        button.btn-1:hover span:nth-child(17) {
            animation-delay: 0.85s
        }

@keyframes text-drop {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

button.btn-1:hover a {
    color: #f05c22
}

.btn-2 {
    text-align: center
}

button.btn-2 {
    position: relative;
    padding: 12px 22px;
    border-radius: 6px;
    font-size: 22px;
    text-decoration: none;
    background-color: #272f6a;
    color: #fff;
    border: 2px solid #272f6a;
    transition: 0.5s ease all;
    cursor: pointer;
    overflow: hidden
}

    button.btn-2:hover {
        background-color: #fff0;
        color: #20244B;
        background: #fff
    }

    button.btn-2 span {
        display: inline-block;
        position: relative;
        transform: translateY(0);
        opacity: 1;
        transition: none
    }

    button.btn-2:hover span {
        animation: text-drop 0.5s forwards
    }

        button.btn-2:hover span:nth-child(1) {
            animation-delay: 0.05s
        }

        button.btn-2:hover span:nth-child(2) {
            animation-delay: 0.10s
        }

        button.btn-2:hover span:nth-child(3) {
            animation-delay: 0.15s
        }

        button.btn-2:hover span:nth-child(4) {
            animation-delay: 0.20s
        }

        button.btn-2:hover span:nth-child(5) {
            animation-delay: 0.25s
        }

        button.btn-2:hover span:nth-child(6) {
            animation-delay: 0.30s
        }

        button.btn-2:hover span:nth-child(7) {
            animation-delay: 0.35s
        }

        button.btn-2:hover span:nth-child(8) {
            animation-delay: 0.40s
        }

        button.btn-2:hover span:nth-child(9) {
            animation-delay: 0.45s
        }

        button.btn-2:hover span:nth-child(10) {
            animation-delay: 0.50s
        }

        button.btn-2:hover span:nth-child(11) {
            animation-delay: 0.55s
        }

        button.btn-2:hover span:nth-child(12) {
            animation-delay: 0.60s
        }

        button.btn-2:hover span:nth-child(13) {
            animation-delay: 0.65s
        }

        button.btn-2:hover span:nth-child(14) {
            animation-delay: 0.70s
        }

        button.btn-2:hover span:nth-child(15) {
            animation-delay: 0.75s
        }

        button.btn-2:hover span:nth-child(16) {
            animation-delay: 0.80s
        }

        button.btn-2:hover span:nth-child(17) {
            animation-delay: 0.85s
        }

@keyframes text-drop {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

button.btn-2:hover a {
    color: #272f6a
}

.a1 {
    text-align: center;
    font-size: 40px;
    background: #4f2b2b;
    color: #fff
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: Arial,sans-serif;
    font-family: "Poppins",serif
}

a {
    color: inherit;
    text-decoration: inherit
}

@font-face {
    font-family: Futura-md;
    src: url(../fonts/futura-md/FuturaTSNewMedium.ttf)
}

.futura {
    font-family: Futura-md;
    font-weight: 400
}

@font-face {
    font-family: helvetica;
    src: url(../fonts/helvetica/Helvetica-Bold.ttf)
}


@font-face {
    font-family: 'futura-black ';
    src: url('../fonts/futura-black/futura-black bold.ttf') format('truetype');
    font-display: swap;
}

h2 {
    font-family: helvetica
}

.orange-1 {
    color: #f05c22
}

.biscay-1 {
    color: #20244B
}

.container {
    width: 1500px;
    max-width: 90%;
    margin: 0 auto
}

header {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 6px 10px #cecece;
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 35px 0;
    transition: 0.3s ease all
}

    header.shrink {
        padding: 18px 0;
        font-size: .9em
    }

.service-dropdown li a {
    padding: 0
}

.service-dropdown li {
    text-align: start
}

.social-media-bottom {
    display: none
}

.about-bottom-btn {
    margin-top: 20px;
    gap: 10px
}

ul.service-dropdown a:hover {
    border: 1px solid #f05c22;
    background: #f05c22;
    color: #fff;
    transition: 0
}

ul.service-dropdown a {
    transition: 0.3s ease all;
    border: 1px solid #fff0;
    background: #fff0;
    padding: 10px 8px;
    border-radius: 6px
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.logo {
    font-size: 24px;
    font-weight: 700
}

.nav-links {
    list-style: none;
    display: flex
}

    .nav-links a {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        transition: color 0.3s
    }

        .nav-links a:hover {
            color: #4CAF50
        }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 18px;
    cursor: pointer
}

    .menu-toggle span {
        background-color: #000;
        height: 2px;
        width: 80%;
        transition: 0.3s
    }

ul.service-dropdown a {
    border: 1px solid #fff0
}

.top-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 14px
}

.social-icons a {
    margin-right: 15px;
    color: #333;
    font-size: 16px;
    text-decoration: none
}

.contact-info a {
    margin-left: 20px;
    color: #333;
    text-decoration: none;
    font-family: "Poppins",serif
}

    .contact-info a i {
        margin-right: 5px;
        font-size: 18px
    }

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.logo img {
    max-width: 150px
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative
}

    .nav-links li {
        display: inline-block
    }

    .nav-links a {
        text-decoration: none;
        color: #303030;
        font-size: 16px;
        padding: 5px 10px;
        font-family: "Poppins",serif
    }

        .nav-links a:hover {
            color: #f76301
        }

.btn-free-demo {
    background-color: #f76301;
    color: #fff;
    padding: 12px 22px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    border: 1px solid #fff0
}

.burger {
    display: none;
    font-size: 24px;
    cursor: pointer
}

.close-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer
}

.social-icons a i {
    font-size: 18px
}

nav {
    box-shadow: 0 6px 10px #cecece
}

.top-header-main {
    border-bottom: 1px solid #b9b9b9
}

.nav-active {
    color: #f05c22 !important
}

.top-header-span {
    font-size: 14px
}

.service-dropdown {
    display: none
}

ul.service-dropdown a li {
    padding-bottom: 0
}

.nav-links li:hover ul.service-dropdown {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    width: 450px;
    background: #fff;
    color: #727272;
    padding: 20px;
    z-index: 999;
    gap: 20px;
    box-shadow: 0 4px 5px #e7e7e7
}

.nav-links li {
    position: relative;
    text-align: left
}

.mobile-header-btn {
    background: #f05c22;
    color: #ffff !important;
    padding: 12px 22px;
    border-radius: 5px;
    display: none
}

    .mobile-header-btn a {
        color: #ffff !important;
        font-size: 16px;
        font-family: Futura-md
    }

#fa-caret-down {
    transition: transform 0.3s ease,color 0.3s ease;
    transform: rotate(0deg);
    color: inherit
}

#services-link:hover i#fa-caret-down {
    color: #f05c22;
    transform: rotate(180deg)
}

.hero-section {
    padding: 60px 0
}

.hero-col-1 h2 {
    font-size: 60px
}

    .hero-col-1 h2 .orange-1 {
        font-size: 80px
    }

.hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #f05c22;
    padding: 60px 75px;
    border-radius: 70px;
    background: url(../images/inner-img/tech-bg-img-1.png) no-repeat;
    background-size: cover;
    box-shadow: 0 0 20px -5px #f05c22
}

.hero-col-1 {
    width: 50%
}

    .hero-col-1 p {
        font-size: 20px;
        color: #303030;
        margin-top: 40px
    }

    .hero-col-1 button {
        font-size: 18px;
        padding: 12px 30px;
        margin-top: 40px;
        color: #fff;
        background-color: #f05c22;
        border: 1px solid #f05c22;
        border-radius: 5px
    }

.success-story {
    text-align: center;
    padding: 60px 0;
    position: relative
}

    .success-story h2 {
        font-size: 60px;
        font-weight: 700;
        color: #20244b;
        margin-bottom: 30px
    }

    .success-story .highlight {
        color: #f05a22
    }

.stats {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-top: 30px;
    position: relative;
    padding-top: 40px
}

.stat-item {
    border-radius: 8px;
    padding: 10px;
    width: 25%;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2
}

    .stat-item img {
        width: 200px;
        height: 200px
    }

    .stat-item .number {
        font-size: 60px;
        font-weight: 900;
        color: #f05a22;
    }

    .stat-item p {
        color: #303030;
        text-shadow: 0 42px 30px #2d2d2d;
        font-family: "Poppins",serif;
        font-size: 20px;
        font-weight: 500
    }

.dashed-line {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed #2b2b2b;
    z-index: 1
}

.sucess-line {
    width: 25px;
    height: 2px;
    background: #272f6a
}

.sucess-top-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

    .sucess-top-heading h3 {
        font-size: 18px;
        font-family: Futura-md;
        font-weight: 300;
        color: #272f6a
    }

section.about-section {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) no-repeat center fixed;
    background-size: cover
}

.about-col-1 h2 {
    font-size: 60px;
    font-family: helvetica;
    margin-top: 20px;
    margin-bottom: 30px
}

    .about-col-1 h2 .about-heading-span.biscay-1 {
        font-size: 45px !important
    }

.about-section-column {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.about-col-1 {
    width: 50%;
    position: relative
}

    .about-col-1 img {
        width: 75%;
        border-radius: 30px;
    }

    .about-col-1 .sucess-top-heading {
        justify-content: start
    }

.about-list {
    list-style-image: url(../images/inner-img/Vector-right.png)
}

.vector-right {
    width: 12px !important
}

.about-list {
    display: flex;
    align-items: center;
    gap: 20px
}

.list-type {
    border: 2px dashed #f05c22;
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0
}

    .list-type p {
        font-size: 16px;
        font-family: "Poppins",serif
    }

.about-bottom-btn button.know-btn {
    font-size: 18px;
    font-family: futura-md;
    padding: 12px 20px;
    color: #fff;
    background-color: #20244B;
    border: 1px solid #20244b;
    border-radius: 6px
}

.about-bottom-btn button.demo-btn {
    font-size: 18px;
    padding: 12px 20px;
    background-color: #f05c22;
    border: 1px solid #f05c22;
    color: #fff;
    font-family: futura-md;
    border-radius: 6px;
    margin-left: 20px
}

.about-members h3 {
    font-family: futura-md;
    font-size: 75px;
    font-weight: 400
}

.about-members p {
    font-size: 25px;
    font-family: futura-md;
    font-weight: 400
}

.about-members {
    border-left: 10px solid #f05c22;
    padding-left: 20px;
    margin-top: 24px
}

.about-image-2 {
    position: absolute;
    bottom: -2%;
    left: 30%;
    width: 50% !important
}

section.what-we-do.happey-client {
    background-color: #ffff !important;
    background: none
}

.our-clien-top-main-column {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.our-client-inner-col-1 h3 {
    font-family: Helvetica;
    font-size: 30px;
    font-weight: 700;
    margin: 0
}

.our-client-inner-col-1 h4 {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: 700;
    color: #272F6A;
    margin-top: 10px
}

.our-client-inner-col-1 img {
    width: 120px;
    display: table
}

.our-client-inner-col-1 h3 {
    margin: 0 !important
}

.client-slider {
    text-align: center;
    padding: 60px 0;
    width: 100%;
    margin: 0 auto
}

    .client-slider h2 {
        font-size: 60px;
        color: #20244B;
        margin-bottom: 30px;
        margin-top: 20px;
        font-family: Arial,Helvetica,sans-serif
    }

    .client-slider .highlight {
        color: #ff6a00
    }

.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 10px 0
}

.slide-track {
    display: flex;
    animation: scroll 30s linear infinite
}

.slide {
    flex-shrink: 0;
    width: 150px;
    margin: 0 20px;
    transition: opacity 0.3s ease
}

    .slide.active {
        opacity: 1
    }

    .slide img {
        max-width: 100%;
        max-height: 80px;
        object-fit: contain;
        filter: grayscale(.9)
    }

        .slide img:hover {
            filter: grayscale(0)
        }

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

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

.view-all-button {
    margin-top: 30px;
    padding: 12px 30px;
    background-color: #ff6a00;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 18px;
    font-family: futura-md
}

.what-we-do {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) no-repeat center fixed;
    background-size: cover
}

.we-do-col-1 h2 {
    font-size: 45px;
    color: #20244B;
    font-family: Arial,Helvetica,sans-serif;
    margin-top: 20px;
    margin-bottom: 40px
}

    .we-do-col-1 h2 .orange-1 {
        font-size: 60px
    }

.we-do-col-1 p {
    font-size: 16px;
    font-family: "Poppins",serif
}

.we-do-col-1 button {
    font-size: 18px;
    padding: 12px 30px;
    color: #fff;
    background-color: #f05c22;
    border: 1px solid #f05c22;
    border-radius: 5px;
    margin-top: 30px;
    margin-bottom: 50px
}

.we-do-col-1 .sucess-top-heading {
    justify-content: start
}

.what-we-do-column {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: self-start
}

.we-do-col-1 {
    width: 50%;
    position: sticky;
    top: 15%
}

.we-do-col-2 {
    width: 50%
}

.we-do-imges {
    display: flex;
    gap: 22px
}

    .we-do-imges img {
        width: 30px
    }

.we-do-column-2 {
    display: flex;
    gap: 30px;
    position: sticky;
    top: 15%
}

.service-col-2 {
    width: 100%
}

.service-col-2 {
    padding: 20px 30px;
    border: 2px dashed #f05c22;
    border-radius: 20px;
    background-color: #fff
}

.number-div {
    border: 1px solid #272f6a;
    background-color: #272f6a;
    color: #fff;
    font-family: futura-md;
    font-size: 30px;
    padding: 10px 25px;
    border-radius: 18px
}

.service-col-2 h3 {
    font-size: 30px;
    font-family: Arial,Helvetica,sans-serif;
    color: #272f6a;
    margin-top: 30px;
    margin-bottom: 20px
}

.service-col-2 p {
    font-size: 16px;
    font-family: "Poppins",serif
}

.service-col-2 button {
    font-size: 18px;
    padding: 12px 20px;
    margin-top: 20px;
    background-color: #272f6a;
    border: 1px solid #272f6a;
    color: #fff;
    border-radius: 5px;
    font-family: futura-md
}

.we-do-column-2.hosting-1 {
    margin-top: 20px
}

.we-do-vector {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    right: 0%;
    width: 200px
}

.our-benifit {
    padding: 60px 0
}

.benifit-heading h2 {
    font-size: 60px;
    text-align: center;
    margin-top: 20px;
    font-family: helvetica;
    color: #20244B
}

.benifit-column {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
    margin-top: 40px
}

.benifit-col-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px dashed #f05c22;
    padding: 30px 45px;
    gap: 30px;
    border-radius: 10px;
    background-color: #fff
}

.benifit-image img {
    width: 100%
}

.benifit-inner-col-1 {
    width: 50%
}

.benifit-image {
    width: 50%
}

.benifit-inner-col-1 h3 {
    font-size: 24px;
    font-family: helvetica;
    color: #272f6a;
    margin-bottom: 20px;
    font-weight: 700
}

.benifit-inner-col-1 p {
    font-size: 16px;
    font-family: "Poppins",serif
}

.benifit-border-pheragraph {
    font-size: 16px;
    font-family: futura-md !important;
    font-weight: 400;
    margin-top: 18px;
    padding-left: 10px;
    border-left: 2px solid #f05a22
}

.custom-app {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) no-repeat center fixed;
    background-size: cover
}

    .custom-app .benifit-heading h2 {
        font-size: 45px
    }

        .custom-app .benifit-heading h2 span.orange-1 {
            font-size: 60px
        }

    .custom-app .benifit-heading p {
        text-align: center;
        margin-top: 40px;
        font-size: 16px;
        font-family: "Poppins",serif
    }

.custom-app-main {
    display: flex;
    align-items: flex-start;
    margin-top: 40px
}

.custom-app-col-1 {
    width: 50%
}

    .custom-app-col-1 img {
        width: 100%;
        border-radius: 8px
    }

.banifit-col-1-inner {
    padding: 30px 24px;
    margin-bottom: 20px;
    border-left: 4px solid #303030;
    cursor: pointer;
    position: relative
}

    .banifit-col-1-inner.active {
        border-color: #ff5722
    }

        .banifit-col-1-inner.active h3 {
            color: #ff5722
        }

    .banifit-col-1-inner p, .banifit-col-1-inner button {
        display: none
    }

button a {
    text-decoration: none;
    color: #fff
}

.banifit-col-1-inner h3 {
    font-size: 24px;
    font-family: helvetica;
    color: #303030
}

.banifit-col-1-inner.active p {
    margin: 32px 0;
    font-size: 16px
}

.custom-app-main {
    display: flex;
    align-items: flex-start;
    margin-top: 40px
}

.custom-app-col-1 {
    width: 50%
}

    .custom-app-col-1 img {
        width: 100%;
        border-radius: 8px
    }

.trusted-partner {
    padding: 60px 0
}

.trusted-partner-heading {
    text-align: center;
    color: #20244B;
    margin-top: 20px;
    font-size: 45px;
    font-family: helvetica
}

    .trusted-partner-heading h2 {
        font-size: 45px;
        font-family: helvetica
    }

.trusted-partner-column {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 40px;
    border: 2px dashed #F05C22;
    border-radius: 20px;
    background: #fff;
    gap: 40px
}

.trusted-partner-col-1 {
    text-align: center;
    padding: 40px 30px
}

    .trusted-partner-col-1 img {
        width: 150px
    }

    .trusted-partner-col-1 h3 {
        color: #20244B;
        font-family: helvetica;
        font-size: 24px;
        margin-top: 20px
    }

    .trusted-partner-col-1 p {
        color: #303030;
        font-family: "Poppins",serif;
        font-size: 16px;
        margin-top: 20px
    }

    .trusted-partner-col-1.right-border {
        border-right: 1px solid #30303024
    }

.testmonial-column {
    display: grid;
    grid-template-columns: repeat(2,1fr)
}

.testmonial-col-1 .sucess-top-heading {
    justify-content: start
}

.testmonial-heading h2 {
    color: #20244B;
    font-size: 45px;
    font-family: helvetica;
    margin-top: 20px
}

    .testmonial-heading h2 .orange-1 {
        font-size: 60px
    }

.testmonial-heading p {
    font-size: 16px;
    font-family: "Poppins",serif;
    margin-top: 40px
}

.testmonial {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) no-repeat center fixed;
    background-size: cover
}

.testmonial-heading button {
    margin-top: 30px;
    padding: 12px 20px;
    font-size: 18px;
    background: #F05C22;
    border: 1px solid #F05C22;
    border-radius: 5px
}

.testimonial-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    height: 400px
}

.testimonial-card {
    background-color: #fff;
    width: 70%;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgb(0 0 0 / .1);
    text-align: center;
    position: absolute;
    top: 0;
    transition: transform 0.5s ease,opacity 0.5s ease;
    opacity: 0;
    transform: translateX(100%)
}

    .testimonial-card.active {
        opacity: 1;
        transform: translateX(0)
    }

    .testimonial-card.slide-left {
        transform: translateX(-100%)
    }

    .testimonial-card.slide-right {
        transform: translateX(100%)
    }

.quote {
    position: relative;
    font-style: italic;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px #8a8a8a;
    border-radius: 9px;
    z-index: -1
}

.testimonial-text {
    margin: 20px 40px;
    font-size: 16px;
    color: #333;
    font-family: "Poppins",serif;
    padding: 30px 10px
}

.profile {
    margin-top: 15px;
    padding-bottom: 30px
}

.profile-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #f39c12;
    margin-top: -40px
}

.stars {
    margin: 10px 0;
    color: #f1c40f;
    font-size: 1.2em;
    margin-top: 25px
}

.name {
    margin: 5px 0;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50
}

.position {
    font-size: 12px;
    color: #777
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    font-size: 1.2em;
    position: absolute;
    top: 67%;
    left: 20%;
    right: 20%;
    padding: 0 20px;
    transform: translateY(-50%)
}
textarea {
    outline: none;
}

.nav-left, .nav-right {
    cursor: pointer;
    color: #888
}

    .nav-left:hover, .nav-right:hover {
        color: #333
    }

.dots {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 88%
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease
}

    .dot.active {
        background-color: #333
    }

.testimonial-text i {
    font-size: 30px
}

.dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%
}

.dot {
    width: 35px;
    height: 5px;
    background-color: #ccc;
    margin: 0 10px;
    cursor: pointer;
    transition: background-color 0.3s ease,transform 0.3s ease;
    border-radius: 10px
}

    .dot.active {
        background-color: #8f8f8f;
        transform: scale(1.5)
    }

.our-team {
    padding: 60px 0
}

.sucess-top-heading h3, .our-client-heading h2 {
    text-align: center
}

.our-client-heading h2 {
    color: #20244B;
    font-size: 60px;
    font-family: helvetica;
    margin-top: 20px
}

.our-team-slider {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin-top: 40px
}

.our-team-column {
    display: flex;
    gap: 60px;
    animation: scroll-team 30s linear infinite;
    padding: 40px
}

#teamColumn.animate {
    animation: scroll 10s linear infinite
}

.our-team-col-1 {
    text-align: center;
    border: 1px solid #fff;
    background: #fff;
    padding: 20px;
    border-radius: 200px 200px 50px 50px;
    box-shadow: 0 0 30px 10px #e5e5e5;
    transition: 0.3s ease all;
    cursor: pointer
}

    .our-team-col-1 img {
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 50%
    }

    .our-team-col-1:hover {
        background: #F05C22
    }

        .our-team-col-1:hover h3, .our-team-col-1:hover p {
            color: #fff
        }

    .our-team-col-1 h3 {
        color: #272F6A;
        font-size: 30px
    }

    .our-team-col-1 p {
        font-size: 16px;
        color: #303030;
        font-family: "Poppins",serif
    }

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

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

.paused {
    animation-play-state: paused !important
}

.visual-story {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) no-repeat center fixed;
    background-size: cover
}

.visual-story-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px
}

.visual-story-col-1 {
    width: 48%
}

.visual-story-col-2 img {
    width: 100%
}

.visual-story-col-1 .sucess-top-heading {
    justify-content: start
}

.visual-story-col-1 h2 {
    font-size: 45px;
    color: #20244B;
    margin-top: 20px
}

.visual-story-col-1 p {
    margin-top: 35px;
    font-size: 16px;
    font-family: "Poppins",serif
}

.visual-story-column-2 {
    display: flex;
    gap: 50px;
    margin-top: 50px;
    justify-content: space-between
}

.visual-story-col-2 {
    width: 22%
}

.our-expert {
    padding:  60px 0px;
}

.blog h2 {
    font-size: 60px;
    color: #20244B;
    text-align: center;
    margin-top: 20px
}

.blog-column {
    display: flex;
    gap: 40px;
    margin-top: 40px
}

.blog-col-1 {
    width: 25%;
    background: #fff;
    border-radius: 10px;
    padding-bottom: 20px;
    box-shadow: 0 2px 10px #dfdfdf
}

    .blog-col-1 img {
        width: 100%;
        position: relative;
        border-radius: 10px 10px 0 0
    }

.blog-img {
    position: relative
}

    .blog-img button {
        position: absolute;
        bottom: 15px;
        right: 20px;
        background: #F05C22;
        border: 1px solid #f05c22;
        font-size: 14px;
        font-family: Futura-md;
        padding: 10px 22px;
        border-radius: 5px
    }

.blog-column h3 {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 700;
    font-family: helvetica;
    color: #272F6A;
    padding: 0 20px
}

.blog-col-1 p {
    margin-top: 20px;
    font-size: 14px;
    font-family: "Poppins",serif;
    padding: 0 20px
}

.blog-top-img-div img {
    width: 100%;
    height: 300px;
    object-fit: cover
}

.blog-top-img-div {
    min-height: 300px
}

.service-col-2 {
    width: 100%;
    min-height: 380px
}

    .service-col-2.client-scroll {
        min-height: 300px
    }

.contact-us {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) no-repeat center fixed;
    background-size: auto;
    background-size: cover
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.content-column {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    width: 50%
}

.map-column {
    flex: 1;
    min-width: 300px;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgb(0 0 0 / .1);
    width: 50%
}

.content-column ul {
    list-style: none;
    margin-top: 30px;
    line-height: 45px
}

    .content-column ul li i {
        color: #f05c22;
        font-size: 20px
    }

.content-column .sucess-top-heading {
    justify-content: start
}

.content-column h2 {
    color: #20244B;
    font-size: 45px;
    margin-top: 20px
}

.content-column p {
    font-size: 16px;
    font-family: "Poppins",serif;
    margin-top: 40px
}

.content-column ul li {
    font-size: 16px;
    font-family: "Poppins",serif
}

.form-top {
    display: flex;
    gap: 60px
}

.form-top-inner {
    width: 33.33%;
    background-color: #fff
}

    .form-top-inner input {
        width: 100%;
        border: 1px solid #fff0;
        outline: 0;
        font-size: 16px;
        font-family: "Poppins",serif
    }

.form-top-inner {
    border: 1px solid #777;
    border-radius: 10px;
    padding: 10px 16px
}

    .form-top-inner label {
        color: #272F6A;
        font-size: 14px;
        font-weight: 400;
        font-family: Futura-md
    }

    .form-top-inner input::placeholder {
        color: #d1d1d1;
        font-size: 16px;
        font-weight: 400;
        font-family: "Poppins",serif
    }

.form-div {
    margin-top: 40px
}

.message-box {
    border: 1px solid #777;
    margin-top: 20px;
    border-radius: 10px;
    padding: 10px 16px;
    height: 180px;
    background-color: #fff
}

    .message-box input {
        width: 100%;
        outline: 0;
        border: 1px solid #fff0;
        padding-bottom: 100px
    }

    .message-box label {
        color: #272F6A;
        font-size: 14px;
        font-weight: 400;
        font-family: Futura-md
    }

    .message-box input::placeholder {
        color: #d1d1d1;
        font-size: 16px;
        font-weight: 400;
        font-family: "Poppins",serif
    }

.form-div button {
    margin-top: 20px;
    padding: 12px 20px;
    background: #F05C22;
    border: 1px solid #f05c22;
    font-size: 18px;
    border-radius: 5px;
    font-family: Futura-md
}

.message-box textarea#message {
    border: none;
    outline: 0;
    resize: none;
    width: 100%;
    height: 80%;
    font-size: 16px;
    font-family: "Poppins",serif
}

    .message-box textarea#message::placeholder {
        color: #d1d1d1
    }

footer {
    padding-top: 60px
}

.footer-col-1 img {
    width: 200px
}

.footer-column {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.footer-col-1 {
    width: 25%
}

    .footer-col-1 ul {
        list-style: none;
        line-height: 35px
    }

.footer-main-top-heading {
    color: #272F6A;
    font-size: 16px;
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 32px 0
}

.footer-bottom-col-1 ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 20px
}

    .footer-bottom-col-1 ul li i {
        font-size: 25px;
        color: #F05C22
    }

.footer-col-1 ul li i {
    color: #F05C22;
    font-size: 20px
}

.footer-col-1 ul li a:hover {
    color: #f05c22
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #f76301;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    z-index: 99;
    transition: opacity 0.3s ease
}

    .back-to-top.visible {
        display: block
    }

section.about-hero-section {
    height: 600px;
    background: url(../images/inner-img/about-page-hero.png) no-repeat center;
    background-size: cover
}

.whatsapp-conatct-main-div {
    position: fixed;
    right: 2%;
    bottom: 5%
}

    .whatsapp-conatct-main-div img {
        width: 80px
    }

.whatsapp-contact-main-div {
    position: fixed;
    bottom: 10px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: heartbeat 5s ease-in-out infinite;
    z-index:999;
}
#Message {
    width: 100%;
    resize: none;
    border: none;
}
textarea::placeholder {
    font-family: "Poppins", serif;
}

.whatsapp-contact-main-div img {
    width: 80px;
    display: table
}

@keyframes heartbeat {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.1)
    }

    50% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

section.our-journy-section-about-page {
    padding: 0 0 60px 0
}

.hero-col-1.about-h2 h2 {
    color: #272F6A
}

.hero-main-column {
    display: flex
}

.hero-col-1 img {
    width: 95%;
    display: table
}

section.top-hero-section {
    background: url(../images/inner-img/hero-background.png) no-repeat center;
    background-size: cover
}

.hero-col-1.about-h2 p {
    margin-top: 15px;
}

.about-page-our-journy-top-colmn {
    display: flex;
    justify-content: space-between;
    gap: 70px
}

.about-our-journy-top-col-1 {
    width: 20%
}

    .about-our-journy-top-col-1 img {
        width: 100%
    }

.about-our-journy-top-col-2 {
    width: 80%
}

.about-our-journy-top-col-2-inner-1 {
    padding: 20px;
    border: 3px dashed #f05c22;
    border-radius: 10px;
    background-color: #fff
}

.about-our-journy-top-col-1 h3 {
    font-family: Helvetica;
    font-size: 45px;
    font-weight: 700;
    color: #272F6A
}

.about-our-journy-top-col-2-inner {
    display: flex;
    gap: 70px
}

span.symbol {
    display: inline-block;
    color: #F05C22;
    font-size: 60px;
    font-weight: 700
}

.about-our-journy-top-col-2 .stat-item p {
    text-shadow: 2px 30px 27px #727272
}

.about-our-journy-second-column {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.about-our-journy-second-column-col-1 {
    width: 40%
}

img.our-journy-image-bottom-1 {
    border-radius: 25px;
    width: 100%
}

.about-our-journy-second-column-col-1 .sucess-top-heading {
    justify-content: start
}

.about-our-journy-second-column-col-1 p {
    margin-top: 20px
}

.about-our-journy-second-column-col-1 button {
    margin-top: 30px !important
}

.about-our-journy-second-column {
    padding-top: 60px
}

.about-our-journy-second-column-col-1.our-journy-bottom-inner-images {
    position: relative
}

img.our-journy-image-bottom-2 {
    position: absolute;
    width: 250px;
    bottom: 0;
    left: -15%;
    border-radius:30px;
}

.about-our-mission-column {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #3030304D
}

.about-our-mission-col-2 {
    width: 70%
}

.about-our-mission-col-1 {
    width: 20%
}

    .about-our-mission-col-1 h2 {
        font-family: Helvetica;
        font-size: 45px;
        font-weight: 700;
        color: #20244B
    }

section.about-our-mission {
    padding: 60px 0
}

.about-our-mission-column.about-our-mission-column-2 {
    margin-top: 30px
}

span.about-phera-heading {
    color: #272F6A;
    font-size: 20px;
    font-weight: 600
}

p.about-value-phera {
    margin-top: 18px
}

.hero-main-column {
    padding-top: 60px
}

img.services-hero-img-1 {
    padding-top: 100px
}

section.service-page-section-1 {
    padding: 60px 0
}

.our-service-top-main-column {
    background: url(../images/inner-img/service-page-top-bg.png) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 70px 80px;
    gap: 130px;
    border-radius: 60px;
}

.ur-service-top-main-col-1 {
    width: 50%
}

    .ur-service-top-main-col-1 img {
        width: 100%
    }

    .ur-service-top-main-col-1 h3 {
        font-family: Helvetica;
        font-size: 30px;
        font-weight: 700;
        color: #272F6A
    }

    .ur-service-top-main-col-1 p {
        font-family: Poppins;
        font-size: 16px;
        margin-top: 20px
    }

    .ur-service-top-main-col-1 button.btn-2 {
        margin-top: 25px
    }

section.service-page-our-benefit-section .sucess-top-heading {
    justify-content: start
}

.service-page-our-benefit-column {
    display: flex;
    gap: 80px;
    align-items: self-start
}

.service-page-our-benefit-col-1 {
    width: 50%;
    top: 15%;
    position: sticky
}

.service-page-our-benefit-col-2 {
    width: 50%
}

    .service-page-our-benefit-col-2 img {
        width: 100%;
        border: 2px solid #20244B;
        border-radius: 20px;
        margin-top: 30px
    }

.service-page-our-benefit-col-1 h2 {
    font-family: Helvetica;
    font-size: 45px;
    font-weight: 700;
    color: #20244B
}

    .service-page-our-benefit-col-1 h2 span.orange-1 {
        font-size: 60px
    }

.service-page-our-benefit-col-1 p {
    margin-top: 20px;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    color: #303030
}

.service-page-our-benefit-col-1-inner-pheragraph-div p {
    margin-top: 15px;
    border-left: 3px solid #F05C22;
    padding-left: 10px;
    color: #20244B
}

.service-page-our-benefit-col-2-inner-main {
    display: flex;
    position: sticky;
    top: 12%
}

section.service-page-our-benefit-section {
    margin-bottom: 60px
}

.our-tech-stack-main h2 {
    font-family: Helvetica;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    color: #20244B
}

.our-tech-stack-column {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 45px
}

.our-tech-stack-col-1 {
    width: 300px;
    border: 1px dashed #F05C22;
    border-radius: 20px;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    background-color: #fff;
    transition: 0.5s ease all
}

section.our-tech-stack-section {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png)
}

.our-tech-stack-col-1:hover {
    transform: scale(1.1)
}

.our-tech-stack-col-1 h3 {
    font-family: Futura-md;
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    color: #20244B
}

.our-tech-stack-col-1 img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    margin-top: 10px
}

.why-work-with-qmanja-col-1 {
    width: 50%
}

.why-work-with-qmanja-col-2 {
    width: 50%;
    background: linear-gradient(90deg,#1D2041 0%,#20244B 100%);
    padding: 40px;
    border-radius: 20px
}

.why-work-with-qmanja-column {
    display: flex;
    gap: 60px;
    align-items: center
}

.why-work-with-qmanja-col-2 p {
    color: #fff;
    border-left: 2px solid rgb(240 92 34);
    margin-top: 12px;
    padding-left: 10px
}

    .why-work-with-qmanja-col-2 p:nth-child(1) {
        margin-top: 0
    }

section.why-work-with-qmanja-section .sucess-top-heading {
    justify-content: start
}

section.why-work-with-qmanja-section {
    padding: 60px 0
}

.why-work-with-qmanja-col-1 h2 {
    font-family: Helvetica;
    font-size: 45px;
    font-weight: 700;
    color: #20244B
}

    .why-work-with-qmanja-col-1 h2 span.orange-1 {
        font-size: 60px
    }

.why-work-with-qmanja-col-1 p {
    margin-top: 40px;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500
}

.our-development-process-main h2 {
    font-family: Helvetica;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    color: #20244B
}

section.our-development-process {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png)
}

.our-development-process-column {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    margin-top: 60px;
    gap: 60px
}

.our-development-process-col-1 {
    text-align: center
}

    .our-development-process-col-1::after {
        content: '';
        position: absolute;
        top: 20%;
        right: -45px;
        width: 50px;
        height: 100px;
        background: url(../images/inner-img/sucess-right-vector.png) no-repeat center;
        background-size: contain;
        transform: translateY(-50%)
    }

section.Our-Tech-Stack h2 {
    font-family: Helvetica;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    color: #20244B
}

section.contact-us.service-page-conact-us {
    background: #fff
}

section.our-expert.service-page-blog {
    background: url(../images/inner-img/sec-bg.png)
}

.Our-Tech-Stack {
    text-align: center;
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png)
}

.highlight {
    color: #f26326;
    font-weight: 700
}

.Our-Tech-Stack-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 70px
}

.Our-Tech-Stack-step {
    width: 15%;
    position: relative
}

    .Our-Tech-Stack-step img {
        width: 100%;
        object-fit: contain
    }

    .Our-Tech-Stack-step p {
        margin-top: 10px;
        font-weight: 700;
        color: #1a1a1a
    }

    .Our-Tech-Stack-step::after {
        content: '';
        position: absolute;
        top: 13%;
        right: -90px;
        width: 110px;
        height: 100px;
        background: url(../images/inner-img/sucess-right-vector.png) no-repeat center;
        background-size: contain;
        transform: translateY(-50%)
    }

    .Our-Tech-Stack-step.Our-Tech-Stack-step-2::after {
        content: '';
        position: absolute;
        top: 70%;
        right: -90px;
        width: 110px;
        height: 100px;
        background: url(../images/inner-img/sucess-left-vector.png) no-repeat center;
        background-size: contain;
        transform: translateY(-50%)
    }

    .Our-Tech-Stack-step.stepp-1::after {
        display: none
    }

    .Our-Tech-Stack-step p {
        font-family: Futura-md;
        font-size: 22px;
        font-weight: 400;
        text-align: center
    }

img.qmanja-different-mobile-img {
    display: none
}

.qmanja-different-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row
}

.qmanja-different-col-1 {
    width: 30%
}

    .qmanja-different-col-1 img {
        width: 100%
    }

.qmanja-different-col-1-inner-content {
    border: 1px dashed #F05C22;
    border-radius: 10px;
    padding: 20px
}

    .qmanja-different-col-1-inner-content:nth-child(2) {
        margin-top: 20px
    }

    .qmanja-different-col-1-inner-content:nth-child(3) {
        margin-top: 20px
    }

    .qmanja-different-col-1-inner-content h3 {
        font-family: Helvetica;
        font-size: 28px;
        font-weight: 700;
        color: #272F6A
    }

    .qmanja-different-col-1-inner-content p {
        font-family: Poppins;
        font-size: 16px;
        font-weight: 400;
        color: #303030;
        margin-top: 8px
    }

section.whats-make-qmanja-different-section {
    padding: 60px 0
}

section.portfolio-our-client-section.our-work-section .portfolio-our-client-main-column {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 30px
}

section.portfolio-our-client-section.our-work-section .portfolio-our-client-main-col-1-information-col-1 h3 {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 700
}

section.portfolio-our-client-section.our-work-section .portfolio-our-client-main-col-1-information-col-1 p {
    font-family: Poppins;
    font-size: 10px;
    font-weight: 400;
    margin-top: 8px;
    line-height: 15px
}

section.portfolio-our-client-section.our-work-section .portfolio-our-client-main-col-1-information-col-1 a {
    padding: 10px 10px
}

    section.portfolio-our-client-section.our-work-section .portfolio-our-client-main-col-1-information-col-1 a i {
        font-size: 15px
    }

section.portfolio-our-client-section.our-work-section {
    background: url(../images/inner-img/sec-bg.png)
}

    section.portfolio-our-client-section.our-work-section .portfolio-page-oue-client-top p {
        max-width: 90%
    }

.portfolio-page-oue-client-top h2 {
    font-family: Helvetica;
    font-size: 50px;
    font-weight: 700;
    margin-top: 10px;
    color: #20244B
}

section.portfolio-our-client-section {
    padding: 0 0 60px 0
}

.portfolio-page-oue-client-top p {
    margin-top: 25px
}

.portfolio-page-oue-client-top {
    text-align: center
}

    .portfolio-page-oue-client-top p {
        padding-top: 20px;
        max-width: 80%;
        margin: 0 auto
    }

.portfolio-our-client-main-col-1-information {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.portfolio-our-client-main-column {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 40px;
    column-gap: 70px;
    row-gap: 50px
}

.portfolio-our-client-main-col-1-inner-img {
    display: flex;
    justify-content: center;
    align-items: center
}

.portfolio-our-client-main-col-1 {
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 4px 10px 0 #0000001A;
    border-radius: 10px;
    transition: 0.5s ease all
}

.portfolio-our-client-main-col-1-inner-img img {
    width: 100%
}

.portfolio-our-client-main-col-1-information-col-1 h3 {
    font-family: Helvetica;
    font-size: 28px;
    font-weight: 700;
    color: #272F6A;
    transition: 0.5s ease all
}

.portfolio-our-client-main-col-1-information-col-1 p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #303030;
    margin-top: 15px;
    transition: 0.5s ease all
}

.portfolio-our-client-main-col-1-information-col-1 a {
    padding: 15px 18px;
    background-color: #f05c22;
    color: #fff;
    border-radius: 5px
}

.portfolio-our-client-main-col-1-information-col-1 i {
    transition: 0.3s ease all;
    font-size: 25px
}

.portfolio-our-client-main-col-1-information-col-1 a {
    display: flex;
    align-items: center;
    justify-content: center
}

.portfolio-our-client-main-col-1-information-col-1 {
    margin-top: 20px
}

.portfolio-our-client-main-col-1:hover {
    background-color: #f05c22
}

    .portfolio-our-client-main-col-1:hover .portfolio-our-client-main-col-1-information-col-1 h3 {
        color: #fff
    }

    .portfolio-our-client-main-col-1:hover .portfolio-our-client-main-col-1-information-col-1 p {
        color: #fff
    }

    .portfolio-our-client-main-col-1:hover .portfolio-our-client-main-col-1-information-col-1 a {
        color: #f05c22;
        background-color: #fff
    }

        .portfolio-our-client-main-col-1:hover .portfolio-our-client-main-col-1-information-col-1 a i {
            transform: rotate(-50deg)
        }

.card-section {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 20px;
    margin: 0 auto 40px auto;
    padding: 0 20px
}

.card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgb(0 0 0 / .1);
    padding: 20px;
    transition: transform 0.3s ease,box-shadow 0.3s ease;
    text-align: center;
    border: 3px dashed #f05c22
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px #f05c228f
    }

    .card h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        color: #ee6f1c
    }

    .card p {
        font-size: 1rem;
        color: #555
    }

.contact-us-page-card-img img {
    width: 100%;
    margin-bottom: 20px
}

.contact-us-page-card-img {
    width: 30%;
    margin: 0 auto
}

ul.contact-page-address-1 li {
    border: 2px dashed #f05c22;
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 6px;
    background: #fff;
    max-width: 90%;
    transition: transform 0.3s ease,box-shadow 0.3s ease;
    cursor: pointer
}

    ul.contact-page-address-1 li:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px #f05c228f
    }

section.contact-us.contact-us-page .map-column {
    height: 100%;
    overflow: hidden
}

.about-our-mission-column.about-our-mission-column-2.our-values-about-page {
    border-bottom: none
}

img.we-do-vector.our-method-vector {
    top: 100%
}

section.what-we-do.our-method {
    background: url(../images/inner-img/sec-bg.png) fixed
}

.we-do-imges.our-method-column-top .our-method-card-inner-1 {
    width: 20%
}

.we-do-imges.our-method-column-top .our-method-card-inner-2 {
    width: 80%
}

.we-do-imges.our-method-column-top .our-method-card-inner-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.our-method-card-inner-2 h3 {
    margin: 0
}

.our-method-card-inner-2 h4 {
    font-size: 20px;
    margin-top: 8px;
    color: #272F6A;
    line-height: 25px
}

.we-do-imges.our-method-column-top {
    align-items: center
}

section.what-we-do.our-method .service-col-2 p.our-method-card-pheragraph {
    margin-top: 20px
}

.our-method-bottom-phera-div {
    margin-top: 30px
}

    .our-method-bottom-phera-div p {
        font-size: 16px;
        font-weight: 400;
        font-family: Futura-md;
        color: #303030;
        border-left: 2px solid #f05c22;
        padding-left: 12px
    }

p.our-method-bottom-phera-2 {
    margin-top: 15px
}

section.what-you-will-save {
    padding: 60px 0
}

.what-you-will-save-top-div h2 {
    text-align: center;
    font-family: Helvetica;
    font-size: 60px;
    font-weight: 700;
    margin-top: 18px;
    color: #20244B
}

.what-you-will-save-top-div p {
    max-width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    text-align: center
}

table.platform-table {
    width: 100%;
    margin-top: 30px
}

    table.platform-table th {
        background-color: #20244B;
        color: #fff;
        font-family: Futura-md;
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        padding: 14px 10px
    }

    table.platform-table td {
        text-align: center;
        border: 1px solid #F05C22;
        width: 33%;
        font-family: Poppins;
        font-size: 20px;
        font-weight: 500;
        padding: 10px;
        color: #303030
    }

.extra-benifit-main-div h2 {
    text-align: center;
    margin-top: 10px;
    font-family: Helvetica;
    font-size: 60px;
    font-weight: 700;
    color: #20244B
}

.extra-benifit-main-div {
    margin-top: 40px
}

.map-column.img-column {
    box-shadow: inherit;
    height: 100%
}

    .map-column.img-column img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        border-radius: 20px
    }

.jobs-section {
    padding: 0 0 30px 0
}

    .jobs-section h2 {
        text-align: center;
        font-size: 2.2rem;
        margin-bottom: 30px;
        color: #20244B
    }

.job-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgb(0 0 0 / .1);
    transition: transform 0.3s ease;
    border: 2px dashed #f05c22
}

    .job-card:hover {
        transform: translateY(-5px)
    }

    .job-card h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        color: #20244b
    }

    .job-card p {
        color: #666
    }

    .job-card button {
        margin-top: 10px
    }

.why-work-section {
    padding: 60px 20px;
    border-radius: 8px
}

    .why-work-section h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #20244b;
        font-size: 30px
    }

.why-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center
}

.why-item {
    flex: 1 1 calc(33.333% - 20px);
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgb(0 0 0 / .1);
    text-align: center
}

    .why-item img {
        width: 60px;
        height: 60px;
        margin-bottom: 10px
    }

.apply-section {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png)
}

    .apply-section h2 {
        text-align: center;
        color: #20244b;
        font-size: 30px
    }

.form-container {
    padding: 30px;
    border-radius: 8px
}

    .form-container label {
        display: block;
        font-weight: 700;
        color: #272F6A;
        font-size: 18px;
        font-weight: 400;
        font-family: Futura-md;
        padding: 0 10px
    }

    .form-container input, .form-container textarea, .form-container button {
        width: 100%;
        margin-bottom: 15px
    }

    .form-container input, .form-container textarea {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px
    }

    .form-container textarea {
        resize: none
    }

    .form-container button {
        margin-top: 10px
    }

.careers-form-top-main {
    display: flex;
    gap: 30px;
    margin-top: 15px
}

.careers-form-top-main-co-1 {
    border: 1px solid #777;
    border-radius: 10px;
    padding: 10px;
    width: 50%
}

    .careers-form-top-main-co-1 input {
        outline: 0;
        border: none;
        margin-bottom: 0;
        background-color: #fff0;
        padding: 5px 0 0 10px
    }

.career-page-form-div-2 {
    margin-top: 15px;
    border: 1px solid #777;
    border-radius: 10px;
    padding: 10px
}

    .career-page-form-div-2 input {
        border: none;
        outline: 0;
        background-color: #fff0;
        font-size: 18px;
        font-family: popins
    }

    .career-page-form-div-2 textarea {
        border: none;
        background-color: #fff0;
        outline: 0;
        font-size: 18px;
        font-family: "Poppins",serif
    }

.careers-form-top-main-co-1 input {
    font-size: 16px
}

    .careers-form-top-main-co-1 input::placeholder {
        font-size: 16px;
        color: #D1D1D1
    }

.career-page-form-div-2 input::placeholder {
    font-size: 16px
}

.career-page-form-div-2 textarea::placeholder {
    font-size: 18px;
    font-family: popins;
    COLOR: #D1D1D1
}

.why-item h3 {
    font-family: 'helvetica';
    font-size: 22px;
    margin-bottom: 12px
}

.why-item p {
    text-align: center
}

button.btn-1.nav-btn-active {
    background: #fff
}

    button.btn-1.nav-btn-active a {
        color: #f05c22
    }

section.apply-section.free-demo-page h2 {
    margin-bottom: 0
}

section.what-we-do .service-col-2 h3 {
    margin: 10px 0
}

.free-demo {
    text-align: center;
    padding: 0 0 60px 0;
    background-color: #fff
}

.free-demo-title {
    font-size: 2.4rem;
    color: #20244b;
    margin-bottom: 30px
}

.card-page-container {
    display: flex;
    gap: 30px;
    justify-content: center
}

.card-page {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 15px rgb(0 0 0 / .1);
    transition: transform 0.3s ease,box-shadow 0.3s ease;
    width: 30%;
    text-align: center
}

    .card-page:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 25px rgb(0 0 0 / .15)
    }

    .card-page h3 {
        font-size: 1.5rem;
        color: #ee6f1c;
        margin-bottom: 15px
    }

    .card-page p {
        font-size: 1rem;
        color: #555;
        margin-bottom: 20px
    }

    .card-page p {
        text-align: center
    }

.stats .stat-item p {
    text-align: center
}

.step-container .step p {
    text-align: center
}

.our-team-col-1 h3 {
    text-align: center
}

.our-team-col-1 p {
    text-align: center
}

.testimonial-card.active .profile p.position {
    text-align: center
}

img.we-do-vector.we-do-vector-top {
    top: 100%;
    right: 70%;
    transform: rotate(-20deg)
}

.inner-header .breadcrumb {
    background: #f85a14;
    margin-bottom: 0;
    padding: 18px 0;
    border-radius: 0
}

li.breadcrumb-item a {
    color: #fff
}

li.breadcrumb-item.active span {
    color: #272f6a
}

ol.breadcrumb-list.list-unstyled.d-flex {
    margin-bottom: 0 !important
}

.breadcrumb-title.bg-overlay-black-80 {
    background: url(../images/inner-img/03.png) no-repeat;
    background-size: cover
}

.navy-blue-policy {
    color: #212c6b;
    font-weight: 800
}

.burnt-orange-policy {
    color: #f76301;
    font-weight: 800
}

.inner-header .breadcrumb-title.bg-overlay-black-80 .col-lg-12 h1.py-5.text-white {
    color: #fff;
    padding: 70px 0;
    font-size: 46px;
    font-family: Futura-md;
    letter-spacing: 2px
}

.inner-header .breadcrumb .col-lg-12.p-2 ol.breadcrumb-list.list-unstyled.d-flex.mb-0 {
    list-style: none;
    display: flex;
    gap: 10px
}

section.space-ptb {
    padding: 40px 0
}

h5.tc-page-heading {
    font-size: 20px;
    font-family: Futura-md;
    letter-spacing: 1px
}

h5.tc-page-heading {
    font-size: 20px;
    font-family: Futura-md;
    letter-spacing: 1px;
    margin: 15px 0
}

.tc-page-heading-2 {
    margin: 20px 0 0;
    font-size: 22px
}

h5.navy-blue-policy.tc-page-heading.policyy {
    margin-top: 0
}

ol.breadcrumb-list.list-unstyled.d-flex {
    display: flex;
    list-style: none;
    gap: 15px
}

.quote p.testimonial-text::before {
    content: "\201c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 20px
}

.quote p.testimonial-text::after {
    content: '\201d';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
    font-size: 20px;
    margin-bottom: -10px
}

button.btn-1.hide-btn-2 {
    display: none
}

section.service-page-our-service {
    padding: 0 0 60px 0
}

.our-sercices-page-top-column {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px
}

.our-sercices-page-top-col-1 {
    width: 50%
}

.our-sercices-page-top-column .sucess-top-heading {
    justify-content: start
}

.our-sercices-page-top-col-1 h2 {
    font-family: Helvetica;
    font-size: 60px;
    font-weight: 700;
    text-align: left;
    color: #20244B
}

.service-page-grid-column {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    padding-top: 40px
}

    .service-page-grid-column .service-page-grid-col-1 {
        padding: 50px 30px;
        border: 2px dashed #F05C22;
        border-radius: 10px;
        background: #fff
    }

.service-page-grid-col-1-inner-img ul {
    display: flex;
    list-style: none;
    gap: 15px;
    align-items: center
}

.service-page-grid-col-1 .service-page-grid-col-1-inner-img ul li {
    height: 30px
}

    .service-page-grid-col-1 .service-page-grid-col-1-inner-img ul li img {
        width: 100%;
        height: 30px;
        object-fit: scale-down
    }

.service-page-grid-col-1 h3 {
    font-family: Helvetica;
    font-size: 30px;
    font-weight: 700;
    text-align: left;
    color: #272F6A;
    margin-top: 25px
}

.service-page-grid-col-1 p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #303030;
    margin: 25px 0
}

.our-sercices-page-top-col-1 p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    color: #303030
}

.free-demo-card-page-image {
    width: 100%;
    height: 100px;
    margin-bottom: 15 px
}

    .free-demo-card-page-image img {
        width: 100%;
        height: 100px;
        object-fit: contain
    }

section.Your-Fingertips {
    padding: 60px 0PX
}

    section.Your-Fingertips h2 {
        font-family: Helvetica;
        font-size: 52px;
        font-weight: 700;
        margin-top: 20px;
        color: #20244B
    }

.restaurant-app-column {
    display: flex;
    gap: 80px;
    padding: 40px 0;
    align-items: center
}

span.orange-bg {
    background-color: #f05c22;
    color: #fff;
    padding: 6px 16px;
    font-size: 24px;
    font-weight: 400;
    font-family: Futura-md
}

h3.increase-heading {
    font-size: 50px !important
}

.tc {
    text-align: center
}

.restarunt-app-col-1 {
    width: 35%;
    text-align: center
}

.restarunt-app-col-2 {
    width: 65%
}

.restaurant-app-column.restarunt-app-services-first-column {
    margin-top: 30px
}

section.why-work-with-qmanja-section.customer-app-page {
    background: url(../images/inner-img/sec-bg.png) fixed
}

.restarunt-app-col-1 img {
    width: 100%
}

.restarunt-app-col-2 p {
    margin-top: 10px;
    font-size: 18px
}

section.Your-Fingertips.marketing-page {
    background: url(../images/inner-img/sec-bg.png) fixed
}

.restarunt-app-col-1.marketing-page img {
    height: 350px;
    object-fit: cover;
    border-radius: 20px
}

.socila-media-img-div img {
    width: 100%;
    border-radius: 20px;
    height: 250px;
    object-fit: cover
}

.service-col-2.client-scroll h2 {
    margin: 12px 0;
    color: #272F6A;
    font-size: 30px;
    font-weight: 700
}

.service-col-2 {
    margin-bottom: 40px
}

section.service-page-our-benefit-section.social-media-page {
    padding: 60px 0;
    background: url(../images/inner-img/sec-bg.png) fixed
}

section.service-page-our-benefit-section.social-media-page {
    margin-bottom: 0
}

.trusted-partner-col-1.right-border .trusted-partnet-col-1-div-img {
    width: 100%;
    border-radius: 20px;
    height: 250px
}

.trusted-partnet-col-1-div-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 20px
}

.trusted-partner-column.trusted-partner-column-page-2 .trusted-partner-col-1 {
    padding: 40px
}

.how-it-work-inner-content h2 {
    font-size: 52px;
    text-align: center;
    color: #20244b;
    margin-top: 20px
}

.how-it-works-steps-column {
    display: flex;
    gap: 60px;
    padding: 20px 0;
    align-items: center
}

.how-it-works-steps-col-1 {
    width: 50%
}

    .how-it-works-steps-col-1 img {
        width: 100%;
        border-radius: 20px
    }

    .how-it-works-steps-col-1 h3 {
        font-size: 38px;
        color: #20244b;
        margin-top: 18px
    }

    .how-it-works-steps-col-1 p {
        font-family: Poppins;
        font-size: 16px;
        font-weight: 500;
        color: #303030
    }

.inner-border-pharagraph p {
    border-left: 2px solid #f05c22;
    padding: 0 0 0 10px;
    margin: 10px 0 10px 0
}

.inner-border-pharagraph {
    margin-bottom: 20px
}

.inner-border-pharagraph {
    margin-bottom: 20px
}

span.span-orange-bg {
    padding: 6px 16px;
    background: #f05c22;
    color: #fff;
    font-family: Futura-md;
    font-size: 24px;
    margin-top: 10px
}

.how-it-works-steps-column.top-padding {
    padding-top: 40px
}

p.ttp {
    margin-top: 0
}

section.contact-us.how-it-works-page {
    background: none
}

.service-page-our-benefit-column.page-inner-column-2 {
    display: flex;
    align-items: center;
    padding: 30px 0
}

section.portfolio-our-client-section.our-work-section.website-hosting-page {
    padding-top: 50px
}

h1.heading-1main {
    font-size: 52px;
    color: #20244b;
    margin-top: 20px;
    font-weight: 600;
}

.heading-2main {
    font-family: Helvetica;
    font-size: 30px;
    font-weight: 700;
    color: #272F6A;
}

.main-blogs-column {
    display: flex;
    gap: 40px;
    align-items: self-start;
    position: relative;
}

.main-blogs-col-1 {
    width: 70%;
}

.main-blogs-col-2 {
    width: 30%;
    position: sticky;
    top: 18%;
}

.form-phara {
    margin-bottom: 10px;
}

.blog-inner-form textarea#message {
    font-family: "Poppins", serif;
}

    .blog-inner-form textarea#message::placeholder {
        font-family: "Poppins", serif;
    }

.blog-inner-form input {
    font-family: "Poppins", serif;
}

    .blog-inner-form input::placeholder {
        font-family: "Poppins", serif;
    }

.contact-form {
    display: flex;
    flex-direction: column;
    border: 2px solid #f05c22;
    padding: 15px;
    border-radius: 10px;
}

.blog-inner-form .form-label {
    font-size: 14px;
    color: #20244b;
    margin-top: 10px;
    font-weight: 700;
    font-family: Futura-md;
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 8px;
    border: none;
    font-size: 14px;
    outline: none;
    background: transparent;
    resize: vertical;
}



.phone-group {
    display: flex;
    gap: 10px;
}

.form-select {
    width: 30%;
}

.phone-input {
    width: 65%;
}

/* Error message */
.error-message {
    color: red;
    font-size: 12px;
    display: none;
}

/* Show error when input is invalid */
.form-input:invalid + .error-message,
.form-textarea:invalid + .error-message {
    display: block;
}

textarea#message {
    height: 150px;
}

.blog-hero-section {
    padding: 60px 0px;
}

.main-blogs-col-1 h2 {
    font-size: 38px;
    color: #20244b;
}

p.blog-pharagraph {
    font-family: "Poppins", serif;
    font-size: 18px;
    color: #303030;
    margin-top: 10px;
}

p.blog-pharagraph-Published {
    font-family: "Poppins", serif;
    font-size: 20px;
    color: #303030;
    margin-top: 10px;
}

.blog.inner-img {
    margin: 20px 0px;
    height: 500px;
}

    .blog.inner-img img {
        border-radius: 15px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

h2.blog-inner-heading {
    font-size: 32px;
}

ul.blog-inner-list {
    font-size: 18px;
    padding: 20px 0px 0px 20px;
}

    ul.blog-inner-list li {
        padding: 10px 0px;
    }

.blog-inner-form {
    border: 1px solid #303030;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height:8px;
}

::-webkit-scrollbar-thumb {
    background-color: #f05c22; /* Set the color of the scrollbar thumb */
    border-radius: 10px;
    /* Round the corners */
    padding: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #ff8d60; /* Change color when hovering over the scrollbar */
    }

::-webkit-scrollbar-track {
    background-color: transparent; /* Track color */
    border-radius: 10px;
}
@media screen and (max-width:1200px) {
    .main-blogs-col-1 h2 {
        font-size: 32px;
    }

    p.blog-pharagraph-Published {
        font-size: 18px;
    }

    p.blog-pharagraph {
        font-size: 16px;
    }

    .main-blogs-col-1 h2 {
        font-size: 26px;
    }

    ul.blog-inner-list {
        font-size: 16px;
    }

    .main-blogs-column {
        gap: 20px;
    }

    .contact-form {
        padding: 10px;
    }

    .blog-hero-section {
        padding: 40px 0px;
    }
}

@media screen and (max-width:768px) {
    .main-blogs-column {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .main-blogs-col-1 {
        width: 100%;
    }

    .main-blogs-col-2 {
        width: 100%;
    }

    .blog-hero-section {
        padding: 30px 0px;
    }

    p.blog-pharagraph-Published {
        font-size: 16px;
    }
}