* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body
{
  overflow-x: hidden;
}
/* Make header fixed at the top */
header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  width: 1300px;
}

.logo img {
  width: 184.69564819335938px;
  height: 54.446495056152344px;
  top: 23px;
  left: 80px;
  margin-left: 50px;

}

.center ul {
  display: flex;
  list-style: none;
  gap: 30px;
}

.center ul li a {
  text-decoration: none;
  color: black;
  padding: 5px 0;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s;
  width: 425px;
height: 32px;
top: 34px;
left: 507.5px;
gap: 20px;
}

.center ul li a:hover {
  border-bottom: 3px solid rgba(11, 70, 142, 1);
}

.center ul li a.active {
  border-bottom: 3px solid rgba(11, 70, 142, 1);
}

.contact button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 154px;
  height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #FABD46;
  border: none;
  color: white;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0px 2px 4px rgba(11, 70, 142, 0.1),
    0px 7px 7px rgba(11, 70, 142, 0.09),
    0px 15px 9px rgba(11, 70, 142, 0.05),
    0px 27px 11px rgba(11, 70, 142, 0.01),
    0px 43px 12px rgba(11, 70, 142, 0);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0%;
}

.contact button::before {
  content: '';
  position: absolute;
  bottom: -75px; /* start from below the button */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #0B468E;
  border-radius: 50%;
  z-index: 0;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.contact button:hover::before {
  width: 200px;
  height: 200px;
  up: -30px; /* pushes the circle up so it fills button nicely */
}

.contact button span,
.contact button img {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 100%;
    padding: 15px 0;
  }

  .logo img {
    width: 140px;
    height: auto;
    margin-left: 0;
  }

  .center ul {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .center ul li a {
    font-size: 14px;
    padding: 4px 0;
    width: auto;
    height: auto;
    border: none;
  }

  .contact {
    margin-top: 10px;
  }

  .contact button {
    width: 130px;
    height: 38px;
    font-size: 12px;
  }
}

/* 2nd */
.information {

  display: block;
  width: 100%;
  position: relative;

}

.information img {
  width: 1290px;
  height: 642px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
  
}

.info-content {
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
  color: white;
  max-width: 600px;
}

.info-content h1 {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 100%;
  letter-spacing: 0.2%;
  color: rgba(255, 255, 255, 1);
}

.info-content p {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.2%;
  color: rgba(245, 245, 245, 1);
  margin-top: 9px;
}
.info-buttons button,
.info-buttons1 .white-btn {
  font-family: 'Inter', sans-serif; /* ✅ Apply Inter font to both buttons */

}

.info-buttons-wrapper {
  display: flex;
  gap: 4px; /* Adjust the space between buttons */
  margin-top: 70px;

}

.info-buttons {
  display: flex;
  gap: 20px;
}

.info-buttons button {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  background-color: #FABD46;
  color: white;

}

/* ✅ Blue hover layer — goes behind text */
.info-buttons button::before {
  content: '';
  position: absolute;
  bottom: -75px; /* Start from below the button */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #0B468E;
  border-radius: 50%;
  z-index: 0;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.info-buttons button:hover::before {
  width: 200px;
  height: 200px;
  up: -30px; /* Pushes the circle up so it fills button nicely */
}


/* ✅ Keep text and icon above blue layer */
.info-buttons button span,
.info-buttons button img {
  position: relative;
  z-index: 2;
}

/* ✅ Yellow Button Styles */
.btn-yellow {
  background-color: #FABD46;
  border: 1px solid transparent;
  box-shadow:
    0 2px 4px rgba(11, 70, 142, 0.1),
    0 7px 7px rgba(11, 70, 142, 0.09),
    0 15px 9px rgba(11, 70, 142, 0.05),
    0 27px 11px rgba(11, 70, 142, 0.01),
    0 43px 12px rgba(11, 70, 142, 0);
  color: white;
}

.btn-yellow:hover {
  color: white;
  
}

/* ✅ Outline Button */
.btn-outline {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  box-shadow:
    0px 2px 4px 0px rgba(11, 70, 142, 0.1),
    0px 7px 7px 0px rgba(11, 70, 142, 0.09),
    0px 15px 9px 0px rgba(11, 70, 142, 0.05),
    0px 27px 11px 0px rgba(11, 70, 142, 0.01),
    0px 43px 12px 0px rgba(11, 70, 142, 0);
}

.btn-outline:hover {
  color: white;
}

/* ✅ Icon size for yellow button */
.info-buttons button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ✅ White Button Styles */
.info-buttons1 .white-btn {
  background-color: transparent; /* ✅ Default transparent */
  color: white; /* ✅ White text */
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 1px solid white; /* ✅ White border */
  box-shadow:
    0 2px 4px rgba(11, 70, 142, 0.1),
    0 7px 7px rgba(11, 70, 142, 0.09),
    0 15px 9px rgba(11, 70, 142, 0.05),
    0 27px 11px rgba(11, 70, 142, 0.01),
    0 43px 12px rgba(11, 70, 142, 0);
}

/* ✅ Blue hover layer appears behind text */
.info-buttons1 .white-btn::before {
  content: '';
  position: absolute;
  bottom: -75px; /* Start from below the button */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #0B468E; /* Blue hover background */
  border-radius: 50%;
  z-index: 0;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.info-buttons1 .white-btn:hover::before {
  width: 200px;
  height: 200px;
  up: -30px; /* Pushes the circle up to cover the button */
}


/* ✅ Keep text and icon always visible on top */
.info-buttons1 .white-btn span,
.info-buttons1 .white-btn img {
  position: relative;
  z-index: 2;
}

/* ✅ No color change on hover */
.info-buttons1 .white-btn:hover {
  color: white;
}

/* ✅ Icon size same as yellow button */
.info-buttons1 .white-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .information {
    position: relative;
  }

  .information img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
  }

  .info-content {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: auto;
    max-width: 90%;
    z-index: 2;
    text-align: left;
    padding: 0;
  }

  .info-content h1 {
    font-size: 18px;
    line-height: 1.2;
    color: white;
    margin: 0;
  }

  .info-content p {
    font-size: 12px;
    line-height: 1.4;
    color: #f5f5f5;
    margin-top: 6px;
    margin-bottom: 0;
  }

  .info-buttons-wrapper {
    display: flex;
    flex-direction: row;         /* ✅ Keep buttons in row */
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;           /* ✅ Prevent wrapping */
    gap: 8px;                    /* ✅ Space between buttons */
    margin-top: 10px;
  }

  .info-buttons,
  .info-buttons1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin: 0;
  }

  .info-buttons button,
  .info-buttons1 .white-btn {
    font-size: 12px;             /* ✅ Small text */
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;                    /* ✅ space between text and icon */
    white-space: nowrap;
    width: auto;
  }

  .info-buttons button img,
  .info-buttons1 .white-btn img {
    width: 14px;                 /* ✅ small icon size */
    height: auto;
  }
}
@media (max-width: 600px) {
  .information {
    position: relative;
  }

  .information img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
  }

  .info-content {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: auto;
    max-width: 90%;
    z-index: 2;
    text-align: left;
    padding: 0;
  }

  .info-content h1 {
    font-size: 18px;
    line-height: 1.2;
    color: white;
    margin: 0;
  }

  .info-content p {
    font-size: 12px;
    line-height: 1.4;
    color: #f5f5f5;
    margin-top: 6px;
    margin-bottom: 0;
  }

  .info-buttons-wrapper {
    display: flex;
    flex-direction: column;       /* ✅ Stack vertically */
    align-items: flex-start;      /* ✅ Align to left */
    gap: 1px;                    /* ✅ Space between buttons */
    margin-top: 10px;
  }

  .info-buttons,
  .info-buttons1 {
    display: block;               /* ✅ Remove flex wrap issues */
    width: 100%;
  }

  .info-buttons button,
  .info-buttons1 .white-btn {
    font-size: 12px;              /* ✅ Smaller text */
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* ✅ Text + icon aligned left */
    gap: 4px;                     /* ✅ Space between icon and text */
    width: 35%;                  /* ✅ Full width buttons */
    box-sizing: border-box;
  }

  .info-buttons button img,
  .info-buttons1 .white-btn img {
    width: 16px;
    height: auto;
  }
}

/*3rd*/
.feature-section {
  display: flex;
  max-width: 1245px;
  margin: 80px auto;
  gap: 50px;
  align-items: center;
  padding: 0 20px;
   position: relative;
}

.feature-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-subheading {
  color: rgba(37, 53, 81, 1);
  display: block;
  width: 653px;
  height: 22px;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0.4%;
  text-transform: uppercase;
}

.feature-left h2 {
  color: rgba(11, 70, 142, 1);
  width: 653px;
  height: 118px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 100%;
  letter-spacing: 0.1%;
}

.feature-left p {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.2%;
  width: 653px;
  height: 56px;
  margin-bottom: 20px;
}

.info-buttons {
  margin-bottom: 30px;
}

.info-buttons .btn-yellow1 {
  font-family: 'Inter', sans-serif;
}

.btn-yellow1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  background-color: #FABD46;
  color: white;
  box-shadow:
    0 2px 4px rgba(11, 70, 142, 0.1),
    0 7px 7px rgba(11, 70, 142, 0.09),
    0 15px 9px rgba(11, 70, 142, 0.05),
    0 27px 11px rgba(11, 70, 142, 0.01),
    0 43px 12px rgba(11, 70, 142, 0);
  font-family: 'Inter', sans-serif;
}

.btn-yellow1::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background-color: #0B468E;
  z-index: 0;
  transition: height 0.3s ease;
}

.btn-yellow1:hover::before {
  height: 100%;
}

.btn-yellow1 span,
.btn-yellow1 img {
  position: relative;
  z-index: 2;
}

.btn-yellow1:hover {
  color: white;
}

.btn-yellow1 img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.feature-right {
  flex: 1;
}

.feature-right img {
  border-radius: 20px;
  object-fit: cover;
  width: 488px;
  height: 604px;
  top: 80px;
  left: 840px;
}

.feature-list {
 
  display: flex;
  flex-direction: column;
   justify-content: center;
  width: 653px;
height: 208.00021362304688px;
gap: 16px;

}

.feature-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  border-top: 1px solid #ddd;
  width: 592px;
  gap: 12px;
  padding: 16px 0;
  min-height: 72px; /* ✅ Ensures same height for all */
}

.feature-item img {
  width: 24px;
  height: 24px;
}

.feature-item div {
  flex: 1;
}

.feature-item strong {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0px;
  color: rgba(11, 70, 142, 1);
}

.feature-item p {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: rgba(37, 53, 81, 1);
}

.feature-item h6 {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0px;
  color: rgba(37, 53, 81, 1);
  width: 592px;
}

.feature-index {
  position: absolute;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  font-family: 'Lato','Arial', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: rgba(37, 53, 81, 1);
  padding-right: 12px; /* ✅ pushes it inside the container */
}

@media (max-width: 600px) {
  .feature-section {
    flex-direction: column;
    gap: 30px;
    padding: 0 16px;
    margin: 40px auto;
  }

  .feature-left,
  .feature-right {
    width: 100%;
  }

  .feature-subheading,
  .feature-left h2,
  .feature-left p,
  .feature-list,
  .feature-item h6 {
    width: 100%;
    height: auto;
  }

  .feature-left h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  .feature-left p {
    font-size: 16px;
    line-height: 24px;
  }

  .feature-right img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 16px;
  }

  .feature-list {
    gap: 12px;
  }

  .feature-item {
    width: 100%;
    gap: 10px;
    padding: 12px 0;
  }

  .feature-item h6 {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
  }

  .feature-item strong {
    font-size: 18px;
    line-height: 24px;
  }

  .feature-item p {
    font-size: 16px;
    line-height: 24px;
  }

  .feature-index {
    display: none; /* Optional: hide index on small screens */
  }

  .btn-yellow1 {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 10px 20px;
  }
}

/*4th*/

.why-choose {
  padding: 80px 40px;
  background: #fff;
  max-width: 1245px;
  margin: auto;
}

.why-top {
  display: flex;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

.why-img img {
 
  border-radius: 20px;
  object-fit: cover;
  width: 488px;
  height: 382px;

}

.why-text {
  flex: 1;
}

.why-text .subtitle {
 
  margin-bottom: 13px;
  font-family: 'Lato','Arial' ,sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.4%;
  text-transform: uppercase;
  color: rgba(37, 53, 81, 1);

}

.why-text h2 {
  
  margin-bottom: 20px;
  font-family: 'Montserrat','Arial' ,sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 100%;
  letter-spacing: 0.1%;
  color: rgba(11, 70, 142, 1);

}

.why-text .desc {
 
  margin-bottom: 30px;
  font-family: 'Lato','Arial' ,sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.2%;
  color: rgba(30, 58, 95, 1);

}
.why-btn {
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  background-color: #FABD46;
  color: white;
  transition: color 0.3s ease;
  z-index: 0;
}

.why-btn::before {
  content: '';
  position: absolute;
  bottom: -75px; /* Start from below the button */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #0B468E;
  border-radius: 50%;
  z-index: 0;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.why-btn:hover::before {
  width: 200px;
  height: 200px;
  up: -30px; /* Pushes circle up to cover button nicely */
}

/* ✅ Keep text and image above the hover layer */
.why-btn span,
.why-btn img {
  position: relative;
  z-index: 2;
  color: white;
}

/* ✅ Ensure text stays visible */
.why-btn:hover span {
  color: white;
}

/* ✅ Icon size */
.why-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ✅ WHY FEATURES CONTAINER */
.why-features {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ✅ INDIVIDUAL FEATURE ITEM */
.feature {
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 250px;
  max-width: 400px;
}

/* ✅ ICON + LINE WRAPPER */
.icon-with-line {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ✅ ICON IMAGE */
.icon-with-line img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ✅ VERTICAL LINE UNDER ICON */
.icon-with-line .line {
  
  height: 70px;
  border: 1px solid rgba(212, 212, 212, 1);
  margin-top: 5px;
}

/* ✅ HEADING STYLE */
.feature h4 {
  margin-bottom: 6px;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: rgba(11, 70, 142, 1);
}

/* ✅ PARAGRAPH STYLE */
.feature p {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: rgba(37, 53, 81, 1);
}



@media (max-width: 600px) {
  .why-choose {
    padding: 40px 20px;
  }

  .why-top {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
  }

  .why-img img {
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  .why-text {
    width: 100%;
  }

  .why-text .subtitle {
    font-size: 14px;
    line-height: 1.4;
  }

  .why-text h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .why-text .desc {
    font-size: 16px;
    line-height: 26px;
  }

  .why-btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 10px 16px;
  }

  .why-features {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .feature {
    max-width: 100%;
    gap: 12px;
  }

  .feature h4 {
    font-size: 16px;
  }

  .feature p {
    font-size: 14px;
    line-height: 22px;
  }

  .icon-with-line .line {
    height: 50px;
  }
}




/*6th*/

.radiocard {

  gap: 40px;
  padding-top: 80px;
  padding-right: 114px;
  padding-bottom: 80px;
  padding-left: 114px;

}

.radiocard h2 {
  color: #003087;
  margin-bottom: 10px;
  font-family: 'Montserrat','Arial',sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 100%;
  letter-spacing: 0.1%;
  text-align: center;

}

.radiocard .subtitle {
  text-align: center;
  margin-bottom: 30px;
  font-family: 'Lato','Arial',sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0.4%;
  text-align: center;
  text-transform: capitalize;
  color: rgba(37, 53, 81, 1);

}

/* ✅ Full-width wrapper aligned left */
.radiocard .slider-wrapper {
  
  max-width: 1180px; /* 3.5 cards exactly */
 
  overflow: hidden;
 
  
}

/* ✅ Container doesn't add scroll */
.radiocard .slider-container {
  overflow: hidden;
}

/* ✅ Only enough width for 4 full cards (not 4.5) */
.radiocard .slider-track {
  display: flex;
  transition: transform 0.5s ease;
  width: calc(300px * 4 + 20px * 3); /* 4 cards + 3 gaps */
}

/* ✅ Card size */
.radiocard .card {
  width: 300px;
  margin-right: 20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  position: relative;
}

.radiocard .card:last-child {
  margin-right: 0; /* ✅ No extra space after last card */
}

/* ✅ Zoom effect */
.radiocard .card:hover:not(:first-child) {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* ✅ First card always zoomed */
.radiocard .slider-track .card:first-child {
  transform: scale(1.05);
  z-index: 3;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(233, 236, 239, 1);
  box-shadow: 0px 24px 64px 0px rgba(224, 224, 224, 0.48);
}

.radiocard .card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
}

.radiocard .card h4 {
  margin: 15px 0 5px;
  color: #003087;
  font-family: 'Lato','Arial',sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 100%;
  letter-spacing: 0.2%;

}

.radiocard .card p {
  font-family: 'Lato','Arial',sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2%;
  text-transform: capitalize;
  color: rgba(30, 58, 95, 1);

}

.radiocard .card a {
  font-size: 14px;
  font-weight: 600;
 color: rgba(30, 58, 95, 1) ;
  text-decoration: underline;
  display: block;
  text-align: right;
  margin-top: 10px;
  font-family: 'Lato','Arial',sans-serif;
}

.radiocard .card button {
  margin-top: 12px;
  width: 100%;
  background: #FDBA12;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.radiocard input[type="radio"] {
  display: none;
}

/* ✅ Slide transition */
.radiocard #slide1:checked ~ .slider-wrapper .slider-track {
  transform: translateX(0);
}

.radiocard #slide2:checked ~ .slider-wrapper .slider-track {
  transform: translateX(-160px); /* 0.5 card scroll */
}

/* ✅ Arrows */
.radiocard .arrow-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}

.radiocard .arrow-buttons label {
  background-color: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.radiocard .arrow-buttons label:hover {
  background-color: #FDBA12;
}

.radiocard .arrow-buttons label img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  filter: none !important;
}

/* ✅ Apply opacity only to the first arrow */
.radiocard .arrow-buttons label:first-child {
  opacity: 0.4;
}
@media (max-width: 768px) {
  .radiocard {
    padding: 40px 20px;
  }

  .radiocard h2 {
    font-size: 28px;
    text-align: center;
  }

  .radiocard .subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
  }

  .radiocard .slider-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .radiocard .slider-wrapper::-webkit-scrollbar {
    display: none;
  }

  .radiocard .slider-track {
    display: flex;            /* ✅ Required to show all cards in a row */
    flex-wrap: nowrap;
    width: max-content;
    gap: 16px;                /* optional spacing between cards */
  }

  .radiocard .card {
    flex: 0 0 auto;           /* ensure cards don't shrink */
    width: 260px;
  }

  /* ✅ Fix Arrow Visibility */
  .radiocard .arrow-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 16px;
    position: relative;
    z-index: 99;
  }

  .radiocard .arrow-buttons label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 12px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .radiocard .arrow-buttons label img {
    width: 14px;
    height: 14px;
    filter: none !important;
  }

  .radiocard .arrow-buttons label:first-child {
    opacity: 1;
  }
}
/*7th */
.rubber-options {
  padding: 80px 20px;
 
  background-color: rgba(255, 255, 255, 1);

}

.rubber-options .container {
  max-width: 1245px;
  margin: auto;
  text-align: center;
}

.rubber-options h2 {
 
  margin-bottom: 10px;
  font-family: 'Montserrat','Arail',sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
letter-spacing: 0.1%;
text-align: center;
color: rgba(11, 70, 142, 1);



}

.rubber-options .subtitle {
  
  margin-bottom: 40px;
  font-family: 'Lato','Arail',sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0.4%;
text-align: center;
text-transform: capitalize;
margin-top: 20px;
color: rgba(37, 53, 81, 1);

}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 40px;
  border: 1px solid rgba(231, 234, 238, 1);
  border-radius: 15px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 15px;
  overflow: hidden;
}

table thead {
background-color: rgba(246, 247, 249, 1);



}


table td {
 width: 1038px;
height: 88px;
padding-top: 20px;
padding-right: 32px;
padding-bottom: 20px;
padding-left: 32px;
gap: 50px;
border-bottom-width: 1px;

  font-family: 'Lato','Arail',sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01px;
vertical-align: middle;
 color: rgba(57, 57, 57, 1);


}

table th {

  font-family: 'Lato','Arail',sans-serif;
 
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01px;
vertical-align: middle;
color: rgba(41, 41, 41, 1);
width: 1038px;
height: 56px;
padding-top: 16px;
padding-right: 32px;
padding-bottom: 16px;
padding-left: 32px;
gap: 50px;
border-bottom-width: 1px;

}


.bottom-text {
  
  
  margin: 0 auto 30px auto;
font-family: 'Lato','Arail',sans-serif;
 
font-weight: 400;
font-size: 20px;
line-height: 32px;
letter-spacing: 0.2%;
text-align: center;
color: rgba(30, 58, 95, 1);
width: 906px;
height: 64px;

}
.contact-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.contact1 {
  display: flex;
  justify-content: center;
  font-family: 'Inter', sans-serif;
}

.contact1 button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 154px;
  height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #FABD46;
  border: none;
  color: white;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0px 2px 4px rgba(11, 70, 142, 0.1),
    0px 7px 7px rgba(11, 70, 142, 0.09),
    0px 15px 9px rgba(11, 70, 142, 0.05),
    0px 27px 11px rgba(11, 70, 142, 0.01),
    0px 43px 12px rgba(11, 70, 142, 0);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0%;
}

.contact1 button::before {
  content: '';
  position: absolute;
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #0B468E;
  border-radius: 50%;
  z-index: 0;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.contact1 button:hover::before {
  width: 200px;
  height: 200px;
  up: -30px;
}

.contact1 button span,
.contact1 button img {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .rubber-options {
    padding: 40px 15px;
  }

  .rubber-options h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .rubber-options .subtitle {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .table-wrap {
    overflow-x: auto;
  }

  table {
    width: 700px; /* Allow horizontal scroll on small devices */
    font-size: 14px;
  }

  table th,
  table td {
    padding: 16px;
    font-size: 14px;
  }

  .bottom-text {
    font-size: 16px;
    line-height: 26px;
    width: 100%;
    height: auto;
    padding: 0 10px;
  }

  .contact1 button {
    width: 140px;
    height: 42px;
    font-size: 13px;
    padding: 8px 14px;
  }

  .contact-wrapper {
    margin-top: 30px;
  }
}

    /*clients*/

.testimonial-wrapper {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
  padding: 60px 0 60px 82px; /* Only left padding */
  background: #f9fafb;
  overflow: hidden;
  box-sizing: border-box;
  
box-shadow: 0px 32px 64px -16px rgba(57, 59, 106, 0.06);

}

.cliants {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 112px; /* align arrow buttons to far right */
}

.headings {
  display: flex;
  flex-direction: column;
}

h2 {

  margin: 0;
  font-family: 'Montserrat','Arial',sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 100%;
letter-spacing: 0.1%;
color: rgba(11, 70, 142, 1);

}

.subtext {
  margin-top: 12px;
  

  font-family: 'Lato','Arial',sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: 0.4%;
text-transform: capitalize;

}

.testimonial-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 24px;
  padding-top: 40px;
  padding-right: 0;  /* No right padding */
  scroll-snap-type: x mandatory;
}

.testimonial-container::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  flex: 0 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  scroll-snap-align: start;
}

.stars {
  color: #fbbf24;
  font-size: 20px;
  margin-bottom: 15px;
}

.testimonial-text {
font-weight: 400;
font-style: italic;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.2px;

  line-height: 1.6;
  font-family: 'Lato','Arial',sans-serif;
  color: rgba(40, 37, 86, 1);

}

.client-info {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.client-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.client-name {
  font-weight: 700;
  font-size: 16px;

  font-family: 'Lato','Arial',sans-serif;
color: rgba(11, 70, 142, 1);

}

.client-company {
font-family: 'Lato','Arial',sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.2%;
color: rgba(37, 53, 81, 1);


}

.arrows {
  display: flex;
  gap: 16px;
}

.arrow {
  background-color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s ease;
}

/* Hover effect for both */
.arrow:hover {
  background-color: #FABD46;
}

/* ✅ Second arrow always yellow */
.arrows .arrow:last-child {
  background-color: #FABD46;
}

/* ✅ Prevent yellow from changing on hover */
.arrows .arrow:last-child:hover {
  background-color: #FABD46;
}

.arrow img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .testimonial-wrapper {
    padding: 40px 20px;
  }

  .cliants {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-right: 20px;
  }

  .headings h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  .subtext {
    font-size: 16px;
    margin-top: 8px;
  }

  .testimonial-container {
    padding-top: 24px;
    gap: 16px;
    overflow-x: scroll;
  }

  .testimonial-card {
    width: 260px;
    padding: 16px;
  }

  .testimonial-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .client-info {
    margin-top: 16px;
  }

  .client-info img {
    width: 36px;
    height: 36px;
  }

  .client-name {
    font-size: 14px;
  }

  .client-company {
    font-size: 12px;
  }

  .arrows {
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  .arrow {
    width: 36px;
    height: 36px;
  }

  .arrow img {
    width: 12px;
    height: 12px;
  }
}

/*faq*/
.faq-section {
  padding: 80px 20px;
  font-family: 'Lato', 'Arial', sans-serif;
 

}

.faq-container {
  max-width: 1245px;
  margin: auto;
  display: flex;
  gap: 50px;
  align-items: flex-start;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 1);
}

.faq-left {
  flex: 1;
  max-width: 45%;
}

.faq-label {
  font-size: 14px;
  color: #444;
  display: block;
  margin-bottom: 10px;
}

.faq-left h2 {
  font-size: 32px;
  color: #003087;
  font-weight: 700;
  margin-bottom: 260px; /* more space between h2 and note */
  line-height: 1.3;
}

.faq-note {
  font-size: 14px;
  color: #444;
  margin-top: 0; /* reset top margin */
}

.faq-note a {
  color: #003087;
  text-decoration: underline;
}

/* FAQ card container */
.faq-card {
  flex: 2;
  border-radius: 8px;
  padding: 30px;
  width: 100%;
}

/* FAQ list wrapper */
.faq-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Common FAQ block */
.faq-box details {
  border-bottom: 1px solid #e2e2e2;
  padding: 0;
  position: relative;
}

/* First block styling */
.faq-box details:first-of-type {
  background-color: rgba(246, 247, 249, 1);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 10px;
}

/* Summary text */
.faq-box summary {
  font-weight: 600;
  color: #003087;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  padding: 18px 30px 18px 40px;  /* Make consistent for all */
  position: relative;
  display: block;
}

/* All other summary tags match this padding */
.faq-box details:not(:first-of-type) summary {
  padding: 18px 30px 18px 40px; /* Same as first */
}

/* Arrow icon */
.faq-box summary::after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  right: 30px;
  top: 20px;
  background-image: url("img2/arrow-down-s-line.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

/* Rotate icon on open */
.faq-box details[open] summary::after {
  transform: rotate(180deg);
}

/* Answer text */
.faq-answer {
  margin: 0 30px 20px 40px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* Remove last border */
.faq-box details:last-child {
  border-bottom: none;
}
@media (max-width: 600px) {
  .faq-section {
    padding: 40px 16px;
  }

  .faq-container {
    flex-direction: column;
    gap: 30px;
  }

  .faq-left {
    max-width: 100%;
  }

  .faq-left h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .faq-label,
  .faq-note {
    font-size: 13px;
  }

  .faq-card {
    padding: 20px;
  }

  .faq-box summary {
    font-size: 15px;
    padding: 16px 24px 16px 30px;
  }

  .faq-box details:not(:first-of-type) summary {
    padding: 16px 24px 16px 30px;
  }

  .faq-box summary::after {
    right: 24px;
    top: 18px;
    width: 12px;
    height: 12px;
  }

  .faq-answer {
    margin: 0 24px 16px 30px;
    font-size: 13px;
  }
}


/*10*/

    .get-started {
      background-color: #fbfbfb;
      padding: 50px 20px;
    }

    .get-started .content {
      max-width: 1150px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      padding-left: 16px;
      flex-wrap: wrap;
    }

    .get-started .left {
      flex: 1;
      min-width: 300px;
    }

    .get-started h5 {
      margin-bottom: 10px;
      font-family: 'Lato', sans-serif;
      font-weight: 600;
      font-size: 18px;
      text-transform: uppercase;
      color: #253551;
    }

    .get-started h2 {
      margin-bottom: 15px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 48px;
      color: #0B468E;
    }

    .get-started p {
      font-family: 'Lato', sans-serif;
      font-size: 18px;
      line-height: 28px;
      width: 100%;
      max-width: 556px;
      color: #1e3a5f;
    }

    .get-started .email-box {
      position: relative;
      width: 100%;
      max-width: 384px;
      height: 48px;
      margin-top: 20px;
    }

    .get-started input[type="email"] {
      width: 100%;
      height: 100%;
      padding-left: 42px;
      padding-right: 12px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 10px;
      box-shadow: 0px 2px 1.5px 0.5px rgba(149, 160, 178, 0.16);
      font-size: 16px;
      font-family: 'Lato', sans-serif;
    }

    .get-started .email-box > img {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      pointer-events: none;
    }

    .submit-btn-wrap {
      display: flex;
      justify-content: flex-start;
      margin-top: 15px;
    }

    .submit-btn {
      background: #f9b233;
      color: white;
      padding: 10px 20px;
      border: 1px solid;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      overflow: hidden;
      position: relative;
      z-index: 1;
      text-align: center;
      border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
      box-shadow:
        0px 2px 4px rgba(11, 70, 142, 0.1),
        0px 7px 7px rgba(11, 70, 142, 0.09),
        0px 15px 9px rgba(11, 70, 142, 0.05),
        0px 27px 11px rgba(11, 70, 142, 0.01),
        0px 43px 12px rgba(11, 70, 142, 0);
    }

    .submit-btn::before {
      content: '';
      position: absolute;
      bottom: -75px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 10px;
      background-color: #0B468E;
      border-radius: 50%;
      z-index: 0;
      transition: width 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    }

    .submit-btn:hover::before {
      width: 200px;
      height: 200px;
      bottom: -30px;
    }

    .submit-btn span {
      position: relative;
      z-index: 2;
    }

    .get-started .right img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

  /* === Responsive Mobile Query === */
@media (max-width: 768px) {
  .get-started .content {
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
  }

  .get-started h2 {
    font-size: 32px;
  }

  .get-started p {
    font-size: 16px;
    line-height: 24px;
  }

  .get-started .email-box {
    width: 100%;
    max-width: 400px;
    margin: 20px auto 0;
  }

  .get-started input[type="email"] {
    font-size: 15px;
    padding-left: 42px;
  }

  .get-started .email-box > img {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }

  .submit-btn-wrap {
    justify-content: center;
  }

  .get-started .right img {
    margin-top: 60px; /* ⬅️ Increased from 20px to 60px */
    max-width: 90%;
  }
}

/*11*/
.site-footer {
  font-family: 'Lato', 'Arial', sans-serif;
  background: #fff;
  padding: 40px 20px 20px;
  color: #333;
}

/* Top Row: Logo + tagline + social */
.footer-header {
  max-width: 1245px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

.footer-header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-logo {
  height: 40px;
}

.footer-tagline {
  font-size: 14px;
  color: #003087;
}

/* Social Icons Row */
.footer-social {
  display: flex;
  gap: 10px;
}

.social-icon {
  position: relative;
  width: 38px;
  height: 38px;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

.icon-hover {
  opacity: 0;
}

.social-icon:hover .icon-default {
  opacity: 0;
}

.social-icon:hover .icon-hover {
  opacity: 1;
}

/* Main Footer Content */
.footer-main {
  max-width: 1245px;
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

/* Links Section */
.footer-links {
  display: flex;
  gap: 60px;
}

.footer-links h4 {
  color: #003087;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  font-size: 14px;
  margin-bottom: 10px;
}

/* Contact List */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  margin: 10px 0;
  line-height: 1.6;
}

.footer-contact img {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  margin-top: 3px;
}

/* Bottom Copyright Row */
.footer-bottom {
  max-width: 1245px;
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  border-top: 1px solid #ddd;
  padding-top: 15px;
  flex-wrap: wrap;
}

.footer-policy-links {
  display: flex;
  gap: 20px;
}

.footer-policy-links a {
  color: #555;
  text-decoration: none;
  font-size: 13px;
}

.footer-policy-links a:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .footer-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
  }

  .footer-header-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-main {
    flex-direction: column;
    gap: 30px;
  }

  .footer-links {
    flex-direction: column;
    gap: 20px;
  }

  .footer-links h4 {
    font-size: 16px;
  }

  .footer-links li,
  .footer-contact li {
    font-size: 15px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }

  .footer-policy-links {
    flex-direction: column;
    gap: 8px;
  }
}