html {
    font-size: 14px;
}
body {
    margin-top: 65px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
@media (max-width: 767px) {
    .header {
        z-index: 2;
        min-height: 55px;
    }
    body {
        margin-top: 55px;
    }
}

html {
    position: relative;
    min-height: 100%;
}



.logo {
    max-height: var(--mrs-logo-size);
}

.p-logo {
    max-height: 18px;
}

.background-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--mrs-light);
}

.bg-design-1 {
}

.bg-design-1:hover {
    background: var(--mrs-secondary);
    box-shadow: var(--mrs-box-shadow-lg);
}

/*



.card .bg-design-2 {
    background: #f0f7ff;
}

.card:hover .bg-design-2 {
    background: var(--mrs-primary);
    box-shadow: var(--mrs-box-shadow-lg);
    color: rgba(var(--mrs-white-rgb), 0.7);
}
.card:hover .bg-design-2 .card-title {
    color: rgba(var(--mrs-white-rgb), 1);
}*/

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5 {
    color: rgba(var(--mrs-white-rgb), 1) !important;
}

.before-title {
    position: relative;
    padding-bottom: 0.5rem;
    color: rgba(var(--mrs-white-rgb), 0.5);
}
    .before-title:hover {
    }

/*.before-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 22px;
    height: 2px;
    width: 70px;
    background: var(--mrs-secondary);
    top:100%;
}*/

.overlap {
    background: rgba(19,27,36,0.6);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
}

.width-fit{
    width:fit-content;
}

.text-center .width-fit{
    margin:auto;
}

footer h6 {
    font-family: var(--mrs-body-font-family);
    color: rgba(var(--mrs-white-rgb), 0.5);
    font-size: 1rem;
}
footer ul a:hover {
    color: var(--mrs-secondary);
}

/* ---------------------------------------------------------------------------
   Footer (includes/footer.php)
   --------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    /* Also stops a child's top margin collapsing out through the footer and
       dragging the whole green block up over the section above it. */
    padding-top: 3.5rem;
}

/* A tinted panel rather than a white card: on the dark green it reads as part
   of the footer instead of a notice pasted on top of it. */
.footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: 2.25rem 2.5rem;
    border-radius: 1.25rem;
    background: rgba(var(--mrs-white-rgb), 0.06);
    border: var(--mrs-border-width) solid rgba(var(--mrs-white-rgb), 0.14);
}

.footer-cta-copy {
    /* Stops the headline stretching the full width and leaving the actions
       marooned at the far edge. */
    max-width: 32rem;
}

.footer-cta-title {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mrs-white);
    margin-bottom: 0.4rem;
}

.footer-cta-sub {
    font-size: 0.95rem;
    color: rgba(var(--mrs-white-rgb), 0.65);
    margin-bottom: 0;
}

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

/* The gradient's dark end is nearly the footer's own colour, so the button
   would fade into the panel. Solid pale green instead — the same treatment the
   header's phone button already uses on this background. */
.footer-cta-actions .btn-cta {
    --mrs-btn-color: var(--mrs-primary);
    --mrs-btn-hover-color: var(--mrs-primary);
    --mrs-btn-active-color: var(--mrs-primary);
    --mrs-btn-padding-x: 2rem;
    --mrs-btn-padding-y: 0.8rem;
    background-image: none;
    background-color: var(--mrs-secondary);
}

.footer-cta-call {
    color: var(--mrs-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mrs-white);
    padding-bottom: 0.85rem;
    margin-bottom: 1.25rem;
    position: relative;
}

/* Short accent rule under each column heading. */
.footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1.75rem;
    height: 2px;
    background: var(--mrs-secondary);
}

.footer-blurb {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(var(--mrs-white-rgb), 0.65);
    margin-bottom: 1.5rem;
}

.footer-links li + li {
    margin-top: 0.75rem;
}

.footer-links a {
    font-size: 0.9rem;
    color: rgba(var(--mrs-white-rgb), 0.72);
}

.footer-links a:hover {
    color: var(--mrs-secondary);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(var(--mrs-white-rgb), 0.72);
}

.footer-contact li + li {
    margin-top: 1.1rem;
}

.footer-contact a:hover {
    color: var(--mrs-secondary);
}

.footer-contact-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(var(--mrs-white-rgb), 0.08);
    border: var(--mrs-border-width) solid rgba(var(--mrs-white-rgb), 0.12);
    color: var(--mrs-secondary);
}

/* Sized so all seven fit one row inside a quarter-width column rather than
   dropping a lone icon onto a second line. */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin: 0 0.4rem 0.4rem 0;
    background: rgba(var(--mrs-white-rgb), 0.08);
    border: var(--mrs-border-width) solid rgba(var(--mrs-white-rgb), 0.14);
    border-radius: 50%;
    color: rgba(var(--mrs-white-rgb), 0.85);
}

.social-link:hover {
    background: var(--mrs-secondary);
    border-color: var(--mrs-secondary);
    color: var(--mrs-primary);
}

.footer-bottom {
    border-top: var(--mrs-border-width) solid rgba(var(--mrs-white-rgb), 0.15);
}

.footer-fine {
    font-size: 0.8rem;
    color: rgba(var(--mrs-white-rgb), 0.55);
}

@media (max-width: 767.98px) {
    .footer-cta {
        padding: 1.5rem;
        text-align: center;
        justify-content: center;
    }

    .footer-cta-actions {
        justify-content: center;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Back to top with a scroll-progress ring (footer.php)
   --------------------------------------------------------------------------- */

.scroll-top {
    position: fixed;
    right: 1.25rem;
    /* Clears the sticky bar, whose height the footer script publishes. */
    bottom: calc(1.25rem + var(--sticky-cta-height, 0px));
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* White disc, dark ring and arrow. This is the one combination that holds
       up in both places the button appears: against the dark green footer it
       is the only light thing on screen, and over pale page sections the
       shadow and the dark ring give it an edge. A green fill would disappear
       into the footer, a white ring into the page. */
    background: var(--mrs-white);
    color: var(--mrs-primary);
    box-shadow: 0 0.5rem 1.5rem rgba(var(--mrs-primary-rgb), 0.3);
    /* Under .sticky-cta at 1030, so the bar always wins the corner. */
    z-index: 1029;
}

/* display:grid would otherwise override the hidden attribute. */
.scroll-top[hidden] {
    display: none;
}

.scroll-top-ring,
.scroll-top-arrow {
    grid-area: 1 / 1;
}

.scroll-top-ring {
    width: 100%;
    height: 100%;
    /* Starts the ring at 12 o'clock instead of 3. */
    transform: rotate(-90deg);
}

.scroll-top-track {
    fill: none;
    stroke: rgba(var(--mrs-primary-rgb), 0.14);
    stroke-width: 3;
}

/* stroke-dasharray and stroke-dashoffset are set by the script, which knows the
   circumference and the scrolled fraction. */
.scroll-top-bar {
    fill: none;
    stroke: var(--mrs-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.footer-bg {
    background-image: url(../../img/footer.svg);
    background-position: bottom center;
    background-repeat: repeat-x;
}

.carousel-item::before {
    background-color: transparent;
    --background-overlay: '';
    background-image: linear-gradient(190deg, #134A4700 25%, #0F3D3AF2 95%);
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
}

.btn svg{

}

.p-des  p:last-child{
    margin-bottom:0 !important;
}


@media (min-width: 768px) {
    :root {
        --mrs-body-font-size: 0.9rem;
        --mrs-logo-size: 2rem;
        --mrs-icon-width: 0.9rem;
        --mrs-icon-height: 0.9rem;
    }

    .navbar {
        --mrs-navbar-nav-link-padding-x: 0.5rem;
    }
}

@media (min-width: 992px) {
    :root {
        --mrs-body-font-size: 1rem;
        --mrs-logo-size: 2.5rem;
        --mrs-icon-width: 0.9rem;
        --mrs-icon-height: 0.9rem;
    }

    .navbar {
        --mrs-navbar-nav-link-padding-x: 0.4rem;
    }

    .navbar-nav {
        --mrs-nav-link-font-size: 0.8rem;
        --mrs-nav-link-padding-x: 0.7rem;
        --mrs-nav-link-padding-y: 0.4rem;
    }

}

@media (min-width: 1200px) {
    :root {
        --mrs-body-font-size: 1rem;
        --mrs-logo-size: 2.3rem;
        --mrs-icon-width: 1rem;
        --mrs-icon-height: 1rem;
    }

    .navbar-nav {
        --mrs-nav-link-font-size: 0.8rem;
    }
}

@media (min-width: 1400px) {
    :root {
        --mrs-body-font-size: 1.1rem;
        --mrs-logo-size: 3rem;
        --mrs-icon-width: 1.1rem;
        --mrs-icon-height: 1.1rem;
    }

    .navbar {
        --mrs-navbar-nav-link-padding-x: 1rem;
    }

    .navbar-nav {
        --mrs-nav-link-font-size: 1.1rem;
    }
}


@media (min-width: 1650px) {
    :root {
        --mrs-body-font-size: 1.1rem;
        --mrs-logo-size: 4rem;
        --mrs-icon-width: 1.1rem;
        --mrs-icon-height: 1.1rem;
    }

    .navbar {
        --mrs-navbar-nav-link-padding-x: 1rem;
    }

    .navbar-nav {
        --mrs-nav-link-font-size: 1.1rem;
    }
}

/* brightness(0) flattens every colour to black while keeping the alpha channel,
   then invert(1) turns that black into pure white — so a multi-colour logo comes
   out solid white. The old invert/sepia/saturate chain landed on mid-grey, which
   read as washed out against the dark footer. */
.white-filter {
    filter: brightness(0) invert(1);
}

/* The navbar dropdowns open on hover from lg up — see the hover handler in
   footer.php, which drives Bootstrap's Dropdown API so aria-expanded and the
   caret stay in sync. The menu sits flush against its toggle (no default
   spacer) so there is no dead gap for the pointer to fall through on the way
   down into the menu, which would otherwise read as a mouseleave and close it. */
@media (min-width: 992px) {
    .navbar .dropdown-menu,
    .navbar .dropdown-menu[data-bs-popper] {
        margin-top: 0;
    }
}

/* Sticky enquiry bar (footer.php), mobile only — it carries .d-lg-none, since
   from lg up the header already shows the phone and WhatsApp buttons.
   The space it takes up is reserved on <body> by the sizing script in
   footer.php, so it never hides the end of the page. */
:root {
    /* One accent shared by the sticky bar's primary button, the enquiry modal's
       header and its confirmation tick, so the three read as the same thing. */
    --cta-fill: linear-gradient(90deg, var(--mrs-primary) 0%, #1e7a63 55%, #3fa07a 100%);
}

.sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background: var(--mrs-white);
    border-top: var(--mrs-border-width) solid rgba(var(--mrs-primary-rgb), 0.1);
    box-shadow: 0 -0.5rem 1.5rem rgba(var(--mrs-primary-rgb), 0.12);
    /* Clears the iOS home indicator without padding the bar on every device. */
    padding-bottom: env(safe-area-inset-bottom);
}

.sticky-cta-actions {
    display: flex;
    gap: 0.5rem;
}

/* flex-basis of 0 rather than .flex-fill's auto, so the pair splits the bar
   into exact halves however long the two labels are. */
.sticky-cta-actions .btn-cta {
    flex: 1 1 0;
    min-width: 0;
}

/* Shared by the sticky bar and the enquiry modal, so it is deliberately not
   scoped to either one. */
.btn-cta {
    --mrs-btn-color: var(--mrs-white);
    --mrs-btn-hover-color: var(--mrs-white);
    --mrs-btn-active-color: var(--mrs-white);
    /* Border width is left at .btn's default, over a transparent colour, so
       this button measures exactly the same as the outlined one beside it. */
    --mrs-btn-font-weight: 600;
    --mrs-btn-padding-y: 0.7rem;
    --mrs-btn-padding-x: 0.5rem;
    background-image: var(--cta-fill);
    /* .btn is inline-block and left-aligned site-wide; flex centres the label
       with its icon, and text-align catches a label that has to wrap. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
}

/* Outlined variant: same shape and size, hollow, so that when it sits beside a
   filled button the filled one still reads as the primary action. */
.btn-cta.btn-cta-outline {
    --mrs-btn-color: var(--mrs-primary);
    --mrs-btn-border-color: var(--mrs-primary);
    --mrs-btn-hover-border-color: var(--mrs-primary);
    --mrs-btn-active-border-color: var(--mrs-primary);
    background-image: none;
}

/* Fills in on hover so the pair still reads as one family of buttons.
   :active matters here rather than being decorative — .btn turns the label
   white while pressed but leaves --mrs-btn-active-bg undefined, so without a
   fill of our own the text would vanish against the white bar on tap. */
.btn-cta.btn-cta-outline:hover,
.btn-cta.btn-cta-outline:focus-visible,
.btn-cta.btn-cta-outline:active {
    background-image: var(--cta-fill);
}

.btn-cta:hover,
.btn-cta:focus-visible {
    filter: brightness(1.08);
}

.sticky-cta-note {
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(var(--mrs-body-color-rgb), 0.65);
}

.sticky-cta-note a {
    color: var(--mrs-primary);
    /* Keeps a number or address from being split across two lines. */
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Quick enquiry modal (#TalkToCfo in footer.php)
   --------------------------------------------------------------------------- */

.enquiry {
    border-radius: 0;
    overflow: hidden;
}

.enquiry-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

/* Stacked, the close button sits over the white panel; side by side it sits
   over the brand panel and has to invert to stay visible. Same filter
   Bootstrap uses for .btn-close-white. */
@media (min-width: 768px) {
    .enquiry-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

.enquiry-main {
    padding: 2.5rem 2rem;
}

.enquiry-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mrs-primary);
    margin-bottom: 1.75rem;
}

.enquiry-field {
    margin-bottom: 1.25rem;
}

.enquiry-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--mrs-body-color-rgb), 0.5);
    margin-bottom: 0.25rem;
}

.enquiry-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.7;
}

/* Underline-only fields: no box, no radius, just a rule that picks up the brand
   colour on focus. Written from scratch rather than as a .form-control override,
   which would mean unsetting more than it sets. */
.enquiry-input {
    display: block;
    width: 100%;
    padding: 0.35rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--mrs-body-color);
    background-color: transparent;
    border: 0;
    border-bottom: var(--mrs-border-width) solid rgba(var(--mrs-body-color-rgb), 0.2);
    border-radius: 0;
}

.enquiry-input::placeholder {
    color: rgba(var(--mrs-body-color-rgb), 0.35);
}

.enquiry-input:focus {
    outline: 0;
    border-bottom-color: var(--mrs-primary);
    /* A 2px rule would shift the field by a pixel; a shadow sits on top of it. */
    box-shadow: 0 1px 0 0 var(--mrs-primary);
}

.enquiry-input.is-invalid {
    border-bottom-color: var(--mrs-form-invalid-border-color);
}

.enquiry-select {
    /* Drops the OS chrome so the select matches the text fields, then draws the
       caret back on. Inline SVG, so it costs no extra request. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f3d3a'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 0.8rem;
}

.enquiry-note {
    height: 4.5rem;
    resize: none;
}

.enquiry-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
}

.enquiry-actions .btn-cta {
    --mrs-btn-padding-x: 2rem;
    flex-shrink: 0;
}

.enquiry-small {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(var(--mrs-body-color-rgb), 0.55);
}

/* Flat brand panel. Below md it stacks under the form, where a tall panel would
   only add scrolling, so it tightens up. */
.enquiry-aside {
    background-color: var(--mrs-primary);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.enquiry-aside-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

.enquiry-aside-art {
    width: 100%;
    max-width: 11rem;
    height: auto;
    margin: 2rem 0;
    color: rgba(var(--mrs-white-rgb), 0.3);
}

.enquiry-aside-note {
    font-size: 0.75rem;
    color: rgba(var(--mrs-white-rgb), 0.7);
    margin-bottom: 0.75rem;
}

.enquiry-aside-links {
    display: flex;
    gap: 1.25rem;
}

.enquiry-aside-links a {
    color: rgba(var(--mrs-white-rgb), 0.85);
    display: inline-flex;
}

.enquiry-aside-links a:hover {
    color: var(--mrs-white);
}

@media (max-width: 767.98px) {
    .enquiry-main {
        padding: 2rem 1.5rem;
    }

    /* Safari on iOS zooms the page when a focused field is under 16px, and the
       root font-size is 14px here — so this is an absolute value on purpose. */
    .enquiry-input {
        font-size: 16px;
    }

    .enquiry-aside {
        padding: 1.75rem 1.5rem;
    }

    /* The illustration is decoration; on a phone the panel earns its place with
       the contact links alone. */
    .enquiry-aside-art {
        display: none;
    }

    .enquiry-aside-title {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
}

/* Off-screen rather than display:none — a bot that skips hidden fields should
   still see this one, which is the whole point of it. */
.enquiry-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.enquiry-tick {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-image: var(--cta-fill);
    color: var(--mrs-white);
}

.enquiry-done {
    text-align: center;
}

.enquiry-done:focus {
    outline: none;
}