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

.section-room {
    height: 100vh;
    width: 100%;
}

.section-room .content-left {
    width: 35%;
    background: linear-gradient(178deg, rgb(193 154 113) 0%, rgb(0 0 0 / 12%) 69.61%, rgb(247 248 251 / 0%) 101.98%);
    padding: 5vw 4vw;
}
.section-room .content-left .title {
    font-size: var(--h2-size);
    font-family: var(--font-name);
    font-weight: 700;
    color: var(--color-secundary);
    line-height: 2.447vw;
}
.section-room .content-left .sub-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-left .sub-content.share {
    font-size: var(--p-size);
}
.section-room .content-left .description {
    font-size: var(--p-size-alt);
    font-family: var(--font-name);
    color: var(--color-gray-alt);
}


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

.section-room .content-left .list-social-media .icon-network {
    width: 1.6vw;
    height: 1.6vw;
    transition: all .5s ease-in-out;
}
.section-room .content-left .list-social-media .icon-network img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all .5s ease-in-out;
    filter: invert(88%) sepia(10%) saturate(1305%) hue-rotate(199deg) brightness(97%) contrast(104%);
}

.section-room .content-right {
    width: 65%;
    height: 100%;
    position: relative;
}
.section-room .content-right .img-accroche {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-room .content-right .info-price {
    align-items: center;
    position: absolute;
    bottom: 2vw;
    left: 0;
    background: var(--color-secundary);
    padding: 1vw;
}
.section-room .content-right .info-price .price-details span {
    font-size: var(--h5-size);
    line-height: 1.45833vw;
    padding-left: 0.5208vw;
    color: var(--color-primary);
}
.section-room .content-right .info-price a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.52083vw;
    padding: 0.80729vw 1.5625vw;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    background: white;
    width: max-content;
    transition: all .5s ease-in-out;
}

.section-room .content-right .list-img {
    position: absolute;
    width: fit-content;
    bottom: 2vw;
    right: 4vw;
    gap: 1vw;
}
.section-room .content-right .list-img .img-relative {
    width: 5vw;
    height: 5vw;
    display: block;
    position: relative;
}
.section-room .content-right .list-img .img-relative img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}
.section-room .content-right .list-img .img-relative img.active {
    border: 3px solid var(--color-secundary);
}

@media (max-width:768px) {

    .section-room {
        height: auto;
        width: 100%;
    }

    .section-room .content-right {
        width: 100%;
        height: 100vh;
    } 
    .section-room .content-right .list-img {
        gap: 2vw;
    } 

    .section-room .content-right .list-img .img-relative {
        width: 13vw;
        height: 9vw;
    } 

    .section-room .content-left {
        width: 100%;
    } 
    .section-room .content-left .title {
        font-size: 7vw;
        line-height: normal;
    } 
    .section-room .content-left .sub-content.share,
    .section-room .content-left .sub-content {
        font-size: 5vw;
        line-height: normal;
    } 
    .section-room .content-left .service-content {
        gap: 3.3541vw;
    } 
    .section-room .content-left .service-content .one-service {
        gap: 3.625vw;
    }
    .section-room .content-left .service-content .one-service .text {
        font-size: 5vw;
        font-family: var(--font-name);
        font-weight: 400;
        color: var(--color-secundary);
        line-height: normal;
    }
    .section-room .content-left .service-content .one-service .img-fluidd {
        width: auto;
        height: 8.25vw;
    }
    .section-room .content-left .list-social-media .icon-network {
        width: auto;
        height: 7.6vw;
    }

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

}