html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: #000;
    color: #fff;
    overflow: hidden;
}

.top-bar, .top-bar ul {
    background-color: rgba(0, 0, 0, 0.5);
}




/* Initial full black screen */
#akafit-loader {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 9999;
    animation: fadeOut 1s ease-out 0.75s forwards;
  }
  
  /* Fade-out keyframes */
  @keyframes fadeOut {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  
  

section {
    min-height: 100vh;
    padding: 2rem; /* Optional: add spacing inside */
    display: flex;
    align-items: center; /* vertically center content */
    justify-content: center; /* horizontally center content */
    width: 100%;
  display: flex;
  font-size: 2rem;
  transition: opacity 0.6s ease, transform 0.6s ease;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

section.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    transform: translateY(0);
  }

#hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    color: white; /* text color */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 0;
    overflow: hidden;
  }
  
  #hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* black overlay with 50% opacity */
    z-index: 1;
  }
  
  #hero > * {
    position: relative;
    z-index: 2; /* so text sits above overlay */
  }
  
  /* Default (Mobile First) */
  @media screen and (max-width: 640px) {
    #hero {
      background-image: url('../img/hero-mobile-bg-akaf-ir.jpg');
    }
  }
  
  /* Desktop */
  @media screen and (min-width: 641px) {
    #hero {
      background-image: url('../img/hero-desktop-bg-akaf-ir.jpg');
    }
  }
  
  
  #about {
    padding: 4rem 1rem;
    background: #f5f5f5 ;
    color: #222;
    text-align: center;
  }
  

  #services{
    padding: 4rem 1rem;
    background: #fff;
    color: #111;
  }

  #edu {
    padding: 4rem 1rem;
    background: #e5e5e5 ;
    color: #222;
  }
  
  #edu ul {
    margin-top: 1rem;
  }
  
  #edu ul li a {
    color: #0078aa;
    text-decoration: none;
  }
  

  #contact {
    background: #333 ;
    color: #eee;
  }
  
  footer{
    background: #000  ;
    color: #eee;
    padding:0.5rem;
    text-align:center;
  }