.contact {
padding: 150px 0 80px;
}
.contact__wrap {
display: flex;
flex-direction: column;
gap: 40px;
}
.contact__title {
margin: 0;
color: var(--clr-black);
font-weight : 600;
}
.contact__block {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.contact__list {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.contact__item {
position: relative;
padding: 24px;
text-decoration: none;
color: var(--clr-gray-600);
border-radius: 12px;
background: var(--clr-gray);
transition: .3s ease-in-out;
}
.contact__item:hover {
background: var(--clr-gray-100);
}
.contact__item::after {
content: '';
position: absolute;
top: 24px;
right: 24px;
width: 20px;
height: 20px;
background: no-repeat url(//vodomatika.ru/wp-content/themes/vodomatika/assets/images/icon/contact_link.svg) center center / cover;
transition: .3s ease-in-out;
}
.contact__item:hover::after {
transform: translateY(-4px);
}
.contact__item-article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
}
.contact__item-img {
height: 42px;
width: 42px;
display: block;
object-fit: cover;
border-radius : 12px ;
background: var(--clr-blue);
}
.contact__item-text {
margin: 0;
font-weight: 600;
}
.contact__form {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.contact__form-group {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 16px;
}
.contact__form-label {
margin: 0;
color: var(--clr-black);
font-weight : 600 ;
}
.contact__form-input {
padding: 10px 20px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-self: stretch;
border-radius: 8px;
background: var(--clr-gray);
outline: none;
border: none;
cursor: pointer;
}
.contact__form-input:focus {
outline: 1px solid var(--clr-blue);
}
.contact__form-textarea {
padding: 10px 20px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-self: stretch;
border-radius: 8px;
background: var(--clr-gray);
outline: none;
border: none;
cursor: pointer;
resize: none;
height: auto;
}
.contact__form-textarea:focus {
outline: 1px solid var(--clr-blue);
}
.contact__form-checkbox-group {
padding: 1px 0px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.contact__form-checkbox {
width: 18px;
height: 18px;
flex: 0 0 18px;
margin: 0;
border-radius: 4px;
border: 1px solid var(--clr-gray-600);
background: var(--clr-gray);
-webkit-appearance: none;
appearance: none;
display: inline-grid;
place-content: center;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.contact__form-checkbox:hover {
border-color: var(--clr-blue);
}
.contact__form-checkbox:active {
transform: scale(0.98);
}
.contact__form-checkbox:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-blue) 25%, transparent);
border-color: var(--clr-blue);
}
.contact__form-checkbox:checked {
background: var(--clr-blue);
border-color: var(--clr-blue);
}
.contact__form-checkbox:checked::after {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid var(--clr-white);
border-bottom: 2px solid var(--clr-white);
transform: rotate(-45deg) translateY(-1px);
}
.contact__form-checkbox:disabled {
opacity: .5;
cursor: not-allowed;
}
.contact__form-label-checkbox {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.contact__form-link {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.contact__form-btn {
padding: 16px 32px;
align-self: stretch;
justify-content: center;
}
.map {
display: flex;
box-sizing: border-box;
background-color: var(--clr-gray);
border: 1px solid var(--clr-gray); 
border-radius: 24px;
overflow: hidden;
}
.map iframe {
height: 574px;
width: 100%;
overflow: hidden;
border: none;
}
@media (max-width: 1024px) {
.contact {
padding: 90px 0 80px;
}
.contact__block {
flex-direction: column-reverse;
}
.map iframe {
height: 420px;
}
}
@media (max-width: 768px) {
.contact {
padding: 40px 0 80px;
}
}
@media (max-width: 430px) {
.contact__list {
display: flex;
flex-direction: column;
}
.contact__form-checkbox-group {
align-items: flex-start;
}
.contact__form-checkbox {
margin-top: 4px;
}
.map iframe {
height: 320px;
}
}