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

}

html,
body {
  height: 100%;
  width: 100%;
}
/* Home Logo+Text Value */
/* Home Logo+Text Value */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}


.card-flip-container {
  perspective: 1000px;
}

.card-flip {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card-flip.flipped {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 1rem;
}

.card-front {
  z-index: 2;
  /*border: 4px solid green;*/
}

.card-back {
  transform: rotateY(180deg);
}


@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 4s ease infinite;
}

@keyframes glow-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.glow-gradient {
  background-size: 300% 300%;
  animation: glow-gradient 1s ease-in-out infinite;
}


@keyframes fade-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
}


button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Container to hide overflow */
.marquee-container {
  position: relative;
  overflow: hidden;
  height: 12vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16vh;
  margin-bottom: 0;
  width: 100%;
}

/* The wrapper for all the sliding items */
.animated-slider {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Base styles for the individual text items */
.slider-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: flex;
  animation: fade-sequence 6s ease-in-out infinite;
  /* `ease-in-out` provides a smoother transition */
  text-align: center;
  /* Center the text inside each span */
  white-space: nowrap;
}

/* Stagger the animations for each item */
.slider-item:nth-child(1) {
  animation-delay: 0s;
}

.slider-item:nth-child(2) {
  animation-delay: 2s;
}

.slider-item:nth-child(3) {
  animation-delay: 4s;
}

/* The keyframes for the fading effect */
@keyframes fade-sequence {
  0%, 100% {
    opacity: 0;
  }
  16.66% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
}

 .animated-slider{
  margin-right: 20px !important;
 }

/* 📱 MOBILE VIEWPORT OPTIMIZATION */

@media (max-width: 1024px) {
  .rising-pick{
    width: 6.2vw !important; 
  }
   .marquee-container{
      margin-top: 15vw !important;
  }
  .animated-slider .slider-item{
      /*border: 2px solid red;*/
      font-size: 2.7vw;
      margin-left: 2.6vw;
  }
   .front-card{
  margin-top: 0.7vw !important;
  /*margin-left: 2vw !important;*/
 }
 .card-front{
     height: 32.5vw;
     width: 37vw;
     padding: 2.9vw 3.5vw 2.5vw 3.5vw !important;
     margin-left: 0.9vw;
       /*border: 4px solid green;*/
 }
   #scratchHeading{
     font-size: 2.5vw;
     margin-top: -1vw;
     margin-bottom: 1.7vw;
 }
  #scratchpara{
     font-size: 1.7vw;
     margin-top: 1vw;
     margin-bottom: 0px;
 }
 .card-back{
     width: 37vw;
     padding-top: 2.3vw !important;
     padding-bottom: 2.3vw !important;
     margin-left: -3vw;
 }
 .detail-form{
     font-size: 2.2vw !important;
      margin-top: 0px;
      margin-bottom: 2.1vw !important;
 }
 #otpForm #nameInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm #phoneInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm #otpInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm input{
     font-size: 1.6vw;
 }
 #otpForm input::placeholder{
     font-size: 1.7vw;
 }
 #sendOtpBtn{
     height: 4.6vw;
     font-size: 1.4vw;
     display: flex;
     padding: 1.3vw 1.5vw 1.5vw 1.5vw;
     flex-direction: row;
      gap: 2px;
 }
 #sendOtpBtn i{
     font-size: 19px !important;
 }
  #countdownSpan{
     margin-left: 2px !important;
 }
 #verify{
     font-size: 1.6vw;
 }
 .claimtimer{
     margin-top: -1vw !important;
     margin-bottom: 2.5vw !important;
     font-size: 1.6vw !important;
     padding: 0.8vw 1.7vw !important;
 }
  #btncard{
     font-size: 2.2vw;
 }
 #claimBtn, #claimLaterBtn{
     font-size: 1.5vw;
 }
  #popup-text{
     font-size: 1.6vw;
     line-height: 2.1vw;
 }
    .expire-time{
    /* border: 2px solid rgb(51, 255, 0) !important;  */
    margin-bottom: 1vw;    
    margin-top: 1vw;    
    padding: .6vw 1.5vw;
    font-size: 1.6vw;
  }
  
  .coupon-code{
    /*margin-bottom: 1% !important;  */
     font-size: 1.6vw !important;
     padding: 0px 5px;
  }

  .note-text{
    margin-top: 1vw;    
    font-size: 1.6vw !important;
  }
  
}

@media (max-width: 768px) {

 .rising-pick{
    width: 6.3vw !important; 
  }
    .marquee-container{
      margin-top: 13vw !important;
  }
  .animated-slider .slider-item{
      font-size: 3vw;
      margin-left: 2vw;
  }

 .front-card{
  margin-top: -1vw !important;
  /*margin-left: 2vw !important;*/
 }
 .card-front{
     height: 32.5vw;
     width: 37vw;
     padding-top: 1.5vw !important;
     margin-left: 5.5vw;
 }
 #scratchHeading{
     font-size: 2.3vw;
     margin-top: 0px !important;
     margin-bottom: 1vw;
 }
 #clickToFlip{
      height: 19.5vw !important;
 }
 #scratchpara{
     font-size: 1.6vw;
     margin-top: 0.4vw !important;
     margin-bottom: 0px !important;
 }
 .card-back{
     width: 37vw;
     padding-top: 1.8vw !important;
     margin-left: 3.7vw;
 }
 .detail-form{
     font-size: 2.2vw !important;
      margin-top: 0px;
      margin-bottom: 1.6vw !important;
 }
 #otpForm #nameInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm #phoneInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm #otpInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm input{
     font-size: 1.6vw;
 }
 #otpForm input::placeholder{
     font-size: 1.7vw;
 }
 #sendOtpBtn{
     height: 4.7vw;
     font-size: 1.4vw;
     display: flex;
     padding: 1.3vw 1vw 1.5vw 1vw;
     flex-direction: row;
      gap: 2px;
 }
 #sendOtpBtn i{
     font-size: 15px !important;
 }
  #countdownSpan{
     margin-right: 2px !important;
 }
 .resend-otp{
     font-size: 1.1vw !important;
 }
 #verify{
     font-size: 13px !important;
 }
  .claimtimer{
     /*border: 2px solid red !important;*/
     margin-top: 0px !important;
     margin-bottom: 5px !important;
     padding: 5px 6px !important;
 }
 #btncard{
     font-size: 2vw !important;
 }
 #claimBtn, #claimLaterBtn{
     font-size: 1.4vw !important;
 }
 #popup-text{
     font-size: 1.5vw !important;
 }
 #okBtn{
     font-size: 1.3vw !important;
     padding: 6px 10px;
 }
 .already{
     font-size: 2vw !important;
 }
 #claim-cardtext{
       font-size: 2vw !important;
 }
    .expire-time{
    margin-bottom: 2vw;    
    margin-top: 1vw;    
    padding: 0.6vw 1.1vw;
    font-size: 1.6vw !important;
  }
  
  .coupon-code{
     font-size: 1.4vw !important;
     padding: 0vw 0.6vw !important;
  }

  .note-text{
    margin-top: 0.7vw !important;    
    font-size: 1.6vw;
  }

}

@media (max-width: 640px) {
.marquee-container{
    margin-top: 18vw !important;
}
.animated-slider .slider-item{
    font-size: 3vw;
    margin-left: 2vw;
}

 .front-card{
  margin-top: -1vw !important;
  /*margin-left: 2vw !important;*/
 }
 .card-front{
     height: 32.5vw;
     width: 38vw;
     padding-top: 1.5vw !important;
     margin-left: 9.6vw;
 }
  #scratchHeading{
     font-size: 2.3vw;
     margin-top: 0px !important;
     margin-bottom: -0.1vw;
 }
 #clickToFlip{
      height: 19.5vw !important;
 }
 #scratchpara{
     font-size: 1.7vw;
     margin-top: 0.4vw !important;
     margin-bottom: 0px !important;
 }
 
 .card-back{
     width: 38vw;
     padding-top: 1.8vw !important;
     margin-left: 8vw !important;
 }
 .detail-form{
     font-size: 2.4vw !important;
      margin-top: 0px;
      margin-bottom: 1.6vw !important;
 }
 #otpForm #nameInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm #phoneInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm #otpInput{
     padding: 1.1vw 1.5vw;
 }
 #otpForm input{
     font-size: 1.7vw;
 }
 #otpForm input::placeholder{
     font-size: 1.7vw;
 }
 .phone-otpBtn{
     display: flex;
     flex-direction: column;
 }
 #sendOtpBtn{
     height: 5vw;
     font-size: 1.7vw;
     /*padding: 3vw !important;*/
     display: flex;
     flex-direction: row;
     align-items: Center;
     justify-content: Center;
     gap: 2px;
     margin-top: 1.7vw !important;
 }
 #sendOtpBtn i{
     font-size: 14px !important;
 }
  #countdownSpan{
     margin-right: 2px !important;
 }
 .resend-otp{
     font-size: 1.1vw !important;
 }
 #verify{
     font-size: 12px !important;
 }
 .claimtimer{
   margin-top: 0px !important;
   margin-bottom: 5px !important;
   padding: 3px 13px !important;
 }
 #btncard{
     font-size: 2.2vw !important;
 }
 #claimBtn, #claimLaterBtn{
     font-size: 1.4vw !important;
     padding: 0.8vw 1.3vw !important;
 }
 #popup-text{
     font-size: 1.5vw !important;
 }
 #okBtn{
     font-size: 1.3vw !important;
     padding: 6px 10px;
     margin-top: -0.2vw !important;
 }
  .already{
     font-size: 2vw !important;
 }
 #claim-cardtext{
       font-size: 2vw !important;
     margin-bottom: -1.5vw !important;
     /*margin-top: -1vw !important;*/
 }
  .expire-time{
    margin-bottom: 0.5vw !important;    
    margin-top: 3vw !important;    
    padding: 0.1vw 1.9vw !important;
    font-size: 1.6vw !important;
  }
  
  .coupon-code{
     font-size: 1.6vw !important;
     padding: 0vw 0.4vw !important;
  }

  .note-text{
    margin-top: -0.1vw !important;    
    font-size: 1.9vw !important;
  }
 
}


@media (max-width: 500px) {
    
 .rising-pick{
    width: 9vw !important; 
  }    
.marquee-container{
    margin-top: 27vw !important;
}
.animated-slider .slider-item{
    font-size: 3.5vw;
    margin-left: 2vw;
}

 .front-card{
  margin-top: -2vw !important;
 }
 .card-front{
     height: 37.5vw;
     width: 43vw;
     padding-top: 1.5vw !important;
     margin-left: 13.8vw;
 }
  #scratchHeading{
     font-size: 2.8vw;
     margin-top: 0px !important;
     margin-bottom: -0.1vw;
 }
 #clickToFlip{
      height: 23vw !important;
 }
 #scratchpara{
     font-size: 2vw;
     margin-top: 0.4vw !important;
     margin-bottom: 0px !important;
 }
 
 .card-back{
     width: 45vw;
     padding-top: 1.8vw !important;
     margin-left: 12vw !important;
 }
 .detail-form{
     font-size: 2.6vw !important;
      margin-top: 2px;
      margin-bottom: 1.6vw !important;
 }
 #otpForm #nameInput{
     padding: 1.3vw 1.5vw;
 }
 #otpForm #phoneInput{
     padding: 1.3vw 1.5vw;
 }
 #otpForm #otpInput{
     padding: 1.3vw 1.5vw;
 }
 #otpForm input{
     font-size: 2vw;
 }
 #otpForm input::placeholder{
     font-size: 2.1vw;
 }
 .phone-otpBtn{
     display: flex;
     flex-direction: column;
 }
 #sendOtpBtn{
     height: 5.8vw;
     font-size: 2vw;
     /*padding: 3vw !important;*/
     display: flex;
     flex-direction: row;
     align-items: Center;
     justify-content: Center;
     gap: 2px;
     margin-top: 1.7vw !important;
 }
 #sendOtpBtn i{
     font-size: 15px !important;
 }
  #countdownSpan{
     margin-right: 2px !important;
 }
 .resend-otp{
     font-size: 1.1vw !important;
 }
 #verify{
     font-size: 10.5px !important;
 }
 .claimtimer{
   margin-top: 0px !important;
   margin-bottom: 5px !important;
   padding: 3px 13px !important;
   font-size: 2vw !important;
 }
 #btncard{
     font-size: 2.4vw !important;
     margin-bottom: -3vw !important;
 }
 #claimBtn, #claimLaterBtn{
     font-size: 1.7vw !important;
     padding: 0.8vw 1.3vw !important;
 }
 #popup-text{
     font-size: 1.7vw !important;
     line-height: 2.1vw !important;
 }
 #okBtn{
     font-size: 1.3vw !important;
     padding: 6px 10px;
     margin-top: 1vw !important;
 }
  .already{
     font-size: 2.4vw !important;
 }
 #claim-cardtext{
       font-size: 2.3vw !important;
     margin-bottom: -1.8vw !important;
     /*margin-top: -1vw !important;*/
 }
  .expire-time{
    margin-bottom: 0.5vw !important;    
    margin-top: 3vw !important;    
    padding: 0.1vw 1.9vw !important;
    font-size: 1.9vw !important;
  }
  
  .coupon-code{
     font-size: 2vw !important;
     padding: 0vw 0.4vw !important;
  }

  .note-text{
    margin-top: -0.1vw !important;    
    font-size: 2vw !important;
  }
 
}

@media (max-width: 425px) {
  .rising-pick{
    width: 9vw !important; 
  }
  .marquee-container{
      margin-top: 28vw;
  }
  .animated-slider .slider-item{
      /*border: 2px solid red;*/
      font-size: 4vw;
      margin-left: 3.8vw;
  }
  .front-card{
  margin-top: -1.5vw;
  margin-left: 2vw;
 }
 .card-front{
     height: 52vw;
     width: 60vw;
     padding: 1vw 6vw!important;
     margin-left: 12vw;
 }
 #scratchHeading{
     font-size: 3.9vw;
     margin-top: 0px;
     margin-bottom: 5px;
 }
 #clickToFlip{
      height: 30.9vw !important;
 }
 #scratchpara{
     font-size: 2.8vw;
     margin-top: 1.4vw !important;
     margin-bottom: 0px !important;
 }
 
 .card-back{
     width: 60vw;
     padding: 2.5vw 3vw !important;
     margin-left: 11vw !important;
 }
 .detail-form{
     font-size: 3.6vw !important;
      margin-top: 0px !important;
      margin-bottom: 1.7vw !important;
 }
 #otpForm #nameInput{
     padding: 1.7vw 1.6vw;
 }
 #otpForm #phoneInput{
     padding: 1.7vw 1.6vw;
 }
 #otpForm #otpInput{
     padding: 1.7vw 1.6vw;
 }
 #otpForm input{
     font-size: 3vw !important;
 }
 #otpForm input::placeholder{
     font-size: 2.9vw !important;
 }
 .phone-otpBtn{
     display: flex;
     flex-direction: column;
 }
 #sendOtpBtn{
     height: 8vw;
     font-size: 2.6vw;
     /*padding: 3vw !important;*/
     display: flex;
     flex-direction: row;
     align-items: Center;
     justify-content: Center;
     gap: 2px;
     margin-top: 1.7vw !important;
 }
 #sendOtpBtn i{
     font-size: 16.5px !important;
 }
 #countdownSpan{
     margin-left: 2px !important;
 }
 #verify{
     font-size: 12px !important;
 }
  .claimtimer{
     margin-bottom: 1vw;
     padding: 1vw 4vw !important;
     font-size: 2.6vw !important;
 }
  #btncard{
     font-size: 3vw !important;
 }
 #claimBtn, #claimLaterBtn{
     padding: 1.5vw 2vw;
     font-size: 2.4vw !important;
 }
 #popup-text{
     font-size: 2.3vw !important;
     line-height: 2.9vw !important;
 }
 #okBtn{
     font-size: 2vw !important;
     padding: 6px 12px;
     margin-top: 1.5vw !important;
 }
 .already{
     font-size: 3vw !important;
 }
 #claim-cardtext{
       font-size: 3vw !important;
       margin-bottom: 0px;
 }
    .expire-time{
    /* border: 2px solid rgb(51, 255, 0) !important;  */
    margin-bottom: 7% !important;    
    margin-top: 6% !important;    
    margin-bottom: 0px !important;    
    padding: 0px 16px !important;
    font-size: 2.4vw !important;
  }
  
  .coupon-code{
    /*margin-bottom: 1% !important;  */
     font-size: 2.3vw !important;
     padding: 0px 5px !important;
  }

  .note-text{
    margin-top: 2% !important;    
    font-size: 2.7vw !important;
  }

}



@media (max-width: 375px) {
  
  .rising-pick{
    width: 11vw !important; 
  }
  .marquee-container{
      margin-top: 30vw !important;
  }
  .animated-slider .slider-item{
      /*border: 2px solid red;*/
      font-size: 4.7vw;
      margin-left: 4vw;
  }
 .card-front{
     height: 53.6vw;
     width: 65vw !important;
     padding-top: 0px !important;
     margin-left: 9vw;
 }
 #scratchHeading{
     font-size: 3.9vw;
     margin-top: 1vw !important;
     margin-bottom: -0.3vw !important;
 }
 #clickToFlip{
      height: 35vw !important;
 }
 #scratchpara{
     font-size: 2.9vw;
     margin-top: 2px !important;
     margin-bottom: 0px !important;
 }
 .card-back{
     width: 65vw;
     padding: 3vw 3.5vw !important;
     margin-left: 8vw !important;
 }
 .detail-form{
     font-size: 4vw !important;
      margin-top: 0px;
      margin-bottom: 1.5vw;
 }
 #otpForm #nameInput{
     padding: 2vw 2.6vw;
 }
 #otpForm #phoneInput{
     padding: 2vw 2.6vw;
 }
 #otpForm #otpInput{
     padding: 2vw 2.6vw;
 }
 #otpForm input{
     font-size: 3vw !important;
 }
 #otpForm input::placeholder{
     font-size: 3.2vw !important;
 }
 .phone-otpBtn{
     display: flex;
     flex-direction: column;
 }
 #sendOtpBtn{
     height: 8vw;
     font-size: 2.8vw;
     /*padding: 3vw !important;*/
     display: flex;
     flex-direction: row;
     align-items: Center;
     justify-content: Center;
     gap: 2px;
     margin-top: 1.7vw !important;
 }
 #sendOtpBtn i{
     font-size: 16.5px !important;
 }
 #countdownSpan{
     margin-left: 2px !important;
 }
 #verify{
     font-size: 11.5px !important;
 }
 .claimtimer{
   padding: 0.4vw 4vw !important;
   font-size: 2.8vw !important;
 }
 #btncard{
     font-size: 3.6vw !important;
 }
 #claimBtn, #claimLaterBtn{
     font-size: 2.8vw !important;
     padding: 1.2vw 2.3vw !important;
 }
 #popup-text{
     font-size: 2.5vw !important;
     line-height: 3.8vw !important;
 }
 #okBtn{
     font-size: 2vw !important;
     padding: 1.3vw 2.2vw;
     margin-top: 2vw !important;
 }
 .already{
     font-size: 3.8vw !important;
 }
 #claim-cardtext{
       font-size: 3.6vw !important;
       margin-bottom: 0px;
 }
    .expire-time{
    margin-bottom: 1vw !important;    
    margin-top: 2.6vw !important;    
    padding: 0.3vw 5vw !important;
    font-size: 3vw !important;
  }
  
  .coupon-code{
    /*margin-bottom: 1% !important;  */
     font-size: 2.8vw !important;
  }

  .note-text{
    margin-top: 1vw !important;    
    font-size: 3.2vw !important;
  }
  }

 @media (max-width: 320px) {
    .rising-pick{
    width: 12vw !important; 
  }
  .marquee-container{
      margin-top: 37vw !important;
  }
  .animated-slider .slider-item{
      /*border: 2px solid red;*/
      font-size: 5vw;
      margin-left: 3.9vw;
      /*margin-bottom: 0px !important;*/
  }
    .front-card{
  margin-top: -1.5vw;
  margin-left: 2vw;
 }
   .card-front{
     height: 62.5vw;
     width: 70vw !important;
     margin-left: 5vw;
 }
 #scratchHeading{
     font-size: 4.4vw;
     margin-top: 1vw;
     margin-bottom: -1vw;
 }
 #clickToFlip{
      height: 40vw !important;
 }
 #scratchpara{
     font-size: 3.3vw;
     margin-top: 1vw;
 }
 .card-back{
     width: 70vw;
     padding: 3vw 3vw !important;
     margin-left: 5vw !important;
 }
 .detail-form{
     font-size: 4.4vw;
      margin-bottom: 1.7vw;
 }
 #otpForm #nameInput{
     padding: 2vw 2.5vw;
 }
 #otpForm #phoneInput{
     padding: 2vw 2.5vw;
 }
 #otpForm #otpInput{
     padding: 2vw 2.5vw;
 }
 #otpForm input{
     font-size: 3.2vw !important;
 }
 #otpForm input::placeholder{
     font-size: 3.5vw !important;
 }
 .phone-otpBtn{
     display: flex;
     flex-direction: column;
 }
 #sendOtpBtn{
     height: 8.1vw;
     font-size: 3vw;
     /*padding: 3vw !important;*/
     display: flex;
     flex-direction: row;
     align-items: Center;
     justify-content: Center;
     gap: 2px;
     margin-top: 1.7vw !important;
 }
 #sendOtpBtn i{
     font-size: 15px !important;
 }
 #countdownSpan{
     margin-left: 2px !important;
 }
 #verify{
     font-size: 11px !important;
 }
  #btncard{
     font-size: 3.8vw !important;
 }
 #claimBtn, #claimLaterBtn{
     font-size: 2.7vw !important;
     padding: 2vw 2vw !important;
 }
 #popup-text{
     font-size: 2.9vw !important;
     line-height: 3.9vw !important;
 }
 #okBtn{
     font-size: 2.8vw !important;
     padding: 1.4vw 2.2vw !important;
 }
 .already{
     font-size: 4.1vw !important;
 }
 #claim-cardtext{
       font-size: 3.6vw !important;
 }
    .expire-time{
    margin-bottom: 1vw;    
    margin-top: 5vw !important;    
    padding: 0vw 5vw !important;
    font-size: 3.2vw !important;
  }
  
  .coupon-code{
     font-size: 3.4vw !important;
  }

  .note-text{
    margin-top: 1.4vw !important;    
    font-size: 3.4vw !important;
  }
  
 }