/* footer-section-start */

.footer-section {
  margin-bottom: 28px;
  margin-top:70px;
}

.footer-container {
  display: grid;
  grid-template-columns: minmax(300px, 566px) 1fr;
  justify-content: space-between;
  align-items: flex-start;
  gap: 220px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  position: relative;
}

.footer-cta {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}

.footer-cta-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-700);
  line-height: 100%;
  z-index: 2;
  transition: color 0.3s ease;
}

.footer-icon {
 position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1.4fr 3fr 1.2fr;
  gap: 192px;
  padding-top: 20px;
}

.nav-column h3 {
  font-size: var(--font-size-sm);
  margin-bottom: 24px;
  font-weight: var(--font-weight-700);
  line-height: var(--line-height);  
  cursor: pointer;
}

.nav-column a {
 
  font-size: var(--font-size-xm);
  font-weight: var(--font-weight-500);
  line-height: var(--line-height);
  color: var(--text);
  text-decoration: none;
  margin-bottom: 20px;
  transition:
    color 0.3s ease,
    transform 0.3s ease,
    font-weight 0.3s ease;
  display: flex;
  align-items: center;
}

.nav-column a:hover {
  color: var(--primary);
  transform: translateX(5px);
 
}

.footer-divider {
  border: 0;
  border-top:1px dashed var(--text);
  margin: 30px 0;
}

.footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:10px;
  font-size: var(--font-size-xm);
  font-weight: var(--font-weight-500);
  color: var(--text);
  line-height: var(--line-height);
  cursor: default;
}

.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  gap:30px;
}

.footer-contacts span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:10px;  
  cursor: pointer;
}
.footer-contacts span a {
   color: var(--text);    
   text-decoration: none;
}
.footer-contacts span a:hover {
   color: var(--primary);
}

.footer-contacts span:hover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:10px;
  color: var(--primary);
}



.footer-contacts span:hover svg path {
  stroke: var(--primary);
}


.nav-column a:hover svg path {
  stroke: var(--primary);;
}




.footer-cta:nth-child(1) .footer-icon img {
  animation: rock-left 3s ease-in-out infinite;
  transform-origin: bottom center;
}


.footer-cta:nth-child(2) .footer-icon img {
  animation: rock-right 3s ease-in-out infinite;
  transform-origin: bottom center;
}


@keyframes rock-left {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(-10deg) translateX(-10px); }
}


@keyframes rock-right {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(10deg) translateX(10px); }
}