/* banner */
.banner-div{
  width:100%;
  overflow: hidden;
  background: linear-gradient(to right, #000000 30%, #F9F6F1 70%);
}

.banner-div a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.middle-banner{
  display:flex;
  align-items: center;
  gap:20px;
  font-weight: 600;
  padding-bottom: 2px;
  flex-grow:1;
  justify-content: center
}

.banner-div h2{
  color:black;
  font-size:18px;
}

.banner-div-img{
  width:200px;
}

.banner-div img{
  width:100%;
}

.banner-header-main-text{
  color:black;
  background: #f2c84c;
  border-radius:24px;
  padding:8px 10px;
  white-space: nowrap;
}

.banner-header-main-text:before{
  content: "";
  border-radius: inherit;
  -webkit-mask-composite: xor;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto,auto;
  background: linear-gradient(87.94deg, #ab7014 -.38%, #eab035 100%);
  padding: 3px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto,auto;
  mask-mode: match-source, match-source;
}


.banner-div:before {
    content: "";
    border-radius: inherit;
    background: linear-gradient(87.94deg, #ab7014 -.38%, #eab035 100%);
    
    /* 1. Set padding ONLY on the bottom */
    padding: 0 0 4px 0; 
    
    position: absolute;
    
    /* 2. Stretch to all edges */
    inset: 0; 
    
    /* 3. Standard Mask properties */
    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    /* Keep these for browser compatibility */
    -webkit-mask-origin: content-box, border-box;
    mask-origin: content-box, border-box;
}

/* */

/* banner countdown timer */

#countdown-timer-2{
  display: flex;
  gap: 5px;
  color:black;
}

.banner-time-block{
  display:flex;
  flex-direction:column;
  border-right:1px black solid;
  padding:10px;
  text-align:center;
  font-size:18px;
}

.banner-time-block:last-child{
  border-right:0px black solid;
}

.banner-time-block-text{
  font-size:14px;
  opacity:0.4;
}


/* */



@media (max-width:767px) {

  .banner-div h2{
    font-size:16px;
  }
  
  .banner-div-img{
    width:200px;
  }

  #countdown-timer {
    font-size:13px;
  }

}

@media (max-width:600px) {

  .banner-div{
    display: none;
  }

  .banner-div h2{
    font-size:12px;
  }
  
  .banner-div-img{
    width:120px;
  }

  .banner-time-block{
    padding:8px;
  }

  #countdown-timer{
    margin-top:7px;
  }

  #countdown-timer-2{
    gap:0;
  }

  .banner-time-block{
    font-size:14px;
  }

  .banner-time-block-text{
    font-size:10px;
  }

  #countdown-timer {
    font-size:21px;
  }

}


@media (max-width:420px) {

  .banner-div h2{
    font-size:10px;
  }
  
  .banner-time-block{
    font-size:10px;
  }

  .banner-time-block-text{
    font-size:8px;
  }

  .banner-header-main-text:before{
    padding: 1px;
  }

}