/* FOOTER WRAPPER */

.footer-wrapper{
  background:rgba(244,246,251,0.95);
  backdrop-filter:blur(8px);
  color:#333;
  padding:40px 0 15px 0;
  font-family: 'Titillium Web', sans-serif;
  border-top:1px solid rgba(0,0,0,0.05);
}

/* FOOTER CONTAINER */

.footer-container{
  width:min(100% - 32px, 1400px);
  max-width:1400px;
  margin:auto;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:clamp(28px, 5vw, 70px);
  flex-wrap:wrap;
}

/* BRAND */

.brand{
  max-width:260px;
}

.footer-logo{
  font-size:24px;
  font-weight:800;
  margin-bottom:8px;
  color:#222;
  letter-spacing:1px;
}

.footer-desc{
  font-size:14px;
  line-height:1.6;
  color:#555;
  margin-bottom:14px;
}

/* SOCIAL ICONS */

.social-icons{
  display:flex;
  gap:15px;
  margin-top:10px;
}

.social-icons a{
  width:36px;
  height:36px;

  background:white;
  border-radius:8px;

  box-shadow:0 3px 8px rgba(0,0,0,0.08);

  display:flex;
  align-items:center;
  justify-content:center;

  color:#333;
  font-size:20px;

  transition:0.25s;
}

.social-icons a:hover{
  background:#8d2123;
  color:white;
  transform:translateY(-2px);
}

/* FOOTER COLUMN */

.footer-col h4{
  color:#222;
  margin-bottom:12px;
  font-size:16px;
  font-weight:700;
}

.footer-col ul{
  list-style:none;
  padding:0;
}

.footer-col ul li{
  margin-bottom:8px;
}

.footer-col ul li a{
  color:#555;
  text-decoration:none;
  font-size:14px;
  transition:0.25s;
}

.footer-col ul li a:hover{
  color:#8d2123;
}

/* CONTACT */

.contact-info li{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:14px;
  margin-bottom:6px;
}

/* NEWSLETTER */

.newsletter-box{
  margin-top:12px;
}

.newsletter-form{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.newsletter-form input{
  padding:9px 12px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.15);
  outline:none;
  font-size:14px;
  width:min(100%, 220px);
  box-sizing:border-box;
}

.newsletter-form button{
  background:#8d2123;
  color:white;

  border:none;

  padding:9px 16px;

  border-radius:6px;

  cursor:pointer;

  font-size:14px;
  font-weight:600;

  transition:0.25s;
}

.newsletter-form button:hover{
  background:#6f181a;
  transform:translateY(-2px);
}

/* FOOTER BOTTOM */

.footer-bottom{
  width:min(100% - 32px, 1400px);
  max-width:1400px;

  margin:20px auto 0 auto;

  border-top:1px solid rgba(0,0,0,0.08);

  padding-top:12px;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:13px;
  color:#666;
}



/* MOBILE */

@media(max-width:900px){

  .footer-container{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
    text-align:left;
  }

  .footer-col,
  .brand{
    width:100%;
    max-width:none;
  }

  .social-icons{
    justify-content:flex-start;
  }

  .newsletter-form{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

}

/* Preparation page compatibility: its page CSS is inline, so key system rules need priority. */
.feature-box,
.stat-card,
.faq-item{
  border-radius:8px !important;
}

.feature-box:hover{
  transform:translateY(-4px) !important;
}

.mock-btn{
  border-radius:8px !important;
}

.hero h1{
  letter-spacing:0 !important;
}

@media(max-width:600px){
  .footer-wrapper{
    padding-top:32px;
  }

  .footer-container{
    width:min(100% - 24px, 1400px);
    grid-template-columns:1fr;
    text-align:center;
  }

  .social-icons,
  .newsletter-form{
    justify-content:center;
  }

  .newsletter-form input,
  .newsletter-form button{
    width:100%;
  }

  .contact-info li{
    justify-content:center;
  }
}

@media(max-width:768px){
  .hero{
    min-height:64vh !important;
    padding:88px 20px 48px !important;
  }

  .hero h1{
    font-size:clamp(2rem, 10vw, 2.6rem) !important;
    line-height:1.12 !important;
  }

  .features-container,
  .stats{
    grid-template-columns:1fr !important;
  }

  .features-section,
  .section{
    padding:56px 20px !important;
  }
}
