@import "tailwindcss";

:root {
  --mainColor: #34c0b8;
  --secondaryColor: #fb6645;
  --textMainColor: #fff;
  --textColor: #000;
  --lowOpacityText: rgb(74, 74, 74);
  --darkText: #000;
}
@layer base {
  .button {
    @apply border border-black hover:bg-black hover:text-white transition duration-75 cursor-pointer py-2 px-11 rounded-xs;
  }

  /* Helper classes */
  .flex-row-center {
    @apply flex justify-center items-center;
  }

  .flex-col-center {
    @apply flex flex-col justify-center items-center;
  }

  /*.container {*/
  /*  @apply mx-auto md:px-16 p-4;*/
  /*}*/

  /* fixed container screen for all devices */
  /*@media screen and (width<1366px) {*/
  /*  .container {*/
  /*    @apply max-w-none;*/
  /*  }*/
  /*}*/

  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.9rem;
    padding-right: 0.9rem;

    /* Breakpoints */
    @media (min-width: 40rem) { /* 640px */
      max-width: 40rem;
    }

    @media (min-width: 48rem) { /* 768px */
      max-width: 48rem;
    }

    @media (min-width: 64rem) { /* 1024px */
      max-width: 64rem;
    }

    @media (min-width: 80rem) { /* 1280px */
      max-width: 80rem;
    }

    @media (min-width: 96rem) { /* 1536px */
      max-width: 96rem;
    }
  }

  .nav__item {
    @apply relative flex;
  }

  .nav__link {
    @apply flex items-center justify-center;
  }
  .nav__link svg {
    @apply inline w-5 h-5 transform transition-transform duration-300 group-hover:rotate-180;
  }

  /* My styles */

  .nav__submenu {
    visibility: hidden;
    opacity: 0;
    transition: all 150ms ease-in;
    transition-duration: 150ms;
  }

  .nav__item--has-submenu:hover .nav__submenu {
    visibility: visible;
    opacity: 1;
  }

  .h1TitlesTextSize {
    @apply text-start md:text-4xl text-3xl font-bold;
  }

  ul{
    @apply pl-3 list-inside
  }

  .titlesTextSize {
    @apply text-start md:text-3xl text-2xl;
  }

  .otherTextSize {
    @apply text-[20px] text-justify;
  }

  .linksStyle {
    @apply font-medium text-[var(--darkText)];
  }
  .largeOtherTextSize {
    @apply md:text-2xl text-lg;
  }

  .window {
    @apply opacity-0 pointer-events-none transition-all fixed z-10 left-0 top-0 w-full h-full bg-[rgba(0,_0,_0,_.4)];
  }

  .window:not(.active) {
    @apply delay-150;
  }

  .window > div {
    @apply transition-all;
  }

  .window.active {
    @apply flex opacity-100 pointer-events-auto;
  }

  .window.active > div {
    @apply translate-x-0 delay-150;
  }

  .menuBg {
    @apply bg-white;
  }

  .lowOpacityText {
    @apply text-[var(--lowOpacityText)];
  }
  .darkText {
    @apply text-[var(--darkText)];
  }

  .headerMaxWidth {
    @apply max-w-[1336px] mx-auto;
  }
  .sectionTextType {
    @apply shadow p-11 bg-white;
  }
}

body {
  background: rgb(245, 245, 245);
}
p {
  text-align: justify;
  font-size: 18px;
}
button {
  @apply cursor-pointer;
}

ul li a {
  @apply hover:text-black transition-colors;
}

input {
  @apply outline-none;
}

.searchBtn {
  background-color: #fcfeff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.2s ease;
}

.searchBtn:hover {
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: scale(1.05);
  cursor: pointer;
}