@use '../utils' as *;

/*=============================
    	02. banner
===============================*/

.td-banner{
    &-title{
        &-wrap{
            & .td-section-subtitle{
                background: rgba(255, 255, 255, 0.18);
                box-shadow: none;
            }
            & .td-section-title{
                color: var(--td-common-white);
                font-family: var(--second-family);
                font-weight: 700;
                font-size: 50px;
                line-height: 120%;
                @media #{$sm,$xs} {
                    font-size: 40px;
                }
            }
            & p{
                font-family: var(--td-ff-poppins);
                font-size: 18px;
                line-height: 28px;
                text-transform: capitalize;
                color: var(--td-common-white);
                @media #{$xl,$lg,$md,$sm,$xs} {
                    & br{
                        display: none;
                    }
                }
            }
            &-2{
                & .td-section-subtitle-2{
                    background: var(--td-theme-primary);
                    color: var(--td-common-white);
                }
                & .td-btn-square{
                    clip-path: polygon(0 0, 90% 0%, 100% 30%, 100% 56%, 100% 100%, 9% 100%, 0% 66%, 0% 20%);
                    &:hover{
                        background: var(--td-theme-primary);
                        color: var(--td-common-white);
                    }
                }
            }
        }
    }
    &-spacing{
        padding-top: 174px;
        padding-bottom: 204px;
        @media #{$sm,$xs} {
            padding-top: 114px;
            padding-bottom: 120px;
        }
        &-2{
            padding-top: 174px;
            padding-bottom: 190px;
            @media #{$sm,$xs} {
                padding-top: 114px;
                padding-bottom: 120px;
            }
        }
    }
    &-2{
        &-video{
            &-wrap{
                @media #{$lg,$md,$sm,$xs} {
                    margin-left: 40px;
                }
                @media #{$md,$sm,$xs} {
                    margin-top: 100px;
                }
            }
        }
    }
}