/* ===== Body & Layout ===== */
body {
    background: linear-gradient(135deg, #13171c 0%, #1b2028 100%);
    color: #f5e05a; /* softer yellow */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

#main {
    text-align: center;
    padding: 2vw;
}

/* ===== Headings ===== */
#main h1 {
    font-size: clamp(30px, 6vw, 80px);
    margin: 0.5vw 0;
    font-weight: 700;
}

#main h2 {
    font-size: clamp(24px, 5vw, 60px);
    margin: 1vw 0;
    font-weight: 600;
}

#main h3, #main h5, #main h6 {
    font-weight: 500;
    margin: 0.5vw 0;
}

/* ===== Horizontal Line ===== */
#main_hr {
    border-style: dashed;
    border-width: 0.5vw;
    margin: 2vw 0;
}

/* ===== Days Counter ===== */
#days-count {
    font-size: clamp(24px, 4vw, 60px);
    font-weight: bold;
}
/* ===== Grid Layout for Cards ===== */
#main .link-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* increased gap for clearer spacing between cards */
    gap: 3rem;
    row-gap: 3.5rem;
    column-gap: 3rem;
    width: 100%;
    max-width: 1200px;
    margin: 2vw auto; /* center the grid */
    padding: 0 1vw;
    align-items: start; /* prevent stretched items from visually touching */
}

/* ===== Individual Cards ===== */
#main .link-card {
    background-color: #1a1f27;
    border-radius: 15px;
    padding: 1.5em;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* ensures all cards in row are same height */
    margin: 0; /* rely on grid gap for spacing */
}

#main .link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ===== Card Images ===== */
#main .link-card a img {
    width: 100%;
    height: auto;
    border-radius: 10%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#main .link-card a:hover img {
    transform: scale(1.05) rotate(var(--rotate, 0deg));
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.4);
}

/* ===== Card Labels ===== */
.link-label {
    margin-top: 1em;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: bold;
    color: #f5e05a;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 900px) {
    #main .link-row {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 600px) {
    #main .link-row {
        grid-template-columns: 1fr;
        padding: 0 2vw;
    }

    #main .link-card {
        padding: 1em;
    }
}
ul {
    list-style: none;
    padding-left: 0;
    font-size: 70%
}
/* ===== Learning Path Image ===== */
.container-fit {
  width: 500px; /* Specific width required for object-fit to work effectively */
  height: 300px; /* Specific height required for object-fit to work effectively */
  border: 1px solid black;
}

.container-fit img {
  width: 100%; /* Forces the image to take up the full width/height defined by the container */
  height: 100%;
  object-fit: contain; /* Scales the image to fit entirely within the container, preserving aspect ratio (may leave empty space) */
  /* If you want it to cover the whole container space (cropping the image), use object-fit: cover; */
}

.path-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}