/* navbar responsive css start */

@media only screen and (max-width: 992px) {
  #situation,
  .resistance__cards {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 70px;
  }

  .banner__image img,
  .about__image img {
    width: 100%;
  }

  .symptoms__image img,
  .contact__image img {
    width: 75%;
  }

  .menu__button {
    display: block;
    position: fixed;
    right: 0;
    z-index: 1030;
  }

  #click:checked ~ .menu__button i::before {
    content: "\f00d";
  }

  .nav__items {
    position: fixed;
    top: 60px;
    display: block;
    right: -35%;
    height: 100vh;
    width: 35%;
    text-align: center;
    transition: all 0.6s ease-in-out;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.06),
        rgba(0, 0, 0, 0.05),
        transparent,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.06),
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.04),
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.07) 3px
      ),
      linear-gradient(90deg, rgb(63, 122, 63), rgb(218, 204, 62));
  }

  #click:checked ~ ul {
    right: 0;
  }

  .nav__items li {
    margin: 15px 0;
  }

  .nav__items li a {
    color: #fff;
  }

  /* navbar responsive css end */

  /* font size responsive css start */

  .section__heading {
    font-size: 1.5em;
  }

  .danger {
    font-size: 0.9em;
  }

  .description {
    font-size: 0.9em;
  }

  .banner__button {
    padding: 12px 15px;
  }

  /* font size responsive css end */
}
/* and (min-width: 688px)  */
@media only screen and (max-width: 750px) {
  .banner__image img,
  .about__image img {
    width: 100%;
  }
}

/* =====================
   mobile device responsive 
   ======================*/

@media only screen and (max-width: 688px) {
  #banner,
  #situation,
  .about,
  .resistance__cards,
  .contact {
    grid-template-columns: repeat(1, 1fr);
  }

  .banner__image img,
  .about__image img,
  .symptoms__image img,
  .contact__image img {
    width: 90%;
  }

  #situation {
    grid-row-gap: 30px;
  }
}