/* ===== Academics Section Layout ===== */
  .academics {
    padding: 35px 15px;
    background-color: #f8f9fa;
  }
  .academics-sections {
    display: flex;
    gap: 20px; /* spacing between syllabus and notice board */
    flex-wrap: wrap; /* for mobile responsiveness */
    align-items: flex-start;  /* <--- important */
}

.syllabus,
.dcc-notice-board {
    width: 50%;        /* exactly half of parent */
    max-width: 50%;    /* ensure it doesn’t grow */
    height: 600px;     /* fixed height for alignment */
    flex: none;        /* prevent flex growth */
    margin: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}
  
  .academics .section-title {
    font-size: 1.9rem;
    text-align: center;
    margin-bottom: 25px;
    color: #2c3e50;
  }
  
  /* Container: horizontal layout on large screens */
  .academics-container {
    display: flex;
    gap: 15px;
    align-items: stretch;
  }
  
  /* Notice board: sticky + scrollable */
  .dcc-notice-board {
    width: 50%;
    max-width: 50%;
    height: 600px;           /* fixed height same as syllabus */
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
  
  /* Syllabus: keep flexible */
  .syllabus {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
  }

  .syllabus h2,
.dcc-notice-board h2 { /* assuming notice-board header class */
    font-size: 1.5rem; /* smaller than academics */
    margin-bottom: 15px;
    color: #2c3e50;
    text-align: center;
    margin: 0 0 10px 0; /* top 0, bottom 10px */
}

.dcc-notice-board h2 {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    color: #2c3e50;
    text-align: center;
    position: sticky;
    top: 0;          /* stick at top of notice board */
    background: #fff; /* same as notice board bg to avoid overlap */
    z-index: 10;
    padding-bottom: 10px;  /* space below header */
}

.subjects-container,
.dcc-notice-ticker-wrapper {
    flex: 1;
    height: calc(100% - 40px); /* minus header padding */
    overflow-y: auto;
}

@media (max-width: 768px) {
    .syllabus,
    .dcc-notice-board {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
}