/* =========================================================
   EVANTU IT & WEB SOLUTIONS
   SHARED FOOTER STYLESHEET

   File:
       /css/footer.css

   Loaded from <head> so the browser knows how the
   footer is supposed to look before it encounters the
   footer markup. This removes the late-document style
   discovery that was causing the large flash.
========================================================= */


/* =========================================================
   FOOTER VARIABLES
========================================================= */

:root {

    --evantu-footer-deep:
        #020d1d;

    --evantu-footer-navy:
        #041b38;

    --evantu-footer-blue:
        #087fe5;

    --evantu-footer-cyan:
        #20c7ff;

    --evantu-footer-red:
        #e31b2f;

    --evantu-footer-white:
        #ffffff;

    --evantu-footer-muted:
        #aebdd0;

    --evantu-footer-border:
        rgba(255, 255, 255, .13);

    --evantu-footer-container:
        1500px;

}


/* =========================================================
   RESET
========================================================= */

.evantu-footer,
.evantu-footer *,
.evantu-footer *::before,
.evantu-footer *::after {

    box-sizing: border-box;

}


.evantu-footer img {

    display: block;

}


/* =========================================================
   FOOTER WRAPPER
   ---------------------------------------------------------
   Dark background is set here directly, not on __main,
   so the dark surface is painted immediately.
========================================================= */

.evantu-footer {

    width: 100%;

    margin: 0;
    padding: 0;

    background: #020d1d;

    color:
        var(--evantu-footer-white);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

}


/* =========================================================
   MAIN FOOTER SURFACE
========================================================= */

.evantu-footer__main {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 18% 0%,
            rgba(0, 136, 255, .20),
            transparent 32%
        ),

        radial-gradient(
            circle at 82% 30%,
            rgba(25, 198, 255, .09),
            transparent 28%
        ),

        /* Sparse red accent in the lower-right corner. */
        radial-gradient(
            circle at 96% 100%,
            rgba(227, 27, 47, .10),
            transparent 26%
        ),

        linear-gradient(
            120deg,
            #020d1d 0%,
            #061a34 48%,
            #020d1d 100%
        );

}


.evantu-footer__main::before {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .12),
            transparent 35%,
            transparent 65%,
            rgba(0, 0, 0, .12)
        );

    content: "";

}


/* =========================================================
   CONTAINER
========================================================= */

.evantu-footer__container {

    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            var(--evantu-footer-container)
        );

    margin-inline: auto;

}


/* =========================================================
   PRIMARY FOOTER GRID
========================================================= */

.evantu-footer__grid {

    display: grid;

    grid-template-columns:
        1.15fr
        .9fr
        1.45fr
        1fr;

    gap: 0;

    padding:
        58px 0 46px;

}


/* =========================================================
   COLUMNS
========================================================= */

.evantu-footer__column {

    min-width: 0;

    padding:
        0 34px;

}


.evantu-footer__column:first-child {

    padding-left: 0;

}


.evantu-footer__column:last-child {

    padding-right: 0;

}


.evantu-footer__column
+
.evantu-footer__column {

    border-left:
        1px solid
        var(--evantu-footer-border);

}


/* =========================================================
   BRAND
   ---------------------------------------------------------
   Fixed 190 x 58 box (165 x 50 on mobile) reserves
   layout space before the logo image is decoded.
========================================================= */

.evantu-footer__logo {

    display: block;

    width: 190px;
    height: 58px;
    max-width: 190px;

    margin:
        0 0 19px;

    border-radius: 2px;

    object-fit: contain;
    object-position: left center;

}


.evantu-footer__tagline {

    max-width: 300px;

    margin:
        0 0 14px;

    color:
        var(--evantu-footer-muted);

    font-size: .90rem;

    line-height: 1.65;

}


.evantu-footer__international {

    margin:
        0 0 23px;

    color:
        #72d8ff;

    font-size: .76rem;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: .035em;

}


/* =========================================================
   HEADINGS
   ---------------------------------------------------------
   Thin red cap sits above the existing blue→cyan rule.
   Red is used here only as a small "tick" mark, never as
   the dominant colour.
========================================================= */

.evantu-footer__heading {

    position: relative;

    margin:
        5px 0 21px;

    padding-top: 12px;

    color: #ffffff;

    font-size: .78rem;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: .14em;

    text-transform: uppercase;

}


.evantu-footer__heading::before {

    position: absolute;

    top: 0;
    left: 0;

    width: 18px;
    height: 3px;

    border-radius: 1px;

    background:
        var(--evantu-footer-red);

    content: "";

}


.evantu-footer__heading::after {

    display: block;

    width: 32px;
    height: 2px;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            var(--evantu-footer-blue),
            var(--evantu-footer-cyan)
        );

    content: "";

}


/* =========================================================
   FOOTER LINKS
========================================================= */

.evantu-footer__links {

    margin: 0;

    padding: 0;

    list-style: none;

}


.evantu-footer__links li + li {

    margin-top: 11px;

}


.evantu-footer__link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--evantu-footer-muted);

    font-size: .82rem;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color .18s ease,
        transform .18s ease;

}


.evantu-footer__link::before {

    color:
        var(--evantu-footer-cyan);

    font-size: .80rem;

    content: "›";

}


.evantu-footer__link:hover,
.evantu-footer__link:focus-visible {

    color: #ffffff;

    transform:
        translateX(3px);

}


/* Hover state turns the small chevron red — a single
   controlled accent, not a colour change to the text. */

.evantu-footer__link:hover::before,
.evantu-footer__link:focus-visible::before {

    color:
        var(--evantu-footer-red);

}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.evantu-footer__contact {

    margin:
        0 0 22px;

    padding: 0;

    list-style: none;

}


.evantu-footer__contact li {

    display: grid;

    grid-template-columns:
        24px minmax(0, 1fr);

    gap: 10px;

    align-items: start;

}


.evantu-footer__contact li + li {

    margin-top: 14px;

}


.evantu-footer__contact-icon {

    display: flex;

    width: 22px;
    height: 22px;

    align-items: center;
    justify-content: center;

    color:
        var(--evantu-footer-cyan);

}


.evantu-footer__contact-icon svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.evantu-footer__contact-text,
.evantu-footer__contact-text a {

    color:
        var(--evantu-footer-muted);

    font-size: .82rem;

    line-height: 1.55;

    text-decoration: none;

}


.evantu-footer__contact-text a:hover,
.evantu-footer__contact-text a:focus-visible {

    color: #ffffff;

}


/* =========================================================
   SOCIAL MEDIA
   ---------------------------------------------------------
   Hover state shifts to the red accent for one cohesive
   "secondary" interaction colour.
========================================================= */

.evantu-footer__social {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;

}


.evantu-footer__social-link {

    display: inline-flex;

    width: 36px;
    height: 36px;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, .23);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .025);

    color: #ffffff;

    text-decoration: none;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease;

}


.evantu-footer__social-link:hover,
.evantu-footer__social-link:focus-visible {

    border-color:
        var(--evantu-footer-red);

    background:
        rgba(227, 27, 47, .14);

    color: #ffffff;

    transform:
        translateY(-2px);

}


.evantu-footer__social-link svg {

    width: 17px;
    height: 17px;

}


/* =========================================================
   CORPORATE INFORMATION STRIP
   ---------------------------------------------------------
   Thin red top edge along the entire strip.
========================================================= */

.evantu-footer__corporate {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        var(--evantu-footer-border);

    border-bottom:
        1px solid
        var(--evantu-footer-border);

}


.evantu-footer__corporate::before {

    position: absolute;

    top: -1px;
    left: 0;

    width: 96px;
    height: 2px;

    background:
        var(--evantu-footer-red);

    content: "";

}


.evantu-footer__corporate-card {

    min-width: 0;

    padding:
        25px 28px;

    text-align: center;

}


.evantu-footer__corporate-card
+
.evantu-footer__corporate-card {

    border-left:
        1px solid
        var(--evantu-footer-border);

}


.evantu-footer__corporate-title {

    margin:
        0 0 9px;

    color: #ffffff;

    font-size: .70rem;
    font-weight: 800;

    letter-spacing: .08em;

    line-height: 1.3;

    text-transform: uppercase;

}


.evantu-footer__corporate-text {

    margin: 0;

    color:
        var(--evantu-footer-muted);

    font-size: .77rem;

    line-height: 1.55;

}


.evantu-footer__corporate-text a {

    color: inherit;

    text-decoration: none;

}


.evantu-footer__corporate-text a:hover {

    color:
        var(--evantu-footer-red);

}


/* =========================================================
   CONTACT MESSAGE
========================================================= */

.evantu-footer__message {

    position: relative;

    z-index: 2;

    padding:
        26px 0 24px;

    text-align: center;

}


.evantu-footer__message p {

    margin: 0;

    color:
        var(--evantu-footer-muted);

    font-size: .78rem;

    line-height: 1.65;

}


.evantu-footer__message p + p {

    margin-top: 5px;

}


/* =========================================================
   BOTTOM BAR
   ---------------------------------------------------------
   Thin red gradient thread across the very top of the
   bottom bar. This is the only horizontal red line
   introduced — deliberate, minimal, and clearly a
   branding accent.
========================================================= */

.evantu-footer__bottom {

    position: relative;

    z-index: 2;

    display: flex;

    min-height: 65px;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid
        var(--evantu-footer-border);

}


.evantu-footer__bottom::before {

    position: absolute;

    top: -1px;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--evantu-footer-red) 22%,
            transparent 46%
        );

    content: "";

}


.evantu-footer__copyright {

    margin: 0;

    color:
        var(--evantu-footer-muted);

    font-size: .72rem;

    line-height: 1.5;

}


.evantu-footer__legal {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 19px;

}


.evantu-footer__legal a {

    color:
        var(--evantu-footer-muted);

    font-size: .72rem;

    text-decoration: none;

}


.evantu-footer__legal a:hover,
.evantu-footer__legal a:focus-visible {

    color:
        var(--evantu-footer-red);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .evantu-footer__container {

        width:
            calc(100% - 48px);

    }


    .evantu-footer__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .evantu-footer__column {

        padding:
            30px;

    }


    .evantu-footer__column:first-child {

        padding-left: 30px;

    }


    .evantu-footer__column:last-child {

        padding-right: 30px;

    }


    .evantu-footer__column:nth-child(3) {

        border-left: 0;

        border-top:
            1px solid
            var(--evantu-footer-border);

    }


    .evantu-footer__column:nth-child(4) {

        border-top:
            1px solid
            var(--evantu-footer-border);

    }


    .evantu-footer__corporate {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .evantu-footer__corporate-card:nth-child(3) {

        border-left: 0;

        border-top:
            1px solid
            var(--evantu-footer-border);

    }


    .evantu-footer__corporate-card:nth-child(4) {

        border-top:
            1px solid
            var(--evantu-footer-border);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .evantu-footer__container {

        width:
            calc(100% - 32px);

    }


    .evantu-footer__grid {

        display: block;

        padding:
            30px 0 12px;

    }


    .evantu-footer__column,
    .evantu-footer__column:first-child,
    .evantu-footer__column:last-child {

        padding:
            24px 0;

    }


    .evantu-footer__column:first-child {

        padding-top: 0;

    }


    .evantu-footer__column
    +
    .evantu-footer__column {

        border-left: 0;

        border-top:
            1px solid
            var(--evantu-footer-border);

    }


    /* Smaller, but still fully reserved, footer logo. */

    .evantu-footer__logo {

        width: 165px;
        height: 50px;
        max-width: 165px;

    }


    .evantu-footer__tagline {

        max-width: 100%;

    }


    .evantu-footer__corporate {

        display: block;

    }


    .evantu-footer__corporate-card {

        padding:
            19px 10px;

    }


    .evantu-footer__corporate-card
    +
    .evantu-footer__corporate-card {

        border-left: 0;

        border-top:
            1px solid
            var(--evantu-footer-border);

    }


    .evantu-footer__message {

        padding:
            22px 0;

    }


    .evantu-footer__bottom {

        min-height: auto;

        flex-direction: column;

        justify-content: center;

        gap: 11px;

        padding:
            20px 0 24px;

        text-align: center;

    }


    .evantu-footer__legal {

        justify-content: center;

        gap:
            10px 17px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .evantu-footer *,
    .evantu-footer *::before,
    .evantu-footer *::after {

        transition: none !important;

    }

}