* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #F9A922;
}

.brand-logo {
  display: flex;
  justify-content: center;
}

.brand-logo img {
  width: 250px;
}

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: calc((100vh - 1vh) - 101.44px);
  margin-top: 1vh;
  padding: 25px;
}

.wilingrow-app {
  position: relative;
  overflow: hidden;
}


.wilingrow-app img {
  width: 620px;
  height: 600px;
  display: block;
  transition: all 0.5s ease-in-out;
}
.sm-image{
    object-fit: contain;
    position: relative;
    top: 0;
    left: 0;
}
.lg-imges {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;

}
.hover-class .sm-02{
  opacity: 0;
}
.hover-class .lg-02{
  opacity: 1;
  transform: translateX(0);
}
.wilingrow-app:hover .lg-imges {
  transform: translateX(0);
  opacity: 1;
}

.wilingrow-app:hover .sm-image {
  transform: translateX(-10%);
  opacity: 0;
}

@media screen and (max-width:1900px){
  .wilingrow-app img {
    width: 550px;
    height: 535px;
  }
}
@media screen and (max-width:1720px){
  .wilingrow-app img {
    width: 520px;
    height: 505px;
  }
}

@media screen and (max-width:1640px){
  .wilingrow-app img {
    width: 490px;
    height: 480px;
  }
}

@media screen and (max-width:1530px){
  .wilingrow-app img {
    width: 460px;
    height: 450px;
  }
}

@media screen and (max-width:1550px){
  .wilingrow-app img {
    width: 430px;
    height: 420px;
  }
}

@media screen and (max-width:1360px){
  .wilingrow-app img {
    width: 390px;
    height: 380px;
  }
}

@media screen and (max-width:1210px){
  .wilingrow-app img {
    width: 360px;
    height: 350px;
  }
}

@media screen and (min-width: 992px) and (max-width:1400px){
  .brand-logo img {
    width: 180px;
  }
  .app-container {
    height: calc((100vh - 1vh) - 60px);
  }
}


@media screen and (max-width:1210px){
  .wilingrow-app img {
    width: 320px;
    height: 290px;
  }
}

@media screen and (max-width: 992px){
  .brand-logo img {
    width: 160px;
  }
}
@media screen and (max-width:1020px){
  .wilingrow-app img {
    width: 290px;
    height: 260px;
  }
}

@media screen and (max-width:992px){
  .wilingrow-app img {
    width: 235px;
    height: 215px;
  }
}

@media screen and (max-width:768px){
  .app-container {
    flex-direction: column;
    height: unset;
    gap: 50px;
  }

  .wilingrow-app {
    width: 100%;
    height: 530px;
  }
  .wilingrow-app img{
    width: 100%;
    height: 100%;
  }
  .wilingrow-app a{
    height: auto;
    display: inline-block;
  }
  .sm-image{
    opacity: 0;
  }

  .lg-imges {
    width: 100%;
    transform: translateX(0);
    opacity: 1;
  }

}

@media screen and (max-width:610px){

  .wilingrow-app {
    width: 100%;
    height: 430px;
  }

}

@media screen and (max-width:520px){
  .wilingrow-app {
    width: 100%;
    height: 380px;
  }
}

@media screen and (max-width:420px){
  .wilingrow-app {
    width: 100%;
    height: 300px;
  }
  .app-container {
      padding: 40px 20px 20px 20px;
      margin: 0;
    }
}

@media screen and (max-width:360px){
  .app-container {
    padding: 40px 20px 20px 20px;
    }
  .wilingrow-app {
    width: 100%;
    height: 280px;
  }
}

@media screen and (max-width:330px){
  .wilingrow-app {
    width: 100%;
    height: 240px;
  }
  
}

@media screen and (max-width:300px){
  .wilingrow-app {
    width: 100%;
    height: 220px;
  }
}

@media screen and (max-width:280px){
  .wilingrow-app {
    width: 100%;
    height: 180px;
  }
      .app-container {
        padding: 25px 20px 20px 20px;
    }
      .app-container {
        gap: 30px;
    }
}