/* =========================
   COUNCIL PAGE
========================= */

.council{
  padding:60px 0;
  background:linear-gradient(180deg,#1f5f8c,#2e7da6);
  color:#fff;
  text-align:center;
}

.council-title{
  font-size:34px;
  font-weight:800;
  margin-bottom:40px;
}

.council-section{
  margin:50px 0 20px;
  font-size:20px;
  font-weight:700;
}

/* ROWS */
.council-row{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

.council-row--single{
  gap:0;
}

.council-row--four{
  gap:30px;
}

/* CARD */
.council-card{
  position:relative;
  width:170px;
}

.council-card img{
  width:170px;
  height:190px;
  object-fit:cover;
  border-radius:8px;
}

/* LABEL */
.council-label{
  background:#fff;
  color:#111;
  padding:8px 10px;
  border-radius:4px;
  font-size:13px;
  margin-top:-18px;
  position:relative;
  z-index:2;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

.council-label strong{
  display:block;
  font-size:12px;
}

.council-label span{
  font-size:11px;
  color:#666;
}

/* CONNECTOR ARROW */
.council-arrow{
  width:2px;
  height:50px;
  background:#fff;
  margin:18px auto;
  position:relative;
}

.council-arrow::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:-5px;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #fff;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .council-title{
    font-size:26px;
  }

  .council-row{
    gap:20px;
  }

  .council-card{
    width:130px;
  }

  .council-card img{
    width:130px;
    height:150px;
  }

  .council-label{
    font-size:11px;
    padding:6px;
  }

}