@media (max-width: 1400px) {
  /* Hero */
  .hero {
    h1 {
      font-size: 40px;
    }

    .hero-text h3 {
      font-size: 24px;
    }
  
    .hero-img1 img {
      max-height: 250px;
    }
  
    .hero-img2 img {
      max-height: 250px;
    }
  
    .hero-img3 img {
      max-width: 250px;
    }
  } 

  /* Usluge */
  #usluge h1 {
    font-size: 40px;
  }
}

@media (max-width: 1200px) {
  /*Hero*/
  .hero {
    grid-template-columns: repeat(3, 1fr);
    
    .hero-text {
      grid-column: span 2;
      grid-row: 2;
    }
    
    .hero-img1 {
      grid-column: 1 / span 2;
      grid-row: 3;

      img {
        max-height: 200px;
      }
    }
  
    .hero-img2 {
      grid-column: 3;
      grid-row: 3;

      img {
        max-height: 200px;
      }
    }
  
    .hero-img3 {
      grid-column: 3;
      grid-row: 2;

      img {
        max-width: 200px;
      }
    }
  }

  /* Usluge */
  #usluge {

    h1 {
      font-size: 30px;
    }

    .usluge1, .usluge2 {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      height: 100%;

      h2 {
        grid-column: span 2;
      }
    }
  }


}

@media (max-width: 992px) {
  /* O nama */
  #onama {
    flex-direction: column;

    .tekst, .slika {
      width: 100%;
    }
  }

  /* Kontakt */
  #kontakt {
    h1 {
      font-size: 30px;
      margin: 50px 0 16px;
    }

    p {
      text-align: center;
    }

    .kontakt-flex {
      flex-direction: column;

      .info {
        flex-direction: column-reverse;
        margin-top: 50px;
        align-items: center;
      }
    }
  } 
}

@media (max-width: 768px) {
  /* Navbar */
  .top {
    display: none;
  }

  .navbar {
    top: 0;

    .nav-flex{

      .logo {
        height: 50px;
      }
      
      .menu-items {
        display: none;  
      }
      
      .mobile-menu {
        display: block;
      }
    }
  }
}



@media (max-width: 576px) {
  /* Navbar */
  .navbar .nav-flex .mobile-menu .mobile-menu-items {
    height: 65vh;
  }

  /* Hero */
  .hero {
    grid-template-columns: repeat(1, 1fr);
    
    h1 {
      font-size: 26px;
      margin-bottom: 30px;
      text-align: left;
    }

    .hero-text {
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0 auto;
      padding: 8px;
      height: 100px;
      width: 250px;
      
      h3 {
        font-size: 16px;
        margin-bottom: 30px;
      }
    }
  
    .hero-img2 {
      display: none;
    }
  
    .hero-img3 {
      display: none;
    
    }
  }

  /* Usluge */
  #usluge {

    h1 {
      font-size: 24px;
    }

    .usluge1, .usluge2 {
      grid-template-columns: repeat(1, 1fr);
      gap: 40px;
      height: 100%;
      
      h2 {
        font-size: 22px;
        grid-column: span 1;
      }

      .usluge h3 {
        font-size: 16px;
      }
    }
  }

  /* O nama */
  #onama {
    .tekst .onama {
      width: 300px;

      h3 {
        font-size: 26px;
      }

      p {
        font-size: 16px;
      }
    }
  }

  /* Kontakt */
  #kontakt {
    h1 {
      display: none;
    }

    p {
      text-align: center;
    }

    .kontakt-flex {
      flex-direction: column;

      .kontakt-forma {
        grid-template-columns: repeat(1, 1fr);
        width: 95%;
        height: 100%;

        h3 {
          grid-column: span 1;
        }

        .form-group {

          &:nth-child(6) {
            grid-column: span 1;
          }

          textarea, input, .btn {
            width: 250px;
            margin-bottom: 16px;
          }
        }

      }

      .info {
        flex-direction: column-reverse;
        margin-top: 50px;

        p {
          font-size: 16px;
          text-align: center;
        }

        .logo {
          margin-bottom: 25px;

          img {
            width: 150px;
          }
        } 
      }
    }
  }
}