:root{

--primary:#FF671F;
--primary-dark:#E65A17;
--green:#138808;
--dark:#111827;
--light:#FFF7F2;
--gray:#6B7280;
--border:#ECECEC;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:#fff;
color:#222;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

.container{

width:min(92%,1300px);
margin:auto;

}


/* =========================================================
   COMMUNITY HELP SECTION
========================================================= */

.community-help {
    padding: 100px 0;
    background: #fff8f3;
    position: relative;
    overflow: hidden;
}

.help-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    background: #fff0e8;
    color: #e85d04;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 15px;
}

.help-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 45px;
}

.help-feature-card {
    position: relative;
    display: flex;
    gap: 22px;
    padding: 35px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #f1e5dd;
    box-shadow: 0 15px 45px rgba(80, 45, 20, 0.08);
    transition: all .3s ease;
}

.help-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 55px rgba(80, 45, 20, 0.13);
}

.help-request-card {
    border-top: 5px solid #e85d04;
}

.help-volunteer-card {
    border-top: 5px solid #16a34a;
}

.help-card-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0e8;
    color: #e85d04;
    font-size: 25px;
}

.help-volunteer-card .help-card-icon {
    background: #ecfdf3;
    color: #16a34a;
}

.help-card-content {
    flex: 1;
}

.help-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #e85d04;
    margin-bottom: 7px;
}

.help-volunteer-card .help-label {
    color: #16a34a;
}

.help-card-content h3 {
    font-size: 25px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.help-card-content p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
}

.help-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.help-types span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 50px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.help-types i {
    color: #e85d04;
}

.help-primary-btn,
.help-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
}

.help-primary-btn {
    background: #e85d04;
    color: #fff;
}

.help-primary-btn:hover {
    background: #c94d00;
    transform: translateY(-2px);
}

.help-secondary-btn {
    background: #16a34a;
    color: #fff;
}

.help-secondary-btn:hover {
    background: #15803d;
    transform: translateY(-2px);
}

.volunteer-points {
    display: grid;
    gap: 12px;
    margin: 20px 0 25px;
}

.volunteer-points div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #475569;
    font-size: 14px;
}

.volunteer-points i {
    width: 28px;
    color: #16a34a;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.help-how-it-works {
    margin-top: 55px;
    padding: 40px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #f1e5dd;
}

.help-how-title {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 35px;
}

.help-how-title h3 {
    font-size: 26px;
    margin-bottom: 8px;
}

.help-how-title p {
    color: #64748b;
    line-height: 1.7;
}

.help-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.help-step {
    position: relative;
    text-align: center;
    padding: 10px;
}

.help-step-number {
    position: absolute;
    top: -5px;
    right: 15px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e85d04;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.help-step-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 15px;
    border-radius: 20px;
    background: #fff0e8;
    color: #e85d04;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.help-step h4 {
    margin-bottom: 8px;
    font-size: 17px;
}

.help-step p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   HELP CATEGORIES
========================================================= */

.help-category-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.help-category {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border-radius: 20px;
}

.help-category i {
    font-size: 25px;
    margin-top: 3px;
}

.help-category strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.help-category span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
}

.help-category.emergency {
    background: #fff1f2;
    color: #be123c;
}

.help-category.non-emergency {
    background: #eff6ff;
    color: #1d4ed8;
}


/* =========================================================
   VOICE INPUT PROMOTION
========================================================= */

.help-voice-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    padding: 25px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.help-voice-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 50%;
    background: #e85d04;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.help-voice-box h3 {
    margin: 0 0 5px;
    font-size: 18px;
}

.help-voice-box p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 14px;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.help-disclaimer {
    display: flex;
    gap: 16px;
    margin-top: 25px;
    padding: 22px;
    border-radius: 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.help-disclaimer-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: #fef3c7;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-disclaimer strong {
    display: block;
    color: #92400e;
    margin-bottom: 7px;
}

.help-disclaimer p {
    color: #78350f;
    font-size: 12px;
    line-height: 1.7;
    margin: 5px 0;
}


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

@media (max-width: 900px) {

    .help-main-grid {
        grid-template-columns: 1fr;
    }

    .help-steps {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .community-help {
        padding: 70px 0;
    }

    .help-feature-card {
        padding: 24px;
        flex-direction: column;
    }

    .help-card-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }

    .help-card-content h3 {
        font-size: 22px;
    }

    .help-how-it-works {
        padding: 25px 18px;
    }

    .help-steps {
        grid-template-columns: 1fr;
    }

    .help-category-strip {
        grid-template-columns: 1fr;
    }

    .help-voice-box {
        align-items: flex-start;
    }

    .help-disclaimer {
        align-items: flex-start;
    }

}



/*=========================
HEADER
=========================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

transition:.35s;

}

header.scrolled{

background:#fff;

box-shadow:0 12px 30px rgba(0,0,0,.08);

backdrop-filter:blur(10px);

}

nav{

height:82px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:28px;

font-weight:800;

color:var(--primary);

}

.logo img{

width:48px;

height:48px;

}

.menu{

display:flex;

gap:34px;

align-items:center;

}

.menu a{

font-weight:600;

color:#333;

transition:.25s;

}

.menu a:hover{

color:var(--primary);

}

.header-right{

display:flex;

align-items:center;

gap:15px;

}

.login-btn{

padding:12px 22px;

border-radius:50px;

font-weight:700;

background:#fff;

color:#333;

border:2px solid var(--border);

transition:.25s;

}

.login-btn:hover{

border-color:var(--primary);

color:var(--primary);

}

.join-btn{

padding:13px 24px;

border-radius:50px;

background:var(--primary);

color:#fff;

font-weight:700;

transition:.25s;

}

.join-btn:hover{

background:var(--primary-dark);

}

.mobile-menu{

display:none;

font-size:26px;

color:var(--primary);

cursor:pointer;

}

@media(max-width:992px){

.menu,
.header-right{

display:none;

}

.mobile-menu{

display:block;

}

}


.hero{

padding:150px 0 90px;

background:
linear-gradient(135deg,#FFF7F2 0%,#FFFFFF 60%,#FFF4EC 100%);

overflow:hidden;

position:relative;

}

.hero::before{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:500px;

height:500px;

border-radius:50%;

background:rgba(255,103,31,.08);

}

.hero::after{

content:"";

position:absolute;

left:-120px;

bottom:-120px;

width:320px;

height:320px;

border-radius:50%;

background:rgba(19,136,8,.06);

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:60px;

align-items:center;

position:relative;

z-index:2;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:40px;

background:#FFF1E7;

color:#FF671F;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:68px;

line-height:1.08;

font-weight:800;

color:#111827;

margin-bottom:25px;

}

.hero h1 span{

color:#FF671F;

}

.hero p{

font-size:20px;

line-height:1.8;

color:#64748B;

max-width:650px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:40px;

}

.hero-btn{

padding:16px 28px;

border-radius:50px;

background:#FF671F;

color:#fff;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

transition:.25s;

}

.hero-btn:hover{

background:#E65A17;

transform:translateY(-2px);

}

.hero-outline{

padding:16px 28px;

border-radius:50px;

border:2px solid #FF671F;

color:#FF671F;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

transition:.25s;

background:#fff;

}

.hero-outline:hover{

background:#FF671F;

color:#fff;

}

.trust{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:40px;

}

.trust-item{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

color:#444;

}

.trust-item i{

color:#138808;

font-size:20px;

}

/*=========================
RIGHT SIDE
=========================*/

.hero-right{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.feature-card{

background:#fff;

padding:28px;

border-radius:26px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.3s;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-icon{

width:65px;

height:65px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin-bottom:20px;

background:#FFF3EB;

color:#FF671F;

}

.feature-card h3{

font-size:22px;

margin-bottom:12px;

}

.feature-card p{

font-size:15px;

line-height:1.7;

color:#666;

}

/*=========================
LIVE STATUS
=========================*/

.live-box{

grid-column:span 2;

background:linear-gradient(135deg,#FF671F,#FF8A4C);

color:#fff;

padding:28px;

border-radius:28px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}

.live-box h2{

font-size:42px;

margin-bottom:6px;

}

.live-box small{

opacity:.95;

font-size:15px;

}

.live-status{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

}

.live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#00FF73;

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{transform:scale(1);opacity:1;}

50%{transform:scale(1.4);opacity:.5;}

100%{transform:scale(1);opacity:1;}

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.hero{

padding:130px 0 60px;

}

.hero-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.hero-right{

grid-template-columns:1fr;

}

.live-box{

grid-column:auto;

}

}


.stats-section{

padding:90px 0;

background:#fff;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:48px;

font-weight:800;

margin-bottom:15px;

color:#111827;

}

.section-title p{

font-size:18px;

color:#666;

max-width:700px;

margin:auto;

line-height:1.8;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:40px;

}

.stat-card{

background:#FFF7F2;

padding:35px;

border-radius:28px;

text-align:center;

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.stat-icon{

width:80px;

height:80px;

margin:auto;

border-radius:22px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#FF671F;

margin-bottom:20px;

}

.stat-card h3{

font-size:44px;

font-weight:800;

color:#FF671F;

margin-bottom:10px;

}

.stat-card p{

font-size:17px;

font-weight:600;

color:#555;

}

/*=============================
SERVICES
=============================*/

.services{

padding:100px 0;

background:#FFF7F2;

}

.service-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:50px;

}

.service-card{

background:#fff;

padding:35px;

border-radius:28px;

transition:.3s;

box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.service-card:hover{

transform:translateY(-10px);

}

.service-icon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

background:#FFF3EB;

color:#FF671F;

margin-bottom:22px;

}

.service-card h3{

font-size:24px;

margin-bottom:14px;

}

.service-card p{

color:#666;

line-height:1.8;

margin-bottom:22px;

}

.service-link{

color:#FF671F;

font-weight:700;

}

@media(max-width:992px){

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.service-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.stats-grid,

.service-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

}


/*=========================
SECTION HEADER
=========================*/

.section-head{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.section-head h2{

font-size:42px;

font-weight:800;

}

.section-head p{

color:#666;

margin-top:10px;

}

.view-all{

padding:14px 24px;

border-radius:40px;

background:#FF671F;

color:#fff;

font-weight:700;

transition:.25s;

}

.view-all:hover{

background:#E65A17;

}

/*=========================
EVENTS
=========================*/

.events{

padding:100px 0;

background:#fff;

}

.event-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.event-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

.event-card:hover{

transform:translateY(-8px);

}

.event-card img{

width:100%;

height:220px;

object-fit:cover;

background:#f5f5f5;

}

.event-body{

padding:24px;

}

.event-body h3{

font-size:24px;

margin-bottom:15px;

}

.event-meta{

margin-bottom:10px;

color:#666;

}

.event-meta i{

color:#FF671F;

width:22px;

}

/*=========================
MATRIMONY
=========================*/

.matrimony{

padding:100px 0;

background:#FFF7F2;

}

.profile-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.profile-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

.profile-card:hover{

transform:translateY(-8px);

}

.profile-card img{

width:100%;

height:320px;

object-fit:cover;

background:#eee;

}

.profile-body{

padding:24px;

}

.profile-body h3{

font-size:24px;

margin-bottom:12px;

}

.profile-meta{

margin:8px 0;

color:#666;

}

.profile-meta i{

color:#FF671F;

width:22px;

}

.profile-btn{

margin-top:20px;

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 22px;

border-radius:50px;

background:#FF671F;

color:#fff;

font-weight:700;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.event-grid,
.profile-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.section-head{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.event-grid,
.profile-grid{

grid-template-columns:1fr;

}

.section-head h2{

font-size:34px;

}

}


.install-app{

position:fixed;

left:25px;

bottom:25px;

padding:15px 24px;

background:#138808;

color:#fff;

border:none;

border-radius:50px;

font-weight:700;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 15px 30px rgba(0,0,0,.15);

transition:.3s;

}

.install-app:hover{

transform:translateY(-4px);

}

html{

scroll-padding-top:90px;

}

img{

content-visibility:auto;

}

::selection{

background:#FF671F;

color:#fff;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#FF671F;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#FFF7F2;

}

a:focus,
button:focus,
input:focus{

outline:3px solid rgba(255,103,31,.25);

outline-offset:3px;

}


/*=========================
WHY HINDUHUM
=========================*/

.why{

padding:110px 0;

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:55px;

}

.why-card{

background:#FFF7F2;

padding:40px 30px;

border-radius:28px;

text-align:center;

transition:.3s;

}

.why-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.why-icon{

width:90px;

height:90px;

margin:auto;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

font-size:38px;

color:#FF671F;

margin-bottom:22px;

}

.why-card h3{

font-size:24px;

margin-bottom:15px;

}

.why-card p{

line-height:1.8;

color:#666;

}

/*=========================
TESTIMONIALS
=========================*/

.testimonials{

padding:110px 0;

background:#FFF7F2;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:55px;

}

.testimonial{

background:#fff;

padding:35px;

border-radius:30px;

box-shadow:0 12px 30px rgba(0,0,0,.07);

position:relative;

}

.testimonial::before{

content:"\f10d";

font-family:"Font Awesome 6 Free";

font-weight:900;

position:absolute;

top:25px;

right:25px;

font-size:34px;

color:#FFE1D0;

}

.stars{

color:#FFC107;

margin-bottom:18px;

}

.testimonial p{

line-height:1.9;

color:#555;

margin-bottom:22px;

}

.user{

display:flex;

align-items:center;

gap:15px;

}

.user-avatar{

width:60px;

height:60px;

border-radius:50%;

background:#FF671F;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:24px;

font-weight:700;

}

.user h4{

margin:0;

}

.user small{

color:#888;

}

/*=========================
CTA
=========================*/

.cta{

padding:110px 0;

background:linear-gradient(135deg,#FF671F,#FF874A);

color:#fff;

text-align:center;

}

.cta h2{

font-size:56px;

margin-bottom:20px;

font-weight:800;

}

.cta p{

font-size:20px;

max-width:800px;

margin:auto;

line-height:1.8;

opacity:.96;

}

.cta-buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-btn{

padding:16px 30px;

border-radius:50px;

background:#fff;

color:#FF671F;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

transition:.25s;

}

.cta-btn:hover{

transform:translateY(-3px);

}

.cta-outline{

padding:16px 30px;

border-radius:50px;

border:2px solid #fff;

color:#fff;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

}

.cta-outline:hover{

background:#fff;

color:#FF671F;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.why-grid{

grid-template-columns:repeat(2,1fr);

}

.testimonial-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.cta h2{

font-size:36px;

}

.cta p{

font-size:17px;

}

}


/*=========================
NEWS
=========================*/

.news{

padding:100px 0;

background:#fff;

}

.news-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:50px;

}

.news-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.news-card:hover{

transform:translateY(-8px);

}

.news-card img{

width:100%;

height:220px;

object-fit:cover;

}

.news-body{

padding:25px;

}

.news-date{

color:#FF671F;

font-size:14px;

font-weight:700;

margin-bottom:10px;

}

.news-body h3{

font-size:22px;

margin-bottom:15px;

}

.news-body p{

color:#666;

line-height:1.8;

}

/*=========================
FAQ
=========================*/

.faq{

padding:100px 0;

background:#FFF7F2;

}

.faq-item{

background:#fff;

margin-bottom:18px;

border-radius:18px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.faq-question{

padding:22px;

font-size:18px;

font-weight:700;

cursor:pointer;

display:flex;

justify-content:space-between;

align-items:center;

}

.faq-answer{

display:none;

padding:0 22px 22px;

color:#666;

line-height:1.8;

}

/*=========================
NEWSLETTER
=========================*/

.newsletter{

padding:100px 0;

background:#fff;

text-align:center;

}

.newsletter h2{

font-size:42px;

margin-bottom:20px;

}

.newsletter p{

color:#666;

margin-bottom:35px;

}

.newsletter form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter input{

width:400px;

max-width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:50px;

font-size:16px;

}

.newsletter button{

padding:18px 35px;

border:none;

border-radius:50px;

background:#FF671F;

color:#fff;

font-weight:700;

cursor:pointer;

}

/*=========================
FOOTER
=========================*/

.footer{

background:#111827;

color:#fff;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}

.footer h3{

margin-bottom:20px;

}

.footer p{

color:#CBD5E1;

line-height:1.9;

}

.footer a{

display:block;

color:#CBD5E1;

text-decoration:none;

margin-bottom:12px;

transition:.25s;

}

.footer a:hover{

color:#fff;

}

.social{

display:flex;

gap:15px;

margin-top:25px;

}

.social a{

width:45px;

height:45px;

border-radius:50%;

background:#1F2937;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

}

.social a:hover{

background:#FF671F;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.08);

margin-top:50px;

padding-top:25px;

text-align:center;

color:#94A3B8;

}

@media(max-width:992px){

.news-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

}



/*=========================
PARTNERS
=========================*/

.partners{

padding:100px 0;

background:#fff;

}

.partner-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:25px;

margin-top:50px;

}

.partner{

background:#fff;

height:120px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 10px 25px rgba(0,0,0,.07);

transition:.3s;

}

.partner:hover{

transform:translateY(-6px);

}

.partner img{

max-width:120px;

max-height:70px;

object-fit:contain;

}

/*=========================
APP
=========================*/

.app{

padding:120px 0;

background:linear-gradient(135deg,#FF671F,#FF8B45);

color:#fff;

}

.app-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.app h2{

font-size:54px;

margin-bottom:25px;

}

.app p{

font-size:20px;

line-height:1.9;

opacity:.95;

}

.store-buttons{

display:flex;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

.store{

padding:16px 28px;

background:#fff;

color:#111;

border-radius:18px;

font-weight:700;

display:flex;

align-items:center;

gap:12px;

}

.store i{

font-size:28px;

}

.phone-preview{

text-align:center;

}

.phone-preview img{

max-width:340px;

margin:auto;

filter:drop-shadow(0 30px 45px rgba(0,0,0,.25));

}

/*=========================
CONTACT
=========================*/

.contact{

padding:100px 0;

background:#FFF7F2;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:45px;

margin-top:50px;

}

.contact-card{

background:#fff;

padding:35px;

border-radius:28px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

margin-bottom:20px;

display:flex;

align-items:center;

gap:22px;

}

.contact-icon{

width:70px;

height:70px;

border-radius:20px;

background:#FFF3EB;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#FF671F;

flex-shrink:0;

}

.contact-card h3{

margin-bottom:8px;

}

.contact-card p{

color:#666;

line-height:1.8;

}

.map{

overflow:hidden;

border-radius:30px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

height:100%;

}

.map iframe{

width:100%;

height:100%;

min-height:500px;

border:0;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.partner-grid{

grid-template-columns:repeat(2,1fr);

}

.app-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.app h2{

font-size:38px;

}

}


/*=========================
PRELOADER
=========================*/

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.4s;

}

.loader{

width:70px;

height:70px;

border:6px solid #FFE4D4;

border-top:6px solid #FF671F;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=========================
BACK TO TOP
=========================*/

#topBtn{

position:fixed;

right:25px;

bottom:90px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#FF671F;

color:#fff;

font-size:22px;

cursor:pointer;

display:none;

box-shadow:0 10px 25px rgba(0,0,0,.15);

z-index:999;

transition:.3s;

}

#topBtn:hover{

transform:translateY(-5px);

background:#E65A17;

}

/*=========================
SCROLL ANIMATION
=========================*/

.reveal{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:none;

}

/*=========================
FLOATING SHAPES
=========================*/

.float-circle{

position:fixed;

border-radius:50%;

pointer-events:none;

opacity:.08;

z-index:-1;

animation:float 12s infinite ease-in-out;

}

.circle1{

width:260px;

height:260px;

background:#FF671F;

top:10%;

left:-120px;

}

.circle2{

width:180px;

height:180px;

background:#138808;

bottom:8%;

right:-80px;

animation-delay:2s;

}

.circle3{

width:120px;

height:120px;

background:#FF671F;

top:60%;

left:60%;

animation-delay:4s;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

}

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

.mobileDrawer{

position:fixed;

top:0;

left:-100%;

width:280px;

height:100%;

background:#fff;

z-index:99999;

padding:35px;

box-shadow:15px 0 40px rgba(0,0,0,.15);

transition:.35s;

overflow:auto;

}

.mobileDrawer.show{

left:0;

}

.mobileDrawer a{

display:block;

padding:16px 0;

font-size:18px;

font-weight:600;

color:#333;

border-bottom:1px solid #eee;

text-decoration:none;

}

.mobileOverlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:none;

z-index:99998;

}

.mobileOverlay.show{

display:block;

}

.closeMenu{

font-size:26px;

margin-bottom:20px;

cursor:pointer;

color:#FF671F;

}

/*=========================
ACTIVE MENU
=========================*/

.menu a.active{

color:#FF671F;

position:relative;

}

.menu a.active::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:100%;

height:3px;

background:#FF671F;

border-radius:30px;

}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.footer-logo img {
    width: 55px;
}

/* =========================================================
   FINAL RESPONSIVE / ACCESSIBILITY POLISH
   ========================================================= */
html, body { width:100%; min-height:100%; }
body { line-height:1.5; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; }
button, input, textarea, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
[id] { scroll-margin-top:95px; }
header { background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.mobileDrawer { max-width:86vw; -webkit-overflow-scrolling:touch; }
.mobileDrawer a { min-height:48px; display:flex; align-items:center; }

@media (max-width:992px) {
  .container { width:min(92%,900px); }
  nav { height:74px; }
  .hero-grid, .app-grid, .contact-grid { gap:35px; }
  .hero h1 { font-size:clamp(42px,7vw,58px); }
  .section-title h2, .section-head h2 { font-size:clamp(34px,5vw,42px); }
  .cta h2, .app h2 { font-size:clamp(36px,6vw,48px); }
  .partner-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:768px) {
  .container { width:min(92%,680px); }
  .logo { font-size:22px; gap:8px; }
  .logo img { width:42px; height:42px; }
  .hero { padding:120px 0 55px; }
  .hero h1 { font-size:clamp(36px,11vw,48px); line-height:1.12; }
  .hero p { font-size:16px; line-height:1.7; }
  .hero-buttons, .cta-buttons, .store-buttons { gap:12px; }
  .hero-btn, .hero-outline, .cta-btn, .cta-outline { width:100%; justify-content:center; }
  .trust { gap:12px; flex-direction:column; }
  .hero-right { gap:16px; }
  .feature-card, .service-card, .why-card, .testimonial, .contact-card { padding:25px; }
  .live-box { padding:24px; gap:15px; }
  .live-box h2 { font-size:34px; }
  .section-title { margin-bottom:40px; }
  .section-title h2, .section-head h2 { font-size:32px; }
  .section-title p, .section-head p { font-size:16px; }
  .stats-section, .services, .events, .matrimony, .why, .testimonials, .cta, .news, .faq, .newsletter, .partners, .contact { padding:70px 0; }
  .stat-card h3 { font-size:38px; }
  .event-card img, .news-card img { height:200px; }
  .profile-card img { height:300px; }
  .newsletter input, .newsletter button { width:100%; }
  .footer { padding:60px 0 25px; }
  .footer-grid { gap:30px; }
  .install-app { left:15px; right:15px; bottom:15px; width:auto; text-align:center; justify-content:center; }
  #topBtn { right:15px; bottom:80px; width:48px; height:48px; }
  .float-circle { display:none; }
}

@media (max-width:480px) {
  nav { height:68px; }
  .logo img { width:38px; height:38px; }
  .logo { font-size:20px; }
  .hero { padding-top:105px; }
  .hero-badge { padding:9px 15px; font-size:13px; }
  .feature-card h3, .service-card h3, .news-body h3, .event-body h3 { font-size:20px; }
  .partner-grid { grid-template-columns:repeat(2,1fr); gap:15px; }
  .partner { height:95px; }
  .partner img { max-width:95px; max-height:55px; }
  .contact-card { align-items:flex-start; }
  .contact-icon { width:58px; height:58px; font-size:24px; }
  .map iframe { min-height:350px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}