.bg-res-color{
    background-color: #f2f2f2;
     min-height: 110vh;
     position: relative;
  }
 
  .res-div-1st{
    height: 110vh;
    background-image: url(/storage/imgs/res4.png);
    background-size: cover;
    background-position: 0% 0%;
  background-repeat: no-repeat;
  transition: background-position .8s;
  }

  .res-div-1st-anim{
    background-position-x: 17vw ;
    transition: background-position .8s;
  
  
  }
  .res-div-2nd{
    height: 110vh;
    background-image: url(/storage/imgs/res3.png);
    background-size: cover;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    transition: background-position .8s;
  
  }
  .res-div-2nd-anim{
    background-position: 13vw 0px;
    transition: background-position .8s;
  
  }
  .res-div-3rd{
    height: 110vh;
    background-image: url(/storage/imgs/res2.png);
    background-size: cover;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    transition: background-position .8s;
  
  }
  .res-div-3rd-anim{
    background-position: 9vw 0px;
    transition: background-position .8s;
  
  
  }
  
  .res-div-4th{
    height: 110vh;
    background-image: url(/storage/imgs/res1.png);
    background-size: cover;
    background-position: 0px 0px;
    background-repeat: no-repeat;
  position: relative;
  }

  @media(max-width:768px){

    .res-div-1st ,.res-div-2nd ,.res-div-3rd ,.res-div-4th{
      background-size:cover;

background-position-x: 50%;

    }


    .res-div-1st-anim{
      background-position: 25% 0px;
    }

    .res-div-2nd-anim{
      background-position: 30% 0px;
    }

    .res-div-3rd-anim{
      background-position: 38% 0px;
    }

.res-title{
  font-size: 3rem;
}


  }
  @media(min-width:768px){

  
  .res-content{
    position: absolute;
    width: 47vw;
    top: 20vh;
  }


}