/* Content sections: JS toggles .active/display, CSS handles offset + transition.
   Sections span the full width now that the primary nav is centered (see css/nav.css)
   instead of docked to the left; top/bottom padding just clears the fixed header/footer. */

.content-section { position: absolute; top: 100px; bottom: 60px; left: 0; width: 100%; overflow-y: auto; padding: 20px 48px; opacity: 0; transition: opacity 0.4s ease-in-out; font-weight: normal; }
.content-section.active { display: block; opacity: 1; transition: opacity 0.4s ease-in-out; }
#projects-section, #gallery-section, #about-section, #contact-section { display: none; }

@media (max-width: 768px) {
  .content-section { padding: 20px 24px; }
}
@media (max-width: 480px) {
  .content-section { padding: 16px; }
}