/* ----------------------------------------------------------------
   1. HERO BANNER  (.gn-hero)
   700px height, content pinned bottom-left, dark gradient overlay
---------------------------------------------------------------- */
 
.gn-hero {
  height: 700px !important;
  min-height: 700px !important;
  position: relative !important;
  overflow: hidden;
}
 
/* FIX 1: Diagonal gradient from BOTTOM-LEFT matching reference design */
.gn-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 30%,
    rgba(0, 0, 0, 0.15) 60%,
    rgba(0, 0, 0, 0.00) 85%
  );
  z-index: 1;
  pointer-events: none;
}
 
/* Foreground content: pin to bottom-left */
.gn-hero > .foreground-layer,
.gn-hero > article {
  height: 700px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-bottom: 72px !important;
  position: relative !important;
  z-index: 2;
}
 
/* Event title */
.gn-hero .section-head {
  font-size: 52px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  max-width: 640px;
  margin-bottom: 14px !important;
  text-align: left !important;
}
 
/* Date / time / location */
.gn-hero .dtl-text,
.gn-hero time {
  color: #ffffff !important;
  font-size: 15px !important;
}
.gn-hero .theme-icon { color: #ffffff !important; }
 
/* "KNOW MORE" CTA */
.gn-hero .bs-button.primary,
.gn-hero .btn-widget.primary {
  background-color: #e8500a !important;
  border-color: #e8500a !important;
  color: #ffffff !important;
  margin-top: 26px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px;
  border-radius: 4px !important;
  padding: 12px 28px !important;
  text-transform: uppercase;
  display: inline-block !important;
}
.gn-hero .bs-button.primary:hover { background-color: #c94208 !important; border-color: #c94208 !important; }
 
 
/* ----------------------------------------------------------------
   2. STATS BAR  (.gn-stats)
   Dark navy, white accent borders, animated counters
 
   JS injects .gn-counter-row on the row container and
   .gn-counter-item on each individual stat block.
---------------------------------------------------------------- */
 
.gn-stats {
  background-color: #152348 !important;
  padding: 52px 0 !important;
  /* White accent lines top/bottom (changed from purple per request) */
  border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
}
 
/* FIX 2: Stats — layout is now applied via JS inline styles.
   CSS here provides fallback values and styles the content. */
 
/* Each stat block — JS sets flex/centering via inline style */
.gn-stats .gn-counter-item {
  text-align: center !important;
}
 
/* Large animated number */
.gn-stats .numbercounter {
  display: block !important;
  font-size: 50px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
}
 
/* Stat label */
.gn-stats .li-title,
.gn-stats h5,
.gn-stats p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
  text-align: center !important;
}
 
 
/* ----------------------------------------------------------------
   3. ABOUT / CONNECTING SECTION  (.gn-about)
   JS v4: JS applies flex directly to .bs-mtList-wgt (Backstage's
   native 3-column container inside the section). No gn-about-inner
   class is injected — JS expands all ancestors to full width then
   sets flex row on .bs-mtList-wgt, flex:1 on each .li-item child.
---------------------------------------------------------------- */
 
.gn-about {
  background-color: #152348 !important;
  padding: 72px 0 !important;
  text-align: left !important;
}
 
/* Foreground layer: block (JS sets inline style too) */
.gn-about .foreground-layer,
.gn-about > article {
  display: block !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 40px !important;
  box-sizing: border-box;
}
 
/* CSS fallback for the 3-col flex row (JS inline styles take priority) */
.gn-about .bs-mtList-wgt {
  display: flex !important;
  flex-direction: row !important;
  gap: 48px !important;
  width: 100% !important;
  align-items: start !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
.gn-about .bs-mtList-wgt > .li-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
 
/* Column 1: Section heading */
.gn-about .li-item:first-child .li-title,
.gn-about .li-item:first-child h4,
.gn-about .li-item:first-child h3 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
 
/* Column 2: Body text */
.gn-about .li-item .li-description p,
.gn-about .li-item p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  text-align: left !important;
}
 
/* Column 3: Buttons stacked */
.gn-about .li-item:last-child .btn-widget,
.gn-about .li-item:last-child .bs-button,
.gn-about .li-item:last-child a {
  display: block !important;
  width: 100% !important;
  margin-bottom: 14px !important;
  text-align: center !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 13px 20px !important;
  box-sizing: border-box;
  text-decoration: none !important;
  border: 2px solid rgba(255,255,255,0.75) !important;
  color: #ffffff !important;
  background: transparent !important;
}
 
 
/* ----------------------------------------------------------------
   4. SPEAKERS CAROUSEL  (.gn-speakers)
   White bg, infinite OWL carousel, header row [Title | ← →]
 
   JS injects .gn-speakers-header, .gn-speakers-arrows,
   .gn-speakers-owl (the OWL carousel wrapper)
---------------------------------------------------------------- */
 
.gn-speakers {
  background-color: #ffffff !important;
  padding: 64px 0 !important;
}
 
.gn-speakers .foreground-layer,
.gn-speakers > article {
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 40px !important;
  display: block !important;   /* Block — don't let Backstage grid interfere with OWL */
  box-sizing: border-box;
  width: 100%;
}
 
/* Hide "VIEW SPEAKERS" redundant button */
.gn-speakers .view-btn {
  display: none !important;
}
 
/* --- Header row (built by JS) --- */
.gn-speakers-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 32px !important;
  width: 100%;
}
 
/* Title inside header row */
.gn-speakers-header .section-title,
.gn-speakers-header h3,
.gn-speakers-header h2,
.gn-speakers-title-fallback {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 !important;
}
 
/* Arrow button group */
.gn-speakers-arrows {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0;
}
 
/* Prev / Next arrow buttons */
.gn-speakers-arrows .owl-prev,
.gn-speakers-arrows .owl-next {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid #cccccc !important;
  background: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #333333 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  position: static !important;   /* override OWL's absolute positioning */
}
.gn-speakers-arrows .owl-prev:hover,
.gn-speakers-arrows .owl-next:hover {
  background: #f4f4f4 !important;
  border-color: #999999 !important;
}
 
/* --- OWL carousel container --- */
.gn-speakers-owl,
.gn-speakers .owl-carousel {
  width: 100% !important;
  display: block !important;
}
.gn-speakers .owl-stage-outer { width: 100% !important; overflow: hidden !important; }
.gn-speakers .owl-stage       { display: flex !important; }
 
/* Speaker card */
.gn-speakers .owl-item {
  padding: 0 4px;
  box-sizing: border-box;
}
 
/* Photo — square */
.gn-speakers .owl-item img,
.gn-speakers .owl-item .bs-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
}
 
/* Name — FIX 4: truncate long names to prevent wrapping */
.gn-speakers .li-title,
.gn-speakers h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 12px 0 4px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
 
/* Job title — FIX 4: same truncation */
.gn-speakers .sp-title,
.gn-speakers h6 {
  font-size: 13px !important;
  color: #555555 !important;
  font-weight: 400 !important;
  margin-bottom: 2px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
 
/* Institution — FIX 4: same truncation */
.gn-speakers .medium-font {
  font-size: 12px !important;
  color: #888888 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
 
/* Hide OWL's original nav — they live in .gn-speakers-arrows now */
.gn-speakers .owl-nav {
  display: none !important;
}
 
 
/* ----------------------------------------------------------------
   5. TESTIMONIALS  (.gn-testimonials)
   Dark background, title full-width at top, 3 cards below
 
   JS injects:
     .gn-media-header  — the text/title block (first child of foreground-layer)
     .gn-items-grid    — the items container  (last child of foreground-layer)
     .gn-card-item     — each individual card
---------------------------------------------------------------- */
 
.gn-testimonials {
  background-color: #111111 !important;
  padding: 72px 0 !important;
}
 
/* Force block layout so header + grid stack vertically */
.gn-testimonials .foreground-layer,
.gn-testimonials > article {
  display: block !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 40px !important;
  box-sizing: border-box;
}
 
/* Title/text block — full width */
.gn-testimonials .gn-media-header {
  width: 100% !important;
  margin-bottom: 40px !important;
  display: block !important;
}
.gn-testimonials .gn-media-header .section-title,
.gn-testimonials .gn-media-header h3,
.gn-testimonials .gn-media-header h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}
.gn-testimonials .gn-media-header p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 15px !important;
}
 
/* 3-column items grid */
.gn-testimonials .gn-items-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}
 
/* Individual card */
.gn-testimonials .gn-card-item {
  background: #1c1c1c !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
 
/* Video thumbnail wrapper (injected by JS) */
.gn-thumb-wrap {
  position: relative;
  line-height: 0;
  display: block;
}
.gn-thumb-wrap img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}
 
/* Orange play button */
.gn-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(232, 80, 10, 0.92) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5;
  transition: background 0.2s ease;
}
.gn-play-btn:hover { background: rgba(201, 66, 8, 0.97) !important; }
 
/* Card text styles */
.gn-testimonials .gn-card-item .section-sub-title,
.gn-testimonials .gn-card-item h4,
.gn-testimonials .gn-card-item h5 {
  color: #4a9eff !important;   /* blue accent headings (Be Inspired, etc.) */
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 20px 20px 8px !important;
}
.gn-testimonials .gn-card-item p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  padding: 0 20px 20px !important;
}
 
 
/* ----------------------------------------------------------------
   6. WHY PARTNER WITH GULF NEWS  (.gn-why-partner)
   Very dark bg, title full-width at top, 3 white feature cards
 
   Same JS tagging strategy as testimonials:
     .gn-media-header  — title/text block
     .gn-items-grid    — cards container
     .gn-card-item     — each card
---------------------------------------------------------------- */
 
.gn-why-partner {
  background-color: #0d0d0d !important;
  padding: 72px 0 !important;
}
 
.gn-why-partner .foreground-layer,
.gn-why-partner > article {
  display: block !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 40px !important;
  box-sizing: border-box;
}
 
/* Title block */
.gn-why-partner .gn-media-header {
  width: 100% !important;
  margin-bottom: 40px !important;
  display: block !important;
}
.gn-why-partner .gn-media-header .section-title,
.gn-why-partner .gn-media-header h3,
.gn-why-partner .gn-media-header h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.gn-why-partner .gn-media-header p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 15px !important;
  margin-top: 8px !important;
}
 
/* 3-column grid */
.gn-why-partner .gn-items-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}
 
/* White feature card */
.gn-why-partner .gn-card-item {
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 32px 28px !important;
}
 
/* Card icon */
.gn-why-partner .gn-card-item .theme-icon,
.gn-why-partner .gn-card-item i {
  font-size: 28px !important;
  color: #333333 !important;
  margin-bottom: 16px !important;
  display: block !important;
}
 
/* Card heading */
.gn-why-partner .gn-card-item .section-sub-title,
.gn-why-partner .gn-card-item h4,
.gn-why-partner .gn-card-item h5 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 10px !important;
}
 
/* Card body text */
.gn-why-partner .gn-card-item p {
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
}
 
/* Metric */
.gn-why-partner .gn-card-item .numbercounter {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  display: block !important;
}
.gn-why-partner .gn-card-item .li-title,
.gn-why-partner .gn-card-item h6 {
  font-size: 13px !important;
  color: #777777 !important;
  font-weight: 400 !important;
}
 
/* "EXPLORE PARTNERSHIP OPTIONS" CTA */
.gn-why-partner .bs-button,
.gn-why-partner .btn-widget {
  background-color: #e8500a !important;
  border-color: #e8500a !important;
  color: #ffffff !important;
  margin-top: 40px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px;
  padding: 14px 28px !important;
  text-transform: uppercase;
  display: inline-block !important;
}
.gn-why-partner .bs-button:hover { background-color: #c94208 !important; }
 
 
/* ----------------------------------------------------------------
   7. SPONSORS  (.gn-sponsors)
   White background, tiered logo display
---------------------------------------------------------------- */
 
.gn-sponsors {
  background-color: #ffffff !important;
  padding: 72px 0 !important;
}
 
.gn-sponsors .foreground-layer,
.gn-sponsors > article {
  max-width: 1000px;
  margin: 0 auto !important;
  padding: 0 40px !important;
  text-align: center;
  display: block !important;
}
 
.gn-sponsors .section-title,
.gn-sponsors h3 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 48px !important;
}
 
/* Tier headings */
.gn-sponsors .sponsor-title,
.gn-sponsors h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-align: center !important;
  margin: 48px 0 20px !important;
  letter-spacing: 0.5px;
}
 
/* Logos */
.gn-sponsors img,
.gn-sponsors .bs-image {
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  transition: opacity 0.2s ease;
}
.gn-sponsors img:hover { opacity: 0.8; }
 
/* Partner logo grid (banking partner row) */
.gn-sponsors .gn-items-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}
.gn-sponsors .gn-items-grid img {
  max-height: 60px !important;
  padding: 10px !important;
  border: 1px solid #eeeeee !important;
  border-radius: 4px !important;
}
 
 
/* ================================================================
   8. RESPONSIVE
   Note: JS applies inline !important styles for flex layouts.
   Media queries here use !important to attempt overrides, but JS
   inline styles always win. For a fully responsive JS-driven layout,
   resize handlers would be needed. CSS breakpoints handle hero,
   sponsors, and typography safely.
================================================================ */
 
@media (max-width: 1024px) {
  /* About: wrap to 2-col on tablet */
  .gn-about .bs-mtList-wgt {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .gn-about .bs-mtList-wgt > .li-item {
    flex: 1 1 calc(50% - 24px) !important;
    min-width: calc(50% - 24px) !important;
  }
  /* Testimonials / Why-partner: 2 cols */
  .gn-testimonials .gn-items-grid,
  .gn-why-partner .gn-items-grid {
    flex-wrap: wrap !important;
  }
  .gn-testimonials .gn-card-item,
  .gn-why-partner .gn-card-item {
    flex: 1 1 calc(50% - 12px) !important;
    min-width: calc(50% - 12px) !important;
  }
}
 
@media (max-width: 768px) {
  .gn-hero,
  .gn-hero > .foreground-layer,
  .gn-hero > article {
    height: 480px !important;
    min-height: 480px !important;
  }
  .gn-hero .section-head { font-size: 30px !important; }
 
  .gn-stats .numbercounter { font-size: 36px !important; }
  /* Stats wraps on small screen */
  .gn-stats .bs-counter-wgt {
    flex-wrap: wrap !important;
  }
  .gn-stats .gn-counter-item {
    flex: 1 0 45% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 20px !important;
  }
 
  /* About: single column on mobile */
  .gn-about .bs-mtList-wgt {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .gn-about .bs-mtList-wgt > .li-item {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
 
  /* Testimonials / Why-partner: single column on mobile */
  .gn-testimonials .gn-items-grid,
  .gn-why-partner .gn-items-grid {
    flex-direction: column !important;
  }
  .gn-testimonials .gn-card-item,
  .gn-why-partner .gn-card-item {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
 
  .gn-sponsors .gn-items-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}