* {
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
}
html {
  font-size: 62.5%;
}

.hero-section {
  display: flex;
  padding: 6rem 5rem;
  justify-content: space-between;
  gap: 5rem;
  background-color: #f4fbff;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.left-hero {
  width: 63%;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  box-sizing: border-box;
}
.hero-card {
  width: 15.5rem;
  border-radius: 2.6rem;
  border: none;
  box-shadow: 0rem 0.1rem 0.4rem 0rem #626262;
  background-color: #23a6f0;
  color: #fff;
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
  gap: 1rem;
  font-size: 1.6rem;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  padding: 1rem;
  /* line-height: 100%; */
  letter-spacing: 0.1rem;
  box-sizing: border-box;
}
.hero-content h1 {
  font: 700 3.6rem "Arial", sans-serif;
  padding-bottom: 2.8rem;
  color: #0a142f;
  /* line-height: 100%; */
  letter-spacing: 0;
}

.hero-content p {
  font: 400 2rem "Poppins", sans-serif;
  /* line-height: 3.3rem; */
  letter-spacing: 0.1rem;
  color: #0a142f;
  padding-top: 1rem;
}

.licensed-nd-insured {
  display: flex;
  gap: 2rem;
  font: 500 1.6rem "Inter", sans-serif;
  /* line-height: 100%; */
  letter-spacing: -0.06rem;
}
.licensed img {
  padding-right: 1rem;
}
.licensed,
.insured {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-hero-container {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  /* width: 35%%; */
  padding: 2rem 0;
}

.right-hero {
  background-color: #f0f0f0;
  border-radius: 50%;

  aspect-ratio: 1 / 1; 
  width: min(90vw, 50rem);

  /* width: 49.4rem;
  height: 49rem; */
  /* display: flex;
  justify-content: center;
  gap: 5rem;
  flex-shrink: 0;
  align-items: end; */
  position: relative;
  overflow: hidden;
}

.right-hero::before {
  content: "";
  position: absolute;

   inset: 0;
  /* bottom: 0;
  left: 50%;
  transform: translateX(-50%); */
  /* width: 49.4rem;
  height: 49rem; */
  background-color: #f0f0f0;
  border-radius: 50%;
  z-index: 0;
} 

/* .right-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 49.4rem;
  height: 49rem;
  border-radius: 50%;
  z-index: 3;
} */
.right-hero img {
  width: 49%;
  height: auto;
  /* width: 37.1rem;
  height: 40.441rem; */
  object-fit: contain;
  position: absolute;
}
.right-hero img:first-child {
  /* right: 10%; */
  bottom: 0;
  right: 15.5%;
  z-index: 1;
}
.right-hero img:nth-child(2) {
  z-index: 2;
  left:16%;
  /* right: 10%; */
  bottom: 0;
}

.get {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
}
.getit span {
    font: 500 1.5rem 'Inter', sans-serif;
    /* line-height: 100%; */
    letter-spacing: -0.06rem;
}
.get .hero-playstore, .get .hero-appstore {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #000;
    width: 18rem;
    height: 7rem;
    border-radius: 0.753rem;
    padding: 1.3rem 1.4rem;
    gap: 0.5rem;
    box-sizing: border-box;
}
.app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    font: 400 2rem 'Inter', sans-serif;
    /* line-height: 100%; */
    letter-spacing: -0.06rem;
    
}
.why-section {
  background-color: #f9f9f9;
  padding: 3rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 6rem;
}
.why-section p {
  text-align: center;
  font: 400 2.5rem "Poppins", sans-serif;
  /* line-height: 3.2rem; */
  letter-spacing: 0.098rem;
}
.why-section h1:first-child {
  text-align: center;
  font: 700 3.2rem "Arial", sans-serif;
  /* line-height: 3.3rem; */
  letter-spacing: 0.1rem;
  padding-top: 5rem;
}

.why-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3.4rem;
  margin: 0 0 0.1rem;
  /* max-width: 114.8rem; */
  width: 100%;
  padding-top: 2rem;
}

.why-box {
  flex: 1 1;
  background-color: #fff;
  min-width: 20rem;
  /* max-height: 35rem; */
  border-radius: 0.8rem;
  padding: 1.8rem;
  box-shadow: 0px 4px 5px 0px rgba(200, 200, 200, 0.25);
}
.why-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.why-content h1 {
  font: 700 2.8rem "Inter", sans-serif;
  color: #252b42;
  /* line-height: 100%; */
  letter-spacing: 0.008rem;
  padding-top: 1.5rem;
}
.why-content span {
  font: 400 2.5rem "Poppings", sans-serif;
  color: #737373;
  padding-bottom: 5rem;
  padding-top: 2.5rem;
  /* line-height: 100%; */
  letter-spacing: 0.015rem;
}
.why-img {
  background-color: rgba(210, 238, 255, 1);
  padding: 0.9rem;
  border-radius: 4.5rem;
}

.spend-anywhere {
  background-color: #f9fcff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5rem;
  padding: 5rem;
  box-sizing: border-box;
}
.spend {
  width: 100%;
  box-sizing: border-box;
}
.spend h1 {
  font: 700 3.2rem "Arial", sans-serif;
  /* line-height: 100%; */
  color: #000;
  letter-spacing: 0%;
}
.spend p {
  font: 400 2rem "Inter", sans-serif;
  color: #717171;
  /* line-height: 100%; */
  letter-spacing: 0%;
  padding-top: 2rem;
}
.flags {
  display: flex;
  width: 50%;
  margin-right: 5rem;
}
.flags img {
  width: 100%;
  
}
.how-sect h1 {
  text-align: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
  font: 700 3.2rem "Arial", sans-serif;
  /* line-height: 3.3rem; */
  letter-spacing: 0.1rem;
}
.how-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding: 0 5rem;
  min-width: 100%;
  box-sizing: border-box;
  padding-bottom: 6.7rem;
}
.left-how {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  /* gap: 5rem; */
  width: 50%;
  box-sizing: border-box;
}
.left-how h2 {
  font: 500 2.4rem "Poppins", sans-serif;
  /* line-height: 100%; */
  letter-spacing: 0.1rem;
}
.steps {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.ready a {
  text-decoration: none;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}
.step-content h3 {
  font: 700 2.2rem "Arial", sans-serif;
  /* line-height: 125%; */
  letter-spacing: 0%;
  padding-bottom: 1.5rem;
}
.step-content p {
  font: 500 1.8rem "Poppins", sans-serif;
  color: #737373;
  /* line-height: 2.2rem; */
  letter-spacing: 0.015rem;
}
.left-how button {
  width: 20rem;
  height: 5.6rem;
  padding: 0.59rem;
  border: none;
  border-radius: 2.6rem;
  background-color: #007ecc;
  color: #e3eefff5;
  font: 700 2rem "Arial", sans-serif;
  /* line-height: 100%; */
  letter-spacing: 0.012rem;
}
.right-how {
  background-color: rgba(0, 91, 151, 1);
  /* height: 43rem; */
  width: 45%;
  padding-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  box-sizing: border-box;
}


.ready {
  background-image: url(../images/image\ 97.png);
  background-color: #007ecc;
  width: 100%;
  height: 21rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.ready h1 {
  font: 500 2.02rem "Poppins", sans-serif;
  color: #fff;
  /* line-height: 150%; */
  letter-spacing: 0%;
  text-align: center;
}
.ready button {
  background-color: #005b97;
  color: #e3eefff5;
  font: 700 2rem "Arial", sans-serif;
  letter-spacing: 0.012rem;
  /* line-height: 100%; */
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.59rem;
}
@media (max-width: 63rem) {
  .hero-section {
    flex-direction: column;
  }
  .left-hero {
    width: 100%;
    align-items: center;
  }
  .left-hero h1 {
    text-align: center;
  }
  .right-hero {
    margin: 0 auto;
  }

  .right-hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 50rem) {
  .spend-anywhere {
    flex-direction: column;
  }
 .spend {
    width: 100%;
  }
  .flags {
   width: 100%;
  }
  .how-container {
        flex-direction: column;
    }
  .left-how, .right-how {
        width: 100%;
    }
}

@media (max-width: 40rem) {
  .why-container {
    flex-direction: column;
  }
 /* .right-hero img {
    width: 80%;
  } */
  /* .right-hero {
    width: 90%;
    height: 45rem;
  }
  .right-hero img {
    width: 70%;
  } */
}
@media (max-width: 35rem) {
   .right-how {
    width: 100%;
  }
  .right-how img {
    width: 55%;
  }
}
@media (max-width: 30rem) {
    body h1, body p, .escrow-usecases-top p {
        text-align: center;
    }
   .why-box h1, .why-box span,
    .escrow-col-container h2, .escrow-col-container p,
    .left-how h1, .left-how p, .app p {
        text-align: start;
    }
    .btn {
        margin: 0 auto;
    }
}

@media (max-width: 24.5rem) {
  .get .hero-playstore, .get .hero-appstore {
    width: 15rem;
    height: 9rem;
  }
}
@media (max-width:24rem) {
  .licensed p, .insured p {
    font-size: 1.3rem;
  }
}

.fade-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/*  Reusable zoom keyframes */
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*  Active state triggers the animation */
.fade-zoom.active {
  animation: zoom 1s forwards;
}

/*  Optional stagger (if you have multiple items in a row) */
.fade-zoom:nth-child(1).active { animation-delay: 0.2s; }
.fade-zoom:nth-child(2).active { animation-delay: 0.4s; }
.fade-zoom:nth-child(3).active { animation-delay: 0.6s; }
.fade-zoom:nth-child(4).active { animation-delay: 0.8s; }

.slide-left,
.slide-right,
.slide-up {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* starting positions */
.slide-left  { transform: translateX(-30px); }
.slide-right { transform: translateX(30px);  }
.slide-up    { transform: translateY(30px);  }

/* active states (explicit translateX/Y for clarity) */
.slide-left.active  { opacity: 1; transform: translateX(0); }
.slide-right.active { opacity: 1; transform: translateX(0); }
.slide-up.active    { opacity: 1; transform: translateY(0); }

/* STAGGER: use .stagger-child on the elements you want staggered */
.stagger .stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* when parent gets .active, children will animate in (with JS-applied delays) */
.stagger.active .stagger-child {
  opacity: 1;
  transform: translateY(0);
}

body p, .why-content span {
    font-size: 1.8rem!important;
}