footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #ebf2f8;
  margin-top: 124px;
  -webkit-box-shadow: 0px 500px 0px 500px #ebf2f8;
  -moz-box-shadow: 0px 500px 0px 500px #ebf2f8;
  box-shadow: 0px 500px 0px 500px #ebf2f8;
  gap: 32px;
}
body.darkmode footer{
  background-color: #171F2C;
  -webkit-box-shadow: 0px 500px 0px 500px #171F2C;
  -moz-box-shadow: 0px 500px 0px 500px #171F2C;
  box-shadow: 0px 500px 0px 500px #171F2C;
}
footer a:hover{
  text-decoration: underline;
}
footer button:hover{
  background-color: transparent !important;
}
footer .content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 64px;
  padding-bottom: 64px;
  gap: 32px;
}
footer logo{
  display: block;
  width: 100%;
  max-width: 264px;
  aspect-ratio: 1 / 0.59;
  background-image: url('../../assets/logos/optipet_logo.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
body.darkmode footer logo{
  background-image: url('../../assets/logos/optipet_logo_alt.svg');
}
footer .col{
  display: flex;
  flex-direction: column;
  max-width: 264px;
}
footer .col:first-of-type{
  gap: 32px;
}
footer .col:first-of-type p{
  font-size: 12px;
  color: rgba(40, 46, 70, 0.32);
  text-align: center;
}
body.darkmode .col:first-of-type p{
  color: #fff;
  color: rgba(255, 255, 255, 0.32);
}
footer .col button{
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-weight: 700;
  color: #282E46;
}
body.darkmode footer .col button{
  color: #fff;
}
footer .col button img{
  filter: invert(15%) sepia(10%) saturate(2462%) hue-rotate(191deg) brightness(99%) contrast(90%);
}
body.darkmode footer .col button img{
  filter: invert(1);
}
footer .col .btnSublink{
  font-weight: 400;
}
footer .socials{
  display: flex;
  flex-direction: row;
  margin-top: 16px;
}
footer .socials button{
  padding: 0px;
}
footer .backToTop{
  height: 44px;
  width: 44px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.24);
  transition: border-radius 50ms;
  background-image: url('../../assets/icons/arrow_upward.svg');
  background-position: center;
  background-repeat: no-repeat;
}
footer .backToTop:active{
  border-radius: 32px;
}
body.darkmode footer .backToTop{
  filter: invert(1);
}

@media only all and (max-width: 690px) {
  footer{
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
  
  footer .col{
    width: calc(50% - 16px) !important;
  }
  footer .col,
  footer button{
    justify-content: center !important;
  }
  footer button{
    width: 100%;
  }
  footer .col:first-of-type{
    align-items: center;
    width: 100% !important;
    max-width: 100%;
  }
  footer .col:first-of-type a{
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
@media only all and (max-width: 430px) {
  footer .content{
    flex-direction: column;
    align-items: center;
  }
  footer .col{
    width: 100% !important;
  }
  footer a{
    display: flex;
    justify-content: center;
  }
  footer .col:first-of-type a{
    width: 100%;
  }
  
footer .socials{
  justify-content: center;
}
}