body {
      background-color: #e9eef3;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
  .main-page-wrapper {
     background-color:  #afddfd;/* #e3f2fd; /*#f0f4f9;  /* Light header background */
     padding: .3rem 0;
     width: 100%;
     z-index: 1030; /* keeps it above cards */
     flex-direction: column;
     align-items: flex-center; /* align text and menu to left */
	 gap:0.2rem;
   }
  
    .main-title-wrapper {
     background-color:  #afddfd;/* #e3f2fd; /*#f0f4f9;  /* Light header background */
     padding: .3rem 0;
     width: 100%;
     z-index: 1030; /* keeps it above cards */
     gap:0.2rem;
   
    }
    .main-title {
      text-align: center;
      margin-top: .5rem;
      margin-bottom: 0rem;
      font-size: 3rem;
      font-weight: 700;
	    color:#0F487F; 
	}
    .sub-title {
      text-align: center;
      margin-top: 0rem;
      margin-bottom: 0rem;
      font-size: 1.5rem;
      font-weight: 700;
	    color:#0F487F; 
	}

    .view-btn {
    font-size: 1rem;
    font-weight: 500;
    width: 10.5rem;
    }

    .card-section {
      margin-bottom: 3rem;
      align-items: center;
    }

    .card-heading {
      font-size: 1.5rem;  /* Larger font for heading */
      font-weight: 700;   /* Bold */
      margin-bottom: 0.5rem;
      color: #0F487F;     /* Optional: blue tone to match theme 
      background-color:  #afddfd;*/
      
    }

	.card-description {
  	  font-size: 1.2rem;  /* Smaller text */
  	  font-weight: 400;
      color: #0d6efd; 
      line-height: 1.5;
      text-align: justify;
    }
   .g-card {
        background-color: #e3f2fd;
    /*  background-color: #f0f4f9;  /* slightly darker than white */
  		border-radius: 1.5rem;
  		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* stronger shadow */
  		color:#0F487F;
		padding: 1.5rem;
  		transition: transform 0.2s;
    }

    .g-card:hover {
      transform: translateY(-4px);
	    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

    }

    .card-header {
      color:#0F487F;
      border-radius:1.5rem;
      text-align: center;
      margin-bottom: 1rem;
	  /*background-color: #e3f2fd;*/
      background-color:  #afddfd;
  	  padding: 1rem 1rem; /* increased padding = taller header */
  	  font-weight: 700;
  	  font-size: 1.3rem;    /* increased font size */

    }
    .card-btn{
        background-color: #1b91e6;
        color: white;
         width: 100%;
        font-size: 1.1rem;
        font-weight: 650;
        text-align: center;
        white-space: normal; /* Allow multiline */
        word-break: break-word;
        justify-content: center;
   }
.card-btn:hover {
  transform: scale(1.01);
  background-color:#0d6efd;
  color: #e3f2fd;
}
.card-btn:focus {
	outline: none;          /* optional, but remove browser's default focus */
	background-color: #046eba !important; /* keep your original button color */
	cursor: pointer;
}

button.custom-btn,
input.custom-btn {
  border: 1px solid #e3f2fd;
  color:#0d6efd;
  font-size: 1.3rem;
  font-weight: 700;
  width: 100%;
  transition: background-color 0.2s ease;
}

.custom-btn:hover {
  background-color:#0d6efd;
  color: #e3f2fd;
}
.section-space {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.menu-navbar {
  align-items: flex-end;
  margin-right: 1rem; /* optional spacing from right edge */
}
.menu-navbar ul {
  list-style-type: none;
  margin: 0;
  padding-left: 2rem;
  display: flex;
  align-items:flex-end;
  gap: 1rem;

}

.custom-navbar {
  display: flex;
  justify-content: flex-start;
  border-radius: 0 0 1.5rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.custom-navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}


.custom-navbar a {
  text-decoration: none;
  color: #0F487F;
  font-weight: 600;
  font-size: 1.2rem;
}

.custom-navbar a.active,
.custom-navbar a:hover {
  color: #0d6efd;
  border-bottom: 2px solid #0d6efd;
}

.playerarea {
    background-color:rgb(0,190,255);    
    border: 2px solid #0F487F;
    max-height: 29em;
    min-height: 29em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
   
  }

.pbody {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #afddfd;/*#e3f2fd; /* rgb(0,190,255);*/
    font-size: 1em;
   /* max-height: 20em;
    /*color:#0F487F;*/
      
  }

.player-header {
    background-color:#1b91e6; /*rgb(0,150,255);*/
    border-bottom: 2px solid white;
    padding: 0.5em 1em;
    color:white;/*#0F487F; */
  }
 .vote-btn {
    width: 100%;
    padding: 1rem 0.25rem;
    min-height: 80px;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: #1b91e6;/*#0d6efd;*/
    color: white;
    text-align: center;
    white-space: normal; /* Allow multiline */
    word-break: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.vote-btn:hover {
  transform: scale(1.05);
  background-color: #afddfd !important;
}
  @media (max-width: 576px) {
    .vote-btn {
      min-height: 70px;
      font-size: 0.85rem;
      padding: 0.75rem 0.25rem;
    }
  }
    @media (max-width: 768px) {
      .card-section {
        flex-direction: column !important;
      }

      .card-text,
      .g-card {
        width: 100%;
        text-align: center;
      }
    }
    
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.blink {
  animation: blink 1s infinite;
  color: blue;
}
.toast-Desc {
  visibility: hidden;
  min-width: 200px;
  background-color:white;/* #28a745; /* Green success */
  color: #046eba;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: absolute;
  z-index: 9999;
  left: 60%;
  transform: translateX(-50%);
  font-weight: 600;
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
}

.toast-Desc.show {
  visibility: visible;
  opacity: 1;
}

.toast-message {
  visibility: hidden;
  min-width: 250px;
  background-color: #1b91e6;/* #28a745; /* Green success */
  color: white;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-weight: 600;
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
}

.toast-message.show {
  visibility: visible;
  opacity: 1;
}
.btns {
  margin-top: 1em;
  margin-bottom: 1em;
  width: 75%;
  height:75%;
  min-height:5em;
  min-width:5em;
  padding: 1.1em 0em;
  font-size: 100%;
  text-align: center;
  cursor: pointer;
  color:white;
  background-color:  #1b91e6;;
  border-radius: 0.75rem;
  text-align: center;
    white-space: normal; /* Allow multiline */
    word-break: break-word;
    justify-content: center;
    align-items: center;
}
.footer-logo-container {
  text-align: center;
  width: 120px; /* match logo width */
  margin: 0 auto;
}

.footer-logo-container img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer-logo-container small {
  font-size: 0.55em;
  display: block;
  margin-top: 0.3em;
}