@import url("responsiveimage.css");
body
{
	
	margin: 0;
	padding: 0;
	font-family: sans-serif; 

}
nav
{
	
	width: 100%;
	background: #5D5C61;
	padding: 40px;
	box-sizing: border-box;
	
}
nav h1
{
	margin: 0;
	padding: 15px 20px;
	float: left;
	
}
nav h1 a 



{
	color: #000000;
	text-decoration: none;
}
nav ul
{
	margin: 0;
	padding: 0;
	float: right;
}
nav ul li
{
	list-style: none;
	display: inline-block;
	text-align: center;
	padding: 10px 10px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	transition: .5s;
}
nav ul li a
{
	color: #000000;
	text-decoration: none;
}
nav ul li:hover
{
	background: #839192;
}
.responsive-bar
{ 
	width: 100%;
	background: #474A4C;
	padding: 10px 50px;
	box-sizing: border-box;
	display: none;
	
}
.responsive-bar h3
{
	margin: 0;
	padding: 3px 0;
	color: #000000;
	float: left;
	
}
.responsive-bar h3 a
{
	
	color: #000000;
	text-decoration: none;
	
}
.responsive-bar h4
{
	margin: 0;
	padding: 0;
	color: #000000;
	float: right;
	padding: 5px 10px;
	background: #839192;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 900px)
{ 
nav
	{
		display: none;
	}
	.responsive-bar
	{
		display: block;
		overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
	}
	nav h1 
	{
		display: block;
		float: none;
	}
	nav ul
	{
		float: none;
	}
	nav ul li
	{
		display: block;
	}
	h1.brand
	{
		display: none;
		
		
	}
	
	
/* ===== MOBILE TOP BAR LAYOUT ===== */
@media (max-width: 768px) {
    .responsive-bar {
        display: flex;
        justify-content: space-between; /* Home left, Menu right */
        align-items: center;
        padding: 6px 10px;              /* small inner spacing */
    }

    .responsive-bar .brand,
    .responsive-bar .menu {
        float: none;                    /* cancel any old float rules */
        margin: 0;
    }

    .responsive-bar .brand {
        text-align: left;
    }

    .responsive-bar .menu {
        text-align: right;
        cursor: pointer;                /* shows it’s clickable */
    }
}

/* ===== STYLE MOBILE TOP BAR TEXT ===== */
@media (max-width: 768px) {

    .responsive-bar {
        background: #2a2a2a;     /* darker for contrast */
        padding: 10px 14px;
        color: #ffffff;
        font-weight: bold;       /* makes Home & Menu bolder */
        font-size: 1.1rem;
    }

    .responsive-bar .brand,
    .responsive-bar .menu {
        color: #ffffff !important;      /* ensure white text */
        font-weight: 600;               /* semi-bold */