/* content, and form  */

    .contact-section {
        background: #eef3f7;
        padding: 40px 0;
    }

    .contact-box {
        background: var(--theme-color-light);
        border-radius: 5px;
        padding: 30px;
        border: 1px solid #e2e2e2;
    }

    .contact-header {
        background: var(--ssc-color1);
        color: var(--theme-color-light);
        padding: 15px;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        border-radius: 5px 5px 0 0;
    }

    .info-item {
        padding: 25px 15px;
        text-align: center;
    }

    .info-item:last-child {
        border-bottom: 0;
    }

    .info-item i {
        font-size: 40px;
        color: var(--ssc-color1);
        margin-bottom: 10px;
    }

    .info-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 5px;
        color: var(--ssc-color1);
    }

    .form-area {
        background: var(--ssc-form);
        padding: 30px;
        border-radius: 5px;
        border: 1px solid #d0d0d0;
    }

    .form-control {
        height: 48px;
        border-radius: 5px;
    }

textarea.form-control {
    height: 180px;
    resize: none;
}

    .submit-btn {
        background: var(--ssc-color1);
        color: var(--theme-color-light);
        padding: 12px 28px;
        font-size: 18px;
        border-radius: 5px;
        border: 0;
    }

    .submit-btn i {
        margin-left: 5px;
    }
    /* map  */

    .full-width-map {
    width: 100vw; 
    margin-left: calc(-50vw + 50%); 
}

.full-width-map .map-container {
    width: 100%;
    height: 500px; 
    overflow: hidden;
}

.full-width-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}





/* Define how much clear space you want around the exact center point */
:root {
    --center-gap-size: 25px; 
}

/* Styling for the main outer container (relative positioning is key for lines and gap) */
.contact-box {
    background-color: var(--theme-color-light);
    padding: 20px;
    position: relative; 
    z-index: 1; 
}



/* 
 * The Vertical Dividing Line (::before)
 */
.contact-box .row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%); 
    width: 1px; 
    background-color: var(--ssc-border); 
    height: 100%; 
}

/* 
 * The Horizontal Dividing Line (::after)
 */
.contact-box .row::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-50%); 
    height: 1px; 
    background-color: var(--ssc-border); 
    width: 100%; 
}

/* 
 * The GAP MAKER (The element that forces the white space in the center)
 */
.contact-box::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: var(--center-gap-size); 
    height: var(--center-gap-size);
    background-color: var(--theme-color-light); 
    transform: translate(-50%, -50%); 
    z-index: 3; 
}