/* =========================================================
   PUBLIC SITE THEME: Burgundy Wine + Gold
   (variable names kept as --navy* so no HTML/PHP change needed)
   ========================================================= */
:root{
    --navy: #5a1022;
    --navy-dark: #3b0815;
    --navy-light: #7d1a33;
    --gold: #d4af37;
    --gold-light: #f1d878;
    --gold-dark: #a8842a;
    --text-light: #ecd3d8;
    --text-white: #fcf1f3;
    --muted: #6b7280;
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{
    font-family:'Inter', sans-serif;
    background:#fff;
    color:#333;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{ font-family:'Playfair Display', serif; font-weight:700; }
a{ text-decoration:none; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--navy-dark); }
::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:5px; }

/* ---------- Loader ---------- */
.loader{
    position:fixed; inset:0; z-index:99999;
    background:linear-gradient(160deg, var(--navy-dark), var(--navy));
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
}
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ text-align:center; }
.loader-spinner{
    width:64px; height:64px; margin:0 auto 18px;
    border:4px solid rgba(212,175,55,0.25);
    border-top-color:var(--gold);
    border-radius:50%;
    animation:spin 0.9s linear infinite;
}
.loader-name{
    font-family:'Playfair Display', serif;
    color:var(--gold-light);
    font-size:22px;
    font-weight:700;
    letter-spacing:2px;
    animation:pulseGlow 1.6s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulseGlow{
    0%,100%{ opacity:.55; text-shadow:0 0 0 rgba(212,175,55,0); }
    50%{ opacity:1; text-shadow:0 0 18px rgba(212,175,55,0.5); }
}

/* ---------- Navbar ---------- */
.navbar{
    background:rgba(59,8,21,0.95) !important;
    backdrop-filter:blur(10px);
    padding:15px 0;
    transition:all .3s ease;
}
.navbar.scrolled{ padding:8px 0; box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.navbar-brand{
    font-family:'Playfair Display', serif;
    font-size:1.7rem;
    font-weight:700;
    color:var(--gold) !important;
    display:flex; align-items:center; gap:10px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-short{ font-size:1.5rem; }
.brand-full{
    font-family:'Inter', sans-serif;
    font-size:.64rem;
    font-weight:500;
    letter-spacing:.3px;
    color:var(--text-light);
    text-transform:uppercase;
    white-space:normal;      /* allow wrapping instead of cutting off */
    max-width:340px;
    word-break:break-word;
}
@media (max-width:768px){
    .brand-full{ display:none; } /* keep mobile navbar compact */
}
.brand-logo{
    width:38px; height:38px; object-fit:contain;
    border-radius:50%; background:#fff; padding:2px;
    border:2px solid var(--gold);
}
.nav-link{
    color:var(--text-white) !important;
    font-weight:600;
    font-size:.82rem;
    letter-spacing:.3px;
    margin:0 4px;
    padding:8px 10px !important;
    position:relative;
    transition:.3s;
}
.nav-link::after{
    content:''; position:absolute; width:0; height:2px; bottom:-2px; left:10px;
    background:var(--gold); transition:width .3s ease;
}
.nav-link:hover::after{ width:calc(100% - 20px); }
.nav-link:hover{ color:var(--gold) !important; }

/* Push the whole menu to the right (in addition to ms-auto on the <ul>) */
.navbar .navbar-collapse{ justify-content:flex-end; }

/* Corporate-style dropdown: minimal, thin gold rule, left-accent hover */
.dropdown-menu{
    border:none;
    border-top:2px solid var(--gold);
    box-shadow:0 14px 32px rgba(90,16,34,0.16);
    border-radius:4px;
    padding:6px 0;
    min-width:220px;
}
.dropdown-item{
    border-radius:0;
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.2px;
    padding:10px 18px;
    border-left:3px solid transparent;
    color:var(--navy);
    transition:.15s;
}
.dropdown-item:hover, .dropdown-item:focus{
    background:#fdf7f8;
    color:var(--navy);
    border-left-color:var(--gold);
    padding-left:22px;
}
.dropdown-item.disabled{ color:#aaa; border-left-color:transparent; }

/* Mobile hamburger menu icon - force white so it's visible on the navy navbar
   (Bootstrap's default toggler icon is a dark SVG, invisible on dark backgrounds) */
.navbar-toggler{
    border-color:rgba(255,255,255,0.35);
    padding:6px 10px;
}
.navbar-toggler:focus{
    box-shadow:0 0 0 3px rgba(212,175,55,0.35);
}
.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Remove the default Bootstrap dropdown caret (was rendering as a
   stray dash under Organisation/About Us/News-Publications/Legal) */
.navbar .dropdown-toggle::after{ display:none !important; }

/* ---------- Hero ---------- */
.hero-section{ position:relative; height:600px; overflow:hidden; }
.carousel-item{ height:600px; background:var(--navy-dark); }
@media (max-width:768px){
    .hero-section{ height:400px; }
    .carousel-item{ height:400px; }
}
.carousel-item img{ object-fit:cover; height:100%; width:100%; filter:brightness(0.42); }
.hero-fallback{
    height:100%;
    background:linear-gradient(135deg, var(--navy-dark), var(--navy) 60%, var(--navy-light));
    color:#fff;
}
.hero-fallback h1{ font-size:2.4rem; color:var(--gold-light); margin-bottom:10px; }
.hero-fallback p{ color:var(--text-light); }

.carousel-caption{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:90%; max-width:900px; text-align:center; z-index:10;
}
.carousel-caption h1{
    font-size:3.6rem; font-weight:700; margin-bottom:18px; color:#fff;
    text-shadow:2px 2px 8px rgba(0,0,0,0.5);
}
.carousel-caption p{ font-size:1.2rem; margin-bottom:28px; color:var(--text-white); }
.btn-hero{
    padding:14px 36px; font-size:1rem; font-weight:600; border-radius:50px;
    margin:0 8px; transition:.3s; display:inline-block;
}
.btn-primary-hero{ background:var(--gold); color:var(--navy-dark); border:2px solid var(--gold); }
.btn-primary-hero:hover{ background:transparent; color:var(--gold); }
.btn-outline-hero{ background:transparent; color:#fff; border:2px solid #fff; }
.btn-outline-hero:hover{ background:#fff; color:var(--navy-dark); }
.carousel-indicators button{
    width:12px !important; height:12px !important; border-radius:50% !important;
    margin:0 6px !important; background-color:rgba(255,255,255,0.5) !important;
}
.carousel-indicators button.active{ background-color:var(--gold) !important; }

/* ---------- Section basics + scroll animation ---------- */
.section-padding{ padding:100px 0; }
.section-title{ text-align:center; margin-bottom:55px; }
.section-title h2{
    font-size:2.6rem; color:var(--navy); margin-bottom:14px;
    position:relative; display:inline-block;
}
.section-title h2::after{
    content:''; position:absolute; width:60px; height:4px; background:var(--gold);
    bottom:-10px; left:50%; transform:translateX(-50%);
}
.section-title p{ color:var(--muted); font-size:1.05rem; max-width:600px; margin:20px auto 0; }

[data-aos]{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-aos="fade-right"]{ transform:translateX(-24px); }
[data-aos="fade-left"]{ transform:translateX(24px); }
[data-aos="zoom-in"]{ transform:scale(0.92); }
[data-aos].aos-visible{ opacity:1; transform:translate(0,0) scale(1); }

/* ---------- About ---------- */
.about-section{ background:linear-gradient(135deg, #fcf6f7 0%, #fff 100%); }
.about-img{ border-radius:15px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.1); }
.about-img img{ width:100%; height:auto; transition:transform .5s ease; }
.about-img:hover img{ transform:scale(1.05); }

/* ---------- About section fade/crossfade image slideshow ---------- */
.about-img-fade{
    position:relative;
    width:100%;
    aspect-ratio:4 / 3;   /* scales naturally with column width, like the original single <img> did */
    background:#3b0815;  /* shows briefly while images load, and behind the crossfade */
}
.about-fade-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    animation-name:aboutFadeLoop;
    animation-duration:9s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}
/* Stagger each image so they crossfade into one another continuously */
.about-fade-img:nth-child(1){ animation-delay:0s; }
.about-fade-img:nth-child(2){ animation-delay:4.5s; }

@keyframes aboutFadeLoop{
    0%   { opacity:0; }
    6%   { opacity:1; }
    44%  { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:0; }
}

.about-img-fade:hover .about-fade-img{
    animation-play-state:paused; /* let the visitor pause on hover to look closer */
}

.about-img-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:5;
    padding:22px 24px 18px;
    background:linear-gradient(to top, rgba(59,8,21,0.85), rgba(59,8,21,0));
    color:var(--gold-light);
    font-family:'Playfair Display', serif;
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:.3px;
}

@media (max-width:768px){
    .about-img-caption{ font-size:1rem; padding:16px 18px 14px; }
}
.about-content h3{ font-size:2rem; color:var(--navy); margin-bottom:18px; }
.about-content p{ color:#555; line-height:1.8; margin-bottom:18px; }
.stats-box{ background:var(--navy); color:#fff; padding:26px; border-radius:14px; text-align:center; margin-top:20px; }
.stats-box h4{ font-size:2.2rem; color:var(--gold); margin-bottom:5px; }
.stats-box p{ color:var(--text-white); margin:0; font-family:'Inter',sans-serif; font-weight:400; }

/* ---------- Events (college-style cards) ---------- */
.events-section{ background:#fff; }
.event-card{
    position:relative;
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 10px 28px rgba(90,16,34,0.08);
    transition:.3s; height:100%;
    border:1px solid #f3e8eb;
}
.event-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(90,16,34,0.15); }
.event-photo{ width:100%; height:190px; object-fit:cover; display:block; }
.event-date-badge{
    position:absolute; top:14px; left:14px;
    background:var(--gold); color:var(--navy-dark);
    border-radius:10px; padding:6px 12px; text-align:center;
    font-weight:800; line-height:1.1; box-shadow:0 6px 14px rgba(0,0,0,0.25);
}
.event-date-badge .day{ display:block; font-size:1.3rem; }
.event-date-badge .month{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; }
.event-content{ padding:20px; }
.event-content h4{ color:var(--navy); font-size:1.2rem; margin-bottom:10px; }
.event-content p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:12px; }
.event-link{ color:var(--gold-dark); font-weight:700; font-size:.85rem; }
.event-link:hover{ color:var(--navy); }

/* ---------- Gallery ---------- */
.gallery-section{ background:#fcf7f8; }
.gallery-item{
    position:relative; overflow:hidden; border-radius:15px;
    margin-bottom:25px; cursor:pointer; box-shadow:0 10px 25px rgba(0,0,0,0.1);
}
.gallery-item img{ width:100%; height:250px; object-fit:cover; transition:transform .5s ease; display:block; }
.gallery-item:hover img{ transform:scale(1.1); }
.gallery-overlay{
    position:absolute; inset:0; background:rgba(90,16,34,0.75);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:.3s;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay i{ color:#fff; font-size:2.3rem; }
.btn-outline-gold{
    display:inline-block; padding:12px 30px; border-radius:50px;
    border:2px solid var(--gold); color:var(--gold-dark); font-weight:700;
    transition:.3s;
}
.btn-outline-gold:hover{ background:var(--gold); color:var(--navy-dark); }

/* ---------- Lightbox ---------- */
.lightbox-modal{
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,0.95); align-items:center; justify-content:center;
}
.lightbox-modal.active{ display:flex; }
.lightbox-content{ max-width:90%; max-height:90%; }
.lightbox-content img{ width:100%; height:auto; border-radius:10px; }
.lightbox-close{
    position:absolute; top:26px; right:34px; color:#fff; font-size:2.6rem;
    cursor:pointer; transition:color .3s;
}
.lightbox-close:hover{ color:var(--gold); }

/* ---------- Footer ---------- */
footer{ background:#1f040b; color:var(--text-light); padding:60px 0 20px; }
.footer-brand{
    font-family:'Playfair Display', serif; font-size:1.7rem; color:var(--gold);
    margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.footer-links h5{ color:#fff; margin-bottom:18px; font-size:1rem; }
.footer-links a{ color:var(--text-light); display:block; margin-bottom:10px; transition:color .3s; font-size:.92rem; }
.footer-links a:hover{ color:var(--gold); }
.footer-links p{ font-size:.88rem; margin-bottom:8px; color:var(--text-light); }
.footer-links p i{ color:var(--gold); margin-right:6px; }
.social-links a{
    display:inline-block; width:38px; height:38px; background:rgba(255,255,255,0.08);
    color:#fff; border-radius:50%; text-align:center; line-height:38px;
    margin-right:8px; transition:.3s;
}
.social-links a:hover{ background:var(--gold); color:var(--navy-dark); transform:translateY(-3px); }
.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.1); margin-top:35px; padding-top:18px;
    text-align:center; font-size:.85rem;
}
.input-group .form-control{ border-radius:8px 0 0 8px; }
.input-group .btn{ border-radius:0 8px 8px 0; background:var(--gold); color:var(--navy-dark); border:none; font-weight:700; }

/* ---------- Back to top ---------- */
.back-to-top{
    position:fixed; bottom:28px; right:28px; width:48px; height:48px;
    background:var(--gold); color:var(--navy-dark); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:1.4rem;
    cursor:pointer; opacity:0; visibility:hidden; transition:.3s; z-index:999;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
.back-to-top.active{ opacity:1; visibility:visible; }
.back-to-top:hover{ transform:translateY(-5px); }

/* ---------- Responsive ---------- */
@media (max-width:768px){
    .carousel-caption h1{ font-size:2.1rem; }
    .carousel-caption p{ font-size:1rem; }
    .section-title h2{ font-size:2rem; }
    .btn-hero{ margin:5px; padding:11px 22px; }
    .about-content h3{ font-size:1.6rem; }
}

/* ---------- Generic inner-page header strip ---------- */
/*.page-header{
    background:linear-gradient(120deg, var(--navy-dark), var(--navy) 60%, var(--navy-light));
    color:#fff;
    padding:130px 0 55px;
    text-align:center;
}*/
.page-header h1{
    font-size:2.4rem; color:var(--gold-light); margin-bottom:10px;
}
.page-header p{ color:var(--text-light); margin:0; }
.page-header {
    position: relative;
    background: linear-gradient(
        100deg,
        var(--navy-dark),
        var(--navy) 100%,
        var(--navy-light)
    );
    color: #fff;
    padding: 85px 0;
    min-height: 265px;
    text-align: center;
    overflow: hidden;
}

/* IMAGE AREA */
.page-header-image {
    position: absolute;
    top: 0;
    right: 0;

    height: auto/*100%*/;
    width: 37%;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    z-index: 1;
}

/* ACTUAL IMAGE */
.page-header-image img {
    height: 100%;
    width: auto;

    max-width: 100%;

    object-fit: contain;
    object-position: right center;

    /* FADE THE LEFT EDGE */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.25) 12%,
        rgba(0,0,0,0.75) 28%,
        #000 45%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.25) 12%,
        rgba(0,0,0,0.75) 28%,
        #000 45%
    );

    opacity: 0.42;
}

/* TEXT ABOVE IMAGE */
.page-header-content {
    position: relative;
    z-index: 3;
}

.page-header h1 {
    font-size: 2.4rem;
    color: var(--gold-light);
    margin-bottom: 10px;
}

.page-header p {
    color: #f5dde2;
    margin: 0;
}
/* ---------- Secretariat member cards ---------- */
.secretariat-section{ background:#fcf7f8; }
.category-block{ margin-bottom:45px; }
.category-heading{
    font-size:1.5rem; color:var(--navy); margin-bottom:22px;
    padding-bottom:10px; border-bottom:3px solid var(--gold);
    display:inline-block;
}
.member-card{
    background:#fff; border-radius:16px; padding:24px;
    box-shadow:0 10px 28px rgba(90,16,34,0.08);
    border:1px solid #f3e8eb; height:100%;
    transition:.3s;
}
.member-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(90,16,34,0.14); }
.member-card-top{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.member-avatar{
    width:56px; height:56px; min-width:56px; border-radius:50%;
    background:linear-gradient(135deg, var(--navy), var(--navy-light));
    color:var(--gold-light); font-family:'Playfair Display', serif;
    font-size:1.5rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--gold);
}
.member-name{ margin:0 0 4px; color:var(--navy); font-size:1.15rem; }
.member-unit-badge{
    display:inline-block; background:#fff6e0; color:var(--gold-dark);
    font-size:.72rem; font-weight:700; padding:3px 12px; border-radius:20px;
    letter-spacing:.5px;
}
.member-card-body p{ margin:0 0 10px; font-size:.9rem; color:#555; line-height:1.55; }
.member-card-body i{ color:var(--gold-dark); width:18px; margin-right:4px; }
.member-contact a{ color:#555; transition:color .2s; }
.member-contact a:hover{ color:var(--navy); }

/* ---------- Generic styled data table (districts, etc.) ---------- */
.table-panel{
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 10px 28px rgba(90,16,34,0.08);
    border-top:4px solid var(--gold);
}
.styled-table{ width:100%; border-collapse:collapse; min-width:500px; }
.styled-table thead th{
    background:var(--navy); color:var(--gold-light);
    text-align:left; padding:16px 20px; font-size:.9rem;
    text-transform:uppercase; letter-spacing:.5px; font-weight:700;
}
.styled-table tbody td{
    padding:16px 20px; border-bottom:1px solid #f3e8eb; font-size:.92rem; color:#333;
}
.styled-table tbody tr:nth-child(even){ background:#fcf7f8; }
.styled-table tbody tr:hover{ background:#fff8e6; }
.styled-table .district-name{ font-weight:700; color:var(--navy); }

/* ---------- Table panel header bar (title + action button, e.g. rest_house.php) ---------- */
.table-panel-head{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    padding:20px 24px;
    border-bottom:1px solid #f3e8eb;
}
.table-panel-head h3{ margin:0; color:var(--navy); font-size:1.15rem; white-space:nowrap; }

/* margin-left:auto pushes this to the far right of the flex row,
   regardless of how wide the title text is */
.rh-download-btn{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    padding:10px 22px;
    border-radius:30px;
    border:2px solid var(--gold);
    color:var(--gold-dark);
    font-weight:700;
    font-size:.85rem;
    transition:.2s;
}
.rh-download-btn:hover{ background:var(--gold); color:var(--navy-dark); }

/* ---------- News / Publications cards (shared by news.php & publications.php) ---------- */
.np-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:26px;
}
.np-card{
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 10px 28px rgba(90,16,34,0.08); border:1px solid #f3e8eb;
    transition:.3s;
}
.np-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(90,16,34,0.14); }
.np-card-photo{ width:100%; height:200px; overflow:hidden; }
.np-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.np-card-body{ padding:22px; }
.np-card-date{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--gold-dark); font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px;
}
.np-card-title{ color:var(--navy); font-size:1.15rem; margin-bottom:10px; line-height:1.35; }
.np-card-desc{ color:#555; font-size:.9rem; line-height:1.65; margin-bottom:14px; }
.np-card-file-btn{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--gold-dark); font-weight:700; font-size:.85rem;
    border:1.5px solid var(--gold); padding:8px 16px; border-radius:30px; transition:.2s;
}
.np-card-file-btn:hover{ background:var(--gold); color:var(--navy-dark); }

/* ---------- Full gallery page caption (gallery.php) ---------- */
.gallery-caption{
    text-align:center; color:var(--muted); font-size:.85rem;
    margin:-15px 0 20px; font-style:italic;
}

/* =========================================================
   CONTACT PAGE ("ct-" prefixed, own crimson/navy accent,
   cannot collide with site theme or ab-/tl- page styles)
   ========================================================= */
.ct-hero, .ct-section, .ct-cta{
    --ct-navy:#5a1022; --ct-navy2:#3b0815; --ct-red:#C41E3A; --ct-red2:#8B0000;
    --ct-gold:#d4af37; --ct-border:#e7e1d7; --ct-muted:#64748b;
}
.ct-hero {
    position: relative;
    padding: 150px 0 90px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(
            130deg,
            rgba(59, 8, 21, 0.85),
            rgba(90, 16, 34, 0.75),
            rgba(180, 0, 0, 0.75)
        ),
        url('../../images/banner/PAGE_HERO23.jpg') center center / cover no-repeat;
}
.ct-hero img{
opacity: 1.0;
}
.ct-hero-content{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.ct-badge{
    display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(212,175,55,.5);
    background:rgba(0,0,0,.35); padding:8px 16px; border-radius:999px;
    color:var(--ct-gold); font-size:11px; font-weight:800; letter-spacing:.12em; margin-bottom:20px;
}
.ct-dot{ width:8px; height:8px; border-radius:50%; background:var(--ct-gold); }
.ct-hero-content h2{ font-family:'Playfair Display',serif; font-size:clamp(30px,5vw,46px); line-height:1.15; margin-bottom:16px; }
.ct-hero-content p{ color:#f5dde2; margin:0; }

.ct-section{ padding:70px 0; }
.ct-section-head{ text-align:center; max-width:760px; margin:0 auto 40px; }
.ct-eyebrow{
    color:var(--ct-red); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    font-size:11px; margin-bottom:10px;
}
.ct-section-head h2{ color:var(--ct-navy); font-family:'Playfair Display',serif; font-size:clamp(24px,3.4vw,32px); margin-bottom:12px; }
.ct-section-head p{ color:var(--ct-muted); margin:0; }

.ct-alert{ max-width:900px; margin:0 auto 24px; padding:14px 18px; border-radius:9px; font-size:13px; font-weight:700; }
.ct-alert-success{ background:#ecfdf5; border:1px solid #a7f3d0; color:#047857; }
.ct-alert-error{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }

.ct-contact-grid{ display:grid; grid-template-columns:5fr 7fr; gap:30px; align-items:start; }
.ct-contact-info{ background:#fff; border:1px solid var(--ct-border); border-radius:16px; padding:28px; box-shadow:0 8px 24px rgba(59,8,21,.06); }
.ct-contact-info h3{ color:var(--ct-navy); font-family:'Playfair Display',serif; font-size:20px; margin-bottom:16px; }
.ct-org-name{ color:var(--ct-red); font-family:'Playfair Display',serif; font-size:18px; line-height:1.4; font-weight:800; margin-bottom:16px; }
.ct-registration{ background:#fcf7f8; border-left:4px solid var(--ct-red); padding:11px 14px; font-size:11px; color:#475569; margin-bottom:20px; }
.ct-contact-row{ display:flex; gap:13px; margin:16px 0; padding-bottom:16px; border-bottom:1px solid var(--ct-border); }
.ct-contact-row:last-of-type{ border-bottom:0; }
.ct-contact-icon{ width:38px; height:38px; min-width:38px; border-radius:10px; background:rgba(196,30,58,.08); color:var(--ct-red); display:flex; align-items:center; justify-content:center; font-size:16px; }
.ct-contact-row b{ display:block; color:var(--ct-navy); font-size:13px; margin-bottom:3px; }
.ct-contact-row span{ color:#64748b; font-size:12px; }
.ct-contact-row a{ color:#64748b; }
.ct-contact-row a:hover{ color:var(--ct-red); }
.ct-office-card{ margin-top:20px; padding:18px; border-radius:12px; color:#fff; background:linear-gradient(135deg, var(--ct-navy2), var(--ct-navy)); }
.ct-office-card .ct-label{ color:var(--ct-gold); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.ct-office-card strong{ display:block; font-family:'Playfair Display',serif; font-size:15px; }
.ct-office-card p{ font-size:11px; color:#f5dde2; margin:6px 0 0; }

.ct-formbox{ background:#fcf7f8; border:1px solid var(--ct-border); border-radius:16px; padding:28px; box-shadow:0 8px 24px rgba(59,8,21,.06); }
.ct-formbox h3{ color:var(--ct-navy); font-family:'Playfair Display',serif; font-size:20px; margin-bottom:6px; }
.ct-form-description{ color:#64748b; font-size:12px; margin:0 0 20px; }
.ct-formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.ct-field{ margin-bottom:16px; }
.ct-field label{ display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#475569; margin-bottom:6px; }
.ct-required{ color:var(--ct-red); }
.ct-field input, .ct-field textarea{
    width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:11px 13px;
    background:#fff; font-size:13px; color:#333; outline:none; transition:.2s; font-family:inherit;
}
.ct-field input:focus, .ct-field textarea:focus{ border-color:var(--ct-red); box-shadow:0 0 0 3px rgba(196,30,58,.12); }
.ct-field textarea{ min-height:140px; resize:vertical; }

.ct-btn{
    border:0; border-radius:9px; padding:13px 26px; font-weight:800; font-size:12px;
    text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center;
    gap:8px; cursor:pointer; transition:.2s; text-decoration:none;
}
.ct-btn:hover{ transform:translateY(-2px); }
.ct-btn-red{ background:var(--ct-red); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.ct-btn-red:hover{ background:var(--ct-red2); }
.ct-btn-gold{ background:rgba(0,0,0,.35); color:#ffe78a; border:1px solid rgba(212,175,55,.45); }

.ct-map-section{ padding:0 0 70px; background:#fff; }
.ct-map-frame{
    width:100%; height:400px; border-radius:16px; overflow:hidden;
    box-shadow:0 10px 28px rgba(90,16,34,.1); border:1px solid var(--ct-border);
}
.ct-map-frame iframe{ width:100%; height:100%; display:block; }

.ct-quick-section{ background:#fff; }
.ct-quick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ct-quick-card{ background:#fff; border:1px solid var(--ct-border); border-radius:16px; padding:26px; text-align:center; transition:.25s; }
.ct-quick-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(59,8,21,.1); }
.ct-quick-icon{ width:46px; height:46px; margin:0 auto 14px; border-radius:12px; background:rgba(196,30,58,.08); color:var(--ct-red); display:flex; align-items:center; justify-content:center; font-size:19px; }
.ct-quick-card h3{ color:var(--ct-navy); font-size:16px; margin-bottom:8px; }
.ct-quick-card p{ color:#64748b; font-size:12px; margin:0; }
.ct-quick-card a{ color:var(--ct-red); font-weight:800; }

.ct-cta{ background:linear-gradient(110deg, var(--ct-red), var(--ct-red2)); color:#fff; text-align:center; padding:60px 0; }
.ct-cta h2{ font-family:'Playfair Display',serif; font-size:30px; margin-bottom:10px; }
.ct-cta p{ max-width:650px; margin:0 auto 22px; color:#ffe0e0; }

@media(max-width:900px){
    .ct-contact-grid{ grid-template-columns:1fr; }
    .ct-formgrid{ grid-template-columns:1fr; }
    .ct-quick-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   ABOUT PAGE ("ab-" prefixed so nothing here can collide with
   or override the site-wide theme variables/classes above)
   ========================================================= */
.ab-hero, .ab-intro, .ab-highlight, .ab-values, .ab-cta{
    --ab-navy:#5a1022; --ab-navy2:#3b0815; --ab-red:#C41E3A; --ab-red2:#8B0000;
    --ab-gold:#ffe082/*#d4af37*/; --ab-cream:#FBF8F1; --ab-ink:#3a1f26; --ab-muted:#6e5b60;
    --ab-line:#E7E1D7; --ab-shadow:0 14px 35px rgba(59,8,21,.10);
}
.ab-eyebrow{
    display:inline-block; margin-bottom:13px; color:var(--ab-gold);
    font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:2px;
}
.ab-eyebrow-red{ color:var(--ab-red); }

.ab-hero{
    position: relative;
    overflow: hidden;
    /*background:linear-gradient(120deg, var(--ab-navy2), var(--ab-navy) 85%);*/
        background:#3b0815;
    color:#fff; padding:130px 0 70px;
    /*background: url('images/banner/banner1.jpg');*/
}

/* IMAGE ON RIGHT */
.ab-hero::after{
    content:"";
    position:absolute;

    top:0;
    right:0;
    bottom:0;

    width:65%;

    background-image:url("../../images/banner/PAGE_HERO3.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    z-index:0;
    /* Animation */
    animation: heroImageIn 1.6s ease-out forwards;
    
    /* Initial state */
    opacity:0;
    transform:translateX(-320px);
}
@keyframes heroImageIn{
    0%{
        opacity:0;
        transform:translateX(-320px);
    }

    40%{
        opacity:.35;
    }

    100%{
        opacity:1;
        transform:translateX(0);
    }
}

/* FADE FROM IMAGE INTO NAVY */
.ab-hero::before{
    content:"";
    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    background:linear-gradient(
        90deg,
        #3b0815 0%,
        #3b0815 32%,
        rgba(59,8,21,.95) 43%,
        rgba(59,8,21,.65) 53%,
        rgba(59,8,21,.20) 68%,
        rgba(59,8,21,0) 82%
    );

    z-index:1;
}


/* CONTENT ABOVE EVERYTHING */
.ab-hero .container{
    position:relative;
    z-index:2;
}


.ab-hero h2{
    max-width:900px;
    margin:0 0 18px;

    font-size:clamp(28px,4vw,44px);
    line-height:1.2;

    font-family:'Playfair Display',serif;
}


.ab-hero p{
    max-width:820px;
    margin:0;
    color:#f5e3e7;
}
.ab-hero h2{ max-width:900px; margin:0 0 18px; font-size:clamp(28px,4vw,44px); line-height:1.2; font-family:'Playfair Display',serif; }
.ab-hero p{ max-width:820px; margin:0; color:#f5e3e7; }
/* Keep text above background */
.ab-hero .container{
    position: relative;
    z-index: 2;
}


.ab-hero h2{
    max-width:900px;
    margin:0 0 18px;

    font-size:clamp(28px,4vw,44px);
    line-height:1.2;

    font-family:'Playfair Display',serif;
}


.ab-hero p{
    max-width:820px;
    margin:0;

    color:#f5e3e7;
}
/*************   Mobile Css *************/
@media (max-width: 768px){

    .ab-hero{
        padding:100px 0 55px;

        background:
            linear-gradient(
                180deg,
                rgba(59,8,21,.94) 0%,
                rgba(59,8,21,.88) 45%,
                rgba(59,8,21,.72) 100%
            ),
            url("images/history-hero.png");

        background-size:cover;
        background-position:center;
    }

    .ab-hero h2{
        font-size:32px;
        line-height:1.18;
    }

    .ab-hero p{
        font-size:15px;
        line-height:1.6;
    }
}
.ab-intro{ padding:68px 0; background:var(--ab-cream); }
.ab-intro:nth-of-type(even){ background:#fff; }
.ab-section-title{ margin:0 0 14px; color:var(--ab-navy2); font-size:clamp(24px,3.4vw,34px); font-family:'Playfair Display',serif; }
.ab-section-title-light{ color:#fff; }
.ab-section-lead{ max-width:850px; color:var(--ab-muted); margin:0 0 8px; }
.ab-intro-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 5px;
}

.ab-intro-text {
    flex: 1;
}

.ab-intro-text .ab-section-lead {
    margin: 0;
}

.ab-intro-image {
    flex: 0 0 200px;
}

.ab-intro-image img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 12px;
}

/* Mobile */
@media (max-width: 768px) {
    .ab-intro-content {
        flex-direction: column;
        gap: 25px;
    }

    .ab-intro-image {
        width: 100%;
        flex: none;
    }

    .ab-intro-image img {
        width: 100%;
        height: 220px;
    }
}
.ab-history-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.ab-history-card{
    background:#fff; border:1px solid var(--ab-line); border-radius:16px;
    padding:28px; box-shadow:var(--ab-shadow);
}
.ab-history-card h3{ margin:0 0 12px; color:var(--ab-red2); font-size:19px; font-family:'Playfair Display',serif; }
.ab-history-card p{ margin:0 0 12px; color:#4a3c40; font-size:.92rem; line-height:1.7; }
.ab-history-card p:last-child{ margin-bottom:0; }

.ab-highlight{  position: relative;
    overflow: hidden;background:var(--ab-red2); color:#fff; padding:64px 0; text-align:center; }
.ab-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
   /* background: url('../../images/rally5.jpg') center center / cover no-repeat;**/
    opacity: 0.20; /* adjust image visibility */
    z-index: 0;
}
/*.ab-highlight .container {
    position: relative;
    z-index: 1;
}*/
.ab-highlight .ab-section-title{ display:inline-block; }
.ab-highlight p{ max-width:850px; margin:0 auto; color:#F9DEDE; }
.ab-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
.ab-stat{ padding:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17); border-radius:13px; }
.ab-stat strong{ display:block; color:var(--ab-gold); font-size:32px; font-family:'Playfair Display',serif; }
.ab-stat span{ display:block; margin-top:7px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

.ab-values{ padding:68px 0; background:#fff; text-align:center; }
.ab-value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; text-align:left; }
.ab-value-card{ background:#fff; border-top:5px solid var(--ab-gold); border-radius:14px; padding:26px; box-shadow:var(--ab-shadow); }
.ab-value-card h3{ margin:0 0 10px; color:var(--ab-navy2); font-size:19px; font-family:'Playfair Display',serif; }
.ab-value-card p{ margin:0; color:var(--ab-muted); font-size:14px; }
.ab-values-cta{ margin-top:30px; }

.ab-cta{ background:linear-gradient(110deg, var(--ab-red), var(--ab-red2)); color:#fff; padding:55px 0; }
.ab-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:25px; flex-wrap:wrap; }
.ab-cta h2{ margin:0 0 7px; font-size:26px; font-family:'Playfair Display',serif; }
.ab-cta p{ margin:0; color:#ffe0e0; }

.ab-btn{
    display:inline-block; padding:13px 26px; border-radius:8px;
    font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.5px;
    transition:.2s;
}
.ab-btn-gold{ background:var(--ab-gold); color:#2A2A2A; }
.ab-btn-gold:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.ab-btn-white{ background:#fff; color:var(--ab-red2); }
.ab-btn-white:hover{ transform:translateY(-2px); }

@media(max-width:900px){
    .ab-history-grid, .ab-value-grid, .ab-stats{ grid-template-columns:1fr; }
    .ab-cta-inner{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   TIMELINE PAGE ("tl-" prefixed - fully namespaced, uses its
   own purple/pink accent, cannot collide with the site theme
   or the "ab-" about-page styles above)
   ========================================================= */
.tl-hero, .tl-intro, .tl-timeline-wrap, .tl-stats, .tl-cta{
    --tl-purple:#5a1022; --tl-pink:#7d1a33; --tl-pink2:#a8842a;
    --tl-ink:#292f3b; --tl-muted:#687080; --tl-line:#e5e7ed;
}
.tl-eyebrow{
    text-transform:uppercase; letter-spacing:3px; font-size:12px;
    font-weight:800; margin-bottom:15px; opacity:.9; color:var(--tl-purple);
}
.tl-hero{
    padding:130px 0 70px;
    background:linear-gradient(135deg,#f85a8a 0%,var(--tl-pink) 35%,var(--tl-pink2) 70%,var(--tl-purple) 100%);
    color:#fff;
}
.tl-hero .tl-eyebrow{ color:#fff; }
.tl-hero-content{ max-width:850px; }
.tl-hero-content h1{ font-size:clamp(30px,5vw,50px); line-height:1.1; margin-bottom:18px; font-family:'Playfair Display',serif; }
.tl-hero-content p{ max-width:760px; font-size:17px; opacity:.95; margin:0; }
.tl-hero {
    position: relative;
    min-height: 430px;
    padding: 120px 0 70px;

    background:
        linear-gradient(
            90deg,
            #3b0815 0%,
            #3b0815 22%,
            #5a1022 40%,
            #3b0815 50%,
            #5a1022 60%,
            #3b0815 78%,
            #3b0815 100%
        );

    color: #fff;
    overflow: hidden;
}


/* ================= CENTER CONTENT ================= */

.tl-hero-content {
    position: relative;
    z-index: 5;

    max-width: 850px;
    margin: 0 auto;

    text-align: center;
}


/* ================= SIDE IMAGES ================= */

.tl-hero-image {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 27%;
    height: 100%;

    z-index: 1;

    display: flex;
    align-items: center;

    pointer-events: none;
}


/* LEFT */

.tl-hero-image-left {
    left: 0;
    justify-content: flex-start;
}


/* RIGHT */

.tl-hero-image-right {
    right: 0;
    justify-content: flex-end;
}


/* IMAGE ITSELF */

.tl-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    /* prevents the image from looking too bright */
    opacity: .72;
}


/* ================= SOFT BLENDING ================= */

/* left image fades into background */

.tl-hero-image-left::after {
    content: "";
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 35%;

    background: linear-gradient(
        to right,
        transparent,
        #3b0815
    );
}


/* right image fades into background */

/*.tl-hero-image-right::after {
    content: "";
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 60%;

   background: linear-gradient(
    to right,
    #3b0815 0%,
    rgba(59,8,21,.45) 40%,
    transparent 100%
);
}*/

.tl-hero-image-right::after {
    display: none;
}

.tl-hero-image-right img {
    display: block;
    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: center;

    opacity: .42;

    /* LEFT side of image becomes transparent */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.15) 12%,
        rgba(0,0,0,.45) 30%,
        rgba(0,0,0,.80) 55%,
        #000 75%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.15) 12%,
        rgba(0,0,0,.45) 30%,
        rgba(0,0,0,.80) 55%,
        #000 75%
    );
}
/* ================= TEXT ================= */

.tl-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    font-size: .85rem;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #e5b84b;
}


.tl-hero h1 {
    margin: 0 0 15px;

    font-size: 2.7rem;
    font-weight: 800;

    color: #fff;
}


.tl-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.05rem;
    line-height: 1.8;

    color: rgba(255,255,255,.82);
}


/* ================= TABLET ================= */

@media (max-width: 992px) {

    .tl-hero {
        min-height: 400px;
    }

    .tl-hero-image {
        width: 23%;
        opacity: .55;
    }

    .tl-hero-content {
        max-width: 650px;
    }

}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .tl-hero {
        min-height: auto;
        padding: 110px 20px 60px;
    }

    .tl-hero-image {
        width: 38%;
        opacity: .25;
    }

    .tl-hero-image-left {
        left: -10%;
    }

    .tl-hero-image-right {
        right: -10%;
    }

    .tl-hero-content {
        position: relative;
        z-index: 5;
    }

    .tl-hero h1 {
        font-size: 2rem;
    }

    .tl-hero p {
        font-size: .95rem;
        line-height: 1.7;
    }

}
.tl-intro{ padding:60px 0 20px; background:#fff; }
.tl-section-heading{ text-align:center; max-width:780px; margin:0 auto 40px; }
.tl-section-heading h2{ font-size:clamp(24px,3.4vw,32px); margin-bottom:12px; color:var(--tl-ink); font-family:'Playfair Display',serif; }
.tl-section-heading p{ color:var(--tl-muted); font-size:16px; margin:0; }

.tl-timeline-wrap{ padding:15px 0 90px; background:#fff; }
.tl-timeline{ position:relative; max-width:1000px; margin:0 auto; }
.tl-timeline:before{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:3px;
    background:#d9dce5; transform:translateX(-50%);
}
.tl-timeline-item{ width:50%; position:relative; padding:0 45px 38px 0; }
.tl-timeline-item:nth-of-type(even){ margin-left:50%; padding:0 0 38px 45px; }
.tl-timeline-dot{
    position:absolute; top:8px; right:-9px; width:18px; height:18px; border-radius:50%;
    background:var(--tl-purple); border:4px solid #fff; box-shadow:0 0 0 2px var(--tl-purple); z-index:2;
}
.tl-timeline-item:nth-of-type(even) .tl-timeline-dot{ left:-9px; right:auto; }
.tl-timeline-card{
    background:#fff; border:1px solid var(--tl-line); border-radius:14px;
    padding:22px 24px; box-shadow:0 8px 26px rgba(36,41,54,.07); transition:.2s;
}
.tl-timeline-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(36,41,54,.11); }
.tl-timeline-year{
    display:inline-block; color:#fff; background:var(--tl-purple); border-radius:30px;
    padding:4px 13px; font-size:13px; font-weight:800; margin-bottom:10px;
}
.tl-timeline-card h3{ font-size:18px; line-height:1.35; color:var(--tl-ink); margin-bottom:8px; font-family:'Playfair Display',serif; }
.tl-timeline-card p{ color:var(--tl-muted); font-size:14px; margin:0; }
.tl-timeline-card strong{ color:#3c4350; }
/* =========================================
   TIMELINE IMAGE
   CARD WIDTH REMAINS UNCHANGED
========================================= */

.tl-timeline-image {
    position: absolute;

    top: 40%;
    transform: translateY(-50%);

    width: 91%;
    height: 170px;

    z-index: 1;
}

.tl-timeline-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 14px;

    border: 1px solid rgba(36,41,54,.10);

   box-shadow: 0 8px 26px rgba(36,41,54,.10);

    transition: transform .3s ease,
                box-shadow .3s ease;
}

.tl-timeline-image img:hover {
    transform: scale(1.03);
}


/* =========================================
   ODD
   CARD LEFT  |  IMAGE RIGHT
========================================= */

.tl-timeline-item:nth-of-type(odd) .tl-timeline-image {
    left: calc(100% + 45px);
}


/* =========================================
   EVEN
   IMAGE LEFT  |  CARD RIGHT
========================================= */

.tl-timeline-item:nth-of-type(even) .tl-timeline-image {
    right: calc(100% + 45px);
}


/* Year avatar - shown in place of a missing timeline photo */
.tl-year-avatar{
    width:100%;
    height:100%;
    border-radius:14px;
    border:1px solid rgba(90,16,34,.15);
    box-shadow:0 8px 26px rgba(36,41,54,.10);
    background:
        radial-gradient(circle at 30% 25%, rgba(212,175,55,.18), transparent 55%),
        linear-gradient(135deg, var(--navy-dark), var(--navy) 60%, var(--navy-light));
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .3s ease;
}
.tl-year-avatar:hover{ transform:scale(1.03); }
.tl-year-avatar span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:96px; height:96px;
    border-radius:50%;
    border:3px solid var(--gold);
    background:rgba(255,255,255,.06);
    color:var(--gold-light);
    font-family:'Playfair Display', serif;
    font-size:1.55rem;
    font-weight:700;
    letter-spacing:1px;
}

/* Keep card above image */
.tl-timeline-card {
    position: relative;
    z-index: 3;
}
.tl-highlight{
    margin-top:13px; padding:10px 14px; background:#fcf6f7;
    border-left:3px solid var(--tl-pink2); border-radius:5px; color:#555d6d; font-size:13px;
}

.tl-stats{ padding:65px 0; background:#fafbfc; }
.tl-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tl-stat{ text-align:center; padding:28px 18px; border:1px solid var(--tl-line); border-radius:14px; background:#fff; }
.tl-stat-number{ display:block; color:var(--tl-purple); font-size:34px; font-weight:800; font-family:'Playfair Display',serif; }
.tl-stat-label{ display:block; color:#626a78; margin-top:6px; font-size:13px; font-weight:700; }

.tl-cta{
    padding:70px 0; text-align:center; color:#fff;
    background:linear-gradient(135deg, var(--tl-purple), var(--tl-pink2));
}
.tl-cta h2{ font-size:30px; margin-bottom:12px; font-family:'Playfair Display',serif; }
.tl-cta p{ max-width:650px; margin:0 auto 22px; opacity:.94; }
.tl-btn{
    display:inline-block; padding:13px 28px; border-radius:30px;
    background:#fff; color:var(--tl-purple); font-size:14px; font-weight:800; transition:.2s;
}
.tl-btn:hover{ background:#f6f7fb; transform:translateY(-2px); }

@media(max-width:800px){
    .tl-timeline:before{ left:10px; transform:none; }
    .tl-timeline-item, .tl-timeline-item:nth-of-type(even){ width:100%; margin-left:0; padding:0 0 28px 34px; }
    .tl-timeline-dot, .tl-timeline-item:nth-of-type(even) .tl-timeline-dot{ left:1px; right:auto; }
    .tl-stats-grid{ grid-template-columns:1fr; }

    /* Mobile: timeline photo sits below its card instead of off-screen beside it */
    .tl-timeline-image,
    .tl-timeline-item:nth-of-type(odd) .tl-timeline-image,
    .tl-timeline-item:nth-of-type(even) .tl-timeline-image{
        position:relative;
        top:auto; left:auto; right:auto;
        transform:none;
        width:100%;
        height:auto;
        margin-top:12px;
    }
    .tl-timeline-image img{
        height:auto;
        max-height:240px;
        background:#fff;
    }
    .tl-year-avatar{ height:150px; }
    .tl-year-avatar span{ width:80px; height:80px; font-size:1.3rem; }
    .tl-timeline-card{ padding:18px 18px; }
    .tl-timeline-wrap{ padding:10px 0 60px; overflow-x:hidden; }
}