.h2-center
{text-align: center;
}
.menu-center{
    text-align: center;
}
.topnav a {
  color:darkblue;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius:50px;
}

.topnav a {
    border:3em solid #789578989;
}
body {
    background-color:#27BEF5;
    font-family:Roboto;
    font-size:18px;
    color:black;
    padding:1em;
    
}
a{
    color:#16001F;
}
.top-container{
    position:relative;
    width:auto;
}

.top-container img{
width:100%;

}

.text{
    width:auto;
   font-family: Times New Roman;
   position:absolute;
   top:30%;
   left:28%;
   color:#000000;
   background-color:#02ADAD;
   padding:1em;
}
a:hover {
     background-color: #000875;
     color: #F0E000;
     text-decoration: underline;
     transition:.5s;
}
.Mission-Statement {
float: right;

}
.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
  flex-basis: 45%;
  margin: .5em;
  border: 1em;
  border-radius:10px;
  text-align: center;
  
}


img{
   border: 1em inset #435678;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: Georgia;
}

input[type="text"]:focus {
  border-color: #007BFF;
  outline: black;
}
/* Styles for wrapping the search box */

.main {
    width: 50%;
    margin: 50px auto;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}
.Logo{
    border:none;
}
.Donate2{
    position:relative;
    left:75%;
}

.img-crop{
width: 300px;
  height: 500px;
  object-fit: cover;
}   
.Donate {
width: 300px;
height: 350px;
background-color: black ;
padding: 2em;
margin-right: 1em;
float: left;
border-color:white;
border-radius:50px;
border-width:50px;
}
.white-text{
    color:white;
    text-align:center;
}
.green{
    color:green;
}
  .dropdown {display: inline-block; position: fixed;
  top: 25%;           /* Sticks to the top */
  right: 25%;
  left:83%;/* Aligns to the right */
  width: 200px;     /* Set a width */
    z-index: 100;    /* Ensures it stays on top of other content */ }
.menu-content {
     top: 25%;           
  right: 25%;
  left:80%;
  display: none;
  background-color: black;
  color:white;
  width: 200px;
  padding:20px;
  margin-top: 10px;
  border-radius:50px;
  border-width:50px;
  border-color:white;
}

.show {
  display: block;
}
  .Long-list{
      list-style-type: inline-block;
  }
  .dialog3 {
  max-height: 80vh; /* Limits height to 80% of the screen */
  overflow-y: auto; /* Adds a scrollbar if content is too long */
}


.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
/* 1. Remove the FontAwesome @import at the top of your file */

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 

.rating > label:before { 
  margin: 5px;
  font-size: 3em; /* Adjusted size for emojis */
  display: inline-block; 
  content: "⭐"; /* Full Star Emoji */
}

/* For half stars, you can use the same emoji but we adjust the width */
.rating > .half:before { 
  content: "⭐"; 
  position: absolute;
  width: 50%;     /* This "crops" the emoji to look like a half-star */
  overflow: hidden;
}

.rating > label { 
  color: #ddd; 
  float: right; 
  filter: grayscale(100%); /* Makes the emoji look "empty" or gray by default */
}

/***** CSS Magic to Highlight Stars *****/
.rating > input:checked ~ label, 
.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label { 
  filter: grayscale(0%); /* Turns the color back on when hovered/clicked */
}
.Width{
    width:25%;
}
.alignment{
    text-align:center;
}