/**************** 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 .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;}

.grofers-header-ul{line-height: 35px;list-style: none;}
.grofers-header-ul li span{font-size: 26px;margin-right: 5px;}

.peppy-case-banner-mobile{position: relative;text-align: right;float: right;width: 50%;}
.peppy-case-banner-mobile img{width: 75%;position: relative;right: 100px;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:65%; padding: 100px 0 30px 0;position: relative;}
.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;}
.about-grofers-clone-text .main-btn {font-family: 'exo_2bold';background-color: #52418a;padding: 12px 30px;border: none;color: #ffffff;font-weight: 900;font-size: 18px;margin-top: 20px;border-radius: 5px;cursor: pointer;}

.about-case-banner-mobile img{width: 300px;position: absolute;right: 200px;bottom: 0;}



/**************** timeline css start here ****************/

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

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

.style-container {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}
@media (min-width:576px) {.style-container {max-width: 540px}}
@media (min-width:768px) {.style-container {max-width: 720px}}
@media (min-width:992px) {.style-container {max-width: 960px}}
@media (min-width:1200px) {.style-container {max-width: 1230px}}

.timeline-link{text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 30px;}
.timeline-link a{padding: 10px 45px;text-transform: uppercase;text-decoration: none;border-radius: 100px;box-shadow: 0px 3px 0px -1px #51408a;}
.main-timeline{margin: 10px 0;position: relative;    float: left;
    width: 100%;}
.main-timeline:before{content: "";display: block;width: 2px;height: 100%;background: #51408a;margin: 0 auto;position: absolute;top: 0;left: 0;right: 0;}
.main-timeline .timeline{margin-bottom: 40px;position: relative;}
.main-timeline .timeline:after{content: "";display: block;clear: both;}
.main-timeline .icon{width: 18px;height: 18px;line-height: 18px;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: none;}
.main-timeline .icon:before,
.main-timeline .icon:after{content: "";width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;transition: all 0.33s ease-out 0s;}
.main-timeline .icon:before{border: 2px solid #cc64fa;left: -3px;}
.main-timeline .icon:after{border: 2px solid #51408a;left: 3px;}
.main-timeline .timeline:hover .icon:before{left: 3px;}
.main-timeline .timeline:hover .icon:after{left: -3px;}
.main-timeline .date-content{width: 50%;float: left;position: relative;}
.main-timeline .date-content:before{content: "";width: 33.3%;height: 2px;background: #51408a;margin: auto 0;position: absolute;top: 0;right: 0px;bottom: 0;}
.main-timeline .date-outer{width: 175px;height: 175px;font-size: 16px;color: #000;text-align: center;margin: auto;z-index: 1;}
.main-timeline .date-outer:before,
.main-timeline .date-outer:after{content: "";width: 175px;height: 175px;margin: 0 auto;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;transition: all 0.33s ease-out 0s;}
.main-timeline .date-outer:before{border: 2px solid #8574c1;left: -6px;}
.main-timeline .date-outer:after{border: 2px solid #51408a;left: 6px;}
.main-timeline .timeline:hover .date-outer:before{left: 6px;}
.main-timeline .timeline:hover .date-outer:after{left: -6px;}
.main-timeline .step-image{width: 100%;margin: auto;position: absolute;top: 33%;left: 0;}
.main-timeline .step-image img{width: 70px;}
.main-timeline .timeline-content{width: 50%;padding: 0 0 0 50px;float: right;}
.main-timeline .step-title{    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    margin: 20px 0 15px 0 !important;
    color: #51408a;}
.main-timeline .title{font-size: 17px;font-weight: 700;color: #111;line-height: 24px;text-transform: uppercase;margin: 0 0 15px 0;}
.main-timeline .description{font-size: 14px;margin-bottom: 0;}
.main-timeline .timeline:nth-child(2n) .date-content{float: right;}
.main-timeline .timeline:nth-child(2n) .date-content:before{left: 0px;}
.main-timeline .timeline:nth-child(2n) .timeline-content{padding: 0 50px 0 0;text-align: right;}



/**************** features css start here ****************/

.features-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;}
.features-grofers-clone .grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 0 20px 0;}
.features-grofers-clone .grofers-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.features-grofers-clone .grofers-work-header p{margin: 10px 0;width: 80%;margin: 20px auto;}
.features-section ul{text-align: center;margin-bottom: 30px;}
.features-section-blox-li{display: inline-block;width: 31%;border: 2px solid #e1dfdf;padding: 25px 15px;margin: 25px 10px;border-radius: 5px;text-align: left;position: relative;}
.features-section-blox-li span{border: 3px solid #52418a;float: left;border-radius: 50%;width: 60px;height: 60px;position: absolute;top: -30px;background-color: #ffffff;}
.features-section-blox-li span img{width: 30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.features-section-blox-li h4{font-size: 20px;color: #52418a;margin: 10px 0;}
.features-section-blox-li p{font-size: 16px;}


/**************** livedemo css start here ****************/

.livedemo-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;background-size: cover !important;background-position: top !important;position: relative !important;}
.livedemo-grofers-clone-text{padding: 15px;position: relative;color: #ffffff}
.livedemo-case-banner-box{ float:left; width:50%; padding: 50px 0;position: relative;}
.livedemo-case-banner-box h2{font-family: 'exo_2regular';font-size:34px; line-height:130%;}
.livedemo-case-banner-box h2 span{font-weight: 900;}
.livedemo-case-banner-box p{margin: 10px 0;}
.livedemo-grofers-clone-text .main-btn {font-family: 'exo_2bold';background-color: #52418a;padding: 16px 50px;border: none;color: #ffffff;font-weight: 900;font-size: 18px;margin-top: 20px;border-radius: 5px;cursor: pointer;}
.livedemo-case-banner-mobile{float: right;position: relative;top: 90px;}




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

.grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 0;}
.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: 350px;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%);}


/* owl css*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px; text-align:center}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1; outline:none;}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#e3e9ed;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background: #24174e;}

/* owl css end here */

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

.what-we-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;}
.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;}


/**************** 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: 20px;}
.padding-grofers-clone-text{padding: 15px;}
.user-app-work-header{width: 100%;float: left;text-align: left;padding: 50px 0 0 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;}
.user-app-work-list-blox-li span{float: left;border-radius: 50%;width: 40px;height: 40px;position: relative;background-color: #52418a;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{clear: inherit;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%);}


.laundry-user-app-work-list .user-app-work-right{width: 40%;text-align: center;position: relative;}
.laundry-user-app-work-list ul{width: 60%;float: left;}
.laundry-user-app-work-list .user-app-work-list-blox-li{width: 46%;}

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

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


/**************** technology css start here ****************/

.technology-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;}
.technology-grofers-clone .grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 0 20px 0;}
.technology-grofers-clone .grofers-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.technology-grofers-clone .grofers-work-header p{margin: 10px 0;width: 80%;margin: 20px auto;}
.technology-section ul{text-align: center;margin-bottom: 30px;}
.technology-section-blox-li{display: inline-block;width: 17%;border: 1px solid #e1dfdf;background-color: #ffffff;padding: 25px 15px;margin: 10px;border-radius: 5px;text-align: left;position: relative;min-height: 130px;}
.technology-section-blox-li img{width: 100px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}



/**************** advanced features css start here ****************/

.advanced-features-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;overflow: hidden;}
.advanced-features-grofers-clone .grofers-work-header{width: 100%;float: left;text-align: center;padding: 50px 0 20px 0;}
.advanced-features-grofers-clone .grofers-work-header h2{font-family: 'exo_2bold';font-weight: normal; font-size:34px; line-height:130%;}
.advanced-features-grofers-clone .grofers-work-header p{margin: 10px 0;width: 80%;margin: 20px auto;}
.advanced-features-section ul{text-align: center;margin-bottom: 30px;float: left;position: relative;}
.advanced-features-section ul .bg-blank-span{position: absolute;width: 1190px;height: 300px;background-color: #52418a;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.advanced-features-section-blox-li{display: inline-block;width: 31%;padding: 25px 15px;margin: 25px 10px;border-radius: 10px;text-align: left;position: relative;background-color: #f6f8fe;box-shadow: 0px 0px 10px 0px #0000005c;}
.advanced-features-section-blox-li span{border: 7px solid #ffffff;float: left;border-radius: 50%;width: 60px;height: 60px;position: absolute;bottom: -30px;background-color: #000000;}
.advanced-features-section-blox-li span img{width: 35px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.advanced-features-section-blox-li h4{font-size: 20px;color: #52418a;margin: 10px 0;}
.advanced-features-section-blox-li p{font-size: 16px;margin-bottom: 20px;}




/**************** faq css start here ****************/

.faqs-accordion-menu{width: 100%;float: left;display: flex;padding-bottom: 5%;background-color: #f5f5f5;}

.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;}

.about_text h2 {
    font-family: 'exo_2bold';
    font-weight: normal;
    text-align: center;
    font-size: 34px;
    line-height: 130%;
}

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



.technology-grofers-clone{width: 100%;float: left;position: relative;background-color: #ffffff;padding-bottom: 50px;}
.technology-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;}




@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 h2{ font-size:40px;}
}

@media screen and (max-width: 1250px) {
.about-case-banner-box{padding: 10px 0 30px 0;}
.about-case-banner-mobile img{right: 30px;}
}
@media screen and (max-width: 1210px) {
li.technology {
    width: 30%;
}
}
@media screen and (max-width: 1089px) {
.grofers-first-row .peppy-case-banner-box h2{ padding-bottom: 14px;}
.user-app-work-list-blox-li{width: 41%;}
}
@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: 990px){
.main-timeline .date-content:before{width: 22.5%;}
.main-timeline .timeline-content{padding: 10px 0 10px 30px;}
.main-timeline .step-title{ font-size: 17px; }
.main-timeline .title{ font-size: 15px; }
.main-timeline .timeline:nth-child(2n) .timeline-content{padding: 10px 30px 10px 0;}
.features-section-blox-li{width: 41%;}
.advanced-features-section-blox-li{width: 41%;}
}
@media only screen and (max-width: 920px){
.chart-app-work-list-blox-li{min-height: 460px;}
}

@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;
}
}



.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 {text-align: center;padding: 20px 0;font-family: 'exo_2bold';font-size: 28px;}
.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 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;
    padding-bottom: 50px;
}


.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){

  .laundry-user-app-work-list .user-app-work-right {
    width: 100%;
    text-align: center;
    position: relative;
    top: 0;
    float: none;
    margin: 0 auto;
}
.user-app-work-right img {
    width: 50%;
}
.user-app-food-clone-left .user-app-work-right {
    width: 100%;
    float: none;
    text-align: center;
}
.user-app-work-list-blox-li {
    width: 46%;
}
.user-app-food-clone-right {
    margin-bottom: -100px;
}
.user-app-food-clone-left {
    margin-bottom: -115px;
}
.user-app-food-clone-right .user-app-work-left {
    width: 100%;
    float: right;
    padding-top: 80px;
    text-align: right;
}
.laundry-user-app-work-list .user-app-work-list-blox-li {
    width: 46%;
}
.user-app-food-clone-left .user-app-work-left {
    width: 100%;
    float: left;
    padding-top: 80px;
    text-align: left;
}
.laundry-user-app-work-list ul {
    width: 100%;
    float: left;
}

  .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: 767px){
.main-timeline:before{margin: 0;left: 7px;}
.main-timeline .timeline{margin-bottom: 20px;}
.main-timeline .icon{margin: auto 0;}
.main-timeline .date-content{width: 95%;float: right;}
.main-timeline .date-content:before{display: none;}
.main-timeline .date-outer,
.main-timeline .date-outer:before,
.main-timeline .date-outer:after{width: 130px;height: 130px;}
.main-timeline .date{top: 30%;}
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content{width: 95%;text-align: center;padding: 10px 0;}
.main-timeline .step-title{margin-bottom: 10px;}
.main-timeline .title{margin-bottom: 10px;}

.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;}
.user-app-food-clone-left{margin-bottom: -110px;}
.user-app-food-clone-right{margin-bottom: -120px;}


.user-app-work-header{padding-top: 100px;}
.user-app-food-clone-left{margin-bottom: -121px;}
.user-app-food-clone-right{margin-bottom: -140px;}
.laundry-user-app-work-list .user-app-work-right{top: 0;}
.laundry-user-app-work-list .user-app-work-right img{width: 25%;}
.laundry-user-app-work-list ul{width: 100%;}

.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;}
.advanced-features-section-blox-li{width: 81%;}
.livedemo-case-banner-box{width: 100%;text-align: center;padding: 50px 0 20px 0;}
.livedemo-case-banner-mobile{text-align: center;width: 100%;top: 0;margin-bottom: 50px;}
.about-case-banner-box{width: 100%;text-align: center;}
.about-case-banner-mobile{display: none;}
.technology-section-blox-li{min-height: 100px;}
.technology-section-blox-li img{width: 70%;}

.chart-app-work-list-blox-li{width: 90%;min-height: 280px;}
}


@media only screen and (max-width: 640px){
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;
}
.app-screenshot-grofers-clone {
    width: 100%;
    float: left;
    margin-top: 0px;
}
    .laundry-user-app-work-list .user-app-work-right img{width: 60%;}
    .user-app-work-right img {
        width: 90%;
    }
    .main-timeline .icon{display: block;}
  .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;
    }
    .grofers-work-header {
    width: 100%;
    float: left;
    text-align: center;
    padding: 100px 0 50px;
}
.user-app-work-list-blox-li{width: 90%;margin: 10px;}
.laundry-user-app-work-list ul{text-align: center;}
.laundry-user-app-work-list .user-app-work-list-blox-li{width: 90%;}
}



@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;}
}

@media screen and (max-width: 510px) {
.features-section-blox-li{width: 80%;}
.advanced-features-section-blox-li{width: 80%;}
}

.grofers-first-row .peppy-case-banner-box p strong {
    font-size: 22px;
    font-weight: bold;
}