/* Master CSS: styles.css */

/* =========== Base Styles =========== */
* {
  font-family: "Instrument Sans", sans-serif;
  margin: 0;
  padding: 0;
}
html, body {
  overflow-x: hidden;
}
/* Text element colors */
h1, h2, h3, h4, h5, h6, p {
  color: #212529;
}
/* Gradient text for headings (Index pages) */
h1.gradient-text, h2.gradient-text, h3.gradient-text, h4.gradient-text, h5.gradient-text, h6.gradient-text {
  background: -webkit-linear-gradient(#06186b, #0a1441);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Hero title override for Index */
h1.hero-title {
  background: none !important;
}
/* =========== Navbar Styles =========== */
.navbar {
  background-color: #17181e;
  position: relative;
  z-index: 10;
}
.navbar-brand {
  color: #d5d6d8 !important;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1px;
}
.navbar-nav .nav-link {
  color: #d5d6d8 !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}
.navbar-nav .nav-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #d5d6d8;
  transition: width 0.3s;
  margin-top: 4px;
}
.navbar-nav .nav-link:hover::after {
  width: 100%;
}
.navbar-nav .nav-link:hover {
  opacity: 0.8;
  color: #E3AA2E !important;
  text-decoration: none;
}
/* =========== Section Headings =========== */
h5 {
  font-size: 2rem;
}
/* =========== Page-Specific Hero Backgrounds =========== */
#main.main-fantasy {
  background-color: #313639;
  height: 100vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(32, 81, 64) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(45, 35, 35, 0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-fender {
  background-color: #331f1f;
  height: 100vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(110, 29, 29) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(172, 17, 17, 0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-humana {
  background-color: #171716;
  height: 100vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(13, 90, 41) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(10, 75, 35, 0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-christie {
  background-color: #0b0d17;
  height: 100vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* =========== Index Hero Section =========== */
.hero-section {
  position: relative;
  background: url('../assets/img/fenderGuitar.jpg') center/cover no-repeat;
  height: clamp(400px, 100vh, 700px);
  overflow: hidden;
}
.hero-section nav.navbar {
  background: none;
  z-index: 2;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url('assets/img/dustNoise.png'),
    radial-gradient(circle at 50% 42%, rgba(17,19,155,0.10) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(60,87,240,0.85) 0%, transparent 75%),
    radial-gradient(circle at 80% 80%, rgba(16,13,207,0.85) 0%, transparent 75%);
  background-size: cover, auto, cover, cover, cover;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center, center;
  background-blend-mode: normal, overlay, screen, screen, screen;
  pointer-events: none;
  z-index: 1;
}
.hero-title {
  position: relative;
  z-index: 1;
  color: #d5d6d8;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 24px;
}
/* =========== Project Info Section =========== */
#projectInfo .section-container {
  margin-top: 2rem;
}
/* =========== Utilities & Components =========== */
.leadIn3 {
  font-weight: 700;
  font-size: 1.5rem;
  color: #d5d7e1;
}
.content-container2 {
  max-width: 750px;
  margin: 0 auto;
}
/* Custom list bullets */
ul.custom-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.custom-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
ul.custom-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.2em;
  color: #1F3727;
}
p.listItem {
  font-size: 1.3rem;
  margin: 0 0 0 36px;
  position: relative;
  bottom: 2px;
}
/* Custom list‐item paragraphs */
p.listItem {
  font-size: 1.3rem;
  margin: 0 0 0 36px;
  position: relative;
  bottom: 16px;
}
/* Project Info card styling on mobile */
@media (max-width: 575.98px) {
  #projectInfo .section-container {
    background-color: rgba(255,255,255,0.08);
    padding: 1rem;
    margin: 1.5rem 2rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

/* Responsive tweaks for hero text */
@media (max-width: 991.98px) {
  .hero-title {
    font-size: 2.5rem;
  }
}
@media (max-width: 575.98px) {
  .hero-title {
    font-size: 1rem;
  }
}

/* Large-screen adjustments */
@media (min-width: 992px) {
  #main h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main .leadInProject {
    font-size: 1.5rem;
  }
}

/* Extra-large-screen adjustments */
@media (min-width: 1200px) {
  #main h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main .leadInProject {
    font-size: 1.5rem;
  }
}

/* Mobile phones only */
@media only screen and (max-width: 480px) {
  .hero-title {
    font-size: 2rem !important;
    line-height: 1.3 !important; /* tighter line height for mobile */
  }
}

/* ==== Inline Overrides for fantasy.html ==== */

/* Fantasy‐specific text color for hero */
#main h1,
#main p {
  color: #d5d6d8 !important;
}
/* Larger font sizes on big screens */
@media (min-width: 992px) {
  #main h1 {
    font-size: 3.5rem;
  }
  #main .leadInProject {
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  h1.hero-title {
    font-size: 8rem;
  }
  #main .leadInProject {
    font-size: 1.5rem;
  }
}

/* Mobile‐only tweaks for project info cards */
@media (max-width: 575.98px) {
  #projectInfo .section-container {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 1rem;
    margin: 1.5rem 2rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* Navbar adjustments on small screens */
@media (max-width: 767px) {
  .navbar-nav {
    flex-direction: row !important;
    justify-content: flex-end;
  }
  .nav-link {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
  }
}
/* Limit logo heights in your Swiper slides */
.swiper-slide img {
  max-height: 40px;
  object-fit: contain;
}
/* ==== Inline Overrides for fender.html ==== */
/* Fender page hero background */
#main.main-fender {
  background-color: #530f0f;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(89, 18, 18) 0%, #554f4f00 60%),
    radial-gradient(circle at 80% 80%, rgba(45, 35, 35, 0.3) 0%, #66252500 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Fender-specific hero text color */
#main.main-fender h1,
#main.main-fender p {
  color: #d5d6d8;
}
/* Fender: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}

/* ==== Inline Overrides for fantasy.html ==== */
/* Fantasy-specific hero text color */
#main.main-fantasy h1,
#main.main-fantasy p {
  color: #d5d6d8;
}
/* Fantasy: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-fantasy h1 {
    font-size: 3.5rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  h1.hero-title {
    font-size: 3rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.5rem;
  }
}

/* ==== Inline Overrides for christie.html ==== */
/* Christie page hero background */
#main.main-christie {
  background-color: #0b0d17;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Christie-specific hero text color */
#main.main-christie h1,
#main.main-christie p {
  color: #d5d6d8;
}
/* Christie: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-christie h1 {
    font-size: 3.5rem;
  }
  #main.main-christie .leadInProject {
    font-size: 1.25rem;
  }
}

/* ==== Inline Overrides for fender.html ==== */
/* Fender page hero background */
#main.main-fender {
  background-color: #530f0f;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(89, 18, 18) 0%, #554f4f00 60%),
    radial-gradient(circle at 80% 80%, rgba(45, 35, 35, 0.3) 0%, #66252500 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Fender-specific hero text color */
#main.main-fender h1,
#main.main-fender p {
  color: #d5d6d8;
}
/* Fender: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}

/* ==== Inline Overrides for fantasy.html ==== */
/* Fantasy-specific hero text color */
#main.main-fantasy h1,
#main.main-fantasy p {
  color: #d5d6d8;
}
/* Fantasy: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-fantasy h1 {
    font-size: 3.5rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fantasy h1 {
    font-size: 8rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.5rem;
  }
}
/* Fantasy: mobile fix - remove fixed height and add top padding, align content to start */
@media (max-width: 767.98px) {
  #main.main-fantasy {
    min-height: 80vh;
    padding-top: 4rem;
    align-items: flex-start !important;
  }
}

/* ==== Inline Overrides for christie.html ==== */
/* Christie page hero background */
#main.main-christie {
  background-color: #0b0d17;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Christie-specific hero text color */
#main.main-christie h1,
#main.main-christie p {
  color: #d5d6d8;
}
/* Christie: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-christie h1 {
    font-size: 3.5rem;
  }
  #main.main-christie .leadInProject {
    font-size: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  #main.main-fantasy {
    /* let the section size to its content */
    
    min-height: auto !important;

    /* push it below the absolute‐positioned nav */
    padding-top: 4rem;

    /* give some space at the bottom so the next section isn’t jammed up */
    padding-bottom: 2rem;

    /* vertical align the flex children at the top */
    align-items: flex-start !important;
  }
}
/* Fantasy: mobile fix – let the hero collapse and push following content */
@media (max-width: 767.98px) {
  #main.main-fantasy {
    
    min-height: 0 !important;

    /* push the whole section below your absolute‐positioned nav */
    margin-top: 4rem !important;

    /* give a little breathing room inside the hero too */
    padding: 1.5rem 1rem 2rem !important;

    /* stack content from the top */
    align-items: flex-start !important;
  }
}
/* ==== Inline Overrides for fender.html ==== */
/* Fender page hero background */
#main.main-fender {
  background-color: #530f0f;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(89, 18, 18) 0%, #554f4f00 60%),
    radial-gradient(circle at 80% 80%, rgba(45, 35, 35, 0.3) 0%, #66252500 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Fender-specific hero text color */
#main.main-fender h1,
#main.main-fender p {
  color: #d5d6d8;
}
/* Fender: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}
/* ==== Inline Overrides for fantasy.html ==== */
/* Fantasy-specific hero text color */
#main.main-fantasy h1,
#main.main-fantasy p {
  color: #d5d6d8;
}
/* Fantasy: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-fantasy h1 {
    font-size: 3.5rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fantasy h1 {
    font-size: 8rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.5rem;
  }
}
/* Fantasy: mobile fix – collapse hero and push following content */
@media (max-width: 767.98px) {
  #main.main-fantasy {
    min-height: 0 !important;
    margin-top: 4rem !important;
    padding: 1.5rem 1rem 2rem !important;
    align-items: flex-start !important;
  }
  /* reduce hero headline size on mobile */
  #main.main-fantasy h1 {
    font-size: 3rem !important;
    line-height: 1.1;
  }
}
/* ==== Inline Overrides for christie.html ==== */
/* Christie page hero background */
#main.main-christie {
  background-color: #0b0d17;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Christie-specific hero text color */
#main.main-christie h1,
#main.main-christie p {
  color: #d5d6d8;
}
/* Christie: larger font sizes on big screens */
@media (min-width: 992px) {
  #main.main-christie h1 {
    font-size: 3.5rem;
  }
  #main.main-christie .leadInProject {
    font-size: 1.25rem;
  }
}
/* ==== Page Overrides (append to styles2.css) ==== */
/* -- Fender Page Overrides -- */
#main.main-fender {
  background-color: #530f0f;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(89, 18, 18) 0%, #554f4f00 60%),
    radial-gradient(circle at 80% 80%, rgba(45, 35, 35, 0.3) 0%, #66252500 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-fender h1,
#main.main-fender p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}

/* -- Fantasy Page Overrides -- */
#main.main-fantasy h1,
#main.main-fantasy p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-fantasy h1 {
    font-size: 3.5rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fantasy h1 {
    font-size: 8rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  #main.main-fantasy {
    min-height: 0 !important;
    /* offset below the navbar */
    margin-top: 4rem !important;
    /* inner padding for breathing room */
    padding: 1.5rem 1rem 2rem !important;
    /* align children at top */
    align-items: flex-start !important;
  }
}

/* -- Christie Page Overrides -- */
#main.main-christie {
  background-color: #0b0d17;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-christie h1,
#main.main-christie p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-christie h1 {
    font-size: 3.5rem;
  }
  #main.main-christie .leadInProject {
    font-size: 1.25rem;
  }
}
/* -- Fender Page Overrides -- */
#main.main-fender {
  background-color: #530f0f;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(89, 18, 18) 0%, #554f4f00 60%),
    radial-gradient(circle at 80% 80%, rgba(45, 35, 35, 0.3) 0%, #66252500 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-fender h1,
#main.main-fender p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fender h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main.main-fender .leadInProject {
    font-size: 1.5rem;
  }
}

/* -- Fantasy Page Overrides -- */
#main.main-fantasy h1,
#main.main-fantasy p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-fantasy h1 {
    font-size: 3.5rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  #main.main-fantasy h1 {
    font-size: 8rem;
  }
  #main.main-fantasy .leadInProject {
    font-size: 1.5rem;
  }
}
/* -- Christie Page Overrides -- */
#main.main-christie {
  background-color: #0b0d17;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-christie h1,
#main.main-christie p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-christie h1 {
    font-size: 3.5rem;
  }
  #main.main-christie .leadInProject {
    font-size: 1.25rem;
  }
}
/* -- Humana Page Overrides -- */
#main.main-humana {
  background-color: #171716;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(13, 90, 41) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(10,75,35,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}
#main.main-humana h1,
#main.main-humana p {
  color: #d5d6d8;
}
@media (min-width: 992px) {
  #main.main-humana h1 {
    font-size: 3.5rem;
  }
  #main.main-humana .leadInProject {
    font-size: 1.25rem;
  }
}
.navbar {
  position: relative;
  z-index: 10;
}
@media (max-width: 767.98px) {
  /* Apply to Humana, Fender & Fantasy hero sections */
  section#main.main-humana,
  section#main.main-fender {
    /* make the colored background tall enough to hold the padding */
    height: 120vh !important;
    min-height: 120vh !important;

    /* no outside gap that'll show the white body */
    margin: 0 !important;

    /* push content down under your fixed navbar */
    padding-top: 8rem !important;   /* ↑ adjust as needed */
    padding-bottom: 4rem !important; /* breathing room at the bottom */

    /* stack children from the top */
    align-items: flex-start !important;
  }
  /* Optional extra nudge inside the content container */
  section#main.main-humana .content-container2,
  section#main.main-fender .content-container2,
  section#main.main-fantasy .content-container2 {
    margin-top: 2rem;
  }
  section#main.main-fantasy {
    height: 120vh !important;
    min-height: 120vh !important;
  }

}
p.leadInProject {
  color: #d5d6d8 !important;
  font-size: 1.5rem !important;
}
@media (max-width: 767.98px) {
  /* On phones, make the Fantasy hero 120vh instead of 100vh */
  #main.main-fantasy, #main.main-fender, #main.main-humana {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}
/* Shared “Other Projects” thumbnails */
#other-projects .project-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}
#other-projects .project-link {
  display: block;
}  
@media (max-width: 767.98px) {
  /* On phones, make the Fantasy hero 120vh instead of 100vh */
  #main.main-fantasy, #main.main-fender, #main.main-humana {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}
@media (max-width: 767.98px) {
  /* target the projectInfo columns on mobile */
  section#projectInfo .col-md-3.section-container {
    /* push them down by 32px */
    margin-top: 2rem !important;
    /* or, if you’d rather use padding instead: */
    /* padding-top: 2rem !important; */
  }
}
@media (max-width: 767.98px) {
  #main.main-humana,
  #main.main-fender,
  #main.main-fantasy {
    /* ❶ Stop forcing a fixed height */
    height: auto !important;

    /* ❷ Optional: still cover at least the viewport */
    min-height: 100vh;          /* or remove if not needed */

    /* ❸ Keep your navbar offset & breathing room */
    padding-top: 7rem;          /* adjust to nav height */
    padding-bottom: 2rem;

    /* ❹ Align children from the top */
    align-items: flex-start !important;
  }
}
/* =========== MISSING STYLES FROM INLINE CSS =========== */

/* Hero title specific override for index page */
h1.hero-title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: unset !important;
}
/* Hero title larger font size */
.hero-title {
  font-size: 4rem; /* inline has 4rem, external has 3rem */
}
/* Highlight class for gold text */
.highlight {
  color: #c49a3d;
  background: -webkit-linear-gradient(#c49a3d, #f8b523);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Social Icons Styles */
.social-icons {
  font-size: 2.5rem;
  margin-bottom: 5px;
  color: #d5d6d8 !important;
  fill: #d5d6d8 !important;
  z-index: 999;
}
.social-text {
  font-size: 1.5rem;
  display: block;
}
.icon-container {
  display: inline-flex;
  text-align: center;
  margin-right: 40px;
}
.social-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: #d5d6d8;
  fill: #d5d6d8;
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.social-link:hover {
  opacity: 0.7;
  text-decoration: none;
}
.social-link:hover .social-icons,
.social-link:hover .social-text {
  color: #E3AA2E !important;
  fill: #E3AA2E !important;
  opacity: 1;
}
/* Project Card Styles */
.project-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-card img {
  object-fit: cover;
  height: auto;
  border: none !important;
}

/* Worked With Section */
.workedWith {
  background-color: #0D1242;
  background-image: linear-gradient(to bottom, #0f1339, #131a45, #162252, #192a5f, #1b326d, #1b326d, #1b326d, #1b326d, #192a5f, #162252, #131a45, #0f1339);
  height: 22vh;
  padding-top: 4rem !important;
  padding-bottom: 14rem !important;
  border-top: 1px solid #ededf2;
  border-bottom: 1px solid #ededf2;
}

.workedWith {
  padding: 60px 0;
}

.workedWith .swiper {
  width: 100%;
  max-width: none;
  margin: 0;
}

.workedWith .swiper-slide {
  height: auto !important;
  padding: 1rem 0;
}

.workedWith .swiper-slide img {
  width: auto !important;
  max-width: 200px !important;
  max-height: 250px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.workedWith .swiper-button-prev,
.workedWith .swiper-button-next {
  display: none;
}

.workedWith .swiper-pagination {
  display: none;
}

.workedWith .leadIn3 {
  margin-top: -12px;
}

.workedWith .workedSwiper {
  margin-top: -36px;
}

/* Swiper Styles */
.swiper {
  width: 100%;
  height: auto;
  padding: 20px 0;
  position: relative;
  top: 8px;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100% !important;
  flex-shrink: 0;
}

.swiper-slide img {
  display: block;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

/* Updated leadIn3 styles */
.leadIn3 {
  font-weight: 100; /* inline has 100, external has 700 */
  font-size: 2.5rem; /* inline has 2.5rem, external has 1.5rem */
  color: #d5d7e1; /* inline has #d5d7e1, external has #999999 */
}

/* =========== MOBILE RESPONSIVE STYLES =========== */

@media (max-width: 575.98px) {
  /* Social icons mobile adjustments */
  .social-icons {
    font-size: 2rem;
  }

  .social-text {
    font-size: 1rem;
  }

  .social-link {
    padding: 0.5rem 1rem;
    gap: 0.25rem;
  }
}

@media (max-width: 767.98px) {
  /* Worked with section mobile */
  .workedWith {
    background-color: #0D1242;
    background-image: linear-gradient(to bottom, #0f1339, #131a45, #162252, #192a5f, #1b326d, #1b326d, #1b326d, #1b326d, #192a5f, #162252, #131a45, #0f1339);
    height: 22vh;
    padding-top: 4rem !important;
    padding-bottom: 14rem !important;
    border-top: 1px solid #ededf2;
    border-bottom: 1px solid #ededf2;
  }

  .workedWith .leadIn3 {
    font-size: 1.3rem;
  }

  .workedWith .swiper-slide img {
    width: auto !important;
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Hero section mobile adjustments */
  .hero-section {
    padding: 2.5rem 20px;
  }

  .icon-container {
    margin-right: 20px;
  }

  .hero-heading {
    line-height: 2.8rem;
  }

  .hero-subtext {
    padding: 2rem;
  }
}

/* =========== MISSING STYLES FROM INLINE CSS =========== */

/* Hero section corrections */
.hero-section {
  position: relative;
  background: url('./assets/img/fenderGuitar.jpg') center/cover no-repeat; /* Note: ./ prefix */
  height: clamp(400px, 80vh, 700px); /* 80vh not 100vh */
  overflow: hidden;
}

.hero-section nav.navbar {
  background: none; /* transparent */
  z-index: 2; /* above overlay, different from main navbar z-index: 10 */
}

/* Hero title corrections */
.hero-title {
  position: relative;
  z-index: 1;
  color: #d5d6d8;
  font-size: 4rem; /* 4rem not 3rem */
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 24px;
}

/* Hero title specific override for index page */
h1.hero-title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: unset !important;
}

/* Hero title larger font size */
.hero-title {
  font-size: 4rem; /* inline has 4rem, external has 3rem */
}

/* Highlight class for gold text */
.highlight {
  color: #c49a3d;
  background: -webkit-linear-gradient(#c49a3d, #f8b523);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Social Icons Styles */
.social-icons {
  font-size: 2.5rem;
  margin-bottom: 5px;
  color: #d5d6d8 !important;
  fill: #d5d6d8 !important;
  z-index: 999;
}

.social-text {
  font-size: 1.5rem;
  display: block;
}

.icon-container {
  display: inline-flex;
  text-align: center;
  margin-right: 40px;
}

.social-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: #d5d6d8;
  fill: #d5d6d8;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.social-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

.social-link:hover .social-icons,
.social-link:hover .social-text {
  color: #E3AA2E !important;
  fill: #E3AA2E !important;
  opacity: 1;
}

/* Project Card Styles */
.project-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-card img {
  object-fit: cover;
  height: auto;
  border: none !important;
}

/* Worked With Section */
.workedWith {
  background-color: #0D1242;
  background-image: linear-gradient(to bottom, #0f1339, #131a45, #162252, #192a5f, #1b326d, #1b326d, #1b326d, #1b326d, #192a5f, #162252, #131a45, #0f1339);
  height: 22vh;
  padding-top: 4rem !important;
  padding-bottom: 14rem !important;
  border-top: 1px solid #ededf2;
  border-bottom: 1px solid #ededf2;
}

.workedWith {
  padding: 60px 0;
}

.workedWith .swiper {
  width: 100%;
  max-width: none;
  margin: 0;
}

.workedWith .swiper-slide {
  height: auto !important;
  padding: 1rem 0;
}

.workedWith .swiper-slide img {
  width: auto !important;
  max-width: 200px !important;
  max-height: 250px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.workedWith .swiper-button-prev,
.workedWith .swiper-button-next {
  display: none;
}

.workedWith .swiper-pagination {
  display: none;
}

.workedWith .leadIn3 {
  margin-top: -12px;
}

.workedWith .workedSwiper {
  margin-top: -36px;
}

/* Swiper Styles */
.swiper {
  width: 100%;
  height: auto;
  padding: 20px 0;
  position: relative;
  top: 8px;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100% !important;
  flex-shrink: 0;
}

.swiper-slide img {
  display: block;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

/* Updated leadIn3 styles */
.leadIn3 {
  font-weight: 100; /* inline has 100, external has 700 */
  font-size: 2.5rem; /* inline has 2.5rem, external has 1.5rem */
  color: #d5d7e1; /* inline has #d5d7e1, external has #999999 */
}

/* =========== MOBILE RESPONSIVE STYLES =========== */

@media (max-width: 575.98px) {
  /* Social icons mobile adjustments */
  .social-icons {
    font-size: 2rem;
  }

  .social-text {
    font-size: 1rem;
  }

  .social-link {
    padding: 0.5rem 1rem;
    gap: 0.25rem;
  }
}

@media (max-width: 767.98px) {
  /* Worked with section mobile */
  .workedWith {
    background-color: #0D1242;
    background-image: linear-gradient(to bottom, #0f1339, #131a45, #162252, #192a5f, #1b326d, #1b326d, #1b326d, #1b326d, #192a5f, #162252, #131a45, #0f1339);
    height: 22vh;
    padding-top: 4rem !important;
    padding-bottom: 14rem !important;
    border-top: 1px solid #ededf2;
    border-bottom: 1px solid #ededf2;
  }

  .workedWith .leadIn3 {
    font-size: 1.3rem;
  }

  .workedWith .swiper-slide img {
    width: auto !important;
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Hero section mobile adjustments */
  .hero-section {
    padding: 2.5rem 20px;
  }

  .icon-container {
    margin-right: 20px;
  }

  .hero-heading {
    line-height: 2.8rem;
  }

  .hero-subtext {
    padding: 2rem;
  }
}
  /* Master CSS: styles.css */

/* =========== Base Styles =========== */
* {
  font-family: "Instrument Sans", sans-serif;
  margin: 0;
  padding: 0;
}
html, body {
  overflow-x: hidden;
}


/* Gradient text for headings (Index pages) */
h1.gradient-text, h2.gradient-text, h3.gradient-text, h4.gradient-text, h5.gradient-text, h6.gradient-text {
  background: -webkit-linear-gradient(#06186b, #0a1441);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero title override for Index */
h1.hero-title {
  background: none !important;
}

/* =========== Navbar Styles =========== */
.navbar {
  background-color: #17181e;
  position: relative;
  z-index: 10;
}
.navbar-brand {
  color: #d5d6d8 !important;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1px;
}
.navbar-nav .nav-link {
  color: #d5d6d8 !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}
.navbar-nav .nav-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #d5d6d8;
  transition: width 0.3s;
  margin-top: 4px;
}
.navbar-nav .nav-link:hover::after {
  width: 100%;
}
.navbar-nav .nav-link:hover {
  opacity: 0.8;
  color: #E3AA2E !important;
  text-decoration: none;
}

/* =========== Section Headings =========== */
h5 {
  font-size: 2rem;
}

/* =========== Index Hero Section =========== */
.hero-section {
  position: relative;
  background: url('assets/img/fenderGuitar.jpg') center/cover no-repeat;
  height: clamp(400px, 100vh, 700px);
  overflow: hidden;
}
.hero-section nav.navbar {
  background: none;
  z-index: 2;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url('assets/img/dustNoise.png'),
    radial-gradient(circle at 50% 42%, rgba(17,19,155,0.10) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(60,87,240,0.85) 0%, transparent 75%),
    radial-gradient(circle at 80% 80%, rgba(16,13,207,0.85) 0%, transparent 75%);
  background-size: cover, auto, cover, cover, cover;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center, center;
  background-blend-mode: normal, overlay, screen, screen, screen;
  pointer-events: none;
  z-index: 1;
}
.hero-title {
  position: relative;
  z-index: 1;
  color: #d5d6d8;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 24px;
}

/* =========== Project Info Section =========== */
#projectInfo {
  margin-top: 4rem;
}
#projectInfo .section-container {
  margin-top: 2rem;
}

/* =========== Utilities & Components =========== */
.leadIn3 {
  font-weight: 700;
  font-size: 1.5rem;
  color: #d5d7e1;
}
.content-container2 {
  max-width: 750px;
  margin: 0 auto;
}

p.leadInProject {
  color: #d5d6d8 !important;
  font-size: 1.5rem !important;
}

/* Custom list bullets */
ul.custom-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.custom-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
ul.custom-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.2em;
  color: #1F3727;
}
p.listItem {
  font-size: 1.3rem;
  margin: 0 0 0 36px;
  position: relative;
  bottom: 2px;
}

/* Shared "Other Projects" thumbnails */
#other-projects .project-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}
#other-projects .project-link {
  display: block;
}

/* Limit logo heights in your Swiper slides */
.swiper-slide img {
  max-height: 40px;
  object-fit: contain;
}

/* =========== Page-Specific Hero Backgrounds =========== */
#main.main-fender {
  background-color: #331f1f;
  height: 80vh;
  min-height: 70vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(110, 29, 29) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(172, 17, 17, 0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 3rem;
}

#main.main-humana {
  background-color: #171716;
  height: 80vh;
  min-height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgb(13, 90, 41) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(10, 75, 35, 0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}

#main.main-christie {
  background-color: #0b0d17;
  height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(77,79,202,0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(120,60,240,0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}

#main.main-fantasy {
  background-color: #0b0d17;
  height: 80vh;
  min-height: 80vh;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(19, 121, 78, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(60, 240, 210, 0.3) 0%, transparent 70%);
  background-blend-mode: screen, screen;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Hero text colors for all pages */
#main h1, #main p {
  color: #d5d6d8 !important;
}
#main h1 {
  padding-bottom: 2rem;
}

/* Page-specific text styling */
#main.main-fender h1 {
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 3rem !important;
}
#main.main-fender .leadInProject {
  font-size: 1.5rem;
}

#main.main-fantasy h1,
#main.main-christie h1,
#main.main-humana h1 {
  font-size: 3.5rem;
}

#main.main-fantasy .leadInProject,
#main.main-humana .leadInProject {
  font-size: 1.25rem;
}

#main.main-christie .leadInProject {
  font-size: 2rem;
}

/* Content container margins */
#main.main-humana .content-container2,
#main.main-fender .content-container2,
#main.main-fantasy .content-container2 {
  margin-top: 2rem;
}

/* Navbar overrides for specific pages */
#main.main-humana .navbar,
body.page-humana .navbar,
body.page-fender .navbar {
  background-color: rgba(23, 24, 30, 0.9) !important;
}

/* =========== Responsive Styles =========== */

/* Large-screen adjustments */
@media (min-width: 992px) {
  #main h1 {
    font-size: 3rem !important;
    font-weight: 400 !important;
  }
  #main .leadInProject {
    font-size: 1.5rem;
  }
}

/* Extra-large-screen adjustments */
@media (min-width: 1200px) {
  #main h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
  }
  #main .leadInProject {
    font-size: 1.5rem;
  }
  h1.hero-title {
    font-size: 3rem;
  }
}

/* Medium screen adjustments */
@media (max-width: 991.98px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

/* Navbar adjustments on small screens */
@media (max-width: 767px) {
  .navbar-nav {
    flex-direction: row !important;
    justify-content: flex-end;
  }
  .nav-link {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Mobile fixes */
@media (max-width: 767.98px) {
  /* Fix main-fantasy mobile layout */
  #main.main-fantasy {
    height: auto !important;
    min-height: auto !important;
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
    margin: 0 !important;
    align-items: flex-start !important;
  }
  
  /* Fix main-fender mobile layout */
  #main.main-fender {
    height: auto !important;
    min-height: auto !important;
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
    margin: 0 !important;
  }
  
  /* Reset projectInfo spacing on mobile */
  #projectInfo {
    margin-top: 2rem !important;
  }
  
  #projectInfo .section-container {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }
}

/* Small mobile adjustments */
@media (max-width: 575.98px) {
  .hero-title {
    font-size: 1.8rem;
  }
  
  #main-christie h1 {
    padding-bottom: 2rem;
    font-size: 2rem !important;
  }
  
  /* Project Info card styling on mobile */
  #projectInfo .section-container {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 1rem;
    margin: 1.5rem 2rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  #main h1, #main p {
    color: #d5d6d8 !important;
  }
}