@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

body {
    font-family: 'Noto Sans SC', sans-serif;
}

.nav-link {
    @apply text-gray-600 font-medium tracking-wider relative transition-colors duration-300;
}

.nav-link:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #8C2B30;
    transition: width 0.3s ease-in-out;
}

.nav-link:hover, .nav-link.active {
    @apply text-[#8C2B30];
}

.nav-link:hover:after, .nav-link.active:after {
    width: 100%;
}

.btn {
    @apply inline-block px-8 py-3 rounded-full font-bold text-center transition-all duration-300 shadow-md;
}

.btn-primary {
    @apply bg-[#8C2B30] text-white hover:bg-[#a13238] hover:shadow-lg transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply bg-white/20 text-white border border-white hover:bg-white/30;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-800 mb-2;
}

.section-subtitle {
    @apply text-lg text-gray-500 max-w-2xl mx-auto;
}

.feature-card {
    @apply bg-white p-8 rounded-xl shadow-lg text-center transform transition-transform duration-300 hover:-translate-y-2;
}

.cta-link {
    @apply font-bold text-[#8C2B30] hover:text-[#a13238] transition-colors duration-300;
}

.culture-card {
    @apply bg-white p-8 rounded-lg text-center transition-all duration-300 shadow-md hover:shadow-xl hover:-translate-y-1;
}

.timeline-item {
    @apply relative pl-8 md:pl-0 md:w-1/2;
}
.timeline-item:nth-child(odd) {
    @apply md:ml-auto md:pl-8;
}
.timeline-item:nth-child(even) {
    @apply md:mr-auto md:text-right md:pr-8;
}
.timeline-item:before {
    content: '';
    @apply absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-[#8C2B30] rounded-full border-4 border-white shadow;
    left: -8px;
}
.timeline-item:nth-child(odd):before {
    @apply md:left-1/2 md:-ml-2;
}
.timeline-item:nth-child(even):before {
    @apply md:right-1/2 md:-mr-2 md:left-auto;
}
.timeline-content {
    @apply bg-white p-6 rounded-lg shadow-md;
}
.timeline-item.timeline-item-right .timeline-content {
    @apply md:text-left;
}

.product-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-xl;
}

.empower-card {
    @apply bg-white p-6 rounded-lg shadow-md text-center hover:shadow-xl transition-shadow duration-300;
}

.partner-card {
    @apply bg-white p-8 rounded-xl shadow-lg border border-gray-200 text-center relative;
}

.form-input {
    @apply mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-[#8C2B30] focus:border-[#8C2B30] sm:text-sm;
}

.footer-link {
    @apply text-gray-400 hover:text-white transition-colors duration-300;
}

.pattern-bg {
    background-image: url('https://r2.flowith.net/files/o/1758280026134-abstract_tech_background_seamless_tile_index_4@1024x1024.png');
    background-repeat: repeat;
}


@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.admin-nav-link {
    @apply flex items-center px-4 py-2.5 text-sm font-medium rounded-md transition-colors duration-200;
}

.admin-nav-link:hover, .admin-nav-link.active {
    @apply bg-gray-700 text-white;
}

.admin-th {
    @apply px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200;
}

.admin-td {
    @apply px-6 py-4 whitespace-nowrap border-b border-gray-200;
}

#sidebar.collapsed .nav-text {
    @apply hidden;
}
#sidebar.collapsed {
    @apply w-20;
}
#sidebar.collapsed .admin-nav-link {
    @apply justify-center;
}
#sidebar.collapsed .admin-nav-link .mr-3 {
    @apply mr-0;
}
#sidebar.collapsed .h-20 a {
    @apply hidden;
}

#sidebar-toggle-mobile.active + #sidebar {
    transform: translateX(0);
}