@charset "UTF-8";
/*css document*/

/*landing mediaq*/

/*bigger screens*/
@media screen and (min-width:2200px){

  h1{
  font-size:65px;
  line-height:100px;
  margin-bottom:30px;
  }

  h5{
  font-size:25px;
  }

  h4{
  font-size:25px;
  }

  h2{
  font-size:60px;
  margin-bottom:20px;
  line-height:90px;
  }

  p{
  font-size:21px;
  line-height:40px;
  }

  u{
  	border-bottom:8px solid #F23B31;;
  }

  #about img{
  width:1460px;
  bottom:-360px
  }

  #about_exp{
  margin-top:160px;
  margin-left:10%;
  width:35%
  }


  #features img{
  margin-left:30%;
  }

  #features_exp{
  width:600px;
  margin-top: 220px;
  margin-left: 5%;
  }

  #features2_img{
  width:35%;
  margin-right:10%;
  }

  #features2_exp{
  width:35%;
  margin-left:10%;
  }

  #benefits img{
  width:760px;
  margin-top:10px;
  }

}



@media screen and (max-width:2200px) and (min-width:1900px){
  h1{
  font-size:55px;
  line-height:90px;
  margin-bottom:20px;
  }

  h5{
  font-size:20px;
  }

  h4{
  font-size:20px;
  }

  h2{
  font-size:52px;
  margin-bottom:20px;
  }

  p{
  font-size:18px;
  line-height:35px;
  }

  u{
  	border-bottom:8px solid #F23B31;;
  }

#about_exp{
margin-top: 160px;
margin-left:10%;
}


#about img{
width:1150px;
bottom:-170px;
}

#features2_exp{
width:31%;
padding-top: 180px;
margin-left:10%;
}

#features2_img{
width:50%;
}


}

@media screen and (max-width:1366px){
  #about_exp{
  width:30%;
  margin-left:6%;
  }
}


/*desktop and tablets*/
@media screen and (max-width:1310px){

#about_exp{
width:31%;
margin-left:7%;
}

#about img{
width:920px;
bottom:-60px;
}

#section2{
height:1330px;
}

#features2{
height:730px;
}

#features2_exp{
padding-top:190px;
}

#features2_img{
height:730px;
}
}

@media screen and (max-width:1336px){
  #about_exp{
  width:31%;
  margin-left:6%;
  }
}

@media screen and (max-width:1280px){

#features2_exp{
width:35%;
}

#features2_img {
width:52%;
}

#features2_img img{
width:90%;
}

#benefits img{
margin-left:5%;
margin-top:80px;
}

#benefits_exp{
width:45%;
}
}


@media screen and (max-width:1240px){

  #subtitle{
  margin-bottom:5px;
  }

  #about_exp{
  width:30%;
  margin-top:200px;
  margin-left:8%;
  }

  #about_exp p, #about_exp h1{
  width:100%;
  }

  #about img{
  width:69%;
  bottom:-60px;
  }

/* #section2{
height:1280px;
} */

#benefits{
height:550px;
}

#benefits img{
width:490px;
}

#enquiry_form{
width:34%;
margin-right:9%;
}
}



@media screen and (max-width:1115px){

  h1{
  font-size:40px;
  line-height:62px;
  margin-bottom:20px;
  }

  h5{
  font-size:16px;
  line-height:28px;
  }

  h4{
  font-size:16px;
  }

  h2{
  font-size:40px;
  margin-bottom:10px;
  line-height:60px;
  }

  p{
  font-size:14px;
  line-height:27px;
  margin-bottom:15px;
  }

  u{
  	border-bottom:7px solid #F23B31;;
  }


  #section1{
  height:1350px;
  }

  #about{
  height:650px;
  }

  #about_exp{
  width:28%;
  margin-left:6%;
  margin-top:190px;
  }


  #about img{
  width:73%;
  bottom:-30px;
  }

  #features img{
  width:380px;
  margin-top:156px;
  }

  #features ul li{
  font-size: 16px;
  }

  #features ul li i{
  font-size: 22px;
  }

  #features2_exp{
  width:28%;
  }

  #features2_exp p, #features2_exp h1{
  width:100%;
  }

  #features2_img{
    width:60%;
  }


  #benefits img{
  width:410px;
  }

  #contacts{
  width:30%;
  }

  #enquiry_form{
  width:40%;
  margin-right:7%;
  }

  .bracket a::before {
  margin-right: 7px; content: '['; -webkit-transform: translateX(15px);
   -moz-transform: translateX(15px);
  transform: translateX(15px);
   }
  .bracket a::after { margin-left: 7px; content: ']'; -webkit-transform: translateX(-15px); -moz-transform: translateX(-15px); transform: translateX(-15px);
  }
}



@media screen and (max-width:1024px){

  h1{
  margin-bottom: 10px;
  }

  /*navbar*/
  header{
  position:fixed;
  top:0;
  width:100%;
  height:75px;
  background-color:#FFFDF6;
  float:left;
  z-index:99;
  }

  nav{
  width:50%;
  height:75px;
  margin-right:10px;
  font-family: 'Rubik', sans-serif;
  letter-spacing:0.4px;
  float:right;
  }

  header img{
  margin-left:6%;
  width:100px;
  /* background-color: green; */
  }

  header nav ul{
  width:100%;
  height:75px;
  /* background-color:green; */
  float:right;
  }

  header nav ul li{
  /*width:17.6%;*/
  width:22%;
  height:75px;
  list-style: none;
  text-align:center;
  float:left;
  }

  header nav ul li a {
  	font-size:15px;
  	color:#222223;
  	line-height:75px;
  	text-decoration:none;
  	display:block;
  }

  .login_btn{
  color:#f4f7f6;
  background-image:url("../pics/imgs/btnhover.svg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: 20% 80%;
  padding:12px 30px;
  margin-left:20%;
  border-radius: 27px;
  display:inline;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  }
  
  .signup_btn{
  color:#f4f7f6;
  background-image:url("../pics/imgs/btnhover.svg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: 20% 80%;
  padding:12px 30px;
  margin-left:20%;
  border-radius: 27px;
  display:inline;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  }


#about_exp{
width:31%;
}

#about img{
width:86%;
bottom:-60px;
right:-160px;
}

#section2{
height:1180px;
}

#features2{
height:630px;
}

#features2_exp{
width:30%;
height:630px;
padding-top:120px;
}

#features2_img{
width:60%;
height:630px;
}

#features2_img img{
width:87%;
}

.dot{
width:100%;
top:30%;
}

#benefits img{
width:450px;
margin-top:150px;
}
}



@media screen and (max-width:1000px){

#features_exp{
width:350px;
margin-left:7%;

}

#features2_exp{
width:30%;
margin-top:48px;
}

#benefits img{
width:43%;
margin-top:190px;
margin-left:4%;
}

#benefits_exp{
width:48%;
margin-top:150px;
}

.bracket a::before {
margin-right: 5px; content: '['; -webkit-transform: translateX(13px);
 -moz-transform: translateX(13px);
transform: translateX(13px);
 }
.bracket a::after { margin-left: 5px; content: ']'; -webkit-transform: translateX(-13px); -moz-transform: translateX(-13px); transform: translateX(-13px);
}
}




@media screen and (max-width:900px){
  h1{
  font-size:35px;
  line-height:55px;
  }

  h5{
  font-size:15px;
  line-height:26px;
  }

  h4{
  font-size:15px;
  }

  h2{
  font-size:32px;
  line-height:45px;
  }

  p{
  font-size:15px;
  line-height:28px;
  }

  u{
    border-bottom:4px solid #F23B31;;
  }


#section1{
height:1250px;
}

#about{
height:600px;
}

#about_exp{
width:35%;
margin-top:132px;
}

#about img{
width:83%;
bottom:-10px;
right:-150px;
}

#features{
height:648px;
}

#features img{
width:330px;
margin-top:175px;
}


#section2{
height:1130px;
}

#features2{
height:580px;
}

#features2_exp{
width:35%;
margin-top:10px;
height:580px;
}

#features2_img{
height:580px;
width:52%;
margin-right:2%;
}

#features2_img img{
width:90%;
}

.dot{
width:100%;
padding-top:100%;
top:35%;
}


#benefits img{
width:58%;
margin-top:100px;
margin-left:4%;
}

#benefits_exp{
width:30%;
margin-right:5%;
}

#benefits_exp h5{
text-align:left;
}

#contacts{
font-size:20px;
}

#contacts .contact_anchor{
line-height:30px;
}

}


@media screen and (max-width:870px){

  nav{
  width:65%;
  height:75px;
  margin-right:10px;
  font-family: 'Rubik', sans-serif;
  letter-spacing:0.4px;
  float:right;
  }

  #section1{
  height:1350px;
  }

  #about{
  height:700px;
  }

  #about_exp{
  width:39%;
  margin-right:6%;
  margin-top:180px;
  }

  #about img{
  width:120%;
  bottom:-60px;
  right:-420px;
  }

  #features_exp{
  width:40%;
  margin-left:4%;
  }

  #features img{
  margin-left:5%;
  }


}



@media screen and (max-width:768px){

nav{
width:72%;
}

#about_exp{
width:40%;
}

#features_exp{
margin-left:5%;
}

#features_exp ul li{
font-size:15px;
text-align: left;
}

#features2_exp{
margin-left:5%;
}

#features2_img{
height:580px;
width:58%;
margin-right:2%;
}

#features2_img img{
width:98%;
}

.dot{
width:100%;
padding-top:100%;
top:30%;
}
}

@media screen and (max-width:720px){
p{
font-size: 14px;
line-height:25px;
}

  .login_btn{
  color:#f4f7f6;
  background-image:url("../pics/imgs/btnhover.svg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: 20% 80%;
  padding:10px 25px;
  margin-left:20%;
  border-radius: 27px;
  display:inline;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  }
  
  .signup_btn{
  color:#f4f7f6;
  background-image:url("../pics/imgs/btnhover.svg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: 20% 80%;
  padding:10px 25px;
  margin-left:20%;
  border-radius: 27px;
  display:inline;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  }


#about img{
width:900px;
right:-440px;
bottom:-10px;
}

#about_exp{
margin-top:200px;
}


#features ul li i{
font-size:18px;
margin-right:8px;
}

#contacts{
margin-left:4%;
}


#contacts p{
font-size: 17px;
margin-bottom: 20px;
}

#contacts .contact_anchor{
font-size:16px;
margin-bottom:15px;
}

#enquiry_form{
width:51%;
margin-right:5%;
}

#login_sect p{
font-size: 17px;
line-height:55px;

}

}


@media screen and (max-width:710px){

nav{
width:75%;
}

h1{
margin-bottom:12px;
}

#section1{
height:1250px
}

#about_exp{
width:42%;
}

#about img{
bottom:-20px;
}

#features{
height:551px; /*check height again*/
float:left;
position:relative;
}

#features img{
width:250px;
margin-left:5%;
bottom:0;
position: absolute;
}

#features_exp{
width: 50%;
margin-top:150px;
margin-right:0%;
margin-left:0;
float:right;
}


#features2_exp{
height:190px;
width:70%;
padding-top: 0;
margin-top:50px;
margin-left:15%;
margin-right:15%;
}

#features2_img{
margin-left: 50%;
transform: translateX(-35%);
width:55%;
height:350px;
}

#features2_img img{
width:85%;

}
}


@media screen and (max-width:690px){

header img{
margin-left:4%;
width:100px;
}

nav{
width:72%;
/* background: green; */
}

header nav ul li{
width:25%;
/* background: yellow; */
}

header nav ul li a{
font-size:15px;
/* background: orange; */
}

.login_btn{
margin-left:8%;
}

.signup_btn{
margin-left:8%;
}

.bracket a::before {
margin-right: 5px; content: '['; -webkit-transform: translateX(10px);
 -moz-transform: translateX(10px);
transform: translateX(10px);
 }
.bracket a::after { margin-left: 5px; content: ']'; -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); transform: translateX(-10px);
}

#section2{
height:1030px;
}

#benefits{
height:450px;
}
}


@media screen and (max-width:688px){
#features2_exp{
width:73%;
}

#features img{
margin-left:6%;
}
}


@media screen and (max-width:660px){

#about img{
width:100%;
bottom:-60px;
left:50%;
transform: translateX(-49%);
}

.big_img{
display:none;
}

.small_img{
display:block;
}

#about_exp{
width:70%;
margin-top:120px;
margin-left:50%;
transform: translateX(-50%);
}

  #features2_img img{
  width:80%;
  }
}


@media screen and (max-width:640px){

#contacts{
width:38%;
}

#contacts p{
font-size:15px;
}

#contacts .contact_anchor{
font-size:15px;
}

#contacts i{
font-size:15px;
}

#benefits img{
width:340px;
}

#benefits_exp{
width:33%;
}
}

@media screen and (max-width:600px){

#section1{
height:1150px;
}


#features{
height:450px;
}

#features img{
margin-left:4%;
}

#features ul li i{
  margin-right:4px;
}

#benefits img{
width:280px;
}

}




@media screen and (max-width:570px){
header img{
margin-top:6px;
width:83px;
}

nav{
width:76%;
/* background: green; */
}

header nav ul li{
width:25%;
/* background: yellow; */
}

header nav ul li a{
font-size:15px;
/* background: orange; */
}

.login_btn{
width:18%;
padding:10px 18px;
}

.signup_btn{
width:18%;
padding:10px 18px;
}

#features img{
width:200px;
margin-left:6%;
}

#features_exp{
margin-right:3%;
}


#benefits{
position:relative;
}

#benefits img{
width:360px;
margin:0;
z-index:1;
bottom:-100px;
left:50%;
transform:translateX(-50%);
position: absolute;
clear:both;
}

#benefits_exp{
width:45%;
height:150px;
margin:0;
top:50px;
left:27%;
position: absolute;
clear: both;
}

#benefits_exp h2{
width:100%;
margin-left:50%;
transform:translateX(-50%);
}

#benefits_exp h5{
width:100%;
}



#contact_us{
z-index:2;
position: relative;
}
}

@media screen and (max-width:550px){

  #section1{
    height:1250px;
  }

  #features{
  height:550px;
  position: relative;
  }

  #features img{
  width:200px;
  margin:0;
  bottom:-50px;
  left:50%;
  transform: translateX(-50%);
  z-index:2;
  position: absolute;
  }

  #features_exp{
  width:55%;
  height:250px;
  margin:0;
  top:40px;
  left:28%;
  position: absolute;
  }


  #features2{
  z-index:4;
  position: relative;
  }

  #contact_us{
  height:1210px;
  position: relative;
  }

  #contacts{
  width:100%;
  height:250px;
  margin-top:100px;
  margin-bottom:20px;
  margin-left:11%;
  float:left;
  }

  #contacts i{
  font-size:25px;
  }

  #contacts .contact_anchor{
  font-size:15px;
  }

  #enquiry_form{
  width:100%;
  margin-top:0;
  float:left;
  }

  #login_sect{
  height:200px;

  }

#login_sect h6{
font-size: 14px;
margin-top:20px;
}

#login_sect p{
font-size: 16px;
line-height: 50px;
}

.contain{
padding-top:30px;
padding-left:8%;
padding-right:15%;
}
}

@media screen and (max-width:540px){

header nav ul li a{
font-size:14px;
}

header img{
margin-top:10px;
width:70px;
}

nav{
width:80%;
/* background: green; */
}

header nav ul li{
width:25%;
/* background: yellow; */
}

header nav ul li a{
font-size:15px;
/* background: orange; */
}

.login_btn{
width:10%;
padding:12px 15px;
}

.signup_btn{
width:10%;
padding:12px 15px;
}

.bracket a::before {
margin-right: 3px; content: '['; -webkit-transform: translateX(5px);
 -moz-transform: translateX(5px);
transform: translateX(5px);
 }
.bracket a::after { margin-left: 5px; content: ']'; -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); transform: translateX(-5px);
}
}



@media screen and (max-width:500px){
p{
font-size:16px;
}

header img{
width:100px;
margin-left:25px;
margin-top:5px;
}

header{
height:80px;
}

nav{
width:55%;
height:80px;
margin:0;
position: relative;
}


header nav ul{
width:55%;
height:68px;
margin-top:7px;
margin-right:20px;
float:left;
}

header nav ul li{
width:100%;
height:20px;
list-style: none;
text-align:right;
float:left;
margin:0;
padding:0;
}

header nav ul li a {
  font-size:14px;
  height:27px;
	color:#222223;
  text-align:right;
	line-height:25px;
  margin:0;
	display:block;
}

.login_btn{
width:40%;
height:38px;
border-radius:0;
font-size:16px;
text-align:center;
padding-top:6px;
padding-bottom:0;
padding-left:0;
padding-right:0;
top:42px;
right:0;
position:absolute;
box-sizing: border-box;
}

.signup_btn{
width:40%;
height:38px;
border-radius:0;
font-size:16px;
text-align:center;
padding-top:6px;
padding-bottom:0;
padding-left:0;
padding-right:0;
top:0;
right:0;
position:absolute;
box-sizing: border-box;
}

#section1{
height:1370px;
}

#about{
height:750px;
}

#about img{
width:103%;
bottom:-30px;
}

#features{
height:620px;
}

#features_exp{
width:500px;
height:320px;
top:80px;
left:0;
padding-left:24%;
padding-right:20%;
box-sizing: border-box;
}

#section2{
height:1130px;
}

#features2{
height:680px;
}

#features2_img{
height:480px;
width:73%;
bottom:10px;
margin-left: 50%;
transform: translateX(-15%)
}

.dot{
top:50%;
}

#features2_img img{
width:80%;
}

#benefits{
height:450px;
}

#benefits img{
width:310px;
bottom:-50px;
}

#benefits_exp{
top:50px;
}
}

/*mobile devices*/

@media screen and (max-width:480px){
  #features2_img img{
  width:87%;
  }
}

@media screen and (max-width:455px){

  #features_exp{
  width:500px;
  height:320px;
  top:80px;
  left:0;
  padding-left:22%;
  padding-right:20%;
  box-sizing: border-box;
  }

  #benefits_exp{
  left:25%;
  width:60%;
  }

  #benefits img{
  width:310px;
  bottom:-40px;
  }
}


@media screen and (max-width:420px){


  #section1{
  height:1380px;
  }

  #about{
  height:760px;
  }

  #about_exp{
  width:73%;
  }


  #about img{
  width:105%;
  bottom:-30px;
  }

  #features2_exp{
  width:73%;
  }

  #contacts{
  margin-left:14%;
  }

  #contacts p{
  width:50%;
  }

}

@media screen and (max-width:400px){
#features_exp{
padding-left:18%;
}

#benefits img{
width:315px;
}
}



@media screen and (max-width:375px){
  #features_exp{
  padding-left:17%;
  }

  #section1{
  height:1360px;
  }

  #about{
  height:780px;
  }

  #features{
  height:590px;
  }

  #features2_img img{
  width:95%;
  }

  #benefits_exp{
  left:15%;
  }

  #benefits img{
  width:300px;
  }
}


@media screen and (max-width:360px){
  #section1{
  height:1350px;
  }

  #about{
  height:770px;
  }

#about_exp{
width:75%;
}

#features2_exp{
width:75%;
margin-left:12%;
}
}

@media screen and (max-width:350px){

#features_exp{
padding-left:12%;
}

.dot{
top:65%;
}

#benefits_exp{
width:80%;
}

#benefits img{
width:290px;
}
}

@media screen and (max-width:335px){
  #features_exp{
  padding-left:11%;
  }

#section2{
height:1150px;
}

#features2{
height:700px;
}

#features2_exp{
margin-top:20px;
}

#features2_img{
width:70%;
height:500px;
}

#features2_img img{
width:80%;
}

.dot{
top:75%;
}
}



@media screen and (max-width:320px){
#features2_exp{
margin-top: 30px;
}

#features2_img{
width:72%;
height:500px;
}

#features2_img img{
width:88%;
}
}