@import "tailwindcss";

@theme {
  --color-brand: #fe5c45;
}


.bg-black {
    background-color: #0f0f0f;
}

.font-arial {
    font-family:"Arial", sans-serif;
}






/* меню анимация бургера */
#burgerBtn .burger-line {
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* легкое оживление при наведении */
#burgerBtn:hover .burger-line {
    background-color: #fe5c45; /* например brand цвет */
}

/* активное состояние */
#burgerBtn.active .top-line {
    transform: translateY(10px) rotate(45deg);
}

#burgerBtn.active .middle-line {
    opacity: 0;
}

#burgerBtn.active .bottom-line {
    transform: translateY(-10px) rotate(-45deg);
}
/* конец */




/* Услуги */

/* Большой размер карточек */
.service-card-1 {
    clip-path: polygon(0px 0px, 100% 0px, 100% 90%, 0px 100%);
}

.service-card-2 {
    clip-path: polygon(0px 10%, 100% 0px, 100% 100%, 0px 90%);
}

.service-card-3 {
    clip-path: polygon(0px 0px, 100% 10%, 100% 90%, 0px 100%);
}

.service-card-4 {
    clip-path: polygon(0px 10%, 100% 0px, 100% 100%, 0px 100%);
}

/* Малый размер карточек */
@media (max-width: 768px) {
    .service-card-1 {
        clip-path: polygon(0px 0px, 100% 0px, 100% 95%, 0px 100%);
    }

    .service-card-2 {
        clip-path: polygon(0px 5%, 100% 0px, 100% 95%, 0px 100%);
    }

    .service-card-3 {
        clip-path: polygon(0px 5%, 100% 0px, 100% 95%, 0px 100%);
    }

    .service-card-4 {
        clip-path: polygon(0px 5%, 100% 0px, 100% 100%, 0px 100%);
    }
}




/* Планы помещений */

/* карты */

   .project-card {
      transform-origin: center center;
    }

    .project-card:hover {
      transform: rotate(-2deg);
      box-shadow: 30px 30px 0 0 #00000040;
    }

    .project-card:hover .project-card-inner {
      background: #FF7562;
      border-color: #FF7562;
    }

    .project-card:hover .project-card-bottom {
      background: #FF7562;
    }

    .project-card:hover .project-card-image {
      transform: scale(1.1);
    }

    .project-card:hover .project-card-badge {
      background: #ffffff;
      color: #FF7562;
      border-color: transparent;
      opacity: 1;
      transform: translateX(0);
    }

    .project-card.is-active {
      transform: rotate(-2deg);
      box-shadow: 30px 30px 0 0 #00000040;
    }

    .project-card.is-active .project-card-inner {
      background: #FF7562;
      border-color: #FF7562;
    }

    .project-card.is-active .project-card-bottom {
      background: #FF7562;
    }

    .project-card.is-active .project-card-image {
      transform: scale(1.1);
    }

    .project-card.is-active .project-card-badge {
      background: #ffffff;
      color: #FF7562;
      border-color: transparent;
      opacity: 1;
      transform: translateX(0);
    }

    body.modal-open {
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .project-card:hover {
        transform: none;
        box-shadow: 15px 15px 0 0 #00000026;
      }
    }

/* Горизонтальное расположение карт проектов для телефона */

  @media (max-height: 430px) and (orientation: landscape) {
    #plans-sticky {
      height: 68vh;
      top: 2vh;
    }

    #plans-track {
      padding-bottom: 0 !important;
      gap: 1rem !important;
    }

#plans-track .project-card {
  width: 220px !important;
  height: 246px !important;
}

    #plans-track .project-card-inner > div:first-child {
      height: 138px !important;
    }

    #plans-track .project-card-bottom {
      height: 92px !important;
      padding: 0.5rem 0.65rem !important;
    }

    #plans-track .project-card-bottom h3 {
      font-size: 1.05rem !important;
      margin-bottom: 0.2rem !important;
      line-height: 1 !important;
    }

    #plans-track .project-card-bottom p {
      font-size: 0.72rem !important;
      line-height: 1.05 !important;
      margin-bottom: 0 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    #plans-track .project-card-badge {
      top: 0.35rem !important;
      right: 0.45rem !important;
      padding: 0.2rem 0.35rem !important;
      font-size: 0.7rem !important;
    }
  }

  /* Изменение карточек для супер не малого разрешение */

   @media (max-width: 360px) and (max-height: 520px) and (orientation: portrait) {
    .project-card-mobile-fix {
      width: 290px !important;
      height: 360px !important;
    }

    .project-card-mobile-fix .project-card-inner > div:first-child {
      height: 220px !important;
    }

    .project-card-mobile-fix .project-card-bottom {
      height: 140px !important;
      padding: 0.75rem !important;
    }

    .project-card-mobile-fix .project-card-bottom h3 {
      font-size: 1rem !important;
      margin-bottom: 0.35rem !important;
      line-height: 1 !important;
    }

    .project-card-mobile-fix .project-card-bottom p {
      font-size: 0.82rem !important;
      line-height: 1.15 !important;
      margin-bottom: 0 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
  }