@charset "utf-8";
/* CSS Document */

/*
Framework by Andy Shearouse
*/

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Playwrite+AU+SA:wght@100..400&display=swap');

*{
	box-sizing: border-box;
}
html, body{
	margin:0px !important;
	padding:0px !important;
	color: white;
	background-color:  #919191;
	font-family: "Caveat", cursive;
}

img{
	max-width:100% !important;	
}

.container{
	max-width:1920px;
	width:100%;
	margin:0 auto;
	position:relative;
}

.header{
    width: 100%;
}


/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 100%;
	z-index:10;
	position:relative;
	float:left;
	font-size:22px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	margin:15px 0;
	background-color: #919191;
	color: white;
}

#nav > a{
	display: none;
	
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color: white;
	display: block;
	text-decoration:none;
}

/* first level */

#nav > ul{
	text-align:center;
	padding-left:0px !important;
	margin-left:0px !important;
}
#nav > ul > li{
	margin:0px 15px;
	padding:4px 8px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:170px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
}
/* -------------------- End Navigation -------------------- */

.content{
	width:100%;
	display:inline-block;
	padding-bottom:20px;
}

.grid-two-thirds-one-third{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:2fr 1fr;
	grid-template-columns:2fr 1fr;
}

.grid-one-fourth-three-fourths{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 3fr;
	grid-template-columns:1fr 3fr;
}

.grid-three-fifths-two-fifths{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:3fr 2fr;
	grid-template-columns:3fr 2fr;
}

.grid-two-fifths-three-fifths{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:2fr 3fr;
	grid-template-columns:2fr 3fr;
}

.grid-two-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
}

.grid-three-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr;	
}

.grid-four-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr 1fr;
}

.img-grid{
    font-size:30px;
}

main{
    padding:1% 3%;
}

.footer{
	font-size:26px;
}

.no-margin{
	margin:0px !important;
}

.no-padding{
	padding:0px !important;	
}

.no-bold{
	font-weight:normal !important;	
}

.no-border{
	border:none !important;
}

.center{
	text-align:center;	
}

.block{
	display:block !important;	
}

@media only screen and (max-width:1200px){
	
}

@media only screen and (max-width:960px){	
	.grid-four-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr 1fr;
	}
}

@media only screen and (max-width:720px){
	/* -------------------- Start Navigation -------------------- */
	#nav{
        position: relative;
    }
    #nav img{
        vertical-align:middle;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		text-align:center;
		color:#000;
		font-size:20px;
		padding:5px 0px;
		text-decoration:none;
	}
	
	#nav a{
		font-size:18px;	
	}
 
    /* first level */
 
    #nav > ul{
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background-color:#ccc;
		margin-top:8px !important;
		padding-bottom:10px;
    }
	#nav:target > ul{
		display: block;
	}
	#nav > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
		padding:4px 0px;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	/*End Navigation*/
	
	.grid-two-thirds-one-third{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-one-fourth-three-fourths{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-two-fifths-three-fifths{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-three-fifths-two-fifths{
    	-ms-grid-columns:1fr;
		grid-template-columns:1fr;
    }
	
	.grid-two-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-three-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-four-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.footer{
		text-align:center;
	}
	
	.footer-left{
		float:none;
		padding:10px 0px 0px 0px;
		display:block;
	}
	
	.footer-right{
		float:none;
		padding:0px 0px 0px 0px;
		display:block;
	}
	
}

@media only screen and (max-width:600px){
	
}

@media only screen and (max-width:480px){
	
}


.hero_container {
    width: 100%;
    min-height: 500px; 
    padding: 40px 20px;
    background-image: url(images/img1.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: left;
	
}

/* .glass {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
    color: white;
    text-align: left;
    z-index: 1;
} */

.hero_container .grid-two-columns {
    max-width: 1400px;
    margin: 0 auto;
    gap: 2rem;
    align-items: center;
}

.hero_container h1 {
    font-size: 5rem; /* adapt to PSD */
    margin-bottom: 1rem;
	
	
}

.hero_container p {
    font-size: 2rem;
}

.hero_container img {
    max-height: 400px;
    width: auto;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero_container img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

.merch-card {

 	margin: auto;
  max-width: 320px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}

.merch-card:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

.merch-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.merch-details {
  padding: 15px;
  text-align: left;
}

.merch-title {
  font-size: 1.2rem;
  margin: 10px 0 5px;
  color: #333;
}

.merch-desc {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 10px;
}

.merch-actions {
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}

.buy-btn {
  background-color: #000;
  color: #fff;
}

.buy-btn:hover {
  background-color: #222;
}

.card{
	max-height: 400px;
	height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 20px;
}

.img-card {
    height: 300px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.img-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
    transition: background 0.3s ease;
}

.img-card:hover::before {
    background: rgba(0, 0, 0, 0.2); 
}

.img-caption {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
    letter-spacing: 1px;
}


.footer {
    background:#978b8b;
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 40px 20px 20px;
    font-family: 'Caveat', cursive;
}



.footer-bottom {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

/* Gallery Styles */
.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.gallery-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #333;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    padding: 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-item-overlay {
    transform: translateY(0);
}

.gallery-item-title {
    font-size: 1.1em;
    margin: 0;
    font-weight: bold;
}

.gallery-item-description {
    font-size: 0.9em;
    margin: 5px 0 0 0;
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-content img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-close:hover {
    color: #ccc;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px;
    user-select: none;
}

.lightbox-nav:hover {
    color: #ccc;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-caption {
    text-align: center;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    
    .gallery-item img {
        height: 150px;
    }
    
    .lightbox-nav {
        font-size: 30px;
        padding: 5px 10px;
    }
    
    .lightbox-close {
        right: 20px;
        font-size: 30px;
    }
}