/* =====================================================
LAPTOP ≤1200px
===================================================== */
@media(max-width:1200px){
  .members-canvas{
    grid-template-columns:repeat(3,1fr);
    gap:50px;
  }

  .m1 img{width:150px;height:150px}
  .m2 img{width:180px;height:180px}
  .m3 img{width:220px;height:220px}
  .m4 img{width:150px;height:150px}
  .m5 img{width:230px;height:230px}
  .m6 img{width:130px;height:130px}
  .m7 img{width:170px;height:170px}
  .m8 img{width:130px;height:130px}
     .member{
    min-height:260px;
  }
}

/* =====================================================
TABLET ≤992px
===================================================== */
@media(max-width:992px){
  .members-canvas{
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    padding:40px 20px;
  }

  .m1 img{width:140px;height:140px}
  .m2 img{width:160px;height:160px}
  .m3 img{width:200px;height:200px}
  .m4 img{width:140px;height:140px}
  .m5 img{width:210px;height:210px}
  .m6 img{width:110px;height:110px}
  .m7 img{width:150px;height:150px}
  .m8 img{width:110px;height:110px}
  .nav-item .nav-link.active::after{
    height: 100%;
  }
  a.nav-link {
    padding: 15px 10px;
    display: flex;
    align-items: center;
    line-height: 100%;
}
 .member{
    min-height:auto;     
  }
  .online-dot {
    top: 12px;}
  .m2 .online-dot {
    top: 14px;
}
  .m3 .online-dot {
    top: 28px;
}

.m5 .online-dot {
    top: 32px;
}
.m6 .online-dot {
    top: 5px;
    left: 7px;
}
.m7 .online-dot {
    top: 10px;
}
.m8 .online-dot {
    top: 10px;
    left: 2px;
}
}

/* =====================================================
MOBILE ≤768px
===================================================== */
@media(max-width:768px){
  .members-canvas{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
  }

  .member{
    min-height:auto;
  }

  .member img{
    width:120px;
    height:120px;
  }
  .meet-your-match {
    min-height: 220px;
  }
  .meet-your-match img{
    object-fit: cover;
  }
  .right-vector ,.left-vector{
    width: 200px;
  }
  .right-vectorimg ,.left-vector img{
    width: 100%;
  }
    .online-dot {
        top: 12px !important;
        left: 4px !important;
    }
}

/* =====================================================
SMALL MOBILE ≤480px
===================================================== */
@media(max-width:480px){
  .members-canvas{
    gap:24px;
  }

  .member img{
    width:100px;
    height:100px;
  }
  .navbar-expand-lg  .container{
    flex-wrap: nowrap;
  }
}

/* =====================================================
FOOTER RESPONSIVE
===================================================== */
.site-footer{
  background:#3a3a3a;
  color:#fff;
  padding:60px 0 25px;
}

.footer-menu{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.footer-menu a{
  color:#e0e0e0;
  font-size:var(--fs-20);
  text-decoration:none;
}

@media(max-width:768px){
  .footer-menu{
    gap:18px;
    justify-content:center;
  }
}