/*
Template Name: <
Author:  Pixydrops
Author URI: https://themeforest.net/user/pixydrops/portfolio
Developer: Pixydrops
Version: 1.0.0
Description: 
*/
/* Css files are always kept clean. We do not any extra Css 


/*CSS Table Of Content Ends Here*/
@font-face {
  font-family: "Inter";
  src: url("../webfonts/Inter_18pt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../webfonts/Inter_18pt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plantin MT Pro";
  src: url("../webfonts/PlantinMTProRgIt.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  --body: #ffffff;
  --primary: #5380FC;
  --text: #525252;  /* Was #777777 — failed WCAG AA on the light-gray bg4 sections; darkened to ~7.5:1 on white / ~6.9:1 on bg4 */
  --heading: #242023;
  --light: #e4e4e4;
  --black: #242023;
  --borders: rgba(255, 255, 255, 0.1);
  --white: #fff;
  --spantext: #757575;
  --theme: #5380FC;
  --brand-dark-blue: #243F84;
  --brand-light-blue: #99DEFD;
  --bg1: #161616;
  --bg2: #1b1b1b;
  --bg3: #fff;
  --bg4: #f5f5f5;
  --social: #1E1E1E;
  --border1: #454750;
  --pra-clr: #bebebe;
  --dd-clr: #dadada;
  --place: #858585;
  --tag: #646464;
  --bspan: #ababab;
}

/* -----------------------
    Template Default Fonts
 ------------------------- */
.body-font {
  font-family: "Inter", sans-serif;
}

html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  color: var(--white);
  background-color: #fff;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  border: none;
  background-color: transparent;
  padding: 0;
}

input:focus {
  color: var(--white);
  outline: none;
}

input {
  color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
  margin: 0px;
  padding: 0;
  color: var(--heading);
  transition: all 0.4s ease-in-out;
}

h1 {
  font-size: 80px;
  font-weight: 700;
  line-height: 112%;
}

h2 {
  font-size: 50px;
  line-height: 120%;
  font-weight: 700;
}

h3 {
  font-size: 40px;
  font-weight: 700;
}

h4 {
  font-size: 32px;
  font-weight: 700;
  line-height: 130%;
}

h5 {
  font-size: 26px;
  font-weight: 700;
}

h6 {
  font-size: 24px;
  font-weight: 700;
  line-height: 145%;
}

a {
  text-decoration: none;
  outline: none !important;
  cursor: pointer;
  color: var(--white);
  transition: all 0.4s ease-in-out;
}

p {
  margin: 0px;
  transition: all 0.4s ease-in-out;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: var(--white);
}

.zindex1 {
  z-index: 1;
}

.whitehover {
  color: var(--white) !important;
}

.pra-clr {
  /* Was #8f8f8f — failed WCAG AA contrast (~2.8:1 on white). Darkened to #5a5a5a
     which passes ~6.4:1 on white and ~5.9:1 on the light-gray Episodes bg. */
  color: #5a5a5a !important;
}

.light-clr {
  color: var(--light);
}

.light-bb {
  border-bottom: 1px solid var(--light);
}

.text-clr {
  color: var(--text) !important;
}

.theme-border {
  border: 1px solid var(--theme) !important;
}

.primaryhover {
  transition: all 0.4s;
}
.primaryhover:hover {
  color: var(--primary);
}

.pra-border {
  border: 1px solid #bebebe;
}

.radius100 {
  border-radius: 100px;
}

.bb-border {
  border-bottom: 1px solid var(--border1) !important;
}

.bt-border {
  border-top: 1px solid var(--border1) !important;
}

.socialbg {
  background: var(--social);
}

.htheme {
  transition: all 0.4s;
}
.htheme:hover {
  color: var(--theme);
}

.tag-clr {
  color: var(--tag);
}

.fs20 {
  font-size: 20px;
  line-height: 32px;
}
@media (max-width: 1399px) {
  .fs20 {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 1199px) {
  .fs20 {
    font-size: 16px;
    line-height: 26px;
  }
}

.fs18 {
  font-size: 18px;
  line-height: 32px;
}
@media (max-width: 1199px) {
  .fs18 {
    font-size: 16px;
    line-height: 26px;
  }
}

.fs14 {
  font-size: 14px;
}

.fs12 {
  font-size: 12px;
}

span {
  margin: 0px;
  transition: all 0.4s ease-in-out;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: var(--white);
}

.common-social li a {
  width: 41px;
  min-width: 41px;
  height: 41px;
  display: block;
  border: 1px solid var(--border1);
  transition: all 0.5s;
}
.common-social li a:hover {
  background: var(--theme);
  border-color: var(--theme);
}
.common-social li a:hover svg path {
  stroke: var(--white);
}
.common-social li a:hover i {
  color: var(--white);
}

@media (min-width: 575px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.slider-button .cmn-nextpre-controll,
.slider-button .cmn-prev {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.4s;
}
.slider-button .cmn-nextpre-controll i,
.slider-button .cmn-prev i,
.slider-button .cmn-nextpre-controll .svg-icon,
.slider-button .cmn-prev .svg-icon {
  color: var(--border1);
  font-size: 24px;
  transition: all 0.4s;
}
.slider-button .cmn-nextpre-controll.active, .slider-button .cmn-nextpre-controll:hover,
.slider-button .cmn-prev.active,
.slider-button .cmn-prev:hover {
  background: var(--theme);
  border-color: var(--theme);
}
.slider-button .cmn-nextpre-controll.active i, .slider-button .cmn-nextpre-controll:hover i,
.slider-button .cmn-prev.active i,
.slider-button .cmn-prev:hover i,
.slider-button .cmn-nextpre-controll.active .svg-icon, .slider-button .cmn-nextpre-controll:hover .svg-icon,
.slider-button .cmn-prev.active .svg-icon,
.slider-button .cmn-prev:hover .svg-icon {
  color: var(--white);
}
/* Hover on an already-`.active` arrow: flip to the "off" default state (gray
   bg + gray icon) so it has a visible hover state (otherwise `.active` and
   `:hover` look identical). Mirrors the inactive arrow's resting look. */
.slider-button .cmn-nextpre-controll.active:hover,
.slider-button .cmn-prev.active:hover {
  background: var(--bg4);
  border-color: var(--bg4);
}
.slider-button .cmn-nextpre-controll.active:hover i,
.slider-button .cmn-prev.active:hover i,
.slider-button .cmn-nextpre-controll.active:hover .svg-icon,
.slider-button .cmn-prev.active:hover .svg-icon {
  color: var(--border1);
}
@media (max-width: 1399px) {
  .slider-button .cmn-nextpre-controll,
  .slider-button .cmn-prev {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }
  .slider-button .cmn-nextpre-controll i,
  .slider-button .cmn-prev i,
  .slider-button .cmn-nextpre-controll .svg-icon,
  .slider-button .cmn-prev .svg-icon {
    font-size: 17px;
  }
}
@media (max-width: 1399px) {
  .slider-button .cmn-nextpre-controll,
  .slider-button .cmn-prev {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
  .slider-button .cmn-nextpre-controll i,
  .slider-button .cmn-prev i,
  .slider-button .cmn-nextpre-controll .svg-icon,
  .slider-button .cmn-prev .svg-icon {
    font-size: 16px;
  }
}
.slider-button .previus-text {
  font-size: 22px;
}
.slider-button .project-storke {
  font-size: 44px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #454750;
  color: transparent;
  display: block;
}
@media (max-width: 575px) {
  .slider-button .previus-text {
    font-size: 18px;
  }
  .slider-button .project-storke {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .slider-button .previus-text {
    font-size: 16px;
  }
  .slider-button .project-storke {
    font-size: 24px;
  }
}
@media (max-width: 400px) {
  .slider-button .previus-text {
    font-size: 14px;
  }
  .slider-button .project-storke {
    display: none;
  }
}

.d-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.spantext-clr {
  color: var(--spantext) !important;
}

.common-form textarea,
.common-form input {
  outline: none;
  border-radius: 0 8px 8px 8px;
  padding: 16px 19px;
  color: var(--pra-clr);
  font-size: 16px;
  border: 1px solid var(--border1);
  background: transparent;
  width: 100%;
}
.common-form ::placeholder {
  color: var(--pra-clr);
  font-size: 16px;
}
.common-form .getin-touch {
  border: 1px solid var(--white);
  border-radius: 8px;
  transition: all 0.5s;
}
.common-form .getin-touch .icons {
  transform: rotate(35deg);
  display: block;
  transition: all 0.5;
}
.common-form .getin-touch .icons i {
  transition: all 0.5s;
}
.common-form .getin-touch:hover {
  border-color: var(--theme);
  color: var(--theme);
}
.common-form .getin-touch:hover .icons {
  transform: rotate(-35deg);
}

.heading-bg {
  background: var(--heading);
}

/* Subscribe block buttons: dark blue default, bright blue on hover (inverted) */
.subscriber-apple .touch-btn {
  background: var(--brand-dark-blue);
}
.subscriber-apple .touch-btn:hover {
  background: var(--theme);
}

/* Contact form "Send a Message" button: dark blue default, bright blue on hover */
.main-contact-form .touch-btn {
  background: var(--brand-dark-blue) !important;
}
.main-contact-form .touch-btn:hover {
  background: var(--theme) !important;
}

/* Footer: override the heading-bg (off-black) → dark blue */
.footer-version-one.heading-bg,
.footer-bottom-version-one.heading-bg {
  background: var(--brand-dark-blue);
}

/* All footer text and links → white (overriding pra-clr which uses !important) */
.footer-version-one,
.footer-version-one a,
.footer-version-one i,
.footer-version-one span,
.footer-version-one .pra-clr,
.footer-version-one .footer-title,
.footer-bottom-version-one,
.footer-bottom-version-one a,
.footer-bottom-version-one .pra-clr {
  color: var(--white) !important;
}
/* Keep footer link text white on hover too — the animated underline (.cmn-hover)
   is the only hover affordance. Overrides .flink-items:hover which sets bright blue. */
.footer-version-one .flink-items:hover,
.footer-version-one .flink-items:hover i,
.footer-bottom-version-one a:hover {
  color: var(--white) !important;
}

.black-clr {
  color: var(--black);
}

.white-clr {
  color: var(--white);
}

.whitebg {
  background: var(--white);
}

.theme-clr {
  color: var(--theme);
}

.dark-blue-clr {
  color: var(--brand-dark-blue);
}

.light-blue-clr {
  color: var(--brand-light-blue);
}

.theme-bg {
  background: var(--theme);
}

.bg1-clr {
  background: var(--bg1);
}

.bg2-clr {
  background: var(--bg2) !important;
}

.bg3-clr {
  background: var(--bg3);
}

.bg4-clr {
  background: var(--bg4);
}

.themebg {
  background: var(--theme);
}

.hb-border {
  border-bottom: 1px solid var(--border1);
}

.cmn-border {
  border: 1px solid #454750 !important;
}

.rot60 {
  transform: rotate(60deg);
  transition: all 0.4s;
}

.bspan-clr {
  color: var(--bspan);
}

.pt-space {
  padding-top: 80px;
}

.pb-space {
  padding-bottom: 80px;
}

@media (max-width: 1399px) {
  h1 {
    font-size: 64px;
  }
  h2 {
    font-size: 44px;
  }
  h3 {
    font-size: 38px;
  }
  h4 {
    font-size: 26px;
  }
  .pt-space {
    padding-top: 80px;
  }
  .pb-space {
    padding-bottom: 80px;
  }
}
@media (max-width: 1199px) {
  h1 {
    font-size: 60px;
  }
  h2 {
    font-size: 42px;
  }
  h3 {
    font-size: 36px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 20px;
  }
  h6 {
    font-size: 18px;
  }
  .pt-space {
    padding-top: 80px;
  }
  .pb-space {
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 36px;
  }
  h3 {
    font-size: 29px;
  }
  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 19px;
  }
  h6 {
    font-size: 17px;
  }
  .pt-space {
    padding-top: 80px;
  }
  .pb-space {
    padding-bottom: 80px;
  }
}
.hoverwhite {
  transition: all 0.4s;
}
.hoverwhite:hover {
  color: #fff;
}

.hoverblack {
  transition: all 0.4s;
}
.hoverblack:hover {
  color: #000;
}

section,
footer {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.map-section iframe {
  width: 100%;
  height: 470px;
}
@media (max-width: 1199px) {
  .map-section iframe {
    height: 400px;
  }
}
@media (max-width: 991px) {
  .map-section iframe {
    height: 300px;
  }
}

.sponsor-section {
  border-top: 1px solid #e5e5e5;
}
.sponsor-section .sponsor-item {
  margin: 0 auto;
  max-width: 190px;
  height: 50px;
}
.sponsor-section .sponsor-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.5s;
}
.sponsor-section .sponsor-item img:hover {
  filter: brightness(0);
}

.new-podcast-section {
  position: relative;
  background: url(../img/banner/new-podcastbg.png) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 1;
}
.new-podcast-section .new-podcast-content .new-logo {
  width: 140px;
  height: 44px;
  display: block;
}
.new-podcast-section .new-podcast-content .new-logo img {
  width: 100%;
  height: 100%;
}
.new-podcast-section .big-mike {
  position: absolute;
  left: 50px;
  bottom: -10px;
  z-index: -1;
}
.new-podcast-section .new-pocast-btn:hover {
  background: var(--white);
  color: var(--black);
}
@media (max-width: 1800px) {
  .new-podcast-section .big-mike {
    width: 80px;
  }
}
@media (max-width: 991px) {
  .new-podcast-section .big-mike {
    display: none;
  }
}

.new-podcast-sectionv2 {
  background: url(../img/banner/support-and-listen.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 1;
}
.new-podcast-sectionv2 .podact-line {
  position: absolute;
  right: 0;
  bottom: 0;
  animation: rots 2s linear infinite;
}
.new-podcast-sectionv2::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.691);
  z-index: -1;
}

.new-podcast-wrapsv2 {
  display: flex;
  align-items: center;
  gap: 142px;
}
.new-podcast-wrapsv2 .icon-thumb {
  width: 220px;
  min-width: 220px;
  height: 220px;
  border-radius: 50%;
}
.new-podcast-wrapsv2 .new-podcast-contentv2 {
  max-width: 650px;
}
@media (max-width: 1599px) {
  .new-podcast-wrapsv2 {
    gap: 50px;
  }
  .new-podcast-wrapsv2 .icon-thumb {
    width: 220px;
    min-width: 220px;
    height: 220px;
    border-radius: 50%;
  }
  .new-podcast-wrapsv2 .new-podcast-contentv2 {
    max-width: 650px;
  }
}
@media (max-width: 991px) {
  .new-podcast-wrapsv2 {
    gap: 30px;
  }
  .new-podcast-wrapsv2 .icon-thumb {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .new-podcast-wrapsv2 .icon-thumb img {
    width: 40px;
  }
  .new-podcast-wrapsv2 .new-podcast-contentv2 {
    max-width: 650px;
  }
}
@media (max-width: 575px) {
  .new-podcast-wrapsv2 {
    gap: 20px;
    display: grid;
  }
  .new-podcast-wrapsv2 .icon-thumb {
    width: 90px;
    min-width: 90px;
    height: 90px;
    border-radius: 50%;
  }
  .new-podcast-wrapsv2 .icon-thumb img {
    width: 30px;
  }
  .new-podcast-wrapsv2 .new-podcast-contentv2 {
    max-width: 650px;
  }
}

@keyframes rots {
  50% {
    transform: rotate(5deg);
  }
}
.play-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.personal-podcast-item .thumb {
  margin-top: -32px;
  transition: transform 0.4s;
}
.personal-podcast-item h5 {
  max-width: 270px;
  margin: 0 auto;
}
.personal-podcast-item:hover .thumb {
  transform: translateY(7px);
}
.personal-podcast-item:hover h5 a {
  color: var(--theme);
}
.personal-podcast-item:hover .theme-clr {
  color: var(--theme);
}
@media (max-width: 991px) {
  .personal-podcast-item .thumb {
    margin-top: 16px;
  }
}

.support-donation {
  background: url(../img/banner/suport-bg.png) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}

.feature-item .thumb img {
  transition: all 0.4s;
}
.feature-item .thumb .feature-headphoe {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme);
  position: absolute;
  top: 40px;
  left: 40px;
}
.feature-item .touch-btn:hover {
  background: var(--theme);
  color: var(--white) !important;
}
.feature-item h4 {
  max-width: 262px;
}
.feature-item .fashion-life .episode-sri {
  padding-left: 10px;
}
.feature-item .fashion-life .episode-sri::before {
  position: absolute;
  content: "";
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--pra-clr);
  border-radius: 50%;
}
.feature-item:hover .content .fashion-life a {
  color: var(--theme);
}
.feature-item:hover .content .black-clr {
  color: var(--theme);
}
.feature-item:hover .thumb img {
  transform: scale(1.08);
}
@media (max-width: 1399px) {
  .feature-item .thumb {
    width: 100%;
  }
  .feature-item .thumb img {
    width: 100%;
  }
  .feature-item .thumb .feature-headphoe {
    top: 15px;
    left: 15px;
  }
}

/* Wavy decorative curve at the top of the Episodes section. Width fills the
   section, height preserves the source's natural aspect (1920×771 ≈ 2.49:1) —
   was previously `height: 100%` which stretched it vertically to fill the
   whole section, distorting the curve on mobile (Lighthouse flagged the
   aspect-ratio mismatch). Now it sits at the top as a subtle accent. */
.feature-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}

.cmn-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgb(0, 0, 0);
  opacity: 0.302;
  position: relative;
}

.cmn-pagination .swiper-pagination-bullet-active {
  background: var(--theme);
  opacity: 1;
}

.application-circle {
  position: absolute;
  right: 50px;
  top: -40px;
  z-index: -1;
  animation: cir360 10s linear infinite;
}

.application-sponsor .app-sponsor-item img {
  transition: all 0.5s;
}
.application-sponsor .app-sponsor-item img:hover {
  filter: brightness(0);
}
@media (max-width: 991px) {
  .application-sponsor .app-sponsor-item {
    max-width: 120px;
  }
  .application-sponsor .app-sponsor-item img {
    width: 100%;
    object-fit: contain;
  }
}

@keyframes cir360 {
  100% {
    transform: rotate(360deg);
  }
}
.sponsor-section01 .sponsor-item img {
  filter: brightness(25);
}

.ex-vid {
  width: 60px;
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme);
  border-radius: 50%;
  margin: -30px auto 0;
  position: relative;
  transition: all 0.4s;
}
.ex-vid:hover {
  background: var(--brand-dark-blue);
}
.ex-vid:hover i {
  color: var(--white);
}

.sub-header-link .line {
  height: 13px;
  border-left: 1px solid #7a7575;
  display: block;
}
.sub-header-link li a:hover {
  color: var(--theme) !important;
}

.cmn-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
@media (max-width: 991px) {
  .cmn-fixed {
    z-index: 9999 !important;
  }
}

.header-section {
  width: 100%;
  z-index: 100;
  z-index: 999;
}
.header-section .brand-logo {
  max-width: 180px;
}
@media (max-width: 1199px) {
  .header-section .brand-logo {
    max-width: 100px;
  }
}
@media (max-width: 767px) {
  .header-section .search-toggle-box {
    display: none;
    position: absolute;
    width: 100%;
    top: 60px;
    z-index: 10;
  }
}
@media (max-width: 991px) {
  .header-section .main-navbar .navbar-toggle-item {
    display: none;
  }
}
@media (min-width: 992px) {
  .header-section .main-navbar .navbar-toggle-item {
    display: initial !important;
  }
}
.header-section .main-navbar .custom-nav .menu-item button::after {
  position: absolute;
  content: "\f078";
  font-family: "FontAwesome";
  font-weight: 500;
  font-size: 12px;
  right: -20px;
  transition: all 0.2s ease;
}
.header-section .main-navbar .custom-nav .menu-item button,
.header-section .main-navbar .custom-nav .menu-item a,
.header-section .main-navbar .custom-nav .menu-link button,
.header-section .main-navbar .custom-nav .menu-link a {
  transition: all 0.4s;
  font-size: 16px !important;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 1px;
}
@media (max-width: 1199px) {
  .header-section .main-navbar .custom-nav .menu-item button,
  .header-section .main-navbar .custom-nav .menu-item a,
  .header-section .main-navbar .custom-nav .menu-link button,
  .header-section .main-navbar .custom-nav .menu-link a {
    font-size: 14px !important;
    font-weight: 400 !important;
  }
}
@media (max-width: 575px) {
  .header-section .main-navbar .custom-nav .menu-item button,
  .header-section .main-navbar .custom-nav .menu-item a,
  .header-section .main-navbar .custom-nav .menu-link button,
  .header-section .main-navbar .custom-nav .menu-link a {
    font-size: 16px;
  }
}
.header-section .main-navbar .custom-nav .menu-item button:hover, .header-section .main-navbar .custom-nav .menu-item button.active,
.header-section .main-navbar .custom-nav .menu-item a:hover,
.header-section .main-navbar .custom-nav .menu-item a.active,
.header-section .main-navbar .custom-nav .menu-link button:hover,
.header-section .main-navbar .custom-nav .menu-link button.active,
.header-section .main-navbar .custom-nav .menu-link a:hover,
.header-section .main-navbar .custom-nav .menu-link a.active {
  color: var(--brand-dark-blue);
}
.header-section .main-navbar .custom-nav .menu-item button:hover::after, .header-section .main-navbar .custom-nav .menu-item button.active::after,
.header-section .main-navbar .custom-nav .menu-item a:hover::after,
.header-section .main-navbar .custom-nav .menu-item a.active::after,
.header-section .main-navbar .custom-nav .menu-link button:hover::after,
.header-section .main-navbar .custom-nav .menu-link button.active::after,
.header-section .main-navbar .custom-nav .menu-link a:hover::after,
.header-section .main-navbar .custom-nav .menu-link a.active::after {
  transform: rotate(90deg);
}
@media (max-width: 991px) {
  .header-section .main-navbar .custom-nav {
    width: 100%;
  }
  .header-section .main-navbar .custom-nav .sub-menu {
    display: none;
    padding: 5px 20px 5px;
    background: var(--bg1) !important;
  }
  .header-section .main-navbar .custom-nav .sub-menu li a {
    font-size: 14px !important;
    letter-spacing: 2px;
  }
}
@media (min-width: 992px) {
  .header-section .main-navbar .custom-nav .menu-item {
    padding: 34px 0;
  }
  .header-section .main-navbar .custom-nav .menu-item button:hover button::after {
    transform: rotate(-180deg);
  }
  .header-section .main-navbar .custom-nav .sub-menu {
    position: absolute;
    top: 20px;
    left: -30px;
    min-width: 240px;
    opacity: 0;
    width: max-content;
    visibility: hidden;
    transform: translateY(50px);
    text-wrap: nowrap;
    transition: 0.8s;
    display: initial !important;
    background: var(--white);
    z-index: 10;
    pointer-events: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 8px;
  }
  .header-section .main-navbar .custom-nav .sub-menu button {
    color: var(--black);
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: capitalize;
  }
  .header-section .main-navbar .custom-nav .sub-menu li a {
    color: var(--heading);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
  }
  .header-section .main-navbar .custom-nav .sub-menu .sub-menu {
    border-left: 2px solid var(--p1);
    left: 99%;
    top: -55px;
    z-index: 9;
  }
  .header-section .main-navbar .custom-nav .menu-item {
    position: relative;
  }
  .header-section .main-navbar .custom-nav .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(60px);
    pointer-events: auto;
  }
}
.header-section .main-navbar .navbar-toggle-btn {
  width: 36px;
  height: 24px;
  position: relative;
  right: 0;
  transition: 0.5s;
  top: 0;
}
.header-section .main-navbar .navbar-toggle-btn span {
  background: var(--theme);
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.5s;
}
.header-section .main-navbar .navbar-toggle-btn span:nth-child(1) {
  top: 0;
}
.header-section .main-navbar .navbar-toggle-btn span:nth-child(2), .header-section .main-navbar .navbar-toggle-btn span:nth-child(3) {
  top: 12px;
}
.header-section .main-navbar .navbar-toggle-btn span:nth-child(4) {
  top: 24px;
}
.header-section .main-navbar .navbar-toggle-btn.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.header-section .main-navbar .navbar-toggle-btn.open span:nth-child(2) {
  transform: rotate(45deg);
}
.header-section .main-navbar .navbar-toggle-btn.open span:nth-child(3) {
  transform: rotate(-45deg);
}
.header-section .main-navbar .navbar-toggle-btn.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.header-section .search-icon {
  transition: all 0.4s;
  width: 48px;
  min-width: 48px;
  height: 48px;
}
.header-section .search-icon i {
  transition: all 0.4s;
  font-size: 20px;
}
.header-section .search-icon:hover {
  background: var(--primary);
}
.header-section .search-icon:hover i {
  color: var(--white);
}
.header-section .touch-btn {
  font-size: 12px;
  border-radius: 100px;
  background: var(--brand-dark-blue);
}
.header-section .touch-btn .icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
}
.header-section .touch-btn .icon i {
  transition: all 0.4s;
}
.header-section .touch-btn:hover {
  color: var(--white);
  background: var(--theme);
}
.header-section .touch-btn:hover .icon i {
  color: var(--primary);
}
.header-section .remove-clickbg-adding {
  border-radius: 50%;
  width: 50px;
  min-width: 50px;
  height: 50px;
  background: var(--bg1);
}
@media (max-width: 991px) {
  .header-section .remove-clickbg-adding {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
  .header-section .remove-clickbg-adding i {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .header-section {
    background: var(--heading);
  }
}

@media (min-width: 575px) {
  .header-onestyle .container {
    max-width: 1830px;
    margin: 0 auto;
  }
}

.cus__scroll {
  max-height: 65vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.header-fixed {
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
  background: var(--bg1);
}
.header-fixed .sub-header-wrap {
  display: none !important;
}
.header-fixed .touch-btn {
  background: var(--theme);
}
.header-fixed .touch-btn:hover {
  background: var(--brand-dark-blue);
}

.remove-click {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remove-click i {
  font-size: 26px;
  color: var(--title);
}
.remove-click:hover {
  cursor: pointer;
}
@media (max-width: 1199px) {
  .remove-click {
    width: 39px;
    height: 39px;
  }
  .remove-click i {
    font-size: 22px;
  }
}

.subside-barmenu {
  width: 319px;
  height: 100%;
  position: fixed;
  z-index: 99999;
  background: #000;
  right: -320px;
  top: 0;
  transition: all 0.4s;
  overflow-y: scroll;
}
.subside-barmenu .remove-click {
  margin: 10px;
  padding: 5px;
  border-radius: 6px;
  margin: 0 auto;
}
.subside-barmenu .remove-click:hover {
  cursor: pointer;
}
.subside-barmenu .remove-click i {
  font-size: 36px;
  color: var(--theme);
}
.subside-barmenu .sub-contact-wrapper {
  padding: 40px 20px;
}
.subside-barmenu .sub-contact-wrapper .side-logo {
  margin-bottom: 20px;
}
.subside-barmenu .sub-contact-wrapper p {
  font-size: 14px;
  margin-bottom: 40px;
}
.subside-barmenu .sub-contact-wrapper .sub-contact-left {
  gap: 24px;
  margin-bottom: 40px;
}
.subside-barmenu .sub-contact-wrapper .social li a {
  width: 45px;
  height: 45px;
  background: var(--base);
  border: 1px solid var(--base);
}
.subside-barmenu .sub-contact-wrapper .social li a i {
  color: var(--title);
}
.subside-barmenu::before {
  display: none;
}
.subside-barmenu.active {
  right: 0px;
}

.ph-clickwrap {
  padding-left: 16px;
  border-left: 1px solid var(--borders);
}

.search-shopcart a:hover {
  color: var(--theme);
}

.header-threestyle {
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Pull the nav contents (logo + menu + Subscribe button) in from the edges on larger screens */
@media (min-width: 992px) {
  .header-section .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Logo: dark-blue default, bright-blue on hover (two stacked images, cross-fade) */
.brand-logo {
  position: relative;
  display: inline-block;
  /* Nudge down to optically center — the "g" descenders in "Aging" make
     the visual midpoint sit above the bounding-box midpoint */
  transform: translateY(4px);
}
/* Force aspect ratio to come from the HTML width/height attrs (240x104),
   not from a literal use of the height attr alone. Without this, the CSS
   `.w-100 { width: 100% !important }` on the imgs can race against the
   height attr in some renderers, producing a vertically-stretched logo. */
.brand-logo img {
  height: auto;
}
.brand-logo .logo-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}
.brand-logo .logo-default {
  transition: opacity 0.45s ease-in-out;
}
.brand-logo:hover .logo-default {
  opacity: 0;
}
.brand-logo:hover .logo-hover {
  opacity: 1;
}

/* Nav menu items — line above and below on hover OR when scrolled-into-view (.active) */
.header-section .main-navbar .custom-nav .menu-item > a {
  position: relative;
  padding: 6px 0;
  display: inline-block;
}
.header-section .main-navbar .custom-nav .menu-item > a::before,
.header-section .main-navbar .custom-nav .menu-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-dark-blue);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.header-section .main-navbar .custom-nav .menu-item > a::before {
  top: 0;
}
.header-section .main-navbar .custom-nav .menu-item > a::after {
  bottom: 0;
}
.header-section .main-navbar .custom-nav .menu-item > a:hover::before,
.header-section .main-navbar .custom-nav .menu-item > a:hover::after,
.header-section .main-navbar .custom-nav .menu-item > a.active::before,
.header-section .main-navbar .custom-nav .menu-item > a.active::after {
  transform: scaleX(1);
}
.header-threestyle .main-navbar .custom-nav .menu-item button::after {
  color: var(--black);
}
.header-threestyle .main-navbar .custom-nav .menu-item button,
.header-threestyle .main-navbar .custom-nav .menu-item a,
.header-threestyle .main-navbar .custom-nav .menu-link button,
.header-threestyle .main-navbar .custom-nav .menu-link a {
  color: var(--black);
}
.header-threestyle .main-navbar .custom-nav .menu-item button:hover, .header-threestyle .main-navbar .custom-nav .menu-item button.active,
.header-threestyle .main-navbar .custom-nav .menu-item a:hover,
.header-threestyle .main-navbar .custom-nav .menu-item a.active,
.header-threestyle .main-navbar .custom-nav .menu-link button:hover,
.header-threestyle .main-navbar .custom-nav .menu-link button.active,
.header-threestyle .main-navbar .custom-nav .menu-link a:hover,
.header-threestyle .main-navbar .custom-nav .menu-link a.active {
  color: var(--brand-dark-blue);
}
@media (max-width: 991px) {
  .header-threestyle .main-navbar .custom-nav .sub-menu {
    background: var(--white) !important;
  }
}
.header-threestyle .search-shopcart {
  border-left: 1px solid var(--pra-clr);
  padding-left: 40px;
}
.header-threestyle .search-icon i {
  color: var(--black);
}

.cmn-breadcrumnd-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breadcrumnd-banner {
  background: url(../img/banner/base.jpg) no-repeat center center;
  background-size: cover;
  padding: 244px 2px 130px;
}
.breadcrumnd-banner h3 {
  letter-spacing: 3px;
}
.breadcrumnd-banner .breadcrumnd li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--body-font);
}
.breadcrumnd-banner .breadcrumnd li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--body-font);
  transition: all 0.4s;
}
.breadcrumnd-banner .breadcrumnd li a:hover {
  color: var(--primary);
}
@media (max-width: 1399px) {
  .breadcrumnd-banner {
    padding: 190px 2px 120px;
  }
}
@media (max-width: 991px) {
  .breadcrumnd-banner {
    padding: 200px 1px 100px;
  }
}
@media (max-width: 575px) {
  .breadcrumnd-banner {
    padding: 180px 1px 80px;
  }
}

.hero-section-version1 {
  background: url(../img/banner/bg-header-home-1.jpg) no-repeat center center;
  background-size: cover;
  padding: 285px 5px 250px;
  z-index: 1;
}
.hero-section-version1 .hero-v1-content {
  position: relative;
}
.hero-section-version1 .hero-v1-content .listen-subtile {
  font-size: 100px;
  font-family: "Reey", sans-serif;
  color: rgb(255, 255, 255);
  line-height: 1.2;
  display: block;
}
.hero-section-version1 .hero-v1-content .listing-text {
  max-width: 322px;
  height: 222px;
  display: block;
  margin: 0 auto -60px;
}
.hero-section-version1 .hero-v1-content .listing-text img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
.hero-section-version1 .hero-v1-content .hero-title {
  font-size: 100px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  line-height: 1.2;
  word-spacing: 10px;
  letter-spacing: 20px;
}
.hero-section-version1 .hero-v1-content .hero-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hero-section-version1 .hero-v1-content .hero-tag .hero-tag-item {
  transition: all 0.4s;
  border-radius: 100px;
}
.hero-section-version1 .hero-v1-content .hero-tag .hero-tag-item i,
.hero-section-version1 .hero-v1-content .hero-tag .hero-tag-item span {
  transition: all 0.4s;
}
.hero-section-version1 .hero-v1-content .hero-tag .hero-tag-item:hover {
  background: var(--heading);
}
.hero-section-version1 .hero-v1-content .hero-tag .hero-tag-item:hover i,
.hero-section-version1 .hero-v1-content .hero-tag .hero-tag-item:hover span {
  color: var(--white);
}
.hero-section-version1 .hero-v1-content .bn-arrowv1 {
  position: absolute;
  right: 239px;
  top: 288px;
  animation: xani 2s linear infinite;
}
@media (max-width: 1399px) {
  .hero-section-version1 {
    padding: 240px 5px 190px;
  }
}
@media (max-width: 1199px) {
  .hero-section-version1 {
    padding: 200px 5px 180px;
  }
  .hero-section-version1 .hero-v1-content .hero-title {
    font-size: 80px;
    line-height: 1.2;
    word-spacing: 10px;
    letter-spacing: 20px;
  }
  .hero-section-version1 .hero-v1-content .listing-text {
    max-width: 222px;
    height: 222px;
    margin: 0 auto -40px;
  }
}
@media (max-width: 991px) {
  .hero-section-version1 {
    padding: 170px 5px 170px;
  }
  .hero-section-version1 .hero-v1-content .hero-title {
    font-size: 60px;
    line-height: 1.2;
    word-spacing: 2px;
    letter-spacing: 12px;
  }
  .hero-section-version1 .hero-v1-content .listing-text {
    max-width: 180px;
    height: 222px;
    margin: 0 auto -40px;
  }
  .hero-section-version1 .hero-v1-content .bn-arrowv1 {
    display: none;
  }
}
@media (max-width: 767px) {
  .hero-section-version1 {
    padding: 170px 5px 160px;
  }
}
@media (max-width: 575px) {
  .hero-section-version1 {
    padding: 120px 5px 100px;
  }
  .hero-section-version1 .hero-v1-content .hero-title {
    font-size: 48px;
    line-height: 1.2;
    word-spacing: 2px;
    letter-spacing: 12px;
  }
  .hero-section-version1 .hero-v1-content .listing-text {
    max-width: 140px;
    height: 222px;
    margin: 0 auto -40px;
  }
}
@media (max-width: 440px) {
  .hero-section-version1 .hero-v1-content .hero-title {
    font-size: 42px;
    word-spacing: 2px;
    letter-spacing: 5px;
  }
  .hero-section-version1 .hero-v1-content .listing-text {
    max-width: 100px;
    height: 222px;
    margin: 0 auto -40px;
  }
  .hero-section-version1 .hero-v1-content .hero-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

@keyframes xani {
  50% {
    transform: rotate(5deg);
  }
}
.hero-section-version2 {
  background: url(../img/banner/banner-v2.jpg) no-repeat center center;
  background-size: cover;
  padding: 285px 5px 180px;
  z-index: 1;
}
.hero-section-version2 .banner-shape2 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.hero-section-version2 .hero-v2-content .listing-text {
  margin-bottom: -40px;
  display: block;
  z-index: 1;
  position: relative;
}
.hero-section-version2 .hero-v2-content .hero-tag {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item {
  transition: all 0.4s;
  border-radius: 100px;
  background: #575757;
}
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item i,
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item span {
  transition: all 0.4s;
}
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item:hover {
  background: var(--heading);
}
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item:hover i,
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item:hover span {
  color: var(--white);
}
.hero-section-version2 .hero-v2-content .hero-tag .hero-tag-item:hover {
  background: var(--theme);
}
.hero-section-version2 .hero-v2-content h1 {
  max-width: 590px;
}

/* The hero h1 is now the actual brand logo image (see `.hero-title-logo`
   below). Bottom margin classes on the h1 still control the spacing to the
   tagline paragraph. `display: inline-block` shrink-wraps the h1 to the logo
   image's width so the parent `text-align: center` cleanly centers it. */
.hero-section-version3 .hero-v3-content .hero-title {
  display: inline-block;
  line-height: 0;
}

/* Hero logo image — the white version of the brand logo (`RealTalkOnAgingLogo.png`)
   replaces the previous in-HTML logo recreation. Responsive: scales to fit the
   hero content wrap, capped at 450px on desktop. Steps down on smaller
   viewports so it doesn't dominate the mobile hero. */
.hero-title-logo {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .hero-title-logo {
    max-width: 360px;
  }
}
@media (max-width: 575.98px) {
  .hero-title-logo {
    max-width: 280px;
  }
}

/* Hero tagline — nudge up 2px to re-center between the "on Aging" g-descenders
   (which got moved up 4px via .fst-italic position-relative) and the
   "Subscribe or Follow!" label below. Without this, top gap > bottom gap. */
.hero-section-version3 .hero-v3-content p {
  position: relative;
  top: -4px;
}

/* Constrain hero tagline width on mobile/tablet — desktop keeps natural width */
@media (max-width: 991.98px) {
  .hero-section-version3 .hero-v3-content p {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Tablet range — even narrower */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section-version3 .hero-v3-content p {
    max-width: 320px;
  }
}
/* lg range (small laptop) — partway between tablet and full-width desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-section-version3 .hero-v3-content p {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop (xl+) — narrow just enough to push "come" onto line 2 */
@media (min-width: 1200px) {
  .hero-section-version3 .hero-v3-content p {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Auto-populated YouTube playlist list (About section). `.episodes-list-wrap`
   intentionally has no height/overflow constraints — we cap at 4 episodes in
   JS (MAX_COUNT) so the container just grows to fit. Previous `max-height:
   520px; overflow-y: auto` was sized for 4 rows at the old (no-date) row
   height; adding the date stamp pushed the 4th row past the cap and cut it
   off. If the row count ever changes from 4, reconsider here. */
.episode-row {
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: background 0.2s ease;
}
.episode-row:last-child {
  border-bottom: none;
}
.episode-row:hover {
  background: #f7f7f7;
}
/* Thumb stretches vertically to match the row's content height (title +
   date + description) — the row uses `align-items: stretch` instead of
   `center` so we get free vertical balance with the text column. Image
   inside fills the wrapper via object-fit: cover, cropping the 16:9 source
   when the wrapper's resolved ratio doesn't match (usually a slight
   vertical crop, which is fine — the hosts are centered in the frame). */
.episode-row-thumb {
  position: relative;
  width: 200px;
  border-radius: 6px 0 6px 6px;
  overflow: hidden;
  background: #eee;
}
.episode-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575px) {
  /* On phones the row is narrower; ease the thumb width so the title +
     description column still has breathing room. */
  .episode-row-thumb {
    width: 140px;
  }
}
.episode-row-playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  transition: background 0.2s ease;
}
.episode-row-playbtn i,
.episode-row-playbtn .svg-icon {
  margin-left: 2px;
}
.episode-row:hover .episode-row-playbtn {
  background: var(--theme);
}
.episode-row-content {
  /* Min-width:0 lets the line-clamped desc actually wrap inside flex; without
     it flex children won't shrink below their content's min-content width. */
  min-width: 0;
}
.episode-row-title {
  color: var(--black);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  /* Avoid widows ("…and Prevention" alone on the last line) by letting the
     browser balance the title across all wrapped lines. Modern Chrome /
     Safari / Firefox support this; older browsers wrap normally. */
  text-wrap: balance;
}
/* Date stamp shown directly under the episode title in the row preview.
   Small, muted, in the theme color to draw a touch of attention without
   competing with the title. */
.episode-row-date {
  margin-top: 2px;
  color: var(--theme);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Truncated description preview pulled from YouTube `snippet.description`.
   Visually clamped to 2 lines via -webkit-line-clamp (well-supported across
   modern browsers). The cache layer also truncates to ~240 chars so the
   localStorage footprint stays small. */
.episode-row-desc {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Give the Swiper container some bottom padding so card drop shadows (including
   the larger hover state) aren't clipped. Min-height reserves space so the section
   doesn't reflow / shift down when the YouTube API resolves and real cards drop in. */
.latest-episodewrap {
  padding-bottom: 48px;
  min-height: 420px;
}

/* Shorts carousel cards: white card with drop shadow + matching 3-corner radius */
.latest-episodewrap .personal-podcast-item {
  background: var(--white);
  border-radius: 16px 0 16px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.latest-episodewrap .personal-podcast-item:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

/* Round the same 3 corners on shorts carousel thumbnails (top-left square only,
   matching the Featured Video Bar card). `height: auto` is defensive — the
   img has CSS `w-100` (width: 100% !important) and HTML width/height attrs;
   without explicit `height: auto` some renderers use the height attr literally
   instead of deriving aspect ratio from both attrs, vertically squishing the
   thumbnail. */
.latest-episodewrap .personal-podcast-item .thumb img {
  border-radius: 0 16px 16px 16px;
  height: auto;
}

/* Equalize card heights in the Latest Shorts carousel by forcing the title to always
   take 2 lines (short titles reserve the space; long ones get ellipsis truncation). */
.latest-episodewrap .personal-podcast-item .content h5 {
  min-height: 48px; /* enough for 2 lines at 16px / 1.4 line-height */
  margin-bottom: 0.5rem;
}
.latest-episodewrap .personal-podcast-item .content h5 > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}

/* Tighten the transition from Featured Video Bar → Shorts section to ~48px
   (matching the gap between the shorts cards and the Subscribe block below) */
.audio-onetime-player.whitebg {
  padding-bottom: 0;
}
#shorts.latest-episode-section {
  padding-top: 96px;
}

/* "Find all episodes on:" platform icons — dark blue default, bright blue on hover */
.find-episodes-on a {
  color: var(--brand-dark-blue);
  transition: color 0.3s ease;
}
.find-episodes-on a:hover {
  color: var(--theme);
}

/* Shorts cards: drop the .ex-vid circle background — let the YouTube Shorts
   lightning-bolt mark stand on its own. YouTube red default (brand-authentic)
   → bright blue on hover (signals it's our interaction). Subtle scale for affordance. */
#shorts-swiper-wrapper .ex-vid,
#shorts-swiper-wrapper .ex-vid:hover {
  background: transparent;
  color: #FF0000;
}
#shorts-swiper-wrapper .ex-vid:hover {
  color: var(--theme);
}
#shorts-swiper-wrapper .shorts-thumb-link:hover ~ .ex-vid {
  color: var(--theme);
}
#shorts-swiper-wrapper .ex-vid svg {
  transition: transform 0.2s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
#shorts-swiper-wrapper .ex-vid:hover svg {
  transform: scale(1.08);
}
/* Mirror the play-button hover state when the user hovers the thumbnail image,
   since the image is now a clickable popup trigger too. (Image-hover color
   change is handled by the rule that pairs with .ex-vid:hover above.) */
#shorts-swiper-wrapper .shorts-thumb-link {
  cursor: pointer;
}
#shorts-swiper-wrapper .shorts-thumb-link:hover ~ .ex-vid svg {
  transform: scale(1.08);
}

/* Flipped play-shape on Shorts section: bottom-left 1/4 circle that pairs with
   the Creative Team section's top-left 1/4 circle to form a half circle at the boundary */
.play-shape-flipped {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  transform: scaleY(-1);
}

/* `.creative-team-section.whitebg { padding-bottom: 80px }` used to live here
   to give the (then-single) Creative Team section its 80px bottom padding.
   Removed during the semantic-HTML split — the Hosts section's `.pb-space`
   class already provides 80px, and leaving this rule in caused BOTH the
   new Subscribe section and Hosts section to inherit it, doubling the gap
   between Subscribe pill and "Meet Your Hosts" heading. */
#episodes.podcast-visitorv03 {
  padding-top: 80px;
}

/* Lift the Subscribe section above the Hosts section in stacking order so
   the `.play-rounded` decorative quarter-circle — absolute-positioned inside
   Subscribe but visually extending down past Subscribe's bottom edge into
   the Hosts area below — doesn't get clipped by the Hosts section's opaque
   white background. The image stays behind Subscribe's own content thanks
   to its `z-index: -1` within Subscribe's own stacking context, so we don't
   accidentally cover the Subscribe pill or its buttons. This was a single
   section before the semantic-HTML split, so the issue didn't exist. */
section[aria-labelledby="subscribe-heading"] {
  z-index: 2;
}

/* Space between Subscribe box and "Meet your hosts" heading.
   Tuned to match the visible gap above the pill (~128px) at xxl breakpoint
   where the pill is tallest (py-xxl-15). At smaller breakpoints the pill
   is ~40px shorter, so the gap below ends up slightly larger than above —
   acceptable trade-off vs. adding a breakpoint-specific rule.
   NOTE: Was previously `#hosts.container { ... }` when `id="hosts"` lived
   directly on the inner `.container`. After splitting Creative Team into
   separate Subscribe/Hosts sections, the id moved to the `<section>` and
   this rule retargets the first container child. */
#hosts > .container {
  padding-top: 122px;
}

/* Vertical 9:16 popup for YouTube Shorts (mfp-shorts class set via JS).
   Three-class selector required to outweigh magnific-popup's own
   `.mfp-iframe-holder .mfp-content { max-width: 900px }` rule (also 2-class) —
   matters now that magnific-popup.css is deferred and may load AFTER main.css. */
.mfp-shorts .mfp-iframe-holder .mfp-content {
  max-width: 400px;
}
.mfp-shorts .mfp-iframe-scaler {
  padding-top: 177.78%; /* 16/9 → vertical */
}
/* Kill the default 40px top/bottom padding magnific-popup adds to .mfp-iframe-holder
   to make room for the close X — for Shorts we want the X to overlay the corner of
   the video, not sit above it. */
.mfp-shorts.mfp-wrap .mfp-iframe-holder {
  padding-top: 0;
  padding-bottom: 0;
}
/* === Shared close-button styling for ALL custom popups (bios, trailer,
   Shorts, Episode). One consistent design: translucent dark circle, white
   X, bright-blue on hover. Each selector is 3-class to beat magnific-popup's
   `.mfp-close-btn-in .mfp-close { color: #333 }` and base `.mfp-close
   { opacity: 0.65; padding: 0 0 18px 10px; top: -40px (iframe) }` rules.
   See "Defer non-critical CSS" note in CLAUDE.md for why 3-class is needed. */
.host-bio-modal .host-bio-close.mfp-close,
.mfp-trailer .mfp-iframe-holder .mfp-close,
.mfp-shorts .mfp-iframe-holder .mfp-close,
.episode-popup .episode-popup-close.mfp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  opacity: 1;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  text-shadow: none;
}
.host-bio-modal .host-bio-close.mfp-close:hover,
.host-bio-modal .host-bio-close.mfp-close:focus,
.mfp-trailer .mfp-iframe-holder .mfp-close:hover,
.mfp-trailer .mfp-iframe-holder .mfp-close:focus,
.mfp-shorts .mfp-iframe-holder .mfp-close:hover,
.mfp-shorts .mfp-iframe-holder .mfp-close:focus,
.episode-popup .episode-popup-close.mfp-close:hover,
.episode-popup .episode-popup-close.mfp-close:focus {
  background: var(--theme);
  color: #fff;
  opacity: 1;
}
/* Z-index escape hatch for ALL magnific-popup instances on mobile: the nav
   has `z-index: 9999 !important` (via `.cmn-fixed`) on mobile, hiding
   magnific-popup's default 1043 wrap underneath it (so the close X at the
   top of each popup becomes unreachable). Bump all our popup wraps above
   the nav on mobile. */
@media (max-width: 991.98px) {
  .mfp-shorts.mfp-wrap,
  .mfp-shorts.mfp-bg,
  .mfp-trailer.mfp-wrap,
  .mfp-trailer.mfp-bg,
  .mfp-host-bio.mfp-wrap,
  .mfp-host-bio.mfp-bg,
  .mfp-episode.mfp-wrap,
  .mfp-episode.mfp-bg {
    z-index: 10001;
  }
}

/* Allow the episode popup to scroll when content is taller than viewport.
   The scroll has to go on `.mfp-container` (not `.mfp-wrap`) because magnific
   -popup makes BOTH position:fixed with no overflow rules — the container's
   children are positioned relative to the viewport, so an overflow-y:auto on
   the wrap doesn't catch them. The container is the element that actually
   holds the content, so it owns the scrollbar. Combined with `alignTop: true`
   in the magnific-popup config, this makes the whole popup top-align and
   the description below the video reachable via scroll. */
.mfp-episode .mfp-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Trailer popup (YouTube iframe). The popup is magnific-popup's standard
   iframe type with our overrides: max-width bumped from 900 → 960 (matching
   the old self-hosted trailer's width); the 40px top/bottom holder padding
   removed so the close X overlays the corner of the video, same treatment
   as Shorts + Episode popups. Three-class selectors so they beat magnific
   -popup's deferred CSS regardless of load order. */
.mfp-trailer .mfp-iframe-holder .mfp-content {
  max-width: 960px;
}
.mfp-trailer.mfp-wrap .mfp-iframe-holder {
  padding-top: 0;
  padding-bottom: 0;
}

/* === Recent Episodes popup: shared inline modal that's populated per-click
   from JS. Iframe (16:9 YouTube embed) + title + full description. */
.episode-popup {
  background: var(--white);
  max-width: 800px;
  width: 92%;
  margin: 40px auto;
  padding: 0;
  border-radius: 0 16px 16px 16px;
  position: relative;
  overflow: hidden;
}
.episode-popup-iframe-scaler {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}
.episode-popup-iframe-scaler iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.episode-popup-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 24px 28px 8px;
  text-wrap: balance; /* balance lines so no widow on the last */
}
.episode-popup-date {
  margin: 0 28px 16px;
  color: var(--theme);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.episode-popup-date:empty {
  /* Collapse the element entirely if no date is set so we don't leave
     extra vertical whitespace under the title. */
  display: none;
}
.episode-popup-desc {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 28px 28px;
  /* No internal scroll — magnific-popup's `alignTop: true` makes the WRAP
     scrollable so the whole popup (iframe + title + description) scrolls
     together. Nested scroll containers look ugly and trap mouse-wheel. */
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Make the SVG icon inside the close button click-through so the click
   target is the <button>, not the inner shape. Magnific-popup's auto-bind
   is unreliable when the click event's target is the SVG. */
.episode-popup-close .svg-icon {
  pointer-events: none;
}
@media (max-width: 575px) {
  .episode-popup {
    width: 100vw;
    max-width: none;
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
  }
  .episode-popup-title {
    font-size: 18px;
    margin: 20px 20px 6px;
  }
  .episode-popup-date {
    margin: 0 20px 12px;
  }
  .episode-popup-desc {
    font-size: 14px;
    margin: 0 20px 24px;
  }
}

/* Featured video bar — thumbnail card with play button overlay */
.hero-thumb-card {
  width: 100%;
  max-width: 280px;
  border-radius: 8px 0 8px 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.4s;
}
.hero-thumb-card .hero-thumb-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-thumb-card .hero-thumb-playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}
.hero-thumb-card .hero-thumb-playbtn i,
.hero-thumb-card .hero-thumb-playbtn .svg-icon {
  color: var(--white);
  font-size: 22px;
  margin-left: 4px; /* optical centering of the triangle */
}
.hero-thumb-card:hover .hero-thumb-playbtn {
  background: var(--theme);
}

/* Balance section headings to avoid widowed last words. Applies to every
   section h2 that uses .heading ("Recent Episodes", "Latest Shorts", "Meet
   your hosts", "Subscribe!", "Get in touch with us", etc.). */
.heading {
  text-wrap: balance;
}

/* Spans inside .heading should inherit color/size from the parent heading so
   the global `span { font-size: 16px; color: white }` rule doesn't clobber
   them. Fixes things like the Subscribe-bar's "Subscribe!" span keeping the
   heading's dark blue color. */
.heading span {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
}

/* Hero pills used in v3 (Subscribe-on row) */
.hero-section-version3 .hero-v3-content .hero-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* Hero pills — match the Subscribe block `.touch-btn` pattern exactly:
   `transition: all 0.5s` on the parent, no separate child transitions, hover
   only swaps background. */
.hero-section-version3 .hero-v3-content .hero-tag-item {
  transition: all 0.5s;
  border-radius: 100px;
  background: var(--brand-dark-blue);
  color: var(--white);
}
.hero-section-version3 .hero-v3-content .hero-tag-item:hover {
  background: var(--theme);
}
@media (max-width: 1399px) {
  .hero-section-version2 {
    padding: 270px 5px 150px;
  }
}
@media (max-width: 1199px) {
  .hero-section-version2 {
    padding: 260px 5px 150px;
  }
}
@media (max-width: 991px) {
  .hero-section-version2 {
    padding: 200px 5px 130px;
  }
  .hero-section-version2 .hero-v2-content .hero-title {
    font-size: 60px;
  }
  .hero-section-version2 .hero-v2-content .listing-text {
    margin-bottom: -10px;
  }
}
@media (max-width: 767px) {
  .hero-section-version2 {
    padding: 160px 5px 90px;
  }
  .hero-section-version2 .hero-v2-content .hero-title {
    font-size: 48px;
  }
  .hero-section-version2 .hero-v2-content .listing-text {
    margin-bottom: -1px;
    width: 300px;
  }
  .hero-section-version2 .hero-v2-content .listing-text img {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .hero-section-version2 {
    padding: 160px 5px 90px;
  }
  .hero-section-version2 .hero-v2-content .hero-title {
    font-size: 38px;
  }
  .hero-section-version2 .hero-v2-content .listing-text {
    margin-bottom: -1px;
    width: 200px;
  }
  .hero-section-version2 .hero-v2-content .listing-text img {
    width: 100%;
  }
}

.hero-section-version3 {
  padding-top: 80px;
  z-index: 1;
}
.hero-section-version3 .hero-v3-content {
  max-width: 589px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.hero-section-version3 .hero-v3-content .subtitle-v3 {
  background: var(--heading);
  padding: 8px 20px;
  color: var(--theme);
  display: inline-block;
  letter-spacing: 2.5px;
}
@media (max-width: 991px) {
  .hero-section-version3 {
    padding-top: 60px;
  }
}

.hero-content-wrapv3 {
  /* WebP for modern browsers (~96% support) with JPG fallback for the rest.
     Older browsers ignore `image-set` and use the prior `background-image` line. */
  background: url(../img/banner/RT_background_headshots.jpg) no-repeat top center;
  background: image-set(
    url(../img/banner/RT_background_headshots.webp) type("image/webp"),
    url(../img/banner/RT_background_headshots.jpg) type("image/jpeg")
  ) no-repeat top center;
  background-size: cover;
  padding: 114px 5px 140px;
}
/* Stop the hero image from upscaling beyond its native size (1920px wide).
   Cap the wrap at 1920px, center it, fill the sides with white to blend with
   the surrounding white sections (nav above, Featured Video Bar below). */
@media (min-width: 1920px) {
  .hero-section-version3 {
    background: var(--white);
  }
  .hero-content-wrapv3 {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 1199px) {
  .hero-content-wrapv3 {
    padding: 90px 5px 120px;
  }
}
@media (max-width: 767px) {
  .hero-content-wrapv3 {
    padding: 80px 5px 95px;
  }
}
@media (max-width: 767px) {
  .hero-content-wrapv3 {
    background-image: url(../img/banner/RT_background.jpg);
    background-image: image-set(
      url(../img/banner/RT_background.webp) type("image/webp"),
      url(../img/banner/RT_background.jpg) type("image/jpeg")
    );
  }
}

.breadcrumnd-episode-details {
  background: url(../img/podcast/edisode-detailsbg.png) no-repeat center center;
  background-size: cover;
  padding: 305px 2px 220px;
  overflow: hidden;
}
.breadcrumnd-episode-details .breadcrumnd-content {
  max-width: 740px;
}
@media (max-width: 1399px) {
  .breadcrumnd-episode-details {
    padding: 250px 2px 160px;
  }
}
@media (max-width: 991px) {
  .breadcrumnd-episode-details {
    padding: 200px 2px 120px;
  }
}
@media (max-width: 400px) {
  .breadcrumnd-episode-details {
    padding: 180px 2px 100px;
  }
}

#myProgress {
  width: 420px;
  background-color: #d9d9f2;
  cursor: pointer;
}

#myBar {
  width: 0%;
  height: 2px;
  background-color: #ffc266;
  border-radius: 10px;
}

.logo {
  fill: red;
}

.btn-action {
  cursor: pointer;
}

.btn-ctn,
.infos-ctn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.infos-ctn {
  padding-top: 20px;
}

.btn-ctn > div {
  padding: 1px;
}

.infos-ctn > div {
  color: #ffc266;
}

.duration {
  margin-left: 10px;
}

.title {
  margin-left: 10px;
  width: 210px;
  text-align: center;
}

.player-ctn {
  margin: auto;
}

.playlist-track-ctn {
  display: flex;
  background-color: #464646;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}

.playlist-track-ctn > div {
  margin: 10px;
}

.playlist-info-track {
  width: 80%;
}

.playlist-info-track,
.playlist-duration {
  padding-top: 7px;
  padding-bottom: 7px;
  color: #e9cc95;
  font-size: 14px;
  pointer-events: none;
}

.playlist-ctn {
  padding-bottom: 20px;
}

.active-track {
  color: #ffc266 !important;
  font-weight: bold;
}

.active-track > .playlist-info-track,
.active-track > .playlist-duration,
.active-track > .playlist-btn-play {
  color: #ffc266 !important;
}

.playlist-btn-play {
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

.fas {
  color: #ffc266;
  font-size: 20px;
}

.minutes-clr {
  color: rgb(119, 119, 119) !important;
}

.cmn-playerwrap {
  margin-top: -60px;
  z-index: 6;
  position: relative;
}
.cmn-playerwrap .player-ctn {
  background-color: rgb(255, 255, 255) !important;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
}
.cmn-playerwrap .player-ctn #btn-faws-volume {
  width: 50px;
  min-width: 50px;
  height: 50px;
  background-color: rgb(245, 245, 245);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}
.cmn-playerwrap .player-ctn #btn-faws-volume i {
  font-size: 16px;
  color: var(--black);
  transition: all 0.4s;
}
.cmn-playerwrap .player-ctn #btn-faws-volume:hover {
  background: var(--theme);
  cursor: pointer;
}
.cmn-playerwrap .player-ctn #btn-faws-volume:hover i {
  color: var(--white);
}
.cmn-playerwrap .player-ctn .rewindforword {
  width: 30px;
  min-width: 30px;
  height: 30px;
  background-color: rgb(245, 245, 245);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}
.cmn-playerwrap .player-ctn .rewindforword i {
  font-size: 10px;
  color: var(--black);
  transition: all 0.4s;
}
.cmn-playerwrap .player-ctn .rewindforword:hover {
  background: var(--theme);
  cursor: pointer;
}
.cmn-playerwrap .player-ctn .rewindforword:hover i {
  color: var(--white);
}
.cmn-playerwrap .player-ctn .theme-circle-audio {
  width: 92px;
  min-width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.4s;
}
.cmn-playerwrap .player-ctn .theme-circle-audio i {
  color: var(--white);
  font-size: 28px;
  transition: all 0.4s;
}
.cmn-playerwrap .player-ctn .theme-circle-audio:hover {
  background: var(--brand-dark-blue);
}
.cmn-playerwrap .player-ctn .theme-circle-audio:hover i {
  color: var(--white);
}
.cmn-playerwrap .player-ctn #myProgress {
  background-color: var(--black);
}
.cmn-playerwrap .player-ctn #myProgress #myBar {
  background-color: var(--theme);
}
@media (max-width: 1399px) {
  .cmn-playerwrap .player-ctn .theme-circle-audio {
    width: 50px;
    min-width: 50px;
    height: 50px;
  }
  .cmn-playerwrap .player-ctn .theme-circle-audio i {
    font-size: 19px;
  }
  .cmn-playerwrap .player-ctn #btn-faws-volume {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
  .cmn-playerwrap .player-ctn #btn-faws-volume i {
    font-size: 10px;
  }
}
@media (max-width: 991px) {
  .cmn-playerwrap .player-ctn #myProgress {
    width: 280px;
  }
}
@media (max-width: 767px) {
  .cmn-playerwrap .player-ctn .title-audio-adjust {
    width: 100%;
  }
  .cmn-playerwrap .player-ctn #myProgress {
    width: 120px;
  }
}
@media (max-width: 450px) {
  .cmn-playerwrap .player-ctn #myProgress {
    width: 80px;
  }
}
@media (max-width: 370px) {
  .cmn-playerwrap .player-ctn .right-adjustment {
    display: none !important;
  }
}
@media (max-width: 575px) {
  .cmn-playerwrap {
    margin-top: 0px;
  }
}

.audio-cmn-title .episode-sri .vdot {
  width: 4px;
  height: 4px;
  background: #777777;
  display: block;
  border-radius: 50%;
}
.audio-cmn-title:hover .black-clr {
  color: var(--black);
}

.audio-onetime-player02 {
  background: url(../img/banner/banner-linebg.png) no-repeat center center;
  background-size: cover;
}
.audio-onetime-player02 .cmn-playerwrap {
  margin-top: 0;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn {
  background: transparent !important;
  box-shadow: none;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .theme-circle-audio {
  width: 65px;
  min-width: 65px;
  height: 65px;
  transition: all 0.4s;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .theme-circle-audio i {
  font-size: 18px;
  transition: all 0.4s;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .theme-circle-audio:hover {
  background: var(--white);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .theme-circle-audio:hover i {
  color: var(--black);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .episode-sri {
  color: #ffd9c8;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .episode-sri .vdot {
  background: #ffd9c8;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .episode-sri span {
  color: #ffd9c8;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .rewindforword {
  background-color: rgb(224, 77, 11);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .rewindforword i {
  color: var(--white);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .rewindforword:hover {
  background: var(--white);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .rewindforword:hover i {
  color: var(--black);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn #btn-faws-volume {
  background-color: rgb(224, 77, 11);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn #btn-faws-volume i {
  color: var(--white);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn #btn-faws-volume:hover {
  background: var(--white);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn #btn-faws-volume:hover i {
  color: var(--black);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn #myProgress {
  width: 770px;
  background-color: var(--white);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn #myProgress #myBar {
  background-color: var(--black);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .view-all {
  color: var(--white);
  transition: all 0.4s;
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .view-all:hover {
  color: var(--black);
}
.audio-onetime-player02 .cmn-playerwrap .player-ctn .view-all:hover i {
  color: var(--black);
}
@media (max-width: 1199px) {
  .audio-onetime-player02 .cmn-playerwrap .player-ctn #myProgress {
    width: 500px;
  }
}
@media (max-width: 991px) {
  .audio-onetime-player02 .cmn-playerwrap .player-ctn #myProgress {
    width: 400px;
  }
  .audio-onetime-player02 .cmn-playerwrap .player-ctn .theme-circle-audio {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .audio-onetime-player02 .cmn-playerwrap .player-ctn .theme-circle-audio i {
    font-size: 15px;
  }
}

.hoverblack {
  transition: all 0.4s;
}
.hoverblack:hover {
  color: var(--black);
}

@media (max-width: 991px) {
  .bn-musicthumb {
    width: 120px;
    min-width: 120px;
    height: 120px;
  }
  .bn-musicthumb img {
    width: 100%;
    height: 100%;
  }
}

.cmn-audioplyer-fixedwrap .player,
.audioplayer-listing-wraptwoverstion .player {
  height: 60px;
  margin: 0;
  position: relative;
  width: 400px;
}
.cmn-audioplyer-fixedwrap .player .large-toggle-btn,
.audioplayer-listing-wraptwoverstion .player .large-toggle-btn {
  float: left;
  font-size: 1.5em;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.cmn-audioplyer-fixedwrap .player .large-toggle-btn .large-play-btn,
.audioplayer-listing-wraptwoverstion .player .large-toggle-btn .large-play-btn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: -14%;
}
.cmn-audioplyer-fixedwrap .player .large-toggle-btn .large-play-btn:before,
.audioplayer-listing-wraptwoverstion .player .large-toggle-btn .large-play-btn:before {
  content: "\f04b";
  font: 1.5em/1.75 "FontAwesome";
}
.cmn-audioplyer-fixedwrap .player .large-toggle-btn .large-pause-btn,
.audioplayer-listing-wraptwoverstion .player .large-toggle-btn .large-pause-btn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: -13%;
}
.cmn-audioplyer-fixedwrap .player .large-toggle-btn .large-pause-btn:before,
.audioplayer-listing-wraptwoverstion .player .large-toggle-btn .large-pause-btn:before {
  content: "\f04c";
  font: 1.5em/1.75 "FontAwesome";
}
.cmn-audioplyer-fixedwrap .player .info-box,
.audioplayer-listing-wraptwoverstion .player .info-box {
  bottom: 10px;
  left: 65px;
  position: absolute;
  top: 15px;
}
.cmn-audioplyer-fixedwrap .player .info-box .track-info-box,
.audioplayer-listing-wraptwoverstion .player .info-box .track-info-box {
  float: left;
  font-size: 12px;
  margin: 0 0 6px 0;
  visibility: hidden;
  width: 400px;
}
.cmn-audioplyer-fixedwrap .player .info-box .track-info-box .track-title-text,
.audioplayer-listing-wraptwoverstion .player .info-box .track-info-box .track-title-text {
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .player .info-box .track-info-box .audio-time,
.audioplayer-listing-wraptwoverstion .player .info-box .track-info-box .audio-time {
  display: inline-block;
  padding: 0 0 0 5px;
  width: 80px;
}
.cmn-audioplyer-fixedwrap .player .progress-box,
.audioplayer-listing-wraptwoverstion .player .progress-box {
  float: left;
  position: relative;
}
.cmn-audioplyer-fixedwrap .player .progress-box .progress-cell,
.audioplayer-listing-wraptwoverstion .player .progress-box .progress-cell {
  height: 12px;
  position: relative;
}
.cmn-audioplyer-fixedwrap .player .progress-box .progress-cell .progress,
.audioplayer-listing-wraptwoverstion .player .progress-box .progress-cell .progress {
  background: #fff;
  height: 8px;
  position: relative;
  width: auto;
}
.cmn-audioplyer-fixedwrap .player .progress-box .progress-cell .progress .progress-buffer,
.audioplayer-listing-wraptwoverstion .player .progress-box .progress-cell .progress .progress-buffer {
  background: var(--theme);
  height: 100%;
  width: 0;
}
.cmn-audioplyer-fixedwrap .player .progress-box .progress-cell .progress .progress-indicator,
.audioplayer-listing-wraptwoverstion .player .progress-box .progress-cell .progress .progress-indicator {
  background: #fff;
  border: 1px solid #bebebe;
  cursor: pointer;
  height: 10px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: -2px;
  width: 22px;
}
.cmn-audioplyer-fixedwrap .player .controls-box,
.audioplayer-listing-wraptwoverstion .player .controls-box {
  bottom: 10px;
  left: 350px;
  position: absolute;
}
.cmn-audioplyer-fixedwrap .player .controls-box .previous-track-btn,
.audioplayer-listing-wraptwoverstion .player .controls-box .previous-track-btn {
  cursor: pointer;
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .player .controls-box .previous-track-btn:before,
.audioplayer-listing-wraptwoverstion .player .controls-box .previous-track-btn:before {
  content: "\f049";
  font: 1em "FontAwesome";
}
.cmn-audioplyer-fixedwrap .player .controls-box .next-track-btn,
.audioplayer-listing-wraptwoverstion .player .controls-box .next-track-btn {
  cursor: pointer;
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .player .controls-box .next-track-btn:before,
.audioplayer-listing-wraptwoverstion .player .controls-box .next-track-btn:before {
  content: "\f050";
  font: 1em "FontAwesome";
}
.cmn-audioplyer-fixedwrap .play-list,
.audioplayer-listing-wraptwoverstion .play-list {
  display: block;
  width: 100%;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row {
  width: 100%;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .track-title .playlist-track,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .track-title .playlist-track {
  color: #000;
  text-decoration: none;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .small-toggle-btn,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .small-toggle-btn {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .small-toggle-btn .small-play-btn,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .small-toggle-btn .small-play-btn {
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .small-toggle-btn .small-play-btn:before,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .small-toggle-btn .small-play-btn:before {
  content: "\f04b";
  font: 1em "FontAwesome";
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .small-toggle-btn .small-pause-btn,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .small-toggle-btn .small-pause-btn {
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .small-toggle-btn .small-pause-btn:before,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .small-toggle-btn .small-pause-btn:before {
  content: "\f04c";
  font: 1em "FontAwesome";
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .track-number,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .track-number {
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .track-title,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .track-title {
  display: inline-block;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .track-title .playlist-track,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .track-title .playlist-track {
  text-decoration: none;
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .track-title .playlist-track:hover,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .track-title .playlist-track:hover {
  color: var(--theme);
}
.cmn-audioplyer-fixedwrap .play-list .play-list-row .track-title.active-track,
.audioplayer-listing-wraptwoverstion .play-list .play-list-row .track-title.active-track {
  font-weight: bold;
}

.screen-reader-text {
  /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.disabled {
  color: #666;
  cursor: default;
}

.vdot {
  width: 4px;
  height: 4px;
  background: #777777;
  display: block;
  border-radius: 50%;
}

.play-line {
  background-color: rgb(0, 0, 0);
  opacity: 0.102;
  width: 100%;
  height: 1px;
  display: block;
}

.show {
  display: inline-block !important;
}

.cmn-toggle-btnplay {
  width: 58px;
  min-width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}
.cmn-toggle-btnplay:hover {
  background: var(--theme);
}

.playlist-version001-wrap {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  border-top: 2px solid var(--theme);
  max-width: 525px;
  margin-left: auto;
  background: url(../img/element/autoplay-cloud.png) no-repeat center center;
  background-size: cover;
}

.cmn-audioplyer-fixedwrap .player {
  width: 100%;
}
.cmn-audioplyer-fixedwrap .player .info-box {
  width: 100%;
  position: initial;
}
.cmn-audioplyer-fixedwrap .audio-time {
  color: var(--white);
}
.cmn-audioplyer-fixedwrap .audio-time span {
  color: var(--white);
}
.cmn-audioplyer-fixedwrap .track-info-box {
  visibility: visible !important;
  display: block;
  opacity: 1;
}
.cmn-audioplyer-fixedwrap .track-info-box .track-title-text {
  color: var(--white);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}
.cmn-audioplyer-fixedwrap .large-toggle-btn {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.cmn-audioplyer-fixedwrap .large-toggle-btn .large-play-btn {
  top: 0 !important;
  position: initial;
  color: var(--black);
  font-size: 16px;
}
.cmn-audioplyer-fixedwrap .large-pause-btn,
.cmn-audioplyer-fixedwrap .controls-box {
  position: initial !important;
}
.cmn-audioplyer-fixedwrap .previous-track-btn {
  color: var(--white);
}
.cmn-audioplyer-fixedwrap .screen-reader-text {
  color: blue;
}
.cmn-audioplyer-fixedwrap .progress-box {
  min-width: initial;
  width: 100%;
}
.cmn-audioplyer-fixedwrap .cmn-playlist-audocontetnwrap {
  min-width: 500px;
}
@media (max-width: 1199px) {
  .cmn-audioplyer-fixedwrap .cmn-playlist-audocontetnwrap {
    min-width: 400px;
  }
}
@media (max-width: 991px) {
  .cmn-audioplyer-fixedwrap .cmn-playlist-audocontetnwrap {
    min-width: 200px;
    text-align: center;
  }
  .cmn-audioplyer-fixedwrap .audio-time {
    margin: 0 auto;
  }
  .cmn-audioplyer-fixedwrap .track-info-box {
    width: initial !important;
  }
}

.cmn-audioplyer-fixedwrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  padding-bottom: 30px;
  transition: all ease 0.3s;
}
.cmn-audioplyer-fixedwrap .close-popup {
  position: absolute;
  top: -44px;
  left: 0;
  width: 44px;
  height: 44px;
  background: var(--theme);
}
@media (max-width: 991px) {
  .cmn-audioplyer-fixedwrap {
    height: 250px;
  }
}

.cmn-audioplyer-fixedwrap:not(.active) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
}

.playlist-version002-wrap {
  box-shadow: none;
}
.playlist-version002-wrap .small-toggle-btn {
  background: var(--bg4);
}
.playlist-version002-wrap .small-toggle-btn i {
  color: var(--black);
}
.playlist-version002-wrap .play-list-row:hover .playlist-track {
  color: var(--theme) !important;
}
.playlist-version002-wrap .small-toggle-btn {
  background: var(--black);
}
.playlist-version002-wrap .small-toggle-btn i {
  color: var(--white);
}
.playlist-version002-wrap .small-toggle-btn:hover {
  background: var(--theme);
}
.playlist-version002-wrap .small-toggle-btn:hover i {
  color: var(--white);
}

.small-toggle-black .small-pause-btn::before {
  content: "\f04c";
  font: 1em "FontAwesome";
}

.playlist-version003-wrap {
  max-width: 100%;
  margin-left: initial;
}
.playlist-version003-wrap .play-list-row {
  width: initial !important;
}
.playlist-version003-wrap .this-isitem {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
}
.playlist-version003-wrap .microphone-epi {
  display: flex;
  align-items: center;
  gap: 114px;
}
.playlist-version003-wrap .audioplayer-listing-wraptwoverstion {
  width: 100%;
}
@media (max-width: 991px) {
  .playlist-version003-wrap .microphone-epi {
    gap: 24px;
  }
}

.playlist-version004-wrap {
  max-width: 100%;
}

.audio-onetime-player03 .cmn-playerwrap {
  margin-top: 0;
  background: var(--black);
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn {
  background: var(--black) !important;
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn #myProgress {
  background: #fff;
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn .pras,
.audio-onetime-player03 .cmn-playerwrap .player-ctn .episode-sri {
  color: var(--theme);
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn .vdot {
  background: var(--theme);
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn .rewindforword {
  background-color: rgb(30, 30, 30);
  transition: all 0.4s;
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn .rewindforword i {
  color: var(--white);
  transition: all 0.4s;
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn .rewindforword:hover {
  background: var(--theme);
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn .rewindforword:hover i {
  color: var(--white);
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn #btn-faws-volume {
  background-color: rgb(30, 30, 30);
  transition: all 0.4s;
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn #btn-faws-volume i {
  color: var(--white);
  font-size: 15px;
  transition: all 0.4s;
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn #btn-faws-volume:hover {
  background: var(--theme);
}
.audio-onetime-player03 .cmn-playerwrap .player-ctn #btn-faws-volume:hover i {
  color: var(--white);
}
.audio-onetime-player03 .cmn-playerwrap .title-audio-adjust {
  width: 700px;
}
.audio-onetime-player03 .cmn-playerwrap .right-adjustment {
  width: calc(100% - 700px);
}
.audio-onetime-player03 .cmn-playerwrap #myProgress {
  width: 850px;
}
.audio-onetime-player03 .audio-cmn-title:hover .hoverwhite {
  color: var(--theme) !important;
}
@media (max-width: 1919px) {
  .audio-onetime-player03 .cmn-playerwrap #myProgress {
    width: 350px;
    max-width: 850px;
  }
}
@media (max-width: 1399px) {
  .audio-onetime-player03 .cmn-playerwrap #myProgress {
    width: 160px;
    max-width: 850px;
  }
}
@media (max-width: 1199px) {
  .audio-onetime-player03 .cmn-playerwrap .title-audio-adjust {
    width: 300px;
  }
  .audio-onetime-player03 .cmn-playerwrap #myProgress {
    width: 160px;
    max-width: 850px;
  }
  .audio-onetime-player03 .cmn-playerwrap .right-adjustment {
    width: initial;
  }
}
@media (max-width: 767px) {
  .audio-onetime-player03 .theme-circle-audio {
    margin: 0 auto;
  }
}

.cmn-audioplyer-fixedwrap03 {
  position: relative;
}
.cmn-audioplyer-fixedwrap03:not(.active) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.essential-wraping {
  max-width: 490px;
  background: url(../img/podcast/adv3.png) no-repeat top center;
  background-size: cover;
  border-right: 1px solid rgba(168, 168, 168, 0.44);
  border-left: 1px solid rgba(168, 168, 168, 0.44);
  background-color: rgb(255, 255, 255);
}
.essential-wraping .this-isitem {
  box-shadow: none;
  background: transparent;
}
.essential-wraping .this-isitem button:hover i {
  color: var(--theme);
}
.essential-wraping .playlist-version001-wrap {
  background: none;
}
.essential-wraping .cmn-audioplyer-fixedwrap {
  padding-bottom: 0;
  height: initial;
}
.essential-wraping .cmn-audioplyer-fixedwrap03.active {
  padding-bottom: 10px;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .track-info-box {
  width: initial !important;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .cmn-playlist-audocontetnwrap {
  min-width: initial;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .cmn-playlist-audocontetnwrap .progress-box {
  min-width: 120px !important;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .cmn-playlist-audocontetnwrap .progress-box .progress-cell {
  height: 1px !important;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .cmn-playlist-audocontetnwrap .progress-box .progress-cell .progress {
  height: 1px;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .audio-time span {
  font-size: 12px;
  color: var(--pra-clr);
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .previous-track-btn {
  display: none !important;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .progress-box .progress-cell {
  height: 1px;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .progress-box .progress-cell .progress {
  height: 2px;
  background-color: rgb(228, 228, 228);
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .progress-box .progress-cell .progress .progress-indicator {
  background: var(--black);
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .large-toggle-btn {
  width: 25px;
  min-width: 25px;
  height: 25px;
  background: var(--theme);
  border: 1px solid var(--theme);
  transition: all 0.4s;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .large-toggle-btn .large-play-btn {
  font-size: 8px;
  color: #fff;
  transition: all 0.4s;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .large-toggle-btn .large-pause-btn {
  font-size: 8px;
  color: #fff;
  transition: all 0.4s;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .large-toggle-btn:hover {
  background: transparent;
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .large-toggle-btn:hover .large-play-btn,
.essential-wraping .cmn-audioplyer-fixedwrap03 .large-toggle-btn:hover .large-pause-btn {
  color: var(--black);
}
.essential-wraping .cmn-audioplyer-fixedwrap03 .track-title-text {
  display: block !important;
}
.essential-wraping .track-title-text {
  color: var(--black) !important;
}
.essential-wraping .cmn-toggle-btnplay {
  width: 17px;
  min-width: 17px;
  height: 17px;
  background: var(--theme);
  border: 1px solid var(--theme);
  line-height: 16px;
  transition: all 0.4s;
}
.essential-wraping .cmn-toggle-btnplay .small-pause-btn,
.essential-wraping .cmn-toggle-btnplay .small-play-btn {
  transition: all 0.4s;
  color: var(--white);
  font-size: 8px;
}
.essential-wraping .cmn-toggle-btnplay:hover {
  background: transparent;
}
.essential-wraping .cmn-toggle-btnplay:hover .small-pause-btn,
.essential-wraping .cmn-toggle-btnplay:hover .small-play-btn {
  color: var(--black);
}

@media (max-width: 991px) {
  .single-play {
    width: 70px;
  }
  .single-play img {
    width: 100%;
  }
}

.play-btnblack .small-toggle-btn {
  background: var(--black);
}
.play-btnblack .small-toggle-btn .small-pause-btn,
.play-btnblack .small-toggle-btn .small-play-btn {
  color: var(--white);
}

.listing-timeline .small-toggle-btn {
  width: 18px;
  min-width: 18px;
  height: 18px;
  background: var(--theme);
  border: 1px solid var(--theme);
  transition: all 0.4s;
}
.listing-timeline .small-toggle-btn .small-pause-btn,
.listing-timeline .small-toggle-btn .small-play-btn {
  font-size: 8px;
  transition: all 0.4s;
}
.listing-timeline .small-toggle-btn:hover {
  background: transparent;
}
.listing-timeline .small-toggle-btn:hover .small-pause-btn,
.listing-timeline .small-toggle-btn:hover .small-play-btn {
  color: var(--black);
}

.allepisode-tabbing-wrap .tablinks .nav-links {
  background-color: rgb(245, 245, 245);
  border-radius: 100px;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--black);
  padding: 16px 32px;
  font-weight: 700;
}
.allepisode-tabbing-wrap .tablinks .nav-links button {
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 1399px) {
  .allepisode-tabbing-wrap .tablinks .nav-links {
    padding: 12px 30px;
    font-weight: 700;
  }
}
.allepisode-tabbing-wrap .tablinks .nav-links.active {
  background: var(--theme);
  color: var(--white);
}
.allepisode-tabbing-wrap .tablinks .nav-links.active button {
  color: var(--white);
}

.about-thumb {
  position: relative;
  height: 550px;
  width: 100%;
  z-index: 1;
}
.about-thumb .thumb1,
.about-thumb .thumb2 {
  position: absolute;
  width: 430px;
  height: 375px;
}
.about-thumb .thumb1 img,
.about-thumb .thumb2 img {
  width: 100%;
  height: 100%;
}
.about-thumb .thumb1 {
  top: 0;
  left: 0;
  z-index: 1;
}
.about-thumb .thumb2 {
  bottom: 0;
  right: 0;
}
.about-thumb .thumb-shape {
  position: absolute;
  left: 15%;
  top: 12%;
  z-index: -1;
}
@media (max-width: 1199px) {
  .about-thumb .thumb1,
  .about-thumb .thumb2 {
    width: 300px;
    height: 305px;
  }
  .about-thumb .thumb1 img,
  .about-thumb .thumb2 img {
    object-fit: contain;
  }
  .about-thumb .thumb-shape {
    left: 15%;
    top: 12%;
    max-width: 300px;
  }
  .about-thumb .thumb-shape img {
    width: 100%;
  }
}

.donate-icon {
  width: 55px;
  min-width: 55px;
  height: 55px;
  background: var(--black);
  border-radius: 50%;
}

.about-thumbv2 {
  z-index: 1;
}
.about-thumbv2 .thumb1 {
  max-width: 430px;
  padding-top: 40px;
}
.about-thumbv2 .thumb1 img {
  width: 100%;
}
.about-thumbv2 .about-thumb-bar {
  position: absolute;
  top: 0;
  left: 40px;
  max-width: 430px;
}
.about-thumbv2 .about-thumb-bar img {
  width: 100%;
}
.about-thumbv2 .about-videov2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  z-index: 1;
  box-shadow: 0px 21px 30px 0px rgba(0, 0, 0, 0.1);
}
.about-thumbv2 .about-videov2 i {
  color: var(--theme);
  font-size: 26px;
}
.about-thumbv2 .about-videov2 .vid-ani {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: -1;
  transition: all 0.4s;
  animation: zoms 2s linear infinite;
}
.about-thumbv2 .about-dot {
  position: absolute;
  left: -80px;
  top: 40px;
  animation: updown 12s linear infinite;
  z-index: -1;
}
@media (max-width: 1399px) {
  .about-thumbv2 .about-dot {
    display: none;
  }
}
@media (max-width: 991px) {
  .about-thumbv2 .about-videov2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 110px;
    height: 110px;
  }
  .about-thumbv2 .about-videov2 i {
    color: var(--theme);
    font-size: 26px;
  }
  .about-thumbv2 .about-videov2 .vid-ani {
    width: 75px;
    top: 16px;
    left: 16px;
  }
  .about-thumbv2 .about-videov2 .vid-ani img {
    width: 100%;
  }
  .about-thumbv2 .thumb1 {
    max-width: 100%;
    padding-top: 20px;
  }
  .about-thumbv2 .thumb1 img {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .about-thumbv2 .about-videov2 {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
}

@keyframes zoms {
  50% {
    transform: scale(1.05);
  }
}
.about-contentv2 .heading {
  font-size: 50px;
}
.about-contentv2 .heading span {
  font-size: 50px;
}
@media (max-width: 1199px) {
  .about-contentv2 .heading {
    font-size: 38px;
  }
  .about-contentv2 .heading span {
    font-size: 38px;
  }
}
@media (max-width: 991px) {
  .about-contentv2 .heading {
    font-size: 36px;
  }
  .about-contentv2 .heading span {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .about-contentv2 .heading {
    font-size: 28px;
  }
  .about-contentv2 .heading span {
    font-size: 28px;
  }
}

.latest-episode-section .latest-episode-itemv1 {
  margin-bottom: 50px;
}

.latest-episode-itemv1 {
  transition: all 0.4s;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
}
.latest-episode-itemv1 .thumb img {
  transition: all 0.4s;
}
.latest-episode-itemv1 .content .fashion-life .episode-sri {
  padding-left: 10px;
}
.latest-episode-itemv1 .content .fashion-life .episode-sri::before {
  position: absolute;
  content: "";
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--pra-clr);
  border-radius: 50%;
}
.latest-episode-itemv1 .content .fashion-life .icon {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
}
.latest-episode-itemv1:hover .content .fashion-life a {
  color: var(--theme);
}
.latest-episode-itemv1:hover .content .black-clr {
  color: var(--theme);
}
.latest-episode-itemv1:hover .thumb img {
  transform: scale(1.08);
}

@media (min-width: 575px) {
  .latest-episodes-section02 .container {
    max-width: 1615px;
    margin: 0 auto;
  }
}
.latest-episodes-section02 .latest-episode-itemv1 {
  margin-bottom: 60px;
}

.play-rounded {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.explorer-episode-item {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07);
}
.explorer-episode-item .thumb .theme-bg {
  position: absolute;
  bottom: 0;
  right: 0;
}
.explorer-episode-item .thumb img {
  transition: all 0.4s;
}
.explorer-episode-item .thumb:hover img {
  transform: scale(1.08);
}
.explorer-episode-item .thumb .marketing-btn {
  width: 140px;
  height: 50px;
  font-size: 12px;
  letter-spacing: 0.6;
  font-weight: 700;
  transition: all 0.4s;
}
.explorer-episode-item .thumb .marketing-btn:hover {
  background: var(--brand-dark-blue);
}
.explorer-episode-item:hover h4 a {
  color: var(--theme);
}
.explorer-episode-item:hover a:not(.ex-vid) {
  color: var(--theme);
}
.explorer-episode-item .view-all:hover {
  background: var(--theme) !important;
  color: var(--white) !important;
}

.support-btn:hover {
  background: var(--white) !important;
  color: var(--theme) !important;
}

.common-audio-buttonwrap .common-audio-buttonitem {
  padding-bottom: 30px;
}
.common-audio-buttonwrap .common-audio-buttonitem .audio-cont .atitle:hover {
  color: var(--theme);
}
.common-audio-buttonwrap .common-audio-buttonitem:not(:last-child) {
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.common-audio-buttonwrap .large-toggle-btn {
  width: 55px;
  min-width: 55px;
  height: 55px;
  background: var(--theme);
  transition: all 0.4s;
}
.common-audio-buttonwrap .large-toggle-btn .large-pause-btn,
.common-audio-buttonwrap .large-toggle-btn .large-play-btn {
  color: var(--white);
  font-size: 12px;
  transition: all 0.4s;
}
.common-audio-buttonwrap .large-toggle-btn:hover {
  background: var(--brand-dark-blue);
}
.common-audio-buttonwrap .large-toggle-btn:hover .large-pause-btn,
.common-audio-buttonwrap .large-toggle-btn:hover .large-play-btn {
  color: var(--white);
}
.common-audio-buttonwrap .progress-box .progress-cell {
  height: 2px !important;
  background: var(--black) !important;
}
.common-audio-buttonwrap .progress-box .progress-cell .progress {
  height: 2px !important;
  background: var(--black) !important;
}
.common-audio-buttonwrap .progress-box .progress-cell .progress .progress-buffer {
  background: var(--black) !important;
}
.common-audio-buttonwrap .progress-box .progress-cell .progress .progress-indicator {
  background: var(--theme) !important;
}
.common-audio-buttonwrap .track-info-box .audio-time {
  width: initial !important;
}
.common-audio-buttonwrap .track-info-box .audio-time span {
  color: var(--pra-clr);
  font-size: 14px;
}
.common-audio-buttonwrap .previous-track-btn {
  display: none !important;
}
.common-audio-buttonwrap .custom-sound {
  background-color: rgb(245, 245, 245);
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}
.common-audio-buttonwrap .custom-sound i {
  color: var(--black);
  font-size: 16px;
  transition: all 0.4s;
}
.common-audio-buttonwrap .custom-sound:hover {
  background: var(--theme);
}
.common-audio-buttonwrap .custom-sound:hover i {
  color: var(--white);
}
@media (max-width: 1399px) {
  .common-audio-buttonwrap .common-audio-buttonitem {
    padding-bottom: 20px;
  }
  .common-audio-buttonwrap .common-audio-buttonitem:not(:last-child) {
    margin-bottom: 20px;
  }
}
@media (max-width: 1199px) {
  .common-audio-buttonwrap .track-info-box {
    width: 240px !important;
  }
}
@media (max-width: 991px) {
  .common-audio-buttonwrap .common-audio-buttonitem {
    padding-bottom: 16px;
  }
  .common-audio-buttonwrap .common-audio-buttonitem:not(:last-child) {
    margin-bottom: 16px;
  }
  .common-audio-buttonwrap .cmn-audioplyer-fixedwrap {
    height: initial !important;
  }
}
@media (max-width: 767px) {
  .common-audio-buttonwrap .large-toggle-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
  .common-audio-buttonwrap .large-toggle-btn .large-pause-btn,
  .common-audio-buttonwrap .large-toggle-btn .large-play-btn {
    color: var(--white);
    font-size: 9px;
    transition: all 0.4s;
  }
  .common-audio-buttonwrap .track-info-box {
    width: 180px !important;
  }
}

.view-btn-bg .view-all:hover {
  background: transparent !important;
  color: var(--theme) !important;
}
.view-btn-bg .view-all:hover i {
  color: var(--theme);
}

.explore-featured-item .thumb {
  max-width: 524px;
  overflow: hidden;
}
.explore-featured-item .content {
  width: calc(100% - 524px);
}
@media (max-width: 991px) {
  .explore-featured-item .thumb {
    max-width: 100%;
    width: 100%;
  }
  .explore-featured-item .thumb img {
    width: 100%;
  }
  .explore-featured-item .content {
    width: 100%;
  }
}

.cmn-dots {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pra-clr);
}

.search-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: var(--bg1);
}
.search-wrap .search-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.search-wrap .search-cell {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.search-wrap .search-field-holder {
  width: 50%;
  margin: auto;
  position: relative;
  animation: slideInUp 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap .search-field-holder {
    width: 70%;
  }
}
@media (max-width: 575px) {
  .search-wrap .search-field-holder {
    width: 80%;
  }
}
.search-wrap .main-search-input {
  width: 100%;
  height: 50px;
  border: 0;
  padding: 0 0px;
  text-transform: capitalize;
  background: transparent;
  font-size: 16px !important;
  color: var(--theme);
  border-bottom: 1px solid var(--theme);
  text-align: start;
  letter-spacing: 2px;
}
.search-wrap .main-search-input ::placeholder {
  font-size: 16px;
}

@media (max-width: 575px) {
  .search-wrap .main-search-input {
    height: 50px;
    padding: 0 0;
    line-height: 50px;
    font-size: 16px;
  }
}
.search-wrap input.form-control,
.search-wrap input.form-control:focus {
  background-color: var(--theme);
}

input.main-search-input::placeholder {
  color: var(--theme);
  opacity: 1;
  font-size: 25px;
}

@media (max-width: 575px) {
  input.main-search-input::placeholder {
    font-size: 18px;
  }
}
.search-close {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 30px;
  color: var(--theme);
  cursor: pointer;
}

.blog-sidebar .blog-search input {
  background: transparent;
  border: unset;
  width: 100%;
  padding: 24px 40px;
  color: var(--white);
}
.blog-sidebar .blog-search ::placeholder {
  color: var(--white);
}
.blog-sidebar .recent-postwrap .recent-items {
  padding: 28px 28px;
  transition: all 0.4s;
}
.blog-sidebar .recent-postwrap .recent-items .recent-content a {
  display: block;
  line-height: 24px;
}
.blog-sidebar .recent-postwrap .recent-items.active, .blog-sidebar .recent-postwrap .recent-items:hover {
  background: var(--white);
}
.blog-sidebar .recent-postwrap .recent-items.active .recent-content a, .blog-sidebar .recent-postwrap .recent-items:hover .recent-content a {
  color: var(--theme);
  cursor: pointer;
}
@media (max-width: 1199px) {
  .blog-sidebar .recent-postwrap .recent-items {
    padding: 8px 10px;
  }
}
.blog-sidebar .categorys li a {
  padding: 16px 28px;
  transition: all 0.4s;
  color: var(--text);
  font-weight: 500;
}
.blog-sidebar .categorys li a i {
  opacity: 0;
}
.blog-sidebar .categorys li a.active, .blog-sidebar .categorys li a:hover {
  background: var(--white);
  color: var(--theme);
}
.blog-sidebar .categorys li a.active span, .blog-sidebar .categorys li a:hover span {
  color: var(--theme);
}
.blog-sidebar .categorys li a.active i, .blog-sidebar .categorys li a:hover i {
  opacity: 1;
}
.blog-sidebar .tagwrap li a {
  color: var(--black);
  font-size: 12px;
  line-height: 27px;
  display: inline-block;
  transition: all 0.4s;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 100px;
  background: var(--white);
  text-align: center;
  font-weight: 700;
}
.blog-sidebar .tagwrap li a:last-child {
  margin-right: 0;
}
.blog-sidebar .tagwrap li a:hover {
  background: var(--theme);
  color: var(--white) !important;
}
@media (max-width: 1399px) {
  .blog-sidebar .tagwrap li a {
    padding: 9px 28px;
  }
}
@media (max-width: 1399px) {
  .blog-sidebar .blog-search input {
    padding: 18px 20px;
  }
}

.tag-share {
  border-top: 1px solid var(--light);
  padding: 30px 0;
}
.tag-share .taglist li a {
  color: var(--white);
  font-size: 12px;
  line-height: 27px;
  display: inline-block;
  transition: all 0.4s;
  text-transform: uppercase;
  padding: 10px 30px;
  border-radius: 100px;
  background: var(--theme);
  text-align: center;
  font-weight: 600;
}
.tag-share .taglist li a:hover {
  background: var(--heading);
  color: var(--white) !important;
}
@media (max-width: 1399px) {
  .tag-share {
    padding: 20px 0;
  }
}
@media (max-width: 1199px) {
  .tag-share {
    padding: 16px 0;
  }
}

.comment-form-wrap h3 {
  font-size: 40px;
}
.comment-form-wrap .form-clt input,
.comment-form-wrap .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  border: 1px solid var(--border1);
  padding: 16px 20px;
  font-weight: 500;
  background: var(--bg1);
}
.comment-form-wrap .form-clt input::placeholder,
.comment-form-wrap .form-clt textarea::placeholder {
  color: var(--pra-clr);
}
.comment-form-wrap .form-clt textarea {
  padding-bottom: 100px;
}

.base-btn {
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 8px;
  padding: 12px 26px;
  background: var(--theme);
  transition: all 0.5s;
  border: 1px solid var(--theme);
}
.base-btn .rotcu {
  transform: rotate(-40deg);
}
.base-btn:hover {
  background: transparent;
  border-color: var(--theme);
}
.base-btn:hover .rotcu {
  transform: rotate(40deg);
}

.bulid-box {
  transition: all 0.4s;
  position: relative;
}
.bulid-box h6 {
  max-width: 272px;
  margin: 0 auto;
}
.bulid-box.active, .bulid-box:hover {
  background: var(--theme);
}
.bulid-box.active h6, .bulid-box:hover h6 {
  color: var(--white);
}

.blog-comment-wrap .thumb {
  width: 200px !important;
  height: 200px !important;
}
.blog-comment-wrap .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.blog-comment-wrap .content-comment {
  width: calc(100% - 200px);
}
.blog-comment-wrap .content-comment .reply {
  padding: 10px 30px;
  border-radius: 100px;
  background: var(--black);
  text-align: center;
  color: var(--white);
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
.blog-comment-wrap .content-comment .reply:hover {
  background-color: var(--theme);
}
@media (max-width: 1399px) {
  .blog-comment-wrap .thumb {
    width: 120px !important;
    height: 120px !important;
  }
  .blog-comment-wrap .thumb img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }
  .blog-comment-wrap .content-comment {
    width: calc(100% - 200px);
  }
  .blog-comment-wrap .content-comment .reply {
    padding: 10px 30px;
    border-radius: 100px;
    background: var(--black);
    text-align: center;
    color: var(--white);
    font-size: 12px;
    text-transform: uppercase;
  }
}
@media (max-width: 575px) {
  .blog-comment-wrap .thumb {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto;
  }
  .blog-comment-wrap .content-comment {
    width: 100%;
  }
}

.blog-widget-item {
  transition: all 0.5s;
}
.blog-widget-item .content {
  border: 1px solid var(--light);
  border-top: unset;
}
.blog-widget-item .thumb {
  width: 100%;
}
.blog-widget-item .thumb img {
  width: 100%;
  transition: all 0.5s;
}
.blog-widget-item .thumb .date-box {
  position: absolute;
  right: 20px;
  bottom: -20px;
  width: 59px;
  min-width: 59px;
  height: 59px;
  line-height: 16px;
}
.blog-widget-item .thumb .date-box span {
  line-height: 18px;
}
.blog-widget-item:hover {
  transform: translateY(-5px);
}
.blog-widget-item:hover h5 a {
  color: var(--theme);
}
@media (max-width: 1399px) {
  .blog-widget-item .thumb .date-box {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}

.blog-section01 {
  z-index: 1;
}
.blog-section01::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 490px;
  background: url(../img/element/bg-blog.png) no-repeat center center;
  background-size: cover;
  z-index: -1;
}

.blog-widget-itemv02 {
  width: 100%;
}
.blog-widget-itemv02 .mimg {
  width: 100%;
  overflow: hidden;
  transition: all 0.5s;
}
.blog-widget-itemv02 .date-box {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 59px;
  min-width: 59px;
  height: 59px;
  line-height: 16px;
}
.blog-widget-itemv02 .date-box span {
  line-height: 18px;
}
.blog-widget-itemv02 .content {
  position: absolute;
  bottom: 0;
  left: 0;
}
.blog-widget-itemv02:hover .content h5 a {
  color: var(--theme);
}
.blog-widget-itemv02:hover .mimg {
  transform: scale(1.08);
}

.ova-contact-info-2 .icon {
  color: var(--heading);
  font-size: 26px;
  margin-bottom: 19px;
  border-radius: 50%;
  border: 11px solid var(--primary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 109px;
  height: 109px;
}
.ova-contact-info-2 .icon i {
  display: flex;
}
.ova-contact-info-2 .contact .label {
  font-size: 24px;
  margin: 0 0px 10px 0px;
  padding: 0;
  font-weight: 600;
  line-height: 1.2em;
}
.ova-contact-info-2 .contact .info {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.ova-contact-info-2 .contact .info .mases {
  max-width: 208px;
  margin: 0 auto;
}
.ova-contact-info-2 .contact .info .item {
  color: var(--text);
  line-height: 1.8;
}
.ova-contact-info-2 .contact .info .item a {
  font-size: 20px;
  color: var(--text);
  line-height: 1.8;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
}
.ova-contact-info-2 .contact .info .item a:before {
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  left: 0px;
  bottom: 0px;
  transition: all 500ms ease;
  background-color: var(--primary);
}
.ova-contact-info-2 .contact .info .item a:hover {
  color: var(--primary);
}
.ova-contact-info-2 .contact .info .item a:hover:before {
  width: 100%;
}

.contact-border1 {
  position: relative;
}
.contact-border1::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 1px;
  background: var(--pra-clr);
  height: 200px;
  transform: translateY(-50%);
}
@media (max-width: 991px) {
  .contact-border1::before {
    display: none;
  }
}

.contact-left-cont .common-social li a svg path {
  fill: var(--heading);
}
.contact-left-cont .common-social li a:hover svg path {
  fill: var(--white);
}
.contact-left-cont a[href^="mailto:"] {
  color: var(--brand-dark-blue);
  transition: color 0.2s ease;
}
.contact-left-cont a[href^="mailto:"]:hover {
  color: var(--theme);
}

.main-contact-form input,
.main-contact-form textarea {
  border: unset;
  background: var(--bg4);
  border-radius: 0 8px 8px 8px;
  /* Dark blue typed text — overrides the global `input { color: var(--white) }`
     rule, which would otherwise make user input nearly invisible on the
     light gray field background. */
  color: var(--brand-dark-blue);
}
.main-contact-form input::placeholder,
.main-contact-form textarea::placeholder {
  color: #777777;
}
.main-contact-form .touch-btn {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.main-contact-form .touch-btn:hover {
  background: var(--theme) !important;
  color: var(--white);
}

.cmn-btn {
  transition: all 0.4s;
}
.cmn-btn .icons {
  transform: rotate(60deg);
  transition: all 0.4s;
}
.cmn-btn:hover {
  border-color: var(--theme) !important;
  color: var(--theme) !important;
}
.cmn-btn:hover .get-text {
  color: var(--theme) !important;
}
.cmn-btn:hover .icons {
  transform: rotate(90deg);
}
.cmn-btn:hover .icons i {
  color: var(--theme) !important;
}

.touch-btn {
  font-size: 12px;
  border-radius: 100px;
  transition: all 0.5s;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
}
.touch-btn .icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
}
.touch-btn .icon i {
  transition: all 0.4s;
}
.touch-btn:hover {
  color: var(--white);
  background: var(--brand-dark-blue);
}
.touch-btn:hover .icon i {
  color: var(--primary);
}

.view-all {
  font-size: 12px;
  font-weight: 700;
  color: rgb(119, 119, 119);
  transition: all 0.4s;
}
.view-all i {
  font-size: 16px;
  transition: all 0.4s;
}
.view-all:hover {
  color: var(--theme);
}

@keyframes updown {
  50% {
    transform: translateY(100%);
  }
}
@keyframes svgani {
  50% {
    fill: var(--theme);
    opacity: 0.5;
  }
}
@keyframes textani {
  100% {
    transform: rotate(390deg);
  }
}
#progress {
  background-color: var(--theme);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: fixed;
  right: 20px;
  z-index: 9999;
  display: none;
  bottom: 20px;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  border: 2px solid var(--white);
}
#progress i {
  color: var(--white);
}
#progress #valiu {
  display: block;
}
#progress #valiu img {
  width: 16px;
}
#progress:hover {
  cursor: pointer;
  background-color: var(--theme);
}

.error-content .cmn-btn {
  border: 1px solid var(--theme);
}
.error-content .cmn-btn:hover {
  color: var(--theme);
  background: transparent;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.cmn-border {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cmn-bordert {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cmn-borderb {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title h3 {
  font-size: 48px;
  font-weight: 700;
}
.section-title h3 span {
  font-size: 48px;
  font-weight: 700;
}
@media (max-width: 1399px) {
  .section-title h3 {
    font-size: 36px;
  }
  .section-title h3 span {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .section-title h3 {
    font-size: 30px;
  }
  .section-title h3 span {
    font-size: 30px;
  }
}

.hover-text:hover {
  background-color: var(--theme);
}

.hover-text-color:hover {
  color: var(--theme) !important;
}

.accordion-single {
  transition: all 0.4s;
  border-radius: 8px;
  border: 1px solid var(--border1);
}
.accordion-single .header-area {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
}
.accordion-single .header-area button {
  border: unset !important;
  color: var(--white);
  padding-right: 8%;
}
@media (max-width: 500px) {
  .accordion-single .header-area {
    font-size: 17px;
    font-weight: 500;
    color: var(--white);
  }
  .accordion-single .header-area button {
    padding-right: 4%;
  }
}

.header-area .accordion-btn::before {
  border-radius: 50%;
  width: 36px;
  min-width: 36px;
  height: 36px;
  font-size: 16px;
  background: var(--bg1);
}

.header-area .accordion-btn::after {
  font-size: 24px;
  color: var(--p1);
}

.faq .header-area {
  cursor: pointer;
}

.faq .header-area button::before,
.faq .header-area button::after {
  position: absolute;
  z-index: 1;
  right: 0;
  border-radius: 5px;
}

.faq .header-area button::before {
  content: "";
  background-color: var(--bg2);
  width: 38px;
  min-width: 38px;
  height: 38px;
  transition: all 0.4s;
}

.faq .header-area button::after {
  content: "\f101";
  font-family: "FontAwesome";
  font-size: 20px;
  transform: rotate(0deg);
  transition: all 0.5s;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  width: 38px;
  min-width: 38px;
  height: 38px;
}
@media (max-width: 500px) {
  .faq .header-area button::after {
    font-size: 16px;
  }
}

.faq .content-area {
  display: none;
}

.faq .active button {
  color: var(--theme);
}

.faq .active button::after {
  font-family: "FontAwesome";
  transform: rotate(90deg);
  font-weight: 700;
  color: var(--theme);
}

.service-tabing-wrap .images-remove-area {
  transition: all 0.6s;
  margin-bottom: -400px;
  opacity: 0;
  transform: rotate(60);
}
.service-tabing-wrap .modern-list li {
  font-size: 16px;
  color: var(--white);
}
.service-tabing-wrap .modern-list li i {
  color: var(--theme);
  font-size: 14px;
}
.service-tabing-wrap .accordion-single {
  border: unset;
  overflow: hidden;
  transition: all 0.8s;
  border-radius: 0;
}
.service-tabing-wrap .accordion-single .accordion-btn::after {
  content: "+";
  font-family: "FontAwesome";
  font-size: 20px;
  transform: rotate(0deg);
  transition: all 0.5s;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  width: 44px;
  min-width: 44px;
  height: 44px;
  background: #1d1d1d;
  border-radius: 50%;
}
.service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara {
  width: 450px;
}
.service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .serial-badge {
  padding: 8px 16px;
  opacity: 0.6;
  transition: all 0.4s;
}
.service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .serial-badge .rot60 {
  padding-left: 10px;
}
.service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .mtitle {
  font-size: 30px;
  font-weight: 500;
}
.service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .pras {
  font-size: 16px;
  font-weight: 400;
  display: none !important;
  transform: scale(0);
}
.service-tabing-wrap .accordion-single.active .images-remove-area {
  margin-bottom: 0px;
  opacity: 1;
}
.service-tabing-wrap .accordion-single.active .accordion-btn {
  height: initial;
  justify-content: space-between;
}
.service-tabing-wrap .accordion-single.active .accordion-btn::after {
  content: "\f068";
  font-family: "FontAwesome";
  color: var(--theme);
}
.service-tabing-wrap .accordion-single.active .mtitle-ara .serial-badge {
  opacity: 1;
}
.service-tabing-wrap .accordion-single.active .mtitle-ara .pras {
  display: block !important;
  transform: scale(1);
}
.service-tabing-wrap .accordion-single.active .content-area {
  display: none !important;
}
@media (max-width: 1399px) {
  .service-tabing-wrap .mtitle {
    font-size: 20px !important;
  }
  .service-tabing-wrap .tab-remove-thumb {
    max-width: 200px;
  }
  .service-tabing-wrap .tab-remove-thumb img {
    width: 100%;
  }
}

.stitle {
  font-size: 55px;
}
.stitle span {
  font-size: 55px;
  font-weight: 400;
  font-style: italic;
}
@media (max-width: 991px) {
  .stitle {
    font-size: 44px;
  }
  .stitle span {
    font-size: 44px;
  }
}
@media (max-width: 575px) {
  .stitle {
    font-size: 36px;
  }
  .stitle span {
    font-size: 36px;
  }
}
@media (max-width: 480px) {
  .stitle {
    font-size: 29px;
  }
  .stitle span {
    font-size: 29px;
  }
}

.pricing-section {
  z-index: 1;
}
.pricing-section .nav {
  border: unset;
  border-radius: 10px;
  overflow: hidden;
}
.pricing-section .nav .nav-item .nav-link {
  border: unset;
  padding: 15px 26px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background: #161616;
}
.pricing-section .nav .nav-item .nav-link.active {
  background: var(--theme);
}

.other-pricing-item {
  background: url(../img/pricing/pricing-itembg.png) no-repeat center center;
  background-size: cover;
  height: 243px;
  border: 1px solid var(--border1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.5s;
}
.other-pricing-item .pricinge-head {
  min-width: 400px;
  border-right: 1px solid var(--border1);
  height: 243px;
  transition: all 0.5s;
}
.other-pricing-item .pricinge-head p {
  max-width: 314px;
}
.other-pricing-item .pricing-list-right .price-choose .month {
  font-size: 18px;
  font-weight: 700;
}
.other-pricing-item .price-under {
  border-bottom: 1px solid var(--white);
  display: inline-block;
}
.other-pricing-item .price-under i {
  transition: all 0.4;
}
.other-pricing-item .price-under:hover {
  border-color: var(--theme);
  color: var(--theme);
}
.other-pricing-item .price-under:hover i {
  color: var(--theme);
}
.other-pricing-item:hover {
  border-color: var(--theme);
}
.other-pricing-item:hover .pricinge-head {
  border-right: 1px solid var(--theme);
}
@media (max-width: 1199px) {
  .other-pricing-item .pricinge-head {
    min-width: 300px;
    padding-right: 10px;
  }
}
@media (max-width: 991px) {
  .other-pricing-item {
    display: grid !important;
    height: initial;
  }
  .other-pricing-item .pricinge-head {
    height: initial;
    margin-bottom: 24px;
    margin-top: 24px;
    border-right: unset;
  }
}

.prcing-shape {
  position: absolute;
  right: 0;
  top: 120px;
  z-index: -1;
}
@media (max-width: 991px) {
  .prcing-shape {
    top: 10px;
    width: 250px;
  }
}

.event-item .event-datebox {
  background-color: rgba(255, 79, 0, 0.902);
  width: 69px;
  height: 100%;
  position: absolute;
  left: -80px;
  top: 0;
  transition: all 0.4s;
}
.event-item .event-datebox .text {
  transform: rotate(-90deg);
  display: block;
  width: 200px;
  height: 30px;
  white-space: nowrap;
  letter-spacing: 2px;
}
.event-item .touch-btn {
  font-weight: 700;
}
.event-item .touch-btn:hover {
  background: var(--theme);
}
.event-item:hover h5 a {
  color: var(--theme);
}
.event-item:hover .event-datebox {
  left: 0;
}
@media (max-width: 1399px) {
  .event-item .event-datebox {
    width: 40px;
  }
}

.event-map iframe {
  width: 100%;
  height: 390px;
}

.host-details-content .common-social li a svg path {
  fill: var(--heading);
}
.host-details-content .common-social li a:hover svg path {
  fill: var(--white);
}
.host-details-content h5 {
  font-size: 28px;
}

.testimonial-wrap {
  position: relative;
}
.testimonial-wrap .test-thumbs-small {
  width: 76px;
  min-width: 76px;
  height: 76px;
  border-radius: 50%;
}
.testimonial-wrap .test-thumbs-small img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.testimonial-wrap .testimonial-middle .thumb {
  width: 212px;
  min-width: 212px;
  height: 212px;
  border-radius: 50%;
}
.testimonial-wrap .testimonial-middle .thumb img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.testimonial-wrap .testimonial-middle .testi-content .designation {
  letter-spacing: 2px;
}
.testimonial-wrap .small-sliderthumb-wrap {
  max-width: 260px;
  margin-left: initial !important;
}
.testimonial-wrap .small-sliderthumb-wrap .swiper-slide {
  border: 2px solid var(--white);
  border-radius: 50%;
  overflow: hidden;
}
.testimonial-wrap .small-sliderthumb-wrap .swiper-slide-thumb-active {
  border-color: var(--primary);
}
@media (max-width: 1199px) {
  .testimonial-wrap .testimonial-middle .thumb {
    width: 172px;
    min-width: 172px;
    height: 172px;
  }
}
@media (max-width: 991px) {
  .testimonial-wrap .testimonial-middle .thumb {
    width: 152px;
    min-width: 152px;
    height: 152px;
  }
  .testimonial-wrap .testimonial-middle .quotes {
    width: 40px;
  }
}
@media (max-width: 575px) {
  .testimonial-wrap .testimonial-middle .thumb {
    width: 122px;
    min-width: 122px;
    height: 122px;
  }
  .testimonial-wrap .slider-button {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 15px;
  }
}

.testimonial-thumbig {
  position: absolute;
  z-index: -1;
  bottom: -20px;
}
.testimonial-thumbig img {
  max-width: unset;
}
@media (max-width: 991px) {
  .testimonial-thumbig {
    width: 100%;
    position: relative;
    margin-bottom: -80px;
    margin-top: 40px;
  }
  .testimonial-thumbig img {
    max-width: 100%;
  }
}

.cloud-left {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.cloud-right {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.tilt {
  border-radius: 5px;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
}
.tilt:hover {
  background: transparent;
  box-shadow: 0 40px 70px -15px rgba(0, 0, 0, 0.192);
  box-shadow: none;
}

.watch-version01 {
  background: url(../img/team/watch-bg01.png) no-repeat center center;
  background-size: cover;
  padding: 300px 5px;
  background-attachment: fixed;
}
.watch-version01 .video-popup .icons {
  width: 122px;
  min-width: 122px;
  height: 122px;
}
.watch-version01 .video-popup .icons i {
  font-size: 36px;
}
.watch-version01 .video-popup .circle {
  position: absolute;
  top: -32px;
  left: -34px;
  animation: textani 14s linear infinite;
}
@media (max-width: 1399px) {
  .watch-version01 {
    padding: 220px 4px;
  }
}
@media (max-width: 991px) {
  .watch-version01 {
    padding: 180px 4px;
  }
}
@media (max-width: 575px) {
  .watch-version01 {
    padding: 140px 4px;
  }
}

.line-shape {
  max-width: 1531px;
  height: 100vh;
  position: fixed;
  left: 50%;
  top: -20px;
  justify-content: space-between;
  margin: 0 auto;
  transform: translateX(-50%);
}

.line-shape span {
  position: relative;
  width: 1px;
  height: 100%;
  display: block;
  background: #292929;
}

.line-shape span::before,
.line-shape span::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: var(--theme);
  box-shadow: rgba(228, 235, 242, 0.2) 0px 8px 24px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  clip-path: polygon(51% 8%, 68% 15%, 66% 40%, 60% 78%, 56% 100%, 46% 100%, 42% 84%, 38% 56%, 34% 17%);
}

.line-shape span::after {
  animation: dscroll 2s linear infinite;
  width: 2px;
  height: 24px;
  bottom: 0;
  left: 0;
  background: var(--theme);
  box-shadow: rgba(228, 235, 242, 0.2) 0px 8px 24px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  clip-path: polygon(51% 8%, 68% 15%, 66% 40%, 60% 78%, 56% 100%, 46% 100%, 42% 84%, 38% 56%, 34% 17%);
}

.line-shape span:nth-child(2)::after {
  animation: dscroll 2.1s linear infinite;
}

.line-shape span:nth-child(3)::after {
  animation: dscroll 2.2s linear infinite;
}

.line-shape span:nth-child(4)::after {
  animation: dscroll 2.3s linear infinite;
}

.line-shape span:nth-child(5)::after {
  animation: dscroll 2.4s linear infinite;
}

.line-shape span:nth-child(6)::after {
  animation: dscroll 1s linear infinite;
}

.line-shape span:nth-child(7)::after {
  animation: dscroll 3.5s linear infinite;
}

.line-shape span:nth-child(2)::backdrop {
  animation: dscroll 4.1s linear infinite;
}

.line-shape span:nth-child(3)::before {
  animation: dscroll 4.2s linear infinite;
}

.line-shape span:nth-child(4)::before {
  animation: dscroll 4.3s linear infinite;
}

.line-shape span:nth-child(5)::before {
  animation: dscroll 4.4s linear infinite;
}

.line-shape span:nth-child(6)::before {
  animation: dscroll 4s linear infinite;
}

.line-shape span:nth-child(7)::before {
  animation: dscroll 4.5s linear infinite;
}

@keyframes dscroll {
  100% {
    transform: translateY(100vh);
  }
}
.software-fullwatch .video-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.software-fullwatch .video-wrapper video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media (max-width: 1399px) {
  .software-fullwatch .video-wrapper {
    width: 100%;
    height: 50vh;
    overflow: hidden;
  }
}

.episode-item {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.episode-item .microphone-epi {
  display: flex;
  align-items: center;
  gap: 100px;
}
@media (max-width: 767px) {
  .episode-item {
    gap: 10px;
    display: grid;
    justify-content: center;
    text-align: center;
  }
  .episode-item .microphone-epi {
    justify-content: center;
    gap: 30px;
  }
  .episode-item .view-all {
    justify-content: center;
  }
}

.listing-details-wrap .thumb {
  max-width: 600px;
}
.listing-details-wrap .thumb img {
  width: 100%;
}
.listing-details-wrap .listing-timeline {
  width: 450px;
}
@media (max-width: 767px) {
  .listing-details-wrap .thumb {
    width: 100%;
  }
}

.project-counting-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .project-counting-wrap {
    flex-wrap: wrap;
    gap: 24px 0 !important;
  }
  .project-counting-wrap .project-count-item {
    width: 45%;
  }
  .project-counting-wrap .project-count-item .project-icon img {
    width: 60px;
  }
  .project-counting-wrap .project-count-item .project-icon::before {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
  .project-counting-wrap .project-count-item h2 span {
    font-size: 36px !important;
  }
  .project-counting-wrap .pro-line {
    display: none;
  }
}

.project-count-item .box .project-icon::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 52px;
  min-width: 52px;
  height: 52px;
  background: var(--theme);
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: squareToCircle 2s 1s infinite alternate;
}
.project-count-item .box h2 span {
  font-size: 48px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.pro-line {
  border-left: 1px solid rgba(255, 255, 255, 0.149);
  height: 200px;
}

@-webkit-keyframes squareToCircle {
  0% {
    border-radius: 0 0 0 0;
    background: darksalmon;
    transform: rotate(0deg);
  }
  25% {
    border-radius: 50% 0 0 0;
    background: rgba(255, 81, 0, 0.7254901961);
    transform: rotate(45deg);
  }
  50% {
    border-radius: 50% 50% 0 0;
    background: rgba(252, 110, 44, 0.7254901961);
    transform: rotate(90deg);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    background: rgba(243, 118, 61, 0.7254901961);
    transform: rotate(135deg);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    background: #ff4f00;
    transform: rotate(180deg);
  }
}
@keyframes zin {
  50% {
    transform: scale(1.05);
  }
}
.subscriber-apple {
  background-color: var(--brand-light-blue);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-radius: 0 16px 16px 16px;
  position: absolute;
  top: -80px;
  left: 0;
  margin-bottom: -80px;
}
.subscriber-apple .apple-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.tabcontents {
  position: relative;
}

.tabcontents .tabitem {
  transform: translateY(100px);
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: 0.8s all;
}

.tabcontents .tabitem.active {
  position: initial;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
}

.start-donating-wrap .tablinks {
  display: flex;
  gap: 10px;
  align-items: center;
}
.start-donating-wrap .tablinks .nav-links {
  background: var(--bg4);
  width: 115px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-donating-wrap .tablinks .nav-links .tablink {
  font-size: 16px;
  font-weight: 500;
  color: var(--pra-clr);
}
.start-donating-wrap .tablinks .nav-links.active {
  background: var(--theme);
}
.start-donating-wrap .tablinks .nav-links.active .tablink {
  color: var(--white);
}
.start-donating-wrap .tabcontents {
  background: var(--bg4);
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-donating-wrap .tabitem {
  display: none;
}
.start-donating-wrap .tabitem .danating-valu-here span {
  font-size: 36px;
  font-weight: 800;
}
.start-donating-wrap .tabitem.active {
  display: block;
}

.footer-sound-element {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: -1;
}

.footer-version-one .widget-map {
  max-width: 145px;
}
.footer-version-one .widget-map a {
  transition: all 0.4s;
  color: var(--pra-clr);
}
.footer-version-one .widget-map a:hover {
  color: var(--primary) !important;
}

.cmn-hover {
  position: relative;
}
.cmn-hover::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 1px;
  height: 1px;
  background: var(--primary);
  transition: all 0.4s;
  opacity: 0;
}
.cmn-hover:hover::before {
  width: 100%;
  opacity: 1;
}

@media (max-width: 1399px) {
  .footer-logov1 {
    width: 100px;
    margin: 0 auto;
  }
  .footer-logov1 img {
    width: 100%;
    width: 100%;
  }
}

.flink-items {
  transition: all 0.6s;
  font-size: 16px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  color: var(--pra-clr);
}
.flink-items i {
  transition: all 0.6s;
}
.flink-items:hover {
  color: var(--theme) !important;
}
.flink-items:hover .ani-icons {
  transform: rotate(180deg);
}
.flink-items:hover .ani-icons i {
  color: var(--theme) !important;
}

.foote-formv1 {
  border: 1px solid var(--border1);
  border-radius: 4px;
  padding: 5px;
}
.foote-formv1 button {
  width: 53px;
  height: 50px;
  padding: 5px 16px;
}
.foote-formv1 input {
  background: transparent;
  border: unset;
  outline: none;
  padding: 10px 24px;
  color: var(--pra-clr);
  width: initial;
}
.foote-formv1 ::placeholder {
  color: var(--border1);
}
@media (max-width: 1399px) {
  .foote-formv1 input {
    padding: 10px 10px;
  }
}

.footer-topscroll {
  width: 58px;
  min-width: 58px;
  height: 58px;
  border-radius: 50%;
  display: block;
  border: 5px solid var(--white);
  transition: all 0.5s;
}
.footer-topscroll i {
  transition: all 0.5s;
}
.footer-topscroll:hover {
  background: var(--white);
  border-color: var(--theme);
}
.footer-topscroll:hover i {
  color: var(--theme);
}
@media (max-width: 575px) {
  .footer-topscroll {
    margin: 0 auto;
  }
}

.newsletter-wrap01 {
  background: url(../img/element/envelop-shape.png) no-repeat center center;
  background-size: cover;
  padding: 50px 50px 80px;
  margin-bottom: -34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
}
.newsletter-wrap01 .newsletter-icon i {
  font-size: 80px;
  color: var(--white);
}
.newsletter-wrap01 form {
  background: var(--white);
  border: unset;
  border-radius: 100px;
  width: 477px;
}
.newsletter-wrap01 form button {
  width: 78px;
  border-radius: 100px;
  transition: all 0.4s;
}
.newsletter-wrap01 form button:hover {
  background: var(--brand-dark-blue);
}
@media (max-width: 1100px) {
  .newsletter-wrap01 {
    padding: 50px 30px 80px;
    gap: 30px;
  }
  .newsletter-wrap01 .newsletter-icon i {
    font-size: 60px;
  }
  .newsletter-wrap01 form {
    width: 300px;
  }
  .newsletter-wrap01 form button {
    width: 58px;
  }
}
@media (max-width: 767px) {
  .newsletter-wrap01 {
    display: grid;
    gap: 20px;
    justify-content: center;
  }
  .newsletter-wrap01 .newsletter-icon i {
    font-size: 50px;
  }
  .newsletter-wrap01 form {
    margin: 0 auto;
  }
}
@media (max-width: 500px) {
  .newsletter-wrap01 {
    padding: 50px 30px 100px;
    display: grid;
    gap: 20px;
    justify-content: center;
  }
  .newsletter-wrap01 .newsletter-contv01 {
    justify-content: center !important;
    display: grid !important;
    text-align: center;
  }
  .newsletter-wrap01 form {
    margin: 0 auto;
    max-width: 300px;
    width: initial;
  }
}

/* ===========================================================================
   A11y: heading semantic levels (h1 → h2 → h3) decoupled from visual sizing
   ===========================================================================
   The template's base h1-h6 styles tie font-size to semantic level. We need a
   correct document outline for screen readers without changing the visual
   design, so these rules pin each element's visual size by class/context
   regardless of tag. Specificity beats the bare-tag rules in the responsive
   media queries above (each selector uses class + tag, ≥ 0,0,1,1). */

/* Featured Video Bar title (was <span>, now h2) — keep at 20px */
.audio-cmn-title h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* Section headings (h2.heading) — keep at the old h3 visual size */
h2.heading {
  font-size: 40px;
  font-weight: 700;
}
@media (max-width: 1399px) { h2.heading { font-size: 38px; } }
@media (max-width: 1199px) { h2.heading { font-size: 36px; } }
@media (max-width: 991px)  { h2.heading { font-size: 29px; } }

/* Subscribe-bar h2 + "Recent Episodes" column h2 — smaller (old h4 visual size) */
.subscriber-apple h2.heading,
h2.heading.mb-0 {
  font-size: 32px;
  font-weight: 700;
  line-height: 130%;
}
@media (max-width: 1399px) { .subscriber-apple h2.heading, h2.heading.mb-0 { font-size: 26px; } }
@media (max-width: 1199px) { .subscriber-apple h2.heading, h2.heading.mb-0 { font-size: 24px; } }
@media (max-width: 991px)  { .subscriber-apple h2.heading, h2.heading.mb-0 { font-size: 20px; } }

/* "Thoughtful conversations..." subtitle (h3 with .fw-500) — uses Plantin MT
   Pro Italic per the brand style guide's "Subhead" spec. Explicit weight 400
   + font-synthesis: none — only Plantin Regular Italic is loaded, so without
   these the browser would faux-bold the 500 weight requested by `fw-500`. */
.about-content h3.fw-500 {
  font-family: "Plantin MT Pro", "Inter", serif;
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
  font-size: 24px;
  line-height: 145%;
  /* Balanced line wrapping so "caregiving" doesn't end up orphaned on its own
     line. Modern Chrome/Firefox/Safari support this; older browsers fall back
     to greedy wrapping (the previous orphan behavior). */
  text-wrap: balance;
}
@media (max-width: 1199px) { .about-content h3.fw-500 { font-size: 18px; } }
@media (max-width: 991px)  { .about-content h3.fw-500 { font-size: 17px; } }

/* Shorts card titles (h3 inside .personal-podcast-item) — keep at the old h5 visual */
.personal-podcast-item h3 {
  font-size: 26px;
  font-weight: 700;
  text-wrap: balance; /* avoid widows on the 2-line clamped title */
}
@media (max-width: 1199px) { .personal-podcast-item h3 { font-size: 20px; } }
@media (max-width: 991px)  { .personal-podcast-item h3 { font-size: 19px; } }

/* Episode row titles already have an explicit `.episode-row-title { font-size: 14px }`
   rule earlier in this file that beats the base `h3` size, so no override is needed. */

/* ===========================================================================
   Inline-style consolidation — these classes replace inline `style=""` attrs
   that used to live in index3.html. Grouped here for ease of theming.
   =========================================================================== */

/* === A11y utility classes ===
   .visually-hidden — visually hides content but keeps it in the accessibility
   tree (screen readers + heading nav still see it). Use for context that
   visual users get from layout but assistive tech doesn't (e.g., the
   "Subscribe to the podcast" expansion of the "Subscribe!" h2).
   Modern bulletproof recipe — DON'T use `display: none` or `visibility: hidden`
   (both remove the element from the a11y tree). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-main-content link — visually-hidden by default, reveals at top of
   page when keyboard-focused (Tab from URL bar). Lets keyboard users bypass
   the entire nav and jump straight to <main>. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10100; /* above consent banner + magnific-popup */
  padding: 10px 18px;
  background: var(--brand-dark-blue);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--theme);
  outline-offset: 2px;
}

/* Nav: microphone icon color inside the Subscribe button */
.nav-mic-icon {
  color: var(--brand-dark-blue);
}

/* Hero: "Subscribe or Follow!" label above the platform pills */
.hero-cta-label {
  color: var(--brand-dark-blue);
  font-size: 26px;
}

/* Featured Video Bar card (overlaps hero by margin-top: -90px) */
.fvb-card {
  max-width: 720px;
  margin-top: -90px;
  border-radius: 0 16px 16px 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Episodes list card (left column of About section) */
.episodes-list-card {
  border-radius: 0 12px 12px 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  background: var(--white);
}

/* "Find all episodes on:" label in About section */
.find-episodes-label {
  color: var(--brand-dark-blue);
  font-size: 22px;
}

/* Large platform icons (40px) — used in the "Find all episodes on:" row */
.platform-icon-lg {
  font-size: 40px;
}

/* Footer logo (top of first footer column) */
.footer-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
}

/* "Subscribe!" in the Subscribe-bar h2 ("Remember to / *Subscribe!*") — uses
   the brand's Plantin MT Pro Italic for editorial emphasis, same treatment as
   the hero's "on Aging" and the About section's "Thoughtful conversations"
   subhead. Sized 1.5em so "Subscribe!" reads visibly bigger than "Remember to"
   above it — same proportional approach as the hero ("on Aging" > "Real Talk").
   Explicit weight 400 + font-synthesis: none prevents browser faux-bold (only
   the 400-weight italic file is loaded). Selector is scoped to
   `.heading .subscribe-italic` (specificity 0,0,2,0) to beat the
   `.heading span { font-family: inherit }` rule above. */
.heading .subscribe-italic {
  font-family: "Plantin MT Pro", "Inter", serif;
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.5em;
  /* Trim Plantin's tall metric leading + descender allowance — "Subscribe!"
     has no descender letters, so the reserved space is purely phantom. Three
     things working together:
     1. `display: inline-block` so the span's line-height + margins apply to
        its own box, not the parent's line box.
     2. `line-height: 1` shrinks the line box to the font-size.
     3. `text-box-trim` (Chrome 133+ / Safari TP) crops the actual ascender +
        descender leading from the box — strongest fix where supported.
     4. Negative bottom margin compensates on older browsers without #3. */
  display: inline-block;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  margin-top: 0.08em;
  margin-bottom: -0.18em;
}

/* Line-height for the 2-line Subscribe-bar heading — enough breathing room
   between "Remember to" and "Subscribe!" without feeling airy. */
.subscribe-heading {
  line-height: 1.25;
}

/* ===========================================================================
   Host cards (LinkedIn "people you may know" style) + bio modal
   =========================================================================== */

/* Photo bleeds full-width to the top edges of the card (Shorts-card style).
   `overflow: hidden` clips the photo to the card's 3-corner-radius shape. */
.host-card {
  background: var(--white);
  border-radius: 0 16px 16px 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.host-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* Full-width photo region — fills the top of the card edge-to-edge. */
.host-card-photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.host-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crops the current waist-up photos to keep the face visible. Works fine
     when the real headshots arrive too. */
  object-position: top center;
}

/* Padded text content below the photo */
.host-card-content {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

/* Card text — name uses dark blue brand color (matches section heading) */
.host-card .host-card-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-dark-blue);
  margin-bottom: 4px;
  line-height: 1.3;
}
.host-card .host-card-title {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.5;
  flex-grow: 1; /* push button to bottom so both cards align */
}

/* "Read bio" pill — outline default, fills dark blue on hover */
.host-card-bio-btn {
  display: inline-block;
  padding: 8px 24px;
  border: 1.5px solid var(--brand-dark-blue);
  border-radius: 100px;
  color: var(--brand-dark-blue);
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.host-card-bio-btn:hover,
.host-card-bio-btn:focus {
  background: var(--brand-dark-blue);
  color: var(--white);
  text-decoration: none;
}

/* === Host bio modal (magnific-popup inline target) === */
.host-bio-modal {
  background: var(--white);
  max-width: 640px;
  width: 92%;
  margin: 40px auto;
  padding: 40px;
  border-radius: 0 16px 16px 16px;
  position: relative;
}

.host-bio-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.host-bio-photo {
  width: 110px;
  height: 110px;
  object-fit: cover;
  object-position: top center;
  border-radius: 0 16px 16px 16px;
  flex-shrink: 0;
}

.host-bio-meta {
  flex-grow: 1;
  min-width: 0; /* allow long text to wrap inside flex item */
}
.host-bio-name {
  margin-bottom: 6px;
  font-size: 28px;
  line-height: 1.2;
}

.host-bio-text {
  margin-bottom: 0;
  line-height: 1.65;
  font-size: 15px;
}

/* Host-bio close-button styling lives in the shared rule near the top of the
   magnific-popup overrides section (search "Shared close-button styling"). */

/* On small viewports the bio modal goes full-screen. */
@media (max-width: 575px) {
  .host-bio-modal {
    max-width: none;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 60px 20px 28px;
    border-radius: 0;
  }
  .host-bio-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  /* Bump close-button size on small viewports for thumb-tappability.
     Mirrors the shared base rule's 3-class specificity so it beats vendor. */
  .host-bio-modal .host-bio-close.mfp-close,
  .mfp-trailer .mfp-iframe-holder .mfp-close,
  .mfp-shorts .mfp-iframe-holder .mfp-close,
  .episode-popup .episode-popup-close.mfp-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

/* Video-popup-specific position override: push the close X down past
   YouTube's top-right controls (settings gear + "Watch on YouTube" pill +
   share/options menu) which appear in the first ~48px of the embed and
   were colliding with the close button at top: 12px. Applies at all
   viewport widths; declared AFTER the mobile media query so it wins the
   `top` cascade on both desktop and mobile. */
.mfp-trailer .mfp-iframe-holder .mfp-close,
.mfp-shorts .mfp-iframe-holder .mfp-close,
.episode-popup .episode-popup-close.mfp-close {
  top: 56px;
}

/* ===========================================================================
   Cookie consent banner
   ===========================================================================
   Injected into <body> by /assets/js/consent-banner.js. Fixed at bottom of
   viewport, brand-matched, accessible. Default-denied + GPC honoring + the
   Google Consent Mode v2 wiring happens INLINE in the <head> of each page so
   the GTM tags read the right default state at boot — only the UI lives here.
   z-index sits above magnific-popup (1043) so even if a popup is open when
   the banner first appears, the banner is accessible. */
#rtoa-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  background: var(--white);
  border-top: 4px solid var(--brand-dark-blue);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}
#rtoa-consent-banner .consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
#rtoa-consent-banner .consent-text {
  flex: 1 1 380px;
  min-width: 0;
}
#rtoa-consent-banner .consent-text p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
#rtoa-consent-banner .consent-text a {
  color: var(--brand-dark-blue);
  text-decoration: underline;
}
#rtoa-consent-banner .consent-text a:hover,
#rtoa-consent-banner .consent-text a:focus {
  color: var(--theme);
}
#rtoa-consent-banner .consent-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
#rtoa-consent-banner button {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}
#rtoa-consent-banner #consent-accept {
  background: var(--brand-dark-blue);
  color: var(--white);
  border: 1.5px solid var(--brand-dark-blue);
}
#rtoa-consent-banner #consent-accept:hover,
#rtoa-consent-banner #consent-accept:focus {
  background: var(--theme);
  border-color: var(--theme);
}
#rtoa-consent-banner #consent-decline {
  background: transparent;
  color: var(--brand-dark-blue);
  border: 1.5px solid var(--brand-dark-blue);
}
#rtoa-consent-banner #consent-decline:hover,
#rtoa-consent-banner #consent-decline:focus {
  background: var(--brand-dark-blue);
  color: var(--white);
}
@media (max-width: 575px) {
  #rtoa-consent-banner .consent-inner {
    padding: 14px 16px;
    gap: 12px;
  }
  #rtoa-consent-banner .consent-actions {
    width: 100%;
  }
  #rtoa-consent-banner button {
    flex: 1;
    padding: 10px 12px;
  }
}

/* Footer "Privacy Policy · Cookie Preferences · Do Not Sell" line — sits
   directly under the copyright. Smaller, muted, links underlined-on-hover
   to match the rest of the footer link convention. */
.footer-legal-links {
  margin: 6px 0 0;
  font-size: 13px;
}
.footer-legal-links a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal-links span {
  margin: 0 6px;
  opacity: 0.6;
}

/* Inline-SVG icon utility (replaces Phosphor CDN webfont).
   Each icon usage: <svg class="svg-icon"><use href="#i-..."/></svg>
   Sized via font-size (1em), colored via currentColor — matches the ergonomics
   of the old <i class="ph-..."> markup. Class is `.svg-icon` (not `.icon`) to
   avoid colliding with the template's pre-existing `.icon` selectors (e.g.
   `.header-section .touch-btn .icon` which styles the round 34px nav button
   wrapper at higher specificity than a plain `.icon` rule). */
.svg-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em; /* baseline-align with adjacent text */
  fill: currentColor;
  flex-shrink: 0;            /* don't squish inside flex containers */
}

/*# sourceMappingURL=main.css.map */