.elementor-3358 .elementor-element.elementor-element-7ef14f8{--display:flex;}.elementor-3358 .elementor-element.elementor-element-3395583{--display:flex;}.elementor-3358 .elementor-element.elementor-element-8de321a{--display:flex;}body.elementor-page-3358:not(.elementor-motion-effects-element-type-background), body.elementor-page-3358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0F14;}/* Start custom CSS for html, class: .elementor-element-979a4f5 */<style>

/* ================================
   GLOBAL
================================ */
.hoc-podcast-page{
  background:#0e0e0e;
  color:#f5f5f5;
  font-family:Arial, Helvetica, sans-serif;
}

.hoc-podcast-page .container{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

/* ================================
   HERO
================================ */

.podcast-hero{
  position:relative;

  width:100vw;

  margin-left:calc(50% - 50vw);

  padding:140px 0 100px;

  text-align:center;

  overflow:hidden;
}

/* FULL WIDTH BACKGROUND + OVERLAY */

.podcast-hero::before{
  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    rgba(0,0,0,0.50),
    rgba(0,0,0,0.70)
  ),
  url(https://hopeovercoffee.com/wp-content/uploads/2026/05/Podcast-Hero.png);

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  z-index:0;
}

/* keep content above overlay */

.podcast-hero .container{
  position:relative;

  z-index:2;
}

/* keep content above background */
.podcast-hero .container{
  position:relative;
  z-index:2;
}
.section-tag{
  color:#c89b3c;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:bold;
  margin-bottom:20px;
}

.podcast-hero h1{
  font-size:clamp(52px,8vw,92px);
  line-height:1.05;
  margin-bottom:25px;
  font-weight:800;
  color: #ffffff;
}

.podcast-hero p{
  max-width:750px;
  margin:auto;
  font-size:22px;
  color:#cfcfcf;
  line-height:1.8;
}

/* BUTTON */
.btn{
  display:inline-block;
  margin-top:40px;
  padding:16px 32px;
  background:#c89b3c;
  color:#0e0e0e;
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
  transition:.3s ease;
}

.btn:hover{
  background:#ddb04a;
}

/* ================================
   FEATURED EPISODE
================================ */
.featured-episode{
  padding:120px 0;
}

.featured-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:50px;
  align-items:center;
}

/* VIDEO */
.video-wrap{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:10px;
}

.video-wrap iframe{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

/* TEXT */
.featured-content h2{
  font-size:48px;
  margin-bottom:20px;
  color: #ffffff;
}

.featured-content p{
  color:#cfcfcf;
  line-height:1.8;
  font-size:18px;
  margin-bottom:20px;
}

/* ================================
   EPISODES GRID
================================ */
.episodes-section{
  padding:40px 0 120px;
}

.episodes-header{
  text-align:center;
  margin-bottom:60px;
}

.episodes-header h2{
  font-size:52px;
  margin-bottom:15px;
  color:#ffffff;
}

.episodes-header p{
  color:#cfcfcf;
  font-size:20px;
}

/* GRID */
.episodes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}

/* CARD */
.episode-card{
  background:#171717;
  border:1px solid #222;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  transition:.3s ease;
}

.episode-card:hover{
  transform:translateY(-6px);
  border-color:#c89b3c;
}

/* IMAGE */
.episode-card img{
  width:100%;
  display:block;
}

/* CONTENT */
.episode-card-content{
  padding:25px;
}

.episode-card-content h3{
  color:#ffffff;
  font-size:24px;
  margin-bottom:15px;
}

.episode-card-content p{
  color:#bdbdbd;
  line-height:1.7;
  font-size:16px;
}

/* MOBILE */
@media(max-width:900px){

  .featured-grid{
    grid-template-columns:1fr;
  }

  .featured-content{
    text-align:center;
  }

}

@media(max-width:768px){

  .podcast-hero{
    padding:110px 0 80px;
  }

  .featured-episode{
    padding:90px 0;
  }

  .episodes-section{
    padding-bottom:90px;
  }

  .featured-content h2{
    font-size:38px;
  }

  .episodes-header h2{
    font-size:42px;
  }

}

</style>/* End custom CSS */