@media (max-width: 786px) {
    .d-flex-sm {
    display: flex!important;
    flex-direction: column;
    }
    .element-hero-animation{
        display: none;
    }
    .hero-products{
        height: 1200px !important;
    }
}
.trang{
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
    position: fixed;
    border-radius: 0%;
    background: white;
    animation: ripple 15s infinite;
    box-shadow: 0px 0px 1px 0px #508fb9;
    border-radius: 0 10%  10% 10%;
    }
    .large{
    width: 20vw;
    height: 20vw;
    left: -20vh;
    bottom: 3vh;
    -webkit-transform:rotate(45deg);
    background: var(--secondary-color) !important;

    }
    .xlarge{
    width: 30vw;
    height: 30vw;
    left: -23vh;
    bottom: -5vh;
    -webkit-transform:rotate(45deg);

    }
    .large1{
    width: 10vw;
    height: 10vw;
    right: -15vh;
    top: 13vh;
    -webkit-transform:rotate(45deg);
    background: var(--main-color) !important;


    }
    .xlarge1{
    width: 15vw;
    height: 15vw;
    right: -20vh;
    top: 8vh;
    -webkit-transform:rotate(45deg);

    }
.shade1{
  opacity: 0.5;
}
.shade2{
  opacity: 0.6;
}

@keyframes ripple{
  0%{
    transform:rotate(45deg)  !important;
  }

  50%{
    transform:rotate(-45deg) !important;
    transform: scaleX(1);
  }

  100%{
    transform: rotate(45deg) !important;
  }
}

.hero-products {
  height:700px;
  position: relative  !important;
  z-index: -1 !important;
}

.element-hero-animation {
  background:#f2f2f2;
  position:fixed;
  border:0px solid #d6d6d6;
}

body
{
    background-color: white;
}