html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 120px; /* prevents fixed header overlap */
}
:root{
  --primary:#0A1F44;
  --accent:#1E4D8C;
  --light:#F4F7FB;
  --dark:#111827;
  --highlight:#E63946;
}
@media (max-width: 768px){

  header{
    flex-direction: column;
    align-items: flex-start;
  }

  nav{
    width: 100%;
    margin-top: 15px;
  }

  nav a{
    display: block;
    margin: 10px 0;
  }

}
.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
}

/* mobile */
@media (max-width: 768px){

  nav{
    display:none;
    flex-direction:column;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:white;
    padding:20px 8%;
    box-shadow:0 10px 20px rgba(0,0,0,0.05);
  }

  nav a{
    margin:15px 0;
  }

  nav.active{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

  .logo{
    height:45px;
  }

}

.logo{
  height:60px;
  width:auto;
}

header{
  position:fixed;
  top:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 8%;
  background:white;
  box-shadow:0 2px 15px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
  z-index:1000;
}

/* center nav */
nav{
  display:flex;
  gap:35px;
}

nav a{
  text-decoration:none;
  color:#333;
  font-weight:500;
  transition:.3s;
}

nav a:hover{
  color:#2563EB;
}

/* languages right side */
.languages{
  display:flex;
  gap:15px;
  font-weight:600;
}

.languages .lang-btn{
  cursor:pointer;
  padding:2px 6px;
  border-radius:4px;
  transition:background-color .2s ease, color .2s ease;
}

.languages span:hover{
  color:#2563EB;
}

.languages .lang-btn.active{
  color:#ffffff;
  background:#2563EB;
}

/* logo styles */
.logo-full{
  height:60px;
  transition:all 0.3s ease;
}

.logo-icon{
  height:55px;   
  display:none;
  transition:all 0.3s ease;
}

/* SCROLLED STATE */
header.scrolled{
  padding:10px 8%;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

header.scrolled .logo-full{
  display:none;
}

header.scrolled .logo-icon{
  display:block;
}
@media (max-width: 768px){

  header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:white;
    z-index:1000;
  }

  /* IMPORTANT */
  #navbar{
    position:absolute;
    left:0;
    width:100%;
    background:white;

    /* attach directly under header */
    top:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;

    padding:0;
    margin:0;
  }

  #navbar.active{
    max-height:500px;
    padding:20px 0;
  }

  #navbar a{
    margin:15px 0;
  }

}

.testimonials .section-title h2{
  color:#ffffff;
}

/* Footer */
.site-footer{
  background:#111827;
  color:#e5e7eb;
  padding:56px 8% 24px;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:28px;
  align-items:start;
}

.footer-brand{
  max-width:520px;
}

.footer-brand p{
  line-height:1.7;
  color:#cbd5e1;
}

.footer-links h3,
.footer-contact h3{
  color:#ffffff;
  margin-bottom:14px;
  font-size:1rem;
}

.footer-links a{
  display:block;
  color:#cbd5e1;
  text-decoration:none;
  margin-bottom:10px;
  transition:color .2s ease;
}

.footer-links a:hover,
.footer-contact a:hover{
  color:#60a5fa;
}

.footer-contact p{
  margin-bottom:10px;
  color:#cbd5e1;
}

.footer-contact a{
  color:#cbd5e1;
  text-decoration:none;
}

.footer-bottom{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(148, 163, 184, 0.25);
}

.footer-bottom p{
  margin:0;
  color:#94a3b8;
  font-size:.78rem;
  opacity:.85;
  text-align:center;
}

.developer-credit{
  margin-top:6px;
  font-size:.42rem;
  opacity:.65;
}

.contact-details{
  text-align:center;
  margin-top:20px;
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
}