/* =====================================================
CONTACT PAGE
AGRO MAKMUR SENTOSA
===================================================== */


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

.contact-hero {
    position: relative;

    min-height: 520px;

    padding: 100px 7% 100px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #143d28;

    box-sizing: border-box;
}


/* =====================================================
CONTACT HERO VIDEO
===================================================== */

.contact-hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 1;

    z-index: 0;

    pointer-events: none;
}


/* =====================================================
CONTACT HERO OVERLAY
===================================================== */

.contact-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 61, 40, 0.55) 0%,
            rgba(20, 61, 40, 0.38) 45%,
            rgba(20, 61, 40, 0.18) 100%
        );

    z-index: 1;

    pointer-events: none;
}


/* =====================================================
CONTACT HERO CONTENT
===================================================== */

.contact-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;
}


/* =====================================================
SECTION LABEL
===================================================== */

.contact-hero .section-label {
    color: #c7e3cd;
}


/* =====================================================
CONTACT HERO TITLE
===================================================== */

.contact-hero h1 {
    margin: 15px 0 25px;

    font-size: clamp(48px, 6vw, 86px);

    line-height: 0.98;

    color: #ffffff;

    letter-spacing: -3px;
}


/* =====================================================
CONTACT HERO DESCRIPTION
===================================================== */

.contact-hero p:not(.section-label) {
    max-width: 650px;

    font-size: 18px;

    line-height: 1.7;

    color: #e0ebe3;
}


/* =====================================================
SECTION LABEL
===================================================== */

.section-label {
    margin: 0;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 5px;
    text-transform: uppercase;

    color: #177346;
}


/* =====================================================
OUR NETWORK
===================================================== */

.network {
    padding: 100px 7% 110px;
    background: #fcfaf6;
}

.network-header {
    max-width: 850px;

    margin-bottom: 55px;
}

.network-header h2 {
    margin: 15px 0 25px;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.02;

    letter-spacing: -3px;

    color: #143d28;
}

.network-header > p:not(.section-label) {
    max-width: 700px;

    font-size: 17px;
    line-height: 1.7;

    color: #52645a;
}


/* =====================================================
NETWORK CONTENT
===================================================== */

.network-content {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(360px, 0.95fr);

    gap: 35px;

    align-items: stretch;
}


/* =====================================================
MAP AREA
===================================================== */

.network-map {
    min-width: 0;
}


/* =====================================================
MAP CONTAINER
===================================================== */

.map-container {
    position: relative;

    width: 100%;
    height: 530px;

    overflow: hidden;

    border: 1px solid #dbe5d9;
    border-radius: 22px;

    background: #eef5ea;
}


/* =====================================================
INDONESIA MAP
===================================================== */

.indonesia-map-image {
    position: absolute;

    width: 92%;
    height: auto;

    max-width: none;

    left: 4%;
    top: 50%;

    transform: translateY(-50%);

    display: block;

    opacity: 0.75;

    z-index: 1;

    pointer-events: none;
}


/* =====================================================
LOCATION MARKER
=====================================================

PENTING:

Posisi marker TIDAK diatur oleh CSS.

Posisi marker sepenuhnya dikontrol oleh JavaScript
menggunakan:

left = X
top  = Y

===================================================== */

.location-marker {
    position: absolute !important;

    width: 0;
    height: 0;

    padding: 0;
    margin: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    z-index: 50;

    transform: translate(-50%, -50%);
}


/* =====================================================
GREEN DOT
===================================================== */

.marker-dot {
    position: absolute;

    left: 0;
    top: 0;

    width: 17px;
    height: 17px;

    min-width: 17px;
    min-height: 17px;

    background: #23834f;

    border: 4px solid #ffffff;

    border-radius: 50%;

    box-sizing: content-box;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 0 4px rgba(35, 131, 79, 0.25),
        0 5px 14px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* =====================================================
MARKER LABEL
===================================================== */

.marker-label {
    display: none;

    position: absolute;

    left: 20px;
    top: 50%;

    transform: translateY(-50%);

    padding: 9px 14px;

    border-radius: 8px;

    background: #ffffff;

    color: #173b28;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.10);
}


/* =====================================================
SHOW LABEL ONLY FOR ACTIVE LOCATION
===================================================== */

.location-marker.active .marker-label {
    display: block;
}


/* =====================================================
MARKER HOVER
===================================================== */

.location-marker:hover .marker-dot {
    transform: scale(1.15);
}

.location-marker:hover .marker-label {
    transform: translateY(-2px);
}


/* =====================================================
ACTIVE MARKER
===================================================== */

.location-marker.active .marker-dot {
    background: #145c38;

    box-shadow:
        0 0 0 5px rgba(35, 131, 79, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.18);
}

/* =====================================================
MARKER POSITIONS
===================================================== */

/*
ATUR POSISI TITIK DI SINI.

LEFT:
lebih besar  = ke KANAN
lebih kecil  = ke KIRI

TOP:
lebih besar  = ke BAWAH
lebih kecil  = ke ATAS
*/


.location-marker[data-city="medan"] {
    left: 13%;
    top: 32%;
}

.location-marker[data-city="palembang"] {
    left: 24%;
    top: 53%;
}

.location-marker[data-city="lampung"] {
    left: 23.8%;
    top: 60%;
}

.location-marker[data-city="jakarta"] {
    left: 29%;
    top: 62%;
}

.location-marker[data-city="solo"] {
    left: 36%;
    top: 66%;
}

.location-marker[data-city="malang"] {
    left: 41%;
    top: 68%;
}

/* =====================================================
LOCATION LIST
===================================================== */

.location-list {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;
}

.location-list-item {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px 16px;

    border: 1px solid #d5e0d5;

    border-radius: 30px;

    background: #ffffff;

    color: #173b28;

    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.location-list-item:hover {
    border-color: #23834f;
}

.location-list-item.active {
    background: #143d28;

    border-color: #143d28;

    color: #ffffff;
}

.list-dot {
    width: 7px;
    height: 7px;

    min-width: 7px;

    border-radius: 50%;

    background: #23834f;
}

.location-list-item.active .list-dot {
    background: #d9eadc;
}


/* =====================================================
LOCATION INFORMATION
===================================================== */

.location-info {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 530px;

    padding: 48px 44px;

    border-radius: 22px;

    background: #143d28;

    color: #ffffff;

    box-sizing: border-box;
}

.location-info .section-label {
    color: #c7e3cd;
}

.location-info h3 {
    margin: 16px 0 18px;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1;

    letter-spacing: -2px;

    color: #ffffff;
}

.location-info > div > p:not(.section-label) {
    max-width: 500px;

    font-size: 16px;

    line-height: 1.7;

    color: #d6e4d9;
}


/* =====================================================
LOCATION DIVIDER
===================================================== */

.location-divider {
    width: 100%;
    height: 1px;

    margin: 30px 0;

    background: rgba(255, 255, 255, 0.16);
}


/* =====================================================
LOCATION ADDRESS
===================================================== */

.location-address {
    display: flex;

    gap: 18px;

    align-items: flex-start;
}

.location-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    min-width: 44px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #c7e3cd;

    font-size: 13px;
}

.location-address strong {
    display: block;

    margin-bottom: 8px;

    font-size: 15px;

    color: #ffffff;
}

.location-address p {
    margin: 0;

    font-size: 14px;

    line-height: 1.65;

    color: #bcd0c1;
}


/* =====================================================
VIEW LOCATION BUTTON
===================================================== */

.location-button {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 17px 18px;

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

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.location-button:hover {
    background: rgba(255, 255, 255, 0.10);

    border-color: rgba(255, 255, 255, 0.40);
}


/* =====================================================
NETWORK NOTE
===================================================== */

.network-note {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 24px;
}

.note-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    min-width: 19px;

    border-radius: 50%;

    background: #e5eee4;

    color: #37734d;

    font-size: 11px;
    font-weight: 700;
}

.network-note p {
    margin: 0;

    font-size: 13px;

    color: #6b786f;
}


/* =====================================================
CONTACT INFORMATION
===================================================== */

/* =====================================================
CONTACT INFORMATION
===================================================== */

.contact-information {
    padding: 60px 7%;

    background: #f6f8f3;
}

.contact-info-header {
    max-width: 750px;

    margin-bottom: 55px;
}

.contact-info-header h2 {
    margin: 15px 0 0;

    font-size: clamp(40px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -2px;

    color: #143d28;
}


/* =====================================================
CONTACT INFO GRID
===================================================== */

.contact-info-grid {
    display: grid;

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

    gap: 0;

    border-top: 1px solid #d5dfd5;
}


/* =====================================================
CONTACT INFO ITEM
===================================================== */

.contact-info-card {
    padding: 32px 35px 32px 0;

    border: none;

    border-bottom: 1px solid #d5dfd5;

    border-radius: 0;

    background: transparent;
}


/* =====================================================
CONTACT INFO LABEL
===================================================== */

.contact-info-card > span {
    display: block;

    margin-bottom: 14px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #23834f;
}


/* =====================================================
CONTACT INFO TITLE
===================================================== */

.contact-info-card h3 {
    margin: 0 0 10px;

    font-size: 20px;

    line-height: 1.3;

    color: #173b28;

    word-break: break-word;
}


/* =====================================================
CONTACT INFO DESCRIPTION
===================================================== */

.contact-info-card p {
    margin: 0;

    max-width: 300px;

    font-size: 14px;

    line-height: 1.7;

    color: #647169;
}


/* =====================================================
   CONTACT FORM
   ===================================================== */

.contact-form-section {
    padding: 100px 7% 120px;
    background: #ffffff;
}


/* =====================================================
   CONTACT FORM LAYOUT
   ===================================================== */

.contact-form-layout {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1fr);

    gap: 100px;

    align-items: start;
}


/* =====================================================
   LEFT SIDE
   ===================================================== */

.contact-form-intro {
    padding-top: 2px;
}

.contact-form-intro h2 {
    margin: 15px 0 22px;

    font-size: clamp(42px, 4.5vw, 62px);

    line-height: 1;

    letter-spacing: -2.5px;

    color: #143d28;
}

.contact-form-description {
    max-width: 390px;

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: #647169;
}


/* =====================================================
   FORM
   ===================================================== */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 27px;
}


/* =====================================================
   FORM GROUP
   ===================================================== */

.form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* =====================================================
   LABEL
   ===================================================== */

.form-group label {
    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #52645a;
}


/* =====================================================
   INPUT + TEXTAREA
   ===================================================== */

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 8px 0 12px;

    box-sizing: border-box;

    border: none;

    border-bottom: 1px solid #d5dfd5;

    border-radius: 0;

    background: transparent;

    color: #173b28;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.25s ease;
}


/* =====================================================
   FOCUS
   ===================================================== */

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: #23834f;
}


/* =====================================================
   MESSAGE
   ===================================================== */

.form-group textarea {
    min-height: 85px;

    resize: vertical;
}


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

.contact-submit {
    display: flex;

    align-items: center;

    gap: 16px;

    align-self: flex-start;

    margin-top: 2px;

    padding: 0;

    border: none;

    background: transparent;

    color: #143d28;

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;
}


/* =====================================================
   ARROW
   ===================================================== */

.contact-submit span:last-child {
    font-size: 18px;

    font-weight: 400;

    transition:
        transform 0.25s ease;
}


/* =====================================================
   HOVER
   ===================================================== */

.contact-submit:hover span:last-child {
    transform: translateX(7px);
}


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

@media (max-width: 900px) {

    .contact-form-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }

}


@media (max-width: 700px) {

    .contact-form-section {
        padding: 80px 5% 100px;
    }

    .contact-form-intro h2 {
        font-size: 48px;
    }

    .contact-form {
        gap: 25px;
    }

}

/* =====================================================
   FOOTER
   AGRO MAKMUR SENTOSA
===================================================== */

.site-footer {

    background:
        #0d3020;

    color:
        #ffffff;

}



/* =====================================================
   FOOTER MAIN
===================================================== */

.footer-main {

    max-width:
        1500px;

    margin:
        0 auto;

    padding:
        75px 7%;

    display:
        grid;

    grid-template-columns:
        2fr
        1fr
        1.3fr
        1.2fr;

    gap:
        60px;

}



/* =====================================================
   COMPANY
===================================================== */

.footer-company {

    max-width:
        470px;

}


.footer-logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        22px;

}


.footer-logo img {

    width:
        54px;

    height:
        54px;

    object-fit:
        contain;

}


.footer-logo span {

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        1px;

    color:
        #ffffff;

}


.footer-company > p {

    max-width:
        470px;

    margin:
        0;

    font-family:
        Georgia,
        serif;

    font-size:
        15px;

    line-height:
        1.9;

    color:
        #d0ddd4;

}



/* =====================================================
   FOOTER COLUMNS
===================================================== */

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}


.footer-column h3 {

    margin:
        0 0 15px;

    font-family:
        Georgia,
        serif;

    font-size:
        15px;

    font-weight:
        700;

    color:
        #ffffff;

}


.footer-column a,
.footer-column p {

    margin:
        0;

    text-decoration:
        none;

    font-family:
        Georgia,
        serif;

    font-size:
        14px;

    line-height:
        1.6;

    color:
        #d0ddd4;

}


.footer-column a {

    transition:
        color .25s ease;

}


.footer-column a:hover {

    color:
        #ffffff;

}



/* =====================================================
   SOCIAL MEDIA
===================================================== */

.footer-social {

    gap:
        0;

}


.footer-social h3 {

    margin-bottom:
        18px;

}


.social-link {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        12px 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    text-decoration:
        none;

    transition:
        border-color .25s ease,
        transform .25s ease;

}


.social-link:last-child {

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

}


.social-link:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(
            255,
            255,
            255,
            .30
        );

}


.social-platform {

    font-family:
        Georgia,
        serif;

    font-size:
        14px;

    font-weight:
        700;

    color:
        #ffffff;

}


.social-handle {

    font-family:
        Georgia,
        serif;

    font-size:
        13px;

    color:
        #aebfb4;

}



/* =====================================================
   FOOTER PARTNERS
===================================================== */

.footer-partners {

    max-width:
        1500px;

    margin:
        0 auto;

    padding:
        0 7% 65px;

}


.footer-partners-header {

    margin-bottom:
        30px;

}


.footer-partners-header .section-label {

    margin-bottom:
        8px;

    color:
        #9fc6aa;

}


.footer-partners-header h3 {

    margin:
        0;

    font-family:
        Georgia,
        serif;

    font-size:
        26px;

    font-weight:
        500;

    letter-spacing:
        -.5px;

    color:
        #ffffff;

}



/* =====================================================
   PARTNERS GRID
===================================================== */

.footer-partners-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            9,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;

    width:
        100%;

}



/* =====================================================
   PARTNER LOGO BOX
===================================================== */

.footer-partner-logo {

    height:
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.footer-partner-logo:hover {

    transform:
        translateY(-3px);

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .25
        );

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

}


.footer-partner-logo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        120px;

    max-height:
        55px;

    object-fit:
        contain;

    transition:
        transform .25s ease;

}


.footer-partner-logo:hover img {

    transform:
        scale(1.05);

}



/* =====================================================
   FOOTER BOTTOM
===================================================== */

.footer-bottom {

    padding:
        22px 7%;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

}


.footer-bottom p {

    margin:
        0;

    font-family:
        Georgia,
        serif;

    font-size:
        12px;

    color:
        #aebfb4;

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1200px) {

    .footer-main {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

    }


    .footer-partners-grid {

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

    }

}



/* =====================================================
   SMALL TABLET
===================================================== */

@media (max-width: 850px) {

    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .footer-partners-grid {

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

    }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .footer-main {

        padding:
            60px 7%;

        gap:
            45px;

    }


    .footer-company {

        max-width:
            100%;

    }


    .footer-company > p {

        max-width:
            100%;

    }


    .footer-partners {

        padding:
            0 7% 50px;

    }


    .footer-partners-header h3 {

        font-size:
            23px;

    }


    .footer-partners-grid {

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

        gap:
            10px;

    }


    .footer-partner-logo {

        height:
            80px;

        padding:
            12px;

    }


    .footer-partner-logo img {

        max-width:
            100px;

        max-height:
            50px;

    }


    .footer-bottom {

        padding:
            20px 7%;

    }

}

/* =====================================================
LABEL LAMPUNG & SOLO DI SEBELAH KIRI TITIK
===================================================== */

.location-marker[data-city="lampung"] .marker-label,
.location-marker[data-city="solo"] .marker-label {
    left: auto;
    right: 20px;

    transform: translateY(-50%);
}

.location-marker[data-city="jakarta"] .marker-label {
    left: 16px;
    right: auto;
    top: auto;
    bottom: 7px;

    transform: none;
}