/* 06.06. Home Six Intro CSS */

.intro6-section {
    position: relative;

    display: flex;
    align-items: center;
    padding: 176px 0 0;

    // Responsive
    @media #{$desktop-device}{
        padding: 176px 0 0;
    }
    @media #{$tablet-device}{
        padding: 176px 0 0;
    }
    @media #{$large-mobile}{
        padding: 120px 0 0;
    }

    & .container {
        z-index: 9;
    }

}

.intro6-content {
    margin-bottom: 80px;
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 40px;
    }
    & .title {
        font-size: 48px;
        line-height: 1.17;
        font-weight: 700;
        color: $white;
        margin-bottom: 0;
    }

    & p{
        font-size: 18px;
        font-weight: 500;
        color: rgba(255,255,255,.7);
        margin: 0 0 24px;
    }

    & .btn {
        &:hover{
            color: $primary;
        }
    }

    @media #{$desktop-device} {
        & .title {
            font-size: 48px;
        }

    }

    @media #{$tablet-device,
    $large-mobile
    } {

        & .title {
            font-size: 42px;
        }
        
    }

    @media #{$extra-small-mobile} {

        & .title {
            font-size: 34px;
        }
    }
}

.intro-left-image{
    position: relative;
    left: -168px;
    bottom: 25px;
    width: 410px;
    height: 504px;
    // Responsive
    @media #{$laptop-device}{
        left: 0;
    }
    @media #{$desktop-device}{
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    @media #{$tablet-device}{
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    @media #{$large-mobile}{
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    img{
        width: 100%;
    }
}

.intro-right-image{
    position: relative;
    right: 20px;
    bottom: -80px;
    width: 230px;
    height: 353px;
    // Responsive
    @media #{$laptop-device}{
        right: 50px;
    }
    @media #{$desktop-device}{
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    @media #{$tablet-device}{
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    @media #{$large-mobile}{
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    img{
        width: 100%;
    }
}