/* -----Custom Fonts--------*/
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* -----Common CSS --------*/

* {
	box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	background: #f4f4f4;
    overflow-x:hidden;
}

/*Global*/
.container {
	width: 80%;
	margin: auto;
	overflow: hidden;
}

a {
	text-decoration: none;
	color: #BA55D3;
}

h1 {
	font-weight: 300;
	font-size: 3.6rem;
	font-weight: 300;
	line-height: 1.2;
	margin-bottom: 15px;
	text-align: center
}

h2 {
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 20px;
}

h3 {
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 10px;
	margin-top: 5px;
}

h4 {
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.2;
	margin-bottom: 10px;
}

/* header */
/*-----Navigation and Footer using Grid-template areas - Code by Nazia Fakhruddin Group -100------*/
.container-nav{
    display:grid;
    grid-template-columns:auto auto auto auto auto auto;
    grid-template-areas:"logo   logo   nav    nav    nav    nav"
                        "footer footer footer footer footer footer";
    border-bottom:5px solid #BA55D3;
    background:#fff;
}

.logo {
    grid-area:logo;
    margin:50px;
    position:relative;
    animation:animate1 2s forwards linear; /*animation */
}

.logo img{
   width:200px;
   height:60px;
   
}
@keyframes animate1{         /*animation */

    25%{
        top:0;
        left:-300px;
    }
    100%{
        top:0;
        left:0px;
    }
}
.nav{
grid-area:nav;
justify-self:end;
margin:30px; 
position:relative;  /* position-relative */
z-index:3;            /* z-index */
animation:animate2 2s backwards linear;  /* animation */    
}
@keyframes animate2{
    25%{
        top:0;
        right:-500px;
    }
    100%{
        top:0;
        right:0px;
    }
}
.nav .menu {
 list-style:none;
 display:inline-grid;
 text-align:center;
 padding:15px;
 font-weight:bold;
}
.nav .menu a{
  text-decoration:none;
  color:#BA55D3;
  font-size:16px;
  text-transform:uppercase;
  transition:border 0.3s ease-in-out;
}
.nav .menu a:hover{
 border-bottom:5px inset #87CEEB;
}

.nav .drop-menu{
  background:#eee;
  list-style:none;
  display:block;
  opacity:0.8;        /*opacity */
  
  margin:0px;
  padding:0px;
  position:absolute; /* position-absolute */
  z-index:10;         /* z-index */
  top:80px;
}
.nav .drop-menu li{
  width:200px;
  height:50px;
  color:#BA55D3;
  line-height:50px;
  text-align:center;
  box-shadow:2px 6px #bbb;
}
.nav .drop-menu li a{
  border:none;
  box-shadow:none; 
  text-decoration:none;
  font-size:14px;
  color:#BA55D3;

}
.nav .drop-menu li:hover{
  margin:0px;
  padding:0px;
  font-weight:900;
  font-size:16px;

}
ul .menu .drop-menu li{
  display:none;
}
ul .menu:hover .drop-menu li{
  display:block;
  background:linear-gradient(4.6rad,#87CEFA,white,#eee);
}
.nav .currentpg a{
  border-bottom:3px outset #87CEEB ;
  border-right:3px solid #87CEEB  ;
  border-top:2px solid #BA55D3 ;
  border-left:2px solid #BA55D3;
  padding:10px;
  box-shadow:2px 2px 2px 2px #ddd;
 }
 .nav .currentpg a:hover{
  color:#BA55D3;
  padding:8px;
}
.container-nav span{
    transition:0.5s;
}
.container-nav span{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:7px;
    background:linear-gradient(to right,transparent,#BA55D3);
    animation:animate0 3s linear infinite;
}
@keyframes animate0{         /*animation */

    0%{
        transform:translateX(-100%)
    }
    
    100%{
        transform:translateX(100%)
    }
}

/*-----Footer--------*/
.container-footer{
    grid-area:footer;
    grid-template-columns:3fr;
    text-align:center;
    background:linear-gradient(4.6rad,#87CEFA,white,#BA55D3);
    color:#BA55D3;
    font-size:18px;
    padding:30px 0 50px 0;
    box-shadow:0px 20px 20px 20px #87CEEB;
    position:relative;  /* position-relative */
   
}
.container-footer span{
    transition:0.5s;
}
.container-footer span{
    position:absolute;  /* position-absolute */
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(to right,transparent,#BA55D3);
    animation:animate0 3s linear infinite;
}
@keyframes animate0{         /*animation */

    0%{
        transform:translateX(-100%)
    }
    50%{
        transform:translateX(100%)
    }
}

.container-footer .links li{
    display:inline;
    padding-right:20px;
    color:#BA55D3;
    font-weight:bold;
}
.container-footer li a:hover{
    font-weight:bold;
    color:#87CEEB;
    border-bottom:2px solid #BA55D3;
}
.container-footer img{
    width:80px;
    height:80px;
    border:none;
    justify-self:center;
    
}
.container-footer img:hover{
    position:relative;
    animation:animate3 5s ease-in-out; /*animation */
}
@keyframes animate3{         /*animation */
    75%{
        transform:rotateY(360deg);
    }
    
}
.container-footer p{
   color:#BA55D3;
}
.container-footer .icons a{
    color:#BA55D3;
}
.container-footer .icons a:hover{
    color:#87CEEB;
}
/*Middle part Except header and footer by Shudhanshu Gunjal Group 100*/

h1,
h2,
h3,
.customerName,
.que {
	color: #60B0F4;
}

#jumbotron {
	position: relative;
}

#jumbotron > .text-overlay {
	position: absolute;
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
	top: 275px;
	left: 0;
	z-index: 2;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
	width: 100%;
	height: 600px;
	z-index: 1;
}

#jumbotron > video {
	width: 100%;
	height: 600px;
	object-fit: cover;
}

.text-overlay > h1 {
	color: white;
}

#jumbotron > .text-overlay > .btn,
input.btn {
	background: #60B0F4;
	border: none;
	border-radius: 5px;
	color: white;
	padding: 10px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;

}

#jumbotron > .text-overlay > .btn:hover,
input.btn:hover {
	background: #BA55D3;
}

main {
	width: 80%;
	margin: auto;
	align-content: center;
}

#explore-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 30px 30px;
}

#specialEvents-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 20px 30px;
}

.review,
.question {
	display: grid;
	grid-template-columns: 80px auto;
	grid-gap: 20px;
	margin-bottom: 20px;
}

.customerName,
.que {
	margin-top: 0;
	margin-bottom: 8px;
}

.customerReview,
.ans {
	margin: 0;
	padding: 0;
}

.explore > img,
.events > img,
.addon > img,
#gallery-container > img,
#travel-container > div > img {
	width: 100%;
	height: 300px;
}

.explore > img,
.events > img,
#reviews > .review > img,
#gallery-container > img,
.ticket > img,
.addon > img,
.map,
.rules-img,
#travel-container > div > img,
.question > img {
	object-fit: cover;
}

.review > img,
.question > img {
	width: 80px;
	height: 80px;
}

#gallery-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 30px 30px;
	padding-bottom: 40px;
}
/* --Grid in Tickets page by Suhhanshu Gunjal Group 100--  */
#tickets-container,
#passes-container,
#addons-container,
#travel-container, 
#tickets-container.dropbtn,
#passes-container.dropbtn,
#addons-container.dropbtn{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 30px;
	padding-bottom: 30px;
}

.ticket > img,
.pass > img,
.map {
	width: 100%;
}
/*------Drop up button in Tickets page By Nazia Fakruddin Group 100---------*/
 .dropbtn{
    background:#60B0F4;
    color:white;
    padding:16px;
    font-size:16px;
    border:none;
    min-width:100%;
    margin:auto;
    text-align:center;
}
.dropup{
    position:relative; /* position-relative  */
    display:inline-block;
}
.dropup-content{
    display:none;
    position:absolute;  /* position-absolute  */
    background:#f1f1f1;
    min-width:100%;
    bottom:45px;
    z-index:1; /* z-index  */
}
.dropup-content p{
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
}

.dropup-content p:hover{background-color:#ccc}
.dropup:hover .dropup-content{
    display:block;
}
.dropup:hover .dropbtn{
    background-color:#BA55D3;
}
/*---------------------------------------------  */
#newsletter-container {
	background: rgba(0, 0, 0, 0.1);
	padding: 40px 10%;
	text-align: center;
	margin-top: 15px;
	background-image: linear-gradient(to right, #141E30 0%, #243B55 51%, #141E30 100%);
	background-size: 200% auto;
	transition: 0.5s;
}

#newsletter-container > h2 {
	font-family: "Luckiest Guy";
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 15px;
	letter-spacing: 0.08em;
}

input {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.5;
	margin: 0 10px;
	height: 40px;
	text-align: center
}

#newsletter-container:hover {
	background-position: right center;
	color: #fff;
	text-decoration: none;
}

.map {
	padding: 10px 0;
	height: 750px;
}

#contact-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 30px 30px;
}

.contact > p {
	margin-bottom: 0;
}

#rules-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 30px 30px;
}

.rules-img,
.dos,
.donts {
	width: 100%;
	height: 100%;
}

#faq-container {
	padding-bottom: 20px;
}



/* 360deg rotation animation */
img:not(.not-animate):not(.not-animate) {
	margin: 0 auto;
	transition: box-shadow 0.4s, transform 0.4s;
}

img:hover:not(.not-animate) {
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	transform: rotate(2deg) scale(1.1);
}