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

.contact-layout{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:35px;

    align-items:start;

}

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

.contact-info{

    padding:35px;

}

.contact-info h2{

    margin-bottom:30px;

}

.info-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

    align-items:flex-start;

}

.info-item i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(214,40,40,.12);

    color:var(--accent);

    font-size:22px;

}

.info-item h4{

    margin-bottom:6px;

}

.info-item p{

    color:var(--muted);

    line-height:1.7;

}

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

.contact-form{

    padding:35px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-form textarea{

    resize:vertical;

    min-height:170px;

}

.contact-form input,

.contact-form textarea{

    transition:.25s;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--accent);

    box-shadow:0 0 0 3px rgba(214,40,40,.12);

}


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

.map-box{

    margin-top:45px;

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.map-box iframe{

    width:100%;

    height:480px;

    border:none;

}


/*==================================================
                HOVER
==================================================*/

.contact-info{

    transition:.3s;

}

.contact-info:hover{

    transform:translateY(-5px);

}

.contact-form{

    transition:.3s;

}

.contact-form:hover{

    transform:translateY(-5px);

}


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

@media(max-width:992px){

.contact-layout{

grid-template-columns:1fr;

}

.map-box iframe{

height:350px;

}

}

@media(max-width:768px){

.info-item{

flex-direction:column;

align-items:center;

text-align:center;

}

.contact-info,

.contact-form{

padding:25px;

}

}