#scrollspyHero {
    /* background-image: url("./assets/img/branding/ppmcBridge.jpeg"); */
    background-image: url("./assets/img/branding/crowd.jpg");    
    
    /* background-image: url("./assets/img/Fourth.PNG"); */
    /* branding/ppmcFlag.jpg */
    
    /* background-image: url("./assets/img/branding/ppmcEntrance.jpg");     */
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
    /* You can add more background properties here like background-size, background-position, etc. */
}


.space-between-buttons {
        margin-right: 40px;
 }

.button-like {
    display: inline-block;
            padding: 5px 8px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border: none;
            border-radius: 5px;
            cursor: pointer;
/*            margin-left: 10px;
            margin-right: 10px; */
}
/*
        .button-like:hover {
            background-color: #0056b3;
        }
*/

.button-like-left {
    display: inline-block;
            padding: 2px 2px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border: none;
            border-radius: 5px;
            cursor: pointer;
	    width: 180px;
        }

.button-like-left1 {
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border: none;
            cursor: pointer;
	    font-size: 15px; /* Optionally, set font size */	    
        }
        .button-like-left1:hover {
            background-color: #0056b3;
        }
	


.button-like-right {
    display: inline-block;
            padding: 2px 2px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border: none;
            border-radius: 5px;
            cursor: pointer;
	    width: 120px;
        }

.button-like-right1 {
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border: none;
            cursor: pointer;
	    font-size: 15px; /* Optionally, set font size */	    
        }
	
	
section.scrollspyHero {
    /*
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;
   */

/*      background-image:url("./assets/img/branding/ppmc-logo.png"); */
      

}

.tal {
    text-align: left;
}

.ff {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
}

.my-class {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px; /* Optionally, set font size */
    /* Add any other font-related properties here */


}


.anniv {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px; /* Optionally, set font size */
}


.overlay {
  position: fixed;
  top: 120px;
  right: -380px; /* Initial position outside of viewport */
  bottom: 0;
  width: 380px;
  background-color: rgba(0, 0, 0, 0.5);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 2px;
  color: white;
  overflow-y: auto;
  transition: right 0.3s ease; /* Transition for smooth sliding animation */
  z-index: 10000;
}

.overlay.show {
  right: 0; /* Slide in from right to left */
}

.overlay-header {
    text-align: center;
  margin-top: 10px;    

}

.overlay-header h2 {
  margin: 0;
}

.overlay-content {
  max-height: calc(100% - 40px); /* Adjust for button height and padding */
  margin-top: 10px; /* Adjust for spacing */
}

.overlay-content p {
  margin: 0 0 10px 0;
}

#toggle-btn {
  display: block;
  position: fixed;
  top: 120px;
  right: 10px;
  z-index: 999;
  height: 60px;
  align-items: center;  

}


#toggle-btn-left {
  margin: auto 10px;
  display: block;
  position: fixed;
  top: 120px;
  z-index: 100;
  height: 60px;  
}

#toggle-btn-right {
  position: fixed;
  display: block;
  right: 10px;  
  top: 120px;
  z-index: 100;
  height: 60px;  
}

#toggle-btn-tc {
    margin: 10px auto;
    right: 10px;
  display: block;
  position: fixed;
  top: 200px;
  z-index: 10000;
}

.smi1 {
  font-size: smaller; /* Or specify a specific font size */
  font-style: italic;
  width: 100px !important;
  white-space: nowrap;
}
.smi3 {
  font-size: 12px; /* Or specify a specific font size */
  font-style: italic;
  width: 100px !important;
  white-space: nowrap;
}
.smi2 {
    width: 300px !important;
    text-align: left;
}

.ula {
  text-align: left;
}

  #calendar {
    max-width: 1100px;
    margin: 0 auto;
  }


  .imageLogo {
        width: 120px; /* Adjust width as needed */
        height: 130px; /* Adjust height as needed */
	display: inline-block;
    }
        
      
.rightArrow {
    position: absolute;
    top: 8px;
    right: 20px;
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.leftArrow {
    width: 30px;
    height: 30px;
}

#backButton {
    spacing: 0;
    width: 40px;
    height: 40px;
    padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.banner {
    height: 40px;
    background-color: #ff8C00; /* #00ff00; */
    color: black;
    display: flex;
    align-items: center;
    padding-left: 20px;
    width: 100%; /* Make the banner span the entire width of the viewport */
    font-size: 15px; /* Optionally, set font size */	        
}

.banner p {
    margin: 0;
}

.fc-day-today {
    background: #aaffbb !important;
    border: none !important;
  
} 
.mb-1 {
    white-space:nowrap;
}

.ters {
    background: #000000 !important;
    color: #00ff00 !important;    
  
} 

.headi {
    background: #0000ff  !important;
    color: #ffffff !important;    
} 

.headi2 {
    background: #00000070  !important;
    color: #ffffff !important;
    font-size: 16px; /* Optionally, set font size */	        
} 

.headi2a {
    background: #00000030  !important;
    color: #ffffff !important;
} 

.headi3a {
    background: #00000030  !important;
    color: #00ff00 !important;
}

.ct {
    text-align: center;
}

.no-border {
  border: none !important;
}

.no-border td, .no-border th {
  border: none !important;
}

.move-up {
    margin-top: -10px;
}

/* General table styles */
.responsive-table {
  width: 100%; /* Full width of the container */
  border-collapse: collapse; /* Remove gaps between cells */
  margin: 20px auto; /* Center table on the page */
}

.responsive-table td {
  vertical-align: middle; /* Center content vertically */
  padding: 15px;
  width: 50%; /* Ensure two equal columns */
}

/* Image column */
.image-cell {
  text-align: center; /* Center image in the cell */
}

.image-cell img {
  width: 100%; /* Make the image responsive */
  max-width: 400px; /* Optional: Limit the maximum width */
  height: auto; /* Maintain aspect ratio */
  border: 2px solid yellow; /* Add thin yellow border */
  border-radius: 5px; /* Optional: Add rounded corners */
}

/* Text column */
.text-cell {
  text-align: left; /* Align text to the left */
  font-size: 1rem;
}

/* Keep horizontal columns at all times */
@media (max-width: 768px) {
  .responsive-table td {
    padding: 10px; /* Adjust padding for smaller screens */
    font-size: 0.9rem; /* Adjust text size for better fit */
  }

  .image-cell img {
    max-width: 80%; /* Reduce the image size slightly */
  }
}