/*
=====================================================
MIR RABBY OFFICIAL
Version 2026 Edition

Contact Section
Human Rights • Social Service • Public Affairs
=====================================================
*/


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

.contact{

    padding:100px 0;

    background:var(--body-bg);

}


/* =========================================
   CONTACT CONTAINER
========================================= */

.contact-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;

}


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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}


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

.contact-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:25px;

    background:var(--white-color);

    border-radius:24px;

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

    transition:var(--transition-normal);

}

.contact-card:hover{

    transform:translateY(-8px);

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

}


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

.contact-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(11,93,59,.10);

    color:var(--primary-color);

    font-size:1.4rem;

    flex-shrink:0;

}


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

.contact-content h3{

    margin-bottom:8px;

    color:var(--primary-color);

}

.contact-content p{

    margin-bottom:6px;

}

.contact-content a{

    color:var(--text-color);

    transition:var(--transition-normal);

}

.contact-content a:hover{

    color:var(--primary-color);

}


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

.contact-form{

    padding:35px;

    background:var(--white-color);

    border-radius:24px;

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

}


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

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--text-color);

}

.form-group input,

.form-group textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid var(--border-color);

    border-radius:14px;

    background:#ffffff;

    transition:var(--transition-normal);

}

.form-group textarea{

    min-height:160px;

}

.form-group input:focus,

.form-group textarea:focus{

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

    box-shadow:0 0 0 4px rgba(11,93,59,.10);

}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-submit{

    width:100%;

    padding:15px;

    border-radius:50px;

    background:var(--primary-color);

    color:var(--white-color);

    font-size:1rem;

    font-weight:600;

    transition:var(--transition-normal);

}

.contact-submit:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}


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

.contact-map{

    margin-top:50px;

    overflow:hidden;

    border-radius:24px;

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

}

.contact-map iframe{

    width:100%;

    height:420px;

}


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

@media (max-width:992px){

    .contact-container{

        grid-template-columns:1fr;

    }

}


@media (max-width:768px){

    .contact{

        padding:80px 0;

    }

    .contact-form{

        padding:25px;

    }

    .contact-map iframe{

        height:300px;

    }

}


@media (max-width:576px){

    .contact-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

}