.hero-section {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap-reverse;
   gap: 1rem;
   padding-top: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
   padding-inline: var(--padding-inline);
   padding-bottom: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
   overflow: hidden;
}

.hero-text-container {
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 2rem;
   text-align: center;
}

.hero-title {
   color: var(--title-color);
   font-size: clamp(1.75rem, 1.3627rem + 1.6526vw, 2.85rem);
   font-family: var(--ff-heading);
}

.hero-text-desc {
   color: var(--text-color);
   font-size: clamp(1.097rem, 1.0783rem + 0.0796vw, 1.15rem);
   max-width: 50rem;
   letter-spacing: .02rem;
}

.hero-btn {
   background-color: var(--btn-bg);
   border: .7px solid transparent;
   border-radius: var(--btn-border-radius);
   color: var(--white-color);
   padding: .55rem .8rem;
}

.hero-btn i {
   font-size: .97rem;
   margin-left: .2rem;
}

.hero-image {
   background-color: var(--white-color);
   box-shadow: 0 2.5px 20px 0 rgba(0 0 0 / .06);
   border: .7px solid rgba(0 0 0/ .08);
   height: clamp(26rem, 23.7113rem + 9.7653vw, 32.5rem);
   width: clamp(22rem, 20.2394rem + 7.5117vw, 27rem);
   border-radius: 1.5rem;
   object-fit: cover;
   padding: .5rem;
}


/* Large devices */
/* breakpoint 1350px media query */
@media screen and (min-width: 84.375em) {
   .hero-section {
      justify-content: space-between;
      flex-wrap: nowrap;
   }

   .hero-text-container {
      text-align: initial;
      max-width: 37.5rem;
   }

   .hero-btn {
      align-self: flex-start;
   }
}


/* Large devices */
/* breakpoint 1380px media query */
@media screen and (min-width: 86.25em) {
   .hero-text-container {
      max-width: 43rem;
   }
}