/* ==========================================
   PRIMEVAULT FOOTER
========================================== */

.footer {
  background: #111111;

  color: #ffffff;

  padding: 80px 0 30px;

  margin-top: 100px;
}
/* ==========================================
   NEWSLETTER
========================================== */

.footer-newsletter {
  padding-bottom: 70px;

  margin-bottom: 70px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.newsletter-content {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 50px;
}

.newsletter-content h2 {
  color: #ffffff;

  margin-bottom: 15px;
}

.newsletter-content p {
  color: #b8b8b8;

  max-width: 520px;
}

.newsletter-form {
  display: flex;

  align-items: center;

  gap: 15px;
}

.newsletter-form input {
  width: 320px;

  height: 55px;

  padding: 0 18px;

  border: none;

  border-radius: 8px;

  background: #ffffff;
}

.newsletter-form button {
  height: 55px;

  padding: 0 28px;

  background: var(--accent);

  color: #111;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  transition: 0.3s;
}

.newsletter-form button:hover {
  transform: translateY(-2px);
}

/* ==========================================
   WRAPPER
========================================== */

.footer-wrapper {
  display: grid;

  grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr;

  gap: 60px;

  padding-bottom: 60px;
}

/* ==========================================
   COMPANY
========================================== */

.footer-company {
  max-width: 400px;
}

.footer-logo {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;

  color: #ffffff;

  font-size: 26px;

  font-weight: 700;
}

.footer-logo img {
  width: 42px;

  height: 42px;

  object-fit: contain;
}

.footer-company p {
  color: #b8b8b8;

  line-height: 1.8;
}

/* ==========================================
   LINKS
========================================== */

.footer-links {
  display: flex;

  flex-direction: column;
}

.footer-links h4 {
  

    color:var(--accent);

    margin-bottom:22px;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;
}

.footer-links a {
  color: #b8b8b8;

  margin-bottom: 14px;

  transition: 0.3s;
}

.footer-links a:hover {
  color: var(--accent);

  padding-left: 5px;
}

/* ==========================================
   BOTTOM
========================================== */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 30px;

  text-align: center;
}

.footer-bottom p {
  color: #9a9a9a;
}
.footer-social {
  display: flex;

  justify-content: center;

  gap: 30px;

  margin-bottom: 25px;
}

.footer-social a {
  color: #b8b8b8;

  transition: 0.3s;
}

.footer-social a:hover {
  color: var(--accent);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 35px;

  text-align: center;
}
/* ==========================================
   SOCIAL ICONS
========================================== */

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:30px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    color:#ffffff;

    transition:.35s ease;

}

.footer-social a:hover{

    background:var(--accent);

    color:#111111;

    transform:translateY(-4px);

}

.footer-social i{

    font-size:18px;

}

/* ==========================================
   RESPONSIVE FOOTER
========================================== */

/* ==========================
   Laptop
========================== */

@media (max-width: 1200px){

    .footer-wrapper{

        grid-template-columns:2fr 1fr 1fr;

        gap:50px;

    }

}

/* ==========================
   Tablet
========================== */

@media (max-width: 992px){

    .newsletter-content{

        flex-direction:column;

        align-items:flex-start;

    }

    .newsletter-form{

        width:100%;

    }

    .newsletter-form input{

        width:100%;

    }

    .footer-wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

   

    .footer-newsletter{

        padding-bottom:50px;

        margin-bottom:50px;

    }

    .newsletter-content{

        text-align:center;

        align-items:center;

    }

    .newsletter-form{

        flex-direction:column;

    }

    .newsletter-form input{

        width:100%;

    }

    .newsletter-form button{

        width:100%;

    }

    .footer{

        padding:60px 0 25px;

    }

    .footer-newsletter{

        padding-bottom:50px;

        margin-bottom:50px;

    }

    .newsletter-content{

        text-align:center;

        align-items:center;

    }

    .newsletter-form{

        flex-direction:column;

    }

    .newsletter-form input,

    .newsletter-form button{

        width:100%;

    }

    /* 2 × 2 Footer Layout */

    .footer-wrapper{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:35px 25px;

        text-align:left;

    }

    .footer-company{

        grid-column:1 / -1;

        max-width:100%;

        text-align:center;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-links{

        align-items:flex-start;

    }

    .footer-social{

        flex-wrap:wrap;

    }

}

/* ==========================
   Small Phones
========================== */

@media (max-width:480px){

    .footer{

        padding:50px 0 20px;

    }

    .footer-logo{

        font-size:22px;

    }

    .newsletter-content h2{

        font-size:28px;

    }

}