.hero-container{
		position: relative;
		color: #f0f0f0;
		font-family:'Inter',sans-serif;
	}
	.hero-img{
		width: 100%;
		height: 500px;
		background-image: linear-gradient(to right, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 60%), url("hero.webp");
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		display: block;
	}
	.hero-text{
		position: absolute;
		top: 50%;
		left:5%;
		transform:translate(0%,-50%);
		text-align: left;
	}
	button{
		border: 1px solid #B22222 ;

		background-color: transparent;
		color: #f0f0f0;
		padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 2px;
		transition-duration: 0.4s;
		font-family:'Inter',sans-serif;
	}
	button:hover{
		background-color: #B22222;
		color: whitesmoke;
		box-shadow:0 8px 16px 0 rgba(0,0,0,1)
	}
	.cards{
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    padding:2%;
		position: relative;
		left:3%;
		width: 90%;
		
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	body {
	    background-color:#f0f0f0;
	}
	.box{
	    
	    /*background-color:#f0f0f0;*/
	    border-radius:20px;
	    background-color:white;
	    text-align:justify;
	    box-shadow:rgba(10,10,10,0.6) 5px 5px 0px 0px;
	}
	.box img{
	    position:relative;
	    top:0;
	    left:0;
	}
	.text{
		width: 100%;
		padding-right:15px;
		padding-bottom:15px;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		color: #2C3E50;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	.text i {
	    color: #B22222;
	    margin:10px;
	}
	
	.text h1 {
	    width:100%;
		padding: 15px;
		padding-bottom:5px;
		Color
		/*-webkit-text-stroke: 1px #B22222;*/
	}
	.text h3 {
	    padding-top:20px;
		padding-left: 15px;
		margin-top: 0;
		position:relative;
		bottom:0%;
	}
	.text h2 {
	    padding-top:20px;
		padding-left: 15px;
		margin-top: 0;
		position:relative;
		bottom:0%;
	}
	.box iframe{
	    height:400px;
	    border-radius:20px;
	    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
	    margin-bottom:10px;
	}
	
	.grid-container{
		padding: 5px;
	    display:grid;
	    width:100%;
	    grid-auto-columns: 25%;
	    grid-auto-rows: auto;
	    gap: 2em;
	    grid-template-areas: "box-1 box-2 box-3 box-4";
	}
		@media (max-width: 1365px) {
		.grid-container{
		    grid-template-areas: "box-1 box-2" "box-3 box-4";
		    grid-auto-columns: 50%;
		}
		.gap{
		    height:1200px;
		}
		}
			@media (max-width: 800px) {
		.grid-container{
		    grid-template-areas: "box-1" "box-2" "box-3" "box-4";
		    grid-auto-columns: 100%;
		}
		.gap{
		    height:1200px;
		}
	
    }