@use "../utils" as *;

/*----------------------------------------*/
/*  2.6 sectiontitle
/*----------------------------------------*/
// Section subtitle 1

.section{
    &__title-wrapper{
        z-index: 1;
        &-subtitle{
            font-family: var(--rr-ff-heading);
            font-weight: var(--rr-fw-regular);
            color: var(--rr-theme-primary);
            font-style: normal;
            font-size: 15px;
            line-height: 26px;
            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary2);
            font-weight: var(--rr-fw-regular);
            font-style: normal;
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            text-align: center;
            text-transform: capitalize;
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }

            &-2{
                font-family: var(--rr-ff-heading);
                color: var(--rr-heading-primary);
                font-weight: var(--rr-fw-bold);
                font-size: var(--rr-fs-h2);
                line-height: var(--rr-lh-h2);
                font-style: normal;
                margin-bottom: 0;
    
                @media #{$lg, $md} {
                    font-size: 40px;
                    line-height: 50px;
                }
                @media #{$sm} {
                    font-size: 35px;
                    line-height: 45px;
                }
                @media #{$xs} {
                    font-size: 28px;
                    line-height: 38px;
                }
                @media #{$md, $sm, $xs} {
                    br {
                        display: none;
                    }
                }
            }
        }
    }
}
.section__title-wrapper-subtitle.text-left {
    text-align: left;
}
.section2{
    &__title-wrapper{
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary2);
            font-weight: var(--rr-fw-regular);
            font-style: normal;
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            text-transform: capitalize;
            font-style: normal;
            padding-bottom: 30px;
            border-bottom: 1px solid #E7E7EB;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
}
.section3{
    &__title-wrapper{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 15px;
        row-gap: 10px;
        border-bottom: 1px solid #E7E7EB;
        padding-bottom: 15px;
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary2);
            font-weight: var(--rr-fw-regular);
            font-style: normal;
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            text-transform: capitalize;
            font-style: normal;
            

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
}
.section{
    &__title-wrapper2{
        z-index: 1;
        &-black-subtitle{
            color: var(--rr-common-white);
            font-weight: var(--rr-fw-bold);
            font-size: 14px;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-style: normal;
            text-transform: uppercase;
            letter-spacing: 1.4px;
            @media #{$mxm} {
                letter-spacing: 0.4px;
            }
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-common-white);
            font-weight: var(--rr-fw-bold);
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
        &-2{
            @media #{$xs} {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
.section-title2{
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: end;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 20px;
    z-index: 1;
    &__wrapper{
        &-subtitle{
            font-family: var(--rr-ff-subtitle);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-sbold);
            font-size: 14px;
            font-style: normal;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary2);
            font-weight: var(--rr-fw-regular);
            font-style: normal;
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            text-transform: capitalize;
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$lg, $md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
    &__button{
        a{
            color: var(--rr-common-white);
            font-family: var(--rr-ff-heading);
            font-weight: var(--rr-fw-sbold);
            line-height: var(--rr-lg-h5);
            background: var(--rr-theme-primary);
            font-size: 14px;
            font-style: normal;
            display: inline-flex;
            padding: 15px 30px;
            align-items: center;
            gap: 10px;
            transition: .3s;
            margin-bottom: 0;
            border-radius: 30px;

            &:hover{
                background: var(--rr-heading-primary);
            }
        }
    }
    &__paragraph{
        font-family: var(--rr-ff-body);
        color: var(--rr-text-body);
        font-weight: var(--rr-fw-regular);
        line-height: var(--rr-lg-h5);
        font-size: 16px;
        margin-bottom: 0;
        font-style: normal;

        @media #{$lg, $md, $sm, $xs} {
            br {
                display: none;
            }
        }
    }
}
.section-slider-title{
    justify-content: space-between;
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 20px;
    &-wrapper{
        &-subtitle{
            font-family: var(--rr-ff-subtitle);
            color: var(--rr-common-white);
            font-weight: var(--rr-fw-sbold);
            font-size: 14px;
            font-style: normal;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1.4px;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-common-white);
            font-weight: var(--rr-fw-bold);
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
    &-button{
        display: flex;
        align-items: center;
        gap: 20px;
        &-right{
            height: 60px;
            width: 60px;
            border: 1px solid #E3DBD8;
            background: #034833;
            border-radius: 50%;
            transition: .3s;

            i{
                color: var(--rr-common-white);
            }
        
            &:hover{
                background: var(--rr-theme-primary);
                border-color: var(--rr-theme-primary);
        
                i{
                    color: var(--rr-common-white);
                }
        
                & svg {
                    path {
                        fill: var(--rr-common-white);
                    }
                }
            }
        }
    }
}
.section-slider-title-2{
    justify-content: space-between;
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 20px;
    &-wrapper{
        &-subtitle{
            font-family: var(--rr-ff-subtitle);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-sbold);
            font-size: 14px;
            font-style: normal;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1.4px;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-bold);
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
    &-button{
        display: flex;
        align-items: center;
        gap: 20px;
        &-right{
            height: 60px;
            width: 60px;
            border: 1px solid #E3DBD8;
            background: #F1F5EB;
            border-radius: 50%;
            transition: .3s;

            i{
                color: var(--rr-heading-primary);
            }
        
            &:hover{
                background: var(--rr-theme-primary);
                border-color: var(--rr-theme-primary);
        
                i{
                    color: var(--rr-common-white);
                }
        
                & svg {
                    path {
                        fill: var(--rr-common-white);
                    }
                }
            }
        }
    }
}
.section-slider-title-3{
    justify-content: space-between;
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    column-gap: 10px;
    row-gap: 20px;
    &-wrapper{
        &-subtitle{
            font-family: var(--rr-ff-subtitle);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-sbold);
            font-size: 14px;
            font-style: normal;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1.4px;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-bold);
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
    &-button{
        display: flex;
        align-items: center;
        gap: 20px;
        &-right{
            height: 60px;
            width: 60px;
            background: #d5dfd4;
            border-radius: 50%;
            transition: .3s;

            i{
                color: var(--rr-heading-primary);
            }
        
            &:hover{
                background: var(--rr-theme-primary);
                border-color: var(--rr-theme-primary);
        
                i{
                    color: var(--rr-common-white);
                }
        
                & svg {
                    path {
                        fill: var(--rr-common-white);
                    }
                }
            }
        }
    }
}
.section-slider-title-7{
    justify-content: space-between;
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    column-gap: 10px;
    row-gap: 20px;

    
    &-wrapper{
        &-subtitle{
            font-family: var(--rr-ff-subtitle);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-sbold);
            font-size: 14px;
            font-style: normal;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1.4px;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-bold);
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
    &-button{
        display: flex;
        align-items: center;
        gap: 20px;
        position: absolute;
        bottom: 46px;
        right: 67px;
        z-index: 1;
        @media #{$xs} {
            display: none;
        }
        &-right{
            height: 60px;
            width: 60px;
            background: #f1f5eb;
            border-radius: 50%;
            transition: .3s;

            i{
                color: var(--rr-heading-primary);
            }
        
            &:hover{
                background: var(--rr-theme-primary);
                border-color: var(--rr-theme-primary);
        
                i{
                    color: var(--rr-common-white);
                }
        
                & svg {
                    path {
                        fill: var(--rr-common-white);
                    }
                }
            }
        }
    }
}
.section-slider-title-4{
    justify-content: space-between;
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    column-gap: 10px;
    row-gap: 20px;
    position: relative;
    z-index: 2;
    &-wrapper{
        &-subtitle{
            font-family: var(--rr-ff-subtitle);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-sbold);
            font-size: 14px;
            font-style: normal;
            line-height: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1.4px;
        }
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-heading-primary);
            font-weight: var(--rr-fw-bold);
            font-size: var(--rr-fs-h2);
            line-height: var(--rr-lh-h2);
            font-style: normal;
            margin-bottom: 0;

            @media #{$md} {
                font-size: 40px;
                line-height: 50px;
            }
            @media #{$sm} {
                font-size: 35px;
                line-height: 45px;
            }
            @media #{$xs} {
                font-size: 28px;
                line-height: 38px;
            }
            @media #{$md, $sm, $xs} {
                br {
                    display: none;
                }
            }
        }
    }
    &-button{
        display: flex;
        align-items: center;
        gap: 20px;
        &-right{
            height: 60px;
            width: 60px;
            background: transparent;
            border-radius: 50%;
            transition: .3s;
            border: 1px solid var(--rr-heading-primary);

            i{
                color: var(--rr-heading-primary);
            }
        
            &:hover{
                background: var(--rr-theme-primary);
                border-color: var(--rr-theme-primary);
        
                i{
                    color: var(--rr-common-white);
                }
        
                & svg {
                    path {
                        fill: var(--rr-common-white);
                    }
                }
            }
        }
    }
}
.coustom{
    &__title{
        @media #{$lg, $md, $sm, $xs} {
            br {
                display: none;
            }
        }
    }
    &__paragraph{
        @media #{$lg, $md, $sm, $xs} {
            br {
                display: none;
            }
        }
    }
}
.si__section__title h6 {
    font-weight: 400;
    font-size: 20px;
    line-height: 42px;
    text-transform: uppercase;
    color: var(--rr-theme-primary);
    @media #{$lg2}{
        font-size: 17px;
    }
}
.si__section__title h1 {
    font-size: 49px;
    line-height: 60px;
    font-weight: 500;
    @media #{$lg2}{
        font-size: 31px;
    }
    @media #{$xs}{
        font-size: 29px;
        line-height: 35px;
    }
}
.si__section__title p {
    font-weight: 400;
    font-size: 16px;
    margin-top: 19px;
    br{
        @media #{$lg}{
            display: none;
        }
    }
    br{
        @media #{$lg2}{
            display: none;
        }
    }
    @media #{$lg2}{
        margin-bottom: 31px;
        font-size: 15px;
    }
}