body {
    font-family: "gotham", sans-serif;
    background-color:#000;
  }  

  /*-- Navbar Desktop --*/

  .desktop .navbar-brand img {
    width: 160px;
  }

 @media (max-width: 389.98px) {
   .desktop .navbar-brand img {
    width: 120px;
  }
}
.desktop .nav-top {
      background-color: #000 !important;
    }

  .desktop .nav-item {
    padding: 0 30px;
  }  

  .desktop .nav-link {
    color: #dbc2a1;
 }

 @media (min-width: 991.98px) {
  .desktop .navbar-collapse {
    justify-content: center;
  }
}

@media (min-width: 1600px) {
  .desktop .navbar-collapse {
    transform: translateX(-40px);
  }
}
  
  @media (max-width: 1199.98px) {
      .desktop .nav-item {
        padding: 0 15px;
      } 
  }

  @media (max-width: 991.98px) {
      .nav-item {
    padding: 0;
  } 

    #navbarSupportedContent.collapsing {
        transition: none !important;
        height: auto !important;
      }

      #navbarSupportedContent.show,
      #navbarSupportedContent.collapsing {
        position: absolute;
        top: 56px; /* height of the top navbar */
        left: 0;
        right: 0;
        background: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1045;
        overflow-y: auto;
        padding: 1.5rem;
        padding-bottom: 1.5rem;
      }
      #navbarSupportedContent .navbar-nav {
        text-align: center;
        width: 100%;
      }
      #navbarSupportedContent .nav-link {
        font-size: 1.5rem;
        padding: 1rem 0;
      }
      #navbarSupportedContent form {
        width: 100%;
        max-width: 320px;
        margin-top: 1rem;
      }
    }




/*-- DJ Modal --*/

      #djModal .modal-content {
      background: #000;
      color: #dbc2a1;
      border: 1px solid #dbc2a1;
      border-radius: 0;
      margin: 0 20px;
    }
    #djModal .modal-header {
      border-bottom: 1px solid rgba(219,194,161,.25);
    }
    #djModal .modal-title {
      font-family: "gotham", sans-serif;
    }
    #djModal .btn-close {
      filter: invert(1) grayscale(1) brightness(1.5); /* white X on dark modal */
    }
    #djModal dl {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 1.5rem;
      row-gap: .5rem;
      margin: 0;
    }
    #djModal dt { font-weight: 600; }
    #djModal dd { margin: 0; text-align: right; }



    /*-- Hour Modal Button --*/  

    #hours-toggle {
      position: fixed;
      bottom: 16px;
      left: 16px;
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;      
      background: #dbc2a1; /* 50% opacity background */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1031;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    } 
    
    #hours-toggle.visible {
      opacity: 1;
      pointer-events: auto;
    }

    #hours-toggle i {
      font-size: 24px;
    }

/*-- Hours Modal --*/


    #hoursModal .modal-content {
      background: #000;
      color: #dbc2a1;
      border: 1px solid #dbc2a1;
      border-radius: 0;
      margin: 0 20px;
    }

    #hoursModal .modal-header {
      border-bottom: 1px solid rgba(219,194,161,.25);
    }

    #hoursModal .modal-title {
      font-family: "gotham", sans-serif;
    }

    #hoursModal dl {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 1.5rem;
      row-gap: .5rem;
      margin: 0;
    }

    #hoursModal dt { font-weight: 600; }
    #hoursModal dd { margin: 0; text-align: right; }    
    

/* -- HERO TOP --*/

    .hero {
      display: flex;
      width: 100%;
      height: 80vh;
      min-height: 320px;
      position: relative;
    }


 @media (max-width: 1199.98px) {
    .hero {
      display: flex;
      width: 100%;
      height: 70vh;
      min-height: 320px;
      position: relative;
    }
  }

 @media (max-width: 991.98px) {
    .hero {
      display: flex;
      width: 100%;
      height: 65vh;
      min-height: 320px;
      position: relative;
    }
  }  

  .hero img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills the box, crops overflow, no distortion */
    display: block;
    
  }

  .hero-overlay-frontpage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0 0 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }

    .hero-overlay-frontpage h1 {
    font-family: "pf-fuel-decay", sans-serif;
    font-size: clamp(3.25rem, calc(2.714rem + 2.381vw), 4.5rem);
    color: #dbc2a1;
    margin: 0 30px;
    padding-bottom: 25px;
    line-height: 1.15;
    text-shadow: 3px 3px 9px #000;  
  }

    .hero-overlay-respage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0 0 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }

    .hero-overlay-respage h1 {
    font-family: "pf-fuel-decay", sans-serif;
    font-size: clamp(4rem, calc(3.143rem + 3.81vw), 6rem);
    color: #dbc2a1;
    margin: 0 30px;
    padding-bottom: 25px;
    line-height: 1;
    text-shadow: 3px 3px 9px #000;  
  }

    .hero-overlay-respage h2 {
    font-family: "pf-fuel-grime", sans-serif;
    font-size: clamp(2.5rem, calc(2.071rem + 1.905vw), 3.5rem);     
    color: #dbc2a1;
    margin: 0 20px;
    line-height: 1.25;
    text-shadow: 3px 3px 9px #000;
}

   .hero-overlay-sportspage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0 0 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }

    .hero-overlay-sportspage h1 {
    font-family: "pf-fuel-decay", sans-serif;
    font-size: clamp(4rem, calc(3.143rem + 3.81vw), 6rem);
    color: #dbc2a1;
    margin: 0 30px;
    padding-bottom: 25px;
    line-height: 1;
    text-shadow: 3px 3px 9px #000;  
  }

  .hero-overlay-sportspage h2 {
    font-family: "pf-fuel-grime", sans-serif;
    font-size: clamp(2.5rem, calc(2.071rem + 1.905vw), 3.5rem);     
    color: #dbc2a1;
    margin: 0 20px;
    line-height: 1.15;
    text-shadow: 3px 3px 9px #000; 
  }



  /*-- Live Sports - DJ Section --*/

  .col2 {
        display: flex;
        flex-wrap: wrap;
        max-width: 1100px;
        margin: 0 auto;
        padding: 20px 0;
        gap: 0;
    }

    .col2 .col2-img1 {
      position: relative;
        flex: 1 1 320px; /* grow, shrink, base width before wrapping */
        background-color: #000;
        padding: 0;
        margin: 0 10px;
        display: flex; /* lets the img stretch to fill the padded box, including matching col-2A1's height */
    }

    .col2 .col2-img1 img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* fills the box without distorting; crops if aspect ratio doesn't match */
        display: block;
    }

    .col2 .col2-img2 {
      position: relative;  
      flex: 1 1 320px; /* grow, shrink, base width before wrapping */
        background-color: #000;
        padding: 0;
        margin: 0 10px;
        display: flex; /* lets the img stretch to fill the padded box, including matching col-2A1's height */
    }

    .col2 .col2-img2 img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* fills the box without distorting; crops if aspect ratio doesn't match */
        display: block;
    }

    @media (max-width: 877.98px) {
      .col2 .col2-img1, .col2 .col2-img2 {
        flex: 1 1 100%; /* grow, shrink, base width before wrapping */
      }

           .col2 .col2-img1 {
            margin: 15px 20px 30px;
        }
        .col2 .col2-img2 {
            margin: 10px 20px;
        }
    }

    @media (max-width: 695.98px) {
        .col2 .col2-img1 {
            margin: 10px 20px;
        }
        .col2 .col2-img2 {
            margin: 10px 20px;
        }        
    }

     .cols-textonly {
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    gap: 0;
  }

  .cols-textonly .col-text {
    flex: 1 1 320px; /* grow, shrink, base width before wrapping */
    background-color: #000;
    padding: 32px;
  }

  .col-text h1 {
    font-family: "pf-fuel-decay", sans-serif;
    font-size: clamp(2.75rem, calc(2.536rem + 0.952vw), 3.25rem);
    color: #dbc2a1;
    
  }

  .col-text p {
    font-family: "pf-fuel-grime", sans-serif;
    font-size: clamp(1.5rem, calc(1.286rem + 0.952vw), 2rem);
    color: #fff;
    
  }

  /*-- Reserve Section --*/

  .fw-image {
        position:relative;
        margin: 20px 0;
    }  
    
    .fw-image img {
        width: 100%;
        height: auto; /* preserves aspect ratio */
        display: block; /* removes inline-image whitespace gap */
        object-fit: cover; /* if you need a fixed height and want to crop instead of stretch */
    }

    .fw-overlay-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fw-overlay-content h2 {
  font-family: "pf-fuel-decay", sans-serif;
  font-size: clamp(3rem, calc(-0.8rem + 15vw), 6rem);
  color: #dbc2a1;
  text-shadow: 3px 3px 9px #000;
  margin: 0;
}

.fw-overlay-content h3 {
  font-family: "pf-fuel-grime", sans-serif;
  font-size: clamp(1.45rem, calc(0.65rem + 3.1vw), 3rem);
  color: #fff;

}

@media (max-width: 877.98px) {
  .fw-overlay-content h2 { font-size: clamp(2.75rem, calc(0.491rem + 10.039vw), 6rem); }
  .fw-overlay-content h3 { font-size: clamp(1.35rem, calc(0.203rem + 5.097vw), 3rem); }
}

    .fw-overlay-btn-desktop {
    z-index: 2;
    background: #000;
    color: #dbc2a1;
    border: solid .5px #dbc2a1;
    font-family: "gotham", sans-serif;
    font-weight: 600;
    font-size: clamp(0.55rem, calc(0.237rem + 1.39vw), 1rem);
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fw-overlay-btn-desktop:hover {
    background: #fff;
    color: #000;
    border: solid .5px #000;
}

    .fw-overlay-btn {
    z-index: 2;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.65); /* 50% opacity background */
    border: solid .25px rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1.5px);
    color: #dbc2a1;
    font-family: "gotham", sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}

 @media (max-width: 499.98px) {
  .fw-overlay-btn {
    border: solid .25px rgba(255, 255, 255, 0.4);
  }
}

.fw-overlay-btn:hover {
    background: rgba(0, 0, 0, 0.90); /* 50% opacity background */
}

.fw-overlay-btn i {
    color: #000;
} 


/*-- Col01 Section --*/

    .col01-overlay-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.col01-overlay-content h2 {
  font-family: "pf-fuel-decay", sans-serif;
  font-size: clamp(3.25rem, calc(0.5rem + 5vw), 4.25rem);
  color: #dbc2a1;
  text-shadow: 3px 3px 9px #000;
  margin: 0;
}

.col01-overlay-content h3 {
  font-family: "pf-fuel-grime", sans-serif;
  font-size: clamp(1.75rem, calc(-0.313rem + 3.75vw), 2.5rem);
  color: #dbc2a1;
  text-shadow: 3px 3px 9px #000;
  margin: 0 20px;
}

@media (max-width: 877.98px){
  .col01-overlay-content h2 { font-size: clamp(2.75rem, calc(0.491rem + 10.039vw), 6rem); }
  .col01-overlay-content h3 { font-size: clamp(1.5rem, calc(0.458rem + 4.633vw), 3rem); }
}

    .col01-overlay-btn {
    z-index: 2;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.65); /* 50% opacity background */
    border: solid .25px rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1.5px);
    color: #dbc2a1;
    font-family: "gotham", sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 702.98px) {
    .col01-overlay-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .col01-overlay-btn {
    z-index: 2;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.65); /* 50% opacity background */
    border: solid .25px rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1.5px);
    color: #dbc2a1;
    font-family: "gotham", sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}
}

 @media (max-width: 499.98px) {
  .col01-overlay-btn {
    border: solid .25px rgba(255, 255, 255, 0.4);
  }
}

 @media (max-width: 414px) {
    .col01-overlay-btn {
    font-size: .8rem;
}
 }

.col01-overlay-btn:hover {
    background: rgba(0, 0, 0, 0.90); /* 50% opacity background */
}

/* wrap the group of h3's so margin-top actually applies */
.col01-overlay-content .col01-tag-group {
  margin-top: -.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;   /* controls space between the two lines directly */
}

.col01-tag {
  background-color: #000;
  color: #fff;
  padding: 0.2em 0.3em;   /* the padding you're after */
  margin-top: -2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline;
}


/*-- Col02 Section --*/

    .col02-overlay-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.col02-overlay-content h2 {
  font-family: "pf-fuel-decay", sans-serif;
  font-size: clamp(3.25rem, calc(0.5rem + 5vw), 4.25rem);
  color: #dbc2a1;
  text-shadow: 3px 3px 9px #000;
  margin: 0;
}

.col02-overlay-content h3 {
  font-family: "pf-fuel-grime", sans-serif;
  font-size: clamp(1.75rem, calc(0.387rem + 2.484vw), 2.25rem);
  color: #dbc2a1;
  text-shadow: 3px 3px 9px #000;
  margin: 0 20px;
}

@media (max-width: 877.98px) {
  .col02-overlay-content h2 { font-size: clamp(2.75rem, calc(0.491rem + 10.039vw), 6rem); }
  .col02-overlay-content h3 { font-size: clamp(1.5rem, calc(0.458rem + 4.633vw), 3rem); }
}

    .col02-overlay-btn {
    z-index: 2;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.65); /* 50% opacity background */
    border: solid .25px rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1.5px);
    color: #dbc2a1;
    font-family: "gotham", sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 702.98px) {
    .col02-overlay-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .col02-overlay-btn {
    z-index: 2;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.65); /* 50% opacity background */
    border: solid .25px rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1.5px);
    color: #dbc2a1;
    font-family: "gotham", sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}
}

 @media (max-width: 499.98px) {
  .col02-overlay-btn {
    border: solid .25px rgba(255, 255, 255, 0.4);
  }
}

 @media (max-width: 414px) {
    .col02-overlay-btn {
    font-size: .8rem;
  }
 }


.col02-overlay-btn:hover {
    background: rgba(0, 0, 0, 0.90); /* 50% opacity background */
}

/* wrap the group of h3's so margin-top actually applies */
.col02-overlay-content .col02-tag-group {
  margin-top: -.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;   /* controls space between the two lines directly */
}

.col02-tag {
  background-color: #000;
  color: #fff;
  padding: 0.2em 0.3em;   /* the padding you're after */
  margin-top: -2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline;
}


/*-- Text Club --*/

  .text-club h2 {
    font-family: "pf-fuel-grime", sans-serif;
    font-size: 2.5rem;
  }

  .text-club p {
    font-size: .75rem;
  }  

/*-- Text Club Button --*/

    .tc-overlay-btn-desktop {
    z-index: 2;
    background: #000;
    color: #dbc2a1;
    border: solid .5px #000;
    font-family: "gotham", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tc-overlay-btn-desktop:hover {
    background: #fff;
    color: #000;
    border: solid .5px #000;
}
 

/*-- Take A Tour Button --*/

    .tour-overlay-btn-desktop {
    z-index: 2;
    background: #000;
    color: #dbc2a1;
    border: solid .5px #dbc2a1;
    font-family: "gotham", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tour-overlay-btn-desktop:hover {
    background: #fff;
    color: #000;
    border: solid .5px #000[]

}

/*-- Reserve Section --*/

    .full-bleed {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    } 

    .mobile-1 {
        display: none;
    }

    .wide-1 {
        display: none;
    }

    @media (min-width: 1199.98px) {
        .normal-1 {
            display: none;
        }
        .wide-1 {
            display: flex;
        }
    }

    @media (max-width: 878.98px) {
        .normal-1 {
            display: none;
        }
        .mobile-1 {
            display: flex;
        }
      }    


/*-- Take A Tour Modal --*/

#tourModal .modal-body {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

#tourModal .modal-body { background-color: #000; border: solid 1px #dbc2a1;}

#tourModal .modal-body iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#tourModal .modal-footer {
  background-color: #000;
}

/*-- Back To Top Button --*/

    #back-to-top {
      position: fixed;
      bottom: 16px;
      right: 16px;
      width: 45px;
      height: 45px;
      border: none;
      border-radius: 50%;      
      background: #dbc2a1; /* 50% opacity background */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1031;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    #back-to-top.visible {
      opacity: 1;
      pointer-events: auto;
    } 

    #back-to-top i {
      font-size: 20px;
    }



/*-- Footer --*/

footer {
  color: #000;
}

footer p {
  font-size: .9rem;
}   


/* This is the "black box behind white text" effect */
.hero-tag {
  background-color: #000;
  color: #fff;
  padding: 0.2em 0.3em;   /* the padding you're after */
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline;
}

 #hoursModal .modal-dialog {
      position: relative;
    }

 #djtourModal .modal-dialog {
      position: relative;
    }
    
 #hoursModal .modal-dialog {
      position: relative;
    }

 .modal-close-float {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background: #dbc2a1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
}

@media (min-width: 410px) {
.dj-reg {
  display: block;
}

.dj-sml {
  display: none;
}
}

@media (max-width: 409.98px) {

.dj-reg {
  display: none;
}

.dj-sml {
  display: block;
}
}

/* .logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 300px));
  justify-content: center;
  gap: 20px;
} */

.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;  
}

.logo-box img {
  width: 180px;
  height: auto;
  margin-bottom: 20px;

}

/* .logo-box {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 16px;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
} */

/* Mobile: force exactly 2 per row */
@media (max-width: 600px) {
  .logo-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.textclub-info {
 padding-top: 80px;
}

.textclub-info h2 {
  font-family: "pf-fuel-grime", sans-serif;
  font-size: clamp(44px, calc(34.732px + 2.439vw), 64px);
  color: #dbc2a1;
}

.textclub-info h3 {
  font-family: "pf-fuel-grime", sans-serif;
  font-size: clamp(32px, calc(24.585px + 1.951vw), 48px);
  color: #dbc2a1;
}

iframe {
  width: clamp(240px, calc(128.571px + 30.952vw), 500px);
  height: clamp(540px, calc(911.429px - 30.952vw), 800px);
}

@media (min-width: 878px) {
.res-reg {
  display: block;
}

.res-sml {
  display: none;
}
}

@media (max-width: 877.98px) {
.res-reg {
  display: none;
}

.res-sml {
  display: block;
}
}