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;
    
}

/* Hamburger button */
#menu-toggle{
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

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

/* About page layout */
main#about{
    padding: 20px;
}
.about-hero{
    text-align: center;
    padding: 40px 10px 10px;
}
.about-story, .about-process, .about-values{
    max-width: 900px;
    margin: 0 auto 24px;
}
.about-process ol{
    padding-left: 20px;
}
.about-values ul{
    padding-left: 20px;
}

.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;
}

/* Mobile menu behavior */
@media (max-width: 1000px) {
    #menu-toggle{ display: inline-flex; }
    .nav-links{
        position: absolute;
        top: 10vh;
        left: 0; right: 0;
        background: rgba(248,248,248,0.98);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        margin: 0;
    }
    .nav-open .nav-links{ 
        display: flex; 
    }
}