/* ================================================================
   Samaj Seva Theme – Custom UI styles
   Color palette inspired by sawarnarmy / rashtriyaadhikarmorcha:
   saffron + deep navy + white
   ================================================================ */
:root{
  --ss-primary:#FF6A00;        /* saffron */
  --ss-primary-dark:#E65A00;
  --ss-secondary:#C73717;      /* deep navy */
  --ss-accent:#138808;         /* indian green */
  --ss-light:#FFF8F2;
  --ss-dark:#8E230E;
  --ss-muted:#6c757d;
  --ss-shadow:0 6px 24px rgba(11,42,85,.08);
  --ss-radius:14px;
}

body{font-family:'Poppins','Noto Sans Devanagari',system-ui,sans-serif;color:#1a1a1a;background:#fff}
a{color:var(--ss-primary)}
a:hover{color:var(--ss-primary-dark)}

/* ---------- Top bar ---------- */
.ss-topbar{background:var(--ss-secondary);color:#fff;font-size:.85rem;padding:.4rem 0}
.ss-topbar a{color:#fff;text-decoration:none;margin-right:1rem}
.ss-topbar .ss-lang-switch select{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;font-size:.8rem;padding:2px 6px}

/* ---------- Header / Nav ---------- */
.ss-header{background:#fff;box-shadow:var(--ss-shadow);position:sticky;top:0;z-index:1030}
.ss-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.ss-brand-logo{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--ss-primary),var(--ss-secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem}
.ss-brand-title{font-weight:800;color:var(--ss-secondary);line-height:1.1}
.ss-brand-title small{display:block;font-weight:500;color:var(--ss-muted);font-size:.7rem}

.ss-nav .nav-link{color:var(--ss-secondary)!important;font-weight:600;padding:.6rem .8rem!important;border-radius:8px}
.ss-nav .nav-link:hover,.ss-nav .nav-link.active{background:rgba(255,106,0,.1);color:var(--ss-primary)!important}
.ss-nav .dropdown-menu{border:0;box-shadow:var(--ss-shadow);border-radius:12px;padding:.5rem}
.ss-nav .dropdown-item{border-radius:8px;font-weight:500}
.ss-nav .dropdown-item:hover{background:var(--ss-light);color:var(--ss-primary)}

/* ---------- Buttons ---------- */
.ss-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:50px;font-weight:600;text-decoration:none;transition:all .2s;border:0;cursor:pointer}
.ss-btn-primary{background:var(--ss-primary);color:#fff}
.ss-btn-primary:hover{background:var(--ss-primary-dark);color:#fff;transform:translateY(-2px)}
.ss-btn-outline{border:2px solid var(--ss-primary);color:var(--ss-primary);background:transparent}
.ss-btn-outline:hover{background:var(--ss-primary);color:#fff}
.ss-btn-secondary{background:var(--ss-secondary);color:#fff}
.ss-btn-secondary:hover{background:#091f40;color:#fff}

/* ---------- Mobile offcanvas ---------- */
.offcanvas-ss{background:linear-gradient(180deg,var(--ss-secondary) 0%,#06183a 100%);color:#fff}
.offcanvas-ss .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.1)}
.offcanvas-ss .nav-link{color:#fff!important;padding:.9rem 1rem!important;border-bottom:1px solid rgba(255,255,255,.05);border-radius:0}
.offcanvas-ss .nav-link:hover,.offcanvas-ss .nav-link.active{background:rgba(255,106,0,.2);color:var(--ss-primary)!important}
.offcanvas-ss .dropdown-menu{background:rgba(255,255,255,.05);border:0;margin-left:1rem}
.offcanvas-ss .dropdown-item{color:#fff}
.offcanvas-ss .dropdown-item:hover{background:rgba(255,106,0,.2);color:var(--ss-primary)}
.offcanvas-ss .btn-close{filter:invert(1)}

/* ---------- Hero ---------- */
.ss-hero{position:relative;background:linear-gradient(135deg,var(--ss-secondary) 0%,#1a3a6e 100%);color:#fff;padding:5rem 0;overflow:hidden}
.ss-hero::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="30" cy="30" r="1" fill="%23ffffff20"/></svg>');opacity:.5}
.ss-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.15}
.ss-hero .lead{font-size:1.15rem;opacity:.95;max-width:600px}
.ss-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}

/* ---------- Sections ---------- */
.ss-section{padding:4rem 0}
.ss-section-title{text-align:center;margin-bottom:3rem}
.ss-section-title h2{font-weight:800;color:var(--ss-secondary);font-size:2.25rem}
.ss-section-title .ss-sub{color:var(--ss-primary);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;margin-bottom:.5rem}
.ss-section-title p{color:var(--ss-muted);max-width:700px;margin:1rem auto 0}

.ss-card{background:#fff;border-radius:var(--ss-radius);padding:2rem;box-shadow:var(--ss-shadow);height:100%;transition:transform .25s}
.ss-card:hover{transform:translateY(-6px)}
.ss-card .ss-icon{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--ss-primary),var(--ss-primary-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}
.ss-card h4{color:var(--ss-secondary);font-weight:700}

/* ---------- Team grid ---------- */
.ss-member{background:#fff;border-radius:var(--ss-radius);overflow:hidden;box-shadow:var(--ss-shadow);text-align:center;transition:transform .25s}
.ss-member:hover{transform:translateY(-6px)}
.ss-member-photo{width:100%;aspect-ratio:1/1;object-fit:cover;background:#eee}
.ss-member-body{padding:1.25rem}
.ss-member h5{color:var(--ss-secondary);font-weight:700;margin-bottom:.25rem}
.ss-member .ss-role{color:var(--ss-primary);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:1px}

/* ---------- Gallery ---------- */
.ss-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.ss-gallery-item{position:relative;border-radius:var(--ss-radius);overflow:hidden;aspect-ratio:1/1;cursor:pointer;background:#000}
.ss-gallery-item img,.ss-gallery-item video{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ss-gallery-item:hover img{transform:scale(1.08)}
.ss-gallery-item .ss-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem;text-shadow:0 4px 16px rgba(0,0,0,.6);pointer-events:none}

/* ---------- Forms ---------- */
.ss-form{background:#fff;padding:2rem;border-radius:var(--ss-radius);box-shadow:var(--ss-shadow)}
.ss-form .form-label{font-weight:600;color:var(--ss-secondary)}
.ss-form .form-control,.ss-form .form-select{border-radius:10px;padding:.65rem .9rem;border:1px solid #e3e8ef}
.ss-form .form-control:focus,.ss-form .form-select:focus{border-color:var(--ss-primary);box-shadow:0 0 0 .2rem rgba(255,106,0,.15)}

/* ---------- Dashboard ---------- */
.ss-dash{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;margin:2rem 0}
@media(max-width:768px){.ss-dash{grid-template-columns:1fr}}
.ss-dash-side{background:var(--ss-secondary);color:#fff;border-radius:var(--ss-radius);padding:1.25rem}
.ss-dash-side a{display:block;color:#fff;text-decoration:none;padding:.65rem .85rem;border-radius:8px;margin-bottom:.25rem}
.ss-dash-side a:hover,.ss-dash-side a.active{background:var(--ss-primary)}
.ss-dash-main{background:#fff;border-radius:var(--ss-radius);box-shadow:var(--ss-shadow);padding:2rem}
.ss-stat{background:linear-gradient(135deg,var(--ss-primary),var(--ss-primary-dark));color:#fff;border-radius:var(--ss-radius);padding:1.5rem;text-align:center}
.ss-stat .num{font-size:2rem;font-weight:800}

/* ---------- ID Card ---------- */
.ss-idcard{width:340px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18);margin:1rem auto;border:2px solid var(--ss-primary)}
.ss-idcard-head{background:linear-gradient(135deg,var(--ss-secondary),var(--ss-primary));color:#fff;padding:.9rem;text-align:center}
.ss-idcard-body{padding:1rem;text-align:center}
.ss-idcard-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid var(--ss-primary);margin:0 auto .5rem}
.ss-idcard-row{display:flex;justify-content:space-between;font-size:.85rem;padding:.25rem 0;border-bottom:1px dashed #eee}
.ss-idcard-row span:first-child{color:var(--ss-muted)}
.ss-idcard-foot{background:var(--ss-secondary);color:#fff;text-align:center;padding:.5rem;font-size:.75rem}

/* ---------- Certificate ---------- */
.ss-cert{width:100%;max-width:900px;aspect-ratio:1.414/1;background:#fffdf7;border:12px double var(--ss-primary);padding:2rem;margin:1rem auto;text-align:center;font-family:'Georgia',serif;position:relative}
.ss-cert h2{color:var(--ss-secondary);font-size:2.5rem;margin:.5rem 0}
.ss-cert .ss-cert-name{font-size:2rem;color:var(--ss-primary);font-weight:700;margin:1rem 0;border-bottom:2px solid var(--ss-secondary);display:inline-block;padding:0 2rem .25rem}

/* ---------- Donate ---------- */
.ss-donate-options{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2rem 0}
@media(max-width:640px){
	.offcanvas-ss .dropdown-menu {
		background: rgb(59 32 48);}
	.nav-item .ss-btn-primary{
		    margin-left: 11px;
    margin-bottom: 10px;
	}
	
	.ss-donate-options{grid-template-columns:1fr}}
.ss-donate-card{border:2px solid #eee;border-radius:var(--ss-radius);padding:1.5rem;cursor:pointer;transition:all .2s}
.ss-donate-card:hover,.ss-donate-card.active{border-color:var(--ss-primary);background:var(--ss-light)}
.ss-donate-card h5{color:var(--ss-secondary);font-weight:700}
.ss-qr-box{text-align:center;padding:1rem}
.ss-qr-box img{max-width:240px;border:6px solid #fff;box-shadow:var(--ss-shadow)}

/* ---------- Footer ---------- */
.ss-footer{background:var(--ss-dark);color:#cfd8e3;padding:3rem 0 1rem;margin-top:4rem}
.ss-footer h5{color:#fff;font-weight:700;margin-bottom:1rem}
.ss-footer a{color:#cfd8e3;text-decoration:none}
.ss-footer a:hover{color:var(--ss-primary)}
.ss-footer .ss-copy{border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;margin-top:2rem;text-align:center;color:#8a99ad;font-size:.85rem}

/* ---------- Page banner ---------- */
.ss-pagebanner{background:linear-gradient(135deg,var(--ss-secondary),#1a3a6e);color:#fff;padding:3rem 0;text-align:center}
.ss-pagebanner h1{font-weight:800}
.ss-pagebanner .breadcrumb{justify-content:center;background:transparent;margin:0}
.ss-pagebanner .breadcrumb a,.ss-pagebanner .breadcrumb-item{color:#fff}

/* utility */
.ss-badge{display:inline-block;padding:.25rem .65rem;border-radius:20px;font-size:.75rem;font-weight:600}
.ss-badge-pending{background:#fff3cd;color:#856404}
.ss-badge-approved{background:#d4edda;color:#155724}
.ss-badge-rejected{background:#f8d7da;color:#721c24}
.ss-brand-title img {
    max-width: 150px;
}

.membership {
	margin-left: 11px;
}
.team-img{
	    object-position: top;
}

.ss-team-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.ss-team-card{
background:#fff;
border-radius:var(--ss-radius);
overflow:hidden;
box-shadow:var(--ss-shadow);
transition:.4s;
}

.ss-team-card:hover{
transform:translateY(-8px);
}

.ss-team-image{
height:300px;
overflow:hidden;
}

.team-img{
width:100%;
height:100%;
object-fit:cover;
}

.ss-team-content{
padding:20px;
}

.ss-team-content h3{
margin:0;
font-size:22px;
font-weight:700;
color:var(--ss-dark);
}

.ss-designation{
display:inline-block;
margin:10px 0;
padding:6px 14px;
background:var(--ss-primary);
color:#fff;
border-radius:30px;
font-size:13px;
}

.ss-meta{
margin:8px 0;
color:var(--ss-muted);
font-size:14px;
}

.ss-desc{
margin-top:15px;
font-size:14px;
line-height:1.7;
}

/* ======================
SWIPER NAVIGATION
====================== */

.swiper-button-next,
.swiper-button-prev{
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
    transition:.35s;
    top:50%;
    transform:translateY(-50%);
}

.swiper-button-prev{
    left:30px;
}

.swiper-button-next{
    right:30px;
}

.swiper-button-next:after,
.swiper-button-prev:after{
    font-size:22px;
    font-weight:700;
    color:#fff;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    transform:translateY(-50%) scale(1.1);
    background:var(--ss-primary);
    border-color:var(--ss-primary);
    box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    0 0 20px rgba(255,255,255,.2);
}


/* ======================
PAGINATION DOTS
====================== */

/*==================
NAVIGATION
===================*/



.ss-prev,
.ss-next{

width:65px;
height:65px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.12);
backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.2);

cursor:pointer;

transition:.4s;

pointer-events:auto;

color:#fff;
font-size:24px;

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

.ss-prev:hover,
.ss-next:hover{

transform:scale(1.15);

background:linear-gradient(
135deg,
#ff9933,
#138808
);

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

}


/* hide default swiper icons */

.swiper-button-prev:after,
.swiper-button-next:after{

display:none;

}


/*==================
PAGINATION
===================*/

.ss-pagination{

z-index:20;

display:flex;
gap:12px;
align-items:center;
justify-content:center;
}

.ss-pagination .swiper-pagination-bullet{

width:14px;
height:14px;

margin:0 !important;

border-radius:50px;

opacity:.5;

background:#fff;

transition:all .6s ease;

}

.ss-pagination .swiper-pagination-bullet-active{

width:90px; /* pehle 45 tha */

height:14px;

border-radius:30px;

opacity:1;

background:linear-gradient(
90deg,
#ff9933,
#ffffff,
#138808
);

box-shadow:
0 0 20px rgba(255,255,255,.6);

}


/* Mobile */

@media(max-width:768px){

.ss-nav{

padding:0 15px;

}

.ss-prev,
.ss-next{

width:45px;
height:45px;
font-size:18px;

}

.ss-pagination .swiper-pagination-bullet-active{

width:55px;

}

}