.main-text {
  width: fit-content;
  padding-left: 10%;

  position: absolute;
  z-index: 998;
  top: 2rem;

  display: flex;
  flex-direction: column;
}

h1 {
  color: var(--l);
  background-color: var(--d);
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 0 30px 0 30px;
}

.details {
  width: 80%;
  
  background-color: var(--d);
  color: aliceblue;

  margin-top: 14rem;
  padding: 1rem;
  border-radius: 20px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}



/* small mobile */
/* @media (min-width: 320px) {
 
} */

/* m mobile */
@media (min-width: 375px) {
  .main-text p{
    color: aliceblue;
  }

}

/* l mobile */
/* @media (min-width: 425px) {
 
} */

/* xs */
@media (min-width: 475px) {
  h1 {
    font-size: 250%;
  }

  .details {
    

    gap: 2rem;
  }
}

/* sm */
/* @media (min-width: 640px) {

} */

/* m */
@media (min-width: 768px) {
  .details {
    gap: 5px;
  }

}

/* lg */
@media (min-width: 1024px) {
 .main-text {
  left: 50%;

  overflow: hidden;
 }

 .details {
  margin-top: 2rem;
  gap: 1rem;
 }

 h1{
  font-size: 350%;
 }

 .cta {
  font-size: 120%
 }

}

/* xl */
/* @media (min-width: 1280px) {
 
} */

/* 2xl */
/* @media (min-width: 1536px) {

} */