.section-footer--cta {
margin-bottom: var(--space-60);
background-image: url(//www.varia.si/wp-content/uploads/2023/08/footer-cta-background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container-footer--cta {
padding: var(--space-20) var(--space-4) 0 var(--space-4);
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
gap: var(--space-16);
}
.footer-cta__img {
margin-bottom: -164px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.footer-cta-row {
max-width: 520px;
margin-bottom: -30px;
z-index: 2;
}
.footer--cta-header {
display: block;
margin-bottom: var(--space-4);
color: var(--color-white);
font-size: var(--text-3xl);
font-weight: var(--font-normal);
line-height: var(--leading-4);
}
.front-page-service--description {
max-width: 500px;
display: block;
margin-bottom: var(--space-8);
color: var(--color-white);
font-size: var(--text-xxl);
font-weight: var(--font-light);
line-height: var(--leading-6);
}
.footer-cta-row .footer-cta__button {
display: inline-block;
padding: var(--space-3) var(--space-8);
border: 1px solid var(--color-secondary);
border-radius: var(--space-1);
color: var(--color-white);
background-color: var(--color-secondary);
font-size: var(--text-lg);
font-weight: var(--font-light);
line-height: var(--leading-6);
text-decoration: none;
-webkit-border-radius: var(--space-1);
-moz-border-radius: var(--space-1);
-ms-border-radius: var(--space-1);
-o-border-radius: var(--space-1);
}
.footer-cta-row .footer-cta__button:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
@media only screen and (max-width: 1024px) {
.section-footer--cta {
margin-bottom: var(--space-48);
}
.container-footer--cta {
padding-top: var(--space-12);
}
.footer-cta__img {
max-width: 400px;
}
.footer--cta-header {
font-size: var(--text-2xl);
}
.front-page-service--description {
font-size: var(--text-xl);
}
.footer-cta-row .footer-cta__button {
font-size: var(--text-base);
}
}
@media only screen and (max-width: 768px) {
.section-footer--cta {
margin-bottom: var(--space-56);
}
.container-footer--cta {
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--space-8);
}
.footer-cta-row {
margin-bottom: var(--space-4);
}
.footer-cta__img {
max-width: 55%;
float: left;
}
.footer-column.footer-column--fifth img {
max-width: 80px;
max-height: 80px;
}
}