html, body {padding: 0; margin: 0;}
body {height: 100%; font-family: Arial, Helvetica, sans-serif;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
img {max-width: 100%;}

.home-container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: seashell; display: flex;}
.home-left {height: 100%; overflow-y: hidden; flex: 0 0 50%; position: relative; 
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9)), url('../images/bojjhanga-paritta.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.home-right {height: 100%; overflow-y: hidden; flex: 0 0 50%; position: relative;}
.content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 90%;}

.sick-people-wrapper {overflow: auto; height: calc(100% - 40px); padding: 20px 5%;}
.sick-person-item {font-size: 25px; padding: 5px 0;}

.opening-container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: seashell;}
.opening-title {font-size: 50px; height: 50px; margin-top: 30px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center;}
.opening-wrapper {display: flex; height: calc(100% - 165px);}
.opening-left {height: 100%; overflow-y: hidden; flex: 0 0 50%; position: relative;}
.opening-right {height: 100%; overflow-y: hidden; flex: 0 0 50%; position: relative;}
.buddha {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.opening-paritta {max-width: 90%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 2rem; line-height: 1.5em}
.opening-footer {height: 80px; width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 10px;}
.opening-footer a {font-size: 20px; background: #CCC; color: #000; text-decoration: none; padding: 5px 30px; display: inline-block;}

.paritta-container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: seashell; display: flex;}
.paritta-container .left {height: 100%; overflow-y: hidden; flex: 0 0 50%; position: relative}
.paritta-container .right {height: 100%; overflow-y: hidden; flex: 0 0 50%;}

.paritta-list {height: calc(100% - 40px); width: calc(100% - 10%); padding: 20px 5%; overflow-y: auto;}
.paritta-item {font-size: 30px; padding: 15px 0; border-bottom: 1px solid #999; cursor: pointer;}
.paritta-item:hover {background-color: #999; color: #FFF;}

.slider-wrapper {display: none; font-size: 30px; margin-top: 20px; width: calc(100% - 10%); text-align: center; padding-left: 5%; padding-right: 5%;}
.paritta-title {font-weight: bold; margin-bottom: 20px; margin-top: 20px;}
.paritta-content {line-height: 1.5em; margin-bottom: 20px;}
.paritta-order {font-size: 15px;}

.marquee-container {
  height: 100%; /* Adjust height as needed */
  overflow: hidden;
  position: relative;
}

.marquee {
  position: absolute;
  top: 100%;
  margin: 0;
  padding: 0 20px;
  list-style: none;
  animation: scroll 10s linear infinite;
}

.marquee-item {
  padding: 10px 0;
  font-size: 30px;
  /* Customize item styling */
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-110%);
  }
}