/* =================================
   EVENTS PAGE
================================= */

.header{
  text-align:center;
  margin-top:40px;
  position:relative;
}

.title{
  font-size:40px;
  font-weight:600;
}

.subtitle{
  text-align:center;
  margin-top:10px;
  font-size:18px;
  color:#666;
}
@media (max-width:768px){
  .logo-watermark{
    width:140px;
  }
}

/* =================================
   WATERMARK LOGO
================================= */

.logo-watermark{
  position:fixed;          /* stays centered even while scrolling */
  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  width:220px;             /* adjust size if needed */
  opacity:0.06;            /* watermark effect */

  pointer-events:none;     /* prevents blocking clicks */
  z-index:-1;              /* stays behind text */
}


/* =================================
   EVENTS SECTION
================================= */

.events-section{
  width:90%;
  max-width:700px;
  margin:40px auto;
}


/* =================================
   EVENT BOX
================================= */

.event-box{
  background:white;
  border-radius:10px;
  margin-bottom:20px;
  padding:0;
  overflow:hidden;

  box-shadow:0 4px 15px rgba(0,0,0,0.08);

  transition:0.3s;
}

.event-box:hover{
  transform:translateY(-3px);
}


/* =================================
   SUMMARY (TENURE TITLE)
================================= */

.event-box summary{
  font-size:20px;
  font-weight:500;
  padding:18px 20px;
  cursor:pointer;
  list-style:none;
  position:relative;
}

/* arrow icon */

.event-box summary::after{
  content:"+";
  position:absolute;
  right:20px;
  font-size:22px;
  transition:0.3s;
}

.event-box[open] summary::after{
  content:"−";
}


/* =================================
   PDF BUTTON
================================= */

.pdf-btn{
  display:inline-block;
  margin:20px;
  padding:10px 20px;

  background:#2b7cff;
  color:white;
  border-radius:6px;

  font-size:15px;
  transition:0.3s;
}

.pdf-btn:hover{
  background:#1a5fd4;
}


/* =================================
   BACK BUTTON
================================= */

.btn{
  display:block;
  width:160px;
  margin:40px auto;

  text-align:center;
  padding:10px;

  background:#ff4b5c;
  color:white;

  border-radius:6px;
  transition:0.3s;
}

.btn:hover{
  background:#e03c4b;
}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:480px){

.title{
  font-size:30px;
}

.subtitle{
  font-size:16px;
}

.event-box summary{
  font-size:18px;
}

}
@media (max-width:768px){
  .logo-watermark{
    width:140px;
  }
}