/**************** Banner css start here ****************/
.peppyocean-container {
    margin: 0 auto;
    max-width: 100%;
    width: 1230px;
}

#grofers-overlay {
  position: absolute;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.74);
}

section.grofers-first-row {width: 100%;float: left;position: relative;}
.grofers-first-row .peppy-what-we-do-banner{float: left;
    width: 100%;
    box-sizing: border-box;
    min-height: 700px;
    background-size: cover !important;
    background-position: center !important;
    padding: 100px 100px 0 100px;
}
.grofers-first-row .peppy-case-banner-box{ float:left; width:50%; padding: 50px 0 0 0;position: relative;color: #ffffff;}
.grofers-first-row .peppy-case-banner-box h1{font-family: 'exo_2bold';font-weight: normal; color:#ffffff; font-size:44px; text-transform:uppercase; line-height:130%;}
.grofers-first-row .peppy-case-banner-box p{margin: 10px 0;}
.grofers-first-row .peppy-case-banner-box p strong{font-size:22px;font-weight:bold;}
.grofers-first-row .main-btn {font-family: 'exo_2bold';background-color: #ffffff;padding: 12px 30px;border: none;color: #52418a;font-weight: 900;font-size: 18px;margin-top: 20px;border-radius: 5px;cursor: pointer;}
.peppy-case-banner-mobile{text-align: right;width: 50%;float: right;}
.peppy-case-banner-mobile img{width: 75%;position: relative;right: 0;top: 0;z-index: 1;}


/**************** about css start here ****************/

.about-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;}
.about-grofers-clone-text{padding: 15px;}
.about-case-banner-box{ float:left; width:100%; padding: 30px 0;position: relative;text-align: center;}
.about-case-banner-box h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.about-case-banner-box p{margin: 10px 0;}
.why-glofer-left{width: 45%;float: left;margin-top: 30px;}
.why-glofer-left h3{font-size: 28px;font-weight: 600;line-height: normal;}
.why-glofer-left p{margin-top: 20px;}
.why-glofer-right{width: 48%;float: right;margin-bottom: 50px;}
.why-glofer-right div{width: 100%;float: left;padding: 10px;box-shadow: 0 0 4px 0px #00000030;border-left: 8px solid #52418a;margin: 5px 0;}
.why-glofer-right h4{font-size: 20px;font-weight: 600;}
.why-glofer-right p{font-size: 16px;line-height: 20px;}


/**************** What we do css start here ****************/

.grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 15px;}
.grofers-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.grofers-work-header p{margin: 10px 0;}

.what-we-chart-grofers-clone{width: 100%;float: left;position: relative;background-color: #f5f5f5;}

.chart-app-work-list{width: 96%;margin: 0 auto;}
.chart-app-work-list ul{text-align: center;float: left;position: relative;}
.chart-app-work-list-blox-li{display: inline-block;width: 45%;padding: 45px 15px;margin: 45px 10px;border-radius: 5px;text-align: left;position: relative;background-color: #ffffff;color: #000000;border-radius: 15%;min-height: 340px;position: relative;}
.chart-app-work-list-blox-li h4{font-size: 24px;margin: 10px 0;font-weight: 900;}
.chart-app-work-list-blox-li p{font-size: 20px;}
.chart-app-work-list-blox-li img{width: 70px;}
.chart-app-work-list-blox-li div{width: 100%;float: left;}

.float-left{float: left;}
.float-right{float: right;}

.char-list-1{padding: 40px 65px 0 65px;}
.char-list-2{padding: 40px 65px 0 65px;}
.char-list-3{padding: 40px 65px 0 65px;}
.char-list-4{padding: 40px 65px 0 65px;}

.char-list-1 .rocket{position: relative;top: 10px;}
.char-list-2 .rocket{position: relative;top: 10px;}
.char-list-3 div{margin-bottom: 20px;}
.char-list-4 div{margin-bottom: 20px;}

.char-icon{position: absolute;float: left;}
.char-icon-1{top: 0;left: -10px;}
.char-icon-2{top: 0;right: -10px;}
.char-icon-3{bottom: -7px;left: -10px;}
.char-icon-4{bottom: -7px;right: -10px;}

.char-icon-1 span{position: absolute;top: 50%;left: 50%;transform: translate(-100%, -70%);font-size: 26px;color: #ffffff;font-weight: 900;}
.char-icon-2 span{position: absolute;top: 40%;left: 60%;transform: translate(-50%, -50%);font-size: 26px;color: #ffffff;font-weight: 900;}
.char-icon-3 span{position: absolute;top: 50%;left: 50%;transform: translate(-100%, -70%);font-size: 26px;color: #ffffff;font-weight: 900;}
.char-icon-4 span{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 26px;color: #ffffff;font-weight: 900;}


.blank-circle-mobile{width: 250px;height: 250px;background-color: #ffffff;border-radius: 100%;border:10px solid lightgray;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.blank-circle-mobile img{width: 150px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}


/**************** How app work css start here ****************/

.app-work-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;}

.form-wizard {margin: 0 auto;}
.steps {margin: 40px 0;overflow: hidden;}
.steps ul {margin: 0;padding: 0;list-style: none;display: flex;}
.steps ul li {width: 17%;text-align: center;float: left;color: #000;padding: 0;position: relative;cursor: pointer;}
.steps ul li:hover, .steps ul li.active {color: #000000;}
.steps ul li:hover .work-dots, .steps ul li.active .work-dots {background-color: #52418a;color: transparent;}
.steps ul li:hover::after, .steps ul li.active::after {background-color: #52418a;width: 100%;}
.steps ul li::before, .steps ul li::after {content: "";position: absolute;left: -50%;bottom: 24px;width: 100%;border-bottom: 2px dashed #52418a;background-color: transparent !important;}
.steps ul li::after {width: 0;}
.steps ul li .work-dots {display: block;margin: 0 auto 15px;width: 20px;height: 20px;text-align: center;background-color: #fff;font-size: 18px;line-height: 35px;font-weight: 300;color: transparent;position: relative;z-index: 1;border-radius: 50px;border: 3px solid #52418a;}
.steps ul li:first-child::before, .steps ul li:first-child::after {display: none;}
.form-container {clear: both;display: none;padding: 0 30px;}
.form-container.active {display: block;}
.form-title {margin-bottom: 30px;padding-bottom: 15px;position: relative;font-size: 22px;line-height: 30px;}

.steps ul li div{min-height: 170px;margin: 20px 0;}
.steps ul li p{width: 100%;float: left;}
.steps ul li div span img{width: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.steps ul li div span{width: 100px;height: 100px;display: inline-block;border-radius: 50%;overflow: hidden;position: relative;box-shadow: 0px 0px 4px #0000008a;}


/**************** User app css start here ****************/

.user-app-food-clone-left{width: 100%;float: left;position: relative;background-size: cover !important;color: #ffffff;margin-bottom: -112px;    background-position: top !important;
    padding-top: 30px;}
.padding-grofers-clone-text{padding: 15px;}
.user-app-work-header{width: 100%;float: left;text-align: left;padding: 50px 0;}
.user-app-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:42px; line-height:130%;text-transform: uppercase;position: relative;}
.user-app-work-header p{margin: 10px 0;}
.user-app-work-right img{width: 75%;}
.user-app-food-clone-left .user-app-work-left{width: 50%;float: left;padding-top: 80px;text-align: left;}
.user-app-food-clone-left .user-app-work-right{width: 50%;float: right;text-align: right;}
.user-app-work-list{width: 100%;float: left;text-align: left;padding: 0 0 80px 0;}
.user-app-work-list ul{text-align: center;margin-bottom: 30px;}
.user-app-work-list-blox-li{display: inline-block;width: 31%;padding: 25px 15px;margin: 15px 10px;border-radius: 5px;text-align: left;position: relative;background-color: #ffffff;color: #000000;box-shadow: 0px 0px 10px 0px #0000005c;min-height: 228px;vertical-align: top;}
.user-app-work-list-blox-li span{float: left;border-radius: 50%;width: 40px;height: 40px;position: relative;background-image: linear-gradient(#432f81, #84417e);margin-right: 15px;}
.user-app-work-list-blox-li span img{width: 22px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.user-app-work-list-blox-li h4{font-size: 18px;margin: 10px 0;font-weight: 900;}
.user-app-work-list-blox-li p{font-size: 16px;}
.user-app-food-clone-right{width: 100%;float: left;position: relative;background-size: cover !important;color: #ffffff;margin-bottom: -112px;}
.user-app-food-clone-right .user-app-work-left{width: 50%;float: right;padding-top: 80px;text-align: right;}
.user-app-food-clone-right .user-app-work-right{width: 50%;float: left;text-align: left;}
.blank-hr-left{width: 100px;height: 7px;background-color: #ffffff;border-radius: 50px;position: absolute;top: 45%;left: 260px;transform: translate(-50%, -50%);}
.blank-hr-right{width: 100px;height: 7px;background-color: #ffffff;border-radius: 50px;position: absolute;top: 45%;right: 200px;transform: translate(-50%, -50%);}


/**************** app screenshot css start here ****************/

.app-screenshot-grofers-clone{width: 100%;float: left;margin-top: 110px;}


/**************** What we do css start here ****************/

.what-we-grofers-clone{width: 100%;float: left;position: relative;background-color: #f5f5f5;}
.what-we-grofers-clone .grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 0 20px 0;}
.what-we-grofers-clone .grofers-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.what-we-grofers-clone .grofers-work-header p{margin: 10px 0;width: 80%;margin: 20px auto;}
.what-we-grofers-clone-text{padding: 15px;}
.what-we-case-banner-box{ float:right; width:50%; padding: 30px 0;position: relative;}
.what-we-case-banner-box div{margin-bottom: 30px;}
.what-we-case-banner-box div h4{font-weight: 900;font-size: 18px;}
.what-we-case-banner-box div p{margin: 10px 0;font-size: 16px;}
.what-we-case-banner-box span {float: left;height: 100px;width: 70px;}
.what-we-case-banner-box span img{width: 50px;}
.what-we-case-banner-mobile{width: 50%;float: left;position: relative;text-align: center;padding-bottom: 50px;}
.what-we-case-banner-mobile img{width: 380px;}


/**************** technologies css start here ****************/

.technologies-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;padding-bottom: 50px;}
.technologies-grofers-clone ul {text-align: center;}
li.technology {display: inline-block;width: 20%;border: 1px solid #52418a;padding: 25px 15px;margin: 10px;border-radius: 5px;text-align: left;}
li.technology img {width: 70px;display: inline-block;margin-top: 10px;}
li.technology strong {position: relative;left: 20px;bottom: 30px;}

.project-slides{
    float:left;
    padding-bottom:50px;
}

.dev-process{
    text-align: center;
}
.dev-process img{
    width: 90%;
}
/**************** faq css start here ****************/

.faqs-accordion-menu{width: 100%;float: left;display: flex;padding-bottom: 5%;background-color: #f1f1f1;}
.faqs-accordion-menu .grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 0 20px 0;}
.faqs-accordion-menu .grofers-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.faqs-accordion-menu .grofers-work-header p{margin: 10px 0;width: 80%;margin: 20px auto;}
.faqs-accordion-menu .accordion-menu{width: 100%;float: left; padding: 0 15px;}
.accordion {max-width: 75rem;margin: 0 auto;}
.accordion-item {position: relative;margin: 15px 0;border: 1px solid lightgray;border-radius:6px;background-color: #ffffff;}
.accordion-item.active .icon {background: #52418a;}
.accordion-item.active .icon:before {background: #ffffff;}
.accordion-item.active .icon:after {width: 0;}
.accordion-item .accordion-heading {display: block;text-transform: capitalize;text-decoration: none;color: #000;font-weight: 700;font-size: 1rem;position: relative;padding: 1rem 1rem 1rem 4rem;transition: 0.3s ease-in-out;}
.accordion-item .icon {display: block;position: absolute;top: 50%;left: 15px;width: 1.5rem;height: 1.5rem;border-radius: 50px;background-color: #52418a;transform: translateY(-50%);}
.accordion-item .icon:before, .accordion-item .icon:after {content: '';width: 0.80rem;height: 0.10rem;background: #ffffff;position: absolute;border-radius: 3px;left: 50%;top: 50%;transition: 0.3s ease-in-out;transform: translate(-50%, -50%);}
.accordion-item .icon:after {transform: translate(-50%, -50%) rotate(90deg);z-index: -1;}
.accordion-item .title{font-size: 18px;color: #000000;font-weight: 100;}
.accordion-item .accordion-content {display: none;}
.accordion-item .accordion-content p {margin-top: 0;padding: 20px;border-top: 1px solid lightgray;}

@media screen and (min-width: 1500px) {
.peppy-case-banner-mobile img{ width: 75%;}
}

@media screen and (max-width: 1340px) {
.grofers-first-row .peppy-case-banner-box h1{ font-size:40px;}
.grofers-first-row .peppy-case-banner-box p strong{font-size:18px;}
}

@media screen and (max-width: 1250px) {
.about-case-banner-box{padding: 10px 0 30px 0;}
}

@media screen and (max-width: 1210px) {
li.technology{width: 30%;}
}

@media screen and (max-width: 1089px) {
.user-app-work-list-blox-li{width: 41%;}
}
@media screen and (max-width: 1089px) {
.grofers-first-row .peppy-case-banner-box h1{ padding-bottom: 14px;}
}
@media screen and (max-width: 1025px) {
.grofers-first-row .peppy-what-we-do-banner{padding: 10px 0 50px 40px;min-height: 0;}
.peppy-case-banner-box{width: 100% !important;}
.peppy-case-banner-mobile {display: none;}
.peppy-case-banner-box br{display: none;}
}

@media only screen and (max-width: 920px){
.chart-app-work-list-blox-li{min-height: 480px;}
}

@media only screen and (max-width: 850px){
.what-we-case-banner-mobile{float:left;width:100%;}
.what-we-case-banner-mobile img{width: 50%;}
.what-we-case-banner-box{float:left;width:100%;}
li.technology {display: inline-block;width:40%;border: 1px solid #52418a;padding: 25px 15px;margin: 10px;border-radius: 5px;text-align: left;}
}


@media only screen and (max-width: 767px){
.grofers-first-row .peppy-case-banner-box {float: left;width: 100%;}
.grofers-first-row .peppy-case-banner-box p {font-size: 19px;}
.grofers-first-row .peppy-what-we-do-banner {float: left;width: 100%;box-sizing: border-box;padding: 10px 0 50px 40px;min-height: 0;}
.grofers-first-row .peppy-case-banner-box h1 {font-size: 30px;}
.grofers-first-row .peppy-case-banner-box p strong{font-size:18px;}
.why-glofer-left{width: 100%;float: left;margin-bottom: 50px;margin-top: 0;}
.why-glofer-right{width: 100%;float: left;}
.user-app-food-clone-left .user-app-work-left{width: 100%;float: left;text-align: center;padding-top: 0px;}
.user-app-food-clone-left .user-app-work-right{width: 100%;float: left;text-align: center;}
.user-app-food-clone-right .user-app-work-left{width: 100%;float: left;text-align: center;padding-top: 0px;}
.user-app-food-clone-right .user-app-work-right{width: 100%;float: left;text-align: center;}
.blank-hr-left{display: none;}
.blank-hr-right{display: none;}
.chart-app-work-list-blox-li{width: 90%;min-height: 280px;}

.steps ul li{padding: 0;}
.steps ul li div span{width: 80px;height: 80px;}
.steps ul li div span img{width: 40px;}
.steps ul li p{font-size: 14px;line-height: 15px;}

.user-app-food-clone-left{margin-bottom: -74px;}
.user-app-food-clone-right{margin-bottom: -87px;}
.user-app-work-list-blox-li{min-height: 267px;}
}

@media only screen and (max-width: 640px){
.grofers-work-header {
    width: 100%;
    float: left;
    text-align: center;
    padding: 50px 15px 50px;
}
.user-app-work-list-blox-li{width: 90%;margin: 10px;}
li.technology strong {position: relative;left: 20px;bottom: 20px;display: table-footer-group;}
li.technology {display: inline-block;width: 35%;border: 1px solid #52418a;padding: 25px 15px;margin: 10px;border-radius: 5px;text-align: left;}
}

@media only screen and (max-width: 580px){
.steps ul{display: initial;}
.steps ul li{width: 33%;}
.steps ul li div{min-height: 130px;}
.steps ul .hide-line::before, .steps ul .hide-line::after{display: none;}
}


@media only screen and (max-width: 540px){
.chart-app-work-list-blox-li{margin: 15px 10px;}
.blank-circle-mobile{display: none;}
.char-list-1 .rocket{margin-bottom: 10px;}
.char-list-2 .rocket{margin-bottom: 10px;}
.float-left, .float-right{float: none;}
}


.demo_screen img{
  width: 100%;
}
.app_screenshot {
    padding-bottom: 40px;
    padding: 20px;
}
.clients-photo{
    padding-top: 30px;
}
.clients-photo img{
    width:100%;
}

section.peppy_about {float: left;width: 100%;}
.about_text h1 {font-family: 'exo_2bold';
    font-weight: normal;
    text-align: center;
    font-size: 34px;
    line-height: 130%;}
.about_text h2 {font-family: 'exo_2bold';
    font-weight: normal;
    text-align: center;
    font-size: 34px;
    line-height: 130%;}    
.about_text p {text-align: center;font-size: 18px;}
.about_text {padding: 15px;}
section.peppy_services.grey_section {
    width: 100%;
    float: left;
    background-color: #f1f1f1;
    padding: 30px 20px 50px;
}

section.peppy_services {
    width: 100%;
    float: left;
    padding: 30px 20px 30px !important;
}

.col-3 {
    width: 25%;
    float: left;
}
.pay_box {
    padding: 20px;
    text-align: center;
    box-shadow: 0px 0px 5px #d0d0d0;
    margin: 20px 10px;
    border-radius: 10px;
    position: relative;
    background-color: #fff;
}
.pay_box img {
    width: 100%;
}
.pay_box h3 {
    color: #000;
    padding-top: 20px;
}
.pay_box ul {
    text-align: left;
    padding-left: 20px;
    font-size: 15px;
    color: #000;
    display: inline-block;
}
.pay_box li {
    width: 50%;
    float: left;
}



.purple_bg{
    background-color: #52418a;
    padding: 0 !important;
}
.mobile_img img{
    width: 100%;
}
.whatmakes {
    padding: 10% 10% 5px;
}
.whatmakes h3 {
    color: #fff;
}
.align_none{
    align-items: unset !important;
}
.make_text {
    padding-left: 100px;
}
.make_img {
    display: inline-block;
    float: left;
}
.make_text h3 {
    font-size: 25px;
    margin: 10px 0;
}
.make_text p {
    font-size: 16px;
    margin: 10px 0;
    color: #fff;
}
.make_features {
    margin: 50px 0;
}

.col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
    float: right;
}
.col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    float: left;
}

.features-content-area h3 {
    font-size: 38px;
    color: #ffffff;
    font-weight: bold;
    margin: 0 0 25px;
    position: relative;
    line-height: normal;
}
.features-content-area h2 {
    font-size: 38px;
    color: #ffffff;
    font-weight: bold;
    margin: 0 0 25px;
    position: relative;
    line-height: normal;
}

.features-content-area p {
    margin: 10px 0;
    color: #ffffff;
}
.offer_features ul {
    padding-left: 15px;
    color: #fff;
    line-height: 35px;
}
.development_pro{
    width: 100%;
    float: left;
    position: relative;
    background-color: #f1f1f1;
    padding-bottom: 50px;
}

.pay_box:after {
    content: " ";
    width: 95%;
    height: 95%;
    z-index: -3;
    position: absolute;
    top: auto;
    bottom: 1px;
    left: 1px;
    border-radius: 12px;
    background-image: -webkit-linear-gradient(350deg, #58488f, #a566a3);
    background-image: -o-linear-gradient(350deg, #58488f, #a566a3);
    background-image: linear-gradient(100deg, #58488f, #a566a3);
    background-repeat: repeat-x;
    outline: 1px solid transparent;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.pay_box:hover::after {
    -webkit-transform: rotate(2deg) translateX(-5px) translateY(16px);
    -ms-transform: rotate(2deg) translateX(-5px) translateY(16px);
    transform: rotate(2deg) translateX(-5px) translateY(16px);
}

.single-work {
    position: relative;
    margin: 1px;
}
.project-slides .single-work::before {
    z-index: 1;
}
.project-slides .single-work::before {
    z-index: 1;
}
.single-work::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .4s;
    transition: .4s;
}
.project-slides .single-work .work-content {
    z-index: 1;
}
.single-work:hover .work-content {
    opacity: 1;
    visibility: visible;
    bottom: 8px;
}
.single-work .work-content {
    position: absolute;
    bottom: -67px;
    width: 100%;
    background: #52418a;
    left: 0;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .4s;
    transition: .4s;
}
.single-work .work-content h4 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #fff;
}

.col-lg-12.col-md-3.p-0 {
    width: 20%;
    float: left;
}
.like_app{
    width: 100%;
    float: left;
    position: relative;
    background-color: #f1f1f1;
}


.col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    float: left;
}
.content-block.service-box {
    padding: 5.6rem 3rem 2.2rem;
}
.content-block {
    height: 100%;
    display: block;
    background: #fff;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    outline: none;
}
.content-block::before {
    content: " ";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 10px 50px rgba(166, 209, 237, 0.2);
    box-shadow: 0 10px 50px rgba(166, 209, 237, 0.2);
    z-index: -2;
}

.content-block::after {
    content: " ";
    width: 95%;
    height: 95%;
    z-index: -3;
    position: absolute;
    top: auto;
    bottom: 1px;
    left: 1px;
    border-radius: 12px;
    background-image: -webkit-linear-gradient(350deg, #58488f, #a566a3);
    background-image: -o-linear-gradient(350deg, #58488f, #a566a3);
    background-image: linear-gradient(100deg, #58488f, #a566a3);
    background-repeat: repeat-x;
    outline: 1px solid transparent;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.content-block:hover::after {
    -webkit-transform: rotate(2deg) translateX(-5px) translateY(16px);
    -ms-transform: rotate(2deg) translateX(-5px) translateY(16px);
    transform: rotate(2deg) translateX(-5px) translateY(16px);
}
.content-block.service-box {
    padding: 20px;
    text-align: center;
    margin: 20px;
}
.service-box h5 {
    font-size: 23px;
    color: #000;
    font-weight: 700;
    padding: 20px 0;
}
.service-box p {
    font-size: 19px;
    color: #000;
}
.service-box img {
    width: 90px;
}
@media only screen and (max-width: 1024px){
  .col-3 {
      width: 50%;
      float: left;
  }
  .col-lg-12.col-md-3.p-0 {
      width: 50%;
      float: left;
  }
}


@media only screen and (max-width: 768px){
.app-screenshot-grofers-clone {
    width: 100%;
    float: left;
    margin-top: 0px;
}
  .col-3 {
      width: 50%;
      float: left;
  }
  .col-lg-12.col-md-3.p-0 {
      width: 50%;
      float: left;
  }
  .col-lg-7 {
      -ms-flex: 0 0 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 100%;
      float: left;
  }
  .col-lg-5 {
      -ms-flex: 0 0 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 100%;
      float: right;
  }
    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 50%;
        max-width: 50%;
        float: left;
    }
    .single-work {
        position: relative;
        margin: 1px;
        margin: 20px;
    }
}

@media only screen and (max-width: 640px){
.app-screenshot-grofers-clone {
    width: 100%;
    float: left;
    margin-top: 40px;
}
  .col-3 {
      width: 100%;
      float: left;
  }
  .col-lg-12.col-md-3.p-0 {
      width: 100%;
      float: left;
  }
    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 100%;
        max-width: 100%;
        float: left;
    }
}