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

.heading {
    margin-bottom: 46px;

    @media #{$maxTablet} {
        text-align  : center;
        max-width   : 500px;
        margin-left : auto;
        margin-right: auto;
    }

    @media #{$maxSmall} {
        max-width: unset
    }

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

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

    .heading-title {
        font-family   : var(--global--font-heading);
        text-transform: capitalize;
        font-size     : 37px;
        line-height   : 54px;
        margin-bottom : 0px;
        font-weight   : 500;
        color         : #05213f;

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

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

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

    .paragraph {
        font-weight  : 700;
        font-size    : 16px;
        line-height  : 27px;
        color        : var(--global--color-secondary);
        margin-bottom: 0px;
    }

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

        .heading-desc {
            color: #f9f9f9;
        }

        .paragraph {
            color: #f9f9f9;
        }
    }

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

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

        .heading-desc {
            color: #f9f9f9;
        }

        .paragraph {
            color: #f9f9f9;
        }
    }

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

        .heading-title {
            @media #{$maxTablet} {
                margin-bottom: 23px;
            }
        }

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

            @media #{$minLarge} {
                padding-top: 7px;
            }
        }
    }

    &.heading-3 {
        margin-bottom: 16px;
    }

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

        .heading-title {
            font-size    : 40px;
            margin-bottom: 21px;

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

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

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

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

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

        .heading-title {
            font-size    : 22px;
            line-height  : 33px;
            font-weight  : 700;
            margin-bottom: 25px;
        }
    }

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

        .heading-title {
            font-size    : 40px;
            margin-bottom: 21px;

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

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

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

    &.heading-10 {
        margin-bottom: 60px;
        position     : relative;
        z-index      : 5;

        .heading-title {
            @media #{$maxTablet} {
                margin-bottom: 23px;
            }
        }

        .heading-desc {
            margin-bottom: 18px;

            &:last-of-type {
                margin-bottom: 32px;
            }

            @media #{$minLarge} {
                padding-top: 7px;
            }
        }
    }

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

        @media #{$minLarge} {
            transform    : translateY(-5px);
            margin-bottom: -5px;
        }

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

        .heading-desc {
            font-size    : 17px;
            font-weight  : 400;
            margin-bottom: 25px;

            &:last-of-type {
                margin-bottom: 42px;
            }
        }
    }

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

        .heading-title {
            margin-bottom: 66px;

            @media #{$minLarge} {
                margin-bottom: 59px;
            }
        }

        .heading-desc {
            font-size    : 17px;
            font-weight  : 400;
            margin-bottom: 25px;

            &:last-of-type {
                margin-bottom: 42px;
            }
        }
    }
}