@import "./variables.scss";

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Overview
*
/* /////////////////////////////////////////////////////////////////////////////////*/

.quilak-intro{

    .title-sec p {
        max-width: 800px;
    }

    .boat-plan{
        max-width: 90%;
        margin: auto;
        margin-bottom: 80px;
       img{
        display: block;
        width: 100%;
        margin: auto;
       }
    }

}

.qilak-secrets{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    .title-sec h2{
        color: #fff;
    }
    .qil-feat{
        display: flex;
        justify-content: space-between;
        width: 90%;
        max-width: 1200px;
        margin: auto;
        color: #fff;
        padding-bottom: 100px;
        ul{
            width: 48%;
        }
        ul li{
            color: #fff;
        }
    }
}

.team-unit{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
    .te-left{
        width: 40%;
        img{
            width: 100%;
            display: block;
            margin: auto;
        }
    }
    .te-right{
        width: 55%;
    }   
}

.team-unit:nth-child(2){
    flex-direction: row-reverse;
}

.te-right{
    h3{
        color: $blue;
        margin-bottom: 15px;
    }
}

.galery-inner{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.image-unit{
    width: 25%;
    background-color: $blue;
    overflow: hidden;
    img{
        width: 100%;
        display: block;
        margin: auto;
        transition: all .2s linear;
    }
}

.image-unit:hover{
    img{
        transform: scale(1.1);
        opacity: 0.5;
    }
}



@media screen and (max-width: 980px){

    .image-unit {
        width: 50%;
    }
    
}