body {
   /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* Header */
header {
    background-color: #222;
    color: #fff;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header nav ul { list-style: none; margin: 0; padding: 0; }
header nav ul li { display: inline; margin-left: 20px; }
header nav ul li a { color: #fff; text-decoration: none; font-weight: bold; }

/* .header-sections li:nth-last-child(2) {
/* Add extra spce to the right of the second to last item */
	margin-right: 15px;
}
*/


/* Hero */
.hero {
/*    background-color: #333; */
    color: white;
    text-align: center;
    padding: 100px 20px;
}

/* Hero-Section */
.hero-section {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.background-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
	z-index: -1;
	transform: translate(-50%, -50%);
}


.overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5); 
	z-index: 0;
}


.hero-content {
    position: absolute; 
    z-index: 1; 
    color: white; /* Makes text visible on a dark background */
    text-align: center; /* Centers the text horizontally */
    padding: 20px;
    /* Optional: Add a text shadow for better readability on varying video backgrounds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
}


.cta-button {
    background-color: #4A5A65;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
}

/* Services */
.services { padding: 50px 20px; text-align: center; }
.service-grid {
  /*  display: grid; */
    display: flex;
    flex-wrap: wrap;
  /*  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  */
    gap: 30px;
    padding: 50px 20px; /* was 20px only */
    justify-content: center;
}
.service-item {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    background: #f4f4f4;
    padding: 40px 20px; /* was 20px only */
    border-bottom: 4px solid #4A5A65;
    /* border-radius: 12px; */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* adds depth */
    text-align: center;
    transition: transform 0.3s ease; /* Hover effect */
}
 
.service-img {
    width: 250px;        /* Set a fixed width */
    height: 250px;       /* Set a fixed height */
    object-fit: contain; /* Ensures image isn't stretched */
    margin-bottom: 20px;
}

.service-item:hover { transform: translateY(-10px); }

/*.icon-box {
    font-size: 50px;
    margin-bottom: 20px;
    color: #3498db;
}
*/

.service-item h3 { margin-bottom: 15px; color: #2c3e50; }
.service-item p { line-height: 1.6; color: #7f8c8d; }

/* About */
.about { 
    text-align: center;
    padding: 50px 20px;
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

.about-areas {
    text-align: center;
}

.about-areas ul {
    margin-top: 0;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    text-align: left;
}

/* Our Work */
.ourWork { 
    text-align: center;
    padding: 50px 20px;
    background: #eee;
}

.scroll-work {
	display: flex;         /* Arranges items in a horizontal row */
 	overflow-x: auto;      /* Enables horizontal scrolling when content overflows */
 	white-space: nowrap;   /* Prevents images from wrapping to the next line */
  	gap: 50px;             /* Adds space between images */
 	padding: 50px;         /* Adds padding around the container */
  	height: 400px;         /* Set a fixed height for the container */
  	/* Optional: Hide scrollbar for a cleaner look (can affect accessibility) */
 	/* -ms-overflow-style: none;  IE and Edge */
 	/* scrollbar-width: none;     Firefox */
}

.scroll-work img {
  /* Ensures images maintain their aspect ratio and fill the height */
  height: 100%;          
  width: auto;
  /* Optional styling for images */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


/* Contact */
.contact { background: #FFFFFF; padding: 50px 20px; text-align: center; }
form { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; }
form input, form textarea { padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; }

footer { background: #222; color: white; text-align: center; padding: 10px; }

.footer-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* Enables stacking on mobile */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-col {
  flex: 1;
  min-width: 250px; /* Ensures stacking when screen is narrow */
  margin: 10px;
}

.fa-facebook {
        background: #222; /* Facebook brand color is #3B5998 */
	color: white;
        padding: 15px; /* Adjust size/padding as needed */
        font-size: 30px;
        width: 15px; /* Adjust width as needed */
        text-align: center;
        text-decoration: none; /* Removes the default link underline */
        margin: 5px; /* Adds spacing around the icon */
        border-radius: 5px; /* Optional: adds rounded corners */
	border: 1px solid #ffffff; /*white border */
    }

    .fa-facebook:hover {
        opacity: 0.7; /* Optional: adds a hover effect */
     }