/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Oct 02 2025 | 07:00:31 */

@media (min-width: 1024px) {
  .TitleCase, .DescripCase, .ButtomCase {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden; 
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2; /* Элементы должны быть поверх фона */
  }

  .CaseBlock {
    position: relative; /* Для корректного позиционирования псевдоэлемента */
  }

  /* Псевдоэлемент для затемнения фона */
  .CaseBlock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Изначально фон прозрачный */
    transition: background-color 0.4s ease;
    z-index: 1; /* Фон будет под элементами */
  }

  /* Когда ховерим на CaseBlock, затемняем только фон */
  .CaseBlock:hover::after {
    background-color: rgba(0, 0, 0, 0.5); /* Затемняем фон на 50% */
  }

  /* Показываем элементы на ховере */
  .CaseBlock:hover .TitleCase,
  .CaseBlock:hover .DescripCase,
  .CaseBlock:hover .ButtomCase {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}




@media (max-width: 1023px) {
  .CaseBlock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Изначально фон прозрачный */
    
    z-index: 1; /* Фон будет под элементами */
  }
  
  .TitleCase, .DescripCase, .ButtomCase {
    
    z-index: 2; /* Элементы должны быть поверх фона */
  }
}


@media (max-width: 767px) {
/*прокрутка на мобілних*/
.ProjectTrack  {    
   overflow: auto;
   
  }
 
}