/* my code start*/
.sub-page-banner{
  padding-top:0 !important;
}
.loyalty-container {
    padding-bottom: 0 !important;
}
/* my code endt*/
.about-hero {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 50px;
}

.about-text h1 {
font-size: 36px;
margin-bottom: 15px;
}
.about-image{
  width:100%;
}
.about-text p {
color: #444;
line-height: 1.7;
margin-bottom: 15px;
}

.about-image img {
width: 100%;
border-radius: 10px;
animation: float 6s infinite ease-in-out;
}

.about-long {
margin-bottom: 50px;
color: #555;
line-height: 1.8;
}

.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(285px,1fr));
gap: 25px;
}

.about-box {
border: 1px solid #e5e5e5;
padding: 25px;
border-radius: 10px;
text-align: center;
transition: .3s;
}

.about-box:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.icon {
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background: #eaf3ff;
color: #1e90ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 15px;
}
/* ===== Rewards Section ===== */

.rewards-section {
background: #ffffff;
padding: 100px 0;
font-family: 'Segoe UI', Arial, sans-serif;
}

.rewards-container {
max-width: 1200px;
margin: auto;
padding: 0 20px;
}

/* Header */
.rewards-header {
text-align: center;
margin-bottom: 70px;
}

.rewards-header h2 {
font-size: 42px;
color: #0a0a0a;
margin-bottom: 10px;
}

.tagline {
font-size: 22px;
color: #1e90ff;
font-weight: 600;
margin-bottom: 10px;
text-align:center;
}

.desc {
max-width: 750px;
margin: auto;
color: #555;
line-height: 1.8;
}

/* Tier Grid */
.tier-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

/* Tier Cards */
.tier-card {
background: #ffffff;
border-radius: 16px;
padding: 40px 30px;
text-align: center;
border: 2px solid #eaf2ff;
transition: all .4s ease;
position: relative;
}

/* Hover Active Effect */
.tier-card:hover {
transform: translateY(-15px);
border-color: #1e90ff;
box-shadow: 0 20px 45px rgba(30,144,255,0.15);
}

/* Highlight Elite Tier */
.tier-card.elite {
border-color: #1e90ff;
transform: scale(1.03);
}

/* Icon Circle */
.tier-icon {
width: 80px;
height: 80px;
margin: auto;
border-radius: 50%;
background: #eaf3ff;
color: #1e90ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
margin-bottom: 20px;
transition: .4s;
}

/* Icon Hover */
.tier-card:hover .tier-icon {
background: #1e90ff;
color: #fff;
transform: rotate(6deg) scale(1.1);
}

.tier-card h3 {
margin-bottom: 8px;
font-size: 22px;
}

.tier-range {
font-size: 15px;
color: #777;
margin-bottom: 20px;
}

/* Benefits list */
.tier-benefits {
list-style: none;
padding: 0;
margin: 0;
}

.tier-benefits li {
padding: 8px 0;
border-bottom: 1px solid #eef4ff;
font-size: 15px;
color: #333;
    font-weight: 600;
  text-align: left;
}

.tier-note {
margin-top: 15px;
font-size: 14px;
color: #777;
}

/* WHY SECTION */
.rewards-why {
margin-top: 100px;
text-align: center;
}

.rewards-why h3 {
font-size: 34px;
margin-bottom: 50px;
}

.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.why-box {
background: #ffffff;
padding: 30px;
border-radius: 14px;
border: 2px solid #f0f4ff;
transition: .4s;
}

.why-box i {
font-size: 32px;
color: #1e90ff;
margin-bottom: 15px;
}

.why-box h4 {
margin-bottom: 10px;
font-size: 18px;
}

.why-box p {
color: #555;
line-height: 1.6;
}

.why-box:hover {
border-color: #1e90ff;
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(30,144,255,0.12);
}

/* Responsive */
@media (max-width: 992px) {
.tier-grid,
.why-grid {
  grid-template-columns: 1fr;
}
}
@keyframes float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* MODERN CONTAINER */
.loyalty-container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
padding-block: 60px;
}

/* HERO */
.loyalty-hero {
text-align: center;
margin-bottom: 60px;
}

.loyalty-hero__title {
font-size: 38px;
font-weight: 800;
}

.loyalty-hero__brand {
background: linear-gradient(45deg, #16d5ff, #6a5cff);
-webkit-background-clip: text;
color: transparent;
}

.loyalty-hero__subtitle {
margin-top: 12px;
color: #666;
font-size: 18px;
text-align:center;
}

/* BUTTON */
.loyalty-cta {
display: inline-block;
margin-top: 20px;
padding: 12px 30px;
border-radius: 30px;
background: linear-gradient(45deg, #16d5ff, #6a5cff);
color: #fff;
text-decoration: none;
font-weight: 600;
box-shadow: 0 8px 25px rgba(22,213,255,0.4);
transition: 0.3s;
}
.loyalty-cta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(22,213,255,0.6);
}

/* BENEFITS */
.loyalty-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 25px;
margin-bottom: 70px;
}

.loyalty-benefit-box {
background: #fff;
padding: 30px;
border-radius: 18px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: 0.3s;
}
.loyalty-benefit-box:hover {
transform: translateY(-6px);
}

/* ICON STYLE */
.icon {
width: 60px;
margin-bottom: 15px;
}
.icon path, .icon circle, .icon rect {
stroke: #16d5ff;
stroke-width: 2;
fill: none;
}

/* TABLE */
.loyalty-table-wrapper {
background: #fff;
padding: 40px;
border-radius: 20px;
margin-bottom: 70px;
box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

.loyalty-table-wrapper h2 {
text-align: center;
margin-bottom: 10px;
}

.loyalty-table-wrapper p {
text-align: center;
color: #777;
margin-bottom: 25px;
}

.loyalty-table {
width: 100%;
border-collapse: collapse;
}

.loyalty-table th {
background: #f2f5fb;
padding: 15px;
text-align:center;
}

.loyalty-table td {
padding: 15px;
text-align: center;
}

.loyalty-table tr:hover {
background: #f9fbff;
}

.loyalty-table tr:not(:last-child) td {
border-bottom: 1px solid #eee;
}

/* BADGES */
.level-tag {
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #fff;
}

.level-tag--bronze { background: #c58a3c; }
.level-tag--silver { background: #9aa4b2; }
.level-tag--gold { background: #e3b44b; color:#333;}
.level-tag--platinum { background: #4da3ff; }

/* PROCESS */
.loyalty-process {
text-align: center;
}

.loyalty-process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 25px;
margin-top: 30px;
}

.loyalty-process-step {
background: #fff;
padding: 30px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: 0.3s;
}
.loyalty-process-step:hover {
transform: translateY(-6px);
}

.loyalty-process-step h4 {
margin-top: 10px;
}

.loyalty-process-step p {
font-size: 14px;
color: #777;
}

/* MOBILE */
@media(max-width:600px){
.loyalty-hero__title { font-size: 26px; }
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:9999;
}

.popup-content {
  background: white;
  padding: 30px;
  width: 55%;
  border-radius: 8px;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  z-index: 9;
}

.progress {
  display: flex;
  justify-content: space-between;
  height: auto;
  margin-bottom: 20px;
  background-color: transparent;
}

.step {
  flex: 1;
  padding: 10px;
  position: relative;
  background-color: transparent; /* Light background for inactive steps */
  font-family: "Work Sans", Sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  font-style: normal;
  letter-spacing: 0.5px;
  color: #ACAFB7;
}

.step span {
  background-color: #acafb7;
  height: 25px;
  width: 25px;
  line-height: 25px;
  display: inline-flex;
  color: #fff;
  justify-content: center;
  border-radius: 100%;
  margin-right: 10px;
}
.step.active {
  color: #3D4459;
}
.step.active span {
  background-color: #16d5ff;
}

.step::after {
  content: "";
  width: 100%;
  height: 4px;
  background: #ccc; /* Default connector color */
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1; /* Behind step indicators */
}

.step:last-child::after {
  display: none; /* Hide the connector after the last step */
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.btn-next {
  margin-top: 20px;
}
/*Dt-16-10-2024*/
.form-step .form-group {
  display: flex;
  align-items: center;
  background-color: #F9F9F9;
  border-width: 1px 1px 1px 1px;
  border-radius: 0 0 0 0;
  border: 1px solid #C8C9CC;
}
.form-step .form-control {
  width: 70%;
  background: transparent !important;
  border: none !important;
}
.form-step .form-control:focus {
  box-shadow: none;
}
.form-step label {
  width: 30%;
  padding: 0 23px;
  font-family: "Work Sans", Sans-serif;
  font-size: 14px;
  text-transform: none;
  font-style: normal;
  line-height: 24px;
  color: #3D4459;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  position: relative;
}
.form-step label:before {
  content: "*";
  color: red;
  padding-inline-start: .2em;
  right: 0;
}
.datepicker-field {
  width: 250px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer; /* Add cursor pointer for better UX */
}
#step2Indicator {
  text-align: right;
}
.step-separator {
  width: 50%;
  background-color: #babfc5;
  height: 2px;
  display: flex;
  margin: auto;
}


/* Media Queries */
@media (max-width: 768px) {
  .popup-content {
      width: 90%; /* Full width for smaller screens */
      padding: 20px; /* Less padding on small screens */
  }
  
  .progress {
      width: 100%;
      display: inline-flex; /* Use inline-flex for mobile */
      justify-content: space-around; /* Adjust spacing for mobile */
      flex-direction: unset!important;
  }

  .step {
      font-size: 12px; /* Smaller font size for steps */
  }

  .form-step .form-control {
      width: 100%; /* Full width for inputs */
  }

  .form-step label {
      width: 100%; /* Full width for labels */
      padding: 0; /* Remove padding for small screens */
  }

  .progress {
      flex-direction: column; /* Stack steps vertically */
  }

  .step-separator {
      width: 80%; /* Wider separator on small screens */
  }
}

@media (max-width: 480px) {
  .datepicker-field {
  width: 100%;}
  .close {
      font-size: 20px; /* Smaller close icon */
  }

  .popup-content {
      padding: 15px; /* Less padding for mobile devices */
  }

  .btn-next {
      margin-top: 15px; /* Reduce margin on mobile */
  }

  .step span {
      height: 20px; /* Smaller step indicator */
      width: 20px; /* Smaller step indicator */
      line-height: 20px; /* Adjust line-height */
  }

  .step.active span {
      height: 22px; /* Active step slightly larger */
      width: 22px; /* Active step slightly larger */
  }
}

/* Above sticky header (~1080) and legacy .modal rules (up to 999999) */
#popupForm.popup-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 2000000 !important;
}