/* ============================================
   SERVICES PAGE STYLES
   ============================================ */

/* ============================================
   SERVICES HERO SECTION
   ============================================ */

.services-hero {
    position: relative;
    height: 650px;
    display: flex;
    align-items: end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 32px 0;
}

.services-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.services-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.services-hero__title {
    max-width: 100%;
}

.services-hero__title span {
    font-style: italic;
}

.services-hero__description {
    max-width: 688px;
}


/* ============================================
   SERVICES DIRECTIONS SECTION
   ============================================ */

.directions--services {
    background: #fff;
}

.directions--services .directions__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.directions--services .directions__item:hover {
    border-bottom-color: rgba(71, 120, 245, 0.3);
}



.directions--services .directions__item:first-child:hover {
    border-top-color: rgba(71, 120, 245, 0.3);
}

.directions--services .directions__item-title {
    color: #0b0c0e;
}

.directions--services .directions__item-text {
    color: #0b0c0e;
}

.directions--services .directions__item:hover .directions__item-title {
    color: #4778f5;
}

.directions--services .directions__item:hover .directions__item-text {
    color: #4778f5;
}

.directions--services .directions__item-arrow {
    color: #0b0c0e;
}

.directions--services .directions__item:hover .directions__item-arrow {
    color: #4778f5;
}

.directions--services .directions__item-title {
    max-width: 493px;
    width: 100%;
}

/* Last visible item - remove border-bottom */
.directions__item--last-visible {
    border-bottom: none !important;
}

/* Show All Services Button */
.directions__show-all {
    display: none;
    justify-content: center;
    padding-top: 40px;
}

.directions__show-all--visible {
    display: flex;
}

.directions__show-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Actay Wide', sans-serif;
    font-style: italic;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    text-decoration: none;
    color: #0B0C0E;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
    width: 100%;
    max-width: 1376px;
    height: 51px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.directions__show-all-btn:hover {
    background-color: #0B0C0E;
    color: #fff;
}

/* Hidden service items */
.directions__item--hidden {
    display: none;
}

/* ============================================
   MEDIA QUERIES
   ============================================ */

/* Tablet - Large (1310px - 1200px) */
@media (max-width: 1310px) {
    .services-hero {
        width: 100%;
        height: 700px;
    }
}

/* Tablet - Medium (1200px - 1100px) */
@media (max-width: 1200px) {
    .services-hero {
        height: 650px;
        padding: 60px 0;
    }
}

/* Tablet - Small (1100px - 900px) */
@media (max-width: 1100px) {
    .services-hero {
        height: 600px;
        padding: 50px 0;
    }
}

/* Mobile (≤900px) */
@media (max-width: 900px) {
    .services-hero {
        height: 550px;
        padding: 40px 0;
    }
}

/* Mobile - Small (≤600px) */
@media (max-width: 600px) {
    .services-hero {
        height: 500px;
        padding: 32px 0;
    }
}

/* Mobile - Extra Small (≤400px) */
@media (max-width: 400px) {
    .services-hero {
        height: 450px;
        padding: 28px 0;
    }
}