@import url('https://fonts.googleapis.com/css?family=Lato:300,400|Ubuntu&display=swap');
:root{
 --primaryColor:rgb(12, 199, 183);
 --mainWhite:#fff;
 --offWhite:#f7f7f7;
 --mainblack:#222;
 --mainGrey:#ececec;
 --darkGrey:#afafaf;
 --mainTransition: all 0.4s linear;
 --letterSpacing:0.2rem;
 --lightShadow:2px 5px 3px 0 rgba(0,0,0,0.25);
 --darkShadow:4px 10px 5px 0 rgba(0,0,0,0.5);
;


}
::before,
::after{
 margin:0;
 padding:0;
 box-sizing: border-box;
}
body{
 font-family: 'Lato', sans-serif;
 color:var(--mainblack);
 background: var(--offWhite)
 ;
 line-height:1.4;
 font-size: 1.3rem;

}
/**global values**/
img{
 width: 100%;
 display: block;
}
h1,h2,h3,h4,h5,h6{
 font-family: 'Ubuntu', sans-serif;
margin-bottom: 1.2rem;
letter-spacing: var(--letterSpacing);}
h1{
 font-size: 3.3rem;
}
h2{
 font-size: 2.3rem;
}
h3{
 font-size: 2rem;
}
h4{
 font-size: 1.23rem;
}
p{
 margin-bottom: 1.25rem;
 line-height: 1.5;
 font-weight: 300;
}
a{
 text-decoration: none;
}
.btn-white,
.btn-primary{
 text-transform: uppercase;
 letter-spacing: var(--letterSpacing);
 color: var(--mainWhite);
 border:2px solid  var(--mainWhite);
 display: inline-block;
 padding:0.9rem 1.7rem;
 cursor: pointer;
 
}
.btn-white:hover{
 background: var(--mainWhite);
 color: var(--primaryColor);
}
.btn-primary{
 background: var(--primaryColor);
 color: var(--mainWhite);
 border-color: var(--primaryColor);
}
/*section global*/
.section{
 padding:5rem 0;
}
.title-wrapper{
 margin-bottom: 2rem;
}
.title{
 text-align: center;
 text-transform: uppercase;
 font-size: 2.6rem;
 letter-spacing: 0.2rem;

}
.subtitle{
 color:var(--primaryColor);
}
.section-center{
 width: 85vw;
 margin:4rem auto 2rem auto;
 max-width: 1170px;
}
.hero{
 min-height:100vh;
 background: var(--primaryColor);
 display: flex;
 justify-content: center;
 align-items: center;
}
.hero-banner{
 text-align: center;
 color: var(--mainWhite);
 padding:0 2rem;
}
.hero-title{
 text-transform: uppercase;
 margin-bottom: 2rem;
 letter-spacing: 0.4rem;
}
.hero-text{
 width:85%;
 letter-spacing: var(--letterSpacing);
 margin: 0 auto;
 font-weight: 400;
 font-size: 1.8rem;
 margin-bottom: 2rem;
}





@media screen and ( min-width:768px){
 .hero{
  background: linear-gradient(rgba(33,221,228,0.7),rgba(0,0,0,0.7)),
  url('../setup-files/images/main.jpeg') center/cover no-repeat fixed ;
 }
 .hero-title{
  font-size:4rem;

 }
 .hero-text{
  width: 75%;
 }
}
.about{
 background: var(--mainWhite);

}
.about-img,
.about-info{
 margin-bottom: 4rem;

}
.about-info h3{
 text-transform: uppercase;
}

@media screen and (min-width: 992px) {
  .about-center {
    display: flex;
    justify-content: space-between;
  }
  .about-img,
  .about-info {
    flex: 0 0 calc(50% - 2rem);
    margin-bottom: 0;
    align-self: center;
  }
}
@media screen and (min-width: 1170px) {
  .about-img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.5rem solid var(--primaryColor);
    top: -1.5rem;
    left: -1.5rem;
  }
  .about-img {
    position: relative;
  }
  .about-photo {
    position: relative;
  }
}
.service{
 text-align: center;
 margin-bottom: 3rem;
 transition: var(--mainTransition);
}

.service-icon{
 background: var(--primaryColor);
 padding: 0.5rem;
 display: inline-block;
 font-size: 1.2rem;
 margin-bottom: 1.5rem;
 transition: var(--mainTransition);
}
.service-icon:hover{
  
  transform: scale(1.75);
  
}
.service-title{
 text-transform: uppercase;
}
.service-text{
 width: 70%;
 margin:0 auto;
 line-height:1.5 ;
}

@media screen and (min-width:576px){
 .services-center{
  display:flex;
  
 }
 .service{
  flex: 0 0 calc(50% -1rem);
 }
}
.featured{
 background: var(--mainWhite);
}
.tour-card{
 margin-bottom: 4rem;
 box-shadow: var(--lightShadow);
 transition: var(--mainTransition);
}
.tour-card:hover{
 box-shadow: var(--darkShadow);
}
.tour-img-containers{
 position: relative;
}
.tour-date{
 position: absolute;
 top:0;
 left: 0;
 background: var(--mainGrey);
 padding: 0.25rem 0.2rem;
 text-transform: capitalize;
 margin-top: 0;
 }
 .tour-footer{
  padding: 1.2rem  1.5rem;
 }
 .tour-title{
  text-transform: capitalize;
 }
.tour-country{
 color:var(--primaryColor);
 text-transform: capitalize;

}
.tour-info{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
 }
.tour-details p{
 line-height: 0.2;
 text-transform: capitalize;
 color: var(--darkGrey);
 letter-spacing: 0.02rem;

}
.tour-country{
 align-self: center;
}
.tour-link{
 text-align: center;
}

@media screen and (min-width:992px){
 .featured-center {
  display: flex;
  justify-content: space-between;
  
 
 }
 .tour-card{
  flex : 0 0 calc(50% -1rem);
  
 }
}
.gallery{
 background: var(--mainGrey);
 
}
.gallery-img-container{
 position: relative;
 background: var(--primaryColor);
 
 
}
.gallery-img{
 transition: var(--mainTransition);
 background: cover/center no-repeat;
}
.gallery-img-container:hover .gallery-img{
 
 transform: scale(1.2);
 
}
@media screen and (min-width:768px)
{
 .gallery-center{
  display:flex;
  
 }}
 .input-group{
  width: 80vw;
  max-width: 600px;
  margin:0 auto;
  display:flex;
  
 }
 .form-control{
  flex: 1 1 auto;
 }
 .form-control,
 .btn-submit{
  padding: 0.3rem 0.6rem;
  font-size:1rem;
  font-weight: bold;
  letter-spacing: var(--letterSpacing);
  background: transparent;
  text-transform: uppercase;
 }
 .btn-submit:hover{
  color:var(--mainWhite);
  background: var(--primaryColor);
 }
.footer{
 background: rgb(24, 23, 23);
 color:var(--mainWhite);
 text-align: center;
 
}
.footer-icons,
.footer-links{
 display:flex;
 justify-content: center;
 margin-bottom: 1.5rem;
 
}
.footer-link{
 font-size: 1.2rem;
 text-transform: capitalize;
 margin-right:1rem ;
 color:var(--mainWhite);
}
.footer-link:hover{
 color:var(--darkGrey);
}
.footer-icon{
 color:var(--primaryColor);
 margin-right: 1rem;
 font-size: 1.7rem;
}
.copyright{
 text-transform: capitalize;
 letter-spacing: var(--letterSpacing);
}
.span{
 color: var(--darkGrey);
 font-weight: bold;
}
.nav-header{
 padding :1rem 2rem;
 

}
.nav-toggle{
 background: transparent;
 font-size: 1.5rem;
 border:none;
 cursor: pointer;
 outline: none;
 transition: var(--mainTransition);

}
.nav-link{
 display: block;
 padding:1rem 2rem;
 text-transform: capitalize;
 letter-spacing: var(--letterSpacing);
 color: var(--mainblack);
 transition: var(--mainTransition);
 font-weight: bolder;
 text-shadow: 1px 2px dimgrey;
 font-size: 1.6rem;

}
.nav-link:hover{
 color:var(--primaryColor);
 background: var(--darkGrey);
 padding:1rem;
}
.nav-links{
  height:0;
  overflow:hidden;
}
.show-links{
  height:300px;
}
@media screen and (min-width:992px){
.nav-toggle{
  display: none;

}
.nav-links{
  display:flex;
  height: auto;
}
.nav-center{
 max-width: 1170px;
 display:flex;
 justify-content:space-between;
}
}

.title-wrapper1{
   padding:2px;
   margin-top: 0;
}
 .title1{
  text-align: center;
  font-size: 2.6rem;
}
 .subtitle1{
  
  font-size: 2rem;
  color:var(--primaryColor);
 }