/* CSS Document */

/* @import url("fonts.css"); */

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* 
font-family: 'Pacifico', cursive;
font-family: 'Poppins', sans-serif; 
Thin 100
Extra-light 200
Light 300
Regular 400
Medium 500
Semi-bold 600
Bold 700 
*/


/* https://xd.adobe.com/view/3ecc87d8-3295-49c4-a27f-8f52eff5d2f6-6b9f/ */


/* html5doctor.com/html-5-reset-stylesheet/ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }




/* root */
:root{
  --white: #fff;
  --black: #000;
  --primary: #127B8C; 
  --secondary: #EB3E7A;

  --font-header: 'Pacifico', sans-serif;;

  --t-header: 50px;
  --t-detail: 24px;
}
@media (max-width: 1599px) {
  :root {
    --t-header: 44px;
    --t-detail: 20px;
  }
}
@media (max-width: 991px) {
  :root {
    --t-header: 40px;
  }
}
@media (max-width: 576px) {
  :root {
    --t-header: 34px;
    --t-detail: 18px;
  }
}



/* -- CUSTOM CSS -- */
html, body {width:100%; height:100%; padding:0px; margin:0px}

body{ 
	background-color:#F8F4EA; overflow-x: hidden;
}
body{ font-family: 'Poppins', sans-serif; font-size:100%; font-weight:300; color:var(--black); text-decoration:none; }
img {
	border:0px;
}
.img-responsive { display: block; height: auto; max-width: 100%; }

a,
a:hover{
  text-decoration:none;
  color: inherit;
  outline:0; transition: all 0.3s ease;
}
a:focus {
  text-decoration:none;
  outline:0;
}

.btn.focus, .btn:focus{
	outline:0;
	box-shadow: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none;
}
input,
select,
textarea{
  background-clip: padding-box;
}




.div-container{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .div-container, .div-container--fluid{
    max-width: 540px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .div-container, .div-container--fluid{
    max-width: 750px;
  }
  .div-container--fluid{ max-width: 100%; padding: 0; }
}

@media (min-width: 992px) {
  .div-container{
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .div-container {
    max-width: 1230px;
  }
}
@media (min-width: 1600px) {
  .div-container {
    max-width: 1390px;
  }
}




section{ position: relative; overflow-x: hidden; }
.page-section{ padding: 50px 0; }

.div-detail{ max-width: 1009px; width: 80%; margin: 0 auto; text-align: center; }


p{ font-size: var(--t-detail); line-height: 1.5; }

.div-title{ font-family: var(--font-header); font-size: var(--t-header); color: var(--primary); margin-bottom: 30px; }

.txt-white{ color: var(--white); }


@media (max-width: 576px) {

  .page-section{ padding: 30px 0; }
  .div-title{ margin-bottom: 20px; }

}




.btn{ font-size: 20px; font-weight: bold; padding: 15px 30px; }
.btn--secondary{ background-color: var(--secondary); color: var(--white); border: 1px solid var(--secondary); }

.btn:hover{ background-color: var(--white); color: var(--secondary); }

@media (max-width: 1599px) {

  .btn{ font-size: 16px; padding: 12px 25px; }

}
@media (max-width: 1199px) {

  .btn{ padding: 10px 25px; }

}
@media (max-width: 576px) {

  .btn{ font-size: 14px; }

}


/**********************************************************/
/************************** nav ***************************/
/**********************************************************/

.divnav-header{ position: absolute; top: 0; left: 0; width: 100%; padding: 40px 80px 0; z-index: 99; }
.divnav{ display: flex; justify-content: space-between; align-items: center; }
.divnav--menu{ position: absolute; left: 50%; transform: translateX(-50%); }
.divnav--menu ul{ display: flex; justify-content: center; align-items: center; gap: 50px; }
.divnav--menu ul li a{ display: block; font-size: 22px; line-height: 1.5; font-weight: 600; border-bottom: 4px solid transparent; }
.divnav--menu ul li a:hover, .divnav--menu ul li a.active{ border-color: var(--secondary); }


.scrolDisabled{
  /* overflow: hidden;
  position: fixed; */
}


@media (max-width: 1599px){

  .divnav--logo img{ width: 200px; }
  .divnav--menu ul li a{ font-size: 20px; }

}
@media (max-width: 1199px){

  .divnav-header{ padding: 30px 50px; }
  .divnav--logo img{ width: 180px; }
  .divnav--menu ul li a{ font-size: 18px; }

}
@media (max-width: 991px){

  .divnav-header{ padding: 20px 30px; }
  .divnav--logo img{ width: 130px; }
  .divnav--menu ul{ gap: 30px;  }
  .divnav--menu ul li a{ font-size: 16px; }

}
@media (max-width: 767px){

  .divnav-header{ padding: 10px 20px; position: fixed; background-color: var(--white); box-shadow: 0px 4px 22px rgba(0, 0, 0, 0.06); }
  .divnav--logo img{ width: 60px; }

  .divnav--menu{ display: none; }
  .divnav--book{ display: none; }
  .divnav--menu ul{ flex-direction: column; }

  .divnav-header.navOpen{ height: 100%; }
  .divnav-header.navOpen .divnav{ flex-direction: column; align-items: flex-start; }
  .divnav-header.navOpen .divnav--menu{ display: block; position: relative; left: auto; transform: translateX(0); width: 100%; margin: 30px auto; }
  .divnav-header.navOpen .divnav--book{ display: block; width: 100%; text-align: center; }


#nav-icon1 {
  width: 30px;
  height: 30px;
  position: fixed;
  margin: 0;
  top: 15px;
  right: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 1005;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 30px;
  background: var(--primary);
  border-radius: 10px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 5px;
}

#nav-icon1 span:nth-child(2) {
  top: 14px;
}

#nav-icon1 span:nth-child(3) {
  top: 23px;
}

#nav-icon1.open span:nth-child(1) {
  top: 14px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  right: -30px;
}

#nav-icon1.open span:nth-child(3) {
  top: 14px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
  

}


/**********************************************************/
/************************* fooer **************************/
/**********************************************************/

.div-fooer{ background-color: var(--primary); }

.imgfooter{ line-height: 0; margin-bottom: -1px; }
.imgfooter img{ width: 100%; }

.footer-detail{ display: flex; justify-content: space-between; color: var(--white); padding-top: 60px; padding-bottom: 100px; }

.footer--logo img{ width: 360px; }

.footer-address{ width: 340px; }
.footer-address h3{ font-size: 30px; line-height: 1.4; font-weight: 500; margin-bottom: 10px; }
.footer-address p{ font-size: 24px; margin-bottom: 20px; }

.ft-icon{ margin-bottom: 20px;}
.ft-icon a{ display: flex; align-items: center; gap: 10px; font-size: 24px; }
.ft-icon a.tel{ font-size: 26px; font-weight: 500; }
.ft-icon i img{ filter: invert(99%) sepia(30%) saturate(0%) hue-rotate(246deg) brightness(108%) contrast(100%); }
.ft-icon a:hover{ color: var(--secondary); }
.ft-icon a:hover i img{ filter: invert(34%) sepia(100%) saturate(2164%) hue-rotate(317deg) brightness(96%) contrast(91%); }

.ft--social{ display: flex; gap: 30px; align-items: center; }

.icn-tel{ width: 20px; }
.icn-mail{ width: 23px; }

.copyright{ padding: 25px 0; font-size: 18px; line-height: 1.4; color: var(--white); border-top: 1px solid rgba(255, 255, 255, 0.2); }


@media (max-width: 1599px){

  .footer--logo img{ width: 300px; }
  
  .footer-address h3{ font-size: 26px; }
  .footer-address p,
  .ft-icon a{ font-size: 18px; }
  .ft-icon a.tel{ font-size: 24px; }

  .copyright{ padding: 20px 0; font-size: 16px; }

}
@media (max-width: 1199px){

  .footer--logo img{ width: 200px; }

  .footer-address h3{ font-size: 22px; }
  .footer-address p,
  .ft-icon a{ font-size: 16px; }
  .ft-icon a.tel{ font-size: 20px; }

  .icn-tel{ width: 18px; }
  .icn-mail{ width: 20px; }

  .copyright{ padding: 15px 0; font-size: 14px; }

}
@media (max-width: 991px){

  .footer--logo img{ width: 120px; }

  .footer-detail{ padding-top: 50px; padding-bottom: 50px; }
  .footer-address{ width: 240px; }
  .footer-address h3{ font-size: 20px; }
  .footer-address p,
  .ft-icon a{ font-size: 15px; }

  .copyright{ font-size: 12px; }

}
@media (max-width: 767px){

  .footer-detail{ padding-top: 30px; padding-bottom: 30px; flex-wrap: wrap; }
  .footer--logo{ width: 100%; margin-bottom: 30px; text-align: center; }
  .footer--logo img{ width: 150px; }

}
@media (max-width: 576px){

  .imgfooter img{ object-fit: cover; object-position: 10%; height: 100px; }

  .footer-detail{ padding: 0; flex-direction: column; text-align: center; max-width: 280px; margin: 0 auto; }
  .footer-address{ width: 100%; }

  .copyright{ text-align: center; }

}




/**********************************************************/
/**********************************************************/


/*
 *  Owl Carousel - nav arrow
*/
.owl-carousel .owl-stage-outer{ z-index: 9; }
.owl-carousel .owl-nav{ 
  position:absolute; width:100%; top: 50%; height:40px; margin-top: -20px;
}
.owl-carousel .owl-nav button.owl-prev{
  background: url('../images/arrow/arrow-left.svg') no-repeat 0 0; background-size: cover;
  text-indent:-9999px;
  width:21px;
  height:40px;
  left: 0;
  position:absolute;z-index:101;
  border-radius: 0;
  padding: 0;
  margin:0;
}
.owl-carousel .owl-nav button.owl-next{
  background: url('../images/arrow/arrow-right.svg') no-repeat 0 0; background-size: cover;
  text-indent:-9999px;
  width:21px;
  height:40px;
  right:0;
  position:absolute;z-index:101;
  border-radius: 0;
  padding: 0;
  margin:0;
}
.owl-carousel .owl-nav button.owl-prev:hover{
  background: url('../images/arrow/arrow-left.svg') no-repeat 0 0; background-size: cover;
}

.owl-carousel .owl-nav button.owl-next:hover{
  background: url('../images/arrow/arrow-right.svg') no-repeat 0 0; background-size: cover;
}

/* .owl-theme .owl-nav .disabled{ display: none; } */

.owl-carousel.off {
  display: block;
}

.owl-theme .owl-dots{ width: 100%; text-align: center; z-index: 9; }
.owl-theme .owl-dots{ margin-top: 30px; }
.owl-theme .owl-dots .owl-dot span{ background: #9AA5A7; width: 8px; height: 8px; border-radius: 50%; margin: 5px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background: var(--primary); }
.owl-theme .owl-nav.disabled + .owl-dots{ margin-top: 30px; }


/*  */
.slider-brand .owl-carousel .owl-nav button.owl-prev{ left: 300px; }
.slider-brand .owl-carousel .owl-nav button.owl-next{ right: 300px; }

@media (max-width: 1499px){

  .slider-brand .owl-carousel .owl-nav button.owl-prev{ left: 250px; }
  .slider-brand .owl-carousel .owl-nav button.owl-next{ right: 250px; }

}
@media (max-width: 1199px){

  .slider-brand .owl-carousel .owl-nav button.owl-prev{ left: 150px; }
  .slider-brand .owl-carousel .owl-nav button.owl-next{ right: 150px; }

}
@media (max-width: 991px){

  .slider-brand .owl-carousel .owl-nav button.owl-prev{ left: 110px; }
  .slider-brand .owl-carousel .owl-nav button.owl-next{ right: 110px; }

}




/**********************************************************/
/**********************************************************/

.section-motto{ background-color: #E2F4FB; background-image: url('../images/motto/bg.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; padding-top: 200px; }


.div-el1{ position: relative; width: 100%; margin-top: 60px; }
.boximg-el{ position: absolute; overflow: hidden; }
.img-el-watermelon{ left: -150px; }
.img-el-tourist{ bottom: 0; left: -50px; line-height: 0; z-index: 5; }
.img-el-glasses{  right: 0; }
.img-el-starfish{ bottom: 50px; left: 60%; }
.img-el-vanIsland{ text-align: right; margin-right: -60px; }

@media (max-width: 1599px) {

  .img-el-watermelon{ left: -100px; }
  .img-el-watermelon img{ width: 200px; }
  .img-el-tourist img{ width: 650px; }
  .img-el-glasses img{ width: 120px; }
  .img-el-starfish img{ width: 90px; }
  .img-el-vanIsland{ margin-right: -40px; }
  .img-el-vanIsland img{ width: 700px; }

}
@media (max-width: 1199px) {

  .img-el-watermelon{ left: -45px; }
  .img-el-watermelon img{ width: 170px; }
  .img-el-tourist{ left: -20px; }
  .img-el-tourist img{ width: 500px; }
  .img-el-glasses img{ width: 100px; }
  .img-el-starfish{ bottom: 30px; }
  .img-el-starfish img{ width: 70px; }
  .img-el-vanIsland img{ width: 550px; }

}
@media (max-width: 991px) {

  .section-motto{ padding-top: 150px; }

  .img-el-watermelon{ left: -10px; }
  .img-el-watermelon img{ width: 120px; }
  .img-el-tourist{ left: -10px; }
  .img-el-tourist img{ width: 400px; }
  .img-el-glasses img{ width: 70px; }
  .img-el-starfish{ bottom: 20px; }
  .img-el-starfish img{ width: 50px; }
  .img-el-vanIsland{ margin-right: -25px; }
  .img-el-vanIsland img{ width: 450px; }

}
@media (max-width: 767px) {

  .section-motto{ padding-top: 100px; }

  .img-el-tourist img{ width: 270px; }
  .img-el-vanIsland img{ width: 350px; }

}
@media (max-width: 576px) {

  .div-el1{ padding-bottom: 50px; }
  .img-el-watermelon img{ width: 100px; }
  .img-el-tourist img{ width: 200px; }
  .img-el-glasses{ top: -50px; }
  .img-el-vanIsland img{ width: 250px; }

}
@media (max-width: 320px) {

  .img-el-watermelon img{ width: 70px; }
  .img-el-tourist img{ width: 180px; }
  .img-el-vanIsland img{ width: 200px; }

}

/**********************************************************/
/**********************************************************/

.section-about{ padding-bottom: 250px; }
.divbg-about{ background: transparent linear-gradient(237deg, #DFD05E 0%, #117B8C 100%) 0% 0% no-repeat padding-box; border-radius: 35px; padding: 60px 90px; position: relative; z-index: 9; }


.about--content{ display: flex; justify-content: space-between; }

.about--detail{ width: calc(100% - 620px); padding: 50px; }

.about--img-van{ position: absolute; bottom: -200px; left: 80px; }
.about--img-van img{ width: 535px; }
.about--img-bag{ position: absolute; bottom: -250px; right: -250px; }
.about--img-bag img{ width: 550px; }

.about--img{ width: 620px; display: flex; flex-wrap: wrap; gap: 45px; }
.about--img img{ border: 8px solid var(--white); }
.about--img1{ width: 220px; margin-left: 80px; margin-top: 60px; }
.about--img2{ width: 275px; }
.about--img3{ width: 300px; margin-top: -45px; }
.about--img4{ width: 215px; }



@media (max-width: 1599px) {

  .section-about{ padding-bottom: 200px; }
  .about--img-van{ left: 50px; }
  .about--img-van img{ width: 435px; }
  .about--img-bag{  bottom: -200px; right: -200px; }
  .about--img-bag img{ width: 450px; }

}
@media (max-width: 1199px) {

  .section-about{ padding-bottom: 150px; }
  .divbg-about{ padding: 50px; border-radius: 30px; }
  .about--img-van{ bottom: -150px; }
  .about--img-van img{ width: 335px; }
  .about--img-bag{  bottom: -150px; right: -100px; }
  .about--img-bag img{ width: 320px; }

  .about--detail{ width: calc(100% - 475px); padding: 30px; }
  
  .about--img{ width: 475px; gap: 30px; }
  .about--img1{ width: 170px; margin-left: 50px; margin-top: 30px; }
  .about--img2{ width: 225px; }
  .about--img3{ width: 220px; margin-top: -45px; }
  .about--img4{ width: 165px; }

}
@media (max-width: 991px) {

  .about--img-van{ left: 0; }
  .about--img-van img{ width: 250px; }
  .about--img-bag{  bottom: -130px; right: -50px; }
  .about--img-bag img{ width: 250px; }

  .about--content{ flex-direction: column; flex-wrap: wrap; }
  .about--detail{ width: 80%; padding: 0; margin: 0 auto 40px; }
  
  .about--img{ width: 100%; gap: 30px; }
  .about--img1{ width: 40%; margin-left: 10%; }
  .about--img2{ width: 45%; }
  .about--img3{ width: 50%; margin-top: -30px; }
  .about--img4{ width: 40%; }

}
@media (max-width: 767px) {
  
  .about--img{ gap: 20px; }
  .about--img img{ border: 5px solid var(--white); }
  .about--img3{ margin-top: -20px; }

}
@media (max-width: 576px) {

  .section-about{ padding-bottom: 100px; }
  
  .about--img-van{ bottom: -80px; }
  .about--img-van img{ width: 150px; }
  /* .about--img-bag{ bottom: -80px; right: -20px; } */
  .about--img-bag{ bottom: auto; right: -20px; top: 180px; }
  .about--img-bag img{ width: 150px; }

  .divbg-about{ padding: 40px 20px; border-radius: 20px; }
  .about--detail{ width: 90%; margin: 0 auto 30px; }
  .about--img{ gap: 20px 0; justify-content: space-between; }
  .about--img1{ margin-top: 15px; }
  .about--img3{ margin-top: -20px; }
  .about--img4{ margin-right: 5%; }

}


/**********************************************************/
/**********************************************************/

.slider-brand{ margin-top: 50px; }
.brand--img{ padding: 30px; padding-bottom: 0; }
.brand--btn{ margin-top: 30px; text-align: center; }


.hide{ display: none; }

@media (max-width: 991px) {
  
  .slider-brand{ margin-top: 30px; }

}
@media (max-width: 576px) {
  
  .slider-brand{ margin-top: 20px; }

}


/**********************************************************/
/**********************************************************/

.section-information{ padding-top: 50px; padding-bottom: 60px; }
.divbg-information{ background-color: rgba(18, 123, 140, 0.1); padding: 80px 0; border-radius: 20px; }

.hr-line{ width: 100%; height: 1px; background-color: rgba(18, 123, 140, 0.2); margin: 50px 0; }

/* form */
.div-from{ max-width: 620px; width: 100%; margin: 50px auto 0; }
.div-from .input-group-text{ background-color: transparent; border: 0; padding-left: 0; }
.div-from .input-group-text img{ filter: invert(36%) sepia(94%) saturate(426%) hue-rotate(140deg) brightness(89%) contrast(90%); width: 25px; max-height: 20px; }

.div-from .input-group-text.icn-img2{ padding-left: 15px; }
.div-from .input-group-text.icn-img2 img{ width: 40px; }

.div-from .input-group > .form-control:not(:first-child), 
.div-from .input-group > .custom-select:not(:first-child){ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.div-from .form-control{ font-size: 16px; font-weight: 300; color: var(--black); height: calc(1.5em + 2rem + 2px); border-radius: 10px; border: 0; }

.form-control::-webkit-input-placeholder {
  color: var(--black);
}
.form-control::-moz-placeholder {
  color: var(--black);
}
.form-control:-ms-input-placeholder {
  color: var(--black);
}
.form-control::-ms-input-placeholder {
  color: var(--black);
}
.form-control::placeholder {
  color: var(--black);
}

select.select {
  outline: none;
  display: block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  background: none;
  background-color: var(--white);
  background-image: url(../images/icon/icn-select.svg); 
  background-repeat: no-repeat;
  background-position: right .75rem center;
  /* background: var(--white) url(../images/icon/icn-select.svg) right .75rem center/8px 10px no-repeat; */
  font-size: 16px; font-weight: 300; color: var(--black);
  height: calc(1.5em + 2rem + 2px); width: 100%;
  border-radius: 10px; border: 0;
}
select.select:focus{ box-shadow: none; }

.form--btn{ text-align: center; margin-top: 40px; }

.div-from .form-control:disabled, 
.div-from .form-control[readonly]{ background-color: var(--secondary); color: var(--white);}


 
@media (max-width: 991px){

  .divbg-information{ padding: 50px 0; }

}
@media (max-width: 767px){

  .div-from .input-group-text.icn-img2{ padding-left: 0; }
  .div-from .input-group-text.icn-img2 img{ width: 25px; }

}
@media (max-width: 576px){

  .section-information{ padding-top: 30px; }

}

/**********************************************************/
/**********************************************************/


input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}



.wpcf7-form-control-wrap{ flex: 1 1 auto; width: 1%; }
.wpcf7-not-valid-tip{ margin-top: 10px; margin-left: 5px; text-align: left; }
.wpcf7-spinner{ position: absolute; }
.wpcf7 form .wpcf7-response-output{ border: 0; }

#div-end,#div-car,#div_price{
  display: none;
}