.footer{
  padding: 5rem calc((100vw - 1100px) / 2);
  /* display: grid;
  grid-template-columns: 1fr; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  background-color: var(--primary-color);

}

.footer-wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  
}

.footer-desc{
  margin-right: 8rem;
}

.footer-desc h1{
  margin-bottom: 2rem;
  cursor: default;
}

.footer-desc span{
  color: var(--secondary-color);
}

.footer-desc a{
  color: var(--white-color);
}

.footer-desc p{
  margin-top: 1rem;
}

.footer-links{
  margin: 0 4rem;
  
}

.footer-icon{
  margin-right: 10px;
  color: var(--secondary-color);
}

.footer-title{
  white-space: nowrap;
  margin-bottom: 2rem;
  cursor: default;
}

.footer-link{
  color: var(--white-color);
  transition: all .2s ease-in-out;
  cursor: pointer;
}

.footer-links{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-links div{
  display: flex;
  align-items: center;
}

.footer-link:hover{
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--secondary-color);
}


.footer-links.socials{
  margin-top: 2.4rem;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.footer-links.info p{
  white-space: nowrap;
}

.footer-links.payment{
  margin-top: 5rem;
  flex-direction: row;
}

.footer-links.payment div{
  margin-top: 20px;
  margin-right: 20px;
  align-items: start;
}

.footer-img{
  width: 80%;
  margin-right: 10px;
  cursor: pointer;
  transition: transform .2s;
}

.footer-img:hover{
  transform: scale(1.1);
}

.footer-img.paypal{
  width: 100%;
  margin-top: 1.2rem;
}

.footer-links.payment .footer-img.mastercard{
  width: 80%;
  margin-top: -15px;
  margin-right: 10px;
}

.copyright{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(8, 8, 8);
  padding: .8rem;
}

.copyright > *{
  color: var(--white-color);
}

.copyright p{
  margin-right: 10px;
}



























/* Footer Section Responsive */


@media screen and (200px <= width <= 880px) {

  .footer-wrapper{
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  

  .footer-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
  }

  .footer-links.payment{
    width: 250px;
  }

  .footer-links a{
    margin-bottom: 1rem;
  }
  

  .footer-desc{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5rem;
    padding-left: 8rem;
  }

  .footer-links.payment .footer-img.mastercard{
    width: 100px;
    
  }
}

@media screen and (880px <= width <= 930px) {

  .footer-wrapper{
    grid-template-columns: repeat(3, 300px);
    grid-template-rows: repeat(3, 200px);
    
  }

  .footer-wrapper > * {
    justify-self: center;
    align-self: center;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-desc{
    grid-column: 1 / 2;
    padding-left: 5rem;
  }

  .footer-links.payment{
    grid-column: 2 / 3;
    margin-bottom: 6rem;
  }

  .footer-links.payment .footer-img.mastercard{
    width: 100px;
    
  }
}

@media screen and (932px <= width <= 1306px) {
  .footer-wrapper{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    
  }

  .footer-wrapper > * {
    justify-self: center;
    align-self: center;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-desc{
    grid-column: 1 / 2;
    padding-left: 5rem;
  }

  .footer-links.payment{
    grid-column: 2 / 3;
    margin-bottom: 6rem;
  }

  .footer-links.payment .footer-img.mastercard{
    width: 100px;
  }

}