.cta-button {
 transition: background-color 0.3s ease-in-out;
 }

 .cta-button:hover {
 background-color: #c7892f !important; /* Slightly darker orange */
 }

.conti-story h2 {
 margin-bottom: 20px;
}

.conti-story p {
 margin-bottom: 40px; /* Increased margin for more spacing */
}

button.cta-button {
 margin-top: 40px; /* Increased margin for better separation */
}

html {
 scroll-behavior: smooth;
}

/* General section styles */
#meet-our-staff {
 padding: 50px;
 background-color: #e7e4de;
 text-align: center;
color: #322f33;
}

#meet-our-staff h2 {
 font-size: 4.5rem;
 margin-bottom: 30px;
}

/* General Staff Grid Styles */
.staff-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 20px; /* Slightly reduced gap between cards */
 justify-items: center;
 padding: 20px;
background-color: #c7c2b8;
}

/* Staff Card Styles */
.staff-card {
 padding: 20px 20px 40px; /* Add spacing at the top */
 background: linear-gradient(145deg, #e7e4de, #f1f1f1);
 border: 1px solid #ddd;
 border-radius: 10px;
 overflow: hidden;
 width: 100%;
 max-width: 280px; /* Max width for each card */
 text-align: center;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s, box-shadow 0.3s;
}

.staff-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Staff Photo */
.staff-photo {
 margin: 20px auto; /* Space above and below the image */
 width: 150px; 
 height: 150px; 
 border-radius: 50%;
 object-fit: cover; /* Ensure it doesn't distort */
object-position: center top; /* Adjusts focus to the top of the image */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Staff Name */
.staff-name {
 font-size: 1.8rem;
 font-weight: 600;
 color: #322f33;
 margin: 5px 0;
}

/* Staff Role */
.staff-role {
 font-size: 1rem;
 color: #666;
 margin-bottom: 15px;
}

/* Add a subtle divider line */
.staff-card::after {
 content: "";
 display: block;
 height: 2px;
 margin: 10px auto;
 background: #f26741; /* Subtle accent color for divider */
 width: 80%;
 opacity: 0.7;
}

/* Hover Animation on Staff Card */
.staff-card:hover .staff-name {
 color: #f26741; /* Highlight name on hover */
}

.staff-card:hover .staff-role {
 color: #788557; /* Highlight role on hover */
}

.custom-link {
 color: #99c7c6 !important;
 text-decoration: none !important;
 font-weight: bold;
}

.custom-link:hover {
 text-decoration: none !important;
color: #b87c9e !important;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
 .staff-card {
 max-width: 100%;
 }

 .staff-photo {
 max-width: 100px;
 height: 100px;
 }

 .staff-name {
 font-size: 1rem;
 }

 .staff-role {
 font-size: 0.8rem;
 }
}


/* Modal Styles */
.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(50, 47, 51, 0.9); /* Slightly transparent dark background */
 justify-content: center;
 align-items: center;
overflow-y: auto; /* Ensures the modal itself is scrollable */
}

/* Modal Content */
.modal-content {
 background: linear-gradient(145deg, #99c7c6, #e7e4de); /* Fun gradient using brand colors */
 padding: 30px;
 border-radius: 12px;
 max-width: 800px;
max-height: 90vh; /* Ensures the modal is not taller than the viewport */
 width: 90%;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 position: relative;
 text-align: center;
 color: #322f33;
 font-family: Arial, sans-serif;
 animation: fadeIn 0.3s ease-out;
overflow-y: auto; /* Adds scroll behavior for long content */
}

/* Close Button */
.modal-close {
 position: absolute;
 top: 15px;
 right: 15px;
 font-size: 1.5rem;
 color: #f26741; /* Fun pop of orange */
 cursor: pointer;
 background: none;
 border: none;
 transition: transform 0.3s, color 0.3s;
}

.modal-close:hover {
 color: #b87c9e; /* Fun hover effect */
 transform: rotate(90deg); /* Add some flair */
}

/* Modal Header */
.modal-header {
 margin-bottom: 20px;
}

.modal-header h3 {
 font-size: 3rem;
 margin-bottom: 5px;
 color: #322f33;
 font-weight: bold;
}

.modal-header .role {
 font-size: 1.2rem;
 color: #788557; /* olive for contrast */
 font-weight: 600;
}

/* Modal Body */
.modal-body p {
 font-size: 1.5rem;
 line-height: 1.8;
 margin-bottom: 20px;
 color: #322f33;
}

/* Modal Photo */
.modal-body img {
 width: 150px; /* Increase size */
 height: 150px; /* Maintain aspect ratio */
 margin: 0 auto 20px;
 border-radius: 50%;
 border: 4px solid #b87c9e; /* Pink border */
 object-fit: cover;
object-position: center top; /* Adjusts focus to the top of the image */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* Add a subtle footer area */
.modal-footer {
 background-color: #f26741; /* Footer background color */
 color: white; /* Text color */
 text-align: center; /* Centers the text */
 padding: 15px 20px; /* Add some padding */
 font-size: 1.2rem; /* Adjust font size */
 border-radius: 0 0 8px 8px; /* Rounds the bottom corners to match modal */
 width: 100%; /* Ensures the footer spans the full width of the modal */
 box-sizing: border-box; /* Includes padding in the width calculation */
}


/* Responsive Styles */
@media (max-width: 768px) {
 .modal-content {
max-height: 80vh; /* Smaller viewport adjustment */
 width: 95%;
 padding: 20px;
 }

 .modal-header h3 {
 font-size: 1.5rem;
 }

 .modal-body img {
 width: 100px;
 height: 100px;
 }

 .modal-body p {
 font-size: 1rem;
 }

 .modal-footer {
 font-size: 0.9rem;
 }
}

/* Keyframes for Fade In Effect */
@keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(-20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}



@media (max-width: 768px) {
 .conti-story h2 {
 font-size: 2rem;
 }

 .conti-story p {
 font-size: 1rem;
 margin-bottom: 20px;
 }

 .cta-button {
 padding: 10px 20px;
 font-size: 0.9rem;
 }

 .conti-story img {
 width: 30px; /* Make the icon smaller on mobile */
 }
}