@font-face {
  font-family: poppins;
  src: url(../fonts/poppins.ttf);
}

@font-face {
  font-family: oswald;
  src: url(../fonts/oswald.ttf);
}

 *{
    margin:0;
    padding:0;
    font-family: poppins;
   
} 

#wrapper{
    width: 100%;
    min-height: 100vh;
/*    background: red;*/
     display: flex; 
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;

}
#nav{
    background:#eeb311;
    width: 100%;
    min-height: 32px;
    display: flex; 
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}
.navBoxes{
    width: 300px;
    min-height: 20px;
    padding: 0px 10px;
    

}



.navBoxes p{


text-align: center;


}

.navBoxes p a{

color:#fff;
font-weight:bold;
font-size: 20px;
text-decoration: none;

font-family: poppins;

}

.navBoxes p i{

margin-right: 20px;

}

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

.navBoxes p a {
   
    font-size: 12px;
  
}


}

#header{

    background:#fff;
    width: 100%;
    min-height: 80px;
    display: flex; 
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}

.headerBoxes{
    width: 50%;
    min-height: 20px;
    padding: 20px 10px;
   
    display: flex;
    justify-content: flex-start;
    transition: all 0.3s ease;
    

}

.headerBoxes img
{
    max-height:80px;float: right;
    transition: all 0.5s ease;
}
.headerBoxes ul{
    float:right;
}

.headerBoxes ul{
    float:right;
}

.headerBoxes ul li{
    display: inline;
    list-style-type: none;
}
.fixHeader{
    top: 0;
    right:0 ;
    z-index: 9;
    left: 0;
    position: fixed;
}

.fixHeader .headerBoxes{
   padding:6px 10px;
}

.headerBoxes ul li a{
    padding: 20px 26px;
    font-weight: bold;
    color:#000;
    background:transparent;
    text-decoration: none;
    
}

.headerBoxes ul li a:hover{
    
/*    color:#eeb311;*/

   border-bottom: 2px solid #eeb311;
}



@media only screen and (max-width:900px){
    
    .headerBoxes img
{
    max-height:60px;float: right;
}
    
    .headerBoxes ul li a {
    padding: 20px 5px;
     font-size: 12px;
   }


}


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

#header{

   
    flex-direction: row;
   
}

.headerBoxes:first-child{
    width: 30%;
    
}
    
    .headerBoxes:last-child{
    width: 70%;
    
}
    
    
    .headerBoxes img
{
    max-height:40px;float: right;
}
    
    .headerBoxes ul li a {
    padding: 20px 3px;
     font-size: 10px;
   }


}

.swiper {
  width: 100%;
  min-height: 300px;
}

.swiper-slide {
 
    width: 100%;
   
    display: flex; 
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}


.swiper-slide img{
  width: 100%;
  min-height: 200px;
}



.titleandbutton{
 width: 100%;
   
    top: 0;
    left:0;
    right:0;
    bottom:0;
    position: absolute;
 
}

.titleandbutton h3{
    
    font-size:30px;
    font-weight:bold;
    font-family:inherit;
   width: 50%;
    background: rgba(0,0,0,0.5);
   padding:10px 20px;
    border-radius: 50px;
    color: #fff;
    margin: 150px auto 10px auto;
    text-align: center;
    display: block;
    position: relative;

}

.sliderbtn{
    margin: 10px auto;
    background: url('../image/booknow.png') no-repeat;
    background-size: cover;
    width: 158px;
   min-height: 40px;
   position: relative;
    
}

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

.titleandbutton h3{
    
    font-size:15px;
    
}
   
}
#welcomeSection{
    
    display: flex;
    width: 100%;
    min-height: 100px;
    padding: 30px 0px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    
}
.welcomeTitle{
    font-weight: bold;
    margin-top: 50px;
    text-transform: uppercase;
    border-bottom: 2px solid #eeb311;
    padding-bottom: 20px;
    text-align: center;
    transition: all 0.5s ease;
   
}
.welcomeContent{
  padding: 20px 50px;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
}

@media only screen and (max-width:700px){
    .welcomeTitle{
    font-size: 15px;
   
}
}

#serviceAreaSection{
    
    display: flex;
    width: 100%;
    
    padding: 30px 0px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background: #002949;
    justify-content: center;
    
}

.serviceItems{
   display: flex;
    width: 50%;
    min-height: 100px;
    padding: 30px 0px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    
    justify-content: center;
}

@media only screen and (max-width:800px){
    .serviceItems{
      width: 100%;
   }
}

.serviceItems h2{
    text-align: center;
    font-weight: bold;
    color: yellow;
    margin: 20px;
    text-transform: uppercase;
}

.serviceItems p{
  
    color: #fff;
    font-size: 20px;
    line-height: 35px;
    margin: 20px;
    font-weight: bold;
    text-align: center;
}

.serviceItems img{
  
    width: 80%;
    margin: 0 10%;
}

@media only screen and (max-width:700px){
   
    
    .serviceItems h2{
   
    margin: 20px;
    font-size: 15px;
}

.serviceItems p{
  font-size: 12px;
}
    
    
}

#CallToAction{
    
    display: flex;
    width: 100%;
    
   
    flex-direction: row;
    align-items: center;
    padding: 20px 0px;
    flex-wrap: wrap;
    background: #fae76e;
    justify-content: center;
    
}

.callToActionItems{
   display: flex;
    width: 50%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.callToActionItems h2{
    text-align: center;
    font-weight: bold;
    color: black;
    margin: 20px;
    font-size: 18px;
    text-transform: uppercase;
}
.btnMessageUs{
    width: 100px;
    height: 30px;
    background: #edb313;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    align-items: center;
    justify-content: center;
}

.btnMessageUs{
    width: 100px;
    height: 30px;
    background: #edb313;
    border-radius: 15px;
    display: flex;
    font-size: 15px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
        text-transform: uppercase;
    flex-direction: column;
    margin: 0 20px;
    align-items: center;
    justify-content: center;
}

.btnCallUs{
    width: 120px;
    height: 30px;
    background: #1c91c6;
    border-radius: 15px;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
        text-transform: uppercase;
    flex-direction: column;
    margin: 0 20px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width:800px){
    .callToActionItems{
      width: 100%;
    
}
}

#serviceListSection{
    
    display: flex;
    width: 100%;
    min-height: 100px;
    padding: 30px 0px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    
}
.serviceListSectionTitle{
    font-weight: bold;
    margin-top: 50px;
    text-transform: uppercase;
   
  
    text-align: center;
   
}

.serviceListContainer{
    display: flex;
    width: 100%;
    min-height: 100px;
    padding: 30px 0px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 2px solid #eeb311;
   }

.serviceListItem{
    display: flex;
    width: 33%;
    min-height: 100px;
    padding: 30px 0px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content:flex-start;
   }


@media only screen and (max-width:700px){
  .serviceListItem{
        width: 48%;
       }
    
    .serviceListSectionTitle{
    font-size: 15px;
        margin-top: 10px;
   
}
    
}

@media only screen and (max-width:550px){
  .serviceListItem{
        width: 98%;
       }
    
}


.serviceListItem ul li{
list-style-type: none;
    border-bottom:0.5px solid #eeb311;
    padding: 10px 0px;
   }

.serviceListItem ul li:before {
  content: '✓';
    color: limegreen;
}

.serviceListItem ul li a{
text-decoration: none;
    color: #000;
    font-family: oswald;
   }


.btnMore{
    width: 120px;
    height: 30px;
    background: #f3edcd;
    display: flex;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    color: #edb313;
    border: 1px solid #edb313;
        text-transform: capitalize;
    font-weight: bold;
    
    margin: 0 20px;
    justify-content: center;
    align-items: center;
    
}

.cleaningIsNotEasy{
    font-weight: bold;
       text-transform: uppercase;
        text-align: center;
    color: #fff;
   
}


#formSection{
    
    display: flex;
    width: 100%;
    
    padding: 30px 0px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
   
    
}

#formSection .forms{
    
    display: flex;
    width: 50%;
    min-height: 100px;
    padding: 30px 0px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
   
    
}



@media only screen and (max-width:800px){
   #formSection .forms{
    
    width: 100%;
   
}
    
    .cleaningIsNotEasy{
   font-size: 15px !important;
   
}
    
}


#formSection .forms img{
    
   width: 80%;
    
}
#formSection .forms h2 {
    text-align: center;
    font-weight: bold;
    color: yellow;
    font-family: oswald;
    margin: 20px;
    text-transform: uppercase;
}

#formSection .forms form {
    border:1px solid #eee;
    border-radius: 2px;
    padding: 50px 30px;
    width: 90%;
    display: flex;
    flex-direction: column;
  
    justify-content: flex-start;
}

#formSection .forms form span,input,textarea {
    display: block;
}

#formSection .forms form span{
    font-size: 15px;
    color: #000;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 4px;
    margin-left:5%;
/*    font-family: oswald;*/
}
#formSection .forms form input,textarea{
    border: 1px solid #eee;
    height: 30px;
    width:90%;
    margin: 0 auto;
}

.formSubmitBtn{
    width: 120px;
    height: 30px;
    background: #000;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
     text-transform: capitalize;
     margin-left:5%;
     margin-top:20px;
    border: none;
    
}


#footer {
    display: flex;
    width: 100%;
    padding: 30px 0px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background: #002949;
    justify-content: center;
}

#footer .footerInner{
    
    display: flex;
    width: 50%;
   
    padding: 30px 0px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
   
    
}

@media only screen and (max-width:700px){
   #footer .footerInner{
    
    width: 100%;
   
} 
    
}

#footer .footerInner .addressSection{
    
    display: flex;
    width: 80%;
   
    padding: 30px 0px;
    flex-direction: column;
    margin:0px 10%;
    font-weight: bold;
    color:yellow;
    flex-wrap: wrap;
    justify-content: flex-start;
   
    
}
.footerTitle{
   
    text-align: center;
    font-weight: bold;
    color: yellow;
    margin: 20px;
    text-transform: uppercase;
}
.addressSection p a{
   
   color: yellow;
    text-decoration: none;
}
.addressSection p a i{
   
   color:#fff;
}
/*service page*/
#servicePageMainSection{
    
    display: flex;
    width: 100%;
    
    flex-direction: row;
        flex-wrap: wrap;
    align-items: center;
  justify-content: flex-start;
    margin-bottom: 50px;
    
}

.servicePageItems{
    
    display: flex;
    width: 24%;  
    min-height: 100px;
    flex-direction: column;
    margin: 2px;
   border: 1px solid #eee;
    align-items: center;
    padding-bottom: 20px;
    
}

@media only screen and (max-width:900px){
   .servicePageItems{
    
    
    width: 48%;  
    
} 
    
}

@media only screen and (max-width:600px){
   .servicePageItems{
    
    
    width: 96%;  
    
} 
}
.servicePageItems .serviceImage{
    width: 100%;
    max-height: 181px;
   
    min-height: 20px;
    overflow: hidden;
    position: relative;
}

.servicePageItems .serviceImage .cover{
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0000002b;
    position: absolute;
    text-align: center;
    font-size: 0px;
    font-family: oswald;
    padding-top: 10px;
    transition: all 0.5s ease;
    text-decoration: none;
    
}

.servicePageItems .serviceImage:hover .cover{
    top:40%;
    right: 30%;
    bottom: 40%;
    font-size: 15px;
    color: #fff;
    left: 30%;
    background: #000;
    border-radius: 50px;
    position: absolute;
}


.servicePageItems .serviceImage img{
    width: 100%;
   }

.servicePageItems  h2{

    margin: 10px 0px;
    
   }

.servicePageItems  h2 a{
    font-size: 20px;
    color: #000;
    font-family: oswald;
/*    font-weight: bold;*/
    text-decoration: none;
    border-bottom: 1px dashed #eeb311;
    padding: 10px 0px;
    
   }

.servicePageItems  p{
    font-size: 15px;
    color: #000;
    font-family: oswald;
/*    font-weight: bold;*/
    line-height: 25px;
    text-align: center;
    padding: 0px 20px;
    margin-bottom: 20px;
   }

.btnServicePage{
    width: 100px;
    height: 30px;
    background: #edb313;
    border-radius: 1px;
    display: flex;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
        text-transform: uppercase;
    flex-direction: column;
    margin: 0 20px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

/*contact page 
*/