:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #ff5300;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;

  --bs-primary: #ff5300;
  --bs-secondary: #85b7a8;
  --bs-success: #a1c181;
  --bs-info: #233d4d;
  --bs-warning: #f58345;
  --bs-danger: #eb2846;
  --bs-light: #f4f5f5;
  --bs-dark: #1c2625;
  
  --bs-primary-rgb: 255, 80, 0;
  --bs-secondary-rgb: 150, 180, 170;
  --bs-success-rgb: 161, 193, 129;
  --bs-info-rgb: 35, 61, 77;
  --bs-warning-rgb: 245, 131, 69;
  --bs-danger-rgb: 235, 40, 70;
  --bs-light-rgb: 244, 245, 245;
  --bs-dark-rgb: 28, 38, 37;
  
  --bs-body-color: #182322;
  --bs-body-bg: #ffffff;
  --bs-body-color-rgb: 53, 65, 64;
  --bs-body-bg-rgb: 255, 255, 255;
  
  --bs-font-sans-serif: "Montserrat", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  
  --bs-link-color: #fe7f2d;
  --bs-link-hover-color: #e47228; 
  --bs-border-color: #dee2e6;
}

/* Bootstrap Component Overrides to force usage of variables */

/* Background Utilities with Opacity Support */
.bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-secondary { background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-success { background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-info { background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-danger { background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-light { background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-dark { background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; }

/* Text Utilities with Opacity Support */
.text-primary { color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important; }
.text-secondary { color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity, 1)) !important; }
.text-success { color: rgba(var(--bs-success-rgb), var(--bs-text-opacity, 1)) !important; }
.text-info { color: rgba(var(--bs-info-rgb), var(--bs-text-opacity, 1)) !important; }
.text-warning { color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity, 1)) !important; }
.text-danger { color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity, 1)) !important; }
.text-light { color: rgba(var(--bs-light-rgb), var(--bs-text-opacity, 1)) !important; }
.text-dark { color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity, 1)) !important; }

/* Buttons */
.btn-primary {
  --bs-btn-bg: #ff5300;
  --bs-btn-border-color: #ff5300;
  --bs-btn-hover-bg: #b93c00;
  --bs-btn-hover-border-color: #b93c00;
  --bs-btn-active-bg: #e47228;
  --bs-btn-active-border-color: #e47228;
  --bs-btn-disabled-bg: #ff5300;
  --bs-btn-disabled-border-color: #ff5300;
}

.btn-secondary {
  --bs-btn-bg: #85b7a8;
  --bs-btn-border-color: #85b7a8;
  --bs-btn-hover-bg: #578b7c;
  --bs-btn-hover-border-color: #578b7c;
  --bs-btn-active-bg: #578b7c;
  --bs-btn-active-border-color: #578b7c;
}

.btn-success {
  --bs-btn-bg: #a1c181;
  --bs-btn-border-color: #a1c181;
  --bs-btn-hover-bg: #90ad74;
  --bs-btn-hover-border-color: #90ad74;
}

.btn-danger {
  --bs-btn-bg: #eb2846;
  --bs-btn-border-color: #eb2846;
  --bs-btn-hover-bg: #d3243f;
  --bs-btn-hover-border-color: #d3243f;
}

.btn-warning {
  --bs-btn-bg: #fcca46;
  --bs-btn-border-color: #fcca46;
  --bs-btn-hover-bg: #e2b53f;
  --bs-btn-hover-border-color: #e2b53f;
}

.btn-info {
  --bs-btn-bg: #233d4d;
  --bs-btn-border-color: #233d4d;
  --bs-btn-hover-bg: #1f3645;
  --bs-btn-hover-border-color: #1f3645;
}

/* Outline Buttons */
.btn-outline-primary {
  --bs-btn-color: #fe7f2d;
  --bs-btn-border-color: #fe7f2d;
  --bs-btn-hover-bg: #fe7f2d;
  --bs-btn-active-bg: #fe7f2d;
}

/* List Groups */
.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Form Controls */
.form-control:focus {
  border-color: #fe7f2d;
  box-shadow: 0 0 0 0.25rem rgba(254, 127, 45, 0.25);
}

.form-check-input:checked {
  background-color: #fe7f2d;
  border-color: #fe7f2d;
}

/* Navbar */
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
}
  

.bg-dark .card {background:rgba(0,0,0,.2)}

.bg-dark.hero {background: url("../assets/wave.jpg") no-repeat;background-size: cover}


#main-nav {min-height:120px}
section {min-height:50vh;}
.hero {height:calc(100vh - 120px); max-height:1080px}

section.gallery-hero, section.about-hero {height: auto; min-height:30vh; }

  /* Gallery thumbnails */
    .case-study-thumb {
      cursor: pointer;
      overflow: hidden;
      border-radius: .375rem;
      display: block;
      line-height: 0; /* removes gap below inline img */
    }
    .case-study-thumb img { display: block; width: 100%; transition: transform .2s ease; aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;}
    .case-study-thumb:hover img { transform: scale(1.03); }

    /* Lightbox overlay */
    #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0,0,0,.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 1rem;
      padding: 1.5rem;
    }
    #lightbox.active { display: flex; }

    /* Image wrapper */
    #lightbox-inner {
      position: relative;
      max-width: 90vw;
      max-height: 82vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .75rem;
    }
    #lightbox-img {
      display: block;
      max-width: 90vw;
      max-height: 72vh;
      width: auto;
      height: auto;
      border-radius: .5rem;
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
      object-fit: contain;
    }

    /* Caption */
    #lightbox-caption {
      text-align: center;
      color: #fff;
      max-width: 700px;
    }
    #lightbox-caption p { margin: 0; line-height: 1.4; }

    /* Prev / Next / Close */
    #lightbox-close,
    #lightbox-prev,
    #lightbox-next {
      position: fixed;
      background: rgba(255,255,255,.12);
      border: none;
      color: #fff;
      font-size: 1.75rem;
      line-height: 1;
      cursor: pointer;
      border-radius: 50%;
      width: 2.75rem;
      height: 2.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s;
    }
    #lightbox-close:hover,
    #lightbox-prev:hover,
    #lightbox-next:hover { background: rgba(255,255,255,.28); }

    #lightbox-close { top: 1rem; right: 1rem; font-size: 1.5rem; }
    #lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
    #lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

    #lightbox-prev:disabled,
    #lightbox-next:disabled { opacity: .25; cursor: default; }

    /* Thumbnail strip */
    #lightbox-strip {
      display: flex;
      gap: .4rem;
      flex-wrap: nowrap;
      overflow-x: auto;
      max-width: 90vw;
      padding-bottom: .25rem;
    }
    #lightbox-strip img {
      height: 52px;
      width: auto;
      border-radius: .25rem;
      opacity: .5;
      cursor: pointer;
      transition: opacity .15s;
      border: 2px solid transparent;
    }
    #lightbox-strip img.active,
    #lightbox-strip img:hover { opacity: 1; border-color: #fff; }