footer.ft {
  max-width: 2560px;
  background-color: #384A56;
  margin: 0 auto;
  position: relative;
  padding: 2%;
  padding-bottom: 20px;
}


footer.ft > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
}


footer.ft > div > div {
  background-color: #485E6D;
  padding: 4%;
  border-radius: 3%;
}

footer.ft > div > div > div {
  padding: 1%;
}




footer.ft > div > div > img {
  display: inline-block;
  width: 100%;
  height: auto;
  opacity: 0.50;
  padding: 3%;
}

footer.ft > div > div > div > h5 {
  font-family: Open Sans, sans-serif;
  font-size: calc(17px + 3 * ((100vw - 320px) / (1920 - 320)));
  font-weight: 400;
  color: #ffffff;
  line-height: 130%;
  margin-bottom: 15px;
}

footer.ft > div > div > div > div > a,
footer.ft > div > div > div > ul,
footer.ft > div > div > div > ul >li,
footer.ft > div > div > div > ul >li > a {
   font-family: 'Roboto', sans-serif;
   font-size: calc(15px + 5 * ((100vw - 320px) / (1920 - 320)));
   font-weight: 400;
   text-decoration: dotted underline;
   color: #BAE8FF;
   line-height: 28px; 
   margin-bottom: 1%;
   margin-top: 1%;
   margin-left: 2%;
   text-align: left;
}


footer.ft > div > div > div > div > a {
  margin-left: 6px;
}


  /* ----------------------medi-------------------------*/ 
@media only screen and (max-width: 1100px) {
  footer.ft > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }   
}
    
@media only screen and (max-width: 768px) {
  footer.ft > div {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }   
}