<style>

@font-face {
  font-family: Nexa-Heavy;
  src: url(fonts/Nexa-Heavy.ttf);
}

@font-face {
  font-family: Nexa-ExtraLight;
  src: url(fonts/Nexa-ExtraLight.otf);
}

@font-face {
  font-family: Tommy-Light;
  src: url(fonts/Tommy-Light.otf);
}

@font-face {
  font-family: Tommy-Bold;
  src: url(fonts/Tommy-Bold.otf);
}

@font-face {
  font-family: Mont-Heavy;
  src: url(fonts/Mont-Heavy.otf);
}


@font-face {
  font-family: BebasNeue-Regular;
  src: url(fonts/BebasNeue-Regular.ttf);
}

@font-face {
  font-family: Malvides;
  src: url(fonts/Malvides.otf);
}


/*Navigation Bar*/
/*Navigation Bar*/
/*Navigation Bar*/
/*Navigation Bar*/
/*Navigation Bar*/
/*Navigation Bar*/

        /* Navigation Bar Container styles */
        .navbar {
            display: flex;         /* Enable Flexbox layout */
            align-items: center;   /* Vertically align items in the center */
            justify-content: space-between; /* Distribute space, pushing brand left and action right */
 position: sticky; /* This makes the element sticky */
  top: 0; 
            background-color: #ffffff; /* Dark background color for the navbar */
            color: white;          /* White text color */
            padding: 0 20px;       /* Padding on left and right sides */
            min-height: 6em;      /* Minimum height for the navbar */
            box-sizing: border-box;/* Include padding/border in element's total width/height */
box-shadow: #0000000a 5px 5px 5px;
Z-INDEX: 1000;

        }

        /* Brand/Logo Section */
        .navbar-brand {
            display: flex;
            align-items: center;
            flex-shrink: 0;        /* Prevent the logo from shrinking */
            text-decoration: none; /* Remove underline from the logo link */
        }

        .logo-img {
            max-height: 4em;      /* Control the height of the logo image */
            display: block;        /* Remove extra space below the image */
        }

        /* Navigation Links List */
        .nav-links {
            display: flex;         /* Arrange list items horizontally */
            list-style: none;      /* Remove bullet points from the list */
            padding: 0;
            margin: 0;
            flex-grow: 1;          /* Allow the links container to grow and take available space */
            justify-content: left; /* Center the navigation links */
	    padding-left: 4em;
	font-size: 20px;
font-family: tommy-light;
        }

        .nav-links li {
            margin-left: 25px;     /* Spacing between navigation links */
        }
        .nav-links li:first-child {
            margin-left: 0;        /* Remove left margin from the first link */
        }

        .nav-links a {
            color: #393939;          /* Link text color */
            text-decoration: none; /* Remove underline from links */
            padding: 10px;         /* Add padding for a larger clickable area */
            display: block;        /* Make links block elements */
            transition: color 0.3s ease; /* Smooth transition for color change on hover */
        }

        .nav-links a:hover {
            color: #000000;           /* Lighter text color on hover */
        }

        /* Right Side Action Button */
        .navbar-action {
            display: flex;
            align-items: center;
            flex-shrink: 0;        /* Prevent the button from shrinking */
        }

        .action-button {
            background-color: #4CAF50; /* Green background for the button */
            color: white;          /* White text color */
            padding: 10px 20px;    /* Padding inside the button */
            border: none;          /* Remove default border */
            border-radius: 5px;    /* Rounded corners */
            cursor: pointer;       /* Change cursor to pointer to indicate clickability */
            transition: background-color 0.3s ease; /* Smooth background color transition on hover */
            font-size: 1rem;       /* Font size for the button text */
font-family: mont-heavy;
        }

        .action-button:hover {
            background-color: #45a049; /* Darker green on hover */
        }

        /* Hamburger Menu Styles - Hidden on Desktop */
        .menu-toggle {
            display: none;         /* Hide the checkbox visually */
            /* If you need to address accessibility concerns where the checkbox itself
               is the target, you might use opacity/positioning instead of display: none:
               opacity: 0; position: absolute; width: 0; height: 0; pointer-events: none; */
        }

        .hamburger-icon {
            display: none;         /* Hide hamburger icon on desktop */
            cursor: pointer;
            padding: 5px;          /* Add padding for easier clicking */
            z-index: 10;           /* Ensure it's above the menu if it overlaps */
            width: 28px;           /* Fixed width for the icon container */
            height: 24px;          /* Fixed height for the icon container */
            position: relative;    /* Relative positioning for span children */
            transition: transform 0.3s ease; /* Smooth transition for icon animations */
        }

        .hamburger-icon span {
            display: block;        /* Make spans block elements */
            width: 100%;           /* Full width for each line */
            height: 3px;           /* Thickness of the hamburger lines */
            background-color: #595959; /* Color of the lines */
            margin-bottom: 4px;    /* Space between the lines */
            transition: all 0.3s ease; /* Smooth transitions for all properties */

        }
        .hamburger-icon span:last-child {
            margin-bottom: 0;      /* Remove margin from the last span */
        }

        /* --- Responsive Adjustments for Mobile --- */
        @media (max-width: 1000px) {
            /* Allow navbar items to wrap if they don't fit */
            .navbar {
                flex-wrap: wrap;
            /* --- MODIFICATION: Hide the navbar-action (button) on mobile --- */
            .navbar-action {
                display: none; /* This line hides the button on screens <= 768px */
            }
            }

            /* Logo takes natural width */
            .navbar-brand {
                flex-basis: auto;
            }

            /* Show Hamburger Icon and push it to the right */
            .hamburger-icon {
                display: block;        /* Make the hamburger icon visible */
                margin-left: auto;     /* Push the hamburger icon to the right end */
            }

            /* Hide the actual checkbox; the label is the clickable UI element */
            .menu-toggle {
                display: none;
            }

            /* Navigation Links - Mobile Menu Styling */
            .nav-links {
                display: none;         /* Hide the nav links by default */
                flex-direction: column;/* Stack the links vertically */
                width: 100%;           /* Make the menu container full width */
                position: absolute;    /* Position the menu absolutely */
                top: 100%;             /* Place it right below the navbar */
                left: 0;
                background-color: #e7e7e7; /* Darker background for the mobile menu */
                padding: 10px 0;       /* Vertical padding for the menu */
                z-index: 8;            /* Ensure menu is below hamburger but above other page content */
                box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */
            }

            .nav-links li {
                width: 100%;           /* Make list items take full width */
                text-align: center;    /* Center the text within list items */
                margin-left: 0;        /* Remove left margin for stacking */
            }

            .nav-links a {
                padding: 15px 0;       /* Increase vertical padding for easier touch targets */
            }

            /* Style for the hamburger lines when the menu is open */
            .menu-toggle:checked ~ .hamburger-icon span:nth-child(1) {
                transform: translateY(7px) rotate(45deg); /* First line: move up and rotate */
            }
            .menu-toggle:checked ~ .hamburger-icon span:nth-child(2) {
                opacity: 0;            /* Middle line: hide it */
            }
            .menu-toggle:checked ~ .hamburger-icon span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg); /* Last line: move down and rotate */
            }

            /* Show the navigation links when the menu-toggle checkbox is checked */
            .menu-toggle:checked ~ .nav-links {
                display: flex;         /* Display the nav links as a column */
            }

            /* Action button styling on mobile */
            .navbar-action {
                /* On smaller screens, the action button might need specific alignment.
                   If hamburger is pushed to the right with margin-left: auto,
                   the action button (being the last flex item) will end up on the far right. */
                width: auto; /* Ensure it doesn't take full width if unncessary */
            }
        }


</style>