/* ============================================================
   DBI MODERN THEME — modern.css
   Glassmorphism nav, animations, modern cards, gradients
   ============================================================ */

/* ---- GOOGLE FONTS override ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --dbi-navy:   #294A70;
    --dbi-blue:   #3b6290;
    --dbi-gold:   #f59e0b;
    --dbi-light:  #f8fafc;
    --dbi-card:   #ffffff;
    --dbi-radius: 14px;
    --dbi-shadow: 0 4px 32px rgba(10,22,40,.10);
    --dbi-trans:  all .28s cubic-bezier(.4,0,.2,1);
    --font-main:  'Plus Jakarta Sans', 'Open Sans', sans-serif;
    --font-alt:   'Space Grotesk', 'Merriweather Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-main);
    background: #f5f7fa;
    color: #1e293b;
    margin: 0;
}

/* ==============================
   TOP BAR — glass + gradient
   ============================== */
.dbi-top-bar {
    background: linear-gradient(90deg, #1b324d 0%, #3b6290 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(245,158,11,.4);
    padding: 8px 0;
}
.dbi-top-bar__contact a,
.dbi-top-bar__contact a:hover { transition: var(--dbi-trans); }

/* ==============================
   BRAND ROW
   ============================== */
.dbi-brand-row {
    background: #fff;
    box-shadow: 0 1px 0 #e2e8f0;
    padding: 16px 0;
}
.dbi-brand-mark strong {
    font-family: var(--font-alt);
    font-size: 2rem;
    background: linear-gradient(135deg, #294A70 0%, #3b6290 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dbi-site-search form {
    border-radius: 50px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    transition: var(--dbi-trans);
}
.dbi-site-search form:focus-within {
    border-color: var(--dbi-gold);
    box-shadow: 0 0 0 4px rgba(245,158,11,.15);
}
.dbi-site-search input { background: transparent; border-radius: 50px 0 0 50px; }
.dbi-site-search button { border-radius: 0 50px 50px 0; background: var(--dbi-blue); }
.dbi-site-search button:hover { background: var(--dbi-gold); }

/* ==============================
   MAIN NAV — glassmorphism sticky
   ============================== */
.dbi-main-nav {
    background: linear-gradient(90deg, #1b324d 0%, #294A70 80%, #3b6290 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 2px solid rgba(245,158,11,.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow .3s;
}
.dbi-nav-list > li > a {
    font-family: var(--font-main);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .3px;
    position: relative;
    padding: 0 14px;
    transition: var(--dbi-trans);
}
.dbi-nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 3px;
    background: var(--dbi-gold);
    border-radius: 2px 2px 0 0;
    transition: left .25s, right .25s;
}
.dbi-nav-list > li > a:hover::after,
.dbi-nav-list > li > a.nav-active::after { left: 10%; right: 10%; }
.dbi-nav-list > li > a:hover,
.dbi-nav-list > li > a.nav-active { background: transparent; color: var(--dbi-gold); }

/* Dropdown modern */
.dbi-drop {
    border-radius: 0 0 var(--dbi-radius) var(--dbi-radius);
    border-top: 3px solid var(--dbi-gold);
    box-shadow: 0 20px 60px rgba(10,22,40,.18);
    animation: dropIn .18s ease;
    min-width: 220px;
}
@keyframes dropIn {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}
.dbi-drop li a { font-size: .84rem; padding: 11px 18px; border-bottom: 1px solid #f1f5f9; }
.dbi-drop li a:hover { background: linear-gradient(90deg,#fff8e7,#fffbf0); color: var(--dbi-blue); padding-left: 24px; }

/* Quick links btn */
.dbi-quick-links-btn {
    background: linear-gradient(135deg, var(--dbi-gold), #fbbf24);
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(245,158,11,.4);
}

/* ==============================
   HERO SECTION
   ============================== */
.dbi-hero-wrap { background: #f1f5f9; padding: 20px 0 0; }
.dbi-hero-swiper { border-radius: var(--dbi-radius); overflow: hidden; box-shadow: var(--dbi-shadow); }
.dbi-hero-swiper .swiper-slide img { border-radius: var(--dbi-radius); }

/* News flyer */
.dbi-news-flyer {
    border-radius: var(--dbi-radius);
    overflow: hidden;
    box-shadow: var(--dbi-shadow);
}
.dbi-news-flyer__head {
    background: linear-gradient(135deg, #1b324d, #294A70);
    font-family: var(--font-alt);
    letter-spacing: .5px;
}
.dbi-news-flyer__body a {
    border-radius: 8px;
    transition: var(--dbi-trans);
}

/* ==============================
   TICKER
   ============================== */
.dbi-ticker {
    background: linear-gradient(90deg, #1b324d, #294A70);
    border-bottom: none;
    border-top: none;
    position: relative;
    overflow: hidden;
}
.dbi-ticker::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(245,158,11,.04) 0px, rgba(245,158,11,.04) 1px, transparent 1px, transparent 60px);
    pointer-events: none;
}
.dbi-ticker__label {
    border-radius: 50px;
    font-size: .78rem;
    letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(245,158,11,.4);
}

/* ==============================
   COURSE TILES — modern gradient
   ============================== */
.dbi-courses-section { background: #f1f5f9; padding: 70px 0; }
.section-heading h2 {
    font-family: var(--font-alt);
    font-size: 1.8rem;
    color: var(--dbi-navy);
    position: relative;
    display: inline-block;
}
.section-heading h2::after {
    content: '';
    display: block;
    width: 60px; height: 4px;
    background: linear-gradient(90deg, var(--dbi-gold), #fbbf24);
    border-radius: 2px;
    margin: 10px 0 0;
}

.dbi-tile-grid { gap: 14px; }
.dbi-course-tile {
    border-radius: var(--dbi-radius);
    min-height: 180px;
    position: relative;
    overflow: hidden;
    transition: var(--dbi-trans);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.dbi-course-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%);
    border-radius: inherit;
    pointer-events: none;
}
.dbi-course-tile::after {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px;
    width: 80px; height: 80px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}
.dbi-course-tile:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
.dbi-course-tile i {
    font-size: 2.4rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
    position: relative; z-index: 1;
}
.dbi-course-tile strong,
.dbi-course-tile span { position: relative; z-index: 1; }
.dbi-course-tile strong { font-family: var(--font-alt); font-size: 1rem; }

/* ==============================
   DIRECTOR SECTION
   ============================== */
.dbi-director-section { background: linear-gradient(135deg, #f8fafc 0%, #e8f0f8 100%); }
.dbi-director-msg {
    border-radius: var(--dbi-radius);
    border-top: none;
    border-left: 5px solid var(--dbi-gold);
    box-shadow: var(--dbi-shadow);
}
.dbi-director-msg h2 { font-family: var(--font-alt); }
.dbi-director-photo img {
    border-radius: var(--dbi-radius);
    border: none;
    box-shadow: 0 20px 60px rgba(10,22,40,.18);
}

/* ==============================
   EVENTS SECTION
   ============================== */
.dbi-events-section { background: #f8fafc; }
.dbi-feed-card {
    border: none;
    border-radius: var(--dbi-radius);
    box-shadow: var(--dbi-shadow);
    transition: var(--dbi-trans);
    overflow: hidden;
}
.dbi-feed-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.14); }
.dbi-feed-card img { height: 200px; }
.dbi-fb-header {
    border-radius: var(--dbi-radius) var(--dbi-radius) 0 0;
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
}
.dbi-event-flyer img { border-radius: var(--dbi-radius); box-shadow: var(--dbi-shadow); }

/* ==============================
   VIDEO BAND
   ============================== */
.dbi-video-band {
    background: linear-gradient(135deg, #1b324d 0%, #294A70 60%, #3b6290 100%);
    position: relative;
    overflow: hidden;
}
.dbi-video-band::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
    top: -200px; right: -100px;
    pointer-events: none;
}
.dbi-video-thumb { border-radius: var(--dbi-radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.dbi-play-btn i {
    background: linear-gradient(135deg, var(--dbi-gold), #fbbf24);
    color: #111;
    transition: var(--dbi-trans);
}
.dbi-video-thumb:hover .dbi-play-btn i { transform: scale(1.15); }

/* ==============================
   AFFILIATIONS — marquee scroll
   ============================== */
.affiliations { background: #fff; border-top: 1px solid #e2e8f0; padding: 36px 0 !important; }
.affil-scroll { display: flex; gap: 0; overflow: hidden; position: relative; }
.affil-box {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: var(--dbi-navy);
    font-weight: 800;
    font-size: .82rem;
    padding: 12px 22px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 14px;
    transition: var(--dbi-trans);
}
.affil-box:hover { background: var(--dbi-gold); color: #111; border-color: var(--dbi-gold); }

/* ==============================
   UTILITY GRID
   ============================== */
.utility-grid a {
    border-radius: var(--dbi-radius);
    padding: 20px;
    font-size: .85rem;
    transition: var(--dbi-trans);
    position: relative;
    overflow: hidden;
}
.utility-grid a::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .3s;
}
.utility-grid a:hover::before { opacity: 1; }
.utility-grid a:nth-child(even) { background: linear-gradient(135deg, var(--dbi-gold), #fbbf24); }
.utility-grid a:nth-child(odd)  { background: linear-gradient(135deg, #071428, #0d3b6b); }
.utility-grid a:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.2); }

/* ==============================
   INQUIRY FORM
   ============================== */
.inquiry-section {
    background: linear-gradient(135deg, #294A70 0%, #3b6290 100%);
    position: relative;
    overflow: hidden;
}
.inquiry-section::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
    bottom: -200px; left: -100px;
    pointer-events: none;
}
.inquiry-container {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.inquiry-container h2 { font-family: var(--font-alt); }
.form-control {
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: #fff;
    transition: var(--dbi-trans);
}
.form-control:focus {
    border-color: var(--dbi-gold);
    box-shadow: 0 0 0 4px rgba(245,158,11,.15);
    background: rgba(255,255,255,.1);
    outline: none;
}
.form-control::placeholder { color: rgba(255,255,255,.4); }
.form-control option { background: #0d3b6b; color: #fff; }
.btn-submit {
    background: linear-gradient(135deg, var(--dbi-gold), #fbbf24);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(245,158,11,.4);
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .3px;
    transition: var(--dbi-trans);
    border: none;
    color: #111;
    padding: 14px;
    width: 100%;
    cursor: pointer;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,158,11,.5); }

/* ==============================
   FLOATING PROSPECTUS
   ============================== */
.dbi-float-prospect {
    background: linear-gradient(180deg, #071428, #0d3b6b);
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 20px rgba(0,0,0,.25);
    transition: var(--dbi-trans);
}
.dbi-float-prospect:hover { background: linear-gradient(180deg, var(--dbi-gold), #fbbf24); color: #111; }

/* ==============================
   FOOTER
   ============================== */
.dbi-footer {
    background: linear-gradient(160deg, #1b324d 0%, #294A70 60%, #1b324d 100%);
    position: relative;
    overflow: hidden;
}
.dbi-footer::before {
    content: '';
    position: absolute;
    width: 800px; height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.04) 0%, transparent 70%);
    top: -300px; right: -200px;
    pointer-events: none;
}
.dbi-footer__col h4 { font-family: var(--font-alt); letter-spacing: .8px; }
.dbi-footer__social a { transition: var(--dbi-trans); }
.dbi-footer__social a:hover { background: linear-gradient(135deg, var(--dbi-gold), #fbbf24); color: #111; transform: translateY(-2px); }
.dbi-footer__bottom { border-top: 1px solid rgba(255,255,255,.06); }
.dbi-footer__credits strong { font-style: normal; }

/* ==============================
   BUTTONS (global override)
   ============================== */
.btn {
    background: linear-gradient(135deg, var(--dbi-gold), #fbbf24);
    border: none;
    border-radius: 50px;
    color: #111;
    font-weight: 800;
    padding: 10px 24px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--dbi-trans);
    box-shadow: 0 4px 16px rgba(245,158,11,.3);
    font-size: .88rem;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,158,11,.45); color: #111; }
.btn-outline {
    background: transparent;
    border: 2px solid var(--dbi-gold);
    color: var(--dbi-gold);
    box-shadow: none;
}
.btn-outline:hover { background: var(--dbi-gold); color: #111; }
.btn-light { background: #fff; color: var(--dbi-navy); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.btn-light:hover { background: var(--dbi-gold); color: #111; }

/* ==============================
   SPLIT HEADING
   ============================== */
.split-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.split-heading h2 { font-family: var(--font-alt); color: var(--dbi-navy); margin: 4px 0 0; }

/* ==============================
   SCROLL REVEAL — class based
   Elements visible by default; JS adds .dbi-will-reveal before observing
   ============================== */
.dbi-will-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .55s ease;
}
.dbi-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Course tiles — staggered fade-up on page load */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dbi-course-tile   { animation: fadeUp .5s ease both; }
.dbi-course-tile:nth-child(1)  { animation-delay: .05s; }
.dbi-course-tile:nth-child(2)  { animation-delay: .10s; }
.dbi-course-tile:nth-child(3)  { animation-delay: .15s; }
.dbi-course-tile:nth-child(4)  { animation-delay: .20s; }
.dbi-course-tile:nth-child(5)  { animation-delay: .25s; }
.dbi-course-tile:nth-child(6)  { animation-delay: .30s; }
.dbi-course-tile:nth-child(7)  { animation-delay: .35s; }
.dbi-course-tile:nth-child(8)  { animation-delay: .40s; }
.dbi-course-tile:nth-child(9)  { animation-delay: .45s; }
.dbi-course-tile:nth-child(10) { animation-delay: .50s; }
.dbi-course-tile:nth-child(11) { animation-delay: .55s; }
.dbi-course-tile:nth-child(12) { animation-delay: .60s; }
.dbi-course-tile:nth-child(13) { animation-delay: .65s; }
.dbi-course-tile:nth-child(14) { animation-delay: .70s; }
.dbi-course-tile:nth-child(15) { animation-delay: .75s; }
.dbi-course-tile:nth-child(16) { animation-delay: .80s; }
.dbi-course-tile:nth-child(17) { animation-delay: .85s; }

/* Pulse on play button */
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
    70%  { box-shadow: 0 0 0 18px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.dbi-play-btn i { animation: pulse-ring 2s infinite; }

/* ==============================
   MOBILE RESPONSIVE TWEAKS
   ============================== */
@media (max-width: 900px) {
    .dbi-brand-mark strong { font-size: 1.5rem; }
}
@media (max-width: 600px) {
    .dbi-course-tile { min-height: 150px; }
    .dbi-course-tile i { font-size: 1.8rem; }
    .dbi-course-tile strong { font-size: .88rem; }
}

/* ==============================
   CONTENT PAGES — rich-content
   ============================== */
.rich-content h2 { font-family: var(--font-alt); color: var(--dbi-navy); margin-bottom: 16px; }
.rich-content h3 { font-family: var(--font-alt); color: var(--dbi-blue); margin: 28px 0 12px; font-size: 1.2rem; }
.rich-content p  { line-height: 1.8; color: #475569; }
.rich-content ul { color: #475569; line-height: 2; padding-left: 20px; }
.rich-content ul li::marker { color: var(--dbi-gold); }

/* Content hero pages */
.content-hero { padding: 70px 0 !important; }
.content-hero h1 { font-family: var(--font-alt); }

/* ==============================
   MY ACCOUNT MODERN
   ============================== */
.form-group { margin-bottom: 18px; }
.form-group label { font-family: var(--font-main); }
.form-group input, .form-group select {
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: .95rem;
    width: 100%;
    transition: var(--dbi-trans);
    font-family: var(--font-main);
    background: #fafafa;
}
.form-group input:focus, .form-group select:focus {
    border-color: var(--dbi-gold);
    box-shadow: 0 0 0 4px rgba(245,158,11,.12);
    outline: none;
    background: #fff;
}

/* Inquiry form inside dark section — override the light styles */
.inquiry-section .form-group input,
.inquiry-section .form-group select,
.inquiry-section .form-control {
    background: rgba(255,255,255,.07) !important;
    border: 1.5px solid rgba(255,255,255,.15) !important;
    color: #fff !important;
    border-radius: 10px;
}
.inquiry-section .form-group input:focus,
.inquiry-section .form-group select:focus,
.inquiry-section .form-control:focus {
    border-color: var(--dbi-gold) !important;
    box-shadow: 0 0 0 4px rgba(245,158,11,.15) !important;
    background: rgba(255,255,255,.12) !important;
}
.inquiry-section .form-group input::placeholder,
.inquiry-section .form-control::placeholder { color: rgba(255,255,255,.45) !important; }
.inquiry-section .form-group select option { background: #0d3b6b; color: #fff; }

/* ==============================
   NAV MOBILE DRAWER — modern
   ============================== */
.dbi-mobile-drawer {
    background: linear-gradient(160deg, #071428, #0d3b6b);
    box-shadow: -8px 0 40px rgba(0,0,0,.4);
}
.dbi-mobile-drawer__body a:hover { background: rgba(245,158,11,.18); }

/* ==============================
   HOMEPAGE — DIRECTOR OVERRIDES
   ============================== */
.dbi-director-msg .btn-outline {
    border-color: var(--dbi-gold);
    color: var(--dbi-gold);
    font-size: .88rem;
    padding: 9px 22px;
}

/* ============================================================
   FULL-SCREEN LAYOUT
   Make every section and the container use the full viewport
   width with generous (but not cramped) side padding.
   ============================================================ */

/* Remove the 1400 px cap — everything stretches to the viewport */
.container,
.wide-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left:  clamp(16px, 4vw, 80px) !important;
    padding-right: clamp(16px, 4vw, 80px) !important;
    box-sizing: border-box;
}

/* Sections that were already full-width keep their bg colours;
   ensure no accidental horizontal scroll */
html, body { overflow-x: hidden; width: 100%; }

/* Nav rows should also span 100% */
.dbi-top-bar    > .container,
.dbi-brand-row  > .container,
.dbi-main-nav   > .container { max-width: 100% !important; }

/* Hero background stretches to edges */
.dbi-hero-wrap { width: 100%; }

/* Hero layout: let the slider breathe on large screens */
.dbi-hero-layout {
    grid-template-columns: minmax(0, 3.2fr) 320px;
}

/* Course tile grid: prefer more columns on ultra-wide */
@media (min-width: 1400px) {
    .dbi-tile-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
    }
}
@media (min-width: 1800px) {
    .dbi-tile-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 22px;
    }
    .dbi-hero-layout {
        grid-template-columns: minmax(0, 3.5fr) 360px;
    }
}

/* Director + events grids: use fractional units so they fill space */
.dbi-director-grid { grid-template-columns: 1fr 1.6fr; gap: 60px; }
.dbi-events-grid   { grid-template-columns: 1fr 1fr;   gap: 32px; }
.dbi-video-grid    { grid-template-columns: 1fr .65fr;  gap: 60px; }

/* Footer columns: up to 5 columns on very wide displays */
@media (min-width: 1400px) {
    .dbi-footer__cols {
        grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr !important;
    }
}

/* Utility grid: fill all available space */
.utility-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Inquiry form: cap the inner form card width so text stays readable,
   but the dark section background still bleeds 100% */
.inquiry-container {
    max-width: 620px;
    margin: 0 auto;
}

/* Chatbot Action Buttons */
.bot-action-message { background: transparent !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 10px; }
.chatbot-btn { display: inline-block; background: #004e92; color: #fff; padding: 6px 12px; border-radius: 20px; text-decoration: none; font-size: 0.85rem; margin-top: 5px; }
.chatbot-btn:hover { background: #003870; color: #fff; }
.chatbot-quick-replies { display: flex; gap: 8px; flex-wrap: wrap; }
.chatbot-quick-replies button { background: #eef2f5; border: 1px solid #cce1f0; color: #004e92; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 0.8rem; transition: all 0.2s ease; }
.chatbot-quick-replies button:hover { background: #004e92; color: #fff; border-color: #004e92; }