:root {
      --primary-color: #fbbd0a;
      --button-hover: #e89e00;
      --text-color: #ffffff;
      --bg-color: #000000;
    }

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

    body {
         font-family: "Lato", sans-serif;
      color: var(--text-color);
   overflow-x: hidden;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE 10+ */
}

body::-webkit-scrollbar {
  display: none;                   /* Chrome, Safari, Edge */
}
     /* Offer Strip */
   .offer {
    background-color: #000;
    padding: 0px;
     
      color: #ffffff;
      /*text-transform: uppercase;*/
      font-size: 1.2rem;
     height: 8vh;
        display: flex;
    align-items: center;
    justify-content: center;
}

.offer p {
  border: 2px dotted white;
  padding: 2px;
      margin-bottom: 0rem;
}

    /* Logo Section */
    .logo-section {
         display: flex
;
    align-items: center;
    justify-content: center;
      padding: 2vh 0;
      height: 10vh;
    }

    .logo-section img {
      width: 20vw;
    }

    /* Hero Section */
    .hero-section {
      position: relative;
      width: 100vw;
      height: 95vh;
      background: url('../images/tribetokes_desktopsize.png');
    background-size: 100% 130%;
    background-position: 100% 31%;
    }

    .hero-content {
        position: absolute;
  bottom: 15%;
    left: 16%;
    color: white;
    width: auto;
    }

    .coupon {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #ffaa00;
}

.coupon .label {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}

.coupon .code {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.ujj {
       color: #0f060b;
    font-size: 1.5rem;
    margin-left: 7.5rem;
    font-weight: bold;
}


    .hero-content button {
         padding: 0.5em 1em;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: black;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
    border-radius: 1rem;
    border: none;
    }

    .hero-content button:hover {
      background-color: black;
      color: white;
    }

    /* Footer */
    footer {
      text-align: center;
      font-size: 1.2rem;
      padding: 2vh 0;
      background: black;
    }
    
    .upi {
  text-decoration: none;
     color: #fff;
}

 .upi:hover {
  text-decoration: none;
     color: #fff;
}

    /* Responsive */
    @media (max-width: 767px) {
        .offer-strip{
  
    font-size: 1rem;
 }
      .hero-section {
        background: url('../images/tribetokes_mobilesize.png');
            background-size: 100% 100%;
    background-position: 100% 100%;
     height: 85vh;
                       width: 100%;
      }

      .hero-content {
                         left: 25%;
               bottom: 45%;
                width: auto;
      }

      .coupon {
    color: #fff;
}

      .coupon .label {
    font-size: 0.8rem;
}
.coupon .code {
    font-size: 1.5rem;
}

.ujj {
    font-size: 1rem;
           margin-left: 3.5rem;
}

      .hero-content button {
               font-size: 1.3rem;
        width: 100%;
      }
      
      .logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7.5vh;
}

      .logo-section img {
             width: 55%;
        height: auto;
      }
         footer {
      font-size: 0.9rem;
  
    }
    }
    
    @media (min-width: 768px) and (max-width: 1199.98px) {
    
    .logo-section {
    height: 8vh;
}
.logo-section img {
            width: 20vw;
}
    
    .hero-section {
  /*   background-image: url('../../assets/images/tribetokes_tabletsize.png');*/
       background-size: 100% 100%;
              background-position: 100% 100%;
        height: 80vh;
      }
      
      .hero-content {
            bottom: 27%;
        left: 10%;
        width: auto;
}
}