/* 12.01 About CSS */

.about-content{
    position: relative;
    z-index: 99;
    max-width: 420px;
    &.max-width-470{
        max-width: 470px;
        p{
            font-size: 18px;
            line-height: 1.67;
        }
    }

    // Responsive
    @media #{$tablet-device}{
        max-width: 100%;
    }
    @media #{$large-mobile}{
        max-width: 100%;
    }

    & .sub-title {
        font-size: 15px;
        font-weight: 500;
        line-height: 2;

        display: block;

        margin-bottom: 10px;

        letter-spacing: 2px;
        text-transform: uppercase;

        color: $secondary-light;
    }

    & .title {
        font-size: 48px;
        line-height: 56px;
        margin-bottom: 15px;
        color: $secondary;

        // Responsive
        @media #{$tablet-device}{
            font-size: 42px;
            line-height: 50px;
        }
        @media #{$large-mobile}{
            font-size: 36px;
            line-height: 46px;
        }
        & span {
            font-weight: 400;

            color: $primary;
        }
    }

    & p{
        margin-bottom: 20px;
    }

    & a{
        font-size: 15px;
    }
}

.about-image{
    position: relative;
    z-index: 9;
    .about-image-one{
        img{
            border-radius: 5px;
        }
    }
    .about-image-two{
        position: absolute;
        top: -90px;
        right: -73px;
        // Responsive
        @media #{$laptop-device}{
            right: 0px;
        }
        @media #{$desktop-device}{
            right: 0px;
        }
        @media #{$tablet-device}{
            right: 0px;
        }
        @media #{$large-mobile}{
            right: 0px;
        }

        img{
            border-radius: 5px; 
        }
    }

    & .shape {
        position: absolute;
        z-index: 1;

        &-1 {
            z-index: 11;
            top: -51px;
            left: -107px;

            & span {
                display: block;

                width: 60px;
                height: 60px;

                text-indent: -9999px;

                border: 7px solid #ecc5ab;
                border-radius: 50%;
            }
        }

        &-2 {
            left: -40px;
            bottom: -26px;
            z-index: -1;
        }

        &-3 {
            bottom: -40px;
            right: 10px;
        }

        &-4 {
            top: -27px;
            left: 360px;
            z-index: -1;
        }
    }

    // Responsive
    @media #{$tablet-device}{
        & .shape {
            position: absolute;
            z-index: -1;
    
            &-1 {
                z-index: -1;
                top: -51px;
                left: 0px;
                
            }

            &-2 {
                max-width: 80px;
                width: 80px;
                left: 0;
            }
    
            &-3 {
                max-width: 80px;
                width: 80px;
            }
    
            &-4 {
                max-width: 80px;
                width: 80px;
            }
        }
    }

    @media #{$large-mobile}{
        & .shape {
            position: absolute;
            z-index: -1;
    
            &-1 {
                z-index: -1;
                top: -51px;
                left: 0px;
                & span {
                    width: 45px;
                    height: 45px;
                }
            }

            &-2 {
                max-width: 80px;
                width: 80px;
                left: 0;
            }
    
            &-3 {
                max-width: 80px;
                width: 80px;
            }
    
            &-4 {
                max-width: 80px;
                width: 80px;
            }
        }
    }

}


.maxcoach-list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 35px;
    &.color-light{
        li{
            color: $white;
        }
    }
    li{
        display: flex;
        align-items: center;
        & + li{
            margin-top: 10px;
        }
        .icon{
            margin-right: 19px;
            font-size: 15px;
            color: $primary;
        }
    }
}

.register-image{
    position: relative;
    z-index: 9;
    text-align: center;

    & .shape {
        position: absolute;
        z-index: 1;

        &-1 {
            top: 80px;
            left: 14%;
            z-index: -1;
            width: 446px;
            height: 446px;
            transform: rotate(0deg) scale(1,1);

            & svg {
                width: 100%;
                height: 100%;

                & * {
                    fill: #ece8e4;
                }
            }
        }

        &-2 {
            bottom: 0px;
            right: 15%;
            z-index: -11;
        }
    }

    @media #{$large-mobile} {
        & .shape {
            position: absolute;
            z-index: 1;
    
            &-1 {
                top: 80px;
                left: 14%;
                z-index: -1;
                width: 200px;
                height: 200px;
                transform: rotate(0deg) scale(1,1);
    
                & svg {
                    width: 100%;
                    height: 100%;
    
                    & * {
                        fill: #ece8e4;
                    }
                }
            }
    
            &-2 {
                width: 80px;
                bottom: 20px;
                right: 15%;
                z-index: -11;
            }
        }
    }
}

.download-app-image{
    position: relative;
    text-align: center;
    z-index: 9;

    & .shape {
        position: absolute;
        z-index: 1;

        &-1 {
            bottom: 0px;
            left: 20px;
            z-index: -1;
            width: 476px;
            height: 476px;
            transform: rotate(0deg) scale(1,1);

            & svg {
                width: 100%;
                height: 100%;

                & * {
                    fill: #ece8e4;
                }
            }
        }

        &-2 {
            bottom: 40%;
            left: -150px;
            z-index: -1;
        }

        &-3 {
            z-index: 11;
            top: 0px;
            right: 20px;

            & span {
                display: block;
                width: 62px;
                height: 62px;
                text-indent: -9999px;
                border: 8px solid #ecc5ab;
                border-radius: 50%;
            }
        }

        &-4 {
            right: 15%;
            bottom: 0px;
            z-index: -1;
        }
    }

    @media #{$desktop-device} {
        & .shape {
            position: absolute;
            z-index: -1;
    
            &-2 {
                bottom: 40%;
                left: 0px;
                z-index: -1;
            }
        }
    }
    @media #{$tablet-device} {
        & .shape {
            position: absolute;
            z-index: -1;
    
            &-2 {
                bottom: 40%;
                left: 0px;
                z-index: -1;
            }
        }
    }

    @media #{$large-mobile} {
        & .shape {
            position: absolute;
            z-index: 1;
    
            &-1 {
                bottom: 10px;
                left: 20px;
                z-index: -1;
                width: 200px;
                height: 200px;
                transform: rotate(0deg) scale(1,1);
    
                & svg {
                    width: 100%;
                    height: 100%;
    
                    & * {
                        fill: #ece8e4;
                    }
                }
            }
    
            &-2 {
                bottom: 40%;
                left: 0px;
                z-index: -1;
            }
    
            &-3 {
                z-index: 11;
                top: 0px;
                right: 20px;
    
                & span {
                    display: block;
                    width: 62px;
                    height: 62px;
                    text-indent: -9999px;
                    border: 8px solid #ecc5ab;
                    border-radius: 50%;
                }
            }
    
            &-4 {
                right: 30px;
                bottom: 20px;
                width: 80px;
                z-index: -1;
            }
        }
    }
}

.learn-content{
    padding-left: 70px;
    // Responaive
    @media #{$desktop-device}{
        padding-left: 40px;
    }
    @media #{$tablet-device}{
        padding-left: 0px;
    }
    @media #{$large-mobile}{
        padding-left: 0px;
    }
}

.learn-image{
    position: relative;
    z-index: 9;
    text-align: center;
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 50px;
    }

    & .shape {
        position: absolute;
        z-index: -1;

        &-1 {
            top: -48px;
            left: 0px;
        }

        &-2 {
            top: 120px;
            right: 60px;

            & span {
                display: block;

                width: 62px;
                height: 62px;

                text-indent: -9999px;

                border: 8px solid #ECC5AB;
                border-radius: 50%;
            }
        }

        &-3 {
            right: 0px;
            bottom: 0px;
        }
    }
}

.about-app-content{
    padding: 100px 0;
    max-width: 455px;
    // Responsive
    @media #{$tablet-device} {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    @media #{$large-mobile} {
        padding-top: 0px;
        padding-bottom: 60px;
    }
    & .sub-title {
        font-size: 15px;
        font-weight: 500;
        line-height: 2;

        display: block;

        margin-bottom: 10px;

        letter-spacing: 2px;
        text-transform: uppercase;

        color: $white;
        span{
            color: $primary;
        }
    }

    & .title {
        font-size: 48px;
        line-height: 1.17;
        margin-bottom: 15px;
        color: $white;

        // Responsive
        @media #{$desktop-device}{
            font-size: 40px;
        }
        @media #{$tablet-device}{
            font-size: 40px;
        }
        @media #{$large-mobile}{
            font-size: 36px;
        }
        & span {
            font-weight: 400;

            color: $primary;
        }
    }

    & p{
        font-size: 18px;
        line-height: 1.67;
        color: $white;
        max-width: 426px;
        margin-bottom: 20px;
    }

    & a{
    }
}
.about-app-image{
    text-align: right;
    margin: -75px -35px -52px 0;
    // Responsive
    @media #{$laptop-device}{
        margin: -75px -10px -52px 0;
    }
    @media #{$desktop-device}{
        margin: -50px 0;
    }
    @media #{$tablet-device}{
        margin: -50px 0;
    }
    @media #{$large-mobile}{
        margin: -50px 0 40px;
    }
}


.cooking-about-section{
    position: relative;
    z-index: 9;
    & .shape {
        position: absolute;
        z-index: 1;

        &-1 {
            top: 300px;
            left: -30px;
        }
    }
    // Responsive
    @media #{$laptop-device}{
        & .shape{
            &-1{
                left: 0;
            }
        }
    }

    @media #{$desktop-device}{
        & .shape{
            &-1{
                left: 0;
            }
        }
    }

    @media #{$tablet-device}{
        & .shape{
            &-1{
                left: 0;
            }
        }
    }

    @media #{$large-mobile}{
        & .shape{
            display: none;
        }
    }
}

.cooking-about-slider{
    .swiper-pagination{
        position: relative;
        user-select: none;
        outline: none;
        width: auto;
        margin-top: 45px;
        // Responsive
        @media #{$tablet-device}{
            margin-top: 20px;
        }
        @media #{$large-mobile}{
            margin-top: 20px;
        }
        .swiper-pagination-bullet{
            position: relative;
            width: 32px;
            height: 32px;
            margin: 0 4px;
            color: #333;
            &::before{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                border-radius: 100%;
                width: 6px;
                height: 6px;
                background: currentColor;
                z-index: 1;
            }
            &::after{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 16px;
                height: 16px;
                opacity: 0;
                border: 1px solid transparent;
                border-radius: 50%;
            }
            &.swiper-pagination-bullet-active{
                &::after{
                    border-color: currentColor;
                    opacity: .5;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

.cooking-about-area{
    display: flex;
    align-items: center;
    padding: 0 15px 0 95px;
    height: 100%;
    // Responsive
    @media #{$desktop-device}{
        padding: 0px;
    }
    @media #{$tablet-device}{
        padding: 0px;
    }
    @media #{$large-mobile}{
        padding: 0px;
        flex-wrap: wrap;
    }
    .slide-image {
        flex-shrink: 0;
        max-width: 43%;
        position: relative;
        margin: 0 0 20px 20px;
        // Responsive
        @media #{$large-mobile}{
            max-width: 100%;
        }
        .image-frame{
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            color: #bad2de;
            transform: translate(-20px,20px);
        }
        .image-pattern{
            width: 100%;
            height: auto;
            display: block;
            position: relative;
            z-index: 1;
        }
    }
    .slide-content{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        // Responsive
        @media #{$large-mobile}{
            margin-top: 30px;
        }
        .slide-decorate-text{
            position: absolute;
            top: 0;
            left: 0;
            font-size: 150px;
            line-height: 1;
            font-weight: 700;
            font-family: $playfair-font;
            color: rgba(106,197,241,.15);
            z-index: 0;
            transform: translate(64px,-22px);
        }
        .slide-layers{
            position: relative;
            z-index: 1;
            max-width: 500px;
            padding: 0 0 0 30px;
            // Responsive
            @media #{$large-mobile}{
                max-width: 100%;
                padding: 0;
            }
            .title{
                font-size: 40px;
                line-height: 1.2;
                margin: 0;
                // Responsive
                @media #{$tablet-device}{
                    font-size: 32px;
                }
                @media #{$large-mobile}{
                    font-size: 32px;
                }
                @media #{$extra-small-mobile}{
                    font-size: 28px;
                }
            }
            p{
                font-size: 18px;
                font-weight: 600;
                line-height: 1.67;
                margin-top: 32px;
                margin-bottom: 0;
                // Responsive
                @media #{$tablet-device}{
                    margin-top: 15px;
                }
                @media #{$large-mobile}{
                    margin-top: 15px;
                    font-size: 15px;
                    line-height: 1.78;
                }
            }
            .btn{
                margin-top: 45px;
                @media #{$large-mobile}{
                    margin-top: 20px;
                }
            }
        }
    }
}

.about-me-left-content{
    max-width: 430px;
    // Responsive
    @media #{$tablet-device}{
        margin-bottom: 30px;
    }
    @media #{$large-mobile}{
        max-width: 100%;
        margin-bottom: 30px;
    }
    .sub-title{
        display: block;
        font-size: 15px;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 2;
        letter-spacing: 2px;
        color: $primary;
        margin-bottom: 18px;
        // Responsive
        @media #{$tablet-device}{
            margin-bottom: 10px;
        }
        @media #{$large-mobile}{
            margin-bottom: 10px;
        }
    }
    .title{
        font-family: $playfair-font;
        font-size: 40px;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
        // Responsive
        @media #{$tablet-device}{
            font-size: 34px;
        }
        @media #{$large-mobile}{
            font-size: 28px;
        }
    }
}

.about-me-right-content{
    .title{
        font-size: 18px;
        font-weight: 500;
        line-height: 1.78;
        mark{
            color: $primary;
            background-color: transparent;
        }
    }
    p{
        font-size: 15px;
        line-height: 1.6;
        color: $body-color;
        margin-top: 15px;
        margin-bottom: 0;
    }
}