/* ============================================================
   Swahili Data Intelligence (SDI) — custom brand overrides
   Loaded on every page after the template stylesheets so the
   header (logo) and footer stay consistent site-wide.
   ============================================================ */

/* --- Header / logo ------------------------------------------------ */
.sdi-logo {
    max-height: 46px;
    width: auto;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
}

@media only screen and (max-width: 991px) {
    .sdi-logo {
        max-height: 38px;
        padding: 5px 10px;
    }
}

/* --- Services grid: equal-height cards ----------------------------- */
/* The template's h3 is absolutely positioned and boxes have no shared
   height, so cards with shorter copy (e.g. GIS) sit shorter/misaligned
   next to longer ones (e.g. Consulting). Force a flex layout so every
   card in a row matches height, and the title/paragraph/button flow
   normally with the "Enquire" link pinned to the bottom of each card.
   Scoped with :has() to rows/columns that actually wrap a
   .single-services-box card — NOT to layout-only rows (e.g. a single
   wide column holding a paragraph + a nested row + a button), which
   would otherwise get flattened into a horizontal flex row too. */
.services-section .row:has(> [class*="col-"] > .single-services-box) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.services-section .row > [class*="col-"]:has(> .single-services-box) {
    display: flex;
}

.services-section .single-services-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.services-section .single-services-box h3 {
    position: static;
    top: auto;
    left: auto;
    margin-top: 18px;
    margin-bottom: 0;
    min-height: 56px;
    display: flex;
    align-items: flex-start;
}

.services-section .single-services-box p {
    flex-grow: 1;
}

.services-section .single-services-box .services-btn {
    margin-top: 16px;
}

/* --- Packages grid: equal-height cards ----------------------------- */
.pricing-area .single-pricing-box .price.price-compact {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
}

.pricing-area .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.pricing-area .row > [class*="col-"] {
    display: flex;
}

.pricing-area .single-pricing-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.pricing-area .single-pricing-box .pricing-features {
    flex-grow: 1;
}

.pricing-area .single-pricing-box .price-btn {
    margin-top: auto;
}

/* --- "How It Works" numbered steps (Packages page) ------------------ */
.step-item {
    text-align: center;
    margin-bottom: 30px;
}

.step-number-circle {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background-color: #eeeefd;
    color: #00b0ee;
    font-size: 22px;
    font-weight: 700;
    margin: 0 auto 20px;
}

.step-item h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.step-item p {
    font-size: 14px;
    color: #737b9a;
    margin-bottom: 0;
}

/* --- Service detail panel (Services page, 6 core services) --------- */
.service-detail-panel {
    background-color: #eeeefd;
    border-radius: 12px;
    padding: 50px 30px;
    text-align: center;
}

.service-detail-panel .icon {
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 0 auto 20px;
    font-size: 40px;
    color: #00b0ee;
}

.service-detail-panel .service-number {
    font-size: 46px;
    font-weight: 700;
    color: #00b0ee;
    opacity: 0.35;
}

.service-tagline {
    display: block;
    color: #00b0ee;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
}

/* --- Generic light background for alternating sections ------------- */
.bg-color {
    background-color: #f7f8fc;
}

/* --- Package feature lists (Packages page detail sections) --------- */
.package-list {
    columns: 2;
    padding-left: 0;
    margin: 0;
    list-style-type: none;
}

.package-list li {
    font-size: 16px;
    font-weight: 600;
    color: #393953;
    padding-bottom: 15px;
    break-inside: avoid;
}

.package-list li i {
    color: #00b0ee;
    margin-right: 8px;
}

@media only screen and (max-width: 767px) {
    .package-list {
        columns: 1;
    }
}

/* --- Enriched page-title hero (used on Packages page) -------------- */
#packages-hero {
    height: auto;
    min-height: 500px;
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex;
    align-items: center;
}

.page-title-content .hero-subtext {
    color: #ffffff;
    opacity: 0.9;
    max-width: 700px;
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.8;
}

.page-title-content .hero-btn {
    margin-top: 25px;
}

/* --- Hero tagline (Home page) --------------------------------------- */
.hero-tagline {
    display: inline-block;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 18px;
}

/* --- "What We Do" arrow flow (Home page) ----------------------------- */
.flow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}

.flow-steps .flow-step {
    background-color: #eeeefd;
    color: #00b0ee;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 30px;
}

.flow-steps .flow-arrow {
    color: #737b9a;
    font-size: 18px;
}

/* --- Category tag chips (SDI Intelligence section) ------------------- */
.tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 25px;
}

.tag-chip-list .tag-chip {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.tag-chip-list.dark .tag-chip {
    background-color: #eeeefd;
    color: #00b0ee;
}

/* --- "Coming soon" badge (Latest Insights cards) --------------------- */
.coming-soon-badge {
    display: inline-block;
    background-color: #eeeefd;
    color: #00b0ee;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

/* --- Footer widget alignment -------------------------------------- */
/* Keep the three footer columns visually balanced at the same
   baseline regardless of paragraph/heading length. */
.footer-section .single-footer-widget {
    height: 100%;
}

.footer-section .footer-heading h3 {
    margin-bottom: 20px;
}

.footer-section .footer-info-contact {
    margin-bottom: 18px;
}

.footer-section .footer-info-contact:last-child {
    margin-bottom: 0;
}

/* Copyright bar: keep text vertically centred with the links list */
.copyright-area .row {
    row-gap: 10px;
}