/* Main Content Styles */
.main {
    width: 100%;
    padding: 12rem 0 8rem;
    background: linear-gradient(to bottom, #ffffff 0%, #fef0c1 100%);
}

.content-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* Year Section Styles */
.year-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.year-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.year-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 2px solid #f0d582;
    font-weight: bold;
    color: black;
    white-space: nowrap;
}

.year-number {
    font-size: 34px;
    line-height: 38.4px;
}

.year-text {
    font-size: 24px;
}

.year-subtitle {
    font-weight: normal;
    color: black;
    font-size: 16px;
    line-height: 25.6px;
    flex: 1;
    min-width: 200px;
}

/* Card Styles */
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
}

.pickup-title {
    font-size: 18px;
    font-weight: bold;
    color: black;
    margin-bottom: 0.75rem;
}

.pickup-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.pickup-item {
    font-size: 16px;
    line-height: 25.6px;
    color: black;
}

.pickup-label {
    font-weight: bold;
}

/* Specialization Cards */
.specialization-cards {
    display: flex;
    gap: 1.25rem;
    width: 100%;
}

.specialization-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.specialization-title {
    font-size: 20px;
    font-weight: bold;
    color: black;
    line-height: 30px;
}

.specialization-description {
    font-size: 16px;
    line-height: 25.6px;
    color: black;
}

.pickup-highlight {
    background: #ecf9fe;
    border-radius: 8px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
}

/* Graduation Section */
.graduation-title {
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-bottom: 1rem;
}

.graduation-description {
    font-size: 16px;
    line-height: 25.6px;
    color: black;
}

/* Career Section */
.career-section {
    width: 100%;
}

.career-card {
    background: #ecf9fe;
    border-radius: 32px;
    border: 2px solid #d5f3ff;
    padding: 2rem;
}

.career-title {
    font-size: 19.2px;
    font-weight: bold;
    color: black;
    line-height: 30.7px;
    margin-bottom: 1rem;
}

.career-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.career-item {
    font-size: 16px;
    line-height: 25.6px;
    color: black;
}

.career-category {
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .header-container {
        padding: 0 2rem;
    }

    .content-container {
        padding: 0 2rem;
    }

    .specialization-cards {
        flex-direction: column;
    }

    .year-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .year-subtitle {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 1rem;
    }

    .content-container {
        padding: 0 1rem;
        gap: 2rem;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid #eeeeee;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .navigation.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        flex-direction: column;
        padding: 1rem;
        gap: 0.5rem;
    }


    .year-number {
        font-size: 28px;
        line-height: 32px;
    }

    .year-text {
        font-size: 20px;
    }

    .card {
        padding: 1.5rem;
    }

    .pickup-title,
    .graduation-title,
    .career-title {
        font-size: 14px;
    }

    .graduation-title-sub {
        font-size: 12px;
    }

    .specialization-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .main {
        padding: 1.5rem 0;
    }

    .content-container {
        gap: 1.5rem;
        margin-top: 80px;
    }

    .year-header {
        gap: 0.25rem;
    }

    .year-title {
        padding: 8px;
        gap: 8px;
    }

    .year-number {
        font-size: 24px;
        line-height: 28px;
    }

    .year-text {
        font-size: 18px;
    }

    .year-subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .card {
        padding: 1rem;
    }

    .pickup-item,
    .specialization-description,
    .graduation-description,
    .career-item {
        font-size: 14px;
        line-height: 22px;
    }

    .career-card {
        border-radius: 16px;
        padding: 1rem;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Print styles */
@media print {
    .header {
        position: static;
        box-shadow: none;
    }

    .mobile-menu-btn {
        display: none;
    }

    .navigation {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        flex-direction: row;
        gap: 1rem;
    }
}