* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: #0f0f0f;
  color: #fff;
  line-height: 1.6;
}

.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  padding: 1rem 0;
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: #fff; text-decoration: none; letter-spacing: 1px; }
.nav-links { list-style: none; display: flex; gap: 2.5rem; }
.nav-links a { color: #ddd; text-decoration: none; font-weight: 500; text-transform: uppercase; font-size: 1rem; }
.hamburger { display: none; color: white; font-size: 2.2rem; cursor: pointer; }

.tour-list { display: grid; gap: 2.5rem; }
.tour-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.date { font-size: 2.8rem; font-weight: bold; min-width: 140px; }
.venue { font-size: 1.6rem; flex: 1; }
.location { font-size: 1.3rem; color: #aaa; min-width: 220px; }
.tickets { background: #a52a2a; color: white; padding: 12px 30px; font-size: 1.1rem; }
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0 auto;
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Side-by-side – trigger earlier so it works on tablets/laptops */
@media (min-width: 640px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Cap the width so videos don't become gigantic on big monitors */
@media (min-width: 1000px) {
  .video-grid {
    max-width: 640px;
    margin: 0 auto;
  }
}



3. Make sure .container is defined (add if missing)At the top of your styles.css (near the other base rules), make sure you have:css


.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}



Final StepsPaste the HTML fix into index.html.

Update/replace the CSS in styles.css with the blocks above.

Save both files.

In Dreamweaver Live View:Refresh (circular arrow).

Drag the preview window wide (make it 900px+ wide).

You should now see two videos side-by-side, equal size, neatly centered with space on the sides.


If they are still full-width/stacked on wide screens:Tell me roughly how wide your preview window is (e.g. "looks like 1200px").

Or confirm if the .container max-width is applying (right-click the container area → Inspect → see if max-width: 1400px shows).



This setup works on 99% of sites — we're just missing one tiny constraint. We'll get the side-by-side neat layout back!


Explain CSS grid breakpoints



Responsive image gallery CSS



Make CSS more concise




/* Prevent videos from becoming too large on ultra-wide screens */
@media (min-width: 1200px) {
  .video-grid {
    max-width: 1100px;                  /* or 1000px / 960px - adjust to taste */
    margin: 0 auto;
  }
}
.social-links { text-align: center; margin-top: 3rem; }
.social-links a { color: #fff; margin: 0 2rem; font-size: 1.5rem; text-decoration: none; }

footer { background: #000; padding: 50px 0; text-align: center; font-size: 1rem; color: #666; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #000; flex-direction: column; padding: 1.5rem; text-align: center; }
  .nav-links.active { display: flex; }
  .hamburger { display: block; }
  .tour-item { flex-direction: column; text-align: center; gap: 1.2rem; padding: 1.5rem; }
  h2 { font-size: 3.5rem; }
}
.music a.btn,
.music a[href*="spotify.com"] {
  display: block;
  text-align: center;
  margin: 2rem auto 0;         /* 2rem space above, auto left/right = centered */
  width: fit-content;          /* button shrinks to fit text instead of full width */
}
/* Smooth scrolling for all anchor links */
html {
  scroll-behavior: smooth;
}

/* Offset for fixed navbar so section title isn't hidden */
#tour, #music, #videos, #connect {
  scroll-margin-top: 90px;   /* Increase/decrease this – try 80px, 100px, or measure your navbar height */
}

/* Extra safety for mobile (navbar might be shorter) */
@media (max-width: 768px) {
  #tour, #music, #videos, #connect {
    scroll-margin-top: 70px;
  }
}
.view-all {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;           /* this line centers it horizontally */
  padding: 0.6rem 1.4rem;
  color: #ccc;
  font-size: 1.1rem;             /* normal readable size */
  text-decoration: underline;
  text-align: center;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.view-all:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
/* GW-bigtop2.jpg at top of Music section – smaller & centered */
.music-bigtop-photo {
  display: block !important;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto 2.5rem auto !important;   /* ← this forces perfect centering */
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  object-fit: contain;
}
.section.music .container {
  text-align: center !important;
}
/* Hero Slideshow */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.77);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.85));
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

/* Dots */
.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.dot.active {
  background: white;
  transform: scale(1.3);
}

/* Arrows (optional) */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  font-size: 2.5rem;
  padding: 10px 18px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: all 0.3s;
}

.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

.hero-arrow:hover {
  background: rgba(0,0,0,0.7);
}
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.77);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.85));
}

.hero-content {
  position: relative;
  z-index: 10;
}

.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.dot.active {
  background: white;
  transform: scale(1.3);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 2.5rem;
  padding: 12px 20px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.3s;
}

.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

.hero-arrow:hover {
  background: rgba(0,0,0,0.8);
}
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.85);  /* slight darkening – adjust or remove if too dark */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.65)); /* subtle overlay */
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 10; /* above overlay */
  text-align: center;
}

/* Dots */
.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.dot.active {
  background: white;
  transform: scale(1.3);
}

/* Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 2.5rem;
  padding: 12px 20px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

.hero-arrow:hover {
  background: rgba(0,0,0,0.8);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none; /* prevents clicks on inactive slides */
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1; /* ensures active slide is on top */
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  z-index: 2;
  pointer-events: none;
}
/* New Album Promotion Section */
.album-promo {
  position: relative;
  padding: 80px 0 100px;
  background: #0f0f0f; /* dark background to match site */
  color: #fff;
  text-align: center;
}

.album-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.album-cover-wrapper {
  flex: 1;
  min-width: 300px;
  max-width: 500px; /* adjust size of album cover */
}

.album-cover {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  object-fit: cover;
}

.album-text {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.album-text h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 8vw, 6rem);
  margin-bottom: 0.5rem;
}

.album-text h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
}

.album-text .release-date {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.album-ctas {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Mobile stacking */
@media (max-width: 768px) {
  .album-container {
    flex-direction: column;
    gap: 3rem;
  }

  .album-text {
    text-align: center;
  }
}
/* Restore original button styles in album promo section */
.album-promo .btn,
.album-promo .btn.primary,
.album-promo .btn.secondary {
  display: inline-block;
  padding: 14px 40px;
  margin: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 0;
  transition: all 0.3s;
}

.album-promo .btn.primary {
  background: #a52a2a;
  color: white;
}

.album-promo .btn.primary:hover {
  background: #8b1a1a;
}

.album-promo .btn.secondary {
  background: transparent;
  border: 2px solid #fff;
  color: white;
}

.album-promo .btn.secondary:hover {
  background: white;
  color: #000;
}
/* Band photo just above Connect section */
.band-photo-section {
  padding: 60px 0 40px;          /* space above and below */
  background: #0f0f0f;           /* matches your dark theme */
  text-align: center;
}

.band-photo {
  width: 100%;
  max-width: 1200px;             /* keeps it from getting too huge on big screens */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  display: block;
  margin: 0 auto;                /* centers the photo */
}
/* Image above Spotify player in Music section */
.spotify-above-photo {
  display: block;
  width: 100%;
  max-width: 900px;               /* adjust: 800px smaller, 1200px larger */
  height: auto;
  margin: 2.5rem auto;            /* centered + space above/below */
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  object-fit: contain;            /* shows full image without cropping */
}
/* Full-width image above Spotify player */
.full-width-music-photo {
  width: 100vw;                    /* full viewport width – edge to edge */
  margin-left: calc(-50vw + 50%);  /* centers it perfectly despite full width */
  margin-right: calc(-50vw + 50%);
  margin-top: 2rem;
  margin-bottom: 3rem;             /* space before Spotify */
  overflow: hidden;
  background: #000;                /* fallback if image fails */
}

.full-width-music-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;               /* fills width without distortion */
  max-height: 600px;               /* prevents it from being ridiculously tall – adjust or remove */
}
/* Album promo – left-aligned cover image + right text */
.album-promo .album-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  max-width: 1200px;             /* keeps everything contained */
  margin: 0 auto;
}

.album-cover-wrapper {
  flex: 1 1 45%;                 /* takes ~45% width on desktop */
  max-width: 500px;              /* hard cap on image size – adjust if needed */
  min-width: 300px;
  order: 1;                      /* image first on mobile */
}

.album-cover-left {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  object-fit: contain;           /* shows full image without cropping */
}

/* Text takes remaining space on the right */
.album-text {
  flex: 1 1 50%;
  min-width: 300px;
  order: 2;
  text-align: left;              /* left-aligned text for desktop */
}

/* Mobile stacking – image on top, text below */
@media (max-width: 768px) {
  .album-promo .album-container {
    flex-direction: column;
    gap: 2.5rem;
  }
  
  .album-cover-wrapper,
  .album-text {
    max-width: 100%;
    text-align: center;          /* center text on mobile */
  }
}
/* Album promo – force left/right layout longer */
.album-promo .album-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;                       /* space between image and text */
  flex-wrap: nowrap;               /* ← prevents wrapping until very narrow */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.album-cover-wrapper {
  flex: 0 0 45%;                   /* fixed ~45% width for image */
  max-width: 520px;                /* hard cap – adjust if you want larger/smaller */
}

.album-text {
  flex: 1;                         /* takes remaining space on right */
  text-align: left;
}

/* Only stack on mobile (lower breakpoint) */
@media (max-width: 992px) {        /* ← was 768px, now stays side-by-side longer */
  .album-promo .album-container {
    flex-wrap: wrap;
    gap: 3rem;
  }
  
  .album-cover-wrapper {
    flex: 1 1 100%;
    max-width: 100%;
  }
  
  .album-text {
    text-align: center;
  }
}
/* Make "Duncan's Top Streamed Tracks" all caps like nav text */
.featured {
  text-transform: uppercase;
  font-size: 1.4rem;          /* optional – adjust if you want it bigger/smaller */
  font-weight: 600;           /* optional – makes it bolder to match nav feel */
  letter-spacing: 1px;        /* optional – gives it that clean nav spacing */
  color: #ccc;                /* optional – lighter gray like other secondary text */
  margin: 2rem 0 1.5rem;      /* optional – spacing above/below */
  text-align: center;         /* keeps it centered */
}
.featured {
  text-transform: uppercase;
  font-family: 'Bebas Neue', sans-serif;  /* same font as nav */
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: #ddd;
  margin: 2rem 0;
}
/* Make "Videos" heading all caps like nav text */
.section.videos h2 {
  text-transform: uppercase;
  font-size: 1.5rem;              /* keep your current size, or change to 1.8rem / 2rem if you want it bigger */
  letter-spacing: 4px;            /* wider spacing for that bold nav look */
  font-weight: 700;               /* extra bold if needed */
  margin-bottom: 2rem;            /* slightly less space below to match nav feel */
}
.section.videos h2 {
  text-transform: uppercase;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;              /* bigger for emphasis */
  letter-spacing: 5px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2.5rem;
}
/* Make "View All Dates" all caps like nav text */
.section.tour .view-all {
  text-transform: uppercase;
  font-size: 1.2rem;             /* optional – adjust if you want it bigger/smaller */
  letter-spacing: 2px;           /* wider spacing for clean nav-like look */
  font-weight: 600;              /* bolder to match nav feel */
}
.section.tour .view-all {
  text-transform: uppercase;
  font-family: 'Bebas Neue', sans-serif;   /* same font as nav */
  font-size: 1.4rem;
  letter-spacing: 3px;
  font-weight: 500;
  color: #ddd;
  text-decoration: none;                   /* remove underline if you prefer */
}

.section.tour .view-all:hover {
  color: #fff;
  text-decoration: underline;
}
/* Force "Tour Dates" heading to be centered + all caps like nav text */
.section.tour h2 {
  text-transform: uppercase !important;
  text-align: center !important;
  font-size: 1.8rem;               /* optional – adjust size if you want bigger/smaller */
  letter-spacing: 4px;             /* wider spacing for nav-like feel */
  font-weight: 700;                /* bolder */
  margin-bottom: 2.5rem;           /* space below heading */
}
/* Make "Connect" heading centered + all caps like the others */
.section.connect h2 {
  text-transform: uppercase !important;
  text-align: center !important;
  font-size: 1.8rem;               /* same size as others – adjust if you want smaller */
  letter-spacing: 4px;
  font-weight: 700;
  margin-bottom: 2.5rem;
}
/* Photo replacing heading + text in Connect section */
.connect-quotes-photo {
  display: block;
  width: 100%;
  max-width: 700px;                /* ← adjust: 600px smaller, 900px larger */
  height: auto;
  margin: 0 auto 3rem auto;        /* centered + nice space below before social links */
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  object-fit: contain;             /* shows full image without cropping */
}
/* Full-width breakout for Quotes.jpg in Connect section */
.full-width-quotes-photo {
  width: 100vw;                       /* full browser window width */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 2rem;
  margin-bottom: 3rem;                /* space before social links – adjust to taste */
  overflow: hidden;
  background: #000;                   /* fallback if image fails */
}

.full-width-quotes-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;                  /* fills width, crops if needed */
  max-height: 700px;                  /* prevents it from being too tall – change to 600px or remove */
}
/* Bookings / Enquiries text – all caps + email */
.bookings-info {
  text-align: center;
  padding: 40px 0 20px;
  background: #0f0f0f;  /* matches site dark theme */
}

.bookings-info h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;           /* adjust size to taste */
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: 0.8rem;
}

.bookings-info p {
  font-size: 1.3rem;
  color: #ccc;
  margin: 0;
}

/* Optional: anchor offset for fixed nav bar */
#bookings {
  scroll-margin-top: 90px;     /* space below fixed nav – adjust if needed */
}
/* GW-bands.jpg above Connect – capped to ~2/3 width */
.band-photo-wrapper {
  text-align: center;
  margin: 3rem auto;               /* space above/below – adjust to taste */
}

.band-photo {
  width: 100%;
  max-width: 66.66vw;              /* ≈ 2/3 of viewport width on desktop */
  height: auto;
  display: block;
  margin: 0 auto;                  /* centers perfectly */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  object-fit: contain;             /* shows full image without cropping */
}

/* On mobile – full width */
@media (max-width: 768px) {
  .band-photo {
    max-width: 100%;               /* full width on phones */
  }
}
/* Make "View All Music" look like nav bar text – all caps, Bebas Neue font */
.music .btn[href*="spotify.com"] {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.6rem;                    /* adjust size to match nav feel – try 1.8rem for bigger */
  text-transform: uppercase !important;
  letter-spacing: 3px;                  /* wider spacing like nav */
  font-weight: 500;
  text-decoration: none;
  padding: 12px 30px;                   /* keep button shape */
  background: #a52a2a;                  /* keep original primary color */
  color: white;
  border-radius: 0;
  transition: all 0.3s;
  display: inline-block;
  margin: 2rem auto;                    /* centered below Spotify */
  width: fit-content;
}

.music .btn[href*="spotify.com"]:hover {
  background: #8b1a1a;
  color: white;
}
/* Center "View All Music" button below Spotify */
.center-button {
  text-align: center;
  margin: 2.5rem 0 1rem;           /* space above/below – adjust if needed */
}

.center-button .btn {
  display: inline-block;
  /* keep all your original .btn styles here – they will inherit */
}
/* Center "View All Music" button in Music section */
.music .btn[href*="spotify.com"] {
  display: block !important;
  text-align: center !important;
  margin: 2rem auto 1rem auto !important;  /* centers horizontally + spacing */
  width: fit-content !important;           /* button only as wide as its text */
}
/* Make "View All Videos" match "View All Music" – all caps, nav-like style */
.section.videos .view-all {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.6rem !important;             /* same size as View All Music – adjust if needed */
  text-transform: uppercase !important;     /* forces ALL CAPS */
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  background: #a52a2a !important;           /* same red as primary buttons */
  color: white !important;
  border-radius: 0 !important;
  display: block !important;
  text-align: center !important;
  margin: 2rem auto 1rem auto !important;   /* centered + spacing */
  width: fit-content !important;
  transition: all 0.3s !important;
}

.section.videos .view-all:hover {
  background: #8b1a1a !important;
  color: white !important;
}
/* Make "View All Dates" match the nav bar style – all caps, Bebas Neue font */
.section.tour .view-all {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.6rem !important;                    /* same size as View All Music */
  text-transform: uppercase !important;            /* forces ALL CAPS */
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  background: #a52a2a !important;                  /* same red button style */
  color: white !important;
  border-radius: 0 !important;
  display: block !important;
  text-align: center !important;
  margin: 2rem auto 1rem auto !important;          /* centered + spacing */
  width: fit-content !important;
  transition: all 0.3s !important;
}

.section.tour .view-all:hover {
  background: #8b1a1a !important;
  color: white !important;
}
/* Social links styled as buttons – same look as View All Music/Videos/Dates */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;                    /* space between buttons */
  margin-top: 2.5rem;             /* space above social buttons */
}

.social-links a.social-btn,
.social-links a {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.4rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 28px !important;
  background: #a52a2a !important;       /* same red as primary buttons */
  color: white !important;
  border-radius: 0 !important;
  transition: all 0.3s !important;
  display: inline-block !important;
}

.social-links a.social-btn:hover,
.social-links a:hover {
  background: #8b1a1a !important;
  color: white !important;
  transform: translateY(-2px);          /* subtle lift on hover */
}

/* Mobile stacking – buttons stack vertically if screen is too narrow */
@media (max-width: 768px) {
  .social-links {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}
/* socials-bar.jpg just above social links in Connect section */
.connect-socials-bar {
  display: block;
  width: 100%;
  max-width: 900px;                /* ← adjust if you want it smaller/larger */
  height: auto;
  margin: 0 auto 2.5rem auto;      /* centered + space below before social links */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  object-fit: contain;             /* shows full image without cropping */
}
/* Center the text/buttons inside the right-hand album-text column */
.album-text {
  flex: 1;
  display: flex;
  justify-content: center;          /* centers the inner content horizontally */
  align-items: center;              /* vertical center if needed */
}

.album-text-inner {
  text-align: center;               /* centers all text and buttons inside */
  max-width: 400px;                 /* optional – prevents it from stretching too wide */
}

.album-text h1,
.album-text h2,
.album-text .release-date,
.album-ctas {
  text-align: center;               /* reinforces centering */
}

/* Optional: make heading even more prominent */
.album-text h2 {
  text-transform: uppercase !important;
  font-size: 3rem;                  /* adjust size to taste – bigger for impact */
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
}
/* Increase gap between date / venue / location in Tour rows */
.tour-item {
  gap: 4.2rem !important;           /* ← bigger space between columns – try 2rem or 3rem if needed */
}
/* Bio text – match Vince Gill style: serif, readable, warm */
.bio-text {
  max-width: 800px;                   /* narrower column for long text – adjust to taste */
  margin: 0 auto 3rem auto;           /* centered on page + space below */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.25rem;                 /* ≈20px – comfortable reading size */
  line-height: 1.75;                  /* generous breathing room between lines */
  color: #e0e0e0;                     /* soft light gray on dark bg – high readability */
  font-weight: 400;                   /* normal weight – not bold */
  text-align: left;                   /* natural reading flow */
  letter-spacing: normal;
}

/* Optional: first-letter emphasis or slight indent if you want classic look */
.bio-text:first-letter {
  font-size: 2.5rem;
  float: left;
  margin: 0 0.2rem 0 0;
  line-height: 0.9;
  font-weight: bold;
}
/* Lock horizontal scroll / floating on mobile */
html, body {
  overflow-x: hidden !important;      /* blocks left/right swipe into blank space */
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* Clip any overflowing full-width elements */
.hero, .full-width-music-photo, .full-width-quotes-photo, .band-photo-section {
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* Ensure containers never cause overflow */
.container, .album-container, .tour-list, .video-grid {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
/* Fix YouTube embeds – ensure they are interactive and visible */
.video-wrapper,
.video-wrapper iframe {
  pointer-events: auto !important;
  overflow: visible !important;
  z-index: 10 !important;
}

.video-grid,
.section.videos .container,
.section.videos {
  overflow: visible !important;
  pointer-events: auto !important;
}
/* Full-width, centered breakout for GW-bigtop2.jpg in bio section */
.full-width-bio-photo {
  width: 100vw;                       /* full viewport width – edge to edge */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 2rem;
  margin-bottom: 3rem;                /* space before bio text – adjust to taste */
  overflow: hidden;
  background: #000;                   /* fallback if image fails */
}

.full-width-bio-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;                  /* fills width, crops if needed */
  max-height: 600px;                  /* prevents extreme height – change to 800px or remove for full height */
}