/* =============================================
MOBILE — max-width: 900px
============================================= */
@media (max-width: 900px) {

 .hamburger {
     display: flex;
 }

 .nav-menu {
     position: absolute;
     top: 80px;
     left: 0;
     width: 100%;
     background-color: #020a12;
     flex-direction: column;
     align-items: center;
     display: none; /* toggled by .active */
     padding: 25px 0;
     gap: 20px;
     border-top: 1px solid rgba(255,255,255,0.08);
 }

 .nav-menu.active {
     display: flex;
 }

 /* Dropdown on mobile: static, toggled by JS */
 .dropdown-content {
     position: static;
     background: rgba(255,255,255,0.05);
     box-shadow: none;
     border-radius: 6px;
     margin-top: 6px;
     min-width: 160px;
     text-align: center;
 }



 .hero-content h1,
 .hero-content h2,
 .hero-content p {
     text-align: center;
 }

 .hero-overlay {
     background: rgba(2,10,18,0.72);
 }
}

/* =============================================
SMALL PHONES — max-width: 480px
============================================= */
@media (max-width: 480px) {
 body {
     padding-top: 80px;
 }

 .logo img {
     height: 70px;
     width: 250px;
 }

 p.lato {
     font-size: 1rem;
 }
}