/* Navbar */

:root {
  --regular: 'poppins-regular', 'sans-serif';
  --semiBold: 'poppins-semiBold', 'sans-serif';
  --bold: 'poppins-bold', 'sans-serif';
  --main-color: #eb0029;
  --secondary-color: #fc791a;
  --heading-color: #010f1c;
  --body-color: #5c6574;
  --white-color: #fff;
}

@media (max-width: 786px) {
  nav ul {
    position: fixed;
    top: 75px;
    height: 100%;
    background: var(--heading-color);
    right: -230px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 230px;
    align-items: center;
    justify-content: center;
    padding: 0px 20px;
  }

  nav ul li {
    background: #2f2f2fba;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
  }

  nav ul li a {
    color: var(--white-color);
    text-transform: capitalize;
    font-size: 18px;
  }
  nav ul li:hover a {
    color: var(--main-color);
  }

  nav label {
    display: block;
  }

  nav input[type='checkbox']:checked ~ ul {
    right: 0px;
  }
}

@media (max-width: 786px) {
  .landing .desc {
    max-width: 80%;
  }
  .landing .desc h1 {
    font-size: 40px;
  }

  .landing > img {
    display: none;
  }
}

/* Start Popular */
@media (max-width: 768px) {
  .popular .container .card {
    margin-bottom: 100px;
  }

  .popular .container .card:last-child {
    margin-bottom: 0px;
  }
}

/* Start Menu */

@media (max-width: 830px) {
  .menu .container {
    height: 180vh;
  }
}

@media (max-width: 400px) {
  .menu .container > .content:nth-child(3) {
    grid-template-columns: 350px;
  }

  .menu > .container .content:nth-child(3) .grid-card > div div h4 {
    font-size: 20px;
  }

  .menu .container > .content:nth-child(3) .grid-card img {
    width: 100px;
  }

  .menu .container .icons {
    margin-top: 30px;
  }
  .menu > input[id='menu-1']:checked ~ .container {
    min-height: 430vh;
  }
  .menu > input[id='menu-2']:checked ~ .container {
    height: 230vh;
  }
}

/* Start Contact */

@media (max-width: 786px) {
  .contact .container {
    grid-template-columns: 1fr;
  }

  .contact .container iframe {
    height: 300px;
  }
}
/* End Menu */