/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

@font-face {
  font-family: FaceBo;
  src: url("./fonts/FACEBOLF.OTF");
}
@font-face {
  font-family: ANFFN;
  src: url("./fonts/ANFFN.TTF");
}

html {
  scroll-behavior: smooth;
}

.position_absolute_full,
.image_cover_dark,
.image_cover_light {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.clear{
  clear: both;
}

/*--------------------------------------------------------------
# Background
--------------------------------------------------------------*/

.bg_loading_light{
  background: gainsboro linear-gradient(-45deg, gainsboro, grey, gainsboro, grey);
    background-size: 400% 400%;
    animation: gradient 3s ease-in-out infinite;
}

.bg_loading_dark{
  background: gray linear-gradient(-45deg, black, grey, black, grey);
    background-size: 400% 400%;
    animation: gradient 3s ease-in-out infinite;
}

.bg_100_center_cover{
  background: no-repeat center;
  background-size: cover;
}

.bg_grey{
  background-color: gainsboro;
}
.bg_dark{
  background-color: rgb(30,30,30);
}

/*--------------------------------------------------------------
# Image
--------------------------------------------------------------*/

.image_cover_dark {
  background-color: rgba(0, 0, 0, 0.3);
}
.image_cover_light {
  background-color: rgba(255, 255, 255, 0.3);
}

.a,
.image_max_100_cover,
.image_max_100_cover img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.image_100_cover,
.image_100_cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/
.nav_btn{
  padding: 10px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 40px;
  width: 60px;
  border: 2px solid rgb(200,200,200);
  /* background-color: rgb(30,30,30); */
  border-radius: 5px;
  cursor: pointer;
}
.nav_btn li{
  width: 100%;
  border: 1px solid rgb(200,200,200);
  border-radius: 5px;
}
.nav_btn:active, .nav_btn:active li{
  border-color: rgb(30,30,30);
  background-color: rgb(200,200,200);
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a,
nav a:visited,
nav a:active,
nav a:focus{
  color: white;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover{
  color: orange;
  text-decoration: none;
}

.main-navigation{
  width: auto;
  background-color: rgb(30,30,30);
}
#masthead{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}
#masthead .head_title{
  color: white;
  text-shadow: 0 0 10px black, 0 0 10px black;
  margin: 0 20px;
  font-size: 2em;
  font-family: ANFFN;
}
#masthead nav li{
  margin: 5px 20px;
}
#site-navigation{
  width: 100%;
}
#site-navigation.clp ul{
  display: block;
}
#masthead a,
#colophon a{
	font-size: 2em;
}

/*--------------------------------------------------------------
# Logo
--------------------------------------------------------------*/

/* partner  */
.logo_section h1{
  display: inline-block;
  border-bottom: 2px solid orange;
  font-size: 3em;
}
.logo_slider{
  position: relative;
}
.logo_slider .logo_button_container{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  transform: translate(0%, 50%);
  display: flex;
  justify-content: space-between;
}
.logo_slider .slider{
  /* width: 90%; */
  padding: 0 30px;
  margin: auto
}
.logo_slider .logo_button_container img{
  height: 20px;
  width: auto;
  object-fit: cover;
}

/* footer  */

/* apple and play store  */
.logo_store{
  height: 80px;
}
/* sdg  */
.sdg_logo{
  margin-left: 100px;
  max-width: 150px;
}
.sdg_logo::before{
  position: absolute;
  content: "Developed by";
  left: -90px;
  bottom: 0;
  color: white;
}

/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/

.banner{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 100px 20px;
  min-height: 50vw;
  white-space: nowrap;
}
.banner h2{
  border-bottom: 2px solid orange;
  padding-bottom: 10px;
  font-size: 3em;
}
.banner input[type="text"],
.banner input[type="email"],
.banner input[type="submit"],
.banner input[type*="date"],
.banner select {
  width: 100%;
  border: 2px solid orange;
  border-radius: 0;
  height: 50px;
}
.banner .booking_dialog{
  background-color: white;
  box-shadow: 0 0 10px black, 0 0 10px black;
  padding: 20px;
  width: 100%;
  max-width: 600px;
}
.banner input[type="submit"]{
  width: auto;
  height: auto;
  background-color: black;
  color: orange;
  padding: 5px 30px;
  font-size: 2em;
}
.banner input[type="submit"]:hover{
  background-color: white;
}
.banner input[type="submit"]:active{
  background-color: orange;
  color: black;
  outline: none;
}

/*--------------------------------------------------------------
# Service Section
--------------------------------------------------------------*/

.service_type_section{
  padding: 20px
}
.service_type_section .service_container{
  margin: auto
}
.service_type_section .service_container > div{
  max-height: 250px;
}
.service_type_section .service_container > div > div{
  max-height: 100%;
  transition: transform 0.3s ease-in-out;
}
.service_type_section .title{
  left: 0;
  right: 0;
  bottom: 20px;
  padding: 10px;
  font-size: 2em;
  color: white;
  transition: bottom 0.3s ease-in-out;
  background-color: rgba(0,0,0,0.5);
  pointer-events: none;
  text-align: center;
}
.service_type_section .service_container > div > div:hover{
  transform: scale(1.05);
}
.service_type_section .service_container > div > div:hover .title{
  bottom: 20%;
}

/*--------------------------------------------------------------
# About us
--------------------------------------------------------------*/

.about_us_section h2{
  border-bottom: 2px solid orange;
  display: inline-block;
  font-size: 2.5em;
}
.about_us_section .nav-tabs{
  border-bottom: none;
}
.about_us_section .nav-tabs a,
.about_us_section .nav-tabs a:visited {
  border: none;
  text-align: center;
  border-radius: 0;
  color: black
}
.about_us_section .nav-tabs a:active,
.about_us_section .nav-tabs a.active,
.about_us_section .nav-tabs a:hover,
.about_us_section .nav-tabs a:focus{
  color: orange;
  outline: none;
}
.about_us_section .nav-tabs a:first-child{
  text-align: left;
}
.about_us_section .nav-tabs a:last-child{
  text-align: right;
}
.about_us_section .tab-content{
  line-height: 30px;
}
/*--------------------------------------------------------------
# Video
--------------------------------------------------------------*/
.video_section h1{
  font-family: FaceBo;
}
.video_section video{
  min-height: 50vh;
  max-height: 50vh;
}
#fqas{
  max-height: 50vh;
  overflow: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
#fqas::-webkit-scrollbar {
  display: none;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#colophon{
  /* height: 50vw; */
}
.cp_right{
  background-color: black;
  color: white;
  font-size: 12px;
}

/*--------------------------------------------------------------
# Animated
--------------------------------------------------------------*/

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

/*--------------------------------------------------------------
# Response
--------------------------------------------------------------*/

@media only screen and (min-width: 768px){
  #site-navigation{
    width: auto;
  }
  #site-navigation.clp ul{
    display: flex;
  }
  .service_type_section .service_container{
    max-width: 900px;
  }
}

@media only screen and (min-width: 960px){
  .service_type_section .service_container{
    max-width: 80vw;
  }
  .service_type_section .service_container > div{
    max-height: 20vw;
  }
}