/* Base Styles */
body {
    font-family: 'Pretendard', sans-serif;
}

/* Hero Section */
.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/hero-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Custom Colors */
.text-primary {
    color: #3B82F6;
}

.bg-primary {
    background-color: #3B82F6;
}

.hover\:bg-primary\/90:hover {
    background-color: #2563EB;
}

.text-primary-foreground {
    color: white;
}

.text-muted-foreground {
    color: #6B7280;
}

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

/* Mobile Menu */
.md\:hidden .absolute {
    display: none;
}

.md\:hidden .block {
    display: block;
}

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

/* Team Member Cards */
.team-member {
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

/* Facility Cards */
.facility-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.facility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* News Cards */
.news-card {
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

/* Contact Form */
.contact-input {
    transition: border-color 0.3s ease;
}

.contact-input:focus {
    border-color: #3B82F6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Footer */
footer a {
    transition: color 0.2s ease;
}

footer a:hover {
    color: #3B82F6;
}

/* Tiny Slider Customizations for Centering */
.my-slider .tns-outer {
    margin-left: auto;
    margin-right: auto;
}

.my-slider .tns-controls {
    text-align: center; /* Center the navigation buttons if they are inside tns-controls */
}

.tns-controls button {
    top: calc(50% - 10px) !important;
}

/* Ensure individual slides are centered within their container */
.my-slider .tns-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* For mobile, when items: 1, ensure the single item is centered */
@media (max-width: 767px) {
    .my-slider .tns-item {
        width: 90%; /* Reduce width slightly as per user suggestion */
        margin: 0 auto; /* Center the item */
        display: block; /* Override flex to allow margin: auto centering */
    }
}