.header {
    position: relative;
    display: block;
    box-shadow: var(--box-shadow);
}
.header-up{
    position: relative;
    width: 100%;
    height: 3rem;
    padding-top: .7rem;
    background: linear-gradient(to right, var(--blue-color) , var(--blue-color-alt));
    margin: 0;
    background-size: 150% 120%;
    animation: Gradient 3s infinite;
}
@-webkit-keyframes Gradient {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
.header-up ul li,
.header-up ul li a{
    display: inline-block;
    transition: all .3s;
}
.header-up ul li a{
    color:#fff;
    margin-right: 15px;
    font-size: var(--normal-font-size);
}
.social-icons{
    position: relative;
    display: inline-block;
}
.social-icons ul li a:hover{
    transform: rotate(360deg);
}
.social-icons ul{
    float: left;
}
.contact-links ul{
    float: right;
}
.contact-links ul li a{
    padding:8px 10px 6px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px transparent;
    margin-top: -10px;
    font-size: var(--small-font-size);
}
.contact-links ul li a:hover{
    text-decoration: none;
    background-color: #fff;
    box-shadow: 0 5px 10px var(--blue-color);
    color:var(--blue-color);
}
.header-down{
    width: 100%;
    padding: .5rem 0;
    z-index: 99;
    background-color: #fff;
    box-shadow: var(--box-shadow);
}
.header-down .logo-col{
    padding: 0;
}
.logo{
    width: 100%;
    height: 100%;
}
.logo img{
    position: relative;
    width: 9rem;
    top:.35rem;
    height: auto;
}
.nav-links{
    position: relative;
    width: 100%;
    text-align: right;
}
.nav-links ul li,
.nav-links ul li a,
.nav-links ul li span{
    position: relative;
    display: inline-block;
    line-height: 2.5rem;
    padding: 0 .35rem;
    cursor: pointer;
    border-radius: 5px;
    color:var(--text-color);
    margin: 0;
    top:.25rem;
    font-size: var(--small-font-size);
    transition: all .2s;
    z-index: 1;
}
.nav-links ul > li:before{
    content: "";
    width: 100%;
    height: 100%;
    top:.25rem;
    left: 0;
    border:none;
    border-radius: 8px;
    background-color: rgba(0, 99, 153, 0.07);
    position: absolute;
    transform: scale(0);
    transition: all .2s;
}
.nav-links ul li:hover:before{
    transform: scale(1);
}
.nav-links ul li:hover > a,
.nav-links ul li:hover > span{
    color:var(--blue-color);
    text-decoration: none;
}
.nav-links .dropdown-menu{
    position: absolute;
    width: max-content;
    display: block;
    margin-top: 30px;
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border:none;
    border-radius: 5px;
    z-index: 9;
    padding-top: 0;
    padding-bottom: .7rem;
    transition: all .3s;
    opacity: 0;
    pointer-events: none;
}
.nav-links .dropdown-menu:before{
    content: "";
    width: 35px;
    height: 35px;
    position: absolute;
    background-color: #fff;
    transform: rotate(45deg);
    top: -1px;
    left:8px;
    border:none;
    z-index: -1;
}
.nav-links .dropdown-menu li{
    display: block;
    width: 100%;
}
.nav-links .dropdown-menu li:before{
    display: none;
}
.nav-links .dropdown-menu li a{
    color: var(--text-color);
    width: 100%;
    left: -12px;
}
.nav-links .dropdown-menu li:hover a{
    left: 0;
}
.nav-links .dropdown-menu li a:before{
    position: relative;
    content: "\f178";
    font-family: FontAwesome;
    padding: 0 .25rem 0 0 ;
    color:var(--blue-color);
    left: -15px;
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
}
.nav-links .dropdown-menu li:hover a:before{
    left: 0;
    opacity: 1;
    pointer-events: visible;
}
.nav-links li:hover .dropdown-menu{
    opacity: 1;
    margin-top: 5px;
    pointer-events: visible;
}
@media screen and (max-width: 991px){
    .nav-col{
        display: none;
    }
    .logo img{
        top:.1rem;
        right: 1.5rem;
        float:right;
        width: 7rem;
        margin: .2rem;
    }
}
@media screen and (max-width: 768px){
    .social-icons{
        display: none;
    }
    .contact-links ul{
        float: none;
        text-align: center;
    }
    .contact-links ul li a{
        font-size: .8rem;
    }
}