.HeroSectionContainer{
display: flex;
    align-items: self-start;
    padding: 110px 100px 137px 100px;
    background-color: #ecf4ff;
    }
.HeroSectionContainerRight svg{
width: 500px;
    height: 500px;
    border-radius: 10px;
}
#googleBox{
	background-color: white;
}
.social-section-botton{
    display: flex;
    margin-top: 12px;
}
#googleBox img{
	    width: 27px;
    height: 27px;
}
.social-section-botton a{
    padding: 6px;
    border-radius: 50px;
    background-color: black;
    display: flex;
    transition: 0.3s;
    cursor: pointer;
}
#pause-button{
	display: none;
	padding: 12px 12px 8px 12px;
}
.musicBtn button{
    background: #006fff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    border: none;
}
.headingTopMusic h3{
	    color: gray;
    font-size: 20px;
}
#play-button{
    padding: 12px 10px 12px 14px;
}
.musicBtn button svg{
    fill: white;
    width: 32px;
    height: 32px;
}
.musicBtn{
	display: flex;
	    margin-right: 10px;
}
.headingTopMusic{
	    display: flex;
    align-items: flex-start;
}
.sharedpodcastWith h4{
	    color: grey;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
}
.social-section-botton a:nth-child(2){
      margin: 0px 20px;
}
.social-section-botton a:hover {
   transform: scale(1.2);
}
.social-section-botton a svg{
    fill: #ffffff;
    width: 12px;
    height: 12px;
}
.audio-image{
    width: 200px;
    height: auto;
    margin-right: 20px;
}
.audio-image img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 4px solid #006fff;
    object-fit: cover;
}
.HeroSectionContainerLeft{
     width: 50%;
    margin-right: 40px;
}
.HeroSectionContainerRight{
    width: 400px;
    margin-left: 40px;
    height: 380px;
}
.HeroSectionContainerRight img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.HeroSectionContainerLeft h2{
    margin-bottom: 14px;
color: #000000;
    font-size: 32px;
    line-height: 44px;
    word-spacing: 0px;
}
.HeroSectionContainerLeft span{
    color: #000000;
    font-size: 20px;
    line-height: 36px;
    word-spacing: 0px;
    }
    .aboutpodcast{
		width: 400px;
	}
    .overviewSectionParent{
		width: 100%;
    background: rgb(98, 84, 252);
	}
	.latestPodcast{
    padding: 65px 20px 275px 100px;
    background-color: white;
	}
	.latestPodcastChild{
	display: flex;
    margin-top: 50px;
	}
		.latestPodcastChild1{
			cursor: pointer;
		   transition: 0.3s;
	}
	.latestPodcastChild1:hover{
		    color: #006fff;
	}
	.latestPodcastChild2{
			cursor: pointer;
		   transition: 0.3s;
	}
	.latestPodcastChild2:hover{
		    color: #006fff;
	}
	.latestPodcastChild1 h3{
    margin-top: 20px;
    font-size: 24px;
	}
		.latestPodcastChild2 h3{
		    margin-top: 20px;
		        font-size: 26px;
	}
	.latestPodcastChild1{
    width: 372px;
    height: 300px;
        margin-right: 35px;
	}
		.Followspan {
	    font-size: 20px;
	    font-weight: 450;
	}
	.episodeHosted {
	    font-size: 20px;
	    font-weight: 450;
	}
	.Followspan a{
		color: #ffffff;
		text-decoration: underline;
	}
	.episodeHosted a{
		color: #ffff;
		text-decoration: underline;
	}
		.latestPodcastChild2{
	    width: 388px;
    height: 300px;
	}
	.latestPodcastChild1Image{
    width: auto;
    height: auto;
    margin-bottom: 25px;
	}
	.latestPodcastChild1Image img{
    width: 100%;
    height: 320px;
    border-radius: 10px;
    object-fit: cover;
	}
	.latestEpisodeHead{
	    font-size: 32px;
	}
	.socialSpeaker{
		    display: flex;
    flex-direction: column;
    margin-top: 48px;
	}
	.overviewSectionContainer{
		position: relative;
		    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        padding-bottom: 100px;
	}
	.Followspan{
		margin-bottom: 20px;
	}
	.aboutpodcast{
    width: 652px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: 208px;
    text-align: justify;
	}
	.dotted{
    width: 8px;
    height: 8px;
    border-radius: 50px;
    margin-right: 10px;
    background-color: #ffffff;
	}
	.session ul li {
		display: flex;
		align-items: baseline;
		margin-bottom: 20px;
		color: #ffffff;
	}
		.session ul {
    margin-top: 30px;
	}
		.overview {
	  margin-top: 60px;
	}
	.overview h4{
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 10px;
	}
	.overview a{
		color: white;
    font-weight: 500;
    text-decoration: underline;
	}
	.overview a:hover{
		font-weight: 300;
	}
	.session  {
margin-top: 60px;

	}
		.session  h4{
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 10px;
	}
	.overview p{
    color: #ffffff;
    line-height: 26px;
	}
	.musicTopElement{
		display: flex;
	}
	.sharedpodcastWithParent{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
	}
.bottomButtons	.controls {
    text-align: center;
}
.bottomButtons{
	display: flex;
	justify-content: space-between;
}
.methodButton button{
	outline: none;
	background: none;
	border: none;
	cursor: pointer;
}
.methodButton{
	display: flex;
	align-items: center;
}
.playback-speed{
    border: 2px solid #D8D8D8!important;
    border-radius: 6px;
    padding: 2px 5px;
    color: #bababa;
    margin: 0px 10px;
    font-weight: 500;    transition: 0.3s;
}
.timeBoxAll{
	    color: #bababa;
}
.playback-speed:hover{
     border-color: rgb(192, 192, 192)!important;
}
#spotifyBox{
	background:none;
}
#castBox {
    background: none;
    margin: 0;
}
#spotifyBox img{
    width: 27px;
    height: 27px;
}
#castBox  img {
    width: 27px;
    height: 27px;
}
#spotifyBox:hover{
	    transform: scale(1.2);
}
.methodButton button svg{
fill: #D8D8D8;
    width: 20px;
    height: 20px;
    transition: 0.3s;
}

.methodButton button svg:hover{
    fill: #aeadad;
}
	.audioSectionContainer{
    padding: 15px;
    display: flex;
    margin-top: 7px;
    border: 1px solid #c0b8b8;
    border-radius: 8px;
    flex-direction: column;
	width: 100%;
	}
	/* .unmuteBtn{
		background-color: ;
	} */
	.dzsap-sticktobottom{
     position: unset!important;
	}
	.pausebtn{
		  background: #006fff!important;
	}
	.curr-time{
		 top: 52px;
		 border-radius: 6px!important;
		  background: #006fff!important;
	}
	.total-time{
			 border-radius: 6px!important;
		 color: rgb(255 255 255 / 99%)!important;
		 top: 52px;
		  background: #006fff!important;
	}
	.playbtn{
		background-color: #006fff!important;
	}
	.ap-controls-right{
		display: none!important;
	}
	#stickyplayer{
		    width: unset!important;
	}
	.audioSection{
    position: absolute;
    background-color: rgb(255, 255, 255);
    width: 900px;
    left: 50%;
    top: 4%;
    transform: translate(-50%, -50%);
    display: flex;
    padding: 26px;
    border: 1px solid #e0e1e3;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	}
	
	.dzsap-sticktobottom.dzsap-sticktobottom-for-skin-wave {
    bottom: 0;
    opacity: 1;
  }
  @media (max-width: 917px) {
    .HeroSectionContainer{
		flex-direction: column;
		align-items: center;
	}
	.HeroSectionContainerLeft {
		width:100%;
		margin-right: 0px;
	}
	.HeroSectionContainerRight {
    margin-left: 0px;
    height: 370px;
    margin-top: 40px;
	}
	.HeroSectionContainerLeft h2 {
    text-align: center;
}
.HeroSectionContainerLeft span {
	    margin: 0px 8px;
    text-align: center;
    display: flex;
    justify-content: center;
}
	.audio-image{
		display: none;
	}
	.audioSection {
		width: 746px;
	}
	.dzsap-sticktobottom {
		top: 53px!important;
		left: 0px!important;
		width: 100%;
	}
	.audioSection{
		background-color: rgb(255, 255, 255);
		border: none;
		height: unset;
	}
  }
  @media (max-width: 885px) {
      .latestPodcastChild{
		flex-direction: column;
		    padding: 0px 70px;
	  }
	  .latestPodcastChild a:last-child{
		    margin-top: 40px;
	  }
	  .latestPodcastChild1Image img{
		  height: auto;
	  }
	  .latestPodcastChild1 {
		width: 100%;
		height: 100%;
		margin-right: 0px;
	}
	.latestPodcastChild1Image{
		width: 100%;
	}
	.latestPodcast{
		text-align: center;
    padding: 62px 20px 42px 15px;
	}
	.latestPodcastChild a{
		margin-bottom: 20px;
	}
}
@media (max-width:300px){
	.sharedpodcastWithParent{
		flex-direction: column;
    	align-items: center;
    	justify-content: center;
	}
	.audioSectionContainer{
		padding: 7px;
	}
}
  @media (max-width: 792px) {
    .audioSection {
		width: 86%;
		top: 6%;
	}
	.latestPodcast {
		background-color: white;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
  }
  @media (max-width: 743px) {
    .aboutpodcast {
		margin-top: 271px;
		width: 100%;
		padding: 0px 20px;
  }
  .HeroSectionContainer {
	padding: 50px 46px 115px 46px;
}
.HeroSectionContainerRight {
    margin-top: 60px;
}
}
  @media (max-width: 500px) {
	.aboutpodcast {
		margin-top: 308px;
	}
    .latestPodcastChild1 {
		width: 100%;
		/* height: 300px; */
	}
	.latestPodcast {
	      padding: 65px 0px 40px 0px;
	}
	.latestPodcastChild1Image{
		width: 100%;
	}
	.HeroSectionContainerLeft {
		text-align: center;
	}
	.HeroSectionContainerRight {
		width: 100%;
		height: unset;
	}
}
  @media (max-width: 563px) {
	  .dzsap-sticktobottom h3{
		      font-size: 18px;
	  }
}
  @media (max-width: 544px) {
	  .dzsap-sticktobottom h3{
		    font-size: 14px;
	  }
}
#toTop {
    background: url(/images/totop.webp) no-repeat right bottom;
    background-size: 23px 57px;
    border: none;
    height: 57px;
    overflow: hidden;
    position: fixed;
    bottom: 30px;
    right: 25px;
    text-decoration: none;
    text-indent: 100%;
    text-indent: -9999px;
    width: 23px;
    z-index: 999;
    -webkit-animation: toTop-rocket 1s infinite;
    -webkit-animation-direction: alternate;
    animation: toTop-rocket 1s infinite;
    animation-direction: alternate;
}

@-webkit-keyframes toTop-rocket {
    0% { bottom: 20px; bottom: 30px; }
    100% { bottom: 30px; bottom: 20px; }
}

@keyframes toTop-rocket {
    0% { bottom: 20px; bottom: 30px; }
    100% { bottom: 30px; bottom: 20px; }
}