:root {
      --header-height: 9vh;
      --logo-height: 10vh;
      --btn-bg: #ffcc00;
      --text-color: #fff;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
      font-family: "Lato", sans-serif;
      overflow-x: hidden;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background-color: #000;
      color: var(--text-color);
      text-align: center;
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      padding: 0 2vw;
    }
    .promo-banner
    {
            display: flex;
    justify-content: center;
    align-items: center;
    }
    

    .logo-section {
      margin-top: var(--header-height); /* Push content below fixed header */
      background-color: #fff;
      height: var(--logo-height);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-section img {
      height: 70%;
    max-width: 90vw;
    margin: 1rem 0;
    }

    .hero {
      height: 84vh;
      background-image: url('../../assets/images/TRIBETOKES (1).png'); /* Replace with desktop image */
         background-size: 100% 145%;
    background-position: 100% 45%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-color);
      text-align: center;
      padding: 0 2rem;
      position: relative;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .hero-content {
      position: relative;
    z-index: 1;
     top: 31%;
    right: 31%;
    }
    
    .ubtn {
            margin-top: 0;
    margin-bottom: 0rem;
        font-size: 2rem;
    }


    .hero button {
         padding: 0.2em 1.8em;
    font-size: 1.5rem;
    background-color: #000;
    color: #fff;
    border: none;
    /* border-radius: 2em; */
    cursor: pointer;
}

    footer {
            background-color: black;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .hover-white {
      color: #fff;
      text-decoration: none;
    }
    
    @media (max-width: 376px) { 
         header {

 font-size: 1.25rem;
}
        
      .logo-section img {
    height: 58%;
    max-width: 70vw;
}
      .hero {
        background-image: url('../../assets/images/TRIBETOKES MS (1).png'); /* Replace with mobile image */
             background-size: 100% 110%;
      background-position: 100% 100%;
      height: 77vh;
      }

     .hero-content {
                  top: -7%;

    right: 0%;
}

      .hero button {
               font-size: 1.3rem;
        padding: 0.8em 2.5em;

      }
      
       .ubtn {
        font-size: 1.5rem;
    }
    
      footer {

    height: 6vh;
    
}
    }

/* Medium phones */
@media (min-width: 377px) and (max-width: 425px) { 
    
     header {

 font-size: 1.25rem;
}
        
      .logo-section img {
    height: 58%;
    max-width: 70vw;
}
      .hero {
        background-image: url('../../assets/images/TRIBETOKES MS (1).png'); /* Replace with mobile image */
             background-size: 100% 110%;
      background-position: 100% 100%;
      height: 77vh;
      }

     .hero-content {
                top: -8%;

    right: 0%;
}

      .hero button {
               font-size: 1.3rem;
        padding: 0.4em 2.5em;

      }
      
             .ubtn {
        font-size: 1.5rem;
    }
    
      footer {

    height: 6vh;
    
}
}

/* Large phones / phablets */
@media (min-width: 426px) and (max-width: 767.98px) { 
    
     header {

         font-size: 2rem;
}
        
      .logo-section img {
    height: 58%;
    max-width: 70vw;
}
      .hero {
        background-image: url('../../assets/images/TRIBETOKES MS (1).png'); /* Replace with mobile image */
             background-size: 100% 110%;
      background-position: 100% 100%;
      height: 77vh;
      }

     .hero-content {
                   top: -9%;

    right: 0%;
}

       .ubtn {
        font-size: 1.5rem;
    }
    

      .hero button {
               font-size: 1.3rem;
      padding: 0.4em 2.5em;

      }
      footer {

    height: 6vh;
    
}
}


/* Bootstrap MD / small tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    
    .hero {
     background-image: url('../../assets/images/TRIBETOKES (1).png');
          background-size: 100% 145%;
    background-position: 100% 45%;
         height: 84vh;
      }
      
    .hero-content {
        top: 30%;
        right: 33%;
    }

}