/* Base Variables */
:root {
  --font-family: Georgia, serif;
  --header-height: 60px;
}

/* Theme Classes */

/* Theme G->B */
.theme-gb {
  --background-color: #155B3D;
  --hover-color: #33B8CC;
  --text-color: #EBF8FA;
  --light-text-color: #EBF8FA;
  --header-bg-color: #155B3D;
  --footer-bg-color: #1D305D;
  --social-icon-color: #EBF8FA;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #00554B;
  --liveevents-bg-color: #185A5C;
  --ourartists-bg-color: #1A4C5C;
  --musicvideo-bg-color: #1B3E5D;

  --featuredevent-bg-color: #1A4C5C;
  --featuredevent-text-color: #EBF8FA;
}

/* Theme R->B */
.theme-rb {
  --background-color: #6B0C0C;
  --hover-color: #8B2264;
  --text-color: #F1D1F4;
  --light-text-color: #F1D1F4;
  --header-bg-color: #6B0C0C;
  --footer-bg-color: #1E1D5D;
  --social-icon-color: #F1D1F4;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #86225A;
  --liveevents-bg-color: #702D84;
  --ourartists-bg-color: #51439A;
  --musicvideo-bg-color: #353CA5;
}

/* Theme B->R */
.theme-br {
  --background-color: #1E1D5D;
  --hover-color: #8B2264;
  --text-color: #F1D1F4;
  --light-text-color: #F1D1F4;
  --header-bg-color: #1E1D5D;
  --footer-bg-color: #6B0C0C;
  --social-icon-color: #F1D1F4;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #353CA5;
  --liveevents-bg-color: #51439A;
  --ourartists-bg-color: #702D84;
  --musicvideo-bg-color: #86225A;
}

/* Plain Red */
.theme-red {
  --background-color: #6B0C0C;
  --hover-color: #8B2C2C;
  --text-color: #FAD4D4;
  --light-text-color: #FAD4D4;
  --header-bg-color: #6B0C0C;
  --footer-bg-color: #6B0C0C;
  --social-icon-color: #FAD4D4;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #6B0C0C;
  --liveevents-bg-color: #6B0C0C;
  --ourartists-bg-color: #6B0C0C;
  --musicvideo-bg-color: #6B0C0C;
}

/* Plain Green */
.theme-green {
  --background-color: #155B3D;
  --hover-color: #2D7F57;
  --text-color: #DAF1E8;
  --light-text-color: #DAF1E8;
  --header-bg-color: #155B3D;
  --footer-bg-color: #155B3D;
  --social-icon-color: #DAF1E8;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #155B3D;
  --liveevents-bg-color: #155B3D;
  --ourartists-bg-color: #155B3D;
  --musicvideo-bg-color: #155B3D;
}

/* Plain Blue */
.theme-blue {
  --background-color: #1D305D;
  --hover-color: #3B4E80;
  --text-color: #D4D9F7;
  --light-text-color: #D4D9F7;
  --header-bg-color: #1D305D;
  --footer-bg-color: #1D305D;
  --social-icon-color: #D4D9F7;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #1D305D;
  --liveevents-bg-color: #1D305D;
  --ourartists-bg-color: #1D305D;
  --musicvideo-bg-color: #1D305D;
}

/* Red with Darker Header and Footer */
.theme-red2 {
  --background-color: #5A0A0A;
  --hover-color: #8B2C2C;
  --text-color: #FAD4D4;
  --light-text-color: #FAD4D4;
  --header-bg-color: #5A0A0A;
  --footer-bg-color: #5A0A0A;
  --social-icon-color: #FAD4D4;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #6B0C0C;
  --liveevents-bg-color: #6B0C0C;
  --ourartists-bg-color: #6B0C0C;
  --musicvideo-bg-color: #6B0C0C;
}

/* Green with Darker Header and Footer */
.theme-green2 {
  --background-color: #104C36;
  --hover-color: #2D7F57;
  --text-color: #DAF1E8;
  --light-text-color: #DAF1E8;
  --header-bg-color: #104C36;
  --footer-bg-color: #104C36;
  --social-icon-color: #DAF1E8;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #155B3D; /* Main green */
  --liveevents-bg-color: #155B3D;
  --ourartists-bg-color: #155B3D;
  --musicvideo-bg-color: #155B3D;
}

/* Blue with Darker Header and Footer */
.theme-blue2 {
  --background-color: #182850;
  --hover-color: #3B4E80;
  --text-color: #D4D9F7;
  --light-text-color: #D4D9F7;
  --header-bg-color: #182850;
  --footer-bg-color: #182850;
  --social-icon-color: #D4D9F7;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #1D305D; /* Main blue */
  --liveevents-bg-color: #1D305D;
  --ourartists-bg-color: #1D305D;
  --musicvideo-bg-color: #1D305D;
}

/* Red with Gradient */
.theme-red-gradient {
  --background-color: #5A0A0A;
  --hover-color: #8B2C2C;
  --text-color: #FAD4D4;
  --light-text-color: #FAD4D4;
  --header-bg-color: #5A0A0A;
  --footer-bg-color: #470909;
  --social-icon-color: #FAD4D4;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #6B0C0C;
  --liveevents-bg-color: #601010;
  --ourartists-bg-color: #541212;
  --musicvideo-bg-color: #490E0E;
}

/* Green with Gradient */
.theme-green-gradient {
  --background-color: #104C36;
  --hover-color: #2D7F57;
  --text-color: #DAF1E8;
  --light-text-color: #DAF1E8;
  --header-bg-color: #104C36;
  --footer-bg-color: #0C3D2D;
  --social-icon-color: #DAF1E8;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #155B3D;
  --liveevents-bg-color: #145035;
  --ourartists-bg-color: #124830;
  --musicvideo-bg-color: #103F2A;
}

/* Blue with Gradient */
.theme-blue-gradient {
  --background-color: #182850;
  --hover-color: #3B4E80;
  --text-color: #D4D9F7;
  --light-text-color: #D4D9F7;
  --header-bg-color: #182850;
  --footer-bg-color: #141E43;
  --social-icon-color: #D4D9F7;

  /* Section Background Colors */
  --home-bg-image: url('wizards.jpeg');
  --aboutus-bg-color: #1D305D;
  --liveevents-bg-color: #1A2B54;
  --ourartists-bg-color: #17264C;
  --musicvideo-bg-color: #141F43;
}

/* General Styles */
body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding-top: var(--header-height); /* Adjust for fixed header */
  color: var(--text-color);
  background-color: var(--background-color);
  overflow-x: hidden;
}

.container {
  padding: 15px;
}

/* Header Styles */
header {
  background-color: var(--header-bg-color);
  color: var(--light-text-color);
  height: var(--header-height);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

header h1 {
  font-size: 1.5em;
  margin: 0;
  font-weight: bold;
}

/* Navigation Styles */
.navbar {
  background-color: var(--header-bg-color);
}

.navbar-brand {
  font-size: 1.5em;
  font-weight: bold;
}

.navbar-nav .nav-link {
  color: var(--light-text-color) !important;
  font-weight: bold;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: var(--hover-color) !important;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  color: var(--light-text-color);
}

.social-links .nav-link {
  color: var(--social-icon-color) !important;
  font-size: 1.5em;
  padding: 0 10px;
}

.social-links .nav-link:hover {
  color: var(--hover-color) !important;
}

/* Home Section */
.Home {
  height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: var(--home-bg-image);
  background-size: cover;
  background-position: center;
  color: var(--light-text-color);
  text-align: center;
}

.Home h1 {
  font-size: 4em; /* Adjust the size as per your original requirement */
  font-weight: bold;
  margin-bottom: 20px; /* Spacing between heading and text */
}

.Home p {
  font-size: 1.8em;
  font-weight: bold;
}

@media (max-width: 768px) {
  .Home h1 {
    font-size: 3em; /* Responsive size for smaller screens */
  }

  .Home p {
    font-size: 1.4em; /* Responsive text size */
  }
}


/* Sections */
section {
  padding: 100px 0;
  text-align: center;
  color: var(--text-color);
}

#about {
  background-color: var(--aboutus-bg-color);
}

#artists {
  background-color: var(--ourartists-bg-color);
}

#videos {
  background-color: var(--musicvideo-bg-color);
}

#live-events {
  background-color: var(--liveevents-bg-color);
}

/* Section Headings */
section h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: var(--text-color);
}

/* Section Paragraphs */
section p {
  font-size: 1.2em;
  line-height: 1.6;
  color: var(--text-color);
}

/* Live Events Section */
.event-details strong {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.3em;
}

.event-details p {
  margin: 0;
  line-height: 1.5;
}

.LiveEvents .col-md-6 img {
  max-width: 100%;  /* Ensure image does not exceed container width */
  width: auto;      /* Maintain aspect ratio */
  height: auto;     /* Prevent distortion */
  max-height: 400px; /* Constrain the maximum height */
  object-fit: cover; /* Crop image if needed to fit height */
}

/* Featured Event Subsection */
.featured-event {
  background-color: var(--featuredevent-bg-color);
  color: var(--featuredevent-text-color);
  padding: 30px;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.featured-event-container {
  padding-bottom: 30px
}

.featured-event iframe {
  margin-bottom: 20px;
}

.featured-event p, .featured-event h3 {
  margin-top: 0px;
  margin-bottom: 20px;
  text-align: center;
  color: var(--featuredevent-text-color);
}

.event-image {
  width: 100%;      /* Full width of the container */
  max-width: 444px; /* Limit width to 444px */
  height: auto;     /* Maintain aspect ratio */
  object-fit: cover; /* Ensure the image covers the container */
  max-height: 400px; /* Constrain height if necessary */
}

.LiveEvents .col-md-6 {
  flex: 0 0 100%; /* Allow the column to take up the full width on mobile */
  max-width: 100%; /* Prevent overflow */
}

.LiveEvents {
  overflow: hidden; /* Ensure no overflow of images/content */
}

@media (max-width: 768px) {
  .LiveEvents .row {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  /* Mobile layout */
  .LiveEvents .col-md-6 {
    width: 100%;
    margin-bottom: 10px;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .event-details strong {
    order: 1; /* Strong (title) goes first */
  }

  .LiveEvents .col-md-6 iframe, .LiveEvents .col-md-6 img {
    order: 2; /* Video or image goes second */
  }

  .event-details p {
    order: 3; /* Paragraph goes last */
  }

  .event-image {
    width: 100% !important;  /* Full width on mobile, overrides inline width */
    height: auto !important; /* Maintain aspect ratio, overrides inline height */
    object-fit: contain;     /* Ensure the entire image is visible on mobile */
  }
}



/* Artist Profiles */
.artist-profile {
  text-align: center;
  margin-bottom: 20px;
}

.artist-profile img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.artist-profile h3 {
  font-size: 1.5em;
  color: var(--text-color);
  margin-top: 15px;
  font-weight: bold;
}

.artist-profile p {
  font-size: 1em;
  color: var(--text-color);
  margin: 10px 0;
}

.spotify-link {
  margin-top: 10px;
}

.spotify-link a {
  color: #1DB954; /* Spotify Green */
  font-size: 1em;
  text-decoration: none;
}

@media (max-width: 768px) {
  .artist-profile {
    margin-bottom: 40px;
  }
}

/* Music Video Section */
.MusicVideo iframe {
  width: 100%;
  height: 315px;
  margin-bottom: 20px;
}


/* Footer Styles */
footer {
  background-color: var(--footer-bg-color);
  color: var(--light-text-color);
  padding: 20px 50px;
}

footer p {
  margin: 0;
  font-size: 1em;
}

footer a {
  color: var(--light-text-color);
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  color: var(--hover-color);
}

footer .social-links {
  margin-top: 10px;
  justify-content: center;
}

footer .social-links a {
  color: var(--social-icon-color);
  font-size: 1.5em;
  padding: 0 10px;
}

footer .social-links a:hover {
  color: var(--hover-color);
}

/* Additional Styles */
iframe {
  max-width: 100%;
}

@media (max-width: 768px) {
  section {
    padding: 60px 0;
  }

  header h1 {
    font-size: 1.2em;
  }

  /* Adjust the Live Events section on smaller screens */
  .LiveEvents .row {
    flex-direction: column;
  }

  .LiveEvents .col-md-6 {
    width: 100%;
  }
}