/* overall-nav-responsible.css */

/* General CSS Styles -----------    
--------    Class   Syntax: .nav-links { gap: 0.5rem; }     is for <div class="nav-links">
---------   element Syntax: header h1  { margin: 15px;  }   is for <header>    <h1>Title</h1>  </header>
---------   ID      Syntax: #main-header { color: #fff; }   is for  <header id="main-header">
-------------      */
body {
    font-family: Arial, sans-serif;
    color: #FFFFFF; /* Sets text color to white */
    margin: 0;
    padding: 0;
    background-color: #333333; /* Sets background color to dark gray */
}

/* Header Styles */
header {
    background-color: #1a1a1a; /*  #333  */
    color: #fff; /* Sets text color to white */
    padding: 0rem;
    position: fixed; /* Keeps the header fixed at the top */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensures the header stays on top of other elements */
    display: flex;
    justify-content: space-between; /* Spaces out header items */
    align-items: center;
    box-sizing: border-box; /* Includes padding in width calculations */
    height: 80px;
}

header h1 {
    margin: 15px; /* Removes default margin */
}

.menu-toggle {
    display: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 15px; /* Moves hamburger icon to the left from the right edge */
}

/* Navigation Styles */
nav {
    display: flex;
    align-items: center;
    /*transform: translateX(-15px);*/  /* --------------------this is hero tag !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!          !!!!!       */
}

.nav-links {
    display: flex;
    gap: 0.5rem;
}

nav a {
    color: #fff; /* Sets link color to white */
    margin: 0 0.5rem;
    text-decoration: none;
    padding: 0.25rem;
    display: inline-block;
       
}

nav a:hover {
    background-color: #444; /* Changes background color on hover */
}

/* Email Link Styles ------------------------------------------------------------------------- */
a[href^="mailto:"] {
    color: #FFD700; /* Sets color for email links (gold in this example) */
}

a[href^="mailto:"]:hover {
    color: #FF6347; /* Changes color on hover (tomato red in this example) */
}




/* --------------------------------------------------------------------------- Apply padding to all sections except #waveAnim */
section:not(#waveAnim) {    
    padding: 1rem;
    padding-top: calc(0rem + 70px); /* Additional padding to prevent header overlap */
    /* margin-top: 60px; /* Adds margin to offset fixed header */ */
}



/* Responsive Adjustments */
@media (min-width: 961px) { /* in case of grater than 961px */
    nav {
        transform: translateX(-15px); /* Only apply on larger screens */
    }
}

@media (max-width: 960px) {
    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 0;
        right: 0;
        background-color: #333;
        padding: 1rem;
        box-sizing: border-box;
        z-index: 1001;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        margin: 0.15rem 0;
        padding: 0.25rem 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    nav a {
        margin: 0.05rem;
        font-size: 0.9rem;
    }
}

html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
}