.scroll-tab > .nav-link {
    height: 5rem;
    border-radius: 12px;
}

.row.other-reward-cards > .col-md-6 > .flex > img {
    width: 24%;
}


.grid-cards{
  display: grid;gap: 15px;grid-template-columns: 1fr 1fr;
  place-content: center;
  place-items: center;
}


#banner{
  position: relative;
  overflow: hidden;
}

    #banner h1 {
        font-weight: normal !important;
    }

/* Content overlay */
.banner-content{
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  color: #fff;
  max-width: 520px;
}

/* Heading */
.banner-content h1{
  font-size: 2.5rem !important;
  line-height: 2.6rem;
  margin-bottom: 10px;
}

.banner-content h3{
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 20px;
}

.banner-content p{
  font-size: 18px;
  margin-bottom: 25px;
}

/* CTA button */
.banner-btn{
  display: inline-block;
  background:#2f66ff;
  color:#fff;
  padding:12px 28px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}

.banner-btn:hover{
  background:#1e4de0;
}

@media (max-width:822px){
    .banner-content{
         max-width: 460px;
    }
  
  .banner-content h1 {
    font-size: 2.1rem !important;
    line-height: 2.3rem;
  }

    .banner-content p{
    font-size: 1rem !important;
  }

  .other-reward-cards {
    gap: 20px;
  }


}

/* Mobile */
@media (max-width:767px){

  .banner-content{
    left:20px;
    right:20px;
    top:45%;
  }

  .banner-content h1{
    font-size:26px;
  }

  .banner-content h3{
    font-size:16px;
  }


}
  
@media (max-width:569px) {
.banner-content{
	max-width: 250px !important;
}

.banner-content h1{
  font-size: 1.6rem !important;
  line-height: 1.8rem;
}

}

@media (min-width: 768px) {
    #banner p {
        font-size: 1.1rem !important;
    }

    .grid-cards > img {
        width: 90%;
    }
   .mirror-card{
     margin: 0px 16px;
   }
  
}


.icon-img img{
        width: 40%;
    }
    .cards-img{
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: center;
    }
    .cards-img img {
    width: 50%;
}



.conversion-right{
    position: relative;
    padding-left: 30px;
}

.conversion-right::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 150px;
    width: 2px;
    background: rgba(255,255,255,0.7);
}



.new-conversion-rate-blue {
           /* background: linear-gradient(90deg,#2f63d9,#3a78ff); */
  			background-color: #255be3;
            border-radius: 1rem; 
  			padding: 20px;
            color:#fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            gap: 12px;
        }
        .flex {
            display: flex;
            gap: 12px;
        }
        .img-with-text{
            display: flex;
        }

        .feature-sub-title h3{
                font-size: 2.3rem;
        }



/* --   marquee slider starts --*/


    .img-carousel{
max-width:1060px;
margin:auto;

}

.marquee-slider{
width:100%;
margin-top: 20px;
overflow:hidden;
position:relative;
height: 70px;
}

.marquee-slide-track{
display:flex;
width:max-content;
animation: marquee 25s linear infinite;
}

.marquee-slider::before{
  position:absolute;
  background-image:linear-gradient(to right,rgb(255, 255, 255) 0%,rgba(239, 235, 235, 0) 100%);
  content:'';
  height:100%;
  width:25%;
  z-index:2;
  pointer-events:none;
}

.marquee-slider::after{
content:"";
position:absolute;
top:0;
right:0;
height:100%;
width:120px;
z-index:5;
background-image:linear-gradient(to left, #fffefe 0%, rgba(255, 255, 255, 0) 100%);
pointer-events:none;
}


.marquee-slide{
/* width:140px; */
height:40px;
margin-right:50px;
flex-shrink:0;
transition:0.3s;
}

.marquee-slide:hover{
transform:scale(1.1);
}

@keyframes marquee{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}


@media (max-width:992px){

    .img-carousel{display: contents;}

.marquee-slider{
height:60px;
}

.marquee-slide{
/* width:110px; */
height:35px;
margin-right:40px;
}

.marquee-slide-track{
animation-duration:20s;
}

.marquee-slider::before,
.marquee-slider::after{
width:80px;
}

}

/* =========================
MOBILE
========================= */

@media (max-width:600px){

.marquee-slider{
height:50px;
}

.marquee-slide{
/* width:90px;
height:30px; */
margin-right:30px;
}

.marquee-slide-track{
animation-duration:15s;
}

.marquee-slider::before,
.marquee-slider::after{
width:50px;
}

}



/* --   marquee slider ends --*/


/* --   mob gif slider starts --*/
 .slider-steps{
    width: 80vw;
}
.img-cards{
    display: flex;
}
.img-cards img {
    width: 20%;
}

h2.text-center.text-blue.text-display.font-weight-bold {
    padding-bottom: 20px;
}

.feature-box{
                                background:#f1f3f5;
                                padding:20px;
                                border-radius:15px;
                                height:100%;
                                }

                                .feature-box img{
                                    width:100%;
                                    }

                                .feature-box h6{
                                margin-bottom:6px;
                                }
                                .feature-box h6{
                                color:#1a5bd7;
                                font-weight:600;
                                }

                                .feature-box p{
                                color:#333;
                                font-size:14px;
                                }


/* .mobile-steps-section{
max-width: 800px;
} */


.modal-content{
    border-radius: 1rem;
}
.modal-header{
    border-bottom: none;
}

.btn-blue{
    background-color: var(--color-blue-bright) !important;
    color: white;
    border-radius: 8px;
    margin: 0 auto;
}

.step-wrapper{
position:relative;
padding:25px 0;
}

.step-line{
position:absolute;
top:50%;
left:0;
width:100%;
height:2px;
background:#2d6cdf;
transform:translateY(-50%);
}

.step-circles{
display:flex;
justify-content:space-between;
position:relative;
z-index:2;
}

.step-circle{
width:36px;
height:36px;
border-radius:50%;
border:2px solid #2d6cdf;
background:white;
color:#2d6cdf;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

.step-circle.active{
background:#2d6cdf;
color:white;
}

/* .step-phone{
max-width:240px;
} */

@media (max-width: 768px){
    .step-phone {
    max-width: 240px;
    margin: 0 auto;
    display: block;
}
}

/* --   mob gif slider ends --*/



 @media (max-width: 576px) {

                            .img-cards{
                                flex-direction: column;
                                align-items: center;
                            }

                            .img-cards img{
                               width: 80% !important;
                            }

                            .mob-hide {display: none;}
                        .conversion-right::before {
                            display: none;
                        }
                        .conversion-right {padding-left: 15px;}
                        .feature-sub-title {text-align: center !important;}
                        .img-cent{text-align: center;}
                        .new-conversion-rate-blue {
                            padding: 20px 15px;
                        }

                        .img-cent {
                            text-align: center;
                            margin-bottom: 15px;
                        }
                        .img-cent img {
                            width: 65%;
                        }
                            .feature-sub-title h3 {
                            font-size: 26px;
                        }
                        .feature-sub-title {
                            text-align: center;
                            margin-top: 10px;
                        }

                        .conversion-right {
                            margin-top: 25px;
                        }
                        .conversion-cards h5{
                            margin-bottom: 15px;
                        }

                        }















 /* ---- Old Styles ---- */

 .card-img{
                        display: flex;
                        flex-direction: row;
                        gap: 12px;
                        justify-content: center;
                        margin-bottom: 40px;
                    }
                    
					.lt-cls {
                        position: absolute;
                        top: -20px;
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: #ff6600;
                        color: white;
                        font-weight: bold;
                        text-transform: uppercase;
                        padding: 8px 24px;
                        border-radius: 4px;
                        z-index: 2;
                        text-align: center;
                    }
                    .faqans{
                      padding-right: 0.5rem;
                    }



/* ---------- Section 1: Offer Banner ---------- */
    .offer-section {
      background-color: #1a4cff;
      color: white;
      border-radius: 20px;
      padding: 50px 20px;
      text-align: center;
      margin: 30px auto 60px auto;
    }
    .offer-section h2 {
      color: #ffeb00;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .offer-section h4 {
      margin-bottom: 26px;
    }
    .feature {
      text-align: center;
    }
    .bold{
        font-weight: bold;
    }
    .feature-title {
      font-weight: bold;
      font-size: 18px;
      min-height: 40px;
      margin-top: 10px;
      padding: 0px 12px;
    }
    .icon-img img{
        width: 40%;
    }

    /* ---------- Section 2: Savings Table ---------- */
    .savings-section {
      text-align: center;
      max-width: 1000px;
      margin: 60px auto;
    }
    .savings-section h3 {
      color: #1a4cff;
      font-weight: 600;
      margin-bottom: 40px;
    }
    .card-custom {
      border: none;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .card-header {
      background-color: #1a4cff;
      color: white;
      font-weight: 600;
      padding: 15px;
    }
    .saving-card-body {
      background-color: #fff;
      padding: 20px;
    }
    
    .was-label {
      background-color: #e0e0e0;
      color: #1a4cff;
      font-weight: 600;
      font-size: 12px;
      display: inline-block;
      padding: 3px 8px;
      border-radius: 5px;
      margin-top: 5px;
    }
    .was-text {
      color: red;
      text-decoration: line-through;
      font-weight: 600;
    }
    .now-label {
      background-color: #ffeb00;
      color: #000;
      font-weight: bold;
      display: inline-block;
      padding: 4px 10px;
      border-radius: 5px;
      margin-top: 10px;
    }
    .note {
      font-size: 12px;
      color: #555;
      margin-top: 15px;
    }

    .row.offer-section-flex.mt-4{
display: flex;
flex-direction: row;
gap: 10px;
}

@media (max-width: 768px){
.row.offer-section-flex.mt-4 {
display: flex;
flex-direction: column;
justify-content: center;
}
}

.clr-red{
    color: red;
}

.savingInSection {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
        }

        .card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            width: 320px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }

        .card-header {
            background: linear-gradient(135deg, #0f1c3f 0%, #1a2f5c 100%);
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
        }

        .saving-card-body {
            padding: 15px 20px 0px 20px;
            text-align: center;
        }

        .savingCard-title {
            color: #333;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 6px;
        }

        .price {
            color: var(--color-blue-bright);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .divider {
            width: 100%;
            height: 1px;
            background: #e0e0e0;
            margin: 20px 0;
            position: relative;
        }

        .divider-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 0 12px;
            color: var(--color-blue-bright);
            font-size: 12px;
            font-weight: 600;
        }

        .old-value {
            font-size: 20px;
            text-decoration: line-through;
            text-decoration-color: red;
        }

        .new-value-section {
            /* margin: 14px -10px 26px -10px; */
            margin: 24px -10px 24px -10px;
            padding: 24px 20px;
            position: relative;
            border-radius: 20px;
        }

        .yellow-gr{
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
        }

        .gray-gr{
            /* background: linear-gradient(135deg, #c9c9c9 0%, #b3b3b3 100%); */
            background-color: #eeeeee;
        }

        .now-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-blue-bright);
            color: white;
            padding: 4px 16px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .new-value {
            color: #333;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.5;
        }

        .points {
            font-size: 20px;
        }

        @media (max-width: 768px) {
            .savingInSection {
                flex-direction: column;
                align-items: center;
            }
        }

        .new-conversion-rate {
            background: linear-gradient(90deg,#2f63d9,#3a78ff);
            border-radius:10px;
            color:#fff;}