/*===================== SECTION FIRST OF WEBSITE ===========================*/

.section-banner {
    width: 100%;
    height: 40vw;
    position: relative;
    justify-content: center;
    display: flex;
}

.section-banner figure.img-style {
    width: 100%;
    height: 40vw;
    position: absolute;
}
.section-banner figure.img-style::after {
    content: "";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(119deg, rgb(0 0 0 / 35%) 0%, rgb(0 0 0 / 51%) 30.61%, rgb(17 34 63 / 33%) 101.98%);
    top: 0;
    left: 0;
    right: 0;
}
.section-banner figure.img-style img {
    width: 100%;
    height: 100%;
    display: block;
}

.section-banner .details-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
    align-items: center;
    height: 100%;
    padding: 0vw 13vw;
    gap: 3vw;
    color: white;
}

.section-banner .content-search {
    display: flex;
    position: absolute;
    bottom: -3.5vw;
    z-index: 4;
    width: fit-content;
    justify-content: center;
    align-items: center;
    background: white;
    box-shadow: 0px 5px 10px rgba(170, 170, 170, 0.171);
}
.section-banner .content-search .button-search {
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
    padding: 3vw;
    background: var(--black-color-alt);
}

/*===================== SECTION SECUND OF WEBSITE ===========================*/

.section-room {
    padding: 7vw 0vw 5.2083vw 0vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.2083vw;
    width: 100%;
    transition: all .5s ease-in-out;
}

.section-room .content-details-room {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2.343vw;
    transition: all .5s ease-in-out;
}

.section-room .content-details-room .content-bottom-room {
    display: flex;
    justify-content: flex-start;
    gap: 4.062vw;
    width: 100%;
}
.section-room .content-details-room .content-bottom-room.inverse {
    flex-direction: row-reverse;
}


.section-room .content-details-room .content-bottom-room .content-left .img-room {
    position: relative;
    display: flex;
    top: 0;
    left: 0;
    width: 55.2604vw;
    height: 34.21875vw;
}
.section-room .content-details-room .content-bottom-room .content-left .img-room img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    opacity: 0;
    transition: all .5s ease-in-out;
}
.section-room .content-details-room .content-bottom-room .content-left .img-room img.active {
    opacity: 1;
    transition: all .5s ease-in-out;
}

.section-room .content-details-room .content-bottom-room .content-left .list-img {
    display: flex;
    gap: 0.3125vw;
    position: absolute;
    width: 55.2604vw;
    height: 34.21875vw;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 1.822916vw;
    /* transform: translateX(27.6302vw) translateY(32.3955vw); */
}
.section-room .content-details-room .content-bottom-room .content-left .list-img .content-icon {
    content: "";
    position: relative;
    background: transparent;   
    width: 0.989vw;
    height: 0.62vw;
    border-radius: 4px;
    border: 2px solid #C5C5C5;
    cursor: pointer;
    transition: all .5s ease-in-out;
}
.section-room .content-details-room .content-bottom-room .content-left .list-img .content-icon.active {
    width: 2.1875vw;
    background: white;   
    border: 2px solid white;
    transition: all .5s ease-in-out;
}

.section-room .content-details-room .content-bottom-room .content-right {
    display: flex;
    flex-direction: column;
    /* gap: 7.604vw; */
    gap: 2.8125vw;
    width: 100%;
    padding-top: 3vw;
}
.section-room .content-details-room .content-bottom-room.inverse .content-right {
    padding-left: 5.2083vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* gap: 2.8125vw; */
}

.section-room .content-details-room .content-bottom-room .content-right .details-right .title-accroche {
    font-size: var(--h2-size);
    font-family: var(--font-name);
    font-weight: 700;
    color: var(--color-secundary);
    line-height: 2.447vw;
}


.section-room .content-details-room .content-bottom-room .content-right .details-right .price-details {
    display: flex;
    gap: 1.562vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .price-details .one-price {
    background: white;
    border-radius: 5px;
    padding: 0.3125vw 1.04166vw;
    display: flex;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .price-details .one-price .device {
    border-right: 1px solid #000;
    color: var(--color-secundary);
    padding-right: 0.5208vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .price-details .one-price .price {
    font-size: var(--h5-size);
    font-weight: 400;
    line-height: 1.45833vw;
    padding-left: 0.5208vw;
    color: var(--color-primary);
}

.section-room .content-details-room .content-bottom-room .content-right .details-right .subtitle-content {
    font-size: var(--h5-size);
    font-family: var(--font-name);
    font-weight: 400;
    color: var(--color-secundary);
    line-height: 1.4583vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right p.description {
    font-size: var(--p-size-alt);
    font-family: var(--font-name);
    color: var(--color-gray-alt);
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content {
    display: flex;
    flex-direction: column;
    gap: 1.3541vw;
    justify-content: flex-start;
    align-items: flex-start;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service .text {
    font-size: var(--h5-size);
    font-family: var(--font-name);
    font-weight: 400;
    color: var(--color-secundary);
    line-height: 1.4583vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service .img-fluidd {
    width: 1.2421vw;
    height: 1.25vw;
}
.section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service .img-fluidd img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.section-room .content-details-room .content-bottom-room .content-right .btn-see-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.52083vw;
    padding: 0.80729vw 1.5625vw;
    border: 1px solid var(--color-secundary);
    border-radius: 5px;
    background: white;
    width: max-content;
    transition: all .5s ease-in-out;
}
.section-room .content-details-room .content-bottom-room .content-right .btn-see-more:hover {
    background: var(--color-secundary);
    transition: all .5s ease-in-out;
}
.section-room .content-details-room .content-bottom-room .content-right .btn-see-more .icon-see {
    margin-bottom: .134vw;
    width: 1.145833333vw;
    height: 1.145833333vw;
}
.section-room .content-details-room .content-bottom-room .content-right .btn-see-more .icon-see img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-room .content-details-room .content-bottom-room .content-right .btn-see-more:hover .icon-see img {
    /* filter: contrast(100);     */
    filter: invert(4);    
    transition: all .5s ease-in-out;
}
.section-room .content-details-room .content-bottom-room .content-right .btn-see-more .text-see {
    font-size: var(--p-size-alt);
    font-family: var(--font-name);
    font-weight: 700;
    color: var(--color-secundary);
    line-height: 1.25vw;
    text-align: center;
    transition: all .5s ease-in-out;
}
.section-room .content-details-room .content-bottom-room .content-right .btn-see-more:hover .text-see {
    color: white;
    transition: all .5s ease-in-out;
}

.os-tab-head::after{
    display: none;
}

@media (max-width:768px) {

    /* SECTION FIRST  */
    .section-banner {
        width: 100%;
        height: 100vh;
    }
    .section-banner figure.img-style {
        width: 100%;
        height: 100vh;    
    }
    
    /* SECTION SECUND  */
   .section-room .content-details-room .content-bottom-room .content-left .img-room {
        width: 100%;
        height: 70.21875vw;
    }
    .section-room .content-details-room .content-bottom-room .content-left .list-img {
        width: 100%;
        height: 69vw;
        gap: 2vw;
    }
    .section-room .content-details-room .content-bottom-room .content-left .list-img .content-icon {
        width: 6.989vw;
        height: 2.62vw;
    }
    .section-room .content-details-room .content-bottom-room .content-left .list-img .content-icon.active {
        width: 6.1875vw;    
    }
    .section-room .content-details-room .content-bottom-room .content-right {
        gap: 4.8125vw;
        padding-top: 0;
        padding: 2vw 6vw;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .title-accroche {
        font-size: 6vw;
        line-height: normal;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .price-details .one-price .device,
    .section-room .content-details-room .content-bottom-room .content-right .details-right .price-details .one-price .price {
        font-size: 6vw;
        font-weight: 400;
        line-height: normal;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .subtitle-content {
        font-size: 5vw;
        line-height: normal;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content {
        gap: 4.3541vw;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service {
        gap: 2.625vw;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service .img-fluidd {
        width: auto;
        height: 7.25vw;
    }
    .section-room .content-details-room .content-bottom-room .content-right .details-right .list-service-content .one-service .text {
        font-size: 4.5vw;
        line-height: normal;
    }
    .section-room .content-details-room .content-bottom-room .content-right .btn-see-more .text-see {
        padding: 2.80729vw 1.5625vw;
        line-height: normal;
    }
    .section-room .content-details-room .content-bottom-room .content-right .btn-see-more .text-see {
        font-size: 5vw;
    }
    .section-room .content-details-room .content-bottom-room .content-right .btn-see-more .icon-see {
        margin-bottom: 0;
        width: 7.145833vw;
        height: 6.145833vw;;
    }

}