html {
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
}

.container{
  max-width: 1440px;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.themed-grid-col {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}

.themed-container {
padding: 15px;
margin-bottom: 30px;
background-color: rgba(0, 123, 255, .15);
border: 1px solid rgba(0, 123, 255, .2);
}

#mySidenav{
  display: none;
}

.open-btn{
    display: none;
}


#header{
  background: url("IMG/bg.png") no-repeat center center;
    background-size: cover;
    height: 1080px;
}
/***navBar***/
nav{
width: 90%;
  margin: auto;
  font-size: 20px;
  text-transform: uppercase;
}

#naviBar{
transition: top 0.3s;
background-color: #fff5e2; /*lightyellow*/
opacity: 0.9;
}

.navbar{
position: fixed;
width: 100%;
padding: 20px 50px;
z-index: 10;
}

a{
  color: #333333;
  margin: 0 5px 0 5px;
  font-weight: bold;
}

a:hover{
  color: #18a49b;
}

.nav-fb a{
  background: url("IMG/fbIcon.png") no-repeat center center;
  color: transparent;
}

.nav-whatsapp a{
  background: url("IMG/WhatsappIcon.png") no-repeat center center;
    color: transparent;
}

#headline{
  margin: auto;
  max-width: 1440px;
  padding:200px 200px;
}

#blank{
  height: 50px;
}


.header-img{
  width: 100%;
  animation: swing 3s ease-in-out infinite;
}

.header-img img{
  width: 100%;
}




#sub-headline{
  text-align: center;
  font-family: 'Noto Sans SC', sans-serif;
}

h1{
  font-size: 48px;
  color: #333333;
}

#btn-wrapper{
  margin: auto;
  text-align: center;
}

.btn{
/*  height: 50px;*/
  width: 192px;
  margin: 5px;
  background-color: #18a49b;/*green*/
  border-radius: 50px;
  color: white;
  font-size: 18px;
text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  vertical-align: middle;
}

.btn:hover{
  background-color: #ee8c35;/*orange*/
  color: white;

}


.btn a:hover{
  text-decoration: none;
}

.cloud{
  margin-top: -300px;
  width: 100%;
  height: 300px;
  background: url("IMG/Cloud.png") no-repeat top center;
  background-size: cover;
}

.cloudDown{
  width: 100%;
  height: 300px;
  background: url("IMG/CloudDown.png") no-repeat bottom center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.content{
  vertical-align: middle;
}

section{
  margin: 50px 0;
  padding-top: 100px;
}

#details{
  margin-top: 0;
  padding-top: 0;
}

th{
  width: 50%;
  padding: 15px 0;

}
th p{
  font-size: 20px;
    line-height:35px;
}

th a{
  margin:0;
  font-weight: 600;
  font-size: 20px;
}

h2{

  font-size: 30px;
  color: #ee8c35;
  text-transform: uppercase;
  margin: 30px 0;

}

h3{
  font-size: 48px;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: bold;
  color: #18a49b;
}

p{
  font-size: 24px;
  font-family: 'Noto Sans SC', sans-serif;
  line-height: 50px;
  color: #333333;
  font-weight: 100;
  margin: 0;
}


.text-left{
  text-align: left;
}

.text-right{
  text-align: right;
}

.yellow-bg{
  background-color: #fff5a4; /* For browsers that do not support gradients */
 background-image: linear-gradient(#fff5a4, #fff5e4); /* Standard syntax (must be last) */
  margin: -300px 0;
  padding: 300px 0;
}



.clear{
  clear: both;
}

.location-box{
  width: 80%;
  margin: 100px auto;
}
ul {
  list-style-image: url('IMG/listStyle.png');
  vertical-align: middle;
}

li{
  padding-left: 20px;
}

.location{
  margin: 100px 0;
}

h4 , h5{
  font-size: 36px;
  font-weight: bold;
  color: #333333;
}

h5{
font-family: 'Noto Sans SC', sans-serif;
}

th{
  vertical-align: text-top;
}

img{
  width: 100%;
}

#principal{
  margin-top: 0;
  padding: 0;
  margin-bottom: 150px;
}

footer{
  text-align: center;
  padding:20px 0;
}

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

.modal-header{
  border-bottom: none;
}

.close{
  color: white;
}

#myNav , .openNav{
  display: none;
}

#aboutModal .modal-content , #howModal .modal-content{
 background: white;
}

#aboutModal .modal-body , #howModal .modal-body{
 padding-left: 100px;
 padding-right: 100px;
 padding-bottom: 50px;
}

.modal-body h3{
  font-size: 30px;
  line-height: 48px;
}

.modal-body h2{
  font-size: 25px;
  line-height: 48px;
  margin: 0;
  font-family: 'Noto Sans SC', sans-serif;
}

.modal-body p{
  font-size: 20px;
  line-height: 30px;
}

#aboutModal .close , #howModal .close{
 color: #18a49b;
}

.btn-cn{
  font-size: 21px;
min-width: 250px;
  margin: 100px 0;
  font-family: 'Noto Sans SC', sans-serif;
}

/**animation keyframes**/
  @keyframes swing  {
    0% { transform:rotate(-10deg) }

     50% { transform:rotate(10deg)  }

    100% { transform:rotate(-10deg);
    }
  }

@media (max-width: 1024px) {

#collapsibleNavbar{
  display: none !important;
}

#myNav , .openNav{
  display: block;
}
  #mySidenav{
    display: block;
  }

  #headline{
    padding-left: 50px;
    padding-right: 50px;
  }
  #services img{
    width: 50%;
  }

#naviBar{
  padding-left: 15px;
  padding-right: 15px;
}
  #navbar-brand img{
    width: 70%;
  }

.mobileLogo{
  max-width: 150px;
  z-index: 100;
  text-align: center;
  margin: auto;
  background: url("IMG/logo.png") no-repeat center center;
  min-height: 150px;
}

/*.mobileLogo img{
  width: 70%;
}*/
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #fff5a4; /* For browsers that do not support gradients */
  background-image: linear-gradient(#fff5a4, #fff5e4); /* Standard syntax (must be last) */
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

#myNav ul{
  list-style: none;
  margin-top: 0;
  padding:0;
}

#myNav ul li{
  padding:0;
}

.openNav{
  position: absolute;
  right: 0;
  padding: 10px;
}

.nav-item{
  margin:50px 0;
}

.overlay a {
  padding: 10px;
  text-decoration: none;
  font-size: 30px;
  color: #333333;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 0;
}

.nav-whatsapp a{
  color: transparent !important;
}

#blank{
  height: 30px;
}

.nav-link a:hover{
  color: #333333;
}

h3{
  font-size: 35px;
}


}


@media (max-width: 500px) {
#headline{
  padding-left: 30px;
  padding-right: 30px;
}

section{
  padding-top: 0;
}

#services{
  padding-top: 100px;
}

.header-img{
  padding: 0;
}

h1 , h3{
  font-size: 25px;
}

h2{
  font-size: 20px;
}

p{
  font-size: 18px;
  line-height: 35px;
}

h4, h5{
  font-size: 25px;
}

th{
  padding: 10px;
}

th p{
  font-size: 15px;
  line-height: 20px;
}

th a{
  font-size: 15px;
}

.location{
  margin: 50px 0;
}

.location-box{
  margin: 50px auto;
}


#header{
    background-size: cover;
    height: auto;
}

section{
  margin: 0;
}

#aboutModal .modal-body , #howModal .modal-body{
 padding-left: 30px;
 padding-right: 30px;
 padding-bottom: 50px;
}

.location-box{
  width: 100%;
}

}

/*










 content*/

.video{
	position: relative;
	padding-top: 4.1%;
	padding-bottom: 51.95%;
	height: 0;
}

iframe{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		min-height: 0;
}

.video-gallery{
	margin: 0 !important;
	position: relative;
	width: 100%;
}

.video{
		animation: 1200ms fadeOut ease;
		animation-fill-mode: both;
		/*display: none;*/
		grid-column-start: 1;
		grid-row-start: 1;
		grid-row-end: 7;
		/*height: 0;*/
		max-height: 500px !important;
		opacity: 0;
		transition: all 300ms ease;
}

input[type="radio"]{
		font-size: 0;
		height: 0;
		opacity: 0;
		padding: 0;
		position: fixed;
		width: 0;
}

input{
		grid-column-start: 1;
		grid-row-start: 1;
}

label{
		color: #000000;
		font-size: 16px;
		font-weight: 400 ;
		grid-column-start: 2;
		margin: 0 !important;
		padding:10px;
		position: relative;
		border-bottom: 1px solid #CCCCCC;
}
label::last-of-type{
			border: 0 none;
}
input[type="radio"]:checked+label{
		color: #E41F35 !important;
}
input::before{
			content: "▶";
			left: 0;
			top: 12px;
			position: absolute;
}

.grid-row{
	display: block;
	position: relative;
	grid-template-columns: 2fr 1fr !important;
}

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 15px;
      padding: 20px;
      margin: 0 auto;
    }
    
     @media (max-width: 600px) {
      .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
        padding: 10px;
      }
    }

    .grid-item {
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }

    .grid-item:hover {
      transform: scale(1.03);
    }

    .grid-item img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
    
label{
		left: calc(50% + 16px);
		position: relative;
		width: calc(50% - 16px);
}
.video{
		padding: 0;
		position: absolute;
		top: 0;
		width: 0;
}
video::after{
		content: "";
		clear: both;
		display: table;
}

#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6, #video-7:checked ~ .video-7{
	animation: 1200ms fadeIn ease;
	animation-fill-mode: both;
	/*display: block;
	  height: 56vw;*/
	opacity: 1;
	width: 50%;
}




@keyframes fadeOut{
	0%{
		display: block;
		height: 56vw;
		opacity: 1;
		width: 50%;
	}
	25%{
		display: block;
		height: 56vw;
		opacity: 1;
		width: 50%;
	}
	49%{
		display: block;
		height: 56vw;
		opacity: 0;
		width: 50%;
	}
	50%{
		display: none;
		height: 0;
		opacity: 0;
		width: 0;
	}
}

@keyframes fadeIn{
0%{
		opacity: 0;
		width: 0;
}
49%{
		display: none;
		height: 0;
		opacity: 0;
		width: 0;
}
50%{
		display: block;
		height: 56vw;
		opacity: 0;
		width: 50%;
}
100%{
		display: block;
		height: 56vw;
		opacity: 1;
		width: 50%;
}
}





@supports(display: grid) {
	.grid-row{
		align-items: start;
		display: grid;
		grid-template-columns: 2fr 1fr !important;
		grid-column-gap: 16px;
		grid-row-gap: 0;


		/*grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;*/
}
label{
			left: auto;
			width: 100%;
}
.video{
			position: relative;
			width: 100%;
}
		#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6, #video-7:checked ~ .video-7{
		width: 100%;
}
	
	@keyframes fadeOut {		
		0%
{			display: block;
			height: 56vw;
			opacity: 1;
			width: 100%;}
		25%
{			display: block;
			height: 56vw;
			opacity: 1;
			width: 100%;}
		49%
{			display: block;
			height: 56vw;
			opacity: 0;
			width: 100%;
}
		50%
	{		
			display: none;
			height: 0;
			opacity: 0;
			width: 0;
	}
	}
	

	@keyframes fadeIn {
		0%
{	
			opacity: 0;
			width: 0;
		}
		49%
	{	
			display: none;
			height: 0;
			opacity: 0;
			width: 0;
		}
		50%
{	
		display: block;
			height: 56vw;
			opacity: 0;
			width: 100%;
		}
		100%
	{	
			display: block;
			height: 56vw;
			opacity: 1;
			width: 100%;
		}
	}




@media (max-width: 767px) {
	.video-gallery{
		display: flex;
		flex-direction: column;
		height: auto;
		max-height: none;
	}
		label{
			left: auto;
			order: 2;
			width: 100%;
			text-align: center;
	}
		.video{
			order: 1;
			position: relative;
			top: auto;
			width: 100%;
	}

	#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6, #video-7:checked ~ .video-7
	{
			width: 100%;
	}
	}
	
	@keyframes fadeOut {
		0%{
			display: block;
			height: 56vw;
			opacity: 1;
	}
		25%{
			display: block;
			height: 56vw;
			opacity: 1;
	}
		49%{
			display: block;
			height: 56vw;
			opacity: 0;
	}
		50%{
			display: none;
			height: 0;
			opacity: 0;
	}
	}
	
	@keyframes fadeIn {
		0%
			{
			opacity: 0;
			}
		49%
			{
			display: none;
			height: 0;
			opacity: 0;
			}
		50%
			{
			display: block;
			height: 56vw;
			opacity: 0;
			}
		100%
			{
			display: block;
			height: 56vw;
			opacity: 1;
			}
	}