/* tags and common css */
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;600&family=Spectral:wght@400;500&display=swap');

body{
  text-align: center;
  font-family: 'Spectral', serif;
  font-size: 1.05rem;
  color: #212529;
}
ul{
  text-align: left;
}
ul li {
	margin-bottom: 15px;
}

h1, h2, h3, h4, h5{
  font-family: 'Spartan', sans-serif;
}
h1, h2, h3, h4{
  color: #0e2e4a;
}
h5{
  color: white;
}
p {
  font-size: 20px;
}

.bg-dark-blue{
  background: #0e2e4a;
}


.main-wrapper {
	margin-top: 4.2em;
	text-align: left;
}

.main-wrapper p{
	margin-top: 20px;
}

.main-wrapper img {
	max-width:100%;
	padding-right: 30px;
}
#main-img {
	max-height:250px;
}


@media only screen and (min-width: 600px) {
	.main-wrapper > div {
		padding: 50px 150px 50px;
	}
}


.white-section{
  background: white;
}
.img-text{
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
}
.img-text p{
  margin-bottom: 0;
}
.contents p{
  text-align: center;
  font-family: 'Kanit', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(0,0,0,1);
}
.item:hover a{
  opacity: 0.8;
  transition: 0.3s all ease-in-out;
}
.contents:hover .img-text{
	transition: 0.3s all ease-in-out;
  color: #ffffff;
  font-family: 'Spartan', sans-serif;
  font-size: 19px;
  font-weight: 500;
  text-transform: capitalize;
	background-color: rgb(0 0 0 / 55%);
  padding: 19px 0px;
}
.item a{
  position: relative;
  color: white;
}
.box-shadow2{
  box-shadow: 0px 8px 13px 1px rgba(0,0,0,0.6);
}
.text-shadow{
  text-shadow: 0 0 10px rgba(0,0,0,1);
}
/* tags and common css */

/* navbar */

.box-shadow{
  box-shadow: 0 1px 20px 1px rgba(0,0,0,0.5);
}

.navbar-brand:hover{
  color: #006a71;
}
.nav-translucent-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.3);
  height: 90px;
  z-index: -1;
}
.nav-back-color{
  background: transparent;
}
.nav-item{
  font-family: 'Roboto', sans-serif;
}

.fa-bars{
  color: white;
  font-size: 2rem
}
.nav-blue-onscroll{
  color: #0e2e4a;
}
.toggle-color{
  color: #0e2e4a;
 }



.navbar-nav {
  flex-direction: row;
}

.navbar-brand{
  font-family: 'Spartan', sans-serif;
  font-size: 18px;
  color: white;
  font-weight: bold;
  position: relative;
  margin-left: 16px;
}

a.nav-link:hover {
	text-decoration:underline;
}


@media only screen and (min-width: 600px) {
	.nav-link {
	  padding-right: 50px !important;
	  padding-bottom: 0px;
	}

	.navbar-brand{
	  min-width:350px;
	}	

}





h1 {
  font-size:1em;
}
h2 {
  font-size:0.8em;
}

@media (min-width:900px) {
  .navbar-section {
    padding: 8px 150px;
  }
  .navbar-nav {
    flex-direction: column;
  }
  .navbar-title {
    font-size: 1.2em;
  } 
  h2 {
    font-size:1.2em;
  }

  h1 {
    font-size: 2.5em;
  } 
}



/* carousel */

.carousel-item img{
  width: 100vw;
  height: 80vh;
  object-fit: cover;
}
.carousel-indicators{
  margin-bottom: 0;
}
.carousel-indicators li{
  width: 10px;
  border-radius: 100%;
  height: 10px;
}
/* carousel */

/* banner */
.banner{
  padding: .5em 0;
  width: 100vw;
}
.btn{
  background-color: #FF5334 !important;
  color: white;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
}
.btn:hover{
  background-color: #ff7e67 ;
  color: white;
}
/* banner */

/* type */
.type-section{
  text-align: left;
}

#main-img-right, #adventure-img {
	min-width:250px;
}


.type-section > div{
  padding: 50px 150px 50px;
}
.type-section p, .type-section ul{
  line-height: 1.7;
}
.type-section li:before{
  content: '✔ ';
  margin-left: -1em;
  margin-right: .100em;
}
.type-section ul{
	font-size: 14px;
	padding-left: 5px;
	text-indent: 2px;
	list-style: none;
	list-style-position: outside;
}

@media (min-width:900px) {
  .type-section ul{
    font-size: 20px;
    padding-left: 20px;
  }
}



/* type */

/* camper-van */
.van-section{
  background-image: url('../images/dot_bg.png');
}
.wrapper2{
  padding: 70px 250px;
}
.holder{
  margin: 25px 0;
  background-color: white;
  text-align: left;
  border-radius: 5%;
  overflow: hidden;
}
.holder .contents p{
  opacity: 0;
}
.holder .item:hover p{
  opacity: 1;
  transition: 0.3 ease-in-out;
}
.holder-img{
  height: 30vh;
  width: 100%;
  object-fit: cover;
}
.holder-body{
  margin: 10px 15px;
  text-align: center;
}
.holder-body .desc{
  line-height: 1;
  font-size: 0.9rem;
  margin-top: 15px;
}
.holder-body a{
  color: #006a71;
}
.holder-body p{
  margin-bottom: 4px;
}
.holder-body h4 a {
  font-size: 19px;
  font-weight: 500;
}
.holder-body h4 a:hover {
	text-decoration: none;
}
.holder.box-shadow4 {
  -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0,0,0,.059), 0 8.2px 8.9px -30px rgba(0,0,0,.071), 0 25px 40px -30px rgba(0,0,0,.2);
  box-shadow: 0 3.4px 2.7px -30px rgba(0,0,0,.059), 0 8.2px 8.9px -30px rgba(0,0,0,.071), 0 25px 40px -30px rgba(0,0,0,.2);
	transform: translateY(7.5px);
  transition: 1.2s cubic-bezier(.17,.85,.438,.99);
}
.holder.box-shadow4:hover {
  transform: translateY(-7.5px);
}
.holder.box-shadow4:hover .holder-footer {
  background-color: #ff5334;
	border-radius: 0px;
	transition: 1.2s cubic-bezier(.17,.85,.438,.99);
}
.holder-footer{
	background-color: #0e2e4a;
  padding-left: 15px;
  padding: 15px;
  top: -40px;
  border-radius: 40px 0px 0px;
  margin: 0 auto;
	transition: 1.2s cubic-bezier(.17,.85,.438,.99);
}
.holder-footer p{
  color: #ffffff;
  margin-bottom: 0px;
  text-align: center;
}
.holder-body h4{
  font-weight: normal;
}
/* camper-van */

/* contact */
.info{
  position: relative;
  overflow: hidden;
  padding: 0;
  background: rgba(14,46,74,0.7);
}
.info-img{
  width: 100%;
  object-fit: cover;
  z-index: -1;
  position: relative;
  height: 300px
}
.contact-us .col{
  padding: 0;
}
.info-container{
  position: relative;
}
.info-container2{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 50px;
}
.info-container2 .row{
  max-width: 100%;
  width: 100%
}
.info-container2 h5, .info-container2 p{
  width: 100%;
  margin-bottom: 0;
  text-align: left;
  padding:0 15px 15px;
  text-shadow: 0 0 10px rgba(0,0,0,1);
}

.info-container2 p{
  font-weight: 400;
  color: white;
  font-size: 1.1rem;
}
.info-container2 i{
  color: white;
  font-size: 1.5rem;
  padding-top: 3px;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.contact-form{
  padding: 20px;
}
label, input, textarea{
  border: 1px solid #D8D8D8;
  padding-left: 20px;
  width: 100%;
}
label, input{
  height: 50px;
  margin-bottom: 0;
}
textarea{
  height: 150px;
}
label{
  border:0;
  text-align: left;
  color:  #0e2e4a;
  text-transform: uppercase;
  padding-top: 15px;
  margin-bottom: 0px !important;
  font-family: 'Kanit', sans-serif;
  font-weight: 200;
}
input, textarea{
  font-family: 'Oxygen', sans-serif;
  font-size: 0.8rem;
  outline: none;
}
input:focus, textarea:focus{
  border: 1px solid #0e2e4a;
}
.block{
  margin-top: 15px;
}
.map{
  width: 92%;
  height: 500px;
  margin: 35px auto;
}

@media (min-width:900px) {
  input, textarea{
    font-size: 1.5rem;
  }
}



/* contact */

/* footer */
.footer-links{
   font-size: 22px;
   padding: 12px 5px;
   display:inline-block;
   min-width: 75px;
   margin-right: 20px;
}
/* footer */
@media (min-width:1200px) {
  .btn{
    margin-top: 5px;
  }
}

@media (max-width:1200px) {
  .nav-item{
    margin: 0 10px;
  }
  .carousel-item img{
    width: 100vw;
    height: 50vh;
    object-fit: cover;
  }
  .type-section > div{
    padding: 50px 100px 50px;
  }
  .wrapper2{
    padding: 50px 100px;
  }
}

@media (max-width:992px){
  .banner .btn{
    margin-top: 25px;
  }
  .type-section > div{
    padding: 50px 50px 50px;
  }
  .type-section img{
	width:100%;
    margin-top: 15px;
  }
  .wrapper2{
    padding: 50px 50px;
  }
}

@media (max-width:576px) {
  .navbar-brand{
    font-size: 1rem;
  }
  .navbar-brand > img{
    max-width: 70px;
  }
  .type-section > div{
    padding: 50px 25px 50px;
  }


  .wrapper2{
    padding: 10vh 20vw;
  }
  .holder-img{
    height: 20vh;
  }
}


/*mobile Version*/)
@media (max-width: 375px) {
  .navbar-brand{
    margin: 0 8px;
  }
  h1{
    font-size: 1.5rem;
  }
  body{
    font-size: 1rem;
  }
  .wrapper2{
    padding: 50px 50px;
  }
  .contact-form{
    padding: 50px 20px;
  }
  .info-container2{
    margin: 25px;
  }
  .info-container2 p{
    font-size: 1rem;
  }

}



@media (max-width: 300px) {
  .wrapper{
    padding: 50px 20px;
  }
  .type-section > div{
    padding: 50px 20px 50px;
  }
  .wrapper2{
    padding: 50px 25px;
  }
}
@media (min-height:1000px) {
  .holder-img{
    height: 15vh;
  }
}
@media (min-height:1300px) {
  .type-section img{
    height: 40vh;
    width: 35vw;
  }
  .holder-img{
    height: 10vh;
  }
}


.navbar.auto-height {
  height: auto;
}

.carousel-section {
  margin-top: 4.2em;
}

.hidden {
  display: none !important;
}

.no-text-decoration:hover,
.no-text-decoration {
  text-decoration: none;
}



.d-flex {
  display: flex;
}
.justify-content-end {
  justify-content: flex-end;
}

.contact-us {
  margin-top: 2em;
  margin-bottom: 2em;
}

@media (min-height:900px) {
  .contact-us {
    margin-top: 10em;
    margin-bottom: 7em;
  }
}

.text ol li {
	margin-left: 25px;
}

.text-black {
  color: #000;
}