/********** Template CSS **********/
:root {
    --bs-tertiary: #5D6B7A;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-medium {
    font-weight: 600 !important;
}

.fw-normal {
    font-weight: 400 !important;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Top Bar ***/
.top-bar {
    height: 90px;
    padding: 0 90px;
}

.top-bar h6 {
    letter-spacing: 1px;
}


/*** Nav Bar ***/
.nav-bar {
    padding: 0 90px;
    transition: .5s;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 20px 0;
    color: var(--bs-dark);
    font-size: 18px;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-white);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 20px;
        border-top: 1px solid var(--bs-white);
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header Carousel ***/
.header-carousel {
    position: relative;
    background: url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.header-carousel .carousel-img {
    position: relative;
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    width: 45px;
    height: 45px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--bs-dark);
    background: var(--bs-primary);
}

.page-header {
    background: url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bs-tertiary);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--bs-primary);
}

.page-header .breadcrumb-item.active {
    color: var(--bs-dark);
}


/*** Video ***/
.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 26px;
    border: none;
    outline: none !important;
    padding: 18px 20px 20px 28px;
    background: var(--bs-dark);
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: var(--bs-dark);
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: var(--bs-dark);
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: -1px;
    border-left: 16px solid var(--bs-white);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: var(--bs-white);
    background: #000000;
    opacity: 1;
}


/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.section-title::before {
    position: absolute;
    content: "";
    width: calc(100% + 80px);
    height: 0px;
    top: 5px;
    left: -40px;
    border-top: 2px solid var(--bs-primary);
    z-index: -1;
}

.section-title::after {
    position: absolute;
    content: "";
    width: calc(100% + 120px);
    height: 0px;
    bottom: 6px;
    left: -60px;
    border-bottom: 2px solid var(--bs-primary);
    z-index: -1;
}

.section-title.text-start::before {
    width: calc(100% + 40px);
    left: 0;
}

.section-title.text-start::after {
    width: calc(100% + 60px);
    left: 0;
}


/*** About ***/
.about-img {
    position: relative;
}

.about-img::before,
.about-img::after {
    position: absolute;
    content: "";
    width: 33%;
    height: 90px;
    background: var(--bs-white);
}

.about-img::before {
    top: 0px;
    left: 0px;
}

.about-img::after {
    right: 0px;
    bottom: 0px;
}


/* The corner notches are painted in the page background so the image reads as
   cut, not as covered. The template hard-coded white, which on the light-blue
   sections of the home page put two white blocks on top of the photograph. */
.bg-light .about-img::before,
.bg-light .about-img::after {
    background: var(--bs-light);
}

.bg-secondary .about-img::before,
.bg-secondary .about-img::after {
    background: var(--bs-secondary);
}


/*** Service ***/
.service-title {
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.service-item {
    overflow: hidden;
}

.service-item .btn-square {
    width: 65px;
    height: 65px;
}

/* The template dressed every link inside a service card as its "read more"
   rule: uppercased, shrunk to 14px, and trailed by a 500%-wide gold line. No
   page here uses that pattern, so it only ever fired on real content — it
   uppercased and shrank every CTA button and hung a gold line in the
   whitespace beside it, and on the contact cards it did the same to the phone
   number, the email address and "book a time". It is now opt-in. */
.service-item a.more-link {
    position: relative;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    transition: .5s;
}

.service-item a.more-link::after {
    position: absolute;
    content: "";
    width: 500%;
    height: 0;
    left: 100%;
    bottom: 3px;
    margin-left: 10px;
    border-bottom: 2px solid var(--bs-primary);
}


/*** Donation ***/
.donation-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.donation-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.donation-item .donation-progress {
    width: 80px;
}

.donation-item .progress .progress-bar {
    height: 20px;
    overflow: visible;
    transition: 3s;
}


/*** Banner ***/
.banner .banner-inner {
    position: relative;
    background: url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.banner .banner-inner::before,
.banner .banner-inner::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
}

.banner .banner-inner::before {
    top: 0;
    left: 0;
    border-top: 150px solid var(--bs-primary);
    border-right: 150px solid transparent;
}

.banner .banner-inner::after {
    right: 0;
    bottom: 0;
    border-bottom: 150px solid var(--bs-secondary);
    border-left: 150px solid transparent;
}


/*** Event ***/
.event-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.event-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}


/*** Donate ***/
.donate .donate-text {
    position: relative;
    background: url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.donate .donate-text::before,
.donate .donate-text::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
}

.donate .donate-text::before {
    top: 0;
    left: 0;
    border-top: 150px solid var(--bs-primary);
    border-right: 150px solid transparent;
}

.donate .donate-text::after {
    right: 0;
    bottom: 0;
    border-bottom: 150px solid var(--bs-secondary);
    border-left: 150px solid transparent;
}

.donate .donate-form .form-control {
    border: none;
    background: rgba(255, 255, 255, .5);
}

.donate .donate-form .btn-group {
    display: flex;
}

.donate .donate-form .btn-group .btn {
    margin: 0;
    padding: 0;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--bs-tertiary);
    background: rgba(255, 255, 255, .5);
}

.donate .donate-form .btn-group .btn-check:checked+.btn {
    border: none;
    background: var(--bs-white);
}



/*** Team ***/
.team-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.team-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.team-item .team-detail span {
    letter-spacing: 2px;
}



/*** Testimonial ***/
.testimonial-title {
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.testimonial-img {
    position: relative;
    padding: 45px 0 45px 90px;
}

.testimonial-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: calc(50% + 45px);
    height: 100%;
    background: var(--bs-primary);
    z-index: -1;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.testimonial-carousel .owl-prev,
.testimonial-carousel .owl-next {
    width: 45px;
    height: 45px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--bs-white);
    background: var(--bs-secondary);
    transition: .5s;
}

.testimonial-carousel .owl-prev:hover,
.testimonial-carousel .owl-next:hover {
    color: var(--bs-secondary);
    background: var(--bs-white);
}

@media (max-width: 768px) {
    .testimonial-carousel .owl-nav {
        top: 6.3rem;
    }
}



/*** Footer ***/
/* The template set every word in the footer to --bs-tertiary (#5D6B7A) on a
   #06192C plate — about 2.6:1, well under the 4.5:1 minimum, which is why the
   footer read as empty. Body copy and links are now near-white; headings are
   gold; the whole plate is a flat dark navy rather than a photograph, which is
   how the reference site handles it too. */
.footer {
    color: rgba(255, 255, 255, .78);
    background: var(--aica-ink, #050F1D);
}

.footer p,
.footer li {
    color: rgba(255, 255, 255, .78);
}

.footer h4,
.footer h5 {
    font-size: 19px;
    letter-spacing: .3px;
    color: var(--bs-primary);
}

.footer .footer-contact i {
    width: 18px;
    color: var(--bs-primary);
}

.footer a:not(.btn) {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .3s ease;
}

.footer a:not(.btn):hover {
    color: var(--bs-primary);
}

/* The chevron used to be a ::before on an inline-block, so a link that wrapped
   put its second line underneath the arrow. Flex with a fixed-width marker
   keeps every wrapped line aligned with the first word instead. */
.footer .btn.btn-link {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 9px;
    padding: 0;
    text-align: left;
    line-height: 1.45;
    color: rgba(255, 255, 255, .78);
    font-weight: normal;
    /* Not `capitalize`: it rewrote "File a complaint" as "File A Complaint". */
    text-transform: none;
    transition: color .3s ease;
}

.footer .btn.btn-link::before {
    flex-shrink: 0;
    content: "\f105";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bs-primary);
    transition: transform .3s ease;
}

.footer .btn.btn-link:hover {
    color: var(--bs-primary);
    /* The template widened letter-spacing on hover, which reflowed the column
       and nudged every link below it. */
    letter-spacing: normal;
    box-shadow: none;
}

.footer .btn.btn-link:hover::before {
    transform: translateX(3px);
}

.footer .footer-social .btn-square {
    border-radius: 50%;
}

.footer .copyright {
    margin-top: 10px;
    padding-top: 28px;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer .copyright a {
    color: var(--bs-primary);
}

.footer .copyright a:hover {
    color: var(--bs-white);
}


/********** All India Colorblindness Association — brand layer **********/
/* Everything below is additive: it dresses the template in the association's
   own identity (logo lockup, navy/gold palette from img/logo.png) and adds the
   few components the merged content needs that the template did not ship with
   — the milestone timeline, the FAQ accordion skin and the colour-vision
   simulation strip. No template rule is overwritten. */

:root {
    --aica-navy: #0A2E4F;
    --aica-gold: #D1A017;
    --aica-blue: #4A8FC7;   /* the pale ring of dots in the logo */
    --aica-red: #D62828;    /* the two accent dots at the centre of the eye */
    --aica-green: #2E9E3E;
    --aica-ink: #050F1D;   /* the footer plate */
}


/*** Logo lockup ***/
/* The emblem's pupil is the same navy as the top bar, so the mark sits on a
   white disc — otherwise the middle of the logo disappears into the bar. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    text-decoration: none;
}

.brand .brand-mark {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    padding: 5px;
    border-radius: 50%;
    background: var(--bs-white);
    box-shadow: 0 0 0 2px rgba(209, 160, 23, .55);
}

.brand .brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand .brand-name {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: .2px;
    color: var(--bs-primary);
}

.brand .brand-tagline {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .75);
}

@media (max-width: 991.98px) {
    .brand {
        justify-content: center;
    }

    .brand .brand-name {
        font-size: 17px;
    }
}

/* Footer sits on a dark plate, so the wordmark is dropped and the emblem is
   paired with white type instead. */
.footer .brand .brand-name {
    color: var(--bs-primary);
}


/*** Nav bar — eight items instead of six ***/
@media (min-width: 992px) and (max-width: 1399.98px) {
    .top-bar {
        padding: 0 30px;
    }

    .nav-bar {
        padding: 0 30px;
    }

    .navbar .navbar-nav .nav-link {
        margin-right: 18px;
        font-size: 15px;
    }
}

@media (min-width: 1400px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 24px;
        font-size: 16px;
    }
}

/* The template's 90px gutters are desktop furniture. Below lg they pushed the
   bar wider than the phone and took the whole page's horizontal scroll with
   them, so the brand, the headline and the ticker were all cut off. */
@media (max-width: 991.98px) {
    .top-bar {
        height: auto;
        padding: 14px 16px;
    }

    .nav-bar {
        padding: 0;
    }
}

/* Sticking the bar to the top drops the gutters. This used to be an inline
   style written by main.js on every scroll event, which then beat the media
   queries above and put the 90px back on laptops and phones. */
.nav-bar.fixed-top {
    padding: 0;
}


/*** Dropdown menus ***/
/* Nine links, several of them four words long, in a 160px column that let every
   label wrap: the old menu was a ragged tower taller than the viewport. Labels
   are now short enough to sit on one line and the fields are laid out in two
   columns with the icons their cards use, so the menu is scanned, not read. */
.navbar .dropdown-menu {
    padding: 10px;
    border: 0;
    border-top: 3px solid var(--bs-primary);
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(6, 25, 44, .18);
}

.navbar .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--bs-secondary);
    white-space: normal;
}

.navbar .dropdown-menu .dropdown-item i {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--bs-secondary);
    background: rgba(209, 160, 23, .2);
    transition: .3s;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--bs-white);
    background: var(--bs-secondary);
}

.navbar .dropdown-menu .dropdown-item:hover i,
.navbar .dropdown-menu .dropdown-item:focus i {
    color: var(--bs-dark);
    background: var(--bs-primary);
}

/* The two links that are not one of the seven fields — the index page and the
   rights table — sit in their own band at the top instead of one of them being
   bolded in the middle of the list for no stated reason. */
.dropdown-mega__head {
    display: grid;
    gap: 8px;
}

.dropdown-mega__all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-secondary);
    background: var(--bs-white);
    border-left: 3px solid var(--bs-primary);
    text-decoration: none;
    transition: .3s;
}

.dropdown-mega__all i {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--bs-primary);
    transition: .3s;
}

.dropdown-mega__all:hover {
    color: var(--bs-white);
    background: var(--bs-secondary);
}

.dropdown-mega__all:hover i {
    color: var(--bs-primary);
}

.dropdown-mega__label {
    margin: 14px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bs-tertiary);
}

@media (min-width: 992px) {
    .navbar .dropdown-menu {
        min-width: 240px;
    }

    .navbar .dropdown-mega {
        width: 460px;
        padding: 14px;
    }

    .navbar .dropdown-mega .dropdown-item {
        white-space: nowrap;
    }

    .dropdown-mega__head,
    .dropdown-mega__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dropdown-mega__grid {
        gap: 2px 10px;
    }
}


/*** Emergency / helpline strip ***/
.helpline {
    background: var(--aica-red);
    color: var(--bs-white);
}

.helpline a {
    color: var(--bs-white);
    font-weight: 700;
    text-decoration: underline;
}

.helpline a:hover {
    color: var(--bs-primary);
}


/*** Milestone timeline (Our Journey) ***/
.timeline {
    position: relative;
    padding-left: 34px;
}

.timeline::before {
    position: absolute;
    content: "";
    top: 6px;
    bottom: 6px;
    left: 9px;
    width: 2px;
    background: var(--bs-primary);
}

.timeline-item {
    position: relative;
    padding-bottom: 34px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    position: absolute;
    content: "";
    top: 6px;
    left: -34px;
    width: 20px;
    height: 20px;
    border: 4px solid var(--bs-primary);
    border-radius: 50%;
    background: var(--bs-white);
}

.timeline-item .timeline-year {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 12px;
    font-weight: 700;
    color: var(--bs-dark);
    background: var(--bs-primary);
}


/*** FAQ accordion ***/
.accordion .accordion-item {
    margin-bottom: 12px;
    border: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
}

.accordion .accordion-button {
    font-weight: 600;
    color: var(--bs-dark);
    background: var(--bs-light);
    box-shadow: none;
}

.accordion .accordion-button:not(.collapsed) {
    color: var(--bs-dark);
    background: var(--bs-primary);
}

.accordion .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}


/*** Fact / awareness cards ***/
.fact-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.fact-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.fact-item .fact-num {
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    color: var(--bs-primary);
}


/*** Colour-vision simulation strip ***/
.sim-item img {
    display: block;
    width: 100%;
}

.sim-item .sim-label {
    padding: 10px 15px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bs-white);
    background: var(--bs-secondary);
}


/*** Gallery ***/
.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    transition: .5s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item::after {
    position: absolute;
    content: "";
    inset: 0;
    background: var(--bs-secondary);
    opacity: 0;
    transition: .5s;
}

.gallery-item:hover::after {
    opacity: .35;
}


/*** Floating WhatsApp / call actions ***/
.floating-actions {
    position: fixed;
    right: 30px;
    bottom: 90px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/*** Legibility of text set over imagery ***/
/* Rule for this site: type never sits directly on artwork. Every surface that
   carries a photograph or a texture behind text gets a scrim first, so the
   copy stays readable even if the picture behind it is swapped for a darker or
   busier one later. */
.page-header,
.header-carousel {
    background: linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
                url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.banner .banner-inner,
.service-title {
    background: linear-gradient(rgba(6, 25, 44, .88), rgba(6, 25, 44, .88)),
                url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.donate .donate-text {
    background: linear-gradient(rgba(238, 243, 248, .88), rgba(238, 243, 248, .88)),
                url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

/* A caption laid over a photograph: dark gradient from the bottom up. */
.media-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 20px 16px;
    color: var(--bs-white);
    background: linear-gradient(rgba(6, 25, 44, 0), rgba(6, 25, 44, .9));
}

.media-cap h5,
.media-cap p {
    color: var(--bs-white);
    margin-bottom: 0;
}


/*** Partners — name and logo together ***/
.partner-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.partner-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
}

.partner-mark {
    height: 96px;
}

.partner-logo {
    max-height: 96px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}


/*** News & updates ***/
.news-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.news-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
}

.news-item .news-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 2px 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bs-dark);
    background: var(--bs-primary);
}

.news-item .news-source {
    font-size: 14px;
    color: var(--bs-tertiary);
}


/*** Text-over-image safety ***/
/* Anywhere type sits on a photograph or texture, the image carries a scrim so
   the text keeps its contrast no matter which picture is dropped in behind it.
   Without these the white headings on .banner-inner sat straight on the pale
   paper texture and disappeared. */

.page-header {
    background:
        linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
        url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.header-carousel {
    background:
        linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)),
        url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.banner .banner-inner {
    background:
        linear-gradient(rgba(6, 25, 44, .88), rgba(6, 25, 44, .88)),
        url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.donate .donate-text {
    background:
        linear-gradient(rgba(238, 243, 248, .86), rgba(238, 243, 248, .86)),
        url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

.service-title {
    background:
        linear-gradient(rgba(6, 25, 44, .86), rgba(6, 25, 44, .86)),
        url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

/* Captions and badges laid directly over a photograph. */
.media-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 20px 16px;
    color: var(--bs-white);
    background: linear-gradient(rgba(6, 25, 44, 0), rgba(6, 25, 44, .88));
}

.media-caption h5,
.media-caption p {
    color: var(--bs-white);
    margin: 0;
}


/*** Partners ***/
.partner-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    transition: .5s;
}

.partner-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
}

.partner-item .partner-mark {
    height: 90px;
}

.partner-item .partner-logo {
    max-height: 90px;
    max-width: 100%;
    object-fit: contain;
}

.partner-item span {
    font-size: 14px;
    color: var(--bs-tertiary);
}


/*** Latest updates ***/
.update-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    border-left: 4px solid var(--bs-primary);
    transition: .5s;
}

.update-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
}

.update-item .update-date {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--bs-secondary);
    font-weight: 600;
}

.update-item .update-source {
    font-size: 13px;
    color: var(--bs-tertiary);
}

.update-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.update-live::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--aica-green);
    box-shadow: 0 0 0 0 rgba(46, 158, 62, .7);
    animation: update-pulse 2s infinite;
}

@keyframes update-pulse {
    70% { box-shadow: 0 0 0 9px rgba(46, 158, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 158, 62, 0); }
}


/*** Running news ticker ***/
.ticker {
    display: flex;
    align-items: stretch;
    padding: 0;
    background: var(--bs-dark);
    border-top: 3px solid var(--bs-primary);
    overflow: hidden;
}

.ticker__label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 0 22px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-dark);
    background: var(--bs-primary);
}

.ticker__live {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--aica-red);
    box-shadow: 0 0 0 0 rgba(214, 40, 40, .8);
    animation: ticker-pulse 1.8s infinite;
}

@keyframes ticker-pulse {
    70% { box-shadow: 0 0 0 10px rgba(214, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}

.ticker__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 60s linear infinite;
}

/* Stop on hover or keyboard focus, so a headline can be read and clicked
   rather than chased across the strip. */
.ticker:hover .ticker__track,
.ticker__track:focus-within {
    animation-play-state: paused;
}

.ticker__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    white-space: nowrap;
    font-size: 15px;
    color: var(--bs-white);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, .12);
    transition: .3s;
}

.ticker__item:hover,
.ticker__item:focus {
    color: var(--bs-primary);
}

.ticker__tag {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--bs-dark);
    background: var(--bs-primary);
}

.ticker__all {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-white);
    background: var(--bs-secondary);
    text-decoration: none;
    transition: .3s;
}

.ticker__all:hover {
    color: var(--bs-dark);
    background: var(--bs-primary);
}

@media (max-width: 767.98px) {
    .ticker__label span,
    .ticker__all {
        display: none;
    }
    .ticker__label {
        padding: 0 14px;
    }
    .ticker__item {
        padding: 12px 18px;
        font-size: 14px;
    }
}

/* A reader who has asked for less motion gets a plain scrollable strip. */
@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
    .ticker__viewport {
        overflow-x: auto;
    }
    .ticker__group:nth-child(2) {
        display: none;
    }
}


/*** News cards ***/
.news-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    border-top: 3px solid var(--bs-primary);
    transition: .5s;
}

.news-item--own {
    border-top-color: var(--bs-secondary);
}

.news-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
}

.news-item .news-date {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bs-tertiary);
}

.news-item .news-more {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bs-secondary);
    text-decoration: none;
}

.news-item .news-more:hover {
    color: var(--bs-primary);
}

.news-item .news-source {
    font-size: 13px;
    color: var(--bs-tertiary);
}

/* Clicking a headline freezes the strip before the page changes — otherwise
   the line keeps sliding during navigation and the click reads as a miss. */
.ticker.is-stopped .ticker__track {
    animation-play-state: paused;
}


/*** Cards that are themselves links ***/
/* The template colours every <a> with the brand gold. On a card whose whole
   body is the link that turned the paragraph text gold and made it unreadable,
   so text inside a linked card keeps normal body colours and only the heading
   reacts to hover. */
a.event-item,
a.service-item,
a.fact-item {
    color: var(--bs-tertiary);
}

a.event-item h4,
a.event-item h5,
a.event-item h6,
a.service-item h4,
a.service-item h5,
a.service-item h6,
a.fact-item h5,
a.fact-item h6 {
    color: var(--bs-dark);
    transition: .3s;
}

a.event-item:hover h4,
a.event-item:hover h5,
a.event-item:hover h6,
a.service-item:hover h5,
a.service-item:hover h6,
a.fact-item:hover h5,
a.fact-item:hover h6 {
    color: var(--bs-secondary);
}


/*** Image slots ***/
/* Where a topic has no honest photograph yet, the layout still holds its shape
   and says plainly what belongs there — better than borrowing a picture of
   something else, and it tells whoever supplies the photo what is wanted. */
.img-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 24px;
    text-align: center;
    color: var(--bs-secondary);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(209, 160, 23, .05) 0 12px,
            transparent 12px 24px
        ),
        var(--bs-light);
    border: 2px dashed var(--bs-primary);
}

.img-slot i {
    font-size: 30px;
    color: var(--bs-primary);
}

.img-slot strong {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.img-slot span {
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.4;
    color: var(--bs-tertiary);
}

.img-slot .img-slot__size {
    font-size: 12px;
    letter-spacing: .5px;
    opacity: .7;
}


/*** Soft tints ***/
/* A run of white sections reads as unfinished. These are barely-there washes of
   the two brand colours, used to give long pages a rhythm without introducing
   a third colour. */
.bg-tint {
    background: rgba(209, 160, 23, .06);
    --field-medallion-ground: #F7F1E2;
}

.bg-tint-blue {
    background: rgba(10, 46, 79, .05);
    --field-medallion-ground: #F2F4F7;
}

.section-title.bg-tint,
.section-title.bg-tint-blue {
    background: transparent !important;
}

/* The label masks the two rules drawn behind it, so on a tinted section it has
   to carry that tint rather than white. */
.bg-tint .section-title {
    background: #F7F1E2 !important;
}

.bg-tint-blue .section-title {
    background: #F2F4F7 !important;
}


/*** Certificate note on a training card ***/
.cert-note {
    display: block;
    padding: 14px 16px;
    border-left: 3px solid var(--bs-primary);
    background: var(--bs-white);
}

.cert-note__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-secondary);
}

.cert-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bs-dark);
}

.cert-note span {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bs-tertiary);
}


/*** Details still to be supplied ***/
.detail-slot {
    padding: 18px;
    text-align: center;
    border: 2px dashed var(--bs-primary);
    background: var(--bs-white);
}

.detail-slot strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bs-secondary);
}

.detail-slot span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--bs-tertiary);
}


/* ══════════════════════ Page header, rebuilt ═══════════════════════════ */
/* The old header was a pale paper texture with dark type on it — on every
   interior page that read as an empty white band. It now carries a photograph
   under a navy wash deep enough for white text to sit on safely whichever
   picture is used, with the brand's corner cuts for shape. */
.page-header {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(rgba(10, 46, 79, .86), rgba(6, 25, 44, .93)),
        url(../img/hdr-about.jpg) center center / cover no-repeat;
}

.page-header::before,
.page-header::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    pointer-events: none;
}

.page-header::before {
    top: 0;
    left: 0;
    border-top: 120px solid var(--bs-primary);
    border-right: 120px solid transparent;
}

.page-header::after {
    right: 0;
    bottom: 0;
    border-bottom: 120px solid rgba(209, 160, 23, .55);
    border-left: 120px solid transparent;
}

.page-header > .container {
    position: relative;
    z-index: 2;
}

.page-header h1 {
    color: var(--bs-white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.page-header p {
    color: rgba(255, 255, 255, .88) !important;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    color: var(--bs-primary);
}

.page-header .breadcrumb-item a:hover {
    color: var(--bs-white);
}

.page-header .breadcrumb-item.active {
    color: var(--bs-white);
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
}

/* A thin gold rule under the header ties it to the nav above it. */
.page-header {
    border-bottom: 4px solid var(--bs-primary);
}

/* Per-page photograph. */
.page-header--about    { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-about.jpg); }
/* img/hdr-mission.jpg is not a photograph — the file is a contact sheet of
   eight thumbnails with white gutters, so the header rendered as a tiled grid.
   Until a real 1600x520 photograph replaces it this page borrows the About
   header it already sits under in the breadcrumb. */
.page-header--mission  { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-about.jpg); }
.page-header--work     { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-work.jpg); }
.page-header--training { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-training.jpg); }
.page-header--help     { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-help.jpg); }
.page-header--news     { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-news.jpg); }
.page-header--support  { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-support.jpg); }
.page-header--contact  { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-contact.jpg); }
.page-header--director { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-director.jpg); }
.page-header--topic    { background-image: linear-gradient(rgba(10,46,79,.86), rgba(6,25,44,.93)), url(../img/hdr-topic.jpg); }


/* ══════════════════════ Motion ═══════════════════════════════════════ */
/* The template shipped with one animation — a fade. Everything arrived the
   same way, which reads as nothing moving at all. These give a page a sense of
   direction as it is read, and all of them stop for prefers-reduced-motion. */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(38px); }
    to   { opacity: 1; transform: none; }
}

@keyframes slideInLeft2 {
    from { opacity: 0; transform: translateX(-44px); }
    to   { opacity: 1; transform: none; }
}

@keyframes slideInRight2 {
    from { opacity: 0; transform: translateX(44px); }
    to   { opacity: 1; transform: none; }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(.9); }
    60%  { transform: scale(1.02); }
    to   { opacity: 1; transform: none; }
}

.riseIn        { animation-name: riseIn; }
.slideInLeft2  { animation-name: slideInLeft2; }
.slideInRight2 { animation-name: slideInRight2; }
.popIn         { animation-name: popIn; }

/* Hover life on the card families. */
.service-item,
.event-item,
.team-item,
.donation-item,
.fact-item {
    transition: transform .4s ease, box-shadow .4s ease;
}

.service-item:hover,
.event-item:hover,
.team-item:hover,
.donation-item:hover,
.fact-item:hover {
    transform: translateY(-6px);
}

.btn {
    transition: transform .25s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-square:hover,
.btn-sm-square:hover,
.btn-lg-square:hover {
    transform: none;
}

/* Icon tiles turn over when the card they sit in is hovered. */
.service-item .btn-square,
.service-item .btn-lg-square,
.event-item .btn-lg-square {
    transition: transform .5s ease, background-color .3s ease;
}

.service-item:hover .btn-square,
.service-item:hover .btn-lg-square,
.event-item:hover .btn-lg-square {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .riseIn, .slideInLeft2, .slideInRight2, .popIn,
    .wow, .animated {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .service-item:hover, .event-item:hover, .team-item:hover,
    .donation-item:hover, .fact-item:hover, .btn:hover {
        transform: none;
    }
}


/* ══════════════════════ Scrolling reviews ════════════════════════════ */
/* A carousel makes a reader wait for the next quote; a slow marquee lets them
   read at their own pace and shows there are many, not three. */
.reviews {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

.reviews__track {
    display: flex;
    width: max-content;
    animation: reviews-scroll 70s linear infinite;
}

.reviews:hover .reviews__track,
.reviews__track:focus-within {
    animation-play-state: paused;
}

@keyframes reviews-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.reviews__group {
    display: flex;
    flex-shrink: 0;
}

.review-card {
    flex: 0 0 auto;
    width: 380px;
    margin-right: 24px;
    padding: 28px;
    background: var(--bs-white);
    border-top: 3px solid var(--bs-primary);
    box-shadow: 0 0 30px rgba(0, 0, 0, .06);
}

.review-card__stars {
    margin-bottom: 12px;
    font-size: 14px;
}

.review-card__quote {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--bs-dark);
}

.review-card__who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-card__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-weight: 700;
    color: var(--bs-dark);
    background: var(--bs-primary);
}

.review-card__who strong {
    display: block;
    font-size: 15px;
    color: var(--bs-dark);
}

.review-card__who span {
    font-size: 13px;
    color: var(--bs-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .reviews__track { animation: none; }
    .reviews { overflow-x: auto; }
    .reviews__group:nth-child(2) { display: none; }
}

@media (max-width: 575.98px) {
    .review-card { width: 290px; }
}


/*** Sourced reference data ***/
/* The rules table is the most useful thing on the site, so it is styled to be
   scanned rather than read: verdict first, detail second, source always. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bs-white);
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
}

.data-table th,
.data-table td {
    padding: 18px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(10, 46, 79, .1);
}

.data-table thead th {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-dark);
    background: var(--bs-primary);
    border-bottom: none;
    white-space: nowrap;
}

.data-table tbody th {
    width: 22%;
    min-width: 190px;
    color: var(--bs-dark);
    background: rgba(10, 46, 79, .04);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table td {
    color: var(--bs-tertiary);
}

.verdict {
    display: inline-block;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
    color: var(--bs-white);
}

.verdict--yes   { background: var(--aica-green); }
.verdict--no    { background: var(--aica-red); }
.verdict--maybe { background: var(--bs-primary); color: var(--bs-dark); }

/* Every claim carries the place it came from. */
.data-src {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-secondary);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 46, 79, .25);
}

.data-src:hover {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.alert-note {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(209, 160, 23, .1);
    border-left: 4px solid var(--bs-primary);
}

.alert-note i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 20px;
    color: var(--bs-primary);
}

.alert-note div {
    color: var(--bs-tertiary);
}

.alert-note strong {
    color: var(--bs-dark);
}

.law-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    border-left: 4px solid var(--bs-secondary);
    transition: transform .4s ease, box-shadow .4s ease;
}

.law-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
}

.law-item__year {
    display: inline-block;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--bs-dark);
    background: var(--bs-primary);
}

@media (max-width: 767.98px) {
    .data-table th,
    .data-table td {
        padding: 14px;
        font-size: 14px;
    }
}


/* ══════════════════════ The seven fields ═════════════════════════════ */
/* Seven does not divide into a four-column grid: the card wall this replaces
   left a hole in its last row, and five of its seven cards were dashed
   "photograph needed" boxes, so the section that names the whole purpose of the
   association read as the least finished thing on the page.
   Circular medallions, centred, take four then three — the 4+3 split reads as
   deliberate symmetry instead of a remainder — and they carry an icon rather
   than a photograph we do not have. The form follows the reference site's
   "Our Initiatives" strip; the navy and gold are ours. */

.fields-medallions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 54px;
}

.fields-medallions > * {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 18px;
}

.field-medallion {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: var(--bs-tertiary);
}

.field-medallion__disc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: rgba(209, 160, 23, .14);
    box-shadow: 0 0 0 2px rgba(209, 160, 23, .45);
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.field-medallion__disc i {
    font-size: 46px;
    color: var(--bs-secondary);
    transition: color .35s ease, transform .5s ease;
}

/* The number sits on the rim rather than in the flow, so it labels the
   medallion without taking a line of its own. */
.field-medallion__no {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: "Josefin Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-dark);
    background: var(--bs-primary);
    /* The ring punches the badge out of whatever the section behind it is. */
    box-shadow: 0 0 0 4px var(--field-medallion-ground, var(--bs-white));
    transition: color .35s ease, background .35s ease;
}

.field-medallion:hover .field-medallion__disc {
    background: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(209, 160, 23, .45), 0 16px 34px rgba(6, 25, 44, .18);
    transform: translateY(-6px);
}

.field-medallion:hover .field-medallion__disc i {
    color: var(--bs-dark);
    transform: rotateY(180deg);
}

.field-medallion:hover .field-medallion__no {
    color: var(--bs-primary);
    background: var(--bs-secondary);
}

.field-medallion__tag {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.field-medallion__title {
    margin-bottom: 10px;
    font-family: "Josefin Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--bs-dark);
    transition: color .3s ease;
}

.field-medallion:hover .field-medallion__title {
    color: var(--bs-secondary);
}

.field-medallion__desc {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.55;
}

/* Pushed to the foot so the seven links sit on one line across the row, however
   long each description runs. */
.field-medallion__more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bs-secondary);
    transition: color .3s ease;
}

.field-medallion__more i {
    margin-left: 6px;
    transition: transform .3s ease;
}

.field-medallion:hover .field-medallion__more {
    color: var(--bs-primary);
}

.field-medallion:hover .field-medallion__more i {
    transform: translateX(5px);
}

@media (max-width: 1199.98px) {
    .field-medallion__disc {
        width: 130px;
        height: 130px;
    }

    .field-medallion__disc i {
        font-size: 40px;
    }
}

@media (max-width: 991.98px) {
    .fields-medallions > * {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .fields-medallions > * {
        flex-basis: 100%;
        max-width: 100%;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-medallion:hover .field-medallion__disc {
        transform: none;
    }

    .field-medallion:hover .field-medallion__disc i,
    .field-medallion:hover .field-medallion__more i {
        transform: none;
    }
}


/* Cards sitting in a row are already forced to a common height by .h-100, but
   their calls to action stopped wherever the copy happened to end, so a row of
   three cards showed three buttons on three different lines. Where a card ends
   in a button, that button is pushed to the foot of the card it shares the row
   with. Scoped with :has() so cards that end in prose are left alone. */
.service-item.h-100:has(> .btn:last-child),
.event-item.h-100:has(> .btn:last-child) {
    display: flex;
    flex-direction: column;
}

.service-item.h-100 > .btn:last-child,
.event-item.h-100 > .btn:last-child {
    margin-top: auto;
    align-self: flex-start;
}


/* ═══════════════ Reference-site design language (we4youindia.org) ══════════ */
/* Two devices carried over from the site the client pointed at, in this
   association's navy and gold rather than that site's blue: pill buttons, and
   the eyebrow label drawn as an outlined speech bubble. Everything else — the
   palette, the type, the section order — is unchanged. */

/* Pill buttons. The square icon tiles keep their own shape. */
.btn:not(.btn-square):not(.btn-sm-square):not(.btn-lg-square):not(.btn-link) {
    border-radius: 50rem;
}

.navbar-toggler {
    border-radius: 8px;
}

/* Eyebrow label as a speech bubble, replacing the two gold rules the template
   drew either side of it. */
.section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 20px !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.4;
    text-transform: uppercase;
    border: 2px solid var(--bs-primary);
    border-radius: 50rem;
}

/* The tail. It carries the section's own background so it masks the segment of
   the bubble outline that runs behind it. */
.section-title::before {
    position: absolute;
    content: "";
    /* top:auto is load-bearing: the rule this replaces set top:5px, and with a
       definite height top wins over bottom, which parked the tail mid-text. */
    top: auto;
    left: 50%;
    bottom: -8px;
    z-index: 0;
    width: 13px;
    height: 13px;
    margin-left: -18px;
    background: inherit;
    border: 0;
    border-right: 2px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
    border-bottom-right-radius: 3px;
    transform: rotate(45deg);
}

.section-title::after {
    display: none;
}

/* Left-aligned headers put the tail under the first word instead of the
   middle, so it still points at the heading it introduces. */
/* The width/height have to be restated here: the rule this supersedes targets
   .section-title.text-start::before too, and at equal specificity its
   calc(100% + 40px) width would stretch the tail into a diagonal slash across
   the heading. */
.section-title.text-start::before {
    top: auto;
    left: 26px;
    bottom: -8px;
    width: 13px;
    height: 13px;
    margin-left: 0;
}


/* The decorative corner wedges are sized for a 1140px container. Left at
   120–150px they eat a third of a phone's width and sit on top of the heading,
   so they shrink with the viewport. */
@media (max-width: 767.98px) {
    .banner .banner-inner::before {
        border-top-width: 70px;
        border-right-width: 70px;
    }

    .banner .banner-inner::after {
        border-bottom-width: 70px;
        border-left-width: 70px;
    }

    .page-header::before {
        border-top-width: 60px;
        border-right-width: 60px;
    }

    .page-header::after {
        border-bottom-width: 60px;
        border-left-width: 60px;
    }
}


/*** Footer credit ***/
/* The Innovator Solution logo ships as a single 500×500 PNG with a black
   "INNOVATOR SOLUTION" wordmark under the diamond. That wordmark would
   disappear against the footer plate, so the image is scaled up inside a
   clipped box to show the diamond alone and the name is set as live text
   beside it — which also keeps it selectable and legible at any zoom. */
.footer .copyright a.credit {
    /* .footer .copyright a (0,2,1) turns every link in this bar gold, so the
       override has to out-specify it — only the studio name should be gold,
       not the words introducing it. */
    color: rgba(255, 255, 255, .78);
}

.credit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.credit__mark {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    overflow: hidden;
}

.credit__mark img {
    position: absolute;
    top: -4.6px;
    left: -9.7px;
    width: 46.1px;
    max-width: none;
}

.footer .credit__name {
    font-weight: 600;
    color: var(--bs-primary);
    transition: color .3s ease;
}

.credit:hover .credit__name {
    color: var(--bs-white);
}


/* The fixed helpline column sits over whatever is under it. On a narrow screen
   that is the centred copyright line, so the bar gets a gutter wide enough to
   clear the buttons and the buttons themselves tuck in a little. */
@media (max-width: 767.98px) {
    .floating-actions {
        right: 14px;
        bottom: 76px;
        gap: 8px;
    }

    .floating-actions .btn-lg-square,
    .back-to-top.btn-lg-square {
        width: 42px;
        height: 42px;
    }

    .back-to-top {
        right: 14px;
        bottom: 20px;
    }

    .footer .copyright {
        padding-right: 62px;
        padding-left: 62px;
    }

    /* Narrowed by that gutter, the credit broke mid-phrase. The introducing
       words take their own line and the mark stays welded to the name. */
    .credit {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
    }

    .credit > span:first-child {
        flex-basis: 100%;
    }

    .credit__name {
        white-space: nowrap;
    }
}