* {
  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;
  }
}
   .services-section {
  max-width: 1245px;
  margin: 30px auto;
  padding: 0 20px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center; /* Center everything horizontally */
}

    .services-header h2 {

      font-family: 'Montserrat', 'Arial',sans-serif;
   
      margin-bottom: 10px;

font-weight: 700;
font-size: 54px;
line-height: 100%;
letter-spacing: 0.2%;
text-align: center;

    }

.services-header p {
  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);
  width: 596px;
  height: 60px;
  margin: 0 auto;             /* centers the block horizontally */
  text-align: center;         /* aligns text inside center */
}

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

    .service-card {
      padding: 16px;
     
      border-radius: 8px;
      background-color: #fff;
    }
/* Same style base for all image backgrounds */
.img-bg {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* 1st, 3rd, 5th cards — Light Blue */
.service-card:nth-child(odd) .img-bg {
  background: #FAF4EF;

}

/* 2nd, 4th, 6th cards — Soft Yellow */
.service-card:nth-child(even) .img-bg {
  background: #E8F5FF;

}


    .service-card h3 {
  
      margin: 12px 0 6px;
      font-family: 'Lato','Arial',sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
letter-spacing: 0.2px;
text-align: center;
color: rgba(11, 70, 142, 1);

    }

    .service-card p {
font-family: 'Lato','Arial',sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 26px;
letter-spacing: 0.2px;
text-align: center;
color: rgba(37, 53, 81, 1);

    }
@media (max-width: 768px) {
  .services-section {
    padding: 0 16px;
    margin: 20px auto;
  }

  .services-header h2 {
    font-size: 32px;
    line-height: 1.2;
    text-align: center;
  }

  .services-header p {
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto 20px;
    text-align: center;
  }

  .services-grid {
    grid-template-columns: 1fr; /* stack cards in 1 column */
    gap: 20px;
  }

  .service-card {
    padding: 14px;
  }

  .service-card h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .service-card p {
    font-size: 15px;
    line-height: 22px;
  }

  .img-bg {
    padding: 10px;
    margin-bottom: 10px;
  }
}

    /*second*/
.process-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;

}

.process-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.process-subtitle {
  color: #5A5A5A;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.process-title {
  font-size: 28px;
  color: #0B468E;
  font-weight: 700;
  max-width: 400px;
  line-height: 1.3;
}

.process-desc {
  max-width: 400px;
  font-size: 15px;
  color: #253551;
  line-height: 1.5;
  margin-top: 4px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step-card {
  background-color: #F8F9FB;
  border-radius: 12px;
  padding: 24px 16px;
  height: 300px;
  position: relative;
  transition: all 0.4s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Step number default */
.step-number {
  background-color: #fff;
  color: #0B468E;
  font-weight: 600;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
  z-index: 2;
  position: relative;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Hover number box blue */
.step-card:hover .step-number {
  background-color: #0B468E;
  color: #fff;
}

.step-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0B468E;
  margin-top: 100px;
  margin-bottom: 8px;
  transition: transform 0.4s ease;
  font-family: 'Lato','Arial',sans-serif;
}

.step-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  transition: transform 0.4s ease;
   font-family: 'Lato','Arial',sans-serif;
}

.contact-overlay {
  display: flex;
  justify-content: center;  /* Center horizontally */
  align-items: center;      /* Center vertically in the row */
  height: 100px;             /* Controls vertical centering space */
  overflow: hidden;         /* Prevents jumpy transitions */
}

.contact-btn {
  background-color: #fff;
  color: #0B468E;
  font-size: 16px;
  padding: 10px 22px;
  border-radius: 14px;
  border: 1px solid #0B468E;
  cursor: pointer;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  font-family: 'Lato', 'Arial', sans-serif;
}
/* Hover animation */
.step-card:hover h3,
.step-card:hover p {
  transform: translateY(-10px);
}

.step-card:hover .contact-btn {
  opacity: 1;
  transform: translateY(0);
}
.contact-btn1 {
  margin-top: 16px;
  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-btn1::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;
}

.contact-btn1:hover::before {
  width: 200px;
  height: 200px;
  up: -30px;
}

.contact-btn1 span {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .process-section {
    margin: 40px auto;
    padding: 0 16px;
  }

  .process-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }

  .process-title {
    font-size: 22px;
    max-width: 100%;
    line-height: 1.4;
  }

  .process-subtitle {
    font-size: 12px;
  }

  .process-desc {
    max-width: 100%;
    font-size: 14px;
  }

  .process-steps {
    grid-template-columns: repeat(1, 1fr); /* stack one below another */
    gap: 20px;
  }

  .step-card {
    height: auto; /* allow card height to grow naturally */
    padding: 20px;
  }

  .step-card h3 {
    font-size: 15px;
    margin-top: 80px; /* slightly less top margin */
  }

  .step-card p {
    font-size: 13px;
  }

  .contact-overlay {
    height: 80px;
  }

  .contact-btn {
    font-size: 14px;
    padding: 8px 16px;
  }

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

  .contact-btn1::before {
    bottom: -60px;
  }
}

    /*third*/
    .why-choose {
      max-width: 1245px;
      margin: 80px auto;
      padding: 0 20px;
      text-align: center;
    }

    .why-choose h2 {
      font-family: 'Montserrat', 'Arial',sans-serif;
      font-size: 46px;
      color: #0B468E;
      font-weight: 700;
      margin-bottom: 16px;
      text-align: center;
      
    }

    .why-choose p {
      font-size: 18px;
      max-width: 760px;
      margin: 0 auto 60px;
      line-height: 1.6;
      font-family: 'Lato', 'Arial',sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.2%;
text-align: center;

    }

    .why-grid {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .why-item {
      flex: 1;
      min-width: 280px;
      text-align: center;
      padding: 0 10px;
    }

    .why-icon {
      width: 48px;
      height: 48px;
      background-color: #0B468E;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .why-icon img {
      width: 24px;
      height: 24px;
    }

    .why-item h3 {
      font-size: 20px;
      font-weight: 600;
      color: #0B468E;
      margin-bottom: 12px;
        font-family: 'Lato', 'Arial',sans-serif;
    }

    .why-item p {
      font-size: 16px;
      line-height: 1.6;
       font-weight: 500;
font-family: 'Lato', 'Arial',sans-serif;
color: rgba(37, 53, 81, 1);

    }

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

      .why-item {
        margin-bottom: 40px;
      }
    }

    
.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: 48px;
  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;
  }
}
    /*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;
}

.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;
  }
}
/*getstarted*/
.get-started {
background-color: rgba(251, 251, 251, 1);

  padding: 50px 20px;
}
.get-started .content {
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
background-color: rgba(255, 255, 255, 1);
padding-left: 16px;

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

  margin-bottom: 10px;
  font-family: 'Lato','Araial',sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 100%;
letter-spacing: 0.4%;
text-transform: uppercase;
color: rgba(37, 53, 81, 1);

}
.get-started h2 {
  
  margin-bottom: 15px;
font-family: 'Montserrat','Arail',sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 100%;
letter-spacing: 0.1%;
color: rgba(11, 70, 142, 1);

}
.get-started p{
font-family: 'Lato','Arial',sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0.2%;
width: 556px;
height: 56px;
color: rgba(30, 58, 95, 1);

}
.get-started .email-box {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  width: 384px;
  height: 48px;
  padding-top: 8px;
  padding-right: 6px;
  padding-bottom: 8px;
  padding-left: 6px;
  border-radius: 8px;
  border-width: 1px;
  background-color: rgba(255, 255, 255, 1);
  position: relative; /* Added for icon positioning */
  
}

.get-started input[type="email"] {
  padding: 10px 15px;
  width: 250px;
 
  border: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow: 0px 2px 1.5px 0.5px rgba(149, 160, 178, 0.16);

  padding-left: 40px; /* space for icon */
  border-radius: 10px;
}

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

}

.submit-btn-wrap {
  display: flex;
  justify-content: center; /* Center horizontally */
}

.submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
  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);
}

/* Hover background fill */
.submit-btn::before {
  content: '';
  position: absolute;
  bottom: -75px; /* Start from below the button */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #0B468E; /* Circle background color */
  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;
}

.submit-btn:hover::before {
  width: 200px;
  height: 200px;
  up: -30px; /* Move up to cover the button */
}


/* Keep text above the hover background */
.submit-btn span {
  position: relative;
  z-index: 2;
  color: white;
}

  /* === 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%;
  }
}
/*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;
  }
}


/*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;
  }
}