/* --- CSS STYLING --- */
        :root {
            --primary: #CECECE;
            --accent: #767676;
            --bg: #151515;
            --white: #BABABA;
			--grey: #181818;
            --header-height: 80px; 
        }

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

        body {
            font-family: 'Helvetica Neue', Josefin Sans, sans-serif, Arial;
            background-color: var(--bg);
            color: var(--grey);
            line-height: 1.6;
            padding-top: var(--header-height); 
        }
		
/* Increase spacing between characters */
p {
letter-spacing: 0.3px;
line-height:30px;
}
        /* --- UPDATED HEADER CSS --- */
        header {
            background: var(--grey);
            height: var(--header-height); 
            padding: 0 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        /* Container for Logo + Text */
        .brand-link {
            display: flex;
            align-items: center;
            text-decoration: none; /* Removes underline from title if it's a link */
            gap: 15px; /* Space between logo and text */
        }

        .main-logo {
            height: 55px; 
            width: auto;
            display: block;
        }

        .site-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: 1px;
            text-transform: lowercase;
        }
		
.video-container {
  /* Optional: Limit container width (e.g., 1200px on large screens) */
  max-width: 1200px;
  margin: 0 auto; /* Center container */
  padding: 20px;
}
 
.video-container video {
  width: 100%; /* Fit container width */
  height: auto; /* Auto-calculate height to preserve aspect ratio */
  display: block; /* Remove inline spacing artifacts */
}


	 nav a:link { 
            margin-left: 25px; 
            text-decoration: none; 
            color: var(--primary); 
            font-weight: 600; 
            transition: color 0.2s ease;
        }
        
        nav a:hover { color: var(--accent); 
		text-decoration:underline;}
		 
        nav a:visited { color: var(--primary); }
		
		hr { border-top: 1px dotted #000000;}
		
		
		
		
		
		/* Base link style */
a {
  font-family: 'Helvetica Neue', Josefin Sans, sans-serif, Arial;
    color: var(--grey);
}

/* Unvisited */
a:link {
  color: var(--grey);
text-decoration:underline;
}

/* Visited */
a:visited {
text-decoration:underline;
  color: var(--grey);
}

/* Hover */
a:hover {
	text-decoration:none;
  color: #5C5C5C;
}


		 h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: 1px;
        
        }

        nav {
            display: flex;
            align-items: center;
			 color: var(--primary); 
        }

       

        /* --- GALLERY & BLOG STYLES (TRIMMED FOR BREVITY) --- */
        .container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
        .hero { height: 30vh; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/header.jpg');color: white; background-size: cover; background-position: center;display: flex; justify-content: center; align-items: center; text-align: center; }
        .blog-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 50px; }
        .blog-post { background: #F1F1F1; padding: 20px; border-radius: 8px; }
        .blog-post img { width: 100%; border-radius: 5px; }

        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
        .gallery-item { height: 200px; overflow: hidden; border-radius: 8px; cursor: pointer; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
        .gallery-item:hover img { transform: scale(1.05); }

        #lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center; }
        #lightbox img { max-width: 85%; max-height: 85%; border: 3px solid white; }
        .close-btn { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; }

        footer { text-align: center; padding: 30px;  background: var(--grey); color: white; margin-top: 40px; }

        @media (max-width: 768px) {
            header { flex-direction: column; height: auto; padding: 15px; }
            .brand-link { margin-bottom: 10px; }
            .blog-grid { grid-template-columns: 1fr; }
        }