/* ==========================================================
Manav Adhikar Emergency Helpline Association
Modern Stylesheet
========================================================== */
/* ---------- 1. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
--c-primary: #1e3a8a; /* deep blue */
--c-primary-dark: #0f1e54;
--c-primary-light: #3b5bdb;
--c-accent: #f59e0b; /* saffron / gold */
--c-accent-dark: #d97706;
--c-text: #0f172a;
--c-text-soft: #475569;
--c-muted: #94a3b8;
--c-bg: #ffffff;
--c-bg-soft: #f8fafc;
--c-bg-alt: #f1f5f9;
--c-border: #e2e8f0;
--c-success: #10b981;
--c-danger: #ef4444;
--shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--shadow: 0 10px 30px rgba(15,23,42,.08);
--shadow-lg: 0 25px 60px rgba(15,23,42,.12);
--radius: 14px;
--radius-sm: 8px;
--radius-lg: 22px;
--ff-display: 'Playfair Display', Georgia, serif;
--ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--container: 1240px;
--tr: cubic-bezier(.2,.7,.2,1);
}
html { scroll-behavior: smooth; }
body{
font-family: var(--ff-body);
color: var(--c-text);
background: var(--c-bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%;height:100px; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s var(--tr); }
a:hover { color: var(--c-accent-dark); }
ul { list-style: none; }
/* ---------- 2. UTILITIES ---------- */
.container{
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.section { padding: 96px 0; }
.section--alt { background: var(--c-bg-soft); }
.section__head{
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.section__title{
font-family: var(--ff-display);
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.15;
font-weight: 700;
margin: 14px 0 16px;
color: var(--c-primary-dark);
}
.section__title .accent{ color: var(--c-accent-dark); font-style: italic; }
.section__lede{ color: var(--c-text-soft); font-size: 1.05rem; }
.section__cta{ text-align: center; margin-top: 48px; }
.eyebrow{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .82rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent-dark);
background: rgba(245,158,11,.12);
padding: 6px 14px;
border-radius: 999px;
}
.eyebrow--dark{
color: var(--c-primary);
background: rgba(30,58,138,.08);
}
.eyebrow i{ font-size: .8em; }
/* ---------- 3. BUTTONS ---------- */
.btn{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
font-size: .95rem;
font-weight: 600;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
transition: all .25s var(--tr);
white-space: nowrap;
font-family: var(--ff-body);
}
.btn--accent{
background: var(--c-accent);
color: #1f1300;
border-color: var(--c-accent);
box-shadow: 0 8px 22px rgba(245,158,11,.32);
}
.btn--accent:hover{
background: var(--c-accent-dark);
border-color: var(--c-accent-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(217,119,6,.4);
}
.btn--primary{
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
}
.btn--primary:hover{
background: var(--c-primary-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.btn--ghost{
background: transparent;
color: #fff;
border-color: rgba(255,255,255,.5);
}
.btn--ghost:hover{
background: #fff;
color: var(--c-primary);
border-color: #fff;
}
/* ---------- 4. TOP STRIP ---------- */
.top-strip{
background: var(--c-primary-dark);
color: #cbd5e1;
font-size: .85rem;
padding: 10px 0;
}
.top-strip__inner{
display: flex; justify-content: space-between; align-items: center; gap: 16px;
flex-wrap: wrap;
}
.top-strip__left{ display: flex; gap: 24px; flex-wrap: wrap; }
.top-strip__left i{ color: var(--c-accent); margin-right: 6px; }
.top-strip__left a{ color: #e2e8f0; }
.top-strip__left a:hover{ color: var(--c-accent); }
.top-strip__right{ display: flex; align-items: center; gap: 14px; }
.top-strip__right a{
color: #cbd5e1; width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; transition: all .2s var(--tr);
}
.top-strip__right a:hover{ background: var(--c-accent); color: #1f1300; }
.top-strip__right .strip-btn{
width: auto; height: auto; padding: 6px 14px; border-radius: 999px;
background: rgba(245,158,11,.16); color: var(--c-accent);
font-weight: 600; font-size: .8rem; gap: 6px;
}
.top-strip__right .strip-btn:hover{ background: var(--c-accent); color: #1f1300; }
/* ---------- 5. SITE HEADER ---------- */
.site-header{
position: sticky; top: 0; z-index: 50;
background: #fff;
box-shadow: var(--shadow-sm);
transition: all .3s var(--tr);
}
.site-header.is-scrolled{ box-shadow: var(--shadow); }
.header__inner{
display: flex; align-items: center; gap: 5px;
padding: 14px 24px;
}
.brand{
display: inline-flex; align-items: center; gap: 12px;
text-decoration: none;
}
.brand__mark{
width: 50px; height: 50px;
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
overflow: hidden; color: #fff;
box-shadow: 0 6px 16px rgba(30,58,138,.25);
}
.brand__mark img{ width: 100%; height: 100%; object-fit: contain; }
.brand__mark--fallback{ font-family: var(--ff-display); font-weight: 800; font-size: 1.3rem; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.1; }
.brand__name{
font-family: var(--ff-display);
font-weight: 800; font-size: 1.25rem; color: var(--c-primary-dark);
}
.brand__tag{
font-size: .72rem; color: var(--c-text-soft);
letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
.primary-nav{ margin-left: auto; }
.primary-nav ul{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.primary-nav a{
position: relative;
display: inline-block;
padding: 10px 14px;
font-size: .92rem; font-weight: 500;
color: var(--c-text); border-radius: 8px;
transition: all .2s var(--tr);
}
.primary-nav a::after{
content: ''; position: absolute;
left: 14px; right: 14px; bottom: 4px;
height: 2px; background: var(--c-accent);
transform: scaleX(0); transform-origin: left;
transition: transform .25s var(--tr);
}
.primary-nav a:hover{ color: var(--c-primary); }
.primary-nav a:hover::after,
.primary-nav a.active::after{ transform: scaleX(1); }
.primary-nav a.active{ color: var(--c-primary); font-weight: 600; }
.header__cta{ margin-left: 8px; }
/* Mobile nav toggle */
.nav-toggle{
display: none;
background: transparent; border: 0;
width: 44px; height: 44px;
flex-direction: column; gap: 5px;
align-items: center; justify-content: center;
cursor: pointer; border-radius: 8px;
}
.nav-toggle span{
width: 24px; height: 2px;
background: var(--c-primary-dark);
border-radius: 2px; transition: all .25s var(--tr);
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px){
.header__cta{ display: none; }
.nav-toggle{ display: flex; }
.primary-nav{
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; box-shadow: var(--shadow);
max-height: 0; overflow: hidden; transition: max-height .3s var(--tr);
}
.primary-nav.is-open{ max-height: 600px; }
.primary-nav ul{ flex-direction: column; align-items: stretch; padding: 12px; gap: 0; }
.primary-nav a{ padding: 14px 16px; border-radius: 8px; }
.primary-nav a::after{ display: none; }
.primary-nav a.active, .primary-nav a:hover{ background: var(--c-bg-soft); }
}
/* ---------- 6. HERO ---------- */
.hero{
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 50%, var(--c-primary-light) 100%);
color: #fff;
padding: 80px 0 60px;
}
.hero__bg{
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(245,158,11,.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(59,91,219,.4), transparent 50%);
pointer-events: none;
}
.hero__bg::before{
content:''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .5;
}
.hero__overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(15,30,84,.4) 100%);
}
.hero__container{
position: relative; z-index: 1;
display: grid; grid-template-columns: 1.3fr 1fr;
gap: 48px; align-items: center;
padding-top: 32px; padding-bottom: 32px;
}
.hero .eyebrow{
background: rgba(245,158,11,.18); color: var(--c-accent);
border: 1px solid rgba(245,158,11,.3);
}
.hero__title{
font-family: var(--ff-display);
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
line-height: 1.05; font-weight: 800;
margin: 24px 0;
}
.hero__title-light{ display: block; color: rgba(255,255,255,.7); font-weight: 600; }
.hero__title-bold{ display: block; }
.hero__lede{
font-size: 1.08rem; color: rgba(255,255,255,.85);
max-width: 540px; margin-bottom: 32px;
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; }
/* ================================
HERO SLIDER
================================ */
/* =================================
HERO BANNER SLIDER
================================= */
.hero__slider {
position: relative;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
/* Swiper */
.heroSwiper {
width: 100%;
padding: 10px 0 42px;
overflow: hidden;
}
/* Slide */
.heroSwiper .swiper-slide {
width: 100%;
height: auto;
}
/* Banner Wrapper */
.hero__banner {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
border-radius: 26px;
background: #0f1e54;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.30);
transition: transform 0.3s ease;
}
/* Image */
.hero__banner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s ease;
}
/* Slight zoom on hover */
.hero__banner:hover img {
transform: scale(1.04);
}
/* Dark overlay */
.hero__banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(5, 20, 35, 0.05) 0%,
rgba(5, 20, 35, 0.10) 40%,
rgba(5, 20, 35, 0.40) 100%
);
pointer-events: none;
}
/* =================================
PAGINATION
================================= */
.heroSwiper .swiper-pagination {
bottom: 8px;
}
.heroSwiper .swiper-pagination-bullet {
width: 8px;
height: 8px;
opacity: 1;
background: rgba(255, 255, 255, 0.45);
transition: all 0.3s ease;
}
.heroSwiper .swiper-pagination-bullet-active {
width: 26px;
border-radius: 10px;
background: var(--c-accent);
}
/* =================================
TABLET
================================= */
@media (max-width: 900px) {
.hero__slider {
max-width: 620px;
}
.hero__banner {
height: 380px;
}
}
/* =================================
MOBILE
================================= */
@media (max-width: 600px) {
.hero__slider {
width: 100%;
}
.hero__banner {
height: 330px;
border-radius: 22px;
}
}
/* Small Mobile */
@media (max-width: 400px) {
.hero__banner {
height: 280px;
border-radius: 18px;
}
}
.hero__marquee{
position: relative; z-index: 1;
margin-top: 48px;
padding: 18px 0;
background: rgba(0,0,0,.18);
border-top: 1px solid rgba(255,255,255,.08);
overflow: hidden;
}
.hero__marquee-track{
display: flex; gap: 60px;
white-space: nowrap;
animation: marquee 28s linear infinite;
font-family: var(--ff-display);
font-size: 1.1rem; letter-spacing: .12em;
color: rgba(255,255,255,.85);
font-weight: 600;
}
@keyframes marquee{
from{ transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 900px){
.hero__container{ grid-template-columns: 1fr; gap: 32px; }
}
/* ---------- 7. WELCOME ---------- */
.welcome__grid{
display: grid; grid-template-columns: 1fr 1.1fr;
gap: 64px; align-items: center;
}
.welcome__media{
position: relative; aspect-ratio: 4/5;
border-radius: var(--radius-lg); overflow: visible;
}
.welcome__image-main{
position: absolute; inset: 0;
background:
linear-gradient(135deg, rgba(30,58,138,.5), rgba(245,158,11,.3)),
radial-gradient(circle at 30% 30%, #fcd9a6, transparent 40%),
linear-gradient(45deg, #1e3a8a, #3b5bdb);
background-size: cover; background-position: center;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
background-blend-mode: normal, screen, normal;
}
.welcome__image-main::after{
content:''; position: absolute; inset: 0;
background-image:
url(../images/V.NSINGH.png);
border-radius: var(--radius-lg);
background-size: cover;
background-repeat: no-repeat;
}
.welcome__image-tag{
position: absolute; top: 20px; left: -20px;
background: var(--c-accent); color: #1f1300;
padding: 16px 20px; border-radius: var(--radius);
display: flex; align-items: center; gap: 12px;
font-weight: 700; font-size: .9rem;
box-shadow: var(--shadow);
z-index: 2;
}
.welcome__image-tag i{ font-size: 1.4rem; }
.welcome__image-tag span{ line-height: 1.1; }
.welcome__years{
position: absolute; bottom: -20px; right: -20px;
background: var(--c-primary-dark); color: #fff;
padding: 22px 28px; border-radius: var(--radius);
text-align: center;
box-shadow: var(--shadow-lg); z-index: 2;
}
.welcome__years strong{
display: block; font-family: var(--ff-display);
font-size: 2.4rem; color: var(--c-accent);
line-height: 1;
}
.welcome__years span{ font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.welcome__body p{ color: var(--c-text-soft); margin-bottom: 18px; }
.welcome__body p strong{ color: var(--c-primary-dark); }
.welcome__quote{
background: var(--c-bg-soft);
border-left: 4px solid var(--c-accent);
padding: 18px 22px;
border-radius: 0 var(--radius) var(--radius) 0;
font-style: italic;
color: var(--c-text);
}
.welcome__quote i{ color: var(--c-accent); margin-right: 8px; }
.welcome__quote strong{ color: var(--c-primary); }
@media (max-width: 900px){
.welcome__grid{ grid-template-columns: 1fr; gap: 48px; }
}
/* ---------- 8. STATS ---------- */
.stats{
background: var(--c-primary-dark);
padding: 60px 0;
position: relative;
overflow: hidden;
}
.stats::before{
content:''; position: absolute; inset: 0;
background:
radial-gradient(circle at 10% 50%, rgba(245,158,11,.18), transparent 40%),
radial-gradient(circle at 90% 50%, rgba(59,91,219,.3), transparent 50%);
}
.stats__grid{
position: relative;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.stat{
text-align: center; color: #fff;
padding: 20px;
}
.stat i{
display: inline-flex;
width: 60px; height: 60px;
align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(245,158,11,.2);
color: var(--c-accent);
font-size: 1.4rem;
margin-bottom: 16px;
}
.stat strong{
display: block;
font-family: var(--ff-display);
font-size: 2.6rem; font-weight: 800;
color: #fff; line-height: 1.1;
}
.stat span{ color: rgba(255,255,255,.75); font-size: .95rem; }
@media (max-width: 800px){
.stats__grid{ grid-template-columns: repeat(2, 1fr); }
}
/* ---------- 9. ISSUES ---------- */
.issues__grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.issue-card{
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: 32px 26px;
transition: all .3s var(--tr);
position: relative; overflow: hidden;
}
.issue-card::before{
content:''; position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--tr);
}
.issue-card:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.issue-card:hover::before{ transform: scaleX(1); }
.issue-card__icon{
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
color: #fff;
border-radius: 14px;
font-size: 1.4rem;
margin-bottom: 20px;
transition: transform .3s var(--tr);
}
.issue-card:hover .issue-card__icon{ transform: rotate(-6deg) scale(1.05); }
.issue-card h3{
font-family: var(--ff-display);
font-size: 1.15rem; font-weight: 700;
color: var(--c-primary-dark);
margin-bottom: 10px;
}
.issue-card p{ color: var(--c-text-soft); font-size: .92rem; margin-bottom: 16px; }
.issue-card__link{
display: inline-flex; align-items: center; gap: 6px;
font-size: .88rem; font-weight: 600;
color: var(--c-primary);
}
.issue-card__link i{ transition: transform .2s var(--tr); }
.issue-card__link:hover i{ transform: translateX(4px); }
/* ---------- 10. MEDIA COVERAGE ---------- */
/* ================================
MEDIA GRID
================================ */
.media__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
}
/* ================================
MEDIA CARD
================================ */
.media-card {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--c-border);
transition: all .3s var(--tr);
display: flex;
flex-direction: column;
}
.media-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
/* ================================
IMAGE AREA
================================ */
.media-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #eef2f7;
}
/* IMAGE WRAPPER */
.media-card__img {
position: absolute;
inset: 0;
overflow: hidden;
}
/* ACTUAL IMG TAG */
.media-card__img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .5s var(--tr);
}
/* IMAGE ZOOM ON HOVER */
.media-card:hover .media-card__img img {
transform: scale(1.06);
}
/* DARK OVERLAY FOR PREMIUM LOOK */
.media-card__img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.18)
);
pointer-events: none;
}
/* ================================
NEWS TAG
================================ */
.media-card__tag {
position: absolute;
top: 14px;
left: 14px;
background: var(--c-primary);
color: #fff;
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
z-index: 3;
}
/* ================================
CARD BODY
================================ */
.media-card__body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.media-card .meta {
font-size: .8rem;
color: var(--c-muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.media-card h3 {
font-family: var(--ff-display);
font-size: 1.18rem;
font-weight: 700;
color: var(--c-primary-dark);
margin-bottom: 10px;
line-height: 1.3;
}
.media-card p {
color: var(--c-text-soft);
font-size: .93rem;
margin-bottom: 16px;
flex: 1;
}
/* ================================
READ MORE
================================ */
.more-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--c-accent-dark);
font-weight: 600;
font-size: .9rem;
}
.more-link i {
transition: transform .2s var(--tr);
}
.more-link:hover i {
transform: translateX(4px);
}
/* ================================
MOBILE
================================ */
@media (max-width: 600px) {
.media__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.media-card__media {
aspect-ratio: 16 / 10;
}
.media-card__body {
padding: 20px;
}
.media-card h3 {
font-size: 1.08rem;
}
}
/* ---------- 11. JOIN STRIP ---------- */
.join{
background:
linear-gradient(135deg, rgba(30,58,138,.92), rgba(15,30,84,.92)),
linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
color: #fff;
padding: 60px 0;
}
.join__inner{
display: flex; align-items: center; gap: 32px;
flex-wrap: wrap;
}
.join__icon{
width: 80px; height: 80px; flex-shrink: 0;
border-radius: 50%;
background: rgba(245,158,11,.2);
border: 2px solid var(--c-accent);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; color: var(--c-accent);
}
.join h2{
font-family: var(--ff-display);
font-size: 1.8rem; margin-bottom: 6px;
}
.join p{ color: rgba(255,255,255,.8); }
.join__inner > div{ flex: 1; min-width: 240px; }
/* ---------- 12. CTA STRIP ---------- */
.cta-strip{
background: var(--c-accent);
color: #1f1300;
padding: 56px 0;
position: relative; overflow: hidden;
}
.cta-strip::before{
content:''; position: absolute; inset: 0;
background: radial-gradient(circle at 90% 50%, rgba(0,0,0,.1), transparent 50%);
}
.cta-strip__inner{
position: relative;
display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.cta-strip__text{ flex: 1; min-width: 280px; }
.cta-strip h2{
font-family: var(--ff-display);
font-size: 2rem; font-weight: 700;
margin-bottom: 8px;
}
.cta-strip p{ font-size: 1.05rem; }
.cta-strip__actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.cta-strip .btn--ghost{
color: #1f1300; border-color: rgba(31,19,0,.4);
}
.cta-strip .btn--ghost:hover{
background: #1f1300; color: var(--c-accent);
}
/* ---------- 13. FOOTER ---------- */
.site-footer{
background: #0a1230;
color: #cbd5e1;
padding: 80px 0 24px;
position: relative;
}
.site-footer::before{
content:''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--c-accent), var(--c-primary), var(--c-accent));
}
.footer__grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 48px;
margin-bottom: 48px;
}
.footer__col h4{
font-family: var(--ff-display);
color: #fff;
font-size: 1.1rem; font-weight: 700;
margin-bottom: 20px;
position: relative; padding-bottom: 12px;
}
.footer__col h4::after{
content:''; position: absolute; bottom: 0; left: 0;
width: 32px; height: 3px; background: var(--c-accent);
border-radius: 2px;
}
.brand--footer .brand__name{ color: #fff; }
.brand--footer .brand__tag{ color: var(--c-muted); }
.footer__col--about p{ color: #94a3b8; margin: 16px 0 20px; line-height: 1.7; }
.footer__col--about em{ color: var(--c-accent); font-style: normal; font-weight: 600; }
.footer__social{ display: flex; gap: 10px; }
.footer__social a{
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.06);
color: #cbd5e1; border-radius: 50%;
transition: all .2s var(--tr);
}
.footer__social a:hover{
background: var(--c-accent); color: #1f1300;
transform: translateY(-3px);
}
.footer__links li{ margin-bottom: 10px; }
.footer__links a{
color: #cbd5e1; font-size: .92rem;
display: inline-flex; align-items: center; gap: 8px;
transition: all .2s var(--tr);
}
.footer__links a i{ color: var(--c-accent); font-size: .7em; }
.footer__links a:hover{ color: var(--c-accent); transform: translateX(4px); }
.footer__contact li{
display: flex; gap: 14px; margin-bottom: 16px;
align-items: flex-start;
font-size: .92rem; line-height: 1.6;
}
.footer__contact i{
color: var(--c-accent);
width: 32px; height: 32px;
background: rgba(245,158,11,.1);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
font-size: .85rem;
}
.footer__contact a{ color: #cbd5e1; }
.footer__contact a:hover{ color: var(--c-accent); }
.footer__bottom{
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 24px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
font-size: .85rem; color: var(--c-muted);
}
.footer__bottom a{ color: #cbd5e1; }
.footer__bottom a:hover{ color: var(--c-accent); }
.footer__bottom-links a{ margin: 0 4px; }
@media (max-width: 900px){
.footer__grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px){
.footer__grid{ grid-template-columns: 1fr; }
}
/* ---------- 14. BACK TO TOP ---------- */
.to-top{
position: fixed; right: 24px; bottom: 24px;
width: 48px; height: 48px;
background: var(--c-accent); color: #1f1300;
border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 1rem;
box-shadow: 0 8px 24px rgba(245,158,11,.4);
opacity: 0; visibility: hidden; transform: translateY(20px);
transition: all .3s var(--tr); z-index: 40;
}
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{ background: var(--c-accent-dark); color: #fff; transform: translateY(-4px); }
/* ---------- 15. RESPONSIVE TWEAKS ---------- */
@media (max-width: 640px){
.section{ padding: 64px 0; }
.top-strip__left{ display: none; }
.header__inner{ padding: 12px 16px; }
.brand__tag{ display: none; }
.hero{ padding: 60px 0 40px; }
.welcome__image-tag{ left: 10px; padding: 12px 16px; font-size: .8rem; }
.welcome__years{ right: 10px; padding: 16px 20px; }
.welcome__years strong{ font-size: 1.8rem; }
.footer__bottom{ flex-direction: column; text-align: center; }
.cta-strip{ text-align: center; }
.cta-strip__inner{ justify-content: center; }
}
.page-hero{
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
color: #fff;
padding: 80px 0 70px;
}
.page-hero__bg{
position: absolute; inset: 0;
background:
radial-gradient(circle at 80% 30%, rgba(245,158,11,.18), transparent 40%),
radial-gradient(circle at 20% 80%, rgba(59,91,219,.35), transparent 50%);
pointer-events: none;
}
.page-hero__bg::before{
content:''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .6;
}
.page-hero__inner{ position: relative; z-index: 1; }
.breadcrumb{
display: flex; align-items: center; gap: 10px;
font-size: .88rem; margin-bottom: 20px;
color: rgba(255,255,255,.75);
}
.breadcrumb a{ color: var(--c-accent); }
.breadcrumb a:hover{ color: #fff; }
.breadcrumb i.fa-chevron-right{ font-size: .65em; opacity: .6; }
.breadcrumb span{ color: #fff; }
.page-hero__title{
font-family: var(--ff-display);
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
line-height: 1.1; font-weight: 800;
margin-bottom: 16px;
}
.page-hero__title .accent{ color: var(--c-accent); font-style: italic; }
.page-hero__lede{
font-size: 1.08rem; color: rgba(255,255,255,.85);
max-width: 640px;
}
.page-hero__lede strong{ color: var(--c-accent); }
/* ==========================================================
17. CERTIFICATE PAGE
========================================================== */
.cert-intro__grid{
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 56px; align-items: start;
}
.cert-intro__body p{ color: var(--c-text-soft); margin-bottom: 16px; }
.cert-intro__body p strong{ color: var(--c-primary-dark); }
.cert-intro__meta{
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 24px;
}
.cert-intro__meta-item{
display: inline-flex; align-items: center; gap: 8px;
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
padding: 10px 16px; border-radius: 999px;
font-size: .88rem; font-weight: 500;
color: var(--c-primary-dark);
}
.cert-intro__meta-item i{ color: var(--c-success); }
.info-card{
background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
color: #fff;
padding: 32px 28px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
position: relative; overflow: hidden;
}
.info-card::before{
content:''; position: absolute; top: -40px; right: -40px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(245,158,11,.25), transparent 60%);
}
.info-card__head{
display: flex; align-items: center; gap: 12px;
margin-bottom: 22px; position: relative;
}
.info-card__head i{
width: 44px; height: 44px;
background: rgba(245,158,11,.2);
color: var(--c-accent);
display: flex; align-items: center; justify-content: center;
border-radius: 12px; font-size: 1.1rem;
}
.info-card__head h3{
font-family: var(--ff-display);
font-size: 1.3rem; font-weight: 700;
}
.info-card ul{ margin-bottom: 24px; position: relative; }
.info-card li{
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 0;
border-top: 1px solid rgba(255,255,255,.1);
}
.info-card li:first-child{ border-top: 0; padding-top: 0; }
.info-card li i{
color: var(--c-accent); font-size: 1.1rem;
width: 24px; flex-shrink: 0; margin-top: 2px;
}
.info-card li strong{
display: block; font-size: .95rem; color: #fff; margin-bottom: 2px;
}
.info-card li span{ font-size: .85rem; color: rgba(255,255,255,.7); }
.info-card__cta{
width: 100%; justify-content: center;
background: var(--c-accent); color: #1f1300; border-color: var(--c-accent);
}
.info-card__cta:hover{
background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff;
}
@media (max-width: 900px){
.cert-intro__grid{ grid-template-columns: 1fr; gap: 40px; }
}
/* ----- Filter tabs ----- */
.cert-filter{
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center;
margin-bottom: 40px;
}
.cert-filter__btn{
display: inline-flex; align-items: center; gap: 8px;
background: #fff;
color: var(--c-text-soft);
border: 1px solid var(--c-border);
padding: 10px 18px; border-radius: 999px;
font-size: .9rem; font-weight: 600;
cursor: pointer;
transition: all .25s var(--tr);
font-family: var(--ff-body);
}
.cert-filter__btn i{ color: var(--c-accent); }
.cert-filter__count{
background: var(--c-bg-soft);
color: var(--c-text-soft);
padding: 2px 8px; border-radius: 999px;
font-size: .75rem; font-weight: 700;
}
.cert-filter__btn:hover{
border-color: var(--c-accent);
color: var(--c-primary-dark);
transform: translateY(-2px);
}
.cert-filter__btn.is-active{
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
box-shadow: 0 8px 20px rgba(30,58,138,.25);
}
.cert-filter__btn.is-active i{ color: var(--c-accent); }
.cert-filter__btn.is-active .cert-filter__count{
background: rgba(255,255,255,.2); color: #fff;
}
/* ----- Gallery grid ----- */
.cert-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
}
.cert-card{
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
overflow: hidden;
transition: all .3s var(--tr);
display: flex; flex-direction: column;
}
.cert-card:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.cert-card__media{
position: relative;
aspect-ratio: 4/5;
background: var(--c-bg-alt);
overflow: hidden;
cursor: zoom-in;
}
.cert-card__media img{
width: 100%; height: 100%;
object-fit: cover; object-position: top;
transition: transform .5s var(--tr);
}
.cert-card:hover .cert-card__media img{ transform: scale(1.05); }
.cert-card__tag{
position: absolute; top: 14px; left: 14px;
display: inline-flex; align-items: center; gap: 6px;
background: var(--c-primary); color: #fff;
font-size: .72rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px;
z-index: 2;
}
.cert-card__tag--notice{ background: var(--c-accent); color: #1f1300; }
.cert-card__tag--sandesh{ background: var(--c-success); }
.cert-card__actions{
position: absolute; top: 14px; right: 14px;
display: flex; flex-direction: column; gap: 8px;
opacity: 0; transform: translateX(8px);
transition: all .25s var(--tr); z-index: 2;
}
.cert-card:hover .cert-card__actions{
opacity: 1; transform: translateX(0);
}
.cert-card__btn{
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.95);
color: var(--c-primary);
border: 0; border-radius: 50%;
cursor: pointer; font-size: .9rem;
box-shadow: var(--shadow);
transition: all .2s var(--tr);
text-decoration: none;
}
.cert-card__btn:hover{
background: var(--c-accent);
color: #1f1300;
transform: scale(1.1);
}
.cert-card__body{
padding: 22px 24px 26px;
display: flex; flex-direction: column; flex: 1;
}
.cert-card__meta{
display: flex; gap: 16px; flex-wrap: wrap;
font-size: .8rem; color: var(--c-muted);
margin-bottom: 12px;
}
.cert-card__meta i{ color: var(--c-accent); margin-right: 4px; }
.cert-card__body h3{
font-family: var(--ff-display);
font-size: 1.15rem; font-weight: 700;
color: var(--c-primary-dark);
margin-bottom: 8px; line-height: 1.3;
}
.cert-card__body p{
color: var(--c-text-soft);
font-size: .9rem; line-height: 1.6;
}
.cert-empty{
text-align: center; padding: 60px 20px;
color: var(--c-text-soft);
}
.cert-empty i{
font-size: 3rem; color: var(--c-muted);
margin-bottom: 12px; display: block;
}
/* ----- Lightbox ----- */
.lightbox{
position: fixed; inset: 0;
background: rgba(10, 18, 48, .95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
z-index: 100;
opacity: 0; visibility: hidden;
transition: opacity .3s var(--tr);
padding: 40px;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox__inner{
position: relative;
max-width: 900px; max-height: 90vh;
display: flex; flex-direction: column; align-items: center;
transform: scale(.95);
transition: transform .3s var(--tr);
}
.lightbox.is-open .lightbox__inner{ transform: scale(1); }
.lightbox__inner img{
max-width: 100%; max-height: 75vh;
object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 30px 80px rgba(0,0,0,.6);
background: #fff;
}
.lightbox__caption{
margin-top: 18px; text-align: center;
color: #fff; font-size: 1rem;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.lightbox__tag{
display: inline-flex; align-items: center; gap: 6px;
background: var(--c-accent); color: #1f1300;
padding: 6px 14px; border-radius: 999px;
font-size: .78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
}
.lightbox__close{
position: absolute; top: 20px; right: 20px;
width: 48px; height: 48px;
background: rgba(255,255,255,.1);
color: #fff;
border: 0; border-radius: 50%;
cursor: pointer; font-size: 1.1rem;
transition: all .2s var(--tr);
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.lightbox__close:hover{
background: var(--c-accent); color: #1f1300;
transform: rotate(90deg);
}
.lightbox__nav{
position: absolute; top: 50%; transform: translateY(-50%);
width: 56px; height: 56px;
background: rgba(255,255,255,.1);
color: #fff; border: 0; border-radius: 50%;
cursor: pointer; font-size: 1.1rem;
transition: all .2s var(--tr);
display: flex; align-items: center; justify-content: center;
}
.lightbox__nav:hover{ background: var(--c-accent); color: #1f1300; }
.lightbox__nav--prev{ left: 20px; }
.lightbox__nav--next{ right: 20px; }
@media (max-width: 640px){
.lightbox{ padding: 20px; }
.lightbox__nav{ width: 44px; height: 44px; }
.lightbox__nav--prev{ left: 8px; }
.lightbox__nav--next{ right: 8px; }
.lightbox__close{ top: 12px; right: 12px; width: 40px; height: 40px; }
}
/* ----- Certificate CTA ----- */
.cert-cta__inner{
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
color: #fff;
padding: 48px 40px;
border-radius: var(--radius-lg);
display: flex; align-items: center; gap: 28px;
flex-wrap: wrap;
position: relative; overflow: hidden;
box-shadow: var(--shadow-lg);
}
.cert-cta__inner::before{
content:''; position: absolute; inset: 0;
background: radial-gradient(circle at 90% 50%, rgba(245,158,11,.25), transparent 50%);
pointer-events: none;
}
.cert-cta__inner > *{ position: relative; }
.cert-cta__icon{
width: 80px; height: 80px; flex-shrink: 0;
background: rgba(245,158,11,.2);
color: var(--c-accent);
border: 2px solid var(--c-accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
}
.cert-cta__inner > div{ flex: 1; min-width: 240px; }
.cert-cta__inner h2{
font-family: var(--ff-display);
font-size: 1.6rem; font-weight: 700;
margin-bottom: 6px;
}
.cert-cta__inner p{ color: rgba(255,255,255,.8); }
@media (max-width: 640px){
.cert-cta__inner{ padding: 32px 24px; }
.cert-cta__icon{ width: 64px; height: 64px; font-size: 1.4rem; }
}