/*=========================*/
/*media query for desktop ipad */
/*=========================*/
@media only screen and (max-width:1680px) {

section.about-app {background-position: 100% -100px;}
section.about-app .devices-box {
    width: 100%;
    transform: translateY(10%);
    -ms-transform: translateY(10%);
    -webkit-transform: translateY(10%);
    bottom: auto;
    /* height: 100%; */}	
.masthead.main video { margin-top: 0;   margin-bottom: -7px;}	
	
}


@media only screen and (max-width:1367px) {
section.about-app .devices-box {     width: 450px;
    transform: translateY(30%);
    -ms-transform: translateY(30%);
     -webkit-transform: translateY(30%); }	
	
.navbar-brand img {
    width: 120px;}

#mainNav .navbar-nav>li>a {
	font-size: 14px;}	
}


/*===================================*/
/*alltype of desktop responsive css */
/*===================================*/
@media screen and (min-width: 1024px) and (max-width: 1441px){ 
p {
	font-size: 14px !important; }	
.android-phone.devices-phone img {
    width: 165px;
}	
.section-heading h2 {    font-size: 30px;}
section {
    padding: 80px 0;
    height: 100vh;
}
section.features .section-heading {
	margin-bottom: 50px;}
	
section.features .process-model li.active span svg {
    display: block;
    max-width: 160px;
    margin: 0 auto;
    height: 160px;
    position: absolute;
    top: -30px;
    left: -30px;
}
section.features .process-model li span {
    display: block;
    height: 100px;
    position: relative;
	width: 100px;}
section.features .process-model li span img {
    margin: 15px;
    position: relative;
    z-index: 9;
}
	
section.features .process-model li span svg {
    display: block;
    max-width: 160px;
    margin: 0 auto;
    height: 160px;
    position: absolute;
    top: -30px;
    left: -30px;
}
section.features .process-model li span {
    display: block;
    height: 100px;
    position: relative;
	width: 100px;}
section.features .process-model li span img {
    margin: 15px;
    position: relative;
    z-index: 9;
}
section.features .design-process-content {
    padding: 15px;	}
	
.about-app .devices-box {
	width: 450px;}
	
.about-app .phone {
    width: calc(160px + 33px);
    height: calc(calc(230px + 40px) * 1.5);
    position: absolute;
    background-image: url(../img/ios-devices.png);
    background-size: cover;
    box-sizing: border-box;
    top: -50px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}	
.about-app .slider-wrapper {
    z-index: 999;
    width: 170px;
    margin: calc(calc(calc(45px) * 2) * 0) auto 0;
}	
section.downloadapp-sec .text .quote {    padding: 50px;}
section.downloadapp-sec .box {width: 100%;   margin: 20px auto 0;      height: 380px;
    max-width: 450px; }
section.downloadapp-sec .mission-blog {
    background: #ffffff;
    box-shadow: 1px 1px 1px #ddd;
    padding: 20px 20px 0;
    margin-top: 50px;
    height: 150px;
}	
	section.contact {padding-top: 6% !important; }	
footer p {  padding-right: 30px;} 	
}
/*===================================*/
/*alltype of media query for Phone ipad */
/*===================================*/

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

.services-section h3 {
	font-size: 12px;}
	
.about-page .hero h1 {
    color: #fff;     margin-top: 0px;
    font-size: 24px;
}
    .about-page .hero p {
        font-size: 12px;     margin-bottom: 0;
    }
.about-page h2 {
    margin: 10px 0;
    color: #333333;
    font-size: 20px;
}
.mission {
    margin-top: 0;
}	
.terms-con-page.about-page .hero {     padding: 25px 0;
	height: auto;      margin-top: 0px;}
    .about-page .hero strong {
        font-size: 12px;
    }
    section.about-page {
        margin-top: 0px;
        padding: 0 !important;
    }
footer p {
    text-align: center;
}	
.section-heading h2 {
    font-size: 20px; text-align-last: center;
}
	.design-process-content {text-align-last: center;}
	
.process-model li span svg {
    top: -25px;
    z-index: -1; max-width: 170px;
    margin: 0 auto;
    height: 170px;
    left: -25px;
}
.process-model li.active span svg {
  top: -25px;
    z-index: -1; max-width: 170px;
    margin: 0 auto;
    height: 170px;
    left: -25px;
}	
div.tab-pane:before {
    left: 50% !important;
}	
section.about-app .devices-box {     transform: none;
	width: auto;}	 
.navbar-brand img {
    width: 50px;
}
    #mainNav .navbar-toggler {
        padding: 10px 5px;}

	.chat-body .chat-box-inside {right: 0;}	
	footer {    padding: 24px 0 80px;}	
	a.scroll-btn.js-scroll-trigger {    left: 0; margin: 0 auto; right: 0;}	
.services-section .text {
    position: absolute;
    top: 20px; 
    box-shadow: 3px -16px 60px #d6d6d6;
    left: 0;
    background: rgb(237, 32, 36);
    width: 100%;
    height: calc(100% - 40px);
    transition: 0.5s;
    margin: 0 auto;
    right: 0;
}	
	.services-section .box { height: 350px; width: calc(100% - 20px) !important;}	
.services-section .text .quote p { font-size: 12px;
    color: #fff;
    line-height: normal;
} 	
.navbar-brand img.tagline {
    width: 150px;	
}
.app-details p {
    font-size: 16px;     text-align-last: center;
    margin-bottom: 50px;
}	
.services-section .mission-blog h2, .services-section .mission-blog p {
    color: #000; text-align-last: center;
    text-align: center;
} 	
.downloadapp-sec .mission-blog {
    background: #ffffff;
    box-shadow: 1px 1px 1px #ddd;
    padding: 50px 0px 0;
    margin-top: 10px;
    height: 225px;
    text-align: center;
}	
.about-app .phone { 
    width: calc(190px + 20px);
    height: calc(calc(200px + 20px) * 2);
}
	
.about-app .slider-wrapper {
    z-index: 999;
	width: 186px;}	
	
	.services-section .text .quote {
    transform: none; position: inherit;
    top: auto;
    padding: 20px !important;
    box-sizing: border-box;
}
	.doanload-app-area h4 {    text-align: center;}	
	.downloadapp-sec a.download {margin-top: 20px;}	
	.downloadapp-sec a.download:first-of-type {
    margin-right: 0 !important; 
}
section.features .section-heading {
    margin-bottom: 50px;
	}
	
	section.about-app {    background-position: center bottom;
    width: 100%;     padding-bottom: 150px !important;
    background-size: 100%;
}	
	
section.features .section-heading h2 {
    margin-top: 0;
    margin-bottom: 20px;
}	
	.features:before {    height: 100%;
}	
.text-left {
    text-align: center!important;
}	
.pins-img.image {
    position: absolute;
	bottom: -40px;}	
.pins-img ul img {
    position: absolute;
    bottom: 30px;
    width: 30px !important;
}	
	section.download {    padding: 60px 0 100px!important;}	
.navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid {
     padding-right: 0; 
    padding-left:0; 
}	
.navbar .navbar-nav li.nav-item {
    padding: 0 5px;
/*    background: #ed1f24;*/
    margin-left: 0;
    border-radius: 5px;
    margin-top: 10px;
}
#mainNav .navbar-nav>li>a, #mainNav .navbar-nav>li>a:focus {
    color: #222; padding-left:20px;
}
#mainNav .navbar-nav>li>a.active {
	color: #ed1f24!important;
	background-color: transparent
}
header.masthead {    padding-top: 0px;     height: 100%;
    padding-bottom: 0px;}
.masthead .title.b-title {
    padding-top: 100px;     font-size: 32px;
 }
 a.play-btn img {
    width: 50px;
}

.download ul {
    margin: 15px 0;
    padding: 0;
    text-align: center;
}
section.download h2 {
    font-size: 20px;
    margin-top: 0;
}

.no-of-user {
  transform:none; 
    right: 0;
    border-radius: 100%;
     position: inherit;
     width: 170px;
    height: 170px;
    padding: 20px;
    background: #b7b7b7;
    color: #fff;
    left: 0;
    margin: 0 auto 20px;
}
.no-of-user .user-no {  margin-top: 0px;
    font-size: 40px;}
.no-of-user .disc {
    font-size: 18px;    
    color: #fff;
    line-height: 1.2;
}	
section { float: left;
    padding: 50px 0 50px!important;
    height: auto;}
	
section.contact {float: left;}
.process-model.more-icon-preocess {
    text-align: center;
    display: inline-block;
}
.process-model li {
    display: block;
    width: 100%;    padding-bottom: 40px;}
.process-model li span {    margin: 0 auto 30px;}	
.features {      padding-top: 20px !important;  background-size: contain;     background-color: #ccc !important;}	
section.contact .white-bg {
    padding: 10px;     margin-bottom: 15px;
    color: #000;
    font-size: 14px;}
.about-app-bot {
      position: inherit;
    bottom: auto;
    right: auto;
    margin-top: 120px;
    width: 100%;
    background-color: #ed1f24;
    padding-bottom: 30px;
}	
section.contact .office-add-details p {
    font-size: 16px;
    margin: 10px auto 10px;
}
section.contact .title {
    margin: 0 0 10px;}
section.contact .registrationform label.control-label {
    font-size: 14px;     text-align: left !important;
    padding-left: 20px;
} 
.doanload-app-area {
    padding: 10px; }
		
section.contact .form-group {
    display: -moz-box;
    display: -ms-flexbox;
    /* margin-bottom: 5px; */
    /* display: -webkit-flex; */
    display: inline-block;
    width: 100%;
}	
.doanload-app-area p {      text-align: center;
    font-size: 14px;}
.devices-box {
    width: 100%;
    position: inherit;
     transform: none; 
    bottom: auto; 
  height:auto; 
    top: auto;
}	
.android-phone {
    float: left;
    display: none;
}
.process-model::after { display:none;}
	
}	

/*=========================*/
/*ipad media fo portirat */
/*========================*/

@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
header.masthead {
    padding-top: 0px;
    height: 100%;
    min-height: inherit;
    max-height: inherit;
    padding-bottom: 0px;
}		
section.about-app {
    background-position: 100% 98%;
}
section.about-app .devices-box {
    width: 450px;
    transform: translateY(30%);
    -ms-transform: translateY(30%);
    -webkit-transform: translateY(30%);
    margin: 0 auto;
}	
	section.contact .white-bg {margin: 0 auto 30px; }	
	section.contact {    padding-top: 30px;     padding-bottom: 0;}	
	.contact-details {
    width: 100%;
    text-align: center;
}
	.contact-details ul {text-align: center;}
	section.contact .contact-details li {    display: inherit;
    text-align: center;}
footer ul {
    margin-bottom: 10px;
    text-align: center;
}
footer p {
    font-size: 12px;
    margin: 0;
    color: #fff;
    text-align: center;
}
	a.scroll-btn.js-scroll-trigger {bottom: 30px;}	
}

@media only screen and (min-width:320px) and (max-width:767px) and (orientation:portrait) {
#chat-trigger:checked ~ .chat-box-inside .chat-area {
    height: 250px;
	width: 250px;}
#chat-trigger:checked ~ .chat-box-inside .chat-header-icon {
	width: 250px;}
div#landing-page {
    position: relative;
    z-index: 9999;
}	
}
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
footer ul li a {
	font-size: 12px;}
footer p {
    padding-right: 30px;
    text-align: center;
}	
section.about-app {
    background-position: 100% 80px;}
section.about-app {    padding-top: 100px;}	
}
/*========================*/