@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root { 
    --secondary-color: #FFFFFF; 
    --text-color: #333333; 
    --bg-color: #F8FAFC; 
    --transition: all 0.3s ease-in-out; 
}

/* Keyframes for the multicolor gradient animation */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body { 
    font-family: 'Poppins', sans-serif; 
    color: var(--text-color); 
    background-color: var(--bg-color); 
    overflow-x: hidden; 
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

a { text-decoration: none; color: #33ccff; transition: var(--transition); }
a:hover { color: #ff3366; }

/* Override Bootstrap Primary text and bg to use animated gradient */
.text-primary {
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 10s ease infinite !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.bg-primary {
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 10s ease infinite !important;
    border: none !important;
}

/* Specific Element Overrides */
.top-bar { 
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    color: var(--secondary-color); 
    padding: 8px 0; 
    font-size: 0.9rem; 
}
.top-bar a { color: var(--secondary-color); margin-right: 15px; }
.top-bar a:hover { color: #ffebcc; }

.navbar { background-color: var(--secondary-color); box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 15px 0; }
.navbar-brand h2 {
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navbar-brand span {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
}
.nav-link { font-weight: 500; color: var(--text-color) !important; text-transform: uppercase; font-size: 0.95rem; margin: 0 10px; position: relative; }
.nav-link::after { 
    content: ''; position: absolute; width: 0; height: 3px; bottom: 0; left: 0; 
    background: linear-gradient(90deg, #ff3366, #33ccff); 
    transition: var(--transition); 
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.btn-primary-custom, .btn-accent-custom { 
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    color: var(--secondary-color) !important; 
    border: none; 
    border-radius: 30px; 
    padding: 12px 28px; 
    font-weight: 600; 
    transition: var(--transition); 
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-primary-custom:hover, .btn-accent-custom:hover { 
    background-size: 200% 200%;
    transform: translateY(-3px); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); 
    color: white !important; 
}

.page-header { 
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    padding: 120px 0 80px; 
    color: var(--secondary-color); 
    text-align: center; 
    margin-bottom: 50px; 
    position: relative;
}
.page-header h1 { color: var(--secondary-color); font-size: 3rem; margin-bottom: 15px; -webkit-text-fill-color: white;}
.page-header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 50px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23F8FAFC" fill-opacity="1" d="M0,160L80,170.7C160,181,320,203,480,192C640,181,800,139,960,133.3C1120,128,1280,160,1360,176L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>') no-repeat bottom; background-size: cover; }

.custom-card { 
    background: var(--secondary-color); 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    padding: 30px; 
    transition: var(--transition); 
    border: none; 
    height: 100%; 
    position: relative;
    overflow: hidden;
}
/* Top animated border for cards */
.custom-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}
.custom-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }

.site-footer { 
    background-color: #1a1a1a; 
    color: #cccccc; 
    padding: 70px 0 30px; 
    margin-top: 60px;
    border-top: 5px solid transparent;
    border-image: linear-gradient(90deg, #ff3366, #ff9933, #33ccff, #9933ff) 1;
}
.site-footer h5 { color: var(--secondary-color); margin-bottom: 25px; }
.site-footer a { color: #cccccc; }
.site-footer a:hover { color: #33ccff; }

.gallery-img { border-radius: 10px; overflow: hidden; position: relative; }
.gallery-img img { width: 100%; height: 250px; object-fit: cover; transition: var(--transition); }
.gallery-img:hover img { transform: scale(1.1); }

.facility-icon { 
    width: 70px; height: 70px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 30px; color: white; margin-bottom: 20px; 
    background: linear-gradient(-45deg, #ff3366, #ff9933, #33ccff, #9933ff);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.facility-icon i { color: white !important; -webkit-text-fill-color: white !important; }