.contact {padding-block: 70px;}
.contact h2 {margin-bottom: 30px; font-size: var(--fs-xl); font-weight: var(--fw-semi-bold); line-height: 160%; color: var(--clr-primary); margin-bottom: 16px;}
.contact h2 span {font-size: calc(var(--fs-xl) + 6px); color: var(--clr-secondary);}
.contact .columns {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.contact .info ul {display: grid; grid-template-columns: 50% 1fr; gap: 25px 16px; margin-bottom: 25px;}
.contact .info li {display: flex; align-items: center;}
.contact .info li :where(strong, a) {padding-left: 15px; word-break: break-word; font-size: var(--fs-400); color: var(--clr-primary); font-weight: var(--fw-bold);}
.contact .message {max-width: 600px; margin-inline: auto;}
.contact .message p {font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-500); margin-bottom: 30px;}
.contact form :where(input, textarea) {display: block; width: 100%; height: 52px; margin-bottom: 10px; padding: 15px; border: 1px solid var(--clr-secondary); font-size: var(--fs-400);}
.contact form textarea {height: 172px; resize: none;}
.contact form label {display: block; margin-bottom: 10px; font-style: italic;}
.contact form input[type="number"]::-webkit-inner-spin-button {appearance: none;}
.contact form button {width: 190px; float: right; margin-top: 40px;}
.contact .info .map iframe{width:100%;border:0px;}
/* {Media-Query} */
@media only screen and (width < 1200px) {.contact .info li {align-items: start;}}
@media only screen and (width < 991px) {
.contact .columns {grid-template-columns: 1fr;}
.contact h2 {margin-bottom: 16px;}
}
@media only screen and (width < 575px) {
.contact .info li {align-items: center;}
.contact .info ul {grid-template-columns: 1fr; gap: 15px;}
}