/* =============================
   GLOBAL VARIABLES
============================= */

:root{

  --dc-green:#0b8261;
  --dc-dark:#1a202c;
  --dc-light:#f4f7f6;
  --dc-gray:#718096;
  --dc-border:#e2e8f0;
  
  }
  
  
  /* =============================
     RESET
  ============================= */
  
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  
  body{
  
  font-family:'Inter', Arial, sans-serif;
  background:var(--dc-light);
  color:var(--dc-dark);
  line-height:1.6;
  
  }
  
  
  /* =============================
     HEADER
  ============================= */
  
  .topbar{
  
  background:var(--dc-green);
  color:white;
  padding:14px 0;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
  
  }
  
  .logo{
  height:38px;
  }
  
  .nav a{
  margin:0 14px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color: white;
  
  }
  
  .nav a:hover{
  opacity:0.8;
  }
  
  .profile{
  font-weight:600;
  }
  
  
  /* =============================
     MAIN CONTENT
  ============================= */
  
  .main-content{
  margin-top:30px;
  }
  
  
  /* =============================
     SEARCH BAR
  ============================= */
  
  .search-section{
  
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  margin-bottom:30px;
  
  }
  
  .search-input{
  
  height:42px;
  border:1px solid var(--dc-border);
  border-radius:6px;
  padding:6px;
  
  }
  
  button.success{
  
  background:var(--dc-green);
  border:none;
  /* color: white; */
  }
  
  
  /* =============================
     CARDS
  ============================= */
  
  .material-card{
  
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transition:0.3s;
  
  }
  
  .material-card:hover{
  
  transform:translateY(-6px);
  box-shadow:0 12px 25px rgba(0,0,0,0.2);
  
  }
  
  .material-card img{
  
  height:160px;
  width:100%;
  object-fit:cover;
  
  }
  
  .card-section h5{
  
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
  
  }
  
  .card-section p{
  
  font-size:13px;
  color:var(--dc-gray);
  
  }
  
  
  /* =============================
     INFO BOXES
  ============================= */
  
  .info-box{
  
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  
  }
  
  .info-box h4{
  
  margin-bottom:10px;
  font-size:18px;
  
  }
  
  
  /* =============================
     FOOTER
  ============================= */
  
  .footer{
  
  margin-top:40px;
  background:#ddd;
  text-align:center;
  padding:18px;
  font-size:14px;
  
  }




  /* admin page  */

  /* ADMIN PAGE SPACING */

.admin-section{

  margin-top:50px;
  
  }
  
  .admin-section h3{
  
  margin-bottom:20px;
  
  }
  
  .admin-section table{
  
  margin-top:20px;
  
  }
  
  .upload-form{
  
  background:white;
  padding:25px;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  
  }