/* FAQ link style: bold, orange, no underline, orange brand on hover */
.faq-link {
  color: #003c34;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}
.faq-link:hover, .faq-link:focus {
  color: #f6630c;
  text-decoration: none;
}
/* Timeline year sliding animation */
.timeline-year.slide-nav-left {
  animation: slideNavLeft 0.4s cubic-bezier(.4,.8,.4,1);
}
.timeline-year.slide-nav-right {
  animation: slideNavRight 0.4s cubic-bezier(.4,.8,.4,1);
}
@keyframes slideNavLeft {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(40px); opacity: 0.7; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes slideNavRight {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(-40px); opacity: 0.7; }
  100% { transform: translateX(0); opacity: 1; }
}





  
  
  
  
  
  





#instructor-modal {
  
  scrollbar-width: thin;
  scrollbar-color: #f6630c rgba(0,60,52,0.08);
}
#instructor-modal::-webkit-scrollbar {
  width: 10px;
  background: rgba(0,60,52,0.08);
  border-radius: 6px;
}
#instructor-modal::-webkit-scrollbar-thumb {
  background: #f6630c;
  border-radius: 6px;
  border: 2px solid rgba(0,60,52,0.08);
}
#instructor-modal::-webkit-scrollbar-thumb:hover {
  background: #d45509;
}
#instructor-modal .modal-body #instructor-modal-summary,
#instructor-modal .modal-body #instructor-modal-competencies {
  font-size: 1rem !important;
}

@media (max-width: 600px) {
  #instructor-modal .modal-body #instructor-modal-summary,
  #instructor-modal .modal-body #instructor-modal-competencies {
    font-size: 1rem !important;
  }
}

/* Force mobile intro-text font size at the end for highest specificity */

@media (max-width: 600px) {
  .light,
  .text-light,
  .light-text {
    font-size: 1rem !important;
  }

  
}
@media (min-width: 900px) {
    #amenities-modal .modal-text-content {
      align-items: flex-start !important;
    }
  #amenities-modal .modal-body p {
    font-size: 1.33rem !important;
  }
  
}
/* Global close button for amenities modal */
.modal-close.modal-close-global {
  position: fixed;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 100000;
  background: transparent;
  color: #bbb;
  border: none;
  font-size: 2.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  border-radius: 0;
  width: auto;
  height: auto;
  display: block;
  padding: 0;
  transition: color 0.2s;
}
.modal-close.modal-close-global:hover {
  color: #f6630c;
}
/* Redesigned amenities modal layout */
@media (min-width: 900px) {
  #amenities-modal .modal-panel {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    
    box-sizing: border-box;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  #amenities-modal .modal-flex-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-height: 400px;
  }
  #amenities-modal .modal-image-square {
    width: 100%;
    max-width: calc(100vw - 48px);
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #amenities-modal .modal-image-square img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    display: block;
    box-shadow: none;
    margin: 0;
  }
  #amenities-modal .modal-text-content {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0;
    margin: 0;
    overflow-y: auto;
  }
  #amenities-modal .modal-text-content h3 {
    margin-top: 0;
    padding-top: 0.5rem;
    /* text-align removed to avoid conflict */
  }
  #amenities-modal .modal-text-content p {
    text-align: left !important;
  }
}
@media (max-width: 700px) {
  .mv-slider-dot {
    width: 2px !important;
    height: 2px !important;
  
  }
  .privacy-policy li {
    font-size: 1rem !important;
  }
}
@media (max-width: 700px) {
  .mv-slider {
    padding-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  .mv-slider {
    padding-bottom: 2rem;
  }
}
.mv-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.mv-slider-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e0e0e0;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  outline: none;
}
.mv-slider-dot.active {
  background: #f6630c;
  box-shadow: none;
}
/* Ensure course modal title uses correct font and weight */
#course-modal-title {
  font-family: 'Certo Sans', Arial, sans-serif !important;
  font-weight: 500 !important;
  color: #003c34 !important;
}
.interactive-stats .stat-number .value,
.interactive-stats .stat-number .unit {
  font-weight: 400 !important;
}
.site-nav .nav-list > .nav-item > .nav-link {
  font-weight: 500 !important;
}
/* Header navbar items: bold, dropdown items: medium */
.site-nav .dropdown-menu a {
  font-weight: 350 !important;
}
/* Emphasize intro text on courses page */
.intro-text {
  font-weight: 400 !important;
}
body, html, * {
  font-family: 'Certo Sans', Arial, sans-serif !important;
}
@media (max-width: 700px) {
  #course-overview-table th,
  .data-table th {
    color: #003c34 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: transparent !important;
  }
}
@media (max-width: 700px) {
  .course-title {
    color: #003c34 !important;
    font-weight: 500 !important;
  }
}
/* Brand green for Meet Our Team category headings */
.team-section > h2 {
  color: #003c34 !important;
  font-weight: 500 !important;
}
/* Desktop: Make search bar clear (X) button twice as large */
@media (min-width: 701px) {
  .search-clear-btn {
    font-size: 5rem !important;
    width: 5rem !important;
    height: 5rem !important;
    right: 0.2rem;
  }
  .course-search-input {
    font-size: 1.5rem;
    padding-right: 5.5rem;
    border-radius: 0 !important;
  }
}
@media (max-width: 700px) {
  .modal-close, .icon-close, .fa-times, .close-icon {
    font-size: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 2.5rem !important;
  }
}
@media (max-width: 600px) {
  #mission-slide .mv-image,
  #mission-slide .mv-image img {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }
}
@media (max-width: 600px) {
  #mission-slide .mv-image {
    display: none !important;
  }
}
@media (max-width: 600px) {
  #mission-slide .mv-image img {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .mv-slider .mv-image img {
    display: none !important;
  }
}
#mission-slide .mv-slide-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#mission-slide .mv-text {
  flex: 1 1 0;
  margin-right: 2rem;
}
#mission-slide .mv-image {
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
#mission-slide .mv-image img {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
#mission-slide .mv-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-facility .image-hero.color-2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 60, 52, 0.55); /* lighter brand green overlay */
  z-index: 0;
  pointer-events: none;
}

.our-facility .image-hero.color-2 {
  position: relative;
  overflow: hidden;
}
/* Feature panel bullet list and CTA styles */
.panel-list {
  margin: 1rem 0 0.5rem 2rem;
  padding: 0;
  color: #264a46;
  font-size: 1.04rem;
  line-height: 1.6;
  list-style-position: outside;
}
.panel-list li {
  margin-bottom: 0.35em;
  list-style: disc;
  padding-left: 0.5rem;
}

/* Facility page: ensure panel lists are left-aligned despite parent centering
   (the values overlay uses text-align:center which can accidentally center
   list markers). These rules are intentionally specific and use !important
   so they take precedence over inherited/inline styles. */
.our-facility .feature-panel .panel-list {
  text-align: left !important;
  margin: 0.8rem 0 0.5rem 1.25rem !important;
  padding-left: 1rem !important;
  list-style-position: outside !important;
}

.our-facility .feature-panel .panel-list li {
  text-align: left !important;
  padding-left: 0.45rem !important;
  list-style-position: outside !important;
  display: list-item !important;
}
.feature-panels-cta {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.btn-secondary {
  background: var(--ad-gold);
  color: var(--ad-dark);
  border: none;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  font-size: 1.08rem;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  box-shadow: 0 2px 8px 0 rgba(0,60,52,0.07);
  cursor: pointer;
  display: inline-block;
  min-width: 120px;
  text-align: center;
}

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:focus {
  background: #f6630c;
  color: #fff;
  border: none;
}
/* Header above feature panels */
.feature-panels-header {
  text-align: center;
  margin-bottom: 1.2rem;
}
@media (max-width: 600px) {
  .values-outline{
    gap: 0.45rem; /* compact but normal spacing */
    /* ~50% larger than the previous desktop size to meet the request */
    font-size: clamp(3rem, 4.5vw, 4.8rem);
    letter-spacing: normal;
  }
}

/* Tablet adjustments: apply the same medium modal + internal scrolling
   behavior for tablets (up to 900px). Keep avatar visible and slightly
   smaller than desktop, reduce text slightly to fit more content. */
@media (max-width: 700px) {
  /* Removed duplicate mobile .search-clear-btn rule. Only largest size remains. */
  /* Removed stray properties and fixed misplaced closing braces. All selectors are now valid. */
}
@media (max-width: 600px) {
  .feature-panels-title {
    font-size: 1.25rem;
  padding: 0 0.1rem;
    line-height: 1.3;
  }
  .feature-panels-header {
    margin-bottom: 1rem;
  }
  .feature-panels-row {
    margin: 1.5rem auto 2.5rem;
  }
  .panel-preview img {
    height: 140px;
  }
  .feature-panel {
    padding: 1rem;
  }
  .our-facility .image-hero.color-2 {
    padding: 4rem 0 3rem;
  }
  .values-headline {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  .intro-text {
    font-size: 1rem;
    line-height: 1.5;
  }
}
@media (max-width: 900px) {
/* Hamburger Curtain Dropdown Menu Styles */
@media (max-width: 900px) {
  .curtain-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100vw;
    height: 0;
    background: #003c34;
    color: #fff;
    z-index: 9999;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(.2,.9,.25,1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  }
  .curtain-nav[aria-hidden="false"] {
    height: 100vh;
  }
  .curtain-nav-inner {
    padding: 2.2rem 1.2rem 1.2rem 1.2rem;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .curtain-nav-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.18s;
  }
  .curtain-nav-close:hover {
    color: #f6630c;
  }
  .curtain-nav-list {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
  }
  .curtain-nav-list > li > a {
    display: block;
    color: #fff;
    font-family: 'Certo Sans', Arial, sans-serif;
    font-size: 1.18rem;
    font-weight: 500;
    padding: 0.9rem 0.8rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.18s, color 0.18s;
  }
  .curtain-nav-list > li > a:hover {
    color: #f6630c;
    background: #fff1e6;
  }
  .curtain-section-toggle {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 600;
    text-align: left;
    padding: 0.9rem 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.02em;
    border-radius: 4px;
    transition: background 0.18s, color 0.18s;
  }
  .curtain-section-toggle:focus {
    outline: 2px solid #f6630c;
  }
  .curtain-section-toggle[aria-expanded="true"] {
    background: #0f4c47;
    color: #f6630c;
  }
  .curtain-icon {
    font-size: 1.2em;
    margin-left: 0.5em;
    color: #fff;
    font-weight: 700;
    transition: color 0.18s;
  }
  .curtain-section-toggle[aria-expanded="true"] .curtain-icon {
    color: #f6630c;
  }
  .curtain-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 4px 4px;
  }
  .curtain-submenu li {
    border-bottom: 1px solid #e0e0e0;
  }
  .curtain-submenu li:last-child {
    border-bottom: none;
  }
  .curtain-submenu a {
    display: block;
    color: #003c34;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    padding: 0.7rem 1.2rem;
    background: transparent;
    text-decoration: none;
    transition: color 0.18s, background 0.18s;
    border-radius: 4px;
  }
  .curtain-submenu a.active,
  .curtain-submenu a:focus,
  .curtain-submenu a:hover {
    color: #f6630c;
    background: #eaeaea;
  }
}
  .our-facility .image-hero.color-2 {
    min-height: 420vh;
  }
}
@media (max-width: 600px) {
  .our-facility .image-hero.color-2 {
    min-height: 520vh;
  }
}
@media (max-width: 900px) {
  .our-facility .image-hero.color-2 {
    padding-top: 8rem;
  }
  .feature-panels-row {
    margin-top: 3.5rem;
  }
}
@media (max-width: 600px) {
  .our-facility .image-hero.color-2 {
    padding-top: 10rem;
  }
  .feature-panels-row {
    margin-top: 3.2rem;
  }
  .feature-panel {
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    background: #fff;
  }
}
@media (max-width: 900px) {
  .our-facility .image-hero.color-2 {
    padding-top: 4.5rem;
  }
  .feature-panels-row {
    margin-top: 2.5rem;
  }
}
@media (max-width: 600px) {
  .our-facility .image-hero.color-2 {
    padding-top: 6.5rem;
  }
  .feature-panels-row {
    margin-top: 2.2rem;
  }
}
@media (max-width: 900px) {
  .our-facility .image-hero.color-2 {
    min-height: 600vh; /* Significantly increased to ensure content fits */
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .feature-panels-row {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .feature-panel {
    min-height: auto; /* Allow panels to grow based on content */
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  .our-facility .section-header:not(.feature-center) {
    padding: 4rem 2rem 3rem 2rem;
  }
  .our-facility .section-header.feature-center {
    padding: 0 2rem 2rem;
  }
  .sticky-notes-container {
    padding: 3rem 0 4rem 0;
    min-height: unset;
  }
}
@media (max-width: 600px) {
  .our-facility .image-hero.color-2 {
    min-height: 800vh; /* Even larger for smaller screens */
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
  .feature-panels-row {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .feature-panel {
    padding: 1.2rem;
    margin-bottom: 1.5rem;
  }
  .our-facility .section-header:not(.feature-center) {
    padding: 3rem 1.5rem 2rem 1.5rem;
  }
  .our-facility .section-header.feature-center {
    padding: 0 1rem 2rem;
  }
  .sticky-notes-container {
    padding: 2rem 0 3rem 0;
  }
}
/* Two side-by-side feature panels above sticky notes */
.feature-panels-row {
  margin: 2.5rem auto 3.5rem;
  max-width: 1200px;
  padding: 0 1rem;
  width: 100%;
}

@media (max-width: 900px) {
  .feature-panels-row {
    margin: 2rem auto;
    padding: 0;
  }
  
  .feature-panels-inner {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }
  
  .feature-panel {
    margin: 0 0 2rem;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }
  
  .feature-panels-cta {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 0 2rem;
    margin-top: 2rem;
  }
  
  .feature-panels-cta .btn {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
  }

  .panel-preview img {
    height: 200px;
    margin-bottom: 1.5rem;
  }

  .panel-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 500 !important;
  }

  .panel-list {
    font-size: 1.1rem;
    margin: 1rem 0 1.5rem 1.5rem;
  }

  .panel-list li {
    margin-bottom: 0.5rem;
  }
}
.feature-panels-inner {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
}
.feature-panel {
  background: #fff;
  color: #003c34;
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  flex: 1 1 400px;
  min-width: 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1.5rem 1.25rem 1.25rem 1.25rem;
  min-height: 480px; /* Fixed height for consistency */
  margin: 0;
  justify-content: flex-start; /* Align content to top */
}

/* Training Overview: make the two portfolio panels edge-to-edge image blocks
   - Use page-scoped selectors so other pages keep the card layout.
   - Panels will sit side-by-side on desktop (50% each) and stack on small screens. */
.training-overview .feature-panels-row {
  max-width: none; /* allow full-bleed */
  padding: 0;
  margin: 0 auto 2rem;
}

.training-overview .feature-panels-inner {
  gap: 0; /* images touch each other */
  justify-content: stretch;
  align-items: stretch;
  max-width: none;
  width: 100%;
  padding: 0;
}

.training-overview .feature-panel.portfolio-large {
  flex: 0 0 50%;
  max-width: none;
  min-height: 85vh; /* make panels taller so images appear larger */
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.training-overview .feature-panel.portfolio-large .panel-preview {
  width: 100%;
  height: 100%;
}

.training-overview .feature-panel.portfolio-large .panel-preview img {
  width: 100%;
  height: auto; /* width-driven sizing to avoid side-cropping */
  max-height: 85vh; /* cap vertical size so images don't exceed viewport */
  object-position: center;
  display: block;
  border-radius: 0;
}

/* On smaller screens stack and reduce height so images fit comfortably */
@media (max-width: 900px) {
  .training-overview .feature-panel.portfolio-large {
    flex: 1 1 100%;
    min-height: auto;
  }
  .training-overview .feature-panel.portfolio-large .panel-preview img {
    height: 48vh;
  }
  .training-overview .feature-panels-inner { gap: 0.5rem; padding: 0 1rem; }
  .training-overview .feature-panels-row { margin: 1.5rem auto; }
}

/* Use the same muted grey background as the mission-vision slider */
.training-overview .feature-panels-row,
.training-overview .feature-panels-inner {
  background: var(--muted);
}

/* Ensure CTA buttons in Training Overview match Our Facility styling
   (override the generic .content-panel .btn rule which would make them
    dark green). Scoped to avoid affecting other pages. */
.training-overview .feature-panels-cta .btn {
  background: var(--ad-gold);
  color: var(--ad-dark);
  border: none;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  font-size: 1.08rem;
  text-decoration: none;
  display: inline-block;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 2px 8px 0 rgba(0,60,52,0.07);
}

.training-overview .feature-panels-cta .btn:hover,
.training-overview .feature-panels-cta .btn:focus {
  background: #f6630c;
  color: #fff;
}

@media (max-width: 900px) {
  .training-overview .feature-panels-cta .btn { width: 100%; max-width: 100%; padding: 1rem; }
}

/* Make the full area beneath the hero use the muted grey so the panels sit
   on the same grey background as the mission-vision slider. This targets the
   whole main content area for the Training Overview page. */
.training-overview main {
  background: var(--muted);
}

/* Give the inner content some vertical breathing room while keeping the
   image panels tall and edge-to-edge. */
.training-overview .content-panel {
  background: transparent; /* panels area remains transparent so images show */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
 }

/* Use brand green for the Overview heading on this page */
.training-overview .values-headline {
  color: var(--heading) !important; /* var(--heading) is the brand green (#003c34) */
}

/* Make the feature panels escape the centered container and expand almost
   to the viewport edges (full-bleed). Keep a small horizontal gutter so
   the images don't touch the absolute viewport edge. */
.training-overview .feature-panels-row {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 2rem;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}

.training-overview .feature-panels-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* tighten gaps so panels sit close to each other */
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
    max-width: 2000px;
}

.training-overview .feature-panel.portfolio-large {
  flex: 1 1 600px;
  max-width: calc(50% - 0.5rem);
  margin: 0;
  padding: 0;
  position: relative;
}

.training-overview .feature-panel.portfolio-large .panel-preview {
  width: 100%;
  display: block;
  position: relative;
  border-radius: 0; /* remove rounding so edges are sharp */
  box-shadow: none; /* remove raised panel effect so image is primary */
  overflow: hidden;
  background: transparent; /* keep transparent so image shows through */
  padding: 0; /* remove inner padding so the image sits flush to the panel */
}

.training-overview .feature-panel.portfolio-large .panel-preview img {
  width: 200%; /* increased to 2x */
  display: block;
  height: auto;
  max-height: 85vh;
  object-fit: contain; /* fit the whole image inside the container (no side-cropping) */
  transition: transform 0.3s ease;
  transform: translateX(-25%); /* center the enlarged image (shifted left by quarter since it's 2x size) */
}

/* Course Overview Cards */
.course-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
  padding: 0;
}

/* Two-column grid for learning solutions */
.course-overview-grid--two-col {
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
}

.overview-card {
  background: #fff;
  border: 2px solid rgba(0,60,52,0.1);
  border-radius: 0;
  padding: 2rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Larger cards for two-column layout */
.overview-card--large {
  padding: 2.5rem;
}

.overview-card:hover {
  border-color: #f6630c;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Learning Solutions Section Styles */
.learning-solutions-section {
  background: #003c34;
  padding: 3rem 0;
  width: 100%;
  margin: 0;
}

.learning-solutions-section .overview-card {
  box-shadow: none;
}

.learning-solutions-section .overview-card:hover {
  box-shadow: none;
}

.learning-solutions-title {
  color: #f6630c;
}

.learning-solutions-section .learning-solutions-intro {
  color: #ffffff !important;
}

.overview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f6630c;
}

.overview-card-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #003c34;
  margin: 0;
  flex: 1;
  line-height: 1.3;
}

.course-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f6630c;
  background: transparent;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.overview-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #003c34;
  margin: 0;
}

.overview-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.overview-highlights li {
  font-size: 1.05rem;
  color: rgba(0,60,52,0.8);
  padding-left: 1.5rem;
  position: relative;
}

.overview-highlights li::before {
  content: "•";
  color: #f6630c;
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: 0.5rem;
  top: -0.1rem;
}

@media (max-width: 768px) {
  .course-overview-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
  }
  
  .course-overview-grid--two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .overview-card {
    padding: 1.5rem;
  }
  
  .overview-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .intro-text {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
    color: #003c34 !important;
    font-weight: 400 !important;
  }
  .training-overview .feature-panels-inner {
    gap: 1.5rem;
  }
  
  .training-overview .feature-panel.portfolio-large .panel-preview img {
    max-height: 70vh;
  }
}

@media (max-width: 900px) {
  .training-overview .feature-panels-row {
    padding: 0 1rem;
  }
  
  .training-overview .feature-panels-inner {
    gap: 1.25rem;
  }

  .training-overview .feature-panel.portfolio-large {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .training-overview .feature-panel.portfolio-large .panel-preview img {
    max-height: 60vh;
  }
}

@media (max-width: 600px) {
  .training-overview .feature-panels-row {
    padding: 0 0.75rem;
  }

  .training-overview .feature-panels-inner {
    gap: 1rem;
  }

  .training-overview .feature-panel.portfolio-large .panel-preview img {
    max-height: 50vh;
  }
}
.panel-preview img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 1.1rem;
  display: block;
}
.panel-title {
  margin: 0 0 .6rem;
  font-size: 1.22rem;
  color: #003c34;
  font-weight: 700;
}

/* Facility: make panel titles use the brand orange sent by the user */
.our-facility .panel-title {
  color: #f6630c !important;
}
.panel-desc {
  margin: 0 0 1.1rem;
  color: #264a46;
  font-size: 1.04rem;
}
.panel-info {
  flex: 1 0 auto; /* Allow info section to grow but not shrink */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feature-panels-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  width: 100%; /* Full width */
}

.feature-panels-cta .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  max-width: 200px; /* Limit maximum button width */
  text-align: center;
}
@media (max-width: 900px) {
  .feature-panels-inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .feature-panel {
    margin: 0 auto 1.5rem;
    width: 100%;
    min-height: auto;
    padding: 1.25rem 1rem;
  }
  .feature-panel:last-child {
    margin-bottom: 0;
  }
  .panel-preview img {
    height: 160px;
    margin-bottom: 1rem;
  }
  .panel-title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
  }
  .panel-list {
    font-size: 1rem;
    margin: 0.75rem 0 0.5rem 1.75rem;
  }
  .panel-list li {
    margin-bottom: 0.25em;
  }
  .feature-panels-cta {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0 1rem;
  }
  .feature-panels-cta .btn {
    width: 100%;
    margin: 0;
  }
  .feature-panels-header {
    padding: 0 1rem;
  }
  .our-facility .image-hero.color-2 {
    padding: 6rem 0 4rem;
    min-height: auto;
  }
}
/* (Removed duplicate/stray .feature-panel and .panel-preview img outside media query) */
/* Page load animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to key text elements (exclude modal content) */
h1, h2, h3, p, .hero-contact, .hero-contact-subtitle {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

/* Exclude modal content from page load animations */
.modal h1,
.modal h2,
.modal h3,
.modal p,
.modal-panel h1,
.modal-panel h2,
.modal-panel h3,
.modal-panel p,
.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body p,
.modal-body h4,
.modal-body li {
  animation: none !important;
  opacity: 1 !important;
  animation-delay: 0s !important;
}

/* Stagger animation timing for different elements */
h1 { animation-delay: 0.2s; }
.hero-contact { animation-delay: 0.3s; }
.hero-contact-subtitle { animation-delay: 0.4s; }
h2 { animation-delay: 0.5s; }
p { animation-delay: 0.7s; }

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  h1, h2, h3, p, .hero-contact, .hero-contact-subtitle {
    animation: none;
    opacity: 1;
  }
}

/* Make icons white by default in contact panel */
.contact-socials .social-icon {
  filter: brightness(0) invert(1) !important;
}

/* Turn orange only while hovering */
.contact-socials .social-link:hover .social-icon {
  filter: invert(54%) sepia(94%) saturate(749%) hue-rotate(-13deg) brightness(101%) contrast(101%) !important;
}

/* Keep white for all other states including visited and active */
.contact-socials .social-link:visited .social-icon,
.contact-socials .social-link:active .social-icon,
.contact-socials .social-link:focus .social-icon {
  filter: brightness(0) invert(1) !important;
}

/* Remove tap highlight */
.contact-socials .social-link {
  -webkit-tap-highlight-color: transparent;
}
.contact-form .btn-primary {
  transition: all 0.3s cubic-bezier(.2,.8,.2,1);
}

.contact-form .btn-primary:hover,
.contact-form .btn-primary:focus {
  background: #f6630c;
  color: #fff;
  border-color: #f6630c;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(246,99,12,0.2);
}

.contact-form .btn-primary:active {
  background: #f6630c;
  color: #fff;
  border-color: #f6630c;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(246,99,12,0.2);
  transition: all 0.1s cubic-bezier(.4,0,.2,1);
}
#instructor-modal #instructor-modal-title,
#instructor-modal #instructor-modal-titleline {
  /* Align exactly with modal body content */
  padding-left: 0;
  padding-right: 0;
}

/* Instructor modal: ensure all text uses the brand dark green so content
   is consistent across modal panels (headings, body text, lists, links). */
#instructor-modal .modal-panel,
#instructor-modal .modal-panel h1,
#instructor-modal .modal-panel h2,
#instructor-modal .modal-panel h3,
#instructor-modal .modal-panel p,
#instructor-modal .modal-panel li,
#instructor-modal .modal-panel .modal-body,
#instructor-modal .modal-panel a,
#instructor-modal .modal-panel a[href^="mailto:"] {
  color: #003c34 !important;
  -webkit-font-smoothing: antialiased;
}

/* Keep mailto hover accent as orange for affordance */
#instructor-modal .modal-panel a[href^="mailto:"]:hover {
  color: #f6630c !important;
}

/* Modern data table for training overview */
.training-overview .data-table-controls { 
  display: flex; 
  gap: 0.75rem; 
  align-items: center; 
  margin: 0.5rem 0 1rem; 
}
.training-overview .data-table-wrapper { 
  background: #fff; 
  border: 1px solid rgba(0,60,52,0.12); 
  border-radius: 0; 
  overflow: hidden; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); 
}
.training-overview .data-table { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  font-size: 0.975rem; 
}
.training-overview .data-table thead th { 
  position: sticky; 
  top: 0; 
  background: #fafafa; 
  color: #003c34; 
  text-align: left; 
  font-weight: 600; 
  padding: 0.85rem 1rem; 
  border-bottom: 1px solid rgba(0,60,52,0.12); 
  cursor: pointer; 
}
.training-overview .data-table tbody td { 
  padding: 0.75rem 1rem; 
  border-bottom: 1px solid rgba(0,60,52,0.08); 
  text-align: left; 
}
.training-overview .data-table tbody td, 
.training-overview .data-table tbody td .course-name { 
  color: #003c34; 
}
.training-overview .data-table tbody td[data-label="Accreditation"],
.training-overview .data-table tbody td[data-label="Accreditation"] .badge { 
  color: #f6630c; 
  font-weight: 600; 
}
/* Make the intro text on training overview brand green */
.training-overview .feature-panels-header .intro-text {
  color: #003c34;
}
.training-overview .feature-panels-header { text-align: left; }
/* Ensure training overview intro text aligns left when using redesigned-section */
.training-overview .redesigned-section .intro-text { text-align: left; }
.training-overview .data-table tbody tr { 
  transition: background-color 0.2s ease; 
}
.training-overview .data-table tbody tr:hover { 
  background: #fff7f2; 
}
.training-overview .data-table tbody tr:active { 
  background: #ffe9dc; 
}
.training-overview .data-table tbody tr:last-child td { 
  border-bottom: none; 
}
.training-overview .data-table .cell-title .course-name { 
  font-weight: 600; 
  color: #003c34; 
}
.training-overview .badge { 
  display: inline; 
  padding: 0; 
  background: none; 
  color: #003c34; 
  font-weight: 500; 
  font-size: 0.9rem; 
}
.training-overview .badge-neutral { 
  background: none; 
  color: #003c34; 
}
.training-overview .badge-muted { 
  background: none; 
  color: rgba(2,10,20,0.5); 
}
.visually-hidden { 
  position: absolute !important; 
  width: 1px; height: 1px; 
  padding: 0; margin: -1px; 
  overflow: hidden; clip: rect(0,0,0,0); 
  white-space: nowrap; border: 0; 
}

@media (max-width: 640px) {
  .training-overview .data-table thead { display: none; }
  .training-overview .data-table, 
  .training-overview .data-table tbody { 
    display: block; 
    width: 100%; 
  }
  
  /* Make each row a card */
  .training-overview .data-table tr { 
    display: block; 
    width: 100%; 
    background: #fff;
    border: 1px solid rgba(0,60,52,0.12);
    border-radius: 0;
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  
  .training-overview .data-table tbody tr:last-child {
    margin-bottom: 0;
  }
  
  .training-overview .data-table td { 
    display: block; 
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,60,52,0.08);
  }
  
  .training-overview .data-table td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .training-overview .data-table td:first-child {
    padding-top: 0;
  }
  
  /* Label styling */
  .training-overview .data-table tbody td::before { 
    content: attr(data-label); 
    display: block; 
    font-weight: 700; 
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0,60,52,0.5); 
    margin-bottom: 0.5rem; 
  }
  
  .training-overview .data-table tbody td:first-child::before { content: 'Course'; }
  .training-overview .data-table tbody td:nth-child(2)::before { content: 'Duration'; }
  .training-overview .data-table tbody td:nth-child(3)::before { content: 'Accreditation'; }
  
  /* Course name styling */
  .training-overview .data-table tbody td:first-child {
    font-weight: 600;
    font-size: 1.05rem;
    color: #003c34;
  }
  
  /* Wrapper adjustment */
  .training-overview .data-table-wrapper {
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
}

/* Disclaimer page: make mailto links appear as normal text (no underline)
   and only show the brand orange on hover/focus. Scoped to .disclaimer so
   other mailto styles (e.g., instructor modal) are unaffected. */
.disclaimer .content-panel a[href^="mailto:"] {
  color: var(--text);
  text-decoration: none;
  font-weight: 300;
}
.disclaimer .content-panel a[href^="mailto:"]:visited {
  color: var(--text);
}
.disclaimer .content-panel a[href^="mailto:"]:hover,
.disclaimer .content-panel a[href^="mailto:"]:focus {
  color: #f6630c;
  text-decoration: none;
  outline: none;
}

#instructor-modal #instructor-modal-body {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
/* Arabian Drilling color scheme and layout */
:root{
  --ad-navy: #052A49;
  --ad-dark: #01233B;
  --ad-gold: #FFB400;
  --ad-teal: #00A99D;
  --bg-surface: #ffffff;
  --muted: #F4F7FA;
  /* preserve original text colors for card contexts */
  --card-text: #07263A;
  --card-heading: rgba(2,10,20,0.85);
  /* global text/heading color — restored to prior brand colors */
  --heading: #003c34; /* restored: brand dark green for headings */
  --text: #2f4b57; /* restored: muted slate for body text */
  /* lighter body text for normal paragraphs */
  --text-muted: rgba(47,75,87,0.72);
  /* Increased max width to provide more horizontal room for content */
  --max-w: 1300px;
  /* Global container padding */
  --container-padding: 1rem;
  
  /* Header height variables for consistent sizing */
  --header-height-base: 90px;     /* Default expanded header height */
  --header-height-scrolled: 64px;  /* Height when header is scrolled/compact */
  --header-height: var(--header-height-base); /* Current header height */

  /* Hero section sizing variables */
  --hero-min: 420px;   /* Minimum hero height */
  --hero-vh: 68vh;     /* Viewport-relative hero height */
  --hero-max: 920px;   /* Maximum hero height */
}

/* Header spacer styling */
#header-spacer {
  height: var(--header-height);
  display: block;
  content: '';
  width: 100%;
}

/* Hero section height calculations including header */
.image-hero {
  min-height: calc(var(--hero-min) + var(--header-height)) !important;
  height: calc(var(--hero-vh) + var(--header-height)) !important;
  max-height: calc(var(--hero-max) + var(--header-height)) !important;
}

/* Responsive header heights */
@media (max-width: 900px) {
  :root {
    --header-height-base: 80px;
    --header-height-scrolled: 56px;
  }
}

@media (max-width: 420px) {
  :root {
    --header-height-base: 70px;
    --header-height-scrolled: 48px;
  }
}
/* Responsive helpers & utilities (mobile-first)
   - Small, non-destructive helper utilities to use across pages.
   - Mobile-first approach: base rules target small screens; media queries
     override upwards when needed. Add more utilities here as needed. */
:root {
  /* Breakpoint variables (use in media queries) */
  --bp-xs: 420px;   /* very small phones */
  --bp-sm: 720px;   /* large phones / small tablets */
  --bp-md: 900px;   /* tablets and small laptops */
  --bp-lg: 1200px;  /* desktop */
}

/* Utility: make images and media fluid and responsive */
.img-responsive, img, .fluid-media img, .fluid-media video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility: fixed-aspect media containers that preserve cover behavior */
.fluid-media {
  width: 100%;
  overflow: hidden;
}
.fluid-media--16x9 { aspect-ratio: 16 / 9; }
.fluid-media--4x3  { aspect-ratio: 4 / 3; }

/* Utility: text truncation (single line) */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Screen-reader only (accessible) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Utility: stack children vertically on small screens */
.stack-on-mobile { display: flex; gap: 0.6rem; flex-direction: column; }
@media (min-width: var(--bp-sm)) { .stack-on-mobile { flex-direction: row; } }

/* Modal helper: centers and constrains modal panels (complementary to page modals) */
.modal-center {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 11000;
}
.modal-panel--constrain { width: min(920px, calc(100% - 2rem)); max-height: calc(100vh - 3rem); overflow: auto; }

/* Utility: prevent horizontal overflow on containers */
.no-h-scroll { overflow-x: hidden !important; }

/* Small helper: limit width to comfortable measure */
.measure { max-width: 72ch; }
/* Instructor modal/styles removed (page reset). */
/* Loader styles */
.site-loader{display:none !important;visibility:hidden !important;}
.site-loader-inner{display:none !important}
.loader-bars span{animation:none !important}
/* remove loader keyframes to avoid animation */
@keyframes loader-bounce{from{height:8px}to{height:8px}}

*{box-sizing:border-box}
/*
  AF Diwa Bold: If you have the font file(s), place them in `src/fonts/` with names like:
    - AFDiwa-Bold.woff2 (recommended)
    - AFDiwa-Bold.woff
  If you can't or don't want to upload the files, the site will fall back to Montserrat.
*/
/* Import Certo Sans fonts */
@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Light.woff2') format('woff2'),
       url('../fonts/CertoSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Regular.woff2') format('woff2'),
       url('../fonts/CertoSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Bold.woff2') format('woff2'),
       url('../fonts/CertoSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Certo Sans';
  src: url('../fonts/CertoSans-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html,body{
  height:100%;
  margin:0;
  font-family:'Certo Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300; /* Set light weight as default */
  color:var(--text);
  background:var(--bg-surface);
  -webkit-font-smoothing:antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Ensure all normal paragraph text is slightly lighter than headings. Card
  contexts override colors via their own rules, so component paragraphs
  that require higher contrast can still set their own colors. */
p { color: var(--text-muted); }

/* Intro paragraph styling - used across all pages */
.intro-text {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  color: var(--text);
  font-family: 'Certo Sans', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Make second intro text paragraphs lighter */
.intro-text + .intro-text {
  opacity: 0.7;
  font-weight: 200;  /* Make font thinner than the default 300 */
}

/* Light text style for legal content */
.light-text {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  color: var(--text);
  font-family: 'Certo Sans', sans-serif;
  font-weight: 200;
  opacity: 0.7;
  -webkit-font-smoothing: antialiased;
}

/* Privacy policy: mailto links and social lists styling */
.privacy-policy .content-panel a[href^="mailto:"] {
  color: inherit; /* same color as surrounding text */
  text-decoration: none;
  font-weight: 200;
}
.privacy-policy .content-panel a[href^="mailto:"]:hover,
.privacy-policy .content-panel a[href^="mailto:"]:focus {
  color: #f6630c; /* brand orange on hover */
  text-decoration: none;
  outline: none;
}

/* Make lists in privacy policy match the rest of the content */
.privacy-policy .content-panel ul {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}
.privacy-policy .content-panel ul li {
  list-style: disc;
  margin-bottom: 0.6rem;
  font-family: 'Certo Sans', sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 200;
}

/* Social links: default as content color, orange on hover */
.privacy-policy .content-panel ul.socials li a {
  color: inherit;
  text-decoration: none;
  font-weight: 200;
}
.privacy-policy .content-panel ul.socials li a:hover,
.privacy-policy .content-panel ul.socials li a:focus {
  color: #f6630c;
  text-decoration: none;
}

/* Add spacing between social list items and ensure label text shares content styling */
.privacy-policy .content-panel ul.socials {
  display: block; /* ensure socials list stacks vertically */
  padding-left: 1.25rem; /* keep standard indent */
}
.privacy-policy .content-panel ul.socials li {
  display: list-item; /* force each item to its own line */
  margin-bottom: 0.9rem; /* add vertical spacing between social items */
  font-family: 'Certo Sans', sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 200;
}
.privacy-policy .content-panel ul.socials li .social-label {
  color: var(--text);
  text-decoration: none;
  font-weight: 200;
  margin-right: 0.5rem; /* small gap before the clickable text */
}

/* Global font settings */
body {
  font-family: 'Certo Sans', sans-serif;
}

/* Light weight for all paragraph content and normal text */
p, 
.card-body, 
.modal-body, 
.footer-links a, 
.contact-field,
.form-row input, 
.form-row textarea,
.course-body, 
.facility-section p,
.footer-desc, 
.copy, 
.small-links a,
.course-description,
.accreditation-description,
.simulator-summary,
.simulator-features li,
.footer-links-list a,
.nav-link,
.intro-text,
.dropdown-menu a {
  font-family: 'Certo Sans', sans-serif;
  font-weight: 300;
}

/* Semi-light weight for all headings and important text */
h1, h2, h3, 
.hero-contact,
.footer-logo,
.brand-main,
.contact-form h1,
.facility-section h2,
.modal-header h3,
.section-header h2,
.accreditation-title,
.simulator-content h2,
.course-title,
.values-headline,
.values-label,
.team-section h2,
.simulator-meta strong,
.hero-contact-subtitle {
  font-family: 'Certo Sans', sans-serif;
  font-weight: 250;
  color: var(--heading);
}

/* Page layout: column flex when .site-fill is present (used on short pages) */
body.site-fill, html.site-fill { display: flex; flex-direction: column; min-height: 100vh; }
body.site-fill main { flex: 1 0 auto; }

.container{max-width:var(--max-w);margin:0 auto;padding:0 1rem}

/* Contact panel layout preserved in later rules (original styles) */

/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
   box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  z-index:99999; /* ensure header stays above full-bleed sections */
  background:#ffffff; /* header set to white */
  color: var(--text);
  transform: translateY(0);
  will-change: transform, box-shadow, background-color;
  transform: translateZ(0);
  transform-origin: top center;
  transition: box-shadow 0.32s cubic-bezier(.22,.9,.3,1), background-color 0.32s cubic-bezier(.22,.9,.3,1), transform 0.32s cubic-bezier(.22,.9,.3,1);
}

/* Two-row header: top utility row and main nav row */
.header-top{padding:0;background:#fff;position:relative}
.header-utility{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;font-size:.85rem}
.header-utility a{color:var(--ad-navy);text-decoration:none;margin-right:1rem;font-weight:700}
.header-utility .util-left a:last-child{margin-right:0}
.header-utility .util-right a.arabic{color:var(--ad-navy);font-weight:700}

/* Position Arabic util so its RIGHT edge aligns to the topline end. */
.header-top .arabic{
  position:absolute;
  /* place the RIGHT edge of the Arabic util at the topline end (start + width)
     by positioning the element's left at that point and shifting it left by
     its own width with translateX(-100%) */
  left: var(--arabic-left, calc(var(--header-topline-start, 180px) + var(--header-topline-width, 420px)));
  top: 50%;
  transform: translate(-100%, -50%);
  white-space:nowrap;
  pointer-events:auto;
  /* add breathing room */
  padding: 0.25rem 0.6rem;
}

.header-main-row{
  /* full-width border removed to avoid overlapping the custom topline ::before
     the visual topline is now drawn by .header-main-row::before which starts
     at the COMPANY link and spans to INSTRUCTORS */
  background:#fff;
}
.header-main-row{position:relative}


.site-nav{justify-content:flex-end}
.nav-list {
  gap: 1.6rem;
  white-space: nowrap;
  display: flex;
  /* Remove center alignment for desktop nav */
  align-items: flex-start;
}
.site-nav a { color: var(--ad-navy); font-weight: 300; letter-spacing: 0.6px; }
.site-nav a.search { color: var(--ad-gold); }
.site-nav a:hover { color: var(--ad-gold); }
.site-nav a.active { color: var(--ad-gold); text-decoration: none; }
.nav-item.has-dropdown { position: relative; }


.site-nav a{color:var(--ad-navy);font-weight:300;letter-spacing:0.6px}
.site-nav a.search{color:var(--ad-gold)}
.site-nav a:hover{color:var(--ad-gold)}
.site-nav a.active{color:var(--ad-gold);text-decoration:none}

/* Dropdown menu styles */
/* Nav item and dropdown styles */
.nav-item.has-dropdown {
  position: relative;
}

/* Wrapper for nav link and dropdown button */
.nav-item-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
}

/* Style both the button and dropdown toggle to look like nav links */
.nav-link.dropdown-trigger {
  background: none;
  border: none;
  padding: 0.4rem 1.2rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
  font-size: inherit;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0.4rem;
  color: inherit;
  cursor: pointer;
  margin-left: -0.6rem;
  margin-top: -2px;
}

/* Show dropdown on hover on desktop or when expanded class is present */
@media (min-width: 721px) {
  .nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.nav-item.has-dropdown.expanded .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #ffffff;
  min-width: 220px;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(2,10,20,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1001;
  padding: 8px 0;
  margin-top: 0;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  transform: rotate(45deg);
  border-radius: 0; /* make the little pointer square */
  box-shadow: -2px -2px 6px rgba(2,10,20,0.05);
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--ad-navy);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  white-space: nowrap;
  position: relative;
}

.dropdown-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: #f6630c;
  transition: width 0.3s ease;
}

/* Make dropdown titles lighter (not bold) to match design request */

.dropdown-menu a:hover {
  background: rgba(246,99,12,0.05);
  color: #f6630c;
  padding-left: 20px;
}

.dropdown-menu a:hover::before {
  width: 12px;
}







/* spacer inserted by JS to preserve document flow when header is fixed */
#header-spacer{display:block;height:0;content:'';width:100%}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  /* Expanded header at page top (desktop): provide noticeable breathing room */
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height:64px; /* larger when expanded */
  transition: padding 0.28s cubic-bezier(.2,.9,.3,1), box-shadow 0.28s cubic-bezier(.22,.9,.3,1), background-color 0.28s cubic-bezier(.22,.9,.3,1), opacity 0.24s cubic-bezier(.22,.9,.3,1);
  will-change: transform, opacity, box-shadow, background-color;
}

/* when scrolled: white nav with subtle shadow */
.site-header.scrolled{
  background:#ffffff;
  color:var(--text);
  box-shadow:0 6px 20px rgba(2,10,20,0.06);
  transform: translateY(0);
}

/* Compact (shrunk) header state when scrolled */
.site-header.scrolled .header-inner{
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  min-height:48px;
}

/* Animation helpers removed: header now toggles .scrolled synchronously.
   Leftover shrink/animating helper classes and keyframes removed to simplify CSS. */

/* FAQ styles */
.faq-grid {
  display: grid;
  /* bunch them up: smaller gap between items */
  gap: 1rem;
  padding: 0.6rem 0;
}

.faq-section {
  background: #ffffff;
  padding: 1rem 0.75rem;
  box-shadow: 
    0 4px 6px -1px rgba(2,10,20,0.06),
    0 2px 4px -1px rgba(2,10,20,0.04);
  border: 1px solid rgba(2,10,20,0.05);
}

.faq-section h2 {
    color: var(--ad-navy);
    margin: 0 0 1.5rem;
    font-family: 'Certo Sans', sans-serif;
    font-weight: 250;
    font-size: 1.5rem;
}

.faq-card {
  /* tighter card spacing and simpler background for compact accordion */
  padding: 1rem 0.9rem;
  margin-bottom: 0.5rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(2,10,20,0.06);
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

/* indicate the card is clickable (except the answer area) */
.faq-card { cursor: pointer; }
.faq-card p { cursor: auto; }

.faq-card:last-child {
    margin-bottom: 0;
}

.faq-card h3 {
  color: #003c34;
  /* keep heading clickable but add 10% more space below */
  margin: 0 0 1.1rem;
  font-size: 1.2em;
  font-weight: 100 !important;
  font-family: 'Certo Sans', sans-serif;
  transition: color 0.18s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* small chevron indicator */
.faq-card h3::after{
  content: '\25BC'; /* down chevron */
  font-size: 0.85rem;
  opacity: 0.8;
  transform: rotate(0deg);
  transition: transform 0.22s ease;
}

.faq-card p {
  color: #003c34 !important;
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 100 !important;
  /* hidden by default for accordion behavior */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  opacity: 0;
}

/* When a card is open, reveal the paragraph */
.faq-card.open p {
  opacity: 1;
  max-height: 640px; /* generous cap for animation */
}

/* rotate chevron when open */
.faq-card.open h3::after{ transform: rotate(180deg); }

.faq-card:hover {
  box-shadow: 0 6px 24px rgba(2,10,20,0.10), 0 1.5px 6px rgba(2,10,20,0.06);
  border-color: rgba(2,10,20,0.10);
}

.faq-card:hover h3 {
    color: #f6630c;
}

/* FAQ responsive styles */
@media (max-width: 768px) {
    .faq-section {
        padding: 1.5rem;
    }
    
    .faq-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .faq-section h2 {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 480px) {
    .faq-grid {
        gap: 2rem;
    }
    
    .faq-section {
        padding: 1.25rem;
    }
    
    .faq-card {
        padding: 1rem;
    }
    
    .faq-card h3 {
        font-size: 1rem;
    }
}

/* Keep smooth transitions for the top utility row */
.site-header .header-top{transition:opacity 200ms ease, transform 200ms ease}

/* Hide topline and Arabic utility when header is compact (scrolled) */
.site-header.scrolled .header-main-row::before{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}

.site-header.scrolled .header-top .arabic{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}




/* smooth scrolling */
html{scroll-behavior:smooth}

/* logo */
.brand{display:flex;align-items:center;gap:.6rem}
.logo{
  display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--ad-navy);text-decoration:none;font-size:1.15rem;letter-spacing:0.6px;text-transform:none;
  transition:font-size .28s ease, color .28s ease;
}

.logo-img{display:block;max-height:89px;width:auto;transition:max-height .28s ease;margin:0;align-self:center;padding:0}

/* When header is scrolled/compact, reduce logo to the smaller size */
.site-header.scrolled .logo-img{max-height:59px}

/* Nav item wrapper and dropdown toggle styles */
.nav-item-wrapper {
  display: flex;
  align-items: center;
}

.dropdown-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
  margin-left: 0.2rem;
  cursor: pointer;
  color: inherit;
}

.dropdown-icon {
  display: inline-block;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}

/* Mobile styles */
@media (max-width: 720px) {
  
  /* Mobile cap: also increase by 35% from previous 44px -> 59px */
  .logo-img{max-height:30px} /* reduce roughly 200% smaller (half size) on mobile */
  
  .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-item.has-dropdown .nav-link {
    flex: 1;
  }

  .nav-item-wrapper {
    display: flex;
    width: 100%;
    padding: 0;
  }

  .dropdown-toggle[aria-expanded="true"] .dropdown-icon {
    transform: rotate(180deg);
  }
}

/* Tablet override: restore header logo size for iPad */
@media (min-width: 721px) and (max-width: 900px) {
  .logo-img{max-height:60px !important}
}
  /* Use two columns on small/mobile screens so footer columns appear side-by-side */
  .footer-wrap{grid-template-columns:1fr 1fr;}
/* site logo image - preserved via .logo above */

@media (max-width:420px){
  /* On very small phones, stack footer center columns to avoid cramped layout */
  .footer-center{flex-direction:column;gap:1rem;width:100%;min-width:0}
}

/* nav items */
.site-nav{
  
  display:flex;
  gap:1rem;
  align-items:center;
}
.nav-list{display:flex;gap:1rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-link{
  background: transparent;
  border: 0;
  color: var(--text);
  font-weight: 300;
  padding: 0.4rem 0.6rem;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
}

/* Dropdown parent items (OUR FACILITY, TRAINING OFFERINGS)
   - Use .dropdown-trigger on the parent element (span) so it is
     non-navigable but still interactive for JS-driven toggles.
   - Allow hover color change to the brand orange, but prevent any
     persistent "active" state or navigation.
*/
.nav-link.dropdown-trigger {
  cursor: pointer;
  user-select: none;
  color: #003c34;
  pointer-events: auto; /* allow hover/click for toggle handling */
}

/* Hover shows orange but don't allow any persistent active styling */
.nav-link.dropdown-trigger:hover {
  color: #f6630c;
}

/* Keep dropdown functionality working on hover/expanded state */
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown.expanded .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Ensure parent items never appear as "active" (persistent orange)
   even if other scripts try to add .active. We target both the parent
   span and any accidental anchor usage. */
.nav-item.has-dropdown > .nav-link.dropdown-trigger,
.nav-item.has-dropdown.expanded > .nav-link.dropdown-trigger,
.nav-item.has-dropdown > .nav-link.dropdown-trigger.active {
  color: #003c34 !important;
}

/* But on hover keep the hover color visible */
.nav-item.has-dropdown:hover > .nav-link.dropdown-trigger {
  color: #f6630c !important;
}

.nav-link, .nav-item > a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.site-nav a{
  color: #003c34;
  text-decoration: none;
  font-weight: 300;
  padding: 0.4rem 1.2rem;
  border-radius: 6px;
  /* Expanded header size */
  font-size: 1rem;
  transition: font-size .28s ease, padding .28s ease, color .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Top-level nav titles: set a slightly lighter weight for visual balance */
.site-nav .nav-list > .nav-item > .nav-link,
.site-nav .nav-list > .nav-item > .nav-link.dropdown-trigger {
  font-weight: 280;
}
.site-nav a:hover,
.site-nav a:focus{
  background: transparent;
  outline: none;
  
  color: #f6630c;
}

/* Make dropdown parent labels match regular nav item appearance
   (padding, font-size, weight and spacing) while remaining spans
   so they don't navigate. This keeps visual parity for items that
   have submenus. */
.site-nav .nav-list .nav-item.has-dropdown > .nav-link.dropdown-trigger {
  padding: 0.4rem 1.2rem; /* match .site-nav a */
  font-weight: 250;
  font-size: 1rem;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
}





/* Active nav link */
.site-nav a.active{
  color: #f6630c;
 
}

/* CTA buttons in nav */
.btn-ghost{
  background:transparent;
  border:2px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.95);
  padding:0.35rem 0.6rem;
}
.btn-primary{
  background:var(--ad-gold);
  color:var(--ad-dark);
  padding:0.45rem 0.85rem;
  font-weight:700;
  border-radius: 0;
  border: none;
  min-width: 120px;
  /* Remove center alignment for desktop nav items */
  text-align: left;
  transition: background 0.18s, color 0.18s;
  text-decoration: none;
  display: inline-block;
}

/* hamburger toggle (hidden on desktop) */
.nav-toggle{
  display: none;
  background: transparent;
  border: 0;
  color: #003c34;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10000;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}


 

 



/* Tablet override: ensure iPad shows desktop navigation properly */
@media (min-width: 721px) and (max-width: 900px) {
  /* Hide hamburger menu on tablets */
  .nav-toggle { display: none !important; }
  
  /* Show desktop navigation */
  .site-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    width: auto !important;
  }
  
  /* Proper header layout for tablets */
  .header-inner {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Ensure nav items display horizontally */
  .site-nav .nav-list {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }
  
  /* Ensure dropdown toggle is hidden on tablets (use hover instead) */
  .dropdown-toggle {
    display: none !important;
  }
  
  /* Keep dropdown menus working with hover */
  .nav-item.has-dropdown {
    position: relative;
  }
  
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
  }
  
  /* Reduce nav link font size slightly for tablets */
  .site-nav a,
  .nav-link.dropdown-trigger {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}

/* Desktop: shift nav and toggle 10% to the right while keeping the brand/logo in place */
@media (min-width:721px){
  .header-inner{position:relative}
  /* Use flex spacing instead of shifting by percentage which can create
     awkward overlap on intermediate laptop widths. Ensure nav sits to the
     right and brand stays on the left using margin auto where needed. */
  .header-inner .brand{ margin-right: auto; position:relative; left:0; }
  .header-inner .site-nav{ margin-left: auto; position:relative; left:0; }
  .header-inner #nav-toggle{ position:relative; left:0; }
}

/* small visual polish when nav open */
.site-header.nav-open{box-shadow:0 6px 30px rgba(2,10,20,0.18)}

/* Hero */
.hero{padding:2rem 0;background:linear-gradient(180deg,var(--muted),#fff)}
.hero-inner{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;padding:1rem 0}
.hero-copy{max-width:640px}
.brand-line{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.brand-main{font-weight:800;color:var(--ad-navy);font-size:1.25rem}
.brand-sub{color:var(--ad-navy);font-weight:700}
.badge{background:var(--ad-gold);color:var(--ad-dark);padding:.15rem .5rem;font-weight:800;font-size:.75rem}

.hero h1{margin:0 0 .6rem;font-size:2rem;color:var(--ad-navy);line-height:1.05;font-family:'Certo Sans',sans-serif;font-weight:bold}
.lead{margin:0 0 1rem;color:#34495a;font-weight:300}

.hero-ctas{display:flex;gap:.6rem}
.btn{display:inline-block;padding:.55rem .9rem;text-decoration:none;font-weight:700;cursor:pointer}
.btn-primary{background:var(--ad-gold);color:var(--ad-dark)}
.btn-outline{background:transparent;border:2px solid var(--ad-navy);color:var(--ad-navy)}

.hero-features{display:flex;gap:1rem;list-style:none;padding:0;margin:1rem 0 0;color:#2f4b57}
.hero-media img{width:100%;max-width:380px;box-shadow:0 12px 40px rgba(2,10,20,0.08)}

/* full-bleed image sections */
.image-hero {
  min-height: calc(68vh + var(--header-height, 64px));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Vibrant color placeholders for hero and card images (removed default green so pages can set their own images) */
.image-hero.color-1{background:transparent}
.image-hero.color-2{background:transparent}
.image-hero.color-3{background:transparent}

/* Very slow gentle zoom in/out for the first hero image (rig) */
@keyframes slow-zoom-in-out{
  0%{transform:scale(1);}
  50%{transform:scale(1.06);} /* subtle zoom in */
  100%{transform:scale(1);}
}

/* Sticky Notes Styles */
.sticky-notes-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 0;
  overflow: hidden;
  min-height: 100vh; /* Ensure container has enough height */
}

/* Connecting lines between notes */
.sticky-note::after {
  content: '';
  position: absolute;
  background: rgba(234, 157, 34, 0.3);
  z-index: -1;
}

.sticky-note.left::after {
  right: -50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.sticky-note.right::after {
  left: -50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
}

.sticky-note.visible::after {
  transform: scaleX(1);
  transition-delay: 0.2s;
}

/* Vertical connecting lines */
.sticky-note::before {
  content: '';
  position: absolute;
  background: rgba(234, 157, 34, 0.3);
  z-index: -1;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transition: transform 0.5s ease;
}

.sticky-note:not(:last-child)::before {
  bottom: -100%;
  transform-origin: top;
}

.sticky-note:not(:first-child)::before {
  top: -100%;
  transform-origin: bottom;
}

.sticky-note.visible:not(:last-child)::before,
.sticky-note.visible:not(:first-child)::before {
  transform: scaleY(1);
  transition-delay: 0.4s;
}

/* Floating animation removed: cards should remain static when visible */

.sticky-note {
  position: relative;
  /* unified card size for consistent layout */
  width: 306px; /* 15% smaller than 360px */
  height: 221px; /* 15% smaller than 260px */
  margin: 1.5rem 0;
  background: #ea9d22;
  /* remove outer padding so back image can reach closer to edges;
     move padding to .note-front so front text keeps comfortable gutter */
  padding: 0;
  border-radius: 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
              0 5px 15px rgba(0, 0, 0, 0.15),
              0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.sticky-note:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
              0 8px 20px rgba(0, 0, 0, 0.2),
              0 2px 5px rgba(0, 0, 0, 0.15);
}

.sticky-note.left {
  margin-right: auto;
  margin-left: 2rem;
  transform: translateX(-20px) translateY(20px);
}

.sticky-note.right {
  margin-left: auto;
  margin-right: 2rem;
  transform: translateX(20px) translateY(20px);
}

.sticky-note.visible {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

.sticky-note h3 {
  color: #003c34;
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
  font-family: 'Certo Sans', sans-serif;
  font-weight: bold;
  letter-spacing: -0.01em;
}

.sticky-note p {
  color: #003c34;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}

/* Page-flip (3D) styles for sticky notes: front/back */
.sticky-note {
  perspective: 1200px; /* give 3D depth to children */
}

.note-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2,.9,.25,1);
}

.note-front,
.note-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.note-front {
  /* keep original sticky note appearance and provide inner padding
     so text does not collide with the card edges */
  background: transparent;
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.note-back {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  z-index: 1;
  transform: rotateY(180deg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-back img {
  position: absolute;
  /* allow the image to bleed slightly toward the card edges so it
     appears larger and closer to the edges */
  left: -6px;
  top: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none; /* prevent clicks on the image */
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}

/* flip on hover or keyboard focus */
.sticky-note:hover .note-inner,
.sticky-note:focus-within .note-inner,
.sticky-note:focus .note-inner {
  transform: rotateY(-180deg);
}

/* Slight adjustment: keep the lift hover transform but allow flip to dominate on hover */
.sticky-note:hover {
  transform: translateY(-5px) !important;
}

/* Accessibility: prefer reduced motion - disable 3D flip and fade instead */
@media (prefers-reduced-motion: reduce) {
  .note-inner {
    transition: none;
    transform: none !important;
  }
  .note-back { display: none; }
}

@media (max-width: 768px) {
  .sticky-note {
    width: calc(100% - 3rem);
    height: auto;
    min-height: 200px;
    margin: 2rem 1.5rem !important;
    transform: none !important;
  }

  .sticky-notes-container {
    padding: 2rem 0;
  }

  .note-front {
    padding: 1.5rem;
  }

  .sticky-note h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }

  .sticky-note p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Remove connecting lines on mobile */
  .sticky-note::before,
  .sticky-note::after {
    display: none;
  }

  .sticky-note.left,
  .sticky-note.right {
    margin: 1.5rem auto !important;
    transform: none !important;
  }
}

/* Facility: disable image flipping on mobile so sticky notes always show text side
   The flip is useful on desktop (hover) but on touch devices it can be confusing.
   This rule ensures the back face is hidden and the inner 3D transform is disabled
   for small screens inside the facility page only. */
@media (max-width: 768px) {
  .our-facility .sticky-note .note-back {
    display: none !important;
  }

  .our-facility .sticky-note .note-inner,
  .our-facility .sticky-note .note-front,
  .our-facility .sticky-note {
    transform: none !important;
    backface-visibility: visible !important;
  }

  .our-facility .sticky-note:hover .note-inner,
  .our-facility .sticky-note:focus-within .note-inner,
  .our-facility .sticky-note:focus .note-inner {
    transform: none !important;
  }

  /* ensure the front is visible and occupies full area */
  .our-facility .sticky-note .note-front {
    z-index: 2 !important;
    position: relative !important;
    display: block !important;
  }
}

/* Hero 2 Section Styles */
/* Make Hero 2 section much taller to fit all content and keep everything in frame */
.our-facility .image-hero.color-2 {
  min-height: 300vh;
  padding-top: 7rem;
}

/* Facility page: override hero sizing to accommodate more vertical content */
.our-facility .image-hero.color-2 {
  --hero-min: 460px;
  --hero-vh: 78vh;
  --hero-max: 1200px;
}

@media (max-width: 900px) {
  .our-facility .image-hero.color-2 {
    --hero-min: 420px;
    --hero-vh: 72vh;
    --hero-max: 920px;
    padding: 4rem 0;
  }

  .hero-overlay-values {
    padding: 2rem 0;
  }

  .values-inner .section-header {
    padding: 2rem 1.5rem;
  }

  .values-headline {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .intro-text {
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 420px) {
  .our-facility .image-hero.color-2 {
    --hero-min: 360px;
    --hero-vh: 68vh;
    --hero-max: 720px;
    padding: 3rem 0;
  }
}

@media (max-width: 600px) {
  .our-facility .image-hero.color-2 {
    min-height: 500vh;
    padding: 3rem 0;
  }

  .values-headline {
    font-size: 1.8rem;
  }

  .intro-text {
    font-size: 1rem !important;
  }
}

.feature-panels-row {
  margin-top: 4.5rem;
}

/* Reduce gap between the feature panels header and the panels themselves on
   the facility page only. This targets the header + row relationship so it
   doesn't modify the parent .values-inner padding or other section headers. */
.our-facility .feature-panels-header + .feature-panels-row {
  margin-top: 0.6rem; /* brings the panels up closer to the heading */
}

@media (max-width: 900px) {
  .our-facility .feature-panels-header + .feature-panels-row {
    margin-top: 0.9rem;
  }
}


.our-facility .sticky-notes-container {
  padding: 4rem 0;
  min-height: 120vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .our-facility .image-hero.color-2 {
    min-height: 200vh;
  }
  
  .our-facility .sticky-notes-container {
    padding: 2rem 0;
    min-height: 160vh;
  }
  
  .our-facility .section-header {
    padding: 4rem 1.5rem 2rem !important;
  }
}

.hero-overlay-values {
  background: rgba(0, 60, 52, 0.7);
}

.values-inner .section-header {
  padding: 6rem 2rem 3rem;
}

/* Course panel styles (featured course above sticky notes) */
.course-panel {
  margin: 2rem auto 3rem;
  max-width: 980px;
  padding: 0 1rem;
}
.course-panel .course-panel-inner{
  display:flex;
  gap:1.25rem;
  align-items:center;
  background: #ffffff;
  color: #003c34;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.course-panel .course-preview img{
  width: 220px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  display:block;
}
.course-panel .course-info{
  flex:1 1 auto;
}
.course-panel .course-title{
  margin:0 0 .5rem;
  font-size: 1.25rem;
  color: #003c34;
  font-weight:400;
}
.course-panel .course-desc{
  margin:0 0 .75rem;
  color: #264a46;
}

@media (max-width:768px){
  .course-panel .course-panel-inner{
    flex-direction:column;
    align-items:stretch;
    padding: 1rem;
  }
  .course-panel .course-preview img{
    width:100%;
    height:160px;
    border-radius:4px;
  }
}

.section-header .section-label {
  color: #f6630c;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.our-facility .section-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
}

/* Prevent the global fadeInUp animation (applied to h2/p site-wide) from
   double-animating the header content. The section itself handles reveal via
   the .section-header.visible transition, so disable the global keyframe
   animation for headings/paragraphs inside this block. */
.our-facility .section-header h2,
.our-facility .section-header p,
.our-facility .section-header .intro-text,
.our-facility .section-header .values-headline {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Visible state when section is near viewport */
.our-facility .section-header.visible {
  transform: translate3d(0,0,0);
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .our-facility .section-header,
  .our-facility .section-header.visible {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

.section-header .values-headline {
  color: #f6630c;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.section-header .intro-text {
  color: white;
  max-width: 800px;
  margin: 0 auto 4rem;
  font-size: 1.4rem;
  line-height: 1.6;
  opacity: 0.95;
}

.section-header .features-title {
  color: #f6630c;
  font-size: 1.8rem;
  margin: 3rem 0 1.5rem;
}

.section-header .features-desc {
  color: white;
  max-width: 700px;
  margin: 0 auto 4rem;
  font-size: 1.1rem;
}

/* Apply transform to a pseudo-element so background-position stays centered while scaling */
.home .image-hero.color-1{position:relative;overflow:hidden}
/* Show the whole rig2 image without cropping. Use contain so the entire
  image fits; disable the zoom on this specific hero to avoid revealing
  background during animation. */
.home .image-hero.color-1::before{content:'';position:absolute;left:-6%;right:-6%;top:0;height:100%;background-size:115% !important;background-position:center center;background-repeat:no-repeat;transform-origin:center center;animation:slow-zoom-in-out 36s ease-in-out infinite;will-change:transform;z-index:0;pointer-events:none;backface-visibility:hidden}

/* Apply zoom animation to all hero images */
.image-hero.color-1 {
  position: relative;
  overflow: hidden;
}

.image-hero.color-1::before {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 0;
  height: 100%;
  background-size: 115% !important;
  background-position: center center;
  background-repeat: no-repeat;
  transform-origin: center center;
  animation: slow-zoom-in-out 36s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
  backface-visibility: hidden;
}



/* Dim overlay for all hero images */
.image-hero{
  position:relative;
  overflow:hidden;
}
.image-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(3, 60, 52, 0.65); /* semi-transparent dark overlay using brand color */
  z-index:1;
  pointer-events:none;
}

/* Parallax fallback: use background-attachment fixed on large screens where supported */
@media (min-width: 900px){
  .image-hero[data-parallax]{
    background-attachment: fixed;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* The theme now allows per-page hero backgrounds set in HTML. Do not forcibly hide ::before so pages may use pseudo-elements if desired. */
/* per-page hero images are now set via inline styles or page-specific CSS; no global ::before override */
/* Ensure any page content inside hero sits above overlay */
.image-hero > *{position:relative;z-index:2}

/* Content Panel Styles */
.content-panel {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* Training intro content panel specific styles */
.training-intro {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  padding-right: max(1rem, env(safe-area-inset-right));
  box-sizing: border-box;
  width: 100%;
}

.intro-left {
  flex: 1;
  min-width: 0; /* Allows content to shrink below flex-basis */
  padding-right: 1rem;
}

.intro-right {
  flex: 1;
  min-width: 0; /* Allows content to shrink below flex-basis */
  padding-right: 1rem;
}

.training-intro .label {
  color: #f6630c;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.training-intro h2 {
  font-size: 2.2rem;
  line-height: 1.3;
  margin-bottom: 2rem;
  color: var(--heading);
}

.training-intro .learn-more {
  color: #f6630c;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
}

.training-intro p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.drill-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-right: 1rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.drill-icon {
  flex-shrink: 0;
}

.drill-icon img {
  width: 60px;
  height: auto;
  display: block;
}

.drilling-since {
  font-size: 1.1rem;
  min-width: 0;
  flex-shrink: 1;
}

.since-label {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.year {
  font-size: 2rem;
  font-weight: bold;
  color: #f6630c;
  white-space: nowrap;
}

/* Responsive styles */
@media (max-width: 1024px) {
  .content-panel {
    padding: 3.5rem 1.5rem;
  }
  
  .training-intro {
    gap: 3rem;
  }
  
  .training-intro h2 {
    font-size: 2rem;
  }
}

@media (max-width: 900px) {
  .content-panel {
    padding: 3rem 1.5rem;
  }
  
  .training-intro {
    flex-direction: column;
    gap: 2.5rem;
    padding-right: 1.5rem;
  }
  
  .intro-left, .intro-right {
    width: 100%;
    padding-right: 0;
  }
  
  .training-intro h2 {
    font-size: 1.8rem;
  }
  
  .training-intro p {
    font-size: 1.05rem;
    padding-right: env(safe-area-inset-right, 1rem);
  }
}

@media (max-width: 600px) {
  .content-panel {
    padding: 2.5rem 1rem;
  }
  
  .training-intro {
    gap: 2rem;
    padding-right: 1rem;
  }
  
  .training-intro .label {
    font-size: 1rem;
    padding-right: 0.5rem;
  }
  
  .training-intro h2 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    padding-right: 0.5rem;
  }
  
  .drill-stats {
    gap: 1rem;
    padding-right: 0.5rem;
  }
  
  .drill-icon img {
    width: 50px;
  }
  
  .year {
    font-size: 1.8rem;
  }
  
  .intro-right {
    padding-right: 0.5rem;
  }
}

/* Additional small screen adjustments */
@media (max-width: 380px) {
  .content-panel {
    padding: 2rem 0.75rem;
  }
  
  .training-intro {
    padding-right: 0.75rem;
  }
  
  .intro-right, 
  .intro-left {
    padding-right: 0.5rem;
  }
}

/* Hero container - shared styles */
.contact .image-hero,
.instructors .image-hero,
.facility .image-hero,
.our-facility .image-hero,
.services .image-hero,
.courses .image-hero,
.privacy-policy .image-hero,
.disclaimer .image-hero,
.faq .image-hero,
.training-overview .image-hero,
.home .image-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

/* Hero sizing: Deterministic sizing based on viewport height and header.
   This ensures consistent hero sizing across all pages during load and
   after header injection. */
.image-hero {
  --hero-min: 420px;    /* minimum height regardless of viewport */
  --hero-vh: 68vh;      /* viewport-relative target height */ 
  --hero-max: 920px;    /* maximum height for very tall screens */
  
  min-height: calc(var(--hero-min) + var(--header-height, 64px));
  height: calc(var(--hero-vh) + var(--header-height, 64px));
  max-height: calc(var(--hero-max) + var(--header-height, 64px));
}

@media (max-width: 900px) {
  .image-hero {
    --hero-min: 360px;  /* slightly shorter on tablets */
    --hero-vh: 62vh;
    --hero-max: 720px;
  }
}

@media (max-width: 420px) {
  .image-hero {
    --hero-min: 280px;  /* compact on phones */
    --hero-vh: 38vh;
    --hero-max: 420px;
  }
}

/* Hero text wrapper - shared styles */
.contact .image-hero .hero-text-container,
.instructors .image-hero .hero-text-container,
.facility .image-hero .hero-text-container,
.our-facility .image-hero .hero-text-container,
.services .image-hero .hero-text-container,
.courses .image-hero .hero-text-container,
.privacy-policy .image-hero .hero-text-container,
.disclaimer .image-hero .hero-text-container,
.faq .image-hero .hero-text-container,
.training-overview .image-hero .hero-text-container,
.home .image-hero .hero-text-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

.contact .image-hero .hero-contact,
.instructors .image-hero .hero-contact,
.facility .image-hero .hero-contact,
.our-facility .image-hero .hero-contact,
.services .image-hero .hero-contact,
.courses .image-hero .hero-contact,
.privacy-policy .image-hero .hero-contact,
.disclaimer .image-hero .hero-contact,
.faq .image-hero .hero-contact,
.training-overview .image-hero .hero-contact {
  position: relative;
  color: #f6630c;
  font-size: clamp(27.6px, 5.865vw, 55.2px);
  font-family: 'Certo Sans', sans-serif;
  font-weight: bold;
  letter-spacing: 0.6px;
  text-transform: none;
  line-height: 1.2;
  text-shadow: 0 8px 24px rgba(2,10,20,0.48);
  margin-bottom: 0.5rem;
  z-index: 2;
}

/* Special home page hero styling */
.home .image-hero .hero-contact,
.home .image-hero .hero-contact-subtitle {
  position: relative;
  font-size: clamp(27.6px, 5.865vw, 55.2px);
  font-family: 'Certo Sans', sans-serif;
  font-weight: bold;
  letter-spacing: 0.6px;
  text-transform: none;
  line-height: 1.2;
  text-shadow: 0 8px 24px rgba(2,10,20,0.48);
  margin-bottom: 0.5rem;
  z-index: 2;
}

.home .image-hero .hero-contact span:first-child,
.home .image-hero .hero-contact-subtitle span:first-child {
  color: #f6630c;
}

.home .image-hero .hero-contact span:last-child,
.home .image-hero .hero-contact-subtitle span:last-child {
  color: white;
}

/* Hero subtitle - shared styles */
.contact .image-hero .hero-contact-subtitle,
.instructors .image-hero .hero-contact-subtitle,
.facility .image-hero .hero-contact-subtitle,
.our-facility .image-hero .hero-contact-subtitle,
.services .image-hero .hero-contact-subtitle,
.courses .image-hero .hero-contact-subtitle,
.privacy-policy .image-hero .hero-contact-subtitle,
.disclaimer .image-hero .hero-contact-subtitle,
.faq .image-hero .hero-contact-subtitle,
.training-overview .image-hero .hero-contact-subtitle {
  position: relative;
  color: #ffffff;
  font-size: clamp(14px, 2.55vw, 20px);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: none;
  line-height: 1.2;
  text-shadow: 0 4px 12px rgba(2,10,20,0.48);
  z-index: 2;
}

@media (max-width:720px){
  .contact .image-hero .hero-text-container,
  .facility .image-hero .hero-text-container,
  .privacy-policy .image-hero .hero-text-container,
  .disclaimer .image-hero .hero-text-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .contact .image-hero .hero-contact,
  .facility .image-hero .hero-contact,
  .our-facility .section-header:not(.feature-center) {
    padding: 4rem 1.5rem 2rem !important;
  }
  .our-facility .section-header.feature-center {
    padding: 0 1rem 2rem !important;
  }
  .contact .image-hero .hero-contact {
    text-align: left;
    margin-bottom: 0.4rem;
  }
  .contact .image-hero .hero-contact-subtitle,
  .facility .image-hero .hero-contact-subtitle,
  .privacy-policy .image-hero .hero-contact-subtitle,
  .disclaimer .image-hero .hero-contact-subtitle {
    font-size: 14px;
  }
}

/* Home page: use rig2.jpg for the second hero slot and animate like the first */
.home .image-hero.color-2{position:relative;overflow:hidden}
.home .image-hero.color-2::before{content:'';position:absolute;left:-6%;right:-6%;top:0;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;transform-origin:center center;animation:slow-zoom-in-out 36s ease-in-out infinite;will-change:transform;z-index:0;pointer-events:none;backface-visibility:hidden}

/* Home page: override the global hero sizing for a more conservative,
   content-driven layout that avoids excessive vertical whitespace. */
.home .image-hero,
.home .image-hero.color-1,
.home .image-hero.color-2 {
  --hero-min: 380px;
  --hero-vh: 62vh;
  --hero-max: 720px;
}

@media (max-width: 900px) {
  .home .image-hero,
  .home .image-hero.color-1,
  .home .image-hero.color-2 {
    --hero-min: 320px;
    --hero-vh: 56vh;
    --hero-max: 680px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 420px) {
  .home .image-hero,
  .home .image-hero.color-1,
  .home .image-hero.color-2 {
    --hero-min: 240px;
    --hero-vh: 44vh;
    --hero-max: 420px;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* keep content (if any) above the pseudo-image */
.image-hero.color-1 > *{position:relative;z-index:1}

/* Adjust hero image behavior on smaller screens */
@media (max-width:900px){
  /* Increase the bleed around all hero images on smaller viewports */
  .image-hero.color-1::before {
    position: absolute;
    inset: -14%;
    background-attachment: scroll;
    height: calc(100% + 28%);
  }
  
  /* Home page second hero image */
  .home .image-hero.color-2::before {
    position: absolute;
    inset: -14%;
    background-attachment: scroll;
    height: calc(100% + 28%);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .image-hero.color-1::before {
    animation: none;
    transform: none;
  }
}

.placeholder-img{width:100%;height:120px;margin-bottom:0.8rem}
.placeholder-img.color-1{background:#003c34}
.placeholder-img.color-2{background:#003c34}
.placeholder-img.color-3{background:#003c34}

/* ensure image sections can't stack above header */
.image-hero, .content-panel, .cards, .card{position:relative;z-index:0}

/* content panels sit between image sections */
.content-panel{padding:2rem 0} /* Reduced from 3.25rem to 2rem */
.content-panel h2{margin-top:0;color:var(--heading)}
.content-panel p{color:var(--text)}
.content-panel .btn{color: white;background-color: #003c34;}

/* Restore feature panel CTA styles when inside content panels for facility
   and hero overlay boxes so they keep the gold/orange look used elsewhere. */
.content-panel .feature-panels-cta .btn,
.our-facility .content-panel .feature-panels-cta .btn,
.our-facility .content-panel .btn {
  background: var(--ad-gold) !important;
  color: var(--ad-dark) !important;
  border: none;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  font-size: 1.08rem;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 2px 8px 0 rgba(0,60,52,0.07);
}

.content-panel .feature-panels-cta .btn:hover,
.our-facility .content-panel .feature-panels-cta .btn:hover,
.our-facility .content-panel .btn:hover {
  background: #f6630c !important;
  color: #fff !important;
}

/* Mission & Vision Slider Section */
.mission-vision-section {
  /* Use a single muted background so the whole section matches the
     grey used inside the mission column for consistent appearance */
  background: var(--muted);
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Make the slider adapt to content on small screens while keeping a
     reasonable visual presence on larger viewports. Base (mobile-first)
     uses auto height; larger screens get a taller visual area. */
  height: auto;
  padding: 2rem 0;
  margin: 0;
  max-width: none;
}

.mv-slider {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

.mv-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.mv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mv-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  position: relative;
  height: 100%;
}

.mv-slide-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: auto;
  /* keep content aligned with the rest of the site */
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0; /* remove default padding */
  box-sizing: border-box;
}

.mv-text {
  padding: 4rem 2rem; /* Add horizontal padding */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--muted);
  
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

/* Compact manager quote box positioned top-right inside the .mv-text area.
   Uses absolute positioning so it does not affect other content or layout. */
/* Ensure slide content is a positioning context */
.mv-slide-content { position: relative; }

/* Mission Vision responsive styles */
@media (max-width: 1200px) {
  .values-outline{
    gap: 0.6rem;
    /* increase desktop maximums by about 50% */
    font-size: clamp(3.3rem, 4.2vw, 5.4rem);
    letter-spacing: normal;
  }

  .mv-slide p {
    font-size: 1.1rem;
  }
}

@media (max-width: 900px) {
  .mv-slide-content {
    grid-template-columns: 1fr;
  }

  .mv-text {
    padding: 2.5rem 1.25rem;
  }

  .mv-image {
    height: 300px;
  }

  .mv-slide h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 600px) {
  .mv-text {
    padding: 2rem 1rem;
  }

  .mv-image {
    height: 250px;
  }

  .mv-slide h2 {
    font-size: 1.6rem;
  }

  .mv-slide p {
    font-size: 1rem;
  }
}

/* Smaller screens: Stack the quote in content flow and adjust size */
@media (max-width: 900px) {
  .manager-quote {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 1rem;
    border-left-width: 3px;
    padding: 0.6rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  .feature-panel {
    margin-bottom: 1.2rem;
  }
  .feature-panel:last-child {
    margin-bottom: 0;
  }
  .our-facility .image-hero.color-2 {
    padding-bottom: 5.5rem;
  }
}

.mv-label {
  color: #f6630c;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.mv-slide h2 {
  color: #003c34;
  font-size: clamp(2rem, 4vw, 2.5rem);
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

.mv-slide p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  max-width: 600px;
}

/* Dashed bullet list for the Engagement & Impact slide */
.values-stats {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: 640px;
}
.values-stats li {
  position: relative;
  margin: 0.75rem 0;
  padding-left: 2rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 300;
}
.values-stats li::before {
  content: "-";
  color: #f6630c;
  position: absolute;
  left: 0.75rem;
  display: inline-block;
  width: auto;
  font-weight: 600;
}

@media (max-width: 900px) {
  .values-stats li {
    font-size: 1rem;
    margin: 0.5rem 0;
    padding-left: 1.75rem;
  }
  .values-stats li::before {
    left: 0.6rem;
  }
}

@media (max-width: 480px) {
  .values-stats li {
    font-size: 0.95rem;
    margin: 0.4rem 0;
    padding-left: 1.5rem;
  }
  .values-stats li::before {
    left: 0.5rem;
  }
}

.mv-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.mv-image img {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

@media (max-width: 900px) {
  .mv-image {
    padding: 2rem;
  }
}

@media (max-width: 600px) {
  .mv-image {
    padding: 1.5rem;
  }
}

/* Responsive slider: stack text and image on narrow viewports */
@media (max-width: 900px) {
  .mission-vision-section { padding: 1.25rem 0; }
  .mv-slide-content { grid-template-columns: 1fr; gap: 1rem; }
  .mv-text { padding: 1.25rem 0; }
  .mv-image { min-height: 180px; }
  .mv-image img { max-height: 260px; width: auto; height: auto; object-fit: contain; }
  .mv-slide h2 { font-size: clamp(1.5rem, 4.2vw, 2rem); }
  .mv-slide p { font-size: 1rem; max-width: 100%; }
  .mv-nav { position: fixed; right: 12px; bottom: 12px; z-index: 30; }
}

@media (min-width: 901px) {
  /* On larger screens keep a strong visual height for the slider */
  .mission-vision-section { height: 500px; }
  .mv-slide-content { height: 100%; }
  .mv-image { min-height: 100%; }
}

/* MV Slider Dots Navigation */
.mv-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
}

.mv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.mv-dot:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.15);
}

.mv-dot.active {
  background: #f6630c;
  border-color: #f6630c;
  width: 20px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .mv-dots {
    bottom: 12px;
    gap: 6px;
  }
  
  .mv-dot {
    width: 6px;
    height: 6px;
  }
  
  .mv-dot.active {
    width: 16px;
  }
}

.mv-nav {
  position: absolute;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #003c34;
  font-size: 1.6rem;
  cursor: pointer;
  transition: color 0.18s ease;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
}

.mv-nav:hover {
  color: #f6630c;
}

.mv-nav.prev {
  left: 20px;
}

.mv-nav.next {
  right: 20px;
}

/* Mobile positioning */
@media (max-width: 900px) {
  .mv-nav {
    top: auto;
    bottom: 20px;
    transform: none;
  }
  
  .mv-nav.prev {
    left: 10px;
  }
  
  .mv-nav.next {
    right: 10px;
  }
}





/* Hit zones: clickable left/right halves that navigate slides */
.mv-hit-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 15; /* above slides but below nav */
  cursor: pointer;
}
.mv-hit-left { left: 0; }
.mv-hit-right { right: 0; }

@media (max-width: 900px) {
  .mv-slide-content {
    grid-template-columns: 1fr;
  }
  
  .mv-text {
    padding: 3rem var(--container-padding, 1rem);
  }
  
  /* Remove the image on mobile to avoid cropping and improve layout */
  .mv-image {
    display: none;
  }

  /* Ensure the text column centers vertically and uses the full width */
  .mv-slide-content { align-items: center; }
  .mv-text { width: 100%; }
  
  .mv-nav {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }
  
  .mv-nav.prev {
    left: 8px;
  }
  
  .mv-nav.next {
    right: 8px;
  }
}

/* Training intro panel: large left headline with CTA and right-side stats/text */
.training-intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2.5rem;
  align-items:center;
  padding:2rem 0;
}
.training-intro .intro-left{padding-right:1rem}
.training-intro .intro-left .label{
  display: inline-block;
  color: #f6630c;
  font-family: 'Certo Sans', sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.training-intro .intro-left h2{
  margin: 0 0 1.5rem;
  color: var(--heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.2;
  font-weight: bold;
  font-family: 'Certo Sans', sans-serif;
}
.training-intro .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #f6630c;
  font-weight: bold;
  font-size: 1.15rem;
  font-family: 'Certo Sans', sans-serif;
  text-decoration: none;
  transition: color 0.2s ease;
}
.training-intro .learn-more::after {
  transition: transform 0.3s ease;
}
.training-intro .learn-more:hover {
  color: #003c34;
}
.training-intro .learn-more:hover::after {
  transform: translateX(6px);
}
.training-intro .intro-right{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.training-intro .intro-right p{
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 300;
  font-family: 'Certo Sans', sans-serif;
  max-width: 520px;
}
.drill-stats{display:flex;align-items:center;gap:1.25rem}
.drill-icon {
  width: 105px;  /* Increased from 84px by 25% */
  height: 105px; /* Increased from 84px by 25% */
  flex: 0 0 105px; /* Increased from 84px by 25% */
  display: flex;
  align-items: center;
  justify-content: center;
}

.trainingsince-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drilling-since{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.drilling-since .since-label{
  font-weight: bold;
  font-size: 1.2rem;
  color: #003c34;
  font-family: 'Certo Sans', sans-serif;
}
.drilling-since .year{
  font-size: 3.8rem;
  color: transparent;
  -webkit-text-stroke: 2px #f6630c;
  font-weight: bold;
  line-height: 1;
  font-family: 'Certo Sans', sans-serif;
}

@media (max-width: 900px) {
  .drilling-since {
    gap: 1rem;
  }
  .drilling-since .year {
    font-size: 3.2rem;
  }
  .drilling-since .since-label {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .drilling-since {
    gap: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .drilling-since .year {
    font-size: 2.8rem;
  }
  .drilling-since .since-label {
    font-size: 1rem;
  }
}

/* Simulator section: ensure simulator titles use the brand green */
.simulator-section .simulator-content h2 {
  color: #003c34;
  margin-top: 0;
}

@media (max-width:900px){
  .training-intro{grid-template-columns:1fr;gap:1.25rem;padding:1.5rem 0}
  .training-intro .intro-left{padding-right:0}
  .drilling-since .year{font-size:3rem}
}

.home .image-hero.color-2{position:relative;overflow:hidden}
.hero-overlay-values{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:3;pointer-events:none;background: rgba(255,255,255,0.85);}
/* Different overlay opacity for home page vs facility page */
.home .hero-overlay-values {
  background: rgba(0, 60, 52, 0.6);
  z-index: 9999; /* ensure overlay and its tooltips sit above following sections */
}
.our-facility .hero-overlay-values {
    background: rgba(0, 60, 52, 0.9);
    margin: 0;
    padding: 0;
    min-height: 0;
    height: auto;
}
.our-facility .hero-overlay-values .values-inner {
    padding: 0.5rem 1rem;
    min-height: 0;
    height: auto;
}
.our-facility .hero-overlay-values .section-header {
    margin: 0;
    padding: 0.5rem 0;
}
.hero-overlay-values .values-inner{pointer-events:auto} /* allow interaction for inner content while keeping overlay non-blocking elsewhere */
.values-inner{
  max-width:var(--max-w);
  width:100%;
  text-align:center;
  padding: 0.5rem 1rem;
  position: relative;
  min-height: auto;
  max-height: 100%;
  box-sizing: border-box;
  overflow: visible; /* allow interactive tooltips to escape the container */
}
.values-label{
  color:#f6630c;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:0.5rem;
  font-size:1.35rem
}
.values-headline{
  color:#fff;
  font-size:clamp(1.6rem,4vw,3rem);
  margin:0 0 1rem;
  font-weight:700
}
.values-rule{
  border:0;
  height:1px;
  background:rgba(255,255,255,0.12);
  margin:2rem auto;
  width:86%
}
.values-outline{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.12rem; /* tighter spacing between letters */
  margin: 1.25rem auto;
  font-size: clamp(3rem, 8vw, 6rem);
  /* make letters normal weight (not bold) per request */
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  padding-bottom: 0.5rem;
}

/* Per-letter styling */
.values-outline .outline-letter{
  display: inline-block;
  padding: 0 0.08rem; /* compact gutter */
  -webkit-text-stroke: 2px #ffffff;
  color: transparent;
  transition: all 220ms cubic-bezier(.2,.9,.3,1);
  cursor: default;
  will-change: transform, color, -webkit-text-stroke-color;
  pointer-events: auto;
  position: relative; /* positioning context for hover text */
}

/* Tooltip (drops down) */
.values-outline .letter-tooltip{
  position: absolute;
  left: 50%;
  /* place tooltip below letter with fixed gap */
  top: calc(100% + 0.5rem);
  /* start higher up for drop animation */
  transform: translate(-50%, -24px);
  background: transparent; /* keep no background */
  color: #ffffff; /* white text */
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 0; /* remove padding */
  border-radius: 0;
  font-size: clamp(1.2rem,3vw,2.25rem);
  line-height: 1.2;
  /* allow tooltip text to wrap if it's wider than the viewport and limit its width */
  white-space: normal;
  max-width: min(42ch, 40vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(.2,.9,.25,1), transform 260ms cubic-bezier(.2,.9,.25,1), color 260ms ease;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  letter-spacing: normal;
  z-index: 11000;
}

/* Mirror rules for .letter-hover (new HTML uses .letter-hover) */
.values-outline .letter-hover{
  position: absolute;
  left: 50%;
  top: calc(100% + 0.5rem);
  transform: translate(-50%, -24px);
  background: rgba(0,60,52,0.95);
  color: #ffffff;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: clamp(0.9rem,2vw,1.1rem); /* base size for mobile */
  line-height: 1.2;
  white-space: nowrap;
  max-width: min(28ch, 60vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.9,.25,1), transform 220ms cubic-bezier(.2,.9,.25,1), color 200ms ease;
  z-index: 11000;
  text-align: center;
}

@media (min-width: 900px) {
  .values-outline .letter-hover{
    top: auto;
    bottom: calc(100% + 0.5rem);
    transform: translate(-50%, 24px);
  }
  .values-outline .outline-letter:hover .letter-hover,
  .values-outline .outline-letter:focus .letter-hover{
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  .values-outline .outline-letter:last-child .letter-hover{
    left: auto;
    right: 0;
    bottom: calc(100% + 0.5rem);
    transform: translate(0, 24px);
  }
  .values-outline .outline-letter:last-child:hover .letter-hover,
  .values-outline .outline-letter:last-child:focus .letter-hover{
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Show the hover text on small screens when hovering/focusing */
.values-outline .outline-letter:hover .letter-hover,
.values-outline .outline-letter:focus .letter-hover{
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Anchor right for last child on small screens to prevent overflow */
.values-outline .outline-letter:last-child .letter-hover{
  left: auto;
  right: 0;
  transform: translate(0, -24px);
}
.values-outline .outline-letter:last-child:hover .letter-hover,
.values-outline .outline-letter:last-child:focus .letter-hover{
  transform: translate(0, 0);
  opacity: 1;
}

/* Override: force hover text to appear below letters (no background rectangle)
   and keep it white; this ensures consistent behavior across all screen sizes. */
.values-outline .letter-hover{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  top: calc(100% + 0.25rem) !important;
  bottom: auto !important;
  transform: translate(-50%, -8px) !important;
  box-shadow: none !important;
}

.values-outline .outline-letter:hover .letter-hover,
.values-outline .outline-letter:focus .letter-hover{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* On larger screens position tooltips above the letters to avoid overlapping
   the section below. Keep mobile behavior unchanged (below the letter). */
@media (min-width: 900px) {
  .values-outline .letter-tooltip{
    top: auto;
    bottom: calc(100% + 0.5rem);
    transform: translate(-50%, 24px);
  }
  .values-outline .outline-letter:hover .letter-tooltip,
  .values-outline .outline-letter:focus .letter-tooltip{
    transform: translate(-50%, 0);
    opacity: 1;
  }

  /* Adjust last-child anchored tooltip for bottom-anchored placement */
  .values-outline .outline-letter:last-child .letter-tooltip{
    left: auto;
    right: 0;
    bottom: calc(100% + 0.5rem);
    transform: translate(0, 24px);
  }
  .values-outline .outline-letter:last-child:hover .letter-tooltip,
  .values-outline .outline-letter:last-child:focus .letter-tooltip{
    transform: translate(0, 0);
  }
}

/* Hover/focus: fill and stroke switch to brand orange and tooltip drops into view */
.values-outline .outline-letter:hover,
.values-outline .outline-letter:focus{
  color: #f6630c;
  -webkit-text-stroke-color: #ffffff;
  transform: translateY(-6px);
  outline: none;
}
.values-outline .outline-letter:hover .letter-tooltip,
.values-outline .outline-letter:focus .letter-tooltip{
  opacity: 1;
  /* translate down to the anchored position so it appears to fall */
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* If a letter is at the right edge, anchor its tooltip to the right so it
   doesn't overflow the viewport (helps when the last letter is near the edge). */
.values-outline .outline-letter:last-child .letter-tooltip{
  left: auto;
  right: 0;
  transform: translate(0, -24px);
}
.values-outline .outline-letter:last-child:hover .letter-tooltip,
.values-outline .outline-letter:last-child:focus .letter-tooltip{
  transform: translate(0, 0);
}

/* Make letters focusable and keyboard-accessible */
.values-outline .outline-letter:focus{
  /* remove strong focus visuals since letters are hover-only */
  box-shadow: none;
  border-radius: 0;
  outline: none;
}

@media (max-width:900px){
  .values-inner{padding:0 1rem}
  .values-outline{
    font-size:4.8rem;
    letter-spacing:0.5rem;
    margin:0.4rem 0;
  }
  .values-headline{font-size:1.6rem}
  .values-outline .outline-letter{
    padding:0 0.1rem;
  }
  /* Adjust tooltip position and size for mobile */
  .values-outline .letter-tooltip{
    font-size:1rem;
    top:calc(100% + 0.35rem);
  }
}

/* Extra adjustments for very small screens */
@media (max-width:480px){
  .values-outline{
    font-size:3.8rem;
    letter-spacing:0.25rem;
  }
  .values-label{
    font-size:1.1rem;
  }
}
/* Larger-screen spacing for STRIVE letters (tablets & laptops)
   - 768px+: modest spacing for tablets
   - 900px+: increased spacing for larger tablets and small laptops
   - 1200px+: generous spacing for desktops/laptops
*/
@media (min-width: 768px) {
  .values-outline{
    gap: 0.35rem; /* slightly larger */
    font-size: clamp(3.2rem, 6.2vw, 5.2rem);
    letter-spacing: 0.45rem;
  }
  .values-outline .outline-letter{ padding: 0 0.14rem; }
  .values-inner{ padding: 2.5rem 1.5rem; }
}

@media (min-width: 900px) {
  .values-outline{
    gap: 0.6rem;
    font-size: clamp(4rem, 5.2vw, 7rem);
    letter-spacing: 0.85rem;
  }
  .values-outline .outline-letter{ padding: 0 0.2rem; }
  .values-inner{ padding: 3rem 2rem; }
  .values-headline{ font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
}

@media (min-width: 1200px) {
  .values-outline{
    gap: 1rem;
    font-size: clamp(5rem, 4.2vw, 9rem);
    letter-spacing: 1.1rem;
  }
  .values-outline .outline-letter{ padding: 0 0.28rem; }
}

/* STRIVE overrides: Ensure outline letters are ~50% larger on desktop/laptop,
   normalize spacing, and center last-child hover/tooltips under the letter. */
/* Double hover text size for tablets and larger screens */
@media (min-width: 768px) {
  .values-outline .letter-hover {
    font-size: clamp(1.8rem, 2.8vw, 2.2rem) !important; /* doubled from mobile size */
    max-width: min(32ch, 70vw); /* slightly wider to accommodate larger text */
  }
}

@media (min-width: 900px) {
  .values-outline {
    gap: 0.45rem !important;
    font-size: clamp(6rem, 9vw, 9.6rem) !important; /* doubled from previous size */
    letter-spacing: normal !important;
  }
  .values-outline .outline-letter { padding: 0 0.25rem !important; }

  /* Center the last letter's hover/tooltip so 'E' shows directly under the letter */
  .values-outline .outline-letter:last-child .letter-hover,
  .values-outline .outline-letter:last-child .letter-tooltip {
    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 0.5rem) !important;
    transform: translate(-50%, 24px) !important;
  }
  .values-outline .outline-letter:last-child:hover .letter-hover,
  .values-outline .outline-letter:last-child:focus .letter-hover,
  .values-outline .outline-letter:last-child:hover .letter-tooltip,
  .values-outline .outline-letter:last-child:focus .letter-tooltip {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 1200px) {
  .values-outline {
    gap: 0.8rem !important;
    font-size: clamp(6.6rem, 8.4vw, 10.8rem) !important; /* doubled from previous size */
  }
}




  
  




/* FAQ page: increase content size by 20% for improved readability.
   Apply scaling only to content panels (avoid scaling hero area so hero size
   remains consistent with other pages). */
.faq main .content-panel {
  zoom: 1.2;
}

@supports not (zoom: 1) {
  .faq main .content-panel {
    transform: scale(1.2);
    transform-origin: 0 0;
    /* reduce layout width so the scaled content doesn't overflow horizontally */
    width: calc(100% / 1.2);
  }
}

/* Ensure section headings inside content panels (e.g. Training Management)
   explicitly use the site heading color. Use !important to override any
   unexpected specificity or inline styles inherited from other rules. */
.content-panel .team-section h2 {
  color: var(--heading) !important;
}


/* Instructor-specific styles removed (page reset). */


/* ensure the cards inside content-panel align as before */
.content-panel .cards{margin-top:1rem}

/* Cards */


.cards-section{padding:2rem 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem}
.card{
  background:#fff;
  padding:0.75rem;
  box-shadow: 
    0 4px 6px -1px rgba(2,10,20,0.1),
    0 2px 4px -1px rgba(2,10,20,0.06);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-height:220px;
  height: auto;
  overflow:visible;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(2,10,20,0.05);
  transform: translateY(0);
}

/* Keep original (pre-change) text/heading colors inside card components */
.card,
.course-card,
.instructor-card,
.facility-card,
.faq-card {
  --text: var(--card-text);
  --heading: var(--card-heading);
}
.card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.card .card-body{
  padding:0.8rem 0.2rem 0.6rem;
}
.card h3{
  margin:0 0 0.4rem;
  color:var(--heading);
  font-size:1.1rem;
  font-weight:bold;
  transition: color 0.3s ease;
}
.card p{
  margin:0;
  color:#2f4b57;
  font-size:0.95rem;
  line-height:1.5;
  transition: color 0.3s ease;
}

/* Card hover effects and interactions */
.card, .card *{text-decoration:none}
.card a, .card h3, .card p{text-decoration:none}
.card:link, .card:visited{color:inherit}

.card:hover, 
.card:focus-within {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 25px -5px rgba(2,10,20,0.1),
    0 10px 10px -5px rgba(2,10,20,0.04);
  border-color: rgba(2,10,20,0.08);
}


.card:hover, 
.card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(2,10,20,0.10), 0 1.5px 6px rgba(2,10,20,0.06);
  border-color: rgba(2,10,20,0.10);
}

.card:hover img,
.card:focus-within img {
  transform: scale(1.01);
}

/* Smooth return to original state */
.card:active {
  transform: translateY(-4px);
  transition-duration: 0.15s;
}

.about-section{display:none}
.site-footer{background:#f4f4f4;color:var(--text);padding:2rem 0;margin-top:0;display:flow-root;overflow:hidden;border-top:1px solid transparent}
.footer-wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.25rem;padding:2rem 0}
.footer-col h4{color:var(--ad-navy);margin:0 0 .5rem}
.footer-logo{font-weight:800;color:var(--ad-navy);font-size:1.25rem;margin-bottom:.5rem}
.footer-desc{color:rgba(2,10,20,0.7);margin:0 0 1rem}
.footer-links ul{list-style:none;padding:0;margin:0}
.footer-links a{color:var(--ad-navy);text-decoration:none}
.footer-contact a{color:var(--ad-navy);text-decoration:none}
.footer-bottom{padding:.75rem 0;border-top:1px solid rgba(2,10,20,0.06);margin-top:0}
.footer-bottom .copy{color:rgba(2,10,20,0.6);font-size:.95rem}
.socials{display:flex;gap:.5rem}
.social-link{display:inline-block;align-items:center;justify-content:center;background:transparent;color:var(--ad-navy);text-decoration:none;padding:4px;position:relative}

/* Social icon images inside footer */
.social-icon{display:block;width:22px;height:22px;object-fit:contain;position:relative;z-index:1;transition:transform .18s ease,filter .18s ease}

/* Hover / focus: show a circular brand-colored background only on hover/focus
   (no permanent square box). The pseudo-element sits behind the icon so by
   default only the icon is visible. */
.footer-socials .social-link::before{display:none}
.footer-socials .social-link:hover .social-icon,
.footer-socials .social-link:active .social-icon{
  /* transient lift while hovering or during mouse/touch active press */
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 18px rgba(2,10,20,0.08);
  filter: invert(54%) sepia(94%) saturate(749%) hue-rotate(-13deg) brightness(101%) contrast(101%);
  /* This filter produces #f6630c for most icons */
  transition: filter .18s;
}

.contact-socials .social-link:hover .social-icon,
.contact-socials .social-link:active .social-icon {
  filter: invert(54%) sepia(94%) saturate(749%) hue-rotate(-13deg) brightness(101%) contrast(101%);
  /* This filter produces #f6630c for most icons */
  transition: filter .18s;
}

.footer-socials .social-link:focus:not(:hover) .social-icon{
  /* If focused via keyboard (and not being hovered), don't apply the lift/tint.
     When hovering with the mouse, :hover rules should take precedence so the
     hover animation still works even if the element is focused after a click. */
  transform: none;
  box-shadow: none;
  filter: none;
}
.footer-socials .social-link{outline:none}
.footer-socials .social-link:focus-visible::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow: 0 0 0 4px rgba(246,99,12,0.12);
  z-index:0;
}


@media (max-width:900px){
  .footer-wrap{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
}
@media (max-width:600px){
  /* Use two columns on small/mobile screens so footer columns appear side-by-side */
  .footer-wrap{grid-template-columns:1fr 1fr;}
}

/* Make footer brand image half-size on mobile (<=720px) */
@media (max-width:720px){
  /* Reduce footer brand image significantly on mobile for compact layout */
  .footer-brand-mark{max-width:140px !important;}
}

/* Live check helper */
.live-check{max-width:var(--max-w);margin:1rem auto;padding:0 1.25rem;font-weight:700}

/* Courses grid and card styles */
.courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.course-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #f4f4f4;
  color: #003c34;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 8px 30px rgba(2,10,20,0.04);
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease;
  cursor: pointer;
}

/* Course card icon (top-right) — consolidated and non-!important for maintainability.
   JS may set the background-image inline; keep background-* properties permissive. */
.course-card .course-icon {
  position: absolute;
  top: 12px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 9999;
  pointer-events: none;
  background-size: 60%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.95;
}



/* Icon in top right corner: box should be transparent so the icon itself
   is visible without a white square. Keep sizing and position. */
/* (Duplicate .course-card .course-icon removed; consolidated above.) */

/* Ensure course cards use the requested light background and never show
   image pseudo-elements unless explicitly set by JS. This keeps the
   visual style consistent with the design: light gray card with dark
   green text. */
.course-card, .course-card .course-summary{
  background-image: none;
  background-color: #f4f4f4; /* light gray */
  color: #003c34;
  transition: background-color 0.4s ease;
}

/* Note: pseudo-element display/opacity handled below; allow JS to control
   ::before when data-has-image is present. Removed forced 'display:none' and
   'background-image:none' overrides that prevented dynamic images from showing. */
.course-summary{position:relative;z-index:2;padding:1rem;display:block;width:100%}
.course-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;position:relative;z-index:3}
.course-title{font-size:1.15rem;margin:0;color:#003c34;font-weight:300}
/* Add small icon in top right */

/* Keep course titles visible on hover/focus of the card
   (hover color is handled in the hover-specific block below) */
.course-tag {
  font-size: 0.875rem;
  color: #003c34;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  background: rgba(0,60,52,0.1);
  padding: 0.25rem 0.5rem;
  transition: none;
  position: relative;
  z-index: 100;
}

.course-tag > div:first-child {
  font-family: 'Certo Sans', 'Montserrat', Arial, sans-serif;
  font-weight: 500 !important;
  margin-bottom: 0.125rem;
  opacity: 0.9;
}

.course-tag > div:last-child {
  font-weight: 300;
  opacity: 0.8;
}
.course-body{margin-top:.75rem;color:#234548}
.course-desc{margin:0 0 .6rem;color:rgba(2,10,20,0.9);font-weight:300}

.course-card p {
  font-weight: 300;
}


.course-card:hover,
.course-card:focus-within{
  /* Only translate for a subtle lift. Removing scale avoids text and image blurring
     caused by subpixel/anti-aliasing during scale animations. */
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,60,52,0.18), 0 1.5px 6px rgba(0,60,52,0.12);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}

/* Course card text highlight on hover */
.course-card:hover .course-title,
.course-card:focus-within .course-title {
  color: #f6630c !important;
  transition: color .18s ease;
  -webkit-font-smoothing: antialiased; /* keep text rendering crisp */
}

/* Ensure the course title is visible and uses the requested green by default */
.course-card .course-title {
  color: #003c34 !important;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* Prevent images from scaling on hover to avoid blurring; keep transform GPU-friendly */
.course-card img,
.course-card .course-icon,
.course-card::before {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 280ms cubic-bezier(.2,.9,.3,1);
}

/* Do not scale images on hover for course cards */
.course-card:hover img,
.course-card:focus-within img {
  transform: translateZ(0);
}



/* Make the entire summary area keyboard accessible and show pointer on hover */
.course-summary{outline:none}
/* show focus ring only for keyboard users; suppress on mouse click */
.course-summary:focus:not(:focus-visible){box-shadow:none;border-radius:0;outline:none}
.course-summary:focus-visible{box-shadow:0 0 0 4px rgba(246,99,12,0.08);border-radius:8px}

.course-card::before {
  content: '';
  position: absolute;
  inset: 0;
  /* make the image cover the card area for visual consistency */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: 0;
  z-index: 0; /* put the image below the overlay and content */
  transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
  mix-blend-mode: normal;
}

/* Show the image when JS marks the card as having an image */
.course-card[data-has-image]::before{opacity:1}

/* Gradient overlay sits above the image to provide readable text contrast */
.course-card .white-box {
  content: '' !important;
  position: absolute !important;
  top: 12px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;
  background-color: transparent !important;
  background-size: 60% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 6px !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}

/* Per-title white-box rules removed — all course cards use the standardized white-box styling */

/* Keep content above overlay */
.course-summary { 
  position: relative; 
  z-index: 2;
}

/* Remove white box background completely */
.course-card .white-box,
.white-box {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Search clear button styling */

/* Search input: show an inline clear '×' icon when it has content.
   We toggle a .has-value class on the input from JS to control visibility. */
.course-search input[type="search"]{
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 2.4rem; /* space for the inline 'x' */
}
.course-search input[type="search"].has-value{
  position: relative;
  background-image: none;
}

/* Create clickable area for the X button */
.course-search input[type="search"].has-value::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  cursor: pointer;
}

/* Add hover effect for the X button area */
.course-search input[type="search"].has-value:hover::after {
  background-color: rgba(246, 99, 12, 0.1);
  border-radius: 50%;
}

/* Add pointer cursor when hovering over the clear button area */
.course-search input[type="search"].has-value::-webkit-search-cancel-button,
.course-search input[type="search"].has-value::after {
  cursor: pointer;
}

/* Create a clickable area over the X button */
.course-search input[type="search"].has-value {
  cursor: text;
}

.course-search input[type="search"].has-value::-webkit-search-cancel-button,
.course-search input[type="search"].has-value ~ .clear-button {
  cursor: pointer;
  padding: 10px;
  margin-right: -10px;
}
.course-search input[type="search"]::-ms-clear{display:none;width:0;height:0}
.course-search input[type="search"]::-ms-reveal{display:none;width:0;height:0}

/* Hide WebKit native search clear/cancel controls so our inline SVG is the
   only visible clear icon (prevents overlapping icons/colors). */
.course-search input[type="search"]::-webkit-search-decoration,
.course-search input[type="search"]::-webkit-search-results-button,
.course-search input[type="search"]::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Custom styling for the search cancel button */
.course-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 7px;
  width: 7px;
  margin-right: 10px;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 24 24'><path fill='%23f6630c' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z'/></svg>") no-repeat 50% 50%;
  background-size: contain;
}

.course-search input[type="search"]::-webkit-search-cancel-button:hover {
  transform: scale(1.1);
}

/* Increase spacing between the instructor search box and the cards on the
   instructors page. Inline styles in `instructors.html` set a small
   margin-bottom; this rule uses higher specificity and !important to
   ensure the larger gap takes effect. Adjust values as needed. */
.instructors .course-search {
  /* doubled gap from previous 2.25rem -> 4.5rem for clearer separation */
  margin-bottom: 4.5rem !important;
}

@media (max-width: 720px) {
  /* Double the mobile gap from 1rem -> 2rem to maintain proportions */
  .instructors .course-search {
    margin-bottom: 2rem !important;
  }
}

/* Normalize appearance for the search input across browsers so removing the
   native cancel doesn't change layout unexpectedly. */
.course-search input[type="search"]{
  -webkit-appearance: none;
  appearance: none;
}

/* No results message */
.no-results{font-size:1rem;color:rgba(2,10,20,0.7);display:none}

/* Animate-in for cards that are revealed after clearing a search */
.course-card.animate-in{animation:cardIn .36s cubic-bezier(.2,.9,.3,1);}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Responsive: stack to two columns then one on small devices */
@media (max-width:1000px){.courses-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.courses-grid{grid-template-columns:1fr}}

/* Allow background images to be set via inline data-image attribute using JS which writes to the ::before pseudo element */
/* Allow JS to set background images on ::before when .course-card has
  data-has-image — do not force background-image to none here. */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .course-card{transition:none}
  .site-footer, .site-footer .footer-wrap > *, .site-footer .footer-bottom-row > *{transition:none !important}
}

/* Modal styles for course details */
.modal{display:none;position:fixed;inset:0;z-index:200000;align-items:center;justify-content:center}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,60,52,0.92);pointer-events:auto;opacity:0;transition:opacity .35s ease}
.modal[aria-hidden="false"] .modal-backdrop{opacity:1}
.modal-panel{position:relative;background:#fff;max-width:95vw;width:95%;padding:3.75rem;box-shadow:0 20px 60px rgba(2,10,20,0.18);transform:translateY(-60px);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .4s ease;z-index:200001}

/* Larger modal on tablets and desktops */
@media (min-width: 768px) {
  .modal-panel {
    max-width: 95%;
    width: 95%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .modal-panel {
    max-width: 90%;
    width: 90%;
    max-height: 95vh;
    padding: 4.5rem;
  }
}

.modal[aria-hidden="false"] .modal-panel{transform:translateY(0);opacity:1}
.modal-media{width:100%;height:300px;border-radius:8px;overflow:hidden;margin-bottom:.8rem;position:relative}
.modal-media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #fff;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .modal-panel,.modal-backdrop,.modal-media{transition:none !important;animation:none !important;transform:none !important}
}
.modal-panel h3{margin:0}
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 2.5rem;
  color: #003c34;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  z-index: 100;
  width: 50px;
  height: 50px;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}
.modal-close:hover {
  color: #f6630c;
  opacity: 1;
}
.modal-close:focus {
  /* Remove the visible orange outline for mouse users (click).
     Keep focus state none here; keyboard users will still see a ring
     via :focus-visible (below). */
  outline: none;
}
.modal-close:focus-visible {
  /* Only show the stronger focus ring when focused via keyboard
     (accessibility preserved). */
  outline: 2px solid #f6630c;
  outline-offset: 2px;
}
.modal-close:active {
  transform: scale(0.95);
}

/* Scoped override: ensure the course modal uses the requested dark green
   for headings and body text so content is readable against the white panel. */
#course-modal .modal-panel,
#course-modal .modal-panel h3,
#course-modal .modal-panel .modal-body,
#course-modal .modal-panel .modal-body p,
#course-modal .modal-panel .modal-body li,
#course-modal .modal-panel .course-tag {
  color: #003c34 !important;
  -webkit-font-smoothing: antialiased;
}

/* Course modal: make the media image slightly smaller (70%) so it has
   comfortable whitespace around it and avoid any visual seam on the
   right edge. We scope this to #course-modal so other modals keep their
   existing behavior. */
/* For the course modal we render an actual <img> element inside .modal-media
   to avoid background-image inheritance issues. Hide the pseudo-element so
   it can't accidentally duplicate or layer images. The sizing for the <img>
   is controlled by the rule below. */
#course-modal .modal-media::after{
  display: none;
}

/* Ensure images inserted into .modal-media are centered and sized to ~70%.
   Keep a max-height so the image never overflows the media area. */
.modal-media img{
  display: block;
  width: 50%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* Instructor modal: image on left side, square format */
#instructor-modal #instructor-modal-media {
  flex-shrink: 0;
  width: 280px;
  height: 320px !important;
  border-radius: 0;
  background-size: cover !important;
  background-position: center center !important;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  display: block;
}

@media (min-width: 900px) {
  #instructor-modal #instructor-modal-media {
    width: 300px;
    height: 360px !important;
  }
}

/* Instructor modal layout improvements: center content, tighten spacing
   and make modal text readable and balanced with the circular avatar. */
#instructor-modal .modal-panel {
  /* Horizontal layout: image left, content right */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  width: min(900px, 92%);
  max-width: 900px;
  max-height: 80vh;
  padding: 2.5rem;
  overflow-y: auto;
  font-size: 0.95rem;
}

#instructor-modal .desc-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0;
  overflow: visible;
}

/* Headings left-aligned for horizontal layout */
#instructor-modal #instructor-modal-title,
#instructor-modal #instructor-modal-titleline {
  /* Align exactly with modal body content */
  padding-left: 0;
  padding-right: 0;
  font-weight: 500 !important;
  position: relative;
  padding-bottom: 0.5rem;
  color: #003c34;
}

/* Add orange line under title */
#instructor-modal #instructor-modal-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #f6630c;
  margin: 6px 0 0 0;
  border-radius: 2px;
  opacity: 0.95;
}

#instructor-modal #instructor-modal-titleline {
  text-align: left;
  margin: 0 0 1rem 0;
  color: rgba(0,60,52,0.7);
  flex-shrink: 0;
  font-size: 1rem;
}

/* Wrapper for all scrollable content */
#instructor-modal .modal-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: visible !important;
  flex: 1;
  min-height: 0;
  max-height: none;
  padding-right: 0.5rem;
#instructor-modal {
  max-height: 80vh;
  overflow-y: auto;
}
}

/* Modal body sections: left-aligned for horizontal layout */
#instructor-modal .modal-body {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0 !important;
  overflow: visible !important;
  flex: 0 0 auto;
}

#instructor-modal .modal-body h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #003c34;
}

#instructor-modal .modal-body ul li {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Modern, brand-aligned scrollbar styling inside the modal */
#instructor-modal .modal-content-wrapper::-webkit-scrollbar {
  width: 8px !important;
}
#instructor-modal .modal-content-wrapper::-webkit-scrollbar-track {
  background: rgba(0,60,52,0.05) !important;
  border-radius: 4px !important;
}
#instructor-modal .modal-content-wrapper::-webkit-scrollbar-thumb {
  background: #f6630c !important;
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

#instructor-modal .modal-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #d45509 !important;
  background-clip: padding-box !important;
}

#instructor-modal .modal-body ul {
  display: inline-block;
  text-align: left;
  margin: 0.5rem 0 0 0;
  padding-left: 1.2rem;
  list-style-position: outside;
}

/* Contact email styling - match other content */
#instructor-modal #instructor-modal-contact a {
  color: #003c34;
  text-decoration: none;
  font-weight: inherit;
}

@media (max-width: 768px) {
  /* Switch to vertical layout on mobile */
  #instructor-modal .modal-panel { 
    flex-direction: column;
    align-items: center;
    width: calc(100% - 2rem); 
    padding: 1.5rem; 
    gap: 1rem;
  }
  
  #instructor-modal #instructor-modal-media { 
    width: 180px; 
    height: 220px !important; 
    border-radius: 8px; 
  }
  
  #instructor-modal #instructor-modal-title {
    text-align: center !important;
  }
  
  /* Center the orange line on mobile */
  #instructor-modal #instructor-modal-title::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  #instructor-modal #instructor-modal-titleline {
    text-align: center !important;
  }
  
  /* Ensure body content stays left-aligned - v2 */
  #instructor-modal .modal-body,
  #instructor-modal .modal-body p,
  #instructor-modal .modal-body ul,
  #instructor-modal .modal-body li,
  #instructor-modal .modal-body h4 {
    text-align: left !important;
  }
  
  /* Make image sharp on mobile */
  #instructor-modal #instructor-modal-media {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Mobile-specific adjustments to prevent modal from expanding too tall
   and to keep text sizes comfortable on small screens. */
@media (max-width: 600px) {
  /* Center the modal on mobile */
  #instructor-modal {
    align-items: center;
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #instructor-modal .modal-panel {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 8vh);
    /* keep the same internal-scroll approach: desc-card scrolls; limit panel height */
    overflow: hidden;
    padding: 0.9rem 0.75rem;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.12);
    font-size: 0.88rem; /* compact mobile text to fit content */
    display: flex;
    flex-direction: column;
  }

  #instructor-modal .desc-card {
    gap: 0.35rem;
    /* desc-card no longer scrolls - contains wrapper that scrolls */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
  }
  
  /* Make modal-content-wrapper scroll on mobile too */
  #instructor-modal .modal-content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important; /* Remove max-height on mobile */
  }

  #instructor-modal .modal-body {
    padding: 0.5rem 0 !important;
    line-height: 1.45;
    font-size: 0.86rem;
    text-align: left;
    overflow: visible !important; /* No scrolling on modal-body */
    flex: 0 0 auto;
  }
  
  /* Modern scrollbar for mobile modal-content-wrapper */
  #instructor-modal .modal-content-wrapper::-webkit-scrollbar {
    width: 8px !important;
  }
  #instructor-modal .modal-content-wrapper::-webkit-scrollbar-track {
    background: rgba(0,60,52,0.05) !important;
    border-radius: 4px !important;
  }
  #instructor-modal .modal-content-wrapper::-webkit-scrollbar-thumb {
    background: #f6630c !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
  }
  #instructor-modal .modal-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: #d45509 !important;
    background-clip: padding-box !important;
  }

  /* Make sure lists don't overflow horizontally and remain readable */
  #instructor-modal .modal-body ul {
    max-width: 100%;
    margin-left: 0.6rem;
  }

  /* Make avatar larger on mobile */
  #instructor-modal #instructor-modal-media { width: 140px; height: 140px !important; }
  
  /* Make list items smaller on mobile so they fit comfortably */
  #instructor-modal .modal-body ul li { font-size: 1.0rem; }
}

/* Keep the duration/course-tag in the course modal on a single line.
   Use inline-flex and prevent wrapping so the tag doesn't break into two
   lines. This ensures consistent tag appearance across modals. */
#course-modal .course-tag{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  padding: 0.25rem 0.6rem !important;
}

/* Make course modal match the instructor modal: medium width and internal scrolling
   so long content doesn't expand the panel and the header stays visible. */
#course-modal .modal-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(720px, 92%);
  max-width: 720px;
  max-height: 70vh; /* medium modal height on desktop */
  padding: 1.25rem;
  overflow: hidden; /* desc area will scroll internally */
  font-size: 0.9rem;
}

/* Course modal header: left-align the title while keeping the tag aligned to the right */
#course-modal .modal-header {
  width: 100%;
  text-align: left;
  align-items: center;
}

#course-modal .modal-header h3 {
  margin: 0;
  text-align: left; /* ensure the title itself is left-aligned */
  font-weight: 300;
  position: relative;
  padding-bottom: 0.5rem;
}

/* Add orange line under course modal title */
#course-modal .modal-header h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #f6630c;
  margin-top: 6px;
  border-radius: 2px;
  opacity: 0.95;
}

#course-modal .modal-header .course-tag {
  margin-top: 0.5rem;
}

#course-modal .modal-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

#course-modal .modal-footer-left {
  flex: 1;
}

#course-modal .modal-footer .btn-small {
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 1.75rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The main body area should scroll internally when content is long. */
#course-modal #course-modal-body {
  width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.5rem; /* room for scrollbar */
}

/* Ensure other modal-body sections inside the panel are full-width and readable */
#course-modal .modal-body {
  width: 100%;
  text-align: left; /* content left-aligned; title/header stays centered */
}

/* Small scrollbar styling to match instructor modal scroller */
#course-modal #course-modal-body::-webkit-scrollbar {
  width: 8px;
}
#course-modal #course-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
#course-modal #course-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
}

/* Tablet adjustments: center panel and slightly reduce text size */
@media (min-width: 601px) and (max-width: 900px) {
  #course-modal { align-items: center; padding-left: 1rem; padding-right: 1rem; }
  #course-modal .modal-panel { width: min(640px, 94%); max-width: 640px; max-height: 72vh; overflow: hidden; padding: 1rem; font-size: 0.95rem; }
  #course-modal #course-modal-body { flex: 1 1 auto; overflow-y: auto; }
}

/* Mobile adjustments: center the modal */
@media (max-width: 600px) {
  #course-modal { align-items: center; justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
  #course-modal .modal-panel {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    padding: 0.9rem 0.75rem;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.12);
    font-size: 0.88rem;
  }
  #course-modal #course-modal-body { gap: 0.35rem; flex: 1 1 auto; overflow-y: auto; }
  #course-modal .modal-body { padding: 0.35rem 0; line-height: 1.45; font-size: 1.05rem; text-align: left; }
}




/* Instructor modal/styles removed (page reset). */

/* Contact page: two-column layout (form + right panel) */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:3rem;align-items:start;padding:1.25rem 0}
.contact-form h1{font-size:1.26rem;color:var(--ad-navy);margin:0 0 1.25rem}
.contact-form .form-grid{display:flex;flex-direction:column;gap:1rem}
.form-row.two-cols{display:flex;gap:1rem}
.form-row.two-cols input{flex:1}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="tel"],.form-row textarea{
  width:100%;
  padding:0.9rem 1rem;
  border:1px solid rgba(2,10,20,0.12);
  background:#fff;
  font-weight: 300;
  font-family:'Certo Sans', sans-serif;
  color:var(--text);
  transition: all 0.3s ease;
}

/* Contact form heading styles */
.contact-form h1 { 
  font-size: 1.26rem;
  color: #003c34;
  margin: 0 0 1.25rem;
  font-weight: 300; /* Make font weight light */
}

/* Invalid field styling */
.form-row input.error,
.form-row textarea.error {
  border-color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.05);
  box-shadow: 0 0 0 1px #ff3b30;
}

/* Custom popup styles */
.form-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 1000;
  text-align: center;
}

.form-popup.show {
  display: block;
  animation: popupFadeIn 0.3s ease-out;
}

.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

.popup-overlay.show {
  display: block;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.form-row textarea{resize:vertical;min-height:180px}

/* Google Maps container styling */
.form-row.map-container {
  margin-top: 2rem;
}

.form-row.map-container h3 {
  font-size: 1.26rem;
  color: var(--ad-navy);
  margin: 0 0 1rem;
}

.form-row.map-container iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact-panel{background:linear-gradient(180deg,rgba(3,63,52,0.92),rgba(3,63,52,0.9));color:#fff;padding:2.25rem;}
.contact-panel-inner{display:flex;flex-direction:column;gap:0}
.contact-logo{width:160px;height:auto;display:block;margin:0 0 1.2rem}
.contact-address{font-weight:700;margin:0 0 0.5rem;color:#ffffff !important}
.contact-field{margin:0}
.cf-label{font-size:0.85rem;color:rgba(255,255,255,0.65);letter-spacing:0.8px;margin-bottom:0.25rem}
.cf-value{font-size:1.05rem;font-weight:250;margin:0;color:#ffffff}
.cf-value a{color:#ffffff;text-decoration:none;font-weight:250}
.cf-value a:hover,.cf-value a:focus{color:#f6630c}
.sep-line{height:1px;background:rgba(255,255,255,0.06);margin:1rem 0}
.follow{font-size:0.85rem;color:rgba(255,255,255,0.7);letter-spacing:0.6px;margin:0.5rem 0}
.contact-socials{display:flex;gap:.6rem;margin:0}

/* Evenly space the major sections inside the contact panel */
.contact-panel-inner{display:flex;flex-direction:column;height:100%;justify-content:space-between}

/* Make each logical block visually separated and occupy full width */
.contact-panel-inner > *{width:100%}
.contact-socials .social-icon{filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg);} 

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:1.25rem}
  .contact-panel{order:2}
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-right:52px;
  margin-bottom: 1rem;
}
.modal-body{
  margin-top:.85rem;
  color:var(--text);
  font-weight: 200;
  line-height: 1.6;
  font-size: 1.05rem;
}
.modal-body p {
  margin-bottom: 1rem;
  font-weight: 200;
  font-size: 1.05rem;
}
.modal-body ul {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.modal-body li {
  margin-bottom: 0.5rem;
  font-weight: 200;
  font-size: 1.05rem;
}

/* Ensure modal headings and body text use the global site color (--text).
   Use a stronger selector for the instructor modal titleline to override
   any inline styles that may be present in the markup. */
.modal-panel h3,
.modal-panel p,
.modal-panel .modal-body,
#instructor-modal #instructor-modal-titleline {
  color: var(--text) !important;
}

/* Ensure modal is usable on small displays */
@media (max-width:520px){
  .modal-panel{padding:0.9rem;width:96%;border-radius:8px}
  .modal-close{right:8px;top:8px}
  
  /* Override for amenities modal on mobile */
  #amenities-modal .modal-close {
    position: fixed !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    color: white !important;
    z-index: 999999 !important;
  }
}

/* When a modal is open, dim the background content */
.modal-backdrop{background:#003c34}
body.modal-open .site-footer{pointer-events:none}
.modal{z-index:200100}


/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-media img{max-width:100%}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .header-inner{gap:.5rem}
  .brand-main{font-size:1rem}
  .hero h1{font-size:1.4rem}
 }

/* Footer reveal animation
  Use opacity + slight scale instead of a large translateY to avoid showing
  a white gap beneath the footer during the animation. */
.site-footer{
  /* start slightly hidden; will slide in when .in-view is added */
  opacity:0;
  transform:translateY(12px);
  /* slower, more-visible slide for the entire footer */
  transition: transform 900ms cubic-bezier(.22,.9,.3,1), opacity 900ms cubic-bezier(.22,.9,.3,1);
}

.site-footer.in-view{
  opacity:1;
  transform:translateY(0);
}

/* If JS animation class isn't added, ensure footer is visible on the FAQ page
   (prevents footer from remaining hidden on static previews). */
.faq .site-footer{
  opacity:1 !important;
  transform:none !important;
}

/* Ensure footer columns on FAQ match the standard layout and don't force min-width
   which can break the layout on short, single-column pages. This keeps the same
   visual arrangement as Contact page. */
/* Keep the footer visible on FAQ if JS animation class isn't added */

/* Staggered child reveal: animate footer columns and bottom-row children
   slightly after the container so the whole footer motion is obvious. */
.site-footer .footer-wrap > *,
.site-footer .footer-bottom-row > * {
  opacity:0;
  transform:translateY(8px);
  transition: transform 700ms cubic-bezier(.22,.9,.3,1), opacity 700ms cubic-bezier(.22,.9,.3,1);
  transition-delay: 0ms; /* base state: no delay */
}

.site-footer.in-view .footer-wrap > *,
.site-footer.in-view .footer-bottom-row > * {
  opacity:1;
  transform:translateY(0);
}

/* Stagger delays for a pleasing cascade (increase as needed) */
.site-footer.in-view .footer-wrap > *:nth-child(1){transition-delay:120ms}
.site-footer.in-view .footer-wrap > *:nth-child(2){transition-delay:240ms}
.site-footer.in-view .footer-wrap > *:nth-child(3){transition-delay:360ms}
.site-footer.in-view .footer-wrap > *:nth-child(4){transition-delay:480ms}
.site-footer.in-view .footer-bottom-row > *:nth-child(1){transition-delay:600ms}
.site-footer.in-view .footer-bottom-row > *:nth-child(2){transition-delay:720ms}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-footer{transition:none !important;transform:none !important;opacity:1 !important}
}

/* Updated footer layout to match Arabian Drilling style */
.footer-wrap{display:grid;grid-template-columns:3fr 1fr 1fr 1fr;gap:2.5rem;align-items:start}
.footer-brand{display:flex;align-items:flex-start}
.footer-brand img{display:block;width:100%;height:auto;max-width:900px;object-fit:contain}
.footer-desc{color:rgba(2,10,20,0.65);margin:0 0 1rem;font-weight:300}
.footer-contact-compact{color:var(--text);font-weight:300}
.footer-contact-compact a{color:var(--ad-navy);text-decoration:none;transition:color .18s ease}
.footer-contact-compact a:hover,
.footer-contact-compact a:focus{
  color:#f6630c;
}
.footer-links-col{display:flex;align-items:flex-start}
.footer-links-list{list-style:none;margin:0;padding:0}
.footer-links-list li{margin-bottom:.6rem}
.footer-links-list a{color:#6b6b6b;text-decoration:none;font-weight:700;display:inline-block;padding:0.35rem 0.25rem;border-radius:6px;text-transform:none}

/* Make footer link columns behave like the navbar: hover/focus shows orange color */
.footer-links-list a:hover,
.footer-links-list a:focus{
  color:#f6630c;
  outline:none;
  text-decoration:none;
}

/* Mobile/tap affordance: slight background tint on active */
.footer-links-list a:active{
  background:rgba(246,99,12,0.06);
}

.footer-bottom-row{display:flex;align-items:center;justify-content:space-between;padding-top:1.25rem;border-top:1px solid rgba(2,10,20,0.06);gap:1rem}
.footer-bottom-left{display:flex;flex-direction:column;gap:.45rem}
.footer-bottom-right img{display:block; }
  /* Reduce Vision 2030 mark size by half for visual balance */
  .footer-bottom-right .footer-mark{max-width:110px;opacity:.95;display:block}

/* Brand mark sizing: 300% of original 180px -> 540px */
.footer-brand-mark{width:100%;max-width:900px;display:block;margin:0;padding:0}
/* Remove forced min-width so the image doesn't get distorted on smaller viewports */
.footer-brand-mark{min-width:0}

/* Center the three columns and align items horizontally */
.footer-center{display:flex;gap:5.2rem;align-items:flex-start;justify-content:space-between;width:62%;min-width:680px;margin-left:auto;padding-top:.1rem;transform:translateX(15%)}
.footer-center .footer-col{min-width:160px;flex:1}

/* Desktop: nudge the footer link columns (Company/Services/Courses/Instructors/Contact Us)
   15% to the right so they sit visually offset from the brand block. This only
   applies on wider screens to avoid breaking the responsive layout. */
@media (min-width:900px){
  .footer-center .footer-links-col{
    transform: translateX(15%);
    transition: transform 900ms cubic-bezier(.22,.9,.3,1);
  }
}

/* Make the contact column 50% wider than the other two columns */
.footer-center .footer-contact-compact{flex:1.5}
.footer-center .footer-links-col{flex:1}

/* Ensure the contact block sits at the top and its items align neatly */
.footer-contact-compact{align-self:flex-start}
.footer-contact-compact p{margin:0 0 .6rem;color:#2f4b57;font-weight:700}
.footer-contact-compact a{color:#2f4b57;font-weight:700;text-decoration:none}

/* Make the link columns dark grey and bold */
.footer-links-list a{
  color: #6B7280;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Footer nav links styles */
.footer-center .footer-links-col,
.footer-center .footer-links-col .footer-links-list,
.footer-center .footer-links-col .footer-links-list a{
  color: #6B7280;
}

.footer-center .footer-links-col h4{color:#2f4b57}

/* Blend the footer brand mark and the Vision 2030 mark with the footer background.
   mix-blend-mode helps white areas pick up the footer color and appear transparent.
*/



.footer-col.footer-brand img,
.footer-bottom-right .footer-2030{
  mix-blend-mode: multiply; /* try multiply for subtle blending */
  background: transparent;
  filter: none;

}

/* Slightly reduce opacity for better blend on light backgrounds */
.footer-col.footer-brand img{opacity:0.98}
.footer-bottom-right .footer-2030{opacity:0.92}
.small-links a{color:rgba(2,10,20,0.6);text-decoration:none;margin-right:.45rem}
.small-links a:hover{color: #f6630c;}
.small-links .sep{color:rgba(2,10,20,0.35);margin:0 .45rem}
.copy{color:rgba(2,10,20,0.6);font-size:.93rem}

/* (Reverted site-wide text-contrast override — individual components continue
   to use their original color rules and the site variables above control
   the overall palette.) */

/* responsive adjustments for footer */
@media (max-width:900px){
  .footer-wrap{grid-template-columns:1fr;grid-auto-rows:auto}
  .footer-center{flex-direction:column;gap:1rem;width:100%;min-width:0}
  .footer-bottom-row{flex-direction:column;align-items:flex-start}
  /* Footer bottom keeps default alignment on mobile (no forced align-self) */
}

/* Strong override: make footer brand image half-size on mobile */
@media (max-width:720px){
  .footer-brand-mark{max-width:140px !important}
}

/* Tablet override: restore footer brand image size for iPad */
@media (min-width: 721px) and (max-width: 900px) {
  .footer-brand-mark{max-width:200px !important}
}

/* Strong override for mobile: slightly reduce footer side padding so the
   Vision 2030 image text lines up with the disclaimer. Scoped to <=720px. */

/* Reverted Vision 2030 mobile override per user request. Keep prior padding rules. */

/* Mobile footer: align content with the disclaimer (left edge) and keep
   side padding so text doesn't touch the viewport edges. Applies to <=720px. */
@media (max-width:720px){
  /* Slightly reduce horizontal padding to bring Vision mark inline with disclaimer */
  .site-footer .container{padding-left:0.85rem;padding-right:0.85rem}
  /* Remove visual offset and align left so items line up with other container content */
  .footer-center{width:100%;margin-left:0;justify-content:flex-start;align-items:flex-start;gap:1rem;transform:none;padding-left:0}
  .footer-center .footer-col{min-width:0;text-align:left}
  .footer-contact-compact{align-items:flex-start}
  .footer-links-list{display:block;margin:0;padding:0}
  .footer-links-list li{margin-bottom:.5rem}

  /* Align Vision 2030 mark and text with disclaimer and other footer content on mobile.
     This removes auto-centering and left margins that previously offset the mark. */
  .footer-bottom-right{
    align-self: flex-start; /* ensure the block sits at the start of the column */
    margin-left: 0 !important;
    padding-left: 0;
  }

  .footer-bottom-right img,
  .footer-bottom-right .footer-mark,
  .footer-bottom-right .footer-2030{
    display: block;
    margin-left: 0 !important; /* override any centering rules */
    max-width: 80px; /* halved for mobile */
    height: auto;
  }
}

/* Tablet override: restore Vision 2030 logo size for iPad */
@media (min-width: 721px) and (max-width: 900px) {
  .footer-bottom-right img,
  .footer-bottom-right .footer-mark,
  .footer-bottom-right .footer-2030{
    max-width: 120px !important;
  }
}

@media (max-width:420px){
  .site-footer .container{padding-left:1rem;padding-right:1rem}
  .footer-center{gap:0.8rem}
  .footer-links-list a{display:block}
  /* On very small phones, shrink the Vision mark and remove any leftover left gap */
  .footer-bottom-right img,
  .footer-bottom-right .footer-mark,
  .footer-bottom-right .footer-2030{
    max-width:120px !important;
    margin-left:0 !important;
  }
}

/* Fix: stop hero2 zoom-loop on small screens and make the image fill the container
   - Disable the slow-zoom animation pseudo-element on mobile
   - Force the background to cover the section so it doesn't repeat/leave gaps
   This targets the home page second hero (.home .image-hero.color-2) specifically. */
@media (max-width: 900px) {
  .home .image-hero.color-2,
  .image-hero.color-2 {
    /* Ensure the inline style (background-size:100% 100%) doesn't stretch oddly on mobile */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Remove the ::before animated pseudo-image on narrower viewports so the
     visible background (set via inline style or CSS) simply covers the area. */
  .home .image-hero.color-2::before,
  .image-hero.color-2::before {
    animation: none !important;
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Stronger mobile override to ensure only the inline/background image is visible
     and fills the container (prevents any duplicated visual layers). Targets
     narrower phones explicitly and forces overflow hidden so no pseudo-elements
     or repeated backgrounds leak into view. */
  @media (max-width: 720px) {
    .home .image-hero.color-2,
    .image-hero.color-2 {
      overflow: hidden !important;
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      background-attachment: scroll !important;
      /* remove any inline background-size that may force stretching */
      min-height: 36vh; /* keep hero tall enough on small phones but let content control exact height */
    }

    .home .image-hero.color-2::before,
    .image-hero.color-2::before {
      display: none !important;
      animation: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
      height: 0 !important;
      width: 0 !important;
    }
  }
}




/* bottom cap element (for end of the vertical line) */
@media (max-width:900px){
}


/* Stronger specificity for footer link hover/focus to ensure orange tint
   applies even when other footer color rules appear later in the file. */
.footer-center .footer-links-col .footer-links-list a:hover,
.footer-center .footer-links-col .footer-links-list a:focus,
.footer-center .footer-links-col .footer-links-list a:focus-visible{
  color: #f6630c !important;
  outline: none;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 300;
}

/* Mobile header adjustments: keep compact spacing but allow JS to control .scrolled state
   so the header can respond to scroll on small viewports as well. */
@media (max-width:720px){
  /* Keep compact inner spacing on mobile */
  .site-header .header-inner{
    padding-top:0.4rem !important;
    padding-bottom:0.4rem !important;
    min-height:48px !important;
  }

  /* Slightly cap logo size on mobile */
  .site-header .logo-img{max-height:59px !important}

  /* Use a compact nav link size on mobile */
  .site-header .site-nav a{font-size:.9rem !important;padding:0.25rem 1rem !important}

  /* Reduce heavy transitions on some header pieces to avoid jank while still
     allowing the script to toggle the .scrolled state. */
  .site-header .header-top, .site-header .header-inner, .header-main-row::before, .header-top .arabic{transition:opacity 150ms ease, transform 150ms ease}
}

/* Mobile: ensure consistent horizontal padding for all container content so text doesn't touch the viewport edges */
@media (max-width:720px){
  .container{padding-left:1rem !important;padding-right:1rem !important}
  .our-facility .content-panel.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .our-facility .facility-section {
    margin: 1.5rem auto;
    /* match the global container padding on mobile for consistent alignment */
    padding: 1.5rem 1rem;
  }
}
/* Slightly larger padding on very small phones */
@media (max-width:420px){
  .container{padding-left:1.1rem !important;padding-right:1.1rem !important}
}

/* Instructor card hover effects: lift + orange text */
.instructor-card{
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease;
  transform: translateY(0);
}

.instructor-card:hover,
.instructor-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(2,10,20,0.10), 0 1.5px 6px rgba(2,10,20,0.06);
}
/* Orange text color on hover/focus */
.instructor-card:hover h3,
.instructor-card:hover p,
.instructor-card:focus-within h3,
.instructor-card:focus-within p{
  color: #f6630c;
  transition: color .18s ease;
}
/* Reset transform when clicked (active state) */
.instructor-card:active{
  transform: translateY(0);
  transition: transform .14s ease;
}


/* Smooth collapse/expand for team sections when filtering instructors.
   We animate opacity, transform and max-height to provide a smooth
   transition without layout jank. The `.collapsed` class is toggled by
   JavaScript when a section should be hidden during search. */
.team-section{
  overflow: visible;
  transition: max-height 320ms cubic-bezier(.2,.9,.25,1), opacity 240ms ease, transform 240ms ease, margin 240ms ease, padding 240ms ease;
  /* Remove max-height constraint to accommodate any number of cards */
  max-height: none;
  opacity: 1;
  transform: translateY(0);
}
.team-section.collapsed{
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
  overflow: hidden !important;
}

/* Strong override: ensure facility heroes match Contact hero styling exactly */
body.facility .image-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* same as contact */
  justify-content: center; /* center vertically */
  position: relative;
}

body.facility .image-hero .hero-text-container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: left; /* same alignment as contact */
}

body.facility .image-hero .hero-contact{
  color: var(--contact-hero-color, #f6630c) !important;
  font-size: clamp(24px, 5.1vw, 48px) !important;
  font-family: 'Certo Sans', sans-serif;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 0 8px 24px rgba(2,10,20,0.48);
  margin-bottom: 0.5rem;
}

body.facility .image-hero .hero-contact-subtitle{
  color: #ffffff !important;
  font-size: clamp(14px, 2.55vw, 20px) !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-shadow: 0 4px 12px rgba(2,10,20,0.48);
}

@media (max-width:720px){
  body.facility .image-hero .hero-text-container{padding-left:1rem;padding-right:1rem}
  body.facility .image-hero .hero-contact{font-size:24px;text-align:left;margin-bottom:0.4rem}
  body.facility .image-hero .hero-contact-subtitle{font-size:14px}
}



/* ====== Training Overview: moved from inline styles in training-overview.html ====== */
.training-overview .image-hero{
  background-image: url('../images/2013.svg');
  background-size: 100% 100%;
  background-position: center;
}
.training-overview .values-inner{ padding: 0; }
.training-overview .portfolio-panel{
  background: transparent;
  border-radius: 0; /* sharp edges for portfolio container */
  box-shadow: none; /* remove soft shadow so image edges read sharp */
  /* reduce horizontal padding and allow the panel to use nearly full viewport width */
  padding: 1rem 0;
  margin: 0 auto;
  max-width: 100vw; /* allow images to scale to the viewport */
}
.training-overview .section-header{ text-align: center; }
.training-overview .section-header .values-headline{ color: #f6630c; margin-bottom: 2rem; }

.training-overview .portfolio-images{
  display: flex;
  gap: 0.75rem; /* tighten gap to reduce forced horizontal cropping */
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.training-overview .portfolio-item{
  flex: 1 1 50%;
  max-width: 50%; /* each image takes half the available width */
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* ensure no extra inner spacing */
}
.training-overview .portfolio-image{
  width: 100%;
  height: auto; /* let width drive height via aspect-ratio */
  aspect-ratio: 16 / 9; /* reasonable default aspect ratio for portfolio images */
  max-height: 88vh; /* increased ~25% so images appear larger */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* fit the whole image inside the panel (no side-cropping) */
  background-color: var(--muted); /* neutral backdrop for letterboxing when using contain */
  border-radius: 0; /* make image edges sharp */
  box-shadow: none; /* remove soft shadow */
}
.training-overview .portfolio-image .accreditation-media { width: 100%; height: 100%; }
.training-overview .portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
}
.training-overview .portfolio-image--1{ background-image: url('../images/portfolio1.png'); }
.training-overview .portfolio-image--2{ background-image: url('../images/Portfolio2.png'); }
.training-overview .feature-panels-cta{ margin-top: 2.5rem; justify-content: center; display:flex; gap:1.5rem; }

/* Responsive: use max-height limits instead of fixed pixel heights so the
   panels scale proportionally and hug the images without leaving white
   bands above/below. */
@media (max-width: 1024px){ .training-overview .portfolio-image{ max-height: 63vh; aspect-ratio: 3 / 2; } }
@media (max-width: 768px){ .training-overview .portfolio-image{ max-height: 50vh; aspect-ratio: 4 / 3; } }
@media (max-width: 420px){ .training-overview .portfolio-image{ max-height: 38vh; aspect-ratio: 4 / 3; } }

/* Prevent any child overflow and ensure the image block always fits inside
  the portfolio item container */
.training-overview .portfolio-item{ overflow: hidden; }

/* Footer compact contact tweaks moved from inline HTML */
.footer-contact-compact p.footer-phone{ font-weight:700; margin-bottom:.45rem; }
.footer-contact-compact p.footer-email{ margin:0 0 .6rem; }
.footer-contact-compact .footer-socials{ margin-bottom:.6rem; }

/* Keep these rules very specific to avoid surprising other pages */
.training-overview .section-header.feature-panels-header { padding-bottom: 0.5rem; }

/* End moved CSS block */

/* ====== Site: migrated inline styles from HTML files ====== */

/* Page-specific hero background images (migrated from inline style attributes) */
.home .image-hero.color-1{ background-image: url('../images/ADLAcenter.svg'); background-size: 100% 100%; background-position: center; }
.home .image-hero.color-2{ background-image: url('../images/hero2.svg'); background-size: 100% 100%; background-position: center; }
.courses .image-hero.color-1{ background-image: url('../images/faq.svg'); background-size: 100% 100%; background-position: center; }
.our-facility .image-hero.color-1{ background-image: url('../images/facility.svg'); background-size: 100% 100%; background-position: center; }
.our-facility .image-hero.color-2{ background-image: url('../images/ADLAcenter.svg'); background-size: cover; background-position: center; }

/* Scoped helpers migrated from inline styles in src/our-facility.html */
.our-facility .bleed-section {
  background: var(--muted);
  margin: 0 -9999px;
  padding: 3rem 9999px;
}
.our-facility .bleed-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; }
.our-facility .section-header.feature-center { text-align: left; max-width: 100%; margin: 0 0 2rem; padding: 0; }
.our-facility .intro-text { 
  color: var(--text); 
  font-size: 1.4rem;
  line-height: 1.5;
  opacity: 1;
  max-width: none;
}

.our-facility .values-inner { display: flex; align-items: center; justify-content: center; padding: 0.8rem 0; }
.our-facility .content-panel--overlay {
  background: rgba(255,255,255,0.96);
  padding: 0.85rem 1.6rem;
  border-radius: 0; /* sharp edges to match training overview */
  box-shadow: none; /* remove soft shadow so panel edges read sharp */
  max-width: 1200px;
  margin: 0 auto;
  transform: translateY(5vh) scale(1.05);
  transform-origin: center;
}
.our-facility .feature-panels-row { margin-top: 0.5rem; }
.our-facility .feature-panels-inner { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; padding: 0.5rem 0 0.25rem; }
.our-facility .feature-panels-cta { display:flex; justify-content:center; gap:1rem; margin-top:0.25rem; padding-bottom: 0; }

/* Footer contact overrides for facility page (use shared classes) */
.our-facility .footer-contact-compact p.footer-phone { font-weight:700; margin-bottom:.45rem; }
.our-facility .footer-contact-compact p.footer-email { margin:0 0 .6rem; }
.our-facility .values-headline { color: #f6630c; }
.our-facility .feature-panels-header { text-align: center; }
.instructors .image-hero.color-1{ background-image: url('../images/ourteam.svg'); background-size: 100% 100%; background-position: center; }
.accreditations .image-hero.color-1{ background-image: url('../images/accreditations.svg'); background-size: 100% 100%; background-position: center; }
.faq .image-hero.color-1{ background-image: url('../images/faq1.svg'); background-size: 100% 100%; background-position: center; }
.contact .image-hero.color-1{ background-image: url('../images/2013.svg'); background-size: 100% 100%; background-position: center; }
.privacy-policy .image-hero.color-1{ background-image: url('../images/privacypolicy.svg'); background-size: 100% 100%; background-position: center; }
.simulation-center .image-hero.color-1{ background-image: url('../images/Simulator.svg'); background-size: 100% 100%; background-position: center; }
.disclaimer .image-hero.color-1{ background-image: url('../images/disclaimer.svg'); background-size: 100% 100%; background-position: center; }

/* Full-bleed muted background helper (used on facility and similar pages) */
.full-bleed-muted { background:#f4f4f4; margin:0 -9999px; padding:3rem 9999px; }

/* Feature panels grid helper (our-facility) */
.our-facility .feature-panels-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin:0; padding: 0; }
.our-facility .values-inner.container{ display:flex; align-items:center; justify-content:center; padding:0.8rem 0; }
.our-facility .content-panel.learning-solutions{ background: rgba(255,255,255,0.96); padding:0.5rem 1.6rem 0.25rem; border-radius:0; box-shadow:none; max-width:1200px; margin:0 auto; transform: translateY(0) scale(1.05); transform-origin:center; min-height: 0; height: auto; }
.our-facility .feature-panels-inner{ display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.our-facility .feature-panels-cta{ display:flex; justify-content:center; gap:1rem; margin-top:1.25rem; }

/* Search controls used on courses & instructors pages (migrated inline rules) */
.courses .course-search, .instructors .course-search { margin:1rem 0 0.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.courses .course-search label, .instructors .course-search label { font-weight:600; min-width: max-content; }
.courses .course-search input[type="search"], .instructors .course-search input[type="search"] { flex:1; min-width:200px; padding:.5rem .75rem; border:1px solid rgba(2,10,20,0.08); font-size:clamp(.875rem,2vw,.95rem); border-radius:4px; }
.courses #course-search-count, .instructors #instructor-search-count { min-width:max-content; text-align:right; color:rgba(2,10,20,0.6); font-size: clamp(.875rem,2vw,.95rem); }
.courses #course-no-results, .instructors #instructor-no-results { display:none; margin-top:.5rem; color: rgba(2,10,20,0.7); font-weight:700; }

/* Modal body border variant (used where modal content had a top border inline) */
.modal-body--with-border { 
  border-top: 1px solid rgba(0,0,0,0.1); 
  margin-top: 1rem !important; 
  padding-top: 0 !important; 
}
.modal-heading { font-weight:270; margin-bottom:0.5rem; }

/* Footer compact contact (replace inline footer rules) */
.footer-contact-compact .footer-phone{ font-weight:700; margin-bottom:.45rem; }
.footer-contact-compact .footer-email{ margin:0 0 .6rem; }
.footer-contact-compact .footer-socials{ margin-bottom:.6rem; }

/* Small utility for content-panel padding used on privacy/disclaimer pages */
.privacy-policy .content-panel, .disclaimer .content-panel { padding:2rem 0; }


/* Keep these site-migrated rules last so they can override defaults if needed */

/* ====== end migrated site CSS ====== */

/* Make "View Full Timeline" link consistent with other links */
.text-center {
  text-align: center;
}

/* Responsive headers & safe-area support
   - Make H1/H2/H3 scale smoothly across devices, including foldables and very
     narrow viewports. Use clamp() so desktop sizes remain large while phones
     and folds get conservative sizes. Ensure headings can wrap and don't cause
     overflow on narrow screens. Also respect safe-area insets for header bars. */
h1 {
  font-size: clamp(1.6rem, 5.2vw, 3rem);
  line-height: 1.12;
  word-break: break-word;
  overflow-wrap: anywhere;
}

h2 {
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.18;
  word-break: break-word;
  overflow-wrap: anywhere;
}

h3 {
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* Site header: respect fold safe areas and avoid content touching device edges */
.site-header {
  padding-left: max(0.75rem, env(safe-area-inset-left, 0.75rem));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0.75rem));
}

/* Extra-small / fold / narrow viewports */
@media (max-width: 360px) {
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.95rem; }
  .site-header .header-inner { padding-left: 0.6rem; padding-right: 0.6rem; }
}



.text-center .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #f6630c;
  font-weight: bold;
  font-size: 1.15rem;
  font-family: 'Certo Sans', sans-serif;
  text-decoration: none;
  transition: color 0.2s ease;
}

.text-center .learn-more:hover {
  color: #003c34;
}



/* Amenities modal styling */
#amenities-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 220000;
  align-items: center;
  justify-content: center;
}
#amenities-modal[aria-hidden="false"] {
  display: flex;
}
#amenities-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: #003c34;
}


/* Position close button at top-right of white panel */
#amenities-modal .modal-close {
  top: 1rem !important;
  right: 1rem !important;
}

@media (max-width: 768px) {
  #amenities-modal .modal-close {
    position: fixed !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    color: white !important;
    background: transparent !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    font-size: 2.5rem !important;
  }
  
  #amenities-modal #amenities-modal-title {
    text-align: left !important;
  }
}



@media (min-width: 900px) {
  #amenities-modal .modal-content-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3rem !important;
    justify-content: flex-start !important;
    width: 100%;
    min-height: 400px;
  }
  #amenities-modal #amenities-modal-image {
    width: 100% !important;
    max-width: 700px !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  #amenities-modal #amenities-modal-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    box-shadow: none !important;
    margin: 0 auto !important;
  }
  #amenities-modal .desc-card {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    padding: 0 !important;
    min-height: 400px !important;
    overflow-y: auto !important;
    max-height: 100% !important;
  }
}


#amenities-modal #amenities-modal-title { 
  text-align: left !important;
  margin: 0.25rem 0 0 0; 
  font-size: 1.5rem; 
  font-weight: 500 !important;
  color: #003c34 !important;
  position: relative;
  
}

/* Add orange line under amenities title */
#amenities-modal #amenities-modal-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #f6630c;
  margin: 6px 0 0 0;
  border-radius: 2px;
  opacity: 0.95;
}

#amenities-modal .modal-content-wrapper { 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; 
  padding-top: 0.25rem;
  flex: 1;
}
#amenities-modal .modal-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #003c34;
}
#amenities-modal .modal-content-wrapper::-webkit-scrollbar { width: 6px; }
#amenities-modal .modal-content-wrapper::-webkit-scrollbar-thumb { background: #003c34; border-radius: 4px; opacity: 0.7; }

@media (max-width: 768px) {
  /* Switch to vertical layout on mobile */
  #amenities-modal .modal-panel { 
    flex-direction: column;
    align-items: center;
    width: calc(100% - 2rem); 
    padding: 1.5rem; 
    gap: 1rem;
  }
  
  #amenities-modal #amenities-modal-image { 
    width: 100%;
    height: auto;
    min-height: 180px;
    max-height: 300px;
  }
  
  #amenities-modal #amenities-modal-image img {
    max-height: 300px;
  }
  
  #amenities-modal #amenities-modal-title {
    text-align: center;
  }
}

#amenities-modal #amenities-modal-subtitle { text-align:center; margin:0; color: rgba(0,60,52,0.8); }
#amenities-modal .modal-content-wrapper { overflow-y:auto; -webkit-overflow-scrolling: touch; padding-top:0.4rem; }
#amenities-modal .modal-content-wrapper::-webkit-scrollbar { width:6px; }
#amenities-modal .modal-content-wrapper::-webkit-scrollbar-thumb { background:#003c34; border-radius:4px; opacity:0.7; }

body.modal-open { overflow: hidden; }

/* Feature panel — image tiles with overlay title */
/* doubled card size: increase grid min width and gap for larger tiles */
.feature-panels-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap:1.5rem; }
.feature-panel { display:block; text-decoration:none; color:inherit; }
.feature-panel .panel-preview { position:relative; width:100%; height:440px; overflow:hidden; border-radius:8px; }
.feature-panel .panel-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.feature-panel .panel-overlay { position:absolute; left:0; right:0; bottom:0; padding:0.8rem 1rem; display:flex; flex-direction:column; gap:0.15rem; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%); }
.feature-panel .panel-overlay .panel-title { color:#fff; margin:0; font-size:1.05rem; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,0.45); }
.feature-panel .panel-overlay .panel-subtitle { color: rgba(255,255,255,0.95); margin:0; font-size:0.85rem; opacity:0; transition: opacity 220ms ease; }

@media (max-width:1100px){
  /* tablet: doubled from 180 -> 360 */
  .feature-panel .panel-preview { height:360px; }
}
@media (max-width:600px){
  /* mobile: doubled from 150 -> 300 */
  .feature-panel .panel-preview { height:300px; }
  .feature-panel .panel-overlay { padding:0.6rem 0.75rem; }
  .feature-panel .panel-overlay .panel-title { font-size:1rem; }
}

/* Stronger (higher-specificity) overrides for the facility page so feature-panels.css doesn't win */
body.our-facility .feature-panels-grid { 
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); 
  gap: 0; 
  padding: 0; 
  max-width: 100%; 
  margin: 0; 
}
body.our-facility .feature-panels-grid .feature-panel { display:block; }
body.our-facility .feature-panels-grid .panel-preview { height:440px; border-radius:8px; overflow:hidden; margin:0; }
body.our-facility .feature-panels-grid .panel-preview img { object-fit:cover; width:100%; height:100%; display:block; }
/* remove white card background/padding so image fills the card fully */
/* make the image truly fill the card: remove background, shadow, padding and clip overflow */
body.our-facility .feature-panels-grid .feature-panel {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px;
  overflow: hidden !important; /* ensure child image is clipped to rounded corners */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
body.our-facility .feature-panels-grid .feature-panel .panel-info { display: none !important; }
body.our-facility .feature-panels-grid .panel-preview { border-radius: inherit; margin:0; }
body.our-facility .feature-panels-grid .panel-preview img { display:block; border-radius: inherit; }
body.our-facility .feature-panels-grid .panel-overlay { left:0; right:0; bottom:0; border-radius:0; }
@media (max-width:1100px){
  body.our-facility .feature-panels-grid .panel-preview { height:360px; }
}
@media (max-width:600px){
  body.our-facility .feature-panels-grid { grid-template-columns: 1fr; gap:1rem; padding:1rem; }
  body.our-facility .feature-panels-grid .panel-preview { height:300px; }
}

/* iPad / Tablet: center the grid for iPad Air and Mini */
@media (min-width:601px) and (max-width:899px){
  body.our-facility .feature-panels-grid {
    grid-template-columns: 1fr !important;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 500px;
  }
}

/* Desktop / Laptop: make tiles square, centered, and tighter spacing */
@media (min-width:900px){
  body.our-facility .feature-panels-grid {
    /* Fixed 2-column layout for desktop/laptop */
    grid-template-columns: repeat(2, 1fr);
    justify-content: center; /* center the grid items */
    gap: 0.75rem; /* keep cards reasonably close */
    padding: 0 0.1rem;
    max-width: 1000px; /* limit total width */
    margin: 0 auto; /* center the grid */
  }

  body.our-facility .feature-panels-grid .panel-preview {
    height: auto !important;
    aspect-ratio: 1 / 1; /* square */
  }

  /* larger text for bigger tiles */
  body.our-facility .feature-panels-grid .panel-overlay { padding:1.5rem 2rem; }
  body.our-facility .feature-panels-grid .panel-overlay .panel-title { font-size:2rem; font-weight:bold; }
  body.our-facility .feature-panels-grid .panel-overlay .panel-subtitle { font-size:1.1rem; opacity:0.9; }
}

  /* Ensure titles for facility cards are white (override other theme rules) */
  body.our-facility .feature-panels-grid .panel-title,
  body.our-facility .feature-panels-grid .panel-overlay .panel-title {
    color: #ffffff !important;
  }

/* Make cards and modals sharp-edged (no rounded corners) */
/* High-specificity overrides to ensure they win over other rules */
body.our-facility .feature-panels-grid,
body.our-facility .feature-panels-grid .feature-panel,
body.our-facility .feature-panels-grid .panel-preview,
body.our-facility .feature-panels-grid .panel-preview img,
body.our-facility .feature-panels-grid .panel-overlay {
  border-radius: 0 !important;
}

/* Apply sharp edges to all modal panels site-wide */
.modal-panel,
#amenities-modal .modal-panel,
#course-modal .modal-panel,
#instructor-modal .modal-panel {
  border-radius: 0 !important;
}

/* Also remove rounding from modal close buttons/inner elements if present */
.modal-panel .modal-close,
.modal .desc-card {
  border-radius: 0 !important;
}

/* Title-only card with hover-to-reveal subtitle */
/* Hide subtitle by default and add a small horizontal line under the title */
.feature-panel .panel-overlay .panel-title {
  position: relative;
}
.feature-panel .panel-overlay .panel-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #f6630c; /* brand accent */
  margin-top: 6px;
  border-radius: 2px;
  opacity: 0.95;
  transform-origin: left center;
  transform: scaleX(0.7);
  transition: transform 300ms cubic-bezier(.2,.9,.3,1);
}

/* subtitle starts hidden (no translate) and reveals via max-height + opacity */
.feature-panel .panel-overlay .panel-subtitle {
  color: rgba(255,255,255,0.95);
  margin:0;
  font-size:0.85rem;
  max-height: 0;
  opacity: 0;
  transition: max-height 500ms cubic-bezier(.2,.9,.3,1), opacity 450ms ease;
  overflow: hidden;
  display: block;
  margin: 0;
}

/* hover behaviour only for devices with pointer (desktop/laptop) */
@media (hover: hover) and (pointer: fine) {
  body.our-facility .feature-panels-grid .feature-panel {
    transition: transform 280ms ease, box-shadow 280ms ease;
    will-change: transform;
  }

  body.our-facility .feature-panels-grid .feature-panel:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
  }

  body.our-facility .feature-panels-grid .feature-panel:hover .panel-subtitle {
    max-height: 120px;
    opacity: 1;
    margin-top: 4px;
  }

  /* Grow the small horizontal line on hover for a subtle flourish */
  body.our-facility .feature-panels-grid .feature-panel:hover .panel-title::after {
    transform: scaleX(1.15);
  }
}

/* ====== New Amenities Grid Layout ====== */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.amenity-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.amenity-image-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.amenity-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.amenity-card:hover .amenity-image-wrapper img {
  transform: scale(1.05);
}

.amenity-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
}

.amenity-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  font-family: 'Certo Sans', sans-serif;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  position: relative;
  padding-bottom: 0.5rem;
}

/* Add orange horizontal line under title */
.amenity-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #f6630c;
  margin-top: 6px;
  border-radius: 2px;
  opacity: 0.95;
  transform-origin: left center;
  transform: scaleX(0.7);
  transition: transform 300ms cubic-bezier(.2,.9,.3,1);
}

.amenity-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.05rem;
  margin: 0;
  font-weight: 400;
  font-family: 'Certo Sans', sans-serif;
  max-height: 0;
  opacity: 0;
  transition: max-height 500ms cubic-bezier(.2,.9,.3,1), opacity 450ms ease;
  overflow: hidden;
}

/* Hover effects - only on devices with pointer */
@media (hover: hover) and (pointer: fine) {
  .amenity-card:hover .amenity-subtitle {
    max-height: 120px;
    opacity: 1;
    margin-top: 4px;
  }

  .amenity-card:hover .amenity-title::after {
    transform: scaleX(1.15);
  }
}

.amenity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 60, 52, 0.2);
}

/* Responsive Design */
@media (max-width: 900px) {
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .amenity-image-wrapper {
    height: 320px;
  }

  .amenity-overlay {
    padding: 1.25rem 1.5rem;
  }

  .amenity-title {
    font-size: 1.3rem;
  }

  .amenity-subtitle {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .amenities-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .amenity-image-wrapper {
    height: 280px;
  }

  .amenity-overlay {
    padding: 1rem 1.25rem;
  }

  .amenity-title {
    font-size: 1.2rem;
  }

  .amenity-subtitle {
    font-size: 0.9rem;
  }
}
/* ====== End New Amenities Grid Layout ======  */

/* ====== Redesigned Sections Shared Styles ====== */
.redesigned-section {
  background: #fafafa;
  padding: 3rem 0;
  width: 100%;
  margin: 0;
}

.redesigned-section .intro-text {
  color: #003c34;
  max-width: 100%;
  margin: 0 0 3rem;
}

.redesigned-section.instructors-section .intro-text {
  margin: 0 0 2rem;
}
/* ====== End Redesigned Sections Shared Styles ====== */

/* ====== Accreditation Filters (Course Overview) ====== */
.accreditation-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0.75rem;
}
.accreditation-filter-btn {
  background: #003c34;
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  padding: 0.45rem 0.85rem 0.4rem;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.accreditation-filter-btn:hover,
.accreditation-filter-btn:focus { background:#055a4e; outline: none; }
.accreditation-filter-btn.active { background:#f6630c; color:#fff; }
/* Larger variant for overview page */
.accreditation-filters--lg .accreditation-filter-btn {
  font-size: 0.8rem;
  padding: 0.6rem 1rem 0.55rem;
}
@media (max-width: 640px){
  .accreditation-filter-btn { font-size:0.58rem; padding:0.4rem 0.7rem 0.35rem; }
}
/* ====== End Accreditation Filters ====== */


/* ========================= */
/* Mobile Navigation Styles  */
/* ========================= */
@media (max-width: 700px) {
    
    
  .nav-item.has-dropdown > .nav-link.dropdown-trigger,
.nav-item.has-dropdown > .nav-link.dropdown-trigger:hover,
.nav-item.has-dropdown > .nav-link.dropdown-trigger:focus,
.nav-item.has-dropdown > .nav-link.dropdown-trigger.active,
.nav-item.has-dropdown.expanded > .nav-link.dropdown-trigger {
  color: #003c34 !important;
  background: none !important;
}

    
   
  body.nav-open .site-nav,
  .site-nav.nav-open {
    display: block !important;
  }

      
.site-nav .nav-item.has-dropdown > .nav-link::after {
    content: '\25BC';
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 1rem;
    vertical-align: middle;
    opacity: 0.8;
    transition: transform 0.22s ease;
    color: #003c34;
    
}

.site-nav .nav-item.has-dropdown.expanded > .nav-link::after {
    transform: rotate(180deg);
}
  
    

  .nav-list > .nav-item > .nav-link,
  .nav-list > .nav-item,
  .nav-list > .nav-item.has-dropdown .dropdown-menu li
   
  
   {
    padding-left: 0.2rem !important;
    font-size: 1rem !important;
    color: #003c34 !important;
    
  }

  
   
  .site-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 94vw;
    background: #ea9d22;
    z-index: 1000;
    
    
  }
  .nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.2rem 0.5rem;
    margin: 0;
    list-style: none;
  }
  .nav-item {
    
    width: 90%;
    margin: 0;
    padding: 0.2rem 0;
    border-bottom: .25px solid rgb(236, 235, 235);
  }
  .nav-link {
    display: block;
    width: 100%;
    padding: 0.8rem 0.5rem;
    font-size: 1.15rem;
    color: #003c34;
    font-weight: 600;
    text-align: left;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  
  .nav-item.has-dropdown .dropdown-menu {
    display: none;
    background: #ffffff !important;
    
    margin: 0.2rem 0 0 0;
    ;
    padding: 0.2rem 0.5rem;
    border-radius: 0 0  ;
    position: static;
    width: 100%;
    z-index: 10;
  }
  .nav-item.has-dropdown.expanded .dropdown-menu {
    
    display: block;
    
  }
  .dropdown-menu li {
    width: 100%;
    padding: 0.4rem 0.6rem;
    padding-left: 0;
    text-align: left;
    font-size: 1rem;
    color: #003c34;
    border-bottom: 0.25px solid rgb(236, 235, 235);
  }
  .dropdown-menu li:last-child {
    border-bottom: none !important;
  }

  .nav-list > .nav-item:last-child {
  border-bottom: none !important;
}


}

/* Engagement Gallery Image Slider */
.gallery-image-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,60,52,0.38) 60%, rgba(0,60,52,0.62) 100%);
  z-index: 2;
  pointer-events: none;
}
  .engagement-gallery {
    width: 100vw;
    min-height: 540px;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  .gallery-slider {
    position: relative;
    width: 100vw;
    height: 70vw;
    min-height: 340px;
    max-height: 700px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
  }
  .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: #fff;
    border: none;
    font-size: 2.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }
  .gallery-arrow.left {
    left: 1.5vw;
  }
  .gallery-arrow.right {
    right: 1.5vw;
  }
  
  .gallery-arrow:hover {
    color: #f6630c;
  }
  .gallery-image-container {
    
    
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    min-height: 600px;
    border: none;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow:hidden;
    z-index: 1;
    position: relative !important;
  }
  .gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 1;
    display: block;
    
    
  }
  .gallery-title {
    color: #f6630c;
    z-index: 5;
    
  }
  .gallery-image.active {
    opacity: 1;
    z-index: 2;
  }
  .gallery-image-overlay {
    
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: linear-gradient(180deg, rgba(0,60,52,0.0) 20%, rgba(0,60,52,0.7) 100%);
    color: #fff;
    padding: 2rem 2vw 2.5rem 2vw;
    box-sizing: border-box;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(.22,.9,.3,1);
    will-change: transform;
  }
  /* Parallax effect for overlay text using scroll */
  .gallery-image-overlay[data-parallax] {
    transform: translateY(var(--gallery-parallax, 0px));
  }
  
  .gallery-image-desc {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
    padding-bottom: 7rem;
  }
  @media (max-width: 700px) {
    .engagement-gallery {
      min-height: 180px;
    }
    .gallery-slider {
      height: 100vw;
      min-height: 320px;
      max-height: 540px;
    }
    .gallery-image-container {
      width: 100vw;
      height: 100vw;
      min-height: 320px;
      max-height: 540px;
    }
    .gallery-arrow {
      font-size: 2rem;
      width: 38px;
      height: 38px;
      left: auto;
      right: auto;
    }
    .gallery-arrow.left {
      left: 2vw;
      right: auto;
    }
    .gallery-arrow.right {
      right: 2vw;
      left: auto;
    }
    .gallery-image-desc {
      font-size: 1rem;
      padding-bottom: 0.5rem;
    }
    .gallery-image-overlay {
      padding: 1rem 1vw 1.5rem 1vw;
    }
  }
  @media (max-width: 480px) {
    .engagement-gallery {
      min-height: 90px;
    }
    .gallery-slider {
      height: 100vw;
      min-height: 220px;
      max-height: 400px;
    }
    .gallery-image-container {
      width: 100vw;
      height: 100vw;
      min-height: 220px;
      max-height: 400px;
    }
    .gallery-arrow {
      font-size: 1.5rem;
      width: 28px;
      height: 28px;
      left: auto;
      right: auto;
    }
    .gallery-arrow.left {
      left: 2vw;
      right: auto;
    }
    .gallery-arrow.right {
      right: 2vw;
      left: auto;
    }
    .gallery-image-desc {
      font-size: 0.95rem;
    }
    .gallery-image-overlay {
      padding: 0.5rem 0.5vw 1rem 0.5vw;
    }
  }


  /* Animation for timeline year buttons */
				.timeline-year.slide-in-left, .timeline-description.slide-in-left {
					animation: slideInLeft 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
				}
				.timeline-year.slide-in-right, .timeline-description.slide-in-right {
					animation: slideInRight 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
				}
				@keyframes slideInLeft {
					from { transform: translateX(-40px); opacity: 0; }
					to { transform: translateX(0); opacity: 1; }
				}
				@keyframes slideInRight {
					from { transform: translateX(40px); opacity: 0; }
					to { transform: translateX(0); opacity: 1; }
				}
		
		.timeline-section {
						position: relative;
			position: relative;
			width: 100%;
			min-height: 800px;
			padding: 3rem 1rem 2rem 1rem;
			box-sizing: border-box;
			overflow: hidden;
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
			background-color: #0a2a2a; /* fallback color */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.timeline-section::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(7, 25, 19, 0.7);
			z-index: 1;
			pointer-events: none;
		}
		.timeline-title {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			font-size: 5rem;
			color: #f6630c;
			font-weight: 700;
			text-align: center;
			margin: 0;
			
			z-index: 10;
			padding: 2rem 0 1.5rem 0;
		}
		.timeline-nav {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			margin-bottom: 1.5rem;
			position: absolute;
			left: 0;
			bottom: 2rem;
			width: 100%;
			z-index: 10;
			
			
			padding: 1rem 0;
		}
		.timeline-arrow {
            padding-bottom: 0.8rem;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			border: none;
			background: transparent;
			color: #fff;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3rem;
			
			transition: background 0.3s, color 0.3s;
		}
		.timeline-arrow:hover {
			
			color: #f6630c;
		}
		.timeline-years {
			display: flex;
			align-items: center;
			gap: 1rem;
			overflow-x: hidden;
			flex-wrap: nowrap;
			max-width: 600px;
			padding-bottom: 0.5rem;
		}
        .timeline-year:hover{
            color: #f6630c;
            opacity: 1;
            
        }
		.timeline-year {
			font-size: 2.3rem;
			font-family: 'Certo Sans', Arial, sans-serif;
			font-weight: 200;
			color: #fff;
			opacity: 1;
			cursor: pointer;
			transition: color 0.3s, opacity 0.3s;
			padding: 0.2rem 0.7rem;
			border-radius: 6px;
			background: none;
			border: none;
		}
		.timeline-year.active {
      color: #f6630c;
      opacity: 1;
      pointer-events: none;
      cursor: pointer;
			
		}
		.timeline-description {
			position: relative;
			width: 100%;
			max-width: 1500px;
			
			color: #fff;
			font-size: 2.5rem;
			
            
			box-sizing: border-box;
			z-index: 2;
			text-align: center;
			font-weight: 200;
			letter-spacing: 0.01em;
			margin-bottom: .5rem;
			margin-top: 5.5rem;
			border-radius: 8px;
		}

    /* Timeline audio button styling */
.timeline-audio-btn {
  background: #ea9d22;
  color: #003c34;
  border: none;
  border-radius: 0;
  
  padding: 0.5rem 1.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
  margin: 1.5rem auto 0.5rem auto;
  display: block;
}
.timeline-audio-btn:hover {
  background: #f6630c;
  color: #fff;
  opacity: 1;
}

		@media (max-width: 900px) {
			.timeline-title {
				font-size: 1.5rem;
			}
			.timeline-year {
				font-size: 1rem;
			}
			.timeline-description {
				font-size: 1rem;
				padding: 1rem 0.7rem;
			}
		}
		@media (max-width: 700px) {
      .timeline-audio-btn{
        font-size: 0.855rem;
        padding: 0.04rem 0.2rem;
        margin-top: 0.18rem;
        min-height: 2em;
        
      }
      
            
			.timeline-section {
				min-height: 420px;
				padding: rem 0.5rem 1rem 0.5rem;
                max-width: 100%;
                
            }
			.timeline-years {
				gap: 0.5rem;
			}
			.timeline-year {
				font-size: 0.9rem;
				padding: 0.1rem 0.3rem;
			}
			.timeline-arrow {
                padding-bottom: 0.8rem;
                padding-top: 0.2rem;
				width: 36px;
				height: 36px;
				font-size: 1.5rem;
			}
		}