
    * { font-family: 'Inter', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
    body { background-color: #fffbf5; }  /* soft warm background */

    /* ----- bright gradients (no dull shades) ----- */
    .bg-sunset { background: linear-gradient(135deg, #FF6B6B, #FF8E53, #FFD93D); }
    .bg-teal-pop { background: linear-gradient(145deg, #4ECDC4, #45B7D1, #6C5CE7); }
    .bg-pink-vibrant { background: #FF1493; }
    .bg-electric-violet { background: #AA00FF; }
    .bg-yellow-sunshine { background: #FFD93D; }

    /* ----- glassmorphism navbar (premium) ----- */
    .navbar-premium {
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px -5px rgba(255,20,147,0.2);
      padding: 0.6rem 0;
      border-bottom: 2px solid #FFD93D;
    }
    .navbar-brand { font-weight: 800; font-size: 1.9rem; letter-spacing: -0.5px; }
    .brand-pink { color: #FF1493; }
    .brand-violet { color: #AA00FF; }
    .nav-link { font-weight: 600; color: #1e1e1e; margin: 0 0.7rem; }
    .nav-link:hover { color: #FF1493; }
    .btn-register {
      background: #FF1493;
      color: white;
      border-radius: 40px;
      padding: 0.6rem 2rem;
      font-weight: 700;
      border: none;
      box-shadow: 0 8px 18px #FF1493b3;
      transition: all 0.2s;
    }
    .btn-register:hover { background: #d8007a; transform: scale(1.02); color: white; }

    /* ----- hero section (bright animated gradient) ----- */
    .hero-section {
      background: linear-gradient(125deg, #FF6B6B, #FF8E53, #FFD93D, #4ECDC4, #6C5CE7);
      background-size: 300% 300%;
      animation: flowGradient 10s ease infinite;
      padding: 4rem 0 5rem 0;
      border-bottom-left-radius: 3rem;
      border-bottom-right-radius: 3rem;
      margin-bottom: 2rem;
      color: white;
    }
    @keyframes flowGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
    .hero-title {
      font-weight: 800;
      font-size: clamp(2.5rem, 8vw, 4.5rem);
      text-shadow: 3px 3px 0 rgba(0,0,0,0.07);
      letter-spacing: -0.02em;
    }
    .hero-sub {
      font-size: 1.5rem; font-weight: 600;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(4px);
      display: inline-block;
      padding: 0.4rem 2rem;
      border-radius: 60px;
    }

    /* ----- modern search form (tabs & inputs) ----- */
    .search-card {
      background: white;
      border-radius: 3rem;
      padding: 1.5rem 1.8rem;
      box-shadow: 0 30px 40px -20px #FF1493, 0 10px 20px -5px #FFD93D;
      margin-top: 1rem;
    }
    .search-tabs .nav-link {
      color: #2d2d2d; font-weight: 700; border-radius: 40px; padding: 0.6rem 2rem;
      background: #ffeef2; margin-right: 0.5rem; border: none;
    }
    .search-tabs .nav-link.active {
      background: #FF1493; color: white; box-shadow: 0 6px 12px #FF1493;
    }
    .form-control, .form-select {
      border-radius: 40px; border: 2px solid #ffe2e9; padding: 0.8rem 1.5rem;
      font-weight: 500; background-color: #fff9fc;
    }
    .form-control:focus, .form-select:focus {
      border-color: #FF1493; box-shadow: 0 0 0 0.3rem rgba(255,20,147,0.25);
    }
    .btn-find {
      background: #AA00FF; color: white; border-radius: 40px; padding: 0.8rem 2.5rem;
      font-weight: 700; font-size: 1.2rem; border: none; box-shadow: 0 8px 0 #6C5CE7;
      transition: 0.1s ease;
    }
    .btn-find:hover { background: #9013e0; transform: translateY(-2px); box-shadow: 0 10px 0 #4ECDC4; }

    /* ----- feature cards (shaadi experience) ----- */
    .feature-card {
      background: white; border-radius: 2.5rem; padding: 2.5rem 1.5rem; height: 100%;
      box-shadow: 0 25px 35px -15px #ffb6c180; transition: all 0.25s;
      border: 1px solid #ffd9e2; text-align: center;
    }
    .feature-card:hover { transform: translateY(-15px); box-shadow: 0 35px 35px -12px #FF1493; }
    .feature-icon {
      width: 100px; height: 100px; background: #FFD93D; border-radius: 30px;
      display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
      font-size: 3rem; color: #AA00FF; border: 4px solid #FF1493;
    }
    .feature-card h3 { font-weight: 800; font-size: 1.8rem; background: linear-gradient(145deg, #FF1493, #AA00FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    /* ----- founder / elite section ----- */
    .elite-section {
      background: linear-gradient(145deg, #f7e9ff, #fff2d7); border-radius: 3rem; padding: 3rem;
      margin: 3rem 0; border: 3px solid #FFD93D;
    }
    .founder-quote { font-size: 1.8rem; font-weight: 600; line-height: 1.3; color: #2d2d2d; border-left: 8px solid #FF1493; padding-left: 2rem; }
    .founder-name { font-weight: 700; color: #AA00FF; }

    /* ----- success stories strip ----- */
    .stories-strip {
      background: #FFD93D; border-radius: 2rem; padding: 3rem 2rem;
      background: linear-gradient(135deg, #FFD93D, #FFB347); color: #1e1e1e;
    }

    /* ----- FAQ accordion (bright, clean) ----- */
    .accordion-item { border: 2px solid #FFD0D8; border-radius: 1.5rem !important; margin-bottom: 1rem; overflow: hidden; }
    .accordion-button { background: white; font-weight: 700; font-size: 1.2rem; color: #FF1493; padding: 1.5rem; }
    .accordion-button:not(.collapsed) { background: #fff0f5; color: #AA00FF; box-shadow: none; }
    .accordion-button:focus { box-shadow: 0 0 0 3px #FFb6d0; border-color: #FF1493; }
    .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FF1493' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3E%3C/svg%3E"); }
    .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23AA00FF' class='bi bi-dash-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z'/%3E%3C/svg%3E"); }

    /* ----- footer bright ----- */
    .footer-bright { background: #FF1493; color: white; border-top-left-radius: 3rem; border-top-right-radius: 3rem; padding: 2.5rem 0; margin-top: 4rem; }

    @media (max-width: 576px) {
      .search-card { padding: 1.2rem; }
      .founder-quote { font-size: 1.3rem; }
    }


    .success-image-box{
border-radius:25px;
overflow:hidden;
width: 400px;
}

.success-image-box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}



    .hero{
min-height:90vh;
}

.hero-content{
min-height:90vh;
}

.hero-overlay{
background:rgba(0,0,0,0.25);
}

.hero-title{
font-size:clamp(2rem,6vw,4.5rem);
text-shadow:3px 3px 10px rgba(0,0,0,0.4);
}

.hero-subtitle{
font-size:clamp(1rem,2.5vw,1.4rem);
background:rgba(255,255,255,0.2);
backdrop-filter:blur(4px);
display:inline-block;
padding:8px 28px;
border-radius:60px;
}

.btn-find{
background:#FF1493;
color:#fff;
padding:14px 38px;
font-size:1.1rem;
font-weight:700;
box-shadow:0 8px 0 #AA00FF;
}

.hero-stats{
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(255,255,255,0.92);
backdrop-filter:blur(8px);
border-top:4px solid #FFD93D;
padding:12px 0;
}

.stat-main{
font-weight:700;
font-size:1.1rem;
color:#FF1493;
}

.rating{
font-weight:700;
font-size:1.2rem;
color:#AA00FF;
}

.stat-sub{
font-size:0.85rem;
color:#666;
}

@media (max-width:768px){

.hero{
min-height:75vh;
}

.hero-content{
padding:40px 0;
}

.hero-stats{
position:relative;
}

}
.hero-bg img{
object-fit: cover;
object-position: center 5%;
}

.image-row{
width:100%;
padding:20px 0;
background:#fff;
}

.image-grid{
display:grid;
grid-template-columns: repeat(6, 1fr);
gap:10px;
}

.image-grid img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
display:block;
}

/* Tablet */
@media (max-width:992px){
.image-grid{
grid-template-columns: repeat(4, 1fr);
}
}

/* Mobile */
@media (max-width:576px){
.image-grid{
grid-template-columns: repeat(2, 1fr);
}

.image-grid img{
height:140px;
}
}
