/* page */
body{
  background:#0e5b50;
  font-family:'Inter',sans-serif;
  margin:0;
  padding:100px 20px;
  color:white;
}

/* container */
.container{
  max-width:1100px;
  margin:auto;
}

/* header */
.library-header{
  text-align:center;
  margin-bottom:60px;
}

/* circle logo */
.logo{
  width:120px;
  height:120px;
  margin:0 auto 18px auto;
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* title */
.title{
  font-size:28px;
  font-weight:600;
  margin:0;
}

/* subtitle */
.subtitle{
  font-size:25px;
  opacity:0.8;
  margin-top:-7px;
font-family:"Segoe Script", cursive;
}
/* cards row */
.card-row{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  perspective:1000px;
}

/* card */
.card{
  text-decoration:none;
  color:white;
  width:150px;
  text-align:center;
  transition:transform 0.3s ease;
}
  .card2{
  text-decoration:none;
  color:white;
  width:120px;
  text-align:center;
  transition:transform 0.3s ease;
}

/* card image */
.card img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 12px 25px rgba(0,0,0,0.35),
             0 4px 10px rgba(0,0,0,0.25);
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}

/* hover effect */
.card:hover img{
  transform:
    rotateY(-8deg)
    rotateX(4deg)
    translateY(-10px)
    scale(1.05);
  box-shadow:
    0 25px 40px rgba(0,0,0,0.45),
    0 10px 20px rgba(0,0,0,0.3);
}

/* label */
.card span{
  display:block;
  margin-top:12px;
  font-size:14px;
  opacity:0.9;
  transition:opacity 0.25s ease;
}

/* text hover */
.card:hover span{
  opacity:1;
}