/********************************************************************
 * File Name   : header.css
 * File Path   : /assets/css/header.css
 * Module      : Sangyan AI Shared Primary Header
 * Component   : Hero Header
 * Version     : 1.1.0
 * Status      : Production
 *
 * Description :
 * Stylesheet for the shared floating hero header used across all
 * Sangyan AI internal pages.
 *
 * Dependencies :
 * • includes/layouts/hero-header.php
 *
 ********************************************************************/


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

.hero-header{

    position:fixed;

    top:20px;

    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

}


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

.hero-header-container{

    width:100%;

    max-width:1280px;

    height:90px;

    margin:0 auto;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.site-logo-link{

    display:flex;

    align-items:center;

    text-decoration:none;

}


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

.site-logo{

    display:block;

    height:68px;

    width:auto;

}


/* ================================================================
   HERO NAVIGATION
================================================================ */

.hero-navigation{

    display:flex;

    align-items:center;

    gap:40px;

}


/* ================================================================
   NAVIGATION LINKS
================================================================ */

.hero-navigation a{

    position:relative;

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

    font-size:170px;

    font-weight:800;

    color:#FFFFFF;

    text-decoration:none;
    
    letter-spacing:.30px;

    transition:all .30s ease;

}


/* ================================================================
   REMOVE BOOTSTRAP BUTTON LOOK
================================================================ */

.hero-navigation .btn{

    background:transparent;

    border:none;

    padding:0;

    border-radius:0;

    box-shadow:none;

}


/* ================================================================
   ORANGE UNDERLINE
================================================================ */

.hero-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#FF7A00;

    transition:width .30s ease;

}


.hero-navigation a:hover::after{

    width:100%;

}


.hero-navigation a.active::after{

    width:100%;

}


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

.hero-navigation a:hover{

    color:#FFFFFF;

}


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

.mobile-menu-toggle{

    display:none;

}


/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width:992px){

    .hero-header{

        top:10px;

    }

    .hero-header-container{

        padding:0 24px;

    }

    .hero-navigation{

        display:none;

    }

    .mobile-menu-toggle{

        display:block;

    }

}