html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

	body {
	  margin: 0;
		font-family: 'Open Sans', Arial, sans-serif;
		font-weight: 400;
		line-height: 1.6;
	  color: #fff;
	  background: url('back_v2.jpg') no-repeat center center fixed;
	  background-size: cover;
	  position: relative;
	  text-align: center;
	  overflow-x: hidden;
	}

	body::before {
	  content: '';
	  position: fixed;
	  inset: 0;                   /* shorthand for top:0; right:0; bottom:0; left:0 */
	  background: rgba(0,0,0,0.7);
	  z-index: -1;
	}
	
	a {
	  color: #ddd;
	  text-decoration: none;
	  font-weight: 600;
	  	  transition: color 0.5s;
	}

	a:hover {
	  text-decoration: underline;
	  color: #b10d00;
	  transition: color 0.5s;
	}
	
	.content {
		max-width: 1000px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		background: #000000bb;
    padding: 40px;
	}
	

	.social-icons {
	  margin: 20px;
	  display: none;
	}

	.social-icons a {
	  margin: 0 10px;
	  display: inline-block;
	}

	.social-icons img {
	  height: 40px;
	}

	.logo {
	  margin: 20px 0;
	}

	.logo img {
	  width: 600px;
	height: 610px;	  /* Larger logo */
	  max-width: 90%;
	}
	
	.subtitle img {
	  width: 600px; /* Larger logo */
	  max-width: 90%;
	}

	.subtitle {
	  font-size: 40px;
	  font-weight: bold;
	  margin: 20px 0;
	}
	
	.bio-photo img {
		width: 600px;
		height: 675px;
	  object-fit: cover;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
	  transition: transform 0.3s ease-in-out; /* Zoom effect */
	  border: 1px solid #b10d00;
	}
	

	.bio, .discography, .music, .videos, .photos, .contact, .facebook, .tws, .partner {
	  margin: 50px auto;
	  width: 90%;
	  max-width: 800px;
	  	/*	padding: 40px;
	 	background: #00000080;
		border-radius: 40px;*/
	}

	.bio p, .tws p {
	  line-height: 1.8;
	  font-size: 18px;
	      text-align: justify;
	}

	.section-title {
	  margin-top: 0;
	  margin-bottom: 40px;
	  font-size: 48px;

	}

	.member-grid {
	  display: flex;
	  justify-content: center;
	  flex-wrap: wrap;
	  gap: 25px;
	}

	.member {
	  text-align: center;
	}

	.member a {
	  display: inline-flex;
	  overflow: hidden;
	  border: 2px solid #ccc;
	  border-radius: 12px;
	}

	.member img {
	  width: 200px; /* Fixed width for uniformity */
	  height: auto;
	  object-fit: cover;

	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
	  transition: transform 0.3s ease-in-out; /* Zoom effect */
	}

	.member img:hover {
	  transform: scale(1.1); /* Zoom effect on hover */
	}

	.member p {
	  margin-top: 15px;
	  font-size: 16px;
	  font-weight: bold;
	}


	.photos .gallery {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Flexible grid layout */
	  gap: 20px; /* Spacing between items */
	  justify-content: center;
	}

	.photos .gallery a {
	  display: block;
	  position: relative;
	  overflow: hidden;
	  /* border-radius: 12px;  Rounded corners */
	  background: rgba(0, 0, 0, 0.2); /* Optional background for empty spaces */
	  border: 2px solid #ccc;
	  transition: border-color 0.5s;
	  aspect-ratio: 1 / 1;
	}
	
	.photos .gallery a:hover {
	border: 2px solid #b10d00;
	transition: border-color 0.5s;
	}
	
	.photos img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* Ensures the image fills the container */
	  transition: transform 0.3s ease-in-out; /* Zoom effect on hover */
	}

	.photos img:hover {
	  transform: scale(1.1); /* Zoom effect */
	}


	iframe {
	  margin: 20px auto;
	  display: block;
	 /* border-radius: 12px; */
	  border: 2px solid #ccc;
	  	transition: border-color 0.5s;
	}
	
	iframe:hover {
	border: 2px solid #b10d00;
	transition: border-color 0.5s;
	}
	
	
	
	.contact {
	  text-align: center;
	}
	
	.contact p {
	  line-height: 1.8;
	  font-size: 18px;
	}

	.footer {
	  margin-top: 50px;
	  font-size: 16px;
	  color: #555;
	}

	.footer a {
	  color: #fff;
	  
	}

	.section-divider {
	  margin: 40px auto; 
	  width: 100%; 
	  border-bottom: 3px solid #b10d00;
	}
	
	.discography {
margin: 50px auto;
    width: 90%;
    max-width: 800px;
	}

	
	.discography-table {
    border-collapse: collapse;

	margin: 0 auto;
  }
  
  	td.band-name {
	/*	padding: 10px 15px 15px 15px !important; */
	}
	
  .discography-table td {
    border: none;
    padding: 25px; /* adjust as needed */
    text-align: left;
    vertical-align: top;   /* vertical alignment */
  }
  
  .discography-table {
	  font-size: 11pt;
  }
  
  .discography-table strong {
	  font-size: 12pt;
  }
  
  
   .discography-table tr {

   border-bottom: 2px solid #ccc;
  }
  
  .discography-table tr:last-child {
  border-bottom: none;
}
  .discography-table img {
	width: 200px;
  }
  
  .band-name {
	font-size: 14pt;
	}
	
.partner-logos img {
	margin: 20px;
	width: 350px;
	/* border-radius: 20px; */
}
	
	.tws h2 {
		margin-bottom: 0;
		line-height: 1.4;
	}

	.tws h3 {
		margin-top: 0;
		font-size: 16pt;
	}
	
	.tws-logo {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	.pdf-logo {
		margin: 0;
	}
	
	/* full-screen dark overlay hidden by default */
#lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* when visible */
#lightbox.visible {
  visibility: visible;
  opacity: 1;
}

/* container so we can position the close button */
#lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

/* image scales down to fit viewport */
#lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  border: 2px solid #b10d00;
}

/* close “×” in top-right corner */
#lightbox-close {
  position: absolute;
  top: -15px; right: -15px;
  color: #fff;
  background: #000;
  border: none;
  font-size: 24px;
  line-height: 1;
  width: 35px; height: 35px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #b10d00;
}

#lightbox-close:hover {
	background: #b10d00;
}
	
@media (max-width: 768px) {
	
	
 .content {
    width: 100%;          /* go all the way across */
    max-width: none;      /* ignore any desktop‐only caps */
    padding: 20px;        /* or whatever inner gutter you like */
    margin: 0;            /* flush to the edges */
    box-sizing: border-box;
  }
	
  /* General Typography Adjustments */
  .section-title {
    font-size: 28px; /* Smaller section titles */
  }

  .subtitle {
    font-size: 20px; /* Smaller subtitle text */
  }

	.bio, .discography, .music, .videos, .photos, .contact, .facebook, .tws {
	  margin: 20px auto;
	  width: 90%;
	  max-width: 400px;
	  padding: 10px;
	}	

  .bio p, .contact p, .tws p {
    font-size: 14px; /* Adjust text for better readability on smaller screens */
  }

  .bio-photo img {
    width: 90%; /* Scale down logo */
    max-width: 400px; /* Limit max width */
  }
  
  .partner-logos img {
	  max-width: 250px;
	/* border-radius: 20px; */
}

	.tws-logo {
		padding-top: 20px;
		padding-bottom: 20px;
			  max-width: 300px;
	}
	
	.discography-table, .discography-table strong {
		font-size: 9pt;
	}
	
	.discography-table td {
		padding: 5px;
	}
	
	.band-name {
		font-size: 10pt;
	}

	.discography-table img {
    width: 100px;
	}

  /* Social Icons */
  .social-icons img {
    height: 25px;
  }

  /* Member Section */
  .member img {
    width: 150px; /* Smaller member photos */
  }

  .member-grid {
    gap: 15px; /* Reduce spacing between members */
  }

  /* Promo Photos Section */
  .photos .gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Smaller thumbnails */
    gap: 15px; /* Reduce spacing between thumbnails */
  }

  /* Embedded Media (YouTube, Spotify) */
  iframe {
    width: 100%; /* Full width for mobile */
    height: 200px; /* Adjust height for better proportions */
  }

  /* Section Divider */
  .section-divider img {
    width: 90%; /* Scale down dividers */
    max-width: 600px;
  }

  /* Footer */
  .footer {
    font-size: 14px; /* Adjust footer text size */
  }
  
}