:root{
  --navy:#12254a; --navy-2:#0c1a35; --gold:#c8a031; --mist:#f2f5fa; --ink:#1d2433; --muted:#5d6678;
  --bs-primary:#12254a; --bs-body-font-family:'Source Sans 3',system-ui,sans-serif; --bs-body-color:var(--ink);
}
h1,h2,h3,h4,.brand{font-weight:700;letter-spacing:-.01em}
a{color:var(--navy)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#1b1500;font-weight:600}
.btn-gold:hover{background:#b48d27;border-color:#b48d27;color:#1b1500}
.btn-outline-light:hover{color:var(--navy)}
.topbar{background:var(--navy-2);color:#cfd7e8;font-size:.9rem}
.topbar a{color:#e6ebf5;text-decoration:none}
.topbar a:hover{color:var(--gold)}
.navbar{background:#fff;box-shadow:0 1px 0 rgba(18,37,74,.12)}
.navbar-brand img{height:70px}
.navbar-brand span{line-height:1.1;color:var(--navy);font-size:1.7rem}
.navbar-brand small{display:block;font-family:'Source Sans 3';font-weight:600;font-size:1.2rem;color:var(--muted)}
.nav-link{font-weight:600;color:var(--navy); font-size:18px}
.nav-link:hover,.nav-link.active{color:#8a6a10}
.dropdown-menu{border:0;border-top:3px solid var(--gold);border-radius:0 0 .5rem .5rem;box-shadow:0 12px 30px rgba(12,26,53,.15)}
.dropdown-item:active{background:var(--navy)}
.dropend>.dropdown-toggle::after{margin-left:auto}
@media(min-width:992px){
  .navbar .dropdown:hover>.dropdown-menu{display:block}
  .dropdown-menu .dropend:hover>.dropdown-menu{display:block;top:0;left:100%}
}
/* hero */
.hero .carousel-item{height:min(78vh,640px);min-height:420px;background:#000}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.62}
.hero .carousel-caption{left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%);text-align:left}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);max-width:15ch;color:#fff}
.hero p{font-size:1.2rem;max-width:36ch;color:#e8edf7}
.hero .carousel-item::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,26,53,.85),rgba(12,26,53,0) 70%)}
.hero .carousel-caption{z-index:2}
.hero .carousel-control-prev,.hero .carousel-control-next{z-index:3}
/* quick strip */
.strip{background:var(--navy);color:#fff}
.strip a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:.6rem;padding:1.1rem 1rem;font-weight:600;border-right:1px solid rgba(255,255,255,.12);height:100%; font-size: 24px;}
.strip a:hover{background:var(--navy-2);color:var(--gold)}
.strip i{font-size:2rem;color:var(--gold)}
section{padding:4.5rem 0}
.sec-title{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--navy);margin-bottom:3rem}
.sec-title::after{content:"";display:block;width:56px;height:4px;background:var(--gold);margin-top:.7rem;border-radius:2px}
.bg-mist{background:var(--mist)}
.lead-s{color:var(--muted);max-width:62ch}
/* principal */
.principal img{width:100%;max-width:300px;border-radius:.5rem;border:6px solid #fff;box-shadow:0 12px 30px rgba(12,26,53,.18)}
blockquote{border-left:4px solid var(--gold);padding-left:1.1rem;font-size:1.15rem;font-family:'Fraunces',serif;font-weight:500}
/* features */
.feature{background:#fff;border-radius:.6rem;padding:1.6rem;height:100%;border-top:4px solid var(--navy)}
.feature i{font-size:2rem;color:var(--navy)}
.feature h3{font-size:1.2rem;margin:.7rem 0 .4rem}
.feature p{color:var(--muted);margin:0}
/* notices */
.notice{display:flex;gap:1rem;align-items:center;padding:.85rem 0;border-bottom:1px solid #dde3ee;text-decoration:none;color:var(--ink)}
.notice:hover strong{text-decoration:underline}
.date{flex:0 0 58px;text-align:center;background:var(--navy);color:#fff;border-radius:.4rem;padding:.35rem 0;line-height:1.1}
.date b{display:block;font-size:1.35rem;font-family:'Fraunces',serif}
.date span{font-size:.75rem}
.cal{width:100%;text-align:center}
.cal th{color:var(--muted);font-weight:600;padding:.4rem 0;font-size:.85rem}
.cal td{padding:.5rem 0;border-radius:.35rem}
.cal td.dim{color:#aab2c2}
.cal td.today{background:var(--gold);font-weight:700;color:#1b1500}
/* news */
.news-card{border:0;border-radius:.6rem;overflow:hidden;box-shadow:0 6px 22px rgba(12,26,53,.08);height:100%}
.news-card .ph{height:150px;background:linear-gradient(135deg,var(--navy),#27457f);display:grid;place-items:center;color:var(--gold);font-size:2.4rem}
/* facilities & gallery */
.tile{position:relative;display:block;overflow:hidden;border-radius:1.3rem;aspect-ratio:4/3;background:#222}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.06)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem 1.7rem;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(12,26,53,.9)); font-size:1.3rem; line-height:1.3; text-transform: capitalize}
/* cta */
.cta{background:var(--navy);color:#fff;padding:3.2rem 0}
.cta h2{color:#fff}
footer{background:var(--navy-2);color:#b9c3d8;padding-top:3.5rem}
footer h3{color:#fff;font-size:1.1rem}
footer a{color:#b9c3d8;text-decoration:none}
footer a:hover{color:var(--gold)}
footer li{margin-bottom:.4rem}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding:1rem 0;font-size:.9rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lineGrow{from{width:0}to{width:56px}}
@keyframes pulseSoft{0%,100%{box-shadow:0 0 0 0 rgba(200,160,49,.3)}50%{box-shadow:0 0 0 8px rgba(200,160,49,0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-left.in-view{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-right.in-view{opacity:1;transform:translateX(0)}
.reveal-zoom{opacity:0;transform:scale(.92);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-zoom.in-view{opacity:1;transform:scale(1)}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}
.d5{transition-delay:.4s}

.hero .carousel-item.active .hero-anim-title{animation:slideLeft .8s cubic-bezier(.22,1,.36,1) .15s both}
.hero .carousel-item.active .hero-anim-sub{animation:slideLeft .8s cubic-bezier(.22,1,.36,1) .3s both}
.hero .carousel-item.active .hero-anim-actions{animation:slideLeft .8s cubic-bezier(.22,1,.36,1) .45s both}

.sec-title.anim-title::after{animation:lineGrow .8s cubic-bezier(.22,1,.36,1) .3s both}

.feature{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.feature:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,26,53,.15)}
.notice{transition:padding-left .3s,background .3s,border-color .3s}
.notice:hover{padding-left:.5rem;background:#f7f9fc}
.news-card{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.news-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,26,53,.15)}
.tile{transition:transform .35s,box-shadow .35s}
.tile:hover{box-shadow:0 18px 40px rgba(12,26,53,.2)}
.btn{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .5s}
.btn-gold:hover::after{left:100%}
.nav-cta-pulse{animation:pulseSoft 2.5s infinite}
.navbar-brand img{transition:transform .35s}
.navbar-brand:hover img{transform:rotate(-4deg) scale(1.05)}
.strip a i{transition:transform .3s}
.strip a:hover i{transform:scale(1.2) rotate(-8deg)}
.cal td.today{transition:transform .3s,box-shadow .3s}
.cal td.today:hover{transform:scale(1.15);box-shadow:0 4px 12px rgba(200,160,49,.4)}
.date{transition:transform .3s,background .3s}
.notice:hover .date{transform:scale(1.08);background:var(--navy-2)}
.news-card .ph i{transition:transform .4s}
.news-card:hover .ph i{transform:scale(1.2) rotate(-6deg)}

/* ============================================
   FACILITIES AUTO-SCROLLING CAROUSEL
   ============================================ */
.facilities-carousel-wrap{position:relative;padding:0 .5rem}
.facilities-carousel{position:relative;overflow:hidden;border-radius:.7rem}
.facilities-track{display:flex;gap:1.1rem;will-change:transform;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.facility-slide{flex:0 0 calc((100% - 3 * 1.1rem) / 4);min-width:0}
.facility-slide .tile{aspect-ratio:4/3;border-radius:.6rem;box-shadow:0 6px 22px rgba(12,26,53,.1)}
.facility-slide .tile img{width:100%;height:100%;object-fit:cover}
.facility-slide .tile span{font-size:1.8rem}

/* arrows */
.facilities-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;gap:1rem}
.facilities-arrows{display:flex;gap:.55rem}
.facilities-arrow{width:42px;height:42px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,transform .25s,border-color .25s;font-size:.95rem}
.facilities-arrow:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.facilities-arrow:active{transform:scale(.96)}
.facilities-progress{flex:1;height:4px;background:#dde3ee;border-radius:3px;overflow:hidden;max-width:260px;margin-left:auto}
.facilities-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:3px;transition:width .5s cubic-bezier(.22,1,.36,1)}

/* dots */
.facilities-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.facilities-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--navy);background:transparent;cursor:pointer;padding:0;transition:background .25s,transform .25s,border-color .25s}
.facilities-dot:hover{transform:scale(1.2)}
.facilities-dot.active{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}

/* responsive slide width */
@media(max-width:1199.98px){
  .facility-slide{flex:0 0 calc((100% - 2 * 1.1rem) / 3)}
}
@media(max-width:991.98px){
  .facility-slide{flex:0 0 calc((100% - 1.1rem) / 2)}
}
@media(max-width:575.98px){
  .facility-slide{flex:0 0 100%}
  .facilities-progress{max-width:140px}
  .facilities-arrow{width:38px;height:38px}
}

/* pause indicator (subtle) */
.facilities-carousel.paused::after{content:"Paused";position:absolute;top:.6rem;right:.6rem;background:rgba(12,26,53,.75);color:#fff;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:50px;font-weight:600;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal-left,.reveal-right,.reveal-zoom{opacity:1!important;transform:none!important}
  .facilities-track{transition:none!important}
}

/* ============================================
   FEATURE ICON COLORS — FIXED
   ============================================ */

/* Base icon styling */
.feature i {
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    border-radius: 22px;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

/* Correct targeting: nth-child on the COLUMN, then the .feature i inside */
.row > .col-md-6:nth-child(1) .feature i { color: #0d6efd; background: #e7f1ff; } /* blue */
.row > .col-md-6:nth-child(2) .feature i { color: #f08c00; background: #fff0d6; } /* orange */
.row > .col-md-6:nth-child(3) .feature i { color: #d63384; background: #fce7f3; } /* pink */
.row > .col-md-6:nth-child(4) .feature i { color: #6f42c1; background: #eee5ff; } /* purple */
.row > .col-md-6:nth-child(5) .feature i { color: #0f9d9a; background: #ddf7f5; } /* teal */
.row > .col-md-6:nth-child(6) .feature i { color: #198754; background: #dff5e8; } /* green */

/* Hover lift */
.feature:hover i {
    transform: translateY(-6px) scale(1.05);
}

/* ============================================
   ALTERNATIVE (SAFER): Class-based colors
   Add these classes to each feature div:
   class="feature f-blue" etc.
   ============================================ */
.feature.f-blue i   { color: #0d6efd; background: #e7f1ff; }
.feature.f-orange i { color: #f08c00; background: #fff0d6; }
.feature.f-pink i   { color: #d63384; background: #fce7f3; }
.feature.f-purple i { color: #6f42c1; background: #eee5ff; }
.feature.f-teal i   { color: #0f9d9a; background: #ddf7f5; }
.feature.f-green i  { color: #198754; background: #dff5e8; }