.social-link .social-icon {
  filter: brightness(0) saturate(100%) 
          invert(36%) sepia(87%) saturate(614%) hue-rotate(159deg) brightness(94%) contrast(92%);
  transition: filter 0.2s ease-in-out; 
}


.social-link:hover .social-icon {
  filter: brightness(0) saturate(100%) 
          invert(36%) sepia(87%) saturate(614%) hue-rotate(159deg) brightness(75%) contrast(100%);
}


.social-link:focus-visible .social-icon {
  filter: brightness(0) saturate(100%) 
          invert(36%) sepia(87%) saturate(614%) hue-rotate(159deg) brightness(75%) contrast(100%);
}

.card img {
	width:100%;
	height:auto;
}

/* two column photos */
			.two-grid-container {
  display: grid;
  grid-template-columns: 1fr; /* Default to 1 column for mobile */
  gap: 20px; /* Space between columns */
}
			
			.two-grid-container img {
			width:100%;
			max-width:600px;
			height:auto;
			}

@media (min-width: 768px) {
  .two-grid-container {
    grid-template-columns: 1fr 1fr; /* Two equal columns for tablet/desktop */
  }
}
			
		.grid-item img {
			width:100%;
			height:auto;
			object-fit: cover;
			}
			
			/* facilities section */
			#facilities {
			background: aliceblue;
  padding: 20px;
			}
			.art-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px;
    align-items: center;
    margin: 40px auto;
}

/* Desktop: Images stack vertically in the left column */
.feature-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
			max-width:500px;
}

/* The "Card" Styling */
.feature-card {
    background: #f9f9f9;
    padding: 40px;
    border-left: 5px solid #002a5b; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.feature-card h3 {
    margin-top: 0;
    color: #002a5b;
}

/* MOBILE TRANSFORMATION */
@media (max-width: 768px) {
    .art-feature-grid {
        grid-template-columns: 1fr; /* Stack main columns vertically */
    }

    .feature-images {
        display: grid;
        /* grid-template-columns: 1fr 1fr;  Images move to 50% side-by-side */
        order: 2; /* Moves images below the text on mobile */
    }

    .feature-card {
        order: 1; /* Moves text to the top on mobile */
        width: 100%;
    }
}

.checklist-checks li::before {
  content: '✓';
  display: inline-block;
  width: 1em;
  margin-left: -1em; /* Position it where the bullet was */
  color: green;
  font-weight: bold;
}

.checklist li::before {
 
}

			/* The Masonry Grid for student work */
			/* Add this to your gallery CSS */
.lazy-img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Once the image is loaded, the browser handles the display */
.lazy-img[src] {
    opacity: 1;
}


.masonry-grid {
    column-count: 3; /* 3 columns on desktop */
    column-gap: 15px;
    width: 100%;
}

.masonry-item {
			 background-color: #f0f0f0; /* Gray box appears until image loads */
    min-height: 200px; /* Prevents layout collapse */
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}

.masonry-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.masonry-item:hover img {
    transform: scale(1.05);
}
			.overlay {
			font-size: .85rem;
  padding-left: 10px;
			}

/* Lightbox Styling */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    margin-top: 5vh;
    object-fit: contain; /* IMPORTANT: Ensures art is never cropped */
}

/* Navigation and Close */
.close-lightbox { position: absolute; top: 20px; right: 35px; color: white; font-size: 40px; cursor: pointer; }
.lb-prev, .lb-next { position: absolute; top: 50%; color: white; font-size: 40px; padding: 16px; cursor: pointer; text-decoration: none; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }

/* Responsive Tweak */
@media (max-width: 800px) { .masonry-grid { column-count: 2; } }
@media (max-width: 500px) { .masonry-grid { column-count: 1; } }


.testimonials p.quote {
		overflow:scroll;
		display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;  
		font-size: 1.0rem;
  line-height: 1.8rem;
  color: #002144;
  margin-bottom:15px;
  padding-top: 15px;
		
		}
		.testimonials .credit strong.name {
		font-size:1.5rem;
		}
		
		.item img {
  padding-bottom: 10px;
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 20px;
		}

		
@media only screen and (min-width: 601px) and (max-width: 959px) {


.quote {
		overflow:scroll;
		display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
		}
		}
		

.shadow img {
		box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2);
		
	}
	
						.image-container img {
  display: block; /* Converts the image from inline to a block element */
  margin: 0 auto; /* Centers the image horizontally */
  width: 90%; /* Adjust this percentage to control the surrounding side white space */
  
  height: auto;
}

		.image-container {
  padding: 20px 0; /* Creates vertical white space */
  text-align: center; /* Fallback for older browsers */
}
			@media (max-width: 768px) {
  .image-container img {
    display: block;
    margin: 0 auto;
    width: 90%;
  }
}