.menu-container {
    margin-top: 20px;
}

.menu-container h3 {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
}

.menu-container:nth-child(3) {
    margin-top: 200px;
}

nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

.menu {
    display: flex;
    justify-content: center;
}

.dropdown {
    font-size: 18px;
}

.dropdown:hover {
    /* background: #2980b9; */
    cursor: pointer;
}

.dropdown:hover .dropdown_menu li {
    display: block;
}

.dropdown_menu {
    position: absolute;
    padding-left: 0 !important;
    top: 60px;
    left: -25%;
    width: 200px;
    text-align: center;
    perspective: 1000px;
    z-index: -1;
    /* box-shadow: -2px 6px 20px 2px rgba(196, 196, 196, 0.58); */
    /* border-radius: 10px; */
   
}

/* .arrow_box {
	position: relative;
	background: #fff;
	border: 4px solid #000;
} */
/* .arrow_box:after, .arrow_box:before {
	bottom: 99%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    z-index:-1;
}
.arrow_box:after{
    display: none;
}
.dropdown:hover .arrow_box:after {
    display: block;
    border-color: #fff;
    border-bottom-color: #c4c4c4;
    border-width: 10px;
    margin-left: -15px;
    z-index:-1;
   
}
.arrow_box:before {
	background-color:#fff;
    z-index: -1;
} */

.dropdown_menu li  {
    display: none;
    color: #000;
    background-color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    opacity: 0;
    /* border-radius: 10px; */
    border-right: 1px solid #c4c4c44d;
    border-left: 1px solid #c4c4c44d;
}
.dropdown_menu li a {
    color: #000;
}
.dropdown_menu li:hover a {
    color: #fff;
}
.dropdown_menu li:first-child{
    border-top:1px solid #c4c4c44d;
}
.dropdown_menu li:last-child{
    border-bottom:1px solid #c4c4c44d;
}

.dropdown_menu li:hover {
    background: linear-gradient( 90deg, #8E54E9 0%, #4776E6 100%);
    color:#fff;
    
}

.dropdown:hover .dropdown_menu--animated {
    display: block;
}

.dropdown_menu--animated {
    display: none;
}

.dropdown_menu--animated li {
    display: block;
    opacity: 1;
}

.dropdown_menu-6 {
    animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-7 {
    animation: rotateMenu 400ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-8 {
    animation: downOut 300ms ease-in-out forwards;
    transform-origin: center center;
}

.dropdown_menu-9 {
    animation: growOut 300ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-10 {
    animation: rotateY 300ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-1 .dropdown_item-1 {
    transform-origin: top center;
    animation: slideDown 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-2 {
    transform-origin: top center;
    animation: slideDown 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-3 {
    transform-origin: top center;
    animation: slideDown 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-4 {
    transform-origin: top center;
    animation: slideDown 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-5 {
    transform-origin: top center;
    animation: slideDown 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-1 {
    transform-origin: top center;
    animation: rotateX 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-2 {
    transform-origin: top center;
    animation: rotateX 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-3 {
    transform-origin: top center;
    animation: rotateX 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-4 {
    transform-origin: top center;
    animation: rotateX 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-5 {
    transform-origin: top center;
    animation: rotateX 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-1 {
    transform-origin: top center;
    animation: rotateZ 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-2 {
    transform-origin: top center;
    animation: rotateZ 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-3 {
    transform-origin: top center;
    animation: rotateZ 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-4 {
    transform-origin: top center;
    animation: rotateZ 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-5 {
    transform-origin: top center;
    animation: rotateZ 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-1 {
    transform-origin: top center;
    animation: scaleZ 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-2 {
    transform-origin: top center;
    animation: scaleZ 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-3 {
    transform-origin: top center;
    animation: scaleZ 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-4 {
    transform-origin: top center;
    animation: scaleZ 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-5 {
    transform-origin: top center;
    animation: scaleZ 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-1 {
    transform-origin: top center;
    animation: scaleZ 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-2 {
    transform-origin: top center;
    animation: scaleZ 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-3 {
    transform-origin: top center;
    animation: scaleZ 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-4 {
    transform-origin: top center;
    animation: scaleZ 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-5 {
    transform-origin: top center;
    animation: scaleZ 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-1 {
    transform-origin: top center;
    animation: translateX 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-2 {
    transform-origin: top center;
    animation: translateX 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-3 {
    transform-origin: top center;
    animation: translateX 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-4 {
    transform-origin: top center;
    animation: translateX 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-5 {
    transform-origin: top center;
    animation: translateX 300ms 300ms ease-in-out forwards;
}

@-moz-keyframes growDown {
    0% {
        transform: scaleY(0);
    }
    80% {
        transform: scaleY(1.1);
    }
    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes growDown {
    0% {
        transform: scaleY(0);
    }
    80% {
        transform: scaleY(1.1);
    }
    100% {
        transform: scaleY(1);
    }
}

@-o-keyframes growDown {
    0% {
        transform: scaleY(0);
    }
    80% {
        transform: scaleY(1.1);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes growDown {
    0% {
        transform: scaleY(0);
    }
    80% {
        transform: scaleY(1.1);
    }
    100% {
        transform: scaleY(1);
    }
}

@-moz-keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }
    70% {
        transform: rotateX(20deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@-webkit-keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }
    70% {
        transform: rotateX(20deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@-o-keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }
    70% {
        transform: rotateX(20deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }
    70% {
        transform: rotateX(20deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@-moz-keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }
    80% {
        transform: translateZ(-10px) transLateY(0px);
    }
    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@-webkit-keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }
    80% {
        transform: translateZ(-10px) transLateY(0px);
    }
    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@-o-keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }
    80% {
        transform: translateZ(-10px) transLateY(0px);
    }
    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }
    80% {
        transform: translateZ(-10px) transLateY(0px);
    }
    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@-moz-keyframes growOut {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes growOut {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@-o-keyframes growOut {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes growOut {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }
    80% {
        transform: rotateY(-10deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@-webkit-keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }
    80% {
        transform: rotateY(-10deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@-o-keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }
    80% {
        transform: rotateY(-10deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }
    80% {
        transform: rotateY(-10deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-o-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@-webkit-keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@-o-keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@-moz-keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }
    80% {
        transform: translateZ(10px);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-webkit-keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }
    80% {
        transform: translateZ(10px);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-o-keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }
    80% {
        transform: translateZ(10px);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }
    80% {
        transform: translateZ(10px);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-moz-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        transform: scale(1.07);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    80% {
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-webkit-keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    80% {
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-o-keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    80% {
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    80% {
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}