/*----------------------------------------*/
/*  16. Quote CSS
/*----------------------------------------*/

.teacher-quote-wrapper {
    padding-bottom: 50px;
    padding-left: 200px;

    @media #{$desktop-device} {
        padding-left: 135px;
    }

    @media #{$tablet-device,
    $large-mobile
    } {
        padding-left: 0;
        padding-bottom: 0;
    }

    
}

.teacher-quote {
    display: flex;

    background-color: #FAF8F6;

    & .image {
        position: relative;

        flex: 1 0 auto;

        width: 270px;
        margin-left: -135px;

        transform: translateY(50px);

        & img {
        }
    }

    & .content {
        padding: 70px 30px 70px 50px;

        & .section-title {
            margin-bottom: 25px;
        }

        & .quote {
            width: 64.5%;
            padding: 0 15px;

            & p {
                font-size: 24px;
                font-weight: 500;
                line-height: 1.5;
            }
        }

        & .experience {
            width: 35.406%;
            padding: 0 15px;

            & .amount {
                font-size: 48px;
                font-weight: 800;
                line-height: 1.3;

                display: block;

                color: $primary;

                & span {
                    font-size: 24px;

                    margin-left: 5px;
                }
            }

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

                margin-bottom: 10px;

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

                color: $secondary;
            }

            & .link {
                font-size: 14px;
                font-weight: 700;

                color: $secondary-light;

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

    @media #{$desktop-device} {
        & .content {
            & .quote {
                & p {
                    font-size: 20px;
                }
            }
        }
    }

    @media #{$tablet-device,
    $large-mobile
    } {
        & .image {
            display: none;
        }
    }

    @media #{$tablet-device} {
        & .content {
            & .quote {
                & p {
                    font-size: 22px;
                }
            }
        }
    }

    @media #{$large-mobile} {
        & .content {
            padding: 40px;

            & .quote {
                width: 100%;
                margin-bottom: 20px;
            }

            & .experience {
                width: 100%;
            }
        }
    }

    @media #{$small-mobile} {
        & .content {
            padding: 30px;

            & .quote {
                & p {
                    font-size: 22px;
                }
            }
        }
    }
}

.author-quote{
    padding-left: 50px;
    max-width: 400px;
    // Responsive
    @media #{$tablet-device}{
        padding-left: 0;
        margin-top: 30px;
    }
    @media #{$large-mobile}{
        padding-left: 0;
        margin-top: 30px;
    }
    .title{
        font-family: $playfair-font;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.916;
        margin-bottom: 50px;
        // Responsive
        @media #{$tablet-device}{
            font-size: 21px;
            margin-bottom: 30px;
        }
        @media #{$large-mobile}{
            font-size: 18px;
            margin-bottom: 20px;
        }
    }
    .motivation-name-icon{
        margin-bottom: 25px;
    }
    .author-name{
        h3{
            font-size: 21px;
            font-weight: 600;
            color: $secondary;
            margin-bottom: 12px;
        }
        span{
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 1.5;
            letter-spacing: 1.38px;
            color: #8c89a2;
        }
    }
}