/* General */

.kanit-regular {
    font-family: "Kanit", serif;
    font-weight: 100;
    font-style: normal;
  }

body{
    background-color: black;
    /* font-family: "Kanit", serif; */
    font-family: "CenturyGothic";
    font-size: 16px;
    /* font-weight: 200; */
    color: rgb(208 208 208);
}

@font-face {
    font-family: "CenturyGothic";
    src: url(./fonts/CenturyGothicPaneuropeanRegular.ttf);
}

@font-face {
    font-family: "CenturyGothic Bold";
    src: url(./fonts/CenturyGothicPaneuropeanBold.ttf);
}

@font-face {
    font-family: "CenturyGothic SemiBold";
    src: url(./fonts/CenturyGothicPaneuropeanSemiBold.ttf);
}

strong{
    font-family: "CenturyGothic Bold" !important;
}



#content{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 22
}

.material-symbols-outlined {
    font-size: 22px;
}

.modal{
    --bs-modal-border-radius: 10px !important;
}

.modal-dialog{
    /* max-width: 375px !important; */
}

.modal-content{
    box-shadow: 0px 0px 15px 3px rgba(0,153,199,0.85);
    background-color: black;
}

h1.modal-title{
    font-weight: 100;
    font-size: 18px !important;
    /* color: rgb(54, 54, 54); */
    font-weight: bolder;
}

.modal-header{
    border-bottom: 0;
    color: #f1f1f1;
}

/* .modal-header .btn-close {
    background-color: #999 !important;
    --bs-btn-close-bg: none !important;
} */

.sFrame{
    width: 40%;
    height: 560px;
    border-radius: 10px;
    margin-left: 20px;
}

.sDescription{
    width: 60%;
    padding: 0px 20px 10px 35px;
}

.btn-close{
    /* --bs-btn-close-bg: url('../images/icons/x-square-fill.svg') !important; */
    color: white;
    -bs-btn-close-hover-opacity: none;
    -bs-btn-close-color: rgb(255, 255, 255, 1) !important;
    background-color: #999 !important;
}

.btn-close {
    --bs-btn-close-color: #ababab !important; /* Apply your color */
  }

  /* Optional: Customize the color on hover */
  .btn-close:hover {
    --bs-btn-close-color: #ffffff !important; /* Change to green on hover */
  }

/* Nav */

.bg-body-tertiary {
    background-color: rgb(0, 0, 0, 0.85) !important;
    /* opacity: 0.85; */
    /* padding: 30px; */
}

.nav-item{
    margin:0 !important;
    padding: 0 !important;
}

.nav-link{
    color: white !important;
    padding: 0 0px !important;
    margin: 0 15px !important;
    transition: width 0s;
    border-bottom: 1px solid transparent;
}

.sc-dropdown{
    position:relative;
    border: 1px solid white;
    cursor: pointer;
}

.sc-menu{
    display:none;
    position: absolute;
    top: 26px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.95);
    color: white;
    font-size: 14px;
    width: 605px;
    opacity: 1;
    /* z-index: -1; */
    border: 1px solid rgb(52, 52, 52)
}

.sc-menu ul{
    display: flex;
    padding: 0;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: flex-start;
    align-items: stretch;
    max-height: 370px;
}

.sc-menu li{
    max-width: 150px;
    line-height: 14px;
    list-style-type: none;
    padding: 6px 5px;
}

.sc-menu li a{
    color: white;
    text-decoration: none;
    font-size: 13px;
}

.sc-menu li a:hover{
    text-decoration: underline;
}

.sc-menu-item{
    cursor: pointer;
}

.sc-menu-item:hover{
    text-decoration: underline;
}

.nav-link:hover{
    border-bottom: 1px solid rgb(178, 178, 178) !important;
    /* text-shadow: 0px 0px 7px 2px rgba(0,153,199,0.72); */
    text-shadow: rgba(0,153,199,0.9) 0px 0px 25px;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: white;
}

.navbar-expand-lg .navbar-collapse {
    justify-content: space-between;
}

.logo{
    height: 90px;
}

.searchBar{
    background-color: black;
    border: 1px solid darkgray;
    border-radius: 0;
}


/* Banner */
.banner{
    position: relative !important;
    flex-grow: 0;
    height: 65vh;
    background-color: black;
    /* background-image: url(../images/banner.png); */
    background-size: cover;
    background-position: bottom center;
    /* background-position: center center; */
}

#AISearch iframe {
    border-radius: 15px;
    box-shadow: 0px 0px 15px 5px rgba(0,153,199,0.85);
}

.banner h2{
    color: white;
    margin-right: 22%;
    margin-top: 40px;
    /* font-family: "Kanit", serif; */
    font-weight: 200;
    font-size: 42px;
    /* text-shadow: rgba(0,153,199,1) 0px 0px 22px; */
}

.banner h2 span{
    color: #0098C7;
    display: block;
}

.banner h2 p{
    font-size: 16px;
    color: whitesmoke;
}

.health{
    position: absolute;
    right: 0;
    bottom: 33%;
}

.region{
    width: 20px;
}

/* Main content */

.main{
    flex-grow:1;
    margin-top: 150px;
}

.vision h1{
    font-family: "Kanit", serif;
    font-weight: 250;
    font-size: 25px;
    color: rgb(208 208 208);
    line-height: 30px;
}

.searchContainer{
    
}

#search{
    width: 70%;
    border-radius: 0 !important;
    padding: 20px;
}

.aisContainer{
    width: 45%;
    position: relative;
}

.aisContainerP{
    position: relative;
}

.aisContainer p{
    color: white;
}

#AISearch{
   height: 325px;
    /* padding: 15px; */
    /* padding-bottom: 48px; */
    border-radius: 15px;
}

.aiDisclaimer{
    margin-top: 10px;
    width: 45%;
    color: rgb(193, 192, 192);
}

#btnAISearch{
    border-radius: 50%;
    border: 0;
    background-color: #0098C7;
}

#btnAISearch:hover{
    background-color: #29b9e5;
}

#btnAddAIInput{
    font-size: 15px;
    border-radius: 50%;
    border: 1px solid lightgray;
    background-color: transparent;
    color: lightgray;
}

.form-floating>label {
    transition: none !important;
    color: rgb(150,150,150);
    font-size: 12px;
}

.dropup .dropdown-toggle::after { 
    content: "+"
}

/* Videos */
.ytContainer{
    position: relative;
    margin-top: 20px;
}

.trendingCategories{
    display: flex;
}

.trendingCategoriesDD{
    display: none;
}

.tCategory{
    margin: 5px;
    border: 1px solid darkgray;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 11.5px;
    cursor: pointer;
}

.tCategory:hover{
    background-color:  #0098C7;
    color: white;
}

.selected{
    background-color:  #046685;
}

.iShort{
    width: 225px;
    height: 400px;
    border-radius: 10px;
    cursor: pointer;
}

.iShort:hover{
    box-shadow: 0px 0px 15px 5px rgba(0,153,199,0.85);
}
/* .ytContainer img.play{
    position:absolute;
    top: 30%;
    left: 50%;
    zoom: 150%;
    background-color: black;
    opacity: 0.7;
    border-radius: 50%;
    cursor: pointer;
    display: none;
} */

.thumbnail{
    width:100%; 
    min-height: 72%;
    max-height: 172px; 
    background-size: cover; 
    background-position: center center;
    cursor: pointer
    /* box-shadow: 0px 0px 12px 3px rgba(0,153,199,0.69); */
}

.top5Thumbnail{
    width:100%; 
    min-height: 72%;
    max-height: 125px; 
    background-size: cover; 
    background-position: center center;
    cursor: pointer
}

.thumbnail:hover, .top5TN:hover{
    box-shadow: 0px 0px 15px 5px rgba(0,153,199,0.85);
}

.videos{
    /* margin-left: -10px; */
}

.top5Container{
    
}

.top5Container .top5{
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    /* min-height: 235px; */
    width: 270px;
    display: flex;
    justify-content: flex-end;
    /* margin-right: 10px; */
}

.top5Container .top5 img{
    height: 235px;
}

/* .top5Container{
    flex-wrap: wrap;
} */

.top5Podcast{
    margin: 45px;
    position: relative;
    min-width: 225px;
    flex-shrink: 0;
    cursor: pointer;
}

.t5{
    background-size: contain;
    background-position: 0px center;
    background-repeat: no-repeat;
    /* min-height: 232px; */
    width: 285px;
    border: 1px solid white;
    display: flex;
    justify-content: flex-end;
    /* padding-left: 319px;*/
}

.t5 img{
    height: 250px;
}

.top5Podcast .rank{
    position: absolute;
    top: 5px;
    left: 15px;
    font-size: 25px;
    border: 1px solid gray;
    border-radius: 50%;
    background-color: rgb(189, 4, 4, 0.7);
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3px;
}

.top5Podcast:first-child{
    margin-left: 0px;
}

.top5Podcast img{
    /* max-width: 170px; */
}

ul.vicons{
    padding: 5px 0;
}

ul.vicons li{
    list-style-type: none;
    display: inline-block;
}

.btnPreview{
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    padding: 2px 5px;
    display: inline-block;
    /* padding-right: 10px; */
    cursor: pointer;
}

.btnPreview:hover{
    background-color: #2b2b2b;
    border-color: #7e7e7e;
}

.btnPreview img{
    height: 25px;
}

.btnPreview span{
    margin-top: 5px;
    font-size: 13px;
}

.drHeadshot{
    /* max-height: 250px; */
    width: 100%;
}

#cv{
    font-size: 16px;
}

p.website{
    display: none;
}



/* .btnPreview img{
    margin-top: 1px;
} */

.ytContainer a{
    color: rgb(208 208 208);
    text-decoration: none;
}

.ytContainer .thumbnail:hover::after{
    content: "\25B6";
    position:absolute;
    top: 25%;
    left: 40%;
    zoom: 250%;
    width: 25px;
    /* background-color: black; */
    /* opacity: 0.7; */
    /* border-radius: 50%; */
    cursor: pointer;
    z-index: 1000;
    background: transparent url(../images/icons/play-blue.svg) no-repeat center;
    pointer-events: none;
    display: block; 
    color: rgba(0,153,199,0);

    /* color: white;
content: "\25B6";
opacity: 0.5;
position: absolute;
text-shadow: 0 3px black;
z-index: 100;
    font-size:50px;
    position:absolute;
    left:220px;
    top:150px; */
}

.podcastTN{
    width: 300px;
    margin: 15px;
}

.ytContainer .podcastDescription{
    margin-top: 5px;
    width:100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* background:#fff;  */
    font-size: 13px;
}

.tcDescription{
        /* margin-top: 5px; */
        width: 250px;
        /* overflow: hidden; */
        /* display: -webkit-box; */
        /* -webkit-line-clamp: 2; */
        /* -webkit-box-orient: vertical; */
        /* background: #fff; */
        padding-left: 24px;
        font-size: 14px;
}

.spotify{
    padding: 20px;
}



.allEpisodes{
    padding: 7px 13px;
    border: 1px solid white;
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 20px;
}



.videos h2{
    font-weight: 300;
    font-size: 20px;
}

/* Footer */

footer{
    flex-grow: 0;
}

footer h3{
    font-weight: 200;
    font-size: 20px;
}

footer ul{
    padding: 0;
   
}

footer ul.social{
    text-align: center;
}

footer ul.social li{
    display: inline;
    margin: 0 7px;
}

footer ul.social li img{
    height: 30px;
    margin-top: 15px;
}

footer ul li{
    list-style-type: none;
}

footer a{
    text-decoration: none;
    color: rgba(0,153,199,0.85);
}

footer a:hover{
    text-decoration: underline;
}

#cookie-msg{
    /* background-color: #565656 !important; */
    background-color: rgb(19, 19, 19) !important;
    font-size: 14px;
    color: white;
}

#cookie-msg a{
    text-decoration: none !important;
    color: rgba(0, 153, 199, 0.85) !important;
}

#cookie-msg a.btn-aceptar{
    background-color: rgba(0, 153, 199, 0.85) !important;
    font-size: 11px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width:1380px){
    .banner h2{
        margin-right: 7%;
    }

    .banner{
        /* background-position: -650px 0; */
    }
}

@media (max-width: 895px){
    .banner h2{
        margin-right: 20px;
        font-size: 35px;
    }
    .iShort{
        width: 225px;
        height: 400px;
    }
}

@media (max-width: 992px){ 

    .trendingCategories{
        display: none;
    }

    .trendingCategoriesDD{
        display: block;
        font-size: 13px;
        padding: 5px;
        background-color: black;
        color: white;
    }

    .aisContainer{
        width: 70%;
    }

    .aiDisclaimer{
        width: 70%;
    }

    

}

@media (max-width: 768px){ 

    .banner h2 {
        margin-right: 75px;
        font-size: 35px;
    }

    #notifications{
        display: none;
    }


    .aisContainer{
        width: 90%;
    }

    .aiDisclaimer{
        width: 90%;
    }

    .iShort{
        width: 180px;
        height: 320px;
    }

}

@media (max-width: 576px){ 

    #notifications{
        display: none;
    }

    .sc-menu ul{
        align-content: flex-start;
        min-height: 620px;
    }

    .thumbnail{
        max-height: none !important;
        /* height: 270px !important; */
    }

    .top5Thumbnail{
        height: auto !important;
        width: 100% !important;
        max-height: auto !important;
    }

    .top5Podcast{
        width: 100% !important;
    }

    .banner{
        background-position: 34%;
    }

    .banner h2{
        /* margin-top: 185px; */
        margin-right: 20px;
        font-size: 25px;
        text-shadow: 0px 0px 3px #2E9DCE;
    }

}