/* =============================================================
 * homepage-desktop.css
 * Desktop polish for index.php (>= 1024px).
 *
 * Loads LAST after: main.css, responsive.css, call-center.css.
 * Scoped to `body.index-page` so it does NOT affect other pages.
 *
 * TABLE OF CONTENTS
 *   [0] GLOBAL          — container width, section vertical rhythm
 *   [1] BANNER / HERO   — banner.php (#hero)
 *   [2] SLIDE SHOW      — slide_show.php (#about.section_slide)
 *   [3] INFORMATION     — information.php  (pending)
 *   [4] CALL CENTER     — call_center.php  (pending)
 *   [5] PRODUCT GRID    — product.php      (pending)
 *   [6] FAQ             — faq.php          (pending)
 *   [7] RATING          — rating.php       (pending)
 *   [8] FOOTER          — footer.php       (pending)
 *
 * BRAND COLORS (referenced throughout)
 *   --primary-deep    : #0d3f71  (deep brand blue)
 *   --primary-accent  : #35a1ec  (accent blue / links)
 *   --text-heading    : #1e333e  (dark heading text)
 *   --text-body       : #4a5662  (paragraph text)
 *
 * HOW TO READ THIS FILE
 *   Each section is wrapped in /* ── SECTION N. NAME ── *\/ markers.
 *   Lines that you may want to tweak are tagged with `ADJUST:` so you
 *   can Ctrl+F "ADJUST" to jump between adjustable knobs.
 *
 *   See HOMEPAGE-DESKTOP-GUIDE.md (same folder) for a friendly visual
 *   guide to every knob.
 * ============================================================= */


/* =============================================================
   DESKTOP ONLY (>= 1024px)
   Mobile / tablet keep using the legacy stylesheets unchanged.
   ============================================================= */
@media (min-width: 1024px) {

  /* ── SECTION 0. GLOBAL ───────────────────────────────────────
     Sets the page's max content width and the vertical spacing
     between every <section> in <main>.
     ─────────────────────────────────────────────────────────── */

  body.index-page .container {
    max-width: 1200px;  /* ADJUST: page content max width */
    padding-left: 24px; /* ADJUST: left/right gutter */
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
  }

  body.index-page main > section {
    padding-top: 64px;    /* ADJUST: vertical rhythm between sections */
    padding-bottom: 64px;
  }


  /* ── SECTION 1. BANNER / HERO ────────────────────────────────
     File: banner.php  •  CSS hook: #hero.hero

     Layout:
       ┌─────────────────────────┬───────────────────────────┐
       │  TEXT (h1 + p + slider) │  VIDEO (50vw, flush right)│
       │  50% of container       │  full half-viewport       │
       └─────────────────────────┴───────────────────────────┘

     Knobs you'll probably want to touch:
       • h1 size        → "ADJUST: hero h1"
       • Slider h2 size → "ADJUST: hero slider h2"
       • Video ratio    → "ADJUST: hero video aspect-ratio"
       • Vertical pad   → "ADJUST: hero vertical padding"
       ─────────────────────────────────────────────────────────── */
 
body.index-page .hero {
  min-height: auto;
  padding: 0 0 56px 0;  /* top jadi 0 */
  margin-top: 0;         /* pastikan ga ada margin top */
  display: flex;
  align-items: center;
  overflow: hidden;
}

  /* Hero container is unconstrained so the right column can hit the
     viewport's right edge at any zoom level. */
  body.index-page .hero > .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body.index-page .hero .container > .row {
    align-items: center;
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-wrap: nowrap;
  }

  /* LEFT COLUMN (text) ----------------------------------------- */
  /* Padding-left mirrors the standard 1200px-centered container so
     the text starts at the same x position as content in section 2+. */
  body.index-page .hero .col-lg-7 {
    flex: 1 1 50%;
    max-width: 50%;
    padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
    padding-right: 32px;     /* ADJUST: gap between text and video */
  }

  body.index-page .hero h1 {
    font-size: 44px;         /* ADJUST: hero h1 */
    line-height: 1.2;
    font-weight: 800;
    color: #1e333e;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
  }

  body.index-page .hero p {
    font-size: 17px;         /* ADJUST: hero paragraph */
    line-height: 1.6;
    color: #4a5662;
    margin: 0 0 24px 0;
    font-weight: 400;
  }

  /* Rotating text slider (#slider) */
  body.index-page .hero #slider {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    min-height: 90px;        /* ADJUST: slider area height (avoids layout jump) */
    width: 100%;
  }

  body.index-page .hero #slider li,
  body.index-page .hero ul li {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    list-style: none;
  }

  body.index-page .hero #slider li h2,
  body.index-page .hero h2 {
    font-size: 32px;         /* ADJUST: hero slider h2 */
    font-weight: 800;
    line-height: 1.25;
    color: #35a1ec;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
  }

  /* Pager dots for the text slider (responsiveslides .callbacks_tabs) */
  body.index-page .hero .callbacks_tabs {
    position: absolute;
    bottom: -28px;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 8px;
  }

  body.index-page .hero .callbacks_tabs li {
    width: auto !important;
    height: auto !important;
  }

  body.index-page .hero .callbacks_tabs a {
    display: block;
    width: 10px;             /* ADJUST: pager dot size */
    height: 10px;
    border-radius: 50%;
    background: #cfd8df;     /* ADJUST: inactive dot color */
    text-indent: -9999px;
    overflow: hidden;
    transition: background 0.25s ease;
  }

  body.index-page .hero .callbacks_tabs .callbacks_here a,
  body.index-page .hero .callbacks_tabs a:hover {
    background: #35a1ec;     /* ADJUST: active dot color */
  }

  /* RIGHT COLUMN (video) --------------------------------------- */
  /* Locked to 50vw so its right edge = viewport right edge. */
  body.index-page .hero .col-lg-5 {
    flex: 0 0 50vw;
    max-width: 50vw;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
  }

  body.index-page .hero-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  body.index-page .hero #slider_ {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    aspect-ratio: 4 / 3;     /* ADJUST: hero video aspect-ratio (try 16/9 or 3/2) */
  }

  body.index-page .hero #slider_ li {
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.index-page .hero #slider_ video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  /* Hide broken responsiveslides nav arrows (themes.gif missing) */
  body.index-page .hero #slider_ ~ .callbacks_nav,
  body.index-page .hero .hero-img .callbacks_nav {
    display: none !important;
  }

  /* Pager dots overlay on video */
  body.index-page .hero-img .callbacks_tabs {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  body.index-page .hero-img .callbacks_tabs a {
    background: rgba(255, 255, 255, 0.6);
  }

  body.index-page .hero-img .callbacks_tabs .callbacks_here a {
    background: #ffffff;
  }


  /* ── SECTION 2. SLIDE SHOW ───────────────────────────────────
     File: slide_show.php  •  CSS hook: #about.section_slide

     This is the full-width image carousel that runs below the
     hero. Existing CSS in main.css hard-codes `height: 200px` on
     `.section_slide`, which crops the slideshow on desktop — we
     override that here and let the image dictate its own height.

     Knobs:
       • Slide max-height    → "ADJUST: slide max-height"
       • Slide border-radius → "ADJUST: slide border radius"
       • Vertical padding    → "ADJUST: slide section padding"
     ─────────────────────────────────────────────────────────── */

  body.index-page #about.section_slide {
    height: auto;            /* kill main.css line ~2293 (height: 200px) */
    border: 0;
    padding-top: 16px;       /* ADJUST: slide section padding (top) */
    padding-bottom: 32px;    /* ADJUST: slide section padding (bottom) — gives breathing room before next section */
    background-color: transparent;
  }

  /* The .slider holds the <ul.rslides> carousel.
     Shows full image at natural aspect ratio (no crop). */
  body.index-page #about .slider {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: hidden;
    border-radius: 20px;     /* ADJUST: slide border radius */
    box-shadow: 0 10px 30px rgba(13, 63, 113, 0.10);
  }

  body.index-page #about .rslides {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  body.index-page #about .rslides li {
    width: 100%;
  }

  body.index-page #about .rslides img {
    float: none;
    display: block;
    width: 100%;
    height: auto;            /* full image, natural aspect ratio */
    max-height: none;
    margin: 0 auto;
    border: 0;
    border-radius: 20px;
  }

  /* Hide the broken arrow buttons (themes.gif path doesn't resolve) */
  body.index-page #about .callbacks_nav {
    display: none !important;
  }

  /* Pager dots — match hero style, but overlay on the slide */
  body.index-page #about .callbacks_tabs {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 8px;
    z-index: 3;
  }

  body.index-page #about .callbacks_tabs li {
    width: auto !important;
    height: auto !important;
  }

  body.index-page #about .callbacks_tabs a {
    display: block;
    width: 10px;             /* ADJUST: slide pager dot size */
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    text-indent: -9999px;
    overflow: hidden;
    transition: background 0.25s ease;
  }

  body.index-page #about .callbacks_tabs .callbacks_here a,
  body.index-page #about .callbacks_tabs a:hover {
    background: #ffffff;
  }


  /* ── SECTION 3. INFORMATION (Kenapa Memilih Kami) ────────────
     File: information.php  •  CSS hook: .info-kenapa-row

     Layout:
       ┌───────────────────────────┬───────────────────────────┐
       │  HEADING + IMAGE          │  4 CARDS (2x2 grid)       │
       │  - h3 title from DB       │  - icon + label per card  │
       │  - illustration image     │                           │
       │  ~48% width               │  ~52% width               │
       └───────────────────────────┴───────────────────────────┘

     Knobs:
       • Heading size       → "ADJUST: info heading size"
       • Image max-width    → "ADJUST: info image max-width"
       • Card min-height    → "ADJUST: info card min-height"
       • Card icon size     → "ADJUST: info card icon size"
       • Card label size    → "ADJUST: info card label size"
     ─────────────────────────────────────────────────────────── */

  body.index-page .info-kenapa-row {
    display: flex;
    align-items: center;
    gap: 48px;                 /* ADJUST: gap between image and cards */
    width: 100%;
  }

  /* LEFT: heading + illustration */
  body.index-page .info-kenapa-image {
    flex: 1 1 48%;
    max-width: 48%;
    /* Defeat legacy fixed widths from main.css */
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  body.index-page .info-kenapa-image h3 {
    font-size: 36px;           /* ADJUST: info heading size */
    font-weight: 800;
    line-height: 1.2;
    color: #1e333e;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    width: auto !important;
    letter-spacing: -0.5px;
  }

  body.index-page .info-kenapa-image img {
    width: 100% !important;
    max-width: 460px !important;  /* ADJUST: info image max-width */
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
  }

  /* RIGHT: 4 cards in 2x2 grid */
  body.index-page .info-kenapa-boxes {
    flex: 1 1 52%;
    max-width: 52%;
  }

  body.index-page .info-kenapa-boxes .box2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;                 /* ADJUST: gap between cards */
    width: 100%;
    padding: 0 !important;
    float: none !important;
    max-height: none;
  }

  body.index-page .info-kenapa-boxes .box_kecil {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px;         /* ADJUST: info card min-height */
    margin: 0 !important;
    padding: 24px 20px !important;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(13, 63, 113, 0.06);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  body.index-page .info-kenapa-boxes .box_kecil:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(13, 63, 113, 0.12);
  }

  body.index-page .info-kenapa-boxes .xbox_kecil {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }

  body.index-page .info-kenapa-boxes .xbox_kecil li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Defeat legacy `.xbox_kecil li { position: absolute; float: left }` */
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
  }

  body.index-page .info-kenapa-boxes .xbox_kecil img {
    width: 72px !important;    /* ADJUST: info card icon size */
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    min-width: 72px;
    min-height: 72px;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.index-page .info-kenapa-boxes .box_kecil p,
  body.index-page .info-kenapa-boxes .xbox_kecil p {
    font-size: 15px;           /* ADJUST: info card label size */
    line-height: 1.4;
    font-weight: 600;
    color: #1e333e;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
  }


  /* ── SECTION 4. CALL CENTER ──────────────────────────────────
     File: call_center.php  •  CSS hook: #call-to-action

     NOTE: This section has its own dedicated stylesheet at
     `assets/css/call-center.css` (537 lines) which handles the
     two-column layout + stepper. We only add small global-rhythm
     tweaks here so it lines up with the rest of the page.

     If you want to change the look of this section, edit
     call-center.css — knobs there are well-organized too.
     ─────────────────────────────────────────────────────────── */

  body.index-page #call-to-action {
    padding-top: 64px;         /* ADJUST: call-center section padding */
    padding-bottom: 64px;
  }

  /* Align inner container to the global 1200px max */
  body.index-page #call-to-action .container {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
  }


  /* ── SECTION 5. PRODUCT GRID ─────────────────────────────────
     File: product.php  •  CSS hook: #services.services

     Layout:
       ┌───────────────────────────────────────────────┐
       │              SECTION TITLE (h2)               │
       │       Grid of 4 cards (col-xl-3 col-md-6)     │
       │  ┌────┐  ┌────┐  ┌────┐  ┌────┐               │
       │  │card│  │card│  │card│  │card│               │
       │  └────┘  └────┘  └────┘  └────┘               │
       └───────────────────────────────────────────────┘

     Each .service-item card contains:
       - .image-container (with .gambar-awal + .gambar-hover swap)
       - h3 (product name)
       - p (truncated description)
       - .carousel-insurance-product-cta a (Lihat Detail link)

     Knobs:
       • Card padding        → "ADJUST: product card padding"
       • Card border-radius  → "ADJUST: product card radius"
       • Card image height   → "ADJUST: product image height"
       • H3 size             → "ADJUST: product h3 size"
       • Description size    → "ADJUST: product description size"
     ─────────────────────────────────────────────────────────── */

  body.index-page .services {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  body.index-page .services .container > .row {
    --bs-gutter-x: 24px;       /* ADJUST: gap between product cards */
    --bs-gutter-y: 24px;
  }

  /* Override the legacy .service-item (h4-targeted) to work with our h3 */
  body.index-page .services .service-item {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 18px rgba(13, 63, 113, 0.07);
    padding: 24px 24px 20px;   /* ADJUST: product card padding */
    border-radius: 18px;       /* ADJUST: product card radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  body.index-page .services .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(13, 63, 113, 0.14);
  }

  /* Image container: stretch to full card width, fixed height */
  body.index-page .services .service-item .image-container {
    position: relative;
    width: 100% !important;
    height: 140px !important;  /* ADJUST: product image height */
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.index-page .services .service-item .icon {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  body.index-page .services .service-item .icon img,
  body.index-page .services .service-item .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Product name (h3 in product.php) */
  body.index-page .services .service-item h3 {
    font-size: 18px;           /* ADJUST: product h3 size */
    font-weight: 700;
    line-height: 1.3;
    color: #1e333e;
    margin: 0 0 10px 0;
    padding: 0;
    min-height: 46px;          /* allow 2-line names to align cards */
  }

  body.index-page .services .service-item p {
    font-size: 14px;           /* ADJUST: product description size */
    line-height: 1.5;
    color: #4a5662;
    margin: 0 0 16px 0;
    flex: 1;
  }

  /* "Lihat Detail" CTA */
  body.index-page .services .service-item .carousel-insurance-product-cta {
    margin-top: auto;
  }

  body.index-page .services .service-item .carousel-insurance-product-cta .btn-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #35a1ec;
    text-decoration: none;
    padding: 0;
    transition: color 0.2s ease;
  }

  body.index-page .services .service-item .carousel-insurance-product-cta .btn-link:hover {
    color: #0d3f71;
  }


  /* ── SECTION 6. FAQ ──────────────────────────────────────────
     File: faq.php  •  CSS hook: #faq.faq

     Layout: centered column (col-lg-8) with stacked accordion items.
     Each item toggles via JS adding `.faq-active` class.

     Knobs:
       • Container width      → "ADJUST: faq container width"
       • Item padding         → "ADJUST: faq item padding"
       • Item border-radius   → "ADJUST: faq item radius"
       • H3 size              → "ADJUST: faq question size"
     ─────────────────────────────────────────────────────────── */

  body.index-page .faq {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Widen the centered column slightly for desktop comfort */
  body.index-page .faq .col-lg-8 {
    max-width: 820px;          /* ADJUST: faq container width */
    flex: 0 0 auto;
    margin: 0 auto;
  }

  body.index-page .faq .faq-container .faq-item {
    padding: 22px 28px 22px 60px;  /* ADJUST: faq item padding (extra left for icon) */
    margin-bottom: 14px;
    border-radius: 16px;       /* ADJUST: faq item radius */
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(13, 63, 113, 0.05);
    transition: box-shadow 0.25s ease;
  }

  body.index-page .faq .faq-container .faq-item:hover {
    box-shadow: 0 6px 18px rgba(13, 63, 113, 0.10);
  }

  body.index-page .faq .faq-container .faq-item h3 {
    font-size: 16px;           /* ADJUST: faq question size */
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    color: #1e333e;
  }

  body.index-page .faq .faq-container .faq-item .faq-icon {
    top: 24px;
    left: 22px;
    font-size: 22px;
  }

  body.index-page .faq .faq-container .faq-item .faq-toggle {
    top: 24px;
    right: 22px;
    font-size: 18px;
    color: #4a5662;
  }

  body.index-page .faq .faq-container .faq-active {
    background-color: #f5fafd;
    box-shadow: 0 8px 24px rgba(13, 63, 113, 0.10);
  }

  /* Fix: collapsed accordion still showed full answer height because the
     legacy `.faq-content { display: grid; grid-template-rows: 0fr }` pattern
     requires the direct child to be clipped with overflow + min-height: 0. */
  body.index-page .faq .faq-container .faq-item .faq-content {
    overflow: hidden;
  }

  body.index-page .faq .faq-container .faq-item .faq-content > * {
    min-height: 0;
    overflow: hidden;
  }


  /* ── SECTION 7. RATING / TESTIMONI ───────────────────────────
     File: rating.php  •  CSS hook: #rating.rating-page

     NOTE: rating.php has inline <style> in the PHP file itself
     (.rating-page-container, .rating-grid, .rating-card, ...).
     We add light overrides here for consistency with the global
     section rhythm + a touch of polish.

     If you want to change card colors / sizes deeply, edit the
     <style> block inside `rating.php` (lines ~43-144).

     Knobs (here):
       • Section padding    → "ADJUST: rating section padding"
       • Card min width     → "ADJUST: rating card min-width"
       • Card hover lift    → "ADJUST: rating card hover lift"
     ─────────────────────────────────────────────────────────── */

  body.index-page #rating {
    padding-top: 64px;         /* ADJUST: rating section padding */
    padding-bottom: 64px;
  }

  body.index-page #rating .rating-page-container {
    max-width: 900px;
    padding-left: 24px;
    padding-right: 24px;
  }

  body.index-page #rating .rating-page-title {
    font-size: 40px;
  }

  body.index-page #rating .rating-page-subtitle {
    font-size: 17px;
    margin-bottom: 40px;
  }

  /* Carousel track — layout handled inside rating.php inline style */
  body.index-page #rating .rating-card {
    padding: 28px;
  }

  body.index-page #rating .rating-card:hover {
    transform: translateY(-6px); /* ADJUST: rating card hover lift */
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }


  /* ── SECTION 8. FOOTER ───────────────────────────────────────
     File: footer.php  •  CSS hook: #footer.footer

     Layout: 4 columns
       col-lg-4  → logo + OJK badge + LAPS cert image
       col-lg-2  → "Layanan" link list
       col-lg-2  → second link list (no heading)
       col-lg-3  → "Kantor Intra Asia" contact + social links

     Knobs:
       • Top padding         → "ADJUST: footer top padding"
       • Heading size        → "ADJUST: footer heading size"
       • Link size           → "ADJUST: footer link size"
       • Social icon size    → "ADJUST: footer social icon size"
       • Copyright padding   → "ADJUST: footer copyright padding"
     ─────────────────────────────────────────────────────────── */

  body.index-page #footer.footer {
    margin-top: 0;
  }

  body.index-page #footer .footer-top {
    padding-top: 64px;         /* ADJUST: footer top padding */
    padding-bottom: 48px;
    background-color: #4d9cd3;
  }

  body.index-page #footer .container {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
  }

  body.index-page #footer .footer-top .row {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
  }

  body.index-page #footer h4 {
    font-size: 17px;           /* ADJUST: footer heading size */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 18px;
    padding-bottom: 12px;
    letter-spacing: 0.3px;
  }

  body.index-page #footer h4::after {
    width: 28px;
    height: 2px;
    background: #ffffff;
  }

  body.index-page #footer .footer-about img {
    max-height: 56px;
    margin-bottom: 14px;
  }

  body.index-page #footer .footer-about .sitename {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    display: block;
    margin-bottom: 16px;
  }

  body.index-page #footer .footer-links ul li {
    padding: 6px 0;
  }

  body.index-page #footer .footer-links ul a {
    font-size: 14px;           /* ADJUST: footer link size */
    color: #ffffff;
    opacity: 0.92;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  body.index-page #footer .footer-links ul a:hover {
    opacity: 1;
    color: #ffe9a3;
  }

  body.index-page #footer .footer-contact {
    font-size: 14px;
    line-height: 1.6;
  }

  body.index-page #footer .footer-contact p {
    margin-bottom: 8px;
  }

  body.index-page #footer .social-links {
    margin-top: 14px;
    display: flex;
    gap: 8px;
  }

  body.index-page #footer .social-links a {
    width: 38px;               /* ADJUST: footer social icon size */
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0d3f71;
    border-radius: 50%;
    font-size: 18px;
    margin: 0;
    transition: transform 0.2s ease, background 0.2s ease;
  }

  body.index-page #footer .social-links a:hover {
    transform: translateY(-3px);
    background: #ffe9a3;
  }

  body.index-page #footer .copyright {
    padding: 20px 0;           /* ADJUST: footer copyright padding */
    background-color: #3a82b5; /* slightly darker than .footer-top */
    color: #ffffff;
    font-size: 13px;
  }

  body.index-page #footer .copyright .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}