@font-face {
  font-family: 'zxq-font-main';
  src: url('../fonts/DMSans-Bold.ttf') format('truetype');
  font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'zxq-font-main';
}

body{
        width: 100vw;
    height: 100vh;
    margin: 0 auto;
}

.offer-strip {  
  background: #000;
  color: #e3b63f;
  text-align: center;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;

  display: flex;
  justify-content: center;
  align-items: center;
 height: 8vh;
  white-space: nowrap; /* desktop: single line */
}

/* hidden by default (desktop) */
.mobile-break {
  display: none;
}


.body1 {
 height: 92vh;
    background: url("../images/Front-Desk.jpg") center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    color: #fff;
    position: relative;
}

/* Overlay */
.body1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 0;
}

/* Main Wrapper */
.zxq-wrapper {
    position: relative;
    z-index: 2;
    max-width: 95%;
    margin-top:3vh;
}

/* Logo */
.zxq-logo {
    width: 14rem;
    max-width: 35vw;
    margin-bottom: 0.5rem;
}

/* Heading */
.zxq-heading {
    font-size: 2.1rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}



/* Hidden letters */
.zxq-hide {
    font-size: 11px;
    color: #000;
}

/* Button group */
.zxq-btn-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.zxq-btn {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    width: auto;
    margin: 0.5rem;
}

/* YES button */
.zxq-btn-yes {
    background: #fff;
    color: #000;
}

/* NO button */
.zxq-btn-no {
    background: #fff;
    color: #000;
}

/* Footer */
.zxq-footer {
    position: absolute;
    bottom: 2vh;
    font-size: 0.9rem;
    width: 100%;
    color: #ddd;
    z-index: 2;
}

.zxq-footer a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}




/* AGE GATE OVERLAY */
.age-gate {
    position: fixed;
    inset: 0;
        background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* BOX */
.age-box {
    background: #111111bd;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    max-width: 90%;
    color: #fff;
}

/* TEXT */
.age-box h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.age-box p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #ccc;
}

/* BUTTONS */
.age-btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.age-btn {
    padding: 0.7rem 2rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    font-weight: bold;
}

/* YES */
.age-btn.yes {
    background: #e3b63f;
    color: #000;
}

/* NO */
.age-btn.no {
    background: #fff;
    color: #000;
}

@media (max-width: 600px) {



    
/* AGE GATE OVERLAY */
.age-gate {
    position: fixed;
    inset: 0;
        background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* BOX */
.age-box {
    background: #111111bd;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    max-width: 90%;
    color: #fff;
}

/* TEXT */
.age-box h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.age-box p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #ccc;
}

/* BUTTONS */
.age-btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.age-btn {
    padding: 0.7rem 2rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    font-weight: bold;
}

/* YES */
.age-btn.yes {
    background: #e3b63f;
    color: #000;
}

/* NO */
.age-btn.no {
    background: #fff;
    color: #000;
}



}



/* Responsive */
@media (max-width: 600px) {
    
    .body1 {
 height: 89vh;
}

  .zxq-heading {
                      font-size: 1.5rem;
    }
    
    .offer-strip {  
         height: 11vh;
 font-size: 1,2rem;
 padding: 0.3rem;
}

.offer-strip {
    white-space: normal;
    flex-direction: column;
    line-height: 1.4;
  }

  .mobile-break {
    display: block; /* acts like <br> */
  }

    .zxq-logo {
        max-width: 75vw;
         margin-bottom: 0.5rem;
    }

    .zxq-btn {
        width: auto;
        font-size: 1.3rem;
    }

    .zxq-btn-group {
        gap: 1rem;
    }
}