@media  screen and (max-width: 35rem) {
  * {
    box-sizing: border-box;
  }
  #menu {
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    background-color: #eee;
    color: #000;
    position: absolute;
    right: 10px;
    top: 10px;
  }

  header button::before {
    content: "☰";
  }

  nav {
    background-color: #252525;
  }
  .navigation a {
    list-style: none;
    margin: 0 auto;
    max-width: 760px;
  }

  .navigation a {
    display: none;
  } 
  nav.navigation.show a{
    display: flex;
    flex-direction: row;
    
    
  }

  .navigation a:hover,
  .navigation a:active {
    color: #1b1b1b;
    background-color: #87bfff;
  }

  #menu.show::before {
    content: "X";
  }

  /* header */
  .sticky-header {
    position: sticky;
    top: 0;
    background-color: #100d08; /* Darker header */
    padding: 10px 20px;
    display: grid;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
  }
  #logo img {
    width: 20%; /* Logo height */
  }

  .hero-section {
    position: relative;
    text-align: center;
    color: #ffffff;
  }
  #hero-background{
    width:100%;
    height: 35rem;
    opacity: 0.5; /* Background opacity */
  }
  .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .hero-title {
    font-size: 100%; /* Title size */
    margin-bottom: 15px;
    width: 100%;
  }
  .hero-subtitle {
    font-size: 1em; /* Subtitle size */
    margin-bottom: 20px;
  }
  .cta-button button {
    background-color: #0c0c0c; /* Button color */
    color: #ffffff; /* White text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
  }
  .cta-button button:hover {
    background-color: #0097a7; /* Darker on hover */
  }

  #aboutme{
    margin: 0;
    padding: 1rem;
  }

  aside #profile{
    height: 5rem;
    width: 5rem;
    padding-right: 0.8rem;
    
    
  }
  /* Skills Section */
  .skills-section {
    overflow: hidden;
  }

  .skillCards {
    width: 100%;
    display: flex;
    gap: 20px;
    text-align: center;
    animation: scroll 5s linear infinite;
  }

  @keyframes scroll {
    0% {
      transform: translateX(calc(0));
    }
    100% {
      transform: translateX(calc(-100%));
    }
  }

  #skills-grid{
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }

  .skill-category {
    background-color: none;
    padding: 30px;
    border-radius: 10px;
    width: 100%;
    margin: 5px; 
  }
  .skill-category h3 {
    margin-bottom: 10px; 
  }

  /* Projects Section */
  .projects-section {
    padding: 40px 20px;
  }
  .projects-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Space between project cards */
  }
  .project-card {
    background-color: #292929; /* Background for project cards */
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    width: 100%; /* Adjust for margins */
    cursor: pointer; /* Indicate clickable */
    transition: transform 0.3s; /* Animation on hover */
  }

  .project-card img {
    width: 60%;
    height: auto;
  }
  .project-card:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
  }
  .project-modal {
    justify-content: center;
    padding: 20px;
  }

  /* Certificates Section */
  #promoCards {
    display: block;
    text-align: center;
    width: 100%;
  }
  .certificate-card {
    position: relative; /* For hover effect */
    margin: 10px;
    overflow: hidden; /* Hide overflow */
    transition: transform 0.3s; /* Animation */
  }
  .certificateSection:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
  }
  .certificate-info {
    display: none; /* Hide info by default */
  }
  .certificate-card:hover .certificate-info {
    display: block; /* Show info on hover */
    background-color: rgba(0, 0, 0, 0.8); /* Background for info */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #ffffff;
    padding: 10px; /* Space for text */
  }
}