/* =========================================
   COMPONENT: ABOUT PAGE
   PT DIRATAMA MAPAN SEJAHTERA
   FINAL REVISION
   ========================================= */


/* =========================================
   1. HERO
   ========================================= */

.about-page-hero {

    position: relative;

    width: 100%;

    min-height: 78vh;

    display: flex;

    flex-direction: column;

    background-color: var(--navy);

    padding-top: 100px;

    overflow: hidden;

}


.about-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 1;

}


.about-shape-dark-navy {

    position: absolute;

    top: 0;

    left: 0;

    width: 45%;

    height: 100%;

    background-color: #051426;

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

    z-index: 2;

}


.about-shape-navy {

    position: absolute;

    top: 0;

    left: 0;

    width: 75%;

    height: 100%;

    background-color:
        rgba(
            11,
            37,
            69,
            0.92
        );

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

    z-index: 3;

}


.about-shape-yellow {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 250px;

    height: 250px;

    background-color:
        var(--yellow);

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

    z-index: 3;

}


.about-hero-container {

    position: relative;

    z-index: 10;

    max-width: 1300px;

    margin: 0 auto;

    width: 100%;

    padding:
        90px
        5%
        110px;

    flex: 1;

    display: flex;

    align-items: center;

}


.about-hero-content {

    max-width: 700px;

}


.badge-subtitle {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    flex-wrap: wrap;

}


.badge-subtitle .line {

    width: 40px;

    height: 2px;

    background-color:
        var(--yellow);

}


.badge-subtitle .text {

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

    font-size:
        0.85rem;

    font-weight:
        600;

    color:
        #9CA3AF;

    letter-spacing:
        2px;

}


.about-title {

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

    font-size:
        4rem;

    font-weight:
        800;

    margin-bottom:
        25px;

    line-height:
        1.1;

    color:
        var(--white);

}


.about-title .highlight {

    color:
        var(--yellow);

}


.about-desc-001 {

    color:
        var(--white);

    font-size:
        1.1rem;

    font-weight:
        400;

    line-height:
        1.7;

    margin-bottom:
        45px;

    max-width:
        650px;

}


.breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        0.95rem;

    font-weight:
        500;

    flex-wrap:
        wrap;

}


.breadcrumb a {

    color:
        #D1D5DB;

}


.breadcrumb a:hover {

    color:
        var(--white);

}


.breadcrumb-arrow {

    color:
        var(--yellow);

    font-size:
        1.2rem;

}


.breadcrumb .current {

    color:
        var(--yellow);

    font-weight:
        600;

}



/* =========================================
   2. WHO WE ARE
   ========================================= */

.about-who-we-are {

    position: relative;

    padding:
        100px
        5%;

    background-color:
        var(--white);

    overflow:
        hidden;

}


.who-bg-pattern {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image:
        url(
            '../../assets/images/bg/bg-2.png'
        );

    background-size:
        cover;

    opacity:
        0.04;

    pointer-events:
        none;

}


.who-container {

    max-width:
        1300px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        80px;

    position:
        relative;

    z-index:
        2;

}


.who-content-left {

    flex:
        1.1;

}


.who-title {

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

    font-size:
        3.2rem;

    font-weight:
        800;

    color:
        var(--navy);

    line-height:
        1.15;

    margin-bottom:
        25px;

}


.who-title .highlight {

    color:
        var(--yellow);

}


.who-desc {

    color:
        #4B5563;

    font-size:
        1.05rem;

    line-height:
        1.7;

    margin-bottom:
        50px;

}


.who-features {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    flex-wrap:
        wrap;

}


.who-feature-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

    flex:
        1;

    min-width:
        120px;

}


.who-feature-item p {

    color:
        var(--navy);

    font-size:
        0.95rem;

    font-weight:
        600;

    line-height:
        1.4;

    margin:
        0;

}


.who-feature-item .icon-navy {

    color:
        var(--navy);

    font-size:
        2.2rem;

}


.who-v-divider {

    width:
        1px;

    height:
        70px;

    background-color:
        rgba(
            11,
            37,
            69,
            0.2
        );

    margin-top:
        10px;

}


.who-image-right {

    flex:
        1;

    position:
        relative;

    width:
        100%;

}


.who-img-wrapper {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    z-index:
        2;

}


.who-img-wrapper img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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

}


.who-ornament-top-left {

    position:
        absolute;

    top:
        -30px;

    left:
        -40px;

    width:
        130px;

    height:
        60px;

    background-color:
        var(--yellow);

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

    z-index:
        -1;

}


.who-ornament-bottom-right {

    position:
        absolute;

    bottom:
        -30px;

    right:
        -30px;

    background-color:
        var(--navy);

    padding:
        40px
        40px
        30px
        60px;

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

    z-index:
        3;

    color:
        var(--white);

    box-shadow:
        0
        10px
        20px
        rgba(
            0,
            0,
            0,
            0.2
        );

}


.who-ornament-bottom-right
.ornament-line {

    width:
        30px;

    height:
        3px;

    background-color:
        var(--yellow);

    margin-bottom:
        15px;

}


.who-ornament-bottom-right p {

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

    font-size:
        0.9rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    line-height:
        1.4;

    margin:
        0;

}



/* =========================================
   3. VISI MISI
   ========================================= */

.about-vision-mission {

    position:
        relative;

    background-color:
        #061930;

    padding:
        100px
        5%;

    overflow:
        hidden;

    color:
        var(--white);

}


.vm-bg-overlay {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    background-size:
        cover;

    background-position:
        center;

    opacity:
        0.12;

    z-index:
        1;

    mix-blend-mode:
        luminosity;

}


.vm-gradient-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(
                6,
                25,
                48,
                0.97
            ) 0%,
            rgba(
                6,
                25,
                48,
                0.88
            ) 100%
        );

    z-index:
        2;

}


.vm-watermark-visi,
.vm-watermark-misi {

    position:
        absolute;

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

    font-size:
        14rem;

    font-weight:
        800;

    color:
        rgba(
            255,
            255,
            255,
            0.03
        );

    z-index:
        3;

    line-height:
        1;

    letter-spacing:
        5px;

    pointer-events:
        none;

}


.vm-watermark-visi {

    bottom:
        -5%;

    left:
        3%;

}


.vm-watermark-misi {

    top:
        10%;

    right:
        3%;

}


.vm-container {

    position:
        relative;

    z-index:
        10;

    max-width:
        1300px;

    margin:
        0 auto;

    width:
        100%;

}


.vm-header {

    display:
        flex;

    align-items:
        stretch;

    gap:
        40px;

    margin-bottom:
        70px;

    flex-wrap:
        wrap;

}


.vm-header-left {

    flex:
        1.2;

    min-width:
        300px;

}


.vm-title {

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

    font-size:
        3rem;

    font-weight:
        800;

    line-height:
        1.2;

    margin:
        0;

    color:
        var(--white);

}


.vm-title .highlight {

    color:
        var(--yellow);

}


.vm-header-divider {

    width:
        1px;

    background-color:
        rgba(
            255,
            255,
            255,
            0.2
        );

}


.vm-header-right {

    flex:
        1;

    min-width:
        300px;

    display:
        flex;

    align-items:
        center;

}


.vm-header-right p {

    color:
        #D1D5DB;

    font-size:
        1.1rem;

    line-height:
        1.6;

    margin:
        0;

}


.vm-content {

    display:
        flex;

    align-items:
        stretch;

    gap:
        40px;

    margin-bottom:
        0;

    flex-wrap:
        wrap;

}


.vm-col-visi,
.vm-col-misi {

    flex:
        1;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;

    min-width:
        300px;

}


.vm-col-divider {

    width:
        1px;

    background-color:
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.vm-icon-box {

    width:
        80px;

    height:
        80px;

    background-color:
        var(--yellow);

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

}


.vm-icon-box span {

    font-size:
        3.5rem;

    color:
        var(--navy);

}


.vm-subtitle {

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

    font-size:
        1.2rem;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    margin-bottom:
        20px;

    color:
        var(--yellow);

}


.vm-desc {

    color:
        #E5E7EB;

    font-size:
        1.1rem;

    line-height:
        1.7;

    font-weight:
        400;

}


.vm-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

    list-style:
        none;

    padding:
        0;

    margin:
        0;

}


.vm-list li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        20px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.vm-list li:last-child {

    border-bottom:
        none;

    padding-bottom:
        0;

}


.vm-list .num {

    color:
        var(--yellow);

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

    font-size:
        1.4rem;

    font-weight:
        800;

    line-height:
        1.2;

}


.vm-list .text {

    color:
        #E5E7EB;

    font-size:
        1.05rem;

    line-height:
        1.5;

}



/* =========================================
   4. LEGALITAS
   ========================================= */

.about-legalitas {

    background-color:
        #061930;

    padding:
        100px
        5%;

    position:
        relative;

    overflow:
        hidden;

}


.about-container-001 {

    max-width:
        1300px;

    margin:
        0 auto;

    width:
        100%;

    position:
        relative;

    z-index:
        2;

}


.legalitas-header {

    margin-bottom:
        50px;

}


.legalitas-desc {

    color:
        #D1D5DB;

    font-size:
        1.05rem;

    line-height:
        1.6;

    margin-top:
        15px;

    max-width:
        800px;

}


.legalitas-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        25px;

    margin-bottom:
        50px;

}


.legal-card {

    background-color:
        var(--white);

    border-radius:
        8px;

    padding:
        20px
        25px;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    transition:
        0.3s;

}


.legal-card:hover {

    transform:
        translateY(
            -3px
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.legal-icon-wrap {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        55px;

    height:
        55px;

    flex-shrink:
        0;

}


.legal-main-icon {

    font-size:
        3rem;

    color:
        var(--navy);

}


.legal-check {

    position:
        absolute;

    bottom:
        -5px;

    right:
        -5px;

    font-size:
        1.3rem;

    color:
        #10B981;

    background:
        white;

    border-radius:
        50%;

    font-variation-settings:
        'FILL' 1;

}


.legal-text {

    flex:
        1;

}


.legal-text h4 {

    color:
        var(--navy);

    font-size:
        1.05rem;

    font-weight:
        700;

    margin-bottom:
        5px;

    line-height:
        1.3;

}


.legal-text p {

    color:
        #6B7280;

    font-size:
        0.85rem;

    line-height:
        1.4;

    margin:
        0;

}


.legal-trust-banner {

    background-color:
        #0B2545;

    border-radius:
        8px;

    padding:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    flex-wrap:
        wrap;

}


.trust-left {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-width:
        250px;

}


.trust-icon {

    color:
        var(--yellow);

    font-size:
        3rem;

}


.trust-text-bold {

    display:
        flex;

    flex-direction:
        column;

    color:
        var(--white);

    font-weight:
        700;

    font-size:
        0.9rem;

    letter-spacing:
        1px;

}


.trust-middle {

    flex:
        1;

    color:
        #D1D5DB;

    font-size:
        0.95rem;

    line-height:
        1.5;

    min-width:
        250px;

}


.trust-middle p {

    margin:
        0;

}



/* =========================================
   5. CULTURE
   ========================================= */

.about-culture {

    background-color:
        #F8F9FA;

    padding:
        100px
        5%;

    position:
        relative;

    overflow:
        hidden;

}


.culture-bg-pattern {

    position:
        absolute;

    bottom:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    background-image:
        url(
            '../../assets/images/bg/bg-2.png'
        );

    background-size:
        cover;

    opacity:
        0.04;

    pointer-events:
        none;

}


.culture-header {

    text-align:
        center;

    margin-bottom:
        60px;

    position:
        relative;

    z-index:
        2;

}


.culture-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        30px;

    position:
        relative;

    z-index:
        2;

}


.culture-card {

    background:
        var(--white);

    padding:
        40px
        30px;

    border-radius:
        8px;

    position:
        relative;

    overflow:
        hidden;

    box-shadow:
        0
        5px
        20px
        rgba(
            0,
            0,
            0,
            0.03
        );

    border:
        1px solid
        #E5E7EB;

}


.culture-bg-num {

    position:
        absolute;

    top:
        10px;

    right:
        15px;

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

    font-size:
        5.5rem;

    font-weight:
        800;

    color:
        #F3F4F6;

    line-height:
        1;

}


.culture-icon-box {

    position:
        relative;

    z-index:
        2;

    width:
        60px;

    height:
        60px;

    background:
        var(--navy);

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

}


.culture-icon-box span {

    color:
        var(--white);

    font-size:
        2.2rem;

}


.culture-card h4 {

    position:
        relative;

    z-index:
        2;

    color:
        var(--navy);

    font-size:
        1.2rem;

    margin-bottom:
        15px;

}


.culture-card .culture-line {

    position:
        relative;

    z-index:
        2;

    width:
        30px;

    height:
        3px;

    background:
        var(--yellow);

    margin-bottom:
        15px;

}


.culture-card p {

    position:
        relative;

    z-index:
        2;

    color:
        #6B7280;

    font-size:
        0.95rem;

    line-height:
        1.6;

    margin:
        0;

}



/* =========================================
   6. EXCELLENCE
   ========================================= */

.about-excellence {

    background-color:
        var(--white);

    padding:
        100px
        5%;

    overflow:
        hidden;

}


.excellence-header {

    text-align:
        center;

    margin-bottom:
        60px;

}


.excellence-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        30px;

}


.excellence-card {

    background:
        var(--white);

    border-radius:
        8px;

    overflow:
        hidden;

    box-shadow:
        0
        10px
        30px
        rgba(
            0,
            0,
            0,
            0.05
        );

    border:
        1px solid
        #E5E7EB;

    display:
        flex;

    flex-direction:
        column;

}


.excellence-img {

    width:
        100%;

    height:
        220px;

    background-size:
        cover;

    background-position:
        center;

}


.excellence-content {

    padding:
        0
        30px
        30px;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

}


.excellence-icon-wrap {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        -30px;

    margin-bottom:
        25px;

}


.excellence-icon-box {

    width:
        60px;

    height:
        60px;

    background:
        var(--navy);

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0
        5px
        15px
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.excellence-icon-box span {

    color:
        var(--white);

    font-size:
        2rem;

}


.excellence-line {

    width:
        30px;

    height:
        3px;

    background:
        var(--yellow);

    margin-top:
        30px;

}


.excellence-content h4 {

    color:
        var(--navy);

    font-size:
        1.05rem;

    line-height:
        1.4;

    margin-bottom:
        15px;

}


.excellence-content p {

    color:
        #6B7280;

    font-size:
        0.9rem;

    line-height:
        1.6;

    margin-bottom:
        0;

    flex:
        1;

}



/* =========================================
   7. FINAL CTA
   ========================================= */

.about-cta-section {

    position:
        relative;

    width:
        100%;

    background-color:
        #05162A;

    padding:
        100px
        5%;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    min-height:
        450px;

}


.about-cta-bg {

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        55%;

    height:
        100%;

    background-size:
        cover;

    background-position:
        center;

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

    z-index:
        1;

}


.about-cta-yellow-shape {

    position:
        absolute;

    bottom:
        0;

    right:
        0;

    width:
        250px;

    height:
        250px;

    background-color:
        var(--yellow);

    clip-path:
        polygon(
            100% 60%,
            100% 100%,
            40% 100%
        );

    z-index:
        2;

}


.about-cta-container {

    position:
        relative;

    z-index:
        10;

    max-width:
        1300px;

    margin:
        0 auto;

    width:
        100%;

}


.about-cta-content {

    max-width:
        760px;

}


.about-cta-title {

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

    font-size:
        3.2rem;

    font-weight:
        800;

    color:
        var(--white);

    line-height:
        1.2;

    margin-bottom:
        15px;

    margin-top:
        0;

}


.about-cta-title .highlight {

    color:
        var(--yellow);

}


.about-cta-desc {

    font-size:
        1.2rem;

    color:
        var(--white);

    margin-bottom:
        40px;

    font-weight:
        400;

}


.about-cta-action-row {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    flex-wrap:
        wrap;

}


.cta-btn-yellow {

    background-color:
        var(--yellow);

    color:
        var(--navy);

    padding:
        16px
        32px;

    border-radius:
        4px;

    font-weight:
        700;

    display:
        inline-flex;

    align-items:
        center;

    font-size:
        1.05rem;

    transition:
        0.3s ease;

    border:
        none;

}


.cta-btn-yellow:hover {

    background-color:
        #E6B000;

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0
        5px
        15px
        rgba(
            251,
            192,
            45,
            0.3
        );

}



/* =========================================
   8. RESPONSIVE
   ========================================= */

@media (
    max-width: 1024px
) {

    .about-shape-navy {

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

    }


    .about-title {

        font-size:
            3.5rem;

    }


    .who-container {

        flex-direction:
            column;

        gap:
            50px;

    }


    .who-content-left,
    .who-image-right {

        width:
            100%;

    }


    .vm-header {

        flex-direction:
            column;

        gap:
            20px;

    }


    .vm-header-divider {

        display:
            none;

    }


    .vm-content {

        flex-direction:
            column;

        gap:
            40px;

    }


    .vm-col-divider {

        display:
            none;

    }


    .vm-watermark-visi,
    .vm-watermark-misi {

        font-size:
            10rem;

    }


    .legalitas-grid {

        grid-template-columns:
            1fr;

    }


    .culture-grid,
    .excellence-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


@media (
    max-width: 768px
) {

    .about-page-hero,
    .about-who-we-are,
    .about-vision-mission,
    .about-legalitas,
    .about-culture,
    .about-excellence {

        padding:
            60px
            5%;

    }


    .about-page-hero {

        min-height:
            auto;

    }


    .about-hero-bg {

        height:
            320px;

        position:
            absolute;

    }


    .about-shape-dark-navy,
    .about-shape-navy,
    .about-shape-yellow {

        display:
            none;

    }


    .about-hero-container {

        background-color:
            var(--navy);

        padding:
            70px
            5%
            60px;

        margin:
            0;

    }


    .about-title {

        font-size:
            2.5rem;

    }


    .about-desc-001 {

        font-size:
            1rem;

        margin-bottom:
            30px;

    }


    .who-title {

        font-size:
            2.2rem;

    }


    .who-features {

        flex-direction:
            column;

        gap:
            30px;

    }


    .who-v-divider {

        display:
            none;

    }


    .who-feature-item {

        flex-direction:
            row;

        align-items:
            flex-start;

        text-align:
            left;

        gap:
            20px;

    }


    .who-ornament-top-left {

        display:
            none;

    }


    .who-ornament-bottom-right {

        bottom:
            0;

        right:
            0;

        padding:
            20px;

        clip-path:
            none;

    }


    .vm-title {

        font-size:
            2.2rem;

    }


    .vm-watermark-visi,
    .vm-watermark-misi {

        display:
            none;

    }


    .vm-col-visi,
    .vm-col-misi {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .legal-trust-banner {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            20px;

    }


    .trust-left {

        min-width:
            auto;

    }


    .culture-grid,
    .excellence-grid {

        grid-template-columns:
            1fr;

    }


    .about-cta-bg {

        width:
            100%;

        opacity:
            0.2;

        clip-path:
            none;

    }


    .about-cta-title {

        font-size:
            2.2rem;

    }


    .about-cta-desc {

        font-size:
            1rem;

    }


    .about-cta-action-row {

        width:
            100%;

    }


    #about-cta-button {

        width:
            100%;

        justify-content:
            center;

    }

}