/* 
* Footer CSS
* This file contains styles for the website footer
*/

.footer {
  background-color: #000;
  color: #fff;
  padding: 64px 0 32px;

  .footerContainer {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    flex-wrap: wrap;
    gap: 48px;
  }

  .footerLogo {
    flex: 1;
    min-width: 260px;

    h2 {
      font-size: 2.4rem;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: 1px;
      text-transform: uppercase;

      span {
        font-weight: 300;
        color: #00a0e9;
      }
    }

    p {
      font-size: 1.5rem;
      color: #aaa;
      max-width: 260px;
    }
  }

  .footerNav {
    display: flex;
    gap: 64px;
    flex-wrap: wrap;

    .footerNavSection {
      min-width: 160px;

      h3 {
        font-size: 1.8rem;
        margin-bottom: 24px;
        color: #00a0e9;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 16px;

        li {
          a {
            font-size: 1.5rem;
            color: #aaa;
            transition: all 0.3s ease;
            position: relative;
            padding-left: 16px;

            &::before {
              content: '›';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              color: #00a0e9;
              opacity: 0;
              transition: all 0.3s ease;
            }

            &:hover {
              color: #fff;
              padding-left: 20px;

              &::before {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }

  .footerBottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;

    p {
      font-size: 1.4rem;
      color: #666;
    }
  }
}

/* Media Queries */
@media (max-width: 768px) {
  .footer {
    padding: 48px 0 24px;

    .footerContainer {
      flex-direction: column;
      gap: 32px;
      padding: 0 16px;
    }

    .footerLogo {
      text-align: center;

      p {
        max-width: 100%;
      }
    }

    .footerNav {
      width: 100%;
      justify-content: space-around;
      gap: 32px;
    }

    .footerBottom {
      margin-top: 32px;
    }
  }
}

@media (max-width: 480px) {
  .footer {
    .footerNav {
      flex-direction: column;
      gap: 32px;

      .footerNavSection {
        text-align: center;

        ul li a {
          padding-left: 0;

          &::before {
            display: none;
          }

          &:hover {
            padding-left: 0;
          }
        }
      }
    }
  }
}