html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background: url('../../img/boasvindas.svg') no-repeat center center;
  background-size: cover;
  overflow: visible;
}

 .main-content {
   flex: 1 0 70%;
   position: relative;
   width: 100%;
 }

 /* Top Menu Dropdown */
 .top {
   position: absolute;
   top: 20px;
   right: 20px;
   z-index: 1000;
 }

 .icone-barras {
   cursor: pointer;
   transition: transform 0.2s ease;
 }

 .icone-barras:hover {
   transform: scale(1.1);
 }

 .dropdown-menu {
   display: none;
   position: fixed;
   top: 10vh;
   right: 0;
   width: 90vw;
   height: auto;
   background-color: #fff;
   padding: 1.5rem 1rem;
   z-index: 1000;
   transition: all 0.3s ease;
 }

 .dropdown-menu.show {
   display: block;
 }

 .lista-paginas {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-bottom: 2rem;
 }

 .lista-paginas a {
   text-decoration: none;
   color: #000;
   font-size: 1rem;
   font-weight: 500;
 }

 .perfil-usuario {
   display: flex;
   justify-content: center;
 }

 .perfil-usuario button {
   background-color: #e4002b;
   color: #fff;
   border: none;
   padding: 0.7rem 1.5rem;
   border-radius: 1.5rem;
   font-weight: bold;
   cursor: pointer;
 }

.logo-kfc {
  position: absolute;
  width: 30vw;
  height: 30vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.logo-kfc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.deco-branco {
  margin-top: -.5rem;
  object-fit: contain;
}

.bottom-menu {
  flex: 1 0 30%;
  background-color: #e4002b;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 40%;
  padding: 0 1rem;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 25vw;
  height: 100%;
  font-size: 0.7rem;
  color: #000;
  border-radius: 0.5rem;
}

.menu-icon img {
  width: 28px;
  height: 28px;
}

.menu-icon span {
  margin-top: 0.3rem;
}

.btn-access {
  background-color: white;
  color: #000;
  border-radius: 2rem;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
     margin-bottom: 1rem;
   max-width: 90%;
   height: 5vh;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.15s ease;
   cursor: pointer;
 }

 .menu-icon {
   transition: transform 0.15s ease;
   cursor: pointer;
 }

 @media (min-width: 768px) {
  .top{
    display: none;
  }
  .bottom-menu {
    width: 70vw;
    place-self: center;
  }
  .menu-icon {
    width: 20vw;
  }
  .logo-kfc {
    width: 20vw;
    height: 20vw;
  }
  .deco-branco {
    margin-top: 0;
  }
 }