html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}/*This is to remove the scroll bar that is normaly seen*/

             
body{
    margin: 0;
    background-color: #F0F3FD;
}



#nav a{
    
    text-decoration:none;
    color:black;

}
#nav{


    height:10vh;
    position:sticky;
    top:0;
    z-index:1000;
    margin: 0;
    background-color:rgba(248, 248, 248, 0.637);
    transition: background-color 0.5s ease;

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    align-items:center;
    padding: 0px 10px;
    text-decoration: none;
    font-size: large;
    font-weight: bold;
    box-shadow: 5px 0px 5px grey;
    
 
}


.nav-links{

    list-style:none;
    display: flex;
    justify-content: space-around;
    
}

#menu-toggle{ 
  display:none; 
  background:transparent; 
  border:none; 
  width:40px; 
  height:40px; 
}

#menu-toggle .bar{ 
  display:block; 
  width:24px; 
  height:2px; 
  margin:4px auto; 
  background:#000; 
}

main#projects{ 
  padding: 20px; 
}

.projects-hero{ 
  text-align:center; 
  padding: 40px 10px 10px; 
}

.projects-grid{ 
  display:grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap:16px; 
}

.project-card{ 
  margin:0; 
}

.project-card img{ 
  width:100%; 
  height:220px; 
  object-fit:cover; 
  border-radius:6px; 
}

.project-card figcaption{ 
  margin-top:6px; 
  font-weight:bold; 
}



@media (max-width: 1000px){
  #menu-toggle{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
  }

  .nav-links{
    position:absolute; 
    top:10vh; 
    left:0; 
    right:0; 
    background:rgba(248,248,248,0.98);
    display:none; 
    flex-direction:column; 
    gap:8px; 
    padding:10px; 
    margin:0;
  }

  .nav-open .nav-links{ 
    display:flex; 
  }
  .projects-grid{ 
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 600px){
  .projects-grid{
    grid-template-columns: 1fr; 
  }

  .project-card img{ 
    height:200px; 
  }

}

.nav-btn{

    border: solid 1px #414141;
    width: 7vw;
    height: 4vh;
    border-radius:5px ;
}

#logo-image {
    height: 40px; /* Adjust this to control the logo's height */
    width: auto; /* Maintains the logo's aspect ratio */
}

/* Optional: Add a transition for a smooth hover effect */
#logo-image:hover {
    opacity: 0.8;
}
/* The above section is the navigation area*/






/*The below section is the footer section*/
footer{
    background-color:#7b7979 ;
    height: 8vh;
    padding: 8px;
}