/*------------------------------------*\
    #BANNERS
\*------------------------------------*/
.banners {
    padding : 0;
    overflow: visible;
    position: relative;
    z-index : 3;

    .banner-card {
        position       : relative;
        border-radius  : 4px;
        padding        : 45px 50px 50px;
        display        : flex;
        flex-direction : column;
        justify-content: space-between;
        min-height     : 413px;
        overflow       : visible;
        margin-bottom  : 30px;

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

        .banner-tag {
            position        : absolute;
            top             : 30px;
            right           : 30px;
            display         : flex;
            align-items     : center;
            justify-content : center;
            padding         : 0 10px;
            height          : 30px;
            border-radius   : 4px 4px 4px 0;
            background-color: var(--global--color-primary-alt);

            @media #{$noteBook} {
                right: 20px;
            }

            @media #{$maxSmall} {
                right: 15px;
                top  : 10px;
            }

            &::before {
                content         : '';
                width           : 9px;
                height          : 7px;
                position        : absolute;
                top             : 99%;
                left            : 0;
                background-color: var(--global--color-primary-alt);
                clip-path       : polygon(100% 0, 0 0, 0 100%);
            }

            span {
                font-family: var(--global--font-body);
                font-weight: 400;
                font-size  : 14px;
                color      : var(--global--color-white);
            }
        }

        .banner-badge {
            position: absolute;
            top     : -4px;
            right   : -4px;
            z-index : 5;
        }

        .banner-content {
            position: relative;
            z-index : 2;

            p {
                font-family   : var(--global--font-secondary);
                text-transform: capitalize;
                color         : var(--global--color-white);
                font-size     : 30px;
                font-weight   : 400;
                line-height   : 1;
                margin-bottom : 19px;
            }

            h2 {
                font-family   : var(--global--font-heading);
                text-transform: capitalize;
                color         : var(--global--color-white);
                font-size     : 32px;
                font-weight   : 500;
                line-height   : 43px;
                margin-bottom : 0px;

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

        .banner-action {
            display    : flex;
            align-items: center;

            @media #{$maxTablet} {
                justify-content: center;
            }

            @media #{$maxSmall} {
                flex-direction: column;
            }

            .btn {
                width       : 130px;
                height      : 68px;
                margin-right: 30px;
                padding     : 0 25px;

                @media #{$maxSmall} {
                    margin-right : 0;
                    margin-bottom: 25px;
                    height       : 50px;
                }

                @media #{$noteBook} {
                    margin-right: 15px;
                }

                &:last-child {
                    width       : 167px;
                    margin-right: 0;
                }

                i {
                    font-size: 14px;
                }
            }

            &.banner-action-2 {
                .btn {
                    width: 215px;
                }
            }
        }
    }
}