@media screen and (max-width: 1279px) {
  .hidden {
    display: none;
  }
  header {
    max-width: 100%;
  }
  .header-container, .hero, .about-container,
  .pets-container, .help-container,
  .donation-container, .footer-container,
  .pets-header, .wrapper-pets {
    width: 100%;
  }
  .hero-img {
      align-content: end;
      height: 735px;
  }
  .hero-img img {
      margin-top: 5px;
      width: 100%;
      align-content: end;
  }
  @media screen and (max-width: 1250px) {
    .modal-window-container {
      width: 682px;
      height: 402px;
    }
    .modal-container {
      width: 682px;
      height: 402px;
    }
    .content-container {
      width: inherit;
      height: inherit;
    }
    .modal-img {
      width: 350px;
      height: 350px;
    }
    .modal-content {
      width: 261px;
      height: 303px;
      margin-top: 10px;
      margin-left: 12px;
      gap: 10px;
    }
    .modal-h4 {
      margin-top: -10px;
    }
    .modal-text {
      font-size: 13px;
      height: 98px;
    }
    .modal-list {
      height: 87px;
    }
    .big-pets-container {
      width: 100%;
      height: 1733px;
      align-items: center;
    }
    .pets-card-container {
      overflow: hidden;
      width: 100%;
      height: 1365px;
      display: grid;
      grid-template-columns: repeat(2, 270px);
      grid-template-rows: auto;
      justify-content: center;
      margin-top: -30px;
      column-gap: 35px;
    }
    .pets-btn-container {
       margin-top: -20px;
    }
  }
  @media screen and (max-width: 1150px) {
    .help-container {
      height: 779px;
    }
    .help-icons-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 170px);
      column-gap: 60px;
    }
  }
  @media screen and (max-width: 1000px) {
    header {
      max-width: 100%;
      height: 1165px;
    }
    .wrapper {
      width: 100%;
      height: 1165px;
    }
    .logo-container {
      margin-left: 35px;
    }
    .nav-list {
      margin-right: 30px;
    }
    .hero {
      flex-direction: column;
      align-self: center;
      width: 70%;
      gap: 15px;
      padding-top: 60px;
    }
    .hero-title-container {
      width: 100%;
      gap: 42px;
    }
    .hero-text {
      width: 460px;
    }
    .hero-title-container > a {
      margin-left: 125px;
    }
    .hero-img {
      width: 100%;
      align-content: end;
    }
    .hero-img img {
      width: 569px;
      margin-left: 13px;
    }
    .about-container {
      display: flex;
      flex-direction: column-reverse;
      height: 1048px;
      gap: 60px;
    }
    .card-container {
      gap: 40px;
    }
    .slider-container {
      gap: 12px;
    }
    .donation-container {
      height: 783px;
      flex-direction: column-reverse;
      align-items: center;
      padding-top: 0;
      gap: 60px;
    }
    .donation-content {
      margin-top: -20px;
    }
    .footer {
      height: 639px;
    }
    .footer > .wrapper {
      height: 639px;
    }
    .footer-container {
      height: 639px;
      justify-content: center;
      flex-wrap: wrap;
      column-gap: 37px;
      row-gap: 5px;
      padding: 30px 0 0 0;
    }
    .central {
      margin-right: 0;
    }
  }  
}
@media screen and (max-width: 767px) {
    header {
        height: 823px;
    }
    header .wrapper {
        height: 823px;
    }
    .logo-container {
        margin-left: 25px;
        position: relative;
    }
    .menu {
      position: fixed;
      display: flex;
      align-items: center;
      top: 0;
      right: 0;
      transform: translateX(100%);
      transition: all .4s ease-in 0s;
      background: var(--color-dark-3xl);
      width: 300px;
      height: 100vh;
      z-index: 2;
    }
    .nav-list {
      width: 300px;
      height: 327px;
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
    .nav-list > li {
      height: 51px;
      margin-left: 10px;
    }
    .nav-list > li > a {
      font-family: var(--second-font);
      font-weight: 400;
      font-size: 32px;
      line-height: 160%;
      color: var(--color-dark-s);
      transition: all .25s ease-in 0s;
    }
    .nav-list > li > .pets-nav-links:hover {
      color: var(--color-light-s);
    }
    .header-container > .burger-icon-container {
        display: flex;
    }
    .wrapper-pets > .burger-icon-container {
        display: flex;
    }
    .hero {
        width: 300px;
        height: 673px;
    }
    .hero-heading {
        width: 220px;
        font-size: 35px;
        text-align: center;
    }
    .hero-text {
        width: 300px;
        text-align: center;
    }
    .hero-title-container {
        width: 300px;
        align-items: center;
    }
    .hero-title-container > a {
        margin-left: 0px;
    }
    .hero-img {
      width: 100%;
      align-content: end;
    }
    .hero-img img {
      width: 260px;
      height: 271px;
      margin-left: 13px;
      margin-top: -15px;
    }
    .about-container {
        align-items: center;
        height: 974px;
        justify-content: space-around;
    }
    .about-content {
        width: 270px;
    }
    .about-heading {
        width: 270px;
        font-size: 25px;
        text-align: center;
    }
    .about-text {
        width: 270px;
        text-align: justify;
    }
    .about-img {
        margin-bottom: -50px;
        margin-left: 40px;
    }
    .about-img img {
        width: 260px;
        height: 353px;
    }
    @media screen and (max-width:720px) {
      .pets-container {
        align-items: center;
      }
      .slider-container {
        display: grid;
        grid-template-areas: 
        "header header"
        "left-button right-button";
        grid-template-columns: 1fr 1fr;
      }
      .card-container {
        grid-area: header;
      }
      .circle-btn.left {
        grid-area: left-button;
        justify-self: center;
      }
      .circle-btn.right {
        grid-area: right-button;
        justify-self: center;
      }
      .modal-window-container, .modal-container {
        width: 270px;
        height: 393px;
      }
      .modal-btn {
        margin-right: 0;
      }
      .content-container {
        width: 240px;
        height: 341px;
      }
      .content-container > figure{
        display: none;
      }
      .modal-content {
        margin: 0;
        align-items: center;
        gap: 21px;
      }
      .modal-list li {
        margin-left: -30px;
      }
      .modal-h3, .modal-h4 {
        text-align: center;
      }
      .modal-h3 {
        padding-top: 12px;
      }
      .modal-text {
        width: 220px;
        height: 112px;
        text-align: justify;
      }
      .modal-list {
        gap: 7px;
      }
    }
    @media screen and (max-width: 638px) {
      .footer {
        height: 938px;
      }
      .footer > .wrapper {
        height: inherit;
      }
    }
    @media screen and (max-width: 630px) {
      .pets-container {
        height: 791px;
        padding-top: 41px;
        gap: 43px;
      }
      .pets-container > .pets-heading {
        font-size: 25px;
        width: 300px;
      }
      .slider-container {
        column-gap: 0;
        row-gap: 18px;
      }
      .hidden768 {
        display: none;
      }
      .big-pets-container {
        width: 320px;
        height: 1649px;
        align-items: center;
        padding-top: 40px;
        gap: 73px;
      }
      .pets-heading {
        width: 300px;
      }
      .pets-card-container {
        overflow: hidden;
        width: 100%;
        height: 1365px;
        display: grid;
        grid-template-columns: repeat(1, 270px);
        grid-template-rows: auto;
        justify-content: center;
        margin-top: -30px;
        column-gap: 35px;
      }
      .pets-btn-container {
        width: 300px;
        margin-top: -30px;
        gap: 10px;
      }
      .help-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 745px;
      }
      .help-heading {
        width: 300px;
        padding-top: 40px;
        font-size: 25px;
      }
      .help-icons-container {
        width: 100%;
        padding-top: 43px;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, 130px);
        column-gap: 30px;
        row-gap: 30px;
      }
      .help-icons {
        height: 87px;
        gap: 21px;
      }
      .help-icons > img {
        width: 50px;
        height: 50px;
      }
      .help-icons > figcaption {
        font-size: 15px;
        line-height: 110%;
        letter-spacing: 0.06em;
      }
      .donation-container {
        justify-content: space-between;
        height: 542px;
        padding-top: 40px;
        gap: 2px;
      }
      .h3 {
        font-size: 25px;
        text-align: center;
      }
      .donation-content {
        width: 300px;
        height: 281px;
        align-items: center;
        gap: 23px;
        margin-top: 0;
      }
      .bank-description {
        letter-spacing: normal;
      }
      .payment-container {
        width: 281px;
      }
      .payment-container > span {
        font-size: 15px;
      }
      .donation-text {
        width: 280px;
        text-align: justify;
      }
      .donation-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 269px;
      }
      .donation-img > img {
        width: 260px;
      }
      .footer {
        height: 560px;
      }
      .footer > .wrapper {
        height: inherit;
      }
      .footer-container {
        height: inherit;
        align-items: center;
        justify-content: space-around;
        column-gap: 30px;
        row-gap: 27px;
      }
      .footer-container > div {
        margin-bottom: 0;
        align-items: center;
      }
      .footer-container > .central {
        width: 294px;
        height: 222px;
        margin-bottom: 0;
        margin-top: -30px;
        gap: 48px;
      }
      .central > .footer-h3 {
        margin-bottom: 0;
        align-items: center;
      }
      .central > .footer-link {
        width: 300px;
      }
      .footer-icon {
        margin-right: 17px;
      }
      .footer-img {
        width: 260px;
        height: 269px;
      }
      .footer-img > img {
        width: inherit;
        height: inherit;
      }
    }
    @media screen and (max-width: 615px) {
      .footer {
        height: 560px;
      }
      .footer > .wrapper {
        height: inherit;
      }
    }
    @media screen and (max-width: 583px) {
      .footer {
        height: 809px;
      }
      .footer-container {
        row-gap: 41px;
      }
      .footer > .wrapper {
        height: inherit;
      }
    }
    @media screen and (max-width: 500px) {
        .hero-heading {
            font-size: 25px;
            letter-spacing: 0.06em;
        }
        .hero-img img {
            margin-top: 10px;
            margin-left: 0;
        }
    }
}