Viewing File: /home/maglabs/ultex/wp-content/themes/transland/assets/scss/_section.scss

// Section Padding - Change with your need.
.section-padding {
    padding: 120px 0px;

    @media (max-width: 1191px) {
        padding: 100px 0px;
    }

    @media (max-width: 767px) {
        padding: 80px 0px;
    }
}

.section-title-2 {
    padding-bottom: 10px;

    span {
        text-transform: capitalize;
        display: block;
        color: $third-color;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: $third-color;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;

        @media (max-width: 767px) {
            font-size: 22px;
            margin-bottom: 5px;
        }
    }

    h1 {
        text-transform: capitalize;
        
        @media (max-width: 767px) {
            font-size: 32px;
        }

    }

}

.block-contents { 

	.section-title {
        position: relative;
        margin-top: -10px;

        h5 {
            font-size: 150px;
            line-height: 1;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: $theme-color;
            -webkit-text-fill-color: transparent;
            opacity: .10;
            margin-bottom: 0;
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            top: -83px;
            font-weight: 700;
            text-transform: capitalize;
            z-index: -1;
            letter-spacing: -4px;

            &.relative {
                position: relative;
                margin-bottom: -68px;
                top: inherit;

                @media (max-width: 991px) {
                    margin-bottom: -55px;
                }
    
                @media (max-width: 767px) {
                    margin-bottom: -45px;
                }
    
            }

            &.text-start {
                left: 0px !important;
                transform: translateX(-5px);
            }

            &.text-white {
                -webkit-text-stroke-color: $white;
            }

            @media (max-width: 991px) {
                font-size: 100px;
                top: -45px;
            }

            @media (max-width: 767px) {
                font-size: 80px;
                top: -35px;
            }

        }

		> span { 
            font-weight: 700;
            text-transform: capitalize;
            color: $third-color;
            font-size: 14px;
            position: relative;
            padding-left: 80px;
            line-height: 1;
            font-family: $heading-font;

            &::before {
                position: absolute;
                left: 0;
                width: 60px;
                height: 2px;
                background-color: $third-color;
                content: "";
                top: 50%;
                transform: translateY(-50%);
            }
		}

		h2 { 
            font-size: 60px;
            line-height: 1.3;
            text-transform: capitalize;
        
            @media (max-width: 1191px) {
                font-size: 46px;
            }

            @media (max-width: 767px) {
                font-size: 38px;
            }

            @media (max-width: 500px) {
                font-size: 32px;
            }

            span {
                color: $second-color;
            }
		}
	}

	p { 
        margin-top: 15px;
	}

    blockquote {
        border-left: 5px solid $second-color;
        font-style: italic;
        padding-left: 20px;
        color: $theme-color;
        font-size: 20px;
        font-weight: 500;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}

.section-bg {
    background-color: $section-bg;
}

.theme-bg {
    background-color: $theme-color;

    .section-title {
        h5 {
            -webkit-text-stroke-color: $white;
        }
        h2 {
            color: $white;
        }
    }
}