h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0a0a0a
}

.btn,
button:focus {
    outline: 0
}

.section-pad {
    padding: 100px 0 70px
}

.display-3 {
    color: #181818;
    font-weight: 600;
    line-height: 75px
}

.display-4 {
    line-height: 65px;
    font-weight: 600
}

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

.mat-30 {
    margin-top: 30px
}

.mat-50 {
    margin-top: 50px
}

.mab-20 {
    margin-bottom: 20px
}

.mab-30 {
    margin-bottom: 30px !important
}

.mab-50 {
    margin-bottom: 50px
}

.section-title h2 {
    font-size: 35px;
    font-weight: 600
}

.orange {
    color: #f25814
}

.btn-primary {
    border-radius: 5px !important;
    box-shadow: none !important;
    padding: 12px 25px !important;
    background-color: #0094ff !important;
    border-color: #0094ff !important;
    text-transform: uppercase
}

.btn-primary:focus,
.btn-primary:hover {
    background-color: #ffffff !important;
    border-color: #0094ff !important;
    box-shadow: none !important;
    color: #0094ff !important;
    transform: none
}

.borderBtn {
    background: #ffffff !important;
    color: #0094ff !important;
    border-color: #0094ff !important;
}

.borderBtn:hover {
    background: #0094ff !important;
    border-color: #ffffff !important;
    color: #ffffff !important;

}

.landing-bannersection {
    position: relative;
    overflow: hidden;
    background: url(../images/home/homebanner.png) no-repeat right center;
    background-size: cover;
    padding: 200px 0;
      background-size: 85% auto;
}

.mobile-banner {
    position: relative;
    background: url(../images/landing/grocery-mobile-app.webp) no-repeat center center/cover;
    padding: 150px 0;
    margin-top: 76px
}

.landing-bannersection .borderBtn {
    padding: 15px 34px
}

.landing-bannersection .borderBtn,
.solution-section .col-lg-5 .borderBtn {
    margin-left: 15px
}

.overview-section h3 {
    font-size: 25px
}

.overview-section .spriteIcon {
    width: 65px;
    height: 60px;
    margin: 0 0 15px
}

.overviewIcon1 {
    background-position: -322px -88px
}

.overviewIcon2 {
    background-position: -3px -87px
}

.overviewIcon3 {
    background-position: -169px -85px
}

.overviewIcon4 {
    background-position: -243px -87px
}

.overviewIcon5 {
    background-position: -84px -90px
}

.overviewIcon6 {
    background-position: -405px -86px
}

.hero-section .img-down {
    margin-bottom: -120px
}

.hero-section {
    padding-bottom: 0;
    background-color: rgba(255, 213, 194, .49)
}

.hero-section .lead {
    font-size: 22px;
    line-height: 28px;
    font-weight: lighter
}

.hero-section .text-warning {
    color: #ff5215 !important;
    font-size: 18px
}

.solution-section .text-success {
    font-size: 16px
}

.hero-section .quote-section {
    position: relative
}

.hero-section .quote-section .fa-quote-left {
    font-size: 50px;
    font-weight: lighter;
    color: #ff5215;
    position: absolute;
    top: -10px;
    left: -10px;
    opacity: .15;
    width: 50px;
    height: 50px;
    background: url(../images/sprite.webp) no-repeat transparent;
    background-position: -394px -479px
}

.solution-section {
    margin-top: 100px
}

.solution-section .section-title {
    margin-bottom: 25px
}

.solution-section .col-lg-5 .borderBtn {
    padding: 15px 52px
}

.solution-section .nav-tabs {
    border-bottom: 0 !important
}

.solution-section .nav-tabs .nav-link {
    font-size: 18px;
    font-weight: 600;
    padding: 0;
    margin-right: 50px;
    text-transform: uppercase;
    color: #0a0a0a;
    border: 0
}

.solution-section .nav-tabs .nav-link.active {
    border: 0;
    color: #0094ff;
    padding: 0;
    border-bottom: 2px solid
}

.solution-section .btn-outline-primary {
    border-color: #fff;
    background-color: #fff;
    color: #0094ff !important;
    font-size: 17px;
    font-weight: 600;
    padding: 15px 40px;
    margin-left: 10px
}

.solution-section .btn-outline-primary:focus,
.solution-section .btn-outline-primary:hover {
    border-color: #f25814;
    background-color: #f25814;
    color: #fff !important
}

#ueberTabB img {
    max-height: 319px
}

.develop-section {
    background-color: #fff !important;
    padding: 100px 0
}

.develop-section img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto
}

.develop-section ul {
    margin-top: 10px !important
}

.develop-section ul li {
    list-style-type: none;
    font-size: 18px !important;
    margin: 0
}

.develop-section a {
    font-weight: 600;
    color: #f25814;
    font-size: 20px;
    display: block
}

.develop-section .fa-arrow-right {
    font-size: 15px;
    width: 25px;
    height: 22px;
    background: url(../images/sprite.webp) no-repeat transparent;
    background-position: -327px -479px;
    display: inline-block;
    vertical-align: middle
}

.develop-section p {
    margin: 0 0 10px
}

.w-90 {
    width: 90%
}

.w-120 {
    max-width: 118%
}

.develop-widget {
    background-color: #fff;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 1px 20px #ddd
}

.develop-widget a {
    font-size: 19px;
    font-weight: 600;
    margin: 10px 0 0;
    display: block;
    color: #0094ff
}

.develop-widget .fa-arrow-right {
    position: relative;
    left: 4px;
    top: -1px;
    font-size: 16px;
    width: 25px;
    height: 22px;
    background: url(../images/sprite.webp) no-repeat transparent;
    background-position: -358px -479px;
    display: inline-block;
    vertical-align: middle
}

.develop-widget .spriteIcon {
    width: 55px;
    height: 55px;
    margin: 0 0 15px
}

.developIcon1 {
    background-position: -171px -251px !important
}

.developIcon2 {
    background-position: -87px -250px !important
}

.developIcon3 {
    background-position: -8px -249px !important
}

.develop-widget p {
    margin: 0
}

.develop-widget h5,
.shop-widget .heading {
    font-weight: 600;
    font-size: 24px
}

.shop-widget .spriteIcon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px
}

.single-shop {
    background-position: -240px -239px
}

.multi-vendor {
    background-position: -341px -238px
}

.grocery-chain {
    background-position: -446px -235px
}

.optimize-orders {
    background-position: -164px -326px
}

.best-experience {
    background-position: -270px -326px
}

.measure-and-enhance {
    background-position: -375px -326px
}

.lengthly-arrow {
    width: 60px;
    height: 20px;
    background-position: -458px -358px;
    display: inline-block;
    vertical-align: middle
}

.learn-more-btn,
.learn-more-btn:hover {
    border: 1px solid #e2e2e2;
    color: #f25814;
    font-weight: 600;
    font-size: 18px;
    border-radius: 8px;
    background-color: #fcfcfc;
    padding: 10px 20px
}

.grocery-benefits-section {
    background-color: #fafafa
}

.row-top .btn-outline-primary {
    padding: 14px 57px;
    border-radius: 5px;
    border: 2px solid #f25814 !important;
    color: #f25814 !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 17px
}

.row-top .btn-outline-primary:focus,
.row-top .btn-outline-primary:hover {
    background-color: #f25814 !important;
    color: #fff !important
}

.whatsappIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-position: -265px -429px;
    left: 4px;
    top: 4px;
    position: relative
}

.whatsappicon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-position: -335px -419px;
    position: fixed;
    bottom: 35px;
    left: 10px
}

.hero-section .col-lg-5 {
    margin-top: 40px
}

.testimonial-section .carousel-inner {
    min-height: 600px
}

.testimonial-section .carousel-indicators {
    bottom: -70px
}

.testimonial-section .carousel-indicators li {
    background-color: #ddd;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer
}

.testimonial-section .carousel-indicators li.active {
    background-color: #0094ff
}

.feature-banner-content {
    width: 100%;
    padding: 0 180px;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%)
}

.feature-banner-section .display-4 {
    font-size: 52px
}

.feature-banner-section p {
    font-weight: 600
}

.feature-hero-section {
    padding: 150px 0 100px
}

.feature-hero-section .display-5 {
    font-size: 40px !important
}

.feature-hero-section ul li {
    line-height: 28px;
    font-size: 18px;
    list-style-type: disc
}

.mobileapp-section .spriteIcon {
    width: 39px;
    height: 39px;
    display: inline-block;
    margin: 0 20px 0 0
}

.mobile-faq-section .card {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding: 10px 0
}

.mobile-faq-section .card .card-header,
.mobile-faq-section .card .card-header:hover {
    color: #0094ff;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    padding-right: 50px
}

.mobile-faq-section .card .card-header:before {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    right: 20px;
    top: 23px;
    background: url(../images/sprite.webp) no-repeat;
    background-position: -447px -427px
}

.mobile-faq-section .card .card-header.collapsed:before {
    background-position: -395px -427px
}

.mobileappIcon1 {
    background-position: -15px -339px
}

.mobileappIcon2 {
    background-position: -95px -339px
}

.my-6 {
    margin: 100px 0
}

.my-10 {
    margin: 180px 0
}

.my-8 {
    margin: 60px 0
}

.my-7,
.my-8 {
    border: 1px solid #fff
}

.my-7 {
    margin: 40px 0
}

.testimonial-section .fa-play-circle-o {
    font-size: 36px
}

.testimonial-section h5 {
    font-size: 20px;
    font-weight: 600
}

.testimonial-section .lead {
    font-weight: 600;
    color: #7d7d7d;
    font-size: 16px
}

.client-section img {
    filter: gray;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: all .3s
}

.client-section img:hover {
    -webkit-filter: grayscale(0);
    filter: none
}

.emran-img {
    z-index: 1;
    position: absolute;
    right: 100%;
    width: 100%;
    padding: 0 15px
}

.playBtn {
    width: 38px;
    border: 2px solid #ff5215;
    height: 38px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: background-color .25s linear;
    margin: auto 10px auto auto
}

.playBtn,
.video-text {
    display: inline-block;
    vertical-align: middle
}

.video-text {
    color: #ff5215;
    font-size: 18px;
    font-weight: 900
}

.playBtn:before {
    position: absolute;
    content: "";
    border: 7px solid transparent;
    border-left: 12px solid #ff5215;
    top: 10px;
    left: 13px
}

.animatedPlayBtn {
    animation: Pulsate 1.7s ease infinite
}

@keyframes Pulsate {
    0% {
        box-shadow: 0 0 0 #ff5215
    }

    to {
        box-shadow: 0 0 50px rgba(255, 41, 6, 0)
    }
}

.close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ff5215 !important;
    color: #fff;
    border-radius: 50px;
    z-index: 1000;
    opacity: 1;
    text-shadow: none
}

.close-btn:hover {
    opacity: 1;
    text-shadow: none;
    color: #fff !important
}

.sectionTitle h2 {
    font-size: 45px !important
}

.sectionTitle .line {
    width: 50px;
    height: 4px;
    background-color: #0094ff;
    margin-bottom: 30px
}

.big-productsection .display-3 {
    line-height: 75px
}

.alink {
    font-size: 22px;
    color: #0094ff;
    font-weight: 500
}

.big-bannersection {
    background: url(../images/landing/bg1.webp) no-repeat 50%/cover;
    padding: 120px 0 220px
}

.client-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

.client-list li {
    height: 100px;
    width: 25%;
    padding: 0 30px;
    margin: 10px 0
}

.client-list li div {
    height: 75px;
    width: 150px;
    display: block;
    margin: auto;
    background-image: url(../images/logo-sprite.webp);
    background-repeat: no-repeat;
    background-size: 500px
}

.client-list li div,
.client-list li div.Active-shop-logo {
    background-position: 10px 30px
}

.client-list li div.Ziingo-logo {
    background-position: -191px -107px;
    background-size: 1015px
}

.client-list li div.Kiosk-2go-logo {
    background-position: -310px 25px;
    background-size: 700px
}

.client-list li div.topladagel-logo {
    background-position: -308px -88px;
    background-size: 842px
}

.client-list li div.Shop-with-drop-grocery-logo {
    background-position: 11px -56px;
    background-size: 675px
}

.client-list li div.gogaruda-logo {
    background-position: -225px 3px;
    background-size: 822px
}

.client-list li div.pressaa-company-logo {
    background-position: -773px 18px;
    background-size: 905px
}

.client-list li div.mk-shopping-logo {
    background-position: -457px 25px;
    background-size: 700px
}

.big-bannersection .btn-outline-primary {
    border-color: #0094ff;
    color: #0094ff !important;
    font-size: 18px;
    padding: 15px 40px;
    font-weight: 600;
    text-transform: uppercase
}

.big-bannersection .btn-outline-primary:focus,
.big-bannersection .btn-outline-primary:hover {
    background-color: #ff5215 !important;
    border-color: #ff5215 !important;
    color: #fff !important
}

.bg-section,
.bg-section1 {
    position: relative;
    z-index: 1
}

.bg-section:before {
    position: absolute;
    content: "";
    top: 70px;
    right: 0;
    background: url(../images/landing/bg1.webp) no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover
}

.bg-section1:before {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/landing/bg4.webp) no-repeat;
    width: 1225px;
    height: 701px;
    display: block
}

.bb-hero-section {
    padding: 180px 0;
    margin-bottom: 150px
}

.testimonial-section h2 {
    font-size: 45px;
    margin-bottom: 60px
}

.logo-carousel img {
    max-width: 100%;
    width: auto !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    max-height: 100%
}

.logo-carousel .item {
    margin: 0 30px;
    height: 68px;
    position: relative
}

.logo-carousel .owl-dots {
    margin-top: 20px
}

.whitePaper .midSec h2 {
    font-size: 22px
}

.whitePaper .midSec ul {
    padding: 0;
    list-style: none;
    margin-top: 35px
}

.midSec ul li {
    position: relative;
    padding-left: 34px;
    font-size: 20px;
    margin: 0 0 13px
}

.midSec ul li:before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    left: 0;
    top: 6px;
    background: url(../images/sprite.webp) no-repeat top;
    background-position: -186px -428px
}

.grocery-ordering-section .midSec ul li:before {
    background-position: -502px -430px
}

.grocery-ordering-section {
    position: relative;
    overflow: hidden
}

.whitePaper .rightSec h2 {
    font-size: 24px
}

.whitePaper .rightSec form {
    margin: 30px 0 0
}

.whitePaper .rightSec form input {
    background-color: #f9f9f9;
    padding: 10px 25px;
    border-color: transparent;
    width: 100%;
    margin: 10px 0;
    font-size: 17px
}

.whitePaper .rightSec form input::placeholder {
    font-size: 17px
}

.whitePaper .rightSec form .btn {
    width: 100%;
    padding: 12px 40px
}

.whitePaper .MiddleSection {
    margin-top: 30px;
    margin-bottom: 40px
}

.whitePaper .otherResources .Headings {
    margin-bottom: 20px
}

.whitePaper .otherResources .card {
    border: 0;
    text-align: center
}

.whitePaper .otherResources .card .card-img-top {
    max-width: 70px;
    margin: auto
}

.whitePaper .otherResources .card .card-title {
    font-size: 20px;
    color: #051441;
    font-weight: 600
}

.whitePaper .otherResources .card p {
    font-size: 18px
}

.error {
    border-bottom: 1px solid red !important
}

.whitePaper .preFooter {
    background: #e6f1e4;
    position: relative;
    margin-top: 80px
}

.whitePaper .preFooter .sectionBefore {
    position: absolute;
    left: 110px;
    right: auto;
    top: 0;
    bottom: auto
}

.whitePaper .preFooter .sectionBefore:before {
    position: absolute;
    content: "";
    width: 160px;
    height: 130px;
    background-image: radial-gradient(#212121 0, transparent 0), radial-gradient(#0094ff 15%, transparent 0);
    background-position: 0 100%;
    background-size: 13px 13px;
    opacity: .8;
    transform: rotate(-40deg);
    top: 40px;
    z-index: 1
}

.whitePaper .preFooter .sectionBefore .layerTab {
    position: absolute;
    width: 110px;
    height: 90px;
    background-color: #84f171;
    left: 110px;
    top: 80px;
    transform: rotate(-40deg)
}

.whitePaper .preFooter .Headings {
    margin-bottom: 0;
    padding: 40px 10px
}

.whitePaper .preFooter .Headings a {
    font-size: 17px;
    margin-top: 20px
}

.whitePaper .preFooter .sectionAfter {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    bottom: auto
}

.whitePaper .preFooter .sectionAfter:before {
    position: absolute;
    content: "";
    width: 160px;
    height: 130px;
    background-image: radial-gradient(#212121 0, transparent 0), radial-gradient(#0094ff 15%, transparent 0);
    background-position: 0 100%;
    background-size: 13px 13px;
    opacity: .8;
    transform: rotate(-40deg);
    top: 30px;
    right: 170px;
    z-index: 1
}

.whitePaper .preFooter .sectionAfter .layerTab {
    position: absolute;
    width: 110px;
    height: 90px;
    background-color: #84f171;
    right: 110px;
    top: 70px;
    transform: rotate(-40deg)
}

.whitePaper .Headings h2 {
    position: relative;
    font-weight: 600;
    padding-bottom: 4px;
    font-size: 35px
}

.otherResources .spriteIcon {
    width: 70px;
    height: 70px;
    margin: 0 auto
}

.whitepaperIcon1 {
    background-position: -80px 4px
}

.whitepaperIcon2 {
    background-position: 0 0
}

.whitepaperIcon3 {
    background-position: -160px 7px
}

.whitepaperthankyou {
    margin: 100px 0
}

.whitepaperthankyou img {
    max-width: 90px
}

.whitepaperthankyou p {
    margin-bottom: 5px
}

.whitepaperthankyou .card {
    padding: 50px;
    box-shadow: 0 1px 10px #eee;
    border: 0;
    border-radius: 0
}

.whitepaperthankyou .btn {
    margin: 20px 5px 0
}

.whitepaperthankyou .borderBtn {
    padding: 15px 36px
}

.HomeBlog {
    padding-bottom: 70px
}

.HomeBlog .card {
    border: 0;
    border-radius: 0;
    transition: all .3s;
    box-shadow: 0 1px 25px #eaeaea
}

.HomeBlog .card:hover {
    transform: translateY(-10px)
}

.HomeBlog .card img {
    width: 100%;
    height: 225px;
    border-radius: 0;
    object-fit: cover
}

.HomeBlog .card-body {
    display: inline-block;
    background: #fff;
    box-shadow: 0 1px 4px #ddd;
    min-height: 145px
}

.HomeBlog .card-body .card-title {
    font-size: 20px;
    font-weight: 600
}

.HomeBlog .card-body p {
    margin-bottom: 0;
    font-size: 18px
}

.HomeBlog .viewAll .card-body {
    text-align: left;
    box-shadow: none;
    margin: 0;
    padding: 0
}

.HomeBlog .viewAll .card-body p {
    font-weight: 400;
    text-align: left
}

.HomeBlog .viewAll .card-body a {
    display: block;
    margin: 10px 0 0;
    font-weight: 600;
    font-size: 17px;
    color: #f25814
}

.HomeBlog .viewAll {
    margin-left: 15px
}

.HomeBlog .viewAll h5 {
    color: #051441;
    font-weight: 700;
    font-size: 35px;
    margin-bottom: 25px
}

.HomeBlog .viewAll h5 span {
    color: #0094ff
}

.HomeBlog .viewAll .btn {
    margin-top: 15px
}

.aboutus .spriteIcon {
    width: 70px;
    height: 70px;
    margin: 0 0 20px
}

.aboutIcon1 {
    background-position: -401px 0 !important
}

.aboutIcon2 {
    background-position: -244px 0 !important
}

.aboutIcon3 {
    background-position: -334px 0 !important
}

.aboutus .headings {
    margin-top: 40px;
    margin-bottom: 40px
}

.aboutus.section1 p {
    color: #000;
    font-size: 22px;
    line-height: normal;
    display: inline-block;
    margin: 0
}

.aboutus h2 {
    font-size: 35px;
    font-weight: 600
}

.aboutus.section2 {
    background-image: linear-gradient(#e6f1e4 50%, transparent 0);
    padding: 95px 0 105px;
    z-index: 0
}

.aboutus.section {
    position: relative
}

.aboutus.section2 .aboutBG img {
    width: 74%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    display: inline-block;
    z-index: 2
}

.aboutus.section3.ourStory .leftSide {
    margin: 30px auto auto
}

.aboutus.section3.ourStory .leftSide ul {
    list-style: none;
    margin: 40px 0 0;
    padding: 0
}

.aboutus.section3.ourStory .leftSide ul li {
    display: inline-block
}

.aboutus.section3.ourStory .leftSide ul li div.d-inline-block {
    min-width: 177px;
    color: #31172e;
    line-height: 1;
    margin: 15px 0;
    position: relative
}

.aboutus.section3.ourStory .leftSide ul li div.d-inline-block:before {
    content: "";
    width: 40px;
    height: 40px;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
    left: -9px;
    top: -15px;
    background-position: -560px -30px
}

.aboutus.section3.ourStory .leftSide ul li div.d-inline-block b {
    font-size: 30px;
    font-weight: 600
}

.aboutus.section3.ourStory .leftSide ul li div.d-inline-block p {
    font-size: 24px;
    margin: 15px 0 0
}

.aboutus.section3.ourStory .rightSide img {
    width: 80%;
    margin-top: 4%
}

.aboutus.section5.ourPhilosophy {
    background-image: none;
    padding: 40px 0 0
}

.aboutus.section5.ourPhilosophy:after,
.aboutus.section5.ourPhilosophy:before {
    content: none
}

.aboutus.section5.ourPhilosophy .card {
    padding: 35px;
    min-height: 280px;
    width: 300px;
    margin: 0 auto 50px;
    height: auto;
    border: 0;
    box-shadow: 0 0 15px #ccc
}

.aboutus.section5.ourPhilosophy .card .card-img-top {
    width: 70px;
    height: 70px;
    display: inline-block;
    max-width: 70px;
    max-height: 70px
}

.aboutus.section5.ourPhilosophy .card .card-img-top.simple {
    background-position: -210px -68px
}

.aboutus.section5.ourPhilosophy .card .card-img-top.comprehensive {
    background-position: -280px -68px
}

.aboutus.section5.ourPhilosophy .card .card-img-top.colloborative {
    background-position: -350px -68px
}

.aboutus.section5.ourPhilosophy .card .card-img-top.quality {
    background-position: -420px -68px
}

.aboutus.section5.ourPhilosophy .card .card-img-top.trust {
    background-position: -490px -68px
}

.aboutus.section5.ourPhilosophy .card .card-img-top.support {
    background-position: -560px -68px
}

.aboutus.section5.ourPhilosophy .card .card-body {
    padding: 0
}

.aboutus.section5.ourPhilosophy .card .card-title {
    font-size: 25px;
    color: #000;
    font-weight: 600
}

.aboutus.section2:before {
    top: 35%;
    left: 6%;
    right: 0;
    width: 160px
}

.aboutus.section2:after,
.aboutus.section2:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 210px;
    background-image: radial-gradient(#212121 0, transparent 0), radial-gradient(#0094ff 15%, transparent 0);
    background-position: 0 100%;
    background-size: 18px 18px;
    opacity: .5
}

.aboutus.section2:after {
    top: 80px;
    right: 100px;
    width: 235px;
    z-index: -1
}

.CaseStudy .card-img-top {
    height: 230px
}

.CaseStudy ul li {
    font-size: 18px;
    line-height: 28px
}

.demoModal .modal-dialog {
    max-width: 700px
}

.demoModal .modal-body {
    padding: 0
}

.demoModal .modal-content {
    border: transparent
}

.demoModal .ModalBgImg {
    background: url(../images/demoImg.jpg) no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.demoModal .FormSection label {
    margin: 0
}

.demoModal .FormSection input,
.demoModal .FormSection textarea {
    padding: 0
}

.demoModal .FormSection {
    padding: 30px 45px 30px 30px;
    margin: 0
}

.demoModal .FormDiv {
    padding: 0;
    box-shadow: none;
    margin: 0
}

.demoModal .close {
    line-height: 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    font-size: 30px
}

.demoModal h2 {
    font-weight: 600;
    font-size: 30px;
    padding: 0;
    margin: -8px 0 15px;
    text-align: center;
    text-transform: uppercase
}

.foot-h3.active .fa-angle-down {
    transform: rotate(180deg)
}

.loader {
    display: none;
    margin: 0 0 0 10px
}

.faq-block .card {
    background: #fafafa;
    margin: 0 0 25px;
    border: 0 solid #eee;
    border-radius: 0;
    padding: 13px 0
}

.faq-block .card.active {
    background-color: #fff;
    box-shadow: 0 0 12px #eaeaea
}

.faq-block .card .card-header {
    display: block;
    font-size: 22px;
    position: relative;
    font-weight: 600;
    border: 0;
    background: 0 0;
    cursor: pointer
}

.faq-block .card .card-header:after {
    content: "";
    position: absolute;
    right: 25px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-color: transparent #000 #000 transparent;
    border-style: solid;
    border-width: 2px;
    border-radius: 2px;
    transform: rotate(45deg)
}

.faq-block .card .card-body {
    font-size: 20px
}

.faq-block .card.active .card-header[aria-expanded=true]:after {
    border-color: #000 transparent transparent #000
}

@media (max-width:1250px) {
    .develop-section .w-120 {
        max-width: 100% !important
    }
}

@media only screen and (min-width:991px) and (max-width:1200px) {
    .feature-banner-content {
        padding: 0 140px;
        top: 100px
    }

    .landing-bannersection {
        background-position: 50%
    }

    .develop-section .row-top {
        margin-top: 50px
    }

    .bg-section1:before {
        width: 100%;
        height: 100%
    }

    .bb-hero-section {
        padding: 105px 0 200px;
        margin-bottom: 100px
    }

    .bg-section:before {
        width: 100%;
        height: 100%;
        left: 0
    }

    .solution-section .btn-primary {
        padding: 15px 25px
    }

    .solution-section .col-lg-5 .borderBtn {
        padding: 15px 37px
    }

    .aboutus.section3.ourStory .leftSide ul li div.d-inline-block {
        min-width: 147px
    }

    .solution-section .nav-tabs .nav-link {
        margin-right: 31px
    }
}

@media only screen and (min-width:992px) {
    .testimonial-section .carousel-inner {
        min-height: 280px
    }

    .testimonial-section .client-list li {
        width: 16%;
        padding: 0
    }

    .instacart-clone-banner-img {
        position: absolute;
        top: 50%;
        right: 130%;
        transform: translateY(-50%)
    }

    .grocery-ordering-section-img-container {
        position: absolute;
        left: 100%;
        align-self: end;
        z-index: 0;
        bottom: 0
    }

    .grocery-ordering-section-img-container.left {
        right: 100%;
        left: auto;
        text-align: right
    }

    .grocery-ordering-section-img-container:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 150%;
        height: 400px;
        background-color: #f5f5f5;
        border-radius: 200px;
        z-index: -1
    }

    .grocery-ordering-section-img-container.left:before {
        left: auto;
        right: 0
    }

    .grocery-ordering-col-right {
        padding-right: 6rem
    }

    .grocery-ordering-col-left {
        padding-left: 6rem
    }
}

@media (max-width:991px) {
    .grocery-ordering-section-img-container {
        text-align: center;
        margin-bottom: 30px
    }

    .section-pad {
        padding: 50px 0
    }

    .mobile-banner {
        background-position-x: left;
        margin-top: 0;
        padding: 100px 0 50px
    }

    .emran-img {
        z-index: 1;
        position: relative;
        right: 0;
        min-height: 230px
    }

    .client-list li {
        width: 25%;
        padding: 0;
        margin: 10px 0
    }

    .develop-section .w-120 {
        max-width: 100% !important;
        margin-top: 30px
    }

    .develop-section .col-lg-5 .w-90 {
        width: 100%
    }

    .develop-section .row-top {
        transform: none;
        margin-top: 30px
    }

    .hero-section,
    .hero-section .img-down {
        margin-bottom: 0;
        height: auto
    }

    .hero-section {
        padding-bottom: 70px !important
    }

    .feature-hero-section .pl-5 {
        padding-left: 15px !important
    }

    .feature-hero-section ul {
        width: 80%;
        margin: auto
    }

    .feature-hero-section ul li {
        text-align: left
    }

    .mrb-5 {
        margin-bottom: 50px !important
    }

    .mrt-5 {
        margin-top: 50px !important
    }

    .my-10 {
        margin: 50px 0 !important
    }

    .big-bannersection,
    .mobileapp-section {
        text-align: center
    }

    .landing-bannersection {
        background-image: none;
        background: #e8eff5 !important;
        text-align: center;
        padding-bottom: 150px !important
    }

    .landing-bannersection:after,
    .landing-bannersection:before {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 10px;
        transform: rotate(-45deg);
        background-color: #cfdce5
    }

    .landing-bannersection:before {
        bottom: -140px;
        left: -70px
    }

    .landing-bannersection:after {
        top: -150px;
        right: -150px
    }

    .testimonial-section .col-lg-5 {
        margin-bottom: 80px
    }

    .testimonial-section img {
        margin: 40px 0
    }

    .testimonial-section .carousel-indicators li {
        width: 15px;
        height: 15px;
        margin: 0 6px
    }

    .big-productsection .col-lg-6,
    .develop-section,
    .hero-section,
    .sectionTitle,
    .solution-section {
        text-align: center
    }

    .solution-section .nav {
        justify-content: center
    }

    .solution-section .w-75 {
        width: 100% !important
    }

    .feature-banner-content {
        width: 100%;
        padding: 100px 60px;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #d6eff4 !important
    }

    .feature-banner-section img {
        display: none
    }

    .ReverseRow {
        flex-direction: column-reverse
    }

    .tab-content#ueberTabB {
        margin-top: 50px;
        min-height: 230px
    }

    .solution-section .col-lg-7.p-5 {
        padding: 0 !important
    }

    .develop-section .section-title img {
        margin-top: 20px;
        margin-bottom: 35px;
        transform: none;
        top: auto
    }

    .driverappimg {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .feature-hero-section .row:first-child .ImgSection {
        margin-top: 0 !important
    }

    .feature-hero-section .ImgSection {
        margin-top: 50px !important;
        margin-bottom: 20px !important
    }

    .big-productsection .ImgSection {
        margin-top: 0 !important;
        margin-bottom: 30px !important
    }

    .feature-hero-section {
        padding: 100px 0;
        text-align: center
    }

    .big-bannersection {
        background-size: cover;
        background-position: top
    }

    .big-bannersection img {
        margin-top: 5px;
        margin-bottom: 25px
    }

    .aboutus.section3 img {
        margin: 20px 0 0
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .footerCols p {
        padding-left: 0
    }

    .footerCols p:after {
        left: -30px
    }

    .header-new .navbar-toggler {
        margin-top: 14px;
        margin-left: 10px
    }

    .display-3 {
        font-size: 3rem;
        line-height: normal
    }

    .mobile-banner {
        background-size: auto
    }

    .feature-banner-section img {
        right: 0;
        top: -100px;
        width: 300px
    }

    .hero-section .quote-section .fa-quote-left {
        left: 180px
    }

    .testimonial-section .my-auto {
        margin-bottom: 20px !important
    }

    .bg-section1:before {
        width: 100%;
        height: 100%
    }

    .bb-hero-section {
        padding: 137px 0 170px;
        margin-bottom: 100px
    }

    .bg-section:before {
        width: 100%;
        height: 100%;
        left: 0;
        background-size: cover;
        top: 0
    }

    .bg-section {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .big-bannersection {
        padding: 120px 0 210px
    }

    .sectionTitle .line {
        margin: 0 auto 30px
    }

    .big-productsection .ReverseRow .mrb-5 {
        margin-bottom: 0 !important
    }

    .solution-section {
        margin-top: 0
    }

    .HomeBlog .card {
        margin-bottom: 25px
    }

    .DevelopWidgetSec {
        padding: 100px 0 20px
    }

    .develop-section .whitePaper {
        width: 80%;
        margin: auto
    }

    .midSec {
        text-align: left !important
    }

    .whitePaper .Headings {
        margin: 0 auto 20px
    }

    .whitePaper .leftSec {
        margin-bottom: 30px
    }

    .whitePaper .preFooter .sectionAfter,
    .whitePaper .preFooter .sectionBefore {
        display: none
    }

    .whitePaper .Headings h1,
    .whitePaper .Headings h2 {
        font-size: 30px !important
    }

    .aboutus.section5.ourPhilosophy .card {
        width: auto;
        padding: 20px
    }

    .aboutus.section2 .aboutBG img {
        height: 300px;
        width: 80%
    }

    .aboutus.section3 {
        text-align: center
    }

    .social_links li a {
        margin: 10px 7px 20px 0
    }
}

@media (max-width:767px) {
    .client-list li {
        width: 50%
    }

    .overview-section .media {
        display: block !important
    }

    .overview-section .media-left img {
        margin-bottom: 15px
    }

    .overview-section .media-body {
        margin-left: 0 !important
    }

    .solution-section {
        margin-top: 0
    }

    .solution-section .w-75 {
        width: 100% !important
    }

    .feature-banner-section img {
        display: none
    }

    .feature-banner-section {
        text-align: center
    }

    .hero-section .quote-section .fa-quote-left {
        left: 60px
    }

    .aboutus.section2:after,
    .aboutus.section2:before {
        display: none
    }

    .aboutus.section2 .aboutBG img {
        width: 100%
    }

    .aboutus.section5.ourPhilosophy .card {
        width: auto;
        text-align: center
    }

    .aboutus .spriteIcon {
        margin: 0 auto 20px
    }

    .demoModal .ModalBgImg,
    .footCollapse,
    .landing-bannersection .borderBtn {
        display: none
    }

    .midSec {
        text-align: left !important
    }

    .section-title h2 br,
    .section-title p br {
        display: none
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {

    .display-4,
    .section-title h2 {
        font-size: 35px;
        line-height: normal
    }

    h1.display-3 {
        font-size: 45px;
        line-height: normal
    }

    .landing-bannersection {
        padding-top: 150px
    }

    .hero-section .quote-section {
        padding-left: 0 !important
    }

    .hero-section .quote-section .fa-quote-left {
        left: 0
    }

    .DevelopWidgetSec {
        padding: 100px 0 20px
    }

    .develop-widget {
        margin: 0 0 20px
    }

    .midSec {
        width: 50%;
        margin: auto
    }

    .client-section .my-auto {
        margin-bottom: 20px !important;
        width: 45%;
        margin-right: 5%;
        height: 50px;
        position: relative
    }

    .client-section .my-auto img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-height: 100%
    }

    .client-section .my-auto:nth-child(odd) img {
        right: 0
    }

    .client-section .my-auto:nth-child(2n) img {
        left: 0
    }

    .client-section .my-auto:nth-child(2n) {
        margin-right: 0;
        margin-left: 5%
    }

    .partners-group .my-auto {
        text-align: center;
        margin-bottom: 20px !important;
        width: 45%;
        margin-right: 5%;
        height: 50px;
        position: relative
    }

    .partners-group .my-auto:nth-child(2n) {
        margin-right: 0;
        margin-left: 5%
    }

    .partners-group .my-auto img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-height: 100%
    }

    .partners-group .my-auto:nth-child(odd) img {
        right: 0
    }

    .partners-group .my-auto:nth-child(2n) img {
        left: 0
    }

    .partners-group .mat-50:nth-child(odd) {
        margin-top: 0
    }

    .sectionTitle h2 {
        font-size: 30px !important
    }

    .big-bannersection {
        padding: 120px 0 185px
    }

    .bg-section:before {
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        top: 0
    }

    .bg-section {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .bg-section1:before {
        width: 100%;
        height: 100%
    }

    .sectionTitle .line {
        margin: 0 auto 30px
    }

    .develop-section .col-lg-7 {
        margin-top: 25px
    }

    .big-productsection .ReverseRow .mrb-5 {
        margin-bottom: 0 !important
    }

    .HomeBlog .col-lg-3 {
        width: 50%;
        display: inline-block
    }

    .HomeBlog .card {
        margin-bottom: 25px
    }

    #ueberTabB img {
        max-height: 303px
    }

    .whitePaper .Headings {
        margin: 0 auto !important;
        padding: 20px 10px
    }

    .whitePaper .Headings h1,
    .whitePaper .Headings h2 {
        font-size: 30px !important
    }

    .whitePaper .leftSec {
        margin-bottom: 30px
    }

    .whitePaper .otherResources,
    .whitePaper .rightSec {
        margin-top: 35px
    }

    .whitePaper .otherResources .card {
        margin-bottom: 20px
    }

    .whitePaper .preFooter {
        margin-top: 40px
    }

    .whitePaper .preFooter .sectionAfter,
    .whitePaper .preFooter .sectionBefore {
        display: none
    }

    .aboutus.section3.ourStory .leftSide ul li div.d-inline-block {
        min-width: 167px
    }

    .aboutus.section2 .aboutBG img {
        height: 250px
    }

    .aboutus.section3 {
        text-align: center
    }
}

@media only screen and (min-width:320px) and (max-width:479px) {
    .client-list li {
        margin: 0
    }

    .overview-section .spriteIcon {
        margin: 0 auto 15px
    }

    .feature-banner-content {
        padding: 100px 20px
    }

    .feature-banner-section .display-4 {
        font-size: 45px;
        line-height: normal
    }

    .feature-hero-section .display-5 {
        font-size: 30px !important
    }

    .display-4,
    .section-title h2,
    .testimonial-section h2 {
        font-size: 35px;
        line-height: normal
    }

    h1.display-3 {
        font-size: 45px;
        line-height: normal
    }

    .landing-bannersection {
        padding-top: 150px
    }

    .hero-section .quote-section {
        padding-left: 0 !important
    }

    .hero-section .quote-section .fa-quote-left {
        left: 0
    }

    .solution-section .nav-tabs .nav-link {
        margin-right: 18px;
        font-size: 16px
    }

    .DevelopWidgetSec {
        padding: 100px 0 20px
    }

    .develop-widget {
        margin: 0 0 20px
    }

    .midSec {
        width: 90%;
        margin: auto
    }

    .midSec:nth-child(2) ul {
        margin-top: 0 !important
    }

    .client-section .my-auto {
        margin-bottom: 20px !important;
        width: 45%;
        margin-right: 5%;
        height: 50px;
        position: relative
    }

    .client-section .my-auto img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-height: 100%
    }

    .client-section .my-auto:nth-child(odd) img {
        right: 0
    }

    .client-section .my-auto:nth-child(2n) img {
        left: 0
    }

    .client-section .my-auto:nth-child(2n) {
        margin-right: 0;
        margin-left: 5%
    }

    .bg-section1:before {
        width: 100%;
        height: 100%;
        background-size: cover
    }

    .bb-hero-section {
        padding: 115px 0 175px;
        margin-bottom: 20px;
        text-align: center
    }

    .partners-group .my-auto {
        text-align: center;
        margin-bottom: 20px !important;
        width: 45%;
        margin-right: 5%;
        height: 50px;
        position: relative
    }

    .partners-group .my-auto:nth-child(2n) {
        margin-right: 0;
        margin-left: 5%
    }

    .partners-group .my-auto img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-height: 100%
    }

    .partners-group .my-auto:nth-child(odd) img {
        right: 0
    }

    .partners-group .my-auto:nth-child(2n) img {
        left: 0
    }

    .partners-group .mat-50:nth-child(odd) {
        margin-top: 0
    }

    .bg-section {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .bg-section:before {
        width: 100%;
        height: 100%;
        left: 0;
        background-size: cover;
        top: 0
    }

    .big-bannersection {
        padding: 120px 0 185px
    }

    .sectionTitle h2 {
        font-size: 25px !important
    }

    .sectionTitle .line {
        margin: 0 auto 30px
    }

    .big-productsection.section-pad {
        padding-top: 0
    }

    .landing-bannersection .borderBtn,
    .solution-section .col-lg-5 .borderBtn {
        margin-left: 0;
        margin-top: 20px
    }

    .develop-section .col-lg-5 ul {
        margin-top: 0 !important
    }

    .overview-section .mab-30 {
        text-align: center
    }

    .big-productsection .ReverseRow .mrb-5 {
        margin-bottom: 0 !important
    }

    .HomeBlog .card {
        margin-bottom: 25px
    }

    .HomeBlog .card-body {
        min-height: auto
    }

    .whitepaperthankyou .card {
        padding: 25px
    }

    #ueberTabB img {
        min-height: 175px;
        height: auto
    }

    .whitePaper .Headings {
        margin: 0 auto;
        padding: 20px 10px
    }

    .whitePaper .Headings h1 {
        font-size: 32px !important
    }

    .whitePaper .leftSec {
        margin-bottom: 30px
    }

    .whitePaper .rightSec {
        margin-top: 35px
    }

    .whitePaper .Headings h2 {
        font-size: 30px !important
    }

    .whitePaper .otherResources {
        margin-top: 20px
    }

    .whitePaper .otherResources .card {
        margin-bottom: 20px
    }

    .whitePaper .preFooter {
        margin-top: 40px
    }

    .whitePaper .preFooter .sectionAfter,
    .whitePaper .preFooter .sectionBefore {
        display: none
    }

    .aboutus.section3.ourStory .leftSide ul li {
        width: 100%
    }

    .aboutus.section3 {
        text-align: center
    }

    .aboutus.section2 {
        padding: 40px 0 70px
    }

    .aboutus.section2 .aboutBG img {
        height: 200px
    }
}

@media only screen and (min-width:280px) and (max-width:319px) {
    .display-3 {
        font-size: 2rem;
        line-height: 36px
    }

    .section-title h2 {
        font-size: 32px;
        font-weight: 600
    }

    .header-new .navbar-toggler {
        margin-top: 6px
    }
}

.overviewIcon7 {
    background-position: -0px -819px;
}

.overviewIcon8 {
    background-position: -77px -819px;
}

.overviewIcon9 {
    background-position: -161px -819px;
}



/* sug banners section*/

.common {
    position: relative;
    padding: 100px 0;
    margin-top: 76px;
}
.link-primary:hover{
    color:#413ef5;
}
.btn-size{
    padding: 16px 40px ;
}

.furniture-banner{
    background: url("../images/furniture-banner.png") no-repeat center center/cover
}
.fruits-banner{
    background: url("../images/fruits-banner.png") no-repeat center center/cover
}
.flower-banner {
    background: url("../images/flower-banner.png") no-repeat center center/cover
}
.cake-banner {
    background: url("../images/cake-banner.png") no-repeat center center/cover
}
.fast-food-banner {
    background: url("../images/fast-food-banner.png") no-repeat center center/cover
}
.alcohol-banner{
    background: url("../images/alcohol-banner.png") no-repeat center center/cover
}
.laundry-banner{
    background: url("../images/laundry-banner1.png") no-repeat center center/cover
}
.courier-banner{
    background: url("../images/courier-banner.png") no-repeat center center/cover
}

.features a {
    font-weight: 600;
    color: #0094ff;
    font-size: 20px;
    display: block;
}

.arrow-right::after {
    content: '';
    display: inline-block;
    width: 10px; /* Adjust size as needed */
    height: 10px; /* Adjust size as needed */
    border-right: 2px solid red; /* Adjust color and style as needed */
    border-top: 2px solid red; /* Adjust color and style as needed */
    transform: rotate(45deg);
    margin-left: 5px; /* Adjust spacing as needed */
    
}

.rounded-pill a{
    display:flex;
    color:#0094ff !important;
}

.rounded-pill a :hover{
   
    color:#0094ff !important;
}

.a-space{
    margin-top: 1rem;
}