/* ___ BANNER ___ */
.banner .container {max-width: 100%; padding: 0;}
.banner .wrapper {position: relative;}
.banner .images picture img {width: 100%; height: 780px; object-fit: cover;}
.banner .main {position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: flex-end; width: 100%; max-width: var(--container-size); height: 100%; padding: 42px var(--container-padding); margin-inline: auto;}
.banner .content {max-width: 450px; background-color: var(--_c-bg-white); padding: 36px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%); border: 2px solid #000; border-radius: 22px;}
.banner .content > :first-child  {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1; margin-bottom: 10px;} 
.banner .content > :first-child * {color: var(--c-primary);}
.banner .content p {max-height: 175px;}
.banner .slick-arrow {position: absolute; top: 48%; width: 50px; height: 50px; z-index: 50;}
.banner .slick-arrow img {width: 30px; height: 30px; filter: invert(1);}
.banner .prev-btn {left: 2%;}
.banner .next-btn {right: 2%;}

/* ___ CONTACT ___ */
.contact {padding-block: 55px 80px;}
.contact .wrapper {display:flex; justify-content: space-between; gap: 40px;}
.contact form {display: flex; flex-direction: column; width: 100%; max-width: 650px;}
.contact form label {display: block; font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 8px; }
.contact form label * {color: var(--c-primary);}
.contact form :is(input, textarea) {width: 100%; padding: 15px 20px; border: 1px solid var(--_c-border); border-radius: 10px; margin-bottom: 22px;}
.contact form :is(input, textarea)::placeholder {color: var(--_c-border);}
.contact form textarea {height: 240px; resize: none;}
.contact form .btn__primary {max-width: 160px; border-radius: 12px; font-weight: 600;}
.contact ul {width: 100%; max-width: 450px;}
.contact ul li, .contact li a  {line-height: 1.4; color: var(--_c-text);}
.contact ul li:first-of-type {max-width: 250px;}
.contact ul li:not(:last-of-type) {margin-bottom: 42px;}
.contact ul li :first-child {display: block; font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; color: #000; margin-bottom: 8px;}
.contact ul li:last-of-type a {margin-top: 12px;}
.map iframe {width: 100%;}

@media only screen and (max-width: 991px) {
    .banner .images picture img {max-height: 540px;}
    .banner .content {padding: 30px;}
    .banner .slick-arrow {top: 25%;}
    .contact {padding-block: 40px 60px;}
    .contact .wrapper {gap: 30px;}
    .contact form {max-width: 100%;}
    .contact form input {margin-bottom: 16px;}
}

@media only screen and (max-width: 767px) {
    .banner .main {height: 100%; align-items: center; justify-content: center; padding-block: 0;}
    .banner .slick-arrow {top: 0; bottom: 0; margin-block: auto;}
    .contact .wrapper {flex-direction: column;}
    .contact ul li:not(:last-of-type) {margin-bottom: 30px;}
    .contact form textarea {height: 200px;}
}

@media only screen and (max-width: 575px) {
    .banner .images picture img {max-height: 400px;}
    .banner .content {padding: 24px;}
    .banner .slick-arrow {top: auto; bottom: 4%; margin: 0;}
    .contact {padding-block: 30px 40px;}
    .contact form :is(input, textarea) {padding: 10px 12px; margin-bottom: 10px;}
    .contact form textarea {height: 150px;}
    .contact ul li:not(:last-of-type) {margin-bottom: 12px;}
    .contact ul li:last-of-type a {margin-top: 8px;}
    .map iframe {height: 400px;}
}

@media only screen and (max-width: 475px) {
    .banner .images picture img {max-height: 350px;}
}