/* =========================================================
   CONTACT PAGE - INDUSTRIAL PREMIUM
========================================================= */


/* =========================================================
   MAIN LAYOUT
========================================================= */

.contact-page .contact-grid {

    display: grid;

    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

    gap: 50px;

    align-items: start;

}



/* =========================================================
   CONTACT INFO CARD
========================================================= */

.contact-info {

    padding: 38px;

    background: #ffffff;

    border: 1px solid rgba(15,23,42,.08);

    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(15,23,42,.07);

}



.contact-info h2 {

    margin:0 0 30px;

    color:#0f172a;

    font-size:30px;

    font-weight:900;

}



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

.contact-item {

    display:flex;

    gap:16px;

    margin-bottom:26px;

    color:#334155;

}



.contact-item:last-child {

    margin-bottom:0;

}



.contact-item .icon {

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.10);

    color:#2563eb;

    border-radius:12px;

}



.contact-item svg {

    width:20px;

    height:20px;

}



.contact-item strong {

    display:inline-block;

    margin-bottom:4px;

    color:#0f172a;

    font-weight:800;

}



.contact-item a {

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}



.contact-item a:hover {

    text-decoration:underline;

}



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

.contact-form-wrapper {

    padding:38px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.08);

    border-radius:22px;

    box-shadow:
        0 18px 45px rgba(15,23,42,.07);

}



.contact-form-wrapper h2 {

    margin:0 0 30px;

    color:#0f172a;

    font-size:30px;

    font-weight:900;

}



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

.contact-form .form-group {

    margin-bottom:20px;

}



.contact-form label {

    display:block;

    margin-bottom:7px;

    color:#0f172a;

    font-size:14px;

    font-weight:700;

}



.contact-form input,
.contact-form textarea {

    width:100%;

    padding:14px 16px;

    border:1px solid #d1d5db;

    border-radius:10px;

    background:#fff;

    color:#0f172a;

    font-size:15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}



.contact-form input:focus,
.contact-form textarea:focus {

    outline:none;

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);

}



.contact-form textarea {

    min-height:150px;

    resize:vertical;

}



.contact-form .btn {

    width:100%;

    margin-top:10px;

}



/* =========================================================
   SUCCESS
========================================================= */

.form-success {

    margin-bottom:22px;

    padding:14px 18px;

    background:#ecfdf5;

    border:1px solid #a7f3d0;

    border-radius:12px;

    color:#065f46;

    font-weight:600;

}



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

.contact-page .section-light {

    background:#f8fafc;

}



.map-container {

    margin-top:30px;

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:
        0 20px 50px rgba(15,23,42,.10);

}



.map-container iframe {

    display:block;

}



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

@media(max-width:1024px){

    .contact-page .contact-grid {

        grid-template-columns:1fr;

    }

}



@media(max-width:700px){

    .contact-info,
    .contact-form-wrapper {

        padding:26px;

        border-radius:18px;

    }


    .contact-info h2,
    .contact-form-wrapper h2 {

        font-size:24px;

    }

}


@media(max-width:480px){

    .contact-form input,
    .contact-form textarea {

        font-size:16px;

    }

}