@tailwind base;
@tailwind components;
@tailwind utilities;



@layer components {
  .btn {
    @apply font-semibold text-xl;
  }

  .btn-blue {
    @apply bg-blue text-white pl-10 pr-10 p-6 mt-3 mb-3;
  }
  
  .btn-cta {
    @apply bg-blue text-white text-left;
  }

  .gallery-item {
    @apply block bg-cover bg-blue w-full pb-64 sm:w-6/12 md:w-4/12 md:pb-56 lg:w-3/12 lg:h-52 xl:w-4/12  xl:pb-80 2xl:pb-96  border-8 border-white cursor-pointer transition transform hover:opacity-90;
  }
}

@layer utilities {
  .feature-box {
    @apply border-l-2;

    &::before {
      content: '';
      width: 45%;
      height: 2px;
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      @apply sm:hidden bg-white 
    }
  }

  .swiper-container {
    @apply xl:h-930
  }

  .swiper-button-next:after {
    display: none;
  }

  .recent-realizations-item {
    @apply flex flex-col bg-cover w-full pb-64 sm:w-6/12 md:w-1/3 md:pb-56 lg:w-1/3 lg:pb-80 xl:w-4/12 xl:pb-80 2xl:pb-96 border-8 border-white relative hover:opacity-90 mb-14;

    p {
      opacity: 0;
    }

    &:hover {
      p {
        opacity: 1;
      }
    }
  }

}


.page-template-default {

  h2 {
    @apply mb-7 mt-7;
  }

  ul, ol {
    @apply list-disc mb-7
  }

  li {
    @apply ml-7
  }
}
