body{
    font-family: Arial, sans-serif;
    background:#f4f4f4;
    text-align:center;
    margin:0;
}


/* HEADER */

.header{
    position:relative;
    padding-top:40px;
}

.title{
    font-size:42px;
}


/* PARAGRAPH */

.subtitle{
    width:900px;
    max-width:90%;
    margin:30px auto;
    font-size:18px;
    color:#444;
    line-height:1.7;
    text-align:justify;
}


/* WATERMARK */

.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 */
}

/* PHOTO SECTION */

.photo-section{
    display:flex;
    justify-content:center;
    gap:40px;
    margin-top:50px;
    flex-wrap:wrap;
}


/* PHOTO CARD */

.photo-card{
    width:260px;
    background:white;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
    transition:0.3s;
}

.photo-card:hover{
    transform:translateY(-6px);
}


/* IMAGE */

.photo-card img{
    width:100%;
    height:auto;   /* automatically adjusts to image size */
    display:block;
}


/* NAME */

.photo-name{
    font-size:18px;
    font-weight:bold;
    margin-top:12px;
}


/* ROLE */

.photo-role{
    font-size:14px;
    color:#666;
    margin-bottom:15px;
}
@media (max-width:768px){
  .logo-watermark{
    width:140px;
  }
}

/* BUTTON */

.btn{
    display:inline-block;
    margin-top:40px;
    margin-bottom:50px;
    padding:12px 25px;
    background:#2b7cff;
    color:white;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
    transition:0.3s;
}

.btn:hover{
    background:#1a5fd1;
    transform:translateY(-2px);
}