/* =========================================================
   PT DIRATAMA MAPAN SEJAHTERA
   SERVICES PAGE
   FINAL REVISION
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.services-page-hero {

    position:
        relative;

    width:
        100%;

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    background:
        var(--navy);

    padding-top:
        80px;

    overflow:
        hidden;

}


.services-hero-bg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    z-index:
        1;

}


.services-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                6,
                25,
                48,
                0.94
            ) 0%,
            rgba(
                6,
                25,
                48,
                0.78
            ) 55%,
            rgba(
                6,
                25,
                48,
                0.42
            ) 100%
        );

    z-index:
        2;

}


.services-hero-container {

    position:
        relative;

    z-index:
        10;

    max-width:
        1300px;

    width:
        100%;

    margin:
        0 auto;

    padding:
        80px 5% 90px;

    display:
        flex;

    align-items:
        center;

}


.services-hero-content {

    max-width:
        700px;

}


.services-title {

    font-family:
        var(--font-heading);

    font-size:
        3.7rem;

    font-weight:
        800;

    color:
        var(--white);

    line-height:
        1.12;

    margin:
        0 0 20px;

}


.services-title .highlight {

    color:
        var(--yellow);

}


.services-desc {

    color:
        #E5E7EB;

    font-size:
        1.05rem;

    line-height:
        1.7;

    max-width:
        650px;

    margin:
        0 0 30px;

}


.services-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #D1D5DB;

    font-size:
        0.9rem;

}


.services-breadcrumb a {

    color:
        #D1D5DB;

    text-decoration:
        none;

}


.services-breadcrumb a:hover {

    color:
        var(--white);

}


.services-breadcrumb span {

    color:
        var(--yellow);

}


.services-breadcrumb
.material-symbols-outlined {

    font-size:
        1.1rem;

}



/* =========================================================
   SERVICE DETAIL
   ========================================================= */

.services-detail-section {

    width:
        100%;

    background:
        var(--white);

}


.service-row {

    display:
        flex;

    align-items:
        stretch;

    gap:
        70px;

    padding:
        95px 7%;

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--white);

}


.service-row.bg-gray-light {

    background:
        #F7F9FB;

    border-top:
        1px solid
        #EFF1F4;

    border-bottom:
        1px solid
        #EFF1F4;

}


.reverse-row {

    flex-direction:
        row-reverse;

}


/* =========================================================
   WATERMARK
   ========================================================= */

.service-watermark-num {

    position:
        absolute;

    font-family:
        var(--font-heading);

    font-size:
        18rem;

    font-weight:
        800;

    color:
        rgba(
            0,
            0,
            0,
            0.035
        );

    line-height:
        1;

    z-index:
        1;

    top:
        35px;

    pointer-events:
        none;

}


.right-watermark {

    right:
        5%;

}


.left-watermark {

    left:
        5%;

}


.vertical-faint-text {

    position:
        absolute;

    top:
        120px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(
            180deg
        );

    font-family:
        var(--font-heading);

    font-size:
        0.7rem;

    font-weight:
        700;

    color:
        rgba(
            0,
            0,
            0,
            0.09
        );

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    z-index:
        1;

}


.text-right-pos {

    right:
        2%;

}


.text-left-pos {

    left:
        2%;

}



/* =========================================================
   IMAGE
   ========================================================= */

.service-col-img {

    flex:
        1;

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

}


.service-img-box {

    position:
        relative;

    width:
        100%;

    max-width:
        560px;

    border-radius:
        4px;

    overflow:
        hidden;

    box-shadow:
        0
        20px
        40px
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.service-img-box img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

}


.service-img-overlay {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    background:
        rgba(
            11,
            37,
            69,
            0.95
        );

    padding:
        22px 26px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.overlay-icon {

    color:
        var(--white);

    font-size:
        2.4rem;

    flex-shrink:
        0;

}


.overlay-text {

    display:
        flex;

    flex-direction:
        column;

}


.overlay-text .title {

    color:
        var(--white);

    font-size:
        0.95rem;

    font-weight:
        700;

    line-height:
        1.35;

}


.overlay-text .desc {

    color:
        var(--yellow);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    margin-top:
        3px;

}



/* =========================================================
   TEXT
   ========================================================= */

.service-col-text {

    flex:
        1.2;

    min-width:
        0;

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.service-badge-v2 {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        18px;

}


.badge-num {

    background:
        var(--yellow);

    color:
        var(--navy);

    font-family:
        var(--font-heading);

    font-size:
        1rem;

    font-weight:
        800;

    padding:
        6px 11px;

    border-radius:
        4px;

}


.badge-text {

    font-family:
        var(--font-heading);

    font-size:
        0.8rem;

    font-weight:
        700;

    color:
        var(--navy);

    letter-spacing:
        1.5px;

}


.service-heading {

    font-family:
        var(--font-heading);

    font-size:
        2.45rem;

    font-weight:
        800;

    color:
        var(--navy);

    line-height:
        1.18;

    margin:
        0 0 18px;

}


.service-heading .highlight {

    color:
        var(--yellow);

}


.service-paragraph {

    color:
        #4B5563;

    font-size:
        1rem;

    line-height:
        1.75;

    margin:
        0 0 25px;

}


.service-subheading {

    color:
        var(--navy);

    font-size:
        1rem;

    font-weight:
        700;

    margin:
        0 0 14px;

}


.service-check-list {

    list-style:
        none;

    padding:
        0;

    margin:
        0 0 35px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.service-check-list li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        #4B5563;

    font-size:
        0.93rem;

    line-height:
        1.45;

}


.check-icon-solid {

    color:
        var(--yellow);

    font-size:
        1.25rem;

    flex:
        0 0 auto;

    margin-top:
        1px;

    font-variation-settings:
        'FILL' 1;

}



/* =========================================================
   BUTTON
   ========================================================= */

.btn-outline-action {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    width:
        fit-content;

    padding:
        12px 20px;

    border:
        1px solid
        var(--navy);

    color:
        var(--navy);

    background:
        transparent;

    font-size:
        0.9rem;

    font-weight:
        600;

    text-decoration:
        none;

    border-radius:
        4px;

    transition:
        all
        0.3s ease;

}


.btn-outline-action:hover {

    background:
        var(--navy);

    color:
        var(--white);

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0
        8px
        20px
        rgba(
            11,
            37,
            69,
            0.15
        );

}


.btn-outline-action
.material-symbols-outlined {

    font-size:
        1.1rem;

    transition:
        transform
        0.3s ease;

}


.btn-outline-action:hover
.material-symbols-outlined {

    transform:
        translateX(
            4px
        );

}



/* =========================================================
   FINAL CTA
   ========================================================= */

.services-cta-final {

    position:
        relative;

    width:
        100%;

    min-height:
        430px;

    background:
        #061930;

    padding:
        85px 5%;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

}


.srv-cta-bg {

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        52%;

    height:
        100%;

    background-size:
        cover;

    background-position:
        center;

    clip-path:
        polygon(
            18% 0,
            100% 0,
            100% 100%,
            0 100%
        );

    z-index:
        1;

    opacity:
        0.9;

}


.srv-cta-container {

    position:
        relative;

    z-index:
        10;

    max-width:
        1300px;

    width:
        100%;

    margin:
        0 auto;

}


.srv-cta-content {

    max-width:
        720px;

}


.srv-cta-title {

    font-family:
        var(--font-heading);

    font-size:
        3rem;

    font-weight:
        800;

    color:
        var(--white);

    line-height:
        1.2;

    margin:
        0 0 18px;

}


.srv-cta-desc {

    color:
        #D1D5DB;

    font-size:
        1.05rem;

    line-height:
        1.6;

    margin:
        0 0 30px;

}


.srv-btn-yellow {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        15px 28px;

    background:
        var(--yellow);

    color:
        var(--navy);

    border:
        none;

    border-radius:
        4px;

    font-size:
        1rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        0.3s ease;

}


.srv-btn-yellow:hover {

    background:
        #E6B000;

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0
        8px
        20px
        rgba(
            251,
            192,
            45,
            0.25
        );

}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 1024px
) {

    .services-title {

        font-size:
            3rem;

    }


    .service-row {

        gap:
            45px;

        padding:
            80px 5%;

    }


    .service-heading {

        font-size:
            2rem;

    }


    .service-watermark-num {

        font-size:
            12rem;

    }


    .vertical-faint-text {

        display:
            none;

    }


    .srv-cta-bg {

        width:
            48%;

    }

}


@media (
    max-width: 768px
) {

    .services-page-hero {

        min-height:
            auto;

    }


    .services-hero-container {

        padding:
            70px 5% 65px;

    }


    .services-title {

        font-size:
            2.35rem;

    }


    .services-desc {

        font-size:
            1rem;

    }


    .service-row,
    .reverse-row {

        flex-direction:
            column;

        gap:
            40px;

        padding:
            65px 5%;

    }


    .service-col-img,
    .service-col-text {

        width:
            100%;

        flex:
            none;

    }


    .service-img-box {

        max-width:
            none;

    }


    .service-watermark-num {

        font-size:
            8rem;

        top:
            15px;

    }


    .right-watermark,
    .left-watermark {

        left:
            5%;

        right:
            auto;

    }


    .service-heading {

        font-size:
            2rem;

    }


    .service-check-list {

        margin-bottom:
            25px;

    }


    .btn-outline-action {

        width:
            100%;

        justify-content:
            center;

    }


    .services-cta-final {

        padding:
            65px 5%;

        min-height:
            auto;

    }


    .srv-cta-bg {

        position:
            absolute;

        width:
            100%;

        opacity:
            0.2;

        clip-path:
            none;

    }


    .srv-cta-title {

        font-size:
            2.2rem;

    }

}