/*
Theme Name: Bangalore Apostille Services
Theme URI: https://example.com/
Author: Custom Theme
Description: Bootstrap 5 landing-page theme for Bangalore Apostille Services.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bangalore-apostille
*/

:root {
      --ba-primary: #0b1f4a;
      --bas-navy: #0b1f4a;
      --bas-orange: #ee7a3c;
      --bas-light: #f8fafc;
      --bas-text: #334155;
      --bas-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --bas-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
      --bas-header-height: 68px;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--bas-font-sans);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.65;
      color: var(--bas-text);
      padding-top: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    button, input, select, textarea, .btn, .navbar, .accordion-button {
      font-family: var(--bas-font-sans);
    }
    section[id] { scroll-margin-top: calc(var(--bas-header-height) + 18px); }

    h1, h2, .section-title {
      font-family: var(--bas-font-display);
      font-weight: 700;
      letter-spacing: -.02em;
    }
    h3, h4, h5, h6 {
      font-family: var(--bas-font-sans);
      font-weight: 700;
      letter-spacing: -.01em;
    }
    p, li, .form-control, .form-select {
      font-family: var(--bas-font-sans);
    }

    .text-navy { color: var(--bas-navy) !important; }
    .text-orange { color: var(--bas-orange) !important; }
    .bg-navy { background-color: var(--bas-navy) !important; }
    .bg-soft { background-color: var(--bas-light) !important; }
    .border-orange { border-color: var(--bas-orange) !important; }

    .section-padding { padding: 5rem 0; }
    .eyebrow {
      color: var(--bas-orange);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .underline-accent::after {
      content: "";
      display: block;
      width: 62px;
      height: 4px;
      margin: 1rem auto 0;
      border-radius: 999px;
      background: var(--bas-orange);
    }

    .navbar-brand-mark {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .65rem;
      background: var(--bas-navy);
      color: var(--bas-orange);
    }
    .site-header {
      background: rgba(255,255,255,.96);
      box-shadow: none;
      transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
    }
    .site-header .nav-link,
    .site-header .nav-phone,
    .site-header .brand-title {
      /*color: rgba(255,255,255,.96);*/
      transition: color .3s ease;
    }
    .site-header .brand-title {
      font-family: var(--bas-font-sans);
      font-weight: 700 !important;
      letter-spacing: -.01em;
    }
    .site-header .brand-subtitle {
      color: #ffb98a;
      font-family: var(--bas-font-sans);
      font-weight: 700 !important;
    }
    .site-header .nav-link {
      font-family: var(--bas-font-sans);
      font-size: .9rem;
      font-weight: 600;
    }
    .site-header .nav-link:hover,
    .site-header .nav-link:focus,
    .site-header .nav-link.active { color:  var(--bas-orange); }
    .site-header .nav-link.active::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      margin-top: 3px;
      background: var(--bas-orange);
      border-radius: 99px;
    }
    .site-header .navbar-toggler { color: #fff; font-size: 1.75rem; line-height: 1; }

    .site-header.scrolled {
      background: rgba(255,255,255,.96);
      box-shadow: 0 4px 18px rgba(15,23,42,.10);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .site-header.scrolled .nav-link,
    .site-header.scrolled .nav-phone,
    .site-header.scrolled .brand-title { color: var(--bas-navy); }
    .site-header.scrolled .brand-subtitle { color: var(--bas-orange); }
    .site-header.scrolled .nav-link:hover,
    .site-header.scrolled .nav-link:focus,
    .site-header.scrolled .nav-link.active { color: var(--bas-orange); }
    .site-header.scrolled .navbar-toggler { color: var(--bas-navy); }

    .btn-brand {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--bas-orange);
      --bs-btn-border-color: var(--bas-orange);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #d9682f;
      --bs-btn-hover-border-color: #d9682f;
      --bs-btn-active-bg: #c85d28;
      --bs-btn-active-border-color: #c85d28;
      border-radius: 999px;
      font-weight: 700;
    }
    .btn-navy {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--bas-navy);
      --bs-btn-border-color: var(--bas-navy);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #132d65;
      --bs-btn-hover-border-color: #132d65;
      border-radius: 999px;
      font-weight: 700;
    }

    .hero {
      min-height: 760px;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: #fff;
      padding: calc(var(--bas-header-height) + 54px) 0 5rem;
      background:
        linear-gradient(135deg, rgba(8,18,52,.93), rgba(11,31,74,.86)),
        url("images/hero-bg.jpg") center/cover no-repeat;
    }
    .hero h1 {
      max-width: 760px;
      margin-top: 0;
      font-size: clamp(2.65rem, 5vw, 4.15rem);
      line-height: 1.08;
      font-weight: 700;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      max-width: 100%;
      padding: .48rem .85rem;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      font-family: var(--bas-font-sans);
      font-size: .74rem;
      font-weight: 600;
      line-height: 1.35;
      text-transform: uppercase;
      letter-spacing: .075em;
      white-space: normal;
    }
    .hero-copy { position: relative; z-index: 2; }
    .hero-image-wrap { position: relative; }
    .hero-image {
      width: 100%;
      height: 520px;
      object-fit: cover;
      border-radius: 1rem;
      box-shadow: 0 1.5rem 3rem rgba(0,0,0,.35);
    }
    .floating-card {
      position: absolute;
      display: flex;
      align-items: center;
      gap: .85rem;
      max-width: 265px;
      padding: 1rem;
      border-radius: .85rem;
      background: #fff;
      color: var(--bas-navy);
      box-shadow: 0 1rem 2.5rem rgba(0,0,0,.22);
    }
    .floating-card.bottom { left: -1rem; bottom: -1.5rem; }
    .floating-card.top { right: -1rem; top: -1.5rem; }
    .floating-icon {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 48px;
      border-radius: .75rem;
      background: var(--bas-navy);
      color: var(--bas-orange);
      font-size: 1.35rem;
    }
    .floating-card.top .floating-icon { background: var(--bas-orange); color: #fff; }

    .metric-number {
      color: var(--bas-orange);
      font-family: var(--bas-font-sans);
      font-size: 1.7rem;
      font-weight: 800;
      line-height: 1.15;
    }
    .metric-label {
      color: #cbd5e1;
      font-family: var(--bas-font-sans);
      font-size: .68rem;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: .075em;
      text-transform: uppercase;
    }

    .content-image {
      width: 100%;
      height: 460px;
      object-fit: cover;
      border-radius: 1rem;
      box-shadow: 0 .75rem 2rem rgba(15,23,42,.15);
    }
    .trust-image { height: 560px; }

    .icon-circle,
    .icon-square {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .icon-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(11,31,74,.06);
      color: var(--bas-orange);
    }
    .icon-square {
      width: 50px;
      height: 50px;
      border-radius: .75rem;
      background: var(--bas-navy);
      color: var(--bas-orange);
      font-size: 1.3rem;
    }

    .service-card,
    .feature-card,
    .step-card,
    .testimonial-card,
    .floating-card,
    .faq-item,
    .quote-card {
      border-radius: 1rem;
      transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .service-card,
    .feature-card,
    .step-card,
    .testimonial-card { height: 100%; }
    .floating-card { border: 1px solid transparent; }

    .service-card:hover,
    .feature-card:hover,
    .step-card:hover,
    .testimonial-card:hover,
    .floating-card:hover,
    .faq-item:hover,
    .quote-card:hover {
      border-color: #ee7a3c !important;
      box-shadow: 0 16px 30px #0b1f4a14 !important;
      transform: translateY(-4px);
    }

    .service-card {
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      color: #fff;
    }
    .service-card .icon-square {
      background: rgba(238,122,60,.15);
      color: var(--bas-orange);
    }
    .service-card li { color: #cbd5e1; }

    .step-image { width: 100%; height: 210px; object-fit: cover; }
    .step-number { color: var(--bas-orange); font-size: 2.6rem; font-weight: 800; line-height: 1; }

    .risk-gallery img {
      width: 100%;
      height: 285px;
      object-fit: cover;
      border-radius: 1rem;
      box-shadow: 0 .65rem 1.5rem rgba(15,23,42,.14);
    }
    .risk-gallery .offset-img { margin-top: 2rem; }

    .faq-item {
      overflow: hidden;
      border: 1px solid #e2e8f0 !important;
      background: #fff;
    }
    .faq-item .accordion-button {
      color: var(--bas-navy);
      background: #fff;
      font-weight: 700;
      box-shadow: none;
      padding: 1.1rem 1.25rem;
    }
    .faq-item .accordion-button:not(.collapsed) {
      color: var(--bas-orange);
      background: #fff7f2;
    }
    .faq-item .accordion-button:focus {
      box-shadow: 0 0 0 .2rem rgba(238,122,60,.14);
    }
    .faq-item .accordion-button::after { filter: none; }
    .faq-item .accordion-body { color: #64748b; line-height: 1.75; }

    .back-to-top {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 1040;
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 50%;
      background: var(--bas-orange);
      color: #fff;
      box-shadow: 0 10px 24px rgba(11,31,74,.22);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
    }
    .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .back-to-top:hover { background: #d9682f; }

    .contact-icon {
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .75rem;
      color: var(--bas-orange);
      background: var(--bas-navy);
      font-size: 1.15rem;
    }

    .form-control,
    .form-select { min-height: 48px; border-color: #dbe3ec; }
    textarea.form-control { min-height: 130px; }
    .form-control:focus,
    .form-select:focus {
      border-color: rgba(238,122,60,.75);
      box-shadow: 0 0 0 .25rem rgba(238,122,60,.14);
    }

    footer a { color: #cbd5e1; text-decoration: none; }
    footer a:hover { color: var(--bas-orange); }

    @media (max-width: 991.98px) {
      :root { --bas-header-height: 64px; }
      .hero {
        min-height: auto;
        align-items: flex-start;
        padding: calc(var(--bas-header-height) + 3rem) 0 5rem;
      }
      .site-header .navbar-collapse {
        margin-top: .65rem;
        padding: .9rem 1rem 1.1rem;
        border-radius: 1rem;
        background: rgba(11,31,74,.97);
        box-shadow: 0 12px 26px rgba(0,0,0,.16);
      }
      .site-header.scrolled .navbar-collapse { background: #fff; }
      .site-header .nav-link.active::after { width: 36px; }
      .section-padding { padding: 4rem 0; }
      .trust-image, .content-image { height: 400px; }
    }
    @media (max-width: 575.98px) {
      .hero { padding-top: calc(var(--bas-header-height) + 2.5rem); }
      .hero h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
      .hero-badge {
        font-size: .68rem;
        letter-spacing: .055em;
        border-radius: .8rem;
      }
      .risk-gallery img { height: 220px; }
      .risk-gallery .offset-img { margin-top: 0; }
    }
 /* ============================== SINGLE STATUS APOSTILLE PAGE ============================== */ 
 .ba-single-status { --ba-primary: #0b3d5c; --ba-secondary: #e6a329; --ba-light: #f5f8fa; --ba-dark: #1f2933; --ba-border: #e1e7eb; --ba-white: #ffffff; --ba-shadow: 0 8px 30px rgba(0,0,0,.08); font-family: Arial, Helvetica, sans-serif; color: var(--ba-dark); line-height: 1.75; font-size: 16px; max-width: 1200px; margin: 0 auto; } .ba-single-status * { box-sizing: border-box; } .ba-single-status h1, .ba-single-status h2, .ba-single-status h3 { line-height: 1.3; color: var(--ba-primary); } .ba-single-status h1 { font-size: 42px; margin: 0 0 20px; } .ba-single-status h2 { font-size: 32px; margin: 0 0 20px; } .ba-single-status h3 { font-size: 22px; margin: 0 0 12px; } .ba-single-status p { margin: 0 0 18px; } .ba-single-status img { max-width: 100%; width: 100%; height: auto; display: block; border-radius: 8px; } /* HERO */ .ba-hero { background: linear-gradient(135deg, #f5f9fb, #ffffff); padding: 65px 35px; border-radius: 12px; margin-bottom: 35px; border: 1px solid var(--ba-border); }  .ba-badge { display: inline-block; background: var(--ba-secondary); color: #fff; padding: 7px 16px; border-radius: 30px; font-size: 14px; font-weight: 700; margin-bottom: 18px; } .ba-hero h1 { font-size: 44px; } .ba-hero p { font-size: 18px; } /* CONTACT BOX */ .ba-contact-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; background: var(--ba-primary); color: #fff; padding: 25px; border-radius: 10px; margin: 30px 0 45px; } .ba-contact-item { text-align: center; padding: 12px; } .ba-contact-item strong { display: block; font-size: 18px; margin-bottom: 5px; } .ba-contact-item a { color: #fff; text-decoration: none; } /* SECTION */ .ba-section { padding: 45px 0; border-bottom: 1px solid var(--ba-border); } .ba-section:last-child { border-bottom: 0; } /* TWO COLUMN */ .ba-two-column { display: grid; grid-template-columns: 1.2fr .8fr; gap: 35px; align-items: center; } .ba-image-box img { width: 100%; box-shadow: var(--ba-shadow); } /* INFO CARD */ .ba-info-card { background: var(--ba-light); border-left: 5px solid var(--ba-secondary); padding: 25px; border-radius: 6px; margin: 25px 0; } /* PROCESS */ .ba-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; } .ba-step { position: relative; background: #fff; border: 1px solid var(--ba-border); padding: 28px 22px; border-radius: 10px; box-shadow: var(--ba-shadow); } .ba-step-number { width: 48px; height: 48px; background: var(--ba-secondary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin-bottom: 18px; } /* CHECKLIST */ .ba-checklist { list-style: none; padding: 0; margin: 25px 0; } .ba-checklist li { position: relative; padding: 10px 10px 10px 32px; border-bottom: 1px solid var(--ba-border); } .ba-checklist li:before { content: "✓"; position: absolute; left: 5px; top: 9px; color: var(--ba-secondary); font-weight: bold; font-size: 18px; } /* FEE CARDS */ .ba-fee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 25px; } .ba-fee-card { text-align: center; background: var(--ba-light); padding: 25px 15px; border-radius: 8px; border: 1px solid var(--ba-border); } .ba-fee-card strong { display: block; font-size: 24px; color: var(--ba-primary); margin-bottom: 7px; } /* BENEFITS */ .ba-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ba-benefit { text-align: center; padding: 25px 18px; border: 1px solid var(--ba-border); border-radius: 10px; background: #fff; box-shadow: var(--ba-shadow); } .ba-benefit-icon { font-size: 34px; margin-bottom: 12px; } /* COUNTRIES */ .ba-country-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .ba-country-list span { background: var(--ba-light); border: 1px solid var(--ba-border); padding: 8px 14px; border-radius: 25px; font-size: 14px; } /* CTA */ .ba-cta { background: var(--ba-primary); color: #fff; padding: 50px 30px; text-align: center; border-radius: 12px; margin: 45px 0; } .ba-cta h2 { color: #fff; } .ba-cta p { max-width: 750px; margin: 0 auto 25px; } .ba-button { display: inline-block; background: var(--ba-secondary); color: #fff !important; padding: 13px 28px; border-radius: 5px; text-decoration: none !important; font-weight: 700; margin: 5px; } /* FAQ */ .ba-faq { border: 1px solid var(--ba-border); border-radius: 8px; overflow: hidden; } .ba-faq details { border-bottom: 1px solid var(--ba-border); padding: 18px 22px; background: #fff; } .ba-faq details:last-child { border-bottom: 0; } .ba-faq summary { cursor: pointer; font-weight: 700; color: var(--ba-primary); font-size: 17px; } /* RESPONSIVE */ @media (max-width: 900px) { .ba-two-column { grid-template-columns: 1fr; } .ba-process { grid-template-columns: 1fr; } .ba-fee-grid { grid-template-columns: repeat(2, 1fr); } .ba-benefits { grid-template-columns: repeat(2, 1fr); } .ba-contact-box { grid-template-columns: 1fr; } .ba-hero h1 { font-size: 36px; } } @media (max-width: 600px) { .ba-single-status { font-size: 15px; } .ba-hero { padding: 40px 20px; } .ba-hero h1 { font-size: 30px; } .ba-single-status h2 { font-size: 27px; } .ba-fee-grid, .ba-benefits { grid-template-columns: 1fr; } .ba-section { padding: 32px 0; } } 
 ```css
/* =========================================
   Apostille Country List
   ========================================= */

.ba-country-list {
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 30px 35px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.ba-country-list ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 35px;
    row-gap: 0;
}

.ba-country-list li {
    position: relative;
    padding: 10px 10px 10px 25px;
    border-bottom: 1px solid #eeeeee;

    color: #24364b;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

.ba-country-list li::before {
    content: "\f26a";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 11px;

    color: #f58220;
    font-size: 14px;
    font-weight: bold;
}

.ba-country-list li span {
    display: block;
    color: #6c757d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 2px;
}

/* Tablet */
@media (max-width: 991px) {
    .ba-country-list ul {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 25px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ba-country-list {
        padding: 20px;
        border-radius: 12px;
    }

    .ba-country-list ul {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
    }

    .ba-country-list li {
        font-size: 14px;
        padding: 9px 5px 9px 23px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .ba-country-list ul {
        grid-template-columns: 1fr;
    }
}
 .site-main{ margin-top: 80px !important;}
 .ba-view-more {
    padding: 10px 28px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ba-view-more:hover {
    transform: translateY(-2px);
}
/* ADDITIONAL CSS Add this to your existing stylesheet*/
.ba-info-card, .ba-service-card, .ba-feature-card, .ba-process-card, .ba-content-card { background: var(--ba-primary); color:#fff; border-radius: 12px; padding: 30px; height: 100%; box-shadow: 0 8px 30px rgba(0,0,0,0.06); } .ba-info-icon, .ba-feature-icon { width: 55px; height: 55px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; font-weight: 700; background: var(--bas-orange); } .ba-highlight-box { padding: 22px; border-left: 4px solid #0d6efd; background: #f8fafc; border-radius: 8px; } .ba-document-list ul, .ba-check-list { margin: 0; padding: 0; list-style: none; } .ba-document-list li, .ba-check-list li { position: relative; padding: 12px 15px 12px 35px; margin-bottom: 8px; background: #f8fafc; border-radius: 6px; } .ba-document-list li:before, .ba-check-list li:before { content: "✓"; position: absolute; left: 12px; font-weight: 700; } .ba-process-card { position: relative; text-align: center; } .ba-process-number, .ba-step-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 18px; font-weight: 700; background: var(--bas-orange); } .ba-step-list { max-width: 900px; margin: 0 auto; } .ba-step-item { display: flex; gap: 25px; padding: 25px; margin-bottom: 20px; border-radius: 10px; background: #fff; box-shadow: 0 5px 25px rgba(0,0,0,0.05); } .ba-step-item .ba-step-number { flex: 0 0 48px; margin-bottom: 0; } .ba-faq { max-width: 950px; margin: auto; } .ba-faq-item { padding: 25px 0; border-bottom: 1px solid #e5e7eb; } .ba-faq-item h3 { font-size: 20px; margin-bottom: 10px; } .ba-faq-item p { margin-bottom: 0; color: #64748b; } .ba-cta { max-width: 850px; margin: auto; } @media (max-width: 767px) { .ba-step-item { gap: 15px; padding: 20px; } .ba-info-card, .ba-service-card, .ba-feature-card, .ba-process-card, .ba-content-card { padding: 22px; } }
.ba-service-card h3{ color: var(--bas-orange) !important; } 
.ba-content-card h2{ color: var(--bas-orange)!important;  }