@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karma:wght@300;400;500;600;700&family=Marcellus+SC&display=swap');

/* =====================================================
   ROOT VARIABLES
===================================================== */
:root{
  /* ---------- FONT SIZES (CLAMP) ---------- */
  --fs-102: clamp(36px, 6.5vw, 94px);
  --fs-70:  clamp(30px, 5.5vw, 70px);
  --fs-64:  clamp(28px, 5vw, 64px);
  --fs-40:  clamp(22px, 3.8vw, 40px);
  --fs-36:  clamp(20px, 3.4vw, 36px);
  --fs-32:  clamp(18px, 3vw, 32px);
  --fs-30:  clamp(17px, 2.8vw, 30px);
  --fs-20:  clamp(15px, 2.2vw, 20px);
  --fs-16:  clamp(14px, 1.8vw, 16px);
  --p-80: clamp(40px, 6vw, 80px);
  --p-40: clamp(20px, 4vw, 40px);
  --p-20: clamp(12px, 2.5vw, 20px);
  --img-scale: clamp(0.45, 0.06vw + 0.45, 0.8); 
  --lh-100: 1;
  --lh-110: 1.1;

  /* ---------- FONT WEIGHTS ---------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- COLORS ---------- */
  --color-primary: #FF0066;
  --color-secondary: #FFF5FB;
  --color-dark-bg: #333333;
  --color-text: #333333;
  --color-white: #ffffff;
  --color-secondary-text: #92989F;

  /* ---------- FONT FAMILIES ---------- */
  --font-primary: "Karma", serif;
  --font-secondary: "Marcellus SC", serif;
}

/* =====================================================
   BASE RESET / GLOBAL
===================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:var(--font-primary);
  color:var(--color-text);
  background:#fff;
}
p,h1,h2,h3,h4,h5,h6{
  margin-bottom: 0;
}

/* =====================================================
   FONT SIZE CLASSES
===================================================== */
.fs-102{font-size:var(--fs-102);}
.fs-70{font-size:var(--fs-70);}
.fs-64{font-size:var(--fs-64);}
.fs-40{font-size:var(--fs-40);}
.fs-36{font-size:var(--fs-36);}
.fs-32{font-size:var(--fs-32);}
.fs-30{font-size:var(--fs-30);}
.fs-20{font-size:var(--fs-20);}

/* =====================================================
   FONT WEIGHT CLASSES
===================================================== */
.fw-light{font-weight:var(--fw-light);}
.fw-regular{font-weight:var(--fw-regular);}
.fw-medium{font-weight:var(--fw-medium);}
.fw-semibold{font-weight:var(--fw-semibold);}
.fw-bold{font-weight:var(--fw-bold);}

/* ===== LINE HEIGHT CLASSES ===== */
.lh-100{line-height:var(--lh-100);}
.lh-110{line-height:var(--lh-110);}

/* =====================================================
   FONT FAMILY CLASSES
===================================================== */
.font-primary{font-family:var(--font-primary);}
.font-secondary{font-family:var(--font-secondary);}

/* =====================================================
   TEXT COLOR CLASSES
===================================================== */
.text-primary{color:var(--color-primary)!important;}
.text-secondary{color:var(--color-secondary-text)!important;}
.text-dark{color:var(--color-text)!important;}
.text-white{color:var(--color-white)!important;}

/* ===== PADDING Y (TOP + BOTTOM) ===== */
.py-80{padding-top:var(--p-80);padding-bottom:var(--p-80);}
.py-40{padding-top:var(--p-40);padding-bottom:var(--p-40);}
.py-20{padding-top:var(--p-20);padding-bottom:var(--p-20);}

/* ===== PADDING TOP ===== */
.pt-80{padding-top:var(--p-80);}
.pt-40{padding-top:var(--p-40);}
.pt-20{padding-top:var(--p-20);}

/* ===== PADDING BOTTOM ===== */
.pb-80{padding-bottom:var(--p-80);}
.pb-40{padding-bottom:var(--p-40);}
.pb-20{padding-bottom:var(--p-20);}

/* =====================================================
   BACKGROUND COLOR CLASSES
===================================================== */
.bg-primary{background-color:var(--color-primary)!important;}
.bg-secondary{background-color:var(--color-secondary)!important;}
.bg-dark{background-color:var(--color-dark-bg)!important;}
.bg-white{background-color:var(--color-white)!important;}


/* Header */
.nav-item .nav-link.active {
  position: relative;
  color: var(--color-primary);
  font-weight: var(--fw-semibold) !important;
}
.nav-item .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 10px 10px 0 0;
  opacity: 10%;
}

/* ================= ICON WRAPPER ================= */
.icon{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:50%;
  background:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
}

/* ================= ICON VARIANTS (OPTIONAL) ================= */
.icon img{
  width:30px;
  height:30px;
  min-width:30px;
  font-size:18px;
}








/* =====================================================
   BUTTON (BOOTSTRAP FRIENDLY)
===================================================== */
.btn-primary-custom{
  background:var(--color-primary);
  color:#fff;
  border:none;
  padding:14px 34px;
  border-radius:40px;
  font-weight:var(--fw-medium);
}
.btn-primary-custom:hover{
  background:#e6005c;
  color:#fff;
}

/* =====================================================
   COMMON HELPERS
===================================================== */
.rounded-pill{border-radius:50px;}
.shadow-sm-custom{box-shadow:0 4px 20px rgba(0,0,0,0.06);}

.meet-your-match{
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay{
  background: #0000006E;
  z-index: 1;
}
.meet-your-match .container{
  z-index: 10;
  position: relative;
}
.meet-your-match::before{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #0000006E;
  content: "";
  z-index: 10;
}

.timeline-item {
    display: flex;
    align-items: start;
    position: relative;
}

.timeline-left{
    position: relative;
     width: 200px;
     z-index: 10;
}
.timeline-item::before{
  width: 2px;
  height: calc(100% + 14%); 
  content: "";
  position: absolute;
  background-color: var(--color-dark-bg);
  left: 12px;
  top: 50px;
  /* z-index: -1; */
}
  .timeline-item:last-child::before{
  display:  none;
}

/* ================= CANVAS FIX ================= */
.members-canvas{
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  gap: 60px 0;
}

/* ================= MEMBER RESET ================= */
.member{
  position: relative !important;
  inset: unset !important;
}

/* ================= DESKTOP SIZES (AS GIVEN) ================= */
/* ===== FORCE IMAGE SIZE (OVERRIDE ALL) ===== */


/* ===== INDIVIDUAL IMAGE SIZES ===== */
.m1 img{ width:173px ; height:173px ; }
.m2 img{ width:200px ; height:200px ; }
.m3 img{ width:260px ; height:260px ; }
.m4 img{ width:170px ; height:170px ; }
.m5 img{ width:270px ; height:270px ; }
.m6 img{ width:144px ; height:144px ; }
.m7 img{ width:190px ; height:190px ; }
.m8 img{ width:144px ; height:144px ; }

.member{
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.member img{
  border: 4px solid var(--color-primary);
border-radius: 50%;
}
.users-availablity{
  width: fit-content;
}
/* ================= ONLINE DOT ================= */
.online-dot{
  top: 16px;
  left: 12px;
  position: absolute;
  background: #1EC205;
  border: 2px solid #FF0066;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.m2 .online-dot{
  top: 23px;
}

.m3 .online-dot{
  top: 40px;
}
/* .m4 .online-dot{
  top: 23px;
} */
.m5 .online-dot {
    top: 43px;
}
.m6 .online-dot{
  top: 14px;
      left: 7px;
}
.m7 .online-dot{
  top: 23px;
}
.m8 .online-dot{
  top: 23px;
      left: 2px;
}

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

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

  .m1{ width:140px; height:140px; }
  .m2{ width:160px; height:160px; }
  .m3{ width:200px; height:200px; }
  .m4{ width:140px; height:140px; }
  .m5{ width:210px; height:210px; }
  .m6{ width:110px; height:110px; }
  .m7{ width:150px; height:150px; }
  .m8{ width:110px; height:110px; }
}

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

  .member{
    width:120px !important;
    height:120px !important;
  }
}

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

  .member{
    width:100px !important;
    height:100px !important;
  }
}



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

/* ================= LEFT ================= */
.footer-left{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:600;
}


/* ================= MENU ================= */
.footer-menu{
  display:flex;
  gap:28px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}

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

.footer-menu a:hover{
  color:#fff;
}

/* ================= RIGHT ================= */
.newsletter-title{
  font-size:var(--fs-20);
  color:#e0e0e0;
}

.footer-btn{
  display:inline-block;
  padding:10px 24px;
  background:#ff0066;
  color:#fff;
  border-radius:30px;
  font-size:var(--fs-20);
  text-decoration:none;
  font-weight:500;
}

/* ================= DIVIDER ================= */
.footer-divider{
  margin:40px 0 20px;
  height:1px;
  background:rgba(255,255,255,0.25);
}

/* ================= BOTTOM ================= */
.footer-legal{
  display:flex;
  gap:20px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}

.footer-legal a,.footer-copy{
  font-size: var(--fs-16);
  color:#92989F;
  text-decoration:none;
}

.footer-legal a:hover{
  color:#fff;
}



/* ================= MOBILE ================= */
@media(max-width:768px){
  .footer-menu{
    gap:20px;
  }

  .footer-btn{
    margin-top:5px;
  }
}
.hero-section{
  background: url(../images/herobg.webp) no-repeat;
  background-size: cover;
}

.right-vector, .left-vector{
  z-index: -1;
}