/* =========================================
   1. GLOBAL & LAYOUT
   ========================================= */
body {
    background-color: #2b2b2b; /* Dark Background */
    color: #ffffff;
}

.service-2025 {
    font-family: 'fontbook', sans-serif; /* Ensure fallback */
    margin-top: -120px; /* Keeps your existing offset */
    background-color: #2b2b2b;
    min-height: 100vh;
}

/* Width Constraint */
.content-all-wrapper {
    width: 85%;
    max-width: 1256px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* Typography Helpers */
.title-fonttype {
    font-weight: 600;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.content-fonttype {
    font-weight: 400;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: 0%;
    vertical-align: middle;

}

/* =========================================
   2. HEADER SECTION (Side-by-Side)
   ========================================= */
.header-service2025 {
    background-image: 
        url("../../../assets/img/slicingmobile/mobile/about/pattern.png"),
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url("../../../assets/img/service2025/header-service-2025.png");
    
    background-color: #1b1d1c;
    
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: top center, center, center;
    
    -webkit-background-size: auto, cover, cover;
    background-size: auto, cover, cover;

    position: relative;
    color: #ffffff;

    height: 400px;
}

.header-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 85%;
    max-width: 1256px;
    margin: 0 auto;
    gap: 10px;
    padding-top: 80px;
}

/* Header Left (Title) */
.header-left {
    flex: 0 0 calc(50% - 5px);
}

.header-title-s2025 {
    color: #B5BEBD;
    margin: 0;
    margin-bottom: 10px;
    text-align: left;
}

.header-subtitle-text {
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;

}

/* Header Right (Description) */
.header-right {
    flex: 0 0 calc(50% - 5px);
    max-width: 100%;
}

.header-desc-s2025 {
    color: #B5BEBD;
    margin: 0;
    text-align: left;
}

/* Section Label "WHAT WE OFFER" */
.section-label {
    margin: 0px;
    margin-bottom: 52px;
    color: #B5BEBD;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 48px;
    letter-spacing: 3px;

}

/* =========================================
   3. SERVICE LIST (New Layout)
   ========================================= */
.service-list-item {
    border-top: 1px solid #FFFFFF;
    padding: 27px 0;
    display: flex;
    justify-content: space-between;
    transition: background-color 0.3s ease;
}

.service-list-item:last-child {
    border-bottom: 1px solid #FFFFFF;
}

.service-left {
    width: 45%;
    align-content: center;
}

.service-title-link {
    text-decoration: none;
    color: #B5BEBD;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 24px;
    line-height: 48px;
    letter-spacing: 3px;
    text-transform: uppercase;

}

.service-title-link:hover {
    color: white;
    text-decoration: none;
}

/* Arrow Icon Animation */
.icon-wrap {
    width: 36px;
    height: 36px;
    stroke: #ffffff;
    transition: transform 0.3s ease;
}

.service-title-link:hover .icon-wrap {
    transform: translate(5px, -5px);
}

/* Right Side: List */
.service-right {
    width: 45%;
}

.sub-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-service-list li {
    color: #B5BEBD;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 38.4px;
    letter-spacing: 0px;
}

a:focus, a:hover {
    text-decoration: none;
    color:white;
}


/* =========================================
   4. RESPONSIVE MEDIA QUERIES
   ========================================= */
@media screen and (max-width: 992px) {
    .header-title-s2025 { font-size: 28px; }
    .header-right { flex: 0 0 400px; }
    .header-subtitle-text {
        font-size: 18px;
    }

    .content-fonttype {
        font-size: 12px;
    }
}

@media screen and (max-width: 699px) {
    /* Header Stacking */
    .header-service2025 { padding: 120px 0 60px; }
    
    .header-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-right { 
        flex: 1 1 auto;
        max-width: 100%; 
    }

    /* List Stacking */
    .service-list-item {
        flex-direction: column;
        gap: 16px;
        padding: 27px 0;
    }

    .service-left, .service-right {
        width: 100%;
    }

    .service-title-link {
        font-size: 18px;
        justify-content: space-between;
        color: #FFFFFF;
    }

    .content-all-wrapper {
        padding-top: 0px;
    }

    .header-content-wrapper{
        padding-top: 40px;
    }

    .section-label{
        margin-bottom: 24px;
        color: #FFFFFF;
    }

    .sub-service-list {
        list-style: disc;
        padding: 20px;
        margin: 0;
    }

    .sub-service-list li {
        color: #FFFFFF;
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;
        line-height: 25.6px;
        letter-spacing: 0px;
    }
}