@use '../utils' as *;

/*----------------------------------------*/
/*  2.11 Section Title
/*----------------------------------------*/
.#{$theme-prifix}-section{
    &-subtitle{
        border: 1px solid var(--tp-border-1);
        border-radius: 50px;
        padding: 6px 18px;
        display: inline-block;
        & .borders{
            width: 10px;
            height: 10px;
            background: var(--tp-common-black);
            border-radius: 30px;
            margin-right: 8px;
        }
        &-white{
            border: 1px solid rgba(255, 255, 255, 0.1);
            & .borders{
                background: var(--tp-common-white);
            }
        }
        &-cst{
            & .borders{
                background: var(--tp-common-black-1);
            } 
        }
    }
    &-pp{
        &-subtitle{
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            background: #0d0d0d;
            padding: 5px 24px;
        }
        &-white{
            &-subtitle{
                border: 1px solid #eee;
                background: transparent;
            }
        }
    }
    &-cst{
        &-subtitle{
            border: none;
            padding: 0;
        }
    }
    &-it{
        &-subtitle{
            border: 1px solid #E4EAE7;
            border-radius: 50px;
            padding: 2px 32px;
            &-white{
                border: 1px solid rgba(243, 241, 242, 0.1);
            }
        }
        &-para{
            @media #{$xl,$lg,$md,$sm,$xs}{
                & br{
                    display: none;
                }
            }
        }
    }
    &-ai{
        &-para{
            @media #{$xl,$lg,$md,$sm,$xs}{
                & br{
                    display: none;
                }
            }
        }
        &-title{
            @media #{$xl,$lg,$md,$sm,$xs}{
                & br{
                    display: none;
                }
            }
        }
    }
    &-md{
        &-title{
            @media #{$xxl}{
                font-size: 55px;
            }
            @media #{$xl,$lg,$md,$sm}{
                font-size: 50px;
            }
            @media #{$xs}{
                font-size: 40px;
            }
        }
    }
    &-3{
        &-para{
            @media #{$xl,$lg,$md,$sm,$xs}{
                & br{
                    display: none;
                }
            }
        }
    }
}