/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : header.css
    PURPOSE : Header & Navigation
=========================================================*/
/*=========================================================
                TOP INFORMATION BAR
=========================================================*/

.top-bar{

    background:var(--dark-blue);
    color:var(--white);
    font-size:.95rem;

}

.top-bar-wrapper{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:50px;
    gap:20px;

}

.top-left,
.top-right{

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

}

.top-left a,
.top-right a{

    display:flex;
    align-items:center;
    gap:8px;
    color:var(--white);

}

.top-right a{

    width:35px;
    height:35px;
    justify-content:center;
    border-radius:50%;
    transition:var(--transition);

}

.top-right a:hover{

    background:rgba(255,255,255,.15);
    transform:translateY(-3px);

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

.header{

    background:var(--white);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:var(--shadow-sm);

}

.navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:90px;

}

.logo{

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

}

.logo img{

    width:65px;

}

.logo-text{

    display:flex;
    flex-direction:column;

}

.logo-text span{

    font-family:var(--logo-font);
    font-size:1.5rem;
    font-weight:bold;
    color:var(--primary-color);

}

.logo-text small{

    font-size:.95rem;
    color:var(--text-color);

}

.nav-menu{

    display:flex;
    gap:35px;

}

.nav-menu a{

    position:relative;
    font-weight:600;
    color:var(--heading-color);

}

.nav-menu a:hover,
.nav-menu a.active{

    color:var(--primary-color);

}

.nav-menu a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--primary-color);
    transition:var(--transition);

}
.nav-links a.active{

    color:var(--primary-color);

    font-weight:600;

}

.nav-links a.active::after{

    width:100%;

}

.nav-menu a:hover::after,
.nav-menu a.active::after{

    width:100%;

}

.nav-right{

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

}


.menu-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border:none;

    background:none;

    cursor:pointer;

    color:var(--heading-color);

    transition:var(--transition);

}

.menu-toggle i{

    font-size:1.8rem;

    transition:transform .35s ease,
               color .35s ease;

}

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

.hero{

    min-height:80vh;
    display:flex;
    align-items:center;
    background:linear-gradient(
        to right,
        #ffffff,
        #f7fbff
    );

}

.hero-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;

}

.hero-tag{

    display:inline-block;
    background:rgba(39,93,169,.10);
    color:var(--primary-color);
    padding:10px 20px;
    border-radius:50px;
    margin-bottom:25px;
    font-weight:600;

}

.hero h1{

    margin-bottom:25px;
    line-height:1.2;

}

.hero p{

    margin-bottom:35px;
    max-width:600px;

}

.hero-buttons{

    display:flex;
    gap:20px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:25px;
    box-shadow:var(--shadow-lg);

}