/* ---------------------------------------rooms-offices-for-inspiration-sec----------------------------------*/
.rooms-offices-for-inspiration-sec { 
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    padding-block: 105px 120px;
    background-color: #F8F6F2;

    & .heading-46 {
        margin-bottom: 10px;
        & + p { 
            margin-bottom: 50px;
            max-width: 540px;
            margin-inline: auto;
        }
    }
}
.rooms-offices-slider { 
    width: calc(100% + 16px);
    margin-inline: -8px;
    & .slide-box {
        padding-inline: 8px;
    }
    &:not(.slick-initialized) { 
        display: inline-flex;

        & > .slide-box {
          flex: 1;
        }
    }
    &:not(.slick-initialized) > .slide-box:not(:nth-child(-n + 2)) {
        display: none;
    }
}
.rooms-offices-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
    padding-bottom: 70px;
    bottom: 0;
    & .slick-dots { 
        gap: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        left: 0;
        right: 0;
    }
}
.rooms-offices-box { 
    display: inline-block;
    width: 100%;
    /* border-radius: 18px;
    overflow: hidden; */
    position: relative;
    text-align: left;

    & > .img-wrap  { 
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        & > img { 
            min-height: 550px;
        }
        &::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            inset: 0;
            background: transparent linear-gradient(125deg, #000000 0%, #54545400 100%) 0% 0% no-repeat padding-box;
        }
    }
}

.rooms-offices-info {
    position: absolute;
    top: 0;
    left: 0;
    padding: 75px 45px;
    z-index: 1;
    
    & .heading-36{
        color: #fff;
        margin-bottom: 5px;
    }
    & > p {
        max-width: 235px;
        color: #fff;
    }
}

.flooring_type {
    color: #171717;
    font-size: 12px;
    letter-spacing: 0.10px;
    line-height: 1;
    padding: 5px 12px;
    background: #FAF565;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-weight: 500;
}
.toggle-box-button {
    position: absolute;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    background: rgb(250 245 101 / 46%);
    bottom: 70px;
    right: 160px;
    z-index: 1;
    cursor: pointer;
    &:after {
        content:'';
        position: absolute;
        inset: 0;
        margin: auto;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        background: #000;
        border-radius: 100%;
        border: 7px solid #fff;
    }
    &::before { 
        content: '';
        position: absolute;
        border: 1px solid #FFFFFF;
        height: 20px;
        width: 0;
        top: -100%;
        left: 50%;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: all ease-out 0.3s;
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -ms-transition: all ease-out 0.3s;
    } 
}

/* .toggle-box {
    display: none;
} */
.toggle-box-details {
    display: inline-block;width: 100%;
    & .title-20 {
        font-size: 20px;
        letter-spacing: 0;
        font-weight: bold;
        color: #2D2D2D;
        margin-bottom: 8px;
        line-height: 1.2;
    }
    & > p {
        margin-bottom: 0;
        font-size:14px;
        font-weight:normal;
        line-height:1.45;
        color:#171717;
        & > strong {
            font-weight:bold;
            margin-right: 3px;
        }
        & + .btn-border { margin-top: 10px !important; min-height: 45px !important; padding: 15px 30px 13px !important;}
    }
}
.toggle-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 247px;
    background: transparent;
    padding: 12px 13px 20px;
    position: absolute;
    top: 0%;
    left: calc(50% - 125px);
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    bottom: 0px;
    height: fit-content;
    margin-bottom: 87px;
    margin-top: auto;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -ms-transition: all ease-out 0.3s;
    cursor: default;
    & > .img-wrap { 
        margin-bottom: 18px;
    }
    &::after { 
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        inset: 0;
        background: #fff;
        filter: blur(1px);
        opacity: 0.85;
        z-index: -1;
    }
}

.rooms-offices-box:hover { 
    & .toggle-box {
        transform: scaleY(1);
        transform-origin: bottom;
        transition: all ease-out 0.3s;
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -ms-transition: all ease-out 0.3s;
    }
    & .toggle-box-button {
        &::before { 
            transform: scaleY(1);
            transform-origin: bottom;
            transition: all ease-out 0.3s;
            -webkit-transition: all ease-out 0.3s;
            -moz-transition: all ease-out 0.3s;
            -ms-transition: all ease-out 0.3s;
        } 
    }
    & > .img-wrap {
        & > img {
            transform: scaleX(1.05) scaleY(1.025) ;
            transform-origin: right;
            transition: all ease-out 0.3s;
            -webkit-transition: all ease-out 0.3s;
            -moz-transition: all ease-out 0.3s;
            -ms-transition: all ease-out 0.3s;
        }
    }
}
/* ---------------------------------------rooms-offices-for-inspiration-sec ----------------------------------*/

@media (max-width: 1900px) {
  
}

@media (max-width: 1800px) {
    
   
}

@media (max-width: 1599.98px) {
   .rooms-offices-for-inspiration-sec { padding-block: 80px 80px; }
}

@media (max-width: 1439.98px) {
   .rooms-offices-slider.slick-dotted.slick-slider {
        & .slick-dots { bottom: 0; }
   }
}


@media (max-width: 1199.98px) {

    .rooms-offices-for-inspiration-sec {
        padding-block: 60px 60px;
    }
   
}

@media (max-width: 991.98px) {

}

@media (max-width: 767.98px) {
    .rooms-offices-for-inspiration-sec {
        padding-block: 40px;
        & .heading-46 {
            & + p { margin-bottom: 25px; } 
        }
    }
}

@media (max-width: 575.98px) {
    .rooms-offices-info { 
        padding: 40px 30px 40px 31px;
    }
    .rooms-offices-slider {
        &:not(.slick-initialized) > .slide-box:not(:nth-child(-n + 1)) {
            display: none;
        }
    }
}