/* PAGE LAYOUT */
    .page {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 40px 60px;
      gap: 30px;
      justify-content: center;
      align-items: stretch; /* makes side cards match main panel height */
      position: relative;
      z-index: 1;
      background-color: #1a1a1a;
    }

    /* SIDE CARDS */
    .side-panel {
      display: flex;
      flex-direction: column;
      gap: 30px; 
      flex: 1;
      max-width: 350px; 
    }

    .side-panel .card {
      flex: 1; /* equal height and stretch to main panel */
      padding: 30px; 
      border-radius: 2px;
      font-size: 1.1em;
      border-left: 5px solid #ff2e2e;
      background-color:  #262627;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .side-panel .card:hover { 
      transform: translateY(-2px) ;
    }
    .side-panel .card h3 { color: #ff2e2e; margin-top: 0; }

    /* MAIN 5PANEL */
    .main-panel {
      flex: 2.2; 
      max-width: fit-content;
      background-color:  #262627;
      padding: 35px;
      border-radius: 2px;
      border-left: 5px solid #ff2e2e;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .main-panel h2 { 
      color: #ff2e2e; 
      margin-bottom: 25px; 
      text-align: center;
    }

    /* COURSE GRID */
    .course-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      flex: 1;
      justify-items: center;
      width: 100%;
    }

    .course-item {
      background-color: #262627;
      padding: 25px 15px; 
      border-radius: 2px;
      border: 1px solid #ff2e2e;
      font-size: 1.05em;
      transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 160px;
    }

    .course-item i {
      font-size: 2em;
      color: #ff2e2e;
      transition: transform 0.3s ease;
    }

    .course-item:hover {
      transform: translateY(-2px) scale(1.08);
      box-shadow: 0 0 5px rgba(255, 46, 46, 0.6);
      background-color:  #d9d8ea;
      color:#282828;
    }

  
    @keyframes moveLine {
      0% { left: -50%; }
      100% { left: 100%; }
    }

  /* RESPONSIVE */
@media (max-width: 1300px) { 
  .course-grid { grid-template-columns: repeat(4, 1fr); } 
}
@media (max-width: 1100px) { 
  .course-grid { grid-template-columns: repeat(3, 1fr); } 
}
@media (max-width: 800px) {
  .page { flex-direction: column; align-items: center; }
  .side-panel { flex-direction: column; max-width: 90%; }
  .main-panel { max-width: 90%; margin-top: 20px; }
  .side-panel .card { flex: none; height: auto; }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ✅ keep 2 columns on small screens instead of 1 */
@media (max-width: 500px) { 
  .course-grid { grid-template-columns: repeat(2, 1fr); } 
  .main-panel{
    max-width:fit-content;
    padding: 10px;
    border-left: none;
    border-top: 5px solid #ff2e2e;   
  }
   .course-item{
    max-width: 135px;
   }
   .course-item:hover{
      transform: translateY(-1px) scale(1.0);
   }
    .side-panel .card{
        border-left: none;
    border-top: 5px solid #ff2e2e;   
    }
}
     
.course-item {
  display: inline-block;
  text-align: center;
  transition: 0.3s;
}
.course-item a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.course-item i {
  font-size: 40px;
  color: #e63946; /* faint red */
}