/*=========================================
  WebMatriks SEO Audit Header
  File : wmx-seo-header.css
==========================================*/

:root{

    --wmxsarx-primary:#2563eb;
    --wmxsarx-secondary:#00d4ff;
    --wmxsarx-green:#00d084;

    --wmxsarx-dark:#0b1220;
    --wmxsarx-dark2:#131c30;

    --wmxsarx-white:#ffffff;
    --wmxsarx-text:#d9e3f0;

    --wmxsarx-border:rgba(255,255,255,.08);

    --wmxsarx-shadow:0 18px 45px rgba(0,0,0,.25);

}

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

body{

    font-family:'Poppins',sans-serif;

}

/*============================*/

.wmxsarx-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:99999;

    transition:.35s ease;

    background:rgba(11,18,32,.90);

    backdrop-filter:blur(18px);

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

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

}

.wmxsarx-header::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(90deg,
    rgba(37,99,235,.08),
    rgba(0,212,255,.04),
    rgba(37,99,235,.08));

    pointer-events:none;

}

.wmxsarx-header::after{

    content:"";

    position:absolute;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:2px;

    background:
    linear-gradient(90deg,
    transparent,
    #00d4ff,
    #00d084,
    transparent);

}

/*============================*/

.wmxsarx-container{

    max-width:1320px;

    margin:auto;

    height:95px;
    

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 25px;

    position:relative;

    z-index:5;

}

.sar-hero{

padding-top:120px;

}

/*============================*/

/*==============================
Brand Card
==============================*/

.wmxsarx-brand{

display:flex;

align-items:center;

gap:16px;

text-decoration:none;

padding:14px 20px;

border-radius:18px;

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

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

backdrop-filter:blur(12px);

transition:.35s;

}

.wmxsarx-brand:hover{

transform:translateY(-3px);

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

}

.wmxsarx-brand-icon{

width:54px;

height:54px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563eb,#00d4ff);

box-shadow:0 12px 30px rgba(37,99,235,.35);

flex-shrink:0;

}

.wmxsarx-brand-icon img{

width:30px;

height:30px;

display:block;

}

.wmxsarx-brand-text h3{

margin:0;

font-size:18px;

font-weight:700;

color:#fff;

line-height:1.2;

}

.wmxsarx-brand-text span{

display:block;

margin-top:4px;

font-size:13px;

color:rgba(255,255,255,.75);

}

/*============================*/

.wmxsarx-nav{

    display:flex;

    gap:40px;

}

.wmxsarx-nav a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    position:relative;

    transition:.3s;

}

.wmxsarx-nav a:hover{

    color:#00d4ff;

}

.wmxsarx-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#00d4ff;

    transition:.35s;

}

.wmxsarx-nav a:hover::after{

    width:100%;

}

/*============================*/

.wmxsarx-actions{

    display:flex;

    align-items:center;

}

/*============================*/

.wmxsarx-btn{

display:inline-flex;

align-items:center;

justify-content:center;

height:52px;

padding:0 28px;

border-radius:40px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

color:#fff;

font-weight:600;

text-decoration:none;

transition:.35s;

box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.wmxsarx-btn:hover{

transform:translateY(-3px);

}



/*============================*/

.wmxsarx-mobile-btn{

    display:none;

    width:48px;

    height:48px;

    border:none;

    cursor:pointer;

    color:#fff;

    font-size:20px;

    border-radius:10px;

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

}

/*============================*/
/* Shrink Header */
/*============================*/

.wmxsarx-header.wmxsarx-scrolled{

    background:rgba(8,12,24,.92);

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

}

.wmxsarx-header.wmxsarx-scrolled .wmxsarx-container{

    height:72px;

}

.wmxsarx-header.wmxsarx-scrolled .wmxsarx-logo img{

    width:200px;

}

/*==========================
Logo
==========================*/

.wmxsarx-logo{

display:flex;

align-items:center;

gap:14px;

padding:12px 20px;

text-decoration:none;

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

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

border-radius:18px;

backdrop-filter:blur(14px);

transition:.35s;

}

.wmxsarx-logo:hover{

transform:translateY(-2px);

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

}

.wmxsarx-logo-icon{

width:48px;

height:48px;

border-radius:14px;

background:linear-gradient(135deg,#0ea5e9,#22c55e);

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

font-weight:700;

color:#fff;

flex-shrink:0;

}

.wmxsarx-logo-text h2{

margin:0;

font-size:20px;

font-weight:700;

line-height:1;

color:#fff;

}

.wmxsarx-logo-text span{

display:block;

margin-top:5px;

font-size:13px;

color:#cbd5e1;

}

/*============================*/

@media(max-width:992px){

    .wmxsarx-nav{

        display:none;

    }

    .wmxsarx-actions{

        display:none;

    }

    .wmxsarx-mobile-btn{

        display:block;

    }

}

/*============================*/

@media(max-width:768px){

    .wmxsarx-container{

        height:72px;

        padding:0 18px;

    }

    .wmxsarx-logo img{

        width:180px;

    }

}

/*=============================
Mobile Navigation
==============================*/

@media(max-width:992px){

.wmxsarx-nav{

position:fixed;

top:72px;

left:0;

width:100%;

background:#101827;

padding:30px;

display:flex;

flex-direction:column;

gap:18px;

transform:translateY(-130%);

transition:.35s;

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

box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.wmxsarx-nav.wmxsarx-nav-open{

transform:translateY(0);

}

.wmxsarx-nav a{

font-size:17px;

padding:10px 0;

}

}


/*======================================
  Footer Strip
======================================*/

.wmxsarx-footer-strip{

    background:#071120;

    border-top:1px solid rgba(255,255,255,.08);

    padding:18px 20px;

    position:relative;

    overflow:hidden;

}

/* Top Glow */

.wmxsarx-footer-strip::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:220px;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #00d4ff,
        #22c55e,
        transparent
    );

}

.wmxsarx-footer-container{

    max-width:1280px;

    margin:auto;

    text-align:center;

    color:rgba(255,255,255,.70);

    font-size:15px;

    font-weight:500;

}

.wmxsarx-footer-container a{

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.wmxsarx-footer-container a:hover{

    color:#00d4ff;

}