@import "base/colors.scss";
@import "base/quary.scss";
@import "base/mixin.scss";

body.project-page{
    .width-wrapper{
        padding-left: 20px;
        padding-right: 20px;
    }
    .scroll-to-top{
        right: calc(50% - 910px);
    }
    .read-more-wrapper{
        &.less{
            .read-more{
                display: none;
            }
            .read-less{
                display: inline-block;
            }
        }
    }
    #project-form{
        background-repeat: no-repeat;
        background-size: cover;
        form{
            input:not(.checkbox):not(.submit-button){
                color: #fff;
                font-size: 1em;
            }
        }
    }
    .right-sticky-menu{
        a:last-child{
            div{
                border-bottom: none;
            }
        }
    }
    #about{
        @media (min-width: 992px) and (max-width: 1400px){
            font-size: 0.85em;
            .advantage{
                padding: 8px;
            }
        }
    }
    #area{
        @media (min-width: 1201px) and (max-width: 1400px){
            .service {
                width: 25%;
            }
        }
        @media (min-width: 992px) and (max-width: 1200px){
            .service {
                width: 33.33%;
            }
        }
    }
    #technical{
        .w-tab-content{
            .w-tab-pane{
                display: block;
                opacity: 0;
                z-index: -10;
                transition: opacity 0.5s;
                position: absolute;
                &.w--tab-active{
                    opacity: 1;
                    z-index: 10;
                    position: relative;
                }
            }
        }
        .tab-collection-project-slider{
            > .w-dyn-repeater-item{
                display: none;
                &:nth-child(1){
                    display: block;
                }
            }
            .owl-dots{
                display: flex;
                justify-content: center;
                background-color: #fff;
                position: relative;
                padding-top: 30px;
                .owl-dot{
                    border-radius: 50%;
                    width: 10px;
                    height: 10px;
                    background-color: #BEBEBE;
                    margin: 0 6px;
                    border: none;
                    &.active{
                        background-color: $default;
                        top: auto;
                    }
                }
            }
            .owl-controls{
                .owl-nav{
                    position: absolute;
                    top: 0;
                    width: 100%;
                    padding: 0 20px;
                    box-sizing: border-box;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    opacity: 0;
                    transition: opacity 0.5s;
                    background: linear-gradient( 270deg, rgba(0, 0, 0, 0.70) 0%, rgba(58, 58, 58, 0.00) 29.81%, rgba(42, 42, 42, 0.00) 70.19%, rgba(0, 0, 0, 0.70) 100% );
                    &:hover{
                        opacity: 1;
                    }
                    .owl-prev, .owl-next{
                        top: calc(50% - 16px);
                        position: relative;
                        width: 32px;
                        height: 32px;
                        text-indent: -9999px;
                    }
                    .owl-prev{
                        background: url("https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6725f36dd9550f1faa7dd9_gallery-right.svg") no-repeat center center;
                    }
                    .owl-next{
                        background: url("https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6725f390c2d49389d4c1d0_gallery-left.svg") no-repeat center center;
                    }
                }
            }
            .owl-stage-outer:hover + .owl-controls{
                .owl-nav{
                    opacity: 1;
                }
            }
        }
        .tab-text-wrapper{
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    list-style: none;
                    position: relative;
                    margin-bottom: 20px;
                    padding-right: 25px;
                    padding-left: 25px;
                    width: 50%;
                    @media (min-width: 992px) and (max-width: 1400px){
                        width: 100%;
                    }
                    &:before{
                        content:"";
                        background-image: url("https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a4523fc7665cc8b34eba098_accept(1)%201.svg");
                        background-repeat: no-repeat;
                        width: 17px;
                        height: 17px;
                        position: absolute;
                        top: 4px;
                        right: 0;
                    }
                }
            }
        }
        .owl-item{
            opacity: 0;
            transition: opacity 0.5s;
            &.active{
                opacity: 1;
            }
        }
    }
    #apartments{
        .owl-stage-outer{
            overflow: visible;
            .owl-stage{
                display: flex;
            }
        }
        .tabs-appartment-wrapper{
            .appartment-tab-titles .collection-item-6:last-child{
                border-left: none;
                margin-left: 0px;
                padding-left: 0px;
            }
            &.not-clicked .appartment-tab-titles .collection-item-6:first-child .model, .appartment-tab-titles .collection-item-6.active .model{
                background-color: $default;
                color: #fff;
            }
            &.not-clicked .appartment-tab-contents .collection-item-7:first-child, .appartment-tab-contents .collection-item-7.active{
                display: flex;
            }
        }
        .more-degem{
            > div:last-child{
                border: none;
                padding: 0px;
                margin: 0px;
            }
        }
    }
    #more-projects{
        .collection-list-5 .collection-item-8:nth-child(4n){
            margin: 0;
        }
    }
    &.popup-open{
        overflow: hidden;
    }
}