.welcome-banner{
  width: 100%;
  height:711px;
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: start;
  position: relative;
}
.welcome-banner::after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  height: 100%;
  background: #2d3340 ;
  width: 100%;
  z-index: -10;
}

.mobile{
    display: none!important;
}

.desktop {
    padding: 120px 91px 60px 89px;
    width: 100%;
    height: 54px;
    display: flex;
    align-items:flex-end;
    flex-direction: column;
}

.button_wrapper {
 width: 100%;
 display: flex;
 justify-content: start;
}

.play_button {
  display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 40px 12px 29px;
background: #2D3340;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 40px;
font-weight: 600;
font-size: 20px;
line-height: 30px;
color: #FFFFFF;
  width: 258px;
}



@media (min-width: 1268px) and (max-width: 1440px){
  .welcome-banner{
  background-position: right top;
  background-size: cover;
  }
  .container {
    width: 100%!important;
    align-items: start;
  }
  .container2 {
  display: none!important;
  }
}

@media (min-width: 1268px) and (max-width: 1350px) {
  .desktop {
    padding: 120px 91px 60px 10px;
  }
}

@media (max-width: 1268px){
  .welcome-banner::before{
    display: none;
  }
  .welcome-banner{
    display: none;
  }
  .desktop{
    display: none;
  }
  .mobile-banner {
  display: block!important;
  width:100%;
  }
  .mobile-container{
    display: block!important;
    padding: 40px 1.5rem;
    min-height:487px;
    height: fit-content;
    background-position: left top;
    background-size: contain;
    background-color: #2D3340;
    background-repeat: no-repeat;
  }
  .mobile h1{
    color: #fff;
    font-size: 32px!important;
    line-height: 38.73px;
    font-weight: 700;
  }
    .mobile h2{
    color: #E87056;
    font-size: 18px!important;
    line-height: 21.78px;
    font-weight: 600;
  }
  .mobile h3{
    color: #fff;
    font-size: 18px!important;
    line-height: 28px;
    font-weight: 400!important;
  }
  .mobile_button {
   justify-content: center;
  }
  .mobile_play {
   width: 325px;
   justify-content: center;
  }
  .mobile_play img {
    margin-right: 20px;
  }
  
}
  
.container{
  width: 50%;
  position: relative;
  z-index: 1;
}
.container > div {
  max-width: 537px;
}

.container2 {
width: 50%;
}
.welcome-banner h1{
  margin-bottom: 30px;
  color: #fff;
}
.welcome-banner h3{
  color: #fff;
}

.banner-cards{
  margin-top: 40px;
  width:100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.banner-cards .card{
  flex: 1;
  text-align: center;
}
.banner-cards .card img{
  width: 30px;
  margin: 0;
  display: inline-block;
}
.banner-cards .card a{
  text-decoration: none;
  color: unset;
}
.banner-cards .card h4{
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 0 0;
  color: #fff;
}

}

@media (max-width: 767px){

  .banner-cards{
    flex-direction: column;
  }
  .banner-cards .card{
    width: 100%;
    margin-bottom: 50px;
  }
  .banner-cards .card:last-child{
    margin-bottom: 0;
  }
}