body, html{
        background-color: #1c1c1c;
        color: #c1c1c1;
        min-height: 100vh;
        min-width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .bg-none{
        background-color: rgb(0, 0, 0, 0);
    }

    .container-menu{
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .e-card{
        align-items: center;
        height: 100vh;
    }

    .card{
        transition: all 0.25s;
        filter: drop-shadow(0 0 0.25rem #101010);
    }
    .card:hover{
        background-color: #262626;
        color: #9b2a2a;
        filter: drop-shadow(0 0 0.35rem #9b2a2a);
        cursor: pointer;
    }

    .card-image{
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        min-height: 20vh;
        border-top-left-radius: 3%;
        border-top-right-radius: 3%;
    }

    .hover-rotate:hover{
        transition: all 0.65s;
        transform: rotateY(360deg);
    }
    .hero-img{
        width: 30vw;
    }
    .accordion, .accordion .accordion-item{
        color: #ffffff;
        background-color: #10101000;
        border: 0px solid #00000000;
    }
    .menu-ul {
        display: flex;
        flex-direction: row;
      }

      .menu-ul li {
        list-style: none;
        text-align: center;
      }
      .menu-ul li a {
        position: relative;
        display: block;
        text-transform: uppercase;
        margin: 20px 0;
        padding: 10px 20px;
        text-decoration: none;
        color: #575757;
        font-family: sans-serif;
        font-size: 18px;
        font-weight: 600;
        transition: 0.5s;
        z-index: 1;
      }
      .menu-ul li a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid #262626;
        border-bottom: 2px solid #262626;
        transform: scaleY(2);
        opacity: 0;
        transition: 0.3s;
      }
      .menu-ul li a:after {
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #262626;
        transform: scale(0);
        opacity: 0;
        transition: 0.3s;
        z-index: -1;
      }
      .menu-ul li a:hover {
        color: #fff;
      }
      .menu-ul li a:hover:before {
        transform: scaleY(1);
        opacity: 1;
      }
      .menu-ul li a:hover:after {
        transform: scaleY(1);
        opacity: 1;
      }

      .container-footer{
        position: absolute;
        bottom: 0;
        width: 100%;
      }

      .text-title{
        color:#9b2a2a;
      }
      
/*@media (min-width: 768px) {*/
@media only screen and (max-width: 768px){

    .menu-ul {
        padding: 0px;
        display: flex;
        flex-direction: column;
      }
      .menu-ul li a {
        color: #ffffff;
      }
      
    .hero-img{
        width: 80vw;
    }

}