@charset "utf-8";
/* CSS Document */
/*START Body CSS*/
#futureSermons th{
	font-weight: normal; 
	text-align: left;
}
h2 {
	color: orangered;
}
h3 {
	padding-bottom: 2%;
}
.row {
	padding-top: 1em; 
	padding-bottom: 1em;
}
.row img {
	margin: 0; 
	padding: 0; 
	float: left; 
	padding-right: 5%;
}
.card {
	border: none;
}
.column-padding-left {
	padding-left: 5%;
}
/*END Body CSS*/
.left-align {
	text-align: left;
}
.hero_header {
	font-size: 3em;
}
.center-hero {
	background-image: url('../photos/bible5.jpg'); 
	background-repeat: no-repeat; 
	background-size: cover;
}
.text-hero {
	z-index: 3; 
	background-color: black; 
	opacity: 75%; 
	width: 25%; 
	margin-left: 5%; 
	height: 25%; 
	text-align: left;
	color: white;
}
.bar-bottom-hero {
	width: 100%; 
	background-color: green; 
	height: 10%; 
	padding-top:2%; 
	margin-left: 0%;
	margin-bottom:-2%;
}
.bottom-hero {
	background-image: url('../photos/May 23, 2025, 01_02_50 PM.png');
}
.bottom-hero-text {
	z-index: 3; 
	background-color: black; 
	opacity: 75%; 
	width: 25%; 
	margin-left: 5%; 
	height: 1024px; 
	text-align: left;
	padding-top: 10%;
	color: white;
}
/*START Navigation CSS*/
/*END Navigation CSS*/
/*START Carasoul */
#carouselExampleIndicators1 {
	background-color: grey;
}
.carousel-caption {
	background-color: #000000; 
	opacity: 75%;
}
.btn {
  background-color: green;
  color: white;
  font-size: 16px;
/*  padding: 10px 11px;*/
  border: none;
  cursor: pointer;
  border-radius: 20px;
  width: auto;
}
.btn:hover {
  background-color: black;
  color: white;
}
/*START Footer CSS*/
.footer {
	background-color: black; 
	color: white; 
	font-size: .75em;
}
.footer-column {
	border-left: 1px solid white; 
	padding-left:1%; 
	padding-top: 2%;
}
/*END Footer CSS*/
/*START VIDEO PLAYER*/

/*END Video Player*/
/*START Collapsable Menu Items*/
.player-container {
            display: flex;
            flex-direction: row;
            max-width: 1200px;
            margin: 0 auto;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .main-video {
            flex: 3;
            position: relative;
            padding-bottom: 42.18%; /* Maintains 16:9 ratio dynamically */
            height: 0;
        }
        .main-video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .sidebar {
            flex: 1;
            background: #252525;
            max-height: 506px; /* Matches standard video height */
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .video-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #333;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .video-item:hover, .video-item.active {
            background: #383838;
        }
        .thumbnail-wrapper {
            position: relative;
            width: 100px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .thumbnail-wrapper img {
            width: 100%;
            display: block;
            border-radius: 4px;
        }
        .video-title {
            font-size: 14px;
            line-height: 1.3;
            font-weight: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
			color: white;
        }
		  .sidebar-header {
            padding: 15px;
            background-color: #242424;
            font-weight: bold;
            font-size: 14px;
            border-bottom: 1px solid #333;
			color: white;
        }
		  .sidebar-instructions {
            padding: 20px;
            font-size: 13px;
            color: #aaa;
            line-height: 1.5;
            flex-grow: 1;
        }
		 .collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.videoplaylist {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1); /* White arrow when expanded */
}

.accordion-button{
	background-color: #242424;
	color: white;
}
        /* Responsive design for tablets/phones */
        @media (max-width: 768px) {
            .player-container {
                flex-direction: column;
            }
            .main-video {
                padding-bottom: 56.25%;
            }
            .sidebar {
                max-height: 300px;
            }
        }
/*END Collapsable Menu Items*/