/* base.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  color: #333;
  background-color: #f0f4f8;
  overflow-x: hidden;
}
.hidden {
  display: none;
}
.section {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; 
  padding-top: var(--navbar-height);
  padding-bottom: var(--footer-height);
  justify-content: center;
  align-items: center;
  opacity: 0; 
  transition: opacity 0.5s ease-in-out;
  z-index: -1; 
}

.section.active {
  opacity: 1; 
  z-index: 1; 
}
@media screen and (max-width: 768px) {
  .section {
    height: auto; 
    min-height: 100vh; 
    padding-top: calc(var(--navbar-height) + 20px); 
    padding-bottom: 20px; 
    z-index: auto; 
  }
  html, body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}