/* side bar start */
.offcanvas {
  width: 270px;
  background: #fff;
}

.offcanvas .nav-link {
  font-size: 16px;
  padding: 8px 12px;
  color: #004b91;
}

.offcanvas .nav-link:hover {
 
  border-radius: 5px;
}
.navbar {
      background-color: #004080;
    }
    .navbar-brand img {
      height: 50px;
    }
    .navbar-toggler {
      border: none;
    }
 .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
    /* Sidebar styles */
    .offcanvas {
      background: #004080;
      color: #fff;
    }
    .offcanvas a {
      color: black;
      text-decoration: none;
      padding: 8px 0;
      display: block;
    }
    .offcanvas a:hover {
      color: #07187e;
    }
    .hello a.hello1{
      color:black;
     background-image: linear-gradient(100deg, #b7caf1 10%, #95c3ee 90%) !important;
    border-color: white;
   
    }
     .offcanvas{
      width: 200px;
     }
    .hello a.hello2{
      color: white;
    background-image: linear-gradient(100deg, #f27a14c7 10%, #f4801c 90%) !important;
    border-color: white;
      
    }
    .offcanvas-body{
           background-image: linear-gradient(100deg, #c2d3f6 10%, #edf1f6 90%) !important;
    }
.offcanvas-body .btn:hover {
    color: var(--bs-btn-hover-color);
     background-image: linear-gradient(100deg, #b7caf1 10%, #95c3ee 90%) !important;
    border-color: var(--bs-btn-hover-border-color);
}
    /* Dropdown arrow color in desktop */
    .navbar .dropdown-toggle::after {
      filter: invert(1);
    }

/* side bar end */
.navbar.shadow-on-scroll {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background: #004b91;
}
.buut button{
  background-color: #000;
  color: white;
  padding: 8px 30px;
  border-radius: 7px;
 text-align: center;
}
.buut{
  text-align: center;
}
.error-text {
  color: red;
  font-size: 13px;
  margin-top: 4px;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.navbar {
  background: #004b91;
  padding: 0px 70px;
}

.navbar-brand img {
  height: 70px;
}

.no-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.offcanvas .nav-link {
  color: black;
}

.nav-link {
  color: white;
}

.dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: white;
  padding: 10px 0;
}

.dropdown-item {
  color: #333;
  padding: 8px 20px;
}

.dropdown-item i {
  font-size: 1rem;
  margin-right: 8px;
  color: #004b91;
}

.dropdown-item:hover {
  background-color: #f2f2f2;
  color: #007bff;
}

.mobile-icon {
  font-size: 1.5rem;
  color: white;
}

.btn-expert {
  background-color: white;
  color: #004b91;
  border-radius: 20px;
  padding: 9px 18px;
  font-weight: 600;
}

@keyframes icon-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* Run float animation infinitely while hovered */
.dropdown-item:hover i {
  animation: icon-float 1s ease-in-out infinite;
}



/* Optional: remove left spacing for first item */


.btn-expert:hover {
  background-color: #e0f2ff;
}

.collapsing {
  transition: height 0.15s ease;
  /* reduce from 0.35s to 0.15s */
}

.bord a.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
}

.bord img {
  width: 18px;
  /* Adjust as needed */
  height: 18px;
  /* Keeps it proportional */
  object-fit: contain;
}

/* Thin arrow */
.small-arrow {
  font-size: 0.6rem;
  transition: transform 0.3s ease;
}

.nav-item {

  position: relative;
}

.bord {
  border-radius: 60px;

  border: 1px solid #8CF7FF;
  height: 33px;
}

.dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

/* Show extra icons only on mobile */
.mobile-extra {
  display: none;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 991.98px) {
  .mobile-extra {
    display: block;
  }

  .navbar-nav li a {
    font-size: 14px;
  }

  .mobile-extra .nav-link {
    display: flex;
    align-items: center;
    color: white ;
    padding: 8px 0;
  }

  .mobile-extra .nav-link i {
    margin-right: 10px;
    font-size: 1.2rem;
  }

  .desktop-only {
    display: none !important;
  }
}

/* Rotate only on desktop hover */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .dropdown:hover .small-arrow {
    transform: rotate(180deg);
  }
}

@media (max-width: 767.98px) {
  .think {
    margin-top: 40px;
    text-align: center;
  }

  .think h1 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 30px;
    margin-top: 20px;
  }

  .think p {
    font-size: 16px;
  }

  .think a {
    font-size: 16px;
    padding: 8px 25px 10px 25px;
  }

  .lap img {
    width: 100%;
    max-width: 350px;
  }

  .banner:after {
    background-position: center;
  }
}

/* ---------- 1440px and up ---------- */
@media (min-width: 1200px) {
  .think h1 {
    font-size: 100px;
    line-height: 87px;
  }

  .lap img {
    width: 550px;
  }
}

/* ---------- 1024px (Large Tablet) ---------- */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .think {
    margin-top: 50px;
  }

  .think h1 {
    font-size: 70px;
    line-height: 75px;
    margin-bottom: 40px;
  }

  .think p {
    font-size: 18px;
  }

  .lap img {
    max-width: 450px;
  }
}

/* ---------- 768px (Tablet Portrait) ---------- */
@media (max-width: 991.98px) and (min-width: 768px) {
  .think {
    margin-top: 40px;
    text-align: center;
  }

  .think h1 {
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 30px;
  }

  .think p {
    font-size: 16px;
  }

  .think a {
    font-size: 16px;
    padding: 8px 20px;
  }

  .lap img {
    width: 100%;
    max-width: 400px;
  }
}

/* ---------- 425px (Mobile) ---------- */
@media (max-width: 767.98px) and (min-width: 426px) {
  .think {
    margin-top: 30px;
    text-align: center;
  }

  .think h1 {
    font-size: 38px;
    line-height: 45px;
    margin-bottom: 25px;
  }

  .think p {
    font-size: 15px;
  }

  .think a {
    font-size: 15px;
    padding: 7px 18px;
  }

  .lap img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
  }
}

/* ---------- 375px (Small Mobile) ---------- */
@media (max-width: 425px) {
  .navbar {
    padding: 0px 35px;
  }

  .think {
    margin-top: 25px;
    text-align: center;
  }

  .think h1 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  .think p {
    font-size: 14px;
  }

  .think a {
    font-size: 14px;
    padding: 6px 15px;
  }

  .lap img {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
  }
}

@keyframes ring {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(15deg);
  }

  20% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-6deg);
  }

  70% {
    transform: rotate(4deg);
  }

  80% {
    transform: rotate(-2deg);
  }

  90% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.btn-expert {
  background-color: white;
  color: #004b91;
  border-radius: 20px;
  padding: 8px 15px;
  font-weight: 400;
  border: none;
  transition: background 0.8s ease, color 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-expert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: orange;
  /* Light blue fill color */
  z-index: -1;
  transition: width 0.8s ease;
  border-radius: 20px;
}

.btn-expert:hover::before {
  width: 100%;
}

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

.btn-expert:hover i.bi-telephone-fill {
  display: inline-block;
  animation: ring 1s infinite ease-in-out;
  transform-origin: center;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.navbar .nav-link {
  transition: background-color 0.3s ease;
  border-radius: 6px;
  padding: 5px 10px;
}

.navbar .nav-link i {
  color: white;
  transition: color 0.3s ease;
}

.floating-text {
  display: inline-block;
  transition: transform 0.4s ease;
}

.animal:hover .floating-text {
  animation: gentleFloat 1.2s ease-in-out infinite;
}

@keyframes gentleFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

/* .navbar .nav-link:hover {
  background-color: white;
} */
.leaf {
  margin-left: 26px !important;
}

.navbar .nav-link:hover i {

  animation: zoomInOut 1.2s infinite ease-in-out;
}

.navbar-nav li a {
  font-size: 17px;
}

/* =========== */
/* form home page start */
.form-box-wrapper {
  background: linear-gradient(135deg, #d4f2fa, #a3e0f0);
  border-radius: 60px 0px 60px 0px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: left;
  margin-top: 22px;
  padding:30px;
}

.form-box-wrapper .form-control,
.form-box-wrapper .form-select {
  height: 45px;
  border-radius: 6px;
  font-size: 14px;
}

.form-box-wrapper .btn-primary {
  background-color: #1a75e8;
  border: none;
  font-weight: 500;
  border-radius: 6px;
}

.form-box-wrapper .btn-dark {
  height: 45px;
  width: 125px;
  padding: 0;
  
}
.banner button{
justify-self:end;
}

.form-box-wrapper .form-control:focus,
.form-box-wrapper .form-select:focus {
  /* border-color: #90cdf4 !important; */
  /* light blue */
  box-shadow: none !important;
  /* remove bold glow */
  outline: none;
}

/* form home page end */
/* Hide menu by default */

.dropdown-menu {
  border-radius: 10px;
  box-shadow: none !important;
  background: none !important;
  padding: 10px 0;
}

/* Dropdown animation setup */

.dropdown-menu {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  background: transparent;
  border: none;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
}

/* All dropdown items hidden by default */
.dropdown-menu .dropdown-item {
  opacity: 0;
  transform: translateY(-15px);
  background: #fff;
  margin: 10px 15px;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  animation: none;
}

/* Animate one-by-one */
.dropdown:hover .dropdown-menu .dropdown-item:nth-child(1) {
  animation: dropDown 0.4s forwards ease-out;
  animation-delay: 0.2s;
}

.dropdown:hover .dropdown-menu .dropdown-item:nth-child(2) {
  animation: dropDown 0.4s forwards ease-out;
  animation-delay: 0.6s;
}

.dropdown:hover .dropdown-menu .dropdown-item:nth-child(3) {
  animation: dropDown 0.4s forwards ease-out;
  animation-delay: 1s;
}

/* Keyframe for drop effect */
@keyframes dropDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*+++========== nav bar end===============+++++ */
/* ================button start============================ */
.animal {
  background-color: white;
  color: #004b91;
  /* border-radius: 20px; */
  padding: 8px 15px;
  font-weight: 400;
  border: none;
  transition: background 0.8s ease, color 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.animal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #ec8225;
  /* Light blue fill color */
  z-index: -1;
  transition: width 0.8s ease;

}

.animal:hover {
  background-color: #e0f2ff;
}

.animal:hover::before {
  width: 100%;
}

.animal:hover {
  color: white !important;
}

.animal:hover i {
  color: white;
}

.floating-text {
  color: #004b91 !important;
  display: inline-block;
  transition: transform 0.4s ease;
}

.animal:hover .floating-text {
  color: white !important;
  animation: gentleFloat 1.2s ease-in-out infinite;
}

@keyframes gentleFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

/* progress bar start */
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(95, 58, 252, 0.2);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  background: #fff;
}

.progress-wrap svg.progress-circle path {
  stroke: #5f3afc;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap::after {
  position: absolute;
  content: '\f106';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: #5f3afc;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  display: block;
  z-index: 100;
  pointer-events: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* whatsapp start */
.whatsapp-float {
  position: fixed;
  bottom: 102px;
  right: 51px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);

}

.footer-social a:hover {
  transform: scale(1.1);

}

.whatsapp-icon {
  width: 45px;
  height: 45px;
}

.whatsapp-float {
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }

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

/* whatsapp end */
/* progress bar end */
/*================= button end */
/* ====================footer start */
.footer {
  margin-top: 60px;
  /* background-color: #022d63; */
  border-radius: 101px 0px 0px 0px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

.footer {

  background-size: cover;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(#060632e8, #08366e), url(../img/link/footer-bg-sahi-sms.webp);
  background-size: cover;
  background-position: top;
  position: relative;
}

.contatts p a {
  color: white;
  font-size: 15px;
  text-decoration: none;
}

.wow a {
  color: white;
  text-decoration: none;
}

.contatts p img {
  width: 25px;

}


.footerlogo {
  width: 200px;
}

.footer-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
}

.footer-heading::after {
  content: '';
  width: 30px;
  height: 2px;
  background: #ff6600;
  display: block;
  margin-top: 5px;
}

.footer-link {
  display: block;
  color: #cbd3dd;
  font-size: 15px;
  margin-bottom: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.footer-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-social a {
  font-size: 20px;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #ff6600;
}

.footer-social a img {
  width: 40px;
  margin-top: 25px;

}

/* Contact info icons */
.footer .bi {
  font-size: 16px;
  color: #fff;
}

/* Email input with send icon */
.email-input-wrapper {
  position: relative;
  width: 240px;
  margin-top: 30px;
}

.email-input-wrapper input {
  width: 100%;
  padding: 10px 42px 10px 15px;
  border-radius: 25px;
  border: 1px solid #ccc;
  background-color: transparent;
  font-size: 14px;
  color: #F5C94F;
  outline: none;
}

.email-input-wrapper input::placeholder {
  color: #F5C94F;
}

.email-input-wrapper img {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.email-input-wrapper img:hover {
  transform: translateY(-50%) translateX(4px);
}

/* Divider line */
.footer hr {
  border-top: 1px solid #ccc;
}

/* Copyright */
.footer .text-center {
  color: #cbd3dd;
  font-size: 13px;
}

/* footer underline start */
.footer-heading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 95px;
  height: 5px;
  background-color: #ffffff;
  z-index: 1;
  border-radius: 3px;
}

.part1 p {
  font-size: 14px;
  line-height: 1.7;
  padding: 0px 46px 0px 0px;
}

.footer-heading::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 5px;
  background-color: #ff6600;
  z-index: 2;
  border-radius: 2px;
  animation: moveOrange 6s linear infinite;
}

@keyframes moveOrange {
  0% {
    left: 0;
  }

  100% {
    left: 73px;
    /* same as white bar width - orange width */
  }
}

/* footer underline end */
/* ====================footer end */

/*==================== strat banner 1 */
.typewriter-text::after {
  content: "|";
  animation: blink 0.7s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.banner:after {
  position: absolute;
  z-index: -5;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/header-bg-sahi-sms.webp);
}

.lap img {
  width: 550px;
  margin-top: 30px;
}

.think {
  margin-top: 70px;
}

.think p {
  color: #B2F7FF;
  font-size: 20px;
}

.think h1 {
  margin-top: 40px;
  font-family: "Archivo", sans-serif;
  font-size: 100px;
  color: white;
  line-height: 87px;
  margin-bottom: 80px;
}

.think span {
  color: #8CF7FF;

}

.think a {
  padding: 10px 35px 13px 35px;
  font-size: 20px;
}

/*============== end banner 1 */
/* ==============start 2 branding ===== */
.client-wrapper {
  display: flex;
  justify-content: center;
  margin:51px 0px;
  margin-top: 140px;
}

.client-box {
  display: flex;
  gap: 50px;
  padding: 15px 30px 15px 30px;
  border: 2px solid #d0e3f8;
  border-radius: 10px;
  flex-wrap: wrap;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

.client-logo {
  transition: transform 0.3s ease;
}

.client-logo:hover {
  transform: scale(1.05);
  z-index: 2;
}

.client-logo {
  position: relative;
  width: 140px;
  height: 150px;
  /* increased height */
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
  margin-bottom: -30px;
}

/* background hidden by default */
.logo-bg {
  position: absolute;
  inset: 0;
  background: url(../img/bg.png) center center no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  border-radius: 10px;
}

/* both logos on top */
.logo-img {
  position: absolute;
  max-width: 80%;
  z-index: 2;
  transition: 0.3s ease;
}



.logo-img.white {
  opacity: 0;
}

/* Hover effect */
.client-logo:hover .logo-bg {
  opacity: 1;
}

.client-logo:hover .logo-img.light {
  opacity: 0;
}

.client-logo:hover .logo-img.white {
  opacity: 1;
}

/* ACTIVE logic applies ONLY when no logo is being hovered */
.client-box:not(:hover) .client-logo.active .logo-bg {
  opacity: 1;
}

.client-box:not(:hover) .client-logo.active .logo-img.white {
  opacity: 1;
}

.client-box:not(:hover) .client-logo.active .logo-img.light {
  opacity: 0;
}

/*++++++++ start inner img++++++++++ */
@keyframes float-logo {

  0%,
  100% {
    transform: translateY(0) scale(1.05);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

/*+++++start Apply float animation to the whole logo box ++++++*/
/* .client-logo:hover {
  animation: float-logo 1s ease-in-out infinite;
} */
/*+++++end Apply float animation to the whole logo box ++++++*/

/* Apply float animation to both images inside */
.client-logo:hover .logo-img {
  animation: float-logo 1s ease-in-out infinite;
}

/* ++++++++++++ end inner img ++++++++++++ */
@media (max-width: 1024px) {
  .client-logo {
    width: 110px;
    height: 120px;
    margin-top: -25px;
    margin-bottom: -10px;
  }

  .logo-img {
    max-width: 70%;
  }

  .client-box {
    gap: 30px;
    padding: 12px 20px 0px 20px;
  }
}

@media (max-width: 768px) {

  .client-box {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 50px 20px 20px;
  }

  .client-wrapper {
    overflow-x: hidden;
  }

  .client-logo {
    flex: 0 0 auto;
    width: 110px;
    height: 120px;
    margin-top: -25px;
    margin-bottom: 0;
  }

  .logo-img {
    max-width: 70%;
  }

  /* Optional - Hide scrollbar for cleaner look */
  .client-box::-webkit-scrollbar {
    display: none;
  }

  .client-box {
    -ms-overflow-style: none;
    /* IE & Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

/* ==============end 2 branding ===== */

/* ==============start 3 abouts us ===== */

.about-stats-wrapper {
  position: relative;
  left: 0;
  width: 50vw;
  margin-left: calc(-36vw + 51%);
  /* margin-bottom: calc(-10vw + 2%); */
}

.stats-strip-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #d4f2fb;
  padding: 0;
  margin-top: 80px;
  /* 👈 This pushes stats down */
}

.about-stats {
  width: 100%;
}

.about-section {
  background: #f0f6ff;
  padding: 80px 0px 0px 0px;
  overflow: hidden;
}

.section-tag {
  display: inline-block;
  background: #9ff6f2;
  color: #000;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 3.5rem;
  font-weight: 500;
  color: #217DDB;
  margin-bottom: 20px;
  margin-right: 33px;
  line-height: 55px;
}

.section-description {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  max-width: 480px;
}

.btn-learn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #66e0d1;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-learn:hover {
  background-color: #3cc1b3;
  color: #fff;
}

/* D-Shape Section */
.d-shape-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  /* fixed height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.d-shape {
  position: absolute;
  border-radius: 100%;
  transform-origin: bottom center;
  margin-bottom: -350px;
  opacity: 1;
}

/* D1 - Bold White */
.d-shape-white-bold {
  width: 800px;
  height: 800px;
  background: #ffffff;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  z-index: 1;
  animation: scalePulse 4s ease-in-out infinite;
  animation-delay: 2s;
}

/* D2 - Light White */
.d-shape-white-light {
  width: 650px;
  height: 700px;
  background: #d3fbfe;
  bottom: 30px;
  right: 50%;
  transform: translateX(50%);
  z-index: 2;
  animation: scalePulse 4s ease-in-out infinite;
  animation-delay: 2s;
}

/* D3 - Light Blue */
.d-shape-lightblue {
  width: 577px;
  height: 625px;
  background: #c3f9fd;
  bottom: 60px;
  right: 50%;
  transform: translateX(50%);
  z-index: 3;
  animation: scalePulse 4s ease-in-out infinite;
  animation-delay: 2s;
}

/* D4 - Aqua Blue */
.d-shape-blue {
  width: 500px;
  height: 520px;
  background: #8af6ff;
  bottom: 90px;
  right: 50%;
  transform: translateX(50%);
  z-index: 4;
  animation: scalePulse 4s ease-in-out infinite;
  animation-delay: 2s;
}




/* Girl Image */
/* Girl Image */
.girl-image {
  position: absolute;
  bottom: -43px;
  z-index: 4;
  width: 100%;
  max-width: 400px;
}

/* Stats Section - No Gap */
.about-stats {
  display: flex;
  margin-top: 40px;
  flex-wrap: nowrap;
}

.about-stats.no-gap .stat-box {
  margin: 0;
  border-radius: 0;
  flex: 1;
}

.stat-box {
  padding: 25px;
  text-align: center;
  color: white;
  min-width: 100px;
}

.stat-orange {
  background: #ec5b29;
}
.stat-lightblue{
background: #5498d7;
}

.stat-blue {
  background: #6bbcb3;
}

.stat-purple {
  background: #40284a;
}

.stat-box h3 {
  font-size: 28px;
  margin-bottom: 5px;
}

.stat-box p {
  font-size: 14px;
  margin: 0;
}

/* D-shape animation */
/* D-shape animation: smooth scale effect */
@keyframes scalePulse {
  0% {
    transform: translateX(50%) scale(0.92);
    opacity: 0.6;
  }

  50% {
    transform: translateX(50%) scale(1.05);
    opacity: 1;
  }

  100% {
    transform: translateX(50%) scale(0.92);
    opacity: 0.6;
  }
}

.plus::after {
  content: "+";
  margin-left: 2px;
}

@media (max-width: 768px) {
  .stats-strip-wrapper {
    margin-left: 0;
    width: 100%;
    padding: 10px;
  }

  .about-stats {
    flex-direction: column;
    gap: 10px;
  }

  .about-stats.no-gap .stat-box {
    border-radius: 10px;
  }
}


/* ==============end 3 abouts us ===== */
/* ==============strat 4  why ===== */
.why-choose-section {
  background-image: url('../img/why-choose-sahi-sms.webp');
  padding: 80px 0;
  color: #fff;
  height: 300px;
  margin-bottom: 390px;
  margin-top: 50px;

}

.why-box:hover .why-heading-static {
  bottom: 60%;
  left: 180px;

  transform: translate(-40%, -100%);
  text-align: center;

}


.why-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.why-subtext {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  color: #1f1c1c;
}

.why-box:hover .curve-svg path:nth-child(2) {
  fill: rgb(0 0 0 / 3%);
  /* semi-transparent black on hover */
  transition: fill 0.5s ease;
}

.curve-svg path:nth-child(2) {
  fill: #000000;
  transition: fill 0.5s ease;
}

/* =============================*/
/* start img */
.why-box {
  position: relative;
  border-radius: 0px 30px 0 0;
  overflow: hidden;
  text-align: center;
  /* transition: all 0.5s ease; */
  height: 400px;
  /* fixed height */
}

/*  */
.why-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: filter 0.5s ease;
}

.curve-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 190px;
  /* Curve height */
  z-index: 2;
  transition: height 0.5s ease;
}

.why-box:hover .curve-svg {
  height: 400px;
  /* Animate to full height */
}


/* fwdwdqwdq */
.why-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}

.why-box:hover .why-img {
  transform: scale(1.05);
  filter: brightness(0.4);
}


/* lwdlpwd */

.black-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  z-index: 4;
  transition: height 0.5s ease;
}

.why-box:hover .why-img {
  transform: scale(1.05);
  filter: brightness(0.4);
}

.why-box:hover .black-bg {
  height: 100%;
}


.why-box:hover .curve-svg {
  height: 1300px;
  /* On hover: reveal full card */
}

/* dww */
.why-para {
  font-size: 17px;
  font-weight: 400;
  padding: 46px 45px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  color: white;
  line-height: 1.5;
}

.why-box:hover .why-para {
  opacity: 1;
  transform: translateY(0);
}

.why-box:hover .why-text {
  opacity: 1;
}

.why-box:hover .why-heading-static {
  font-size: 20px;
  text-align: center;
}

.why-heading-static {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 5;
  color: #fff;
  font-size: 20px;

  font-weight: 600;
  text-align: start;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s ease;
}

/*  */
.text-center-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  width: 90%;
  pointer-events: none;
}

.why-box:hover .black-overlay .why-img {
  filter: brightness(0.4);
  transform: scale(1.05);
}

/* ==============end 4  why ===== */
/* ==============start 5  clarity ===== */
.features-section {
  display: flex;
  justify-content: space-between;
  background: #e9e9e9;
  padding: 40px 90px;
  gap: 30px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: transparent;
  flex: 1 1 30%;
  max-width: 400px;
  transition: all 0.3s ease;
}

.icon-circle {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

/* 🔥 Hover effect */
.feature-item:hover .feature-icon {
  transform: scale(1.2) rotate(10deg);
}

.feature-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 5px;
  color: #000;
}

.feature-content p {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  margin: 0;
}

/* ✅ Responsive for mobile */
@media (max-width: 767px) {
  .features-section {
    flex-direction: column;
    align-items: center;
  }

  .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .feature-content {
    margin-top: 10px;
  }
}



/* ==============end 5  clarity ===== */
/* ==============start 5  form ===== */
.forms .container {
  margin: 20px auto;
  background: #e5e5e5;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 50px;
}

.form-section {
  flex: 1 1 500px;
      margin-top: 50px;
}

.image-side {
  flex: 1 1 400px;
}

.form-heading {
  font-size: 48px;
  color: #333;
  margin-bottom: 20px;
  margin-right: 57px;
}

.form-heading span {
  color: #999;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
}

.full-width {
  width: 100%;
}

form label {
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 6px;
}

form input {
  padding: 12px;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  width: 100%;
  background: white;
}

.checkbox input {
  width: 25px;
  margin-top: 5px;
}

form select {
  padding: 12px;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  width: 100%;
  appearance: none;
  background: white url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size: 1em;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: #333;
  margin-top: 10px;
}

.custom-submit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.submit-left {
  background: white;
  color: black;
  border: aliceblue;
  padding: 12px 25px;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
}

.submit-icon {
  border: 1px solid white;
  background: white;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: black;
}

.image-section img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

form select {
  padding: 12px 40px 12px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  background-color: white;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23222222' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  transition: border-color 0.3s ease;
}

form select:focus {
  outline: none;
  border-color: #000;
}

/*  */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-select {
  position: relative;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  user-select: none;
}

.selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-text {
  color: #333;
  font-size: 1rem;
}

.arrow {
  transition: transform 0.3s ease;
  font-size: 1rem;
}

/* Rotate arrow when open */
.dropdown-select.active .arrow {
  transform: rotate(180deg);
}

.dropdown-options {
  display: none;
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-options .option {
  padding: 10px 12px;
  cursor: pointer;
}

.dropdown-options .option:hover {
  background-color: #f0f0f0;
}

.dropdown-select.active .dropdown-options {
  display: block;
}


/* Responsive */
/* Keep two columns until below 992px */
@media (min-width: 992px) {
  .form-row {
    flex-wrap: nowrap; /* Prevent stacking */
  }

  .form-group {
    flex: 1 1 50%; /* Always two columns */
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .forms .container {
    flex-direction: column;
    padding: 20px;
  }

  .form-heading {
    font-size: 2rem;
    text-align: center;
    margin-right: 0px;
  }

  .image-side {
    text-align: center;
  }

  .form-row {
    flex-direction: column;
  }

  .form-group {
    flex: 1 1 100%;
  }
}
/* Mobile (below 768px) */
@media (max-width: 768px) {
  .form-section {
    order: 2; /* form second */
  }
  .image-side {
    order: 1; /* heading + image first */
  }
}



/* ==============end 5  form ===== */
/* ==============start 6  testimonial===== */

.testimonial-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 180px;
  background: #ffffff;
  border-top-right-radius: 21px;
  border-bottom-left-radius: 34px;
  border-top-left-radius: 22px;
  border-bottom-right-radius: 22px;
  z-index: 1;
}

/* Image embedded in bottom-left cut */
.testimonial-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 60px auto;
  padding: 0 20px;
  max-width: 1200px;
}

.testimonial-left {
  flex: 1;
  max-width: 50%;
}

.small-heading {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 30px;
}

.main-heading {
  font-size: 80px;
  font-weight: 500;
  line-height: 78px;
  margin: 10px 0;
  font-family: 'Archivo';
}

.sub-text {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  max-width: 287px;
  margin-top: 118px;
}

.arrow-btn {
  background-color: black;
  display: inline-block;
  font-size: 24px;
  border: 2px solid black;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 44px;
  cursor: pointer;
}

.arrow-btn img {
  width: 25px;
  margin-top: 15px;
}

/* Right Slide Section */
.testimonial-slider {
  flex: 1;
  max-width: 45%;
  position: relative;
  overflow: hidden;
  margin-top: 20px;
}

.slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.pera {
  height: 263px;
}

/* hbdhdbuyduqw */
.testimonial-box {
  font-family: 'Helvetica Neue', sans-serif;
  position: relative;
  background: #CEE6FF;
  padding: 60px 30px 0px 30px;
  border-radius: 30px;
  min-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Text area */
.testimonial-content {
  padding-left: 40px;
}

.quote {
  font-size: 32px;
  margin-bottom: 25px;
  color: #333;
}

.testimonial-content h3 {
  font-size: 32px;
  font-weight: bold;
}

.testimonial-content p {
  font-size: 18px;
  color: #444;
  margin: 10px 21px 20px 0px;
}

.quote img {
  width: 40px;
}

.client-text h4 {
  font-size: 23px;
  font-weight: 600;
  width: 200px;
  margin: 0;
}

.client-text {
  padding: 0px 0px 16px 140px;
}

.position {
  font-size: 12px;
  color: #666;
}


/* Client image in cut-out style */
.image-clip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 165px;
  height: 165px;
  background: #ffffff;
  overflow: hidden;
  z-index: 2;

}

.image-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* Slider arrows */
.slider-nav {
  position: absolute;
  bottom: -40px;
  left: 0;
  display: flex;
  gap: 10px;
}

.slider-nav button {
  background: #000;
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
    gap: 30px;
    padding: 20px 15px;
    margin:0px;
  }

  .testimonial-left,
  .testimonial-slider {
    max-width: 100%;
    flex: 1;
  }

  .testimonial-box {
    padding: 60px 20px 0 20px;
    border-radius: 30px;
  }

  .testimonial-content {
    padding-left: 40px;
  }

  .client-text {
    padding: 0 0 16px 155px;
  }

  .image-clip {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0%, 0%);
    width: 140px;
    height: 140px;
  }

  .slider-nav {
    position: absolute;
    bottom: -40px;
    left: 0;
  }
}

/* ==============end 6  end testimonial ===== */


/*  S T A R T ----------- 2 ----------- P A G E ----------
          R C S .....................................
    ------------------------------------------------------        
 */

/* rcs-section start */
.rcs-section {
  overflow: hidden;
  padding: 50px 20px 0px 20px;
  background: #F1F8FF;
}

.section-subtitle {
  font-weight: 600;
  font-size: 23px;
  color: black;
  /* blue subtitle color */
  margin-bottom: 53px;
  position: relative;
  display: inline-block;
  z-index: 2;
}

/* Circle behind subtitle */
.bg-subtitle-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #7CEAF0;
  border-radius: 50%;
  z-index: -1;
  bottom: -11px;
  left: -10px;
  opacity: 0.9;
}



.section-title {
  font-size: 48px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  line-height: 1.2;
}

.section-title span {
  color: #2986e2;
}

.section-description {
  font-size: 15px;
  color: #555;
  margin-bottom: 30px;
  max-width: 500px;
}

.btn-learn {
  background-color: #7CEAF0;
  color: black;
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease;
  display: inline-block;
}

.btn-learn:hover {
  background-color: #1cb78a;
  color: #fff;
}

.rcs-phone-img {
  width: 100%;
  height: auto;
  border-radius: 20px;

}

.rcs-phone img {
  max-height: 555px;
  max-width: 338px;
}

/* Responsive Text */
@media (max-width: 768px) {
  .section-title {
    font-size: 24px;
  }

  .section-description {
    font-size: 14px;
  }

  .rcs-section {
    text-align: center;
  }

  .text-content {
    margin-bottom: 30px;
  }
}

/* end 1 rcs-section end */

/*+++++++++++++ start 2 what++++++++++++++  */
.rcs-section2 {
  padding: 40px 20px;
  background: #fff;
}


.messag {
  margin-top: 50px;
  margin-bottom: 80px;
}

.rcs-heading h2 {
  font-size: 70px;
  font-weight: 600;
  font-family: 'Archivo';
  line-height: 1;
}

.rcs-heading p {
  font-size: 16px;
  color: #444;
  margin-top: 20px;
}

.messag p {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 300;
}

.rcs-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  color: #fff;
  height: 250px;
  margin: 0;
  font-size: 32px;
  border-radius: 10px;
  background-clip: padding-box;
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.08);
}

.bg-yellow {
  background-color: #FAC111;
}

.bg-pink {
  background-color: #FF5C77;
}

.bg-green {
  background-color: #4ACBB7;
}

.bg-cyan {
  background-color: #58CFE7;
}

.bg-blue {
  background-color: #4AA3FF;
}

.bg-purple {
  background-color: #9288AA;
}

@media (max-width: 768px) {
  .rcs-heading h2 {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .rcs-heading h2 {
    font-size: 24px;
  }

  .rcs-box {
    height: 130px;
    font-size: 15px;
  }
}

.rcs-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rcs-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* hands animation  */


/*+++++++ end 2 what=+++++++++  */
/*+++++++ start 3 rcv2=+++++++++  */
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.title-line {
  font-size: 28px;
  font-weight: 600;
  font-family: 'Archivo', sans-serif;
  white-space: nowrap;
  margin: 0;
}

.flex-line {
  flex: 1;
  height: 2px;
  background-color: #00d2ff;
  max-width: 100%;
}

/*  */
.title-line {
  position: relative;
  font-weight: 600;
  font-family: 'Archivo', sans-serif;
  font-size: 28px;
}



.comparison-box {
  background: #f1f1f1;
  border-radius: 16px;
  padding: 30px;
}

.feature-list {
  list-style: none;
  padding-left: 0;
}

.feature-list li {
  font-size: 16px;
  margin-bottom: 20px;
  color: #000;
}

.feature-list li:first-child {
  color: #007bff;
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 25px;
}

.column-box {
  border-radius: 15px;
  padding: 20px 10px;
  height: 100%;
}

.bg-rcs {
  background-color: #9EEFFF;
}

.bg-sms {
  background-color: #9FCCFA;
}

.column-title {
  font-weight: bold;
  margin-bottom: 25px;
  font-size: 18px;
}

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-list li {
  margin-bottom: 20px;
}

.icon-circle1 {
  display: inline-flex;
  width: 35px;
  height: 35px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/*+++++++ end 3 rcv2=+++++++++  */
/*+++++++ start 4 get-started-section =+++++++++  */
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.title-line {
  font-size: 28px;
  font-weight: 600;
  font-family: 'Archivo', sans-serif;
  white-space: nowrap;
  margin: 0;
}

.flex-line {
  flex: 1;
  height: 2px;
  background-color: #00d2ff;
  max-width: 100%;
}

.step-box p {
  width: 200px;
}

.step-box {
  position: relative;
  background-color: #ccc;
  padding: 20px 30px 20px 70px;
  color: #fff;
  border-radius: 0px;
  min-width: 240px;
  max-width: 400px;
  flex: 1 1 280px;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 106%, 11% 50%);
  text-align: left;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.step-1 {
  background-color: #1e4663;
}

.step-2 {
  background-color: #f8826c;
}

.step-3 {
  background-color: #cc407b;
}


.icon-circles {
  background-color: #fff;
  border-radius: 50%;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.icon-circles img {
  width: 38px;

}

@media (max-width: 576px) {
  .step-box {
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-between;
    clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 6% 50%);
    padding: 16px 24px 16px 24px;
    /* add even spacing */
    font-size: 16px;
    /* slightly smaller for narrow screens */
  }

  .arrow-steps {
    flex-direction: column;
    align-items: stretch;
    /* stretch full width */
    gap: 16px;
    /* space between steps */
  }

  .icon-circles {
    width: 40px;
    height: 40px;
    padding: 6px;
  }

  .icon-circles img {
    width: 20px;
    height: 20px;
  }
}


/*+++++++ end 4 get-started-section =+++++++++  */
/*+++++++ start 5 who =+++++++++  */
.who-can-use-rcs {
  overflow: hidden;
}

.intro-box {
  background-color: #9EEFFF;
  width: 220px;
  height: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #000;
  border-radius: 20px;
  overflow: hidden;
  /* Make sure curve stays inside */
}

/* Add bottom-right curve */
.intro-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 85px;
  height: 80px;
  background-color: white;
  border-top-left-radius: 42px;
  z-index: 1;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  animation: floatCurve 3s ease-in-out infinite;
}

@keyframes floatCurve {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.intro-text h5 {
  font-size: 35px;

}



.intro-text {
  z-index: 2;
}

.arrow-circle {
  background: #000;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 5;
}

/* Slider part */
.slider-wrapper {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  margin-top: 40px;
}

.arrow-circle {
  background: #000;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 5;
  cursor: pointer;
  /* ✅ Make it clickable */
  transition: transform 0.2s ease-in-out;
}

.arrow-circle:active {
  transform: scale(1.2);
  /* ✅ Grow slightly on click */
}

.slider-track {
  display: flex;
  width: fit-content;
  animation: scrollSlider 45s linear infinite;
}

.slider-wrapper:hover .slider-track {
  animation-play-state: paused;
}

.slider-item {
  flex: 0 0 200px;
  margin-right: 20px;
  text-align: center;
}

.slider-item img {
  width: 100%;
  border-radius: 15px;
  height: 220px;
  object-fit: cover;
}

.slider-item p {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: default;
}

.slider-item:hover p {
  font-size: 16px;
  cursor: pointer;
}

@keyframes scrollSlider {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .intro-box {
    width: 100%;
    height: auto;
    clip-path: none;
    border-radius: 20px;
    text-align: center;
  }

  .arrow-circle {
    position: static;
    margin-top: 20px;
  }

  .slider-item {
    flex: 0 0 130px;
  }

  .slider-track {
    animation-duration: 35s;
    justify-content: center;
  }
}


/*+++++++ end 5 who =+++++++++  */

/* ..................
......................................
pricing pages start ...........
.......................................
........................ */
/*===== start 1 =========*/
.pricing-banner {
  background: linear-gradient(to right, #10579F, #257BD2);
  padding: 60px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.pricing-banner .banner-content {
  z-index: 1;
}

.pricing-banner .circle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-30%, 30%);
  z-index: 0;
  animation: floatRotate 2s ease-in-out infinite;
}

/* Animation Keyframes */
@keyframes floatRotate {
  0% {
    transform: translate(-30%, 30%) rotate(0deg);
  }

  50% {
    transform: translate(-30%, 35%) rotate(180deg);
  }

  100% {
    transform: translate(-30%, 30%) rotate(360deg);
  }
}

.pricing-banner .banner-title {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.pricing-banner .banner-subtitle {
  font-family: 'Sofia', cursive;
  font-size: 18px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

/* Responsive Typography */
@media (min-width: 768px) {
  .pricing-banner .banner-title {
    font-size: 32px;
  }

  .pricing-banner .banner-subtitle {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .pricing-banner .banner-title {
    font-size: 36px;
  }

  .pricing-banner .banner-subtitle {
    font-size: 22px;
  }
}

/*======= end 1 ==========*/
/* start 2 */

.top-tabs {
  max-width: 800px;
  /* Adjust width as needed */
  margin: 0 auto;
  /* Center it */
  display: flex;
  justify-content: center;
  gap: 10px;
  background: #f0fcff;
  padding: 9px 20px;
  border-radius: 40px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
#monthlyCost small{
    margin-left: -120px;
    font-size: 17px;
}

.top-tabs button {
  background: transparent;
  border: none;
  padding: 10px 38px;
  border-radius: 20px;
  font-weight: 500;
  color: #000;
  transition: all 0.2s ease;
}

.top-tabs button.active {
  background: #d4e6ff;
  font-weight: 600;
  color: #0078d7;
}

/* Grid-based wrapper — Bootstrap handles layout */
.pricing-wrapper {
  margin-bottom: 50px;
}

/* Left tab buttons */
.left-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.left-tabs button {
  padding: 15px 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 47px;
  text-align: center;
  font-weight: 500;
  color: #9F9F9F;
  transition: 0.2s ease;
  width: 62%;
  background: #F1FEFF;
}

.left-tabs button.active {
  background: #b2f2ff;
  font-weight: 600;
  color: black;
}

/* Pricing Card */
.pricing-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);

  width: 100%;
  max-width: 100%;
}

.pricing-card h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #10579F;
  padding: 40px 30px 0px 30px;
}

/* dbdhhhdhdd------------- */
.slider-box input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: #e0e0e0;
  outline: none;
  margin-top: 10px;
  background-image: linear-gradient(#3ee0f5, #3ee0f5);
  background-repeat: no-repeat;
}

.slider-box p {
  font-weight: 600;
  text-align: right;
  margin-top: 5px;
}

.slider-box {
  padding: 20px;
}

.summary p {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 16px;
}

.btn-primary {
  margin-top: 20px;
  background: #1877f2;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: #0f62d1;
}

.setup {
  padding: 10px 38px;
  border-radius: 3px 20px;
  font-weight: 500;
  float: inline-end;
  background: linear-gradient(90deg, rgba(16, 87, 159, 1) 35%, rgba(37, 123, 210, 1) 100%);
  color: white;
  margin-top: 30px;
  border: none;
}

.summary {
  background: #F3F3F3;
  padding: 30px;
  border-radius: 0px 0px 13px 14px;
}

.summary span {
  font-weight: 500;
  font-size: 17px;
}

.summary p {}

/* ewe22 */
.slider-box input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #3ee0f5;
  cursor: pointer;
  margin-top: -8px;
  /* Align center with track */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.slider-box input[type="range"]::-moz-range-thumb {
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #3ee0f5;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.slider-box input[type="range"]::-moz-range-track {
  height: 6px;
  background: #e0e0e0;
  border-radius: 4px;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .left-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .left-tabs button {
    flex: 1 1 45%;
    text-align: center;
  }

  .top-tabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding: 10px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
  }

  .top-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
  }

  .left-tabs button {
    padding: 10px 13px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 47px;
    text-align: center;
    font-weight: 500;
    color: #9F9F9F;
    transition: 0.2s ease;
    width: 27%;
    font-size: 15px;
    background: #F1FEFF;
  }

  .top-tabs button {
    display: inline-block;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* ..................
......................................
pricing pages end ...........
.......................................
........................ */

/* ..................
......................................
about pages start...........
.......................................
........................ */
/* start 2 */
.connection-section .blue-box {
  background-color: #e9f2ff;
}

.blue-box {
  padding: 40px;
}

.list-unstyled1 {
  color: #004b91;
  font-size: 18px;
  font-weight: 500;
  margin-top: 30px;
}

.list-unstyled1 li {
  margin-bottom: 25px;
}

.list-unstyled1 {

  list-style: disc;
}

.blue-box h4 {
  color: #004b91;
  font-size: 37px;
  font-family: 'Archivo';
}

.textdar {
  color: #000000;
  font-size: 17px;
  margin-top: 30px;
  margin-bottom: 34px;
}

.connection-section .stats-box {
  background: linear-gradient(to right, #10579F, #257BD2);
  border-radius: 16px;
  width: 100%;
  max-width: 303px;
  margin: 0 auto;
}

.stats-box .fw-bold {
  font-weight: 700 !important;
  font-size: 32px;
}

@media (max-width: 768px) {
  .connection-section .blue-box {
    padding: 20px;
  }

  .connection-section h4 {
    font-size: 18px;
  }

  .connection-section p,
  .connection-section ul {
    font-size: 14px;
  }

  .connection-section .stats-box {
    font-size: 14px;
  }
}

/* end 2 */
/* start 3 */
.why-choose-about {
  background-image: url(../img/why-choose-sahi-sms.webp);

}

.why-choose-about .why-box {
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  padding: 30px;
  text-align: center;
  height: 270px;
}

.why-choose-about .why-box p {
  color: #217DDB;
  font-size: 18px;
  font-weight: 500;
  margin-top: 37px;
}

.why-choose-about .why-box img {
  width: 90px;
}

.why-choose-about h2 {
  color: #004b91;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 50px;
}

.why-choose-about .why-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-about .why-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.why-choose-about .why-box img {
  max-width: 100%;
  height: auto;
  margin-top: 18px;
}

/* end 3 */

/* start 4 */
.image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.main-image {
  position: relative;
  z-index: 2;
  border-radius: 8px;
  width: 100%;
  height: auto;
  animation: floatImage 4s ease-in-out infinite;
}

/* Background border box (static) */
.image-border {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  background-color: #47d4ff;
  z-index: 1;
  border-radius: 8px;
}

/* Floating image animation */
@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Mobile view adjustment */
@media (max-width: 767px) {
  .image-border {
    top: 10px;
    left: 10px;
  }
}


/* end 4 */
/* start 5 */
.mission-section p.text-muted {
  font-size: 18px;

}

.mission-section .image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.mission-section .main-image {
  position: relative;
  z-index: 2;
  border-radius: 8px;
  width: 100%;
  height: auto;
  animation: floatImage 4s ease-in-out infinite;
}

.mission-section .image-border {
  position: absolute;
  top: 20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background-color: #f7941d;
  /* orange background */
  z-index: 1;
  border-radius: 8px;
}

/* Floating animation */
@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .mission-section .image-border {
    top: 10px;
    left: -10px;
  }

  .mission-section .main-image {
    width: 100%;
  }

  .mission-section .row {
    flex-direction: column;
  }
}


/* end 5 */
/* ..................
......................................
about pages end...........
.......................................
........................ */
/* ..................
......................................
contact pages start...........
.......................................
........................ */
.maping {
  position: relative;
  width: 100%;
  height: 70vh; /* Full screen height */
  margin: 0;
  padding: 0;
}

.maping iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-list li a {
  text-decoration: none;
}

.header {
  margin: 0;
  padding: 120px;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to top right, #d0f0ff, #a5e5ff, #82d9ff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1{
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}

.highlight {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  z-index: 1;
}

.highlight::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 102, 204, 0.2);
  /* soft blue */
  border-radius: 50%;
  z-index: -1;
}

/* contact start */
.contact-container {
  max-width: 1200px;
  margin: -50px auto;
  border: 6px solid white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  margin-bottom: 20px;
}

/* uwdwqudq2uj */
.contact-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row;
}

.contact-item i {
  margin-right: 10px;
  width: 20px;
}

.contact-info {
  position: relative;
  background: linear-gradient(135deg, #09C8D5, #09C8D5);
  color: white;
  padding: 40px;
  width: 456px;
  overflow: hidden;
  /* important to keep the bubble inside */
  z-index: 1;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  /* 👈 curve only this corner */
}

.contact-title {
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-subtitle {
  font-size: 0.9rem;
  margin-bottom: 30px;
  line-height: 1.5;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-item {
  margin-bottom: 15px;
  font-size: 17px;
  display: flex;
  align-items: center;
}

.contact-item a {
  color: white;
  text-decoration: underline;
}

.contact-bubble {
  position: absolute;
  bottom: -40px;
  right: -60px;
  width: 230px;
  height: 230px;
  background: radial-gradient(circle at bottom, rgb(9 200 213 / 0%), rgb(238 243 244));
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: pulse 3s ease-in-out infinite, float 4s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}




.contact-map {
  flex: 1;
  min-height: 400px;
}

@media (min-width: 768px) {
  .contact-info {
    width: 456px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
  }
}

/* Responsive bubble (scales down and repositions) */
@media (max-width: 767px) {
  .contact-bubble {
    width: 180px;
    height: 180px;
    bottom: -20px;
    right: -40px;
  }
}

@media (min-width: 768px) {
  .contact-map {
    flex: 1;
    min-height: 400px;
  }
}
/* Right Side Form */
.contact-form {
  flex: 1;
  padding: 40px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-form .form-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1a1a1a;
}

.contact-form .highligh {
  color: #0073e6;
  
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  outline: none;
}

.contact-form textarea {
  min-height: 100px;
  resize: none;
}

.contact-form button {
  padding: 12px;
  background: #0a2b63;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  background: #094da3;
}

/* Responsive */
@media (max-width: 767px) {
  .contact-box {
    flex-direction: column;
  }

  .contact-info, 
  .contact-form {
    width: 100%;
    border-radius: 0;
  }
}
@media (max-width: 767px) {
  .contact-box {
    flex-direction: column;
  }

  .contact-form {
    order: 1; /* show form first */
  }

  .contact-info {
    order: 2; /* show info second */
  }

  .contact-info, 
  .contact-form {
    width: 100%;
    border-radius: 0;
  }
}

/* contact  end */
/* ..................
......................................
contact pages end...........
.......................................
........................ */
/* ..................
......................................
bulk-sms start...........
.......................................
........................ */
.sms-card-section {
  background-color: #ffffff;
}

.sms-card {
  background: #DDFDFF;
  border-radius: 15px;
  border: 1px solid #67EFF9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  height: 100%;
  transition: transform 0.3s ease;
  position: relative;
}

.sms-card:hover {
  transform: translateY(-5px);
}

.sms-card .card-header {
  background: #88F7FF;
  color: #10579F;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 70px;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  border-radius: 0px 17px 0px 19px;
  margin-bottom: 15px;
  font-family: 'Arial', sans-serif;
}

.sms-card .card-list {
  list-style: none;
  padding: 10px 31px;
  margin: 0;
}

/* jdhuwh */
.sms-card .card-list li {
  font-size: 17px;
  margin-bottom: 10px;
  color: #00B900;
  font-weight: 300;
  font-family: 'Arial', sans-serif;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;

}

.card-list li:hover {
  transform: translateX(8px);
  color: #0a58ca;
  /* Optional: change text color on hover */
}

.card-list li:hover i {
  color: #0a58ca;
  /* Optional: change icon color on hover */
}

.card-list li:hover span {
  font-weight: 500;
}

.sms-card .card-list li span {
  color: #10579F;
}

@media (max-width: 767px) {
  .sms-card {
    margin-bottom: 20px;
  }

  .sms-card .card-header {
    white-space: normal;
    text-align: center;
  }

  .sms-card .card-list {
    padding: 10px 20px;
  }
}

/* start start 4 Why Sahi SMS? */
.why-sahi-section {
  margin: 60px 0;
}

.feature-box {
  flex: 0 0 300px;
  /* or adjust as needed */

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;

  padding: 15px;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  /* stronger shadow on hover */
}

.feature-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.bg-yellow {
  background-color: #FDBD10;
}

.bg-pink {
  background-color: #F34263;
}

.bg-teal {
  background-color: #38CEC3;
}

.why-title {
  font-size: 36px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
  font-family: 'Arial', sans-serif;
}

.why-title span {
  font-weight: 900;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .feature-box {
    flex: 1 1 100%;
  }

  .why-title {
    font-size: 28px;
  }

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


/* end 4 Why Sahi SMS? */
/* ..................
......................................
bulk-sms end...........
.......................................
........................ */
/*==========
 bulk-whatsapp-message-service start
 ========= */
 .keys{
  padding: 13px 25px;
    background-color: #f2f8f8;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 10px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    top: 0;
    color: black;
    height: 360px;
        background-image: url(../img/who/bulk-bg-sahi-sms.webp);
        background-size: 100%;
    height: 300px;
 }
 .keys h5{
      position: relative;
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
     margin: 24px 0px 23px 9px;
    padding-bottom: 18px;
    z-index: 1;
    color: #0f0f6e;
 }
 .keys h5:before{
      content: "";
    position: absolute;
    background: #e7204a;
    border: 0;
    width: 50px;
    height: 4px;
    z-index: 9;
    margin-left: 0;
    left: 0;
    bottom: 0;
 }
 .keys ul li{
      margin-bottom: 10px;
    font-size: 17px;
 }
 .open h4{
      margin-bottom: 30px;
 }
 .open h3{
  color: #ee8427;
 }
 .open p{
   margin-bottom: 50px;
  font-size: 17px;
  margin-right: 50px;
 } 
.open h3 {
  margin-bottom: 40px;
  animation: colorChange 4s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0% { color: #007bff; }
  50% { color: #ff4081; }
  100% { color: #28a745; }
}
.keys{
  display: inline-block;
  animation: bounce 3s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* =======how-whats start 8 ================ */
.how-whats{
     
    background-image: linear-gradient(#060632e8, #04264fb8), url(../img/link/footer-bg-sahi-sms.webp);
    background-size: cover;
    background-position: top;
    position: relative;
}
.how-whats{
  padding: 40px 0px;
}
.how-whats h3{
      font-family: 'Archivo', sans-serif;
  margin-top: 20px;
  font-size:40px;
  margin-bottom: 40px;
}
.how-whats li{
  margin-bottom: 20px;
  font-size: 18px;
}
.how-whats .whatsapp{
  width: 100%;
  height: 100%;
}
.how-whats .whatsapp img{
  width:auto;
  height: 400px;
}
.how-our-whatsapp{
  margin-top: 120px;
}
.whatsapp {
    animation-duration: 120s;
    animation-name: pageturn;
    animation-iteration-count: infinite;
}
/* =======how-whats end 8 ================ */
/*==========
 bulk-whatsapp-message-service end 
 =========*/
/* ..................
......................................
whatsapp start...........
.......................................
........................ */


.feat img {
  width: -webkit-fill-available;
}

.use-cases-section {
  font-family: 'Arial', sans-serif;
}

.use-cases-section .section-title {
  font-size: 28px;
  font-weight: 700;
  color: #000;
}

.use-case-box {
  background: linear-gradient(135deg, #1e90cc, #2980b9);
  color: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.use-case-box p {
  margin-top: 10px;
  font-family: 'Rancho', sans-serif;
  font-size: 23px;
  font-weight: 300;
}

.use-case-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.use-case-box .icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.use-case-box .icon::before {
  background-color: white;
  padding: 20px;
}

.icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon {
  width: 22px;
  height: 22px;
}

/* Background colors for icons */
.bg-ecommerce {
  background-color: #0092cc;
}

.bg-retail {
  background-color: #c53894;
}

.bg-healthcare {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
}

.bg-education {
  background-color: #f59c00;
}

.bg-finance {
  background-color: #547bd0;
}

.bg-service {
  background-color: #1e638c;
}

/*start 6 Features of WhatsApp Messaging with Sahi SMS */
.zigzag-section {
  padding: 80px 0;
  background: #fff;

}

.zigzag-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: -50px;
  /* This makes the rows interlock */
  position: relative;
}

.zigzag-row.offset {
  margin-top: 0;
  margin-left: 90px;
  /* offset second row for zigzag effect */
}

.diamond {
  width: 230px;
  height: 230px;
  background: #333;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transform: rotate(45deg);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 10px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-text {
  transform: rotate(-45deg);
  display: block;
  width: 100%;
  font-size: 20px;
  padding: 0px 10px;
}


/* Colors */
.zigzag-section .red {
  background: #ff717096;
}

.zigzag-section .orange {
  background: #fe983fbd;
}

.zigzag-section .pink {
  background: #db4d75b8;
}

.zigzag-section .cyan {
  background: #85d1efbf;
}

.zigzag-section .blue {
  background: #63A8C9;
}

.zigzag-section .darkblue {
  background: #4282A8;
}

.zigzag-section .navy {
  background: #1D5C86;
}

/* Responsive (optional) */
@media (max-width: 768px) {

  .zigzag-row,
  .zigzag-row.offset {
    flex-direction: column;
    margin-left: 0;
    align-items: center;
  }
}

.hii {
  padding-top: 100px;
  padding-bottom: 55px;
}

/* Animation */
/* Animation */
@keyframes rotateDiamond {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
    /* 360 + 45deg to keep orientation */
  }
}

.diamond {
  transition: transform 0.5s ease;
  transform: rotate(45deg);
}

/* On hover, start infinite rotation */
.diamond:hover {
  animation: rotateDiamond 5s linear infinite;
}


/*end 6 Features of WhatsApp Messaging with Sahi SMS */
/* ..................
......................................
whatsapp end...........
.......................................
........................ */
/* ..................
......................................
otp start...........
.......................................
........................ */

.otp-delivery-section {
  padding: 60px 20px;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.otp-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.kiya h2 {
  font-size: 66px;
  font-weight: 550;
  margin-bottom: 130px;
  line-height: 70px;
}


.otp-col-right {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.otp-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* Responsive: mobile-friendly */
@media (max-width: 768px) {
  .kiya h2 {
    font-size: 28px;
  }

  .kiya p {
    font-size: 14px;
  }

  .messag {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .kiya h2 {
    /* font-size: 66px; */
    margin-bottom: 0px;
  }

  .otp-img {
    margin: 0 auto;
  }
}

/* start 3 Key Features section */
.key-features-section {
  padding: 40px 20px;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.features-grid .feature-box {
  min-height: 100px;
}

.key-features-section .section-title {
  font-size: 72px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #000;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* No gaps */
}

.feature-box {
  color: #fff;

  text-align: center;
  padding: 25px 10px;
  font-size: 20px;
  text-transform: uppercase;
}

.pink {
  background-color: #e74c3c;
  box-shadow: 0px 4px 12px rgba(231, 76, 60, 0.5);
  /* subtle red shadow */
  z-index: 1;
  /* ensure it appears above others if needed */
}

.blue {
  background-color: #2196f3;
  box-shadow: 0px 4px 12px rgba(33, 150, 243, 0.5);
  /* subtle blue shadow */
  z-index: 1;
}


/* Colors */
.yellow {
  background-color: #FAC111;
}

.pink {
  background-color: #FF5C77;
}

.teal {
  background-color: #4ACBB7;
}

.blue {
  background-color: #58CFE7;
}

.cyan {
  background-color: #4AA3FF;
}

.purple {
  background-color: #9288AA;
}

/* Responsive */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* start 3 Key Features section */

/* start 5 easy integration  */
.integration-title {
  font-size: 78px;
  font-weight: 600;
  color: #333;
  line-height: 75px;
}

.integration-title span {
  color: #888;

}

.integration-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-top: 120px;
}

.logo-box {
  border-radius: 15px;
  text-align: center;

  transition: all 0.3s ease;
}

.logo-box:hover {
  transform: translateY(-5px);

}

/* end 5 easy integration  */


/* ..................

/* ..................
......................................
otp end...........
.......................................
........................ */
/* ..................
......................................
API start...........
.......................................
........................ */

.services-section {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

.section-title {
  font-size: 32px;
  font-weight: 600;
}

.service-box {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 25px;
  text-align: left;
  height: 100%;
  color: #000;
  transition: 0.3s ease;
}

.service-box:hover {
  background-color: #5089C3;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-box .icon-circle {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background-color: #5089C3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  margin-bottom: 15px;
  transition: background-color 0.3s ease;
}

/* ICON base — NO fixed color so inline or class can work */
.service-box .icon-circle i {
  transition: color 0.3s ease;
  display: inline-block;
}

.services-section h2.chize {
  font-size: 80px;
  font-weight: 500;
  line-height: 78px;
  margin: 10px 0;
  font-family: 'Archivo';
}

/* On hover: white icon + animate */

.service-box:hover .icon-circle i {
  color: #5089C3 !important;
  animation: floatIcon 1s ease-in-out infinite;
  background-color: white;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  margin-bottom: 15px;


}

/* Float animation */
@keyframes floatIcon {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

.service-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.service-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  transition: 0.3s ease;
}

.service-box:hover .service-desc {
  color: #e8e8e8;
}

/* start 4 */
.use-case-section {
  background-color: #fff;
  font-family: 'Poppins', sans-serif;
}

.usecase-title {
  font-size: 28px;
  font-weight: 600;
  color: #154785;
  margin-bottom: 25px;
}

.usecase-list {
  list-style: disc;
  padding-left: 20px;
  font-size: 16px;
  color: #333;
  line-height: 1.8;
}

.usecase-list li {
  margin-bottom: 10px;
}

.usecase-img {
  max-width: 100%;
  height: auto;
}

/* end 4 */

/* ..................
......................................
API end...........
.......................................
........................ */
/* ..................
......................................
privacy-policy start..........
.......................................
........................ */
.privacy {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #111;
  margin: 0;
  padding: 0;
}


.privacy .container {
  display: flex;
  justify-content: space-between;
  padding: 40px 60px;
  gap: 40px;
}

.privacy .policy-content {
  flex: 1;
  max-width: 700px;
}

.privacy .sidebar {
  flex-shrink: 0;
  width: 350px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  position: sticky;
  top: 40px;
  height: fit-content;
}

.privacy .toc-title {
  font-size: 22px;
  margin-bottom: 30px;
  margin-top: 20px;
}

.privacy .toc {
  list-style: none;
  padding-left: 0;
  font-size: 14px;
}

.privacy .toc li {
  margin-bottom: 8px;
}

.privacy .toc a {
  text-decoration: none;
  color: #257BD2;
  font-size: 17px;
  transition: all 0.2s ease;
}

.privacy .toc a:hover {
  text-decoration: underline;
}

.privacy .date {
  font-size: 18px;

}

.privacy h2 {
  font-size: 30px;
  margin-top: 40px;
  margin-bottom: 30px;
}
.policy-content h1{
  font-size: 30px;
   margin-top: 40px;
  margin-bottom: 30px;
}
.privacy .subheading {

  margin-bottom: 23px;
}

.privacy ul {
  margin-top: 10px;
  padding-left: 20px;
}

.privacy ul li {
  margin-bottom: 8px;
}

.privacy .contact-infos {
  list-style: none;
  padding-left: 0;
  font-size: 16px;
  margin-top: 20px;
}

.privacy .contact-infos li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.privacy .contact-infos i {
  margin-right: 10px;
  color: #257BD2;
  /* blue icon color - change to white if needed */
  font-size: 15px;
}

.privacy .contact-infos a {
  color: #111;
  text-decoration: none;
  transition: all 0.3s ease;
}

.privacy .contact-infos a:hover {
  text-decoration: underline;
}

.privacy h2[id] {
  scroll-margin-top: 100px;
  /* Adjust based on your sticky nav height */
}

/* Responsive */
@media screen and (max-width: 992px) {
  .privacy .container {
    flex-direction: column;
    padding: 20px;
  }

  .privacy .sidebar {
    order: -1;
    width: 100%;
    position: relative;
    top: auto;
    margin-top: 30px;
  }
}

/* ..................
......................................
privacy-policy end..........
.......................................
........................ */
/* ..................
......................................
term and condition start..........
.......................................
........................ */
.term {

  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #111;
  margin: 0;
  padding: 0;
}

.term .container {
  display: flex;
  justify-content: space-between;
  padding: 40px 60px;
  gap: 40px;
}

.term .content {
  flex: 3;
}

.term .toc {
  flex-shrink: 0;
  width: 350px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  position: sticky;
  top: 40px;
  height: fit-content;
}

.term .toc-title {
  font-size: 22px;
  margin-bottom: 30px;
  margin-top: 20px;
}


.term .toc a {
  display: block;
  margin-bottom: 8px;
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
}

.term .toc a:hover {
  text-decoration: underline;
}

.term p {
  /* font-size: 20px; */
}

.term .date {
  font-size: 18px;
}

.term h2 {
  font-size: 30px;
  margin-top: 40px;
  margin-bottom: 30px;
}

.term ul {
  padding-left: 20px;
}

.term ul li {
  margin-bottom: 6px;
}

.term a {
  color: #007bff;
  text-decoration: none;
}

.term a:hover {
  text-decoration: underline;
}

/* Contact Information Styles */
#contact-information {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #000;
}
.custom-submit button:hover{
background-color: #004b91;
color: white;
}
#contact-information+ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 40px;
}

#contact-information+ul li {
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
}

#contact-information+ul li i {
  color: blue;
  /* icon color */

  padding: 10px;
  font-size: 14px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 12px;
  margin-right: 10px;
  flex-shrink: 0;
}

#contact-information+ul li a {
  color: black;
  text-decoration: none;
  font-weight: 500;
}

#contact-information+ul li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 992px) {
  .term .toc {
    width: 100%;
    position: relative;
    top: auto;
    margin-top: 30px;
  }
}
.sidebar .toc a {
    color: #007BFF;
    text-decoration: none;
    cursor: pointer;
}
.sidebar .toc a:hover {
    text-decoration: underline;
}

/* ..................
......................................
term and condition end..........
.......................................
........................ */
/* ..................
......................................
faq start..........
.......................................
........................ */
.freq {
  font-family: Arial, sans-serif;
  margin: 40px auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 1140px;
}

.faq a {
  display: block;
  color: #007BFF;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer; /* 👈 makes it a hand cursor */
}
.faq-section {
  flex: 1;
}

.faq-section h2 {
  font-size: 20px;
  margin-top: 30px;
  font-weight: bold;
}
.faq-section h1{
  font-size: 20px;
  margin-top: 30px;
  font-weight: bold;
}

.faq-question {
  cursor: pointer;
  padding: 12px 0;
  position: relative;
  font-weight: 500;
  font-size: 17px;
  padding-left: 30px;
}

.faq-question::before {
  content: "+";
  color: #007BFF;

  position: absolute;
  font-size: 30px;
  font-weight: 100;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.faq-question.open::before {
  content: "-";
}

.faq-answer {
  display: none;
  padding: 10px 0 10px 30px;
  color: #555;
  font-size: 17px;
}

.faq {
  width: 220px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  position: sticky;
  top: 100px;
  background-color: #f9f9f9;
}

.faq h3 {
  margin-top: 0;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: bold;
}

.faq a {
  display: block;
  color: #007BFF;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
}

.faq a:hover {
  text-decoration: underline;
}


@media (max-width: 768px) {
  .freq {
    flex-direction: column;
    margin: 20px;
  }

  /* Move table of contents to top */
  .faq {
    order: -1;
    width: 100%;
    position: relative;
    top: auto;
  }
}
/* ..................
......................................
faq end..........
.......................................
........................ */
/* ..................
......................................
blog start..........
.......................................
........................ */

.blog-card-wrapper.hidden {
  display: none !important;
}

.search-bar {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 30px;
  overflow: hidden;
  max-width: 510px;
  width: 100%;
}

.search-bar input {
  flex: 1;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  outline: none;
}

.search-bar button {
  background: #000;
  color: #fff;
  border: none;
  padding: 13px 53px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 30px;
}

/*  */

.blog-tabs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.blog-tabs .tab {
  font-size: 14px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  color: #000;
  font-weight: 500;
}

.blog-tabs .tab.active {
  background: #000;
  color: #fff;
}

/*  */
.tab-wrapper {
  display: flex;
  gap: 99px;
  padding-bottom: 25px;
  padding-top: 21px;
}

.tab-btn {
  background: none;
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  color: #999;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
}

.tab-btn.active {
  color: #000;
  font-weight: 600;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}

.blog-card {


  overflow: hidden;

  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.blog-card:hover {

  transform: translateY(-4px);
}

.blog-image {
  position: relative;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
  display: block;
}

.blog-image .date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 20px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;

  /* Full-width background bar */
  background: rgba(0, 0, 0, 0.35);
  /* semi-transparent black */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 15px;
}



.blog-card h4 {
  font-size: 26px;
  font-weight: 700;
  margin: 25px 16px 8px;
  color: #000;
}

.blog-card p {
  font-size: 18px;
  color: #558;
  margin: 0 16px 20px;
  line-height: 1.5;
}



/* ..................
......................................
blog end..........
.......................................
........................ */
/* ..................
......................................
careers start..........
.......................................
........................ */
.job-section {

  margin: 0 auto;
  font-family: 'Segoe UI', sans-serif;
  padding: 40px 20px;
}

.job-section h3 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #333;
}

.job-card {
  border: 2px solid black;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 10px;
  position: relative;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.job-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.job-title {
  font-size: 25px;
  color: #10579F;
  font-weight: 500;
  margin-bottom: 12px;
}

.job-title span {
  color: #1a73e8;
}

.job-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.job-tags span {
  font-size: 15px;
  border: 1px solid;
  padding: 5px 17px;
  border-radius: 6px;
}

.job-desc {
  font-size: 17px;
  line-height: 1.4;
  margin-top: 30px;
}

.job-btn {
  position: absolute;
  right: 20px;
  top: 24px;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.job-btn:hover {
  background-color: #333;
}

/* ..................
......................................
careers end..........
.......................................
........................ */
/* ..................
......................................
services start..........
.......................................
........................ */
  
/* ..................
......................................
services end..........
.......................................
........................ */


/*  */
.contact-social ul{
      display: flex;
    list-style: none;
    gap: 10px;
    padding-left: 0;
    padding-top: 40px;
}
.contact-social ul li img{
  width: 40px;
}
.contact-form-check .form-check-input{
  width: unset;
    padding: 8px;
}
.contact-form-check label{
  font-size: 16px;
}

.privacy-pg{
  padding: 40px 0;
}
.privacy-pg-sec p{}
.privacy-pg-sec ol{
  padding-left: 0;
}
.privacy-pg-sec ol li{}
/*  */