/* services  */
.services { padding: 90px 0; }

.services .services-wrapper { text-align: center; }

.services .services-main { margin-top: 40px; display: flex; gap: 20px; flex-wrap: wrap; }

.services .services-item { width: calc(50% - 10px); position: relative; cursor: pointer; }

.services .services-item-name { margin: 0; color: var(--color-white); margin-bottom: 6px; }

.services .services-item-details { text-align: left; padding: 50px; width: 100%; position: absolute; bottom: 0; color: #FFf; }

.services .services-item-img { width: 100%;height: 500px;object-fit: cover;border-radius: 10px; }

.services .services-item::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 41.69%, rgba(0, 0, 0, 0.5) 77.5%); border-radius: 10px; transition: all 0.5s; }

.services .services-item:hover .services-item-name { color: var(--color-red); }

.services .services-item .services-item-name::after { content: ''; width: 0px; height: 2px; background-color: var(--color-red); display: inline-block; margin-bottom: 10px; margin-left: 7px; transition: all 0.5s; }

.services .services-item:hover .services-item-name::after { width: 80px; }

.services .services-item:hover::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%); }
.services  .services-title {
    max-width: 821px;
    margin: 0 auto;
}
@media (max-width:1280px) {
    .services .services-item-details { padding: 20px; }
}

@media (max-width:992px){
    .services { padding: 50px 0; }
    .services .services-main { margin-top: 30px; }
}
@media (max-width:767px) {
    .services .services-main { flex-direction: column; }
    .services .services-item { width: 100%; }
   
}
@media (max-width:575px) {
    .services .services-item-details { padding: 10px; }
}
/* services  */