@charset "utf-8";
/* CSS Document */
	       header {
	   height: 800px;
	   width: 100vw;
	   background: #033f63;
	   overflow: hidden;
	}
	           
	.div-fade {
	   position: relative;
	   height: 800px;
	   width: 100%;
	}

	.div-fade-bg {
	   position: absolute;
	   left: 0;
	   bottom: 0;
		max-height: 300px;
		}       


	   .hero-text {
	 text-align: center;
	 position: absolute;
	 top: 40%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 color: white;
	}
	  

	 @media only screen and (max-width: 1000px) {
	 /* For smaller screens */
	 header {
	   max-height: calc(400px);
	     
	 }
	           .div-fade {
	   position: relative;
	   height: 400px;
	   width: 100%;
	}
	           .hero-text {
	 text-align: center;
	 position: absolute;
	 top: 20%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	}
	}
		
	       @media only screen and (max-width: 600px) {
	 /* For smaller screens */
	 header {
	   max-height: calc(300px);
	     
	 }
	           .div-fade {
	   position: relative;
	   height: 300px;
	   width: 100%;
	}
	           .hero-text {
	 text-align: center;
	 position: absolute;
	 top: 17%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	}
	}
	       @media only screen and (max-width: 450px) {
	 /* For smaller screens */
	 header {
	   max-height: calc(150px);
	 }
	           .div-fade {
	   position: relative;
	   height: 150px;
	   width: 100%;
	}
	           .hero-text {
	               display: none;
	           }
	}

.hero{
	color: white;
}