/* Spirit Lens Styles */

/* ---------------------------------------------------- */
/* 1. COLOR PALETTE DEFINITIONS */
/* ---------------------------------------------------- */
:root {
    --color-primary-teal: #005662; /* Deep Teal */
    --color-secondary-gold: #FFD700; /* Soft Gold/Amber */
    --color-accent-terracotta: #cc5500; /* Muted Terracotta/Orange */
    --color-text-dark: #333333; /* Dark Gray for main text */
    --color-text-light: #ffffff; /* Off-White for headers/buttons */
    --color-background-light: #f7f7f7; /* Off-White/Light Gray for content */
    --color-background-dark: #004d58; /* Slightly darker teal for menus */
    --border-radius-base: 8px;
}

/* Reset Body and Main Containers  */
body {
	margin:0px;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    font-family: sans-serif; /* Use a clean, readable font */
}

/*body{margin:0px;background:#fff;background-imagek: linear-gradient(to right, #8a0d55 , #FF76C3);}*/

.div_ad
{
float:left;width:96%;height:300px;margin-left:2%;margin-bottom:20px;display:none;
}
.main_home_div
{
float:left;width:100%;height:60px;position:fixed;z-index:9;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
   background-color: var(--color-primary-teal);
   color: var(--color-text-light);

}
.positioning_div{float:left;width:100%;height:60px;margin-bottom:20px;background:purple;}
.main_header_div
{
float:left;width:98%;height:60px;margin-left:1%;backgroundk:red;
}
.coblaa_log_img
{
float:left;width:40px;height:40px;margin-top:10px;margin-leftk:2%;border-radius:50%;
}
.main_home_title
{
/*float:left;max-width:40%;height:40px;line-height:40px;margin-left:5%;font-size:1.2em;font-weight:bold;color:#000;backgroundk:pink;*/	
    color: var(--color-text-light);
	width:40%;
	height:40px;
	line-height:40px;
    font-size: 1.5em;
    font-weight: 600;
    margin: 10px;
	float:left;
    flex-grow: 1; /* Pushes the icons to the right  */
    padding-left: 10px;
	backgroundk:#000;

}
.sitat_sear_icon
{
float:right;width:40px;height:40px;margin-top:10px;margin-right:4%;
}
.menu_icon
{
float:right;width:40px;height:40px;margin-top:10px;margin-rightk:10px;	
}
.notfi_count
{
float:right;width:50px;height:30px;line-height:30px;margin-top:-40px;background:#fff;text-align:center;font-weight:bold;color:red;border-radius:50%;
cursor:pointer;
}
.disp_notf_span
{
float:right;width:60px;height:40px;margin-right:3%;margin-top:10px;display:none;	
}
.notf_icon
{
float:right;width:40px;height:40px;margin-right:4%;
}



        /* Custom styles for the video player  *k/
        body {
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            min-height: 100vh;
            background-color: #1a202c;
            color: white;
            padding: 1rem;
			margin:0;
        }*/
		.middleContainer
			{
			width:900px;

            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
	
		}
     .play_div
		{
			width:100%;
			height:100%;
			
	
	
		}
	
        .video-container {
            positionk: relative;
            width: 100%;
            aspect-ratiok: 16 / 9;
			max-heightk:90vh;
			background:#000;

   

        }
   
     	   #videoPlayer {
            max-width: 99.374%;
            max-height: 300px;

        }

        .controls-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
            padding: 1rem;
            opacity: 0;
            transition: opacity 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .video-container:hover .controls-overlay,
        .video-container.playing .controls-overlay {
            opacity: 1;
        }

        .progress-bar-container {
            width: 100%;
            height: 8px;
            background-color: rgba(255, 118, 195, 0.2);
            border-radius: 9999px;
            cursor: pointer;
        }

        .progress-bar {
            height: 100%;
            background-color: #FF76C3;
            border-radius: 9999px;
            transition: width 0.1s linear;
        }
        
        .controls-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .control-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            color: #FF76C3;
            transition: transform 0.2s ease;
        }

        .control-button:hover {
            transform: scale(1.1);
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .volume-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 60px;
            height: 4px;
            background: rgba(255, 118, 195, 0.5);
            outline: none;
            border-radius: 9999px;
            cursor: pointer;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            background: #FF76C3;
            border-radius: 50%;
            cursor: pointer;
        }

        .volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: #FF76C3;
            border-radius: 50%;
            cursor: pointer;
        }

        .icon {
            width: 24px;
            height: 24px;
            fill: #FF76C3;
        }

        /* Fullscreen styles */
        .video-container.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            max-width: unset;
        }

.main_search_div
{
float:right;width:70%;height:40px;margin-right:5%;margin-top:10px;background:#fff;border-radius:20px;display:none;
border:1px solid #ededed;
}
.ser_input
{
float:left;width:80%;height:35px;line-height:40px;backgroundk:#fcf6fb;text-align:center;border:0px;outline:none;font-size:1em;
}
.clear_main_ser_btn
{
float:left;width:40px;height:40px;background:#fff;border-radius:20px 0 0 20px;border:0px;outline:none;cursor:pointer;font-size:1.1em;font-weightk:bold;		
}
.main_ser_btn
{
float:right;width:40px;height:40px;background:#fff;border-radius:0 20px 20px 0;border:0px;outline:none;cursor:pointer;font-size:1.1em;font-weightk:bold;		
}
.search_result
{
float:right;width:70%;min-height:100px;max-height:500px;margin-right:5%;margin-top:5px;background:#fff;border-bottom:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;
border-radius:10px;display:none;overflow:auto;
}
.song_title_search
{
float:left;width:100%;height:40px;line-height:40px;text-align:center;border-bottom:1px solid #ccc;cursor:pointer;color:#000;
}
.art_name_search
{
float:left;width:50%;height:40px;line-height:40px;border-bottom:1px solid #ccc;cursor:pointer;	
}

.menu_shell_div
{
float:right;min-widthk:160px;width:180px;heightk:100%;margin-top:60px;position:fixed;right:0px;background:#fff;border-radius:0 0 10px 10px;borderk: 1px solid #ccc;
display:none;z-index:2;
}
.menu_div
{
float:right;width:100%;height:100%;backgroundk:#fff;border-right:1px solid #ccc;overflow:auto;
 background-color: var(--color-background-dark); /* Slightly darker teal */
    color: var(--color-text-light);
	
}
.menu_clocing_div{display:none;}
.menu_btn
{
/*float:left;width:90%;height:40px;margin-left:6%;margin-top:20px;cursor:pointer;outline:none;
border-radius:20px;color:#000;*/
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: var(--color-text-light);
    text-decoration: none;
    transition: background-color 0.2s;
	
}
.menu_btn_icon
{
float:left;width:35px;height:35px;
}
.menu_btn_lebal
{
/*float:left;widthk:70%;height:40px;margin-left:3%;font-weight:bold;background:transparent;border:0px solid #ccc;outline:none;color:#505252;font-size:0.8em;
cursor:pointer;)*/	
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: 1em;
    margin-left: 15px;
    text-align: left;
    cursor: pointer;
	font-weight:600;
}
.menu_btn_lebal:hover
{
/*font-size:0.9em;color:#800000;*/
background-color: rgba(255, 255, 255, 0.1);
}

.profile_div
{
float:left;width:100%;height:70px;backgroundk:red;border-bottom:1px solid #ccc;	
}
.profile_usr_name
{
float:left;width:50%;height:70px;line-height:70px;margin-left:2%;color:#505252;font-weight:bold;
}
.profile_img
{
float:left;width:40px;height:40px;margin-top:15px;margin-left:2%;border-radius:50%;
}

.main_header_title
{
/*float:right;width:98%;height:40px;line-height:40px;margin-leftk:3%;margin-bottom:10px;margin-top:30px;color:#2D198A;font-size:2em;font-family: serif;font-weight:bold;
border-radius:10px 10px 0 0;*/
   font-size: 1.8em;
    color: var(--color-primary-teal);
    text-align: center;
    margin-bottom: 25px;
	backgroun:red;
}


.content_div
{
float:left;width:98%;min-height:70%;margin-left:1%;backgroundk:yellow;

}

/* HERO FEATURED VIDEO STYLING */
.sl-hero-feature-div {
	width:100%;
	max-heightk:50vh;
    margin-bottom: 30px;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
}

.sl-hero-video-placeholder {
    width: 100%;
	height:60vh;
    positionk: relative;
    padding-topk: 16.25%; /* 16:9 Aspect Ratio */
}

.sl-hero-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    color: var(--color-text-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.sl-hero-title {
    font-size: 1.2em;
    font-weight: 600;
}

.sl-cta-btn {
    background-color: var(--color-accent-terracotta); /* Terracotta CTA */
    color: var(--color-text-light);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sl-cta-btn:hover {
    background-color: #e56011;
}
.select_faith_div
{
float:left;width:90%;height:50px;line-height:50px;margin-left:5%;margin-bottom:40px;text-align:center;border-radius:50px;cursor:pointer;background:purple;color:#fff;	
font-weight:bold;
}
.shell_select_faith_div
{
float:left;width:100%;height:100vh;position:fixed;backgroundk:red;
display:flex;justify-content:center;align-items:center;display:none;	
background-color: rgba(105, 0, 0, 0.5);
}
.sub_select_faith
{
width:40%;height:50px;line-height:50px;cursor:pointer;font-size:1.1em;text-align:center;background:#fff;border-radius:10px 10px 0 0;color:#27A6F5;	
}
.faith_saveBtn
{
width:50px;height:50px;margin-left:1%;border-radius:20px;cursor:pointer;border:0px;outline:none;background:#fff;font-size:0.8em;font-weight:500;color:green;	
}
.faith_closeBtn{
width:50px;height:50px;margin-right:1%;border-radius:20px;cursor:pointer;border:0px;outline:none;background:#fff;font-size:0.8em;font-weight:500;color:red;
	
}

.faith_closeBtn{}
/* TRENDIN STYLING */ 
.trending_div
{
float:left;width:100%;height:335px;margin-bottom:30px;background: var(--color-background-dark);
display:flex;justify-content:space-around;overflow-x:auto;
}
.title_trending
{
            color: #333;
            font-size: 1.8rem;
            font-weight: 600;
            margin: 30px 10 15px;
            border-left: 4px solid var(--color-secondary);
            padding-left: 10px;
}
.single_trendingDiv
{
float:left;width:320px;height:260px;margin-left:10px;margin-top:35px;background:#fff;margin-right:10px;border-radius:20px;

}
.single_trendingDiv:hover{border:2px solid #FFD700;	}
.single_trendingImg
{
float:left;max-width:100%;height:200px;border-radius:20px 20px 0 0;	
}
.single_trendingLebal
{
float:left;width:98%;height:20px;line-height:20px;margin-top:5px;margin-left:1%;text-align:center;color:#333;font-weight:600;font-family:sans-serif;font-size:1.02em;
 white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;	
   background-colork: rgba(0, 00, 00, 0.5);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

/* FAITH TABS STYLING */ 
 .sl-section-title {
            color: #006064;
            font-size: 1.8rem;
            font-weight: 600;
            margin: 30px 10 15px;
            border-left: 4px solid var(--color-secondary);
            padding-left: 10px;
			text-align:left;
        }
.sl-faith-toggles-container {
	width:90%;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 20px;
    padding-bottom: 5px; /* space for scroll bar */
}

.sl-faith-btn {
    background-color: var(--color-background-light);
    color: #006064;
    border: 2px solid #006064;
    padding: 8px 15px;
    margin-right: 10px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sl-faith-btn--active {
    background-color: var(--color-secondary-gold); /* Soft Gold Active */
    color: var(--color-primary-teal);
    border-color: var(--color-secondary-gold);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trend_play_icon_img
{
float:right;width:30px;height:30px;margin-right:3%;margin-right:10px;cursor:pointer;		
}
.trend_song_title
{
float:left;width:96%;height:30px;line-height:30px;margin-left:2%;margin-bottomk:6px;font-size:1em;text-alignk:center;font-weightk:bold;color:#151517;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;backgroundk:red;font-weight:600;
}
.trend_song_artis
{
float:left;width:94%;height:30px;line-height:25px;margin-left:2%;font-size:0.9em;text-alignk:center;font-weight:bold;color:#d62d89;		
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;backgroundk:purple;
}
.card_div
{
float:left;width:100%;height:auto;margin-bottom:30px;margin-topk:0px;backgroundk:#000;border-radius:10px;
  display: flex;
  flex-wrap: wrap;
justify-content: space-around;
   
}
.single_trend_div
{
float:left;width:19%;height:280px;margin-bottom:15px;margin-top:15px;margin-leftk:1.2%;border-radius:10px;text-decoration:none;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;background:#fff;
}
.single_trend_div:hover{border:1px solid #acfa79;background:#ededed;}
.single_trend_div:active{border:1px solid #fa6388;}
.trend_img_div
{
float:left;width:100%;height:200px;margin-leftk:1%;display:flex;justify-content:center;align-items:center;border-radius:10px 10px 0 0;background:#000;
}
.trend_img
{
float:left; max-width:99%;height:99%;border-radius:10px 10px 0 0;
}
.play_icon_span
{
float:right;width:45px;height:45px;margin-top:-100px;margin-right:40%;border-radius:50%;display:flex;justify-content:center;align-items:center;		
background-image: linear-gradient(to right, #fff, #fff);
}
.play_icon_span:hover{background-image: linear-gradient(to right, #FF76C3, #DAF7A6);}
.play_icon
{
width:20px;height:20px;
}

.com_icon
{
float:right;width:30px;height:30px;margin-top:5px;margin-right:1%;
}
.comt_output
{
float:right;height:30px;line-height:30px;margin-top:5px;margin-right:1%;	
}
.view_output
{
float:left;height:40px;line-height:40px;margin-left:1%;margin-top:5px;
}
.single_view_div
{
float:left;width:100%;height:40px;line-heightk:50px;backgroundk:#A9EBC3;border-top:1px solid #ededed;
color:#F54927;font-size:0.8em;
}

.cb_preloader
{
width:100%;height:100vh;position:fixed;z-index:100;display:flex;justify-content:center;align-items:center;
background-imagek: linear-gradient(to right, #8a0d55 , #FF76C3);background:#005662;	
}
.cb_preloader_img
{
width:200px;height:200px;border-radius:50%;
}








/* Daily Wisdom Card Styling */
.sl-daily-wisdom-card {
    background: #fdfdfd; /* Off-white background */
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 25px 30px;
    margin: 40px auto;
    max-width: 800px; /* Adjust width as needed */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.sl-daily-wisdom-card .sl-section-heading {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #005662; /* Deep Teal */
    border-bottom: 2px solid #FFD700; /* Soft Gold underline */
    display: inline-block; /* To make underline only as wide as text */
    padding-bottom: 5px;
}

.sl-wisdom-text {
    font-size: 1.4em;
    font-style: italic;
    color: #333;
    line-height: 1.6;
    margin: 25px 0;
    position: relative;
    padding: 0 20px; /* Space for quote marks */
}

/* Optional: Add custom quote marks */
.sl-wisdom-text::before {
    content: "“";
    font-size: 3em;
    color: #FFD700; /* Soft Gold */
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
}
.sl-wisdom-text::after {
    content: "”";
    font-size: 3em;
    color: #FFD700; /* Soft Gold */
    position: absolute;
    right: 0;
    bottom: -10px; /* Adjust as needed */
    line-height: 1;
}


.sl-wisdom-source {
    font-size: 1em;
    color: #666;
    margin-top: 20px;
    font-weight: 500;
}

.sl-wisdom-faith {
    font-weight: bold;
    color: #005662; /* Deep Teal */
    font-size: 0.9em;
}

/* Ensure sl-info-message is styled from previous CSS */
.sl-info-message {
    font-style: italic;
    color: #000;
    text-align: center;
    margin: 20px 0;
}









.loadMore_btn
{
float:left;width:30%;height:40px;margin-left:35%;margin-top:30px;margin-bottom:20px;cursor:pointer;background:#22bb73;color:#fff;font-weight:bold;border-radius:10px;outline:none;
border:0px;	
}
.loadMore_btn:hover{background:#ccc;color:#22bb73;}

.footer_div
{
float:left;width:100%;height:60px;line-height:60px;margin-top:20px;background:#355850;
}
.footer_lebal
{
float:left;widthk:100%;height:40px;margin-left:20px;line-height:40px;padding:10px;color:#fff;text-align:center;text-decoration:none;font-weight:400;	
}
.footer_lebal:hover{color:#C89F5B;}




@media screen and (max-width: 900px) 
{
/*.main_home_div
{
heightk:50px;
}
.main_header_div
{
margin-topk:5px;
}*/
.main_search_div
{
float:left;width:94%;margin-left:3%;
}
.ser_input
{
width:75%;
}
.search_result
{
float:left;width:96%;margin-left:2%;
border-radius:10px;display:none;overflow:auto;
}
.menu_shell_div
{
width:100%;height:100%;displayk:none;background-color: rgba(117, 0, 0, 0.4);	backgroundk:red;
}
.menu_div
{
width:60%;min-width:0%;height:100%;

}
.menu_clocing_div
{
float:right;width:38%;height:100%;display:block;background-color: rgba(117, 0, 0, 0.4);
}
.menu_btn
{
width:70%;margin-left:15%;font-weight:bold;backgroundk:transparent;
}
/*.content_div
{
widthk:100%;margin-leftk:0%;
}*/
.single_trend_div
{
float:left;width:23%;height:230px;margin-leftk:0.5%;
}
.trend_img_div
{
height:150px;width:100%;
}


.sub_cb_video_player_div
{
width:100%;height:480px;background:pink;display:flex;justify-content:center;align-items:center;	
}
.right_ad_div{display:none;}
.cb_video_lebal
{
width:75%;	
}


}
@media screen and (max-width: 800px) 
{
.single_trend_div
{
float:left;width:23%;height:210px;margin-leftk:1%;
}	
	
}
@media screen and (max-width: 700px) 
{
.single_trend_div
{
float:left;width:30%;height:210px;margin-leftk:1%;
}
.sub_cb_video_player_div
{
width:100%;height:360px;background:green;display:flex;justify-content:center;align-items:center;	
}	
.sl-hero-video-placeholder {
    width: 100%;
	height:32vh;
    positionk: relative;
    padding-topk: 16.25%; /* 16:9 Aspect Ratio */
}
	
}
@media screen and (max-width: 600px) 
{
.main_header_title
{
floatk:right;widthk:95%;heightk:40px;line-heightk:40px;margin-leftk:3%;margin-bottomk:0px;margin-topk:30px;font-size:1.3em;font-familyk: serif;font-weightk:bold;
border-radiusk:10px 10px 0 0;	
}
.single_trend_div
{
/*float:left;width:40%;height:210px;margin-leftk:2.5%; */
float:left;width:90%;height:310px;
}	
.trend_img_div
{
float:left;width:100%;height:230px;	
}
	
}

@media screen and (max-width: 300px) 
{
.single_trend_div
{
float:left;width:95%;height:230px;margin-leftk:2.5%;
}	
	
}