.directions {
  padding: 60px 0 100px;
}

.directions-slider {
  margin-top: 40px;
}

.swiper-slide .outline-btn{
  cursor: pointer;
  padding:0;
}

.swiper-slide .outline-btn a{
    text-align:center;
    padding:21px 40px;

}


.directions-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.directions-item {
  background: var(--main);
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #011627;
  transition: all 0.3s ease;
  cursor: pointer;
}

.directions-item .order-btn {
  background: transparent;
  border: 1px solid var(--active-color);
}

.directions-item:hover {
  box-shadow: 0px 0px 5px 4px rgba(40, 198, 177, 0.1);
}

.directions-item:hover .order-btn {
  animation: colorSwitch 5s infinite linear;
}


.directions-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.directions-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  min-height: 208px;
  max-height: 226px;
}

.directions-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.directions-icon-cover svg {
  width: 42px;
  height: 42px;
}

.directions-icon-cover {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(1px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.directions-content {
  padding: 30px;
  gap: 30px;
}

.directions-title-cover {
  gap: 20px;
}

.directions-title-cover svg{
    width:24px;
    height:21px;
}


.directions-title {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
}

.order-btn {
  display: block;
  width: 100%;
}

.directions-slider button {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 47px;
  background: transparent;
  scroll-snap-align: start;
}

.selected {
  background: var(--active-color) !important;
  color: #fff;
}

.directions-item:hover .marker{
  animation: movePath 3s linear forwards;
}

.directions-icon-cover svg{
    overflow: visible;
}




@keyframes colorSwitch {
    0%,
    100% {
      background: transparent;
    }
    50% {
      background: var(--active-color);
    }
  }
  
  @keyframes movePath {
      0% {
        transform: translate(0.3%, 0%);
      }
      40% {
        transform: translate(-41.7%, 16%);
      }
      50% {
        transform: translate(-33.7%, 37%);
      }
      100% {
        transform: translate(-78.7%, 60%);
      }
    }

@media screen and (min-width: 768px) {
  .directions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .directions-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  .directions {
    padding: 80px 0 120px;
  }


  .directions-slider {
    margin-top: 60px;
  }
}


@media screen and (min-width:1200px){
    
  .directions-title {
    font-size: 18px;
  }
}