.product-detail {
  @apply w-full ;

  &__hero-container{
    @apply bg-primary-100 pt-36 lg:pt-40 mb-12 lg:mb-20;
  }

  &__hero-contain{
    @apply grid grid-cols-1  lg:grid-cols-2 items-center gap-16 lg:gap-y-3 lg:gap-x-16 pb-7 container;
  }

  &__hero-title{
    @apply lg:col-start-2 lg:order-2 lg:col-end-3 lg:row-start-1 lg:row-end-2;
  }
  
  &__title{
    @apply text-3xl  font-sans-poppins text-primary-300 font-semibold;
  }

  &__container-img{
    @apply  rounded-none lg:order-1 lg:row-start-1 lg:row-end-3 bg-primary-200;
  }

  &__img{
    @apply w-full h-full;
  }

  &__container-contain{
    @apply flex lg:order-3 lg:col-start-2  lg:col-end-3 lg:row-start-2 lg:row-end-3   flex-col items-start p-0  gap-7;
  }

  &__description{
    @apply text-primary-300 font-sans-poppins font-bold;
  }

  &__description + p{
    @apply font-sans-Anek;
  }

  &__form{
    @apply mt-4 flex flex-col gap-7;
  }

  &__label{
    @apply text-primary-300 font-sans-poppins font-bold;
  }

  &__label+p{
    @apply font-sans-Anek font-semibold;
  }

  &__container-input{
    @apply mb-4;
  }

  &__label{
    @apply block mb-2 text-primary-300 font-bold;
  }

  &__label+input{
    @apply p-3 px-5 py-2 rounded-3xl border-2 border-primary-400;
  }


  &__container-swiper{
    @apply mb-16 container;
  }

  
  &__title-swiper{
    @apply text-center font-sans-poppins text-primary-300 font-bold text-2xl  lg:text-3xl;
  }
  
  &__btn-swiper{
    @apply  m-auto px-10 py-3 font-bold font-sans-poppins rounded-full flex gap-4  text-white bg-primary-300 hover:scale-[1.1];
  }

  &__container-slide{
    @apply flex flex-col justify-center p-5 gap-5 h-full;
  }

  &__container-subtitle{
    @apply text-start;
  }

  &__subtitle{
    @apply font-semibold text-xl font-sans-poppins;
  }

}