/*------------------------------------*\
    #Heading
\*------------------------------------*/

.heading {
    margin-bottom: 48px;

    @media #{$maxTablet} {
        text-align: center;
    }

    .heading-subtitle {
        font-family   : $font-body;
        text-transform: capitalize;
        color         : $color-theme;
        font-size     : 15px;
        font-weight   : 700;
        line-height   : 1;
        margin-bottom : 15px;

        @media screen and (max-width:991px) {
            line-height: 2;
        }
    }

    .heading-title {
        font-family   : $font-heading;
        text-transform: capitalize;
        font-size     : 34px;
        line-height   : 48px;
        margin-bottom : 0;
        font-weight   : 500;
        color         : $color-heading;

        @media #{$maxSmall} {
            font-size  : 24px;
            line-height: 1.5;
        }
    }

    .heading-desc {
        font-family  : $font-body;
        color        : $color-body;
        font-size    : 16px;
        font-weight  : 400;
        line-height  : 26px;
        margin-bottom: 0;
    }

    &.heading-light {
        .heading-subtitle {
            color: #f9f9f9;
        }

        .heading-title {
            color: $color-white;
        }

        .heading-desc {
            color: #f9f9f9;
        }
    }

    &.heading-2 {
        .heading-subtitle {
            margin-bottom: 19px;
        }

        .heading-title {
            font-size  : 43px;
            line-height: 50px;

            @media #{$maxSmall} {
                font-size  : 24px;
                line-height: 1.5;
            }
        }
    }

    &.heading-3 {
        margin-bottom: 38px;

        @media #{$maxTablet} {
            margin-top: 0;
        }

        .heading-title {
            font-size  : 43px;
            line-height: 57px;

            @media #{$maxSmall} {
                font-size  : 30px;
                line-height: 1.2;
            }
        }
    }

    &.heading-4 {
        margin-bottom: 57px;

        .heading-desc {
            transform    : translateY(-5px);
            margin-bottom: 28px;

            @media #{$maxTablet} {
                margin-top: 30px;
            }
        }
    }

    &.heading-5 {
        .heading-subtitle {
            margin-bottom: 5px;
        }

        .heading-title {
            margin-bottom: 21px;
        }
    }

    &.heading-6 {
        .heading-desc {
            font-weight  : 500;
            font-size    : 17px;
            line-height  : 27px;
            margin-bottom: 33px;
        }
    }

    &.heading-7 {
        margin-bottom: 53px;

        .heading-subtitle {
            margin-bottom: 5px;
        }

        .heading-title {
            margin-bottom: 20px;
        }
    }

    &.heading-8 {
        margin-right: 55px;

        @media #{$maxTablet} {
            margin-right: 0;
        }

        .heading-subtitle {
            font-size    : 14px;
            margin-bottom: 19px;
        }

        .heading-title {
            font-size    : 40px;
            line-height  : 54px;
            margin-bottom: 20px;

            @media #{$maxSmall} {
                font-size  : 32px;
                line-height: 1.2;
            }
        }

        .heading-desc {
            font-size  : 17px;
            line-height: 27px;
            font-weight: 500;

            &:last-child {
                @media #{ $maxTablet} {
                    margin-bottom: 40px;
                }
            }
        }
    }

    &.heading-9 {
        margin-bottom: 30px;

        .heading-subtitle {
            margin-bottom: 13px;
        }

        .heading-title {
            font-size  : 35px;
            line-height: 49px;
        }
    }

    &.heading-10 {
        margin-bottom: 0;

        .heading-title {
            font-size    : 43px;
            line-height  : 50px;
            margin-bottom: 40px;

            @media #{$maxSmall} {
                font-size  : 32px;
                line-height: 1.2;
            }
        }

        .heading-desc {
            font-weight  : 500;
            font-size    : 17px;
            line-height  : 27px;
            margin-bottom: 37px;
            margin-top   : 2px;

            @media #{$maxTablet} {
                margin-top: 40px;
            }
        }
    }

}