:root {
  color-scheme: light only;
  --black: #111111;
  --white: #eeeeee;
  --lightgrey: #e4e4e4;
  --peach: #FBEFE3;
  --active: #4CA2A8;
  --darkgreen: #164266;;
  --lightgreen: #87A79C;

  --pink: #F193AE;
  --orange: #F27F27;
  --green: #A2B968;
  --yellow: #FFC451;
  --cyan: #4CA2A8;
  --border_s: 9px;
  --border_l: 12px;
  --txt_s: 14px;
  --txt_xs: 12px;
}

/*---------------------------------------
   Animation
-----------------------------------------*/
@keyframes slidein_top{
	from {transform: translateY(-100vh);}
    to {transform: translateY(0);}
}

@keyframes slidein_right{
	from {transform: translateX(300px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
}

@keyframes dropdown{
  0% {transform: translateY(-280px);}
  75% {transform: translateY(15px);}
  100% {transform: translateY(0px);}
}

@keyframes swing{
  0% {transform: rotate(15deg);}
  100% {transform: rotate(-15deg);}
}

@keyframes rotate{
  0% {transform: rotate(-270deg);}
  75% {transform: rotate(15deg);}
  100% {transform: rotate(0);}
}

/*---------------------------------------
   COMMON
-----------------------------------------*/
.no_mp{
  margin: 0 !important;
  padding: 0 !important;
}

.w100{
  width: 100%;
  max-width: 100vw;
}

.w90{
  padding-left: 25px !important;
  padding-right: 25px !important;
}

@media only screen and (max-width: 500px) {
  .w90{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.h100{
  height: 100%;
  max-height: 100vh;
  max-height: 100svh;
}

.pside{
  padding: 0 5%;
}

.a_ctr{
  display: flex;
  align-items: center !important;
}

.j_ctr{
  display: flex;
  justify-content: center !important;
}

.j_sa{
  display: flex;
  justify-content: space-around;
}

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

.a_fs{
  display: flex;
  align-items: flex-start;
}
.j_fs{
  display: flex;
  justify-content: flex-start;
}
.a_fe{
  display: flex;
  align-items: flex-end;
}
.j_fe{
  display: flex;
  justify-content: flex-end;
}

.vertical{
  flex-direction: column;
  gap: .25rem;
}
.t_ctr{
  text-align: center;
}

.smallgap{
  gap: 1rem;
}

.brd_l{
  border-radius: var(--border_l) !important;
}

.brd_s{
  border-radius: var(--border_s) !important;
}

.m_top{
  margin-top: 90px;
}

.fwrap{
  flex-wrap: wrap;
}

.scrollY{
  overflow-y: scroll;
  overflow-x: hidden;
}

.scrollX{
  overflow-x: scroll;
  overflow-y: hidden;
}

.ovfhide{
  overflow: hidden;
}

.snap_ctr{
  scroll-snap-align: center;
}

.screensize{
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}
.wrapdown{
  max-width: 100%;
  flex-wrap: wrap;
  gap: .35rem;
}
.hide{
  display: none;
}
/*---------------------------------------
   FONT    
-----------------------------------------*/
h1{
  font-weight: 900;
  font-size: 25px;
  line-height: 25px;
  text-wrap: pretty;
  margin: 0;
}

h2{
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  text-wrap: pretty;
  margin: 0;
}

h5{
  font-size: 16px;
  line-height: 16px;
  text-wrap: pretty;
  margin: 0;
}

h6, label{
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  text-wrap: pretty;
  margin: 0;
}

p{
  font-size: var(--txt_s);
  line-height: 18px;
  text-wrap: pretty;
}

.title{
  position: relative;
  width: 100%;
}

/*---------------------------------------
   Normalize    
-----------------------------------------*/
html{
	scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body{
  position: relative;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: var(--white);
  color: var(--darkgreen);
  font-size:  var(--txt_s);
  font-family: "DM Sans", sans-serif;
  user-select: none;
}

section{
  margin: 0;
  padding: 0;
}

.maincontainer{
  display: flex;
  width: 1440px;
  height: 100%;
  padding: 0 5%;
  margin: auto;
}

ul, li, a, button{
  color: unset;
  list-style: none;
  text-decoration: none;
  border: none;
  background: none;
}

input{
  outline: none;
  border: none;
  padding: 0 1rem;
}

.modal-content{
  background: none;
  border: none;
}

:focus, :focus-within, :focus-visible, :active{
  border: unset;
  border-radius: 0;
  outline: none;
  box-shadow: unset !important;
}

table{
  max-width: 500px;
  border: none;
}

tbody, td, tfoot, th, thead, tr {
  border: none;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  input, textarea, select {
      font-size: 16px;
  }
}

/*---------------------------------------
   Scroll Effect       
-----------------------------------------*/
.hidden{
  opacity: 0;
  transition: all 1s;
}

.show{
  opacity: 1;
}

.fade:not(.show) {
  opacity: 0;
  display: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 3.5px;
  display: none;
}
::-webkit-scrollbar-track {
  opacity: 0;
  background:  rgba(226, 226, 226,.5);
}
::-webkit-scrollbar-thumb {
  background: var(--lightgreen);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--active);
}

/*---------------------------------------
   ICON    
-----------------------------------------*/
.icon_contact{
  display: flex;
  min-width: 15px;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
}
/*---------------------------------------
   Element        
-----------------------------------------*/
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #0d415a 30%, var(--black));
  background: url(../img/mapthumb.png);
  z-index: 99999;
  display: flex;
}

#loadingSpinner img{
  width: 100px; /* Adjust the size of the loading GIF */
  height: auto;
}
/* Progress bar container */
.progress-container {
  max-width: 80vw;
  width: 450px;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}

/* Progress bar */
.progress-bar {
  height: 3px;
  width: 0;
  background-color: var(--cyan);
  transition: width 0.2s ease;
}

.wavebg{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #035c6f;
  background-image: linear-gradient(to top, #027987 30%, #0d415a);
}

@keyframes wavebg{
  0% {background-position: 0;}
  100% {background-position: -450px;}
}

#loadingOverlay::after, .wavebg::after{
  content: "";
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(6, 37, 65, 0.65), rgba(6, 37, 65, 0) 15%, rgba(6, 37, 65, 0) 75%, rgba(6, 37, 65, 0.65));
  z-index: 995;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.ketam.hidden{
  position: fixed;
  z-index: 35;
  transform-origin: top right;
  top: -20px;
  right: 5%;
  animation: dropdown .5s ease forwards;
  scale: .6;
  transition: all .35s ease-in;
  opacity: 100%;
  cursor: pointer;
}
.ketam:hover {
  -webkit-filter: drop-shadow(0 0 6px var(--white));
  filter: drop-shadow(0 0 6px var(--white));
}

.ketam::before{
  content: "";
  position: absolute;
  transform-origin: top right;
  top: 5px;
  right: 0;
  width: 54px;
  height: 57px;
  background: url(../img/crab_hand.png) top right no-repeat;
  background-size: contain;
}
.ketam::after{
  content: "";
  position: absolute;
  transform-origin: 141px 19px;
  top: 36px;
  right: -20px;
  width: 185px;
  height: 150px;
  background: url(../img/crab.png) top right no-repeat;
  background-size: contain;
  animation: swing 1s ease-in-out infinite alternate;
}

.ketam.active, .ketam.dropped{
  top: calc(100vh + 2px);
  transition: all .35s ease-in;
}

.divider {
  width: 110%;
  margin: 15px 0;
  height: 1px;
  border-top: 1px solid var(--lightgreen);
}

.note{
  font-size: 12px;
  line-height: 12px;
  /* color: var(--lightgreen); */
  text-align: center;
}

.btn_fullscreen {
  position: fixed;
  z-index: 45;
  bottom: 100px;
  right: 5%;
  padding: 5px;
  background-color: var(--white);
  cursor: pointer;
}
.btn_fullscreen:hover {
  background-color: var(--active);
}
.btn_fullscreen span{
  width: 20px;
  height: 20px;
  -webkit-mask-image:url(../img/icon/btn-fullscreen.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url(../img/icon/btn-fullscreen.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background: var(--darkgreen) !important;
}
.btn_fullscreen:hover span{
  background: var(--white) !important;
}
.copyright{
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  line-height: 9px;
  color: var(--white);
  position: absolute;
  bottom: 65px;
  left: 5%;
  z-index: 999;
  max-width: 80vw;
}
@media screen and (max-width: 500px) {
  .copyright{
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
}
.no-interaction {
    pointer-events: none !important; /* Prevents all mouse interactions */
}
.no-interaction *{
  pointer-events: none !important; /* Prevents all mouse interactions */
}
/*---------------------------------------
   NAVBAR        
-----------------------------------------*/
.logowrapper{
  margin: 25px 0;
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}
.logo{
  pointer-events: all;
  color: var(--white);
}

.navigation{
  background-color:  var(--white);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  align-items: flex-start;
  z-index: 9999 !important;
}

.navbar-nav{
  width: 100%;
  height: 100%;
  max-width: 750px;
  margin: 0 5%;
  gap: .35rem;
}

.nav-item{
  padding-top: 2px;
  position: relative;

}
.nav-item:not(.ketam){
  height: 100%;
  width: 100%;
}

.nav-link{
  width: 100%;
  font-size: 0;
  z-index: 5;
  display: flex;
  position: relative;
}
.nav-link img{
  width: 100%; 
  height: 100%;
  min-width: 45px;
  max-height: 35px;
  -webkit-filter: saturate(0) contrast(100) brightness(.65);
  filter: saturate(0) contrast(100) brightness(.65);
  transition: scale .3s ease;
}
.nav-link::before{
  content: "";
  position: absolute;
  width: 0; 
  height: 3px;
  top: -2px;
  background: var(--pink);
  transition: .3s ease;
}



.nav-item:hover .nav-link img, .nav-item.active .nav-link img{
  scale: 1.25;
  -webkit-filter: unset;
  filter: unset;
  /* filter: saturate(0) contrast(100) brightness(100); */
  transition: scale .3s ease;
}
.nav-link:hover::before, .nav-item.active .nav-link::before{
  width: 100%; 
  transition: .3s ease;
}
.nav-item .food:hover::before, .nav-item.active .food::before{
  background: var(--orange);
}
.nav-item .hostel:hover::before, .nav-item.active .hostel::before{
  background: var(--cyan);
}
.nav-item .temple:hover::before, .nav-item.active .temple::before{
  background: var(--yellow);
}
.nav-item .facility:hover::before, .nav-item.active .facility::before{
  background: var(--green);
}

@media screen and (max-width: 768px) {
  .navbar-nav{
    flex-direction: row !important;
  }
}

.tnc_nav{
  background-color: var(--active);
  padding: 10px 5%;
}

.tnc_nav .nav-item{
  width: unset;
}
.tnc_nav .nav-link{
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
}
.tnc_nav .nav-link:hover, .tnc_nav .nav-link.active{
  color: var(--darkgreen);
}
.tnc_nav .nav-link::before{
  content: none;
}
.hamburgerbtn{
  border: none;
  color: white;
}
.hamburgerbtn:hover{
  color: var(--darkgreen);
}

@media screen and (max-width: 768px) {
  .navbar-collapse{
    opacity: 0;
  }
  .navbar-collapse.show{
    height: fit-content;
    opacity: 1;
    transition: all ease;
  }
  .tnc_nav .navbar-nav{
    margin-top: 15px;
    flex-direction: column !important;
  }
}

/*---------------------------------------
   Topbar        
-----------------------------------------*/
.topbar{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-wrap: nowrap;
  padding: 25px 5%;
  z-index: 50;
  pointer-events: none;
}

.topbarbtnwrapper{
  max-width: fit-content;
  display: flex;
}

.topbarbtn{
  width: 40px !important;
  height: 40px;
  background-color: white;
  pointer-events: all;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .15);
  /* -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .15));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .15)); */
}

.topbarbtn img{
  -webkit-filter: saturate(0) contrast(100) brightness(.75);
  filter: saturate(0) contrast(100) brightness(.75);
}
.topbarbtn:hover img{
  -webkit-filter: saturate(0) brightness(100);
  filter: saturate(0) brightness(100);
} 
@media screen and (max-width: 500px) {
  .topbarbtnwrapper {
    gap: 0.5rem !important;
  }
}

.btn_back:hover, .btn_contact:hover, .btn_contact.active{
  color: white;
  background-color: var(--active);
  cursor: pointer;
}



.btn_clear{
  position: sticky;
  width: 100%;
  color: var(--lightgreen);
  font-size:  var(--txt_s);
  padding: 10px 15px;
  gap: .5rem;
  margin: 0;
}

.btn_clear:hover{
  background: var(--white);
  color: var(--active) !important;
}
.btn_close{
  color: var(--lightgreen);
  font-size:  var(--txt_s);
  padding: 15px;
  margin: 0;
}
.btn_clear span, .btn_close span{
  all: unset;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  -webkit-mask-image:url(../img/icon/btn-close.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url(../img/icon/btn-close.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--lightgreen) !important;
  transition: all .35s !important;
}
.btn_clear:hover span{
  background: var(--active) !important;
}
.btn_close span{
  width: 30px !important;
  height: 30px !important;
  background: var(--white) !important;
}
.btn_close:hover span{
  background: var(--white) !important;
  transform: rotate(180deg);
  transition: all .35s !important;
}

.btn_intro{
  position: absolute;
  z-index: 55;
  top: 15px;
  right: -150px;
  transform-origin: top right;
  transition: right .35s ease;
}
.btn_intro::before{
  content: "";
  position: absolute;
  transform-origin: top right;
  width: 235px;
  height: 70px;
  background: url(../img/icon/boat_ticket.png) no-repeat center;
  background-size: contain;
  opacity: 0;
}
.btn_intro img, .btn_intro::before{
  box-shadow: -2px 3px 2px rgba(80, 76, 100, 0.75);
  /* -webkit-filter: drop-shadow(-2px 3px 2px rgba(80, 76, 100, 0.75));
  filter: drop-shadow(-2px 3px 2px rgba(80, 76, 100, 0.75)); */
}
.btn_intro:hover, .btn_intro.active{
  right: -90px;
  transition: .35s ease;
}

.btn_intro:hover img,.btn_intro.active img{
  rotate: -5deg;
  transition: .35s ease;
}

.searchbarwrapper{
  position: relative;
  display: flex;
  overflow: hidden;
  flex-shrink: 1;
}

.searchbar{
  width: 100%;
  max-width: 200px;
  position: relative;
  height: 40px;
  pointer-events: all;
}
.btn_search{
  height: 100%;
  position: absolute;
  z-index: 1;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: all;
}
.btn_search img{
  -webkit-filter: saturate(0) brightness(2.5);
  filter: saturate(0) brightness(2.5);
}
.btn_search:hover img{
  -webkit-filter: unset;
  filter: unset;
}

/*---------------------------------------
   Sidepanel   
-----------------------------------------*/
.sidepanel.hidden{
  visibility: visible;
  position: absolute;
  width: 100%;
  max-width: 500px;
  height: 100%;
  max-height: 100vh;
  max-height: 100svh;
  right: 0 !important;
  top: -100vh;
  transform-origin: top;
  background-image: linear-gradient(to top, #fcecd7, #fdf8f2 70%);
  background: #efe9d8;
  overflow: hidden;
  transition: all .35s ease-in;
  z-index: 50;
  opacity: 100%;
  pointer-events: all !important;
}

.sidepanel.active{
  top: 0 !important;
  transition: all .35s ease-in;
  pointer-events: all !important;
}

.sidepanel::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 35%;
  background: url(../img/texture/papertexture.png) center no-repeat;
  pointer-events: none;
}
.sidepanel::after {
  content: '';
  position: absolute;
  width: 500px;
  max-width: 100vw;
  bottom: 0;
  right: 0;
  height: 95px;
  background: linear-gradient(to top, #efe9d8, transparent);
  pointer-events: none;
  z-index: 90;
}


/*---------------------------------------
   Filter   
-----------------------------------------*/
.btn_filter span{
  all: unset;
  margin: 0 2px;
  width: 20px;
  height: 20px;
  -webkit-mask-image:url(../img/icon/btn-filter.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url(../img/icon/btn-filter.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--lightgreen) !important;
}
.btn_filter:hover span, .btn_filter.show span{
  background: var(--white) !important;
}

#dropdownFilter{
  position: relative;
  padding: .5rem;
  padding-right: 1.75rem;
  gap: .5rem;
  flex-wrap: nowrap;
  color: var(--lightgreen);
}

#dropdownFilter:hover, #dropdownFilter:focus-within, #dropdownFilter.show{
  color: white;
  background-color: var(--active);
}

#dropdownFilter::after { 
  margin: 0;
  content: "";
  right: .5rem;
  position: absolute;
  width: 8px;
  height: 10px;
  background: url(../img/icon/btn-back.svg) center no-repeat;
  background-size: contain;
  border: unset;
  rotate: 180deg;
  transition: rotate .3s;
}

#dropdownFilter:hover::after, #dropdownFilter:focus-within::after, #dropdownFilter.show::after{
  rotate: 270deg;
  transition: rotate .3s;
  -webkit-filter: brightness(100);
  filter: brightness(100);
}

.dropdown-menu{
  border: none;
  min-width: fit-content;
  width: 250px;
  max-width: 100vw;
  overflow: hidden;
  inset: 5px 0px auto auto !important;
}

.dropdownwrapper {
  width: 100%;
  height: 100%;
  max-height: 50vh;
  overflow-y: scroll;
  position: relative; 
  background: white;
}

.dropdownwrapper::before {
  content: '';
  position: fixed;
  top: 49px;
  left: 0;
  right: 0;
  height: 10px; 
  background: linear-gradient(to bottom, var(--lightgrey), rgba(228, 228, 228, 0));
  opacity: 0; 
  pointer-events: none; 
  z-index: 1; 
  transition: opacity 0.3s;
}

.dropdownwrapper.scrolled::before {
  opacity: 1;
}

@media screen and (max-width: 500px) {
  .dropdown-menu{
    width: 100vw;
    position: fixed !important;
    inset: unset !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 90px;
  }
}

.dropdown-menu span{
  width: 92%;
  height: 5px;
  display: block;
  border-bottom: .5px solid var(--lightgrey);
  margin: 5px auto;
}

.dropdown-title{
  color: var(--darkgreen);
  font-weight: 900;
  padding: 10px 15px;
}

.dropdown-item{
  color: var(--lightgreen) !important;
  font-size:  var(--txt_s);
  padding: 10px 15px;
}

.dropdown-item:active{
  background: none;
}

.form-check{
  min-height: unset;
  gap: .5rem;
  font-weight: 400;
} 

.form-check-input, .form-check-input:focus{
  border: 1px solid var(--lightgrey) !important;
  margin: unset !important;
}

.form-check-input:checked, .form-check-input:target {
  background-color: var(--active);
}



/*---------------------------------------
   Category    
-----------------------------------------*/
#category_title, .title h1{
  word-break: break-word;
}

#category_title.attraction{
  color: var(--pink);
}
#category_title.food{
  color: var(--orange);
}
#category_title.hostel{
  color: var(--cyan);
}
#category_title.temple{
  color: var(--yellow);
}
#category_title.facility{
  color: var(--green);
}

.sub_title * {
  margin-top: 1rem;
  font-size: 20px !important;
  height: 100%;
}

.sidepanelwrapper{
  z-index: 50;
  position: relative;
  height: 100vh;
  height: 100svh;
  transition: all .35s ease;
  pointer-events: none;
}
.sidepanelwrapper:has(.sidepanel.active)::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: all .35s ease;
  transition-delay: 100ms;
}
.sidepanelwrapper:has(.sidepanel.active)::before{
  background: rgba(0, 0, 0, 0.5);
  transition: all .35s ease;
  transition-delay: 100ms;
}

.category_header{
  height: 55px;
  max-height: 55px;
  padding-bottom: 15px;
}

.category_container {
  --top_h: 145px;
  height: calc(100vh - var(--top_h));
  height: calc(100svh - var(--top_h));
  height: calc(100% - var(--top_h));
  padding: 15px 0;
  padding-bottom: 90px !important;
  position: relative;
}

.category_container:not(.intro)::before {
  content: '';
  position: fixed;
  width: 500px;
  max-width: 100vw;
  top: var(--top_h);
  right: 0;
  mix-blend-mode: multiply;
  height: 10px;
  background: linear-gradient(to bottom, var(--lightgrey) 0%, rgba(211, 211, 211, 0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s;

} 

.category_container.scrolled::before {
  opacity: 1;
  transition-delay: 100ms;
  transition: opacity 0.3s;
}

.scrollwrapper {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  height: fit-content;
  min-height: 215px;
  padding: 0 5%;
  padding-bottom: .5rem;
}
.scrollwrapper::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .scrollwrapper::-webkit-scrollbar {
    display: none;
  }
}    

.itemcontainer {
  position: relative;
  min-width: 265px;
  width: 90%;
  max-width: 90vw;
  min-height: 160px;
  height: 100%;
  max-height: 180px;
  aspect-ratio: 3 / 2;
  background-color: var(--white);
  overflow: hidden;
  z-index: 1;
  /* border: 3px solid var(--active); */
  cursor: pointer;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .15);
  /* animation: slidein_right .5s ease-out backwards; */
}
@media screen and (max-width: 500px) {
  .itemcontainer {
    min-height: 165px;
  }
} 

.itemcontainer.small{
  max-width: 80vw;
  min-height: 200px;
  max-height: unset;
}

.item-body{
  position: relative;
  width: 100%;
  padding: 5px 25px;
  padding-bottom: 20px;
  gap: .5rem;
  background-color: white;
  background-image: linear-gradient(to top, #f1e6e6 1%, white 100%);
  z-index: 2;
}
.item-body::before{
  content: "";
  position: absolute;
  bottom: 98%;
  left: 50%;
  transform: translateX(-50%);
  width: 102%;
  height: 100%;
  background: url(../img/photo/wave.svg) bottom no-repeat;
  background-size: contain;
}

.item-img{
  width: 100%;
  bottom: 0;
  position: absolute;
  z-index: -1;
  will-change: transform; /* Improve transition handling in Safari */
  transition: transform .35s ease-in-out;
}

.itemcontainer.small .item-img{
  bottom: unset;
  top: 0;
}

.item-title{
  font-weight: 900;
}

.item-type, .item-descript{
  position: relative;
  font-size: var(--txt_xs);
  font-weight: 400;
  color: var(--lightgreen);
  margin-top: 2.5px;
  line-height: 12px;
}

.item-type{
  padding-left: calc(15px + .25rem);
}

.item-type::before{
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-mask-image: url(../img/icon/icon-location.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url(../img/icon/icon-location.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--lightgreen);
}

.itemcontainer:hover .btn_more{
  right: 30px;
  background-color: var(--active);
  transition: all .35s;
}

.itemcontainer:hover .item-img{
  transform: scale(1.2);
  transition: transform .5s;
  transition-delay: 100ms;
}

.btn_more{
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  padding-right: 15px;
  right: 45px;
  bottom: 20px;
  min-width: 15px;
  min-height: 15px;
  -webkit-mask-image: url(../img/icon/btn-more.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url(../img/icon/btn-more.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--lightgreen);
  transition: all .35s;
}

.ferryinfo{
  flex-wrap: wrap;
  row-gap: .35rem;
}
.infoitem{
  max-width: 100%;
  flex-shrink: 0;
  gap: .35rem;
  line-height: 15px;
}
#transpPhone a:not(:last-child):after {
  content: "";
  margin: 0px 10px 0 12px;
  border-right: 1px solid var(--darkgreen);
}

/*---------------------------------------
   Loctaion-Info    
-----------------------------------------*/
.tab_content.hidden{
  display: none;
  opacity: 0;
  transition: all .3s;
  transition-delay: 100ms;
}
.tab_content, .tab_content.active{
  height: 100%;
  display: block;
  opacity: 1;
  transition: all .3s;
  transition-delay: 100ms;
}
#typeName{
  position: absolute;
  right: 5px;
  top: 0;
}
.btn_socialmedia a{
  height: 40px;
  width: 40px;
  color: var(--white);
  background-color: var(--active);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .15);
  /* -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .15));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .15)); */
}
.btn_googlemap, .btn_submit{
  min-height: 40px;
  padding: 0 25px;
  text-align: center;
  color: var(--white);
  background-color: var(--active);
  font-weight: 600;
  line-height: 16px;
  text-wrap: nowrap;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .15);
  /* -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .15));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .15)); */
}
.btn_socialmedia a:hover, .btn_googlemap:hover, .btn_submit:hover, .btn_cta:hover{
  color: var(--white);
  background-color: var(--darkgreen);
}
@media screen and (max-width: 500px) {
  .btn_socialmedia {
      gap: 0.5rem !important;
  }
}

.btn_cta{
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 15px;
  text-align: center;
  font-weight: 600;
  line-height: 16px;
}
.modal_h{
  max-height: 100vh;
  max-height: 100svh;
  padding-bottom: 150px;
}
.infodescription{
  width: 100%;
}
.infodescription p{
  margin-bottom: 0px;
}
/*---------------------------------------
   Carousel    
-----------------------------------------*/
.about_carousel {
  position: relative;
  min-width: 280px;
  width: 100%;
  height: 100%;
  min-height: fit-content;
  max-height: calc(100vh - var(--top_h));
  max-height: calc(100svh - var(--top_h));
  max-height: calc(100dvh - var(--top_h));
  overflow: hidden;
}
.location_carousel{
  position: relative;
  min-width: 280px;
  width: 100%;
  max-height: 285px;
}

#carouselFeature{
  height: 100%;
}
#carouselPhoto{
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/photo/photomask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url(../img/photo/photomask.png);
  mask-repeat: no-repeat;
  mask-size: contain;
}

.location_carousel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  background: url(../img/photo/photoborder.png) no-repeat;
  background-size: contain;
  pointer-events: none;
  -webkit-filter: saturate(.85) brightness(0.65) hue-rotate(120deg);
  filter: saturate(.85) brightness(0.65) hue-rotate(120deg);
}

.carousel-control-next, .carousel-control-prev {
  width: 35px;
  padding: 5px;
}
.carousel ,.carousel-item ,.carousel-item img {
  width: 100%;
  height: auto;
  max-height: fit-content;
}

.about_carousel .carousel-item img {
  min-height: 100px;
  max-height: fit-content;
}
.about_carousel .carousel-item{
  height: 100% !important;
  min-height: fit-content;
  min-height: calc(100vh - var(--top_h));
}
.carousel-indicators{
  margin-bottom: 0;
}
.carousel-indicators button.active{
  background-color: var(--cyan);
}
.carousel-item.intro img {
  object-fit: contain;
}

/*---------------------------------------
   Boat Schedule    
-----------------------------------------*/
.ticketprice, .timetable{
  background-color: var(--white);
  min-width: 150px;
  width: 100%;
  max-width: 300px;
  min-height: fit-content;
  overflow: hidden;
  border: 1px solid white;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .35);
  /* -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .35));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .35)); */
}
thead{
  text-transform: uppercase;
  color: var(--white);
  background: var(--cyan);
}
.tickettlt, tbody tr:nth-child(odd){
  background-color: var(--lightgrey);
}
td{
  padding: 5px;
}

 @media screen and (max-width: 350px) {
  .timetablewrapper{
    flex-wrap: wrap;
  }
}

/*---------------------------------------
   MAP    
-----------------------------------------*/
#map {
  position: absolute;
  z-index: 0;
}

.leaflet-marker-icon{
  display: block !important;
  opacity: 1 !important;
}
.leaflet-control-zoom {
  display: none !important;
}
.marker-shadow{
  -webkit-filter: drop-shadow(0 4px 1px rgba(0, 0, 0, .35));
  filter: drop-shadow(0 4px 1px rgba(0, 0, 0, .35));
}
.compass.hidden{
  width: 70px;
  height: 70px;
  position: absolute;
  z-index: 998;
  rotate: 7deg;
  left: clamp(15px, 5%, 35px);
  bottom: 105px;
  background: url(../img/compass.png) center no-repeat;
  background-size: contain;
}
.compass.show{
  opacity: 1;
  animation-delay: 350ms;
}
.compass.show:hover{
  animation: rotate .5s ease-out;
}


.form-control{
  font-size: 14px;
  border: none;
  outline: none;
}

.dummy{
  opacity:0;
}
@media screen and (max-width: 425px) {
  .dummy{
    display: none;
  }
}

.credits_logowrapper {
  padding: 10px 20%;
  background-color: white;
  width: 120%;
  flex-wrap: wrap;
}
.credits_logo {
  padding: 10px;
  width: 100%;
  max-width: 160px;
  max-height: 160px;
}
.credits_stitle{
  display: flex;
  align-items: center;

  color: white;
  width: 100%;
  border-radius: 25px;
  padding: 5px 25px;
  background-color: var(--active);
}
.credits_namelist{
  gap: .3rem 1rem;
  padding: 0 15px;
  padding-bottom: 20px;
}
.credits_namelist h6{
  margin: 0;
  line-height: 18px;
}
@media screen and (max-width: 430px) {
  .credits_logo{
    max-width: fit-content;
    max-height: unset;
  }
}

.tnc{
  color: var(--lightgreen);
  gap: .5rem;
  margin-top: 10px;
}
.tnc a:hover{
  color: var(--darkgreen);
}
.tncwrapper{
  min-height: 100vh;
  height: 100%;
  background-image: linear-gradient(to top, #fcecd7, #fdf8f2 70%);
  background-size: cover;
}
.tncwrapper::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 35%;
  background: url(../img/texture/papertexture.png) center no-repeat;
  pointer-events: none;
}
.tnccontainer{
  padding: 50px 5%;
  padding-top: 100px;
}
.tnccontainer ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 5px;
}
.tnccontainer p {
  margin-top: 10px;
}

.footer{
  padding:  10px 5%;
  padding-bottom: 50px;
}

/*---------------------------------------
   Popup    
-----------------------------------------*/
.popupmodal {
  z-index: 99998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  display:none;
}
.popupmodal.active{
  display: unset;
}

.popupwrapper{
  position: absolute;
  width: 500px;
  max-width: 80vw;
  min-height: fit-content;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--darkgreen);
  background-image: linear-gradient(to top, #fcecd7, #fdf8f2 70%);
  background-size: cover;
  overflow: hidden;
  gap: 0;
}
.popupwrapper::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 35%;
  background: url(../img/texture/papertexture.png) center no-repeat;
  pointer-events: none;
}

.popuptopbar{
  z-index: 5;
  position: absolute;
  top: 0;
  /* background-image: linear-gradient(to bottom, rgba(13, 17, 20, 1), rgba(0,0,0,0)); */
}

.popupcontainer{
  position: relative;
  width: 100%;
  height: 100%;
}
.popupcontainer::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  mix-blend-mode: multiply;
  background-image: linear-gradient(to top, var(--darkgreen), rgba(0,0,0,0) 25%, rgba(0,0,0,0));
  pointer-events: none;
}
.popupcontainer h1{
  position:absolute; 
  z-index: 5;
  bottom: 0; 
  left: 0;
  padding: 20px; 
  color: white;

}