* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    /*background-color: #fff;
    color: #333; */
}

.navsupbar {
    background-color: #fff;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    padding: 0 30px;
    position: fixed;
    top: 100;
    left: 0;
    z-index: 10;  
    
}

.navsupbar a {
    text-decoration: none;
    color: #a11977;    
    
}

.navsupbar a.navsupbar-brand {
    float: left;
    height: inherit;
    line-height: inherit;
    padding: 0 30px;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;    
}

.navsupbar a.navsupbar-brand span {
    font-size: 28px;
    font-weight: 700;
}

.navsupbar ul {
    float: right;
    list-style: none;
    height: inherit;
    line-height: inherit;
    padding: 0 50px;
}

.navsupbar ul li {
    display: inline-block;
}

.navsupbar ul li a {
    display: block;
    text-align: center;
    min-width: 120px;
    padding: 0 30px;
}

.navsupbar ul li a:hover {
    background-color: rgba(250, 183, 10, 0.85);
}

.navsupbar .navsupbar-toggler {
    display: none;
}

@media (max-width: 991px) {
    .navsupbar ul {
        padding: 0 10px;
    }
    .navsupbar ul li a {
        min-width: 100px;
        padding: 0 20px;
    }
}

@media (max-width: 1030px) {
    .navsupbar {
        padding: 0;
    }
    .navsupbar ul {
        width: 100%;
        padding: 0;
        background-color: rgba(246, 238, 245, 0.9);
        /* height: auto; */
        height: 100vh;
        max-height: 0;
        overflow: hidden;
        transition: all ease-in-out 0.3s;
    }
    .navsupbar ul.open {
        max-height: 100vh;
    }
    .navsupbar ul li {
        width: 100%;
        /* border-bottom: 1px solid rgba(255,255,255,0.3); */
    }
    .navsupbar ul li a {
        padding: 0;
    }
    .navsupbar .navsupbar-toggler {
        display: block;
        position: absolute;
        height: 40px;
        top: 20px;
        right: 20px;
        background-color: transparent;
        color: #fff;
        border: 3px solid #a11977;
        /* border: none; */
        /* border-radius: 4px; */
        outline: none;
        padding: 0 5px;
        cursor: pointer;
    }
    .navsupbar .navsupbar-toggler span,
    .navsupbar .navsupbar-toggler span::before,
    .navsupbar .navsupbar-toggler span::after {
        display: block;
        content: '';
        background-color: #a11977;
        height: 3px;
        width: 28px;
        border-radius: 4px;
        transition: all ease-in-out 0.3s;
    }
    .navsupbar .navsupbar-toggler span::before {
        transform: translateY(-8px);
    }
    .navsupbar .navsupbar-toggler span::after {
        transform: translateY(5px);
    }
    .navsupbar .navsupbar-toggler.open-navsupbar-toggler span {
        /* transform: rotate(90deg); */
        background-color: transparent;
        /* transform: scale(0.85) rotate(270deg); */
    }
    .navsupbar .navsupbar-toggler.open-navsupbar-toggler span::before {
        transform: translateY(0px) rotate(45deg);
        /* transform: translateY(0px) scale(0.75) rotate(45deg); */
    }
    .navsupbar .navsupbar-toggler.open-navsupbar-toggler span::after {
        transform: translateY(-3px) rotate(-45deg);
        /* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
    }
}