@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');
@charset "utf-8";
html, body {margin:0;padding:0;height:100%;width:100%;font-family:"Poppins", sans-serif;font-size:18px;color:white; background-color:var(--dark-grey);}

h1,h2,h3,h4,h5,h6 {color:var(--gold); font-weight:600; letter-spacing:0.02em; line-height:1;}
h1 {text-align:center; font-size:64px; text-transform:uppercase;}
h2 {margin:30px 0; text-align:center; font-size:32px; line-height:1.2;}
h3 {margin-bottom:20px; text-align:left; font-size:36px;}
h4 {margin-bottom:30px; text-align:right; font-size:36px;}
h5 {text-align:center; font-size:48px; line-height:1.2;}

* {margin:0; padding:0;}
:root {
--black: #060000;
/*--purple: #ff32e5;
--purple: #b5307b;
--purple:#cca471;*/
/*--gold: #cca471;
--gold: #b8ae8b;
--gold: #d4af37;*/
--gold: #ddd1a2;
--dark-grey: #1a1a1a;
--mid-grey:#a7a7a7;	
--light-grey: #f7f7f7;
--red: #cc0000;
--green: #2fdf48;
}
a {color:var(--purple); text-decoration:none;}
a:hover {color:var(--gold);}
a {-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;-ms-transition: all .3s ease;transition: all .3s ease;}
p {margin-bottom:20px; text-align:left; line-height:1.6;}
img {width:auto; max-width:100%; height:auto;}

header {position:fixed; width:100%; padding:2px 0; top:0; left:0; background-color:transparent; transition:all 0.25s ease-in-out; z-index:100;}

 .head-content {display:flex; width:99%; margin:0 auto; align-items:center; justify-content:flex-start;}
  .booking {padding-top:10px; padding-left:5px;}
  .booking p {margin:0; text-align:center; line-height:1.2;}
  .booking a {display:flex; height:100px; width:100px; text-align:center; color:white; font-size:16px; font-weight:600; line-height:1.2; flex-direction:column; align-items:center; align-content:center; justify-content:center; background-color:var(--black); border-radius:50%; border:1px solid var(--gold);}
  .booking a:hover {background-color:var(--gold);}

.banner {display:block;}
.banner-ph {display:none;}

.content-top {display:block; width:60%; margin:45px auto;}
 .content-top h2 {margin-top:10px;}
 .content-top p {text-align:center; font-size:18px;}

.content-video {display:block; margin:80px auto; width:70%; text-align:center;}
.content-video p {margin-top:5px; text-align:center; font-size:14px; color:var(--mid-grey); line-height:1.2;}
.vidContainer {
	width:auto; max-width:100%;
	height:auto;
} 
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0; line-height:0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.content-mid {display:grid; width:70%; margin:20px auto 90px auto; grid-template-columns: 60% 40%; column-gap:60px;}
 .content-mid-top {grid-column: span 2;}
 
  .content-mid ul {list-style-type:square;}
  .content-mid ul li {padding-left:20px; text-align:left; font-size:16px;}
.content-btm {display:grid; width:70%; margin:0 auto 120px auto; grid-template-columns: 40% 60%; column-gap:60px;}
 .content-btm img {max-width:400px;}

.marquee {margin:-30px auto 30px auto;
			display: flex ;
			overflow: hidden ;
			white-space: nowrap ;
			width: 50%;
			font-size:16px; font-weight:600; color:var(--gold);
		}
.marquee__item {
			animation-duration: 15s ;
			animation-iteration-count: infinite ;
			animation-name: marquee-content ;
			animation-timing-function: linear ;
			padding: 5px 30px 5px 30px ;
		}
		.marquee:hover .marquee__item {
			animation-play-state: paused ;
		}
@keyframes marquee-content {
			from {
				transform: translateX( 0% );
			}
			to {
				transform: translateX( -100% );
			}
		}

footer {width:100%; padding:60px 0 0 0; text-align:center; background-color:var(--black);}

 .foot-content {display:grid; width:98%; margin:30px auto; padding-bottom:60px; grid-template-columns:1fr 1fr 1fr; grid-template-areas: "header left right"; place-items:center; gap:30px;}
 
  .foot-logo {grid-area: header; text-align:center;}
  .foot-contact {grid-area: left; text-align:center;}
  .foot-subscribe {grid-area: right; text-align:center;}
 
  .foot-logo {}
  
  .foot-contact {display:flex; margin:0 auto; flex-direction:column; align-content:center; justify-content:center; gap:15px;}
   
   .foot-social {display:flex; margin:0 auto 30px auto; text-align:center; align-items:center; justify-content:center; gap:30px;}
   .foot-social img {width:48px; padding:8px; background-color:transparent; border-radius:100%;}
   .foot-social img:hover {background-color:var(--gold);}

   .foot-contact a {display:block; margin:0 auto; width:260px; padding:20px; text-align:center; color:white; font-size:15px; font-weight:800; background-color:var(--gold); border-radius:12px;}
   .foot-contact a:hover {color:var(--dark-grey); background-color:white;}
   
   .foot-subscribe {display:block; margin:0 auto; width:400px; border:2px solid var(--gold);}
   
 .sub-foot {display:block; padding:20px 0; text-align:center; background-color:var(--dark-grey);}
  .sub-foot p {margin:0; padding-right:2px; text-align:center; color:var(--light-grey); font-size:12px;}
  .sub-foot a {padding:0 2px; color:var(--gold); background-color:transparent;}
  .sub-foot a:hover {color:var(--dark-grey); background-color:var(--gold);}
  

/*@media screen and (max-width:1639px) {
.content-video {width:70%; grid-template-columns:1fr 1fr; column-gap:30px;}
}*/
@media screen and (max-width:1439px) {
/*.head-content {width:94%;}*/
.content-video {width:80%;}
}

@media screen and (max-width:1260px) {
.content-video {width:98%;}
.content-mid {width:90%;}
.content-btm {width:90%;}
}

@media screen and (max-width:1024px) {
	
header {background-color:var(--black);}

 .head-content {display:flex; width:99%; margin:0 auto; align-items:center; justify-content:center;}
  .booking {padding:4px 0;}
  .booking p {display:inline; line-height:1;}
  .booking a {height:20px; width:180px; margin:0 auto; padding:5px; font-size:14px; line-height:1; flex-direction:row; align-items:center; align-content:center; justify-content:center; gap:0.5em; background-color:var(--black); border-radius:15px; border:2px solid var(--gold);}
.container {margin-top:46px;}
	
.content-top {width:80%;}
.content-top p {max-width:100%; line-height:1.6;}
.content-mid {width:94%; grid-template-columns: 60% 30%; gap:6%;}
.content-mid img {max-width:330px;}

.content-btm {width:94%; grid-template-columns: 35% 60%; gap:5%;}
.content-btm img {max-width:330px;}

.marquee {width:94%;}
 .foot-content {grid-template-columns:1fr 1fr; grid-template-areas: "header header" "left right"; margin:20px auto;}
  
}

@media screen and (max-width:960px) {
h1 {font-size:60px;}
h2 {font-size:30px;}
.content-mid {margin:20px auto 60px auto; grid-template-columns:1fr; gap:10px;}
 .content-mid-top {grid-column:span 1;}
  .content-mid ul {margin-left:60px; list-style-type:square;}
  .content-mid ul li {padding-left:20px; text-align:left; font-size:16px;}

.content-mid img {max-width:80%;}
.content-btm {grid-template-columns:1fr; text-align: center;}
 .content-btm-left {order: 2;}
 .content-btm-right {order: 1;}
.content-btm img {max-width:80%;}
.content-feature {width:96%; padding-bottom:40px;}
}

@media screen and (max-width:768px) {
h1 {font-size:54px;}
h2 {font-size:27px;}
h4 {font-size:36px;}
.content-top p {font-size:21px;}
.content-video {width:96%;}
.foot-content {grid-template-columns:1fr; grid-template-areas: "header" "left" "right"; gap:40px; margin:20px auto;}
.foot-subscribe {width:90%;}
.foot-contact-wrap {
}
@media screen and (max-width:540px) {
.banner {display:none;}
.banner-ph {display:block;}
.foot-social {gap:20px;}
.foot-subscribe {width:90%;}
}