* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h2 {
    text-align: center;
    margin: 20px;
}

.card-grid {
    border: none;
    margin: 0 auto;
    padding: 10px;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Responsive grid layout */
    gap: 20px; /* Space between grid items, reduced from 50px */
}

.ach-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 1rem; /* Adjust the gap between items as needed */
    justify-items: center; /* Center items horizontally */
}


.achievement-grid {
    border: none;
    margin: 0 auto;
    padding: 5px;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Responsive grid layout */
    gap: 10px; /* Space between grid items, reduced from 50px */
}

.grid {
    border: none;
    margin: 0 auto;
    padding: 10px;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Responsive grid layout */
    gap: 50px; /* Space between grid items, reduced from 50px */
}

.tutorial-grid {
    border: none;
    margin: 0 auto;
    padding: 10px;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive grid layout */
    gap: 50px; /* Space between grid items, reduced from 50px */
}

.grid-item {
    position: relative; /* Allows absolute positioning of child elements */
    overflow: hidden;
    border: none; /* Optional: Border around each grid item */
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
}

.card-grid-item {
    position: relative; /* Allows absolute positioning of child elements */
    overflow: hidden;
    border: 1px solid lightgrey;
    border-radius: 10px;
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    background-color: white;
    padding: 10px;
    height: 130px;
}

.modal-grid-item {
    position: relative; /* Allows absolute positioning of child elements */
    overflow: hidden;
    border: none;
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    background-color: white;
    padding: 0px;
    height: 150px;
}

.modal-grid-item img {
    width: auto;
    height: 80%; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Cover the container */
    opacity: 1;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 40px;
}

.achievement-grid-item {
    position: relative; /* Allows absolute positioning of child elements */
    overflow: hidden;
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    padding: 10px;
    height: 130px;
    background-color: transparent !important;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
    z-index: 1; /* Ensure the overlay is on top of the image */
}

.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle grey shadow */
}

.card-desc-container {
    position: absolute; /* Position absolutely within the grid item */
    bottom: 5px; /* Space from the bottom of the grid item */
    width: 100%; /* Full width of the grid item */
    padding: 0px; /* Padding around the text */
    margin-bottom: 20px;
    box-sizing: border-box; /* Ensure padding does not overflow the container */
    background-color: rgba(245, 247, 248, 0.0); /* Semi-transparent background */
}

.clickable-grid-item:hover {
    transition: transform 0.8s ease; /* Smooth transition for hover effect */
}

.clickable-grid-item:hover {
    transform: scale(1.02); /* Slight zoom-in effect */
}

.clickable-grid-item:hover img {
    transform: scale(1.05); /* Slight zoom-in effect for the image */
}


.grid-item img {
    width: 100%; /* Full width of the grid item */
    max-width: 200px; /* Maximum width of images */
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Cover the container */
    opacity: 1;
}

.card-grid-item img {
    width: 100%; /* Full width of the grid item */
    max-width: 200px; /* Maximum width of images */
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Cover the container */
    opacity: 1;
}

.achievement-grid-item img {
    width: 100%; /* Full width of the grid item */
    max-width: 1500px; /* Maximum width of images */
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Cover the container */
    opacity: 1;
}


.clickable-grid-item img {
    cursor: pointer;
}

.desc-container {
    position: absolute; /* Position absolutely within the grid item */
    bottom: 5px; /* Space from the bottom of the grid item */
    width: 100%; /* Full width of the grid item */
    padding: 0px; /* Padding around the text */
    margin-bottom: 20px;
    box-sizing: border-box; /* Ensure padding does not overflow the container */
    background-color: rgba(245, 247, 248, 0.5); /* Semi-transparent background */
}

/* New wrapper to align title and description vertically */
.ach-desc-wrapper {
    position: absolute;
    bottom: -10px;
    width: 100%;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 20px;
}

.ach-desc-container {
    width: 100%;
    text-align: center;
}



.carrydesc,
.sizedesc {
    text-align: center;
    margin: 0; /* Remove default margin */
}

.hover-label {
    position: absolute; /* Absolute positioning to place it independently */
    background-color: #2e2d2d; /* Black background */
    color: white; /* White text */
    padding: 5px 20px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    font-size: 12px; /* Font size */
    white-space: nowrap; /* Ensure text stays on one line */
    display: none; /* Hidden by default */
    z-index: 10; /* Ensure it appears above other elements */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle grey shadow */
}

.card-grid-item:hover .hover-label {
    opacity: 1; /* Fade in the label when hovered */
}

.card-grid-item {
    cursor: pointer;
}


/* Media query for very narrow viewports */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid layout */
    }
}


.add-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: lightgrey;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0px; /* Adjust to control the button's position */
    right: 0px; /* Adjust to control the button's position */
    z-index: 10; /* Ensure it appears above other elements */
}