<style>
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

    body {
        background: linear-gradient(rgba(180,0,0,0.85), rgba(180,0,0,0.85)),
                  url('images/background.png') center/cover no-repeat;
        color: #ffffff;
        text-align: center;
    }


	 .home {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 14px;
      border: 1px solid #fff;
      padding: 6px 14px;
      text-decoration: none;
      color: #fff;
    }
	
	.logo {
		position: absolute;
		top: 10px;
		right: 70px;
		width: 100px;
	}
	
	.logo1 {
		position: absolute;
		top: 5px;
		right: 10px;
		width: 80px;
	}

	.tittle {
		position: center;
		top: 20px;
		width: 80%;
		margin-top: 10%;
		margin-bottom: -5%;
	}

	.hero{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		text-align:center;
		padding:40px;
	}

	.hero h1{
		font-size:5rem;
		font-weight:800;
		letter-spacing:2px;
	}


	.hero p{
		max-width:850px;
		font-size:2rem;
		line-height:1.2;
	}

	.motto{
		font-style:italic;
		font-size:2rem;
		margin:20px 0;
	}

	.info{
		margin-top:20px;
		font-size:2rem;
	}

	
	footer {
		
        padding: 20px;
        font-size: 0.9rem;
        background: rgba(0,0,0,0.2);
    }
	

	.arrow {
	  width: 35px;
	  height: 35px;
	  border-left: 5px solid #fff;
	  border-bottom: 5px solid #fff;
	  position: absolute;
	  top: 100%;
	  right: 5%;
	  transform: translate(-40%, -50%) rotate(-135deg);
	}
	
	.arrow2 {
	  width: 35px;
	  height: 35px;
	  border-left: 5px solid #fff;
	  border-bottom: 5px solid #fff;
	  position: absolute;
	  top: 100%;
	  right: 5%;
	  transform: translate(-40%, -50%) rotate(45deg);
	}
</style>
