/* ==========================================================================
   1. Core Setup & Global Resets
   ========================================================================== */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: sans-serif; 
  scroll-behavior: smooth; 
}

:root { 
  --green: #008751; 
  --slate: #232b2b; 
}

body { 
  background: #020f06; /* Your brilliant dark forest green choice */
  color: #e0e6e2;     /* Swapped to a soft, readable off-white for body text */
  line-height: 1.6; 
}

/* Global Structural Sections */
section { 
  padding: 5rem 2rem; 
  max-width: 1200px; 
  margin: 0 auto; 
}

/* FIX 1: Brightened headings to pop off the midnight background */
.section-title { 
  text-align: center; 
  font-size: 2.3rem; 
  color: #ffffff; /* Was var(--slate), now clean white */
  margin-bottom: 3rem; 
}

.section-title::after { 
  content: ''; 
  display: block; 
  width: 50px; 
  height: 4px; 
  background: var(--green); 
  margin: 0.5rem auto 0; 
}



/* ==========================================================================
   2. Fixed Header Navigation
   ========================================================================== */
header { 
  background: var(--slate); 
  position: fixed; 
  width: 100%; 
  top: 0; 
  z-index: 1000; 
}

.nav-container { 
  max-width: 1200px; 
  margin: 0 auto; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 1rem 2rem; 
}

.logo { 
  color: #fff; 
  font-size: 1.5rem; 
  font-weight: bold; 
  text-decoration: none; 
}

.logo span { 
  color: var(--green); 
}

nav ul { 
  display: flex; 
  list-style: none; 
}

nav ul li a { 
  color: #ccc; 
  text-decoration: none; 
  padding: 0.5rem 1rem; 
  font-weight: 500; 
}

nav ul li a:hover { 
  color: #fff; 
  border-bottom: 2px solid var(--green); 
}

/* ==========================================================================
   3. Main Hero Video Section (#home)
   ========================================================================== */
#home {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Matches your core content section widths exactly */
  margin: 0 auto; /* Centers the whole block horizontally */
  padding: 5rem 2rem 0 2rem; /* Clean padding that aligns with your site sections */
  margin-top: 60px; /* Clear space for the fixed nav bar */
}

/* Let the video fluidly scale down like a normal image banner */
#home video {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Clean, modern drop shadow */
  border-radius: 4px;
}

/* Tiny floating controls directly attached to the bottom corner of the banner area */
.video-controls-bar {
  position: absolute;
  bottom: 20px;
  right: 45px; /* Inset slightly to account for the section padding */
  z-index: 10;
  display: flex;
  gap: 6px;
}

.control-btn {
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.control-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

@media (max-width: 768px) {
  .video-controls-bar {
    bottom: 12px;
    right: 35px;
  }
}


/* ==========================================================================
   4. Content Blocks (Services, Gallery, About)
   ========================================================================== */
/* Services Grid Layout */
.services-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 2rem; 
}

/* FIX 2: Subdued green/charcoal cards that remove the harsh white contrast */
.service-card { 
  background: rgba(10, 24, 15, 0.8); /* Semi-transparent ultra-deep forest green */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Soft premium rim light edge */
  padding: 2.5rem 1.5rem; 
  border-radius: 8px; 
  text-align: center; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Deeper shadow for the dark theme */
  border-top: 4px solid var(--green); 
}

/* Soften the card typography to match the dark aesthetic */
.service-card h3 {
  color: #ffffff;
  margin-bottom: 1rem;
}

.service-card p {
  color: #b2c2b7; /* Muted sage text so it reads comfortably without glowing */
}




/* Gallery Grid Layout */
.gallery-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 1.5rem; 
}

.gallery-item { 
  border-radius: 6px; 
  overflow: hidden; 
  height: 250px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.gallery-item img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.3s; 
}

.gallery-item:hover img { 
  transform: scale(1.05); 
}

/* About Us Layout */
#about p { 
  font-size: 1.1rem; 
  margin-bottom: 1.5rem; 
  text-align: center; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto; 
}

/* ==========================================================================
   5. Interactive Contact Forms
   ========================================================================== */
form { 
  max-width: 600px; 
  margin: 0 auto; 
  background: #fff; 
  padding: 2.5rem; 
  border-radius: 8px; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

form input, form textarea { 
  width: 100%; 
  padding: 0.8rem; 
  margin-bottom: 1.2rem; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  font-size: 1rem; 
}

form textarea { 
  height: 120px; 
  resize: none; 
}

button { 
  background: var(--green); 
  color: #fff; 
  border: none; 
  padding: 1rem; 
  font-size: 1.1rem; 
  font-weight: bold; 
  border-radius: 4px; 
  cursor: pointer; 
  width: 100%; 
}

button:hover { 
  background: #006e41; 
}

/* ==========================================================================
   6. Global Responsive Media Queries
   ========================================================================== */
@media (max-width: 1180px) {
  .video-container {
    width: 95%; /* Provides balanced edge breathing room margins on laptops */
  }
}

@media (max-width: 768px) {
  .nav-container { 
    flex-direction: column; 
    text-align: center; 
  }
  nav ul { 
    margin-top: 1rem; 
  }
  form { 
    padding: 1.5rem; 
  }
}

/* ==========================================================================
   5. Direct Contact Layout (Form-Free & Obfuscated)
   ========================================================================== */
.contact-card-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left: 5px solid var(--slate); 
}

.highlight-card {
  border-left-color: var(--green);
}

.info-card h3 {
  font-size: 1.5rem;
  color: var(--slate);
  margin-bottom: 1rem;
}

.info-card p {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.7;
}

/* The Magic Security Trick */
.obfuscated-email {
  display: inline-block;
  unicode-bidi: bidi-override; /* Forces the browser to completely re-order the visual rendering */
  direction: rtl;              /* Flips the text direction from Right-To-Left so it reads normally to humans */
  font-size: 1.3rem;
  color: var(--green);
  font-weight: bold;
  letter-spacing: 1.5px;
  margin: 1rem 0;
  font-family: monospace;
  
  /* Stops users from selecting/copying the raw scrambled text layout string */
  user-select: none;           
  -webkit-user-select: none;   /* Safari support */
  -moz-user-select: none;      /* Firefox support */
  -ms-user-select: none;       /* Old IE support */
}

.info-card .subtext {
  font-size: 0.9rem;
  color: #777;
  font-style: italic;
}

@media (max-width: 768px) {
  .info-card {
    padding: 1.5rem;
  }
  .obfuscated-email {
    font-size: 1.1rem;
  }
}