/* ===============================
   COMMON LAYOUT
================================ */

.container{
  width:100%;
  margin:auto;
}

/* ===============================
   HEADER & BREADCRUMB
================================ */

.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 100px;
  gap:10px;
}

.page-title{
  font-size:1.5rem;
  font-weight:700;
  color:#000;
  margin:0;
}

.breadcrumb{
  font-size:0.9rem;
  color:#555;
}

.breadcrumb span{
  margin:0 5px;
  color:#aaa;
}

/* ===============================
   TEXT CONTENT
================================ */

.description{
  margin-top:20px;
  font-size:15px;
  line-height:1.6;
  max-width:900px;
  color:#333;
}

/* ===============================
   SECTION TITLE
================================ */

.section-title-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:30px 0;
}

.section-title-wrapper::before,
.section-title-wrapper::after{
  content:"";
  flex:1;
  border-bottom:1px solid #ccc;
  margin:0 20px;
}

.section-title{
  font-size:28px;
  font-weight:700;
  color:#000;
  white-space:nowrap;
}

/* ===============================
   TABLE
================================ */

.table-responsive{
  margin-top:20px;
  overflow-x:auto;
}

.scholarship-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  background:#fff;
}

.scholarship-table thead{
  background:#000;
  color:#fff;
}

.scholarship-table th,
.scholarship-table td{
  border:1px solid #ccc;
  padding:10px 12px;
  vertical-align:top;
  text-align:left;
}

.scholarship-table tbody tr:nth-child(odd){
  background:#f9f9f9;
}

.scholarship-table tbody tr:nth-child(even){
  background:#fff;
}

.scholarship-table ul{
  padding-left:18px;
  margin:0;
}

.scholarship-table li{
  margin-bottom:4px;
}

.scholarship-table a{
  color:#333;
  font-weight:600;
  text-decoration:none;
}

.scholarship-table a:hover{
  color:#d9534f;
  text-decoration:underline;
}

/* ===============================
   RESPONSIVE (MOBILE)
================================ */

@media (max-width:768px){

  .container{
    padding:15px;
  }

  .header-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .page-title{
    font-size:1.3rem;
  }

  .section-title-wrapper{
    flex-direction:column;
  }

  .section-title-wrapper::before,
  .section-title-wrapper::after{
    display:none;
  }

  .section-title{
    font-size:22px;
    text-align:center;
  }

  .scholarship-table{
    font-size:14px;
  }
}