/* =====================================================
   CONTACT PAGE
===================================================== */


/* =========================
   CONTACT SECTION
========================= */

.contact-section {

    width: 100%;

    padding: 50px 20px 70px;

    background: #f5f7fa;

}


/* =========================
   MAIN CONTAINER
========================= */

.contact-container {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    align-items: stretch;

}



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

.contact-box {

    position: relative;

    background: #ffffff;

    border-radius: 18px;

    padding: 25px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);

}


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

.contact-box .contact-image {

    width: 100%;

    height: 190px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 5px;

}


.contact-box .contact-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


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

.contact-content h2,
.form-box h2 {

    margin: 0;

    text-align: center;

    color: #0B1F3A;

    font-size: 25px;

    font-weight: 700;

}


/* =========================
   TITLE LINE
========================= */

.line {

    display: block;

    width: 62px;

    height: 3px;

    margin: 10px auto 25px;

    background:
        linear-gradient(
            to right,
            #0B1F3A 0%,
            #0B1F3A 50%,
            #a80034 50%,
            #a80034 100%
        );

    border-radius: 10px;

}



/* =========================
   CONTACT ITEMS
========================= */

.contact-item {

    display: flex;

    flex-direction: row-reverse;

    align-items: center;

    gap: 15px;

    padding: 10px 0;

    border-bottom: 1px solid #eef0f3;

}


.contact-item:last-child {

    border-bottom: none;

}


/* =========================
   CONTACT ICON
========================= */

.contact-item .icon {

    flex: 0 0 50px;

    width: 50px;

    height: 50px;

    border-radius: 12px;

    background: #f4f5f7;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

    color: #0B1F3A;

}


.contact-item .icon i {

    font-size: 20px;

}


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

.contact-item > div:last-child {

    flex: 1;

    text-align: right;

}


.contact-item h4 {

    margin: 0 0 5px;

    color: #0B1F3A;

    font-size: 14px;

    font-weight: 700;

}


.contact-item p {

    margin: 0;

    color: #8d949c;

    font-size: 11px;

    line-height: 1.8;

}



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

.form-box {

    background: #ffffff;

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);

}


.form-box h2 {

    font-size: 22px;

}


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

#contactForm {

    width: 100%;

}


/* =========================
   TWO COLUMNS
========================= */

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

}


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

.form-group {

    width: 100%;

    margin-bottom: 14px;

}


/* =========================
   INPUT / SELECT / TEXTAREA
========================= */

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #e2e5e9;

    border-radius: 9px;

    background: #ffffff;

    padding: 13px 15px;

    font-family: inherit;

    font-size: 12px;

    color: #333;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


/* =========================
   PLACEHOLDER
========================= */

.form-group input::placeholder,
.form-group textarea::placeholder {

    color: #b8bdc4;

    opacity: 1;

}


/* =========================
   SELECT
========================= */

.form-group select {

    color: #b8bdc4;

    cursor: pointer;

}


.form-group select:valid {

    color: #333;

}


.form-group select option {

    color: #333;

}


/* =========================
   TEXTAREA
========================= */

.form-group textarea {

    height: 135px;

    resize: vertical;

    line-height: 1.8;

}


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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #0B1F3A;

    box-shadow:
        0 0 0 3px rgba(11, 31, 58, 0.05);

}



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

.send-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 125px;

    height: 42px;

    margin: 8px auto 0;

    border: none;

    border-radius: 8px;

    background: #0B1F3A;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.send-button:hover {

    background: #a80034;

    transform: translateY(-2px);

}


.send-button:disabled {

    opacity: 0.7;

    cursor: not-allowed;

    transform: none;

}



/* =====================================================
   FACTORY LOCATION
===================================================== */

.factory-location {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px 70px;

    text-align: center;

}


.factory-location h2 {

    margin: 0;

    color: #0B1F3A;

    font-size: 22px;

}


.factory-location .line {

    margin-bottom: 25px;

}


.map-container {

    width: 100%;

    overflow: hidden;

    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);

}


.map-container iframe {

    display: block;

    width: 100%;

    height: 400px;

    border: 0;

}



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

@media (max-width: 768px) {


    .contact-section {

        padding: 25px 15px 40px;

    }


    .contact-container {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    /* CONTACT BOX */

    .contact-box {

        padding: 18px;

        border-radius: 15px;

    }


    .contact-box .contact-image {

        height: 150px;

    }


    .contact-content h2 {

        font-size: 22px;

    }


    .contact-item {

        gap: 12px;

        padding: 9px 0;

    }


    .contact-item .icon {

        flex-basis: 43px;

        width: 43px;

        height: 43px;

    }


    .contact-item .icon i {

        font-size: 17px;

    }


    .contact-item h4 {

        font-size: 13px;

    }


    .contact-item p {

        font-size: 10px;

    }



    /* FORM */

    .form-box {

        padding: 22px 18px;

        border-radius: 15px;

    }


    .form-box h2 {

        font-size: 20px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .form-group {

        margin-bottom: 12px;

    }


    .form-group input,
    .form-group select,
    .form-group textarea {

        font-size: 12px;

        padding: 12px 13px;

    }


    .form-group textarea {

        height: 120px;

    }


    .send-button {

        width: 120px;

        height: 40px;

        font-size: 11px;

    }



    /* MAP */

    .factory-location {

        padding: 0 15px 40px;

    }


    .factory-location h2 {

        font-size: 20px;

    }


    .map-container iframe {

        height: 300px;

    }

}



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

@media (max-width: 400px) {


    .contact-box {

        padding: 15px;

    }


    .contact-box .contact-image {

        height: 130px;

    }


    .contact-item .icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

    }


    .contact-item h4 {

        font-size: 12px;

    }


    .contact-item p {

        font-size: 9px;

    }


    .form-box {

        padding: 20px 15px;

    }


}