/* navbar */
/* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
  .container {
    flex-direction: column; /* Stack elements vertically */
  }

  nav ul {
    display: none; /* Hide navigation menu */
  }

  .actions {
    justify-content: flex-end; /* Align actions to the right */
  }

  .search,
  .bookmark,
  .profile {
    margin-right: 5px; /* Reduce margin */
  }

  .menu-icon { /* Add a menu icon class */
    display: block; /* Make menu icon visible */
    cursor: pointer;
    font-size: 2em;
    margin-right: 10px;
  }

  .menu-icon:hover {
    transform: scale(1.05);
  }

  /* Show navigation menu when menu icon is clicked */
  .menu-icon.active + nav ul {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .menu-icon.active + nav ul li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
/* container2 */
/* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
  .content {
    flex-direction: column; /* Stack elements vertically */
  }

  .haikyuu-image {
    margin-top: 50px;
    margin-bottom: 20px; /* Add bottom margin */
  }
  .haikyuu-image:hover{ 
    transform: translateY(0) rotateX(0);
    
}

  .arrow-left,
  .arrow-right {
    display: none; /* Hide arrows on smaller screens */
  }

  .start-button,
  .bookmark-button {
    transform: none; /* Remove hover effect */
  }
}
/* container3 */

/* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
  .container4 {
    grid-template-columns: 1fr; /* Change to one column */
  }
  h1 {
    margin-top: 550px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 100px;
  }
  .card h3 {
    margin-bottom: 5px;
    font-size: 50px;
  }

  p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 50px;
  }
  .card {
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* Add bottom margin */
    justify-content: center;
    align-items: center;
  }

  .card img {
    width:50%;
    height: auto;
    margin-left: 25%;
    justify-content: center;
    align-items: center;
  }

  .card:hover {
    transform: none; /* Remove hover effect */
  }

  .card .info {
    transform: translateY(0); /* Show info immediately */
  }
}
/* animations */
/* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
  .card:hover img {
    transform: none; /* Remove hover effect */
  }

  .card:hover .info {
    background-color: rgba(0, 0, 0, 0.5); /* Adjust background color */
  }

  .card {
    transform: none; /* Remove 3D transform */
  }

  .card .info {
    backface-visibility: visible; /* Show backface */
  }

  .card:hover .info {
    transform: translateY(0); /* Remove hover effect */
  }
}
/* footer */
/* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
  .container {
    flex-direction: row; /* Stack elements vertically */
    font-size: 30px;
  }

  .footer-col {
    text-align: center; /* Center text */
    flex-wrap: wrap;
  }

  .footer-col ul li a {
    color: #fff !important; /* Override hover effect */
  }

  .lang {
    margin-top: 10px; /* Add margin for spacing */
  }
}