@charset "utf-8";
/* CSS Document */

        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .section-title {
                position: relative;
                padding-bottom: 1rem;
                margin-bottom: 2rem;
				text-align:center;
            }
            .section-title::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 80px;
                height: 3px;
                background-color: theme('colors.deep-red');
            }
            .nav-link {
                position: relative;
            }
            .nav-link::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -4px;
                left: 0;
                background-color: theme('colors.gold');
                transition: width 0.3s ease;
            }
            .nav-link:hover::after {
                width: 100%;
            }
            .timeline-item {
                position: relative;
                padding-left: 2rem;
                margin-bottom: 2rem;
            }
            .timeline-item::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0.5rem;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background-color: theme('colors.deep-red');
            }
            .timeline-item::after {
                content: '';
                position: absolute;
                left: 0.45rem;
                top: 1.75rem;
                width: 2px;
                height: calc(100% - 1.75rem);
                background-color: theme('colors.deep-red');
            }
            .timeline-item:last-child::after {
                display: none;
            }
            .day-header {
                background: linear-gradient(to right, theme('colors.deep-red'), theme('colors.dark-red'));
                color: white;
                padding: 1rem;
                border-radius: 0.5rem;
                margin-bottom: 1rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .day-content {
                background-color: white;
                padding: 1.5rem;
                border-radius: 0.5rem;
                margin-bottom: 2rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .time-slot {
                font-weight: 600;
                color: theme('colors.deep-red');
            }
            .btn-primary {
                background-color: theme('colors.deep-red');
                color: white;
                padding: 0.75rem 1.5rem;
                border-radius: 0.375rem;
                transition: background-color 0.3s ease;
            }
            .btn-primary:hover {
                background-color: theme('colors.dark-red');
            }
            .back-to-top {
                position: fixed;
                bottom: 2rem;
                right: 2rem;
                background-color: theme('colors.deep-red');
                color: white;
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;

                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: 50;
            }
            .back-to-top.show {
                opacity: 1;
                visibility: visible;
            }
            .hero-image {
                position: relative;
                height: 500px;
                overflow: hidden;
            }
            .hero-image img {
                object-position: center;
                object-fit: cover;
                height: 100%;
                width: 100%;
            }
            .hero-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .hero-content {
                text-align: center;
                color: white;
                padding: 2rem;
            }
            .hero-title {
                font-size: clamp(2rem, 5vw, 3.5rem);
                font-weight: bold;
                margin-bottom: 1rem;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .hero-subtitle {
                font-size: clamp(1rem, 2vw, 1.5rem);
                margin-bottom: 2rem;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            }
            .custom-card {
                border-radius: 0.75rem;
                overflow: hidden;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                transition: transform 0.3s ease;
            }
            .custom-card:hover {
                transform: translateY(-5px);
            }
            .custom-card-header {
                background-color: theme('colors.deep-red');
                color: white;
                padding: 1rem;
                font-weight: bold;
            }
            .custom-card-body {
                padding: 1.5rem;
            }
            .faculty-card {
                border-radius: 0.75rem;
                overflow: hidden;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                transition: transform 0.3s ease;
            }
            .faculty-card:hover {
                transform: translateY(-5px);
            }
            .faculty-image {
                height: 200px;
                overflow: hidden;
            }
            .faculty-image img {
                object-fit: contain;
                width: 100%;
                height: 100%;
            }
            .faculty-info {
                padding: 1rem;
                text-align: center;
            }
            .student-card {
                border-radius: 0.75rem;
                overflow: hidden;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                transition: transform 0.3s ease;
            }
            .student-card:hover {
                transform: translateY(-5px);
            }
            .student-image {
                height: 250px;
                overflow: hidden;
            }
            .student-image img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
            .student-info {
                padding: 1rem;
                text-align: center;
            }
            .footer {
                background-color: theme('colors.deep-red');
                color: white;
                /*padding: 4rem 0;*/
            }
            .footer-title {
                font-size: 1.25rem;
                font-weight: bold;
                margin-bottom: 1rem;
            }
            .footer-link {
                color: white;
                transition: color 0.3s ease;
            }
            .footer-link:hover {
                color: theme('colors.gold');
            }
            .contact-info {
                display: flex;
                align-items: center;
                margin-bottom: 1rem;
            }
            .contact-icon {
                margin-right: 1rem;
                width: 1.5rem;
                text-align: center;
            }
            .navbar {
                background-color:#8b0000;
                transition: background-color 0.3s ease, padding 0.3s ease;
            }
            .navbar.scrolled {
                background-color:#8b0000;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .nav-item {
                margin-right: 1.5rem;
            }
            .nav-link {
                color: white;
                transition: color 0.3s ease;
            }
            .nav-link:hover {
                color: theme('colors.gold');
            }
            .mobile-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: theme('colors.deep-red');
                z-index: 100;
                padding: 1rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .mobile-menu.active {
                display: block;
            }
            .mobile-menu-item {
                padding: 0.75rem 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            .mobile-menu-item:last-child {
                border-bottom: none;
            }
            .mobile-menu-link {
                color: white;
                transition: color 0.3s ease;
            }
            .mobile-menu-link:hover {
                color: theme('colors.gold');
            }
            .menu-toggle {
                display: none;
                color: white;
                font-size: 1.5rem;
                cursor: pointer;
            }
			.h3-center-yu{
			text-align: center;
			}
            @media (max-width: 768px) {
                .nav-items {
                    display: none;
                }
                .menu-toggle {
                    display: block;
                }
                .hero-title {
                    font-size: 2.5rem;
                }
                .hero-subtitle {
                    font-size: 1.25rem;
                }
                .hero-image {
                    height: 400px;
                }
            }
        }