@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Script&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.josefin-sans {
  font-family: "Josefin Sans", sans-serif;
}

.fs-12 {
  font-size: 12px;
}

.fs-13 {
  font-size: 13px;
}

.fs-14 {
  font-size: 0.875rem;
}

.letter-spacing-1 {
  letter-spacing: 0.125rem;
}

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

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

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

.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;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-weight: 700;
}

.h1,
h1 {
  font-size: calc(1.75rem + 1.5vw);
}

/* Header - Navigation */

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  font-weight: 600;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: .375rem 1.5rem;
  }
}

/* Toggle Button - Navigation */

.btn {
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn-primary {
  background: #4e68e9;
}

.shadow-lg {
  box-shadow: 1px 18px 36px -9px rgba(5.9234374999999755, 5.9234374999999755, 5.9234374999999755, 0.48);
}

.subscribe-on button {
  margin-right: 0.5rem;
  margin-bottom: 0.75rem;
}

.posts .post-body {
  margin: 1.25rem 0;
}

.posts .post-body .post-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-top: 0.5rem;
  color: black;
  text-decoration: none;
  display: block;
}

.meet-host,
.sponsors,
.our-blogs,
.about-show,
.episodes {
  padding: 5rem 0;
}

.lets-talk{
  padding: 5rem 0 10rem 0;
}


.signature {
  font-family: "League Script", cursive;
}

.social-icons {
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-icons li {
  display: inline-block;
  margin: 0.25rem 1.5rem 0 0;
}

.social-icons li:last-child {
  margin: 0;
}

.social-icons li a {
  text-decoration: none;
  color: inherit;
  font-size: 1.25rem;
}

@media (max-width: 767px) {
  .hero-content .figure .figure-img {
    width: 82%;
  }

  .posts .post-image-card img {
    width: 68%;
  }
  

  .latest-episodes h2 {
    text-align: center;
    margin-top: 2rem;
  }

  .posts .post-body .post-title {
    padding: 0 16%;
  }

  .posts .post-body .post-date{
    color: #000;
    text-transform: uppercase;
  }

  .h1,
  h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1140px;
  }
}

/* Controls */

.quote-icon svg {
  width: 64px;
  fill: #ccc;
}
.carousel-indicators {
  bottom: -3rem;
}
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 2px solid #000;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #000;
}

.testimonial-text {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
}

.wow {
  position: relative;
  grid-column: span 2;
}

.carousel-landmark {
  grid-column: span 3;
}

@media screen and (max-width: 576px) {
  .testimonial-text {
    margin-top: 50px;
    row-gap: 50px;
  }
  .wow {
    grid-column: span 5;
  }

  .carousel-landmark {
    grid-column: span 5;
  }
}
.sponsors {
  padding-bottom: 15rem;
}
.sponsor-card {
  background-color: #ffffff;
  border-radius: 12% 12% 12% 12%;
  box-shadow: -4px 8px 17px -3px rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  border-color: #232323;
  padding: 0 2rem;
  min-height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.become-sponsor-bg {
  background-image: url(../image/episode/cover/the-million-dollar-myth.jpg);
  background-position: top center;
  background-size: cover;
  padding-bottom: 10rem;
}

.become-sponsor-card {
  position: relative;
  top: -8rem;
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.12);
  padding: 4.5rem 5rem;
  background: rgba(255, 255, 255, 0.9) !important;
}

.become-sponsor-card h2 {
  padding: 0 4rem;
}

.btn-lg {
  padding: 1rem 2.5rem;
}

.btn i {
  margin: 0 0.25rem;
}

.episode-bg {
  background-image: url(../image/episode/cover/broke-confused-17.jpg);
  background-position: top center;
  background-size: cover;
  padding: 5rem 0;
  position: relative;
}

.episode-bg:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.38);
  top: 0;
  left: 0;
  z-index: 0;
}

.episode-bg h1 {
  color: #fff;
  z-index: 1;
}

.episode-bg .container {
  position: relative;
  z-index: 1;
}

.podcast-category {
  margin-top: 1rem;
}

.podcast-category span {
  margin: 0 0.5rem;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
}

.podcast-category span a {
  color: #fff;
  text-decoration: none;
}

.podcast-category span a i {
  margin-right: 0.5rem;
}

.podcast-category span.dropdown-center .dropdown-menu a {
  color: #000;
  text-transform: capitalize;
  font-size: 0.875rem;
}

.podcast-player {
  position: relative;
  top: -2rem;
  background: transparent;
}

.podcast-player iframe {
  border-radius: 1rem;
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.24);
  padding: 0.5rem;
  background: #000;
}

.podcast-pagination a {
  text-decoration: none;
  color: inherit;
}

.podcast-pagination .left-nav a i {
  margin-right: 0.5rem;
}

.podcast-pagination .right-nav a i {
  margin-left: 0.5rem;
}

.podcast-pagination h4 {
  letter-spacing: 0.225rem;
  color: #aaa;
}

.title-with-stroke{
    position: relative;
    padding-bottom: 1rem;
}

.title-with-stroke:after{
    content: '';
    width: 1.5rem;
    height: .225rem;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
}

.post-may-like a{
    text-decoration: none;
    color: #000;
}

.post-may-like a .post-date{
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 500;
}

.post-may-like a .post-date i{
    margin-right: .25rem;
}

.navbar-brand img{
    width: 90px;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    border: 1px solid #F3B615;
    border-radius: 30px;
}

.our-blogs-bg{
  background: #F3B615;
}

.link-arrow{
  text-decoration: none;
  color: #000;
}

.image-shadow{
  box-shadow: 0px 19px 33px -11px rgba(0, 0, 0, 0.28);
}

.lets-talk .social-icons li{
  margin: .5rem;
}
.lets-talk .social-icons a{
  font-size: 1rem;
}
.episodes .podcast-category a{
  color: #444;
}

.episodes .podcast-category span{
  font-size: 12px;
  margin-right: 1rem;
  margin-left: 0;
}

.episodes .podcast-summary{
  line-height: 1.75rem;
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

.episodes .btn-readmore{
  border: 2px solid #000;
  text-decoration: none;
  padding: .75rem 1rem;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .075rem;
}

.episodes .btn-readmore:hover{
  background: #000;
  color: #fff;
}

@media (max-width: 579px) {
  .web-banner{
    display: none;
  }

  #advertisement{
    width:350px;
    height:292px;
    bottom: -292px;
  }

   #advertisement .close-btn{
    color:#fff;
  }
}

@media (min-width: 580px) {
  .mobile-banner{
    display: none;
  }

  #advertisement{
    width:1116px;
    height:146px;
    bottom: -146px;
  }

  #advertisement .close-btn{
    color:#000;
  }
}

#advertisement{
    position:fixed;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s, height 1s;
}

#advertisement img{
    width:100%;
    height:100%;
}

#advertisement .close-btn{
    width:24px;
    height:24px;
    text-align:center;
    position:absolute;
    right:16px;
    top:4px;
    cursor:pointer;
    font-size: 24px;
}