/*************************************** STYLE FOR FOOTER ***************************************/
/*************************************** STYLE FOR FOOTER ***************************************/
/*************************************** STYLE FOR FOOTER ***************************************/


footer{position: relative;
  width: 100%;
  height: auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background-color: var(--footer-color);
}
.footer-info a{text-decoration: none;  color: var(--background-color);}
.footer-info ul li{ padding: 0 0 12px 0;}
footer h1{
  text-align: center;
  width: 100%;
  font-size: calc(22vw);
  font-weight: 500;
color: var(--background-color);
}
.footer-content{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin:12px auto;
  width: 85%;

}
.footer-content ul{
  list-style: none;
  margin: 0;
  padding: 24px 0;
}
.footer-content ul li{display: flex;
  flex-direction: row;
  align-items: center;
    padding: 0 0 12px 0;
  font-size: 24px;
color: var(--background-color);
}
.footer-menu a{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 24px;
color: var(--background-color);
text-decoration: none; 
}
.footer-menu ul li svg{
  margin: 0 0 0  10px;
}

.copyright{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--background-color);
}
.copyright h4{padding: 12px;
  font-family:var(--font-primary);
  text-transform: uppercase;
  font-weight: 400;
}
.copyright a{text-wrap: nowrap;
  color: var(--background-color);
  padding: 12px 4px;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
}
.footer-terms a{
  text-decoration: none;
  color: var(--background-color);

}
.back-to-top{cursor: pointer;
  position: absolute;
  bottom: 3%;
  right: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-content-2{ 
  position: relative;
  width: 100px;
  height: 100px;
  background-color:transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary-color);
}

.logo-circle-2{display: flex;
  align-items: center;
  justify-content: center;
 position: absolute;
 width: 80px;
 height: 80px;
  border-radius: 50%;
}
.logo-circle-2 img{
  width: 36%;
}
.circle-text-2{
  width: 100%;
  height: 100%;
  position: absolute;
  animation: circle-anim2 10s linear infinite;
}
@keyframes circle-anim2 {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.circle-text-2 span {
  position: absolute;
  left:50%;
  font-size: 12px;
  transform-origin: 0 50px;
}

@media (max-width:1220px){
  .footer-content ul li{font-size: 20px;}
  .footer-menu a{font-size: 20px;}
  .copyright h4{font-size: 14px;}
  .footer-menu svg{width: 20px;}
}
@media (max-width:1067px){
  .footer-content ul li{font-size: 18px;}
  .footer-menu a{font-size: 18px;}
  .copyright h4{font-size: 14px;}
  .footer-menu svg{width: 18px;}
}
@media (max-width:769px){
  .footer-content ul li{font-size: 16px;}
  .footer-menu a{font-size: 16px;}
  .copyright h4{font-size: 10px;}
  .footer-menu svg{width: 16px;}
}
@media (max-width:660px){
  .footer-content{display: flex;flex-direction: column;align-items: center;justify-content:center;}
  .footer-content ul{padding: 8px;display:flex;flex-direction: column; align-items: center;}
  .footer-content ul li{font-size: 20px;}
  .footer-menu a{font-size: 20px;}
  .copyright h4{font-size: 10px;}
  .footer-menu svg{width: 20px;}
  .back-to-top{cursor: pointer;
    position: absolute;
    bottom: 48px;
    right: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width:418px){
  .footer-content ul li{font-size: 16px;}
  .footer-menu a{font-size: 16px;}
  .copyright h4{font-size: 8px;}
  .footer-menu svg{width: 16px;}
  .circle-content-2{ width: 70px;height: 70px;}
  .logo-circle-2{ width: 50px;height: 50px;}
  .logo-circle-2 img{width: 40%; height: 65%;}
  .circle-text-2 span {font-size: 8px;transform-origin: 0 35px;}
  .copyright{text-align: center;}
}
@media (max-width:338px){
.back-to-top{cursor: pointer;
  position: absolute;
  bottom: 32px;
  right: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
@media (max-width:300px){
  .footer-content ul li{padding: 4px 0;}
  .footer-menu li{padding: 4px 0;}
  
  }