HOME

/* ---------------------------------------------------------------- */
/* 26.Home Intro                              
/* ---------------------------------------------------------------- */
.intro-hero-section {
	z-index: 1;
	overflow: hidden; 
	padding-top: 120px;
	padding-bottom: 120px;
	position: relative;
	align-items: center;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: $color_dark;
    .intro-hero-title {
        color: $color_white;
        font-size: 2rem;
        font-weight: 500;
        margin-bottom: 50px;
        span {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            display: block;
            text-transform: uppercase;
            margin: 0 auto 15px auto;
        }
	}
}
.demo-item {
    padding: 15px;
    margin-bottom: 30px;
    position: relative;
    border-radius: 30px;
    background: $color_white;
    transition: all 0.4s ease;
    box-shadow: 0 15px 30px 0 rgba($color_primary,0.15);
    img {
        border-radius: 20px;
    }
    .demo-item-link {
        margin-top: 15px;
        padding: 15px;
        display: block;
        border-radius: 30px;
        font-weight: 600;
        font-size: 1.125rem;
        transition: all 0.25s ease;
        color: $color_white !important;
        background: $color_primary;
        &:hover {
            color: $color_white !important;
            background: $color_dark;
        }
    }
}
.demo-features-item {
    padding: 30px;
    border-radius: 50px;
    text-align: center;
    background: $color_white;
    margin-bottom: 30px;
    transition: all 0.5s ease;
    box-shadow: 0 15px 30px 0 rgba($color_primary,0.15);
	.features-icon {
		margin-bottom: 20px;
	}
	.features-text {
		h5 {
			font-size: 1.125rem;
		}
	}
}
/* ------------------------------------------------------------- */
/* Responsive Media Query (576px)
/* ---------------------------------------------------------------- */
@media screen and (max-width:576px){
    .intro-hero-section {
        .intro-hero-title {
            font-size: 1.4rem;
            span {
                font-size: 2.2rem;
            }
        }
    }
}