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

.heading {
    margin-bottom: 48px;

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

    .heading-subtitle {
        font-family   : var(--global--font-body);
        text-transform: capitalize;
        color         : var(--global--color-primary);
        font-size     : 15px;
        font-weight   : 700;
        line-height   : 1;
        margin-bottom : 13px;

        @media #{$maxTablet} {
            line-height: 1.5;
        }

        &.heading-subtitle-bg {
            display         : inline-block;
            width           : max-content;
            padding         : 12px 20px;
            border-radius   : 4px;
            background-color: #e0f6e9;

            @media #{$maxTablet} {
                width: auto;
            }
        }
    }

    .heading-title {
        font-family   : var(--global--font-heading);
        text-transform: capitalize;
        font-size     : 40px;
        line-height   : 54px;
        margin-bottom : 25px;
        font-weight   : 700;
        color         : var(--global--color-heading);

        @media #{$noteBook} {
            font-size: 35px;
            ;
            line-height: 1.4;
        }

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

    .heading-desc {
        font-family  : var(--global--font-body);
        color        : var(--global--color-body);
        font-size    : 16px;
        font-weight  : 400;
        line-height  : 27px;
        margin-bottom: 25px;

        @media #{$noteBook} {
            font-size: 15px;
            ;
            line-height: 26px;
        }
    }

    .paragraph {
        font-weight  : 700;
        font-size    : 16px;
        line-height  : 27px;
        color        : #283b6a;
        margin-bottom: 0px;
    }

    &.heading-light {
        .heading-subtitle {
            color: var(--global--color-gray);
        }

        .heading-title {
            color: var(--global--color-white);
        }

        .heading-desc {
            color: var(--global--color-gray);
        }

        .paragraph {
            color: var(--global--color-gray);
        }
    }

    &.heading-light2 {
        .heading-subtitle {
            color: var(--global--color-primary);
        }

        .heading-title {
            color: var(--global--color-white);
        }

        .heading-desc {
            color: var(--global--color-gray);
        }

        .paragraph {
            color: var(--global--color-gray);
        }
    }

    &.heading-1 {
        margin-bottom: 40px;

        .heading-title {
            margin-bottom: 0;
        }
    }

    &.heading-2 {
        margin-bottom: 70px;

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }

        .heading-desc {
            &:first-child {
                margin-top: 8px;
            }

            &:nth-child(2) {
                margin-bottom: 32px;
            }
        }
    }

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

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

            @media #{$noteBook} {
                font-size  : 32px;
                line-height: 1.4;
            }

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

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

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }

        .heading-desc {
            margin-bottom: 32px;
        }
    }

    &.heading-5 {
        margin-bottom: 58px;

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 35px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-6 {

        //margin-bottom: 58px;
        .heading-title {
            font-size    : 37px;
            line-height  : 54px;
            margin-bottom: 31px;

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

            @media #{$noteBook} {
                font-size: 32px;
                ;
                line-height: 1.4;
            }
        }
    }

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

        .heading-title {
            font-size  : 24px;
            line-height: 1.5;
        }
    }

    &.heading-8 {
        margin-bottom: 56px;

        .heading-title {
            margin-bottom: 0;
            font-size    : 37px;
            line-height  : 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

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

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 35px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-10 {

        //margin-bottom: 58px;
        .heading-title {
            font-size    : 37px;
            line-height  : 54px;
            margin-bottom: 21px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }

        .heading-desc {
            font-weight  : 700;
            margin-bottom: 42px;
        }
    }

    &.heading-11 {
        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 35px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-12 {
        margin-bottom: 40px;

        .heading-title {
            margin-bottom: 0;

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-13 {
        margin-bottom: 48px;

        .heading-title {
            margin-bottom: 0;

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-14 {
        margin-bottom: 23px;
    }

    &.heading-15 {
        margin-bottom: 70px;

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }

        .heading-desc {
            margin-top   : 8px;
            margin-bottom: 35px;
        }
    }

    &.heading-16 {
        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-17 {
        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-18 {
        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

    &.heading-19 {
        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }
    }

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

        .heading-title {
            font-size  : 37px;
            line-height: 54px;

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

            @media #{$noteBook} {
                font-size: 30px;
                ;
                line-height: 1.4;
            }
        }

        .heading-desc {
            &:last-child {
                @media #{$minLarge} {
                    margin-bottom: 0;
                }
            }
        }
    }

    &.heading-21 {
        margin-bottom: 34px;

        .heading-title {
            font-size    : 24px;
            line-height  : 48px;
            margin-bottom: 0;
        }
    }
}