/* General Body and Base Styles */
html {
    scroll-behavior: smooth; /* Added for smooth scrolling to anchor links */
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    color: #4a5568; /* Default text color */
}

.site-bg {
    background-color: #f7fafc; /* bg-gray-50 */
}

.bg-white {
    background-color: #ffffff;
}

/* Container for max width and horizontal centering */
.container {
    max-width: 72rem; /* max-w-6xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

/* Section Padding */
.section-padding {
    padding-top: 4rem; /* py-16 */
    padding-bottom: 4rem; /* py-16 */
}

/* Grid Layouts */
.grid-3-cols {
    display: grid;
    gap: 2rem; /* gap-8 */
}
@media (min-width: 768px) { /* md */
    .grid-3-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg - for project cards */
    .grid-3-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* --- Navigation Bar --- */
.nav-bar {
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.nav-container {
    max-width: 72rem; /* max-w-6xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    justify-content: space-between;
}

.nav-flex-group {
    display: flex;
    gap: 1.75rem; /* space-x-7 */
}

.nav-logo {
    display: flex;
    align-items: center;
    padding-top: 1rem; /* py-4 */
    padding-bottom: 1rem; /* py-4 */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
}

.nav-logo-text {
    font-weight: 600; /* font-semibold */
    color: #6b7280; /* text-gray-500 */
    font-size: 1.125rem; /* text-lg */
}

.nav-links-desktop {
    display: none; /* hidden */
    align-items: center;
    gap: 0.25rem; /* space-x-1 */
}
@media (min-width: 768px) { /* md */
    .nav-links-desktop {
        display: flex;
    }
}

.nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    transition-property: color, background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    border-radius: 0.375rem;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-link i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.nav-link:hover {
    color: #3b82f6; /* hover:text-blue-500 */
    background-color: #eff6ff; /* Added hover background color */
}

.nav-link-active {
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem; /* px-3 */
    color: #ffffff; /* Changed text color to white for active state */
    background-color: #3b82f6; /* Added solid background color for active state */
    /* Removed border-bottom-width and border-color */
    font-weight: 600; /* font-semibold */
    border-radius: 0.375rem; /* rounded-md */
    text-decoration: none; /* Explicitly remove underline */
}

.nav-toggle-mobile {
    display: flex;
    align-items: center;
}
@media (min-width: 768px) { /* md */
    .nav-toggle-mobile {
        display: none;
    }
}

.mobile-nav-button {
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-nav-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: #6b7280; /* text-gray-500 */
    stroke: currentColor;
}

.mobile-nav-menu {
    display: none; /* hidden */
}
.mobile-nav-menu.is-hidden {
    display: none;
}
.mobile-nav-menu:not(.is-hidden) {
    display: block; /* For toggling visibility */
}

.mobile-nav-list {
    background-color: #ffffff;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    color: #4a5568;
}

.mobile-nav-item i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.mobile-nav-item:hover {
    background-color: #eff6ff; /* hover:bg-blue-50 */
}

.mobile-nav-item-active {
    color: #3b82f6; /* text-blue-500 */
    background-color: #eff6ff; /* bg-blue-50 */
    font-weight: 600; /* font-semibold */
}

/* --- Hero Section --- */
.hero-section {
    color: #ffffff;
    padding-top: 4rem; /* py-16 */
    padding-bottom: 4rem; /* py-16 */
}

.hero-gradient-bg {
    background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 768px) { /* md */
    .hero-content {
        flex-direction: row;
    }
}

.hero-image-wrapper {
    margin-bottom: 2rem; /* mb-8 */
}
@media (min-width: 768px) { /* md */
    .hero-image-wrapper {
        width: 50%; /* md:w-1/2 */
        margin-bottom: 0; /* md:mb-0 */
    }
}

.hero-image {
    border-radius: 9999px; /* rounded-full */
    height: 16rem; /* h-48 */
    width: 16rem; /* w-48 */
    object-fit: cover;
    /* Removed margin, box-shadow, and border properties, now handled by .hero-image-gradient-wrapper */
}
/* Removed media query for hero-image margins, now handled by .hero-image-gradient-wrapper */

.hero-text-content {
    text-align: center;
}
@media (min-width: 768px) { /* md */
    .hero-text-content {
        width: 50%; /* md:w-1/2 */
        text-align: left; /* md:text-left */
    }
}

.hero-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
}
@media (min-width: 768px) { /* md */
    .hero-title {
        font-size: 3rem; /* md:text-5xl */
    }
}

.hero-subtitle {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 1.5rem; /* mb-6 */
}

.hero-button {
    background-color: #ffffff;
    color: #3b82f6; /* text-blue-500 */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    border-radius: 9999px; /* rounded-full */
    font-weight: 600; /* font-semibold */
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    text-decoration: none; /* Remove underline for links acting as buttons */
    display: inline-block; /* Allows padding and margin */
}

.hero-button:hover {
    background-color: #f3f4f6; /* hover:bg-gray-100 */
}

/* New div for gradient border around the hero image */
.hero-image-gradient-wrapper {
    position: relative;
    height: 17rem; /* 12rem image + 0.5rem border on each side */
    width: 17rem;
    border-radius: 9999px; /* Circular shape */
    display: flex; /* For centering the image inside */
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%); /* Gradient from hero section */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl from original hero-image */
    margin-left: auto; /* Center the wrapper horizontally */
    margin-right: auto; /* Center the wrapper horizontally */
}

@media (min-width: 768px) { /* md */
    .hero-image-gradient-wrapper {
        margin-left: 2rem; /* Added margin to push it from the left */
        margin-right: 0; /* md:mx-0 */
    }
}

/* --- Section Headers --- */
.section-header {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

.section-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1a202c; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
}

.section-divider {
    width: 6rem; /* w-24 */
    height: 0.25rem; /* h-1 */
    background-color: #3b82f6; /* bg-blue-500 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem; /* mb-6 */
}

.section-description {
    font-size: 1.125rem; /* text-lg */
    color: #4a5568; /* text-gray-600 */
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

/* --- Feature Cards (Who Are We?) --- */
.card-feature {
    background-color: #f7fafc; /* bg-gray-50 */
    padding: 1.5rem; /* p-6 */
    border-radius: 1.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition-property: box-shadow;
    transition-duration: 300ms;
    transition-timing-function: ease;
    text-align: center; /* Added for icon/text centering */
}

.card-feature:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.feature-icon {
    color: #3b82f6; /* text-blue-500 */
    margin-bottom: 1rem; /* mb-4 */
    font-size: 2.5rem; /* text-4xl - for emoji size */
}

.feature-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.75rem; /* mb-3 */
}

.feature-text {
    color: #4a5568; /* text-gray-600 */
}

/* --- Team Members Carousel --- */
.carousel-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30rem; /* Увеличиваем высоту, чтобы вместить большее фото и градиент */
}

.custom-carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex; /* To allow members to be absolute children within this */
    justify-content: center; /* Center active member initially */
    align-items: center; /* Vertically center active member */
}

.member-card {
    transition: all 0.5s ease-in-out;
    position: absolute; /* Allows for overlapping and transformation */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Center and scale down by default */
    opacity: 0; /* Hidden by default until activated */
    filter: blur(5px);
    z-index: 1; /* Default z-index */

    /* Убираем видимость самой карточки */
    background-color: transparent; /* Делаем фон прозрачным */
    border-radius: 0; /* Убираем закругление */
    box-shadow: none; /* Убираем тень */
    padding: 0; /* Убираем отступы, чтобы карточка не занимала лишнее место */
    text-align: center;
    width: auto; /* Ширина будет зависеть от контента */
    height: auto; /* Высота будет зависеть от контента */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.member-card.active-member {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: blur(0);
    z-index: 2; /* Bring active member to front */
}

.member-card.prev-member {
    left: 15%; /* Position to the left */
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.3;
    filter: blur(3px);
    z-index: 0; /* Send to back */
}

.member-card.next-member {
    left: 85%; /* Position to the right */
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.3;
    filter: blur(3px);
    z-index: 0; /* Send to back */
}

/* Новый div для градиентной обводки вокруг изображения */
.member-image-wrapper-gradient {
    position: relative; /* Чтобы inner image мог быть абсолютно позиционирован */
    height: 17.0rem; /* 15rem + 1.5rem (для обводки 0.75rem с каждой стороны) */
    width: 17.0rem; /* 15rem + 1.5rem */
    border-radius: 9999px; /* Круг */
    display: flex; /* Для центрирования изображения внутри */
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #3b82f6, #a777e3); /* Градиент */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5rem; /* Отступ от инфо-блока */
}

.member-image {
    height: 16rem; /* Размер самого изображения */
    width: 16rem; /* Размер самого изображения */
    border-radius: 9999px; /* Круг */
    object-fit: cover;
    /* Убираем border-width, border-color, padding и box-shadow отсюда,
       так как они теперь у member-image-wrapper-gradient */
    /* margin-bottom теперь у member-image-wrapper-gradient */
}


.member-info {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border: 4px solid #bfdbfe; /* Рамка для инфо-блока */
    border-radius: 2.0rem; /* Скругление углов для info-блока */
    background-color: #ffffff;
    box-shadow: 0 10px 8px rgba(0,0,0,0.1);
    margin-top: 0.5rem; /* Отступ между фото-оберткой и инфо-блоком */
    padding-bottom: 0.5rem;
    max-width: 15rem;
}

.member-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.25rem;
}

.member-role {
    color: #3b82f6;
    font-weight: 600;
    font-size: 1.125rem;
    display: block;
    margin-bottom: 0.5rem;
}

.member-quote {
    color: #4a5568;
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 0.25rem;
    max-width: 12rem;
}

/* Carousel Navigation Buttons */
.carousel-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    padding: 0.5rem; /* p-2 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    z-index: 10; /* z-10 */
    border: none;
    cursor: pointer;
    font-size: 1.25rem; /* text-xl */
    color: #3b82f6; /* text-blue-500 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* Fixed width for circular button */
    height: 2.5rem; /* Fixed height for circular button */
}

.carousel-nav-button:hover {
    background-color: #f3f4f6; /* hover:bg-gray-100 */
}

.carousel-nav-left {
    left: 0;
}

.carousel-nav-right {
    right: 0;
}

/* --- Project Cards --- */
.card-project {
    background-color: #f8fafc;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    overflow: hidden; /* Ensures image corners are rounded */
    transition-property: transform, box-shadow;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

.card-project:hover {
    transform: translateY(-0.25rem); /* hover:translate-y-1 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.project-image {
    width: 100%;
    height: 12rem; /* h-48 */
    object-fit: cover;
}

.project-content {
    padding: 1.5rem; /* p-6 */
    padding-top: 0;
}

.project-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1a202c; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
    margin-top: 0.5rem;
}

.project-description {
    font-size: 0.875rem; /* text-sm */
    color: #4a5568; /* text-gray-600 */
    margin-bottom: 1rem; /* mb-4 */
}

.project-link {
    color: #3b82f6; /* text-blue-500 */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    transition-property: color;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

.project-link:hover {
    color: #2563eb; /* hover:text-blue-700 */
}

/* --- News Cards --- */
.news-list-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Adds space between stacked news cards */
    max-width: 100rem; /* Optional: Limit max width for readability on very wide screens */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
}

.card-news {
    background-color: #ffffff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: transform, box-shadow;
    transition-duration: 300ms;
    transition-timing-function: ease;
    display: flex; /* Changed to flex for image and content side-by-side */
    flex-direction: column; /* Default to column for smaller screens */
    width: 100%; /* Ensure it takes full width of its container */
    overflow: hidden; /* Ensures image corners are rounded */
}

@media (min-width: 768px) { /* md */
    .card-news {
        flex-direction: row; /* Arrange image and content in a row on larger screens */
    }
}

.card-news:hover {
    transform: translateY(-0.5rem); /* hover:translate-y-2 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.news-image {
    width: 100%; /* Full width on small screens */
    height: 1rem; /* Fixed height for consistency */
    object-fit: cover;
    border-top-left-radius: 0.75rem; /* Match card border-radius */
    border-top-right-radius: 0.75rem; /* Match card border-radius */
}

@media (min-width: 768px) { /* md */
    .news-image {
        width: 30%; /* Image takes 30% width on larger screens */
        height: auto; /* Adjust height automatically */
        border-top-right-radius: 0; /* Remove top-right radius when in row layout */
        border-bottom-left-radius: 0.75rem; /* Add bottom-left radius for row layout */
    }
}

.news-content {
    padding: 2rem; /* p-8 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Allows content to take remaining space */
}

.news-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1a202c; /* text-gray-800 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.news-date {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 1rem; /* mb-4 */
}

.news-summary {
    font-size: 1rem; /* text-base */
    color: #4a5568; /* text-gray-600 */
    margin-bottom: 1.5rem; /* mb-6 */
    flex-grow: 1; /* Allows summary to take available space */
}

.news-link {
    color: #3b82f6; /* text-blue-500 */
    font-weight: 600; /* font-semibold */
    text-decoration: none;
    transition-property: color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    align-self: flex-start; /* Aligns link to the start */
}

.news-link:hover {
    color: #2563eb; /* hover:text-blue-700 */
}

/* --- Lightbox Styles --- */
/* Lightbox Styles */
.lightbox {
    /* Эти свойства уже есть, но я их включил для наглядности */
    display: none;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.image-container {
    display: flex; /* Используем Flexbox здесь */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    width: 100%; /* Занимает всю ширину */
    height: 100%; /* Занимает всю высоту */
}

.lightbox-content {
    /* Теперь это изображение внутри .image-container */
    display: block;
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    animation-name: zoom;
    animation-duration: 0.6s;
    /* Убираем margin: auto, так как Flexbox делает центрирование за вас */
}



@keyframes zoom {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}


@keyframes zoom {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.prev-btn, .next-btn {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

.next-btn {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev-btn:hover, .next-btn:hover {
    background-color: rgba(0,0,0,0.8);
}

/* --- Footer --- */
.site-footer {
    background-color: #1a202c; /* bg-gray-900 */
    color: #ffffff;
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* py-8 */
    text-align: center;
}

.footer-content {
    font-size: 0.875rem; /* text-sm */
}


/* --- Student Cards (for /team page) --- */
.card-student {
    background-color: #f4f3ff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    overflow: hidden;
    transition-property: transform, box-shadow;
    transition-duration: 300ms;
    transition-timing-function: ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0.5rem; /* Add some padding at the bottom */
}

.card-student:hover {
    transform: translateY(-0.5rem); /* hover:translate-y-2 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.student-image-wrapper {
    width: 18rem; /* Fixed width for circular shape */
    height: 18rem; /* Fixed height for circular shape */
    border-radius: 9999px; /* Make it circular */
    padding: 0.25rem; /* To create a border effect like member-image-wrapper-gradient */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #3b82f6, #a777e3); /* Gradient background */
    margin-top: 1.5rem; /* Add top margin to position it within the card */
    margin-bottom: 0rem; /* Space between image and info */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Add shadow */
}

.student-image {
    width: 17.5rem; /* Slightly smaller than wrapper to show gradient border */
    height: 17.5rem; /* Slightly smaller than wrapper to show gradient border */
    border-radius: 9999px; /* Make it circular */
    object-fit: cover;
}

.student-info {
    padding: 0 1.5rem; /* Horizontal padding */
    flex-grow: 1; /* Allows info to take available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.student-name {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1a202c; /* text-gray-800 */
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;

}

.student-specialization {
    font-size: 1.1rem; /* text-base */
    color: #3b82f6; /* text-blue-500 */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0rem;
    display: block; /* Ensure it takes its own line */
}

.student-mini-info,
.student-contacts,
.student-projects {
    font-size: 0.9rem; /* text-sm */
    color: #4a5568; /* text-gray-600 */
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.student-mini-info {
    margin-bottom: 0;
}


.student-projects a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.student-projects a:hover {
    text-decoration: underline;
}
/* --- Footer --- */
.site-footer {
    background-color: #1a202c; /* bg-gray-900 */
    color: #ffffff;
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* py-8 */
    text-align: center;
}

.footer-content {
    font-size: 0.875rem; /* text-sm */
}
/* Projects Section - Student Photos */
.project-students-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Пространство между фотографиями */
    margin-top: 10px;
    margin-bottom: 10px;
}

.student-photo-circle-for-project {
    width: 55px; /* Размер кружка */
    height: 55px; /* Размер кружка */
    border-radius: 50%; /* Делает изображение круглым */
    object-fit: cover; /* Обрезает изображение, чтобы оно помещалось в круг */
    border: 1px solid #ddd; /* Небольшая рамка для лучшей видимости */
    box-shadow: 0 0 3px rgba(0,0,0,0.1); /* Легкая тень */
}

.project-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Fully rounded corners */
    font-size: 0.9rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 2px solid;
}

.status-active {
    color: #10b981; /* green-500 */
    border-color: #10b981;
}

.status-passive {
    color: #f59e0b; /* amber-500 */
    border-color: #f59e0b;
}

.status-completed {
    color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
}

.status-paused {
    color: #ef4444; /* red-500 */
    border-color: #ef4444;
}

.status-idea {
    color: #8245c7; /* gray-500 */
    border-color: #8245c7;
}

.project-date {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    margin-top: 0.25rem; /* mt-1 */
    margin-bottom: 0.25rem; /* mb-1 */
}

.project-tags {
    margin-top: 10px;
    margin-bottom: 10px;
}

.project-tag {
    display: inline-block;
    background-color: #daeeff;
    color: #355aff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    margin-right: 5px;
    margin-bottom: 5px;
}


/* === Блок людей === */
.card-student-small {
    background-color: #f4f3ff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0.5rem;
    width: 12rem;  /* Уменьшенный размер */
}

.card-student-small:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.student-image-small {
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    object-fit: cover;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(45deg, #3b82f6, #a777e3);
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.student-name-small {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.student-specialization-small {
    font-size: 1rem;
    color: #3b82f6;
    font-weight: 600;
    margin-bottom: 0.5rem;
}









/* =========================
   Новые классы для project.html
   (вставить в конец style.css)
   ========================= */

.project-page {
    padding-top: 1.5rem;
}



/* Оформление контейнера описания проекта */
.description-container {
    background-color: #ffffff;
    border: 1px solid rgba(59,130,246,0.12); /* мягкая голубая граница */
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    box-shadow: 0 6px 18px rgba(15,23,42,0.03);
}

/* Центрированные картинки внутри описания (заменяет .description-centered-images) */
.description-centered-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px; /* отступы между картинками */
    margin: 0.75rem 0;
}

/* Общие правила для картинок, добавленных в description */
.description-centered-images img,
.description-image-with-text img,
.description-image-inline {
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 18px rgba(15,23,42,0.03);
    max-width: 100%;
    height: auto;
    display: block;
}

/* Описание с картинкой слева/справа */
.description-image-with-text {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

/* класс для картинки слева (второй аргумент float) */
.desc-img-left {
    flex: 0 0 40%;
    max-width: 40%;
    order: 0;
}
.desc-img-right {
    flex: 0 0 40%;
    max-width: 40%;
    order: 1;
}

/* Текст связанный с картинкой */
.description-with-image {
    flex: 1 1 55%;
    min-width: 200px;
    line-height: 1.6;
    color: #4a5568;
}

/* Отступы для обычного абзаца в описании */
.description-clear {
    margin-bottom: 1rem;
    color: #334155;
    line-height: 1.7;
}

/* Грид для 5 карточек участников (адаптивно) */
.grid-5-cols {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .grid-5-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
    .grid-5-cols { grid-template-columns: repeat(5, 1fr); } /* 5 в ряд на широких экранах */
}

/* Секция метаданных проекта (статус, теги, даты) */
.project-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0.75rem 0 1.25rem 0;
}

/* Аккуратные теги/ссылки */
.meta-tag {
    background-color: #eef7ff;
    color: #1e40af;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}

/* Главное изображение проекта */
.project-main-image {
    width: 100%;
    max-height: 40rem;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 12px 30px rgba(2,6,23,0.08);
    margin-bottom: 1rem;
}

/* Блок для главного видео (responsive) */
.project-main-video {
    width: 100%;
    max-height: 56.25vw; /* 16:9 соотношение максимум */
    height: auto;
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 1rem 0;
    box-shadow: 0 8px 20px rgba(2,6,23,0.06);
}

/* Сетка ачивок */
.achievements-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .achievements-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Карточка ачивки */
.ach-card {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 6px 18px rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Hover */
.ach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}

/* Иконка ачивки (используем FA классы) */
.ach-icon {
    font-size: 2rem;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
}

/* Разные цвета для типов ачивок (можно расширять) */
/* Победа — золотая медаль и золотистая карточка */
.ach-type-award {
    background: linear-gradient(135deg, #fff1c2, #fffbeb);
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
}
.ach-type-award .ach-icon { background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.ach-type-trophy .ach-icon { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.ach-type-medal .ach-icon { background: linear-gradient(135deg,#34d399,#10b981); }
.ach-type-default .ach-icon { background: linear-gradient(135deg,#9f7aea,#6d28d9); }

/* Создание — сине-фиолетовая тема и соответствующий фон карточки */
.ach-type-create {
    background: linear-gradient(135deg, #e0e7ff, #ede9fe);
    box-shadow: 0 10px 24px rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.35);
}
.ach-type-create .ach-icon { background: linear-gradient(135deg,#3b82f6,#8b5cf6); }

/* Название ачивки */
.ach-title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }

/* --- Связанные посты (копия карточек с главной, подстроены под проект) --- */


/* Сетка фотографий проекта */
.photos-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
}
@media (min-width: 640px) { 
    .photos-grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}
@media (min-width: 768px) { 
    .photos-grid { 
        grid-template-columns: repeat(4, 1fr); 
    } 
}
@media (min-width: 1024px) { 
    .photos-grid { 
        grid-template-columns: repeat(5, 1fr); 
    } 
}

.photos-grid img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.photos-grid img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: rgba(59,130,246,0.3);
}

/* Ссылки на видео/доп. ролики */
.other-videos-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 1rem;
}
@media (min-width: 640px) { 
    .other-videos-list { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}
@media (min-width: 768px) { 
    .other-videos-list { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}

.other-videos-list .video-item {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 соотношение */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.other-videos-list .video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.other-videos-list iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.other-videos-list .video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #6b7280;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.other-videos-list .video-placeholder:hover {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #374151;
}

/* Мелкие правки: устранение "слипания" картинок в общем контексте */
.project-description img { margin: 8px; } /* небольшие отступы вокруг картинок внутри description */
















/* General Body and Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #334155;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 400;
}

.site-bg {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
}

.bg-white {
    background-color: #ffffff;
}

/* Container for max width and horizontal centering */
.container {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Section Padding */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Grid Layouts */
.grid-3-cols {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .grid-3-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .grid-3-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Modern Section Headers with Icons */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.section-header::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
    border-radius: 2px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.section-title i {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
}

.section-description {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* Navigation Bar */
.nav-bar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-flex-group {
    display: flex;
    gap: 2rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.nav-logo-text {
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.25rem;
}

.nav-links-desktop {
    display: none;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .nav-links-desktop {
        display: flex;
    }
}

.nav-link {
    padding: 0.75rem 1rem;
    color: #64748b;
    font-weight: 500;
    transition: all 300ms ease;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.nav-link i {
    margin-right: 0.5rem;
    font-size: 1rem;
    z-index: 1;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    opacity: 0;
    transition: opacity 300ms ease;
    border-radius: 12px;
}

.nav-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.nav-link:hover::before {
    opacity: 1;
}


.nav-link span {
    position: relative;
    z-index: 1;
}

.nav-link-active {
    padding: 0.75rem 1rem;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

/* Project Page Styles */
.project-page {
    padding-top: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
}

/* Main Project Image */
.project-main-image {
    width: 100%;
    max-height: 45rem;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Project Meta Section */
.project-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem 0 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.project-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.project-status::before {
    content: '\f111';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7rem;
}

.status-active {
    color: #10b981;
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
}

.status-passive {
    color: #f59e0b;
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
}

.status-completed {
    color: #3b82f6;
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
}

.status-paused {
    color: #ef4444;
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
}

.status-idea {
    color: #8b5cf6;
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
}

.meta-tag {
    background: linear-gradient(135deg, #dbeafe, #e0e7ff);
    color: #1e40af;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border: 1px solid rgba(30, 64, 175, 0.2);
    transition: all 300ms ease;
}

.meta-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
}

.project-date {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-date::before {
    content: '\f017';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Modern Section Styling */
section {
    margin: 4rem 0;
    position: relative;
}

section h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #1e293b;
}

/* Section-specific icons */
section:has(.grid-5-cols) h2::before {
    content: '\f0c0';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

section:has(.project-main-video) h2::before {
    content: '\f03d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

section:has(.achievements-grid) h2::before {
    content: '\f091';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

section:has(.photos-grid) h2::before {
    content: '\f03e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

section:has(.other-videos-list) h2::before {
    content: '\f144';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description Container */
.description-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 24px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.description-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
}

/* Grid for 5 columns */
.grid-5-cols {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .grid-5-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
    .grid-5-cols { grid-template-columns: repeat(5, 1fr); }
}

/* Student Cards - keeping original design as requested */
.card-student-small {
    background: rgba(244, 243, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 400ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1rem;
    width: 12rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
}

.card-student-small:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.15);
}

.student-image-small {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(45deg, #3b82f6, #a777e3);
    padding: 0.25rem;
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
}

.student-name-small {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.student-specialization-small {
    font-size: 1rem;
    color: #3b82f6;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Project Cards - keeping original design as requested */
.card-project {
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 400ms ease;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.card-project:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.project-image {
    width: 100%;
    height: 12rem;
    object-fit: cover;
}

.project-content {
    padding: 1.5rem;
    padding-top: 0;
}

.project-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.project-description {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.project-link {
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
    transition: all 300ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.project-link:hover {
    color: #2563eb;
    transform: translateX(4px);
}

.project-students-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1rem 0;
}

.student-photo-circle-for-project {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 300ms ease;
}

.student-photo-circle-for-project:hover {
    transform: scale(1.1);
}

.project-tags {
    margin: 1rem 0;
}

.project-tag {
    display: inline-block;
    background: linear-gradient(135deg, #dbeafe, #e0e7ff);
    color: #1e40af;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(30, 64, 175, 0.2);
}

/* Video Section */
.project-main-video {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin: 2rem 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Achievements Grid */
.achievements-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .achievements-grid { grid-template-columns: repeat(4, 1fr); }
}

.ach-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 3px solid rgba(148, 163, 184, 0.1);
    transition: all 400ms ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}


.ach-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.ach-icon {
    font-size: 2.5rem;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ach-type-award {
    background: linear-gradient(135deg, rgba(255, 241, 194, 0.8), rgba(255, 251, 235, 0.8));
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.2);
}
.ach-type-award .ach-icon { background: linear-gradient(135deg,#f59e0b,#fbbf24); }

.ach-type-create {
    background: linear-gradient(135deg, rgba(224, 231, 255, 0.8), rgba(237, 233, 254, 0.8));
    box-shadow: 0 15px 35px rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.2);
}
.ach-type-create .ach-icon { background: linear-gradient(135deg,#3b82f6,#8b5cf6); }

.ach-type-default .ach-icon { background: linear-gradient(135deg,#9f7aea,#6d28d9); }

.ach-title {
    font-weight: 700;
    font-size: 1rem;
    color: #0f172a;
}

/* Photos Grid */
.photos-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
}
@media (min-width: 640px) {
    .photos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 768px) {
    .photos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1024px) {
    .photos-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.photos-grid img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 400ms ease;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.photos-grid img:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(59,130,246,0.3);
}

/* Other Videos */
.other-videos-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 2rem;
}
@media (min-width: 640px) {
    .other-videos-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) {
    .other-videos-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.other-videos-list .video-item {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 400ms ease;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.other-videos-list .video-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.other-videos-list iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 16px;
}

.other-videos-list .video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #6b7280;
    font-weight: 600;
    text-decoration: none;
    transition: all 300ms ease;
}

.other-videos-list .video-placeholder:hover {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #374151;
}

/* Footer */
.site-footer {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #ffffff;
    padding: 3rem 0;
    text-align: center;
    margin-top: 5rem;
}

.footer-content {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Mobile Navigation */
.nav-toggle-mobile {
    display: flex;
    align-items: center;
}
@media (min-width: 768px) {
    .nav-toggle-mobile {
        display: none;
    }
}

.mobile-nav-button {
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-nav-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #64748b;
    stroke: currentColor;
}

.mobile-nav-menu {
    display: none;
}
.mobile-nav-menu.is-hidden {
    display: none;
}
.mobile-nav-menu:not(.is-hidden) {
    display: block;
}

.mobile-nav-list {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    margin-top: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    padding: 1rem 1.5rem;
    transition: all 300ms ease;
    color: #64748b;
}

.mobile-nav-item i {
    margin-right: 0.75rem;
    font-size: 1rem;
}

.mobile-nav-item:hover {
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    color: #3b82f6;
}

.mobile-nav-item-active {
    color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .project-meta {
        padding: 1rem;
        gap: 1rem;
    }

    .photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .other-videos-list {
        grid-template-columns: repeat(1, 1fr);
    }
}