/* =========================================================================
   The footer.

   Built to the reference: a cream ground, the logo with a line about the
   company and its social links, then columns of links, a hairline rule, and
   the copyright with what else you can read set opposite it.

   What was there: a photograph washed to 60% opacity behind everything, two
   aeroplanes and a cloud floating over it, and a separate red bar underneath
   carrying the copyright. Four backgrounds in a footer.

   The reference's fourth column is a newsletter sign-up. Ours is the map,
   and it stays: there is no newsletter behind that form to subscribe to, so
   it would be a box that does nothing.

   Nothing here moves markup.
   ========================================================================= */

.footer {
    background: #f6f3ee;
    padding: 86px 0 34px;
    overflow: visible;
}

/* The photograph behind everything. */
.footer::before {
    display: none;
}

/* The two aeroplanes and the cloud. */
.footer .shape1,
.footer .shape2,
.footer .shape3,
.footer .cloud {
    display: none;
}

/* -------------------------------------------------------------------------
   The logo, the line about the company, and the social links.
   ------------------------------------------------------------------------- */

.footer .footer-contact {
    padding-right: 24px;
}

/* The logo is a JPEG with a white ground, so on cream it shows as a plate.
   Given a radius and an edge it reads as one on purpose, the same way the
   one in the header does. */
.footer .footer-contact img {
    max-width: 170px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 18px -10px rgba(2, 19, 91, .5);
}

.footer .footer-contact p {
    font-size: 15px;
    line-height: 1.75;
    color: #5b6478;
}

.footer .footer-contact ul {
    gap: 10px;
    margin-top: 24px;
    padding: 0;
}

/* Circles with an edge rather than a white disc with a drop shadow under it,
   which on a pale ground read as buttons floating off the page. */
.footer .footer-contact ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 1;
    font-size: 17px;
    color: var(--elite-navy, #02135b);
    background: transparent;
    border: 1px solid #d9dded;
    border-radius: 50%;
    box-shadow: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.footer .footer-contact ul li a:hover {
    background: var(--elite-red, #e80719);
    border-color: var(--elite-red, #e80719);
    color: #fff;
    transform: translateY(-3px);
}

/* The list is a flex row with a gap now, so the old per-item margin only
   makes the spacing uneven. */
.footer .footer-contact ul li + li a {
    margin-left: 0;
}

/* -------------------------------------------------------------------------
   The column headings.

   The reference sets them plainly. Ours shouted them in capitals with a
   rule under each; the rule is a device this site uses on section headings,
   where it separates a title from the section below it. In a footer column
   four words long it only adds a line.
   ------------------------------------------------------------------------- */

.footer h3 {
    margin-bottom: 22px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--elite-navy, #02135b);
}

.footer .heading-divider {
    display: none;
}

.footer .links-only {
    padding-left: 0;
}

/* -------------------------------------------------------------------------
   The links.
   ------------------------------------------------------------------------- */

.footer .footer-links ul li a {
    display: inline-block;
    padding-left: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #5b6478;
    transition: color .25s ease, transform .25s ease;
}

/* The arrow set before every link. The reference lists them plainly, and at
   five or six links an arrow on each is five or six arrows. */
.footer .footer-links ul li a::before {
    display: none;
}

.footer .footer-links ul li a:hover {
    color: var(--elite-red, #e80719);
    /* margin-left moved the item and reflowed the column; a transform moves
       only what you see. */
    margin-left: 0;
    transform: translateX(5px);
}

.footer .footer-links ul li + li {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
   Contact.
   ------------------------------------------------------------------------- */

.footer .footer-info ul li {
    align-items: flex-start;
    color: #5b6478;
}

.footer .footer-info ul li i {
    margin-top: 3px;
    color: var(--elite-red, #e80719);
}

.footer .footer-info ul li span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #5b6478;
}

.footer .footer-info ul li + li {
    margin-top: 14px;
}

/* -------------------------------------------------------------------------
   The map.
   ------------------------------------------------------------------------- */

/* The frame goes on the iframe, not the box around it. Settings holds no map
   URL, so the blade renders no iframe at all — and a border on the empty box
   drew a stray hairline under "Find Us Here". :empty would not have caught it
   either: the div holds whitespace. */
.footer .footer-map iframe {
    display: block;
    border-radius: 12px;
    border: 1px solid #e2e0da;
}

/* -------------------------------------------------------------------------
   The bottom line.

   Was a red bar with a photograph in it, sitting under the footer as a
   second block. The reference rules a hairline across the same ground and
   sets the copyright against it.
   ------------------------------------------------------------------------- */

.footer-bottom {
    padding: 22px 0 26px;
    background-color: #f6f3ee;
    background-image: none;
}

.footer-bottom > .container {
    padding-top: 22px;
    border-top: 1px solid #e2e0da;
}

.footer-bottom ul {
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
}

.footer-bottom ul li {
    font-size: 14px;
    color: #6b7385;
}

.footer-bottom ul li a {
    color: var(--elite-navy, #02135b);
    font-weight: 700;
    transition: color .2s ease;
}

.footer-bottom ul li a:hover {
    color: var(--elite-red, #e80719);
}

/* -------------------------------------------------------------------------
   Narrower screens.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .footer {
        padding: 60px 0 20px;
    }

    .footer .footer-contact {
        padding-right: 0;
    }

    /* Each column is its own block here, so they need air between them. */
    .footer .row > [class*="col-"] {
        margin-bottom: 34px;
    }

    .footer .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    .footer-bottom ul {
        justify-content: center;
        text-align: center;
    }
}

/* The TikTok mark is an inline SVG rather than an icon-font glyph, so it takes
   its size here instead of from font-size. */
.footer .footer-contact ul li.tiktok a svg,
.top-header .socail-media ul li.tiktok a svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* =========================================================================
   WhatsApp.

   Fixed to the corner on every page. It shares that corner with the
   scroll-to-top button, which sits at bottom 30 / right 30 and appears only
   once the page has been scrolled — so this takes the corner, and the scroll
   button is lifted above it rather than the two landing on top of each other.
   ========================================================================= */

.whatsapp-button {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1022;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* WhatsApp's own green: the button is recognised by its colour before its
       shape, and our red would read as something else entirely. */
    background: #25d366;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .75);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.whatsapp-button:hover,
.whatsapp-button:focus {
    background: #1ebe5b;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -10px rgba(37, 211, 102, .85);
}

.whatsapp-button i {
    /* The glyph sits a shade low in its own box. */
    margin-top: -1px;
}

/* Lifted clear of the WhatsApp button below it. */
.go-top,
.go-top.active {
    bottom: 100px;
}

@media (max-width: 575px) {
    .whatsapp-button {
        right: 18px;
        bottom: 18px;
        width: 50px;
        height: 50px;
        font-size: 27px;
    }

    .go-top,
    .go-top.active {
        bottom: 80px;
    }
}