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

html, body{
    height:100%;
}

/* BODY LAYOUT */
body{
    font-family:Arial, sans-serif;
    color:white;
    line-height:1.6;

    display:flex;
    flex-direction:column;

    min-height:100vh;
    overflow-x:hidden;
    position:relative;
}

/* HEADER */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 40px;
    background:black;
    color:white;

    position:relative;
    z-index:2;
}

nav a{
    color:white;
    margin-left:40px;
    text-decoration:none;
}

/* FIXED BACKGROUND */
.background-wrapper{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-2;
}

.background-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

.background-wrapper::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.hero{
height:110vh;
background:url("images/hero.jpg") center/cover no-repeat;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
text-align:center;
}

.hero h1{
font-size:48px;
}
.main-container {
    width: 100%;
    /* Optional: add some padding to the main content area */
    padding: 20px 0; 
}

.section-header h2 {
    /* Optional: center the header text */
    text-align: center;
    /* Optional: add margin for spacing */
    margin-bottom: 15px; 
}

.scroll-container {
    background: rgba(255,255,255,0.20);
    overflow-x: auto; /* Enables horizontal scrolling when content overflows */
    white-space: nowrap; /* Prevents images from wrapping to the next line */
    padding: 10px;
    /* Optional: limit the height of the scroll container */
    max-height: 250px; 
}

.scroll-container img {
    padding: 10px; /* Space around each image */
    height: 200px; /* Fixed height for uniformity */
    width: auto; /* Maintain aspect ratio */
    display: inline-block; /* Aligns images in a row */
    transition: transform 0.3s ease;
    cursor: pointer; /* Optional: adds a pointer cursor on hover */
    /* Optional: add some styling for a better look */
    border-radius: 5px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.background-wrapper {
  position: relative;
  height: 400px; /* Set desired height */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image scales properly */
  opacity: 0.5; /* Adjust transparency (0.0 to 1.0) */
  z-index: -1; /* Pushes the image behind the content */
}

.zoomed {
  transform: scale(1.8); /* Adjust this value for how big it should get */
  z-index: 10;            /* Ensures the expanded image stays on top */
  position: relative;
}

#portfolio{
padding:60px 20px;
text-align:center;
}

.gallery{
columns:3;
gap:15px;
}

.gallery img{
width:100%;
margin-bottom:15px;
cursor:pointer;
border-radius:6px;
}

#services{
padding:60px 20px;
text-align:left;
position: relative;
z-index: 1;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
z-index: 1;
}

.semi-transparent-background {
    /* Using RGBA: 0,0,0 is black, 0.5 is the alpha (opacity) value */
    background-color: rgba(0, 0, 0, 0.5); 
    
    /* Using 8-digit hex (modern browsers): #000000 is black, 80 is 50% opacity in hex */
    /* background-color: #00000080; */ 
    
    /* Using the 'transparent' keyword for full transparency */
    /* background-color: transparent; */
    
    color: white; /* Ensure text is readable */
}

/* FOOTER */
footer{
    text-align:center;
    padding:20px;
    background:black;
    color:white;

    position:relative;
    z-index:2;
}

footer a{
    color:white;
}

#lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
    z-index: 2;
}

#lightbox img{
max-width:90%;
max-height:90%;
    z-index: 2;
}