:root{
    --primary-darkBlue:     #0f1627;
    --primary-blue:         #4d16f4;
    --primary-red:          #f41616;
    --primary-orange:       #ddaa11;
    --primary-green:        #13b860;
    --primary-gray:         #1f2637;
    --primary-lightGray:    #353e50;
    --primary-white:        #ffffff;

    --secondary-lightGray:  #ccc;

    --hover-blue:         #3810b1;
    --hover-lightGray:    #495366;
    --hover-red:        #c91212;
    --hover-orange:     #bf9411;
    --hover-green:      #129951;
}

html,
body{
    height: 100%;
    background-color: var(--primary-darkBlue);
    color: var(--primary-white);
}

.container{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
}

.bg-blue-m1{
    background-color: var(--primary-blue);
    color: var(--primary-white);
}

.bg-blue-m1:hover{
    background-color: var(--hover-blue);
}

.bg-red-m1{
    background-color: var(--primary-red);
    color: var(--primary-white);
}

.bg-red-m1:hover{
    background-color: var(--hover-red);
}

.bg-green-m1{
    background-color: var(--primary-green);
    color: var(--primary-white);
}

.bg-green-m1:hover{
    background-color: var(--hover-green);
}

.bg-orange-m1{
    background-color: var(--primary-orange);
    color: var(--primary-white);
}

.bg-orange-m1:hover{
    background-color: var(--hover-orange);
}


header{
    padding: 20px 0;
    background-color: var(--primary-gray);
}

header > .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .logo img{
    width: 14vw;
}

header .menu-mobile{
    display: none;
}

header .menu-desktop{
    display: flex;
    align-items: center;
}

header .menu-desktop a{
    color: var(--primary-white);
    margin: 0 20px 0 0;
    font-size: 18px;
}

header .menu-desktop a:hover,
header .menu-desktop .active{
    color: var(--primary-blue);
}

@media screen and (max-width: 1000px){
    header .menu-desktop{
        display: none;
    }

    header .container > .search{
        display: none;
    }

    header .logo img{
        width: 30vw;
    }

    header .menu-mobile{
        display: flex;
    }

    header .menu-mobile h1{
        font-size: 4vw;
        cursor: pointer;
    }

    header .content-menu{
        position: fixed;
        left: 0;
        top: 0;
        width: 0;
        height: 100vh;
        overflow: hidden;
        padding: 0;
        background-color: var(--primary-darkBlue);
        transition: 0.3s;
    }

    .expand-menu{
        transition: 0.3s !important;
        width: 100% !important;
        padding: 40px 80px !important;
    }

    header .content-menu .logo{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header .content-menu .search{
        width: 100%;
        margin: 40px 0;
    }
    
    header .content-menu .search input,
    header .content-menu .search button{
        height: 55px !important;
    }
    
    header .content-menu a{
        width: 100%;
        cursor: pointer;
        border-radius: 5px;
        font-size: 20px;
        color: var(--primary-white);
        margin: 0 0 20px 0;
        padding: 20px;
    }

    header .menu-mobile a:hover,
    header .menu-mobile .active{
        background-color: var(--hover-lightGray);
    }

    header .links{
        display: flex;
        flex-direction: column;
    }

}

@media screen and (max-width: 500px){
    .expand-menu{
        padding: 25px 10px !important;
    }

    header .logo img{
        width: 50vw;
    }

    header .menu-mobile h1{
        font-size: 7vw;
        cursor: pointer;
    }
    header .content-menu .search input,
    header .content-menu .search button{
        height: 40px !important;
    }

    header .content-menu a{
        padding: 10px;
        font-size: 16px;
    }
    
}