.contact {
margin: 40px 0;
}
.contact__headers {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 30px;
}
.contact__header {
border: 1px solid #EEEEEE;
padding: 14px 20px 20px;
cursor: pointer;
}
.contact__header span {
color: #BEBEBE;
font-family: Poppins;
font-size: 15px;
font-style: normal;
font-weight: 700;
transition: color 0.12s linear;
line-height: normal;
}
.contact__header__title {
color: #BEBEBE;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
transition: color 0.12s linear;
}
.contact__header:hover, .contact__header--active {
position: relative;
}
.contact__header:hover::after, .contact__header--active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #FF0000;
width: 100%;
height: 7px;
}
.contact__header:hover span,
.contact__header:hover .contact__header__title, .contact__header--active span,
.contact__header--active .contact__header__title {
color: #1E1E1E;
}
.contact--next {
display: flex;
margin-left: auto;
cursor: pointer;
margin-right: auto;
}
.contact--prev {
display: none;
}
.contact__step {
display: none;
margin-top: -50px;
padding-top: 50px;
}
.contact__step--active {
display: block;
}
.contact__step__pack {
transition: all 0.12s linear;
border-radius: 6px;
background: #F7F7F7;
padding: 14px 20px;
margin-bottom: 20px;
}
.contact__step__pack:hover:not(:has(.contact__step__card)), .contact__step__pack.activeOption {
background-color: #FF0000;
cursor: pointer;
}
.contact__step__pack:hover:not(:has(.contact__step__card)) .contact__step__name, .contact__step__pack.activeOption .contact__step__name {
color: #ffffff;
}
.contact__step__cards {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 18px;
margin-top: 13px;
}
.contact__step__name {
color: #1E1E1E;
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.contact__step__card {
color: #000;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
cursor: pointer;
min-width: 223px;
transition: all 0.12s linear;
display: flex;
flex-direction: row;
align-items: center;
gap: 25px;
}
.contact__step__card span {
display: block;
}
.contact__step__card input {
height: 26px;
width: 26px;
background-color: #F7F7F7;
accent-color: #000000;
}
.contact__step form {
border-radius: 6px;
background: #F7F7F7;
margin-top: 30px;
padding: 20px 20px 20px;
}
.contact__step form .button {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.contact__step form label[for=selected-offer] {
color: #1E1E1E;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
font-weight: 700;
display: inline-flex;
justify-content: flex-start;
align-items: flex-start;
}
.contact__step form label[for=selected-offer] span {
padding-left: 20px;
display: inline-block;
background-color: transparent;
color: #1E1E1E;
font-weight: 400;
width: fit-content;
border: none;
pointer-events: none;
}
.contact__step form label:not([for=selected-offer]) {
color: #1E1E1E;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.contact__step form label:not([for=selected-offer]) textarea,
.contact__step form label:not([for=selected-offer]) input:not([type=checkbox]) {
border: 1px solid #D8D8D8;
background: #FFF;
min-height: 50px;
margin-top: 10px;
width: 100%;
padding: 0 20px;
}
.contact__step form input[type=checkbox] {
margin-left: 0;
margin-top: 2px;
width: 20px;
height: 20px;
background-color: transparent;
border-radius: 50%;
transform: translateY(-2px);
position: relative;
visibility: hidden;
opacity: 1;
}
.contact__step form input[type=checkbox]:hover {
cursor: pointer;
}
.contact__step form input[type=checkbox]::after {
content: "";
background-color: #ffffff;
visibility: visible;
width: 17px !important;
height: 17px !important;
opacity: 1;
border-radius: 2px;
border: 1px solid #EBEBEB;
position: absolute;
top: 0;
display: block;
left: 0;
}
.contact__step form input[type=checkbox]:checked::before {
content: "";
position: absolute;
background-color: #1E1E1E;
display: block;
border: none;
visibility: visible;
width: 11px !important;
height: 11px !important;
z-index: 2;
top: 4px;
left: 4px;
}
.contact__step form .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
margin-left: 0;
}
.contact__step form .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label {
display: flex;
gap: 22px;
flex-direction: row;
margin-top: 25px;
}
.contact__step form .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label .wpcf7-list-item-label {
color: #1E1E1E;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.contact__step form .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label input {
height: 26px;
width: 26px;
}
@media (min-width: 900px) {
.contact {
margin: 80px 0;
}
.contact__headers {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact__header {
padding: 24px 38px;
}
.contact__steps {
margin-top: 60px;
}
.contact__step__pack {
padding: 30px 34px;
}
}
@media (min-width: 1200px) {
.contact {
margin: 100px 0;
}
.contact--next {
margin-top: 60px;
}
.contact__header__title {
font-size: 24px;
}
.contact__steps {
margin-top: 35px;
}
.contact__step__name {
font-size: 24px;
}
.contact__step form {
padding: 38px;
}
.contact__step form .button {
margin-top: 5px;
}
.contact__step form label:not([for=selected-offer]) {
color: #1E1E1E;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.contact__step form label:not([for=selected-offer]) textarea,
.contact__step form label:not([for=selected-offer]) input:not([type=checkbox]) {
border: 1px solid #D8D8D8;
background: #FFF;
min-height: 50px;
margin-top: 10px;
width: 100%;
padding: 0 20px;
}
.contact__step .row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 20px;
}
}