/* --- FOOTER --- */
 .footer {
     background: #0f172a;
     color: #cbd5e1;
     padding: 50px 0 30px;
 }

 .footer .container {
     max-width: 1150px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .footer-row {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
 }

 .footer-col {
     flex: 1;
     min-width: 220px;
 }

 .footer h5 {
     color: var(--accent);
     margin-bottom: 25px;
 }

 .footer ul {
     list-style: none;
 }

 .footer ul li a {
     color: #a7a7a7;
     text-decoration: none;
     font-size: 14px;
     display: block;
     margin-bottom: 10px;
 }

 .footer ul li a:hover {
     color: var(--accent);
     padding-left: 5px;
 }

 .footer-social a {
     color: var(--white);
     font-size: 20px;
     margin-right: 15px;
     display: inline-block; /* MUST ADD THIS for transform to work */
     transition: all 0.3s ease; /* Smooths out the movement */
     }


 .footer-social a:hover {
     color: var(--accent);
     transform: translateY(-3px) scale(1.2);
 }

 .join-box {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .join-box input {
     padding: 12px;
     border: none;
     border-radius: 4px;
     outline: none;
     background: rgba(255, 255, 255, 0.1);
     color: white;
 }

 .join-box button {
     background: var(--accent);
     border: none;
     padding: 12px;
     border-radius: 4px;
     color: var(--navy);
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
 }

 .join-box button:hover {
     background: var(--white);
 }

 .join-box {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .join-box input {
     padding: 12px;
     background: rgba(255, 255, 255, 0.1);
     border: none;
     color: white;
     border-radius: 4px;
 }

 .join-box button {
     background: var(--accent);
     border: none;
     padding: 12px;
     border-radius: 4px;
     font-weight: 700;
     cursor: pointer;
     color: var(--navy);
 }