.inner-banner {height: 500px; padding-top: 190px; position: relative; background-image: url("../images/mobappl-development-banner.jpg"); background-position: top center; background-size: 100%; background-repeat: no-repeat; }
.inner-banner h1 {font-size: 60px; font-family: 'Montserrat-Bold', sans-serif; z-index: 9; position: relative; color: #000; width: 100%; padding:0% 36% 0% 0%; text-align: left; line-height: 70px; }
.ma {padding: 70px 0px; position: relative; text-align: center; }
.ma h2{font-size: 36px; padding: 0px 30px 20px 30px; font-family: 'Poppins-Regular'; position: relative; margin: 0 auto; line-height: 48px; width: 70%;}
.ma p{font-family: 'Rubik-Light'; font-size: 20px; width: 100%; line-height: 32px;}

.app {padding: 70px 0px 80px 0px; position: relative; background: #f4f4f4; }
.app h3{font-size: 40px; font-family: 'Poppins-Regular'; position: relative; margin: 0 auto; line-height: 48px; margin-bottom: 60px;width: 80%;text-align: center; }
.app section{padding: 50px 30px; background: #fff; box-shadow: 0 50px 100px -20px rgba(241, 243, 249, .25); border-radius: 20px; text-align: center;}

.app section.icn1::before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0px; width: 100%; height: 50%; opacity: 0; background: linear-gradient(#0db4d6, #23e2b2); background: -webkit-linear-gradient(#0db4d6, #23e2b2); background: -moz-linear-gradient(#0db4d6, #23e2b2); -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; border-radius: 20px;}
.app section.icn1:hover::before{height: 100%;opacity: 1;width: 93.5%;margin: 0px 5px 0px 14px;border-radius: 20px;}
.app section.icn1:hover i {border: 3px solid #fff; background: transparent;position: relative;}
.app section.icn1 i {font-size: 34px; background: #0db6d2; background: -moz-linear-gradient(top, #0db6d2 0%, #23e0b2 100%); background: -webkit-linear-gradient(top, #0db6d2 0%, #23e0b2 100%); background: linear-gradient(to bottom, #0db6d2 0%, #23e0b2 100%); filter: progid: DXImageTransform.Microsoft.gradient startColorstr='#0db6d2', endColorstr='#23e0b2', GradientType=0; border-radius: 50%; width: 95px; height: 95px; color: #fff; padding: 20px 10px; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; position: relative;display: inline-block;border: 3px solid #fff;}
.app section.icn1 i img{width: 45px;}
.app section.icn2::before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0px; width: 100%; height: 50%; opacity: 0; background: linear-gradient(#fe7235, #fda632);background: -webkit-linear-gradient(#fe7235, #fda632);background: -moz-linear-gradient(#fe7235, #fda632);background: -o-linear-gradient(#fe7235, #fda632); -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; border-radius: 20px;}

.app section.icn2:hover::before{height: 100%;opacity: 1;width: 93.5%;margin: 0px 5px 0px 14px;border-radius: 20px;}
.app section.icn2:hover i {border: 3px solid #fff; background: transparent;position: relative;}
.app section.icn2 i {font-size: 34px; background: #0db6d2; background: linear-gradient(#fe7235, #fda632);
background: -webkit-linear-gradient(#fe7235, #fda632);background: -moz-linear-gradient(#fe7235, #fda632);
background: -o-linear-gradient(#fe7235, #fda632); border-radius: 50%; width: 95px; height: 95px; color: #fff; padding: 30px 10px; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; position: relative;display: inline-block;border: 3px solid #fff;}
.app section.icn2 i img{width: 40px;}

.app section.icn3::before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0px; width: 100%; height: 50%; opacity: 0;background: linear-gradient(#f24cb4, #f24cb4, #ff8ed0);background: -webkit-linear-gradient(#f24cb4, #f24cb4, #ff8ed0);background: -moz-linear-gradient(#f24cb4, #f24cb4, #ff8ed0); -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; border-radius: 20px;}
.app section.icn3:hover::before{height: 100%;opacity: 1;width: 93.5%;margin: 0px 5px 0px 14px;border-radius: 20px;}
.app section.icn3:hover i {border: 3px solid #fff; background: transparent;position: relative;}
.app section.icn3 i {font-size: 46px; background: linear-gradient(#f24cb4, #f24cb4, #ff8ed0);background: -webkit-linear-gradient(#f24cb4, #f24cb4, #ff8ed0);background: -moz-linear-gradient(#f24cb4, #f24cb4, #ff8ed0); border-radius: 50%; width: 95px; height: 95px; color: #fff; padding: 25px 10px; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; position: relative; display: inline-block;border: 3px solid #fff;}
.app section.icn3 i img{width: 40px;}

.app section h4 {font-family: 'Poppins-Regular'; font-size: 24px; line-height: 35px; padding: 18px 0px 8px 0px;}
.app section p {font-family:'Poppins-Regular'; font-size: 17px; width: 100%; line-height: 25px; text-align: center; }
.app section:hover h4, .app section:hover p{color:#fff;}

.enrich{padding: 90px 0px;position: relative;text-align: center;background: #09335c;color: #fff;}
.enrich h4{font-family: 'Poppins-SemiBold'; font-size: 36px; margin: 0px;width: 100%;text-align: left;line-height: 45px;}
.enrich p{font-family: 'Poppins-Regular'; font-size: 14px; margin: 20px 0px;width: 100%;padding: 0% 11% 0% 0%;text-align: left;line-height: 22px;color: #b1c7dd;}
.enrich section{width: 30%;display: inline-block;text-align: left;right: 22px;position: relative;}
.enrich section h5{font-family: 'Poppins-SemiBold';font-size: 30px;text-align: left;}
.enrich section p{font-family: 'Poppins-Regular'; font-size: 16px;margin: 0px;}
.enrich a{border: 2px solid #7f95ab;padding: 10px 20px;border-radius: 4px;color: #fff;line-height: 20px;position: relative;top: 30px;right: 230px;font-size: 16px;}
.enrich a:hover{background: #fff; color: #000;transition: all .4s ease-in-out;}

.web {padding: 70px 0px; position: relative; text-align: center;}
.web h5{font-size: 40px; font-family: 'Poppins-Regular'; position: relative; line-height: 48px; text-align: left;  margin-top: 50px;}
.web p{font-family: 'Rubik-Regular'; font-size: 16px; width: 100%; line-height: 32px;text-align: justify;padding: 30px 0px 0px 0px;}
.web a{color: #fe7235;line-height: 20px;position: relative;font-size: 18px;text-align: left;width: 100%;display: inline-block;padding: 0px;}
.web a:hover{color: #000;transition: all .4s ease-in-out;}

@media only screen and (min-width:320px)and (max-width:479px) {
.inner-banner {padding-top: 50px; height: 220px; background-size: cover; }
.inner-banner h1 {font-size: 30px; line-height: 40px; }
.ma {padding: 20px 0px; }
.ma h2 {font-size: 24px; line-height: 32px; width: auto; padding: 0px 0px 10px 0px; }
.ma p {font-size: 14px; line-height: 20px; padding: 0px 10px; width: 95%; text-align: justify; margin: 0 auto; }
.app section{padding: 30px; margin-bottom: 20px;}
.app {padding:20px 0px 40px 0px;}
.app h3{font-size: 22px;line-height: 30px;margin-bottom: 20px;}

.enrich {padding:20px 0px 80px 0px;}
.enrich h4{font-size: 22px;line-height: 30px;margin: 20px 0px;}
.enrich p {font-size: 14px; line-height: 20px; margin: 0 auto;padding: 0px;}
.enrich section{width: 32%;right: 2px;}
.enrich a{right: 117px;}

.web {padding:20px 0px;}
.web h5{font-size: 24px;line-height: 30px;margin: 10px 0px;}
.web p {font-size: 14px; line-height: 20px; margin: 0 auto;padding: 0px;}
.web a{margin: 20px 0px;}
}

@media only screen and (min-width:480px) and (max-width:767px) {
.inner-banner {
    padding-top: 50px;
    height: 220px;
    background-size: cover;
}
.inner-banner h1 {
    font-size: 30px;
}
.ma {
    padding: 20px 0px;
}
.ma h2 {
    font-size: 24px;
    line-height: 32px;
    width: auto;
    padding: 0px 0px 10px 0px;
}
.ma h3 {
    font-size: 15px;
    padding: 0px 10px 10px 10px;
    line-height: 20px;
}
.ma p {font-size: 14px; line-height: 20px; padding: 0px 10px; width: 95%; text-align: justify; margin: 0 auto; }
.ma section h3 {
    margin: 18px 0px 0px 0px;
}
.app section{padding: 30px; margin-bottom: 20px;}
.app {padding:20px 0px 40px 0px;}
.app h3{font-size: 22px;line-height: 30px;margin-bottom: 20px;}

.enrich {padding:20px 0px 80px 0px;}
.enrich h4{font-size: 22px;line-height: 30px;margin: 20px 0px;}
.enrich p {font-size: 14px; line-height: 20px; margin: 0 auto;padding: 0px;}
.enrich section{width: 32%;right: 2px;}
.enrich a{right: 117px;}
.web {padding:20px 0px;}
.web h5{font-size: 24px;line-height: 30px;margin: 10px 0px;}
.web p {font-size: 14px; line-height: 20px; margin: 0 auto;padding: 0px;}
.web a{margin: 20px 0px;}
}

@media only screen and (min-width:768px) and (max-width:1023px) {
.inner-banner {padding-top: 60px;height: 220px;background-size: cover;}
.inner-banner h1 {font-size: 30px;line-height: 40px;}
.ma {padding: 20px 0px; }
.ma h2 {font-size: 24px; line-height: 32px; width: auto; padding: 0px 0px 10px 0px; }
.ma p {font-size: 15px; line-height: 20px; padding: 0px 10px; margin: 0 auto; }
.ma section h3 {margin: 18px 0px 0px 0px;}
.app section{padding: 30px; margin-bottom: 20px;}
.app {padding:20px 0px 40px 0px;}
.app h3{font-size: 22px;line-height: 30px;margin-bottom: 20px;}
.enrich {padding:20px 0px 80px 0px;}
.enrich h4{font-size: 22px;line-height: 30px;margin: 0px;}
.enrich p {font-size: 14px; line-height: 20px; margin: 10px auto;padding: 0px;}
.enrich section{width: 30%;right:10px;}
.enrich a{right: 90px;}
.web {padding:20px 0px;}
.web h5{font-size: 22px;line-height: 30px;margin: 10px 0px;}
.web p {font-size: 14px; line-height: 20px; margin: 0 auto;padding: 0px;}
.web a{margin: 20px 0px;}
}

@media only screen and (min-width:1024px) and (max-width:1200px) {
    .inner-banner {padding-top: 60px; height: 220px; background-size: cover; }
    .inner-banner h1 {font-size: 30px;line-height: 40px;padding: 1% 46% 0% 0%;}
    .ma {padding: 20px 0px; }
.ma h2 {font-size: 24px; line-height: 32px; width: auto; padding: 0px 0px 10px 0px; }
.ma p {font-size: 15px; line-height: 20px; padding: 0px 10px; margin: 0 auto; }
.app {padding:30px 0px 40px 0px;}
.app section{padding: 30px; }
.app section h4{font-size: 22px;}
.app h3{font-size: 35px;}
.app section p{font-size: 16px;}
.enrich {padding:40px 0px 80px 0px;}
.enrich a{right: 155px;}
.web {padding:20px 0px;}
}
@media only screen and (min-width:1200px) and (max-width:1440px){
  .inner-banner {padding-top: 110px; height:300px; background-size: cover;}
  .inner-banner h1 {font-size: 40px;line-height: 50px;padding: 0% 46% 0% 2%;}
  .inner-banner p{font-size: 16px;line-height: 24px;padding: 0% 60% 0% 0%;}
  .app {padding: 50px 20px 70px 20px}
  .web {padding: 40px 20px;}
  .ma p{padding: 0px 40px;text-align: justify;}

}