nav{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2.4rem 0;
    background: transparent;
    z-index: 10;
    transition: background .5s ease;
    
    
}

@media screen and (max-width: 1096px){
    nav{
        padding: 0;
        margin: 0;
        max-width: 100vw;
        height: 8rem;
        justify-content: space-between;
        /* position: relative; */
    }
}



@media screen and (max-width: 500px){
    nav{
        height: 4rem;
    }
}

.nav-links{
    width: 30%;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1096px){
    .nav-links{
        display: none;
    }
}

.nav-links li a{
    font-size: 1.4rem;
    cursor: pointer;
    color: #f9f9f9;
    transition:  all .25s linear;
    text-decoration: none;
}

.nav-links li a:hover{
    color: 	#ff8c00;

}

.logo{
 
    /* logo styles here */

}

.logo h1{
    font-size: 3.2rem;
    color: #f9f9f9;

}

@media screen and (max-width: 1096px){
    .logo h1{
        font-size: 2rem;
        margin-left: 1.6rem;
    }
}

@media screen and (max-width: 500px){
    .logo h1{
        font-size: 1rem;
        margin-left: 1.2rem;
    }
}


.social-links{

    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-between;

}

@media screen and (max-width: 1096px){
    nav .social-links{
        display: none;
    }
}

.social-links li img{

    width: auto;
    height: 2.2rem;
    margin: auto 0;
    cursor: pointer;
    filter: drop-shadow(1px 1px 0.5px #1a1a1a);
}


.social-links li button{

    width: 100%;
    font-family: 'Poppins', 'Raleway', 'Montserrat', 'Roboto Condensed', 'Courier New', Courier, monospace;
    height: 2.4rem;
    margin: auto 0;
    padding: 0 2.6rem;  
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    color: #f9f9f9;
    background: #e12533;
    border: 1.2px solid #e12533;
    cursor: pointer;

    transition: 
    color .2s linear,
    background .2s linear,
    border .2s linear;

}


.social-links li button:hover{

    color: #ff8c00;
    background: #f9f9f9;
    border: 1.2px solid #f9f9f9;

    transition: 
    color .2s linear,
    background .2s linear,
    border .2s linear;

}

nav .mobile_menu_icon{
    display: none;
}

@media screen and (max-width: 1096px){
    nav .mobile_menu_icon{
        height: 3rem;
        display: block;
        margin-right: 1.6rem;
    }
}

@media screen and (max-width: 500px){
    nav .mobile_menu_icon{
        height: 1.6rem;
    }
}

nav .mobile-nav-links{
    display: none;
    
}



@media screen and (max-width: 1096px){
    nav .mobile-nav-links.show{
        height: 8rem;
        right: 0;
        top: 8rem;
        width: 100%;
        background: #e12533;

        transition: width .5s ease-in-out,
        height .75s ease,
        opacity .5s ease-in-out;
    }
}

@media screen and (max-width: 500px){
    nav .mobile-nav-links.show{
        height: 4rem;
        top: 4rem;

    }
}

@media screen and (max-width: 1096px){
    nav .mobile-nav-links{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        height: 0px;
        right: 0;
        top: 8rem;
        width: 100%;
        background: #e12533;
        transition: all .5s ease;
    }
}

@media screen and (max-width: 500px){
    nav .mobile-nav-links{
        top: 4rem;
    }
}


nav .mobile-nav-links.show li a{
    opacity: 1;
    font-size: 1.4rem;
    padding: 2rem;
    cursor: pointer;
    color: #f9f9f9;
    transition:  all .25s linear;
    text-decoration: none;

}

@media screen and (max-width: 500px){
    nav .mobile-nav-links.show li a{
        
        font-size: .8rem;
    }
}

nav .mobile-nav-links li a{
    opacity: 0;
}

nav.scrolled{
    background: #F2F2F2;
    filter: drop-shadow(1px 1px 3px #1a1a1a);
    transition: background .5s ease;
}

nav.scrolled .nav-links li a{
    color: #1a1a1a
}

nav.scrolled .nav-links li a:hover{
    color: #e12533
}

nav.scrolled .logo h1{
    color: #1a1a1a;

}


nav.scrolled .social-links li button{

    color: #f9f9f9;
    border: 1.2px solid #e12533;

}

nav.scrolled .social-links li button:hover{

    color: #F2F2F2;
    background: #e12533;

}