.mainBanner{position: relative; height: 620px; margin: 80px 0 60px;padding-top: 15%;}
.mainBanner .bannerImg{position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit: cover;object-position: top center;}
.mainBanner::after{content: '';position: absolute; top: 0;left: 0;height: 100%;width: 100%; background: linear-gradient(0deg, #0008 0%, #0000 39.93%);z-index: 1;}
.mainBanner .bannerContent{position: absolute;bottom: 10%;left: 0;right: 0;z-index: 2;color: #fff;text-align: center;}

.mainBanner .bannerTitle{font-size: 3.4rem;line-height: 1.05; font-weight: 900;width: fit-content;margin: auto;background: var(--gold-gradient); -webkit-text-fill-color: transparent;-webkit-background-clip: text;position: relative;z-index: 1;}

/* .mainBanner .bannerTitle:after {content: attr(data-text);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 5;background-image: linear-gradient(100deg, transparent 0%, transparent 10%, rgba(237,194,132,1) 20%, rgba(128,92,58,0.5) 35%, rgba(128,92,58,1) 45%, rgba(237,194,132,1) 63%, rgba(128,92,58,0.5) 73.15%, rgba(128,92,58,1) 80%, transparent 90%, transparent 100%);background-clip: text;background-size: 100%;background-repeat: no-repeat;animation-name: shine;animation-direction: both;animation-iteration-count: infinite;animation-duration: 5s;animation-fill-mode: both;animation-timing-function: linear;}

@keyframes shine {
  0% {
    background-position: -50rem 0;
  }
  25% {
    background-position: -50rem 0;
  }
  100% {
    background-position: 30rem 0;
  }
} */
.mainBanner .bannerTitle span{display: block;width: fit-content;margin: auto;margin-top: 2%; font-size: 1.2rem;font-weight: 400; padding: 5px 50px; -webkit-text-fill-color: white;-webkit-background-clip: unset;}

.mainBanner .subtitle{ width: fit-content;font-size: 1.2rem; font-weight: 700; margin: 6% auto 1%;position: relative;
  /* color: rgba(237,194,132,1); */
  background: var(--gold-gradient); -webkit-text-fill-color: transparent;-webkit-background-clip: text;}
.mainBanner .subtitle::after{content: '';position: absolute; bottom: -25%;left:0; right: 0;background-color:rgba(237,194,132,1);height: 0.05rem;width: 60%;margin: auto;}
.mainBanner .subtitle.noBorder::after{content: none;}

#counter{margin: 10% auto;width: fit-content;text-align: start;opacity: 0;}
#counter .counterSpan{position: relative;display: inline-block;}
#counter .counterSpan span{position: absolute;bottom: -15%;left: 0;right: 0;margin: auto;text-align: center;text-transform: capitalize;font-size: 0.75rem;;min-width: 44px}
#counter .counterSpan b{font-size: 2.2rem;font-weight: 500;}
#counter .counterSpan:not(:last-child) span{padding-right: 15px}
#counter .counterSpan:not(:last-child) b{position: relative; padding-right: 15px;}
#counter .counterSpan:not(:last-child) b:after{content: ':';position: absolute; top: 0; right: 0;line-height: 1.3;}

.mainBanner .outlineBtn{background: var(--gold-gradient);color: #fff;}
.mainBanner .outlineBtn::before{content: '';border: solid 1px #fff; border-radius: var(--border-radius);position: absolute;top: -6px;left: -6px;width: 107%;height: 128%;}
.mainBanner .outlineBtn::after{background-color: var(--color-pink);}

/* category box */
.vertBox{background-blend-mode: color-burn;}
.vertBox img{width: 75px;height: 75px;}
.vertBox .boxTitle{font-size: 1.3rem;font-weight: 700;color: #212121;text-transform: capitalize;}
@media (min-width:350px) {
  /* #counter{margin-left: 20%;} */
}

@media (min-width: 767px){
  .mainBanner .bannerContent{bottom: 12%;}
  .mainBanner{height: 600px;}
  .mainBanner .bannerTitle{font-size: 3.8rem;}
  .mainBanner .subtitle{margin: 3% auto 1%;}
  #counter{margin: 30px auto;margin-left: 35%;}
}

@media (min-width: 991px){
  .mainBanner{height: 550px;}
  #counter{margin-left: 38%;}
}

@media (min-width: 1150px){
  .mainBanner{height: 85vh; margin:8vw 0 4.5vw;padding-top: 13%;}
  .mainBanner .bannerTitle{font-size: 6.2vw;}
  .mainBanner .bannerTitle span{font-size: 1.4vw;margin-top: 1.5%;}
  .mainBanner .subtitle{font-size: 1.8vw; margin: 1.5% auto 1%;}
  /* .mainBanner .subtitle::after{bottom: -25%;} */

  #counter{margin: 2.5vw auto;margin-left: 40%;}
  #counter .counterSpan span{font-size: 0.85vw;padding-right:1vw;min-width: 4vw;}
  #counter .counterSpan b{font-size: 3.2vw;}
  #counter .counterSpan:not(:last-child) b{padding-right:1vw;}

  .mainBanner .outlineBtn{padding: 0.5vw 2vw;}
  .mainBanner .outlineBtn::before{width: 106%;height: 129%;top: -0.4vw;left: -0.4vw;}

  .ctaBox img{width: 5vw;height: 5vw;}
  .vertBox .boxTitle{font-size: 1.2vw;}

}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
}