.footer {
  background-color: #4066d6;
  font-size: 0.9em;
}

.footer-link {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
  line-height: 1.2em;
}

.footer-link:hover {
  color: wheat;
}

.moto {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 1px;
  color: wheat;
}

.contacts-info{
  line-height: 1em;
}

.contacts-info li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.socials {
    display: flex;
    justify-content: center;
    justify-content: start;
    gap:10px;
}

.socials i {
  font-size: 1.5em;
  color: wheat;
  transition: color 0.3s ease;
}

.socials a:hover i {
  color: #916f58;
}

.copyright p {
  margin-top: 1rem;
  font-size: 0.7em;
  color: white;
}

/* @media screen and (max-width: 1500px) { 
    .contacts-info{
        font-size: .9em;
    }
}

@media screen and (max-width: 1400px) { 
    .contacts-info{
        font-size: .8em;
    }
}

@media screen and (max-width: 1200px) {
    .contacts-info{
        font-size: .8em;
    }

    .contacts ul{
        padding-right: 0px;
        padding-left: 15px;
    }
}

@media screen and (max-width: 1100px) {
    
    .socials{
        left: 3rem;
    }

}

@media screen and (max-width: 1000px) {
    footer img{
        width: 20%;
    }

    footer > div div{
        display: flex;
        justify-content: center;
    }

    .footer-products{
        display: flex;
        flex-direction: column;
    }

    .footer-products ul{
        flex-direction: column !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .footer-products li{
        margin: 0 !important;
    }

    .socials{
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .contacts{
        
        position: initial;
    }
} */

@media screen and (max-width: 1000px){
    .contacts-info li {
        margin-bottom: 8px;
        display: block !important;
    }
    .contacts-info a {
        display: block !important;
    }

    .socials{
        display: block;
    }

    footer .list-unstyled, footer h6{
        text-align: center !important;
    }
}
