.subnav-container{
  z-index: 100;
  position: relative;
  color: #000;
}
.subnav div a{
  color: #BABABA;
}
body{
  background: #09140B;
}
.dealer-join{
  position: relative;
  width: 100%;
  margin-top: -5%;
}
.dealer-join, .dealer-join-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dealer-join-center h3 {
  color: white;
  font-family: "Articulat CF Bold";
  font-size: var(--font-size-h2);
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 100px */
  text-align: center;
}
.dealer-join-center h5{
  color: #FBC529;
  margin-block: 2%;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  font-family: 'Articulat CF Bold';
  font-size: clamp(14px, 1vw, 1.3vw);
}
.dealer-join-center p {
  width: 40%;
  text-align: center;

}
.dealer-join-center a{
  margin-top: 3%;
}

.dealer-join .img-left, .dealer-join .img-right {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25vw;
  height: 25vw;
  border-radius: 2vw;
  overflow: hidden;
}
.dealer-join .img-left{
  left: -5%;
}
.dealer-join .img-right{
  right: -5%;
}

.dealer-join .img-left img, .dealer-join .img-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-img{
  display: none;
}


/*Last episode*/
.last-episode{
  height: auto;
  padding: 0 2.5vw;
  position: relative;
}
.last-episode .hex-1{
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translate(-70%, 0);
  width: 25vw;
  z-index: -1;
}
.last-episode .hex-1 img{
  width: 100%;
}
.last-episode .hex-2{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(50%, 0);
  width: 20vw;
  z-index: -1;
}
.last-episode .hex-2 img{
  width: 100%;
}
.last-episode h4{
  color: #FBC529;
  font-family: "Articulat CF Bold";
  font-size: clamp(20px, 2.5vw, 3vw);
}
.last-episode .episode{
  display: flex;
  justify-content: space-between;
  margin-top: 2%;
  background: rgba(34, 56, 38, 0.50);
  border-radius: 50px;
}
#subnav-podcast .subnav-active{
  border: 1px solid #CDEA80;
  background-color: transparent;
}
.last-episode .episode .img{
  width: 30%;
  height: 28.2vw;
  overflow: hidden;
}
.last-episode .episode .img img{
  width: 100%;
  object-fit: cover;
  border-radius: 50px;
} 

.last-episode .episode .info{
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 4vw 3vw;
}

.last-episode .episode-title{
  color: white;
  font-family: "Articulat CF";
  font-size: var(--font-size-h3);
  font-weight: 800;
  line-height: 100%;
  margin-bottom: 1%;
}
.episode .tags{
  display: flex;
  gap: 2vw;
  margin-top: 0.5%;
  margin-bottom: 2%;
}
.episode .tags .episode-number{
  color: #FBC529;
  font-family: "Articulat CF";
  font-size: clamp(12px, 0.8vw, 2.5vw);
  font-weight: 800;
  line-height: 100%;
}
.episode .tags .time{
  color: #C2C2C2;
  font-family: "Articulat CF";
  font-size: clamp(12px, 0.8vw, 2.5vw);
  font-weight: 800;
  line-height: 100%;
  display: flex;
  align-items: flex-end;
  margin-top: -0.5%;
  gap: 5px;
}
.episode .tags .time svg{
  align-self: center;
  margin-top: 5%;
}
.episode .tags .date{
  color: #FBC529;
  font-family: "Articulat CF";
  font-size: clamp(12px, 0.8vw, 2.5vw);
  font-weight: 800;
  line-height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.episode p{
  color: #C2C2C2;
  font-family: "Articulat";
  font-size: var(--font-size-p);
  font-weight: 100;
  margin-top: 1%;
  margin-bottom: 2%;
  letter-spacing: 0.92px;
}

.episode .platforms{
  display: flex;
  gap: 2vw;
  align-items: center;
}

/*All episodes*/

.all-episodes{
  height: auto;
  padding: 0 2.5vw;
  margin-top: 20vh;
}

.all-episodes .episode{
  display: flex;
  justify-content: space-between;
  margin-top: 2%;
  border-radius: 20px;
  position: relative;
  margin-bottom: 5%;
}
.all-episodes .episode::after{
  content: "";
  display: block;
  clear: both;
  height: 0.5px;
  width: 100%;
  position: absolute;
  bottom: -10%;
  opacity: 0.3;
  background-color: white;
}
.all-episodes .episode .img{
  width: 18%;
  margin-left: 1%;
  overflow: hidden;
}
.all-episodes .episode .img img{
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
} 

.all-episodes .episode .info{
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2.5vw;
}

.all-episodes .episode-title{
  color: white;
  font-family: "Articulat CF";
  font-size: clamp(20px, 1.2vw, 3vw);
  font-weight: 100;
  line-height: 100%;
  margin-bottom: 1%;
}

@media (width <= 1024px) {
  #subnav-podcast{
    display: flex;
    width: 100%;
    overflow-x: scroll;
    background-color: transparent;
    text-wrap: nowrap;
    margin-left: 20px;
  }
  #subnav-podcast div{
    padding: 20px 40px;
  }
  #subnav-podcast .subnav-active{
    border-width: 2px;
  }
  .dealer-join {
    height: auto;
    padding: 20px;
    padding-top: 100px;
    gap: 20px;
  }
  .dealer-join-center{
    gap: 0;
  }
  .dealer-join h3 {
    margin-bottom: 20px;
  }

  .dealer-join .img-container{
    display:flex;
    gap: 20px;
    margin-bottom: 50px;
  }
  .dealer-join .img-advocacy{
    position: static;
    width: 100%;
    height: 150px;
  }
  .dealer-join p {
    margin-bottom: 20px;
    width: 100%;
  }

  .last-episode h4{
    display: none;
  }
  .last-episode{
    margin-top: 50px;
    padding: 20px;
  }
  .last-episode .episode{
    flex-direction: column;
    gap: 0;
    border-radius: 20px;
  }
  .last-episode .episode .img{
    width: 100%;
    height: auto;
  }
  .last-episode .episode .img img{
    border-radius: 20px;
  }
  .last-episode .episode .info{
    width: 100%;
    padding: 20px;
  }
  .last-episode .episode-title{
    margin-bottom: 10px;
  }
  .last-episode .episode .tags{
    margin-top: 10px;
    gap: 30px;
    margin-block: 10px;
  }
  .last-episode .episode .tags .episode-number, .last-episode .episode .tags .time, .last-episode .episode .tags .date{
    font-weight: 100;
  }
  .last-episode p{
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .episode .platforms{
    gap: 30px;
  }
  .all-episodes{
    margin-top: 50px;
    padding: 20px;
  }
  .all-episodes .episode{
    margin-bottom: 20%;
  }
  .all-episodes .episode .img{
    width: 30%;
    height: auto;
  }
  .all-episodes .episode .img img{
    border-radius: 20px;
  }
  .all-episodes .episode .info{
    width: 70%;
    padding-inline: 20px 0;
  }
  .all-episodes .episode-title{
    margin-bottom: 10px;
  }
  .episode p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #subnav-podcast a{
    font-size: 18px;
  }
}