/* ===== GLOBAL ===== */
:root {
  --hero-inline-padding: 10%;
  --hero-top-spacing: 150px;
  --hero-bottom-spacing: 90px;
  --font-body: 'Source Sans 3', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-heading: 'Marcellus', 'Times New Roman', serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  color: #333;
  line-height: 1.6;
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}
p, a, li, span, label, input, textarea, button, select {
  font-family: var(--font-body);
}

/* ===== NAVBAR ===== */
.navbar{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: rgba(15,32,39,0.85);
  backdrop-filter: blur(14px);
  transition: all .4s ease;
}
.navbar.scrolled{
  background: #0f2027;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}
.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 6%;
  transition:.3s;
}
.logo a{
  text-decoration: none;
  font-weight: 700;
  font-size: 22px;
}
.logo-main { color: white; }
.logo-accent { color: #00d4a3; }
.nav-menu{
  display: flex;
  gap: 35px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-menu a{
  color: white;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: .3s;
}
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:#ff702e;
  transition:.3s;
}
.nav-menu a:hover::after{
  width:100%;
}
.menu-toggle{
  display: none;
  color: #00d4a3;
  font-size: 28px;
  cursor: pointer;
  background: rgba(15,32,39,0.85);
}
a:focus, button:focus {
  outline: 2px solid #f4a261;
  outline-offset: 2px;
}

@media (max-width: 992px){

  :root {
    --hero-inline-padding: 6%;
    --hero-top-spacing: 120px;
    --hero-bottom-spacing: 72px;
  }

  .nav-container{
    padding: 12px 5%;
  }

  .nav-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #0f2027e3;

    flex-direction: column;
    align-items: left;
    gap: 18px;
    padding: 28px 25px;

    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    pointer-events: none;

    transition: all 0.3s ease;
  }

  .nav-menu.active{
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .menu-toggle{
    display: block;
    font-size: 26px;
  }

}




/* ===== FOOTER ===== */
.footer{
    background:#0f2027;
    color:white;
    padding:80px 8% 30px;
}
.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:50px;
    margin-bottom:40px;
}
.footer-col h3,
.footer-col h4{
    margin-bottom:20px;
    color:#00d4a3;
}
.footer-col p{
    opacity:.8;
    line-height:1.6;
}
.footer-col ul{
    list-style:none;
    padding:0;
}
.footer-col ul li{
    margin-bottom:10px;
}
.footer-col ul li a{
    text-decoration:none;
    color:white;
    opacity:.8;
    transition:.3s;
}
.footer-col ul li a:hover{
    color:#ff702e;
    padding-left:5px;
}
.social-icons{
    margin:30px 0; 
    display:flex;
    justify-content:center; 
    gap:15px;
}
.social-icons a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    color:white;
    font-size:16px;
    transition:all .4s ease;
    text-decoration: none;
}
.social-icons a:hover{
    background:#00d4a3;
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(255,156,46,0.4);
}
.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:20px;
    font-size:14px;
    opacity:.6;
}
.footer-credit{
    margin:0;
    font-size:10px;
    white-space:nowrap;
}
.footer-credit span{
    color:#f8fafa;
    font-weight:600;
}
.footer-copyright{
    margin:0;
    text-align:center;
    flex:1;
}
@media(max-width:768px){
    .footer-container{
        grid-template-columns:1fr;
        text-align:left;
    }
    .social-icons{
        justify-content:center;
    }
    .footer-bottom{
        flex-direction:column-reverse;
        align-items:center;
        gap:8px;
        text-align:center;
    }
    .footer-credit{
        font-size:12px;
        white-space:normal;
    }
    .footer-copyright{
        text-align:center;
    }
}