body { background-color: #f9f9f9; }
.sidebar { background: #fff3cd; padding: 15px; border-radius: 8px; }
.marquee { background: #d1e7dd; padding: 10px; font-weight: bold; }
.contact-form { background: #e2e3e5; padding: 20px; border-radius: 8px; }
.carousel img { height: 300px; object-fit: cover; }

.verse-week {
  background: #fef9e7;
  border-left: 5px solid #f39c12;
  border-radius: 8px;
}
.kids-songs {
  background: #e8f6f3;
  border-left: 5px solid #1abc9c;
  border-radius: 8px;
}

.sidebar .btn {
  text-align: left;              /* align icons/text neatly */
  font-weight: 500;              /* semi-bold modern look */
  border-radius: 8px;            /* rounded corners */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar .btn:hover {
  transform: translateX(5px);    /* subtle slide on hover */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Active state highlight with darker shade */
.sidebar .btn.active {
  border: 2px solid #000;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  filter: brightness(85%);   /* darkens the button color */
}

/* Fixed ticker tape background */
.scroll-container {
  position: relative;
  width: 100%;
  height: 50px;              /* adjust height as needed */
  overflow: hidden;          /* hides text outside container */
  background: #d1e7dd;       /* ticker tape background color */
  border-top: 2px solid #0d6efd;
  border-bottom: 2px solid #0d6efd;
}

/* Scrolling text */
.scroll-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;        /* start off-screen to the right */
  animation: scroll-left 15s linear infinite;
  font-weight: bold;
  font-size: 18px;
  line-height: 50px;         /* vertically center text */
}

/* Keyframes for scrolling */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}