@font-face{
  font-family: "Figtree";
  src: url("./fonts/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root{
  --pink-1:#ff7aa8;
  --pink-2:#f04f8a;
  --pink-3:#ff99b8;
}

/* Page background */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: url("../assets/background.jpg") center/cover no-repeat fixed;
}

/* Navbar styling */
.mhf-nav{
  width: 100%;             /* Full width */
  margin: 0;               /* Remove margin */
  padding: 1rem 5%;        /* Adjustable vertical padding and 5% horizontal padding */
  background: #fff;
  border-radius: 0;        /* No border radius */
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  display: flex; 
  align-items: center; 
  justify-content: space-around; /* Changed from space-between */
}
.mhf-nav .brand img{ height: 6em; width:auto; } /* Increased from 4em */
.nav-date {
  font-family: "Figtree", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Gradient Button with Hover */
.btn-cta{
  background: linear-gradient(to right, #f04f8a 0%, #ff7aa8 51%, #f04f8a 100%);
  background-size: 200% auto;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 1rem 2.5rem; /* Increased padding */
  font-size: 1.2rem;    /* Increased font size */
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); /* Stronger shadow for visibility */
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-cta:hover{
  background-position: right center;
  color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); /* Enhanced hover shadow */
}

.btn-cta:active {
  transform: translateY(0);
}

/* Banner-first hero */
.hero-banner{
  background: transparent;
}
.hero-banner img{
  display:block;
  border: 1px solid rgba(0,0,0,.06);
}

/* 90% width wrapper for banner */
.w-90{ 
  width: 90%; 
  margin-left: auto;
  margin-right: auto;
}

/* Hero background with overlay */
.hero{
  position: relative;
  color:#fff;
  background: none;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 0% 0%, rgba(255,122,168,.9), rgba(240,79,138,.65) 45%, rgba(0,0,0,.15) 100%);
  pointer-events:none;
}
.hero .container, .hero .row{ position: relative; z-index: 1; }

.banner-cta{
    /* display: flex;  <-- Removed to support Bootstrap grid */
    background-color: #562c78;
    margin: 0;
    /* justify-self: center; <-- Removed */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.banner-cta:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(86, 44, 120, 0.4) !important;
}

.banner-cta img {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-cta:hover img {
    transform: scale(1.03) rotate(-1deg);
}

/* Logo */
.hero-logo{
  width: clamp(120px, 18vw, 180px);
  height:auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Figtree Typography */
.text-figtree {
  font-family: "Figtree", sans-serif;
  color: #262c38;
}

/* Title styling to match the visual */
.script-title{
  font-family: "Pacifico", cursive;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height:.95;
  text-shadow: 0 3px 18px rgba(0,0,0,.25);
  margin-bottom:.5rem;
}
.date-line{
  font-size: clamp(1rem, 3.5vw, 2rem);
  letter-spacing:.4px;
}

/* Card */
.hero-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.icon-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; background:#f7f7f8; color:#dc3c7a;
  flex-shrink:0; font-size:1.2rem;
}

.intro-text {
  font-family: "Figtree"  !important;
  color: #190708 !important;
  font-size: 2.5em;
  text-align: justify;
  letter-spacing: 1;
}

/* Location band */
.location-band{ border-top: 6px solid rgba(255,255,255,.4); }

/* Map & gallery */
.object-cover{ object-fit:cover; }
.object-fit-cover{ object-fit: cover; }
.gallery img{ aspect-ratio: 3 / 2; }

/* Utility class to use Figtree anywhere */
.font-figtree{
  font-family: "Figtree", Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Apply Figtree to key headings */
.hero-card h2,
.hero-card h3,
.location-band .h5,
.date-line{
  font-family: "Figtree", Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Feature cards */
.feature-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.feature-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 34px rgba(0,0,0,.14);
}
.feature-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:16px;
  background: linear-gradient(135deg, var(--pink-3), var(--pink-2));
  color:#fff;
  box-shadow: 0 8px 16px rgba(240,79,138,.30);
}
.feature-icon i{ font-size: 2.2rem; line-height:1; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .hero{ padding-top: 2rem; }
  .hero-logo{ margin-bottom:.75rem; }
}
@media (max-width: 575.98px){
  .script-title{ letter-spacing:.5px; }
  .hero-banner{ padding-top: .5rem; padding-bottom: .5rem; }
}

/* Overlap features section over previous container */
.features-overlap{
  margin-top: -4rem;           /* pull up to overpose */
  z-index: 2;
}

/* So the previous section stays underneath visually */
.bg-white.rounded-4.w-90{
  position: relative;
  z-index: 1;
}

/* Responsive: soften overlap on small screens */
@media (max-width: 767.98px){
  .features-overlap{ margin-top: -2rem; }
}
@media (max-width: 575.98px){
  .features-overlap{ margin-top: 0; }
}


.object-fit-cover{ object-fit: cover; }

/* AOS: bounce-up entrance */
@keyframes mhf-bounce-in-up {
  from { opacity: 0; transform: translate3d(0, 80px, 0) scale3d(.92,.92,1); }
  60% { opacity: 1; transform: translate3d(0, -14px, 0) scale3d(1.02,1.02,1); }
  75% { transform: translate3d(0, 8px, 0) scale3d(.99,.99,1); }
  90% { transform: translate3d(0, -4px, 0) scale3d(1.01,1.01,1); }
  to   { transform: translate3d(0, 0, 0) scale3d(1,1,1); }
}

[data-aos="bounce-up"] {
  opacity: 0;
  will-change: transform;
  transform: translate3d(0, 40px, 0);
}

[data-aos="bounce-up"].aos-animate {
  opacity: 1;
  animation: mhf-bounce-in-up var(--mhf-bounce-duration, 800ms) both;
  animation-delay: var(--mhf-bounce-delay, 0ms); /* read per-card delay */
}

/* Location Section UI */
.location-card {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.location-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.14); }
.location-card .pin-icon { color: var(--pink-2); }
.location-title { font-size: clamp(1.4rem, 3.2vw, 2rem); }

.map-card { transition: transform .3s ease, box-shadow .3s ease; }
.map-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.14); }
.map-card iframe { width:100%; height:100%; border:0; }

/* Calendar invite button overlay */
.map-overlay { position: absolute; right: 1rem; bottom: 1rem; }
.btn-invite{
  background: linear-gradient(135deg, #2b2e3b, #1f2230);
  color:#fff;
  border:none;
  border-radius: 999px;
  padding:.75rem 1.2rem;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
  background-size: 200% auto;
}
.btn-invite:hover{ transform: translateY(-2px); background-position: right center; box-shadow: 0 12px 26px rgba(0,0,0,.35); }

@media (max-width: 767.98px){ .map-overlay { right:.75rem; bottom:.75rem; } }

/* ---- Embedded Info Section (mockup accurate) ---- */

/* Brand helpers */
.text-brand-pink { color: var(--pink-2); }
.bg-brand-pink { background-color: var(--pink-2); }
.border-brand-pink { border-color: var(--pink-2); }

/* Hero gradient + overlays */
.bg-hero-gradient{
  background: linear-gradient(135deg, #ff4fa3 0%, #b54ee3 45%, #6f2e96 100%);
}
.dotted-pattern{
  background-image: radial-gradient(rgba(255,255,255,.25) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
}
.bg-geometry{
  background:
    conic-gradient(from 45deg at 10% 10%, rgba(255,255,255,.16) 0 25%, transparent 0 100%),
    conic-gradient(from 225deg at 90% 90%, rgba(255,255,255,.12) 0 25%, transparent 0 100%);
  opacity:.35;
}

/* Bigger hero title/subtitle to fill container */
.bg-hero-gradient h1{
  font-family: "Figtree", sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 5rem);
  letter-spacing:.5px;
}
.bg-hero-gradient h2{
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  letter-spacing: 1.2px;
}

/* Requirement cards */
.bg-card-header-gradient{
  background: linear-gradient(90deg, #f04f8a 0%, #9b51e0 100%);
}
.floating-check{
  position:absolute; top:-16px; left:24px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.grid .rounded-2xl{
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.grid .rounded-2xl h3{ font-size: clamp(1rem, 1.6vw, 1.25rem); }
.grid .rounded-2xl .space-y-3 span{
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}

/* Important banner */
.important-label{
  transform: translateY(-22px);
  display: inline-block;
}
.relative.border-2.border-brand-pink{
  border-radius: 1rem;
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}
.relative.border-2.border-brand-pink p{
  font-family: "Figtree", sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
}

/* Flower badges (bigger and wider) */
.badge-container{
  position: relative;
  /* Increased base width/height to prevent cutoff */
  width: clamp(160px, 25vw, 240px);
  height: clamp(160px, 25vw, 240px);
  margin-inline: clamp(6px, 2vw, 20px);
}

.badge-bg path{
  fill:#3c1455;
  stroke:#d278b6;
  stroke-width:5; 
}

.badge-content{
  position:absolute; inset:0;
  display:flex; flex-direction: column; 
  align-items:center; justify-content:center;
  text-align:center; color:#fff; font-family:"Figtree", sans-serif;
  line-height:1.1; 
  padding: 1rem; /* Added padding to keep text away from edges */
}

/* Numbers and labels scaled */
.badge-content .block.text-2xl{
  font-size: clamp(2rem, 4.5vw, 2.8rem); /* Slightly larger numbers */
  font-weight: 800;
  margin-bottom: 2px;
}
.badge-content .block.text-xl{
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
}
.badge-content .text-xs, 
.badge-content span[class*="text-[10px]"] {
  font-size: clamp(0.75rem, 1.6vw, 1rem); /* Readable but small enough to fit */
  font-weight: 700; 
  letter-spacing: 0.5px;
  max-width: 90%; /* Ensure text wraps */
}

/* Mobile adjustments */
@media (max-width: 575.98px){
  .badge-container{ 
    width: clamp(145px, 42vw, 175px); 
    height: clamp(145px, 42vw, 175px); 
  }
}

/* ---- Glossy Pill Badges ---- */
.badge-pill {
  position: relative;
  width: 100%;
  max-width: 250px;
  /* Aspect ratio for the pill shape */
  aspect-ratio: 1.6 / 1; 
  margin: 0 auto;
  padding: 5px; /* Thickness of the outer rim */
  border-radius: 999rem; /* Ensures perfectly rounded pill shape */
  
  /* Outer Rim Gradient: Light Pink/Purple */
  background: linear-gradient(135deg, #ef7db6 0%, #bd86f2 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.badge-pill:hover {
  transform: translateY(-5px) scale(1.02);
}

.badge-pill-inner {
  width: 100%;
  height: 100%;
  border-radius: 999rem; /* Matches outer shape */
  
  /* Inner Deep Gradient: Magenta to Deep Purple */
  background: linear-gradient(180deg, #d13689 0%, #631e88 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Inner Bezel */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 5px 15px rgba(0,0,0,0.3);
}

/* Top Gloss (The glass reflection effect) */
.badge-pill-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%);
  border-radius: 999rem 999rem 100% 100%; /* curve bottom slightly */
  pointer-events: none;
}

/* Accent Reflection */
.badge-pill-inner::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 20%;
  width: 20%;
  height: 20%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* Badge Typography */
.badge-pill-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.badge-val {
  font-family: "Figtree", sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  display: block;
}

.badge-lbl {
  font-family: "Figtree", sans-serif;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 4px;
  line-height: 1.1;
}

.badge-sm {
  font-family: "Figtree", sans-serif;
  font-size: clamp(0.7rem, 1.3vw, 0.9rem);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
}

/* Sub-headline for professionals list */
.professionals-list {
  font-family: "Figtree", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #5a6275;
  letter-spacing: 0.5px;
}

.professionals-list span::after {
  content: "•";
  font-weight: 400;
  color: #d0d4db;
  margin: 0 0.75rem;
}

.professionals-list span:last-child::after {
  content: "";
  margin: 0;
}