*{  margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style:normal;
    font-weight: 400;

}

.hero{
    width: 100;
    height:100vh;
    background-image: linear-gardient(rgba(12,3,51,0,3),rgba(12,3,51,0,3));
    position:relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center; 
    
}
nav{ 
    width:100%;
    position: absolute;
    top:0;
    left:0;
    padding: 20px 8%;
    display:flex;
    align-items:center; 
    justify-content: space-between;
}
nav.logo{
    width:80px;
}
nav ul li{
    list-style:non;
    display:inline-block;
    margin-left:40px;
}
nav ul li a{
    text-decoration: non;
    color: #f6f3ea;
    font-size: 17px;
}

.content{ 
    text-align: center;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}
.content h1{
    font-size: 160px;
    color: #f7f7f7;
    font-weight:600;
    transition: 0.5s;
}
.content h1:hover{
    -webkit-text-stroke: 2px #fff;
    color: transparent;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
      
}
.content a{
    text-decoration: none;
    display: inline-block;
    color: #ffffff;
    font-size:24px;
    border: 2px solid #ffffff;
    padding: 14px 70px;
    border-radius:50px;
    margin-top: 20px;
}

.back-video{
    position: absolute;
    right:0;
    bottom:0;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
}
.content h2 { 
    -webkit-text-stroke: 2px #fff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center; 
    font-family:  Arial, Helvetica, sans-serif;

}

.styled-image {
    width: 50%; /
    height:auto; 
    border-radius: 10px; 
}