#form-block {
padding-top: 100px;
padding-bottom: 100px;
position: relative;
z-index: 1;
}
#form-block .form__img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%; }
#form-block .form__container {
max-width: 1300px;
display: flex;
gap: 30px;
}
#form-block .form__container .form-block-left {}
#form-block .form__container .form__title {
color: var(--text-alt-head);
}
#form-block .form__container .form__list ul {
display: flex;
flex-direction: column;
gap: 15px;
list-style: none;
}
#form-block .form__container .list-title {
color: var(--text-alt-head);
margin-bottom: 30px;
}
#form-block .form__container .form__list ul li {
color: var(--text-alt-main); font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
display: flex;
align-items: center;
}
#form-block .form__container .form__list ul li::before {
content: " ";
width: 10px;
height: 10px;
background: var(--colors-main);
display: inline-block;
margin-right: 10px;
}
#form-block .form__container .btn-container {
display: flex;
gap: 30px;
align-items: center;
margin-top: 60px;
}
#form-block .form__container .form__btn {
padding: 15px 30px 15px 25px;
gap: 10px;
border-radius: 10px;
box-shadow: 0px 4px 0px 0px #cc4500;
position: relative;
z-index: 1;
transition: var(--transition);
background: var(--colors-main);
}
#form-block .form__container .form__btn:hover {
transition: var(--transition);
}
#form-block .form__container .form__btn::before {
content: "";
background: linear-gradient(260.8deg, #ff5700 8.5%, #ff874a 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
}
#form-block .form__container .form__btn:hover::before {
transition: var(--transition);
opacity: 0;
}
#form-block .form__container .form__btn .btn__text {
color: var(--text-alt-head);
}
#form-block .form__container .form-block-right {
background: var(--bg-primary-main);
min-width: 620px;
}
#form-block .form__container .form-block-right .form.form-v2 {
padding: 30px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-title span {
color: var(--colors-second);
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container {
display: flex;
gap: 30px;
align-items: center;
margin-top: 30px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder {
gap: 15px;
flex-direction: row-reverse;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder .soc {
height: 50px;
width: unset;
background: var(--bg-primary-main);
border: 1px solid var(--bg-primary-stroke);
border-radius: 8px;
padding: 20px 15px;
gap: 15px;
transition: var(--transition);
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder .soc .soc-text {
color: var(--text-primary-main);
transition: var(--transition);
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder .soc:hover {
border-color: var(--colors-main);
transition: var(--transition);
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder .soc:hover .soc-text {
color: var(--text-alt-head);
transition: var(--transition);
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc {
color: var(--text-primary-main);
max-width: 160px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-bottom {
margin-top: 30px;
color: var(--text-primary-main);
}
#form-block .form__container .form-block-right .form.form-v2 .inputs__holder {
margin-top: 30px;
gap: 15px;
}
#form-block .form__container .form-block-right .form.form-v2 .inputs__holder .input__wrapper {
max-width: unset;
}
#form-block .form__container .form-block-right .form.form-v2 .btn.invert {
margin-top: 30px;
border: 1px solid var(--colors-main);
background: transparent;
color: var(--colors-main);
position: relative;
z-index: 1;
transition: var(--transition);
}
#form-block .form__container .form-block-right .form.form-v2 .btn.invert:hover {
color: var(--text-alt-head);
transition: var(--transition);
}
#form-block .form__container .form-block-right .form.form-v2 .btn.invert::before {
content: "";
background: linear-gradient(260.8deg, #FF5700 8.5%, #FF874A 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
opacity: 0;
}
#form-block .form__container .form-block-right .form.form-v2 .btn.invert:hover::before {
opacity: 1;
transition: var(--transition);
}
@media(max-width: 1200px) {
#form-block .form__container .form-block-right .form.form-v2 {
padding: 15px;
}
#form-block .form__container .form-block-right {
min-width: unset;
}
#form-block .form__container .form-block-right .form-top {
display: none;
}
}
@media(max-width: 960px) {
#form-block .form__container {
flex-direction: column;
}
}
@media (max-width: 768px) {
#form-block {
padding-top: 40px;
padding-bottom: 40px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container {
margin-top: 15px;
}
#form-block .form__container .form-block-right .form.form-v2 .inputs__holder {
margin-top: 15px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-bottom {
margin-top: 15px;
}
#form-block .form__container .form-block-right .form.form-v2 .btn.invert {
margin-top: 15px;
}
}
@media (max-width: 600px) {
.btn-container {
margin-top: 20px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
}
@media (max-width: 450px) {
#form-block .form__container .form__list ul {
display: flex;
flex-direction: column;
gap: 7px;
list-style: none;
}
}
@media(max-width: 400px) {
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder {
flex-direction: column-reverse;
gap: 10px;
}
#form-block .form__container .form-block-right .form.form-v2 .block-form-desc-container .soc-holder .soc {
width: 100%;
}
}