css
/* =========================================================
   INDUSTRIAL WEBSITE
   PRIMARY   : #00335e
   SECONDARY : #c2c2c3
   FONT      : Aptos Serif, Georgia, serif
========================================================= */

:root {

    --primary: #00335e;
    --primary-dark: #002541;
    --secondary: #c2c2c3;

    --white: #ffffff;
    --black: #111111;

    --light: #f5f6f7;
    --border: #dedfe0;
    --text: #555b61;

    --container: 1240px;

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Aptos Serif", Georgia, serif;
    background: var(--white);
    color: var(--black);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}


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

.container {
    width: min(92%, var(--container));
    margin: auto;
}

/* =========================================================
   AVENGERS Automation
   PREMIUM INDUSTRIAL HEADER

   PRIMARY : #0b4375
   RED     : #e53237
   GREY    : #6f767d
   FONT    : Aptos Serif / Georgia
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --wdm-primary: #0b4375;
    --wdm-primary-dark: #062f53;
    --wdm-primary-light: #eef5f9;

    --wdm-red: #e53237;
    --wdm-red-dark: #c9272d;
    --wdm-red-light: #fff1f1;

    --wdm-grey: #6f767d;
    --wdm-grey-light: #f3f5f6;

    --wdm-white: #ffffff;
    --wdm-black: #15191d;

    --wdm-border: rgba(11, 67, 117, 0.13);

    --wdm-shadow:
        0 7px 28px rgba(11, 67, 117, 0.09);

    --wdm-shadow-hover:
        0 14px 38px rgba(11, 67, 117, 0.17);

    --wdm-font:
        "Aptos Serif",
        Georgia,
        serif;
}


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

.wdm-header,
.wdm-header *,
.wdm-header *::before,
.wdm-header *::after {

    box-sizing: border-box;
}


.wdm-header a {

    text-decoration: none;
}


.wdm-header button {

    font-family: var(--wdm-font);
}


/* =========================================================
   MAIN HEADER
========================================================= */

.wdm-header {

    position: sticky;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background:
        rgba(255, 255, 255, 0.97);

    border-bottom:
        1px solid var(--wdm-border);

    box-shadow:
        var(--wdm-shadow);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.wdm-header.wdm-scrolled {

    background:
        rgba(255, 255, 255, 0.99);

    box-shadow:
        0 12px 38px
        rgba(11, 67, 117, 0.16);
}


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

.wdm-header-container {

    width:
        min(1200px, 92%);

    min-height:
        108px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        25px;
}


/* =========================================================
   LOGO
========================================================= */

.wdm-logo {

    width:
        200px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    position:
        relative;

    z-index:
        10;
}


.wdm-logo img {

    width:
        200px;

    height:
        auto;

    max-height:
        100px;

    display:
        block;

    object-fit:
        contain;

    transition:
        transform 0.4s ease;
}


.wdm-logo:hover img {

    transform:
        scale(1.04);
}


/* =========================================================
   RIGHT HEADER
========================================================= */

.wdm-header-right {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


/* =========================================================
   TOP CONTACT BAR
========================================================= */

.wdm-header-top {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        20px;

    border-bottom:
        1px solid var(--wdm-border);
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.wdm-contact-item {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--wdm-grey);

    font-family:
        var(--wdm-font);

    font-size:
        13px;

    font-weight:
        600;

    white-space:
        nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.wdm-contact-item:hover {

    color:
        var(--wdm-primary);

    transform:
        translateY(-1px);
}


/* =========================================================
   CONTACT ICON
========================================================= */

.wdm-contact-item i {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--wdm-primary);

    background:
        var(--wdm-primary-light);

    border:
        1px solid
        rgba(11, 67, 117, 0.14);

    border-radius:
        50%;

    font-size:
        12px;

    transition:
        all 0.3s ease;
}


.wdm-contact-item:hover i {

    background:
        var(--wdm-primary);

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


/* =========================================================
   SOCIAL
========================================================= */

.wdm-social {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-left:
        3px;
}


.wdm-social a {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--wdm-primary);

    color:
        #ffffff;

    border-radius:
        50%;

    font-size:
        12px;

    transition:
        all 0.3s ease;
}


.wdm-social a:hover {

    background:
        var(--wdm-red);

    transform:
        translateY(-3px);

    box-shadow:
        0 7px 18px
        rgba(229, 50, 55, 0.22);
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.wdm-main-nav {

    min-height:
        59px;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        32px;
}


/* =========================================================
   NORMAL NAV LINKS
========================================================= */

.wdm-nav-link {

    position:
        relative;

    height:
        59px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--wdm-primary);

    font-family:
        var(--wdm-font);

    font-size:
        16px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.wdm-nav-link:hover {

    color:
        var(--wdm-red);

    transform:
        translateY(-1px);
}


/* =========================================================
   ACTIVE LINK
========================================================= */

.wdm-nav-link.active {

    color:
        var(--wdm-primary);
}


.wdm-nav-link.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        3px;

    background:
        var(--wdm-red);

    border-radius:
        5px 5px 0 0;
}


/* =========================================================
   DROPDOWN WRAPPER
========================================================= */

.wdm-nav-dropdown {

    position:
        relative;

    height:
        59px;

    display:
        flex;

    align-items:
        center;
}


/* =========================================================
   DROPDOWN BUTTON
========================================================= */

.wdm-dropdown-btn {

    height:
        59px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    background:
        transparent;

    border:
        none;

    color:
        var(--wdm-primary);

    font-family:
        var(--wdm-font);

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        color 0.3s ease;
}


.wdm-dropdown-btn:hover {

    color:
        var(--wdm-red);
}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.wdm-dropdown-btn i {

    color:
        var(--wdm-grey);

    font-size:
        10px;

    transition:
        transform 0.3s ease;
}


/* Desktop arrow */

.wdm-nav-dropdown:hover
.wdm-dropdown-btn i {

    transform:
        rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.wdm-dropdown-menu {

    position:
        absolute;

    top:
        calc(100% + 1px);

    left:
        50%;

    width:
        245px;

    padding:
        10px;

    background:
        #ffffff;

    border-top:
        3px solid
        var(--wdm-red);

    border-radius:
        0 0 8px 8px;

    box-shadow:
        0 18px 40px
        rgba(11, 67, 117, 0.17);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(-50%, 10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index:
        10000;
}


/* Desktop hover */

@media (min-width: 901px) {

    .wdm-nav-dropdown:hover
    .wdm-dropdown-menu {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translate(-50%, 0);
    }

}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.wdm-dropdown-menu a {

    display:
        block;

    padding:
        12px 14px;

    color:
        var(--wdm-primary);

    font-family:
        var(--wdm-font);

    font-size:
        14px;

    font-weight:
        600;

    border-radius:
        5px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}


.wdm-dropdown-menu a:hover {

    background:
        var(--wdm-primary-light);

    color:
        var(--wdm-red);

    padding-left:
        20px;
}


/* =========================================================
   GET QUOTE
========================================================= */

.wdm-header-quote {

    min-width:
        125px;

    height:
        44px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        var(--wdm-red);

    color:
        #ffffff;

    font-family:
        var(--wdm-font);

    font-size:
        14px;

    font-weight:
        800;

    border-radius:
        5px;

    white-space:
        nowrap;

    box-shadow:
        0 7px 18px
        rgba(229, 50, 55, 0.20);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.wdm-header-quote:hover {

    background:
        var(--wdm-primary);

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(11, 67, 117, 0.25);
}


.wdm-header-quote span {

    font-size:
        17px;

    transition:
        transform 0.3s ease;
}


.wdm-header-quote:hover span {

    transform:
        translateX(4px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.wdm-menu-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    margin-left:
        auto;

    padding:
        0;

    border:
        none;

    border-radius:
        5px;

    background:
        var(--wdm-primary);

    cursor:
        pointer;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;
}


.wdm-menu-toggle span {

    width:
        21px;

    height:
        2px;

    background:
        #ffffff;

    border-radius:
        3px;

    transition:
        all 0.3s ease;
}


/* =========================================================
   HAMBURGER ACTIVE
========================================================= */

.wdm-menu-toggle.active
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.wdm-menu-toggle.active
span:nth-child(2) {

    opacity:
        0;
}


.wdm-menu-toggle.active
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

@media (max-width: 1100px) {

    .wdm-header-container {

        width:
            94%;

        gap:
            18px;
    }


    .wdm-logo {

        width:
            140px;
    }


    .wdm-logo img {

        width:
            135px;
    }


    .wdm-main-nav {

        gap:
            22px;
    }


    .wdm-nav-link,
    .wdm-dropdown-btn {

        font-size:
            14px;
    }


    .wdm-contact-item {

        font-size:
            12px;
    }


    .wdm-header-top {

        gap:
            12px;
    }


    .wdm-header-quote {

        min-width:
            110px;

        padding:
            0 14px;

        font-size:
            13px;
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 900px) {

    .wdm-header-container {

        min-height:
            78px;
    }


    .wdm-logo {

        width:
            auto;
    }


    .wdm-logo img {

        width:
            130px;

        max-height:
            75px;
    }


    .wdm-menu-toggle {

        display:
            flex;
    }


    .wdm-header-quote {

        display:
            none;
    }


    /* MOBILE PANEL */

    .wdm-header-right {

        position:
            absolute;

        top:
            78px;

        left:
            0;

        right:
            0;

        width:
            100%;

        padding:
            15px 20px 20px;

        display:
            none;

        background:
            #ffffff;

        border-top:
            1px solid var(--wdm-border);

        box-shadow:
            0 15px 35px
            rgba(11, 67, 117, 0.15);

        animation:
            wdmMenuSlide 0.3s ease;
    }


    .wdm-header-right.wdm-menu-open {

        display:
            block;
    }


    @keyframes wdmMenuSlide {

        from {

            opacity:
                0;

            transform:
                translateY(-10px);
        }

        to {

            opacity:
                1;

            transform:
                translateY(0);
        }

    }


    /* CONTACT */

    .wdm-header-top {

        min-height:
            auto;

        padding-bottom:
            14px;

        justify-content:
            flex-start;

        flex-wrap:
            wrap;

        gap:
            10px 16px;
    }


    .wdm-contact-item {

        font-size:
            12px;
    }


    .wdm-contact-item i {

        width:
            30px;

        height:
            30px;
    }


    .wdm-social {

        margin-left:
            0;
    }


    .wdm-social a {

        width:
            30px;

        height:
            30px;
    }


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

    .wdm-main-nav {

        min-height:
            auto;

        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            flex-start;

        gap:
            0;

        padding-top:
            8px;
    }


    .wdm-nav-link {

        width:
            100%;

        height:
            auto;

        min-height:
            48px;

        padding:
            12px 5px;

        justify-content:
            flex-start;

        border-bottom:
            1px solid var(--wdm-border);
    }


    .wdm-nav-link.active::after {

        display:
            none;
    }


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

    .wdm-nav-dropdown {

        width:
            100%;

        height:
            auto;

        display:
            block;
    }


    .wdm-dropdown-btn {

        width:
            100%;

        height:
            48px;

        justify-content:
            space-between;

        border-bottom:
            1px solid var(--wdm-border);
    }


    /* IMPORTANT:
       JS adds this class when clicked */

    .wdm-dropdown-btn.wdm-dropdown-active i {

        transform:
            rotate(180deg);
    }


    .wdm-dropdown-menu {

        position:
            static;

        width:
            100%;

        display:
            none;

        padding:
            5px 0 5px 15px;

        background:
            var(--wdm-grey-light);

        border:
            none;

        border-left:
            3px solid
            var(--wdm-red);

        border-radius:
            0;

        box-shadow:
            none;

        opacity:
            1;

        visibility:
            visible;

        transform:
            none;
    }


    .wdm-dropdown-menu.wdm-dropdown-open {

        display:
            block;
    }


    .wdm-dropdown-menu a {

        padding:
            11px 12px;
    }


    .wdm-dropdown-menu a:hover {

        padding-left:
            17px;
    }

}


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

@media (max-width: 600px) {

    .wdm-header-container {

        width:
            92%;

        min-height:
            72px;

        gap:
            10px;
    }


    .wdm-logo img {

        width:
            120px;

        max-height:
            68px;
    }


    .wdm-menu-toggle {

        width:
            42px;

        height:
            42px;
    }


    .wdm-header-right {

        top:
            72px;

        padding:
            12px 15px 18px;
    }


    /* MOBILE CONTACT GRID */

    .wdm-header-top {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            8px;
    }


    .wdm-contact-item {

        font-size:
            10px;

        gap:
            5px;

        min-width:
            0;
    }


    .wdm-contact-item span {

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .wdm-contact-item i {

        width:
            27px;

        height:
            27px;

        min-width:
            27px;

        font-size:
            10px;
    }


    /* SOCIAL */

    .wdm-social {

        grid-column:
            1 / -1;

        justify-content:
            flex-start;

        padding-top:
            3px;
    }


    .wdm-social a {

        width:
            29px;

        height:
            29px;

        font-size:
            11px;
    }


    .wdm-nav-link {

        font-size:
            14px;
    }


    .wdm-dropdown-btn {

        font-size:
            14px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wdm-header-container {

        width:
            92%;
    }


    .wdm-logo img {

        width:
            108px;
    }


    .wdm-contact-item {

        font-size:
            9px;
    }


    .wdm-contact-item i {

        width:
            25px;

        height:
            25px;

        min-width:
            25px;
    }


    .wdm-menu-toggle {

        width:
            40px;

        height:
            40px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.wdm-nav-link:focus-visible,
.wdm-dropdown-btn:focus-visible,
.wdm-header-quote:focus-visible,
.wdm-menu-toggle:focus-visible,
.wdm-social a:focus-visible,
.wdm-contact-item:focus-visible {

    outline:
        3px solid
        rgba(229, 50, 55, 0.25);

    outline-offset:
        3px;
}


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

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

    .wdm-header,
    .wdm-header *,
    .wdm-header *::before,
    .wdm-header *::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   AVENGERS Automation
   PREMIUM 3D SECURITY SYSTEM HERO SLIDER

   BRAND COLORS:
   #e53237 = RED
   #0b4375 = DEEP BLUE

   FONT:
   Aptos Serif / Georgia / serif
========================================================= */

:root {
    --av-red: #e53237;
    --av-blue: #0b4375;
    --av-blue-dark: #062b4d;
    --av-blue-deep: #041b30;
    --av-white: #ffffff;
    --av-light: #f4f7fa;
    --av-grey: #c8d1d9;
    --av-glass: rgba(255,255,255,0.08);
    --av-border: rgba(255,255,255,0.22);
}

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

.avenger-hero *,
.avenger-hero *::before,
.avenger-hero *::after {
    box-sizing: border-box;
}

.avenger-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: "Aptos Serif", Georgia, serif;
    background: var(--av-blue-deep);
}

/* =========================================================
   SLIDER
========================================================= */

.avenger-slider {
    position: relative;
    width: 100%;
    height: 580px;
    overflow: hidden;
    isolation: isolate;
}

/* =========================================================
   SLIDES
========================================================= */

.avenger-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

.avenger-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.avenger-bg {
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 8s ease;
}

.avenger-slide.active .avenger-bg {
    transform: scale(1.08);
}

/* =========================================================
   LIGHT BLUE OVERLAY
   Reduced darkness for better image visibility
========================================================= */

.avenger-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(4, 27, 48, 0.78) 0%,
            rgba(11, 67, 117, 0.65) 32%,
            rgba(11, 67, 117, 0.42) 60%,
            rgba(4, 27, 48, 0.12) 100%
        );
    pointer-events: none;
}

/* Subtle red lighting on product side */

.avenger-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 43%;
    height: 100%;
    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(229, 50, 55, 0.18),
            transparent 65%
        );
    pointer-events: none;
}

/* =========================================================
   TECHNOLOGY GRID
========================================================= */

.avenger-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.10;
    background-image:
        linear-gradient(
            rgba(255,255,255,0.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.10) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 88%
        );
    pointer-events: none;
}

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

.avenger-container {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1420px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.avenger-content {
    position: relative;
    z-index: 15;
    width: 58%;
    padding-top: 0;
    animation: avengerContentIn 0.85s ease both;
}

@keyframes avengerContentIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   BRAND EYEBROW
========================================================= */

.avenger-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 17px;
    color: var(--av-white);
    font-family: "Aptos Serif", Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.avenger-eyebrow::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--av-red),
            var(--av-white)
        );
}

/* =========================================================
   MAIN HEADING
   ORIGINAL SERIF FONT PRESERVED
========================================================= */

.avenger-content h1 {
    margin: 0 0 16px;
    color: var(--av-white);
    font-family: "Aptos Serif", Georgia, serif;
    font-size: clamp(42px, 4.7vw, 65px);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -1.2px;
    text-shadow: 0 5px 22px rgba(0,0,0,0.20);
}

.avenger-content h1 span {
    display: block;
    margin-top: 5px;
    color: #ff6469;
    font-family: "Aptos Serif", Georgia, serif;
    font-weight: 600;
}

/* =========================================================
   TAGLINE
========================================================= */

.avenger-tagline {
    margin: 0 0 14px;
    color: var(--av-white);
    font-family: "Aptos Serif", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.avenger-description {
    max-width: 620px;
    margin: 0 0 23px;
    color: rgba(255,255,255,0.94);
    font-family: "Aptos Serif", Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

.avenger-description strong {
    color: var(--av-white);
    font-weight: 700;
}

/* =========================================================
   FEATURES
========================================================= */

.avenger-features {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 0;
}

.avenger-feature {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-right: 1px solid rgba(255,255,255,0.28);
}

.avenger-feature:first-child {
    padding-left: 0;
}

.avenger-feature:last-child {
    border-right: none;
}

/* FEATURE ICON */

.avenger-feature-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 9px;
    border: 1px solid rgba(255,255,255,0.62);
    border-radius: 50%;
    color: var(--av-white);
    font-size: 14px;
    transition: all 0.3s ease;
}

.avenger-feature:hover .avenger-feature-icon {
    background: var(--av-red);
    border-color: var(--av-red);
    transform: rotate(8deg) scale(1.08);
}

/* FEATURE TEXT */

.avenger-feature strong,
.avenger-feature small {
    display: block;
    color: var(--av-white);
    font-family: "Aptos Serif", Georgia, serif;
    white-space: nowrap;
}

.avenger-feature strong {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.avenger-feature small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.84;
}

/* =========================================================
   PREMIUM BUTTON
========================================================= */

.avenger-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 13px 23px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 4px;
    background: var(--av-red);
    color: var(--av-white);
    font-family: "Aptos Serif", Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 27px rgba(229,50,55,0.23);
    transition: all 0.35s ease;
}

.avenger-button::before {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.25),
            transparent
        );
    transition: left 0.6s ease;
}

.avenger-button:hover::before {
    left: 100%;
}

.avenger-button:hover {
    background: var(--av-blue);
    transform: translateY(-3px);
    box-shadow: 0 13px 30px rgba(11,67,117,0.35);
}

.avenger-button span {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.avenger-button:hover span {
    transform: translateX(5px);
}

/* =========================================================
   PRODUCT AREA
========================================================= */

.avenger-product {
    position: absolute;
    right: -1%;
    bottom: 0;
    width: 46%;
    height: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    pointer-events: none;
}

/* =========================================================
   PRODUCT IMAGE
========================================================= */

.avenger-product img {
    position: relative;
    z-index: 5;
    display: block;
    width: auto;
    max-width: 75%;
    max-height: 390px;
    object-fit: contain;
    filter:
        drop-shadow(
            0 23px 28px rgba(0,0,0,0.40)
        );
    animation: avengerProductFloat 5s ease-in-out infinite;
    transition: transform 0.8s ease;
}

@keyframes avengerProductFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-11px) rotate(1deg);
    }
}

/* =========================================================
   PRODUCT GLOW
========================================================= */

.avenger-product-glow {
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(229,50,55,0.23) 0%,
            rgba(11,67,117,0.19) 38%,
            rgba(255,255,255,0.06) 55%,
            transparent 72%
        );
    filter: blur(7px);
    z-index: 1;
    animation: avengerGlowPulse 4s ease-in-out infinite;
}

@keyframes avengerGlowPulse {
    0%, 100% {
        transform: scale(0.93);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.07);
        opacity: 1;
    }
}

/* =========================================================
   PRODUCT RING
========================================================= */

.avenger-product-ring {
    position: absolute;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow:
        0 0 0 1px rgba(229,50,55,0.07),
        inset 0 0 55px rgba(229,50,55,0.05);
    animation: avengerRingRotate 20s linear infinite;
}

.avenger-product-ring::before {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    border: 1px dashed rgba(229,50,55,0.36);
}

@keyframes avengerRingRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   PRODUCT ORBIT
========================================================= */

.avenger-product-orbit {
    position: absolute;
    width: 450px;
    height: 180px;
    border: 1px solid rgba(255,255,255,0.19);
    border-radius: 50%;
    transform: rotate(-18deg);
    animation: avengerOrbit 10s linear infinite;
}

.avenger-product-orbit span {
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--av-red);
    box-shadow: 0 0 20px var(--av-red);
    transform: translateY(-50%);
}

@keyframes avengerOrbit {
    from {
        transform: rotate(-18deg);
    }

    to {
        transform: rotate(342deg);
    }
}

/* =========================================================
   SLIDE NUMBER
========================================================= */

.avenger-slide-number {
    position: absolute;
    right: 38px;
    bottom: 32px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--av-white);
}

.avenger-slide-number span {
    font-size: 25px;
    font-weight: 600;
}

.avenger-slide-number i {
    width: 34px;
    height: 1px;
    background: rgba(255,255,255,0.55);
}

.avenger-slide-number small {
    font-size: 11px;
    opacity: 0.78;
}

/* =========================================================
   NAVIGATION ARROWS
========================================================= */

.avenger-prev,
.avenger-next {
    position: absolute;
    top: 50%;
    z-index: 30;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 50%;
    background: rgba(11,67,117,0.48);
    backdrop-filter: blur(8px);
    color: var(--av-white);
    font-size: 17px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.35s ease;
}

.avenger-prev {
    left: 17px;
}

.avenger-next {
    right: 17px;
}

.avenger-prev:hover,
.avenger-next:hover {
    background: var(--av-red);
    border-color: var(--av-red);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 9px 24px rgba(229,50,55,0.28);
}

/* =========================================================
   SLIDER DOTS
========================================================= */

.avenger-dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
}

.avenger-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    transition: all 0.35s ease;
}

.avenger-dot.active {
    width: 29px;
    background: var(--av-red);
    border-color: var(--av-red);
    box-shadow: 0 0 12px rgba(229,50,55,0.4);
}

/* =========================================================
   BOTTOM PROGRESS
========================================================= */

.avenger-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    z-index: 30;
    background: rgba(255,255,255,0.15);
}

.avenger-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            var(--av-red),
            #ff777b
        );
    transform: scaleX(0);
    transform-origin: left;
}

.avenger-progress span.playing {
    animation: avengerProgress 6s linear forwards;
}

@keyframes avengerProgress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

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

@media (max-width: 1100px) {
    .avenger-slider {
        height: 510px;
    }

    .avenger-container {
        width: 92%;
    }

    .avenger-content {
        width: 60%;
    }

    .avenger-content h1 {
        font-size: 47px;
    }

    .avenger-description {
        max-width: 530px;
        font-size: 13px;
    }

    .avenger-feature {
        padding-left: 7px;
        padding-right: 7px;
    }

    .avenger-feature-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
        margin-right: 6px;
    }

    .avenger-feature strong {
        font-size: 10px;
    }

    .avenger-feature small {
        font-size: 9px;
    }

    .avenger-product img {
        max-width: 72%;
        max-height: 320px;
    }

    .avenger-product-ring {
        width: 330px;
        height: 330px;
    }

    .avenger-product-orbit {
        width: 370px;
    }

    .avenger-product-glow {
        width: 300px;
        height: 300px;
    }
}

/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {
    .avenger-slider {
        height: 480px;
    }

    .avenger-content {
        width: 63%;
    }

    .avenger-content h1 {
        font-size: 40px;
    }

    .avenger-tagline {
        font-size: 15px;
    }

    .avenger-feature {
        padding-left: 5px;
        padding-right: 5px;
    }

    .avenger-product {
        width: 43%;
    }

    .avenger-product img {
        max-height: 285px;
    }

    .avenger-product-ring {
        width: 290px;
        height: 290px;
    }

    .avenger-product-orbit {
        width: 330px;
        height: 145px;
    }

    .avenger-product-glow {
        width: 270px;
        height: 270px;
    }
}

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

@media (max-width: 768px) {
    .avenger-slider {
        height: 660px;
    }

    .avenger-bg {
        background-position: center;
    }

    .avenger-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4,27,48,0.78) 0%,
                rgba(11,67,117,0.62) 48%,
                rgba(4,27,48,0.40) 100%
            );
    }

    .avenger-overlay::after {
        width: 100%;
        background:
            radial-gradient(
                circle at 50% 75%,
                rgba(229,50,55,0.14),
                transparent 60%
            );
    }

    .avenger-container {
        width: 90%;
        align-items: flex-start;
        justify-content: center;
    }

    .avenger-content {
        width: 100%;
        padding-top: 43px;
        text-align: center;
    }

    .avenger-eyebrow {
        justify-content: center;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .avenger-eyebrow::before {
        display: none;
    }

    .avenger-content h1 {
        font-size: 35px;
        line-height: 1.12;
        letter-spacing: -0.5px;
        margin-bottom: 13px;
    }

    .avenger-tagline {
        font-size: 14px;
    }

    .avenger-description {
        max-width: 450px;
        margin: 0 auto 18px;
        font-size: 12.5px;
        line-height: 1.6;
    }

    .avenger-features {
        display: none;
    }

    .avenger-button {
        padding: 12px 19px;
        font-size: 12px;
    }

    .avenger-product {
        width: 75%;
        height: 40%;
        right: 12.5%;
        bottom: 43px;
    }

    .avenger-product img {
        max-width: 70%;
        max-height: 190px;
    }

    .avenger-product-ring {
        width: 225px;
        height: 225px;
    }

    .avenger-product-orbit {
        width: 275px;
        height: 115px;
    }

    .avenger-product-glow {
        width: 215px;
        height: 215px;
    }

    .avenger-prev,
    .avenger-next {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .avenger-prev {
        left: 8px;
    }

    .avenger-next {
        right: 8px;
    }

    .avenger-slide-number {
        display: none;
    }

    .avenger-dots {
        bottom: 18px;
    }
}

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

@media (max-width: 480px) {
    .avenger-slider {
        height: 620px;
    }

    .avenger-content {
        padding-top: 38px;
    }

    .avenger-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .avenger-content h1 {
        font-size: 29px;
        line-height: 1.14;
    }

    .avenger-tagline {
        font-size: 13px;
    }

    .avenger-description {
        max-width: 340px;
        font-size: 12px;
    }

    .avenger-button {
        padding: 11px 17px;
        font-size: 12px;
    }

    .avenger-product {
        width: 76%;
        right: 12%;
        bottom: 39px;
    }

    .avenger-product img {
        max-width: 74%;
        max-height: 165px;
    }

    .avenger-product-ring {
        width: 195px;
        height: 195px;
    }

    .avenger-product-glow {
        width: 185px;
        height: 185px;
    }

    .avenger-product-orbit {
        width: 235px;
        height: 100px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {
    .avenger-slider {
        height: 590px;
    }

    .avenger-content {
        padding-top: 35px;
    }

    .avenger-content h1 {
        font-size: 26px;
    }

    .avenger-description {
        font-size: 11.5px;
    }

    .avenger-product {
        bottom: 34px;
    }

    .avenger-product img {
        max-height: 145px;
    }

    .avenger-product-ring {
        width: 175px;
        height: 175px;
    }

    .avenger-product-glow {
        width: 165px;
        height: 165px;
    }

    .avenger-product-orbit {
        width: 210px;
        height: 90px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .avenger-hero *,
    .avenger-hero *::before,
    .avenger-hero *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   
   PREMIUM PRODUCTS + MATERIALS
   LIGHT INDUSTRIAL VERSION

   COLORS:
   BLUE  #0b4375
   RED   #e53237

   FONT:
   Aptos Serif / Georgia / Serif
========================================================= */

/* ==========================================
   AVENGERS Automation
   IMAGE-BASED SERVICES SECTION
   Blue: #0b4375 | Red: #e53237
========================================== */

.av-services-section {
    --av-blue: #0b4375;
    --av-red: #e53237;
    --av-dark: #10263d;
    --av-text: #59697b;
    --av-border: #e4eaf1;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 24px;
    background: #f5f7fa;
    font-family: inherit;
}

.av-services-section *,
.av-services-section *::before,
.av-services-section *::after {
    box-sizing: border-box;
}

.av-services-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    z-index: -1;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(11, 67, 117, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(11, 67, 117, 0.025),
        0 0 0 90px rgba(11, 67, 117, 0.02);
    pointer-events: none;
}

.av-services-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* SECTION HEADING */

.av-services-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.av-services-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--av-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.av-services-eyebrow-line {
    display: inline-block;
    width: 30px;
    height: 2px;
    background: var(--av-red);
}

.av-services-heading h2 {
    margin: 0 0 18px;
    color: var(--av-blue);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -1.3px;
}

.av-services-heading h2 span {
    display: block;
    color: var(--av-red);
}

.av-services-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--av-text);
    font-size: 16px;
    line-height: 1.8;
}

/* GRID */

.av-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 23px;
}

/* SERVICE CARD */

.av-service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: var(--av-dark);
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--av-border);
    border-radius: 12px;
    box-shadow: 0 5px 22px rgba(16, 38, 61, 0.045);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.av-service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(11, 67, 117, 0.25);
    box-shadow: 0 18px 38px rgba(11, 67, 117, 0.13);
}

/* IMAGE AREA */

.av-service-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e7edf4;
}

.av-service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.4s ease;
}

.av-service-card:hover .av-service-image img {
    transform: scale(1.075);
    filter: saturate(1.08);
}

/* Image tint on hover */

.av-service-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 67, 117, 0.04) 20%,
        rgba(11, 67, 117, 0.30) 100%
    );
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.av-service-card:hover .av-service-image-overlay {
    opacity: 1;
}

/* NUMBER BADGE */

.av-service-number {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background: var(--av-red);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13);
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.av-service-card:hover .av-service-number {
    background: var(--av-blue);
    transform: rotate(8deg) scale(1.06);
}

/* CARD CONTENT */

.av-service-content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 23px 21px 22px;
    border-top: 3px solid transparent;
    transition: border-color 0.3s ease;
}

.av-service-card:hover .av-service-content {
    border-top-color: var(--av-red);
}

.av-service-content h3 {
    margin: 0 0 11px;
    color: var(--av-blue);
    font-size: 19px;
    font-weight: 750;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.av-service-card:hover .av-service-content h3 {
    color: var(--av-red);
}

.av-service-content p {
    margin: 0 0 22px;
    color: var(--av-text);
    font-size: 14px;
    line-height: 1.75;
}

.av-service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: var(--av-blue);
    font-size: 13px;
    font-weight: 800;
    transition: color 0.3s ease;
}

.av-service-link b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    color: var(--av-red);
    background: #fff0f0;
    border-radius: 50%;
    font-size: 17px;
    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}

.av-service-card:hover .av-service-link {
    color: var(--av-red);
}

.av-service-card:hover .av-service-link b {
    color: #ffffff;
    background: var(--av-red);
    transform: translate(3px, -2px);
}

/* FEATURED AMC CARD */

.av-service-card-featured {
    border-color: rgba(229, 50, 55, 0.30);
}

.av-service-card-featured .av-service-content {
    background: linear-gradient(145deg, #ffffff, #fff6f6);
}

/* BOTTOM CALL TO ACTION */

.av-services-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 48px;
    padding: 36px 40px;
    overflow: hidden;
    color: #ffffff;
    background: var(--av-blue);
    border-radius: 14px;
}

.av-services-footer::after {
    content: "";
    position: absolute;
    top: -120px;
    right: 200px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.025);
    pointer-events: none;
}

.av-services-footer > div {
    position: relative;
    z-index: 1;
}

.av-services-footer-label {
    display: block;
    margin-bottom: 10px;
    color: #ffb9bb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.av-services-footer h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 750;
    line-height: 1.4;
}

.av-services-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 16px;
    min-height: 52px;
    padding: 0 23px;
    color: #ffffff;
    text-decoration: none;
    background: var(--av-red);
    border: 1px solid var(--av-red);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 750;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.av-services-cta:hover {
    color: #ffffff;
    background: #c9212a;
    transform: translateY(-2px);
}

.av-services-cta span {
    font-size: 20px;
}

/* TABLET */

@media (max-width: 1024px) {
    .av-services-section {
        padding: 80px 22px;
    }

    .av-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 19px;
    }

    .av-service-content {
        padding: 21px 18px;
    }

    .av-service-content h3 {
        font-size: 18px;
    }

    .av-services-footer {
        padding: 30px;
    }
}

/* MOBILE / TABLET */

@media (max-width: 760px) {
    .av-services-section {
        padding: 65px 18px;
    }

    .av-services-heading {
        margin-bottom: 38px;
    }

    .av-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .av-service-image {
        aspect-ratio: 4 / 3;
    }

    .av-service-content {
        padding: 19px 16px;
    }

    .av-service-content h3 {
        font-size: 17px;
    }

    .av-service-content p {
        font-size: 13px;
    }

    .av-services-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        padding: 28px 24px;
    }
}

/* SMALL MOBILE */

@media (max-width: 420px) {
    .av-services-section {
        padding: 52px 14px;
    }

    .av-services-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .av-service-image {
        aspect-ratio: 16 / 10;
    }

    .av-service-content {
        padding: 22px;
    }

    .av-service-content h3 {
        font-size: 19px;
    }

    .av-service-content p {
        font-size: 14px;
    }

    .av-services-heading h2 {
        font-size: 32px;
        letter-spacing: -0.7px;
    }

    .av-services-heading > p {
        font-size: 14px;
    }

    .av-services-eyebrow {
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .av-services-eyebrow-line {
        width: 20px;
    }

    .av-services-cta {
        width: 100%;
    }
}

/* REDUCED MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .av-services-section *,
    .av-services-section *::before,
    .av-services-section *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}




/* =====================================================
   AVENGERS Automation — ABOUT US V2
   MEDIUM DARK INDUSTRIAL DESIGN

   FONT: APTOS
   BACKGROUND: #263442
   BLUE: #238be7
   RED: #e53237
===================================================== */


/* ---------- Base Section ---------- */

.av-about-v2,
.av-about-v2 * {
    box-sizing: border-box;
}

.av-about-v2 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 95px 0 35px;

    background:
        linear-gradient(
            135deg,
            #303e4c 0%,
            #263442 48%,
            #202d39 100%
        );

    color: #ffffff;
    font-family: "Aptos Serif", Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.av-about-v2 h2,
.av-about-v2 h3,
.av-about-v2 p {
    margin-top: 0;
}

.av-about-v2 h2,
.av-about-v2 h3,
.av-about-v2 strong {
    font-family: "Aptos Serif", Georgia, serif;
}

.av-about-v2 img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.av-about-v2 a {
    text-decoration: none;
}


/* ---------- Container ---------- */

.av-about-v2-container {
    width: min(1200px, 90%);
    margin: 0 auto;
}


/* ---------- Section Header ---------- */

.av-about-v2-header {
    margin-bottom: 55px;
}

.av-about-v2-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    color: #8fc8ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.5;
}

.av-about-v2-label-line {
    width: 35px;
    height: 3px;
    background: #e53237;
}

.av-about-v2-header-row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    align-items: end;
    gap: 50px;
}

.av-about-v2-header-row h2 {
    max-width: 800px;
    margin-bottom: 0;

    color: #ffffff;
    font-size: clamp(35px, 4.5vw, 58px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -1.5px;
}

.av-about-v2-header-row h2 span {
    display: block;
    color: #79bfff;
}

.av-about-v2-header-row > p {
    margin-bottom: 5px;

    color: #c0cbd5;
    font-size: 15px;
    line-height: 1.9;
}


/* ---------- Main Grid ---------- */

.av-about-v2-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: stretch;
    gap: 75px;
}


/* ---------- Image Area ---------- */

.av-about-v2-visual {
    position: relative;
    min-width: 0;
    padding: 0 20px 25px 0;
}

.av-about-v2-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 470px;

    background: #182633;
    border-radius: 4px;
}

.av-about-v2-image img {
    width: 100%;
    height: 100%;
    min-height: 470px;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.av-about-v2-image:hover img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.av-about-v2-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17, 29, 39, 0.02) 35%,
            rgba(17, 29, 39, 0.80) 100%
        );

    pointer-events: none;
}

.av-about-v2-image-caption {
    position: absolute;
    right: 25px;
    bottom: 25px;
    left: 25px;

    display: flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.5;
}

.av-about-v2-caption-line {
    width: 28px;
    height: 2px;
    background: #e53237;
    flex-shrink: 0;
}

/* Image Corner */

.av-about-v2-corner {
    position: absolute;
    z-index: -1;

    right: 0;
    bottom: 0;

    width: 125px;
    height: 125px;

    border-right: 4px solid #238be7;
    border-bottom: 4px solid #238be7;
}


/* ---------- Floating Brand Card ---------- */

.av-about-v2-image-card {
    position: absolute;
    z-index: 2;

    right: -30px;
    bottom: 65px;

    display: flex;
    align-items: center;
    gap: 15px;

    max-width: 295px;
    padding: 20px 23px;

    background: #f3f6f8;
    border-left: 4px solid #e53237;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.20);
}

.av-about-v2-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    background: #243d53;
    color: #ffffff;
}

.av-about-v2-card-text strong {
    display: block;
    margin-bottom: 3px;

    color: #1d2e3d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.av-about-v2-card-text span {
    display: block;

    color: #5c6d7b;
    font-size: 12px;
    line-height: 1.5;
}


/* ---------- Right Content ---------- */

.av-about-v2-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}


/* Intro */

.av-about-v2-intro {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 15px;

    margin-bottom: 23px;
    padding-bottom: 24px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.av-about-v2-intro-number {
    padding-top: 5px;

    color: #f05b60;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.av-about-v2-intro p {
    margin-bottom: 0;

    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.65;
}


/* Description */

.av-about-v2-description p {
    margin-bottom: 15px;

    color: #c1ccd6;
    font-size: 14px;
    line-height: 1.9;
}

.av-about-v2-description p:last-child {
    margin-bottom: 0;
}


/* ---------- Solutions List ---------- */

.av-about-v2-solutions {
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.av-about-v2-solution {
    display: grid;
    grid-template-columns: 42px 1fr 30px;
    align-items: center;
    gap: 16px;

    padding: 22px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    transition:
        padding 0.3s ease,
        background 0.3s ease;
}

.av-about-v2-solution:hover {
    padding-right: 10px;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.av-about-v2-solution-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(143, 200, 255, 0.4);

    color: #8fc8ff;
    font-size: 12px;
    font-weight: 700;
}

.av-about-v2-solution-info h3 {
    margin-bottom: 5px;

    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.av-about-v2-solution-info p {
    margin-bottom: 0;

    color: #b6c3ce;
    font-size: 13px;
    line-height: 1.7;
}

.av-about-v2-solution-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: #f05b60;
    font-size: 23px;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.av-about-v2-solution:hover .av-about-v2-solution-arrow {
    transform: translateX(5px);
    color: #ffffff;
}


/* ---------- Footer Actions ---------- */

.av-about-v2-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 32px;
}

.av-about-v2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    min-height: 54px;
    padding: 14px 23px;

    background: #e53237;
    border: 1px solid #e53237;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.av-about-v2-button:hover {
    transform: translateY(-3px);
    background: #c92730;
    border-color: #c92730;
    color: #ffffff;
}

.av-about-v2-button-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.av-about-v2-button:hover .av-about-v2-button-arrow {
    transform: translateX(5px);
}

.av-about-v2-footer-note {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #b6c3ce;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.5;
}

.av-about-v2-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #e53237;
    flex-shrink: 0;
}


/* ---------- Bottom Brand Strip ---------- */

.av-about-v2-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 75px;
    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.av-about-v2-bottom-brand {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.av-about-v2-bottom-brand span {
    color: #8fc8ff;
}

.av-about-v2-bottom-line {
    color: #9fb1c1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


/* ---------- Tablet ---------- */

@media (max-width: 1024px) {

    .av-about-v2 {
        padding: 80px 0 30px;
    }

    .av-about-v2-header-row {
        grid-template-columns: 1fr 0.65fr;
        gap: 30px;
    }

    .av-about-v2-grid {
        gap: 45px;
    }

    .av-about-v2-image,
    .av-about-v2-image img {
        min-height: 430px;
    }

    .av-about-v2-image-card {
        right: -15px;
        max-width: 260px;
        padding: 17px;
    }

    .av-about-v2-intro p {
        font-size: 17px;
    }

}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

    .av-about-v2 {
        padding: 65px 0 25px;
    }

    .av-about-v2-container {
        width: calc(100% - 36px);
    }

    .av-about-v2-header {
        margin-bottom: 38px;
    }

    .av-about-v2-header-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .av-about-v2-header-row h2 {
        font-size: clamp(34px, 8.5vw, 46px);
        letter-spacing: -0.8px;
        line-height: 1.15;
    }

    .av-about-v2-header-row > p {
        max-width: 500px;
        font-size: 14px;
        line-height: 1.8;
    }

    .av-about-v2-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .av-about-v2-visual {
        margin-right: 8px;
        padding: 0 12px 20px 0;
    }

    .av-about-v2-image,
    .av-about-v2-image img {
        height: 340px;
        min-height: 340px;
    }

    .av-about-v2-image-card {
        right: -5px;
        bottom: 38px;

        max-width: 260px;
        padding: 15px 17px;
        gap: 12px;
    }

    .av-about-v2-card-icon {
        width: 42px;
        height: 42px;
    }

    .av-about-v2-image-caption {
        right: 18px;
        bottom: 18px;
        left: 18px;
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .av-about-v2-content {
        padding: 0;
    }

    .av-about-v2-intro {
        grid-template-columns: 28px 1fr;
        gap: 12px;
    }

    .av-about-v2-intro p {
        font-size: 17px;
        line-height: 1.65;
    }

    .av-about-v2-description p {
        font-size: 14px;
        line-height: 1.85;
    }

    .av-about-v2-solution {
        grid-template-columns: 36px 1fr 22px;
        gap: 12px;
        padding: 19px 0;
    }

    .av-about-v2-solution-number {
        width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .av-about-v2-solution-info h3 {
        font-size: 15px;
    }

    .av-about-v2-solution-info p {
        font-size: 12px;
        line-height: 1.75;
    }

    .av-about-v2-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-top: 27px;
    }

    .av-about-v2-button {
        min-height: 50px;
        padding: 13px 20px;
    }

    .av-about-v2-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 50px;
        padding-top: 22px;
    }

}


/* ---------- Small Mobile ---------- */

@media (max-width: 380px) {

    .av-about-v2-container {
        width: calc(100% - 28px);
    }

    .av-about-v2-image,
    .av-about-v2-image img {
        height: 280px;
        min-height: 280px;
    }

    .av-about-v2-image-card {
        right: -4px;
        bottom: 28px;
        max-width: 235px;
    }

    .av-about-v2-card-text strong {
        font-size: 13px;
    }

    .av-about-v2-card-text span {
        font-size: 11px;
    }

    .av-about-v2-header-row h2 {
        font-size: 33px;
    }

}


/* ---------- Reduced Motion ---------- */

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

    .av-about-v2 *,
    .av-about-v2 *::before,
    .av-about-v2 *::after {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   AVENGERS Automation
   ANODES APPLICATIONS
   PREMIUM INDUSTRIAL DESIGN

   COLORS:
   BLUE  #0b4375
   RED   #e53237

   FONT:
   Aptos Serif / Georgia / Serif
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.reli-anodes-app,
.reli-anodes-app * {
    box-sizing: border-box;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.reli-anodes-app {
    position: relative;

    width: 100%;

    padding:
        115px 0
        95px;

    background: #f3f6f8;

    color: #0b4375;

    overflow: hidden;
}


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

.reli-anodes-app-container {
    width:
        min(
            1420px,
            calc(100% - 80px)
        );

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.reli-anodes-app-header {
    display: grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap: 100px;

    align-items: end;

    padding-bottom: 65px;

    border-bottom:
        1px solid
        rgba(11,67,117,.18);
}


/* =========================================================
   KICKER
========================================================= */

.reli-anodes-app-kicker {
    display: flex;

    align-items: center;

    gap: 14px;

    color: #0b4375;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.reli-anodes-app-kicker span {
    width: 42px;
    height: 2px;

    background: #e53237;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.reli-anodes-app-heading h2 {
    max-width: 780px;

    margin:
        22px 0 0;

    color: #0b4375;

    font-size:
        clamp(
            55px,
            7vw,
            102px
        );

    line-height: .88;

    font-weight: 400;

    letter-spacing: -5px;
}


.reli-anodes-app-heading h2 em {
    display: block;

    color: #e53237;

    font-style: italic;

    font-weight: 700;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.reli-anodes-app-intro {
    padding-left: 30px;

    border-left:
        2px solid
        rgba(229,50,55,.65);
}


.reli-anodes-app-intro > span {
    display: block;

    margin-bottom: 18px;

    color: #e53237;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.reli-anodes-app-intro p {
    max-width: 420px;

    margin: 0;

    color: #607487;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   APPLICATION LIST
========================================================= */

.reli-anodes-app-list {
    display: grid;

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

    gap: 20px;

    padding-top: 45px;
}


/* =========================================================
   CARD
========================================================= */

.reli-anodes-app-card {
    position: relative;

    background: #ffffff;

    border:
        1px solid
        #dce4ea;

    overflow: hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}


.reli-anodes-app-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(11,67,117,.30);

    box-shadow:
        0 25px 60px
        rgba(11,67,117,.12);
}


/* =========================================================
   IMAGE
========================================================= */

.reli-anodes-app-image {
    position: relative;

    height: 300px;

    display: flex;

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

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #eaf0f4,
            #f8fafb
        );
}


.reli-anodes-app-image img {
    position: relative;

    z-index: 2;

    width: 85%;
    height: 245px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 22px
            rgba(11,67,117,.16)
        );

    transition:
        transform .65s
        cubic-bezier(.2,.8,.2,1);
}


.reli-anodes-app-card:hover
.reli-anodes-app-image img {
    transform:
        scale(1.09)
        translateY(-5px);
}


/* =========================================================
   IMAGE TOP NUMBER
========================================================= */

.reli-anodes-app-number {
    position: absolute;

    z-index: 5;

    left: 18px;
    top: 18px;

    width: 38px;
    height: 38px;

    display: flex;

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

    background: #0b4375;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   IMAGE TAG
========================================================= */

.reli-anodes-app-image-tag {
    position: absolute;

    z-index: 5;

    right: 18px;
    top: 18px;

    padding:
        8px 11px;

    background: #ffffff;

    color: #0b4375;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.06);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.reli-anodes-app-content {
    padding:
        27px 27px 30px;
}


/* =========================================================
   CATEGORY
========================================================= */

.reli-anodes-app-content > span {
    display: block;

    margin-bottom: 13px;

    color: #e53237;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.reli-anodes-app-content h3 {
    margin: 0;

    color: #0b4375;

    font-size: 28px;

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -1px;
}


.reli-anodes-app-content h3 strong {
    display: block;

    font-weight: 700;
}


/* =========================================================
   CARD TEXT
========================================================= */

.reli-anodes-app-content p {
    min-height: 92px;

    margin:
        17px 0 23px;

    color: #687a89;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   CARD LINK
========================================================= */

.reli-anodes-app-content a {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 9px;

    color: #0b4375;

    text-decoration: none;

    border-bottom:
        1px solid
        #cbd5dc;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    transition:
        border-color .3s ease,
        color .3s ease;
}


.reli-anodes-app-content a b {
    display: flex;

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

    width: 27px;
    height: 27px;

    background: #e53237;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 14px;

    font-weight: 400;

    transition:
        transform .3s ease,
        background .3s ease;
}


.reli-anodes-app-content a:hover {
    color: #e53237;

    border-color: #e53237;
}


.reli-anodes-app-content a:hover b {
    transform:
        translate(
            4px,
            -4px
        );

    background: #0b4375;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.reli-anodes-app-bottom {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 80px;

    align-items: end;

    margin-top: 70px;

    padding-top: 40px;

    border-top:
        1px solid
        rgba(11,67,117,.18);
}


/* =========================================================
   BOTTOM TITLE
========================================================= */

.reli-anodes-app-bottom-title > span {
    display: block;

    margin-bottom: 13px;

    color: #e53237;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}


.reli-anodes-app-bottom-title h3 {
    max-width: 600px;

    margin: 0;

    color: #0b4375;

    font-size:
        clamp(
            32px,
            4vw,
            55px
        );

    line-height: 1;

    font-weight: 400;

    letter-spacing: -2px;
}


.reli-anodes-app-bottom-title h3 em {
    color: #e53237;

    font-style: italic;

    font-weight: 700;
}


/* =========================================================
   BOTTOM TEXT
========================================================= */

.reli-anodes-app-bottom > p {
    max-width: 520px;

    margin: 0;

    color: #687a89;

    font-size: 14px;

    line-height: 1.85;
}


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

@media (max-width: 1100px) {

    .reli-anodes-app-container {
        width: 92%;
    }


    .reli-anodes-app-header {
        gap: 50px;
    }


    .reli-anodes-app-list {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .reli-anodes-app-image {
        height: 330px;
    }

}


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

@media (max-width: 800px) {

    .reli-anodes-app {
        padding:
            85px 0
            70px;
    }


    .reli-anodes-app-header {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 50px;
    }


    .reli-anodes-app-heading h2 {
        font-size: 65px;

        letter-spacing: -3px;
    }


    .reli-anodes-app-intro {
        max-width: 600px;

        padding-left: 20px;
    }


    .reli-anodes-app-bottom {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}


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

@media (max-width: 600px) {

    .reli-anodes-app {
        padding:
            65px 0
            55px;
    }


    .reli-anodes-app-container {
        width: 90%;
    }


    .reli-anodes-app-list {
        grid-template-columns: 1fr;

        gap: 18px;

        padding-top: 35px;
    }


    .reli-anodes-app-heading h2 {
        font-size: 53px;

        letter-spacing: -2px;
    }


    .reli-anodes-app-intro p {
        font-size: 14px;
    }


    .reli-anodes-app-image {
        height: 320px;
    }


    .reli-anodes-app-image img {
        width: 82%;
        height: 260px;
    }


    .reli-anodes-app-content {
        padding:
            25px 23px 28px;
    }


    .reli-anodes-app-content h3 {
        font-size: 27px;
    }


    .reli-anodes-app-content p {
        min-height: auto;

        font-size: 13px;
    }


    .reli-anodes-app-bottom {
        margin-top: 50px;

        padding-top: 30px;
    }


    .reli-anodes-app-bottom-title h3 {
        font-size: 34px;
    }

}


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

@media (max-width: 400px) {

    .reli-anodes-app-heading h2 {
        font-size: 45px;
    }


    .reli-anodes-app-image {
        height: 290px;
    }


    .reli-anodes-app-image img {
        height: 235px;
    }


    .reli-anodes-app-content h3 {
        font-size: 25px;
    }

}


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

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

    .reli-anodes-app *,
    .reli-anodes-app::before,
    .reli-anodes-app::after {

        transition: none !important;

        animation: none !important;
    }

}

 /* =========================================================
   AVENGERS Automation
   PREMIUM LIGHT INDUSTRIES / ANODE APPLICATIONS
   COLORS:
   BLUE  : #0b4375
   RED   : #e53237
   FONT  : Aptos Serif, Georgia, serif
========================================================= */


/* =========================================================
   FONT
========================================================= */

.reli-industries-section,
.reli-industries-section * {
    font-family: "Aptos Serif", Georgia, serif;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.reli-industries-section {
    position: relative;

    padding: 95px 0 85px;

    background:
        linear-gradient(
            135deg,
            #f7f9fb 0%,
            #eef4f8 48%,
            #f9fbfc 100%
        );

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND GRID
========================================================= */

.reli-industries-grid-bg {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(11,67,117,0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,67,117,0.045) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    opacity: 0.7;

    pointer-events: none;
}


/* =========================================================
   TOP RED LIGHT
========================================================= */

.reli-industries-section::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    top: -350px;
    right: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229,50,55,0.10) 0%,
            rgba(229,50,55,0.035) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   LOWER BLUE LIGHT
========================================================= */

.reli-industries-section::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -350px;
    bottom: -360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(11,67,117,0.09) 0%,
            rgba(11,67,117,0.025) 38%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   BACKGROUND WATERMARK
========================================================= */

.reli-industries-bg-text {
    position: absolute;

    right: -20px;
    bottom: 25px;

    font-size: clamp(100px, 15vw, 240px);

    font-weight: 700;

    line-height: 0.8;

    letter-spacing: -10px;

    color: rgba(11,67,117,0.045);

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   WRAPPER
========================================================= */

.reli-industries-wrapper {
    position: relative;

    z-index: 3;

    width: min(1350px, 90%);

    margin: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.reli-industries-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 70px;

    margin-bottom: 45px;
}


/* =========================================================
   TITLE
========================================================= */

.reli-industries-title {
    padding-left: 22px;

    border-left: 4px solid #e53237;
}


/* =========================================================
   KICKER
========================================================= */

.reli-industries-kicker {
    display: block;

    margin-bottom: 10px;

    color: #e53237;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;
}


/* =========================================================
   HEADING
========================================================= */

.reli-industries-title h2 {
    margin: 0;

    color: #0b4375;

    font-size: clamp(43px, 5vw, 68px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -2.5px;
}


/* =========================================================
   HEADING HIGHLIGHT
========================================================= */

.reli-industries-title h2 strong {
    color: #e53237;

    font-weight: 700;
}


/* =========================================================
   INTRO AREA
========================================================= */

.reli-industries-intro {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    max-width: 475px;
}


/* =========================================================
   INTRO RED LINE
========================================================= */

.reli-industries-line {
    flex: 0 0 42px;

    width: 42px;
    height: 2px;

    margin-top: 9px;

    background: #e53237;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   MOVING LINE
========================================================= */

.reli-industries-line::after {
    content: "";

    position: absolute;

    left: -100%;
    top: 0;

    width: 100%;
    height: 100%;

    background: #0b4375;

    animation:
        reliIndustryLine 3s ease-in-out infinite;
}


@keyframes reliIndustryLine {

    0% {
        left: -100%;
    }

    45% {
        left: 100%;
    }

    100% {
        left: 100%;
    }

}


/* =========================================================
   INTRO TEXT
========================================================= */

.reli-industries-intro p {
    margin: 0;

    color: #53697b;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   INDUSTRY GRID
========================================================= */

.reli-industries-cards {
    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    grid-auto-rows: 215px;

    gap: 14px;
}


/* =========================================================
   CARD
========================================================= */

.reli-industry-card {
    position: relative;

    display: block;

    overflow: hidden;

    text-decoration: none;

    background: #ffffff;

    isolation: isolate;

    border: 1px solid rgba(11,67,117,0.12);

    box-shadow:
        0 10px 30px rgba(11,67,117,0.08);

    transition:
        transform 0.6s cubic-bezier(.16,1,.3,1),
        box-shadow 0.6s ease,
        border-color 0.5s ease;
}


/* =========================================================
   GRID SEQUENCE
========================================================= */


/* ROW 01 */

.reli-industry-card:nth-child(1) {
    grid-column: span 4;
}

.reli-industry-card:nth-child(2) {
    grid-column: span 4;
}

.reli-industry-card:nth-child(3) {
    grid-column: span 4;
}


/* ROW 02 */

.reli-industry-card:nth-child(4) {
    grid-column: span 3;
}

.reli-industry-card:nth-child(5) {
    grid-column: span 3;
}

.reli-industry-card:nth-child(6) {
    grid-column: span 6;
}


/* ROW 03 */

.reli-industry-card:nth-child(7) {
    grid-column: span 4;
}

.reli-industry-card:nth-child(8) {
    grid-column: span 4;
}

.reli-industry-card:nth-child(9) {
    grid-column: span 4;
}


/* =========================================================
   IMAGE
========================================================= */

.reli-industry-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.02);

    filter:
        saturate(0.86)
        brightness(0.92);

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter 0.7s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.reli-industry-card:hover img {
    transform: scale(1.10);

    filter:
        saturate(1.08)
        brightness(0.98)
        contrast(1.03);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.reli-industry-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02) 5%,
            rgba(6,35,58,0.12) 35%,
            rgba(3,28,49,0.84) 100%
        );

    transition:
        background 0.6s ease;
}


/* =========================================================
   HOVER OVERLAY
========================================================= */

.reli-industry-card:hover .reli-industry-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(11,67,117,0.05) 0%,
            rgba(7,47,78,0.28) 40%,
            rgba(3,26,46,0.92) 100%
        );
}


/* =========================================================
   NUMBER
========================================================= */

.reli-industry-number {
    position: absolute;

    top: 20px;
    left: 22px;

    z-index: 3;

    color: rgba(255,255,255,0.88);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        color 0.4s ease,
        transform 0.4s ease;
}


/* =========================================================
   NUMBER RED LINE
========================================================= */

.reli-industry-number::after {
    content: "";

    display: inline-block;

    width: 20px;
    height: 1px;

    margin-left: 8px;

    vertical-align: middle;

    background: #e53237;

    transition:
        width 0.4s ease;
}


.reli-industry-card:hover .reli-industry-number {
    color: #ffffff;

    transform: translateX(3px);
}


.reli-industry-card:hover .reli-industry-number::after {
    width: 32px;
}


/* =========================================================
   CONTENT
========================================================= */

.reli-industry-content {
    position: absolute;

    z-index: 3;

    left: 24px;
    right: 20px;
    bottom: 23px;
}


/* =========================================================
   CATEGORY
========================================================= */

.reli-industry-content span {
    display: block;

    margin-bottom: 7px;

    color: #ff5257;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.6px;
}


/* =========================================================
   TITLE
========================================================= */

.reli-industry-content h3 {
    margin: 0;

    max-width: 80%;

    color: #ffffff;

    font-size: clamp(20px, 2vw, 29px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.5px;

    transition:
        transform 0.5s cubic-bezier(.16,1,.3,1);
}


.reli-industry-card:hover .reli-industry-content h3 {
    transform: translateY(-3px);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.reli-industry-content p {
    max-width: 430px;

    margin: 9px 0 0;

    color: rgba(255,255,255,0.74);

    font-size: 11px;

    line-height: 1.55;

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 0.45s ease,
        transform 0.5s ease;
}


.reli-industry-card:hover .reli-industry-content p {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   ARROW
========================================================= */

.reli-industry-content i {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 40px;
    height: 40px;

    display: flex;

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

    border: 1px solid rgba(255,255,255,0.55);

    border-radius: 50%;

    color: #ffffff;

    font-size: 17px;

    font-style: normal;

    opacity: 0;

    transform:
        translateX(12px)
        rotate(-20deg);

    transition:
        opacity 0.4s ease,
        transform 0.5s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}


/* =========================================================
   ARROW HOVER
========================================================= */

.reli-industry-card:hover .reli-industry-content i {
    opacity: 1;

    transform:
        translateX(0)
        rotate(0deg);
}


.reli-industry-content i:hover {
    background: #e53237;

    border-color: #e53237;
}


/* =========================================================
   CARD SHINE
========================================================= */

.reli-industry-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
        );

    transform: skewX(-18deg);

    transition:
        left 0.9s ease;

    pointer-events: none;
}


.reli-industry-card:hover::before {
    left: 140%;
}


/* =========================================================
   RED BOTTOM ACCENT
========================================================= */

.reli-industry-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    z-index: 6;

    background: #e53237;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.5s ease;
}


.reli-industry-card:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   CARD HOVER
========================================================= */

.reli-industry-card:hover {
    transform: translateY(-7px);

    border-color: rgba(229,50,55,0.45);

    box-shadow:
        0 25px 50px rgba(11,67,117,0.16);
}


/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

@keyframes reliIndustryReveal {

    from {
        opacity: 0;

        transform:
            translateY(28px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.reli-industry-card {
    animation:
        reliIndustryReveal 0.8s ease both;
}


.reli-industry-card:nth-child(1) {
    animation-delay: .05s;
}

.reli-industry-card:nth-child(2) {
    animation-delay: .10s;
}

.reli-industry-card:nth-child(3) {
    animation-delay: .15s;
}

.reli-industry-card:nth-child(4) {
    animation-delay: .20s;
}

.reli-industry-card:nth-child(5) {
    animation-delay: .25s;
}

.reli-industry-card:nth-child(6) {
    animation-delay: .30s;
}

.reli-industry-card:nth-child(7) {
    animation-delay: .35s;
}

.reli-industry-card:nth-child(8) {
    animation-delay: .40s;
}

.reli-industry-card:nth-child(9) {
    animation-delay: .45s;
}


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

@media (max-width: 1000px) {

    .reli-industries-section {
        padding: 80px 0;
    }


    .reli-industries-header {
        gap: 40px;
    }


    .reli-industries-cards {
        grid-template-columns:
            repeat(6, 1fr);

        grid-auto-rows: 200px;
    }


    .reli-industry-card:nth-child(n) {
        grid-column: span 2;
    }


    .reli-industry-card:nth-child(7),
    .reli-industry-card:nth-child(8),
    .reli-industry-card:nth-child(9) {
        grid-column: span 2;
    }

}


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

@media (max-width: 650px) {

    .reli-industries-section {
        padding: 65px 0;
    }


    .reli-industries-wrapper {
        width: 92%;
    }


    .reli-industries-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

        margin-bottom: 32px;
    }


    .reli-industries-title {
        padding-left: 16px;

        border-left-width: 3px;
    }


    .reli-industries-title h2 {
        font-size: 43px;

        letter-spacing: -1px;
    }


    .reli-industries-intro {
        max-width: 100%;
    }


    .reli-industries-intro p {
        font-size: 13px;

        line-height: 1.7;
    }


    .reli-industries-cards {
        grid-template-columns: 1fr 1fr;

        grid-auto-rows: 205px;

        gap: 10px;
    }


    .reli-industry-card:nth-child(n) {
        grid-column: span 1;
    }


    .reli-industry-card:nth-child(3),
    .reli-industry-card:nth-child(6),
    .reli-industry-card:nth-child(9) {
        grid-column: span 2;
    }


    .reli-industry-content {
        left: 17px;

        right: 15px;

        bottom: 17px;
    }


    .reli-industry-content h3 {
        font-size: 20px;
    }


    .reli-industry-content span {
        font-size: 8px;

        letter-spacing: 1.8px;
    }


    .reli-industry-content p {
        display: none;
    }


    .reli-industry-content i {
        width: 32px;
        height: 32px;

        font-size: 14px;
    }


    .reli-industry-number {
        top: 15px;

        left: 17px;
    }

}


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

@media (max-width: 420px) {

    .reli-industries-section {
        padding: 55px 0;
    }


    .reli-industries-title h2 {
        font-size: 38px;
    }


    .reli-industries-cards {
        grid-auto-rows: 180px;

        gap: 8px;
    }


    .reli-industry-content {
        left: 14px;

        bottom: 14px;
    }


    .reli-industry-content h3 {
        font-size: 18px;
    }


    .reli-industry-content i {
        width: 29px;
        height: 29px;

        font-size: 12px;
    }


    .reli-industries-bg-text {
        font-size: 85px;

        letter-spacing: -5px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .reli-industries-line::after {
        animation: none;
    }


    .reli-industry-card {
        animation: none;
    }


    .reli-industry-card,
    .reli-industry-card img,
    .reli-industry-overlay,
    .reli-industry-content h3,
    .reli-industry-content p,
    .reli-industry-content i,
    .reli-industry-card::before,
    .reli-industry-card::after {
        transition: none;
    }

}
/* =========================================================
   AVENGERS Automation
   PREMIUM ANODE PRODUCTS SLIDER
   COLORS:
   #0b4375 - Deep Blue
   #e53237 - Red
   FONT:
   Aptos Serif, Georgia, serif
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --reli-blue: #0b4375;
    --reli-blue-dark: #062b4d;
    --reli-blue-deep: #041d34;
    --reli-red: #e53237;
    --reli-white: #ffffff;
    --reli-light: #dce7ef;
    --reli-muted: #91a7b9;
    --reli-border: rgba(255,255,255,0.10);
}


/* =========================================================
   SECTION
========================================================= */

.reli-products-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;
    background:
        linear-gradient(
            135deg,
            #061f36 0%,
            #082c4c 48%,
            #071f35 100%
        );
    color: var(--reli-white);
    font-family: "Aptos Serif", Georgia, serif;
}


/* =========================================================
   SUBTLE GRID BACKGROUND
========================================================= */

.reli-products-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
    pointer-events: none;
    opacity: 0.45;
}


/* =========================================================
   BLUE LIGHT
========================================================= */

.reli-products-section::after {
    content: "";
    position: absolute;

    width: 550px;
    height: 550px;

    top: -220px;
    right: -180px;

    background: radial-gradient(
        circle,
        rgba(11,67,117,0.55),
        transparent 68%
    );

    pointer-events: none;
}


/* =========================================================
   WATERMARK
========================================================= */

.reli-products-bg-text {
    position: absolute;
    top: 30px;
    right: -20px;

    font-family: "Aptos Serif", Georgia, serif;
    font-size: clamp(90px, 15vw, 230px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: -8px;

    color: rgba(255,255,255,0.025);

    pointer-events: none;
    user-select: none;

    white-space: nowrap;
}


/* =========================================================
   WRAPPER
========================================================= */

.reli-products-wrapper {
    position: relative;
    z-index: 2;

    width: min(1380px, 92%);
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.reli-products-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;
    margin-bottom: 55px;
}


/* =========================================================
   TITLE
========================================================= */

.reli-products-title {
    max-width: 720px;
}


.reli-products-title .reli-products-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 17px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #e53237;
}


.reli-products-title .reli-products-kicker::before {
    content: "";
    width: 35px;
    height: 2px;

    background: var(--reli-red);
}


.reli-products-title h2 {
    margin: 0;

    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.98;

    font-weight: 500;
    letter-spacing: -2.5px;

    color: var(--reli-white);
}


.reli-products-title h2 strong {
    display: block;

    color: var(--reli-red);
    font-weight: 600;
}


/* =========================================================
   INTRO
========================================================= */

.reli-products-intro {
    width: min(420px, 100%);

    display: flex;
    gap: 18px;

    padding-bottom: 5px;
}


.reli-products-intro .reli-products-line {
    flex: 0 0 2px;

    height: 72px;

    background: linear-gradient(
        to bottom,
        var(--reli-red),
        rgba(229,50,55,0.15)
    );
}


.reli-products-intro p {
    margin: 0;

    color: #a9bac8;

    font-size: 15px;
    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   CONTROLS
========================================================= */

.reli-products-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}


.reli-products-controls button {
    position: relative;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.035);

    color: #ffffff;

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

    font-family: Arial, sans-serif;
    font-size: 22px;

    cursor: pointer;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
}


.reli-products-controls button:hover {
    background: var(--reli-red);
    border-color: var(--reli-red);

    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================================
   SLIDER
========================================================= */

.reli-products-slider {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.reli-products-track {
    display: flex;

    gap: 25px;

    transition:
        transform 0.75s cubic-bezier(.77,0,.18,1);

    will-change: transform;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.reli-product-card {
    position: relative;

    flex: 0 0 calc((100% - 50px) / 3);

    min-width: 0;

    height: 525px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #103c60,
            #071d31
        );

    border: 1px solid rgba(255,255,255,0.10);

    transition:
        transform 0.55s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


.reli-product-card:hover {
    transform: translateY(-10px);

    border-color: rgba(229,50,55,0.55);

    box-shadow:
        0 25px 55px rgba(0,0,0,0.35),
        0 0 35px rgba(11,67,117,0.22);
}


/* =========================================================
   TOP RED LINE
========================================================= */

.reli-product-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: var(--reli-red);

    z-index: 10;

    transition: width 0.5s ease;
}


.reli-product-card:hover::before {
    width: 100%;
}


/* =========================================================
   NUMBER
========================================================= */

.reli-product-number {
    position: absolute;

    top: 22px;
    left: 24px;

    z-index: 5;

    font-family: Arial, sans-serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.65);
}


.reli-product-number::after {
    content: "";

    display: inline-block;

    width: 28px;
    height: 1px;

    margin-left: 10px;

    vertical-align: middle;

    background: var(--reli-red);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.reli-product-image {
    position: absolute;

    inset: 0;

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

    padding: 55px 35px 170px;

    overflow: hidden;
}


/* =========================================================
   IMAGE
========================================================= */

.reli-product-image img {
    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 22px rgba(0,0,0,0.45));

    transition:
        transform 0.75s cubic-bezier(.2,.7,.2,1),
        filter 0.5s ease;
}


.reli-product-card:hover .reli-product-image img {
    transform: scale(1.08) translateY(-7px);

    filter:
        drop-shadow(0 30px 28px rgba(0,0,0,0.55));
}


/* =========================================================
   IMAGE GLOW
========================================================= */

.reli-product-glow {
    position: absolute;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(11,67,117,0.65) 0%,
            rgba(11,67,117,0.25) 40%,
            transparent 72%
        );

    filter: blur(8px);

    transition:
        transform 0.6s ease,
        opacity 0.6s ease;
}


.reli-product-card:hover .reli-product-glow {
    transform: scale(1.15);

    opacity: 0.9;
}


/* =========================================================
   RED LIGHT ACCENT
========================================================= */

.reli-product-image::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229,50,55,0.18),
            transparent 70%
        );

    transition: transform 0.6s ease;
}


.reli-product-card:hover .reli-product-image::after {
    transform: scale(1.4);
}


/* =========================================================
   BOTTOM INFO PANEL
========================================================= */

.reli-product-info {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 6;

    padding: 27px 28px 26px;

    background:
        linear-gradient(
            to top,
            rgba(4,20,34,0.98) 0%,
            rgba(4,20,34,0.94) 75%,
            rgba(4,20,34,0.05) 100%
        );

    border-top: 1px solid rgba(255,255,255,0.06);

    transform: translateY(0);

    transition:
        background 0.4s ease;
}


.reli-product-card:hover .reli-product-info {
    background:
        linear-gradient(
            to top,
            rgba(4,20,34,1) 0%,
            rgba(4,20,34,0.96) 80%,
            rgba(4,20,34,0.10) 100%
        );
}


/* =========================================================
   CATEGORY
========================================================= */

.reli-product-info > span {
    display: block;

    margin-bottom: 8px;

    font-family: Arial, sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: var(--reli-red);
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.reli-product-info h3 {
    margin: 0;

    max-width: 80%;

    font-size: 25px;
    line-height: 1.15;

    font-weight: 500;

    color: #ffffff;

    transition:
        color 0.35s ease;
}


.reli-product-card:hover .reli-product-info h3 {
    color: #ffffff;
}


/* =========================================================
   PRODUCT ARROW
========================================================= */

.reli-product-arrow {
    position: absolute;

    right: 27px;
    bottom: 27px;

    width: 43px;
    height: 43px;

    border: 1px solid rgba(255,255,255,0.18);

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

    color: #ffffff;

    font-size: 19px;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.reli-product-card:hover .reli-product-arrow {
    background: var(--reli-red);
    border-color: var(--reli-red);

    transform: rotate(45deg);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.reli-products-bottom {
    display: flex;

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

    margin-top: 34px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.10);
}


.reli-products-count {
    display: flex;
    align-items: baseline;
    gap: 12px;
}


.reli-products-count strong {
    font-family: Arial, sans-serif;

    font-size: 18px;

    color: var(--reli-red);
}


.reli-products-count span {
    font-family: Arial, sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #7f94a5;
}


/* =========================================================
   BOTTOM DECORATIVE LINE
========================================================= */

.reli-products-bottom::after {
    content: "";

    width: 90px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--reli-red),
            transparent
        );
}


/* =========================================================
   CARD REVEAL
========================================================= */

@keyframes reliProductReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.reli-product-card {
    animation: reliProductReveal 0.8s ease both;
}


.reli-product-card:nth-child(1) {
    animation-delay: 0.05s;
}

.reli-product-card:nth-child(2) {
    animation-delay: 0.12s;
}

.reli-product-card:nth-child(3) {
    animation-delay: 0.19s;
}

.reli-product-card:nth-child(4) {
    animation-delay: 0.26s;
}

.reli-product-card:nth-child(5) {
    animation-delay: 0.33s;
}

.reli-product-card:nth-child(6) {
    animation-delay: 0.40s;
}


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

@media (max-width: 1100px) {

    .reli-products-section {
        padding: 90px 0 75px;
    }

    .reli-products-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

    .reli-products-intro {
        max-width: 600px;
    }

    .reli-products-controls {
        align-self: flex-end;
    }

    .reli-product-card {
        flex: 0 0 calc((100% - 25px) / 2);
        height: 500px;
    }

}


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

@media (max-width: 700px) {

    .reli-products-section {
        padding: 75px 0 60px;
    }


    .reli-products-wrapper {
        width: 90%;
    }


    .reli-products-bg-text {
        top: 45px;
        right: -40px;

        font-size: 90px;
        letter-spacing: -5px;
    }


    .reli-products-title h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }


    .reli-products-title .reli-products-kicker {
        font-size: 10px;
        letter-spacing: 2px;
    }


    .reli-products-header {
        margin-bottom: 35px;
        gap: 25px;
    }


    .reli-products-intro {
        width: 100%;
    }


    .reli-products-intro p {
        font-size: 14px;
        line-height: 1.7;
    }


    .reli-products-intro .reli-products-line {
        height: 65px;
    }


    .reli-products-controls {
        align-self: flex-start;
    }


    .reli-products-controls button {
        width: 48px;
        height: 48px;
    }


    .reli-product-card {
        flex: 0 0 100%;
        height: 480px;
    }


    .reli-product-image {
        padding:
            50px
            25px
            160px;
    }


    .reli-product-info {
        padding:
            24px
            22px
            23px;
    }


    .reli-product-info h3 {
        font-size: 22px;
    }


    .reli-product-arrow {
        right: 22px;
        bottom: 22px;

        width: 39px;
        height: 39px;
    }


    .reli-products-bottom {
        margin-top: 25px;
    }

}


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

@media (max-width: 420px) {

    .reli-products-title h2 {
        font-size: 37px;
    }


    .reli-product-card {
        height: 450px;
    }


    .reli-product-image {
        padding:
            45px
            20px
            155px;
    }


    .reli-product-number {
        left: 18px;
        top: 18px;
    }


    .reli-product-info {
        padding:
            21px
            18px
            21px;
    }


    .reli-product-info h3 {
        font-size: 20px;
    }


    .reli-product-arrow {
        right: 18px;
        bottom: 19px;
    }

}


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

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

    .reli-product-card,
    .reli-product-image img,
    .reli-product-glow,
    .reli-product-arrow,
    .reli-product-card::before,
    .reli-products-track {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   AVENGERS Automation
   PREMIUM WE PROVIDE SECTION
   3 COLUMN × 2 ROW
   COLORS:
   #0b4375 - Deep Blue
   #e53237 - Red
   FONT:
   Aptos Serif, Georgia, serif
========================================================= */

.reli-provide-new {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #0b4375;
    padding: 115px 0 90px;
    font-family: "Aptos Serif", Georgia, serif;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.reli-provide-new-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;

    background-image:
        linear-gradient(
            rgba(11, 67, 117, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11, 67, 117, .045) 1px,
            transparent 1px
        );

    background-size: 65px 65px;
}


/* =========================================================
   WATERMARK
========================================================= */

.reli-provide-new-watermark {
    position: absolute;
    top: 40px;
    right: -30px;

    font-size: clamp(100px, 16vw, 250px);
    line-height: .8;

    font-weight: 700;
    letter-spacing: -10px;

    color: rgba(11, 67, 117, .035);

    pointer-events: none;
    user-select: none;
}


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

.reli-provide-new-container {
    position: relative;
    width: min(1380px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.reli-provide-new-header {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 70px;

    align-items: end;

    margin-bottom: 65px;
}


/* LABEL */

.reli-provide-new-label {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #e53237;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.reli-provide-new-label span {
    width: 42px;
    height: 2px;
    background: #e53237;
    display: block;
}


/* HEADING */

.reli-provide-new-heading-wrap {
    max-width: 850px;
}

.reli-provide-new-heading-wrap h2 {
    margin: 0 0 20px;

    font-size: clamp(52px, 6vw, 88px);
    line-height: .95;

    font-weight: 600;
    letter-spacing: -3px;

    color: #0b4375;
}

.reli-provide-new-heading-wrap h2 strong {
    color: #e53237;
    font-weight: 600;
}

.reli-provide-new-heading-wrap p {
    max-width: 760px;

    margin: 0;

    font-family: "Aptos Serif", Georgia, serif;

    font-size: 18px;
    line-height: 1.8;

    color: #5c6872;
}


/* =========================================================
   GRID
========================================================= */

.reli-provide-new-grid-layout {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(11, 67, 117, .18);
    border-left: 1px solid rgba(11, 67, 117, .18);
}


/* =========================================================
   CARD
========================================================= */

.reli-provide-new-card {
    position: relative;

    min-height: 365px;

    padding: 35px 35px 32px;

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

    border-right: 1px solid rgba(11, 67, 117, .18);
    border-bottom: 1px solid rgba(11, 67, 117, .18);

    overflow: hidden;

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


/* TOP */

.reli-provide-new-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 55px;
}


/* NUMBER */

.reli-provide-new-number {
    font-family: "Aptos Serif", Georgia, serif;

    font-size: 18px;
    font-weight: 700;

    color: #e53237;

    letter-spacing: 1px;
}


/* ICON */

.reli-provide-new-icon {
    width: 62px;
    height: 62px;

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

    border: 1px solid rgba(11, 67, 117, .22);

    color: #0b4375;

    font-size: 23px;

    background: #ffffff;

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


/* CONTENT */

.reli-provide-new-content {
    position: relative;
    z-index: 2;
}


/* SMALL LABEL */

.reli-provide-new-small {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #e53237;
}


/* TITLE */

.reli-provide-new-content h3 {
    margin: 0 0 17px;

    font-size: clamp(27px, 2.3vw, 34px);
    line-height: 1.1;

    font-weight: 600;

    color: #0b4375;
}


/* PARAGRAPH */

.reli-provide-new-content p {
    max-width: 370px;

    margin: 0;

    font-family: "Aptos Serif", Georgia, serif;

    font-size: 16px;
    line-height: 1.75;

    color: #68737d;
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.reli-provide-new-line {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 0;

    height: 3px;

    background: #e53237;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .4s ease;
}


/* =========================================================
   ARROW
========================================================= */

.reli-provide-new-arrow {
    position: absolute;

    right: 30px;
    bottom: 27px;

    width: 40px;
    height: 40px;

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

    color: #0b4375;

    font-size: 13px;

    border: 1px solid rgba(11, 67, 117, .16);

    background: #ffffff;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


/* =========================================================
   HOVER
========================================================= */

.reli-provide-new-card:hover {
    background: #f5f9fc;

    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(11, 67, 117, .10);
}

.reli-provide-new-card:hover .reli-provide-new-icon {
    background: #0b4375;
    color: #ffffff;
    border-color: #0b4375;

    transform: rotate(-5deg);
}

.reli-provide-new-card:hover .reli-provide-new-line {
    transform: scaleX(1);
}

.reli-provide-new-card:hover .reli-provide-new-arrow {
    background: #e53237;
    color: #ffffff;
    border-color: #e53237;

    transform: translate(3px, -3px);
}


/* =========================================================
   FOOTER STRIP
========================================================= */

.reli-provide-new-footer {
    min-height: 92px;

    display: grid;

    grid-template-columns: 1fr 2fr 100px;

    align-items: center;

    border: 1px solid rgba(11, 67, 117, .18);
    border-top: none;

    padding: 0 35px;

    background: #0b4375;

    color: #ffffff;
}


/* BRAND */

.reli-provide-new-footer-brand {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

.reli-provide-new-footer-brand span {
    color: #e53237;
}


/* TEXT */

.reli-provide-new-footer-text {
    text-align: center;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: rgba(255, 255, 255, .78);
}

.reli-provide-new-footer-text b {
    margin: 0 12px;
    color: #e53237;
}


/* RS */

.reli-provide-new-footer-mark {
    justify-self: end;

    width: 55px;
    height: 55px;

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

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

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 2px;
}


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

@media (max-width: 1050px) {

    .reli-provide-new {
        padding: 90px 0 70px;
    }

    .reli-provide-new-container {
        width: min(94%, 900px);
    }

    .reli-provide-new-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .reli-provide-new-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }

    .reli-provide-new-card {
        min-height: 350px;
    }

    .reli-provide-new-footer {
        grid-template-columns: 1fr;
        gap: 15px;

        text-align: center;

        padding: 25px;
    }

    .reli-provide-new-footer-brand,
    .reli-provide-new-footer-mark {
        justify-self: center;
    }

}


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

@media (max-width: 650px) {

    .reli-provide-new {
        padding: 70px 0 55px;
    }

    .reli-provide-new-container {
        width: calc(100% - 30px);
    }

    .reli-provide-new-header {
        margin-bottom: 45px;
    }

    .reli-provide-new-heading-wrap h2 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .reli-provide-new-heading-wrap p {
        font-size: 16px;
        line-height: 1.7;
    }

    .reli-provide-new-grid-layout {
        grid-template-columns: 1fr;
    }

    .reli-provide-new-card {
        min-height: auto;
        padding: 30px 25px 35px;
    }

    .reli-provide-new-card-top {
        margin-bottom: 38px;
    }

    .reli-provide-new-content h3 {
        font-size: 29px;
    }

    .reli-provide-new-content p {
        max-width: none;
        font-size: 15px;
        line-height: 1.7;
    }

    .reli-provide-new-line {
        left: 25px;
        right: 25px;
    }

    .reli-provide-new-footer {
        padding: 25px 18px;
    }

    .reli-provide-new-footer-text {
        line-height: 2;
    }

    .reli-provide-new-footer-text b {
        display: none;
    }

}


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

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

    .reli-provide-new-card,
    .reli-provide-new-icon,
    .reli-provide-new-arrow,
    .reli-provide-new-line {
        transition: none;
    }

}



/* ==========================================
   AVENGERS Automation - ABOUT US PAGE
   Font: Aptos Serif
   Brand: Blue, Red and White
========================================== */

:root {
    --av-primary: #0b4375;
    --av-primary-dark: #062b4b;
    --av-blue: #238be7;
    --av-red: #e53237;
    --av-text: #26384a;
    --av-muted: #68798a;
    --av-light: #f4f7fa;
    --av-white: #ffffff;
    --av-border: #e0e7ee;
    --av-font: "Aptos Serif", Georgia, serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Aptos Serif", Georgia, serif;
    color: var(--av-text);
    background: var(--av-white);
    line-height: 1.75;
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.av-about-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

.av-about-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--av-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
}

.av-about-label::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--av-red);
}

.av-about-hero h1,
.av-about-who h2,
.av-about-solutions h2,
.av-about-why h2 {
    font-size: clamp(32px, 4vw, 49px);
    line-height: 1.2;
    letter-spacing: -1.2px;
    font-weight: 700;
}

.av-about-hero h1 span,
.av-about-who h2 span,
.av-about-solutions h2 span,
.av-about-why h2 span {
    color: var(--av-blue);
}

.av-about-hero p,
.av-about-who-content > p,
.av-about-center-heading > p,
.av-about-why-intro {
    color: var(--av-muted);
    font-size: 15px;
    line-height: 1.9;
}


/* ==========================================
   SECTION 1: HERO
========================================== */

.av-about-hero {
    position: relative;
    padding: 100px 0 105px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(35, 139, 231, 0.10),
            transparent 32%
        ),
        linear-gradient(135deg, #ffffff 40%, #f2f7fc 100%);
    overflow: hidden;
}

.av-about-hero::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -180px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(35, 139, 231, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.av-about-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 70px;
}

.av-about-hero-content {
    animation: avAboutSlideUp 0.8s ease both;
}

.av-about-hero h1 {
    margin: 23px 0;
    color: var(--av-primary-dark);
}

.av-about-hero h1 span {
    display: block;
    margin-top: 5px;
}

.av-about-hero-content > p {
    margin-bottom: 16px;
}

.av-about-btn {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    margin-top: 17px;
    padding: 15px 23px;
    color: var(--av-white);
    background: var(--av-primary);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.av-about-btn span {
    font-size: 20px;
    line-height: 1;
}

.av-about-btn:hover {
    background: var(--av-red);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(229, 50, 55, 0.2);
}

.av-about-hero-image {
    position: relative;
    min-height: 420px;
    border-radius: 8px;
    background: #dbe6f0;
    animation: avAboutFadeIn 1s ease 0.15s both;
}

.av-about-hero-image::before {
    content: "";
    position: absolute;
    inset: -14px 14px 14px -14px;
    border: 2px solid rgba(35, 139, 231, 0.35);
    border-radius: 8px;
    z-index: -1;
}

.av-about-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.av-about-image-tag {
    position: absolute;
    right: -18px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--av-white);
    color: var(--av-primary-dark);
    border-left: 4px solid var(--av-red);
    box-shadow: 0 10px 35px rgba(6, 43, 75, 0.12);
    font-size: 13px;
    font-weight: 700;
}

.av-about-status-dot {
    width: 9px;
    height: 9px;
    background: #29a76a;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(41, 167, 106, 0.12);
}


/* ==========================================
   SECTION 2: WHO WE ARE
========================================== */

.av-about-who {
    padding: 95px 0;
    background: var(--av-white);
}

.av-about-who-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
    gap: 85px;
}

.av-about-section-heading {
    position: sticky;
    top: 40px;
}

.av-about-who h2 {
    margin-top: 22px;
    color: var(--av-primary-dark);
}

.av-about-who h2 span {
    display: block;
}

.av-about-who-content > p {
    margin-bottom: 18px;
}

.av-about-highlight {
    display: flex;
    gap: 17px;
    align-items: stretch;
    margin-top: 27px;
    padding: 22px;
    background: var(--av-light);
    border-radius: 4px;
}

.av-about-highlight-line {
    flex: 0 0 4px;
    background: var(--av-red);
    border-radius: 4px;
}

.av-about-highlight p {
    color: var(--av-primary);
    font-size: 14px;
    line-height: 1.9;
}

.av-about-highlight strong {
    color: var(--av-primary-dark);
}


/* ==========================================
   SECTION 3: OUR SOLUTIONS
========================================== */

.av-about-solutions {
    position: relative;
    padding: 100px 0 110px;
    background: var(--av-light);
    overflow: hidden;
}

.av-about-solutions::before {
    content: "";
    position: absolute;
    top: -160px;
    left: -160px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(35, 139, 231, 0.15);
    border-radius: 50%;
}

.av-about-center-heading {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.av-about-center-heading .av-about-label {
    justify-content: center;
}

.av-about-center-heading h2 {
    margin: 20px 0 17px;
    color: var(--av-primary-dark);
}

.av-about-center-heading > p {
    max-width: 650px;
    margin: 0 auto;
}

.av-about-solutions-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.av-about-solution-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 365px;
    padding: 30px 24px;
    background: var(--av-white);
    border: 1px solid var(--av-border);
    border-radius: 6px;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.av-about-solution-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--av-red);
    transition: width 0.35s ease;
}

.av-about-solution-card:hover {
    transform: translateY(-8px);
    border-color: rgba(35, 139, 231, 0.35);
    box-shadow: 0 18px 40px rgba(6, 43, 75, 0.09);
}

.av-about-solution-card:hover::before {
    width: 100%;
}

.av-about-card-number {
    align-self: flex-end;
    color: #c4ced8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.av-about-card-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 5px 0 25px;
    background: #edf5fd;
    border-radius: 6px;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.av-about-card-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--av-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.av-about-solution-card:hover .av-about-card-icon {
    background: var(--av-primary);
    transform: rotate(-4deg);
}

.av-about-solution-card:hover .av-about-card-icon svg {
    stroke: var(--av-white);
}

.av-about-solution-card h3 {
    margin-bottom: 12px;
    color: var(--av-primary-dark);
    font-size: 18px;
    line-height: 1.45;
}

.av-about-solution-card > p {
    margin-bottom: 22px;
    color: var(--av-muted);
    font-size: 13px;
    line-height: 1.85;
}

.av-about-card-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    color: var(--av-primary);
    font-size: 12px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.av-about-card-link span {
    color: var(--av-red);
    font-size: 18px;
    transition: transform 0.3s ease;
}

.av-about-card-link:hover {
    color: var(--av-red);
}

.av-about-card-link:hover span {
    transform: translateX(5px);
}


/* ==========================================
   SECTION 4: WHY CHOOSE US
========================================== */

.av-about-why {
    padding: 105px 0;
    background: var(--av-white);
}

.av-about-why-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: center;
    gap: 90px;
}

.av-about-why h2 {
    margin: 20px 0;
    color: var(--av-primary-dark);
}

.av-about-why h2 span {
    display: block;
}

.av-about-why-intro {
    margin-bottom: 28px;
}

.av-about-benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 23px;
}

.av-about-check {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--av-white);
    background: var(--av-red);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.av-about-benefit h3 {
    margin: 0 0 5px;
    color: var(--av-primary-dark);
    font-size: 16px;
    line-height: 1.5;
}

.av-about-benefit p {
    color: var(--av-muted);
    font-size: 13px;
    line-height: 1.85;
}


/* FINAL CTA PANEL */

.av-about-why-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 470px;
    padding: 32px;
    color: var(--av-white);
    background:
        radial-gradient(
            circle at 90% 90%,
            rgba(35, 139, 231, 0.28),
            transparent 42%
        ),
        linear-gradient(140deg, #0b4375, #062541);
    border-radius: 7px;
    overflow: hidden;
    isolation: isolate;
}

.av-about-panel-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.av-about-panel-top > span:first-child {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.av-about-panel-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--av-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}

.av-about-panel-content {
    position: relative;
    z-index: 2;
    margin: 40px 0;
}

.av-about-panel-eyebrow {
    color: #9ccfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.av-about-panel-content h3 {
    max-width: 350px;
    margin: 16px 0;
    font-size: clamp(29px, 3vw, 39px);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.av-about-panel-content p {
    max-width: 370px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 1.9;
}

.av-about-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    margin-top: 25px;
    padding: 13px 18px;
    color: var(--av-primary-dark);
    background: var(--av-white);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.av-about-panel-btn span {
    color: var(--av-red);
    font-size: 18px;
}

.av-about-panel-btn:hover {
    color: var(--av-white);
    background: var(--av-red);
    transform: translateY(-3px);
}

.av-about-panel-btn:hover span {
    color: var(--av-white);
}

.av-about-panel-decoration {
    position: absolute;
    z-index: 1;
    right: -90px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.av-about-panel-decoration::before,
.av-about-panel-decoration::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.av-about-panel-decoration::before {
    inset: 25px;
}

.av-about-panel-decoration::after {
    inset: 50px;
}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes avAboutSlideUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes avAboutFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================
   RESPONSIVE: TABLETS
========================================== */

@media (max-width: 1024px) {
    .av-about-hero-grid {
        gap: 40px;
    }

    .av-about-who-grid {
        gap: 45px;
    }

    .av-about-solutions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .av-about-solution-card {
        min-height: 330px;
    }

    .av-about-why-grid {
        gap: 45px;
    }
}


/* ==========================================
   RESPONSIVE: MOBILE
========================================== */

@media (max-width: 768px) {
    .av-about-container {
        width: min(100% - 36px, 600px);
    }

    .av-about-hero,
    .av-about-who,
    .av-about-solutions,
    .av-about-why {
        padding: 70px 0;
    }

    .av-about-hero-grid,
    .av-about-who-grid,
    .av-about-why-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .av-about-hero h1,
    .av-about-who h2,
    .av-about-solutions h2,
    .av-about-why h2 {
        font-size: clamp(31px, 8vw, 40px);
        letter-spacing: -0.7px;
    }

    .av-about-hero-image {
        min-height: 340px;
        margin: 0 10px 0 5px;
    }

    .av-about-image-tag {
        right: -10px;
        bottom: 18px;
    }

    .av-about-section-heading {
        position: static;
    }

    .av-about-center-heading {
        margin-bottom: 35px;
        text-align: left;
    }

    .av-about-center-heading .av-about-label {
        justify-content: flex-start;
    }

    .av-about-center-heading > p {
        margin-left: 0;
    }

    .av-about-solutions-grid {
        gap: 16px;
    }

    .av-about-solution-card {
        min-height: 350px;
        padding: 22px 18px;
    }

    .av-about-why-panel {
        min-height: 420px;
        padding: 26px;
    }
}

@media (max-width: 480px) {
    .av-about-container {
        width: calc(100% - 32px);
    }

    .av-about-hero,
    .av-about-who,
    .av-about-solutions,
    .av-about-why {
        padding: 55px 0;
    }

    .av-about-hero-image {
        min-height: 275px;
    }

    .av-about-solutions-grid {
        grid-template-columns: 1fr;
    }

    .av-about-solution-card {
        min-height: auto;
        padding: 25px;
    }

    .av-about-card-icon {
        margin-bottom: 18px;
    }

    .av-about-solution-card > p {
        margin-bottom: 20px;
    }

    .av-about-why-panel {
        min-height: 400px;
        padding: 22px;
    }

    .av-about-panel-content h3 {
        font-size: 30px;
    }

    .av-about-btn {
        gap: 18px;
        padding: 13px 17px;
    }
}


/* ACCESSIBILITY: REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   AVENGERS Automation — COMMON SERVICE PAGE CSS
   Theme: Deep Blue + Red
   Font: Aptos Serif / Georgia
========================================================= */

:root {
    --aa-blue: #0B4375;
    --aa-blue-dark: #062B4D;
    --aa-blue-deep: #041B30;
    --aa-red: #E53237;
    --aa-red-dark: #C8202A;

    --aa-bg: #F4F7FB;
    --aa-white: #FFFFFF;
    --aa-text: #243449;
    --aa-muted: #6D7B8C;
    --aa-border: #E0E7EF;
    --aa-light-blue: #EAF2FA;

    --aa-font: "Aptos Serif", Georgia, serif;
    --aa-shadow: 0 12px 35px rgba(6, 43, 77, 0.08);
    --aa-shadow-hover: 0 18px 40px rgba(6, 43, 77, 0.14);
    --aa-radius: 16px;
    --aa-container: 1240px;
}

/* RESET */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--aa-font);
    color: var(--aa-text);
    background: var(--aa-bg);
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease,
                background 0.25s ease,
                transform 0.25s ease;
}

button {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(229, 50, 55, 0.55);
    outline-offset: 4px;
}

p {
    margin-bottom: 17px;
    color: var(--aa-muted);
}

h1,
h2,
h3,
h4 {
    color: var(--aa-blue-dark);
    line-height: 1.3;
    font-weight: 700;
}

ul {
    list-style: none;
}

.aa-container {
    width: min(var(--aa-container), 92%);
    margin-inline: auto;
}

/* =========================================================
   HEADER
========================================================= */

.aa-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--aa-white);
    border-bottom: 1px solid var(--aa-border);
    box-shadow: 0 4px 20px rgba(6, 43, 77, 0.04);
}

.aa-header-inner {
    width: min(1380px, 94%);
    min-height: 88px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.aa-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.aa-logo-mark {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    color: var(--aa-white);
    background: var(--aa-blue);
    border-radius: 12px 12px 12px 3px;
    font-size: 23px;
    position: relative;
}

.aa-logo-mark::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--aa-red);
    border-radius: 50%;
    top: -3px;
    right: -3px;
}

.aa-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.aa-logo-text strong {
    font-size: 19px;
    letter-spacing: 1px;
    color: var(--aa-blue-dark);
}

.aa-logo-text small {
    margin-top: 5px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--aa-red);
    font-weight: 700;
}

.aa-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.aa-navigation > a:not(.aa-nav-cta) {
    font-size: 14px;
    font-weight: 700;
    color: var(--aa-blue-dark);
    position: relative;
    padding-block: 8px;
}

.aa-navigation > a:not(.aa-nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--aa-red);
    transition: width 0.25s ease;
}

.aa-navigation > a:not(.aa-nav-cta):hover::after,
.aa-navigation > a.active::after {
    width: 100%;
}

.aa-navigation > a:hover,
.aa-navigation > a.active {
    color: var(--aa-red);
}

.aa-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--aa-red);
    color: var(--aa-white);
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
}

.aa-nav-cta:hover {
    background: var(--aa-blue);
    color: var(--aa-white);
    transform: translateY(-2px);
}

.aa-menu-toggle {
    display: none;
    border: 0;
    background: var(--aa-light-blue);
    color: var(--aa-blue);
    border-radius: 8px;
    width: 43px;
    height: 43px;
    cursor: pointer;
    font-size: 21px;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.aa-breadcrumb {
    padding: 15px 0;
    background: #EAF0F7;
    border-bottom: 1px solid var(--aa-border);
}

.aa-breadcrumb .aa-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    font-size: 12px;
}

.aa-breadcrumb a {
    color: var(--aa-blue);
    font-weight: 700;
}

.aa-breadcrumb a:hover {
    color: var(--aa-red);
}

.aa-breadcrumb i {
    font-size: 9px;
    color: #9AA8B7;
}

.aa-breadcrumb span {
    color: var(--aa-muted);
}

/* =========================================================
   HERO
========================================================= */

.aa-hero {
    position: relative;
    overflow: hidden;
    background: var(--aa-blue-deep);
    color: var(--aa-white);
    padding: 76px 0 90px;
}

.aa-hero::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -120px;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.aa-hero::after {
    content: "";
    position: absolute;
    top: -170px;
    right: -40px;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(229, 50, 55, 0.25);
    border-radius: 50%;
    pointer-events: none;
}

.aa-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.5) 0.7px,
        transparent 0.7px
    );
    background-size: 24px 24px;
    pointer-events: none;
}

.aa-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 65px;
    position: relative;
    z-index: 1;
}

.aa-hero-content {
    animation: aaFadeUp 0.7s ease both;
}

.aa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #C9DDF0;
    font-family: Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
}

.aa-eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--aa-red);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(229, 50, 55, 0.15);
}

.aa-hero h1 {
    max-width: 700px;
    color: var(--aa-white);
    font-size: clamp(36px, 4.2vw, 57px);
    letter-spacing: -1.2px;
    line-height: 1.15;
    margin-bottom: 25px;
}

.aa-hero h1 span {
    display: block;
    margin-top: 12px;
    color: #F56A6E;
    font-size: 0.58em;
    letter-spacing: 0;
    line-height: 1.45;
}

.aa-hero-content > p {
    max-width: 620px;
    color: #CFD9E5;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 30px;
}

.aa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 23px;
}

.aa-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 51px;
    padding: 13px 21px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    transition: 0.25s ease;
}

.aa-button-red {
    color: var(--aa-white);
    background: var(--aa-red);
    box-shadow: 0 9px 25px rgba(229, 50, 55, 0.2);
}

.aa-button-red:hover {
    color: var(--aa-white);
    background: var(--aa-red-dark);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(229, 50, 55, 0.3);
}

.aa-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--aa-white);
    font-size: 13px;
    font-weight: 700;
}

.aa-text-link:hover {
    color: #F56A6E;
}

.aa-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 32px;
}

.aa-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #D9E4EF;
}

.aa-hero-points i {
    color: #F56A6E;
    font-size: 12px;
}

/* HERO IMAGE */

.aa-hero-visual {
    min-height: 390px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.13),
        rgba(255, 255, 255, 0.035)
    );
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);
    animation: aaFadeUp 0.85s ease both;
}

.aa-hero-visual > img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 390px;
    object-fit: contain;
    border-radius: 13px;
}

.aa-image-fallback {
    display: none;
    position: absolute;
    inset: 22px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #E4EDF6;
    background: linear-gradient(145deg, #0B4375, #062B4D);
    border-radius: 13px;
    text-align: center;
}

.aa-image-fallback i {
    font-size: 95px;
    color: #F56A6E;
}

.aa-image-fallback span {
    font-size: 17px;
    font-weight: 700;
}

.aa-visual-label {
    position: absolute;
    z-index: 2;
    left: -24px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border: 1px solid var(--aa-border);
    border-radius: 12px;
    background: var(--aa-white);
    box-shadow: var(--aa-shadow);
    color: var(--aa-blue-dark);
}

.aa-visual-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 10px;
    background: #FFF0F0;
    color: var(--aa-red);
    font-size: 20px;
}

.aa-visual-label strong,
.aa-visual-label small {
    display: block;
}

.aa-visual-label strong {
    font-size: 13px;
}

.aa-visual-label small {
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: var(--aa-muted);
}

.aa-visual-decoration {
    position: absolute;
    top: -12px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-top: 4px solid var(--aa-red);
    border-right: 4px solid var(--aa-red);
    border-radius: 0 15px 0 0;
}

/* =========================================================
   HIGHLIGHTS STRIP
========================================================= */

.aa-highlights {
    position: relative;
    z-index: 2;
    background: var(--aa-white);
    border-bottom: 1px solid var(--aa-border);
}

.aa-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.aa-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 22px;
    border-right: 1px solid var(--aa-border);
}

.aa-highlight:first-child {
    padding-left: 0;
}

.aa-highlight:last-child {
    border-right: 0;
}

.aa-highlight-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--aa-light-blue);
    color: var(--aa-blue);
    font-size: 20px;
}

.aa-highlight strong,
.aa-highlight small {
    display: block;
}

.aa-highlight strong {
    font-size: 13px;
    color: var(--aa-blue-dark);
}

.aa-highlight small {
    font-size: 11px;
    color: var(--aa-muted);
}

/* =========================================================
   MAIN PAGE LAYOUT
========================================================= */

.aa-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 305px;
    align-items: start;
    gap: 35px;
    padding-top: 65px;
    padding-bottom: 80px;
}

.aa-main-content {
    min-width: 0;
}

.aa-section {
    margin-bottom: 55px;
    scroll-margin-top: 115px;
}

.aa-section-heading {
    margin-bottom: 23px;
}

.aa-section-index {
    display: block;
    margin-bottom: 10px;
    color: var(--aa-red);
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.aa-section-heading h2 {
    font-size: clamp(25px, 3vw, 34px);
    letter-spacing: -0.6px;
}

.aa-heading-line {
    display: block;
    position: relative;
    width: 70px;
    height: 4px;
    margin-top: 17px;
    background: var(--aa-red);
    border-radius: 5px;
}

.aa-heading-line::after {
    content: "";
    position: absolute;
    left: 78px;
    top: 1px;
    width: 25px;
    height: 2px;
    background: #C5D4E3;
}

.aa-section > p {
    font-size: 14px;
    line-height: 1.95;
}

/* INFORMATION BANNER */

.aa-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 19px;
    margin-top: 25px;
    background: var(--aa-light-blue);
    border-left: 4px solid var(--aa-blue);
    border-radius: 0 10px 10px 0;
}

.aa-info-icon {
    flex-shrink: 0;
    color: var(--aa-blue);
    font-size: 21px;
    padding-top: 2px;
}

.aa-info-banner p {
    margin: 0;
    color: #40566D;
    font-size: 13px;
}

/* =========================================================
   FEATURE CARDS
========================================================= */

.aa-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin-top: 28px;
}

.aa-feature-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background: var(--aa-white);
    border: 1px solid var(--aa-border);
    border-radius: var(--aa-radius);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.aa-feature-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--aa-red);
    transition: width 0.3s ease;
}

.aa-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--aa-shadow-hover);
    border-color: #D2DFEC;
}

.aa-feature-card:hover::after {
    width: 100%;
}

.aa-feature-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: #FFF0F0;
    color: var(--aa-red);
    font-size: 21px;
    transition: 0.3s ease;
}

.aa-feature-card:hover .aa-feature-icon {
    background: var(--aa-blue);
    color: var(--aa-white);
}

.aa-feature-card h3 {
    font-size: 17px;
    margin-bottom: 11px;
}

.aa-feature-card p {
    font-size: 12px;
    line-height: 1.85;
    margin-bottom: 0;
}

/* =========================================================
   TABLE
========================================================= */

.aa-table-wrap {
    overflow-x: auto;
    margin-top: 25px;
    background: var(--aa-white);
    border: 1px solid var(--aa-border);
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(6, 43, 77, 0.035);
}

.aa-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.aa-table th {
    padding: 16px 19px;
    background: var(--aa-blue);
    color: var(--aa-white);
    font-size: 12px;
    letter-spacing: 0.3px;
}

.aa-table td {
    padding: 15px 19px;
    border-bottom: 1px solid var(--aa-border);
    color: var(--aa-muted);
    vertical-align: top;
}

.aa-table td:first-child {
    width: 34%;
    color: var(--aa-blue-dark);
    font-weight: 700;
}

.aa-table tr:last-child td {
    border-bottom: 0;
}

.aa-table tbody tr:hover {
    background: #F7FAFD;
}

/* =========================================================
   APPLICATIONS
========================================================= */

.aa-application-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 25px;
}

.aa-application {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    min-height: 125px;
    padding: 19px;
    border: 1px solid var(--aa-border);
    border-radius: 12px;
    background: var(--aa-white);
    transition: 0.25s ease;
}

.aa-application:hover {
    transform: translateY(-4px);
    border-color: #C5D7E8;
    box-shadow: var(--aa-shadow);
}

.aa-application i {
    color: var(--aa-red);
    font-size: 25px;
}

.aa-application span {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--aa-blue-dark);
}

/* =========================================================
   PROCESS STEPS
========================================================= */

.aa-process-list {
    margin-top: 30px;
}

.aa-process-step {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 19px;
    padding: 22px 0;
    border-bottom: 1px solid var(--aa-border);
}

.aa-process-step:first-child {
    padding-top: 0;
}

.aa-process-step:last-child {
    border-bottom: 0;
}

.aa-process-step > span {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 12px;
    background: var(--aa-blue);
    color: var(--aa-white);
    font-size: 15px;
    font-weight: 800;
}

.aa-process-step h3 {
    margin-bottom: 6px;
    font-size: 16px;
}

.aa-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.85;
}

/* =========================================================
   CHECKLIST
========================================================= */

.aa-check-list {
    display: grid;
    gap: 14px;
    margin: 25px 0;
}

.aa-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--aa-muted);
}

.aa-check-list i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    margin-top: 1px;
    border-radius: 50%;
    background: #E5F5EB;
    color: #198754;
    font-size: 11px;
}

.aa-small-note {
    padding: 17px;
    border: 1px solid #F0D7D8;
    border-radius: 9px;
    background: #FFF8F8;
    font-size: 12px !important;
}

/* =========================================================
   LOCATION PANEL
========================================================= */

.aa-location-panel {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 19px;
    align-items: start;
    padding: 28px;
    margin-bottom: 55px;
    border-radius: var(--aa-radius);
    background: var(--aa-light-blue);
    border: 1px solid #D9E5F1;
}

.aa-location-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--aa-blue);
    color: var(--aa-white);
    font-size: 23px;
}

.aa-location-panel h2 {
    margin-bottom: 11px;
    font-size: 23px;
}

.aa-location-panel p {
    margin-bottom: 0;
    font-size: 13px;
}

/* =========================================================
   OTHER SERVICES
========================================================= */

.aa-other-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 25px;
}

.aa-other-services a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 14px 16px;
    background: var(--aa-white);
    border: 1px solid var(--aa-border);
    border-radius: 9px;
    color: var(--aa-blue-dark);
    font-size: 12px;
    font-weight: 700;
}

.aa-other-services a i {
    flex-shrink: 0;
    color: var(--aa-red);
    font-size: 12px;
}

.aa-other-services a:hover {
    background: var(--aa-blue);
    border-color: var(--aa-blue);
    color: var(--aa-white);
    transform: translateX(3px);
}

.aa-other-services a:hover i {
    color: var(--aa-white);
}

/* =========================================================
   FAQ
========================================================= */

.aa-faq-list {
    margin-top: 25px;
    display: grid;
    gap: 11px;
}

.aa-faq-item {
    overflow: hidden;
    background: var(--aa-white);
    border: 1px solid var(--aa-border);
    border-radius: 10px;
}

.aa-faq-item summary {
    position: relative;
    padding: 19px 48px 19px 19px;
    cursor: pointer;
    list-style: none;
    color: var(--aa-blue-dark);
    font-size: 13px;
    font-weight: 700;
}

.aa-faq-item summary::-webkit-details-marker {
    display: none;
}

.aa-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    background: var(--aa-light-blue);
    color: var(--aa-blue);
    font-size: 18px;
}

.aa-faq-item[open] summary {
    color: var(--aa-red);
    border-bottom: 1px solid var(--aa-border);
}

.aa-faq-item[open] summary::after {
    content: "−";
    background: var(--aa-red);
    color: var(--aa-white);
}

.aa-faq-item p {
    padding: 17px 19px 20px;
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
}

/* =========================================================
   FINAL CTA
========================================================= */

.aa-final-cta {
    position: relative;
    overflow: hidden;
    padding: 38px;
    margin-bottom: 0;
    border-radius: 18px;
    background: linear-gradient(125deg, var(--aa-blue), var(--aa-blue-deep));
    color: var(--aa-white);
}

.aa-final-cta .aa-section-index {
    color: #FF8B8E;
}

.aa-final-cta h2 {
    max-width: 650px;
    color: var(--aa-white);
    font-size: clamp(25px, 3vw, 34px);
    margin-bottom: 15px;
}

.aa-final-cta p {
    position: relative;
    z-index: 1;
    max-width: 610px;
    color: #D0DDE9;
    font-size: 13px;
}

.aa-button-light {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    background: var(--aa-white);
    color: var(--aa-blue-dark);
}

.aa-button-light:hover {
    background: var(--aa-red);
    color: var(--aa-white);
    transform: translateY(-3px);
}

.aa-cta-decoration {
    position: absolute;
    right: -85px;
    bottom: -175px;
    width: 350px;
    height: 350px;
    border: 45px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

/* =========================================================
   SIDEBAR
========================================================= */

.aa-sidebar {
    display: grid;
    gap: 24px;
    position: sticky;
    top: 110px;
}

.aa-sidebar-enquiry {
    position: relative;
    overflow: hidden;
    padding: 26px 23px;
    border-radius: var(--aa-radius);
    background: linear-gradient(145deg, var(--aa-blue), var(--aa-blue-deep));
    color: var(--aa-white);
}

.aa-sidebar-enquiry::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.aa-sidebar-kicker {
    display: block;
    margin-bottom: 12px;
    color: #FF8B8E;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    font-weight: 800;
}

.aa-sidebar-enquiry h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    color: var(--aa-white);
    font-size: 23px;
}

.aa-sidebar-enquiry p {
    position: relative;
    z-index: 1;
    color: #D1DFEC;
    font-size: 12px;
    line-height: 1.85;
}

.aa-sidebar-button {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 6px;
    background: var(--aa-red);
    color: var(--aa-white);
    font-size: 12px;
    font-weight: 700;
}

.aa-sidebar-button:hover {
    background: var(--aa-white);
    color: var(--aa-blue);
}

.aa-sidebar-services {
    overflow: hidden;
    background: var(--aa-white);
    border: 1px solid var(--aa-border);
    border-radius: var(--aa-radius);
    box-shadow: 0 5px 20px rgba(6, 43, 77, 0.035);
}

.aa-sidebar-heading {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--aa-border);
}

.aa-sidebar-heading > span {
    display: block;
    margin-bottom: 6px;
    color: var(--aa-red);
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.aa-sidebar-heading h3 {
    font-size: 22px;
}

.aa-sidebar-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 15px 17px;
    border-bottom: 1px solid #EDF1F5;
    color: var(--aa-text);
    font-size: 11px;
    font-weight: 700;
}

.aa-sidebar-link:last-child {
    border-bottom: 0;
}

.aa-sidebar-link > span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aa-sidebar-link > span i {
    width: 17px;
    color: var(--aa-blue);
    text-align: center;
    font-size: 13px;
}

.aa-sidebar-link > i {
    color: #A4B0BD;
    font-size: 10px;
}

.aa-sidebar-link:hover,
.aa-sidebar-link.active {
    color: var(--aa-red);
    background: #FFF6F6;
}

.aa-sidebar-link:hover > span i,
.aa-sidebar-link.active > span i,
.aa-sidebar-link:hover > i,
.aa-sidebar-link.active > i {
    color: var(--aa-red);
}

.aa-sidebar-location {
    padding: 24px;
    background: var(--aa-white);
    border: 1px solid var(--aa-border);
    border-radius: var(--aa-radius);
}

.aa-sidebar-location > i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: #FFF0F0;
    color: var(--aa-red);
    font-size: 19px;
}

.aa-sidebar-location h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.aa-sidebar-location p {
    font-size: 12px;
    line-height: 1.8;
}

.aa-sidebar-location > a {
    display: inline-block;
    color: var(--aa-red);
    font-size: 12px;
    font-weight: 800;
}

.aa-sidebar-location > a:hover {
    color: var(--aa-blue);
}

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

.aa-footer {
    position: relative;
    overflow: hidden;
    background: var(--aa-blue-deep);
    color: var(--aa-white);
}

.aa-footer::before {
    content: "";
    position: absolute;
    top: -240px;
    right: -120px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.aa-footer-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 1.2fr;
    gap: 42px;
    padding-top: 65px;
    padding-bottom: 50px;
}

.aa-footer-logo .aa-logo-text strong {
    color: var(--aa-white);
}

.aa-footer-brand > p {
    margin-top: 22px;
    max-width: 290px;
    color: #B9C9D9;
    font-size: 12px;
    line-height: 1.9;
}

.aa-footer-column h3 {
    position: relative;
    margin-bottom: 22px;
    padding-bottom: 13px;
    color: var(--aa-white);
    font-size: 16px;
}

.aa-footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    background: var(--aa-red);
}

.aa-footer-column > a {
    display: block;
    width: fit-content;
    margin-bottom: 12px;
    color: #B9C9D9;
    font-size: 12px;
}

.aa-footer-column > a:hover {
    color: #FF777B;
    transform: translateX(3px);
}

.aa-footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #B9C9D9;
    font-size: 12px;
    line-height: 1.8;
}

.aa-footer-contact p i {
    margin-top: 5px;
    color: #FF777B;
}

.aa-footer-contact p a {
    color: #B9C9D9;
}

.aa-footer-contact p a:hover {
    color: var(--aa-white);
}

.aa-footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.aa-footer-bottom p {
    margin: 0;
    color: #A9BDCF;
    font-size: 11px;
}

.aa-footer-bottom > a {
    color: var(--aa-white);
    font-size: 11px;
    font-weight: 700;
}

.aa-footer-bottom > a:hover {
    color: #FF777B;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes aaFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   RESPONSIVE — TABLETS
========================================================= */

@media (max-width: 1100px) {
    .aa-navigation {
        gap: 17px;
    }

    .aa-hero-grid {
        gap: 35px;
    }

    .aa-hero-visual {
        min-height: 340px;
    }

    .aa-page-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
        gap: 25px;
    }

    .aa-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE NAVIGATION
========================================================= */

@media (max-width: 900px) {
    .aa-header-inner {
        min-height: 76px;
    }

    .aa-menu-toggle {
        display: grid;
        place-items: center;
        margin-left: auto;
    }

    .aa-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        align-items: stretch;
        gap: 0;
        padding: 12px 4% 22px;
        background: var(--aa-white);
        border-top: 1px solid var(--aa-border);
        box-shadow: 0 15px 25px rgba(6, 43, 77, 0.1);
    }

    .aa-navigation.is-open {
        display: flex;
        flex-direction: column;
    }

    .aa-navigation > a:not(.aa-nav-cta) {
        padding: 13px 5px;
        border-bottom: 1px solid #EDF1F5;
    }

    .aa-navigation > a:not(.aa-nav-cta)::after {
        display: none;
    }

    .aa-nav-cta {
        justify-content: center;
        margin-top: 14px;
    }

    .aa-hero {
        padding: 60px 0 70px;
    }

    .aa-hero-grid {
        grid-template-columns: 1fr;
    }

    .aa-hero-content {
        max-width: 750px;
    }

    .aa-hero-visual {
        width: min(100%, 620px);
        min-height: 300px;
        margin: 0 auto;
    }

    .aa-visual-label {
        left: 10px;
        bottom: 15px;
    }

    .aa-page-layout {
        grid-template-columns: 1fr;
    }

    .aa-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .aa-sidebar-enquiry,
    .aa-sidebar-services {
        grid-row: span 2;
    }

    .aa-sidebar-location {
        align-self: start;
    }
}

/* =========================================================
   RESPONSIVE — SMALL TABLETS
========================================================= */

@media (max-width: 650px) {
    body {
        font-size: 15px;
    }

    .aa-container {
        width: 91%;
    }

    .aa-hero {
        padding: 48px 0 60px;
    }

    .aa-hero h1 {
        font-size: 37px;
    }

    .aa-hero h1 span {
        font-size: 0.61em;
    }

    .aa-hero-content > p {
        font-size: 13px;
    }

    .aa-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .aa-hero-visual {
        min-height: 250px;
        padding: 13px;
    }

    .aa-hero-visual > img {
        max-height: 300px;
    }

    .aa-image-fallback {
        inset: 13px;
    }

    .aa-visual-label {
        padding: 10px 12px;
        gap: 9px;
    }

    .aa-visual-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .aa-visual-label strong {
        font-size: 11px;
    }

    .aa-visual-label small {
        font-size: 9px;
    }

    .aa-highlights-grid {
        grid-template-columns: 1fr;
    }

    .aa-highlight,
    .aa-highlight:first-child {
        padding: 17px 0;
        border-right: 0;
        border-bottom: 1px solid var(--aa-border);
    }

    .aa-highlight:last-child {
        border-bottom: 0;
    }

    .aa-page-layout {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    .aa-section {
        margin-bottom: 42px;
    }

    .aa-card-grid {
        grid-template-columns: 1fr;
    }

    .aa-application-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aa-other-services {
        grid-template-columns: 1fr;
    }

    .aa-location-panel {
        grid-template-columns: 1fr;
        padding: 23px;
        margin-bottom: 42px;
    }

    .aa-location-panel h2 {
        font-size: 21px;
    }

    .aa-final-cta {
        padding: 28px 23px;
    }

    .aa-sidebar {
        grid-template-columns: 1fr;
    }

    .aa-footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 45px;
        padding-bottom: 35px;
    }

    .aa-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   RESPONSIVE — VERY SMALL SCREENS
========================================================= */

@media (max-width: 380px) {
    .aa-logo-text strong {
        font-size: 16px;
    }

    .aa-logo-mark {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .aa-hero h1 {
        font-size: 32px;
    }

    .aa-application-grid {
        grid-template-columns: 1fr;
    }

    .aa-table {
        min-width: 460px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   AVENGERS Automation — PREMIUM INDUSTRIAL FOOTER
   BLUE: #0b4375
   RED:  #e53237
   FONT: Aptos Serif / Georgia
========================================================= */

:root {
    --reli-footer-blue: #0b4375;
    --reli-footer-blue-dark: #062c4d;
    --reli-footer-blue-deep: #041d33;
    --reli-footer-blue-light: #15588c;

    --reli-footer-red: #e53237;
    --reli-footer-white: #ffffff;
    --reli-footer-muted: #aebdcb;

    --reli-footer-border: rgba(255, 255, 255, 0.13);

    --reli-footer-font: "Aptos Serif", Georgia, serif;
}


/* =========================================================
   FOOTER BASE
========================================================= */

.reli-footer,
.reli-footer * {
    box-sizing: border-box;
    font-family: var(--reli-footer-font);
}

.reli-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;

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

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(21, 88, 140, 0.25),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            var(--reli-footer-blue-deep) 0%,
            var(--reli-footer-blue-dark) 48%,
            #082e50 100%
        );
}


/* =========================================================
   TOP ACCENT
========================================================= */

.reli-footer-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--reli-footer-blue-light) 22%,
        var(--reli-footer-red) 50%,
        var(--reli-footer-blue-light) 78%,
        transparent
    );
}


/* =========================================================
   BACKGROUND ORBITS
========================================================= */

.reli-footer-orbit {
    position: absolute;
    z-index: -1;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;

    pointer-events: none;
}

.reli-footer-orbit-one {
    top: -260px;
    right: -170px;

    width: 580px;
    height: 580px;

    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.018),
        0 0 0 90px rgba(255, 255, 255, 0.012);
}

.reli-footer-orbit-two {
    bottom: 80px;
    left: -280px;

    width: 500px;
    height: 500px;

    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.016),
        0 0 0 90px rgba(255, 255, 255, 0.01);
}


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

.reli-footer-container {
    position: relative;
    width: min(1320px, 92%);
    margin: 0 auto;
    padding: 76px 0 42px;
}


/* =========================================================
   MAIN GRID
========================================================= */

.reli-footer-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 0.72fr)
        minmax(0, 0.95fr)
        minmax(0, 1.25fr);

    gap: 42px;

    padding-bottom: 56px;
}


/* =========================================================
   BRAND COLUMN
========================================================= */

.reli-footer-brand {
    min-width: 0;
    max-width: 360px;
}


/* LOGO */

.reli-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    max-width: 100%;
    margin-bottom: 25px;

    color: var(--reli-footer-white);
    text-decoration: none;

    transition: transform 0.35s ease;
}

.reli-footer-logo:hover {
    transform: translateY(-3px);
}


/* CUSTOM SYMBOL */

.reli-logo-mark {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;

    width: 45px;
    height: 43px;

    padding: 5px;

    border-left: 2px solid var(--reli-footer-red);
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
}

.reli-logo-mark span {
    display: block;

    width: 9px;

    background: linear-gradient(
        180deg,
        #ffffff,
        #9eafbd
    );

    transform: skewY(-20deg);
}

.reli-logo-mark span:nth-child(1) {
    height: 19px;
}

.reli-logo-mark span:nth-child(2) {
    height: 29px;
    background: var(--reli-footer-red);
}

.reli-logo-mark span:nth-child(3) {
    height: 23px;
}


/* LOGO TEXT */

.reli-logo-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reli-logo-text strong {
    display: block;

    color: #ffffff;

    font-size: clamp(23px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.3px;
}

.reli-logo-text strong span {
    color: #e53237;
}

.reli-logo-text small {
    display: block;

    color: #aebdcb;

    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
}


/* BRAND LINE */

.reli-footer-brand-line {
    display: block;

    width: 70px;
    height: 2px;

    margin-bottom: 21px;

    background: linear-gradient(
        90deg,
        var(--reli-footer-red),
        rgba(229, 50, 55, 0.1)
    );
}


/* DESCRIPTION */

.reli-footer-description {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.1px;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.reli-footer-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 25px;
}

.reli-footer-social a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.025);

    font-size: 13px;
    text-decoration: none;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.reli-footer-social a:hover {
    color: #ffffff;
    background: var(--reli-footer-red);
    border-color: var(--reli-footer-red);

    transform: translateY(-4px);
}


/* BRAND NOTE */

.reli-footer-brand-note {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 28px;

    color: rgba(255, 255, 255, 0.48);

    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
    line-height: 1.7;
}

.reli-footer-status-dot {
    position: relative;

    width: 7px;
    height: 7px;
    flex-shrink: 0;

    border-radius: 50%;
    background: var(--reli-footer-red);

    box-shadow: 0 0 12px rgba(229, 50, 55, 0.45);
}


/* =========================================================
   COLUMN HEADINGS
========================================================= */

.reli-footer-column {
    min-width: 0;
}

.reli-footer-heading {
    margin-bottom: 26px;
}

.reli-footer-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #e76a6e;

    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.reli-footer-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.reli-footer-heading-line {
    position: relative;
    display: block;

    width: 43px;
    height: 2px;

    margin-top: 15px;

    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}

.reli-footer-heading-line::after {
    content: "";

    position: absolute;
    inset: 0;

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

    transform: translateX(-100%);
    animation: reliFooterLineMove 4s ease-in-out infinite;
}

@keyframes reliFooterLineMove {
    0%, 100% {
        transform: translateX(-100%);
    }

    45%, 65% {
        transform: translateX(0);
    }
}


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

.reli-footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;

    list-style: none;
    margin: 0;
    padding: 0;
}

.reli-footer-links li {
    margin: 0;
    padding: 0;
}

.reli-footer-links a {
    position: relative;

    display: inline-block;

    padding-left: 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 13px;
    line-height: 1.65;
    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.reli-footer-links a::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 0;
    height: 2px;

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

    transform: translateY(-50%);

    transition: width 0.3s ease;
}

.reli-footer-links a:hover {
    padding-left: 15px;
    color: #ffffff;
}

.reli-footer-links a:hover::before {
    width: 8px;
}


/* =========================================================
   PRODUCT NOTE
========================================================= */

.reli-footer-product-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-top: 26px;
    padding: 15px 13px;

    border-left: 2px solid var(--reli-footer-red);
    background: rgba(255, 255, 255, 0.045);
}

.reli-footer-product-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 29px;

    width: 29px;
    height: 29px;

    color: #ffffff;
    background: rgba(229, 50, 55, 0.17);

    font-size: 12px;
}

.reli-footer-product-note p {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 11px;
    line-height: 1.75;
}


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

.reli-footer-contact-column {
    min-width: 0;
}

.reli-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-bottom: 23px;
}

.reli-footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    margin-top: 1px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.035);

    font-size: 12px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.reli-footer-contact-item:hover .reli-footer-contact-icon {
    color: #ffffff;
    background: var(--reli-footer-red);
    border-color: var(--reli-footer-red);

    transform: translateY(-2px);
}

.reli-footer-contact-content {
    min-width: 0;
    flex: 1;
}

.reli-footer-contact-label {
    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.reli-footer-contact-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.66);

    font-size: 12px;
    line-height: 1.85;

    overflow-wrap: anywhere;
}

.reli-footer-contact-content a {
    color: inherit;
    text-decoration: none;

    transition: color 0.3s ease;
}

.reli-footer-contact-content a:hover {
    color: #ffffff;
}


/* =========================================================
   CTA STRIP
========================================================= */

.reli-footer-cta {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 30px 34px;
    margin-bottom: 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background:
        linear-gradient(
            110deg,
            rgba(11, 67, 117, 0.88),
            rgba(7, 42, 73, 0.92)
        );

    overflow: hidden;
}

.reli-footer-cta::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: var(--reli-footer-red);
}

.reli-footer-cta-decoration {
    position: absolute;
    right: 15%;
    top: -95px;

    width: 200px;
    height: 200px;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;

    pointer-events: none;
}

.reli-footer-cta-content {
    position: relative;
    z-index: 1;

    min-width: 0;
}

.reli-footer-cta-content > span {
    display: block;

    margin-bottom: 9px;

    color: #e76a6e;

    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.reli-footer-cta h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(19px, 2vw, 25px);
    font-weight: 500;
    line-height: 1.5;
}

.reli-footer-cta h3 strong {
    color: #ffffff;
    font-weight: 700;
}

.reli-footer-cta-content p {
    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    line-height: 1.7;
}

.reli-footer-cta-button {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    flex: 0 0 auto;

    min-width: 155px;
    padding: 14px 19px;

    border: 1px solid var(--reli-footer-red);

    color: #ffffff;
    background: var(--reli-footer-red);

    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.reli-footer-cta-button i {
    transition: transform 0.3s ease;
}

.reli-footer-cta-button:hover {
    color: #ffffff;
    background: transparent;

    transform: translateY(-3px);
}

.reli-footer-cta-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.reli-footer-bottom {
    position: relative;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(0, 0, 0, 0.13);
}

.reli-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: min(1320px, 92%);
    min-height: 68px;

    margin: 0 auto;
}

.reli-footer-bottom-inner > p {
    margin: 0;

    color: rgba(255, 255, 255, 0.51);

    font-size: 11px;
    line-height: 1.7;
}

.reli-footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.reli-footer-bottom-links a,
.reli-footer-back-top {
    color: rgba(255, 255, 255, 0.55);

    font-size: 11px;
    text-decoration: none;

    transition: color 0.3s ease;
}

.reli-footer-bottom-links a:hover,
.reli-footer-back-top:hover {
    color: #ffffff;
}

.reli-footer-bottom-links span {
    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--reli-footer-red);
}

.reli-footer-back-top {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    white-space: nowrap;
}

.reli-footer-back-top i {
    color: var(--reli-footer-red);
}


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

@media (max-width: 1100px) {

    .reli-footer-main {
        grid-template-columns: 1.2fr 0.8fr 1fr;
        gap: 42px 35px;
    }

    .reli-footer-brand {
        max-width: 100%;
        grid-column: 1 / -1;
    }

    .reli-footer-description {
        max-width: 600px;
    }

    .reli-footer-contact-column {
        grid-column: auto;
    }

    .reli-footer-bottom-inner {
        flex-wrap: wrap;
        padding: 20px 0;
    }

}


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

@media (max-width: 760px) {

    .reli-footer-container {
        padding-top: 58px;
    }

    .reli-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 30px;
        padding-bottom: 40px;
    }

    .reli-footer-brand {
        grid-column: 1 / -1;
    }

    .reli-footer-contact-column {
        grid-column: 1 / -1;
    }

    .reli-footer-contact-column .reli-footer-contact-item {
        max-width: 520px;
    }

    .reli-footer-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;

        padding: 27px 24px;
    }

    .reli-footer-cta-button {
        min-width: 180px;
    }

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

}


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

@media (max-width: 520px) {

    .reli-footer-container {
        width: 90%;
        padding-top: 48px;
        padding-bottom: 30px;
    }

    .reli-footer-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding-bottom: 35px;
    }

    .reli-footer-brand {
        grid-column: auto;
    }

    .reli-footer-logo {
        gap: 11px;
    }

    .reli-logo-mark {
        width: 40px;
        height: 39px;
    }

    .reli-logo-text strong {
        font-size: 25px;
    }

    .reli-logo-text small {
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .reli-footer-description {
        font-size: 12px;
        line-height: 1.9;
    }

    .reli-footer-heading {
        margin-bottom: 22px;
    }

    .reli-footer-heading h3 {
        font-size: 19px;
    }

    .reli-footer-links {
        gap: 13px;
    }

    .reli-footer-links a {
        font-size: 13px;
    }

    .reli-footer-contact-item {
        gap: 11px;
        margin-bottom: 21px;
    }

    .reli-footer-contact-content p {
        font-size: 12px;
    }

    .reli-footer-cta {
        padding: 24px 19px;
        margin-bottom: 0;
    }

    .reli-footer-cta h3 {
        font-size: 20px;
    }

    .reli-footer-cta-content p {
        font-size: 12px;
    }

    .reli-footer-cta-button {
        width: 100%;
    }

    .reli-footer-bottom-inner {
        width: 90%;
        flex-direction: column;
        gap: 13px;

        padding: 20px 0;
    }

    .reli-footer-bottom-inner > p {
        font-size: 10px;
    }

    .reli-footer-bottom-links {
        gap: 10px;
    }

    .reli-footer-bottom-links a,
    .reli-footer-back-top {
        font-size: 10px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.reli-footer a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}


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

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

    .reli-footer *,
    .reli-footer *::before,
    .reli-footer *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}