body {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #efefef; }
  
  p {
    color: #b3b3b3;
    font-weight: 300; }
  
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
  
  a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    a, a:hover {
      text-decoration: none !important; }
  
  .content {
    padding: 7rem 0; }
  
  h2 {
    font-size: 20px; }
  
  .form-control:active, .form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none; }

    .rd-day-body {
        position: relative; /* Ensure day cells can act as anchor points */
    }
    
    .container { 
      max-width: 600px; 
      margin: auto; 
      
  }
  .tab-content { 
      margin-top: 20px; 
  }
  .contact-links a {
      margin: 0 10px;
  }

.gallery-tab{
  display:flex;
  justify-content:center;
  align-items:center;
}

.titleText{
  padding-top:5vh;
  text-align:center;
}

#myTab{
  border:0;
  padding-top:2.5vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

#calendar-tab,
#gallery-tab,
#faq-tab{
  border:0;
}

.contact-links{
  padding-top:5vh;
  font-family: "Montserrat",
}

#imagePopupOverlay {
  display: flex; /* Changed from 'none' to 'flex', but will be hidden by opacity */
  position: fixed; /* Stay in place */
  z-index: 1050; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.75); /* Darker black w/ opacity */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  opacity: 0; /* Start fully transparent */
  visibility: hidden; /* Make it not visible initially */
  transition: opacity 0.3s ease, visibility 0.5s ease; /* Fade and visibility transition */
}

.image-popup-overlay.show {
  opacity: 1; /* Fully visible */
  display: flex; /* Ensure it's displayed */
}

.image-popup-content {
  margin: auto; /* Not necessary for centering but helps with layout */
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px; /* Maximum width */
}

#popupImage {
  width: 100%; /* Responsive image size */
  height: auto;
  /* Remove margin-top if it was set for vertical centering */
}

.faq-container{
  display:flex;
  justify-content:center;
}

.faq-list{
  max-width:500px;
}

.faq-list dt {
  font-weight: bold;
  color: #f67280; /* Your specified color for questions */
  margin-top: 20px; /* Add some space between each Q&A set */
  text-align:left;
}

.faq-list dd {
  font-weight: lighter;
  color: #000; /* Standard black for answers */
  margin-left: 20px; /* Indent answers for better readability */
  text-align:left;
}



.rd-day-body {
  transition: transform 0.3s ease; /* Smooth transition for the transform property */
}

.rd-day-body:hover {
  transform: scale(1.2); /* Scale up the element to 110% of its original size on hover */
  color:hsl(241, 100%, 91%); 
}


.site-footer {
  height: 30px; /* Adjust based on the space you need */
  width: 100%;
  position: block;
  bottom: 0;
  left: 0;
  background-color: rgb(255, 255, 255); /* Slightly transparent white */
  z-index: 100; /* Ensure it's above most other elements */
}


/* Custom widths for different breakpoints */
#catContainer {
  width: 95%; /* Full width on small devices */
}

@media (min-width: 768px) { /* Medium devices and up */
  #catContainer {
      width: 85%;
      margin-right: auto; /* Center the container */
      margin-left: auto;
  }
}

@media (min-width: 992px) { /* Large devices and up */
  #catContainer {
      width: 75%;
      margin-right: auto;
      margin-left: auto;
  }
}

.tab-content > .tab-pane {
  opacity: 0; /* Start fully transparent */
  transition: opacity 0.15s ease-in /* Fade effect */
}

.tab-content > .active {
  display: block; /* Show active tab content */
  opacity: 1; /* Fully visible */
}