/* Project Carousel Structure Fix
 * Ensures proper alignment and prevents overflow issues in the project carousel
 */

.projects-container {
    overflow-x: hidden; /* Make sure no horizontal overflow happens */
    padding: 30px 0 40px; /* Add extra padding at bottom to account for dots */
}

/* Fix carousel transition to ensure smooth scrolling */
.projects-carousel {
    transform-style: preserve-3d; /* Helps with smoother transitions */
    backface-visibility: hidden; /* Prevents flickering */
    will-change: transform; /* Optimizes for animation */
}

/* Ensure consistent spacing for project pages */
.projects-page {
    min-width: 100%;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

/* Fix for project content to prevent text overflow */
.project-content {
    overflow: visible;
    height: auto;
    flex-grow: 1;
}

/* Prevent horizontal overflow for any project element */
.project-title-text, 
.project-description, 
.project-technologies, 
.project-card-footer {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Fix for project tech tags to prevent overflow */
.project-tech-tag {
    display: inline-block;
    margin: 2px;
    white-space: nowrap;
}

.project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .projects-page {
        grid-template-columns: 1fr;
    }
}

/* Media query for smaller screens */
@media screen and (max-width: 480px) {
    .project-card-footer {
        flex-direction: column;
    }
}