* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	background-color: rgb(29, 46, 74);
	font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


header {
    background-color: rgb(29, 46, 74);
    padding: 25px 20px; /* Slightly increased padding for the larger content */
    display: flex;
    justify-content: center; /* Centers the container horizontally */
    align-items: center;
    border-bottom: 5px solid #eab22b; /* Thick gold accent border */
}

/* Stacks the logo and text vertically */
.header-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers items horizontally inside the column */
    text-align: center;
}

/* Enlarged Logo */
.logo {
    max-height: 120px; /* Increased from 80px to make it bigger */
    width: auto;
    margin-bottom: 10px; /* Space between logo and text */
}

/* Centered Text Under Logo */
.header-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #eab22b;
    letter-spacing: 1px; /* Subtle spacing for a cleaner look */
}

/* Layout Container for Sidebar + Main Content */
.container {
    display: flex;
    flex: 1; /* Pushes footer to the bottom */
}

/* Left Sidebar Navigation */
.sidebar {
    width: 250px;
	background-color: rgb(29, 46, 74);
    padding: 20px;
    border-right: 5px solid #eab22b;
}

.sidebar ul {
	background-color: rgb(29, 46, 74);
    list-style: none;
}

.sidebar li {
	background-color: rgb(29, 46, 74);
    margin-bottom: 15px;
}

.sidebar a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.sidebar a:hover {
	color:goldenrod;
   	font-weight:bold; /* Highlights with header color on hover */
}
/* 2. Left Sidebar Navigation Color Settings */
/* Locks unselected navigation bar links to lightgoldenrod text color */
.sidebar a {
    color: lightgoldenrod !important; 
    text-decoration: none;
    transition: color 0.2s ease-in-out; /* Smoothly eases color shift animations */
}

/* nav link hover colors */
a:link {color:lightgoldenrodyellow; text-decoration:underline;}      /* unvisited link */
a:visited {color:lightgoldenrodyellow; text-decoration:underline;}  /* visited link */
a:hover {color:goldenrod; text-decoration:underline;}  /* mouse over link */
a:active {color:lightgoldenrodyellow; text-decoration:underline;}  /* selected link */

/* Makes images scale down on smaller screens */
.responsive-img {
    max-width: 100%;  /* Prevents the image from ever being wider than the screen */
    height: auto;     /* Maintains the original aspect ratio so it doesn't look stretched */
    display: block;   /* Removes default bottom whitespace alignment issues */
    margin: 20px 0;   /* Optional: adds space above and below the image */
}
/* Forces all Main Content Headers to be your bright orange-gold color */
.content h1, 
.content h2, 
.content h3, 
.content h4 {
    color: #eab22b !important; /* Your signature accent orange-gold */
	/* Adds space above <h2> headers to separate sections cleanly */
	margin-bottom: 20px;
	margin-top: 20px;
    font-weight: bold;
}




/* Main Content Area */
.content {
	
    flex: 1;
    padding: 40px;
	background-color: rgb(29, 46, 74); /* Fallback color while image loads */
    background-image: linear-gradient(rgba(29, 46, 74, 0.8), rgba(29, 46, 74, 0.8)), url('haus.jpg');
    background-size: cover; /* Stretches image to fill the entire area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from tiling */

}
.content ul, 
.content ul li {
    color: lightgoldenrod !important;
}

/* Forces the custom Ohm (Ω) bullet symbol to match in lightgoldenrod */
.content ul li::before {
    color: lightgoldenrod !important;
}
/* Increases the vertical spacing between lines inside paragraphs */
.content p {
	color:lightgoldenrodyellow;
   	float:center;
	width: 90%;            /* Occupy 70% of the parent space */
   	margin: 0 auto;        /* Center the box itself horizontally */
	text-align: justify;    /* Justify the text inside the box */
   	position:relative;
	background: rgba(0, 0, 0, .4);    /*  40% opaque black */
    line-height: 1.8;      /* Spreads text lines out further for easier reading */
    margin-bottom: 0px;   /* Adds no gap before the next paragraph starts */
	padding: 0.5rem 1rem;
	
	border-radius:8px;
}

.services-list {
    list-style: none; /* Removes standard bullets */
    margin: 25px 0;
    padding: 0;
    max-width: 550px; /* Keeps the list crisp and readable */
}

.services-list li {
    position: relative;
    padding: 15px 20px 15px 45px; /* Adds inside breathing room */
    margin-bottom: 10px; /* Spaces out each block */
    font-size: 1.2rem; /* Slightly larger text */
    font-weight: 500;
    color: #ffffff;
    
    /* Elegant background panel card */
    background-color: rgba(255, 255, 255, 0.04); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px; /* Smooth rounded card corners */
    
    /* Prepares the smooth hover animation */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* Position and style the Gold Ohm Symbol (Ω) */
.services-list li::before {
    content: "\2126"; /* Ohm Symbol code */
    position: absolute;
    left: 18px; /* Perfectly aligns symbol inside the new card padding */
    top: 50%;
    transform: translateY(-50%); /* Keeps symbol perfectly centered vertically */
    color: #eab22b; /* Your signature gold */
    font-size: 1.4rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

/* Beautiful Interactive Hover Effect */
.services-list li:hover {
    background-color: rgba(234, 178, 43, 0.08); /* Glows soft gold on hover */
    border-color: rgba(234, 178, 43, 0.4); /* Sharpens the card border with gold */
    padding-left: 52px; /* Smoothly slides the text rightward */
}

/* Subtle extra pop for the Ohm symbol on hover */
.services-list li:hover::before {
    color: #ffd059; /* Brightens the gold icon */
}

/* side by side image container */
.image-container {
	object-fit: cover;
  display: flex;             /* Activates flexbox */
	top: 520;
  justify-content: center;   /* Centers images horizontally */
  gap: 0px 0px;                 /* Adds space between images */
	position:relative;
	
}

.image-container img {
  width: 40%;                /* Ensures two images fit on one line */
  height: auto;              /* Maintains aspect ratio */
}
/* Footer Styling */

footer {
    background-color: #eab22b;
    color: lightgoldenrodyellow;
    text-align: center;
    padding: 10px 5px;
    font-size: 0.9rem;
    border-bottom: 5px solid rgba(255, 255, 255, 0.1);
	border-top: 5px solid rgba(255, 255, 255, 0.1);
    
    /* Flexbox stack to put logo on top of text */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Spaces out the logo and text perfectly */
}

/* Sized exactly to your specifications */
.footer-logo {
    width: 200px; /* Forces exactly 200 pixels wide */
    height: auto; /* Keeps the proportions correct */
    display: block;
}




@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stacks the sidebar over the content area */
    }
    .sidebar {
	    width: 100%; /* Expands the sidebar to full screen width */
	    border-right: none;
	    border-bottom: 5px solid rgba(255, 202, 23, 0.9);
		float:center;
		margin: 0 auto; 
		background-color: rgb(29, 46, 74);
		overflow:hidden;
		position:relative;
		ul {
			   clear:left;
			   float:left;
			   list-style:none;
			   margin:0;
			   padding:0;
			   position:relative;
			   left:50%;
			   text-align:center;
				background-color: rgb(29, 46, 74);
		}
		ul li {
		   display:block;
		   float:left;
		   list-style:none;
		   margin:0;
		   padding:0;
		   position:relative;
				background-color: rgb(29, 46, 74);
		   right:50%;
		}
		ul li a {
		   display:block;
		   margin:0 0 0 3px;
		   padding:3px 10px;
		   	background-color: rgb(29, 46, 74);
		   text-decoration:none;
		   line-height:1.3em;
		}
		ul li a:hover {
		   color:goldenrod;
		}
		ul li a.active:hover {
		   color:goldenrod;
		   font-weight:bold;
		}
	}
	
}
footer {
    position: relative;
    overflow: hidden; /* Locks moving lines safely inside the footer block */
    padding-bottom: 5px !important; /* Keeps your logo pushed clear below the moving waves */
}

/* Fixes the animation canvas loop container boundaries */
.wave-container {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important; /* Vertical boundary height of your wave line ripples */
    line-height: 0 !important;
    pointer-events: none; /* Prevents hidden clicks from getting blocked */
}

/* Core styling rules that eliminate the static browser layout glitch */
.sine-wave {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 200% !important; /* Stretches shape exactly double-wide to house the duplicate wave pattern */
    height: 100% !important;
}

/* Track 1: Blue Shadow Loop - Moves smoothly leftward */
.blue-shadow-wave {
    animation: blue-crawl-loop 14s linear infinite !important;
}

/* Track 2: White Current Loop - Moves counter-directionally to add deep 3D layout motion */
.white-current-wave {
    animation: white-crawl-loop 9s linear infinite !important;
}

/* 
   THE MOTION GLITCH FIX: 
   Using structural translate3d percentages forces all web browsers 
   to trigger hardware acceleration for completely fluid continuous motion.
*/
@keyframes blue-crawl-loop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0); /* Shifts exactly half its custom width for a seamless loop reset */
    }
}

@keyframes white-crawl-loop {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0); /* Crawls the opposite direction flawlessly */
    }
}