/* =======================================================================
   ELITE IT FINAL VISUAL QA V15

   Purpose:
   - Preserve all existing content
   - Normalize homepage + landing pages
   - Normalize brand logo cards
   - Fix alignment / spacing / heights
   - Improve desktop / tablet / mobile
   - Use approved hero palette everywhere
   ======================================================================= */

:root{

    --elite15-navy:#071b49;
    --elite15-navy2:#12386f;

    --elite15-blue:#176cff;
    --elite15-blue2:#298dff;
    --elite15-sky:#28b9ed;

    --elite15-violet:#7058ed;

    --elite15-text:#10213d;
    --elite15-muted:#61728d;

    --elite15-white:#ffffff;

    --elite15-line:#dce6f5;

    --elite15-soft:#f6f9ff;

    --elite15-gradient:
        linear-gradient(
            100deg,
            #176cff 0%,
            #347fee 50%,
            #7058ed 100%
        );

    --elite15-soft-gradient:
        linear-gradient(
            110deg,
            #eef5ff 0%,
            #ffffff 50%,
            #f3efff 100%
        );

    --elite15-dark:
        linear-gradient(
            125deg,
            #071b49 0%,
            #123a76 62%,
            #303b84 100%
        );

    --elite15-shadow:
        0 18px 48px
        rgba(22,58,116,.10);

    --elite15-shadow-small:
        0 10px 28px
        rgba(22,58,116,.07);

    --elite15-radius:20px;
    --elite15-radius-lg:28px;

    --elite15-container:1220px;
}


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

html{
    scroll-behavior:smooth;
}

body{
    margin:0 !important;

    overflow-x:hidden;

    color:
        var(--elite15-text) !important;

    background:#fff !important;

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


img{
    max-width:100%;
}


main{
    overflow:hidden;
}


/* =======================================================================
   MASTER WIDTH ALIGNMENT

   Covers V8/V9/V10/V11 homepage and V13 landing system.
   ======================================================================= */

.elite-container,
.ev-wrap,
.eh-wrap,
.l13-wrap,
.brand14-wrap{

    width:
        min(
            var(--elite15-container),
            calc(100% - 48px)
        ) !important;

    max-width:
        var(--elite15-container) !important;

    margin-left:auto !important;
    margin-right:auto !important;

}


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

.elite-topbar,
.ev-top,
.eh-top,
.l13-top{

    background:
        var(--elite15-navy) !important;

    color:#fff !important;

}


.elite-header,
.ev-nav,
.eh-nav,
.l13-nav{

    background:
        rgba(255,255,255,.97) !important;

    border-bottom:
        1px solid
        rgba(7,27,73,.08) !important;

    box-shadow:
        0 7px 25px
        rgba(16,45,91,.045) !important;

}


.elite-header-inner,
.ev-nav-in,
.eh-nav-in,
.l13-nav-in{

    max-width:
        var(--elite15-container) !important;

    margin-left:auto !important;
    margin-right:auto !important;

}


.elite-nav a,
.ev-menu a,
.eh-menu a,
.l13-menu a{

    color:
        var(--elite15-navy) !important;

    font-weight:750 !important;

}


.elite-nav a:hover,
.ev-menu a:hover,
.eh-menu a:hover,
.l13-menu a:hover{

    color:
        var(--elite15-blue) !important;

}


/* =======================================================================
   BUTTONS
   ======================================================================= */

.elite-main-btn,
.ev-primary,
.eh-primary,
.l13-primary,
.e8-product .ev-btn{

    background:
        var(--elite15-gradient) !important;

    color:#fff !important;

    border-color:
        transparent !important;

    box-shadow:
        0 13px 30px
        rgba(35,100,235,.20) !important;

}


.elite-secondary-btn,
.ev-secondary,
.eh-light,
.l13-secondary{

    background:#fff !important;

    color:
        var(--elite15-navy) !important;

    border:
        1px solid
        var(--elite15-line) !important;

}


.elite-main-btn,
.elite-secondary-btn,
.ev-btn,
.eh-btn,
.l13-btn{

    border-radius:
        14px !important;

    min-height:
        50px !important;

    font-weight:
        800 !important;

}


/* =======================================================================
   HOMEPAGE HERO
   ======================================================================= */

.elite-home-hero,
.ev-hero,
.eh-hero{

    background:
        radial-gradient(
            circle at 7% 16%,
            rgba(34,137,255,.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 91% 76%,
            rgba(116,89,242,.15),
            transparent 29%
        ),
        var(--elite15-soft-gradient) !important;

}


.elite-home-hero-grid,
.ev-hero-in,
.eh-hero-in{

    max-width:
        var(--elite15-container) !important;

    margin:auto !important;

    gap:
        clamp(
            32px,
            4vw,
            56px
        ) !important;

}


.elite-home-title,
.ev-hero h1,
.eh-hero h1{

    color:
        var(--elite15-navy) !important;

    font-weight:
        900 !important;

}


.elite-home-title .accent,
.ev-gradient,
.eh-gradient{

    background:
        linear-gradient(
            90deg,
            var(--elite15-sky),
            var(--elite15-blue)
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    color:
        transparent !important;

}


.elite-visual-card{

    border:
        1px solid
        var(--elite15-line) !important;

    border-radius:
        var(--elite15-radius-lg) !important;

    box-shadow:
        var(--elite15-shadow) !important;

}


/* =======================================================================
   HOMEPAGE V8/V11 SECTIONS
   ======================================================================= */

.e8-section{

    padding:
        82px 0 !important;

}


.e8-soft{

    background:
        var(--elite15-soft-gradient) !important;

}


.e8-dark,
.e8-gradient{

    background:
        var(--elite15-dark) !important;

}


.e8-title{

    max-width:
        880px !important;

    margin:
        0 auto !important;

    text-align:
        center !important;

    color:
        var(--elite15-navy) !important;

    font-size:
        clamp(
            34px,
            3.3vw,
            50px
        ) !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -1.7px !important;

    font-weight:
        900 !important;

}


.e8-sub{

    max-width:
        760px !important;

    margin:
        14px auto 0 !important;

    text-align:
        center !important;

    color:
        var(--elite15-muted) !important;

    line-height:
        1.75 !important;

}


.e8-dark .e8-title,
.e8-gradient .e8-title{

    color:#fff !important;

}


.e8-dark .e8-sub,
.e8-gradient .e8-sub{

    color:
        #d7e4f6 !important;

}


/* =======================================================================
   HOMEPAGE CARDS
   ======================================================================= */

.e8-quick-card,
.e8-about-main,
.e8-mission-card,
.e8-stat,
.e8-sector,
.e8-why-card,
.e8-product,
.e8-serve-card,
.e8-host,
.e8-step,
.e8-recovery,
.e8-backup,
.e8-flow-card,
.e8-skytec-copy{

    background:
        #fff !important;

    border:
        1px solid
        var(--elite15-line) !important;

    border-radius:
        var(--elite15-radius) !important;

    box-shadow:
        var(--elite15-shadow) !important;

}


/* Match card heights within grids */

.e8-quick-grid,
.e8-sector-grid,
.e8-why,
.e8-products,
.e8-host-grid,
.e8-steps,
.e8-backups{

    align-items:
        stretch !important;

}


.e8-quick-card,
.e8-sector,
.e8-why-card,
.e8-product,
.e8-host,
.e8-step,
.e8-backup{

    height:
        100% !important;

}


/* =======================================================================
   HOMEPAGE QUICK ACTIONS
   ======================================================================= */

.e8-quick,
.elite-quick-actions{

    background:
        #f7f9fe !important;

}


.e8-icon,
.elite-q-icon{

    background:
        var(--elite15-gradient) !important;

}


.e8-quick-card a,
.elite-q-card a{

    background:
        var(--elite15-gradient) !important;

    color:#fff !important;

}


/* =======================================================================
   ABOUT
   ======================================================================= */

.e8-mission-card{

    border-left:
        4px solid
        var(--elite15-blue) !important;

}


.e8-mission-card:last-child{

    border-left:
        4px solid
        var(--elite15-violet) !important;

}


.e8-stat strong{

    color:
        var(--elite15-blue) !important;

}


/* =======================================================================
   SECTORS
   ======================================================================= */

.e8-sector{

    overflow:hidden;

}


.e8-sector img{

    width:
        100% !important;

    height:
        190px !important;

    object-fit:
        cover !important;

}


.e8-sector-body{

    padding:
        20px !important;

}


/* =======================================================================
   HOT SELLING PRODUCTS
   ======================================================================= */

.e8-tabs{

    max-width:
        1100px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

}


.e8-tab{

    background:#fff !important;

    border:
        1px solid
        var(--elite15-line) !important;

    color:
        #485972 !important;

}


.e8-tab.active{

    background:
        var(--elite15-gradient) !important;

    border-color:
        transparent !important;

    color:#fff !important;

}


.e8-product{

    overflow:hidden;

}


.e8-product-image{

    height:
        190px !important;

    background:
        #eef3fa !important;

}


.e8-product-image img{

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

}


.e8-hot{

    background:
        var(--elite15-gradient) !important;

}


.e8-tags span{

    background:
        #e9f2ff !important;

    color:
        #1762d5 !important;

}


.e8-price strong{

    color:
        var(--elite15-blue) !important;

}


/* =======================================================================
   HOSTING / SERVE / WEBSITE / BACKUP
   ======================================================================= */

.e8-host-head,
.bg-blue,
.bg-green,
.bg-purple,
.bg-orange,
.bg-pink,
.bg-cyan{

    background:
        var(--elite15-gradient) !important;

}


.e8-serve-feature{

    background:
        var(--elite15-gradient) !important;

}


.e8-circle{

    background:
        var(--elite15-gradient) !important;

}


.e8-progress div{

    background:
        linear-gradient(
            90deg,
            var(--elite15-blue),
            var(--elite15-violet)
        ) !important;

}


.e8-backup.featured{

    border:
        2px solid
        var(--elite15-blue) !important;

}


/* =======================================================================
   AI ATTENDANCE
   ======================================================================= */

.e8-skytec-visual{

    background:
        var(--elite15-dark) !important;

    border-radius:
        var(--elite15-radius-lg) !important;

}


.e8-auth div{

    background:
        #eef5ff !important;

    color:
        var(--elite15-blue) !important;

}


/* =======================================================================
   LANDING PAGE HERO
   ======================================================================= */

.l13-hero{

    background:
        radial-gradient(
            circle at 7% 16%,
            rgba(34,137,255,.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 91% 76%,
            rgba(116,89,242,.15),
            transparent 29%
        ),
        var(--elite15-soft-gradient) !important;

}


.l13-hero-grid{

    gap:
        clamp(
            34px,
            4vw,
            56px
        ) !important;

}


.l13-hero h1{

    color:
        var(--elite15-navy) !important;

}


.l13-hero-visual{

    border:
        1px solid
        var(--elite15-line) !important;

    border-radius:
        var(--elite15-radius-lg) !important;

    box-shadow:
        var(--elite15-shadow) !important;

}


.l13-hero-visual img{

    width:
        100% !important;

    height:
        470px !important;

    object-fit:
        cover !important;

}


/* =======================================================================
   LANDING SECTIONS
   ======================================================================= */

.l13-section{

    padding:
        82px 0 !important;

}


.l13-soft{

    background:
        var(--elite15-soft-gradient) !important;

}


.l13-dark{

    background:
        var(--elite15-dark) !important;

}


.l13-title{

    max-width:
        880px !important;

    color:
        var(--elite15-navy) !important;

}


.l13-sub{

    max-width:
        760px !important;

}


.l13-card,
.l13-metric,
.l13-problem,
.l13-industry,
.l13-process-card,
.l13-integration,
.l13-why,
.l13-related-card,
.l13-form{

    border:
        1px solid
        var(--elite15-line) !important;

    box-shadow:
        var(--elite15-shadow-small) !important;

}


/* Equalize cards */

.l13-grid-3,
.l13-grid-4,
.l13-industry-grid,
.l13-related,
.l13-why-grid,
.l13-metrics{

    align-items:
        stretch !important;

}


.l13-card,
.l13-industry,
.l13-related-card,
.l13-why,
.l13-metric{

    height:
        100% !important;

}


.l13-icon,
.l13-process-no{

    background:
        var(--elite15-gradient) !important;

}


/* =======================================================================
   BRAND LOGO ECOSYSTEM

   Most important final normalization.
   ======================================================================= */

.brand14-section{

    padding:
        62px 0 !important;

    background:
        var(--elite15-soft-gradient) !important;

}


.brand14-head{

    align-items:
        center !important;

    margin-bottom:
        32px !important;

}


.brand14-head h2{

    color:
        var(--elite15-navy) !important;

    font-size:
        clamp(
            30px,
            3vw,
            44px
        ) !important;

    line-height:
        1.06 !important;

}


.brand14-grid{

    display:
        grid !important;

    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        14px !important;

    align-items:
        stretch !important;

}


.brand14-item{

    height:
        118px !important;

    min-height:
        118px !important;

    padding:
        18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        #fff !important;

    border:
        1px solid
        var(--elite15-line) !important;

    border-radius:
        16px !important;

    box-shadow:
        var(--elite15-shadow-small) !important;

}


.brand14-cell{

    width:
        100% !important;

    height:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

}


.brand14-item img{

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        118px !important;

    max-height:
        42px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

}


/*
   Text/fallback SVGs such as Noon/Talabat/Careem are wider.
   They are intentionally allowed slightly larger display width.
*/

.brand14-item img[
    src*="noon.svg"
],
.brand14-item img[
    src*="talabat.svg"
],
.brand14-item img[
    src*="careem.svg"
],
.brand14-item img[
    src*="instashop.svg"
],
.brand14-item img[
    src*="skytec.svg"
],
.brand14-item img[
    src*="hikvision.svg"
]{

    max-width:
        132px !important;

    max-height:
        45px !important;

}


.brand14-name{

    margin-top:
        10px !important;

    min-height:
        14px;

    color:
        #65758c !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    text-align:
        center !important;

}


/* =======================================================================
   CONTACT ALIGNMENT
   ======================================================================= */

.l13-contact{

    align-items:
        stretch !important;

}


.l13-contact-copy,
.l13-form{

    height:
        100% !important;

}


.l13-contact-copy{

    background:
        var(--elite15-dark) !important;

    border-radius:
        var(--elite15-radius-lg) !important;

}


.ev-contact-card{

    background:
        var(--elite15-dark) !important;

}


/* =======================================================================
   FOOTERS
   ======================================================================= */

.ev-footer,
.eh-footer,
.l13-footer{

    background:
        var(--elite15-navy) !important;

}


/* =======================================================================
   FLOATING CONTACT BUTTONS
   ======================================================================= */

.elite-floating-rail a{

    background:
        var(--elite15-gradient) !important;

    color:#fff !important;

}


/* =======================================================================
   DESKTOP CONSISTENCY
   ======================================================================= */

@media(min-width:1200px){

    .l13-hero-grid,
    .elite-home-hero-grid{

        min-height:
            500px;

    }

}


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

@media(max-width:1050px){

    .elite-container,
    .ev-wrap,
    .eh-wrap,
    .l13-wrap,
    .brand14-wrap{

        width:
            min(
                100% - 36px,
                var(--elite15-container)
            ) !important;

    }


    .brand14-grid{

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

    }


    .l13-hero-grid,
    .elite-home-hero-grid{

        grid-template-columns:
            1fr !important;

    }


    .l13-hero-visual{

        max-width:
            820px;

        width:
            100%;

        margin:
            0 auto;

    }

}


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

@media(max-width:700px){

    .elite-container,
    .ev-wrap,
    .eh-wrap,
    .l13-wrap,
    .brand14-wrap{

        width:
            min(
                100% - 28px,
                var(--elite15-container)
            ) !important;

    }


    .e8-section,
    .l13-section{

        padding:
            60px 0 !important;

    }


    .e8-title,
    .l13-title{

        font-size:
            31px !important;

        letter-spacing:
            -1px !important;

    }


    .elite-home-title,
    .l13-hero h1{

        font-size:
            40px !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -1.8px !important;

    }


    .elite-home-text,
    .l13-hero p{

        font-size:
            16px !important;

    }


    .elite-hero-actions,
    .l13-actions{

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

    }


    .elite-main-btn,
    .elite-secondary-btn,
    .l13-btn{

        width:
            100% !important;

    }


    .brand14-head{

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

    }


    .brand14-head h2,
    .brand14-head p{

        text-align:
            center !important;

    }


    .brand14-label{

        text-align:
            center !important;

    }


    .brand14-grid{

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

        gap:
            10px !important;

    }


    .brand14-item{

        height:
            104px !important;

        min-height:
            104px !important;

        padding:
            14px !important;

    }


    .brand14-item img{

        max-width:
            100px !important;

        max-height:
            36px !important;

    }


    .l13-hero-visual{

        min-height:
            320px !important;

    }


    .l13-hero-visual img{

        height:
            320px !important;

    }


    .l13-grid-3,
    .l13-grid-4,
    .l13-problem-grid,
    .l13-industry-grid,
    .l13-process,
    .l13-integration-grid,
    .l13-why-grid,
    .l13-related,
    .l13-metrics,
    .l13-contact,
    .l13-form{

        grid-template-columns:
            1fr !important;

    }


    .e8-sector img{

        height:
            210px !important;

    }


    .e8-product-image{

        height:
            210px !important;

    }

}


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

@media(max-width:420px){

    .elite-container,
    .ev-wrap,
    .eh-wrap,
    .l13-wrap,
    .brand14-wrap{

        width:
            calc(100% - 22px) !important;

    }


    .elite-home-title,
    .l13-hero h1{

        font-size:
            35px !important;

    }


    .brand14-grid{

        grid-template-columns:
            repeat(
                2,
                1fr
            ) !important;

    }


    .brand14-item{

        height:
            96px !important;

        min-height:
            96px !important;

    }

}


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

a,
button{

    -webkit-tap-highlight-color:
        transparent;

}


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:
        3px solid
        rgba(23,108,255,.28);

    outline-offset:
        2px;

}


/* Prevent any old legacy CSS from hiding sections */

section{

    opacity:
        1 !important;

    visibility:
        visible !important;

}