/*=========================================================
    ASE IRAQ - OLD LOGO BRAND THEME
    Place as: css/ase-brand-theme.css
    Load AFTER css/style.css
=========================================================*/

:root{
    --ase-red:#e0010b;
    --ase-red-dark:#a90008;
    --ase-blue:#00186e;
    --ase-blue-light:#123ca7;
    --ase-yellow:#ffd400;
    --ase-navy:#081522;

    /* Existing website components use --accent */
    --accent:var(--ase-red);
}

/*---------------------------------------------------------
    HEADER / LOGO
---------------------------------------------------------*/

#header{
    background:rgba(8,21,34,.94);
}

#header.scrolled{
    background:rgba(8,21,34,.97);
    box-shadow:0 8px 30px rgba(0,0,0,.28);
}

.logo.ase-old-brand{
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    width:auto;
    min-width:105px;
    text-decoration:none;
}

.logo.ase-old-brand img{
    display:block;
    width:auto !important;
    height:88px !important;
    max-height:88px !important;
    object-fit:contain;
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.22));
    transition:.3s ease;
}

#header.scrolled .logo.ase-old-brand img{
    width:auto !important;
    height:76px !important;
    max-height:76px !important;
}

.menu li a.active,
.menu li a:hover{
    color:#fff;
}

/* Red active/hover line with a small yellow highlight */
.menu li a::after{
    background:linear-gradient(
        90deg,
        var(--ase-red) 0%,
        var(--ase-red) 72%,
        var(--ase-yellow) 72%,
        var(--ase-yellow) 100%
    ) !important;
}

/*---------------------------------------------------------
    PRIMARY ACCENTS
---------------------------------------------------------*/

.section-subtitle,
.section-tag,
.section-header > span,
.page-title > span,
.certificate-heading > span{
    color:var(--ase-red) !important;
}

.about-features i,
.service-list i,
.facility-item i,
.renewable-list i{
    color:var(--ase-red) !important;
}

.btn-gold,
.experience-box{
    background:linear-gradient(
        135deg,
        var(--ase-red),
        var(--ase-red-dark)
    ) !important;
    color:#fff !important;
    border-color:var(--ase-red) !important;
}

.btn-gold:hover{
    background:var(--ase-yellow) !important;
    color:var(--ase-navy) !important;
    border-color:var(--ase-yellow) !important;
}

/* Keep a small yellow secondary accent from the original logo */
.hero .subtitle,
.iso-year,
.highlight-subtitle{
    color:var(--ase-yellow) !important;
}

.lifecycle-icon,
.iso-icon{
    background:linear-gradient(
        135deg,
        var(--ase-red),
        var(--ase-blue)
    ) !important;
}

.lifecycle-card:hover,
.iso-card:hover,
.highlight-card:hover{
    border-color:rgba(224,1,11,.45) !important;
}

.lifecycle-number{
    color:rgba(0,24,110,.10) !important;
}

/*---------------------------------------------------------
    DARK CORPORATE SECTIONS
---------------------------------------------------------*/

.highlights,
.clients,
.site-footer{
    background-color:var(--ase-navy);
}

.highlight-icon i{
    color:var(--ase-red) !important;
}

.highlight-line{
    background:linear-gradient(
        90deg,
        var(--ase-red),
        var(--ase-yellow)
    ) !important;
}

/*---------------------------------------------------------
    FOOTER LOGO
---------------------------------------------------------*/

.footer-logo img{
    width:auto !important;
    height:125px !important;
    max-height:125px !important;
    object-fit:contain;
    filter:drop-shadow(0 6px 15px rgba(0,0,0,.28));
}

/*---------------------------------------------------------
    BACK TO TOP
---------------------------------------------------------*/

#backTop{
    background:var(--ase-red) !important;
}

#backTop:hover{
    background:var(--ase-yellow) !important;
    color:var(--ase-navy) !important;
}

/*---------------------------------------------------------
    MOBILE
---------------------------------------------------------*/

@media(max-width:991px){

    .logo.ase-old-brand img,
    #header.scrolled .logo.ase-old-brand img{
        height:70px !important;
        max-height:70px !important;
    }

    .menu{
        background:#081522;
    }

    .mobile-toggle:hover{
        color:var(--ase-red) !important;
        border-color:var(--ase-red) !important;
    }
}

@media(max-width:600px){

    .logo.ase-old-brand{
        min-width:78px;
    }

    .logo.ase-old-brand img,
    #header.scrolled .logo.ase-old-brand img{
        height:60px !important;
        max-height:60px !important;
    }

    .footer-logo img{
        height:105px !important;
        max-height:105px !important;
    }
}


/*---------------------------------------------------------
    COMPANY NAME BESIDE OLD LOGO
---------------------------------------------------------*/

.logo.ase-old-brand{
    gap:18px;
    min-width:360px;
}

.ase-brand-wordmark{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    line-height:1;
}

.ase-brand-name{
    display:block;
    color:#ffffff;
    font-family:'Poppins',sans-serif;
    font-size:27px;
    font-weight:700;
    letter-spacing:.8px;
    line-height:1.08;
    white-space:nowrap;
}

.ase-brand-type{
    display:block;
    margin-top:7px;
    color:var(--ase-yellow);
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:3.1px;
    line-height:1;
    white-space:nowrap;
}

/* Slightly tighter when the header is in its compact/scrolled state */
#header.scrolled .ase-brand-name{
    font-size:24px;
}

#header.scrolled .ase-brand-type{
    font-size:11px;
    letter-spacing:2.8px;
}

/* Tablet */
@media(max-width:1100px){

    .logo.ase-old-brand{
        min-width:300px;
        gap:14px;
    }

    .ase-brand-name{
        font-size:22px;
    }

    .ase-brand-type{
        font-size:10px;
        letter-spacing:2.3px;
    }

    #header.scrolled .ase-brand-name{
        font-size:21px;
    }

    #header.scrolled .ase-brand-type{
        font-size:9px;
        letter-spacing:2.1px;
    }
}

/* Mobile */
@media(max-width:700px){

    .logo.ase-old-brand{
        min-width:0;
        gap:10px;
    }

    .ase-brand-name{
        font-size:16px;
        letter-spacing:.3px;
    }

    .ase-brand-type{
        margin-top:5px;
        font-size:7px;
        letter-spacing:1.3px;
    }

    #header.scrolled .ase-brand-name{
        font-size:15px;
    }

    #header.scrolled .ase-brand-type{
        font-size:7px;
        letter-spacing:1.2px;
    }
}

@media(max-width:430px){

    .ase-brand-name{
        font-size:14px;
    }

    .ase-brand-type{
        font-size:6px;
        letter-spacing:1px;
    }
}


/*=========================================================
    V3 - DARK SECTION CONTRAST & CLIENT LOGO CORRECTION
=========================================================*/

/*
    Keep the new ASE logo palette, but do not let dark navy text
    sit on dark navy backgrounds. Dark sections use:
    white headings + light grey body + red primary accent +
    yellow only as a secondary highlight.
*/

/*---------------------------------------------------------
    TRUSTED CLIENTS
---------------------------------------------------------*/

.clients{
    background:#071827 !important;
}

.clients .section-header > span{
    color:#ff1f2b !important;
}

.clients .section-header h2{
    color:#ffffff !important;
    opacity:1 !important;
}

.clients .section-header p{
    color:#c7d0d9 !important;
    opacity:1 !important;
}

/* Put every client logo on a clean neutral tile.
   This fixes dark logos disappearing into the navy section. */
.clients-track{
    align-items:center;
}

.clients-track img{
    background:#ffffff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:12px !important;
    padding:12px 16px !important;

    filter:none !important;
    -webkit-filter:none !important;

    opacity:1 !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.16) !important;
}

/*---------------------------------------------------------
    COMPANY HIGHLIGHTS
---------------------------------------------------------*/

.highlights{
    background:#0b1c2b !important;
}

.highlights .section-header > span{
    color:#ff1f2b !important;
}

.highlights .section-header h2{
    color:#ffffff !important;
}

.highlights .section-header p{
    color:#c7d0d9 !important;
}

.highlight-card{
    background:#13283a !important;
    border-color:rgba(255,255,255,.10) !important;
}

.highlight-card h3{
    color:#ffffff !important;
}

.highlight-card p{
    color:#d9e0e6 !important;
}

.highlight-subtitle{
    color:#ffd400 !important;
}

/*---------------------------------------------------------
    PARALLAX / CTA DARK OVERLAYS
---------------------------------------------------------*/

.parallax-banner .banner-content > span,
.cta .cta-content > span{
    color:#ff2630 !important;
}

.parallax-banner .banner-content h2,
.cta .cta-content h2{
    color:#ffffff !important;
}

.parallax-banner .banner-content p,
.cta .cta-content p{
    color:#e1e6ea !important;
}

/*---------------------------------------------------------
    STATS / DARK IMAGE SECTIONS
---------------------------------------------------------*/

.stats-section .section-header > span{
    color:#ff2630 !important;
}

.stats-section .section-header h2{
    color:#ffffff !important;
}

.stats-section .section-header p{
    color:#e1e6ea !important;
}

.stats-section .stat-item h2,
.stats-section .stat-item p,
.stats-section .stat-item i{
    color:#ffffff !important;
}

.stats-section .stat-item i{
    color:#ff2630 !important;
}

/*---------------------------------------------------------
    FOOTER CONTRAST
---------------------------------------------------------*/

.site-footer{
    background:#061522 !important;
}

.site-footer h3{
    color:#ffffff !important;
}

.site-footer p,
.site-footer li,
.site-footer span,
.site-footer a{
    color:#c7d0d9;
}

.site-footer a:hover{
    color:#ff2630 !important;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
}

/*---------------------------------------------------------
    BRAND ACCENT BALANCE
---------------------------------------------------------*/

/* Red is the main action color. Yellow is only a supporting accent. */
.btn-gold{
    background:#e0010b !important;
    border-color:#e0010b !important;
}

.btn-gold:hover{
    background:#ffd400 !important;
    border-color:#ffd400 !important;
    color:#071827 !important;
}

/* Keep general page headings on light backgrounds dark navy. */
.about h2,
.renewable h2,
.services h2,
.maintenance-lifecycle h2,
.industries h2,
.why-us h2,
.quality-section h2{
    color:#081522;
}

/* Red accent words / eyebrow labels on light sections. */
.about .section-subtitle,
.renewable .section-subtitle,
.services .section-header > span,
.maintenance-lifecycle .section-header > span,
.industries .section-header > span,
.why-us .section-header > span,
.quality-section .section-header > span{
    color:#e0010b !important;
}

/*---------------------------------------------------------
    MOBILE CLIENT LOGOS
---------------------------------------------------------*/

@media(max-width:768px){

    .clients .section-header h2{
        font-size:38px;
        line-height:1.15;
    }

    .clients .section-header p{
        color:#d6dde3 !important;
    }

    .clients-track img{
        padding:10px 12px !important;
        border-radius:10px !important;
    }
}