/* ===========================
   Global Sustainable Energy
   Brand System: Imperial Forest
   =========================== */

/* Google Fonts (optional but recommended) */
/* If you prefer linking fonts in HTML instead, you can remove these @import lines. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Montserrat:wght@300;400;500&display=swap');

/* Brand variables */
:root{
  --imperial-green: #013220; /* primary */
  --forest-green: #228B22;   /* accent */
  --off-white: #F8F9F9;      /* background */
  --text: #111827;           /* main text */
  --muted: #4B5563;          /* paragraph text */
}

/* Base */
html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body{
  background-color: var(--off-white);
  color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Body copy */
p, .lead, li, .text-muted{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--muted);
  line-height: 1.75;
}

p.lead{
  font-size: 1.05rem;
  font-weight: 300;
  color: #374151; /* elegant grey */
}

/* Headings */
h1, h2, h3, .navbar-brand{
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  color: var(--imperial-green);
  letter-spacing: 0.03em;
}

/* Utility overrides (keep Bootstrap classes working) */
.text-success{ color: var(--imperial-green) !important; }
.border-success{ border-color: var(--forest-green) !important; }

/* ===========================
   Navbar
   =========================== */
header{
  background: rgba(248, 249, 249, 0.92) !important;
  backdrop-filter: blur(8px);
}

.navbar-custom{
  background-color: transparent;
}

.navbar-brand{
  letter-spacing: 0.07em;
}

.nav-link{
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 500;
  color: var(--imperial-green) !important;
}

/* Dropdown behavior (safe even if dropdowns are disabled) */
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
  background-color: var(--imperial-green);
}
.dropdown-toggle::after {
  display: none;
}

/* ===========================
   Hero / Carousel
   =========================== */
.hero-section {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

/* Light overlay ONLY (does not darken the images too much) */
.overlay-text {
  position: absolute;
  inset: 0;
  z-index: 2;

  /* premium readability overlay */
  background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.05)
  );
}

/* Title: solid imperial green + soft halo (no ugly box) */
.hero-title{
  color: var(--imperial-green) !important;
  letter-spacing: 0.06em;

  /* remove strokes/outlines to avoid dirty edges */
  -webkit-text-stroke: 0 !important;

  /* premium readable glow */
  text-shadow:
    0 0 8px rgba(248,249,249,0.40),
    0 2px 14px rgba(0,0,0,0.35);
}

/* Subtitle: crisp, clean, not “dirty” */
.hero-subtitle{
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(248,249,249,0.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.30);
  margin-top: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Make carousel fill the hero */
.carousel,
.carousel-inner,
.carousel-item,
.carousel-item img {
  height: 100%;
  width: 100%;
}

.carousel-item img{
  object-fit: cover;
}

/* Legacy wrapper (safe to keep) */
.carousel-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: white;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ===========================
   Capability cards
   =========================== */
.bg-light.rounded-3{
  background: #ffffff !important;
  border-color: rgba(1, 50, 32, 0.12) !important;

  display: flex;
  align-items: flex-start; /* aligns content to top */

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bg-light.rounded-3:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(1, 50, 32, 0.08);
}

.border-start.border-success{
  border-left-color: var(--forest-green) !important;
}

/* Ensure card text uses Montserrat */
section .bg-light.rounded-3,
section .bg-light.rounded-3 *{
  font-family: "Montserrat", Arial, sans-serif !important;
  color: var(--text);
}

/* ===========================
   Misc sections
   =========================== */
.contact-info-section {
  background-color: var(--off-white);
}

.zone-img img {
  height: 100%;
  object-fit: cover;
}

/* Contact page hero height only */
.contact-hero {
  height: 65vh;        /* smaller hero */
  min-height: 400px;   /* keeps it from shrinking too much */
}

.hero-watermark{
  position: absolute;
  width: 600px;
  opacity: 0.90; /* very subtle */
  z-index: 1;

  /* Center behind text */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);

  pointer-events: none; /* not clickable */
}


/* Badge container (the “bubble”) */
.brand-badge{
  display: inline-block;
  padding: 18px 28px 16px;
  border-radius: 26px;
  background: rgba(248,249,249,0.80);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  text-align: center;
}

/* Main title */
.brand-title{
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  color: #013220;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0.06em;
  line-height: 1.05;
}

/* Thin divider line */
.brand-divider{
  height: 2px;
  width: 78%;
  margin: 10px auto 10px;
  background: rgba(1,50,32,0.65);
  border-radius: 999px;
}

/* Subtitle */
.brand-subtitle{
  font-family: "Montserrat", Arial, sans-serif;
  color: rgba(1,50,32,0.80);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(12px, 1.3vw, 16px);
}

.brand-subtitle .sep{
  opacity: 0.7;
}

/* Position the badge under the fixed navbar */
.hero-section .overlay-text{
  position: absolute;
  inset: 0;
  z-index: 5;
  padding-top: 120px;        /* adjust if needed */
  background: none !important;
}

/* Bubble badge */
.brand-badge{
  display: inline-block;
  padding: 18px 34px 16px;
  border-radius: 26px;
  background: rgba(248,249,249,0.85);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  text-align: center;
  max-width: min(1100px, 92vw);
}

/* Title */
.brand-title{
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  color: #013220;
  font-size: clamp(34px, 4.6vw, 68px);
  letter-spacing: 0.03em;
  line-height: 1.05;
  font-weight: 500;
}

/* Divider */
.brand-divider{
  height: 2px;
  width: 78%;
  margin: 10px auto;
  background: rgba(1,50,32,0.65);
  border-radius: 999px;
}

/* Subtitle */
.brand-subtitle{
  font-family: "Montserrat", Arial, sans-serif;
  color: rgba(1,50,32,0.75);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(12px, 1.2vw, 16px);
}
.brand-subtitle .sep{ opacity: 0.7; }