.banner{
  display:flex;
  width:100%;
  height:876px;
  padding:20px;
  background-color:grey;
  justify-content:center;
  position:relative;
  align-items:center;
}

      .banner .video{
        display:flex;
        position:absolute;
        z-index:1;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:black;
      }
      

 .banner .video video{
  width:100%;
  height:100%;
  object-fit:cover;
}


.banner .gradient{
        display:flex;
        position:absolute;
        z-index:2;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity: 0.8;
}

.banner .gradient img{
  width: 100%;
  object-position:center;
  object-fit:cover;
}


      .banner .content{
        width:100%;
        display:flex;
        gap:32px;
        flex-direction:column;
        max-width:1174px;
        /*background-color:brown;*/
        z-index:4;
      }

      .banner .logo{
        width:428px;
        height:207px;
        display:flex;
        /*background-color:black;*/
      }

      .banner .logo img{
        width:100%;
        object-fit:cover;
        object-position:center;
      }

      .banner h1{
        width:100%;
        max-width:689px;
        font-size:45.14px;
        line-height:47px;
        color:white;
        letter-spacing:0.02em;
      }

      .banner h3{
        width:100%;
        max-width:553px;
        font-size:25px;
        line-height:34px;
        color:white;
        font-weight:500;
      }





@media (max-width:700px){

.banner h1{
  font-size:35px;
  line-height:33px;
}

.banner h3{
  font-size:19px;
  line-height:24px;
}

  .banner{
  width:100%;
  height:800px;
  align-items: center;
  justify-content: center;
  padding:70px 30px;
  } 

  .banner .content{
      align-items: center;
      justify-content: center;
      text-align: center;
  }

  .banner .logo{
width:299.6px;
height:144.9px;
  }


}