/* ==========================================================================
   Base Layout
   ========================================================================== */
body {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-end;
   min-height: 100vh;
}

/* ==========================================================================
   Footer Container
   ========================================================================== */
footer {
     position: relative;
     width: 100%;
     background-color: #000;
     color: #fff;
     min-height: 100px;
     padding: 20px 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     overflow: hidden;
}

/* ==========================================================================
   Social Icons & Menu
   ========================================================================== */
footer .social-icon,
footer .menu {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 10px 0;
     flex-wrap: wrap;
}

footer .social-icon li,
footer .menu li {
     list-style: none;
}

/* Social Icons */
footer .social-icon li a {
     font-size: 2rem;
     color: #fff;
     margin: 0 10px;
     display: inline-block;
     transition: 0.5s;
}

footer .social-icon li a:hover {
     transform: translate(-10px);
     transform: scale(1.2);
}

/* Menu Links */
footer .menu li a {
     font-size: 1.2rem;
     color: #fff;
     margin: 0 10px;
     display: inline-block;
     transition: 0.5s;
     text-decoration: none;
     opacity: 0.7;
}
   
footer .menu li a:hover {
     opacity: 1;
}

/* ==========================================================================
   Footer Text
   ========================================================================== */
footer p {
     color: #fff;
     text-align: center;
     margin-top: 15px;
     margin-bottom: 10px;
}

/* ==========================================================================
   Dynamic Light Line Animation
   ========================================================================== */
.footer-light {
     position: absolute;
     top: 0;
     left: -150%;
     width: 150%;
     height: 10px;
     background: linear-gradient(
       90deg,
       rgba(255, 255, 255, 0) 0%,
       rgba(255, 255, 255, 0.5) 50%,
       rgba(255, 255, 255, 0) 100%
     );
     animation: slide-light 2s infinite linear;
}

.footer-content {
     position: relative;
     z-index: 1;
}

@keyframes slide-light {
     0% {
       left: -150%;
     }
     100% {
       left: 100%;
     }
}