/* ===== NAVBAR SECTION ===== */

.navbar-brand {
    color: white;
    padding: 0 15px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 3px;
}

.nav-menu {
    background: transparent;
    padding: 30px;
    transition: all .4s;
}

@media (max-width:34em) {
    .nav-menu {
        background: #000 !important;
    }
}

.nav-item {
    padding: 0 10px;
}

.menu-item {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: white;
    text-transform: uppercase;
}

@media (max-width: 34em) {
    .menu-item {
        padding: 10px 10px 10px;
    }
    .nav-menu {
        padding: 10px !important;
    }
    img.logo{
    height:55px !important;
    }
}

.navbar-toggler {
    cursor: pointer;
    outline: 0;
    border: 1px solid var(--custom-secondary);
    color: var(--custom-secondary) !important;
}

.ham {
    transition: width 0.3s;
    background: #F9F8F7;
}

.line1, .line3  {
    width: 28px;
    height: 2px;
    margin: 6px;    
    transition:  0.4s;
    
}

.change .line1 {
    transform: rotate(-45deg) translate(-3px, 2px);
}

.change .line3 {
    transform: rotate(45deg) translate(-3px, -2px);
}

.menu-item:hover {
    color: yellow;
}

.nav-active {
    color: yellow;
}

.dropdown-item {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.custom-navbar {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-bottom: 0px;
    background-color: #000 !important;
    z-index: 1050 !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
}


.hero-section {

        
    height: 100vh;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-image 0.5s ease-in-out;
}

.text-hero {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 45px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sub-text-hero {
    font-family: 'Dosis', sans-serif;
    letter-spacing: 9px;
    font-size: 40px;
    color: white;
}

.nav-bottom {
    background: transparent !important;
    padding: 30px;
    position: absolute;
    width: 100%;
    
    bottom: 10px;
}

.item-bottom {
    padding: 0 20px;
    transition: .2s;
    font-size: 20px;
}

.item-bottom:hover {
    background: transparent;
    transform: translateY(-2px);
}