/*
========================================
Contact style
========================================
*/

.page-content {

    background:var(--medipro-white);

    padding:var(--space-xl);

    margin:var(--space-xl) 0;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

}


.page-content h1 {

    color:var(--medipro-primary);

}


/*
========================================
Contact Section Layout
========================================
*/


.medipro-contact {

    padding:
    var(--space-2xl) 0;

}



.contact-grid {

    display:grid;

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

    gap:
    var(--space-xl);

}



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

    background:
    var(--medipro-white);

    padding:
    40px;

    border-radius:
    var(--radius-md);

    box-shadow:
    var(--shadow-sm);

}



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

    margin-bottom:
    var(--space-md);

}



.contact-form-wrapper p {

    margin-bottom:
    var(--space-lg);

    color:
    var(--medipro-muted);

}



.form-group {

    margin-bottom:
    20px;

}



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

    width:100%;

    padding:14px;

    border:
    1px solid #ddd;

    border-radius:
    var(--radius-sm);

    font-size:16px;

}



.form-group textarea {

    resize:vertical;

}



.contact-item {

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:25px;

}



.contact-item i {

    color:
    var(--medipro-primary);

    font-size:22px;

    margin-top:5px;

}



.contact-item h4 {

    margin-bottom:5px;

}



.contact-item p {

    color:
    var(--medipro-muted);

}



.contact-map {

    margin-top:
    var(--space-lg);

    height:300px;

    overflow:hidden;

    border-radius:
    var(--radius-md);

}


.contact-map iframe {

    width:100%;

    height:100%;

    border:0;

}



/*
========================================
Responsive
========================================
*/


@media(max-width:768px){


.contact-grid {

    grid-template-columns:
    1fr;

}


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

    padding:25px;

}


}


/*
========================================
Plugin Form Styling
========================================
*/

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

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #D1D5DB;

    border-radius: var(--radius-sm);

    background: #ffffff;

    color: var(--medipro-text);

    font-size: 16px;

    transition: all .3s ease;

    box-sizing: border-box;

    margin-bottom: 20px;

}


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

    outline: none;

    border-color: var(--medipro-primary);

    box-shadow: 0 0 0 3px rgba(15,98,254,.15);

}


.medipro-contact-form textarea {

    min-height: 160px;

    resize: vertical;

}


.medipro-contact-form input[type="submit"],
.medipro-contact-form button,
.medipro-contact-form .wpcf7-submit {

    background: var(--medipro-primary);

    color: #fff;

    border: none;

    padding: 14px 30px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: .3s;

}


.medipro-contact-form input[type="submit"]:hover,
.medipro-contact-form button:hover,
.medipro-contact-form .wpcf7-submit:hover {

    background: var(--medipro-secondary);

}