@charset "utf-8";
/* CSS Document */

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f7f8fc;
  color: #665;
  margin: 0;
  padding: 0;
}
/* NEW CSS **************************************************************************************************************/
/* HOME HEADER IMAGE */
.home-header-image-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 44px; /* Adjust this value to match the height of your navbar */  
}

.home-header-image-container picture,
.home-header-image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* If you want a fixed height for the header image */
.home-header-image-container.fixed-height {
  height: 100%; /* Example height, adjust as needed */
}

.home-header-image-container.fixed-height picture,
.home-header-image-container.fixed-height img {
  height: 100%;
  object-fit: cover;
}

/* Rest of your CSS remains the same */
.home_body_wrapper {
    width: 65%; /* Set the container to 100% of the viewport width */
    margin-top: 0; /* Adjust if necessary */  
    margin: 0 auto; /* Center the container */
    padding: 0;
    transition: width 0.3s ease; /* Add smooth transition for width changes */  
}
/* body div sections */
/* New class for section titles */
.section-title {
    text-align: center;
    font-size: 1.5em; /* Match your h2 size or adjust as needed */
    font-weight: bold;
    text-decoration-color: #ff9a2c;
    margin-left: -20px; /* Offset for extending beyond padding */  
    margin-bottom: 20px; /* Space below the title */
    margin: 0; /* Reset margins */
    width: 100%;    
    padding: 15px 0; /* Adjust padding for vertical space */  
    border-bottom: 1px solid #ff9a2c;
    background-color: #fcfdfe;
    color: #665;
}

.section-title-inline {
    text-align: center;
    font-size: 1.5em; /* Match your h2 size or adjust as needed */
    font-weight: bold;
    text-decoration-color: #ff9a2c;
    margin-bottom: 20px; /* Space below the title */
    /* Ensure the title spans the full width of the section */
    width: calc(100% + 40px); /* Compensate for section padding */
    margin-left: -20px; /* Offset for extending beyond padding */
    padding-left: 20px; /* Bring content back inside padding */
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ff9a2c;
    border-top: 1px solid #ff9a2c; 
    background-color: #fefeff;
    color: #665;
}  
.section-title-inline-small-font {
    text-align: center;
    font-size: 1.2em; /* Match your h2 size or adjust as needed */
    font-weight: bold;
    text-decoration-color: #ff9a2c;
    margin-bottom: 20px; /* Space below the title */
    /* Ensure the title spans the full width of the section */
    width: calc(100% + 40px); /* Compensate for section padding */
    margin-left: -20px; /* Offset for extending beyond padding */
    padding-left: 20px; /* Bring content back inside padding */
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ff9a2c;
    border-top: 1px solid #ff9a2c;
    background-color: #fefeff;
    color: #665;
}   
.section-sub-title {
    text-align: center;
    font-size: 1.2em; /* Match your h2 size or adjust as needed */
    font-weight: bold;
    text-decoration-color: #ff9a2c;
    margin-bottom: 20px; /* Space below the title */
    /* Ensure the title spans the full width of the section */
    width: calc(100% + 40px); /* Compensate for section padding */
    margin-left: -20px; /* Offset for extending beyond padding */
    padding: 15px 20px 15px 20px;
    border-bottom: 1px solid #ff9a2c;
    background-color: #fefeff;
    color: #665;
}  
  

/* Modify existing section styles */
section {
    margin-bottom: 20px; /* Increased for visual separation */
    background: #ffffff;
    padding: 0px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ff9a2c;
    overflow: hidden; /* Hide any overflow from the title's background */
}
section a {
    text-decoration: none;
    color: rgb(251 152 5);
    font-size: 1.0em;
}

 /* Wrap content in a div to manage padding */
.section-content {
     padding: 20px; /* Move padding here to be below the title */
}  
  
  
/* Single column style - default is single column */
.single {
    width: 100%;
}

/* Double column style */
.double {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
/* Adjust for double sections */
.double-section {
    display: flex;
    flex-direction: column;
}

.double-section .section-title {
    order: -1; /* Ensure title comes first visually */
}  

/* Default column flex */
.column {
    flex: 1;
    min-width: 200px; /* Ensures columns don't get too narrow on small screens */
}
/* Animation for images within buttons */
.column button img {
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
  transition: all 0.3s ease; /* Smooth transition for all properties */
  transform: scale(1); /* Initial state */
}

.column button:hover img {
  padding: 5px;
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  filter: brightness(1.1) contrast(1.1); /* Add a slight brightness and contrast effect */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Add a subtle shadow for depth */
}

/* Ensure button styling doesn't interfere with image effects */
.column button {
  background: none;
  border: none;
  padding: 0px 5px 40px 5px;
}

.column button:hover {
  cursor: pointer;
}
/* Adjust widths for the first set of columns */
.double:nth-child(1) .column:first-child {
    flex: 2; /* Left column of the first set */
}

.double:nth-child(1) .column:last-child {
    flex: 2; /* Right column of the first set */
}

/* Adjust widths for the second set of columns to 75% and 25% */
.double:nth-child(5) .column:first-child {
    flex: 3; /* This makes the left column 75% wide within .double */
}

.double:nth-child(5) .column:last-child {
    flex: 1; /* This makes the right column 25% wide within .double */
}

/* GALLERY AND DIRECTORY IMAGE */
.responsive-image-container {
  padding: 0px 0px 0px 0px;
  width: 100%; 
  height: 100%; /* Or adjust to fit your design */
  position: relative;
  overflow: hidden;
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  position: absolute;
  top: 0;
  left: 0;
}
  
/* Hover Animation */
/* Animation for images within anchor tags */
a img {
  transition: all 0.3s ease; /* Smooth transition for all properties */
  transform: scale(1); /* Initial state */
}

a:hover img {
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  filter: brightness(1.1) contrast(1.1); /* Add a slight brightness and contrast effect */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Add a subtle shadow for depth */
}
.hover-effect img {
  transition: all 0.3s ease;
  transform: scale(1);
}

.hover-effect:hover img {
  transform: scale(1.05);
  filter: brightness(1.1) contrast(1.1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
  
/* LOG IN FORM */
.form-check {
    margin-bottom: 0; /* Remove extra space below checkboxes */
}
.mb-3 {
    margin-bottom: 2px; /* Further reduce bottom margin for form groups */
}
.form-label {
    font-size: 12px; /* Smaller font size for labels */
    margin-bottom: 0; /* No space below label */
}
.form-control, .form-select {
    font-size: 12px; /* Smaller text size for inputs and selects */
    padding: .25rem .5rem; /* Reduce padding inside form controls */
}
.btn {
    font-size: 12px; /* Smaller text size for the submit button */
    padding: 0.25rem 0.5rem; /* Adjust padding to make button smaller */
}
.container_form {
    max-width: 100%; /* Even narrower form width */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
}
h2 {
    text-decoration: underline; /* Adds an underline */
    text-decoration-thickness: 1px; /* Sets the thickness of the underline */
    text-decoration-color: #ff9a2c; /* Sets the color of the underline */  
    margin-top: 0px; /* Reduce space below the header */			
    margin-bottom: 35px; /* Reduce space below the header */
    font-size: 1.5em; /* Adjust this value to your desired size */
    font-weight: bold;
}
section h2 {
    text-align: center;
}
/* Styling for donation headings with animation */
.donate-h2 {
    margin-bottom: 10px;
    text-decoration: none;
    font-size: 1.1em;
    color: #ff9a2c;
    background-color: #f7f8fc;
    padding: 10px 20px;
    border-radius: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-block;
    line-height: 1.2;
    position: relative; /* This is necessary for the pseudo-element positioning */
}

/* Pseudo-element for animation */
.donate-h2::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Positioning the underline */
    left: 0;
    width: 0; /* Start with no width */
    height: 2px; /* Thickness of the underline */
    background: #ff9a2c; /* Color of the animation */
    transition: width 0.5s ease; /* Smooth transition for the width */
}



/* Apply animation to the pseudo-element */
.donate-h2::after {
    animation: donatePulse 2s infinite; /* Duration of one cycle, repeat infinitely */
}
/* Animation */
@keyframes donatePulse {
    0%, 100% { width: 0; }
    50% { width: 100%; }
}  

h3 {
    margin-top: 0px; /* Reduce space below the header */			
    margin-bottom: 0px; /* Reduce space below the header */
    font-size: 1.1em; /* Adjust this value to your desired size */
}
p {
    font-size: 1em;
    margin-top: 0.5em;
    padding-left: 20px;
}
/* Title in the Donation Info section */
.project-currect-status {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #999;
}
address {
    font-size: 1.1em;
    font-weight: bold;
    /*text-decoration: underline;*/
    margin-top: 0.5em;
    text-align: center;
}
/* Basic styling for copied to clipboard popup */
.copy-notification {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0d6efd; /* Match the color of the LOG IN/SIGN UP button from Bootstrap */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  z-index: 1000;
}

.copy-notification.show {
  visibility: visible;
  opacity: 1;
}  
  
/* Archive and Directory Title Animation ***************************************************************************************/
/* Base styles */
.container_archive_title, .container_directory_title {
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.3em;
  line-height: 2;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  text-align: center;
  padding-top: 20px;
}  

/* Animation for both classes */
.anim-text-flow-archive span,
.anim-text-flow-directory span,
.anim-text-flow--archivehover:hover span,
.anim-text-flow-directory-hover:hover span {
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

/* Specific animations */
.anim-text-flow-archive span {
  animation-name: anim-text-flow-archive-keys;
}

.anim-text-flow-directory span {
  animation-name: anim-text-flow-directory-keys;
}

/* Keyframes for Archive */
@keyframes anim-text-flow-archive-keys {
  0% { color: hsla(0, 60%, 60%, 1); }
  5% { color: hsla(18, 60%, 60%, 1); }
  10% { color: hsla(36, 60%, 60%, 1); }
  15% { color: hsla(54, 60%, 60%, 1); }
  20% { color: hsla(72, 60%, 60%, 1); }
  25% { color: hsla(90, 60%, 60%, 1); }
  30% { color: hsla(108, 60%, 60%, 1); }
  35% { color: hsla(126, 60%, 60%, 1); }
  40% { color: hsla(144, 60%, 60%, 1); }
  45% { color: hsla(162, 60%, 60%, 1); }
  50% { color: hsla(180, 60%, 60%, 1); }
  55% { color: hsla(198, 60%, 60%, 1); }
  60% { color: hsla(216, 60%, 60%, 1); }
  65% { color: hsla(234, 60%, 60%, 1); }
  70% { color: hsla(252, 60%, 60%, 1); }
  75% { color: hsla(270, 60%, 60%, 1); }
  80% { color: hsla(288, 60%, 60%, 1); }
  85% { color: hsla(306, 60%, 60%, 1); }
  90% { color: hsla(324, 60%, 60%, 1); }
  95% { color: hsla(342, 60%, 60%, 1); }
  100% { color: hsla(360, 60%, 60%, 1); }
}

/* Keyframes for Directory */
@keyframes anim-text-flow-directory-keys {
  0% { color: hsla(0, 58%, 21%, 64); }
  5% { color: hsla(18, 58%, 21%, 64); }
  10% { color: hsla(36, 58%, 21%, 64); }
  15% { color: hsla(54, 58%, 21%, 64); }
  20% { color: hsla(72, 58%, 21%, 64); }
  25% { color: hsla(90, 58%, 21%, 64); }
  30% { color: hsla(108, 58%, 21%, 64); }
  35% { color: hsla(126, 58%, 21%, 64); }
  40% { color: hsla(144, 58%, 21%, 64); }
  45% { color: hsla(162, 58%, 21%, 64); }
  50% { color: hsla(180, 58%, 21%, 64); }
  55% { color: hsla(198, 58%, 21%, 64); }
  60% { color: hsla(216, 58%, 21%, 64); }
  65% { color: hsla(234, 58%, 21%, 64); }
  70% { color: hsla(252, 58%, 21%, 64); }
  75% { color: hsla(270, 58%, 21%, 64); }
  80% { color: hsla(288, 58%, 21%, 64); }
  85% { color: hsla(306, 58%, 21%, 64); }
  90% { color: hsla(324, 58%, 21%, 64); }
  95% { color: hsla(342, 58%, 21%, 64); }
  100% { color: hsla(360, 58%, 21%, 64); }
}

/* Animation delays for both classes */
.anim-text-flow-archive span:nth-of-type(1),
.anim-text-flow-directory span:nth-of-type(1) { animation-delay: -20s; }
.anim-text-flow-archive span:nth-of-type(2),
.anim-text-flow-directory span:nth-of-type(2) { animation-delay: -19.8s; }
.anim-text-flow-archive span:nth-of-type(3),
.anim-text-flow-directory span:nth-of-type(3) { animation-delay: -19.6s; }
.anim-text-flow-archive span:nth-of-type(4),
.anim-text-flow-directory span:nth-of-type(4) { animation-delay: -19.4s; }
.anim-text-flow-archive span:nth-of-type(5),
.anim-text-flow-directory span:nth-of-type(5) { animation-delay: -19.2s; }
.anim-text-flow-archive span:nth-of-type(6),
.anim-text-flow-directory span:nth-of-type(6) { animation-delay: -19s; }
.anim-text-flow-archive span:nth-of-type(7),
.anim-text-flow-directory span:nth-of-type(7) { animation-delay: -18.8s; }
.anim-text-flow-archive span:nth-of-type(8),
.anim-text-flow-directory span:nth-of-type(8) { animation-delay: -18.6s; }
.anim-text-flow-archive span:nth-of-type(9),
.anim-text-flow-directory span:nth-of-type(9) { animation-delay: -18.4s; }
.anim-text-flow-archive span:nth-of-type(10),
.anim-text-flow-directory span:nth-of-type(10) { animation-delay: -18.2s; }
.anim-text-flow-archive span:nth-of-type(11),
.anim-text-flow-directory span:nth-of-type(11) { animation-delay: -18s; }
.anim-text-flow-archive span:nth-of-type(12),
.anim-text-flow-directory span:nth-of-type(12) { animation-delay: -17.8s; }
.anim-text-flow-archive span:nth-of-type(13),
.anim-text-flow-directory span:nth-of-type(13) { animation-delay: -17.6s; }
.anim-text-flow-archive span:nth-of-type(14),
.anim-text-flow-directory span:nth-of-type(14) { animation-delay: -17.4s; }
.anim-text-flow-archive span:nth-of-type(15),
.anim-text-flow-directory span:nth-of-type(15) { animation-delay: -17.2s; }
.anim-text-flow-archive span:nth-of-type(16),
.anim-text-flow-directory span:nth-of-type(16) { animation-delay: -17s; }
.anim-text-flow-archive span:nth-of-type(17),
.anim-text-flow-directory span:nth-of-type(17) { animation-delay: -16.8s; }
.anim-text-flow-archive span:nth-of-type(18),
.anim-text-flow-directory span:nth-of-type(18) { animation-delay: -16.6s; }
.anim-text-flow-archive span:nth-of-type(19),
.anim-text-flow-directory span:nth-of-type(19) { animation-delay: -16.4s; }
.anim-text-flow-archive span:nth-of-type(20),
.anim-text-flow-directory span:nth-of-type(20) { animation-delay: -16.2s; }
.anim-text-flow-archive span:nth-of-type(21),
.anim-text-flow-directory span:nth-of-type(21) { animation-delay: -16s; }
.anim-text-flow-archive span:nth-of-type(22),
.anim-text-flow-directory span:nth-of-type(22) { animation-delay: -15.8s; }
.anim-text-flow-archive span:nth-of-type(23),
.anim-text-flow-directory span:nth-of-type(23) { animation-delay: -15.6s; }
.anim-text-flow-archive span:nth-of-type(24),
.anim-text-flow-directory span:nth-of-type(24) { animation-delay: -15.4s; }
.anim-text-flow-archive span:nth-of-type(25),
.anim-text-flow-directory span:nth-of-type(25) { animation-delay: -15.2s; }
.anim-text-flow-archive span:nth-of-type(26),
.anim-text-flow-directory span:nth-of-type(26) { animation-delay: -15s; }
.anim-text-flow-archive span:nth-of-type(27),
.anim-text-flow-directory span:nth-of-type(27) { animation-delay: -14.8s; }
.anim-text-flow-archive span:nth-of-type(28),
.anim-text-flow-directory span:nth-of-type(28) { animation-delay: -14.6s; }
.anim-text-flow-archive span:nth-of-type(29),
.anim-text-flow-directory span:nth-of-type(29) { animation-delay: -14.4s; }
.anim-text-flow-archive span:nth-of-type(30),
.anim-text-flow-directory span:nth-of-type(30) { animation-delay: -14.2s; }
.anim-text-flow-archive span:nth-of-type(31),
.anim-text-flow-directory span:nth-of-type(31) { animation-delay: -14s; }
.anim-text-flow-archive span:nth-of-type(32),
.anim-text-flow-directory span:nth-of-type(32) { animation-delay: -13.8s; }
.anim-text-flow-archive span:nth-of-type(33),
.anim-text-flow-directory span:nth-of-type(33) { animation-delay: -13.6s; }
.anim-text-flow-archive span:nth-of-type(34),
.anim-text-flow-directory span:nth-of-type(34) { animation-delay: -13.4s; }
.anim-text-flow-archive span:nth-of-type(35),
.anim-text-flow-directory span:nth-of-type(35) { animation-delay: -13.2s; }
.anim-text-flow-archive span:nth-of-type(36),
.anim-text-flow-directory span:nth-of-type(36) { animation-delay: -13s; }
.anim-text-flow-archive span:nth-of-type(37),
.anim-text-flow-directory span:nth-of-type(37) { animation-delay: -12.8s; }
.anim-text-flow-archive span:nth-of-type(38),
.anim-text-flow-directory span:nth-of-type(38) { animation-delay: -12.6s; }
.anim-text-flow-archive span:nth-of-type(39),
.anim-text-flow-directory span:nth-of-type(39) { animation-delay: -12.4s; }
.anim-text-flow-archive span:nth-of-type(40),
.anim-text-flow-directory span:nth-of-type(40) { animation-delay: -12.2s; }
.anim-text-flow-archive span:nth-of-type(41),
.anim-text-flow-directory span:nth-of-type(41) { animation-delay: -12s; }
.anim-text-flow-archive span:nth-of-type(42),
.anim-text-flow-directory span:nth-of-type(42) { animation-delay: -11.8s; }
.anim-text-flow-archive span:nth-of-type(43),
.anim-text-flow-directory span:nth-of-type(43) { animation-delay: -11.6s; }
.anim-text-flow-archive span:nth-of-type(44),
.anim-text-flow-directory span:nth-of-type(44) { animation-delay: -11.4s; }
.anim-text-flow-archive span:nth-of-type(45),
.anim-text-flow-directory span:nth-of-type(45) { animation-delay: -11.2s; }
.anim-text-flow-archive span:nth-of-type(46),
.anim-text-flow-directory span:nth-of-type(46) { animation-delay: -11s; }
.anim-text-flow-archive span:nth-of-type(47),
.anim-text-flow-directory span:nth-of-type(47) { animation-delay: -10.8s; }
.anim-text-flow-archive span:nth-of-type(48),
.anim-text-flow-directory span:nth-of-type(48) { animation-delay: -10.6s; }
.anim-text-flow-archive span:nth-of-type(49),
.anim-text-flow-directory span:nth-of-type(49) { animation-delay: -10.4s; }
.anim-text-flow-archive span:nth-of-type(50),
.anim-text-flow-directory span:nth-of-type(50) { animation-delay: -10.2s; }
.anim-text-flow-archive span:nth-of-type(51),
.anim-text-flow-directory span:nth-of-type(51) { animation-delay: -10s; }
.anim-text-flow-archive span:nth-of-type(52),
.anim-text-flow-directory span:nth-of-type(52) { animation-delay: -9.8s; }
.anim-text-flow-archive span:nth-of-type(53),
.anim-text-flow-directory span:nth-of-type(53) { animation-delay: -9.6s; }
.anim-text-flow-archive span:nth-of-type(54),
.anim-text-flow-directory span:nth-of-type(54) { animation-delay: -9.4s; }
.anim-text-flow-archive span:nth-of-type(55),
.anim-text-flow-directory span:nth-of-type(55) { animation-delay: -9.2s; }
.anim-text-flow-archive span:nth-of-type(56),
.anim-text-flow-directory span:nth-of-type(56) { animation-delay: -9s; }
.anim-text-flow-archive span:nth-of-type(57),
.anim-text-flow-directory span:nth-of-type(57) { animation-delay: -8.8s; }
.anim-text-flow-archive span:nth-of-type(58),
.anim-text-flow-directory span:nth-of-type(58) { animation-delay: -8.6s; }
.anim-text-flow-archive span:nth-of-type(59),
.anim-text-flow-directory span:nth-of-type(59) { animation-delay: -8.4s; }
.anim-text-flow-archive span:nth-of-type(60),
.anim-text-flow-directory span:nth-of-type(60) { animation-delay: -8.2s; }
.anim-text-flow-archive span:nth-of-type(61),
.anim-text-flow-directory span:nth-of-type(61) { animation-delay: -8s; }
.anim-text-flow-archive span:nth-of-type(62),
.anim-text-flow-directory span:nth-of-type(62) { animation-delay: -7.8s; }
.anim-text-flow-archive span:nth-of-type(63),
.anim-text-flow-directory span:nth-of-type(63) { animation-delay: -7.6s; }
.anim-text-flow-archive span:nth-of-type(64),
.anim-text-flow-directory span:nth-of-type(64) { animation-delay: -7.4s; }
.anim-text-flow-archive span:nth-of-type(65),
.anim-text-flow-directory span:nth-of-type(65) { animation-delay: -7.2s; }
.anim-text-flow-archive span:nth-of-type(66),
.anim-text-flow-directory span:nth-of-type(66) { animation-delay: -7s; }
.anim-text-flow-archive span:nth-of-type(67),
.anim-text-flow-directory span:nth-of-type(67) { animation-delay: -6.8s; }
.anim-text-flow-archive span:nth-of-type(68),
.anim-text-flow-directory span:nth-of-type(68) { animation-delay: -6.6s; }
.anim-text-flow-archive span:nth-of-type(69),
.anim-text-flow-directory span:nth-of-type(69) { animation-delay: -6.4s; }
.anim-text-flow-archive span:nth-of-type(70),
.anim-text-flow-directory span:nth-of-type(70) { animation-delay: -6.2s; }
.anim-text-flow-archive span:nth-of-type(71),
.anim-text-flow-directory span:nth-of-type(71) { animation-delay: -6s; }
.anim-text-flow-archive span:nth-of-type(72),
.anim-text-flow-directory span:nth-of-type(72) { animation-delay: -5.8s; }
.anim-text-flow-archive span:nth-of-type(73),
.anim-text-flow-directory span:nth-of-type(73) { animation-delay: -5.6s; }
.anim-text-flow-archive span:nth-of-type(74),
.anim-text-flow-directory span:nth-of-type(74) { animation-delay: -5.4s; }
.anim-text-flow-archive span:nth-of-type(75),
.anim-text-flow-directory span:nth-of-type(75) { animation-delay: -5.2s; }
.anim-text-flow-archive span:nth-of-type(76),
.anim-text-flow-directory span:nth-of-type(76) { animation-delay: -5s; }
.anim-text-flow-archive span:nth-of-type(77),
.anim-text-flow-directory span:nth-of-type(77) { animation-delay: -4.8s; }
.anim-text-flow-archive span:nth-of-type(78),
.anim-text-flow-directory span:nth-of-type(78) { animation-delay: -4.6s; }
.anim-text-flow-archive span:nth-of-type(79),
.anim-text-flow-directory span:nth-of-type(79) { animation-delay: -4.4s; }
.anim-text-flow-archive span:nth-of-type(80),
.anim-text-flow-directory span:nth-of-type(80) { animation-delay: -4.2s; }
.anim-text-flow-archive span:nth-of-type(81),
.anim-text-flow-directory span:nth-of-type(81) { animation-delay: -4s; }
.anim-text-flow-archive span:nth-of-type(82),
.anim-text-flow-directory span:nth-of-type(82) { animation-delay: -3.8s; }
.anim-text-flow-archive span:nth-of-type(83),
.anim-text-flow-directory span:nth-of-type(83) { animation-delay: -3.6s; }
.anim-text-flow-archive span:nth-of-type(84),
.anim-text-flow-directory span:nth-of-type(84) { animation-delay: -3.4s; }
.anim-text-flow-archive span:nth-of-type(85),
.anim-text-flow-directory span:nth-of-type(85) { animation-delay: -3.2s; }
.anim-text-flow-archive span:nth-of-type(86),
.anim-text-flow-directory span:nth-of-type(86) { animation-delay: -3s; }
.anim-text-flow-archive span:nth-of-type(87),
.anim-text-flow-directory span:nth-of-type(87) { animation-delay: -2.8s; }
.anim-text-flow-archive span:nth-of-type(88),
.anim-text-flow-directory span:nth-of-type(88) { animation-delay: -2.6s; }
.anim-text-flow-archive span:nth-of-type(89),
.anim-text-flow-directory span:nth-of-type(89) { animation-delay: -2.4s; }
.anim-text-flow-archive span:nth-of-type(90),
.anim-text-flow-directory span:nth-of-type(90) { animation-delay: -2.2s; }
.anim-text-flow-archive span:nth-of-type(91),
.anim-text-flow-directory span:nth-of-type(91) { animation-delay: -2s; }
.anim-text-flow-archive span:nth-of-type(92),
.anim-text-flow-directory span:nth-of-type(92) { animation-delay: -1.8s; }
.anim-text-flow-archive span:nth-of-type(93),
.anim-text-flow-directory span:nth-of-type(93) { animation-delay: -1.6s; }
.anim-text-flow-archive span:nth-of-type(94),
.anim-text-flow-directory span:nth-of-type(94) { animation-delay: -1.4s; }
.anim-text-flow-archive span:nth-of-type(95),
.anim-text-flow-directory span:nth-of-type(95) { animation-delay: -1.2s; }
.anim-text-flow-archive span:nth-of-type(96),
.anim-text-flow-directory span:nth-of-type(96) { animation-delay: -1s; }
.anim-text-flow-archive span:nth-of-type(97),
.anim-text-flow-directory span:nth-of-type(97) { animation-delay: -0.8s; }
.anim-text-flow-archive span:nth-of-type(98),
.anim-text-flow-directory span:nth-of-type(98) { animation-delay: -0.6s; }
.anim-text-flow-archive span:nth-of-type(99),
.anim-text-flow-directory span:nth-of-type(99) { animation-delay: -0.4s; }
.anim-text-flow-archive span:nth-of-type(100),
.anim-text-flow-directory span:nth-of-type(100) { animation-delay: -0.2s; }  
/* END Archive and Directory Title Animation ***********************************************************************************/   
/* FOTW CAROUSEL */

/* FOTW */
.fotw_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Adds space between items */
}

.fotw_info_box {
    flex: 1 1 calc(33.33% - 10px); /* 1/3 width minus half the gap */
    min-width: 200px; /* Adjust as needed */
}

.fotw_flyer_box {
    flex: 1 1 calc(66.67% - 10px); /* 2/3 width minus half the gap */
    min-width: 300px; /* Adjust as needed */
    display: flex; /* Convert to flex container */
    flex-wrap: wrap; /* Allow images to wrap if necessary */
    justify-content: center;
    width: 100%; /* Full width of container */  
}

.fotw_info_box_info {
    display: block;
    width: 100%;
}

.fotw_info_box_title {
    font-weight: bold;
    text-decoration: underline;
    font-size: 1.1em;
}
.fotw_info_box_text {
  
}

.fotw_flyer_box_flyer {
    margin-bottom: 10px;
    flex: 1 0 calc(50% - 10px); /* Each image takes half width with some margin */
    display: flex;
    justify-content: center;
    align-items: center; /* This ensures vertical centering as well */
    width: calc(50% - 10px); /* Adjust as per your layout */
    max-width: 350px;
    margin: 5px;  
}

.fotw_flyer_box_flyer img {
    max-width: 100%;
    height: auto;
}
  
#flyerCarousel {
    touch-action: pan-y; /* Allows vertical scrolling but not horizontal swiping */
}  
  
/* END FOTW */
  
/* CURATE */
/* Style for top-level list items */
.content > ul > li,
.content > ol > li {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0; /* Reset all margins to zero */
    padding-bottom: 5px; /* Add a small padding if needed for spacing */
}

/* Increase specificity for nested list items */
.content li > ul > li,
.content li > ol > li {
    font-weight: normal; /* Normal weight for nested items */
    font-size: 0.9em; /* Slightly smaller text for nested items */
    margin-left: 20px; /* Indent nested items */
    padding: 0; /* No padding for nested items */
    list-style-type: none; /* Remove bullets or numbers from nested items */
}

/* Further increase specificity for nested ordered lists */
.content li > ol > li {
    list-style-type: none; /* This rule ensures the "1" or any number is removed from nested ordered list items */
}
  
  
/* THREE COLUMN LAYOUT */
.three-column-section {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Gap between columns */
}

.three-column-section .column {
    flex: 1; /* This makes each column take up an equal part of the container */
    min-width: 150px; /* Prevents columns from becoming too narrow */
}

/* Optional: Adjust content_box if needed */
.three-column-section .content_box {
    /* Any additional styling for content_box if needed */
}
  
.expandable-grid .content_box {
    /* If needed, adjust this to control the overall width of the content box */
    width: 100%;
}

.expandable-grid .content {
    /* Using CSS columns */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px; /* Space between columns */
    -moz-column-gap: 20px;
    column-gap: 20px;
}

.expandable-grid .content > * {
    /* Ensures each donor name breaks to a new line within columns */
    display: inline-block;
    width: 100%;
}
.profile-photo {
    width: 100%;  /* Make the image width match its container */
    height: auto; /* Maintain the aspect ratio */
    max-width: 100%; /* Ensure the image never exceeds the container's width */
    display: block; /* Remove any inline spacing */
    object-fit: cover; /* If you want the image to cover its container while maintaining aspect ratio */
}

.callingalldjs-photo {
    width: 100%;  /* Make the image width match its container */
    height: auto; /* Maintain the aspect ratio */
    max-width: 100%; /* Ensure the image never exceeds the container's width */
    display: block; /* Remove any inline spacing */
    object-fit: cover; /* If you want the image to cover its container while maintaining aspect ratio */
}

  
/* Container to hold the row */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;  /* Align items vertically in the center */
    margin-bottom: 5px;   /* Add space below each row */
}  
/* General Styling for Stats */
.stats_titles {
    font-size: 1.1em;
    font-weight: bold;
    margin: 15px 0 5px 0;
    color: #14171A; /* Match with your primary text color */
}
.header_donor {
    font-size: 1.1em;
    font-weight: bold;
    margin: 15px 0 5px 0;
    color: #14171A; /* Match with your primary text color */
}

.stats_sub_text {
    margin: 0;  /* Remove default margin */
    font-size: 1em;
    line-height: 1.0;
    color: #665;
}  
.nested-li-remove-bullet {list-style-type: none;}
/* Specific styling for location and stats */
.stats_sub_text[id="location"] {
    display: inline;      
    flex: 0 1 300px;  /* Adjust this width as needed */
    font-weight: bold;
    white-space: nowrap; /* Prevent wrapping of text */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
}  

.stats_sub_text[id="stats"] {
    /* Make stats text align with the location text */
    display: inline;
    margin-left: 10px; /* Space between location and stats */
    flex-shrink: 0; /* Prevent stats from shrinking */  
}

/* Styling for the "view" link */
.stats_sub_text a {
    text-decoration: none;
    color: #ff9a2c; /* Color to match your theme */
    margin-left: 5px;
    font-size: 0.9em;
}
  
.wiki h3 {font-size: 1.3em; font-weight: 600;}   
.wiki-nested-ul {font-weight: 300;}
 
  

/* Media query for responsiveness */
@media (max-width: 1440px) {
    .home_body_wrapper {
        width: 90%; /* Change width for smaller screens */
    }
}
@media (max-width: 1024px) {
    .expandable-grid .content {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
/* Media query for responsiveness */
@media (max-width: 840px) {
    .home_body_wrapper {
        width: 96%; /* Change width for smaller screens */
    }
}  
/* CAROUSEL */  
@media (max-width: 768px) {
    .fotw_flyer_box_flyer {
        flex-basis: 100%; /* Full width on smaller screens */
        max-width: 100%;
        margin: 5px 0; /* Adjust margin for vertical spacing */
    }
    .profile-photo {
        /* Additional styles for smaller screens if necessary */
    } 
    .expandable-grid .content {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .stats_titles, .stats_sub_text {
        font-size: 0.9em;
    }
    .three-column-section {
        flex-direction: column;
    }
    .three-column-section .column {
        width: 100%;
        margin-bottom: 20px; /* Space between columns when stacked */
    }  
    .double {
        flex-direction: column;
    }
    .column {
        width: 100%;
        flex: none; /* Reset flex to ensure full width on smaller screens */
    }  
}  
/* Responsive adjustments */
@media (max-width: 480px) {
    .stats-row {
        flex-direction: column; /* Stack items vertically on very small screens */
        align-items: flex-start; /* Align text to the left */
    }
    .stats_sub_text[id="location"], .stats_sub_text[id="stats"] {
        flex: 0 1 20px;  /* Adjust this width as needed */
        width: 100%; /* Make them full width */
        margin: 2px 0; /* Add some vertical spacing */
    }
    .stats_sub_text[id="stats"] {
        margin-left: 0; /* No left margin on mobile */
    }
}