.hero{
        display:flex;
        width:100%;
        height:100vh;
        background-color:grey;
        justify-content:center;
        align-items:flex-end;
        padding: 60px 53px 190px 53px;
        position:sticky;
        top:0;
        overflow:hidden;
        z-index: 1;
      }

      .hero .content{
        width:100%;
        /*background-color:green;*/
        display:flex;
        gap:54px;
        justify-content:space-between;
        max-width:1434px;
        z-index:3;
        align-items: flex-start;
      }

      .hero h1{
        max-width:730px;
        width:100%;
        color:white;
        font-size: 40px ;
        line-height: 71px;
        text-decoration: underline;
        text-underline-offset: 15px;
        text-decoration-thickness: 1px;
        color: white;
        text-transform:uppercase;
      }

      .hero .textos{
        width:100%;
        max-width:650px;
        /*background-color:brown;*/
        gap:22px;
        display:flex;
        flex-direction:column;
        color:white;
        font-size: 16px;
        line-height: 26px;
      }
  
      .hero a{
        text-decoration:none;
        cursor:pointer;
        width:fit-content;
        padding:16px 24px;
        background-color:lightgrey;
        margin-top:10px;
        font-size: 15px;
        line-height: 15px;
        color:black;
      }

      
      .hero .background{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:0;
      }

        
      .hero .background.gradiente{
        z-index: 2;
      }

      .hero video{
        width:100%;
        height:100%;
        object-position:center;
        object-fit:cover;
      }

      .hero .gradient{
        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;
       background:linear-gradient( to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.6), rgba(0,0,0,0.9));
      }