*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
    width:100vw;
    overflow-x:hidden;
    scroll-behavior: smooth; 
}

.wrapper {
  width: 100%;
}

/* Modal window */

/* Modal window */

.modal_wrapper{
  position: fixed;
  width:952px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 1000;
}

.modal_close{
  width: 52px;
  height: 52px;
  border: 2px solid #FDDCC4;
  border-radius: 50%;
  margin-left: auto;
}

.modal_close:hover{
  cursor: pointer;
  background-color: #FDDCC4;
  transition: 0.1s;
}

.modal_close img{
  position: relative;
  top: 33%;
  left: 37%;
}

.modal_info{
  margin-right: 52px;
  display: flex;
  background-color: #FAFAFA;
  justify-content: space-between;
  border-radius: 9px;
}

.modal_img{
  width:500px;
  height: 500px;
}

.modal_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-bottom-left-radius: 9px;
}

.modal_content{
  width:351px;
  margin: 50px 20px 0px 0px;
}

.modal_content h3{
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  font-size: 35px;
  line-height: 45.5px;
  letter-spacing: 0.06em;
  color: #000000;
}

.modal_content h4{
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: 0.06em;
  color: #000000;
  margin-top:10px;
}

.modal_content p{
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: #000000;
  margin-top: 20px;
}

.modal_content ul{
  margin-top: 20px;
  margin-left: 14px;
}


/* ====================================================================== */

.header_wrapper {
  width: 100%;
  background-image: url("../../assets/images/start-screen-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

.header {
  width: 1280px;
  max-height: 908px;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
}

.header_container {
  width: 93.75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px auto;
  padding-top: 3.75rem;
  position: relative;
}

.logo h1 {
  font: normal 400 32px Georgia;
  letter-spacing: 2px;
  line-height: 35.2px;
  color: #F1CDB3;
}

.logo p {
  font: normal 400 13px Arial;
  color: #FFFFFF;
  padding-top: 0.65rem;
  padding-left: 4px;
  letter-spacing: 0.1em;
  line-height: 15px;
}

nav {
  margin-bottom: 0.3125rem;
}

.nav__toggle{
  position: absolute;
    cursor: pointer;
    margin: 0rem 1rem;
    right: 0;
    display: none;
}

svg {
  width: 1.875rem;
  fill: #F1CDB3;
}

.close {
  display: none;
}

.nav__checkbox{
  display: none;
}

nav a {
  font: normal 400 15px Arial;
  color: #CDCDCD;
  text-decoration: none;
  padding-bottom: 4px;
}

nav a:hover {
  cursor: pointer;
  border-bottom: 0.2rem solid #F1CDB3;
  transition: 0.2s;
}

nav a:nth-of-type(2) {
  margin-right: 2rem;
  margin-left: 2rem;
}

nav a:nth-of-type(3) {
  margin-right: 2rem;
}

nav a:nth-of-type(1) {
  border-bottom: 0.2rem solid #F1CDB3;
}

.burger_menu{
  display: none;
}

.header_info {
  width: 93.75%;
  margin: 0px auto;
  display: flex;
  align-items: flex-start;
}

.header_info_left h2 {
  width: 61.75%;
  font: normal 400 44px Georgia;
  line-height: 57.2px;
  color: #FFFFFF;
  padding-top: 13.9rem;
  padding-bottom: 2.6rem;
}

.header_info_left p {
  width: 91.63%;
  font: normal 400 15px Arial;
  line-height: 24px;
  color: #CDCDCD;
}

.button_link {
  width: 41.23%;
  font: normal 400 17px Georgia;
  letter-spacing: 1px;
  margin-top: 41px;
  display: inline-block;
  color: #292929;
  text-decoration: none;
  padding: 15px 45px;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #F1CDB3;
  border-radius: 100px;
  background-color: #F1CDB3;
}

.button_link:hover {
  cursor: pointer;
  background-color: #FDDCC4;
  transition: 0.2s;
}

.header_info_right img {
  padding-top: 60px;
  height: 100%;
  width: auto;
}

/* ===================================================================== */
/* About container */
.about {
  width: 1280px;
  height: 588px;
  margin: 0px auto;
}

.about_container {
  width: 93.75%;
  display: flex;
  margin: 0px auto;
}

.about_img {
  width: 49%;
}

.about_img img {
  position: relative;
  top: 5rem;
  left: 10.875rem;
}

.about_info {
  width: 50%;
}

.about_info h3 {
  width: 61.67%;
  margin-left: 5px;
  font: normal 400 35px Georgia;
  line-height: 45.5px;
  letter-spacing: 0.064em;
  padding-top: 6rem;
  padding-bottom: 1.37rem;
  color: #545454;
}

.first_p {
  width: 71.67%;
  margin-left: 8px;
  font: normal 400 15px Arial;
  line-height: 24px;
  color: #4C4C4C;
  margin-bottom: 1.6rem;
}

.second_p {
  width: 71.67%;
  margin-left: 7px;
  font: normal 400 15px Arial;
  line-height: 24px;
  color: #4C4C4C;
}

/* ===================================================================== */
/* Our Friends */
.wrapper_our_friends {
  width: 100%;
  background-color: #F6F6F6;
}

.our_friends {
  width: 1280px;
  height: 877px;
  background-color: #F6F6F6;
  margin: 0px auto;
}

.our_friends_container {
  width: 93.75%;
  margin: 0px auto;
}

.our_friends_container h3 {
  width: 33.33%;
  font: normal 400 35px Georgia;
  line-height: 45.5px;
  margin: 0px auto;
  color: #545454;
  text-align: center;
  letter-spacing: 0.06em;
  padding-top: 5rem;
}

.friends_grid {
  margin: 0px auto;
  display: grid;
  grid-template-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
  grid-template-rows: 1fr;
  justify-items: center;
}

.first_pet, .second_pet, .third_pet {
  width: 74%;
}

.arrow_left{
  width: 52px;
  margin-top: 15.7rem;
  height: 52px;
  border: 2px solid #FDDCC4;
  border-radius: 50%;
  text-align: center;
}

.arrow_right {
  width: 52px;
  margin-top: 15.7rem;
  height: 52px;
  border: 2px solid #FDDCC4;
  border-radius: 50%;
  text-align: center;
}

.arrow_left img, .arrow_right img {
  position: relative;
  top: 26%;
}

.arrow_left:hover, .arrow_right:hover {
  cursor: pointer;
  background-color: #F1CDB3;
  transition: 0.2s;
}

.first_pet {
  margin-left: 0.5625rem;
}

.third_pet {
  margin-right: 0.5625rem;
}

.first_pet:hover, .second_pet:hover, .third_pet:hover {
  cursor: pointer;
  box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  transition: 0.1s;
}
.first_pet:hover a, .second_pet:hover a, .third_pet:hover a {
  background-color: #FDDCC4;
}

.first_pet img, .second_pet img, .third_pet img {
  margin-top: 3.7rem;
}

.first_pet p, .second_pet p, .third_pet p {
  font: normal 400 20px Georgia;
  color: #545454;
  line-height: 22.72px;
  text-align: center;
  letter-spacing: 0.06em;
  padding-top: 1.6rem;
}

.first_pet a, .second_pet a, .third_pet a {
  width: 69.27%;
  padding-top: 17px;
  padding-bottom: 11px;
  display: block;
  text-align: center;
  margin: 0px auto;
  margin-top: 1.8125rem;
  font: normal 400 17px Georgia;
  letter-spacing: 1px;
  color: #292929;
  text-decoration: none;
  outline: none;
  border: 2px solid #F1CDB3;
  border-radius: 100px;
}

.button_pet {
  width: 21.75%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
  text-align: center;
  margin: 0px auto;
  margin-top: 5.8rem;
  font: normal 400 17px Georgia;
  letter-spacing: 1px;
  color: #292929;
  text-decoration: none;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #F1CDB3;
  border-radius: 100px;
  background-color: #F1CDB3;
}

.button_pet:hover {
  cursor: pointer;
  background-color: #FDDCC4;
  transition: 0.2s;
}

/* ===================================================================== */
/* Help container */
.help {
  width: 1280px;
  height: 611px;
  margin: 0px auto;
}

.help_container {
  width: 93.75%;
  margin: 0px auto;
}

.help_container h3 {
  width: 26.67%;
  font: normal 400 35px Georgia;
  line-height: 45.5px;
  margin: 0px auto;
  color: #545454;
  text-align: center;
  letter-spacing: 0.06em;
  padding-top: 5rem;
}

.help_flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0px auto;
  margin-top: 3.7rem;
  align-items: flex-end;
}

.help_flex h4 {
  font: normal 400 20px Georgia;
  line-height: 23px;
  color: #545454;
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 1.6rem;
}

.flex_item_up_1 img {
  margin-left: 6.5rem;
}

.flex_item_up_1 h4 {
  margin-left: 5.4rem;
}

.flex_item_up_2 img {
  margin-left: 10.2rem;
}

.flex_item_up_2 h4 {
  margin-left: 7.5rem;
}

.flex_item_up_3 img {
  margin-left: 7.45rem;
}

.flex_item_up_3 h4 {
  margin-left: 7.56rem;
}

.flex_item_up_4 img {
  margin-left: 10.4rem;
}

.flex_item_up_4 h4 {
  margin-left: 7.56rem;
}

.flex_item_up_5 img {
  margin-left: 9.5rem;
}

.flex_item_up_5 h4 {
  margin-left: 7.4rem;
}

.flex_item_down_1 img {
  margin-top: 3.6rem;
  margin-left: 11.5rem;
}

.flex_item_down_1 h4 {
  margin-top: 1.7rem;
  margin-left: 10.7rem;
}

.flex_item_down_2 img {
  margin-top: 3rem;
  margin-left: 8.7rem;
}

.flex_item_down_2 h4 {
  margin-top: 1.7rem;
  margin-left: 7.5rem;
}

.flex_item_down_3 img {
  margin-top: 3rem;
  margin-left: 10.7rem;
}

.flex_item_down_3 h4 {
  margin-top: 1.7rem;
  margin-left: 7.5rem;
}

.flex_item_down_4 img {
  margin-top: 3rem;
  margin-left: 10.1rem;
}

.flex_item_down_4 h4 {
  margin-top: 1.7rem;
  margin-left: 7.4rem;
}

/* ===================================================================== */
/* Donation Container */
.donation_wrapper {
  width: 100%;
  background-color: #F6F6F6;
}

.donation {
  width: 1280px;
  height: 462px;
  background-color: #F6F6F6;
  margin: 0px auto;
}

.donation_container {
  width: 93.75%;
  margin: 0px auto;
}

.donation_grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas: "dog donation";

}

.donation_grid h3 {
  text-align: left;
  width: 57.5%;
  font: normal 400 35px Georgia;
  line-height: 45.5px;
  color: #545454;
  letter-spacing: 0.06em;
  padding-top: 5rem;
}

.donation_grid h5 {
  text-align: left;
  width: 58.84%;
  font: normal 400 15px Georgia;
  color: #545454;
  letter-spacing: 0.058em;
  padding-top: 1.2rem;
}

.donation_grid img {
  position: relative;
  top: 5.6875rem;
  left: 8.9375rem;
}

.credit_card {
  width: 66.89%;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: #F1CDB3;
  border-radius: 9px;
  display: flex;
  margin-top: 1.2rem;
  justify-content: space-evenly;
}

.credit_card:hover {
  cursor: pointer;
}

.credit_card img {
  position: static;
}

.credit_card a {
  font: normal 400 20px Georgia;
  color: #545454;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.donation_p {
  margin-top: 1.1rem;
  width: 72.83%;
  font: italic 400 12px Arial;
  color: #B2B2B2;
  line-height: 18px;
}

.donation_pet{
  grid-area: dog;
}

.donation_block{
  grid-area: donation;
}

/* ======================================================================= */
/* Footer */
.footer_wrapper {
  width: 100%;
  background-image: url("../../assets/images/footer-background.png");
  background-repeat: no-repeat;
  background-size: cover;
}

footer {
  width: 1280px;
  height: 350px;
  margin: 0px auto;
}

.footer_container {
  width: 93.75%;
  margin: 0px auto;
  height: 100%;
}

.footer_grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
}

.footer_grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-areas: "communication location footerpet";
}

.footer_first_grid {
  margin-top: 3.5rem;
  grid-area:communication
}

.footer_grid h3 {
  width: 69.5%;
  font: normal 400 35px Georgia;
  line-height: 45.5px;
  color: #FFFFFF;
  letter-spacing: 0.06em;
}

.footer_mail_flex {
  display: flex;
  margin-top: 2.59rem;
  gap: 1rem;
}

.footer_mail_flex a {
  font: normal 400 20px Georgia;
  color: #F1CDB3;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer_phone_flex {
  display: flex;
  margin-top: 2.1rem;
  gap: 1.2rem;
  align-items: center;
}

.footer_phone_flex a {
  font: normal 400 20px Georgia;
  color: #F1CDB3;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer_second_grid {
  margin-top: 3.5rem;
  grid-area:location;
}

.footer_location_flex {
  display: flex;
  margin-top: 2rem;
  gap: 1.1rem;
  align-items: center;
}

.location_link {
  width: 68.25%;
}

.footer_location_flex a {
  font: normal 400 20px Georgia;
  color: #F1CDB3;
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 23px;
}

.footer_third_grid{
  grid-area: footerpet;
}

.footer_third_grid img {
  position: relative;
  top: 2.5rem;
  left: 5rem;
}

/* Tablet view */
@media (min-width: 768px) and (max-width: 1280px) {

/* html {
    width:100vw;
    overflow-x:hidden;
} */


  .header_wrapper {
    background-image: url("../../assets/images/start-screen-gradient-background.png");
  }

  .header {
    width: 768px;
    max-height: 1165px;
  }


   /* Modal window */

.modal_wrapper{
  position: fixed;
  width:682px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 1000;
}



.modal_info{
  margin-right: 9px;
  display: flex;
  background-color: #FAFAFA;
  justify-content: space-between;
}

.modal_img{
  width:350px;
  height: 350px;
}

.modal_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal_content{
  width:260px;
  margin: 10px 9px 0px 0px;
}

  .header_container {
    width: 92.1875%;
    margin: 0px auto;
    padding-top: 1.9rem;
  }

  .header_info {
    width: 92.1875%;
    flex-direction: column;
    align-items: flex-end;
  }

  .header_info_left h2 {
    width: 43.79%;
    padding-top: 3.7rem;
    margin-left: 7.8rem;
  }

  .header_info_left p {
    width: 64.97%;
    margin-left: 7.8rem;
  }

  .button_link {
    width: 29.24%;
    margin-left: 15.61rem;
    margin-top: 41px;
  }

  .header_info_right img {
    width: 569px;
    padding-top: 99px;
  }

  /* ===================================================================== */
  /* About container */
  .about {
    width: 768px;
    height: 1048px;
  }

  .about_container {
    width: 92.1875%;
    flex-direction: column-reverse;
  }

  .about_img {
    width: 100%;
  }

  .about_img img {
    left:12.7rem;
  }

  .about_info {
    width: 100%;
  }

  .about_info h3 {
    width: 52.26%;
    margin-left: 8.69rem;
    padding-top: 5.05rem;
    padding-bottom: 1.43rem;
  }

  .first_p {
    width: 60.73%;
    margin-left: 8.69rem;
    margin-bottom: 1.6rem;
  }

  .second_p {
    width: 60.73%;
    margin-left: 8.69rem;
  }

  /* ===================================================================== */
  /* Our Friends */
  
  .our_friends {
    width: 768px;
    height: 877px;
  }
  
  .our_friends_container {
    width: 92.1875%;
  }
  
  .our_friends_container h3 {
    width: 57.08%;
  }
  
  .friends_grid {
    grid-template-columns: 0.1fr 1fr 1fr 0.1fr;
    grid-template-rows: 1fr;
    justify-items: center;
  }

  .third_pet{
    display: none;
  }

  
  .first_pet, .second_pet{
    width: 270px;
  }
  
  
  .first_pet {
    margin-left: 0;
    margin-right: 0.5rem;
  }

  .second_pet{
    margin-left:0.625rem;
  }
  
  
  .first_pet img, .second_pet img{
    margin-top: 3.7rem;
  }
  
  .first_pet p, .second_pet p{
    font: normal 400 20px Georgia;
    color: #545454;
    line-height: 22.72px;
    text-align: center;
    letter-spacing: 0.06em;
    padding-top: 1.6rem;
  }
  
  .first_pet a, .second_pet a{
    width: 69.27%;
    padding-top: 17px;
    padding-bottom: 11px;
    display: block;
    text-align: center;
    margin: 0px auto;
    margin-top: 1.8125rem;
    font: normal 400 17px Georgia;
    letter-spacing: 1px;
    color: #292929;
    text-decoration: none;
    outline: none;
    border: 2px solid #F1CDB3;
    border-radius: 100px;
  }
  
  .button_pet {
    width: 36.72%;
  }

  /* ===================================================================== */
/* Help container */
  .help {
    width: 768px;
    height: 779px;
    margin: 0px auto;
  }

  .help_container {
    width: 92.1875%;
    margin: 0px auto;
  }

  .help_container h3 {
    width: 47.5%;
  }

  .help_flex {
    display: flex;
    flex-wrap: wrap;
    margin: 0px auto;
    margin-top: 3.7rem;
    align-items: flex-end;
  }

  .help_flex h4 {
    font: normal 400 20px Georgia;
    line-height: 23px;
    color: #545454;
    text-align: center;
    letter-spacing: 0.06em;
    margin-top: 1.6rem;
  }

  .flex_item_up_1 img {
    margin-left: 6.25rem;
  }

  .flex_item_up_1 h4 {
    margin-left: 5.1875rem;
  }

  .flex_item_up_2 img {
    margin-left: 9.8125rem;
  }

  .flex_item_up_2 h4 {
    margin-left: 7.125rem;
  }

  .flex_item_up_3 img {
    margin-left: 7.75rem;
  }

  .flex_item_up_3 h4 {
    margin-left: 7.625rem;
  }

  .flex_item_up_4 img {
    margin-top: 3.5625rem;
    margin-left: 5.875rem;
  }

  .flex_item_up_4 h4 {
    margin-left: 3rem;
  }

  .flex_item_up_5 img {
    margin-left: 8.5rem;
  }

  .flex_item_up_5 h4 {
    margin-left: 6.375rem;
  }

  .flex_item_down_1 img {
    margin-left: 9.3125rem;
  }

  .flex_item_down_1 h4 {
    margin-left: 8.375rem;
  }

  .flex_item_down_2 img {
    margin-left: 5.875rem;
    margin-top: 3.5rem;
  }

  .flex_item_down_2 h4 {
    margin-left: 4.625rem;
  }

  .flex_item_down_3 img {
    margin-left: 9.3125rem;
  }

  .flex_item_down_3 h4 {
    margin-left: 6rem;
  }

  .flex_item_down_4 img {
    margin-left: 7.375rem;
  }

  .flex_item_down_4 h4 {
    margin-left: 4.75rem;
  }

  /* ===================================================================== */
/* Donation Container */
  .donation_wrapper {
    width: 100%;
    background-color: #F6F6F6;
  }

  .donation {
    width: 768px;
    height: 783px;
    background-color: #F6F6F6;
    margin: 0px auto;
  }

  .donation_container {
    width: 92.1875%;
    margin: 0px auto;
  }

  .donation_grid {
    display: grid;
    grid-template-columns:1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
                        'donation'
                        'dog';
  }

  .donation_grid h3 {
    width: 42.37%;
    padding-top: 5rem;
    margin-left:10.1875rem;
  }

  .donation_grid h5 {
    width: 43.36%;
    margin-left: 10.1875rem;
    padding-top: 1.2rem;
  }

  .donation_grid img {
    top: 3.7rem;
    left: 6.3rem;
  }

  .credit_card {
    width: 49.29%;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    margin-top: 1.2rem;
    margin-left:10.1875rem;
    justify-content: space-evenly;
  }

  .donation_p {
    margin-top: 1.1rem;
    width: 53.67%;
    margin-left:10.1875rem;
  }

  /* ======================================================================= */
/* Footer */
  .footer_wrapper {
    width: 100%;
    background-image: url("../../assets/images/footer-gradient-background.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  footer {
    width: 768px;
    height: 639px;
    margin: 0px auto;
  }

  .footer_container {
    width: 92.1875%;
    margin: 0px auto;
    height: 100%;
  }

  .footer_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "communication location"
                          "footerpet footerpet";
  }

  .footer_first_grid {
    margin-left:2.125rem;
    margin-top: 1.875rem;
  }

  .footer_grid h3 {
    width: 87.8755%;
    font: normal 400 35px Georgia;
    line-height: 45.5px;
    color: #FFFFFF;
    letter-spacing: 0.06em;
  }

  .footer_mail_flex {
    display: flex;
    margin-top: 2.59rem;
    gap: 1rem;
  }

  .footer_mail_flex a {
    font: normal 400 20px Georgia;
    color: #F1CDB3;
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  .footer_phone_flex {
    display: flex;
    margin-top: 2.1rem;
    gap: 1.2rem;
    align-items: center;
  }

  .footer_phone_flex a {
    font: normal 400 20px Georgia;
    color: #F1CDB3;
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  .footer_second_grid {
    margin-left:1.1875rem;
    margin-top: 1.9375rem;
  }

  .footer_location_flex {
    display: flex;
    margin-top: 1.875rem;
    gap: 1.1rem;
    align-items: center;
  }

  .location_link {
    width: 77.62%;
  }

  .footer_location_flex a {
    font: normal 400 20px Georgia;
    color: #F1CDB3;
    letter-spacing: 0.06em;
    text-decoration: none;
    line-height: 23px;
  }

  .footer_third_grid img {
    position: relative;
    top: 0.875rem;
    left: 12.755rem;
  }
}

/* Mobile view */
/* ============================================================= */

@media (min-width: 320px) and (max-width: 767px) {
  /* html {
    width:100vw;
    overflow-x:hidden;
} */


/* Modal window */

.modal_wrapper{
  position: fixed;
  width:270px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 1000;
}

.modal_info{
  margin-right: 0px;
  display: flex;
  background-color: #FAFAFA;
  justify-content: center;
  overflow-y: scroll;
}

.modal_img{
  display: none;;
}

.modal_img img{
  display: none;
}

.modal_content{
  width:240px;
  margin: 0px 10px 0px 10px;
}

.modal_content h3{
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  font-size: 35px;
  line-height: 45.5px;
  letter-spacing: 0.06em;
  color: #000000;
  text-align: center;
}

.modal_content h4{
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: 0.06em;
  color: #000000;
  margin-top:10px;
  text-align: center;
}

.modal_content p{
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: #000000;
  margin-top: 20px;
  text-align: justify;
  padding:0px 10px 0 10px;
}

.modal_content ul{
  margin-top: 20px;
  margin-left: 26px;
  margin-bottom: 10px;
}

.nav__toggle{
  display: block;
  top: 43px;
  left: 212px
}

.open-menu{
  transform: rotate(-90deg);
  transition-duration:0.5s;
}

.close-menu{
  transform: rotate(0deg);
  transition-duration:0.5s;
}

.burger_menu{
  width: 320px;
  display: block;
  position: absolute;
  overflow: hidden;
  left: 322px;
  background-color: #292929;
  padding-top: 248px;
}

.burger_links{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  gap:1rem;
}

@keyframes move-left-menu {
  from {left: 322px;}
  to {left: 0px;}
}

.transition-left-menu {
  animation-name: move-left-menu;
  animation-duration: 1s;
}

@keyframes move-right-menu {
  from {left: 0px;}
  to {left: 322px;}
}

.transition-right-menu {
  animation-name: move-right-menu;
  animation-duration: 1s;
}



.burger_links a{
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 160%;
  color: #CDCDCD;
  text-decoration: none;
}


.burger_links a:nth-of-type(1) {
  border-bottom: 0.2rem solid #F1CDB3;
}

.burger_links a:hover{
  color: #FAFAFA;
}

nav a{
  display: none;
}


.header_wrapper {
  background-image: url("../../assets/images/start-screen-gradient-background_mobile.png");
}

.header {
  width: 320px;
  max-height: 823px;
}

.header_container {
  width: 93.75%;
  margin: 0px auto;
  padding-top: 1.9rem;
}



.header_info {
  width: 93.75%;
  flex-direction: column;
  align-items: flex-end;
}

.header_info_left h2 {
  width: 65.67%;
  padding-top: 0rem;
  margin-left: 3.25rem;
  font: normal 400 25px Georgia;
  line-height: 32.5px;
  margin-top: 3.6875rem;
  text-align: center;
  letter-spacing: 0.06em;
}

.header_info_left p {
  width: 100%;
  margin-left: 0rem;
  text-align: center;
}

.button_link {
  width: 69%;
  margin-left: 2.8125rem;
  margin-top: 41px;
}

.header_info_right img {
  width: 260px;
  padding-top: 6.5625rem;
}

/* ===================================================================== */
/* About container */
.about {
  width: 320px;
  height: 974px;
}

.about_container {
  width: 93.75%;
  flex-direction: column-reverse;
}

.about_img {
  width: 100%;
}


.about_img img {
  top: 41px;
  left: 19px;
  width: 16.25rem;
  height: 22.1rem;
}

.about_info {
  width: 100%;
}

.about_info h3 {
  width: 97%;
  padding-top: 0rem;
  margin-bottom: 1.625rem;
  padding-bottom: 0rem;
  font: normal 400 25px Georgia;
  line-height: 32.5px;
  letter-spacing: 0.06em;
  text-align: center;
  margin-left: 0.375rem;
  margin-top: 2.5625rem;
}

.first_p {
  width: 100%;
  margin-left: 0rem;
  margin-bottom: 1.3125rem;
  text-align: justify;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

.second_p {
  width: 100%;
  margin-left: 0rem;
  margin-bottom: 0rem;
  text-align: justify;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

/* ===================================================================== */
/* Our Friends */

.our_friends {
  width: 320px;
  height: 791px;
}

.our_friends_container {
  width: 93.75%;;
}

.our_friends_container h3 {
  width: 100%;
  font: normal 400 25px Georgia;
  line-height: 32.5px;
  letter-spacing: 0.06em;
  padding-top: 2.625rem;
}

.arrow_left{
  grid-area:arrow-left;
  margin-top: 52px;
  margin-left: 16px;
}

.arrow_right{
  grid-area:arrow-right;
  margin-top: 52px;
  margin-right: 18px;
}

.first_pet{
  width: 270px;
  grid-area:card-pet
}


.first_pet {
  margin-left: 0;
  margin-right: 0.5rem;
}


.friends_grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 0.1fr;
  grid-template-areas: "card-pet card-pet"
                       "arrow-left arrow-right";
  justify-items: center;
}

.second_pet{
  display: none;
}

.third_pet{
  display: none;
}




.first_pet img{
  margin-top: 2.5625rem;
  margin-left: 0.25rem;
}

.first_pet p{
  padding-left: 0.4375rem;
}

.first_pet a{
  margin-left:2.8125rem;
}

.button_pet {
  width: 86.67%;
  margin-top:2.5625rem;
}

/* ===================================================================== */
/* Help container */
.help {
  width: 320px;
  height: 745px;
  margin: 0px auto;
}

.help_container {
  width: 93.75%;
  margin: 0px auto;
}

.help_container h3 {
  width: 100%;
  font: normal 400 25px Georgia;
  line-height: 32.5px;
  letter-spacing: 0.06em;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 42px
}

.help_flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0px auto;
  margin-top: 1.75rem;
  align-items: flex-start;
}

.help_flex h4 {
  font: normal 400 15px Georgia;
  line-height: 23px;
  color: #545454;
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 1.6rem;
}

.flex_item_up_1 img {
  width:39.88px;
  height:50px;
  margin-left: 3.125rem;
  margin-top: 12px;
}

.flex_item_up_1 h4 {
  margin-top: 13px;
  margin-left: 39px;
}

.flex_item_up_2 img {
  width:49.96px;
  height:50px;
  margin-left: 6.4375rem;
  margin-top: 12px;
}

.flex_item_up_2 h4 {
  margin-top: 13px;
  margin-left: 73px;
}

.flex_item_up_3 img {
  width:50px;
  height:50px;
  margin-top: 29px;
  margin-left: 45px;
}

.flex_item_up_3 h4 {
  margin-top: 13px;
  margin-left: 45px;
}

.flex_item_up_4 img {
  width:50px;
  height:47.35px;
  margin-top: 30px;
  margin-left: 109px;
}

.flex_item_up_4 h4 {
  margin-top: 13px;
  margin-left: 78px;
}

.flex_item_up_5 img {
  width:29.09px;
  height:50px;
  margin-left: 54px;
  margin-top: 26px;
}

.flex_item_up_5 h4 {
  margin-top: 14px;
  margin-left: 32px;
}

.flex_item_down_1 img {
  width:50px;
  height:45.13px;
  margin-top: 30px;
  margin-left: 97px;
}

.flex_item_down_1 h4 {
  margin-top: 15px;
  margin-left: 89px;
}

.flex_item_down_2 img {
  width:50px;
  height:50px;
  margin-top: 25px;
  margin-left: 46px;
}

.flex_item_down_2 h4 {
  margin-top: 15px;
  margin-left: 32px;
}

.flex_item_down_3 img {
  width:50px;
  height:43.7px;
  margin-left: 97px;
  margin-top: 30px;
}

.flex_item_down_3 h4 {
  margin-top: 16px;
  margin-left: 61px;
}

.flex_item_down_4 img {
  width:46.91px;
  height:50px;
  margin-top: 26px;
  margin-left: 47px;
}

.flex_item_down_4 h4 {
  margin-top: 13px;
  margin-left: 16px;
}

/* ===================================================================== */
/* Donation Container */
.donation_wrapper {
  width: 100%;
  background-color: #F6F6F6;
}

.donation {
  width: 320px;
  height: 542.2px;
  background-color: #F6F6F6;
  margin: 0px auto;
}

.donation_container {
  width: 93.75%;
  margin: 0px auto;
}

.donation_grid {
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
                      'donation'
                      'dog';
}

.donation_grid h3 {
  width: 100%;
  padding-top: 0rem;
  margin-left:0rem;
  padding: 41px 44px 0 44px;
  text-align: center;
  font: normal 400 25px Georgia;
  line-height: 32.5px;
}

.donation_grid h5 {
  text-align: center;
  width: 100%;
  letter-spacing: 0.04em;
  margin-left: 0rem;
  padding-top:23px;
  margin-left: 4px;
  margin-right: 4px
}

.donation_grid img {
  top: 44px;
  left: 20px;
  width:260px;
  height: 135.2px;
}

.credit_card {
  margin: 0px auto;
  margin-right: 0;
  width: 93.67%;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  margin-top: 1.2rem;
  margin-left: 0.625rem;
  justify-content: space-evenly;
  align-items: center;
}

.credit_card img{
  width:30px;
  height: 23px;
  
}

.credit_card a{
  font-size: 15px;
}

.donation_p {
  text-align: justify;
  margin-top: 1.1rem;
  width: 93.33%;
  margin-left:0rem;
}

/* ======================================================================= */
/* Footer */
.footer_wrapper {
  width: 100%;
  background-image: url("../../assets/images/footer-gradient-background_mobile.png");
  background-repeat: no-repeat;
  background-size: cover;
}

footer {
  width: 320px;
  height: 809px;
  margin: 0px auto;
}

.footer_first_grid {
  margin-top: 3.5rem;
  grid-area:communication
}

.footer_second_grid {
  margin-top: 3.5rem;
  grid-area:location;
}


.footer_third_grid{
  grid-area: footerpet;
}

.footer_container {
  width: 93.75%;
  margin: 0px auto;
  height: 100%;
}

.footer_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.9fr 1fr;
  grid-template-areas: "communication"
                        "location"
                        "footerpet";
}

.footer_first_grid {
  margin-left:0rem;
  margin-top: 1.875rem;
}

.footer_grid h3 {
  margin: 0px auto;
  width: 87.8755%;
  font: normal 400 25px Georgia;
  line-height: 32.5px;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  text-align: center;
}

.footer_mail_flex {
  display: flex;
  margin-top: 2.59rem;
  justify-content: center;
  gap: 1rem;
}

.footer_mail_flex a {
  font: normal 400 20px Georgia;
  color: #F1CDB3;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer_phone_flex {
  display: flex;
  margin-top: 2.1rem;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
}

.footer_phone_flex a {
  font: normal 400 20px Georgia;
  color: #F1CDB3;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer_second_grid {
  margin-left:0rem;
  margin-top: 0.3125rem;
}

.footer_location_flex {
  display: flex;
  margin-top: 0rem;
  gap: 1.1rem;
  align-items: center;
}

.footer_1{
  margin-top: 2.625rem;
}

.footer_2{
  margin-top: 2.25rem;
}

.location_link {
  width: 86.09%;
}

.footer_location_flex a {
  font: normal 400 20px Georgia;
  color: #F1CDB3;
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 23px;
}

.footer_third_grid img {
  width:260px;
  height: 269px;
  position: relative;
  left: 20px;
  top: 22px 
}

}