@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Pangolin&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Ruda&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Lora', serif;
  
  
  /* font-family: 'Chakra Petch', sans-serif; */
}




/* navigation-text */
.navigation-text{
  margin-left: 10px;
  position: absolute;
  bottom: 8px;
  margin:0 5%;
}
.navigation-text a{
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
}
.navigation-text p{
  color: #ffffff;
}



.aboutBanner{
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-blend-mode: darken;
background-color: rgba(0, 0, 0, .5);
height: 50vh;
}
.innerBanner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
.innerBanner h1{
  font-size: 2rem;
  color: #fff;
  }
.contactContainer{
background-color: #FFFFFF;
}
.contactContainer .innerContact{
margin:0 5%; 
padding:2rem 0;
}
.contactContainer .innerContact .contactHeading{
text-align: center;
padding-bottom: 1rem;
width: 70%;
font-family: 'Roboto', sans-serif;
margin: auto;

}

.contactHeading h2{
  margin-bottom: 1rem;
}

.contactHeading p{
  font-family: 'Roboto', sans-serif;
}



.contactFormBox{
  width: 500px;
  margin: auto;
  display: block;
  border-radius: .4rem;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }

  .contactFormBox h3{
    text-align: center;
    font-size: 1.4rem;
     background-image:linear-gradient(10deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
    color: #fff;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    padding:.7rem 0;
  }
  form{padding:1rem;}
  form input{
  display: block;
  width: 98.5%;
  padding:.5rem 0;
  margin:.8rem 0;
  padding-left: 0.5rem;
  border: none;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  }
  .contactFormBox{
      font-size: 18px;
  }

  .check-in-out{
    display: flex;
    justify-content: space-between;
    
    
    
  }

  .check-in-out label{
    font-size: 0.8rem;
    width: 40%;
   

  }


  .check-in-out input{
width: 40%;
padding: .5rem !important;
  }
  .form-adult-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
   

  }

  .form-adult-child input{
    text-align: center;
    box-shadow: none;
    padding: 0;
  }

  .form-adult-child label{
    font-size: .8rem;

  }

  .form-adult-child span{
    font-size: 0.8rem;
    color: #757575;

  }

  
  input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}


  
 

  .contactFormBox form input::placeholder{
  padding-left: .5rem;
  font-size: .7rem;
  }
  .contactFormBox form .ContactPhone{
  display: flex;
  justify-content: space-between;
  }
  .contactFormBox form .ContactPhone #countryCode{
  width: 25%;
  padding:.5rem 0;
  margin:.5rem 0;
  border-radius: .5rem;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  }
  .contactFormBox form .ContactPhone input{
  width: 70%;
  }
  .contactFormBox form .ContactPhone input::placeholder{
  padding-left: .5rem;
  }
  .contactFormBox form textarea{
  width: 98.5%;
  height: 12vh;
  padding-left: 0.5rem;
  border: none;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  }
  .contactFormBox form textarea::placeholder{
  padding-left: .5rem;
  font-size: .7rem;
  }
  .checkCntner{
  display: flex;
  align-items: flex-start;
  }
  .checkCntner p{
  font-size: .8rem;
  margin-left: .3rem;
  color: #767676;
  }
  .contactFormBox form .checkBox{
  width: auto;
  }
  .contactFormBox form button{
 background-image:linear-gradient(300deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
  color: #fff;
  font-size: 1.1rem;
  width: 100%;
  padding:.5rem 0;
  margin:.5rem 0;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  border-radius: .5rem;
  }

.contactInfprmation{
width: 100%;
}
.contactCont{
display: flex;
margin: 2rem 0;
justify-content: center;
text-align: center;
 background-image:linear-gradient(100deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
}
.contactInfprmation .coantactBox
{


width: 50%;
padding:1rem;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.contactInfprmation .coantactBox i{

width: 2rem;
height: 2rem;
line-height: 2rem;
background-color: #ffffff;
color: #000000;
text-align: center;
border-radius: 50%;
margin-right: .5rem;
margin-bottom: 1rem;
}
.contactInfprmation .coantactBox .Cnumber span{
color: #fff;
font-family: 'Roboto', sans-serif;
}
.contactInfprmation .coantactBox .Cnumber a{
text-decoration: none;
color: #fff;
font-family: 'Roboto', sans-serif;
word-wrap: break-word;
}
.socialConatct{
display: inline !important;
}
.socialConatct img{
margin-top: 1rem;
}
#Gmaps{
width: 100%;
height: 300px;
border: none;
}
/* Conatct Page End */

/* Mobile View Start */
@media(max-width:950px){
.contactContainer .innerContact .contactHeading{
width: 100%;
}
form{
width: 94.6%;
padding: 3%;
}
}

@media (max-width:650px ) {
  .contactFormBox{
    width: auto;
  }
}

@media(max-width:550px){
.contactCont{
display: block;
}
.contactInfprmation .coantactBox{
width: 100%;
padding:1rem 0;
}

.navigation-text{
    width:100%;
    text-align:center;
    margin:0;
}
}