.elementor-7 .elementor-element.elementor-element-0ec5183{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7 .elementor-element.elementor-element-094847b{--display:flex;--overlay-opacity:1;}.elementor-7 .elementor-element.elementor-element-094847b:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-094847b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background:url("https://firstjerusalem.org/wp-content/uploads/2026/05/P1138332-scaled-e1778258264340.jpg") 50% 50%;background-size:cover;}.elementor-7 .elementor-element.elementor-element-094847b::before, .elementor-7 .elementor-element.elementor-element-094847b > .elementor-background-video-container::before, .elementor-7 .elementor-element.elementor-element-094847b > .e-con-inner > .elementor-background-video-container::before, .elementor-7 .elementor-element.elementor-element-094847b > .elementor-background-slideshow::before, .elementor-7 .elementor-element.elementor-element-094847b > .e-con-inner > .elementor-background-slideshow::before, .elementor-7 .elementor-element.elementor-element-094847b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(80deg, var( --e-global-color-accent ) 0%, var( --e-global-color-95706f3 ) 100%);}.elementor-7 .elementor-element.elementor-element-576a661{--display:flex;}.elementor-7 .elementor-element.elementor-element-576a661:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-576a661 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://firstjerusalem.org/wp-content/uploads/2026/05/1AACAC7A-0DC0-4982-A431-26F7326797C1.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-7 .elementor-element.elementor-element-2831e52{--spacer-size:425px;}.elementor-7 .elementor-element.elementor-element-c14c1af{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-size:34px;--e-n-carousel-arrow-normal-color:var( --e-global-color-bb7fd54 );}:where( .elementor-7 .elementor-element.elementor-element-c14c1af .swiper-slide ) > .e-con{--border-radius:0px 0px 0px 0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}:where( [data-core-v316-plus="true"] .elementor-element.elementor-widget-n-carousel .swiper-slide ) > .e-con{--padding-block-start:0px;--padding-inline-end:0px;--padding-block-end:0px;--padding-inline-start:0px;}.elementor-7 .elementor-element.elementor-element-9740522{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7 .elementor-element.elementor-element-d10ef19{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7 .elementor-element.elementor-element-d94530f{--display:flex;--overlay-opacity:0.55;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7 .elementor-element.elementor-element-d94530f:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-d94530f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://firstjerusalem.org/wp-content/uploads/2026/05/P1138332-scaled-e1778258264340.jpg");background-position:0px -347px;background-repeat:no-repeat;background-size:cover;}.elementor-7 .elementor-element.elementor-element-d94530f::before, .elementor-7 .elementor-element.elementor-element-d94530f > .elementor-background-video-container::before, .elementor-7 .elementor-element.elementor-element-d94530f > .e-con-inner > .elementor-background-video-container::before, .elementor-7 .elementor-element.elementor-element-d94530f > .elementor-background-slideshow::before, .elementor-7 .elementor-element.elementor-element-d94530f > .e-con-inner > .elementor-background-slideshow::before, .elementor-7 .elementor-element.elementor-element-d94530f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-883f492 );--background-overlay:'';}.elementor-7 .elementor-element.elementor-element-2f5bf16{--display:flex;}.elementor-7 .elementor-element.elementor-element-8e809e3{--display:flex;}.elementor-7 .elementor-element.elementor-element-685aace{--display:flex;}.elementor-7 .elementor-element.elementor-element-685aace:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-685aace > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-7 .elementor-element.elementor-element-d10ef19{--width:100%;}}@media(max-width:1024px){.elementor-7 .elementor-element.elementor-element-c14c1af{--e-n-carousel-swiper-slides-to-display:1;}.elementor-7 .elementor-element.elementor-element-d94530f:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-d94530f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-c14c1af{--e-n-carousel-swiper-slides-to-display:1;}.elementor-7 .elementor-element.elementor-element-d94530f:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-d94530f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}/* Start custom CSS for container, class: .elementor-element-094847b *//* ============================================================
   FJMBC HOMEPAGE HERO WIDTH FIX
   Makes hero section wider and less compressed
   ============================================================ */

/* Force hero to full browser width */
.fj-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

/* Make hero inner container wider */
.fj-hero .fj-container {
  width: min(1720px, calc(100% - 64px)) !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

/* Give hero text more breathing room */
.fj-hero-content {
  max-width: 780px !important;
}

/* Make headline wider */
.fj-hero-title {
  max-width: 820px !important;
}

/* Make subtitle wider */
.fj-hero-subtitle {
  max-width: 660px !important;
}

/* Optional: increase hero height slightly */
.fj-hero {
  min-height: 760px !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .fj-hero .fj-container {
    width: min(100% - 40px, 1100px) !important;
    max-width: 1100px !important;
  }

  .fj-hero {
    min-height: 680px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .fj-hero .fj-container {
    width: min(100% - 28px, 100%) !important;
    max-width: calc(100% - 28px) !important;
  }

  .fj-hero {
    min-height: 620px !important;
  }

  .fj-hero-content {
    max-width: 100% !important;
  }

  .fj-hero-title {
    max-width: 100% !important;
    font-size: 54px !important;
  }

  .fj-hero-subtitle {
    max-width: 100% !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-094847b *//* ============================================================
   FJMBC HOMEPAGE HERO WIDTH FIX
   Makes hero section wider and less compressed
   ============================================================ */

/* Force hero to full browser width */
.fj-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

/* Make hero inner container wider */
.fj-hero .fj-container {
  width: min(1720px, calc(100% - 64px)) !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

/* Give hero text more breathing room */
.fj-hero-content {
  max-width: 780px !important;
}

/* Make headline wider */
.fj-hero-title {
  max-width: 820px !important;
}

/* Make subtitle wider */
.fj-hero-subtitle {
  max-width: 660px !important;
}

/* Optional: increase hero height slightly */
.fj-hero {
  min-height: 760px !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .fj-hero .fj-container {
    width: min(100% - 40px, 1100px) !important;
    max-width: 1100px !important;
  }

  .fj-hero {
    min-height: 680px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .fj-hero .fj-container {
    width: min(100% - 28px, 100%) !important;
    max-width: calc(100% - 28px) !important;
  }

  .fj-hero {
    min-height: 620px !important;
  }

  .fj-hero-content {
    max-width: 100% !important;
  }

  .fj-hero-title {
    max-width: 100% !important;
    font-size: 54px !important;
  }

  .fj-hero-subtitle {
    max-width: 100% !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-094847b *//* ============================================================
   FJMBC HOMEPAGE HERO WIDTH FIX
   Makes hero section wider and less compressed
   ============================================================ */

/* Force hero to full browser width */
.fj-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

/* Make hero inner container wider */
.fj-hero .fj-container {
  width: min(1720px, calc(100% - 64px)) !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

/* Give hero text more breathing room */
.fj-hero-content {
  max-width: 780px !important;
}

/* Make headline wider */
.fj-hero-title {
  max-width: 820px !important;
}

/* Make subtitle wider */
.fj-hero-subtitle {
  max-width: 660px !important;
}

/* Optional: increase hero height slightly */
.fj-hero {
  min-height: 760px !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .fj-hero .fj-container {
    width: min(100% - 40px, 1100px) !important;
    max-width: 1100px !important;
  }

  .fj-hero {
    min-height: 680px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .fj-hero .fj-container {
    width: min(100% - 28px, 100%) !important;
    max-width: calc(100% - 28px) !important;
  }

  .fj-hero {
    min-height: 620px !important;
  }

  .fj-hero-content {
    max-width: 100% !important;
  }

  .fj-hero-title {
    max-width: 100% !important;
    font-size: 54px !important;
  }

  .fj-hero-subtitle {
    max-width: 100% !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d10ef19 */css /* ============================================================ FJMBC HOMEPAGE WIDTH FIX — SAFE VERSION Fixes overflow while keeping sections wide Paste AFTER the main homepage CSS ============================================================ */ /* Global safety */ .fj-hero, .fj-service-strip, .fj-about, .fj-ministries, .fj-giving, .fj-gallery-strip, .fj-hero *, .fj-service-strip *, .fj-about *, .fj-ministries *, .fj-giving *, .fj-gallery-strip * { box-sizing: border-box !important; } /* Force homepage sections to full browser width safely */ .fj-hero, .fj-service-strip, .fj-about, .fj-ministries, .fj-giving { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow-x: hidden !important; } /* Make inner containers wider but safe */ .fj-hero .fj-container, .fj-service-strip .fj-container, .fj-about .fj-container, .fj-ministries .fj-container, .fj-giving .fj-container { width: min(1720px, calc(100% - 64px)) !important; max-width: 1720px !important; margin-left: auto !important; margin-right: auto !important; } /* Prevent grid children from forcing overflow */ .fj-about-grid > *, .fj-giving-grid > *, .fj-service-grid > *, .fj-ministry-grid > *, .fj-giving-cards > * { min-width: 0 !important; } /* Hero: give text more breathing space */ .fj-hero-content { max-width: 720px !important; } .fj-hero-title { max-width: 760px !important; } .fj-hero-subtitle { max-width: 620px !important; } /* Service times: wider, cleaner spacing */ .fj-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .fj-service-item { padding: 38px 34px 32px !important; } /* About section: SAFE 40 / 60 layout Do not use 40% 60% with a fixed gap. */ .fj-about-grid { display: grid !important; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important; gap: 70px !important; align-items: center !important; width: 100% !important; } /* Let the text breathe but do not force compression */ .fj-about-grid > div:first-child { max-width: 720px !important; width: 100% !important; } /* Pastor card/image must stay inside its column */ .fj-pastor-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .fj-pastor-photo { width: 100% !important; max-width: 100% !important; } /* Ministries: wider cards */ .fj-ministry-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 24px !important; } .fj-ministry-card { min-height: 220px !important; } /* Giving section: SAFE 38 / 62 layout */ .fj-giving-grid { display: grid !important; grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr) !important; gap: 58px !important; align-items: center !important; width: 100% !important; } .fj-giving-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } .fj-give-card { padding: 36px !important; } /* Gallery strip: make images feel wider and more cinematic */ .fj-gallery-strip { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow-x: hidden !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .fj-gallery-strip img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1200px) { .fj-hero .fj-container, .fj-service-strip .fj-container, .fj-about .fj-container, .fj-ministries .fj-container, .fj-giving .fj-container { width: min(100% - 40px, 1100px) !important; max-width: 1100px !important; } .fj-about-grid, .fj-giving-grid { grid-template-columns: 1fr !important; gap: 44px !important; } .fj-ministry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .fj-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { .fj-hero .fj-container, .fj-service-strip .fj-container, .fj-about .fj-container, .fj-ministries .fj-container, .fj-giving .fj-container { width: min(100% - 28px, 100%) !important; max-width: calc(100% - 28px) !important; } .fj-hero { min-height: 620px !important; } .fj-hero-title { font-size: 54px !important; } .fj-service-grid, .fj-ministry-grid, .fj-giving-cards { grid-template-columns: 1fr !important; } .fj-ministry-card { min-height: 200px !important; } .fj-gallery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .fj-gallery-strip img { height: 180px !important; } } ``` The main fix is this change: ```css grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); ``` Instead of: ```css grid-template-columns: 40% 60%; ```/* End custom CSS */
/* Start custom CSS *//* ============================================================
   FJMBC AUTOMATIC YOUTUBE GALLERY — FULL SERMON UI CSS
   Use with Elementor + Automatic YouTube Gallery

   This CSS supports:
   - Latest Sermons top section
   - 3 latest sermon videos
   - Sermon Library dark section
   - Full-width layout
   - Search / filter styling
   - Load more styling
   - Responsive mobile layout

   IMPORTANT:
   Replace old sermon CSS with this full file.
   ============================================================ */


/* =========================
   GLOBAL SERMON VARIABLES
========================= */

:root {
  --fj-sermon-bg: #f7f4ee;
  --fj-sermon-panel: #fffdf9;
  --fj-sermon-dark: #07090d;
  --fj-sermon-text: #1d2430;
  --fj-sermon-muted: #606774;
  --fj-sermon-border: rgba(17, 24, 39, 0.1);
  --fj-sermon-gold: #a8752a;
  --fj-sermon-wine: #5a0620;
  --fj-sermon-wine-dark: #3d0415;
  --fj-sermon-blue: #6A8DC6;
  --fj-sermon-shadow: 0 26px 90px rgba(7, 17, 31, 0.11);
  --fj-sermon-soft-shadow: 0 14px 38px rgba(7, 17, 31, 0.08);
}


/* ============================================================
   FULL WIDTH FIX FOR ELEMENTOR
   This prevents the sermon section from looking compressed.
   ============================================================ */

.fj-sermon-latest,
.fj-sermon-library-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: hidden;
}


/* =========================
   LATEST SERMONS AREA
========================= */

.fj-sermon-latest {
  background: var(--fj-sermon-bg);
  padding: 46px 0 34px;
}

.fj-sermon-latest-card {
  width: min(1720px, calc(100% - 64px)) !important;
  max-width: 1720px !important;
  margin: 0 auto;
  background: var(--fj-sermon-panel);
  border: 1px solid var(--fj-sermon-border);
  border-radius: 24px;
  box-shadow: var(--fj-sermon-shadow);
  padding: 54px 50px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 70px;
  align-items: center;
}

.fj-sermon-latest-intro {
  min-width: 0;
}

.fj-sermon-eyebrow {
  color: var(--fj-sermon-gold);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 20px;
}

.fj-sermon-main-title {
  font-family: "Trajan Pro", "Cinzel", "Cormorant Garamond", "Playfair Display", serif;
  font-size: clamp(42px, 4vw, 66px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--fj-sermon-dark);
  margin: 0;
}

.fj-sermon-cross-line {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--fj-sermon-gold);
  margin: 28px 0;
}

.fj-sermon-cross-line span {
  width: 86px;
  height: 1px;
  background: rgba(168, 117, 42, 0.65);
  display: block;
}

.fj-sermon-cross-line strong {
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
}

.fj-sermon-latest-intro p {
  color: var(--fj-sermon-muted);
  font-size: 17px;
  line-height: 1.8;
  max-width: 340px;
  margin: 0 0 30px;
}

.fj-sermon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 16px 26px;
  background: var(--fj-sermon-wine);
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 13px;
  font-weight: 900;
  border: 0;
  transition: 0.25s ease;
}

.fj-sermon-button:hover {
  background: var(--fj-sermon-wine-dark);
  transform: translateY(-2px);
  color: #fff !important;
}


/* ============================================================
   AUTOMATIC YOUTUBE GALLERY — LATEST 3 VIDEOS
   ============================================================ */

.fj-ayg-latest {
  min-width: 0;
}

/* Force grid */
.fj-ayg-latest .ayg-gallery,
.fj-ayg-latest .ayg-videos,
.fj-ayg-latest .ayg-items,
.fj-ayg-latest .ayg-row,
.fj-ayg-latest .ayg-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove plugin/theme column restrictions */
.fj-ayg-latest .ayg-gallery > *,
.fj-ayg-latest .ayg-videos > *,
.fj-ayg-latest .ayg-items > *,
.fj-ayg-latest .ayg-row > *,
.fj-ayg-latest .ayg-grid > * {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: initial !important;
}

/* Video card reset */
.fj-ayg-latest .ayg-item,
.fj-ayg-latest .ayg-video,
.fj-ayg-latest .ayg-col,
.fj-ayg-latest .ayg-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Thumbnail wrapper */
.fj-ayg-latest .ayg-thumbnail,
.fj-ayg-latest .ayg-thumb,
.fj-ayg-latest .ayg-thumbnail-image,
.fj-ayg-latest .ayg-image {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  background: #07090d !important;
  display: block !important;
  width: 100% !important;
  box-shadow: var(--fj-sermon-soft-shadow) !important;
}

/* Thumbnail image */
.fj-ayg-latest .ayg-thumbnail img,
.fj-ayg-latest .ayg-thumb img,
.fj-ayg-latest .ayg-thumbnail-image img,
.fj-ayg-latest .ayg-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: 0.35s ease !important;
}

/* Thumbnail dark overlay */
.fj-ayg-latest .ayg-thumbnail::after,
.fj-ayg-latest .ayg-thumb::after,
.fj-ayg-latest .ayg-thumbnail-image::after,
.fj-ayg-latest .ayg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 9, 13, 0.02),
    rgba(7, 9, 13, 0.35)
  );
  pointer-events: none;
  z-index: 1;
}

/* Play button */
.fj-ayg-latest .ayg-thumbnail::before,
.fj-ayg-latest .ayg-thumb::before,
.fj-ayg-latest .ayg-thumbnail-image::before,
.fj-ayg-latest .ayg-image::before {
  content: "▶";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  font-size: 23px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition: 0.25s ease;
}

.fj-ayg-latest .ayg-item:hover img,
.fj-ayg-latest .ayg-video:hover img,
.fj-ayg-latest .ayg-card:hover img {
  transform: scale(1.045);
}

.fj-ayg-latest .ayg-item:hover .ayg-thumbnail::before,
.fj-ayg-latest .ayg-video:hover .ayg-thumbnail::before,
.fj-ayg-latest .ayg-card:hover .ayg-thumbnail::before,
.fj-ayg-latest .ayg-item:hover .ayg-thumb::before,
.fj-ayg-latest .ayg-video:hover .ayg-thumb::before,
.fj-ayg-latest .ayg-card:hover .ayg-thumb::before {
  background: var(--fj-sermon-wine);
}

/* Title */
.fj-ayg-latest .ayg-title,
.fj-ayg-latest .ayg-video-title,
.fj-ayg-latest .ayg-caption,
.fj-ayg-latest .ayg-name {
  font-family: "Trajan Pro", "Cinzel", "Cormorant Garamond", "Playfair Display", serif !important;
  color: var(--fj-sermon-dark) !important;
  font-size: 23px !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  margin: 18px 0 8px !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.fj-ayg-latest .ayg-title a,
.fj-ayg-latest .ayg-video-title a {
  color: var(--fj-sermon-dark) !important;
  text-decoration: none !important;
}

/* Meta/date */
.fj-ayg-latest .ayg-meta,
.fj-ayg-latest .ayg-date,
.fj-ayg-latest .ayg-duration {
  color: var(--fj-sermon-gold) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Description */
.fj-ayg-latest .ayg-description,
.fj-ayg-latest .ayg-excerpt,
.fj-ayg-latest .ayg-content {
  color: var(--fj-sermon-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   SERMON LIBRARY SECTION
   ============================================================ */

.fj-sermon-library-section {
  background: var(--fj-sermon-dark);
  position: relative;
  overflow: hidden;
}

.fj-sermon-library-bg {
  padding: 78px 0 90px;
  background:
    linear-gradient(180deg, rgba(7, 9, 13, 0.9), rgba(7, 9, 13, 0.98)),
    radial-gradient(circle at 78% 8%, rgba(168, 117, 42, 0.2), transparent 26%);
}

.fj-sermon-library-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 42px;
}

.fj-sermon-library-heading h2 {
  font-family: "Trajan Pro", "Cinzel", "Cormorant Garamond", "Playfair Display", serif;
  font-size: clamp(42px, 4vw, 68px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
}

.fj-sermon-cross-line-light {
  justify-content: center;
  margin: 18px auto 16px;
}

.fj-sermon-library-heading p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
}

.fj-sermon-library-panel {
  width: min(1720px, calc(100% - 64px)) !important;
  max-width: 1720px !important;
  margin: 0 auto;
  background: var(--fj-sermon-panel);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  padding: 42px;
}

.fj-sermon-library-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 32px;
}

.fj-sermon-tabs {
  display: flex;
  align-items: center;
  gap: 34px;
}

.fj-sermon-tabs button {
  border: 0;
  background: transparent;
  color: var(--fj-sermon-muted);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0 12px;
  cursor: default;
}

.fj-sermon-tabs button.active {
  color: var(--fj-sermon-dark);
  border-bottom: 2px solid var(--fj-sermon-wine);
}

.fj-sermon-search-note {
  color: var(--fj-sermon-muted);
  font-size: 14px;
}


/* ============================================================
   AUTOMATIC YOUTUBE GALLERY — FULL LIBRARY
   ============================================================ */

.fj-ayg-library {
  min-width: 0;
}

/* Library grid */
.fj-ayg-library .ayg-gallery,
.fj-ayg-library .ayg-videos,
.fj-ayg-library .ayg-items,
.fj-ayg-library .ayg-row,
.fj-ayg-library .ayg-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset plugin columns */
.fj-ayg-library .ayg-gallery > *,
.fj-ayg-library .ayg-videos > *,
.fj-ayg-library .ayg-items > *,
.fj-ayg-library .ayg-row > *,
.fj-ayg-library .ayg-grid > * {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: initial !important;
}

/* Library card reset */
.fj-ayg-library .ayg-item,
.fj-ayg-library .ayg-video,
.fj-ayg-library .ayg-col,
.fj-ayg-library .ayg-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Library thumbnail wrapper */
.fj-ayg-library .ayg-thumbnail,
.fj-ayg-library .ayg-thumb,
.fj-ayg-library .ayg-thumbnail-image,
.fj-ayg-library .ayg-image {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  background: #07090d !important;
  display: block !important;
  width: 100% !important;
}

/* Library thumbnail image */
.fj-ayg-library .ayg-thumbnail img,
.fj-ayg-library .ayg-thumb img,
.fj-ayg-library .ayg-thumbnail-image img,
.fj-ayg-library .ayg-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: 0.35s ease !important;
}

/* Library overlay */
.fj-ayg-library .ayg-thumbnail::after,
.fj-ayg-library .ayg-thumb::after,
.fj-ayg-library .ayg-thumbnail-image::after,
.fj-ayg-library .ayg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 9, 13, 0.02),
    rgba(7, 9, 13, 0.32)
  );
  pointer-events: none;
  z-index: 1;
}

/* Library play button */
.fj-ayg-library .ayg-thumbnail::before,
.fj-ayg-library .ayg-thumb::before,
.fj-ayg-library .ayg-thumbnail-image::before,
.fj-ayg-library .ayg-image::before {
  content: "▶";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--fj-sermon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  font-size: 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transition: 0.25s ease;
}

.fj-ayg-library .ayg-item:hover img,
.fj-ayg-library .ayg-video:hover img,
.fj-ayg-library .ayg-card:hover img {
  transform: scale(1.045);
}

.fj-ayg-library .ayg-item:hover .ayg-thumbnail::before,
.fj-ayg-library .ayg-video:hover .ayg-thumbnail::before,
.fj-ayg-library .ayg-card:hover .ayg-thumbnail::before,
.fj-ayg-library .ayg-item:hover .ayg-thumb::before,
.fj-ayg-library .ayg-video:hover .ayg-thumb::before,
.fj-ayg-library .ayg-card:hover .ayg-thumb::before {
  background: var(--fj-sermon-wine);
  color: #fff;
}

/* Library title */
.fj-ayg-library .ayg-title,
.fj-ayg-library .ayg-video-title,
.fj-ayg-library .ayg-caption,
.fj-ayg-library .ayg-name {
  color: var(--fj-sermon-dark) !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  margin: 16px 0 6px !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.fj-ayg-library .ayg-title a,
.fj-ayg-library .ayg-video-title a {
  color: var(--fj-sermon-dark) !important;
  text-decoration: none !important;
}

/* Library meta */
.fj-ayg-library .ayg-meta,
.fj-ayg-library .ayg-date,
.fj-ayg-library .ayg-duration {
  color: var(--fj-sermon-gold) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Library description */
.fj-ayg-library .ayg-description,
.fj-ayg-library .ayg-excerpt,
.fj-ayg-library .ayg-content {
  color: var(--fj-sermon-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   SEARCH / FILTER FROM PLUGIN
   ============================================================ */

.fj-ayg-library .ayg-search-form,
.fj-ayg-library form[class*="search"],
.fj-ayg-latest .ayg-search-form,
.fj-ayg-latest form[class*="search"] {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 32px !important;
}

.fj-ayg-library .ayg-search-form input,
.fj-ayg-library form[class*="search"] input,
.fj-ayg-latest .ayg-search-form input,
.fj-ayg-latest form[class*="search"] input {
  height: 54px !important;
  border: 1px solid var(--fj-sermon-border) !important;
  background: #fff !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  outline: none !important;
  flex: 1 !important;
  color: var(--fj-sermon-text) !important;
}

.fj-ayg-library .ayg-search-form button,
.fj-ayg-library form[class*="search"] button,
.fj-ayg-latest .ayg-search-form button,
.fj-ayg-latest form[class*="search"] button {
  height: 54px !important;
  border: 0 !important;
  background: var(--fj-sermon-wine) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 0 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}


/* ============================================================
   LOAD MORE / PAGINATION
   ============================================================ */

.fj-ayg-library .ayg-pagination,
.fj-ayg-library .ayg-loadmore,
.fj-ayg-library .ayg-load-more,
.fj-ayg-latest .ayg-pagination,
.fj-ayg-latest .ayg-loadmore,
.fj-ayg-latest .ayg-load-more {
  display: flex !important;
  justify-content: center !important;
  margin-top: 40px !important;
}

.fj-ayg-library .ayg-pagination a,
.fj-ayg-library .ayg-pagination button,
.fj-ayg-library .ayg-loadmore a,
.fj-ayg-library .ayg-loadmore button,
.fj-ayg-library .ayg-load-more a,
.fj-ayg-library .ayg-load-more button,
.fj-ayg-latest .ayg-pagination a,
.fj-ayg-latest .ayg-pagination button,
.fj-ayg-latest .ayg-loadmore a,
.fj-ayg-latest .ayg-loadmore button,
.fj-ayg-latest .ayg-load-more a,
.fj-ayg-latest .ayg-load-more button {
  background: transparent !important;
  color: var(--fj-sermon-wine) !important;
  border: 1px solid rgba(90, 6, 32, 0.35) !important;
  min-height: 50px !important;
  min-width: 220px !important;
  padding: 0 26px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
}

.fj-ayg-library .ayg-pagination a:hover,
.fj-ayg-library .ayg-pagination button:hover,
.fj-ayg-library .ayg-loadmore a:hover,
.fj-ayg-library .ayg-loadmore button:hover,
.fj-ayg-library .ayg-load-more a:hover,
.fj-ayg-library .ayg-load-more button:hover,
.fj-ayg-latest .ayg-pagination a:hover,
.fj-ayg-latest .ayg-pagination button:hover,
.fj-ayg-latest .ayg-loadmore a:hover,
.fj-ayg-latest .ayg-loadmore button:hover,
.fj-ayg-latest .ayg-load-more a:hover,
.fj-ayg-latest .ayg-load-more button:hover {
  background: var(--fj-sermon-wine) !important;
  color: #fff !important;
}


/* ============================================================
   IFRAME / POPUP / PLAYER CLEANUP
   ============================================================ */

.fj-ayg-latest iframe,
.fj-ayg-library iframe {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
}

.fj-ayg-latest a,
.fj-ayg-library a {
  text-decoration: none !important;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1200px) {
  .fj-sermon-latest-card {
    grid-template-columns: 1fr !important;
    width: min(100% - 40px, 1100px) !important;
    max-width: 1100px !important;
    gap: 42px !important;
  }

  .fj-sermon-library-panel {
    width: min(100% - 40px, 1100px) !important;
    max-width: 1100px !important;
  }

  .fj-ayg-latest .ayg-gallery,
  .fj-ayg-latest .ayg-videos,
  .fj-ayg-latest .ayg-items,
  .fj-ayg-latest .ayg-row,
  .fj-ayg-latest .ayg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .fj-ayg-library .ayg-gallery,
  .fj-ayg-library .ayg-videos,
  .fj-ayg-library .ayg-items,
  .fj-ayg-library .ayg-row,
  .fj-ayg-library .ayg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}


/* ============================================================
   RESPONSIVE — SMALL TABLET
   ============================================================ */

@media (max-width: 900px) {
  .fj-ayg-latest .ayg-gallery,
  .fj-ayg-latest .ayg-videos,
  .fj-ayg-latest .ayg-items,
  .fj-ayg-latest .ayg-row,
  .fj-ayg-latest .ayg-grid {
    grid-template-columns: 1fr !important;
  }

  .fj-sermon-library-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .fj-sermon-search-note {
    display: none;
  }
}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .fj-sermon-latest {
    padding: 34px 0;
  }

  .fj-sermon-latest-card,
  .fj-sermon-library-panel {
    width: min(100% - 28px, 100%) !important;
    max-width: calc(100% - 28px) !important;
    padding: 24px !important;
    border-radius: 18px;
  }

  .fj-sermon-library-bg {
    padding: 58px 0 70px;
  }

  .fj-sermon-main-title {
    font-size: 42px;
  }

  .fj-sermon-cross-line span {
    width: 54px;
  }

  .fj-sermon-library-heading h2 {
    font-size: 40px;
  }

  .fj-ayg-latest .ayg-gallery,
  .fj-ayg-latest .ayg-videos,
  .fj-ayg-latest .ayg-items,
  .fj-ayg-latest .ayg-row,
  .fj-ayg-latest .ayg-grid,
  .fj-ayg-library .ayg-gallery,
  .fj-ayg-library .ayg-videos,
  .fj-ayg-library .ayg-items,
  .fj-ayg-library .ayg-row,
  .fj-ayg-library .ayg-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .fj-sermon-tabs {
    gap: 18px;
    flex-wrap: wrap;
  }

  .fj-sermon-tabs button {
    font-size: 12px;
  }

  .fj-ayg-library .ayg-search-form,
  .fj-ayg-library form[class*="search"],
  .fj-ayg-latest .ayg-search-form,
  .fj-ayg-latest form[class*="search"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .fj-ayg-library .ayg-search-form button,
  .fj-ayg-library form[class*="search"] button,
  .fj-ayg-latest .ayg-search-form button,
  .fj-ayg-latest form[class*="search"] button {
    width: 100% !important;
  }
}


/* ============================================================
   FJMBC SERMON TITLE SIZE FIX
   Paste AFTER the main sermon CSS
   ============================================================ */

/* Left title: "Stay Encouraged. Be Inspired." */
.fj-sermon-main-title {
  font-size: clamp(34px, 3vw, 30px) !important;
  line-height: 1.12 !important;
}

/* Sermon Library title */
.fj-sermon-library-heading h2 {
  font-size: clamp(34px, 3vw, 52px) !important;
  letter-spacing: 0.06em !important;
}

/* Latest sermon video titles */
.fj-ayg-latest .ayg-title,
.fj-ayg-latest .ayg-video-title,
.fj-ayg-latest .ayg-caption,
.fj-ayg-latest .ayg-name {
  font-size: 19px !important;
  line-height: 1.35 !important;
}

/* Library video titles */
.fj-ayg-library .ayg-title,
.fj-ayg-library .ayg-video-title,
.fj-ayg-library .ayg-caption,
.fj-ayg-library .ayg-name {
  font-size: 17px !important;
  line-height: 1.35 !important;
}

/* Mobile */
@media (max-width: 767px) {
  .fj-sermon-main-title {
    font-size: 34px !important;
  }

  .fj-sermon-library-heading h2 {
    font-size: 34px !important;
  }

  .fj-ayg-latest .ayg-title,
  .fj-ayg-latest .ayg-video-title,
  .fj-ayg-latest .ayg-caption,
  .fj-ayg-latest .ayg-name,
  .fj-ayg-library .ayg-title,
  .fj-ayg-library .ayg-video-title,
  .fj-ayg-library .ayg-caption,
  .fj-ayg-library .ayg-name {
    font-size: 16px !important;
  }
}


/* ============================================================
   FJMBC LATEST SERMON 40 / 60 LAYOUT FIX
   Text side = 40%
   Video side = 60%
   Paste AFTER the main sermon CSS
   ============================================================ */

.fj-sermon-latest-card {
  grid-template-columns: 40% 60% !important;
  gap: 40px !important;
  align-items: center !important;
}

/* Make sure the video side does not overflow */
.fj-ayg-latest {
  min-width: 0 !important;
  width: 100% !important;
}

/* Keep 3 videos inside the 60% side */
.fj-ayg-latest .ayg-gallery,
.fj-ayg-latest .ayg-videos,
.fj-ayg-latest .ayg-items,
.fj-ayg-latest .ayg-row,
.fj-ayg-latest .ayg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Give text side breathing room */
.fj-sermon-latest-intro {
  width: 100% !important;
  max-width: 520px !important;
}

.fj-sermon-latest-intro p {
  max-width: 460px !important;
}

/* Tablet: stack cleanly */
@media (max-width: 1200px) {
  .fj-sermon-latest-card {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  .fj-sermon-latest-intro {
    max-width: 720px !important;
  }

  .fj-sermon-latest-intro p {
    max-width: 620px !important;
  }
}

/* Mobile: one column */
@media (max-width: 767px) {
  .fj-sermon-latest-card {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .fj-ayg-latest .ayg-gallery,
  .fj-ayg-latest .ayg-videos,
  .fj-ayg-latest .ayg-items,
  .fj-ayg-latest .ayg-row,
  .fj-ayg-latest .ayg-grid {
    grid-template-columns: 1fr !important;
  }
}/* End custom CSS */