/* ===========================
   GLOBAL RESET & BASE STYLES
   =========================== */

body { /* Main page body */
  margin: 0; /* Remove default browser margin */
  font-family: Arial, sans-serif; /* Clean readable font */
  background: #f5f5f5; /* Light grey background */
  color: #333; /* Dark grey text */
}


/* ===========================
   HERO SECTION (TOP BANNER)
   =========================== */

.hero { /* Hero container */
  background: url('images/photo4.jpg') no-repeat center center; /* Background image */
  background-size: cover; /* Make image fill the hero area */
  height: 520px; /* Fixed height */
  position: relative; /* Allows overlay to be positioned manually */
}

.hero-overlay { /* Shaded text + buttons box */
  position: absolute; /* Remove overlay from normal flow */
  top: 20px; /* Distance from top of hero */
  left: 20px; /* Distance from left of hero */
  background: rgba(0, 0, 0, 0.45); /* Semi-transparent shaded box */
  padding: 20px 15px; /* Inner spacing */
  max-width: 600px; /* Narrower box reveals more photo */
  text-align: left; /* Looks better in top-left */
  color: #fff; /* White text */
  border-radius: 6px; /* Softer corners */
}

.hero-overlay h1 { /* Hero heading */
  font-size: 2.4rem; /* Large headline */
  margin-bottom: 15px; /* Space below heading */
}

.hero-overlay p { /* Hero paragraph text */
  margin: 8px 0; /* Vertical spacing */
  font-size: 1.05rem; /* Slightly larger text */
}

.call { /* Call-to-action phone line */
  font-weight: bold; /* Make phone number bold */
  margin-top: 10px; /* Space above */
}

.hero-buttons { /* Buttons container */
  margin-top: 20px; /* Space above buttons */
}

.btn { /* Base button style */
  display: inline-block; /* Make anchor behave like button */
  background: #007bff; /* Blue background */
  color: #fff; /* White text */
  padding: 10px 22px; /* Button padding */
  border-radius: 4px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  margin: 0 8px; /* Space between buttons */
  font-size: 0.95rem; /* Button text size */
}

.btn-outline { /* Outline button style */
  background: transparent; /* Transparent background */
  border: 2px solid #fff; /* White border */
}


/* ===========================
   GENERIC SECTION STYLING
   =========================== */

.section { /* Generic section container */
  max-width: 900px; /* Limit width for readability */
  margin: 40px auto; /* Center section with vertical spacing */
  padding: 0 20px; /* Horizontal padding */
}

.section h2 { /* Section headings */
  text-align: left; /* Left-align headings */
  margin-bottom: 20px; /* Space below heading */
}


/* ===========================
   SERVICES SECTION
   =========================== */

.cards { /* Container for service cards */
  display: flex; /* Flexbox layout */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 20px; /* Space between cards */
}

.card { /* Individual service card */
  background: #fff; /* White background */
  border-radius: 4px; /* Rounded corners */
  padding: 20px; /* Inner spacing */
  flex: 1 1 260px; /* Flexible width */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Soft shadow */
}

.card h3 { /* Card title */
  margin-top: 0; /* Remove top margin */
  margin-bottom: 10px; /* Space below title */
}

.card p { /* Card description */
  margin-bottom: 10px; /* Space below description */
}

.card ul { /* Bullet list */
  padding-left: 18px; /* Indent bullets */
  margin: 0; /* Remove default margin */
}


/* ===========================
   WIND CONDITIONS SECTION
   =========================== */

.intro { /* Intro paragraph */
  margin-bottom: 20px; /* Space below intro */
}

.wind-grid { /* Wind grid container */
  display: flex; /* Row layout */
  flex-wrap: nowrap; /* Prevent wrapping */
  gap: 15px; /* Space between boxes */
  overflow-x: auto; /* Allow scroll */
}

.wind-day { /* Individual wind day box */
  flex: 0 0 115px; /* Fixed width */
  background: #fff; /* White background */
  border-radius: 4px; /* Rounded corners */
  padding: 15px; /* Inner spacing */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Soft shadow */
}

.wind-day h3 { /* Wind day heading */
  margin-top: 0; /* Remove top margin */
  margin-bottom: 8px; /* Space below heading */
}


/* ===========================
   DRONE SUITABILITY TABLE
   =========================== */

.table-wrapper { /* Table wrapper */
  background: #fff; /* White background */
  border-radius: 4px; /* Rounded corners */
  padding: 20px; /* Inner spacing */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Soft shadow */
  overflow-x: auto; /* Allow scroll */
}

table { /* Table element */
  width: 100%; /* Full width */
  border-collapse: collapse; /* Remove gaps */
  font-size: 0.95rem; /* Text size */
}

thead { /* Table header */
  background: #e9ecef; /* Light grey background */
}

th, td { /* Table cells */
  padding: 10px; /* Cell padding */
  border: 1px solid #ddd; /* Light border */
  text-align: left; /* Left-align text */
}


/* ===========================
   PORTFOLIO SECTION
   =========================== */

.portfolio-list { /* Portfolio list */
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack vertically */
  gap: 12px; /* Space between items */
}

.portfolio-item { /* Portfolio item */
  background: #fff; /* White background */
  border-radius: 4px; /* Rounded corners */
  padding: 15px; /* Inner spacing */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Soft shadow */
}

.portfolio-item h3 { /* Portfolio title */
  margin-top: 0; /* Remove top margin */
  margin-bottom: 6px; /* Space below title */
}


/* ===========================
   ABOUT SECTION
   =========================== */

#about p { /* About paragraph */
  margin-bottom: 10px; /* Space below paragraph */
}


/* ================================
   CONTACT SECTION — BASE STYLES
   ================================ */

.contact-form { /* Contact form wrapper */
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack vertically */
  gap: 15px; /* Spacing between fields */
  max-width: 600px; /* Limit width */
  margin: 0 auto; /* Center form */
}

.contact-form input,
.contact-form textarea { /* Input + textarea styling */
  width: 100%; /* Full width */
  padding: 10px; /* Inner spacing */
  font-size: 1rem; /* Text size */
  border-radius: 6px; /* Rounded corners */
  border: 1px solid #ccc; /* Light border */
}

.contact-bottom-row { /* Button + logo row */
  display: flex; /* Flexbox layout */
  justify-content: space-between; /* Spread items */
  align-items: center; /* Center vertically */
  margin-top: 10px; /* Space above row */
}

.contact-logo { /* Desktop logo */
  width: 260px; /* Large desktop logo */
  height: auto; /* Maintain ratio */
  flex-shrink: 0; /* Prevent shrinking */
}


/* ================================
   MOBILE FIX — STACK ELEMENTS
   ================================ */

@media (max-width: 600px) {

  .contact-bottom-row { /* Mobile row */
    flex-direction: column; /* Stack vertically */
    align-items: center; /* Center items */
    gap: 15px; /* Space between items */
  }

  .contact-logo { /* Mobile logo */
    width: 180px; /* Smaller mobile size */
    flex-shrink: 1; /* Allow shrinking */
  }
}


/* ===========================
   FOOTER
   =========================== */

.footer { /* Footer styling */
  margin-top: 20px; /* Space above footer */
  font-size: 0.85rem; /* Smaller text */
  color: #666; /* Muted grey */
}


/* ===========================
   SOCIAL ICONS — DESKTOP
   =========================== */

.social-icons { /* Social icons wrapper */
  position: absolute; /* Bottom-right placement */
  right: 20px; /* Distance from right */
  bottom: 20px; /* Distance from bottom */
  display: flex; /* Flexbox layout */
  gap: 12px; /* Space between icons */
}

.social-icons img { /* Desktop icons */
  width: 22px; /* Desktop size */
  height: 22px; /* Desktop size */
  opacity: 0.9; /* Slight fade */
  transition: opacity 0.2s; /* Fade animation */
}

.social-icons img:hover { /* Hover effect */
  opacity: 1; /* Full opacity */
}


/* ===========================
   SOCIAL ICONS — MOBILE FIX
   =========================== */

@media (max-width: 600px) {

  .social-icons { /* Mobile wrapper */
    position: static; /* Remove absolute positioning */
    margin-top: 20px; /* Space above */
    justify-content: center; /* Center icons */
  }

  .social-icons img { /* Mobile icons */
    width: 16px; /* Tiny mobile size */
    height: 16px; /* Tiny mobile size */
  }
}