.form-project-calculation {
padding-bottom: var(--section-gap, 120px);
margin-bottom: var(--section-gap, 120px);
background: linear-gradient(180deg, #E0E5ED 0%, #FFFFFF 100%);
@media screen and (max-width: 640px) {
--section-gap: 60px;
}
& * {
font-family: 'Mulish', sans-serif !important;
}
}
.form-project-calculation__wrapper {
display: flex;
column-gap: 0;
align-items: stretch;
& .form-project-calculation__content {
width: 520px;
min-width: 520px;
@media screen and (max-width: 1024px) {
width: 480px;
min-width: 480px;
}
@media screen and (max-width: 768px) {
width: 100%;
min-width: auto;
}
}
& .form-project-calculation__background {
width: 100%;
height: 520px;
margin-top: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: left bottom;
transform: translateX(-30px);
@media screen and (max-width: 1024px) {
height: auto;
margin-top: 0;
}
@media screen and (max-width: 768px) {
display: none;
}
}
}
.form-project-calculation__header {
display: flex;
row-gap: 20px;
flex-direction: column;
@media screen and (max-width: 1024px) {
row-gap: 16px;
}
& .form-project-calculation__title {
width: 570px;
font-size: 40px;
font-weight: 700;
line-height: 52px;
color: #1F4FCE;
margin-bottom: 0;
@media screen and (max-width: 1024px) {
font-size: 28px;
line-height: 35px;
width: 100%;
}
@media screen and (max-width: 640px) {
font-size: 22px;
line-height: 29px;
}
}
& .form-project-calculation__subtitle {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #1B1B1B;
margin-bottom: 0;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 24px;
}
}
}
.form-project-calculation__panel {
margin-top: 40px;
& .form-project-calculation__form {
display: flex;
row-gap: 25px;
flex-direction: column;
margin-bottom: 0;
@media screen and (max-width: 490px) {
row-gap: 20px;
}
& label {
margin: 0;
}
}
& .form-project-calculation__row {
display: flex;
column-gap: 30px;
align-items: center;
@media screen and (max-width: 1024px) {
column-gap: 20px;
}
@media screen and (max-width: 490px) {
row-gap: 20px;
flex-direction: column;
}
}
& .form-project-calculation__field {
display: block;
width: 100%;
& input[type="text"] {
width: 100%;
height: 41px;
border-radius: 40px;
border: 1.5px solid #1F4FCE;
background: transparent;
padding: 0 16px;
font-family: 'Mulish', sans-serif;
font-size: 16px;
color: #0C3E9A;
outline: none;
box-sizing: border-box;
&::placeholder {
color: #5177DD;
}
}
}
& .form-project-calculation__agree {
width: 100%;
display: flex;
gap: 10px;
align-items: flex-start;
position: relative;
}
& .form-project-calculation__agree.is-error svg rect {
stroke: #ff6b6b;
}
& .form-project-calculation__agree.is-error {
animation: shake 0.3s;
}
& .form-project-calculation__checkbox-input {
position: absolute !important;
opacity: 0;
pointer-events: none;
bottom: auto !important;
margin: 0 !important;
}
& .form-project-calculation__checkbox-ui {
display: flex;
align-items: center;
min-width: 19px;
height: 19px;
flex-shrink: 0;
cursor: pointer;
margin-top: 3px;
}
& .form-project-calculation__checkbox-ui svg {
display: block;
}
& .form-project-calculation__checkbox-ui svg rect {
stroke: rgba(31, 79, 206, 1);
}
& .form-project-calculation__checkbox-check {
stroke: rgba(31, 79, 206, 1);
}
& .form-project-calculation__checkbox-check {
stroke-dasharray: 20;
stroke-dashoffset: 20;
opacity: 1;
transition: stroke-dashoffset 0.25s ease;
}
& .form-project-calculation__checkbox-input:checked + .form-project-calculation__checkbox-ui .form-project-calculation__checkbox-check {
stroke-dashoffset: 0;
}
& .form-project-calculation__agree-text {
font-family: 'Mulish', sans-serif;
font-size: 16px;
line-height: 1.5;
color: rgba(27, 27, 27, 1);
}
& .form-project-calculation__agree-text a,
& .form-project-calculation__agree-text a:hover,
& .form-project-calculation__agree-text a:focus,
& .form-project-calculation__agree-text a:active {
color: inherit;
text-decoration: underline;
}
& .form-project-calculation__submit {
width: 100%;
height: 41px;
cursor: pointer;
font-family: Mulish, sans-serif;
font-weight: 600;
font-size: 16px;
color: rgb(255, 255, 255);
border-radius: 40px;
background: linear-gradient(180deg, #4085D9 0%, #0C3E9A 100%);
border-width: medium;
border-style: none;
border-color: currentcolor;
border-image: none;
transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
&:hover {
transform: translateY(-2px);
opacity: 0.95;
}
}
& .form-project-calculation__success {
display: none;
margin-top: 20px;
color: rgb(31, 79, 206);
font-size: 16px;
text-align: center;
padding: 14px 18px;
border-radius: 16px;
background: rgba(31, 79, 206, 0.1);
animation: 0.3s ease 0s 1 normal none running fadeIn;
&.is-visible {
display: block;
}
}
& .form-project-calculation__quform-hidden {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
0%   { transform: translateX(0); }
25%  { transform: translateX(-4px); }
50%  { transform: translateX(4px); }
75%  { transform: translateX(-4px); }
100% { transform: translateX(0); }
}