
.hero-content {
    position: absolute;
    z-index: 4;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.opacity-50 {
    opacity: 50%;
}

.hero--swiper .swiper-next-prev-container {
    position: unset;
    margin-bottom: unset;
    width: 100%;
    left: unset;
    top: unset;
    transform: unset;
    z-index: unset;
    padding: unset;
}

.hero-swiper-control {
    position: relative;
    padding: 2rem;
}

.hero-swiper-control > * {
    position: relative;
    z-index: 2;
}

.logo-container svg {
    fill: #FFF;
}

.rewards-container img {
    max-height: 250px;
}

footer a {
    transition: var(--transition);
    font-weight: var(--font-bold);
}

footer a:hover {
    color: var(--color-primary);
}

footer .logo {
    max-width: 200px;
}

.hero-swiper-control::after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: var(--color-primary);
    z-index: 1;
    opacity: .85;
}

.pe-none {
    pointer-events: none;
}

.hero--swiper .swiper-next-prev-container {
    width: auto;
    gap: 1rem;
}

.hero-ap-title {
    opacity: 50%;
    transition: var(--transition);
}

.hero-ap-title[data-active] {
    opacity: 1;
}

.hero--swiper .swiper-horizontal>.swiper-pagination-bullets,
.hero--swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.hero--swiper .swiper-pagination-custom, 
.hero--swiper .swiper-pagination-fraction {
    position: relative;
    transform: unset;
    left: unset;
    bottom: unset;
    display: flex;
    gap: 1rem;
}

.hero--swiper .swiper-pagination-bullet {
    display: block;
    white-space: nowrap;
    width: unset;
    height: unset;
    border-radius: unset;
    background-color: unset;
    font-size: 1.25rem;
}

.footer-policy {
    position: relative;
    z-index: 10;
}

.hero .social-container {
    position: absolute;
    z-index: 10;
}

.image-container {
    border-radius: 0;
}

.image-container-100vh {
    height: 100vh;
}

.facility {
    padding: 1.5rem;
    background-color: #F1F1F1;
}

.service svg {
    width: 15px;
    min-width: 15px;
    display: block;
}

.facility-cta {
    background-color: var(--color-primary);
}

.cell-image {
    background-image: url('../images/facilities.jpg');
    background-position: center;
}

.cell-image:nth-child(2n) {
    background-image: url('../images/facilities-2.jpg');
}

footer {
    background-color: #FAFAFA;
    color: var(--color-black);
}

footer .h2 {
    line-height: 1;
}

.practical-swiper-content .text-right svg {
    min-width: 1rem;
    min-height: 1rem;
    display: block;
}

.footer-cta {
    border: 1px solid var(--color-black);
    border-radius: 100vw;
    text-align: center;
    font-weight: var(--font-bold);
    transition: var(--transition);
}

.footer-policy {
    border-top: 1px solid #DCDCDC;
    padding-top: 1rem;
}

.footer-ul ul {
    list-style-type: none;
    color: var(--color-gray);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

footer {
    overflow: hidden;
    position: relative;
}

.footer-circle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(82.5%);
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-white);
    border-radius: 50%;
}

.section-no-padding {
    padding: 0;
}

.footer-logo-cnt {
    position: relative;
    z-index: 2;
}

.editorial-container-cell-one-bg {
    width: 15%;
    background-color: var(--color-primary);
}

.editorial-container-cell-content {
    padding: 2rem;
    width: 85%;
    background-color: #f1f1f1;
}

.editorial-container-cell-one-bg {
    position: relative;
}

.editorial-container-cell-one-bg svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.editorial-container-cell-image {
    background-image: url('../images/editorial.jpg');
    background-position: center;
    background-size: cover;
}

.in-the-area-one svg {
    width: 100%;
}

.practical-swiper-content {
    padding: 1.5rem;
    border: 1px solid #DCDCDC;
    border-top: unset;
}

.coming-soon-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: #fff;
    font-size: 5rem;
    width: 100%;
    text-align: center  ;
}

.hero-ap-big-font sup {
    font-size: 1rem;
    top: 0;
    display: inline-block;
    transform: translateY(-1rem);
}

.hero--apartment::after {
    display: none;
}

.hero--apartment::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    z-index: 2;
}

.apartament-facilities {
    background-color: #FAFAFA;
    padding: 1.5rem;
}

.apartament-facilities-container {
    --aspect-ratio: 960/1080;
}

.facility-box[data-active] {
    display: block;
}

.facility-box {
    display: none;
}

.button-facility {
    font-weight: var(--font-bold);
    color: var(--color-gray);
    transition: var(--transition);
}

.button-facility[data-active] {
    color: var(--color-primary);
    text-decoration: underline;
}

.statement-container {
    position: relative;
    z-index: 2;
}

.service > .flex {
    border-bottom: 1px solid var(--color-black);
}


.contact-detail-cst {
    padding: 1rem;
    text-align: center;
    border: 1px solid #f1f1f1;
    transition: var(--transition);
}

.default-form--2 input, 
.default-form--2 textarea {
    outline: unset;
    transition: var(--transition);
    padding: 1rem;
    border-bottom: 1px solid #CECECE;
    border-top: unset;
    border-left: unset;
    border-right: unset;
    background-color: transparent;
    color: #8E8E8E;
    border-radius: 0;
}

.default-form--2:not(.default-form--3) .checkbox-virtual__text {
    color: #8E8E8E;
}

.default-form--2 .checkbox-virtual .checkbox-virtual__checkbox,
 .default-form--2 .radio-virtual .radio-virtual__checkbox {
    border-color: #8E8E8E;
}

.default-form--2:not(.default-form--3) .checkbox-virtual .checkbox-virtual__checkbox svg path,
 .default-form--2:not(.default-form--3) .radio-virtual .radio-virtual__checkbox svg path {
    fill: var(--color-black);
}

.default-form--2:not(.default-form--3) button {
    font-weight: var(--font-bold);
    cursor: pointer;
    outline: none;
    color: var(--color-white);
    font-size: 1.25rem;
    border: 1px solid var(--color-white);
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20rem;
    aspect-ratio: 1;
}

.grid-arrow {
    margin-top: 0;
}

.default-form--2 .input-file-container {
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid var(--color-white);
}

.default-form--3 input {
    color: var(--color-white);
}

.default-form--3 button::after {
    background-color: var(--color-white);
}

.default-form--3 button {
    color: var(--color-primary);
}


.default-form--3 input:focus, 
.default-form--3 textarea:focus {
    border-color: orange;
}

.invalid-input {
    border-color: var(--color-error) !important;
    border-style: solid;
    animation: shake 500ms linear
}

.check-in-page .checkbox-virtual__text a:hover {
    color: yellow;
}

.apartament-benefits-container img {
    display: none;
}

.apartament-benefits-container img[data-active] {
    display: block;
}



@media (min-width: 64rem) {

    .swiper-next-prev-container {
        width: 95%;
    }

    .hero-swiper-control {
        width: 30%;
    }

    .hero-absolute-container {
        bottom: 0rem;
        z-index: 5;
    }

    .image-translate {
        transform: translateY(-4rem);
    }

    .text-translate {
        transform: translateY(10rem);
    }

    .section-no-padding-bottom {
        padding-bottom: 0;
    }

    .facility > div:not(:last-child) {
        margin-bottom: 12rem;
    }

    .footer-cta {
        padding: 1.5rem;
    }

    .footer-cta:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

    .hero--secondary h1 {
        font-size: 6rem;
    }
    
    .editorial-container-cell-content div:first-child {
        margin-bottom: 31.25rem;
    }

    .hero--apartment h1 {
        font-size: 12.5rem;
    }

    .hero-ap-big-font {
        font-size: 4rem;
    }

    .swiper-type-three .swiper-slide:nth-child(2n) img {
        transform: scale(.8);
    }

    .big-font-service {
        font-size: 3rem;
        line-height: 1.2;
        text-indent: 10vw;
    }

    .service-translate {
        margin-top: -15rem;
    }

    .service-translate img {
        opacity: .8;
    }

    .service:nth-child(2n) {
        margin-top: 10rem;
    }

    .contact-detail-cst:hover {
        border-color: var(--color-primary);
    }

    .contact-container {
        background-color: #f1f1f1;
        padding: 2rem;
    }

    .btn-form-container {
        background-color: var(--color-primary);
    }

    .default-form--3 button:hover {
        color: var(--color-white);
    }

    .default-form--3 button:hover::after {
        background-color: var(--color-primary);
    }

    .button-facility {
        cursor: pointer;
    }

}

@media (max-width: 63.9375rem) {

    .hero--swiper .swiper-horizontal>.swiper-pagination-bullets,
    .hero--swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
    .hero--swiper .swiper-pagination-custom, .swiper-pagination-fraction {
        margin-top: .85rem;
    }

    .hero--swiper .hero-absolute-container {
        bottom: 0;
        text-align: left;
    }

    .hero-swiper-control {
        padding: 1rem 0 6rem 0;
    }

    .hero .social-container {
        bottom: 1rem;
        left: var(--grid-container-padding-x);
    }

    .hero .social-container a, 
    .hero .social-container div {
        width: 2.5rem;
        height: 2.5rem;
    }

    .hero .social-container a.social-facebook svg {
        width: .8rem;
        min-width: .8rem;
    }

    .hero .social-container a.social-instagram svg {
        width: 1.1rem;
        min-width: 1.1rem;
    }

    .hero--swiper .swiper-pagination-bullet {
        padding: 0;
    }


    .hero--swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
    .hero--swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0;
    }

    .hero--swiper .swiper-horizontal>.swiper-pagination-bullets, 
    .hero--swiper .swiper-pagination-bullets.swiper-pagination-horizontal, 
    .hero--swiper .swiper-pagination-custom, .hero--swiper .swiper-pagination-fraction {
        gap: 0;
        justify-content: space-between;
        width: 100%;
        margin-top: .35rem;
    }

    .width-100 {
        width: 100%;
        padding: 0 var(--grid-container-padding-x);
    }

    .hero--homepage h1 {
        font-size: 2.5rem;
    }

    .full-grid-container {
        padding: 0 var(--grid-container-padding-x);
    }

    .cell-image {
        aspect-ratio: 650/750;
        background-size: cover;
    }

    
    .facility > div:not(:last-child) {
        margin-bottom: 3rem;
    }

    .footer-cta {
        padding: 1rem;
    }

    .footer-ul ul {
        justify-content: center;
    }

    .hero--secondary {
        padding: 10rem 0 3rem 0;
    }

    .hero--secondary h1 {
        font-size: 2.5rem;
    }

    .editorial-container-cell-image {
        height: 40vh;
    }

    .hero--apartment {
        padding: 10rem 0 3rem 0;
    }

    .hero--apartment .hero-absolute-container {
        margin-top: 3rem;
    }

    .hero-ap-big-font sup {
        transform: translateY(0);
    }

    .hero-ap-big-font {
        font-size: 2rem;
    }

    .facilities-buttons {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .apartament-facilities {
        background-color: #fff;
        padding: 0;
    }

    .big-font-service {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .footer-ul ul {
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .footer-ul ul li {
        width: 100%;
    }

}

@media (max-width: 23.438rem) { 

    .hero--homepage h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: .85rem;
    }

    .hero .cta-primary {
        padding: .8rem 2rem;
    }

    .hero-swiper-control {
        padding: 1rem 0 5rem 0;
    }

}
