/*
Theme Name: Curantis (Child Theme)
Theme URI: http://w4.themedemo.co/curantis/
Author: FoxThemes
Author URI: https://themeforest.net/user/foxthemes
Description: A stunning visual experience for minimal loving creative. This template is a responsive and retina-ready WordPress theme with grid system layout. It is optimized for mobile touch and swipe.
Version: 1.0.0
Tags: one-column, two-columns, right-sidebar, left-sidebar, custom-menu, post-formats, sticky-post
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: curantis-child
Template: curantis
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800;0,900;1,800;1,900&display=swap');

/* Site-wide DaS brand accent override.
   DaS brand accent is ORANGE #f7941d (was green #43bc95 prior to 2026-05-03 rebrand).
   Variable name kept as --green-color so all theme references continue to resolve;
   only the value is changed. Default DaS blue is #0f3454. */
:root {
    --green-color: #f7941d;
}

/* Centered intro paragraph under the hero banner (donate page, reusable on any page) */
.das-page-intro {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: #555555;
    margin: 0;
}

/* Custom styles migrated from Customizer > Additional CSS on 2026-04-22 */

/* Consistent slider height */
.banner-slider-wrap .swiper-container.full-height-window-hard {
    height: 85vh !important;
    min-height: 550px;
    max-height: 750px;
}
/* Impact stats spacing + equal width cards */
.skill-wrapper.circle .skills {
    margin-left: -30px !important;
    margin-right: -30px !important;
}
.skill-wrapper.circle .skill {
    padding-left: 30px !important;
    padding-right: 30px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.skill-wrapper.circle .skill .cont {
    min-width: 160px;
}
/* Download Annual Report button — white bg on dark blue Impact section.
   Selector specificity bumped (.cs-btn-wrap added) so it beats the general
   in-content button rule below (which would otherwise turn it blue and make it
   invisible on the dark background). */
.vc_custom_9001 .cs-btn-wrap a.a-btn-7 {
    background-color: #ffffff !important;
    color: #222222 !important;
    border-color: #ffffff !important;
}
.vc_custom_9001 .cs-btn-wrap a.a-btn-7:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
/* Contact line icon sizing */
.contact-section .content .icon-imeg img {
    max-width: 40px;
    height: auto;
}

/* ─── FOOTER STYLING ─── */
/* Logo: white filter + larger */
.das-footer-logo {
    max-width: 220px !important;
    display: block !important;
    margin-bottom: 14px !important;
    filter: brightness(0) invert(1);
}
/* Tagline: not bold */
.das-footer-tagline {
    font-size: 14px;
    opacity: 0.7;
    font-weight: 400 !important;
    display: block;
}
/* Footer text container */
.information .left-content-footer .footer-text {
    font-weight: 400;
}
.information .left-content-footer .footer-text img {
    filter: brightness(0) invert(1);
}

/* Donate CTA in footer */
.footer-menu .das-footer-donate-cta > a {
    font-weight: 700;
    font-size: 16px;
}
#footer.information .das-donate-btn > a {
    display: inline-block;
    padding: 8px 24px;
    background-color: #f7941d !important;
    color: #ffffff !important;
    opacity: 1 !important;
    border: 1px solid transparent;
    border-radius: 3px;
    margin-top: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 14px;
    text-decoration: none !important;
}
#footer.information .das-donate-btn > a:hover {
    background-color: #ffffff !important;
    color: #f7941d !important;
    border-color: transparent !important;
}

/* Footer menu links: green on hover (exclude donate button which has its own hover) */
#footer.information .footer-menu #menu-footer-menu a:hover {
    color: #f7941d !important;
    opacity: 1 !important;
}
#footer.information .footer-menu #menu-footer-menu .das-donate-btn > a:hover {
    color: #f7941d !important;
}




/* Contact bar icon sizing */
.contacts-info-wrap.contact_line .icon-imeg img {
    max-height: 64px !important;
    height: 64px !important;
    width: auto !important;
    margin-top: -12px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* First contact item (Drive A Senior brand icon) renders larger than the call/visit icons */
.contacts-info-wrap.contact_line .content:first-child .icon-imeg img {
    max-height: 128px !important;
    height: 128px !important;
    margin-top: -28px;
}

/* === ED Letter — envelope/letter reveal (About page) ===
   COMPLETE REWRITE: NO sticky, NO pin. Section sits in normal flow with fixed
   aspect ratio. Envelope graphics frame a clipped window; letter content slides
   smoothly UP through the window as user scrolls past the section. Animation is
   driven by section's position relative to viewport center — feels like a smooth
   parallax. No jumping, no disappearing, no gap after. */
/* ONE envelope. Back + front overlay each other (same position). Paper sits BETWEEN
   them (back z:1 → paper z:2 → front z:3) and TRANSLATES UP smoothly as user scrolls.
   Initial: paper top peeks ~50px above envelope opening, "Welcome…" visible.
   Final: paper risen ~560px, signature visible just above envelope opening.
   Paper bottom always extends below envelope front (clipped) — paper never fully exits. */
.das-envelope-stage {
    position: relative;
    width: 95%;
    max-width: 1100px;
    margin: 60px auto;
    height: 990px;               /* fits the full envelope: chevron bottom at svg y=1071/1200 * 1100 ≈ 982 */
    overflow: hidden;
}
.das-envelope-back,
.das-envelope-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;                 /* both at same width = same envelope */
    height: auto;
    pointer-events: none;
    user-select: none;
}
.das-envelope-back  { z-index: 1; }
.das-envelope-front { z-index: 3; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.10)); }
/* No body div — let the front svg's chevron bottom be the natural envelope edge. */
.das-envelope-body { display: none; }
/* Paper anchored at envelope opening level. Translates UP based on scroll. */
.das-envelope-paper {
    position: absolute;
    top: 470px;                  /* envelope opening: svg y=512/1200 * 1100 width ≈ 469 */
    left: 6%;
    right: 6%;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    z-index: 2;
    transform: translateY(-50px);   /* INITIAL — 50px peek above envelope opening */
    will-change: transform;
}
.das-envelope-content {
    padding: 40px 60px 50px;
}

/* Paper typography — clean white look (overrides .das-letter parchment styling when nested here) */
.das-envelope-paper .wpb_text_column {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}
.das-envelope-paper .wpb_text_column::before,
.das-envelope-paper .wpb_text_column::after { display: none; }
.das-envelope-paper .wpb_wrapper > p,
.das-envelope-paper .wpb_wrapper > ul li {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.75;
    color: #3a3a3a;
}
.das-envelope-paper .wpb_wrapper > p:first-of-type strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #0f3454;
    margin-bottom: 16px;
}
.das-envelope-paper .wpb_wrapper h4 {
    font-family: Georgia, serif;
    font-size: 18px;
    color: #0f3454;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 10px;
    font-style: italic;
}
.das-envelope-paper .wpb_wrapper > p:nth-last-of-type(2) em {
    display: block;
    font-size: 17px;
    color: #0f3454;
    margin: 26px 0 24px;
    text-align: center;
    font-style: italic;
}
.das-envelope-paper .wpb_wrapper > p:last-of-type {
    text-align: center;
    margin-top: 28px;
    border-top: 1px solid #e5e5e5;
    padding-top: 18px;
    color: #555;
}
.das-envelope-paper .wpb_wrapper > p:last-of-type strong {
    display: block;
    font-family: "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: 30px;
    font-weight: 400;
    color: #0f3454;
    margin-bottom: 4px;
}

/* === ED Letter v2 — second envelope (new SVGs, same width/height as v1) ===
   Uses ONLY the new front SVG (the v2 back's gray gradient was dominating the view).
   Front svg's V notch is transparent — paper sits behind it (z:2 < z:3) so the letter
   shows through the opening. Same width and height as v1 for visual parity. */
.das-envelope-stage-v2 {
    position: relative;
    width: 95%;
    max-width: 1100px;
    margin: 60px auto;
    height: 990px;               /* MATCHES v1 height */
    overflow: hidden;
}
.das-envelope-stage-v2 .das-envelope-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
.das-envelope-stage-v2 .das-envelope-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 3;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.10));
}
.das-envelope-stage-v2 .das-envelope-paper {
    position: absolute;
    top: 430px;                  /* envelope opening line in new svg: y=304.87/840 * 1184 ≈ 430 */
    left: 6%;
    right: 6%;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    z-index: 2;
    transform: translateY(-50px);
    will-change: transform;
}

/* Mobile: JS skips the envelope wrap entirely — .das-letter renders in its parchment form */

/* === ED Letter — paper background with italic handwritten feel === */
/* Paper-curl effect (CSS3 lifted-corners by Nicolas Gallagher).
   Two pseudo-elements sit BEHIND the paper (z-index:-1) at the bottom corners,
   each rotated slightly with a heavy drop-shadow that escapes from underneath
   the paper's edge — creating the illusion of curled corners. */
.das-letter > .vc_column-inner {
    position: relative;
    z-index: 0;                     /* establish a stacking context for the curls */
}
.das-letter > .vc_column-inner > .wpb_text_column,
.das-letter > .wpb_text_column {
    background: #ffffff !important;
    background-image: none !important;
    border: 0;
    border-radius: 0 !important;    /* sharp corners read as paper */
    padding: 84px 96px !important;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset !important;
}
.das-letter > .vc_column-inner > .wpb_text_column::before,
.das-letter > .vc_column-inner > .wpb_text_column::after,
.das-letter > .wpb_text_column::before,
.das-letter > .wpb_text_column::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    background: rgba(0,0,0,0.7);
    box-shadow: 0 15px 10px rgba(0,0,0,0.7);
    transform: rotate(-3deg);
}
.das-letter > .vc_column-inner > .wpb_text_column::after,
.das-letter > .wpb_text_column::after {
    right: 10px;
    left: auto;
    transform: rotate(3deg);
}
.das-letter .wpb_wrapper > p,
.das-letter .wpb_wrapper > ul li {
    font-family: "Georgia", "Times New Roman", serif !important;
    font-style: italic !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #2d2d2d !important;
}
/* Bullet list — bullet markers align with the left edge of paragraph text */
.das-letter .wpb_wrapper ul {
    list-style-position: outside !important;
    padding-left: 1.2em !important;
    margin-left: 0 !important;
}
.das-letter .wpb_wrapper ul li {
    padding-left: 0.3em !important;
    margin-bottom: 6px !important;
}
.das-letter .wpb_wrapper > p:first-of-type strong {
    display: block;
    font-style: normal;
    font-family: "Georgia", serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #0f3454 !important;
    margin-bottom: 18px !important;
}
.das-letter .wpb_wrapper h4 {
    font-family: "Georgia", serif !important;
    font-style: italic !important;
    font-size: 18px !important;
    color: #0f3454 !important;
    font-weight: 700 !important;
    margin-top: 28px !important;
    margin-bottom: 10px !important;
}
/* Closing italic line — left-aligned (was inherited center) */
.das-letter .wpb_wrapper > p:nth-last-of-type(2) {
    text-align: left !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}
/* Signature block — left-aligned, no horizontal divider above */
.das-letter .wpb_wrapper > p:last-of-type {
    text-align: left !important;
    margin-top: 8px !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    font-style: normal !important;
    color: #555 !important;
}
.das-letter .wpb_wrapper > p:last-of-type strong {
    display: block;
    font-family: "Brush Script MT", "Lucida Handwriting", "Segoe Script", cursive !important;
    font-style: normal !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    color: #0f3454 !important;
    margin-bottom: 4px !important;
}
@media (max-width: 768px) {
    .das-letter > .vc_column-inner > .wpb_text_column,
    .das-letter > .wpb_text_column {
        padding: 48px 32px !important;
    }
    .das-letter .wpb_wrapper > p,
    .das-letter .wpb_wrapper > ul li { font-size: 15px !important; }
}

/* === ED Letter (legacy parchment block — kept for reference) ===
   Wraps the executive director's message in a soft cream card with serif body,
   drop cap, decorative top/bottom rules, and a right-aligned signature line. */
.das-letter > .wpb_text_column {
    background: #faf6ee;
    border: 1px solid #e9dfc5;
    border-radius: 6px;
    padding: 80px 96px;
    box-shadow: 0 12px 36px rgba(15, 52, 84, 0.08), 0 2px 6px rgba(0,0,0,0.04);
    position: relative;
}
.das-letter > .wpb_text_column::before,
.das-letter > .wpb_text_column::after {
    content: "";
    position: absolute;
    left: 96px;
    right: 96px;
    height: 1px;
    background: linear-gradient(to right, transparent, #c4a878, transparent);
}
.das-letter > .wpb_text_column::before { top: 36px; }
.das-letter > .wpb_text_column::after  { bottom: 36px; }
.das-letter .wpb_wrapper > p,
.das-letter .wpb_wrapper > ul li {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.85;
    color: #3a3a3a;
}
/* Bullet list — align bullet markers with the left edge of the paragraph text */
.das-letter .wpb_wrapper ul {
    list-style-position: outside;
    padding-left: 1.2em;
    margin-left: 0;
}
.das-letter .wpb_wrapper ul li {
    padding-left: 0.3em;
    margin-bottom: 6px;
}
.das-letter .wpb_wrapper > p:first-of-type {
    font-size: 17px;
    color: #0f3454;
}
.das-letter .wpb_wrapper > p:first-of-type strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #0f3454;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}
.das-letter .wpb_wrapper h4 {
    font-family: Georgia, serif;
    font-size: 17px;
    color: #0f3454;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 10px;
    font-style: italic;
}
.das-letter .wpb_wrapper > p:nth-last-of-type(2) em {
    display: block;
    font-size: 17px;
    color: #0f3454;
    margin: 28px 0 24px;
    text-align: left;
    font-style: italic;
}
.das-letter .wpb_wrapper > p:last-of-type {
    text-align: left;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    font-style: normal;
    color: #555;
}
.das-letter .wpb_wrapper > p:last-of-type strong {
    display: block;
    font-family: "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: 32px;
    font-weight: 400;
    color: #0f3454;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .das-letter > .wpb_text_column { padding: 48px 32px; }
    .das-letter > .wpb_text_column::before,
    .das-letter > .wpb_text_column::after { left: 32px; right: 32px; }
    .das-letter .wpb_wrapper > p:first-of-type strong { font-size: 22px; }
    .das-letter .wpb_wrapper > p:last-of-type strong { font-size: 28px; }
}

/* === Our History page === */
/* History timeline items — new SVG indicator + size/position overrides */
.about-section-classic-history .content .text p::before {
    background-image: url("/wp-content/uploads/2026/05/double-tick-i1.svg") !important;
    top: 24px !important;
    left: -16px !important;
    width: 36px !important;
    height: 24px !important;
}
/* Vertical timeline line color — orange to match the new accent */
.about-section-classic-history .content .text p:after {
    background: #f89633 !important;
}
/* Mother Teresa quote (.das-quote block on the History page) — 40px extra space above */
.das-quote {
    margin-top: 40px !important;
}

/* === Footer background — radial gradient in default blue (was dark gray) ===
   Kept the gradient — center is a lifted blue, edges fall to default blue. */
#footer.information {
    background-image: radial-gradient(circle at 49% 42%, #1d4870, #0f3454) !important;
    background-color: #0f3454 !important;
}

/* === Hero banner social icons ===
   Match the footer-bottom-right social style: white filled circle, dark icon,
   orange on hover, with a faint halo ring. Hero markup uses a child <i> element
   (Font Awesome) inside the anchor, not the anchor's ::before pseudo. */
.banner-slider-wrap .icons-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}
.banner-slider-wrap .icons-wrap a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 0 !important; /* override plugin's 19px which doubled with our flex gap */
    background-color: #ffffff !important;
    color: #222222 !important;
    border-radius: 50%;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.banner-slider-wrap .icons-wrap a::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.35;
    z-index: 0;
}
.banner-slider-wrap .icons-wrap a > i {
    position: relative;
    z-index: 2;
    color: inherit !important;
    font-size: 14px;
    line-height: 1;
}
.banner-slider-wrap .icons-wrap a:hover {
    background-color: #f7941d !important;
    color: #ffffff !important;
}
.banner-slider-wrap .icons-wrap a:hover > i {
    color: #ffffff !important;
}

/* === cs_services listing3 — center & 3-up when fewer than 4 cards ===
   The plugin always renders col-lg-3 (25% / 4-up grid). When the row has fewer
   than 4 cards, switch to col-lg-4 (33% / 3-up) and center-align so the 3 cards
   sit centered at desktop widths. md/sm responsive (col-md-6/sm-6) is preserved. */
.services.listing3 .row:not(:has(> :nth-child(4))) {
    justify-content: center;
}
@media (min-width: 992px) {
    .services.listing3 .row:not(:has(> :nth-child(4))) > .col-lg-3 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* === Service-card hover hue ===
   Plugin's services-list.min.css uses a green-tinted shadow rgba(128,190,121,0.3) on
   .services.listing3 hover/active. Switch to orange-tint matching the new accent #f7941d. */
.services.listing3 .content:hover,
.services.listing3 .active-item {
    box-shadow: 0 10px 25px 0 rgba(247, 148, 29, 0.3) !important;
}

/* === Testimonial author name — line-circle outline ===
   Pagination bullets use a 2px line at the bottom (testimonial.min.css line height:2px);
   the name border matches that thickness. White on the dark-blue testimonial background.
   Fixed 140px square so border-radius:50% is a TRUE circle for any name length. */
.main-header-testimonial.simple_slider .name {
    width: 140px;
    height: 140px;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 8px;
}

/* === Events list: title hover underline — orange === */
body .wcs-timetable--list .wcs-class .wcs-class__title:hover {
    text-decoration-color: rgb(248, 150, 51) !important;
}

/* Plugin draws a top-border ::after on every item, leaving the last item with no bottom rule.
   Add a matching bottom rule on the last visible item so the list has consistent borders top + between + bottom. */
body .wcs-timetable__list .wcs-class:last-child,
body .wcs-timetable__list .wcs-class:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* === Events: list-view buttons — no underline by default, underline on hover ===
   - .wcs-modal-call ("Details", grey): keeps plugin-default colors, hover adds underline
   - .wcs-btn--action (orange CTA, list + modal): white text always, hover adds white underline */
.wcs-btn.wcs-modal-call,
.wcs-class .wcs-btn.wcs-modal-call {
    text-decoration: none !important;
}
.wcs-btn.wcs-modal-call:hover,
.wcs-class .wcs-btn.wcs-modal-call:hover {
    text-decoration: underline !important;
}

.wcs-btn.wcs-btn--action,
.wcs-class .wcs-btn.wcs-btn--action,
.wcs-class__action .wcs-btn.wcs-btn--action,
.wcs-single__action .wcs-btn.wcs-btn--action,
.wcs-modal .wcs-btn.wcs-btn--action {
    color: #ffffff !important;
    text-decoration: none !important;
}
.wcs-btn.wcs-btn--action:hover,
.wcs-class .wcs-btn.wcs-btn--action:hover,
.wcs-class__action .wcs-btn.wcs-btn--action:hover,
.wcs-single__action .wcs-btn.wcs-btn--action:hover,
.wcs-modal .wcs-btn.wcs-btn--action:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-color: #ffffff !important;
}

/* CF7 Send Message — override the theme's left-to-right slide on hover.
   Default: blue solid. Hover: orange solid. No slide. (Matches a-btn-7.) */
body .form.btn-style-1 input[type="submit"] {
    background-image: none !important;
    background-position: 0 0 !important;
    background-color: #0f3454 !important;
    color: #fff !important;
    transition: background-color 0.3s ease !important;
}
body .form.btn-style-1 input[type="submit"]:hover {
    background-image: none !important;
    background-position: 0 0 !important;
    background-color: #f7941d !important;
    color: #fff !important;
}

/* === In-content default button (a-btn-7) ===
   Blue (#0f3454) default fill, orange (#f7941d) on hover. Applies to:
     - cs_button shortcodes (.cs-btn-wrap > a.a-btn-7)
     - Raw HTML anchors with class="a-btn-7" (e.g. inline button rows)
   The Download Annual Report button (.vc_custom_9001) overrides via higher specificity. */
a.a-btn-7,
button.a-btn-7 {
    display: inline-block;
    padding: 14px 32px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    background-color: #0f3454 !important;
    border: 1px solid #0f3454 !important;
    color: #ffffff !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}
a.a-btn-7:hover,
button.a-btn-7:hover {
    background-color: #f7941d !important;
    border-color: #f7941d !important;
    color: #ffffff !important;
}
/* Inline button rows (raw HTML) — space adjacent buttons */
a.a-btn-7 + a.a-btn-7,
button.a-btn-7 + a.a-btn-7,
a.a-btn-7 + button.a-btn-7,
button.a-btn-7 + button.a-btn-7 {
    margin-left: 16px;
}

/* === Alternative in-content button (default alt) — orange outline → snap-fill blue ===
   No animation. Trigger: el_class="das-btn-alt" on cs_button (when wrapper picks it up),
   or class on raw <a>/<button>. ALSO auto-applied to any cs_button whose anchor is a
   tel: link (so the "Call to Donate" button works without needing the el_class). */
.cs-btn-wrap.das-btn-alt a.a-btn-7,
a.a-btn-7.das-btn-alt,
button.a-btn-7.das-btn-alt,
.cs-btn-wrap:has(> a[href^="tel:"]) a.a-btn-7 {
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid #f7941d !important;
    color: #f7941d !important;
    transition: none !important;
}
.cs-btn-wrap.das-btn-alt a.a-btn-7:hover,
a.a-btn-7.das-btn-alt:hover,
button.a-btn-7.das-btn-alt:hover,
.cs-btn-wrap:has(> a[href^="tel:"]) a.a-btn-7:hover {
    background-color: #0f3454 !important;
    background-image: none !important;
    border-color: #0f3454 !important;
    color: #ffffff !important;
}

/* === Special alt button — preserves the previous smooth-fill behavior ===
   Orange outline default → blue fill on hover with the left-to-right / fade
   animation. (Saved here so it can still be applied via el_class="das-btn-special-alt".) */
.cs-btn-wrap.das-btn-special-alt a.a-btn-7,
a.a-btn-7.das-btn-special-alt,
button.a-btn-7.das-btn-special-alt {
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
    border: 2px solid #f7941d !important;
    color: #f7941d !important;
    transition: color 0.4s ease, border-color 0.4s ease !important;
    z-index: 1;
}
.cs-btn-wrap.das-btn-special-alt a.a-btn-7::before,
a.a-btn-7.das-btn-special-alt::before,
button.a-btn-7.das-btn-special-alt::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 100%;
    background-color: #0f3454;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1;
}
.cs-btn-wrap.das-btn-special-alt a.a-btn-7:hover,
a.a-btn-7.das-btn-special-alt:hover,
button.a-btn-7.das-btn-special-alt:hover {
    color: #ffffff !important;
    border-color: #0f3454 !important;
}
.cs-btn-wrap.das-btn-special-alt a.a-btn-7:hover::before,
a.a-btn-7.das-btn-special-alt:hover::before,
button.a-btn-7.das-btn-special-alt:hover::before {
    transform: scaleX(1);
}

/* Section CTA layout (About Us on mission accordion, Our Services on Why block).
   Color/hover comes from the general .cs-btn-wrap a.a-btn-7 rule above; this just
   handles left-align and top spacing inside the section content. */
.das-section-btn {
    text-align: left !important;
    margin-top: 32px !important;
}

/* Footer copyright links — "Drive A Senior" + "1230MEDIA" — white, NO underline, orange on hover */
.information .footer-bottom-wrap a.das-footer-link,
#footer .footer-bottom-wrap a.das-footer-link {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}
.information .footer-bottom-wrap a.das-footer-link:hover,
#footer .footer-bottom-wrap a.das-footer-link:hover {
    color: #f7941d !important;
}

/* 12px bottom padding below copyright */
.information .footer-bottom-wrap {
    padding-bottom: 12px;
}
/* Copyright bar: full width so Site by floats to right edge */
#footer.information .row > .left-content-footer.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}



/* ─── MISSION VIDEO OVERLAY ─── */
.accordion.with_media .accordion__media {
    overflow: hidden;
}
.accordion.with_media .accordion__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.das-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.das-play-btn {
    width: 90px;
    height: 90px;
    background-color: rgba(255,255,255,0.95);
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.das-play-btn:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 0 16px 28px;
    border-color: transparent transparent transparent var(--green-color, #0f3454);
    margin-left: 5px;
}
.das-play-btn:hover {
    background-color: var(--green-color, #0f3454);
    transform: scale(1.08);
}
.das-play-btn:hover:before {
    border-color: transparent transparent transparent #fff;
}
/* Home page only — larger play button on the mission video */
body.home .das-play-btn {
    width: 148px;
    height: 148px;
    margin: 16px 0 0 12px;
}
@media (max-width: 768px) {
    .das-play-btn {
        width: 70px;
        height: 70px;
    }
    .das-play-btn:before {
        border-width: 12px 0 12px 21px;
    }
}

.das-wpb-partners .vc_images_carousel {
    padding: 30px 0;
}
.das-wpb-partners .vc_images_carousel .vc_carousel-inner {
    margin: 0;
}
.das-wpb-partners .vc_images_carousel .vc_item img {
    height: 84px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
    filter: grayscale(100%);
    opacity: 0.65;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.das-wpb-partners .vc_images_carousel .vc_item img:hover {
    filter: none !important;
    opacity: 1 !important;
}
.das-wpb-partners .vc_images_carousel .vc_carousel-indicators,
.das-wpb-partners .vc_images_carousel .vc_left,
.das-wpb-partners .vc_images_carousel .vc_right {
    display: none !important;
}
.das-wpb-partners .vc_images_carousel .vc_item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 35px !important;
}


/* === 2024 Impact + Testimonials background — radial blue glow (matches footer feel) ===
   These sections are much taller than the footer, so a default farthest-corner radial fades
   into mostly-dark edges. Constrain the ellipse + brighten the center so the glow is visible. */
.vc_custom_9001,
.vc_custom_9002 {
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(ellipse 1400px 600px at 50% 50%, #2a5a8c 0%, #1d4870 35%, #0f3454 80%) !important;
    background-color: #0f3454 !important;
}
.vc_custom_9001::before,
.vc_custom_9002::before {
    content: none !important;
}
.vc_custom_9001 > *,
.vc_custom_9002 > * {
    position: relative;
    z-index: 1;
}






/* === SITE-WIDE BUTTON BORDER RADIUS STANDARD: 3px === */
.a-btn, .a-btn-1, .a-btn-2, .a-btn-3, .a-btn-4,
.a-btn-5, .a-btn-6, .a-btn-7, .a-btn-8, .a-btn-9 {
    border-radius: 3px !important;
    overflow: hidden;
}
/* Theme's ::before on a-btn-1..4 sits INSIDE the 2px border so rounded corners show the page bg as tiny
   white dots. Extend the ::before by 2px on every side and let overflow:hidden clip to the outer radius. */
.a-btn-1::before,
.a-btn-2::before,
.a-btn-3::before,
.a-btn-4::before {
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 3px !important;
}

/* === TOP BAR (above main header) — radial blue gradient matching footer === */
.cs-top-header.js-top-header,
.header_top_bg > .cs-top-header {
    background-image: radial-gradient(ellipse 1400px 200px at 50% 50%, #2a5a8c 0%, #1d4870 35%, #0f3454 80%) !important;
    background-color: #0f3454 !important;
    color: #ffffff !important;
}
/* Light text + links inside top bar */
.cs-top-header .cs-top-header__links,
.cs-top-header .cs-top-header__links-item,
.cs-top-header .cs-top-header__links-item a,
.cs-top-header .cs-top-header__links-item i {
    color: #ffffff !important;
}
.cs-top-header .cs-top-header__links-item a:hover {
    color: #f7941d !important;
}
/* Subtle separator between top bar links */
.cs-top-header_right_content-wr .cs-top-header__links-item + .cs-top-header__links-item {
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,0.25);
}


/* === HEADER DONATE BUTTON: size only. Uses theme's default .a-btn-1 sliding ::before animation
   (fixed site-wide above so it fully covers rounded corners). Transparent bg on <a> so the
   ::before scale transition is visible. === */
.header_top_bg .simple #topmenu .menu-wrapper .button-header .header-button a.a-btn-1 {
    line-height: 40px;
    padding: 0 28px;
    background-color: transparent !important;
    background-image: none !important;
}
/* Force hover text color to default green (theme's nav-link hover rule otherwise recolors it gray) */
.header_top_bg .simple #topmenu .menu-wrapper .button-header .header-button a.a-btn-1:hover {
    color: #f7941d !important;
}


/* === LOGO SIZING: explicit px so SVG renders even without intrinsic width/height ===
   Constrained to desktop (≥1025px) so it doesn't fight the mobile single-logo rule below. */
@media (min-width: 1025px) {
    .simple #topmenu .logo img.main-logo:not(.logo-mobile),
    .right-menu.simple .logo img.main-logo:not(.logo-mobile) {
        width: 264px !important;
        height: 66px !important;
        max-width: 264px !important;
        max-height: 84px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        object-fit: contain !important;
    }
}




/* === INTERIOR PAGE TOP BANNER: compact layout + radial blue gradient (matches footer) === */
.top-banner.with-breadcrumbs {
    min-height: auto !important;
    padding: 40px 0 !important;
    background-image: radial-gradient(circle at 49% 42%, #1d4870, #0f3454) !important;
    background-color: #0f3454 !important;
    position: relative;
    overflow: hidden;
}
.top-banner.with-breadcrumbs .title {
    margin-top: 0 !important;
    font-size: 56px !important;
}
.top-banner.with-breadcrumbs .banner-breadcrumbs {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}
.top-banner.with-breadcrumbs::before {
    content: none !important;
}
.top-banner.with-breadcrumbs > * {
    position: relative;
    z-index: 1;
}
/* Hide the overlay that was meant for darkening bg images */
.top-banner.with-breadcrumbs .overlay {
    display: none !important;
}
/* Responsive adjustments */
@media (max-width: 1200px) {
    .top-banner.with-breadcrumbs .title { font-size: 48px !important; }
}
@media (max-width: 767px) {
    .top-banner.with-breadcrumbs { padding: 30px 0 !important; }
    .top-banner.with-breadcrumbs .title { font-size: 36px !important; }
}


/* Contact page social icons */
.das-contact-socials a { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; background: #0f3454; color: #fff !important; border-radius: 50%; margin-right: 8px; transition: background 0.3s ease; text-decoration: none !important; }
.das-contact-socials a:hover { background: #f7941d; }


/* === STANDARD FILLED ICON FORMAT: solid circle #0f3454, hover #f7941d, white icon === */
/* Applied to Why Drive A Senior? info_block icons AND Enabling Older Adults services list icons */

/* Why Drive A Senior? — info_block .text_over_image icons (heart, compass) */
.info-block-wrap.text_over_image .blocks_text .content .icon i.info-block-icon {
    background: #0f3454 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 0.3s ease !important;
}
.info-block-wrap.text_over_image .blocks_text .content:hover .icon i.info-block-icon {
    background: #f7941d !important;
}

/* Footer tagline styling to match theme demo heading size */
.information .left-content-footer .footer-text {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 24px;
    max-width: 320px;
}


/* DaS standard icon style applied to BOTH cs_services listing variants:
   - .services.listing  (used on Home Support, Friendly Visits, etc.)
   - .services.listing3 (legacy listing3 cards, kept for back-compat)
   Matches the home page "Why Drive A Senior?" info-block-icon exactly:
   blue circle, white line glyph, dim halo via ::after, orange on hover. */
.services.listing .icons,
.services.listing3 .icons {
    margin-bottom: 30px !important;
}
.services.listing .icons i,
.services.listing3 .icons i {
    background: #0f3454 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 30px !important;
    line-height: 1 !important;
    padding: 25px !important;
    width: 1.25em !important;
    height: 1.25em !important;
    max-width: 95px !important;
    max-height: 95px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    transition: background-color 0.3s ease !important;
}
/* Dim ring halo */
.services.listing .icons i::after,
.services.listing3 .icons i::after {
    content: "";
    background-color: inherit;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    z-index: -1;
    opacity: 0.35;
}
/* Hover: orange */
.services.listing .item:hover .icons i,
.services.listing .service-item:hover .icons i,
.services.listing .content:hover .icons i,
.services.listing3 .item:hover .icons i,
.services.listing3 .service-item:hover .icons i,
.services.listing3 .content:hover .icons i {
    background: #f7941d !important;
}



/* Override: DAS icon in Contact CTA gets 96px and -20px top margin (other contact icons stay at 64px) */
.contacts-info-wrap.contact_line .icon-imeg img[src*="DAS_Icon-1.svg"],
.contacts-info-wrap.contact_line .icon-imeg img[data-lazy-src*="DAS_Icon-1.svg"] {
    max-height: 96px !important;
    height: 96px !important;
    margin-top: -20px !important;
}



/* Replace with a pseudo-element inset exactly 15px from both sides, matching column content position */
#footer.information .top-footer {
    border-bottom: none !important;
    position: relative;
}
#footer.information .top-footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    border-bottom: 1px solid #ffffff1a;
}

/* Copyright row matches top-footer row exactly — both have -15px margins, content starts 15px in */
#footer.information .footer-bottom-wrap > .container > .align-items-center > .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}
#footer.information .row > .left-content-footer.col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
#footer.information .copyright.col-xs-12 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* Footer divider + copyright alignment
   Strategy: remove theme border from .top-footer (extends beyond content).
   Put border-top on the copyright row itself with NO negative margin so line width = content width. */
#footer.information .top-footer {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
#footer.information .top-footer::after {
    display: none !important;
}

/* Copyright row — match top-footer row width (-15px margins) so border-top spans same width as the menu/content row above */
#footer.information .footer-bottom-wrap > .container > .align-items-center > .row:not(.top-footer) {
    margin-left: -15px !important;
    margin-right: -15px !important;
    border-top: 1px solid #ffffff1a;
    padding-top: 20px !important;
    margin-top: 20px !important;
}
#footer.information .footer-bottom-wrap > .container > .align-items-center > .row:not(.top-footer) > .left-content-footer.col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
#footer.information .copyright.col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* "Contact" column heading: clickable (links to /contact), same treatment as About/Services */

/* Policies & Forms heading: placeholder URL "#" — disable pointer interaction, keep visual */
#footer.information .footer-menu #menu-footer-menu > li#menu-item-2260 > a {
    pointer-events: none;
    cursor: default;
}

/* Contact info block — match sub-menu link color/opacity. margin-top:0 aligns the first line (phone)
   vertically with the first sub-menu link ("Title VI Policy") in the adjacent column. */
#footer.information .das-contact-info {
    margin-top: 0;
}
#footer.information .das-contact-info p {
    font-size: 14px;
    line-height: 1.73;
    margin: 0 0 6px 0;
    color: var(--light-color);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
#footer.information .das-contact-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
#footer.information .das-contact-info p:hover,
#footer.information .das-contact-info a:hover {
    color: #f7941d !important;
    opacity: 1 !important;
}

/* Social icons in Contact column — filled white circles, green on hover */
#footer.information .das-footer-donate-cta .socials-wrap {
    margin-top: 14px;
}
#footer.information .das-footer-donate-cta .socials-wrap ul {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}
#footer.information .das-footer-donate-cta .socials-wrap ul li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer.information .das-footer-donate-cta .socials-wrap ul li a.social {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 34px;
    height: 34px;
    background-color: #ffffff !important;
    color: #222222 !important;
    border-radius: 50%;
    font-size: 14px;
    opacity: 1 !important;
    z-index: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Semi-transparent halo ring (matches .info-block-icon::after on the home page — inherits the icon bg color at 0.35 opacity) */
#footer.information .das-footer-donate-cta .socials-wrap ul li a.social::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.35;
    z-index: -1;
    transition: background-color 0.2s ease;
}
#footer.information .das-footer-donate-cta .socials-wrap ul li a.social:hover {
    background-color: #f7941d !important;
    color: #ffffff !important;
}
/* Font Awesome glyph is drawn via ::before — ensure it picks up the hover color (theme has higher-specificity rules that would otherwise override) */
#footer.information .das-footer-donate-cta .socials-wrap ul li a.social::before {
    color: inherit !important;
    position: relative;
    z-index: 2;
}
#footer.information .das-footer-donate-cta .socials-wrap ul li a.social:hover::before {
    color: #ffffff !important;
}

/* Contact page: cs_contacts simple_large_form is used only as a styling wrapper for the CF7 form
   (no title/description/icons passed). Hide the empty info-wrap so the form fills the full column width. */
.contacts-info-wrap.simple_large_form .info-wrap {
    display: none;
}
.contacts-info-wrap.simple_large_form .form {
    flex: 1 1 100% !important;
    padding-right: 0 !important;
}

/* Subject <select>: theme only styles input + textarea; match the underline style here so the dropdown fits the rest of the form */
.contacts-info-wrap.simple_large_form .form select.wpcf7-select {
    padding: 15px 0;
    padding-left: 35px;
    width: 100%;
    background-color: transparent;
    color: var(--dark-color);
    border: 0;
    outline: none;
    border-bottom: 2px solid #ddd;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* inline SVG chevron so the native dropdown arrow is replaced with one that matches the form aesthetic */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23999' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    transition: border-color .35s ease;
}
.contacts-info-wrap.simple_large_form .form select.wpcf7-select:focus {
    border-bottom-color: #0f3454;
}

/* Send Message submit button: matches default a-btn-7 (blue default, clean swap to orange on hover, no slide, 3px rounded, eased transition) */
.contacts-info-wrap.simple_large_form .form.btn-style-1 input[type="submit"],
.form.btn-style-1 input[type="submit"] {
    border: 1px solid #0f3454 !important;
    border-radius: 3px !important;
    background-color: #0f3454 !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}
.contacts-info-wrap.simple_large_form .form.btn-style-1 input[type="submit"]:hover,
.form.btn-style-1 input[type="submit"]:hover {
    background-image: none !important;
    background-position: 0 0 !important;
    background-color: #f7941d !important;
    border-color: #f7941d !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* Reusable button: matches CF7 submit (blue default, green slide-in on hover) — used on Volunteer page */
a.das-btn-blue-green,
button.das-btn-blue-green {
    display: inline-block;
    padding: 14px 32px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border: 2px solid #0f3454 !important;
    border-radius: 3px !important;
    background-color: #0f3454 !important;
    background-image: linear-gradient(to right, #f7941d 50%, #0f3454 50%) !important;
    background-size: 200% 100% !important;
    background-position: right bottom !important;
    color: #ffffff !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-position .4s ease, border-color .4s ease, color .4s ease !important;
}
a.das-btn-blue-green:hover,
button.das-btn-blue-green:hover {
    background-position: left bottom !important;
    border-color: #f7941d !important;
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
a.das-btn-blue-green + a.das-btn-blue-green,
button.das-btn-blue-green + a.das-btn-blue-green {
    margin-left: 16px;
}

/* cs_team simple_creative — force 5-up flex grid with circular avatars (Team page) */
.team-members-wrap.simple_creative {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
}
.team-members-wrap.simple_creative .team-member {
    flex: 1 1 calc(20% - 24px) !important;
    max-width: calc(20% - 24px) !important;
    min-width: 160px !important;
    background: transparent !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}
.team-members-wrap.simple_creative .team-member .member-photo {
    position: relative !important;
    width: 160px !important;
    height: 160px !important;
    padding-bottom: 0 !important;     /* plugin sets this to 109% (aspect-ratio hack) — undo */
    margin: 0 auto 16px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #f0f0f1 !important;
}
.team-members-wrap.simple_creative .team-member .member-photo:before,
.team-members-wrap.simple_creative .team-member .member-photo:after { display: none !important; }
.team-members-wrap.simple_creative .team-member .member-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}
.team-members-wrap.simple_creative .team-member .info-wrap {
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
}
.team-members-wrap.simple_creative .team-member .member-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    color: #222 !important;
}
.team-members-wrap.simple_creative .team-member .member-position {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
/* 3-up for board section (9 cards, 3 rows) — detected by having >5 direct .team-member children */
.team-members-wrap.simple_creative:has(.team-member:nth-child(7)) .team-member {
    flex: 1 1 calc(33.333% - 24px) !important;
    max-width: calc(33.333% - 24px) !important;
}
@media (max-width: 991px) {
    .team-members-wrap.simple_creative .team-member,
    .team-members-wrap.simple_creative:has(.team-member:nth-child(7)) .team-member {
        flex: 1 1 calc(50% - 24px) !important;
        max-width: calc(50% - 24px) !important;
    }
}
@media (max-width: 575px) {
    .team-members-wrap.simple_creative .team-member,
    .team-members-wrap.simple_creative:has(.team-member:nth-child(7)) .team-member {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* Hide the Driver Requirements play-button overlay (video is scoped to About page only) */
.page-id-9 .das-video-overlay,
.page-id-9 .das-play-btn { display: none !important; }

/* Volunteer signup modal */
#das-iframe-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}
#das-iframe-modal.is-open { display: flex; }
#das-iframe-modal .das-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
}
#das-iframe-modal .das-modal-content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    max-width: 95vw;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
#das-iframe-modal .das-modal-close {
    position: absolute;
    top: 4px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    color: #222;
}
#das-iframe-modal iframe {
    display: block;
    max-width: 100%;
}

/* Site-wide cs_headings rules — enforce demo style: h3 title dark gray + green <i>, h5 subtitle small green.
   Also center the simple_inline variant (theme renders it left-aligned / inline-flex by default). */
.headings.simple_inline {
    display: block !important;
    text-align: center !important;
}
.headings.simple_inline .headings-content {
    max-width: 100% !important;
}
.headings .title {
    color: #222222;
}
.headings .title i,
.headings.simple .title i,
.headings.simple_inline .title i {
    font-style: normal;
    color: #f7941d !important;
}
/* Small heading default — h5 cs_headings subtitle, .das-tax-label, etc. ALL CAPS + default blue */
.headings.simple_inline .subtitle,
.headings .subtitle {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0f3454;
    margin-bottom: 13px;
    text-transform: uppercase;
}

/* Contact page heading: extra-bold, dark gray + green <i>, green part on its own line */
.das-contact-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 30px 0;
    color: #222222;
    /* Extra stroke weight on the black half so it renders slightly heavier than the green italic half above */
    -webkit-text-stroke: 0.5px #222222;
}
.das-contact-title i {
    display: block;
    white-space: nowrap;
    color: #f7941d;
    font-style: normal;
    font-weight: 700;
    /* Neutralize the text-stroke inherited from the parent so only the black half looks heavier */
    -webkit-text-stroke: 0;
}

/* ============================================================ EVENTS PAGE — card frame + minor
   demo-matching polish (day-agenda panel bg, date-title weight). ============================================================ */
.vc_custom_wcs_card {
    background-color: #ffffff !important;
    padding: 40px !important;
    /* Exact demo shadow per user-provided spec */
    box-shadow: 2.25rem 2.375rem 6.75rem 0rem rgba(52, 73, 94, 0.25) !important;
    border-radius: 4px !important;
}
/* Day-detail panel (middle column "April 23 ...") — light-grey background like demo */
body .wcs-timetable--monthly-calendar .wcs-day-agenda {
    background-color: #f7f7f7;
    padding: 2em 1.5em !important;
}
/* Date title ("April 23") — smaller and non-bold to match demo */
body .wcs-timetable--monthly-calendar .wcs-day-agenda__title {
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}
/* Event title (h3.wcs-class__title.wcs-modal-call) inside day-agenda preview — weight 500 */
body .wcs-day-agenda .wcs-class__title.wcs-modal-call,
body .wcs-class__title.wcs-modal-call {
    font-weight: 500 !important;
}

/* Masonry Grid (schedule 3) — Curly Themes demo match */

/* #1 "Filter By" toggle — not bold */
body .wcs-timetable--3 .wcs-filter-toggler,
body .wcs-timetable--3 .wcs-filter-toggler-container {
    font-weight: 400 !important;
}

/* #2 Each filter row on one line: "Location: All  North Austin  South Austin" */
body .wcs-timetable--3 .wcs-filters__filter-column {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 16px !important;
    padding: 10px 0 !important;
}
body .wcs-timetable--3 .wcs-filters__filter-column > * {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
body .wcs-timetable--3 .wcs-filter {
    display: none !important;
}

/* #3 Varied aspect ratios for true masonry feel */
body .wcs-timetable--3 .wcs-class__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
body .wcs-timetable--3 .wcs-class:nth-child(3n+1) .wcs-class__image img {
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    height: auto !important;
}
body .wcs-timetable--3 .wcs-class:nth-child(3n+2) .wcs-class__image img {
    aspect-ratio: 16 / 11 !important;
    object-fit: cover !important;
    height: auto !important;
}
body .wcs-timetable--3 .wcs-class:nth-child(3n) .wcs-class__image img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    height: auto !important;
}

/* Green action buttons (RSVP / Register / Buy tickets / Reserve a spot / etc.) — links re-enabled */

/* Events list view — make event title and image look clickable; they trigger the Details modal */
body .wcs-timetable--list .wcs-class .wcs-class__title,
body .wcs-timetable--list .wcs-class .wcs-class__image {
    cursor: pointer;
}
body .wcs-timetable--list .wcs-class .wcs-class__title:hover {
    color: #0f3454;
    text-decoration: underline;
    text-decoration-color: rgba(27, 107, 168, 0.4);
    text-underline-offset: 3px;
}
body .wcs-timetable--list .wcs-class .wcs-class__image {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body .wcs-timetable--list .wcs-class .wcs-class__image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}

/* Inside the Details modal — make the image clickable.
   The plugin paints .wcs-modal__side::before and ::after as 5%-opacity overlays
   absolutely positioned over the entire side panel, including the <img>. They
   intercept hover and clicks. Make them transparent to pointer events so the
   image underneath becomes interactive. Also lift the img into its own stacking
   context so it draws above the pseudos. */
body .wcs-modal .wcs-modal__side::before,
body .wcs-modal .wcs-modal__side::after {
    pointer-events: none !important;
}
body .wcs-modal .wcs-image {
    position: relative;
    z-index: 1;
    cursor: zoom-in !important;
    transition: opacity 0.15s ease;
}
body .wcs-modal .wcs-image:hover { opacity: 0.92; }

/* Plugin applies filter:blur+grayscale to every direct <body> child while a Details modal
   is open (the rule is `body.wcs_modal--opened > :not(#wcs-vue-modal):not(.wcs-vue-modal)`).
   That intentionally blurs the page background — but it ALSO blurs our injected lightbox
   because it is a direct body child too. Exclude only our lightbox; the page-background
   blur effect remains intact for everything else. */
body.wcs_modal--opened > #das-img-lightbox,
body.wcs_modal--opened > #das-img-lightbox * {
    filter: none !important;
}

/* Image-zoom lightbox (nested over the Details modal) — fit to viewport, preserve aspect ratio.
   Layout: a fixed full-screen container with TWO children — an absolute overlay (which
   fades in/out) and the IMG (which is always opacity 1). Putting the opacity transition
   on the overlay only — not the parent — prevents the img from blending with the dark
   backdrop, which was making it look gray-and-washed-out. */
#das-img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483647;      /* beats the plugin's .wcs-modal z-index of 9999999 */
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 2vh 2vw;
}
#das-img-lightbox.is-open { display: flex; }
#das-img-lightbox[hidden] { display: none; }
#das-img-lightbox .das-img-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    transition: opacity 0.18s ease;
}
#das-img-lightbox.is-open .das-img-lightbox__overlay { opacity: 1; }
#das-img-lightbox img {
    position: relative;       /* lift above the overlay */
    z-index: 1;
    max-width: 96vw;
    max-height: 96vh;
    width: auto;
    height: auto;
    object-fit: contain;      /* aspect ratio preserved — never stretched */
    /* No background, no opacity, no filter — image displays at native colors and clarity */
}

/* ============================================================ DONATE PAGE ============================================================ */

/* Testimonial quote block */
.das-quote {
    border: none;
    margin: 0;
    padding: 30px 60px;
    text-align: center;
    position: relative;
}
.das-quote::before {
    content: "\201C";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: 1;
    color: #f7941d;
    opacity: 0.25;
}
.das-quote-lead {
    font-size: 24px;
    font-weight: 600;
    color: #222222;
    line-height: 1.4;
    margin: 0 0 24px 0;
}
.das-quote-lead i {
    font-style: italic;
    color: #0f3454;
}
.das-quote-body {
    font-size: 16px;
    line-height: 1.7;
    color: #555555;
    margin: 0 auto 18px;
    max-width: 720px;
}
.das-quote-cite {
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Primary CTA cards (Donate Online / Donate by Check) */
.das-donate-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 14px 0;
}

/* CTA card icon — filled circle + halo, matches home-page .info-block-icon pattern. Default blue, hover green.
   Placed INLINE inside the h3 so title stays on the same line as the icon. */
.das-donate-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    width: 44px;
    height: 44px;
    margin: 0 14px 0 0;
    background-color: #0f3454;
    color: #ffffff;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    z-index: 1;
    transition: background-color 0.3s ease;
}
.das-donate-card-icon i {
    display: block;
    line-height: 1;
    /* linea-basic glyph baseline sits high in its em-box; nudge down ~1px to optically center */
    transform: translateY(1px);
}
.das-donate-card-icon::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.35;
    z-index: -1;
    transition: background-color 0.3s ease;
}
/* Hover (on the card column) turns the icon to green */
.vc_custom_donate_cta1:hover .das-donate-card-icon,
.vc_custom_donate_cta2:hover .das-donate-card-icon {
    background-color: #f7941d;
}
.das-donate-card-text {
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    margin: 0 0 24px 0;
    min-height: 48px;
}

/* "Donate by Check or Call" button — inverse of the Donate Online button.
   Uses a sliding gradient fill (left-to-right sweep on hover). background-origin/clip set to
   border-box so the gradient paints OVER the border area too — no bottom/edge strips. */
.vc_custom_donate_cta2 a.a-btn-7,
.vc_custom_donate_cta2 .cs-btn-wrap a {
    border: 2px solid #f7941d !important;
    background-color: transparent !important;
    background-image: linear-gradient(to right, #f7941d 50%, transparent 50%) !important;
    background-size: 200% 100% !important;
    background-position: right bottom !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    color: #f7941d !important;
    transition: background-position .4s ease, color .4s ease !important;
}
.vc_custom_donate_cta2 a.a-btn-7:hover,
.vc_custom_donate_cta2 .cs-btn-wrap a:hover {
    background-position: left bottom !important;
    color: #ffffff !important;
}
.vc_custom_donate_cta2 a.a-btn-7::before,
.vc_custom_donate_cta2 a.a-btn-7::after {
    display: none !important;
}

/* Ways to Give cards */
.das-way-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f3454;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.das-way-tag {
    display: inline-block;
    padding: 3px 10px;
    background-color: #EBF4FB;
    color: #0f3454;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    white-space: nowrap;
}

/* Tax Info section — dark readable text on the default page background */
.das-tax-info {
    max-width: 980px;
    margin: 0 auto;
    color: #222222;
    text-align: center;
}
.das-tax-title {
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 10px 0;
}
.das-tax-subtitle {
    font-size: 16px;
    color: #555555;
    margin: 0 0 40px 0;
}
.das-tax-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}
.das-tax-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background-color: #f5f5f5;
    border-radius: 6px;
}
/* Labels (EIN / Mailing Address / Organization Name): default project blue */
.das-tax-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f3454;
}
.das-tax-value {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    line-height: 1.4;
}
.das-tax-note {
    font-size: 14px;
    line-height: 1.7;
    color: #555555;
    max-width: 780px;
    margin: 0 auto;
}
.das-tax-note strong {
    color: #222222;
}
.das-tax-info a {
    color: #222222;
    text-decoration: underline;
}
.das-tax-info a:hover {
    color: #f7941d;
}
/* Neutralize the dark-blue row bg since the tax info now reads as dark-on-light */
.vc_custom_taxinfo {
    background-color: transparent !important;
}

@media (max-width: 767px) {
    .das-tax-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .das-quote {
        padding: 30px 20px;
    }
    .das-quote-lead {
        font-size: 20px;
    }
}

/* Bare contact info — no labels, minimal spacing */
.das-contact-text {
    margin-bottom: 28px;
}
.das-contact-text p {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--grey-color);
}
.das-contact-text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.das-contact-text a:hover {
    color: #f7941d;
}

/* CF7 two-column field layout (first-name/last-name, email/phone) */
.wpcf7-form .cf7-row {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.wpcf7-form .cf7-row .cf7-col-half {
    flex: 1 1 calc(50% - 15px);
    min-width: 200px;
}
@media (max-width: 767px) {
    .wpcf7-form .cf7-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Reduce Message textarea height to ~50% of previous (rows=10 → rows=5 in form config; this caps it in CSS too) */
.contacts-info-wrap.simple_large_form .form textarea.wpcf7-textarea {
    min-height: 90px;
    height: 90px;
    resize: vertical;
}

/* Contact page "Get in Touch" icons (.das-contact-socials): match home/footer filled-circle + halo style */
.das-contact-socials {
    display: flex !important;
    gap: 10px;
    margin-top: 12px;
}
.das-contact-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    background-color: #0f3454;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
    z-index: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.das-contact-socials a::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.35;
    z-index: -1;
    transition: background-color 0.2s ease;
}
.das-contact-socials a:hover {
    background-color: #f7941d;
    color: #ffffff;
}
.das-contact-socials a i {
    line-height: 1;
}

/* Donate button moved into col 1 (left-content-footer): breathing room from the tagline above */
#footer.information .left-content-footer .das-donate-btn {
    display: block;
    list-style: none;
    margin: 18px 0 6px;
}
#footer.information .left-content-footer .das-donate-btn > a {
    margin-top: 0;
}

/* 1230MEDIA link in copyright: green on hover */
#footer.information .copyright a:hover {
    color: #f7941d !important;
}

/* Footer sub-menu link font size — !important because theme footer.min.css loads later with same selector */
#footer.information .footer-menu .anchor-navigation .menu-item-has-children .sub-menu li a {
    font-size: 14px !important;
}

/* Sticky header icon: left-align (theme centers it via justify-content:center) and scale up 20%.
   das-custom.php JS already swaps the img src to DAS_Icon-1.svg (same icon as footer CTA) when .is-scroll is active. */
.right-menu.simple.is-scroll #topmenu .logo,
.right-menu.simple.is-scroll .logo-mobile .logo {
    justify-content: flex-start !important;
}
.right-menu.simple.is-scroll #topmenu .logo img.main-logo,
.right-menu.simple.is-scroll .logo-mobile .logo img.main-logo {
    max-width: 96px !important;
    max-height: 96px !important;
    height: 96px !important;
}

/* Desktop only (≥992px): per-column horizontal shift. Contact column (das-footer-donate-cta) stays put. */
@media (min-width: 992px) {
    /* About */
    #footer.information .footer-menu #menu-footer-menu > li#menu-item-2252 {
        transform: translateX(-36px);
    }
    /* Services */
    #footer.information .footer-menu #menu-footer-menu > li#menu-item-2256 {
        transform: translateX(-72px);
    }
    /* Policies & Forms */
    #footer.information .footer-menu #menu-footer-menu > li#menu-item-2260 {
        transform: translateX(-64px);
    }
}


/* === Get Services: 3-step icon block (Consultation / Plan of Care / Monitor) ===
   Replaces the old "1. Complete... 2. Our team... 3. Schedule..." text. Mirrors the
   Curantis demo layout (round icon + dotted connector + title + description). */
.das-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    max-width: 1100px;
    margin: 24px auto 0;
    padding: 0 20px;
}
.das-step {
    flex: 1 1 0;
    text-align: center;
    position: relative;
    padding: 0 20px;
    min-width: 0;
}
/* Dotted connector between adjacent steps. Sits at the vertical center of the icon. */
.das-step + .das-step::before {
    content: "";
    position: absolute;
    top: 50px;            /* center of 100px circle */
    left: -50%;
    right: 50%;
    border-top: 2px dashed #0f3454;
    opacity: 0.45;
    z-index: 0;
}
.das-step__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0f3454;
    border: 6px solid #d6dee8;     /* outer ring like the demo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.das-step__icon i {
    color: #ffffff;
    font-size: 38px;
    line-height: 1;
    transition: color 0.3s ease;
}
/* Hover: circle + ring shift to orange (icon stays white for contrast) */
.das-step:hover .das-step__icon {
    background: #f7941d;
    border-color: #fce0bd;
}
.das-step__title {
    font-weight: 700;
    margin: 0 0 12px;
    color: #0f3454;
    font-size: 18px;
}
.das-step__desc {
    color: #555;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 767px) {
    .das-steps { flex-direction: column; gap: 32px; max-width: 360px; }
    .das-step + .das-step::before { display: none; }   /* connector is horizontal — drop on stacked layout */
}


/* Services page: cs_services Bootstrap col classes are rewritten by JS in das-custom.php
   (.col-lg-3 -> .col-lg-6 for 2-col rows, .col-lg-3 -> .col-lg-4 for 3-col rows).
   No width override needed here — Bootstrap's grid handles the rest. */


/* === Services 5-col layout (no native Bootstrap class for 1/5 = 20%) ===
   Covers BOTH listing3 (legacy) and listing (current) variants.
   For listing3: paired with das-custom.php JS swap col-lg-3 -> col-lg-2-4.
   For listing: targets the default col-12 col-xl-3 col-md-6 wrapper. */
.das-services-5col .services.listing3 .col-lg-2-4,
.das-services-5col .services.listing3 .single_slider_service_list_item,
.das-services-5col .services.listing > .row > .col-12.col-xl-3 {
    flex: 0 0 20%;
    max-width: 20%;
    width: 20%;
    padding-left: 15px;
    padding-right: 15px;
}
@media (max-width: 991px) {
    .das-services-5col .services.listing3 .col-lg-2-4,
    .das-services-5col .services.listing3 .single_slider_service_list_item,
    .das-services-5col .services.listing > .row > .col-12.col-xl-3 {
        flex: 0 0 50%; max-width: 50%; width: 50%;
    }
}
@media (max-width: 575px) {
    .das-services-5col .services.listing3 .col-lg-2-4,
    .das-services-5col .services.listing3 .single_slider_service_list_item,
    .das-services-5col .services.listing > .row > .col-12.col-xl-3 {
        flex: 0 0 100%; max-width: 100%; width: 100%;
    }
}


/* === Site-wide scroll-to-top button — matches DaS standard info-block-icon style ===
   Blue circle, line-style chevron glyph, dim ring halo via ::after, orange on hover. */
#das-scroll-top {
    position: fixed;
    right: 36px;
    bottom: 36px;
    width: 48px;
    height: 48px;
    background-color: #0f3454;
    color: #ffffff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.3s ease, bottom 0.25s ease;
    z-index: 9999;
    padding: 0;
    line-height: 1;
}
/* Dim ring halo (same pattern as .info-block-icon::after on home page) */
#das-scroll-top::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    background-color: inherit;
    opacity: 0.35;
    border-radius: 50%;
    z-index: -1;
    transition: background-color 0.3s ease;
}
#das-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#das-scroll-top:hover {
    background-color: #f7941d;
}
#das-scroll-top i {
    font-size: 24px;
    line-height: 1;
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}
#das-scroll-top:hover i {
    color: #ffffff !important;
}
@media (max-width: 575px) {
    #das-scroll-top { right: 22px; bottom: 22px; width: 44px; height: 44px; }
    #das-scroll-top i { font-size: 20px; }
}


/* === Transportation page: 2-col How It Works (image left, accordion right) === */
.das-howitworks-row .das-howitworks-img img {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}


/* === Services page: interactive zone map (above "Where We Serve") ===
   Static image base + SVG polygon overlay. Tooltip + click handled by das-custom.php JS. */
.das-zonemap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 14px 32px rgba(15, 52, 84, 0.18),     /* main soft drop */
        0 4px 10px rgba(0, 0, 0, 0.08),          /* close shadow for grounding */
        0 0 0 1px rgba(15, 52, 84, 0.08);        /* hairline edge for crisp tile feel */
}
.das-zonemap > img {
    display: block;
    width: 100%;
    height: auto;
}
.das-zonemap > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;            /* SVG itself doesn't block; paths re-enable */
}
.das-zone {
    fill-opacity: 0.55;             /* default: city names on the map show through */
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2;
    pointer-events: all;
    cursor: pointer;
    transition: fill-opacity 0.2s ease;
}
.das-zone-link:hover .das-zone,
.das-zone:hover {
    fill-opacity: 0.85;             /* hover: full mask of underlying baked-in zone colors */
}
.das-zone--yellow { fill: #ffd84a; }
.das-zone--orange { fill: #f7941d; }
.das-zone--blue   { fill: #0f3454; }
.das-zonemap__tooltip {
    position: absolute;
    pointer-events: none;
    background: #0f3454;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
    max-width: 260px;
    transform: translateY(-2px);
}
.das-zonemap__tooltip.is-visible {
    opacity: 1;
}
.das-zonemap__tooltip strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}


/* === Custom inline-SVG line icons replacing ionicons in cs_services listing ===
   The ionicons font shipped with the theme has only filled glyphs for these concepts.
   Override the :before pseudo to render an inline-SVG mask with white background — that
   gives a true line-icon appearance at any size, decoupled from font glyph metrics. */
.services.listing .icons i.ion-ios-leaf,
.services.listing .icons i.ion-ios-basket,
.services.listing .icons i.ion-ios-cart,
.services.listing .icons i.ion-ios-flower,
.services.listing .icons i.ion-ios-cut,
.services.listing .icons i.ion-ios-people,
.services.listing .icons i.ion-ios-call {
    /* Hide the original ionicons glyph */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
.services.listing .icons i.ion-ios-leaf::before,
.services.listing .icons i.ion-ios-basket::before,
.services.listing .icons i.ion-ios-cart::before,
.services.listing .icons i.ion-ios-flower::before,
.services.listing .icons i.ion-ios-cut::before,
.services.listing .icons i.ion-ios-people::before,
.services.listing .icons i.ion-ios-call::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #ffffff;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 55% 55%;
            mask-size: 55% 55%;
}
/* SVGs: viewBox 24x24, stroke-only, white-on-blue. Encoded for use as data URI. */
.services.listing .icons i.ion-ios-leaf::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20c0-9 7-16 16-16 0 9-7 16-16 16z'/><path d='M4 20l9-9'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20c0-9 7-16 16-16 0 9-7 16-16 16z'/><path d='M4 20l9-9'/></svg>");
}
.services.listing .icons i.ion-ios-basket::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h18l-2 12H5L3 8z'/><path d='M8 8l4-5 4 5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h18l-2 12H5L3 8z'/><path d='M8 8l4-5 4 5'/></svg>");
}
.services.listing .icons i.ion-ios-cart::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h3l3 12h11l2-8H6'/><circle cx='9' cy='20' r='1.5'/><circle cx='18' cy='20' r='1.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h3l3 12h11l2-8H6'/><circle cx='9' cy='20' r='1.5'/><circle cx='18' cy='20' r='1.5'/></svg>");
}
.services.listing .icons i.ion-ios-flower::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'><circle cx='12' cy='12' r='2.4'/><circle cx='12' cy='5.5' r='3.2'/><circle cx='12' cy='18.5' r='3.2'/><circle cx='5.5' cy='12' r='3.2'/><circle cx='18.5' cy='12' r='3.2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'><circle cx='12' cy='12' r='2.4'/><circle cx='12' cy='5.5' r='3.2'/><circle cx='12' cy='18.5' r='3.2'/><circle cx='5.5' cy='12' r='3.2'/><circle cx='18.5' cy='12' r='3.2'/></svg>");
}
.services.listing .icons i.ion-ios-cut::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='7' r='3'/><circle cx='6' cy='17' r='3'/><path d='M9 9l12 11M9 15l12-11'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='7' r='3'/><circle cx='6' cy='17' r='3'/><path d='M9 9l12 11M9 15l12-11'/></svg>");
}
.services.listing .icons i.ion-ios-people::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><circle cx='17' cy='8' r='2.5'/><path d='M3 20c0-3 2.5-5 6-5s6 2 6 5'/><path d='M14 20c0-2 1.5-4 3.5-4S21 18 21 20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><circle cx='17' cy='8' r='2.5'/><path d='M3 20c0-3 2.5-5 6-5s6 2 6 5'/><path d='M14 20c0-2 1.5-4 3.5-4S21 18 21 20'/></svg>");
}
.services.listing .icons i.ion-ios-call::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h4l2 5-3 2c1 3 4 6 7 7l2-3 5 2v4a2 2 0 0 1-2 2C9 22 2 15 2 5a2 2 0 0 1 2-2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h4l2 5-3 2c1 3 4 6 7 7l2-3 5 2v4a2 2 0 0 1-2 2C9 22 2 15 2 5a2 2 0 0 1 2-2z'/></svg>");
}


/* === Mobile-menu breakpoint (≤1024px): one logo on the right, vertically aligned with hamburger ===
   Theme positions .mob-nav absolutely (left:15px, top:50% translateY -50%) inside .container,
   so we right-align .logo-mobile within the same container at a matching min-height to make
   them visually centered on the same axis. */
@media (max-width: 1024px) {
    /* Hide the bare main-logo everywhere in the header; keep the .logo-mobile-class variant. */
    .right-menu.simple .logo-mobile img.main-logo:not(.logo-mobile),
    .right-menu.simple #topmenu img.main-logo:not(.logo-mobile) {
        display: none !important;
    }
    /* Size the visible mobile logo (SVG has no intrinsic dimensions) */
    .right-menu.simple .logo-mobile img.main-logo.logo-mobile {
        display: inline-block !important;
        width: auto !important;
        height: 44px !important;
        max-height: 44px !important;
        max-width: 180px !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Container: ensure positioning context + minimum height so hamburger (absolute) and
       logo (in-flow) share a tall enough box to feel centered. */
    .right-menu.simple > .container {
        position: relative !important;
        min-height: 64px !important;
    }
    /* Right-align the logo block within the container, leaving room for hamburger on left */
    .right-menu.simple .logo-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        min-height: 64px !important;
        padding: 0 15px 0 65px !important;  /* 65px clears the absolutely-positioned hamburger */
        margin: 0 !important;
        text-align: right !important;
    }
    .right-menu.simple .logo-mobile a.logo {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    /* Sticky/scrolled state: same hides */
    .right-menu.simple.is-scroll .logo-mobile img.main-logo:not(.logo-mobile),
    .right-menu.simple.is-scroll #topmenu img.main-logo:not(.logo-mobile) {
        display: none !important;
    }
}

/* Scroll-to-top: when near the very bottom on small screens, lift button so it doesn't
   overlap the 1230MEDIA credit. Class .is-near-bottom is toggled by das-custom.php JS. */
@media (max-width: 1024px) {
    #das-scroll-top.is-near-bottom { bottom: 56px; }
}