@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
/* Credit Travery Media for example   */

:root{
	
	--primary-color: #363536;
	
}




body{
	font-family:'Open Sans', sans-serif;
	line-height:1.5;
}

a{
	text-decoration:none;
	color: var(--primary-color);
	
}

h1{
	font-weight:300;
	font-size:60px;
	line-height:1.2;
	margin-bottom:15px;	
}

.showcase{
	position:relative;	
	height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding: 0 20px;
	color:white;

	padding:0 0px;
}

.video-container {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
	overflow:hidden;
	background: var(--primary-color) url('../img/cover.jpg') no-repeat center center/cover;
	
}

.video-container video{
	min-width:100%;	
	min-height:100%;
	object-fit:cover;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	
	
}

.video-container:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	
}

.content{
	z-index:10;
	
}

.gradient_div{
position:relative; 
width:100%;
}
.gradient_section{
	z-index:3;
	position:absolute;
	width:100%;
}

.gradient_section1{
height:30%; 
background-image: linear-gradient(to bottom, rgba(109,109,109,0), rgba(109,109,109,0.8));">
}

.gradient_section2{
top:30%;
height:30%; 
background-color:rgba(109,109,109,0.8)
}
.gradient_section3{
top:60%;
height:40%; 
background-image: linear-gradient(to top, rgba(109,109,109,0), rgba(109,109,109,0.8));
}




.btnX{
display:inline-block;
padding:10px 30px;
background:var(--primary-color);
color:#fff;
border:1px #fff solid;
border-radius:5px;
margin-top:25px;
opacity:0.7;
}

.btnX:hover{
	transform:scale(0.98);
	color:#fff;
	text-decoration:none;
	
}


#about{
	padding:40px;
	
	
}

#about padding{
	font-size:1.2rem;
	max-width:600px;
	margin:auto;
	
}

#about h2{
	margin:30px 0;
	color: var(--primary-color);
}

.social a{
	margin:0;
}