@media screen and (width > 1230px){
    .container{
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (width < 767px){
.header-nav{

    flex-wrap: wrap;
}
}
@media screen and (width > 576px) {
    .webservice-box{
        flex-direction: row;
    }
}
@media screen and (width <= 576px) {
    .card img{
        width: 50px;
        height: 50px;
    }
    
}
@media screen and (576px < width <= 991px) {
    .card img{
        width: 75px;
        height: 75px;
    }
}
@media (hover: hover){
    .door::before{
        content: "";
    }
    .rotate{
          transform-origin: 100% 100%;
  transform: rotate(-180deg) scale(0);
  transition: 0.5s ease;
  transition-delay: 0.2s;
    }
    .opacity {
  transform: scale(0);
  transition: transform 0.3s ease;
  transition-delay: 0.7s;
}
.rotate::before {
  position: absolute;
  inset: 0;
  content: "";
  background-color: #0520f9e8;
  z-index: 1;
}
.right-flexitem .rotate {

  transform-origin: 0% 100%;
  transform: rotate(180deg) scale(0);
}
}