/* ============================================================
   SHRAVAN MAAS 2026 — STYLESHEET
   All rules are prefixed with "sm-" (or scoped to specific IDs)
   to avoid colliding with other templates/pages on this theme.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --sm-indigo-deep:#1E215F;
  --sm-indigo-header:#20204F;
  --sm-saffron:#FF6700;
  --sm-saffron-light:#FF8A3D;
  --sm-gold:#C6912B;
  --sm-gold-light:#F0D08A;
  --sm-cream:#FFF9F1;
  --sm-cream-alt:#FBF0E2;
  --sm-maroon:#6E1F10;
  --sm-ink:#241B33;
  --sm-ink-soft:#5B5570;
  --sm-error:#E11D48;
  --sm-shadow-soft: 0 10px 30px rgba(30,33,95,0.08);
  --sm-shadow-card: 0 18px 40px rgba(110,60,10,0.12);
  --sm-radius-lg: 22px;
}

.sm-page *{box-sizing:border-box;}
.sm-page{font-family:'Hind', sans-serif; color:var(--sm-ink); background:var(--sm-cream); overflow-x:hidden;}
.sm-page h1,.sm-page h2,.sm-page h3,.sm-page h4{font-family:'Mukta', sans-serif; margin:0; color:var(--sm-indigo-deep);}
.sm-page p{margin:0; line-height:1.8; color:var(--sm-ink-soft);}
.sm-page a{text-decoration:none;}
.sm-page img{max-width:100%; display:block;}
.sm-wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.sm-eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'Hind',sans-serif; font-weight:700; letter-spacing:.08em; color:var(--sm-saffron); font-size:14px; text-transform:uppercase; margin-bottom:14px;}
.sm-eyebrow::before{content:'';width:26px;height:2px;background:var(--sm-saffron);display:inline-block;}
.sm-mala-divider{display:flex; align-items:center; justify-content:center; gap:9px; margin:26px auto 0; width:100%;}
.sm-mala-divider span{width:9px;height:9px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #F0D08A, var(--sm-gold) 60%, #8a611a 100%); box-shadow:0 2px 4px rgba(110,60,10,.25);}
.sm-mala-divider span:nth-child(4n){width:13px;height:13px;}

/* ---------- Theme header co-existence ---------- */
header.main-header{display:none !important;}
header{width:100%; height:3.90625vw; float:left; background-color:#2b2a6a; position:fixed; top:0!important; left:0; z-index:1000;}
.nss-logo{float:left; display:table; position:relative; top:1.041666vw;}
.logo-mobile{display:none;}
@media only screen and (max-width: 767px){
    .headerlogo{display: flex; justify-content: center;}
  .logo-desktop{display:none;}
  .logo-mobile{display:inline-block; height:auto;}
  .nss-logo{top:3.841666vw;}
  .nss-logo img{width:100%;}
  header{height:14.531245vw;}
}
.sm-banner-spacer{display:block; width:100%; margin-top:3.90625vw;}
@media only screen and (max-width: 767px){ .sm-banner-spacer{margin-top:14.531245vw;} }
@media (min-width: 768px) and (max-width: 1279px) {
  header
  {
    height: 6vw;
  }
}

/* ---------- Hero: full-bleed banner image ---------- */
.sm-hero-banner{position:relative; overflow:hidden; line-height:0;}
.sm-hero-banner img{width:100%; object-fit:cover; object-position:center 35%; display:block;}
.sm-hero-banner .sm-banner-fade{position:absolute; left:0; right:0; bottom:0; height:180px; background:linear-gradient(to bottom, rgba(255,249,241,0) 0%, var(--sm-cream) 92%); pointer-events:none;}
.sm-hero-content{padding:0 0 70px;}
.sm-hero-content .sm-wrap{position:relative;}
.sm-hero-copy{max-width:760px; margin:26px auto 0; text-align:center;}
.sm-hero-copy p{color:var(--sm-ink-soft); font-size:16.5px; max-width:640px; margin:0 auto;}
.sm-hero-actions{display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; justify-content:center;}
.sm-hero-stats{display:flex; gap:34px; margin-top:32px; flex-wrap:wrap; justify-content:center;}
.sm-hero-stats div{text-align:center;}
.sm-hero-stats b{display:block; font-size:24px; font-weight:800; color:var(--sm-saffron); font-family:'Mukta',sans-serif;}
.sm-hero-stats span{font-size:12.5px; color:var(--sm-ink-soft);}

/* ---------- Buttons ---------- */
.sm-btn-primary{background:linear-gradient(120deg, var(--sm-saffron) 0%, #ff8a3d 100%); color:#fff; font-weight:700; padding:15px 30px; border-radius:12px; box-shadow:0 12px 26px rgba(255,103,0,.4); border:none; cursor:pointer; font-size:15.5px; display:inline-flex; align-items:center; gap:10px; transition:transform .25s ease, box-shadow .25s ease;}
.sm-btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(255,103,0,.5); color:#fff; text-decoration: none;}
.sm-btn-ghost{background:var(--sm-cream-alt); color:var(--sm-indigo-deep); border:1px solid #EAE3D6; font-weight:600; padding:14px 26px; border-radius:12px; display:inline-flex; align-items:center; gap:10px; font-size:14.5px;}
.sm-btn-ghost:hover{text-decoration: none;}

/* ---------- Quick donate form (flexbox — robust against validation messages) ---------- */
.sm-quick-donate{position:relative; z-index:3; background:#fff; border-radius:var(--sm-radius-lg); box-shadow:var(--sm-shadow-card); margin-top:-96px; padding:22px 26px;}
.sm-qd-title{display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--sm-indigo-deep); font-weight:700; font-size:15px;}
.sm-qd-title i{color:var(--sm-saffron);}

#shradh-paksh-form{display:block;}
.sm-qd-row-fields{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;}
.sm-qd-row-fields .form-group{flex:1 1 130px; min-width:110px; position:relative; margin:0;}
.sm-qd-row-fields .form-group#selectYojnaAmount{flex:1 1 170px; min-width:150px;}
.sm-qd-row-fields button[type="submit"]{flex:0 0 auto; white-space:nowrap; padding:13px 26px;}

#shradh-paksh-form .form-control{
  width:100%; padding:12px 13px; border-radius:10px; border:1.5px solid #EAE3D6;
  background:var(--sm-cream); font-family:'Hind',sans-serif; font-size:14px; color:var(--sm-ink); height:auto;
}
#shradh-paksh-form .form-control:focus{outline:none; border-color:var(--sm-saffron); box-shadow:none;}

/* Hide the JS-injected hidden-fields wrapper so it never affects layout */
#shradh-paksh-yojnas{display:none;}

/* Validation messages: positioned absolutely so they NEVER shift/misalign the row */

 input.error,
 select.error{
  border-color:var(--sm-error) !important;
  background:#FEF2F2;
}

.smf_section {
    padding: 0 0 20px;
}
.error {
    color: red !important;
    font-size: 12px;
    font-weight: 600;
}



.wrapper {
    max-width: 1440px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

.smf_section .smf_inner {
    padding: 40px;
    background-color: #fff;
    box-shadow: 0 37px 28px rgb(0 0 0 / .06);
    border-radius: 9px;
    margin-top: -66px;
    position: relative;
    z-index: 2;
}

/* ---------- Section basics ---------- */
.sm-section{padding:74px 0;}
.sm-section-title{font-size:32px; font-weight:800; line-height:1.35;}
.sm-section-title .sm-accent{color:var(--sm-saffron);}
.sm-intro{text-align:center;}
.sm-intro .sm-wrap{max-width:900px;}
.sm-intro p{font-size:16.5px; margin-top:18px;}
.sm-alt-bg{background:var(--sm-cream-alt);}

/* ---------- Feature rows (alternating image/text) ---------- */
.sm-feature-stack{display:flex; flex-direction:column; gap:80px;}
.sm-feature-row{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center;}
.sm-feature-row.sm-reverse{grid-template-columns:1.15fr .85fr;}
.sm-feature-row.sm-reverse .sm-feature-media{order:2;}
.sm-feature-media{position:relative;}
.sm-feature-media .sm-frame{position:relative; border-radius:var(--sm-radius-lg); overflow:hidden; box-shadow:var(--sm-shadow-card); aspect-ratio:4/3;}
.sm-feature-media img{width:100%; height:100%; object-fit:cover;}
.sm-badge-float{position:absolute; bottom:-18px; left:-18px; background:#fff; padding:14px 20px; border-radius:14px; box-shadow:var(--sm-shadow-soft); display:flex; align-items:center; gap:10px;}
.sm-badge-float i{color:var(--sm-gold); font-size:22px;}
.sm-badge-float b{display:block; font-size:15px; color:var(--sm-indigo-deep); font-family:'Mukta',sans-serif;}
.sm-badge-float span{font-size:12px; color:var(--sm-ink-soft);}
.sm-feature-copy h3{font-size:26px; margin-bottom:16px;}
.sm-feature-copy p{font-size:15px; margin-bottom:12px;}
.sm-feature-copy .sm-quote{border-left:3px solid var(--sm-saffron); padding:10px 18px; margin:18px 0; font-style:italic; background:var(--sm-cream-alt); border-radius:0 10px 10px 0; color:var(--sm-maroon); font-weight:600;}

/* ---------- Video section ---------- */
.sm-video-section{background:var(--sm-cream);}
.sm-video-header{text-align:center; max-width:680px; margin:0 auto 40px;}
.sm-video-frame-wrap{max-width:900px; margin:0 auto;}
.video_carousel_single .item{display:flex !important; justify-content:center; padding:10px 0 0px;}
.video_only_box{position:relative; width:100%; max-width:900px; border-radius:var(--sm-radius-lg); overflow:hidden; border:4px solid #fff; outline:1px solid #EAE3D6;}
.video_only_box img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; border-radius:calc(var(--sm-radius-lg) - 4px);}
.video_only_box .play_btn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; transition:transform .3s ease;
  width:76px; height:76px; border-radius:50%; background:rgba(255,103,0,.92); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(255,103,0,.5);}
.video_only_box .play_btn img{width:26px; height:26px; filter:brightness(0) invert(1);}
.video_only_box:hover .play_btn{transform:translate(-50%,-50%) scale(1.08);}
.video_carousel_single .owl-nav button{
  background:#fff !important; color:var(--sm-saffron) !important; width:44px; height:44px; border-radius:50%;
  box-shadow:var(--sm-shadow-soft); font-size:18px !important; display:flex; align-items:center; justify-content:center;
}
.video_carousel_single .owl-nav .owl-prev{position:absolute; left:-6px; top:38%;}
.video_carousel_single .owl-nav .owl-next{position:absolute; right:-6px; top:38%;}

.video-modal-overlay{position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(20,15,30,.9); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;}
.video-modal-box{position:relative; width:100%; max-width:900px; background:#000; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.5);}
.responsive-video-wrapper{position:relative; padding-top:56.25%; height:0;}
.responsive-video-wrapper video{position:absolute; top:0; left:0; width:100%; height:100%; display:block; object-fit:cover;}
.video-close{position:absolute; top:12px; right:18px; font-size:30px; color:#fff; cursor:pointer; z-index:10; line-height:1;}

/* ---------- Seva (Path of Devotion) cards ---------- */
.sm-seva-section{background:linear-gradient(180deg, var(--sm-cream) 0%, var(--sm-cream-alt) 100%);}
.sm-seva-header{text-align:center; max-width:680px; margin:0 auto 50px;}
.sm-seva-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.sm-seva-card{background:#fff; border-radius:var(--sm-radius-lg); padding:32px 22px; text-align:center; box-shadow:var(--sm-shadow-soft); border-top:4px solid var(--sm-gold); display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;}
.sm-seva-card:hover{transform:translateY(-8px); box-shadow:var(--sm-shadow-card);}
.sm-seva-icon{width:68px; height:68px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(135deg, #FFE3C2, #FFF3E0); display:flex; align-items:center; justify-content:center; font-size:27px; color:var(--sm-saffron);}
.sm-seva-card h3{font-size:18px; margin-bottom:10px; min-height:50px; display:flex; align-items:center; justify-content:center;}
.sm-seva-card p{font-size:13.5px; margin-bottom:16px; flex-grow:1;}
.sm-seva-price{font-family:'Mukta',sans-serif; font-weight:800; font-size:23px; color:var(--sm-indigo-deep); margin-bottom:16px;}
.sm-tier-pills{display:flex; gap:8px; justify-content:center; margin-bottom:16px; flex-wrap:wrap;}
.sm-tier-pills button{border:1.5px solid #EAE3D6; background:var(--sm-cream); border-radius:20px; padding:6px 12px; font-family:'Hind',sans-serif; font-size:12.5px; font-weight:600; color:var(--sm-ink); cursor:pointer;}
.sm-tier-pills button.active{background:var(--sm-saffron); border-color:var(--sm-saffron); color:#fff;}
.sm-btn-card{background:var(--sm-indigo-deep); color:#fff; border:none; padding:12px 0; border-radius:10px; font-weight:700; font-size:14.5px; cursor:pointer; width:100%; transition:background .25s ease;}
.sm-btn-card:hover{background:var(--sm-saffron); color:#fff;}

/* ---------- Trust strip ---------- */
.sm-trust-strip{background:var(--sm-indigo-deep); padding:42px 0;}
.sm-trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.sm-trust-item{color:#fff;}
.sm-trust-item i{font-size:25px; color:var(--sm-gold-light); margin-bottom:10px;}
.sm-trust-item b{display:block; font-family:'Mukta',sans-serif; font-size:15.5px;}
.sm-trust-item span{font-size:12.5px; color:#C8C4E4;}

/* ---------- Bank details ---------- */
.sm-bank-section .sm-wrap{max-width:960px;}
.sm-bank-card{background:#fff; border-radius:var(--sm-radius-lg); box-shadow:var(--sm-shadow-card); padding:36px; display:grid; grid-template-columns:1.4fr .8fr; gap:30px; align-items:center;}
.sm-bank-card h3{font-size:19px; margin-bottom:20px; display:flex; align-items:center; gap:10px;}
.sm-bank-card h3 i{color:var(--sm-gold);}
.sm-bank-rows{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px;}
.sm-bank-rows .sm-row-item{display:flex; gap:12px; align-items:flex-start;}
.sm-bank-rows .sm-row-item i{color:var(--sm-saffron); font-size:16px; margin-top:3px;}
.sm-bank-rows label{display:block; font-size:11.5px; color:var(--sm-ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.sm-bank-rows b{font-size:14.5px; color:var(--sm-indigo-deep);}
.sm-tax-pill{margin-top:20px; display:inline-flex; align-items:center; gap:8px; background:var(--sm-cream-alt); padding:8px 16px; border-radius:20px; font-size:12.5px; color:var(--sm-maroon); font-weight:600;}
.sm-bank-qr{text-align:center;}
.sm-bank-qr img{width:150px; margin:0 auto; border-radius:12px; box-shadow:var(--sm-shadow-soft);}
.sm-bank-qr a{display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:var(--sm-saffron); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600;}

/* ---------- Mantra section ---------- */
.sm-mantra-section{position:relative; overflow:hidden; border-radius:28px; text-align:center; padding:56px 30px; background:linear-gradient(135deg, var(--sm-indigo-deep), #3a2f75 60%, var(--sm-maroon)); color:#fff;}
.sm-mantra-section .sm-om-glyph{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:320px; color:rgba(255,255,255,.05); font-family:'Mukta',sans-serif; pointer-events:none;}
.sm-mantra-text{position:relative; z-index:2; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:25px; line-height:1.9; color:#3a2f75; max-width:760px; margin:0 auto 4px;}
.sm-mantra-section .sm-eyebrow{justify-content:center; color: #212529;}
.sm-mantra-section .sm-eyebrow::before{background:var(--sm-gold-light);}

/* ---------- Mobile sticky donate bar ---------- */
.sm-sticky-mobile{display:none; position:fixed; bottom:0; left:0; right:0; z-index:1200; background:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.15); padding:12px 16px;}
.sm-sticky-mobile .sm-btn-primary{width:100%; justify-content:center; padding:13px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .sm-feature-row, .sm-feature-row.sm-reverse{grid-template-columns:1fr;}
  .sm-feature-row.sm-reverse .sm-feature-media{order:0;}
  .sm-seva-grid{grid-template-columns:1fr 1fr;}
  .sm-trust-grid{grid-template-columns:1fr 1fr;}
  .sm-bank-card{grid-template-columns:1fr;}
  .sm-qd-row-fields .form-group{flex:1 1 calc(33.333% - 8px);}
  .sm-qd-row-fields .form-group#selectYojnaAmount{flex:1 1 100%;}
  .video_carousel_single .owl-nav .owl-prev{left:6px;}
  .video_carousel_single .owl-nav .owl-next{right:6px;}
}
@media (max-width:640px){
    .sm-banner-fade{display: none;}
  .sm-section{padding:48px 0;}
  .sm-quick-donate{margin-top:18px; padding:18px;}
  .sm-qd-row-fields .form-group,
  .sm-qd-row-fields .form-group#selectYojnaAmount{flex:1 1 100%;}
  .sm-qd-row-fields button[type="submit"]{width:100%; justify-content:center;}
  .sm-hero-copy p{font-size:15px;}
  .sm-hero-stats{gap:22px;}
  .sm-seva-grid{grid-template-columns:1fr;}
  .sm-section-title{font-size:24px;}
  .sm-mantra-text{font-size:18px;}
  .sm-sticky-mobile{display:block;}
  body{padding-bottom:74px;}
  .sm-badge-float{position:relative; margin-top:-30px; margin-left:16px; width:fit-content;}
  .video_only_box .play_btn{width:60px; height:60px;}
}


.smf_wrap {
    padding: 0 160px 0 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 10px;
    position: relative
}

.smf_section .smf_inner .styled_select {
    position: relative
}

.smf_section .smf_inner .styled_select:after {
    content: "\f107";
    font-family: 'FontAwesome';
    position: absolute;
    right: 0;
    top: 50%;
    width: 25px;
    color: #202020;
    font-size: 18px;
    text-align: left;
    pointer-events: none;
    transform: translateY(-50%)
}

.smf_section .smf_inner .styled_select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0 25px 0 15px;
    transition: all 0.25s ease-in 0s
}

.smf_section .smf_inner .form-group {
    margin-bottom: 0
}

.smf_section .smf_inner .form-control {
    box-shadow: 0 15px 15px rgb(0 0 0 / .06);
    border: 1px solid #dfe1e2;
    transition: all 0.25s ease-in 0s;
    height: 52px;
    border-radius: 6px;
    padding: 0 0 0 15px;
    font-size: 15px
}

.smf_section .smf_inner .btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    line-height: 52px;
    background-color: #ff6700;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    padding: 0 10px;
    border-radius: 6px;
    transition: all 0.5s
}

.smf_section .smf_inner .btn:hover {
    box-shadow: 0 0 0 .3rem rgb(255 102 0 / 40%)
}

/* ===========================
   1279px
=========================== */
@media screen and (max-width:1279px){

    .smf_section .smf_inner .form-control{
        padding-left:10px;
    }

    .smf_section .smf_inner .styled_select select{
        padding-left:5px;
    }

}

/* ===========================
   1023px
=========================== */
@media screen and (max-width:1023px){

    .smf_wrap{
        grid-template-columns:repeat(1,1fr);
        padding-right:0;
    }

    .smf_section .smf_inner{
        padding:20px;
        margin-top:-30px;
    }

    .smf_section .smf_inner .form-group{
        margin-bottom:5px;
    }

    .smf_section .smf_inner .form-control{
        height:38px;
    }

    .smf_section .smf_inner .styled_select select{
        padding-left:8px;
    }

    .smf_section .smf_inner .btn{
        position:static;
        width:100%;
    }

}

.headings-shravan{
position: absolute;
    left: 3%;
    top: 30%;
     font-family: 'Poppins', sans-serif;
}
.headings-shravan p
{
 color: #ffffff;
    line-height: 1.5;
    font-size: 36px;
}
.hero-title-txt
{
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 130px;
    line-height: 1.1;
    color: #FDF5B3;
    margin-bottom: 10px;
}
@media only screen and (max-width:767px){
  .headings-shravan p {
    color: #ffffff;
        line-height: 1.5;
        font-size: 14px;
}
  .headings-shravan{
position: absolute;
    top: 30%;

}
.hero-title-txt
{
 font-family: 'Poppins', sans-serif;font-weight:bold;font-size:24px;line-height:1.1;color: #FDF5B3;
  margin-bottom: 10px;
}
 }
  @media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .hero-title-txt
{
    font-size: 100px;
}
.headings-shravan p
{
    font-size: 24px;
}
 }
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
  .headings-shravan p {
    color: #ffffff;
    line-height: 1.5;
    font-size: 24px;
}
  .headings-shravan {
    left: 5%;
    top: 20%;
  }

  .hero-title-txt {
    font-size: 48px;
     margin-bottom: 10px; 
  }
}
