#realestate-review {
width: 100%;
max-width: 1160px;
margin: 0 auto 40px auto;
}
.realestate-review-footer {
padding: 2em 2em;
display: flex;
justify-content: space-between;
align-items: center;	
}
span.check {
position: relative;
padding-left: 36px;
font-size: var(--body2-font-size);
color: var(--grey-500);
line-height: 125%;
text-transform: uppercase;
letter-spacing: 0;
}
span.check:before {
content: '✓';
width: 24px;
height: 24px;
background-color: var(--purple-600);
font-size: 16px;
color: var(--grey-100);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: absolute;
left: 0;
}
.realestate-review-box {
background-color: var(--grey-100);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 40px;
position: relative;
}
#progress-bar {
width: 100%;
height: 10px;
background: #e0e0e0;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.progress {
height: 100%;
background-color: var(--purple-600);
width: 0%;
transition: width 0.3s ease;
}
.step {
text-align: left;
}
.option-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.option {
width: 240px;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
background-color: var(--grey-100);
border-radius: 10px;
margin: 10px;
cursor: pointer;
box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
opacity: 0;
transition: transform 0.25s ease, box-shadow 0.25s ease;
animation: fadeInCard 1s ease forwards;
}
.option:hover {
transform: translateY(-10px);
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
}
.option .link {
padding: 20px;
}
.option img,
.step img {
width: 120px;
height: 120px;
margin: 0 auto 10px auto;
}
.option p {
font-size: var(--body1-font-size);
font-weight: var(--bold-weight);
color: var(--grey-500);
}
.option a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
.option a p {
}
#realestate-review h2 {
margin: 40px auto;
text-align: center;
}
#realestate-review h2 {
max-width: 80%;
}
h3 {
}
.info {
margin-top: 10px;
margin-left: 180px;
background-color: #f8f8f8;
padding: 20px;
border-radius: 5px;
}
.info p {
margin: 0 0 12px 0;
padding: 0;
font-size: 14px;
color: #6c7688;
text-align: left;
}
.info p:last-child {
margin: 0;
} label {
display: block;
margin: 15px 0;
color: var(--grey-500);
cursor: pointer;
}
label.unit {
margin-left: 20px;
}
.form-input {
margin: 40px 0;
}
.input-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.input-container label:first-child {
width: 180px;
font-weight: var(--bold-weight);
text-align: left;
} input[type="number"],
input[type="text"],
input[type="tel"],
input[type="email"],
select.wpcf7-select {
width: 220px;	
}
input[type="number"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select.wpcf7-select:focus {
border: 1px solid var(--purple-600);
outline: 1px solid var(--purple-600);
} .buttons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
button.prev-button {
background-color: #ccc;
color: var(--grey-500);
}
button.next-button,
button.prev-button,
button#submit-button {
border: none;
border-radius: 25px;
padding: 10px 20px;
cursor: pointer;
margin-top: 20px;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
}
button.next-button,
button#submit-button {
background-color: var(--purple-600);
color: var(--grey-100);
}
button.next-button:hover,
button.prev-button:hover,
button#submit-button:hover {
background-color: var(--grey-500);
color: var(--grey-100);
}
button:disabled,
button:disabled:hover {
background-color: #d4d4d4;
color: #ccc;
cursor: not-allowed;
} input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 5px;
outline: none;
transition: background 0.3s;
position: relative;
margin-bottom: 40px;
}
input[type="range"]:hover {
background: #d4d4d4;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background-color: var(--purple-600);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
position: relative;
top: -8px;
}
input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
background-color: var(--purple-600);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
position: relative;
top: -8px;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: linear-gradient(to right, #e0e0e0, #e0e0e0);
border-radius: 5px;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 8px;
background: linear-gradient(to right, #e0e0e0, #e0e0e0);
border-radius: 5px;
}
.tooltip {
position: absolute;
background-color: var(--purple-600);
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 14px;
transform: translate(-50%, -100%);
white-space: nowrap;
pointer-events: none;
}
.range-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.range-axis {
display: flex;
justify-content: space-between;
font-size: 16px;
color: #9fa5b0;
margin-top: -25px;
} .error-message {
color: var(--red-600);
background-color: #f8d7da;
border: 1px solid #f5c6cb;
padding: 10px;
border-radius: 5px;
font-size: 14px;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.error-message.show {
opacity: 1;
}
.error-message svg {
fill: var(--red-600);
width: 20px;
height: 20px;
} @keyframes fadeInCard {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media only screen and (max-width: 768px) {
.option {
width: 200px;
height: 200px;
}
.option img,
.step img {
width: 64px;
height: 64px;
}
.realestate-review-footer {
display: block;
}
span.check {
max-width: 100%;
margin-bottom: 20px;
display: block;
}
.input-container {
flex-wrap: wrap;
}
.input-container label:not(.unit) {
width: 100%;
}
}
@media only screen and (max-width: 575px) {
.realestate-review-footer {
padding: 2em 0 0 0;
}
}