@media only screen and (max-width: 760px) {
    .granulats .hero-text {
        top: 300px;
        left: 10%;
        right: 10%;
    }
    
  }
  @media only screen and (min-width: 761px) and (max-width: 1200px) {
    .granulats .hero-text {
        top: 300px;
        left: 20%;
        right: 20%;
    }
  }
  @media only screen and (min-width: 1201px) {
    .granulats .hero-text {
        top: 400px;
        left: 30%;
        right: 30%;
    }
  }