/*
====================================================================
NAVBAR CSS
CSS za stilizovanje izgleda
HOME PAGE, CONTACT PAGE
Sindiri Studio 
v1.0
Miloš Krčobić
=====================================================================
*/

/*NAV BAR*/
.navbar 
{
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(44,58,103,1);
    color: white;

    height: 112px;
}


.navbar-links 
{
    height: 100%;
}

.navbar-links ul 
{
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li 
{
    list-style: none;
}

.navbar-links li a 
{
    display: block;
    text-decoration: none;
    color: white;
    
    text-transform: uppercase;
    text-decoration: none;

    margin-right: 56px;
    margin-top: 45px;
    color: #FFFFFF;

    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.1rem;

    
    /*border-bottom: 3px solid rgba(56, 129, 182, 0);
    transition: border-bottom 1s ease-in-out;*/
}
/*NAV BAR*/

/*DUGME U OKVIRU NAV BAR-A*/
.toggle-button 
{
    position: absolute;
    top: 1.5rem;
    right: 45px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar 
{
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

.hamburger--3dy .hamburger-inner 
{
    background-color:white;
}

.hamburger--3dy .hamburger-inner::after 
{
    background-color:white;
}

.hamburger--3dy .hamburger-inner::before
{
    background-color:white;
}

.hamburger--3dy.is-active .hamburger-inner::after 
{
    background-color:white !important;
}

.hamburger--3dy.is-active .hamburger-inner::before 
{
    background-color: white !important;
}
/*DUGME U OKVIRU NAV BAR-A*/

/*
====================================================================
NAVBAR CSS
CSS za definisanje ponašanja tokom responsive-a
Sindiri Studio v1.0
Miloš Krčobić
=====================================================================
*/

@media (max-width: 800px) 
{
    .navbar 
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button 
    {
        display: flex;
        /*da bi dugme bilo iznad slike koja ga prekriva*/
        z-index: 6;
    }

    .navbar-links 
    {
        display: none;
        /*opacity: 0;*/
        width: 100%;
    }

    /*.navbar-links.transition 
    {
        transition: 0.7s opacity linear;
    }*/

    .navbar-links ul 
    {
        background-color: rgba(44,58,103,1);;
        opacity: 0.9;
        margin: auto;
        
        width: 100%;
        flex-direction: column;

        /*da bi linkovi bili iznad slike koja ga prekriva*/
        z-index: 4;
    }


    .navbar-links ul li 
    {
        text-align: center;
    }

    .navbar-links ul li a 
    {
        
        font-size: 1rem;

        color: white !important;
        /*background-color: rgba(44,58,103,1);*/
        font-weight: 600;

        width: 100%;
    
        color: white !important;
        font-weight: 600;
        width: 100%;
        margin-right: 0%;
        margin-top: 111px;
        padding-right: 0;
        font-size: 36px;
        margin-bottom: 20px;
    }

  
    .navbar-links.active_nav
    {
        display: flex;
        /*transition: 0.7s opacity linear;*/
        /*opacity: 1;*/
    }

   
    .btn_info
    {
        font-weight: 800 !important;
        font-family: 'Roboto', sans-serif;
        height: 27px;
        background: transparent;

        padding-top: .6rem;
        margin-top: -21px !important;
    }


    .navbar-links li a 
    {margin-right: 0px; margin-top: 67px;line-height: 1.6;}

    .logo
    {position: absolute;margin-top: 32px;z-index: 10;}

    .services
    {margin-top: -10px !important;}

    .btn
    {margin-top: -10px !important;}
}