@font-face {
    font-family: Righteous-Regular;
    src: url(../fonts/Righteous/Righteous-Regular.ttf) format("truetype");
}

@font-face {
    font-family: Poppins-Regular;
    src: url(../fonts/Poppins/Poppins-Regular.ttf) format("truetype");
}

@font-face {
    font-family: Poppins-Medium;
    src: url(../fonts/Poppins/Poppins-Medium.ttf) format("truetype");
}

@font-face {
    font-family: Poppins-SemiBold;
    src: url(../fonts/Poppins/Poppins-SemiBold.ttf) format("truetype");
}

:root {
    --font-400: Poppins-Regular;
    --font-500: Poppins-Medium;
    --font-600: Poppins-SemiBold;
    --font-righteous: Righteous-Regular;

    --color-primary: #EE2058;
    --color-white: #fff;
    --color-black: #000;
    --color-E8E8E8: #E8E8E8;
    --color-A7AAB5: #A7AAB5;
    --color-E3E6F0: #E3E6F0;
    --color-bg2: #1e1e1e;
}
body{ width: 100%; position: relative; background: var(--color-bg2); }
html { font-size: 62.5%; scroll-behavior: smooth; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
*,*:before,*:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; }

/*-------------------------------------------- Reset --------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var, u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed, figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio, video { line-height: 1.5; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: var(--font-400); color: var(--color-white);}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
ul, ul li { list-style: none; margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; vertical-align: middle; }
select,button { cursor: pointer; outline: none; }
a:hover,a { text-decoration: none !important; color: var(--color-primary); }
svg,svg path {-webkit-transition: fill .3s, stroke .3s; -o-transition: fill .3s, stroke .3s; transition: fill .3s, stroke .3s; }
a:hover{ color: var(--color-primary);}
input:focus { box-shadow: none; outline: none; }
.img img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.img_block{ position: relative; padding-bottom: 100%; display: block;}
.img_block img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-position: center; object-fit: cover;}
.text-line{ display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.flex-row{ display: flex; align-items: center; justify-content: space-between; width: 100%;}
.flex-right{ margin-left: auto;}
.flex-left{ margin-right: auto;}
body{ position: relative;}

/*---------------------------------------------- CSS Header ------------------------------------------*/
header{ position: fixed; padding: 12px 0; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05); top: -1px; left: 0; width: 100%; background: var(--color-bg2); z-index: 999;}
.header-logo{ width: 64px; margin-right: 20px;}
.menu ul li{ padding: 0 21px; }
.menu ul li a{ text-transform: capitalize; font-weight: var(--font-500); font-size: 14px; color: var(--color-white)}
.header-btn{ background: var(--color-primary); font-size: 16px; padding: 14px 32px; border: none; border-radius: 6px; color: var(--color-white); border: 1px solid var(--color-primary);}
.header-btn:hover{ background: transparent; color: var(--color-primary);}
.overlay { position: fixed; visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: 4444; background: rgba(0, 0, 0, 0.5); -webkit-transition: 0.2s ease; transition: 0.2s ease; }
.overlay.overlay-active { opacity: 1; visibility: visible; }

#privacy-policy, #terms-of-service{ padding: 150px 0 80px 0; }
.privacy-policy .title, .terms-of-service .title{ font-family: var(--font-600); color: var(--color-white); font-size: 32px; margin-bottom: 40px;}
.privacy-policy .content, .terms-of-service .content{ word-break: break-all; }
/*-------------------------------- CSS Banner -------------------*/
.banner{ padding: 48px 0; margin-top: 88px; background-image: url("../images/bg-baner.png");  background-repeat: round; background-position: top; background-size: cover;}
.banner-content{ margin-bottom: -55px;}
.banner-item-left{ width: 35%; margin-left: -50px;}
.banner-item-right{ width: 65%; margin-right: -70px;}
.banner-item-content h3{ font-family: var(--font-600); font-size: 40px; margin-bottom: 40px}
.banner-item-content h3 .righteous{ font-family: var(--font-righteous); color: var(--color-primary); }
.banner-item-content-btn a{ margin-right:  16px;}
.etube-infor{ padding: 40px 150px; border-radius: 28px; background: linear-gradient(to bottom, #404657 0%, #404657 100%); }
.etube-infor-title{ margin-bottom: 32px; }
.etube-infor-title h2{ font-family: var(--font-600); font-size: 24px; margin-bottom: 16px; }
.etube-infor-title p{ font-size: 16px; }
.etube-infor .icon{ margin-right: 8.5px; }
.etube-infor .content{ font-family: var(--font-500); color: var(--color-E3E6F0);  }

/*------------------------------------------- Create your unique playlist ---------------------------------------*/
.playlist-infor, .podcast-infor{ padding-bottom: 32px; }
.playlist-infor-bg{ background-image: url("../images/create your unique playlist background.png"); }
.podcast-infor-bg{ background-image: url("../images/Find some Podcast Background.png"); }
.playlist-infor-bg, .podcast-infor-bg{
    background-repeat: round;
    background-position: inherit;
    border-radius: 20px;
    padding: 63px 0 23px 0;
    margin: 60px 0;
}
.playlist-infor-img .img{ width: 65%; top: -122px; left: 50%; transform: translateX(-50%); }
.podcast-infor-img .img{ width: 65%; top: -112px; left: 50%; transform: translateX(-50%); }
.playlist-infor-content{ padding-right: 100px; }
.podcast-infor-content{ padding-left: 100px; }
.playlist-infor-title, .podcast-infor-title{ margin-bottom: 24px; }
.playlist-infor-title h2, .podcast-infor-title h2{ font-family: var(--font-600); font-size: 24px; margin-bottom: 12px; }
.playlist-infor-ct, .podcast-infor-ct{ font-size: 16px; height: 75px;}
.playlist-infor-content button, .podcast-infor-content button{ border: none; border-radius: 4px; padding: 16px 32px; color: var(--color-primary); background-color: var(--color-white); border: 1px solid #fff; }
.playlist-infor-content button:hover,
 .podcast-infor-content button:hover{ background: transparent; color: #fff; }
.line-clamp{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.line-clamp-3{ -webkit-line-clamp: 3 !important; }
.line-clamp-1{ -webkit-line-clamp: 1 !important; }

/*------------------------------------------- Etube Featured Playlist ---------------------------------------*/
.playlist-list, .podcast-list{ margin-bottom: 48px; }
.playlist-list-title, .podcast-list-title{ margin-bottom: 16px; }
.playlist-list-title h2, .podcast-list-title h2{ font-family: var(--font-600); font-size: 24px; color: var(--color-E8E8E8); }
.playlist-list-item, .podcast-list-item{ width: 25%; padding: 0px 15px;}
.playlist-list-item-ct, .podcast-list-item-ct{ border-radius: 12px; overflow: hidden; }
.playlist-list-item-content, .podcast-list-item-content{position: absolute; width: 100%; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background: radial-gradient(241.86% 241.86% at 53.72% -58.25%, #404657 40%, rgba(64, 70, 87, 0) 100%); padding: 11px;}
.podcast-list-item-ct .img_block{ padding-bottom: 110%; }
.playlist-list-item-title, .podcast-list-item-title{ padding-bottom: 11px; border-bottom: 1px solid var(--color-A7AAB5); }
.playlist-list-item-title h2, .podcast-list-item-title h2{ font-family: var(--font-500); size: 16px; margin-bottom: 8px; height: 24px;}
.playlist-list-item-title p, .podcast-list-item-title p{ font-size: 13px; color: var(--color-A7AAB5); }
.playlist-list-item-action, .podcast-list-item-action{ padding-top: 11px; }
.playlist-list-item-action ul li, .podcast-list-item-action ul li{ margin-right: 15px; }
.playlist-list-item-bot, .podcast-list-item-bot{ position: relative; width: 100%; padding-bottom: 50%; margin-top: -40px;}


.flickity-prev-next-button.next{ width: 36px; height: 36px; right: 15px; top: -30px; background: transparent; border: 2px solid var(--color-primary);}
.flickity-prev-next-button.previous{ width: 36px; height: 36px; left: calc(100% - 100px); top: -30px; background: transparent; border: 2px solid var(--color-primary);}
.flickity-prev-next-button.next:hover,
.flickity-prev-next-button.previous:hover{ border: 2px solid #fff; }
.flickity-prev-next-button .flickity-button-icon{ color: var(--color-primary);}
.flickity-prev-next-button .flickity-button-icon:hover{ color: #fff;}
/*------------------------------------------- CSS explorer ---------------------------------------*/
.premium-feature{ margin-bottom: 48px; }
.premium-feature-bg{ background-image: url("../images/SUBSCRIPTION.png"); background-repeat: no-repeat; background-position: top; background-size: contain;}
.premium-feature-title{ text-align: center; width: 60%; margin: 0 auto; margin-top: 48px; }
.premium-feature-title h2{ font-family: var(--font-600); font-size: 44px; margin-bottom: 11px; }
.premium-feature-title p{ font-size: 15px; color: #BABABA; }
.premium-feature-content{ margin-top: 20px; align-items: stretch;}
.premium-feature-item { width: 30%; border-radius: 20px; border: 1px solid var(--color-primary); padding: 40px 20px; align-self: stretch;}
.premium-feature-header{ text-align: center }
.premium-feature-header .content{ margin-bottom: 30px; }
.premium-feature-header .title{ font-family: var(--font-500); color: var(--color-E8E8E8); margin-bottom: 8px; font-size: 20px; }
.premium-feature-header .content .price{ font-family: var(--font-600); color: var(--color-E8E8E8); font-size: 24px; }
.premium-feature-header .content .unit{ font-size: 13px; color: var(--color-E8E8E8); opacity: 0.5;}
.premium-feature-header .rule{ margin: 0 auto; width: 60%; height: 1px; background-color: #313131; }
.premium-feature-main{ margin: 30px 0; }
.premium-feature-main ul li{ margin-bottom: 20px; color: var(--color-E8E8E8); font-size: 16px;}
.premium-feature-main ul li .icon{ margin-right: 8px; margin-bottom: 5px;}
.premium-feature-footer{ margin-top: 18px; }
.premium-feature-footer button{ background: transparent;  border-radius: 10px; border: 1px solid var(--color-primary); padding: 16px 32px; color: var(--color-primary);  font-size: 16px; text-transform: uppercase;}
.premium-feature-footer button:hover{ background-color: #fff;}
.premium-feature-content .active{ background-color: var(--color-primary);}
.premium-feature-content .active .premium-feature-footer button{ background-color: #fff;}
.premium-feature-content .active .premium-feature-main ul li .icon path{ fill: #fff; }
.premium-feature-content .active .premium-feature-header .content .unit{ color: #fff;}
.premium-feature-content .active .premium-feature-header .rule{ background: #fff;}

/*------------------------------------------- CSS Footer ---------------------------------------*/
footer .footer{ background-color: #1F2129; padding: 33px 0 42px 0; }
.footer-infor{ width: 80%;}
.footer-logo{ width: 26px;}
.footer-title{ margin-bottom: 14px; font-size: 14px; color: var(--color-E8E8E8);}
.footer-title .title{ font-family: var(--font-600); font-size: 20px; margin-left: 3px; color: var(--color-white);}
.footer-item-content{ font-size: 13px; color: var(--color-A7AAB5);}
.footer-menu li{ margin-bottom: 9px;}
.footer-menu li a{ color: var(--color-A7AAB5);}
.footer-menu li a:hover{ color: var(--color-primary);}
.footer-social{ margin-top: 9px; }
.footer-social li{ margin-right: 12px; }
.footer-form{ margin-top: 14px; }
.footer-form .footer-input input{ width: 100%; padding: 10px 8px; font-size: 10px; color: #767676; background: #313131; border-radius: 10px; border: none; margin-bottom: 9px;}
.footer-form .footer-btn button{ width: 100%; border-radius: 10px; background-color: var(--color-primary); color: #fff; font-size: 12px; padding: 10px; border: 1px solid var(--color-primary);}
.footer-form .footer-btn button:hover{ background: transparent; color: var(--color-primary);}
.footer-bottom{ background-color: #151a27; padding: 18px; }
.footer-bottom h3{ font-size: 12px; color: #5B5C61; }


@media screen and (max-width: 1400px) {
    .header-btn{ padding: 12px 30px; font-size: 15px;}
    .banner{ background-size: contain; }
    .etube-infor{ padding: 40px 120px;}
    .banner-content{ margin-bottom: -38px;}
    .banner-item-left{ margin-left: -30px;}
    .banner-item-right{ margin-right: -50px;}
    .banner-item-content h3{ font-size: 36px; margin-bottom: 30px;}
    .playlist-infor-bg, .podcast-infor-bg{ padding: 50px 0 25px 0; margin: 50px 0;}
    .playlist-infor-img .img{ width: 70%; top: -95px;}
    .podcast-infor-img .img{ width: 70%; top: -85px;}
    .premium-feature-footer button{ padding: 12px 28px;}
    .flickity-prev-next-button.previous,
    .flickity-prev-next-button.next{ width: 32px; height: 32px; }
    .flickity-prev-next-button.previous{ left: calc(100% - 90px);}
    #privacy-policy, #terms-of-service{ padding: 120px 0 60px 0; }
    .privacy-policy .title, .terms-of-service .title{ font-size: 30px; margin-bottom: 40px;}
}

@media screen and (max-width: 1200px) {
    .etube-infor{ padding: 35px 60px;}
    .etube-infor-title h2{ margin-bottom: 12px;}
    .banner-item-content h3{ font-size: 32px;}
    .banner-item-left{ width: 40%; }
    .banner-item-right{ width: 60%;}
    .banner-content{ margin-bottom: -30px;}
    .playlist-infor-content{ padding-right: 50px;}
    .podcast-infor-content{ padding-left: 50px;}
    .playlist-infor-content button, .podcast-infor-content button{ padding: 12px 28px;}
    .playlist-infor-bg, .podcast-infor-bg{ margin: 30px 0;}
    .podcast-infor-img .img{ width: 80%; top: -78px;}
    .playlist-infor-img .img{ width: 80%; top: -88px;}
    .playlist-list-item, .podcast-list-item{ width: calc(100% / 3);}
    .premium-feature-item{ width: 32%;}
    .premium-feature-item{ padding: 30px 20px;}
    .etube-infor-title h2{ font-size: 22px;}
    #privacy-policy, #terms-of-service{ padding: 100px 0 40px 0; }
    .privacy-policy .title, .terms-of-service .title{ font-size: 28px; margin-bottom: 35px;}
}


@media screen and (max-width: 992px) {
    .banner-item-left{ width: 45%; margin-left: 0;}
    .banner-item-right{ width: 55%; margin-right: -30px;}
    .etube-infor{ padding: 25px 40px;}
    .banner-content{ margin-bottom: -22px;}
    .banner-item-content h3{ font-size: 28px; margin-bottom: 20px;}
    .etube-infor-title h2{ font-size: 20px;}
    .playlist-infor-title h2, .podcast-infor-title h2{ font-size: 22px;}
    .playlist-infor-bg, .podcast-infor-bg{ padding: 30px 0;}
    .playlist-infor-img .img{ top: -20px; width: 90%;}
    .podcast-infor-img .img{ top: -10px; width: 90%;}
    .playlist-infor-content button, .podcast-infor-content button{ padding: 10px 25px;}
    .playlist-list-title h2, .podcast-list-title h2{ font-size: 22px;}
    .flickity-prev-next-button.previous, .flickity-prev-next-button.next{ width: 30px; height: 30px;}
    .playlist-list-item-bot, .podcast-list-item-bot{ padding-bottom: 70%;}
    .premium-feature-title{ width: 80%;}
    .premium-feature-title h2{ font-size: 40px;}
    .premium-feature-item{ width: 48%; margin-bottom: 25px;}
    .premium-feature-content{ flex-wrap: wrap;}
    .footer-title .title{ font-size: 16px;}
    .premium-feature-header .content .price{ font-size: 22px;}
    .privacy-policy .title, .terms-of-service .title{ font-size: 26px; margin-bottom: 30px;}
    #privacy-policy, #terms-of-service{ padding: 100px 0 40px 0; }
}

@media screen and (max-width: 768px) {
    .header-logo{ margin-right: 10px;}
    .menu ul li{ padding: 0 15px;}
    .header-btn{ padding: 10px 20px; font-size: 14px;}
    .banner{ margin-top: 70px;}
    .banner-item-content h3{ font-size: 22px;}
    .banner-item-left{ width: 50%; }
    .banner-item-right{ width: 50%;}
    .banner-content{ margin-bottom: 0;}
    .etube-infor{ padding: 20px 30px;}
    .etube-infor-title h2{ font-size: 18px;}
    .etube-infor-title p{ font-size: 14px;}
    .etube-infor-title{ margin-bottom: 25px;}
    .etube-infor ul li{ margin-bottom: 5px;}
    .etube-infor .content{ font-size: 14px;}
    .playlist-infor-img, .podcast-infor-img{ padding-bottom: 70%;}
    .playlist-infor-img .img, .podcast-infor-img .img{ width: 70%;}
    .podcast-infor-content, .playlist-infor-content{ padding: 0 35px;}
    .podcast-infor-img .img{ top: 40px;}
    .playlist-list-item, .podcast-list-item{ width: 50%;}
    .premium-feature-title{ width: 90%;}
    .footer-infor { margin-bottom: 25px; width: 100%;} 
    footer .footer{ padding: 30px 0 20px 0;}
    .banner{ padding: 48px 0 20px 0;}
    .playlist-infor, .podcast-infor{ padding-bottom: 10px;}
    .premium-feature-title h2{ font-size: 36px; }
    .premium-feature-title p{ font-size: 14px;}
    .premium-feature-footer button{ padding: 10px 18px; font-size: 14px;}
    #privacy-policy, #terms-of-service{ padding: 100px 0 30px 0; }
}

@media screen and (max-width: 576px) {
    .playlist-list-item-title h2, .podcast-list-item-title h2{ font-size: 14px;}
    .premium-feature-title h2{ font-size: 32px; }
    .premium-feature-title p{ font-size: 12px;}
    .premium-feature-main ul li{ font-size: 14px;}
    .playlist-list-item-bot, .podcast-list-item-bot{ padding-bottom: 80%;}
    .privacy-policy .content, .terms-of-service .content{ font-size: 14px; }
}

@media screen and (max-width: 500px) {
    .banner{ background-repeat: no-repeat; }
    .banner-content{ margin-bottom: 30px;}
    .banner-item-right{ margin-right: 0;}
    .premium-feature-item{ width: 100%;}
    .premium-feature-item{ padding: 30px 40px;}
    .banner-item-content-btn a{ margin-right: 8px;}
    .banner-item-content h3{ font-size: 20px;}
    .etube-infor{ padding: 15px;}
    .etube-infor-title h2{ font-size: 16px;}
    .playlist-infor-title h2, .podcast-infor-title h2 { font-size: 16px;}
    .playlist-list-title h2, .podcast-list-title h2 { font-size: 18px;}
    .etube-infor .content, .etube-infor-title p{ font-size: 12px;}
    .playlist-infor-ct, .podcast-infor-ct{ font-size: 12px; }
    .playlist-infor-content button, .podcast-infor-content button{ padding: 8px 12px; font-size: 12px}
    .header-logo{ width: 50px; margin-right: 0px;}
    .menu ul li{ padding: 0 10px;}
    .menu ul li a{ font-size: 12px;}
    .header-btn{ padding: 6px 10px; font-size: 11px;}
}

@media screen and (max-width: 400px) {
    .playlist-list-item-bot, .podcast-list-item-bot{ padding-bottom: 100%;}
}