/* =====================Portfolio ========================*/

/* ------------------ Portfolio Gallery ------------------ */
#featured-projects {
  overflow: hidden;
  margin: auto;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.portfolio-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1.5fr));
     padding-top: 5%;
gap: 1%;
box-sizing: border-box;
}

/* Individual portfolio project items - larger version */
.project-item {
  transition: transform 1s ease;
    background: #ffe1ec; /* Light pink background */
    border: 2px solid #FF69B4; /* Slightly thicker border */
    width: 100%; /* Keep full width of the parent container */
    height: 350px; /* Add a fixed height for consistency */
    box-sizing: border-box; /* Include padding and border in width/height calculations */
    text-align: center; /* Center the text horizontally */
    display: flex; /* Use Flexbox layout for internal content */
    flex-direction: column; /* Stack children vertically */
    justify-content: space-between; /* Distribute space evenly between children */
    align-items: center; /* Center children horizontally */
    overflow: hidden; /* Clip any overflowing content */
}

.project-item img {
width: 100%;
    aspect-ratio: 1 / 1; /* Maintain a 1:1 aspect ratio (height equals width) */
object-fit: cover;
margin: auto;
}

.portfolio-tags {
    margin: 5px 0; /* Vertical margin around the container */
    display: flex; /* Use Flexbox for layout */
    flex-wrap: wrap; /* Allow tags to wrap to the next line if needed */
    justify-content: center; /* Center tags horizontally */
    gap: 5px; /* Add spacing between tags */
    align-content: flex-start; /* Start aligning tags from the top */
    padding-bottom: 5px; /* Ensure the last tag is offset 5px from the bottom */
    box-sizing: border-box; /* Include padding in the element's dimensions */
}


.project-item p, h4, .project-item a {
text-decoration: none;
font-size: 1em;
width: 80%;
max-width: 80%;
text-overflow: wrap;
margin: 5px auto;
color: #333;
}
.project-item p{
     z-index:10000;
}
.project-item:hover, .project-item p:hover {
  transition: ease-in-out 0.5s;
transform: scale(1.01);
height: auto;
}

.project-item img:hover{
     opacity: .5;
}

.flower-row {
margin: auto;
grid-column: 1 / -1; /* Spans from the first to the last column */
display: flex;
flex-wrap: wrap;
justify-content: center; /* Centers the flower items within the row */
gap: 20px; /* Add some space between flower items */
margin-bottom: 40px; /* Add spacing at the bottom */
}


/* Filter Button Styles */
.filter-button-container {
margin: 0% 25% 0% 10%;
display: flex;
justify-content: left;
gap: 1rem;
height: 3rem;
}

.filter-link {
padding: 10px 20px;
background-color: #c20064;
color: #fff;
border-radius: 10px 10px 0 0;
border: 2px solid #333;
border-bottom: 2px solid #FF69B4;
font-size: smaller;
font-weight: bold;
text-decoration: none;
}

.filter-link:hover {
background-color: #FF1493;
border-color: #FF69B4;
}

.filter-link.active {
background-color: #ffe1ec;
color: #FF1493;
border: 3px solid #333;
border-bottom: 3px solid #FF69B4;
transform: scale(1.1);
}

/* Tag Styles */
.tag, .award {
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
font-size: 0.8em;
border-radius: 15px;
}

.tag {
background-color: #FF69B4;
color: white;
}

.award {
background-color: #0077cc;
color: #fff;
border: 3px solid lightskyblue;
}

/* Responsive Styles */
@media (max-width: 768px) {
.projects-grid {
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}
}