/*
Theme Name: Castel Child
Theme URI:http://wpdemo.zcubethemes.com/castel
Description: Castel – Single Property & Real Estate WordPress Theme.
Text Domain: castel
Author:       zcube
Author URI: https://themeforest.net/user/zcubedesign
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Template:     castel
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.0

*/


/* Theme customization starts here
  -------------------------------------------------------------- */

/* Compact footer: less top/bottom padding now that the header row is just the logo. */
.footer-top.footer-top-compact {
    padding-top: 40px;
    padding-bottom: 10px;
}
.footer-top.wpding {
    padding-top: 50px;
    padding-bottom: 15px;
}
.footer-widget.mb-30,
.footer-widget ul.mb-30 {
    margin-bottom: 20px;
}

/* The theme's ".dark" body wrapper forces all headings to white text, which is
   correct for sections with a dark background but leaves headings invisible
   (white-on-white) on this site's light sections. Restore dark text there. */
.dark .about-area h2,
.dark .about-area h5,
.dark .about-user .text h5,
.dark .contact-area h2,
.dark .contact-area h5 {
    color: #232323;
}

/* Contact section: tan background (the logo's third colour) — the theme's default
   light grey-blue body/list text was tuned for a dark background and is hard to
   read here, so darken it. */
.dark .contact-area .section-title p,
.dark .contact-area .contact-info li {
    color: #4a4433;
}

/* Stats band: the theme's default 120px top/bottom padding made the section feel
   oversized; trim it down while keeping the band full width. */
.counter-area.pt-120 {
    padding-top: 50px;
}
.counter-area.pb-120 {
    padding-bottom: 50px;
}
.counter-area .single-counter {
    margin-bottom: 0;
}

/* Stats band moved from an orange/yellow fill to the logo's dark green — the black
   number/label colours tuned for that lighter background are no longer readable. */
.dark .counter-area .count,
.dark .counter-area .counter span {
    color: #ffffff !important;
}
.dark .counter-area h6 {
    color: #ffffff;
}
.dark .counter-area .single-counter p {
    color: #ffffffcc;
}
.dark .counter-area .single-counter .number {
    color: #ffffff1a;
    -webkit-text-fill-color: #ffffff1a;
}

/* A second brand colour (the logo's green) for a few accents, so the site isn't
   entirely orange. */
.contact-form .btn.ss-btn {
    background-color: #046240;
    border-color: #046240;
}
.contact-form .btn.ss-btn:hover {
    background-color: #034b31;
    border-color: #034b31;
}

/* Team role labels: green read poorly here, use the logo's third colour (tan) instead. */
.dark .team-info p {
    color: #BBA66F;
}

/* Community hubs strip: reuses the theme's own auto-scrolling ".brand-active"
   carousel (originally used for partner logos) so the hub names scroll the same
   way the demo's partner logos did — dark section, no boxes, just bold wordmark-
   style text in the brand colours. */
.chac-hubs-area {
    background: #2B2C30;
    padding: 90px 0 100px;
}
.chac-hub-name {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.3;
}

/* Service card icons: now Font Awesome icons (real-estate images replaced with
   culturally relevant ones), coloured with the logo's third colour (tan). */
.services-icon i {
    color: #BBA66F;
    border-color: #BBA66F;
}
.services-icon2 i {
    font-size: 100px;
    color: #bba66f4d;
}

/* Gallery page hero: the tab image was stretching full width, which looked
   oversized next to the play button; cap it to a contained ~500px width. */
#gallery-hero .s-video-wrap {
    max-width: 500px;
    margin: 0 auto;
}
#gallery-hero .chac-gallery-thumbs {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* The default page template (needed to keep the breadcrumb banner) wraps content
   in a normal contained column, which also boxed-in this section's dark
   background. Break just the background out to the full viewport width while
   everything inside it keeps its own normal, centred layout. */
#gallery-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Single team-member page: the photo was stretched to fill the column height
   regardless of its natural aspect ratio. Crop it into a consistent portrait box
   instead of distorting it. */
.team-img-box {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
}
.team-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    margin-bottom: 0;
}


/* =========================================================================
   CHAC CIC content blocks (see mu-plugins/chac-site.php)
   Full-bleed "bands" that break out of the theme's boxed page column, in the
   logo colours: orange #E36D21, green #046240, tan #BBA66F, charcoal #2B2C30.
   ========================================================================= */

/* Pages built from bands use the full width, with no boxed padding above/below. */
.chac-wide .inner-blog {
    padding-top: 0;
    padding-bottom: 0;
}
.chac-wide .inner-blog > .container {
    max-width: none;
    padding: 0;
}
.chac-wide .inner-blog .row {
    margin: 0;
}
.chac-wide .inner-blog article {
    padding: 0;
}
.chac-wide .pages-content > p:empty {
    display: none;
}

.chac-band {
    width: 100%;
    padding: 80px 0;
}
.chac-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
.chac-band-light { background: #fff; }
.chac-band-cream { background: #f9f8f6; }
.chac-band-tan   { background: #f3eee0; }
.chac-band-green { background: #046240; }
.chac-band-dark  { background: #2B2C30; }

.chac-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px;
}
.chac-heading h5 {
    color: #E36D21;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}
.chac-heading h2 { margin-top: 10px; }
.chac-heading p { margin-top: 15px; }

/* Text colours per band (the theme's ".dark" wrapper forces white headings). */
.dark .chac-band-light h2, .dark .chac-band-light h3, .dark .chac-band-light h4,
.dark .chac-band-cream h2, .dark .chac-band-cream h3, .dark .chac-band-cream h4,
.dark .chac-band-tan h2,   .dark .chac-band-tan h3,   .dark .chac-band-tan h4 {
    color: #232323;
}
.chac-band-light p, .chac-band-cream p, .chac-band-tan p,
.chac-band-light li, .chac-band-cream li, .chac-band-tan li {
    color: #4f4f55;
    line-height: 1.75;
}
.dark .chac-band-green h2, .dark .chac-band-green h3, .dark .chac-band-dark h2, .dark .chac-band-dark h3 {
    color: #fff;
}
.chac-band-green p, .chac-band-dark p { color: #ffffffd9; }

/* Generic two-column intro / prose block */
.chac-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.chac-split img {
    width: 100%;
    border-radius: 10px;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.chac-prose { max-width: 820px; margin: 0 auto; }
.chac-prose h2 { margin: 40px 0 15px; }
.chac-prose h3 { margin: 30px 0 10px; }
.chac-prose ul { padding-left: 22px; margin-bottom: 20px; }
.chac-prose li { margin-bottom: 8px; }
.chac-prose a, .chac-band a.chac-link { color: #046240; text-decoration: underline; }

/* Mission / vision panels */
.chac-statement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.chac-statement {
    background: #fff;
    border-radius: 10px;
    padding: 40px 35px;
    border-top: 4px solid #E36D21;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.chac-statement:nth-child(2) { border-top-color: #046240; }
.chac-statement h3 { margin-bottom: 12px; }

/* Card grids: projects, programmes, team, partners */
.chac-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.chac-card-grid-team { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.chac-card {
    background: #f9f8f6;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.chac-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.1); }
.chac-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #2B2C30; }
.chac-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chac-card-media-portrait { aspect-ratio: 4 / 5; }
.chac-card-media-portrait img { object-position: top center; }
.chac-card-media-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #BBA66F; font-size: 48px; }
.chac-card-body { padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.chac-card-body h3 { font-size: 21px; margin: 0 0 10px; }
.chac-card-body h3 a { color: inherit; }
.chac-card-body h3 a:hover { color: #E36D21; }
.chac-card-body p { font-size: 15px; margin-bottom: 12px; }
.chac-card-body .chac-more { margin-top: auto; }
.chac-more { color: #046240; font-weight: 600; text-decoration: none; }
.chac-more:hover { color: #E36D21; }
.chac-meta { color: #777 !important; font-size: 13px !important; }
.chac-role { color: #BBA66F !important; font-weight: 600; letter-spacing: .5px; }
.chac-who { font-size: 14px !important; border-top: 1px solid #e6e0d0; padding-top: 12px; margin-top: 4px; }
.chac-tags { margin-bottom: 12px; }
.chac-tags span {
    display: inline-block; background: #2B2C30; color: #fff;
    padding: 4px 12px; border-radius: 20px; font-size: 12px; margin-right: 6px;
}
.chac-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%;
    background: #fff; border: 2px solid #BBA66F; color: #BBA66F;
    font-size: 22px; margin-bottom: 18px;
}
.chac-card-partner { padding: 28px 26px; }
.chac-card-partner h3 { font-size: 19px; margin-bottom: 8px; }
.chac-card-partner p { font-size: 15px; margin: 0; }
.chac-empty { text-align: center; color: #666; }

/* Testimonials: the slider itself uses the theme's own design. These only cover the parts
   the theme doesn't have: a default avatar and the "share your experience" invitation. */
.chac-avatar-default {
    display: flex; align-items: center; justify-content: center; float: left;
    width: 85px; height: 85px; border-radius: 50%;
    background: #e36d21; color: #fff;
}
.chac-avatar-default svg { display: block; }
.testimonial-active .testi-author img { width: 85px; height: 85px; border-radius: 50%; object-fit: cover; }
.chac-testimonial-invite {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    background: #26282c;
    border-radius: 4px;
    padding: 45px 35px;
}
.chac-testimonial-invite > i { font-size: 34px; color: #e36d21; margin-bottom: 14px; }
.dark .chac-testimonial-invite h3 { color: #fff; }
.chac-testimonial-invite p { color: #ffffffd9; margin-bottom: 24px; }

/* Who we work with chips */
.chac-chip-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.chac-chip-grid li {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 10px; padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    font-weight: 600; color: #232323;
}
.chac-chip-grid li i { color: #E36D21; font-size: 20px; width: 26px; text-align: center; }
.chac-chip-grid li span { color: #232323; line-height: 1.35; }

/* Core values */
.chac-value-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chac-value-list li {
    background: #fff; border: 2px solid #BBA66F; border-radius: 30px;
    padding: 8px 20px; font-weight: 600; color: #232323 !important;
}

/* Calls to action */
.chac-cta { text-align: center; }
.chac-cta h2 { margin-bottom: 14px; }
.chac-cta p { max-width: 680px; margin: 0 auto 28px; }
.chac-cta-buttons .btn { margin: 6px; }
.chac-btn-ghost, .chac-btn-ghost:hover { background: transparent !important; border: 2px solid #fff; color: #fff !important; }
.chac-btn-ghost:hover { background: #fff !important; color: #046240 !important; }
.chac-band-green .btn.ss-btn:not(.chac-btn-ghost) { background: #E36D21; border-color: #E36D21; }

/* Contact details list */
.chac-contact-list { list-style: none; padding: 0; margin: 0; }
.chac-contact-list li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.chac-contact-list i {
    flex: 0 0 46px; height: 46px; border-radius: 50%; background: #046240; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.chac-contact-list span { display: flex; flex-direction: column; color: #4f4f55; }
.chac-contact-list strong { color: #232323; }
.chac-contact-list a { color: #046240; text-decoration: underline; }

/* Notice / positioning callouts */
.chac-note {
    background: #f3eee0; border-left: 4px solid #BBA66F; border-radius: 6px;
    padding: 20px 24px; margin: 30px 0; color: #4a4433;
}
.chac-note p { margin: 0; color: #4a4433 !important; }

/* Enquiry forms on the Partner / Volunteer pages */
.chac-form-wrap { max-width: 820px; margin: 0 auto; }
.chac-form-wrap .contact-field select,
.chac-form-wrap .contact-field textarea,
.chac-form-wrap .contact-field input { width: 100%; }
.chac-form-wrap .contact-field select {
    padding: 18px 20px 18px 50px; border: 1px solid #e3ddcc; background: #fff; color: #4a4433; height: 60px;
}
.chac-form-wrap .contact-field { position: relative; }
.chac-form-wrap .contact-field i { position: absolute; left: 20px; top: 22px; color: #BBA66F; z-index: 1; }
.chac-form-wrap .contact-field textarea { padding-left: 50px; }
.chac-form-wrap .wpcf7-not-valid-tip, .chac-form-wrap .wpcf7-response-output { font-size: 14px; }

/* Single project / case study page */
.chac-project-facts {
    display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 18px 22px; margin-bottom: 30px;
    background: #f3eee0; border-radius: 8px; color: #4a4433;
}
.chac-project-facts span strong { color: #232323; }
.chac-project-hero { border-radius: 10px; margin-bottom: 30px; max-width: 100%; height: auto; }

@media (max-width: 991px) {
    .chac-card-grid { grid-template-columns: repeat(2, 1fr); }
    .chac-chip-grid { grid-template-columns: repeat(2, 1fr); }
    .chac-split { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
    .chac-band { padding: 55px 0; }
    .chac-card-grid, .chac-card-grid-team,
    .chac-chip-grid, .chac-statement-grid { grid-template-columns: 1fr; }
}

/* Content blocks dropped inside another band (e.g. the team cards under a heading)
   shouldn't add a second background or padding of their own. */
.chac-band .chac-band {
    padding: 0;
    background: none;
}
.chac-band .chac-band .chac-inner { padding: 0; }
.chac-more-wrap { text-align: center; margin: 45px 0 0; }
.chac-legal-links a { color: inherit; text-decoration: underline; }

/* Headings inside programme / project detail pages and standard page content:
   the ".dark" wrapper makes them white on these light backgrounds. */
.dark .service-detail h2, .dark .service-detail h3, .dark .service-detail h4,
.dark .pages-content > h2, .dark .pages-content > h3 {
    color: #232323;
}
.dark .service-detail h3 { margin: 28px 0 10px; font-size: 22px; }
.dark .service-detail .h3-title { color: #fff; }

/* Consent checkbox on the enquiry forms: the theme makes every input full-width. */
.chac-form-wrap .wpcf7-acceptance input[type="checkbox"] {
    width: auto;
    height: auto;
    display: inline-block;
    margin-right: 10px;
}
.chac-form-wrap .wpcf7-acceptance label,
.chac-form-wrap .wpcf7-list-item-label {
    text-transform: none;
    font-weight: 400;
    font-size: 15px;
    color: #4a4433;
}
.chac-form-wrap .wpcf7-list-item { margin: 0; }

/* Testimonial section: dark band like the theme's demo, whatever page it sits on. */
.testimonial-area.chac-testimonials {
    background: #1f2024;
}
.chac-wide .testimonial-area.chac-testimonials { padding-top: 80px; }

/* Testimonial section: full width edge to edge, with every card the same height and the
   author row sitting on the same line across all cards. */
.testimonial-area.chac-testimonials {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
.testimonial-area.chac-testimonials .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
}
.chac-testimonials .testimonial-active .slick-track { display: flex; }
.chac-testimonials .testimonial-active .slick-slide { height: auto; float: none; display: flex; }
.chac-testimonials .testimonial-active .slick-slide > div { display: flex; width: 100%; }
.chac-testimonials .single-testimonial {
    display: flex; flex-direction: column; width: 100%;
}
.chac-testimonials .single-testimonial p { flex: 1; }
.chac-testimonials .testi-author { margin-top: auto; }
.chac-testimonials .ta-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.chac-testimonials .single-testimonial { position: relative; }
.chac-testimonials .testimonial-active .qt-img { right: 30px !important; bottom: 70px; left: auto !important; width: auto !important; }

/* Close the 10px white ring Elementor puts around the homepage's shortcode sections, so they
   sit flush against the sections above and below. */
.elementor-top-section#projects .elementor-element-populated,
.elementor-top-section#testimonials .elementor-element-populated,
.elementor-top-section#partners .elementor-element-populated,
.elementor-top-section#partner-cta .elementor-element-populated,
.elementor-top-section#projects .elementor-widget-wrap,
.elementor-top-section#testimonials .elementor-widget-wrap {
    padding: 0;
}
.elementor-top-section#projects .elementor-widget,
.elementor-top-section#testimonials .elementor-widget {
    margin-bottom: 0;
}

/* Events page (blog-style cards): dark band, flyers shown in full rather than cropped. */
.blog-area.chac-events-blog { background: #2B2C30; }
.chac-events-blog .blog-thumb2 { aspect-ratio: 4 / 5; overflow: hidden; background: #202125; }
.chac-events-blog .blog-thumb2 a { display: block; height: 100%; }
.chac-events-blog .blog-thumb2 img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chac-events-blog .blog-content2 h4 { min-height: 0; }

/* Events page: every card stretches to the height of the tallest one in its row. */
.chac-events-blog .single-post2 {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}
.chac-events-blog .blog-content2 { flex: 1; }

/* Team section: a warm espresso tint (the events section beside it is cool charcoal), with a
   fine tan diamond lattice and two soft glows in the logo's orange and tan. Hairlines in tan
   top and bottom finish it off. */
.team-area {
    background-color: #241e15;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(227, 109, 33, .20), transparent 42%),
        radial-gradient(circle at 88% 86%, rgba(187, 166, 111, .18), transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23BBA66F' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M45 0 90 45 45 90 0 45Z'/%3E%3Cpath d='M0 0 90 90M90 0 0 90' stroke-opacity='.05'/%3E%3C/g%3E%3Ccircle cx='45' cy='45' r='2.2' fill='%23BBA66F' fill-opacity='.25'/%3E%3C/svg%3E"),
        linear-gradient(160deg, #2c241a 0%, #1b1610 100%);
    border-top: 1px solid rgba(187, 166, 111, .35);
    border-bottom: 1px solid rgba(187, 166, 111, .35);
}

/* Team cards on the homepage: the two headshots have different proportions, so crop both into
   the same portrait frame and the cards line up. */
.team-area .team-thumb img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Programmes carousel on the homepage: every card the same height, with the icon pinned to the
   bottom so the row lines up whatever the title length. */
.services-active .slick-track { display: flex; }
.services-active .slick-slide { height: auto; float: none; display: flex; }
.services-active .slick-slide > div { display: flex; width: 100%; }
.services-active .slick-slide > div > div[class*="col-"] { display: flex; width: 100%; }
.services-active .s-single-services {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.services-active .s-single-services .second-services-content { flex: 1; }
.services-active .s-single-services .services-icon { margin-top: 30px; }

/* "Who We Are" (About widget, style5): two overlapping photos, the second smaller and shorter,
   sitting over the lower-right corner of the first, with a badge over the lower-left. */
.chac-about-imgs {
    position: relative;
    padding: 0 0 70px;
}
.chac-about-imgs img {
    display: block;
    object-fit: cover;
}
.chac-about-img-main {
    width: 72%;
    height: 520px;
}
.chac-about-img-second {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 300px;
    border: 10px solid #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.chac-about-badge {
    position: absolute;
    left: 0;
    bottom: 100px;
    background: #B98A34;
    color: #fff;
    padding: 22px 28px;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.chac-about-badge span {
    display: block;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.chac-about-badge p {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.chac-about-btn {
    margin: 10px 0 35px;
}
@media (max-width: 991px) {
    .chac-about-imgs { margin-bottom: 50px; }
    .chac-about-img-main { height: 420px; }
    .chac-about-img-second { height: 240px; }
    .s-about-content.pl-60 { padding-left: 0; }
}
@media (max-width: 575px) {
    .chac-about-img-main { width: 80%; height: 340px; }
    .chac-about-img-second { width: 58%; height: 190px; border-width: 6px; }
    .chac-about-badge { bottom: 60px; padding: 14px 18px; min-width: 110px; }
    .chac-about-badge span { font-size: 28px; }
}
.dark .chac-about-overlap .about-content3 ul li { color: #232323; }
.chac-about-overlap .about-user { display: flex; align-items: center; gap: 18px; }
.chac-about-overlap .about-user .img img { width: 90px; height: auto; }

/* ---- Scroll effects (driven by assets/scroll-effects.js) ----
   One-time keyframe animations. Each one ends on the element's normal state, and the script
   removes the classes afterwards, so nothing is left shifted, hidden or transformed. */
.chac-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000;
    background: linear-gradient(90deg, #B98A34, #e27a3f);
    transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
/* Homepage only: stop the theme's generic WOW fade so it doesn't fight these effects */
html.chac-fx .wow { visibility: visible !important; animation-name: none !important; }

.fx-run {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
    animation-fill-mode: backwards;
    animation-delay: var(--fx-delay, 0ms);
}
.fx-run.fx-rise       { animation-name: chac-rise; }
.fx-run.fx-from-left  { animation-name: chac-from-left; }
.fx-run.fx-from-right { animation-name: chac-from-right; }
.fx-run.fx-from-br    { animation-name: chac-from-br; }
.fx-run.fx-pop        { animation-name: chac-pop; animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
.fx-run.fx-wipe-left  { animation-name: chac-wipe-left; animation-duration: 1.1s; }
.fx-run.fx-tilt-up    { animation-name: chac-tilt-up; transform-origin: 50% 100%; }
.fx-run.fx-blur-zoom  { animation-name: chac-blur-zoom; }
.fx-run.fx-unroll     { animation-name: chac-unroll; animation-duration: 1.1s; }
.fx-run.fx-focus      { animation-name: chac-focus; }

@keyframes chac-rise       { from { opacity: 0; transform: translateY(60px); } }
@keyframes chac-from-left  { from { opacity: 0; transform: translateX(-90px); } }
@keyframes chac-from-right { from { opacity: 0; transform: translateX(90px); } }
@keyframes chac-from-br    { from { opacity: 0; transform: translate(90px, 90px); } }
@keyframes chac-pop        { from { opacity: 0; transform: scale(.4); } }
@keyframes chac-wipe-left  { from { clip-path: inset(0 100% 0 0); transform: translateX(-30px); } to { clip-path: inset(0 0 0 0); } }
@keyframes chac-tilt-up    { from { opacity: 0; transform: perspective(900px) rotateX(28deg) translateY(70px); } }
@keyframes chac-blur-zoom  { from { opacity: 0; transform: scale(.82); filter: blur(12px); } }
@keyframes chac-unroll     { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes chac-focus      { from { opacity: 0; transform: scale(.92); filter: blur(14px); } }

/* ---- Buttons: brand green with white text -------------------------------------------------
   Applies to the resting state only (":not(:hover)"), so every hover effect stays exactly as
   the theme defines it. The outline "ghost" button is left alone because it sits on green bands. */
.btn:not(:hover):not(.chac-btn-ghost),
.dark .btn:not(:hover):not(.chac-btn-ghost),
.dark .header-three .btn.ss-btn:not(:hover),
.second-header-btn .btn:not(:hover),
.wpcf7-submit:not(:hover),
input[type="submit"]:not(:hover),
.elementor-button:not(:hover),
.comment-form .submit:not(:hover),
.searchform button:not(:hover),
.search-form button:not(:hover),
.search-submit:not(:hover) {
    background-color: #046240 !important;
    background-image: none !important;
    border-color: #046240 !important;
    color: #ffffff !important;
}
/* the little arrow block on the right of each button: a deeper green with a white arrow */
.btn:not(:hover):not(.chac-btn-ghost)::after {
    background: #034b31 !important;
    color: #ffffff !important;
}
/* on the green bands a green button would vanish, so give it a white outline there */
.chac-band-green .btn:not(:hover):not(.chac-btn-ghost) {
    border: 2px solid #ffffff !important;
}

/* ---- Gallery page ([chac_gallery], see mu-plugins/chac-site.php and assets/gallery.js) ---- */
.chac-gal a { text-decoration: none; }
.chac-gal-videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.chac-gal-video {
    position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px;
    background: #111; box-shadow: 0 14px 34px rgba(0,0,0,.35); transition: transform .35s ease, box-shadow .35s ease;
}
.chac-gal-video:hover, .chac-gal-video:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,0,0,.5); }
.chac-gal-thumb, .chac-gal-thumb img, .chac-gal-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.chac-gal-thumb video { opacity: 0; transition: opacity .4s ease; }
.chac-gal-video.is-previewing video { opacity: 1; }
.chac-gal-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%); pointer-events: none; }
.chac-gal-play {
    position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: #046240; color: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.22); transition: transform .3s ease, opacity .3s ease;
}
.chac-gal-play svg { margin-left: 3px; }
.chac-gal-video:hover .chac-gal-play { transform: scale(1.12); }
.chac-gal-video.is-previewing .chac-gal-play { opacity: 0; }
.chac-gal-dur {
    position: absolute; z-index: 2; top: 12px; right: 12px; padding: 4px 10px; border-radius: 20px;
    background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .5px;
}
.chac-gal-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px 18px 16px; color: #fff; text-align: left; }
.chac-gal-cap strong { display: block; color: #fff; font-size: 15px; line-height: 1.35; font-weight: 600; }
.chac-gal-cap em { display: block; margin-top: 4px; color: #ffffffcc; font-size: 12.5px; font-style: normal; line-height: 1.4; }

.chac-gal-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.chac-gal-chip {
    padding: 10px 26px; border: 2px solid #046240; border-radius: 40px; background: #fff; color: #046240;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: background .25s ease, color .25s ease;
}
.chac-gal-chip:hover { background: #e9f2ee; }
.chac-gal-chip.is-active, .chac-gal-chip.is-active:hover { background: #046240; color: #fff; }
.chac-gal-grid { columns: 3; column-gap: 20px; }
.chac-gal-photo {
    position: relative; display: block; margin: 0 0 20px; break-inside: avoid; overflow: hidden; border-radius: 12px;
    background: #ddd; box-shadow: 0 8px 24px rgba(0,0,0,.12); animation: chac-gal-in .5s ease both;
}
.chac-gal-photo.is-hidden { display: none; }
.chac-gal-photo img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.chac-gal-photo:hover img, .chac-gal-photo:focus-visible img { transform: scale(1.05); }
.chac-gal-photo .chac-gal-cap { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78)); padding-top: 46px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.chac-gal-photo:hover .chac-gal-cap, .chac-gal-photo:focus-visible .chac-gal-cap { opacity: 1; transform: none; }
@keyframes chac-gal-in { from { opacity: 0; transform: translateY(14px); } }

/* Lightbox */
.chac-lb {
    position: fixed; inset: 0; z-index: 100001; display: none; align-items: center; justify-content: center; flex-direction: column;
    background: rgba(10,10,12,.95);
}
.chac-lb.is-open { display: flex; }
.chac-lb-stage { display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 80vh; }
.chac-lb-stage img, .chac-lb-stage video { display: block; max-width: 90vw; max-height: 80vh; border-radius: 6px; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.chac-lb-cap { margin-top: 16px; max-width: 80vw; text-align: center; color: #fff; }
.chac-lb-cap strong { display: block; color: #fff; font-size: 16px; }
.chac-lb-cap span { display: block; margin-top: 4px; color: #ffffffb3; font-size: 13.5px; }
.chac-lb-x, .chac-lb-nav {
    position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.14);
    border-radius: 50%; width: 48px; height: 48px; font-size: 26px; line-height: 1; transition: background .25s ease;
}
.chac-lb-x:hover, .chac-lb-nav:hover { background: #046240; }
.chac-lb-x { top: 20px; right: 20px; }
.chac-lb-nav { top: 50%; margin-top: -24px; font-size: 20px; }
.chac-lb-prev { left: 20px; }
.chac-lb-next { right: 20px; }
.chac-lb.single .chac-lb-nav { display: none; }
html.chac-lb-lock { overflow: hidden; }

@media (max-width: 991px) {
    .chac-gal-videos { grid-template-columns: repeat(2, 1fr); }
    .chac-gal-grid { columns: 2; }
}
@media (max-width: 575px) {
    .chac-gal-videos { gap: 12px; }
    .chac-gal-grid { column-gap: 12px; }
    .chac-gal-photo { margin-bottom: 12px; }
    .chac-gal-photo .chac-gal-cap { opacity: 1; transform: none; }
    .chac-gal-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
    .chac-gal-cap { padding: 14px 12px 12px; }
    .chac-gal-cap strong { font-size: 13px; }
    .chac-gal-cap em { display: none; }
    .chac-lb-prev { left: 8px; } .chac-lb-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .chac-gal-photo, .chac-gal-video, .chac-gal-photo img, .chac-gal-play { animation: none; transition: none; }
}
html.chac-lb-lock #scrollUp { display: none !important; }

/* Gallery: dark throughout so no white shows between the page banner and the content. */
.chac-gal-photos.chac-band-dark { background: #26272b; }
.chac-gal-photos .chac-gal-chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.chac-gal-photos .chac-gal-chip:hover { border-color: #046240; background: rgba(4,98,64,.25); }
.chac-gal-photos .chac-gal-chip.is-active,
.chac-gal-photos .chac-gal-chip.is-active:hover { background: #046240; border-color: #046240; color: #fff; }
.chac-gal-photo { box-shadow: 0 10px 28px rgba(0,0,0,.4); background: #1c1d21; }

/* ---- Very small phones (about 400px and under) ----
   Long button labels wrap instead of running off the screen, and the 404 number shrinks to fit. */
@media (max-width: 400px) {
    .btn { white-space: normal; max-width: 100%; text-align: left; line-height: 1.35; }
    .btn::after { height: 100%; line-height: 1; display: flex; align-items: center; justify-content: center; }
    .error-page .error-code { font-size: 100px; line-height: 110px; }
}

/* ---- Homepage carousels on phones/tablets (see assets/mobile-carousels.js) ---- */
.services-active .slick-dots,
.testimonial-active .slick-dots {
    position: static; display: flex !important; justify-content: center; align-items: center; gap: 8px;
    width: 100%; margin: 22px 0 0; padding: 0; list-style: none;
}
.services-active .slick-dots li,
.testimonial-active .slick-dots li { margin: 0; width: auto; height: auto; }
.services-active .slick-dots li button,
.testimonial-active .slick-dots li button {
    display: block; width: 9px; height: 9px; padding: 0; border: 0; border-radius: 6px;
    background: rgba(255,255,255,.28); font-size: 0; line-height: 0; transition: width .3s ease, background .3s ease;
}
.services-active .slick-dots li button::before,
.testimonial-active .slick-dots li button::before { display: none; }
.services-active .slick-dots li.slick-active button,
.testimonial-active .slick-dots li.slick-active button { width: 24px; background: #E36D21; }

@media (max-width: 767px) {
    /* What We Do: each card takes most of the width so the next one shows at the edge */
    .services-active .slick-slide { width: 78vw; }
    .services-active .slick-list { padding-left: 4px; }
    .services-active .slick-slide > div > div[class*="col-"] { padding-left: 6px; padding-right: 6px; }

    /* What People Say: full-width card, comfortable padding and text */
    .testimonial-area.chac-testimonials .container { padding-left: 14px; padding-right: 14px; }
    .chac-testimonials .testimonial-active .slick-slide { margin: 0 6px 12px; }
    .chac-testimonials .single-testimonial p { padding: 14px 22px 26px; font-size: 16px; line-height: 26px; }
    .chac-testimonials .single-testimonial .review-icon { padding-left: 22px; }
    .chac-testimonials .testi-author { padding: 14px 22px; }
    .chac-testimonials .testimonial-active .qt-img { right: 18px !important; top: 34px; bottom: auto; transform: scale(.6); transform-origin: right top; }
    .chac-testimonials .ta-info span { max-width: 190px; }
}

@media (max-width: 767px) {
    /* Contact: the decorative dot patterns sat on top of the intro text */
    .contact-area .contact-bg-an-01,
    .contact-area .contact-bg-an-02 { display: none; }
    /* Events: "More Events" centred under the centred heading */
    .chac-events-blog .text-right { text-align: center; margin-bottom: 26px; }
}

/* Mobile menu button: vertically centred on the logo (the theme pulled it up from the row below by a
   fixed amount that left it 12-30px too low). The logo row is 88px tall, the button 40px. */
@media (max-width: 991px) {
    /* logo row is 52px; the button is 40px, so pull it up by (52 + 40) / 2 to centre it on the logo */
    .header-three .mean-container a.meanmenu-reveal { margin-top: -46px !important; }
}
@media (max-width: 991px) {
    /* compact header on phones and tablets: a smaller logo, less padding, and the same logo height
       everywhere so the menu button offset above always lines up */
    .header-three .logo img { display: block; height: 52px; width: auto; max-width: none; }
    .header-three .logo, .header-three .sticky-menu .logo { line-height: 0 !important; }
    .header-three .logo a.navbar-brand { display: block; padding: 0; margin: 0; }
    .header-three .menu-area { padding: 10px 0 !important; }
    .header-three .menu-area.sticky-menu { padding: 6px 0 !important; }
}
@media (max-width: 767px) {
    .chac-events-blog .meta-info li { font-size: 13px; }
}

/* ---- Primary (full-colour) logo on the dark header and footer ----
   The logo's dark-green lettering would disappear on charcoal, so it sits on a white disc. */
.header-three .logo img,
.footer-widget .f-widget-title img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 4px;
}
.footer-widget .f-widget-title img { width: 110px; height: 110px; }

/* ---- Get in touch: the logo's orange (#E36D21) ---- */
.dark .contact-area h2,
.dark .contact-area h5,
.dark .contact-area .section-title p,
.dark .contact-area .contact-info li,
.dark .contact-area .contact-info li a { color: #1c1c1c; }
.dark .contact-area .contact-info li a { text-decoration: underline; }
.contact-area .contact-info li i { color: #fff; }
.contact-area .section-title h5::before { filter: brightness(0); opacity: .85; }

/* Scroll-to-top: brand green so it stays visible over the orange Get in touch section */
#scrollUp { background: #046240 !important; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
#scrollUp:hover { background: #034b31 !important; }

/* ---- Support Us: PayPal donation + QR ---- */
.chac-donate-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; max-width: 860px; margin: 0 auto; }
.chac-donate-copy { flex: 1 1 320px; text-align: left; }
.chac-donate-copy h2 { margin-bottom: 14px; }
.chac-donate-copy .btn { margin-top: 10px; }
.chac-donate-qr { flex: 0 0 auto; text-align: center; }
.chac-donate-qr img { display: block; width: 240px; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.chac-donate-qr span { display: block; margin-top: 10px; font-size: 14px; color: #555; }
@media (max-width: 767px) { .chac-donate-copy { text-align: center; } }

/* Footer background: the theme option's stored image URL is a PHP-serialized value inside
   castel_data (Redux), so it can't be safely string-replaced without re-serializing the whole
   option. Overriding it here instead, with a root-relative path so it works on any domain. */
.footer-bg {
    background-image: url("/wp-content/uploads/2026/09/chac-footer-bg.png") !important;
}

/* Programmes carousel: the theme's large faint decorative icon behind each card
   (.services-icon2) is absolutely positioned, but this card is a plain static element,
   so without its own positioning context that icon anchors to the whole 10,000px-wide
   slick track instead of the individual card - landing far off-screen. Anchor it here. */
.services-active .s-single-services {
    position: relative;
}
/* Keep the giant faint icon fully inside its own card rather than relying on the card's
   overflow:hidden to clip it - slick.js clones slides for its loop/transition mechanics,
   and the clipping doesn't reliably apply to those clones, so the icon can spill into the
   gap between cards. Bringing it fully inside the box sidesteps that entirely. */
.services-active .services-icon2 {
    right: 10px;
    bottom: 20px;
    /* The base theme sets z-index:-1 here (fine when this box escaped to a distant ancestor,
       which is what we just fixed by making the card position:relative). Now that it's
       contained within its own card, z-index:-1 makes it paint BEHIND the card's own solid
       background - i.e. completely invisible, whatever its color/opacity. Bring it forward. */
    z-index: 1;
}

/* Programmes carousel: before slick.js finishes initializing, the 12 cards briefly show in
   their raw, full-width grid layout (each one a quarter of the row) before JS narrows them
   into the 3-across slider - a "flash of wide boxes" on page load. Hide it until slick has
   set up, then fade in once ready, so visitors never see the un-styled moment. */
.services-active:not(.slick-initialized) {
    height: 380px;
    overflow: hidden;
    opacity: 0;
}
.services-active.slick-initialized {
    opacity: 1;
    transition: opacity .2s ease;
}