/* 07.02. Section Title CSS */

.section-title {
    position: relative;
    z-index: 99;

    margin-bottom: 60px;
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }

    & .sub-title {
        font-size: 15px;
        font-weight: 500;
        line-height: 1;

        display: block;

        margin-bottom: 10px;

        letter-spacing: 2px;
        text-transform: uppercase;

        color: $secondary-light;
    }

    & .title {
        font-size: 34px;

        margin: 0;

        color: $secondary;
        &.fz-48{
            font-size: 48px !important;
            // Responsive
            @media #{$tablet-device}{
                font-size: 42px !important;
            }
            @media #{$large-mobile}{
                font-size: 36px !important;
            }
            @media #{$extra-small-mobile}{
                font-size: 26px !important;
            }
        }
        &.fz-40{
            font-size: 40px !important;
            // Responsive
            @media #{$tablet-device}{
                font-size: 34px !important;
            }
            @media #{$large-mobile}{
                font-size: 30px !important;
            }
            @media #{$extra-small-mobile}{
                font-size: 26px !important;
            }
        }
        &.playfair-font{
            font-size: 34px;
            font-weight: 400;
            line-height: 1.42;
            font-family: $playfair-font;
            span{
                color: $primary-two;
            }
            // Responsive
            @media #{$tablet-device}{
                font-size: 30px;
            }
            @media #{$large-mobile}{
                font-size: 26px;
                br{
                    display: none;
                }
            }
        }

        & span {
            font-weight: 400;

            color: $primary;
        }
    }
    h3.title{
        font-size: 24px;
    }

    &.color-light{
        .sub-title{
            color: #696969;
        }
        .title{
            color: $white;
        }
    }

    @media #{$large-mobile} {
        & .title {
            font-size: 26px;
        }
    }
}

.section-title-two{
    position: relative;
    z-index: 99;
    max-width: 970px;
    margin: 0 auto;
    margin-bottom: 60px;
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }

    & .sub-title {
        display: block;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.34;
        color: $primary;
        margin-bottom: 30px;
    }

    & .title {
        font-size: 34px;
        line-height: 1.42;
        margin: 0;
        color: $heading-color;
        
        &.fz-48{
            font-size: 48px;
            // Responsive
            @media #{$tablet-device}{
                font-size: 42px;
            }
            @media #{$large-mobile}{
                font-size: 36px;
            }
            @media #{$small-mobile}{
                font-size: 26px;
            }
            @media #{$extra-small-mobile}{
                font-size: 26px;
            }
        }
    }

    // Responsive
    @media #{$desktop-device} {
        & .sub-title{
            font-size: 21px;
            margin-bottom: 20px;
        }
        & .title {
            font-size: 40px;
        }
    }
    @media #{$tablet-device} {
        & .sub-title{
            font-size: 21px;
            margin-bottom: 20px;
        }
        & .title {
            font-size: 40px;
        }
    }
    @media #{$large-mobile} {
        & .sub-title{
            font-size: 18px;
            margin-bottom: 10px;
        }
        & .title {
            font-size: 32px;
        }
    }
    @media #{$small-mobile} {
        & .sub-title{
            font-size: 18px;
            margin-bottom: 10px;
        }
        & .title {
            font-size: 26px;
        }
    }
    @media #{$extra-small-mobile} {
        & .sub-title{
            font-size: 18px;
            margin-bottom: 10px;
        }
        & .title {
            font-size: 26px;
        }
    }
}

.section-title-three{
    position: relative;
    z-index: 99;
    max-width: 580px;
    margin: 0 auto;
    margin-bottom: 60px;
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }

    & .sub-title {
        font-family: $rossela-font;
        font-size: 48px;
        font-weight: 400;
        color: $secondary-three;
    }

    & .title {
        font-size: 34px;
        line-height: 1.42;
        margin: 0;
        color: $heading-color;
        
        &.fz-48{
            font-size: 48px;
            // Responsive
            @media #{$tablet-device}{
                font-size: 42px;
            }
            @media #{$large-mobile}{
                font-size: 36px;
            }
            @media #{$small-mobile}{
                font-size: 26px;
            }
            @media #{$extra-small-mobile}{
                font-size: 26px;
            }
        }
    }

    // Responsive
    @media #{$desktop-device} {
        & .sub-title{
            font-size: 40px;
        }
        & .title {
            font-size: 40px;
        }
    }
    @media #{$tablet-device} {
        & .sub-title{
            font-size: 40px;
        }
        & .title {
            font-size: 30px;
        }
    }
    @media #{$large-mobile} {
        & .sub-title{
            font-size: 32px;
        }
        & .title {
            font-size: 26px;
        }
    }
}

.section-title-four{
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;
    .sub-title{
        display: block;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.34;
        color: $secondary-three;
        margin-bottom: 20px;
    }
    .title{
        font-size: 40px;
        line-height: 1.2;
        margin: 0;
    }
    p{
        font-size: 18px;
        font-weight: 600;
        line-height: 1.67;
        color: $heading-color;
        margin-top: 15px;
        margin-bottom: 0;
    }

    // Responsive
    @media #{$desktop-device}{
        .sub-title{
            font-size: 21px;
        }
        .title{
            font-size: 34px;
        }
    }
    @media #{$tablet-device}{
        .sub-title{
            font-size: 21px;
        }
        .title{
            font-size: 34px;
        }
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
        .sub-title{
            font-size: 18px;
        }
        .title{
            font-size: 28px;
        }
    }
}

.section-title-five{
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 60px;
    .title{
        font-size: 34px;
        line-height: 1.42;
        font-weight: 700;
        margin: 0;
    }
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 30px;
        .title{
            font-size: 28px;
        }
    }
}

.instagram-section-title{
    .title{
        font-family: $playfair-font;
        font-size: 34px;
        font-weight: 400;
        line-height: 1.42;
        color: $secondary;
        margin: 0;
        a{
            display: block;
            &:hover{
                color: $primary-two;
            }
        }
    }
    .sub-title{
        display: inline-block;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.74;
        color: $primary-two;
        margin-top: 7px;
    }
}

.instagram-section-title-two{
    margin-bottom: 60px;
    // Responsive
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    .title{
        font-size: 40px;
        line-height: 1.2;
        margin: 0;
        // Responsive
        @media #{$tablet-device}{
            font-size: 34px;
        }
        @media #{$large-mobile}{
            font-size: 30px;
        }
        @media #{$extra-small-mobile}{
            font-size: 26px;
        }
    }
    .sub-title{
        display: block;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.34;
        color: $secondary-three;
        margin-top: 20px;
        // Responsive
        @media #{$large-mobile}{
            margin-top: 10px;
        }
        a{
            &:hover{
                color: $primary-three;
            }
        }
    }
}

.secondary-color{
    color: $secondary !important;
}

.heading-color{
    color: $heading-color !important;
}