/* --- Global Styles & Full-Screen Background --- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: rgb(233, 232, 232);
    line-height: 1.6;
    background-color: #f4f4f4; /* Fallback color */
}

/* Main Background Image - Fixed and Non-Moving */
body {
    background-image: url('./Main_background.jpg');
    background-size: cover; /* Ensures the image covers the entire viewport */
    background-position: center center;
    background-attachment: fixed; /* KEY: Keeps the background image stationary */
    background-repeat: no-repeat;
}

/* Optional: Overlay for better content readability */
main, #main-footer {
    background-color: rgba(255, 255, 255, 0.211); /* Semi-transparent white to ensure text is legible */
    max-width: 1000px;
    margin: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* --- Header & Navigation Bar --- */
#main-header {
    background-color: #0f0806cb; /* Dark Brown for Upholstery feel */
    color: rgb(199, 199, 199);
    /* padding: 15px 20px; */
    position: sticky; /* Standard sticky header */
    top: -1000px;
    z-index: 1000;
    transition: top 0.3s ease, font-size 0.3s ease;
    text-align: center;
    border-radius: 25px;
}
/* .header-hidden {
  top: -100px; /* Adjust based on header height */


/* Styles for the collapsing/shrinking effect */
#main-header.scrolled {
    top: -100px ;
    /* padding: 100px 200px; */
     /* Smaller padding when scrolled */
}

.company-name {
    margin: 0;
    font-size: 2.5em;
    transition: font-size 0.3s ease;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#main-header.scrolled .company-name {
    font-size: 1.8em; /* Smaller font size when scrolled */
}

.glow {
	/* font-size: 80px; */
	color: #e9b525;
	text-align: center;
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
  }
  
  @keyframes glow {
	from {
	  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
	}
	to {
	  text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
	}
  }
  

#navbar ul {
    list-style: none;
    /* padding: 0;
    margin: 10px 0 0 0; */
    /* flex off for side bar */
    /* display: flex;
    justify-content: center;
    gap: 20px; */
    transition: opacity 0.3s ease;
}

#navbar a {
    /* off for side bar */
    /* color: white; */
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- Content Sections --- */
#hero-content {
    min-height: 70vh; /* Make the hero section tall for scrolling effect */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; /* Color on the semi-transparent overlay */
    padding: 40px 20px;
    /* background-color: #5d403728; Dark Brown for Upholstery feel */
}

.content-section {
    padding: 40px 20px;
    border-top: 1px solid #ddd;
}

/* Background color for text. Easier to read */
section h2, section h3, section p, section ul, section a {
  text-shadow: 3px 3px 7px black;
}

h1{
text-shadow: 3px 3px 7px black;
}

/* Larger text size */
p {
  font-size: large;
}
/* --- Footer --- */
#main-footer {
    background-color: #333;
    color: white;
    padding: 30px 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Allows sections to stack on mobile */
    justify-content: space-around;
    gap: 20px;
    text-align: center;
}

.footer-section h4 {
    color: #FFC107; /* Highlight color */
    margin-top: 0;
}

/* --- Responsiveness (Mobile Optimization) --- */
@media (max-width: 768px) {
    /* Header/Navigation adjustments for smaller screens */
    .company-name {
        font-size: 2em;
    }

    #navbar ul {
        flex-direction: column;
        gap: 10px;
        margin-top: 5px;
    }

    /* Footer adjustments for smaller screens */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Nav bar refinement. responsive, side on desktop, top on mobile, 
on scroll desktop ??, mobile will reduce to hamburger.  */

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/* for midia queries */
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Sidebar css */

/* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0;
  width: auto;
  background-color: #5d403728;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: auto;
  padding: 1px 16px;
  height: auto;
}

/* On screens that are less than 1500px wide, make the sidebar into a topbar */
@media screen and (max-width: 1500px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
  ul {
  	padding: 0%;
	}
}




/* photo gallery CSS */

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}