/*
* GH Podcast | radio station template
* Version: 01,

===========================================
    
    All include section: 

    01. Google fonts
    02. Basic css
    03. Preloader css
    04. header area start
    05. home area start
    06. story behind area start
    07. episode area start
    08. recent episodes area start
    09. meet host area start
    10. join area start
    11. footer area start
    12. episode one area start
    13. leave comment area start
    14. return top area start

===========================================


*/


/*======================
   01. Google fonts
========================*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');


/*======================
   02. Basic css
========================*/
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
footer,
header,
menu,
nav,
section {
    margin: 0;
    padding: 0;
}

body {
    line-height: 26px;
    background: #fff;
    font-size: 15px;
    color: #000000;
    font-family: 'Rubik', sans-serif;
}

.body-bg {
    background: #F6F3F5;
}

ol,
ul {
    list-style: none;
}

a:hover {
    text-decoration: none;
}

button:focus, input:focus, textarea:focus {
    outline: 0;
}

h2, h3, h4, h5 {
    color: #172541;
}


/*======================
   03. Preloader css
========================*/

#preloader {
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader3 {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding: 0px;
    text-align: left;
}

.loader3 span {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #0B3E3A;
    animation: loader3 1.5s linear infinite;
}

.loader3 span:last-child {
    animation-delay: -0.9s;
    -webkit-animation-delay: -0.9s;
}

@keyframes loader3 {
    0% {
        transform: scale(0, 0);
        opacity: 0.8;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

.hamburger-menu {
    cursor: pointer;
    position: absolute;
    right: 15px;
    display: none;
    z-index: 999;
    top: -15px;
}

.hamburger-menu span {
    background: #0B3E3A;
    width: 30px;
    height: 3px;
    display: block;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.hamburger-menu:hover .line-top {
    transform: translateY(-100%);
}

.hamburger-menu:hover .line-bottom {
    transform: translateY(100%);
}

.hamburger-menu:hover .line-top.current,
.hamburger-menu:hover .line-bottom.current {
    transform: 0;
}

.hamburger-menu .line-top.current {
    transform: translateY(200%) rotate(135deg);
}

.hamburger-menu .line-center.current {
    opacity: 0;
}

.hamburger-menu .line-bottom.current {
    transform: translateY(-325%) rotate(-135deg);
}

/*======================
   04. header area start
========================*/

header {
    position: fixed;
    height: 145px;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    transition: .3s;
    display: flex;
    align-items: center;
    background: #ffffff;
}

header.sticky {
    box-shadow: 1px 1px 28px rgba(0, 0, 0, 0.16);
}

.logo a {
    display: inline-block;
    text-align: center;
    font-size: 22px;
    color: #000000;
    font-weight: 500;
}

.mobile-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu li {
    position: relative;
    display: inline-block;
    color: #fff;
}

.menu li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 140px;
}

.menu li a {
    text-transform: capitalize;
    padding: 60px 17px;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #000000;
    transition: .3s;
}

.menu li:hover > a, .active {
    color: #eb4e65 !important;
}

.menu li a i {
    margin-left: 7px;
    font-size: 10px;
}

.sub-menu {
    width: 255px;
    position: absolute;
    text-align: left;
    background: #fff;
    padding: 0;
    border-radius: 4px;
    top: 150px;
    right: 11px;
    left: auto;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    border-top: 2px solid #eb4e65;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.19);
}

.sub-menu li {
    line-height: 45px !important;
    display: block !important;
}

.sub-menu li a {
    padding: 10px 17px !important;
    display: block;
    line-height: 30px !important;
    transition: .3s;
}

.mobile-menu .make-btn {
    margin-left: 17px;
}

/*======================
   05. home area start
========================*/

.home-wrapper {
    padding-top: 145px;
}

.home-wrapper img {
    height: 510px;
    -o-object-fit: cover;
       object-fit: cover;
}

/*======================
   06. story behind area start
========================*/

.story-behind-wrapper {
    padding: 50px 0 80px 0;
}

.story-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 235px;
}

.story-icon svg {
    width: 35px;
}

.story-icon p {
    color: #000000;
    font-weight: 500;
    margin-top: 5px;
}

.first-icon svg {
    fill: #990574;
}

.second-icon svg {
    fill: #2f5b6c;
}

.third-icon svg {
    fill: #27a80f;
}

.read-btn {
    color: #eb4e65;
    position: relative;
    display: inline-block;
}

.read-btn:hover {
    color: #eb4e65;
}

.read-btn:hover:before {
    width: 100%;
}

.read-btn:before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #eb4e65;
    transition: .3s;
}

/*======================
   07. episode area start
========================*/

.episode-wrapper {
    padding-bottom: 80px;
}

.episode-box {
    margin-left: 35px;
}

/*======================
   08. recent episodes area start
========================*/

.recent-episode-wrapper {
    padding-bottom: 80px;
}

.recent-episode-box {
    height: 100%;
}

.recent-episode-box p {
    color: #000000;
    padding-bottom: 20px;
}

/*======================
   09. meet host area start
========================*/

.meet-img {
    position: relative;
    padding: 30px 30px 0 0;
    overflow: hidden;
    z-index: 1;
    margin-top: 60px;
}

.meet-img::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 300px solid #eb4e65;
    border-left: 250px solid transparent;
    z-index: -1;
    top: 0;
    right: 0;
}

.meet-text {
    margin: 60px 0 0 50px;
}

.host-social a {
    width: 30px;
    height: 30px;
    background: #eb4e65;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50%;
    font-size: 13px;
    margin: 10px 10px 0 0;
    transition: .3s;
}

.host-social a:hover {
    background: #5C50CB;
}

.meet-text-two {
    margin: 60px 50px 0 0;
}

/*======================
   10. join area start
========================*/

.join-mail-wrapper {
    padding: 80px 0;
}

.join-wrap {
    background: linear-gradient(335deg, rgba(235,78,101,1) 0%, rgba(92,80,203,1) 100%);
    box-shadow: 0px 30px 80px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 60px 50px 50px 50px;
    transition: .5s;
}

.join-wrap .head-text {
    color: #ffffff;
}

.email-form {
    position: relative;
    width: 650px;
    margin: 30px auto auto auto;
}

.email-form input {
    width: 100%;
    height: 55px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 30px;
    padding: 0 155px 0 30px;
    color: #ffffff;
}

.email-form input::-moz-placeholder {
    color: #ffffff;
}

.email-form input::placeholder {
    color: #ffffff;
}

.email-form .make-btn {
    position: absolute;
    right: 4px;
    border: transparent;
    box-shadow: none;
    top: 4px;
    height: 86%;
    padding: 10px 40px;
    background: #172541;
}

/*======================
   11. footer area start
========================*/

.footer-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.23);
    padding-bottom: 25px;
}

.footer-nav {
    text-align: center;
}

.footer-nav li {
    display: inline-block;
}

.footer-nav li a {
    color: #000000;
    transition: .3s;
    margin: 0 15px;
}

.footer-nav li a:hover {
    color: #eb4e65;
}

.footer-social {
    text-align: end;
}

.footer-social a {
    margin-left: 15px;
}

.footer-social a svg {
    width: 17px;
    transition: .3s;
}

.footer-social a:hover svg {
    fill: #eb4e65;
}

.copyright-text {
    padding: 20px 0;
}

.copyright-text a {
    color: #eb4e65;
}

/*======================
   12. episode one area start
========================*/

.episode-one-wrapper {
    padding-top: 145px;
}

.episode-wrap {
    background: #ffffff;
    padding: 50px 0;
}

.episode-head {
    font-size: 30px;
    font-weight: 600;
}

.episode-bg {
    background: #ee4b60;
}

.episode-audio-box .story-flex {
    margin: 0;
}

.episode-audio-box {
    padding: 0 40px 0 40px;
}

.audio-box audio {
    width: 100%;
    margin-top: 25px;
    height: 45px;
}

.wrap-padd {
    padding: 20px 50px 40px 50px;
    border-bottom: 2px solid #000000;
}

.audio-sub-box .audio-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px;
    background: rgba(0, 0, 0, 0.37);
}

.audio-sub-box .audio-content h3 {
    font-size: 25px;
    color: #ffffff;
    margin-bottom: 20px;
}

.audio-sub-box .audio-content audio {
    height: 45px;
    width: 100%;
}

.episode-para-box p a {
    color: #000000;
    font-style: italic;
}

.youtube-box iframe {
    width: 100%;
    height: 360px;
    margin-top: 60px;
}

.wrap-padd-two {
    padding: 50px 50px 0px 50px;
}

.ul-box span {
    width: 5px;
    height: 5px;
    background: #000000;
    display: inline-block;
    border-radius: 50%;
    margin: 0 15px 0 0;
    transform: translateY(-2px);
}

.episode-social a, .link-para a {
    color: #000000;
    transition: .3s;
}

.episode-social a:hover, .link-para a:hover {
    color: #eb4e65;
}

.ul-box p a {
    color: #000000;
    transition: .3s;
}

.ul-box p a:hover {
    color: #eb4e65;
}

.previous-btn {
    margin: 40px 0 40px 50px;
    display: inline-block;
    color: #000000;
    transition: .3s;
}

.previous-btn:hover {
    color: #eb4e65;
}

.previous-btn i {
    margin-right: 10px;
}

/*======================
   13. leave comment area start
========================*/

.leave-comment-wrapper .episode-wrap {
    padding: 50px;
}

.textarea-info {
    height: 200px !important;
    resize: none;
    padding-top: 15px;
}

.input-info {
    width: 100%;
    height: 45px;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.30);
    padding-left: 20px;
    text-transform: capitalize;
    transition: .3s;
}

.input-info:focus {
    border: 1px solid #eb4e65;
}

.submit-btn {
    background: #eb4e65;
    border: transparent;
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 4px;
    transition: .3s;
    border: 1px solid transparent;
    margin-top: 30px;
}

.submit-btn:hover {
    background: transparent;
    border: 1px solid #eb4e65;
    color: #eb4e65;
}

/*======================
   14. return top area start
========================*/

.back-to-top {
    font-size: 12px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: none;
    position: fixed;
    bottom: 30px;
    right: 27px;
    z-index: 999;
    border-radius: 50%;
    background: #eb4e65;
    color: #ffffff;
}

.back-to-top:hover {
    color: #ffffff;
}