.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 3rem 20rem;
}
@media (max-width:768px) {
    .hero{
        padding: 3rem 1rem;
    }
}
@media (min-width: 768px) {
  .hero {
    grid-template-columns: 1fr 1fr;
      }
}
.hero__img img {
  max-width: 80%;
  border: 1px dashed #93c5fd;
  border-radius: 90px 90px 0px 90px ;
  display: block;
}
.hero__title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.hero__subtitle {
  display: inline-block;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 0.5rem;
}
.hero__text {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.hero__cta {
  background-color: #1e40af;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
}
.hero__cta:hover {
  background-color: #1e3a8a;
}