@import url('/css/variables.css');

footer{
  position: relative;
  background:var(--secoundary-blue-color);
  color:var(--secoundary-text-color);
  border-top:1px solid whitesmoke;
  padding-block-start:clamp(2rem,4vw,3rem);
  padding-block-end:clamp(1.5rem,3vw,2.5rem);
  font-size:clamp(1rem,0.9rem + 0.5vw,1.125rem);
  font-family: var(--primary-font-family);
}

.footer-inner{
  width: 100%;
  padding-inline-start: 20px;
  padding-inline-end:   20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(3rem, 6vw, 6rem);
}

.col{
  flex: 1 1 18rem;
}

.col h2{
  margin: 0 0 0.75rem;
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  text-decoration: underline;
}

.social-icons{
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  gap: 3rem;
}

.social-icons a{
  font-size: 32px;
  color: var(--primary-blue-color);
  text-decoration: none;
}

.social-icons a:visited{ color: var(--primary-blue-color); }
.social-icons a:hover,
.social-icons a:focus   { color: var(--Green);}
.social-icons a:active  { color: var(--active-color); }

.mission p{
  margin: 0;
  line-height: 1.5;
}

.contact ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact li{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.35rem;
}
.contact i{ font-size: 1rem; }

.footer-logo{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 25px;
  height: auto;
  margin: 0;
}

@media (max-width: 480px){
  .col{ flex: 1 1 100%; }
  .social-icons{ gap: 0.5rem; }
}