/* ========================================
HERO SECTION
======================================== */

.hero{
background: linear-gradient(
rgba(0,0,0,0.5),
rgba(0,0,0,0.5)
),
url('/assets/images/hero-bg.jpg');

background-size: cover;
background-position: center;

color: white;

min-height: 500px;

display: flex;
align-items: center;
text-align: center;
}

/* ========================================
HERO CONTENT
======================================== */

.hero .container{
max-width: 700px;
}

/* Main Title */

.hero h1{
font-size: 48px;
margin-bottom: 15px;
line-height: 1.2;
}

/* Subtitle */

.hero p{
font-size: 18px;
margin-bottom: 30px;
color: #f1f1f1;
}

/* Call To Action Button */

.hero .btn-primary{
font-size: 16px;
padding: 14px 32px;
}

/* ========================================
RESPONSIVE HERO
======================================== */

@media (max-width: 768px){

.hero{
min-height: 420px;
padding: 60px 0;
}

.hero h1{
font-size: 32px;
}

.hero p{
font-size: 16px;
}

}