*{
		margin: 0;
		padding: 0;
	}
	.hero-container{
		position: relative;
		color: #f0f0f0;
		font-family:'Inter',sans-serif;
	}
	.cards{
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    padding:2%;
		position: absolute;
		top: 450px;
		left: 12.5%;
		width: 75%;
	}
	.box{
	    padding: 25px;
	    background-color:#f0f0f0;
	    border-radius:20px;
	}
	.grid-container{
		padding: 5px;
	    display:grid;
	    grid-auto-columns: 30%;
	    grid-auto-rows: auto;
	    gap: 2em;
	    grid-template-areas: "box-1 box-1 box-2" "box-1 box-1 box-3" "box-4 box-4 box-4"
	}
	.bg-img{
	    width:100%;
	    z-index: 999;
	    height:60%;
		
		
	}
	.text{
		height: 40%;
		width: 100%;
		background-color: rgba(17, 16, 16, 0.7);
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		color: whitesmoke;
		text-align:center;
		

		
	}
	.text h1 {
	    
		padding: 45px;
		padding-bottom:5px;
		-webkit-text-stroke: 1px #B22222;
	}
	.text h2 {
	    padding-top:20px;
		padding-left: 15px;
		margin-top: 0;
		position:relative;
		bottom:0%;
	}
	.bg-img img{
		
		position: relative;
		top:5%;
		left:-1.5%;
		transform: rotate(-5deg);
		border-radius: 20px;
	}
	 .hero-img{
		width: 100%;
		height: 500px;
		background-image: linear-gradient(to right, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 60%), url("download_head2.jpg");
		background-attachment: fixed;
		background-size: cover;
		background-position: 0px -100px;
		display: block;
	} 
	.hero-text{
		position: absolute;
		top: 50%;
		left:5%;
		transform:translate(0%,-50%);
		text-align: left;
	}
	button{
		border: 1px solid #B22222 ;
		width:100%;
		background-color: #B22222;
		color: #f0f0f0;
		padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
		transition-duration: 0.4s;
		border-radius: 15px;
		font-family:'Inter',sans-serif;
	}
	button:hover{
		background-color: #B22222;
		color: whitesmoke;
		box-shadow:0 8px 16px 0 rgba(0,0,0,1)
	}
	hr{		
		/*left: 50px;*/
		bottom: 0px;
		color: #B22222;
		height: 2px;
		box-sizing: border-box;
		width: 90%;
	}
	.gap{
	    height:900px;
	}
		
	@media (max-width: 1000px) {
		.grid-container{
		    grid-template-areas: "box-1 " "box-1 " "box-2" "box-3 " "box-4";
		    grid-auto-columns: 100%;
		}
		.gap{
		    height:1200px;
		}
		.footer-col{
			width: 50% !important; 
			margin-bottom: 30px;
		}
	}