/* =====================================================
   TRIVENI MANAV UDDAMITA VIKAS SANSTHAN
   Cleaned CSS
   Use this file as style.css
===================================================== */

/* =====================================================
   01. Theme variables
   Common colors, shadows and reusable values.
===================================================== */
:root{
    --navy:#082c5f;
    --navy-2:#0f4c91;
    --blue:#1769c2;
    --blue-2:#2f8be6;
    --orange:#f47b20;
    --orange-2:#ffb14a;
    --soft:#eef6ff;
    --soft-2:#fff8ef;
    --mist:#d7e9ff;
    --ink:#10233f;
    --muted:#5e6f86;
    --line:#cbdcf3;
    --white:#ffffff;
    --shadow:0 22px 60px rgba(8,44,95,.16);
    --shadow-sm:0 12px 32px rgba(8,44,95,.10);
}

/* =====================================================
   02. Reset and base layout
   Page default spacing, font, links and images.
===================================================== */
*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Ubuntu',Arial,Helvetica,sans-serif;
    color:var(--ink);
    font-size:17px;
    line-height:1.6;
    background:
        linear-gradient(90deg,rgba(8,44,95,.045) 1px,transparent 1px),
        linear-gradient(180deg,rgba(8,44,95,.035) 1px,transparent 1px),
        radial-gradient(circle at 15% 0%,rgba(244,123,32,.28),transparent 32%),
        radial-gradient(circle at 90% 8%,rgba(23,105,194,.16),transparent 30%),
        #f6faff;
    background-size:42px 42px,42px 42px,auto,auto,auto;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
}

/* =====================================================
   03. Header and identity area
   Top strip, logo, Sansthan name and right side contact.
===================================================== */
.topbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(245,255,247,.92);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(197,227,204,.75);
    box-shadow:0 10px 38px rgba(8,44,95,.10);
}

.topbar::before{
    display:none;
    content:none;
}

.top-strip{
    display:block;
    text-align:center;
    padding:7px 12px;
    font-size:12px;
    line-height:1.4;
    letter-spacing:.7px;
    font-weight:900;
    color:#fff;
    background:linear-gradient(90deg,var(--navy),var(--blue),var(--orange),var(--navy));
}

.brand-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:16px 5.5%;
    background:linear-gradient(90deg,rgba(238,246,255,.97),rgba(255,248,239,.90));
    overflow:visible;
}

.brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    flex:1 1 auto;
    min-width:0;
}

.logo-mark{
    width:86px;
    height:86px;
    min-width:86px;
    padding:4px;
    position:relative;
    cursor:pointer;
    border-radius:50%;
    background:conic-gradient(from 160deg,var(--navy),var(--blue),var(--orange),var(--navy));
    box-shadow:0 14px 35px rgba(8,44,95,.22);
}

.logo-mark::after{
    content:'';
    position:absolute;
    inset:-8px;
    border:1px dashed rgba(244,123,32,.48);
    border-radius:50%;
}

.logo-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:2px;
    border-radius:50%;
    background:#3e9acf;
}

.brand-name{
    max-width:760px;
    text-align:left;
}

.brand-name b{
    display:block;
    font-size:28px;
    line-height:1.18;
    letter-spacing:.2px;
    font-weight:900;
    text-transform:uppercase;
    color:var(--navy);
    white-space:nowrap;
}

.brand-name .orange{
    color:var(--blue);
}

.brand-name .foundation-orange{
    color:var(--navy);
}

.brand-name small{
    display:inline-block;
    margin-top:8px;
    padding:6px 12px;
    border-radius:999px;
    color:var(--navy);
    font-size:12px;
    line-height:1.45;
    font-weight:900;
    background:linear-gradient(90deg,rgba(215,233,255,.88),rgba(255,177,74,.18));
    border:1px solid rgba(244,123,32,.24);
}

.right-title,
.plain-right-title{
    flex:0 0 auto;
    min-width:330px;
    max-width:520px;
    text-align:right;
    background:transparent;
    border:0;
    padding:0;
    box-shadow:none;
    overflow:visible;
}

.right-title b,
.plain-right-title b{
    display:block;
    color:var(--orange);
    font-size:25px;
    line-height:1.2;
    font-weight:900;
    white-space:nowrap;
}

.right-title small,
.plain-right-title small{
    display:block;
    margin-top:7px;
    color:var(--navy);
    font-size:13px;
    line-height:1.55;
    font-weight:800;
}

/* =====================================================
   04. Navigation menu
   Desktop menu, active link, mobile hamburger and date box.
===================================================== */
.menu-btn{
    display:none;
    margin:0 5.5% 12px;
    align-items:center;
    justify-content:center;
    border:0;
    padding:12px 17px;
    border-radius:12px;
    color:#fff;
    font-weight:900;
    cursor:pointer;
    background:linear-gradient(135deg,var(--blue),var(--orange));
    box-shadow:var(--shadow-sm);
}

.nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 5.5% 13px;
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(238,246,255,.88));
    border-top:1px solid rgba(203,220,243,.9);
    overflow:hidden;
    flex-wrap:nowrap;
}

.nav a{
    padding:9px 12px;
    border-radius:13px;
    white-space:nowrap;
    color:#10233f;
    font-size:14px;
    font-weight:900;
    border:1px solid transparent;
    transition:.25s ease;
}

.nav a:hover,
.nav a.active{
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--orange));
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(8,44,95,.18);
}

.home-icon{
    font-size:22px;
    line-height:1;
    padding:7px 14px;
}

.datebox{
    margin-left:auto;
    padding:9px 12px;
    border-radius:13px;
    background:#fff;
    color:var(--blue);
    border:1px solid rgba(244,123,32,.28);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

/* =====================================================
   05. Home hero section
   Homepage main banner, typing text and slideshow.
===================================================== */
.hero{
    min-height:690px;
    display:grid;
    grid-template-columns:minmax(320px,1.05fr) minmax(300px,.95fr);
    gap:44px;
    align-items:center;
    padding:72px 6.5% 82px;
    position:relative;
    color:#fff;
    overflow:hidden;
    background:
        linear-gradient(120deg,rgba(8,44,95,.88) 0%,rgba(15,76,145,.80) 48%,rgba(244,123,32,.58) 100%),
        url('assets/images/home-banner/triveni-banner.jpg') center/cover;
}

.hero::after{
    content:'ACTIVE NGO';
    position:absolute;
    right:6.7%;
    top:58px;
    padding:8px 13px;
    border-radius:999px;
    color:#fff7ef;
    font-size:12px;
    letter-spacing:2.5px;
    font-weight:900;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.hero-content::before{
    content:'त्रिवेणी सेवा संकल्प';
    display:inline-block;
    margin-bottom:18px;
    padding:8px 14px;
    border-radius:999px;
    color:#dfffe7;
    font-weight:900;
    letter-spacing:.5px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
}

#typing-text,
.hero h1{
    margin:0 0 14px;
    font-size:52px;
    line-height:1.03;
    color:#eb9423;
    font-weight:900;
    text-shadow:0 8px 30px rgba(0,0,0,.28);
    letter-spacing:-.6px;
    white-space:nowrap;
}

#typing-text::after{
    content:'|';
    color:#ffb14a;
    animation:blink .75s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}

.hero h2{
    margin:0 0 16px;
    color:#d9f8df;
    font-size:20px;
    line-height:1.55;
    font-weight:800;
}

.hero p{
    margin:0;
    max-width:690px;
    color:#f2fff4;
    font-size:18px;
    line-height:1.85;
}

.hero-btns{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px;
}

.hero-slideshow{
    position:relative;
    z-index:2;
    width:100%;
    height:520px;
    overflow:hidden;
    border-radius:42px 42px 42px 10px;
    border:12px solid rgba(255,255,255,.16);
    box-shadow:0 30px 90px rgba(0,0,0,.34);
    isolation:isolate;
}

.hero-slideshow::before{
    content:'Years of trusted social work';
    position:absolute;
    z-index:3;
    left:18px;
    top:18px;
    padding:9px 13px;
    border-radius:999px;
    background:rgba(8,44,95,.78);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.hero-slideshow::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(to top,rgba(8,44,95,.55),transparent 58%);
    pointer-events:none;
}

.hero-slideshow img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.03);
    transition:opacity 1s ease,transform 7s ease;
}

.hero-slideshow img.active{
    opacity:1;
    transform:scale(1.10);
}

/* =====================================================
   06. Page heading / hero heading
   Common inner page banner and founder special banner.
===================================================== */
.page-head{
    position:relative;
    overflow:hidden;
    padding:16px 6.5%;
    color:#fff;
    background:
        linear-gradient(120deg,rgba(4,31,20,.94),rgba(23,105,194,.72)),
        url('assets/images/banner.svg') center/cover;
}

.page-head::before{
    content:'';
    position:absolute;
    left:6.5%;
    top:30px;
    width:72px;
    height:72px;
    border-radius:50%;
    border:14px solid rgba(255,255,255,.10);
}

.page-head::after{
    content:'TRIVENI';
    position:absolute;
    right:6%;
    bottom:6px;
    color:rgba(255,255,255,.08);
    font-size:82px;
    line-height:1;
    font-weight:900;
    letter-spacing:4px;
}

.page-head h1{
    position:relative;
    z-index:1;
    margin:0 0 10px;
    font-size:40px;
    line-height:1.05;
    font-weight:900;
}

.page-head p{
    position:relative;
    z-index:1;
    margin:0;
    max-width:860px;
    color:#e7ffec;
    font-size:19px;
    font-weight:800;
}

.page-hero{
    position:relative;
    overflow:hidden;
}

.founder-hero{
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:70px 6%;
    background:
        linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,177,74,.22),rgba(244,123,32,.55)),
        url('assets/images/home-banner/triveni-banner.jpg') center/cover;
}

.founder-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.38);
    backdrop-filter:blur(2px);
}

.founder-hero > div{
    position:relative;
    z-index:2;
    max-width:900px;
}

.kicker,
.founder-hero .kicker{
    display:inline-block;
    margin-bottom:12px;
    padding:10px 18px;
    border-radius:999px;
    color:var(--orange);
    font-size:22px;
    font-weight:900;
    letter-spacing:.6px;
    background:linear-gradient(135deg,#fff,#ffe3bf);
    border:1px solid rgba(244,123,32,.25);
}

.founder-hero h1{
    margin:18px 0 14px;
    color:var(--orange);
    font-size:68px;
    line-height:1;
    font-weight:900;
    text-shadow:0 8px 28px rgba(0,0,0,.08);
}

.founder-hero p{
    max-width:850px;
    margin:10px auto;
    color:#7a3d00;
    font-size:20px;
    line-height:1.8;
    font-weight:700;
}

/* =====================================================
   07. Common sections and typography
   Reusable section, title, lead, grid and two-column classes.
===================================================== */
.section{
    position:relative;
    padding:58px 6.5%;
}

.section.white{
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(234,248,238,.74));
}

.title,
.title-orange{
    position:relative;
    display:inline-block;
    margin:0 0 18px;
    color:var(--navy);
    font-size:36px;
    line-height:1.18;
    font-weight:900;
}

.title::after,
.title-left::after{
    content:'';
    display:block;
    width:70%;
    max-width:160px;
    height:5px;
    margin-top:8px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue),var(--orange));
}

.orange-text{
    color:var(--blue);
}

.lead{
    max-width:960px;
    margin-top:0;
    color:#465f50;
    font-size:19px;
    line-height:1.8;
}

.grid{
    display:grid;
    gap:24px;
}

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

.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:start;
}

/* =====================================================
   08. Cards, icons, buttons and lists
   Common content boxes used across all pages.
===================================================== */
.card{
    position:relative;
    overflow:hidden;
    padding:28px;
    border-radius:12px 32px 12px 32px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(197,227,204,.92);
    box-shadow:var(--shadow-sm);
    transition:.25s ease;
}

.card::before{
    content:'';
    position:absolute;
    right:-32px;
    top:-32px;
    width:96px;
    height:96px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(244,123,32,.28),transparent 70%);
}

.card::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--navy),var(--blue),var(--orange-2));
}

.card:hover{
    transform:translateY(-7px);
    box-shadow:var(--shadow);
    border-color:rgba(244,123,32,.34);
}

.feature{
    text-align:left;
}

.feature:nth-child(even){
    border-radius:32px 12px 32px 12px;
}

.icon{
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    margin:0 0 14px;
    border-radius:18px;
    color:#fff;
    font-size:29px;
    font-weight:900;
    background:linear-gradient(135deg,var(--blue),var(--orange));
    border:1px solid rgba(23,105,194,.20);
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.20);
}

.feature h3,
.card h3,
.step h3{
    margin:8px 0 9px;
    color:var(--navy);
    font-size:20px;
    font-weight:900;
}

.card h2{
    font-size:26px;
}

.card p,
.card li{
    color:#4c6758;
    line-height:1.75;
}

.btn,
.pdf-btn,
.tpdf-btn,
.map-btn,
.download-btn,
.team-pdf-btn,
.testimonial-pdf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:14px;
    padding:13px 22px;
    color:#fff;
    background:linear-gradient(135deg,var(--orange),var(--blue));
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(8,44,95,.25);
    transition:.25s ease;
}

.btn:hover,
.pdf-btn:hover,
.tpdf-btn:hover,
.map-btn:hover,
.download-btn:hover,
.team-pdf-btn:hover,
.testimonial-pdf-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(8,44,95,.28);
}

.btn.dark,
.btn.light{
    color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--blue));
}

.list{
    margin:0;
    padding:0;
    list-style:none;
}

.list li{
    position:relative;
    margin:12px 0;
    padding-left:34px;
}

.list li::before{
    content:'✓';
    position:absolute;
    left:0;
    top:1px;
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    font-size:13px;
    font-weight:900;
}

/* =====================================================
   09. Home stats, strips and poster
   Homepage feature blocks, badges and share banner card.
===================================================== */
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:30px;
}

.stat{
    position:relative;
    overflow:hidden;
    padding:22px 16px;
    text-align:center;
    border-radius:24px 8px 24px 8px;
    color:#fff7ef;
    font-weight:900;
    background:linear-gradient(145deg,var(--navy),var(--blue));
    box-shadow:var(--shadow-sm);
}

.stat::before{
    content:'';
    position:absolute;
    width:90px;
    height:90px;
    right:-30px;
    top:-34px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.stat b{
    display:block;
    color:#fff;
    font-size:31px;
    line-height:1.1;
}

.strip{
    margin-top:30px;
    padding:22px 28px;
    border-radius:18px;
    color:#fff;
    text-align:center;
    font-size:19px;
    font-weight:900;
    background:linear-gradient(90deg,rgba(8,44,95,.98),rgba(23,105,194,.92));
    box-shadow:var(--shadow-sm);
}

.poster{
    padding:38px;
    text-align:center;
    border-radius:36px 10px 36px 10px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.95),rgba(234,248,238,.90)),
        radial-gradient(circle at top right,rgba(244,123,32,.22),transparent 42%);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.poster h2{
    margin:6px 0;
    color:var(--navy);
    font-size:26px;
    font-weight:900;
}

.poster-logo{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.poster-logo img{
    width:140px;
    height:140px;
    object-fit:contain;
    padding:10px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.poster-buttons{
    margin-top:18px;
}

.badge-row{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
}

.badge{
    padding:9px 13px;
    border-radius:999px;
    color:var(--blue);
    background:#fff;
    border:1px solid var(--line);
    font-size:12px;
    font-weight:900;
}

/* =====================================================
   10. Gallery and photo blocks
   Gallery tabs, image cards and overlay titles.
===================================================== */
.photo,
.photo-gallery{
    position:relative;
    min-height:270px;
    height:330px;
    overflow:hidden;
    border-radius:34px 34px 10px 34px;
    border:8px solid #fff;
    background:#d7e9ff;
    box-shadow:var(--shadow-sm);
    line-height:0;
}

.photo img,
.photo-gallery img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.photo::after,
.photo-gallery::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(8,44,95,.72),rgba(8,44,95,.05) 58%);
    pointer-events:none;
}

.photo span,
.photo-text,
.gallery-title{
    position:absolute;
    z-index:3;
    left:18px;
    right:18px;
    bottom:18px;
    padding:10px 14px;
    border-radius:14px;
    color:#fff;
    text-align:center;
    line-height:1.45;
    font-size:16px;
    font-weight:900;
    background:rgba(8,44,95,.76);
    border:1px solid rgba(255,255,255,.18);
}

.gallery{
    grid-template-columns:repeat(3,1fr);
}

.tabs{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:28px;
}

.tabs button{
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 20px;
    color:var(--navy);
    background:#fff;
    font-weight:900;
    cursor:pointer;
    transition:.25s ease;
}

.tabs button:hover,
.tabs button.active,
.tabs .active{
    color:#fff;
    background:linear-gradient(135deg,var(--orange),var(--blue));
    transform:translateY(-2px);
}

/* =====================================================
   11. About / programs timeline
   Mission-vision steps and program ladder layouts.
===================================================== */
.timeline{
    position:relative;
    display:grid;
    gap:18px;
    padding-left:0;
    border-left:0;
}

.step{
    position:relative;
    padding:20px 22px 20px 62px;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.step::before{
    content:'';
    position:absolute;
    left:22px;
    top:24px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 0 8px var(--soft),0 0 0 9px var(--line);
}

/* =====================================================
   12. Team and testimonials
   Team avatars, role text, quotes and testimonial names.
===================================================== */
.team-card{
    text-align:center;
}

.avatar,
.photo-avatar{
    width:126px;
    height:126px;
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    overflow:hidden;
    border-radius:50% 50% 50% 14px;
    background:linear-gradient(145deg,#fff,#d7e9ff);
    border:7px solid #fff;
    box-shadow:0 18px 40px rgba(8,44,95,.14);
    font-size:46px;
}

.avatar img,
.photo-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.role{
    color:var(--blue);
    font-weight:900;
}

.team-heading{
    margin:42px 0 24px;
    color:var(--navy);
    text-align:center;
    font-size:36px;
    font-weight:900;
}

.quote{
    color:var(--blue);
    font-family:Georgia,serif;
    font-size:58px;
    line-height:1;
}

.testimonial-name{
    color:var(--navy);
    font-weight:900;
}

/* =====================================================
   13. Resources and contact
   Resource cards, contact form, map and info lines.
===================================================== */
.resource-row{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:16px 0;
    border-bottom:1px dashed var(--line);
}

.resource-row:last-child{
    border-bottom:0;
}

.resource-row .icon{
    flex:0 0 60px;
    margin:0;
}

.contact-box input,
.contact-box textarea,
.contact-box select{
    width:100%;
    margin-bottom:13px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:none;
    font:inherit;
    color:var(--ink);
    background:#fff;
}

.contact-box input:focus,
.contact-box textarea:focus,
.contact-box select:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(23,105,194,.11);
}

.info-line{
    display:flex;
    gap:13px;
    align-items:flex-start;
    margin:16px 0;
}

.info-line .icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    margin:0;
    font-size:20px;
}

.map-box{
    margin-top:18px;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.email-pill{
    display:inline-block;
    margin:14px 0 0;
    padding:10px 16px;
    border-radius:999px;
    color:var(--blue);
    background:#fff;
    border:1px solid var(--line);
    font-weight:900;
}

.helpline{
    display:inline-block;
    margin-top:16px;
    padding:15px 28px;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--blue));
    font-size:31px;
    font-weight:900;
    box-shadow:var(--shadow-sm);
}

/* =====================================================
   14. Founder content layout
   Founder photo card, content card, values and message.
===================================================== */
.founder-layout{
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(480px,1.28fr);
    gap:34px;
    align-items:start;
}

.founder-photo-card{
    position:relative;
    display:inline-block;   /* IMPORTANT */
    overflow:visible;
    padding:14px;
    border-radius:32px;
    background:linear-gradient(145deg,var(--navy),var(--blue));
    border:1px solid rgba(203,220,243,.95);
    box-shadow:var(--shadow);
    width:auto;
    height:auto;
}

.founder-photo-card img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    object-fit:contain;
    border-radius:24px;
    border:5px solid #fff;
    background:#fff;
    box-shadow:0 14px 36px rgba(8,44,95,.14);
}

.founder-photo-note{
    margin-top:12px;
    color:#fff;
    font-size:18px;
    font-weight:700;
    text-align:center;
}

.founder-content{
    padding:42px;
    border-radius:16px 70px 16px 70px;
}

.founder-content p{
    font-size:18px;
}

.founder-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:22px;
}

.founder-points div{
    padding:15px;
    border-radius:18px;
    background:linear-gradient(180deg,var(--soft),var(--soft-2));
    border:1px solid var(--line);
    color:var(--ink);
}

.founder-points b{
    color:var(--blue);
}

.president-message-layout{
    display:grid;
    grid-template-columns:minmax(420px,1fr) minmax(250px,340px);
    gap:28px;
    align-items:stretch;
}

.founder-message{
    max-width:none;
    margin:0;
    border-left:7px solid var(--orange);
    border-radius:70px 14px 70px 14px;
    text-align:center;
    font-size:20px;
}

.president-photo-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:14px;
    border-radius:32px 12px 32px 12px;
    background:linear-gradient(145deg,var(--blue),var(--orange));
    border:1px solid rgba(203,220,243,.95);
    box-shadow:var(--shadow-sm);
}

.president-photo-card img{
    width:100%;
    height:100%;
    min-height:330px;
    object-fit:cover;
    border-radius:24px 8px 24px 8px;
    border:5px solid #fff;
    background:#fff;
    box-shadow:0 14px 36px rgba(8,44,95,.14);
}

.president-photo-note{
    margin-top:12px;
    color:#fff;
    font-size:17px;
    line-height:1.45;
    font-weight:800;
    text-align:center;
}

.founder-section{
    overflow:hidden;
}

/* =====================================================
   15. Page-wise layout variations
   Different inner layouts for each page body class.
===================================================== */
.page-home .section:first-of-type{
    background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(238,246,255,.92));
}

.page-home .section:first-of-type .grid-4{
    grid-template-columns:1.15fr .85fr 1.15fr .85fr;
    align-items:stretch;
}

.page-home .section:first-of-type .feature{
    min-height:230px;
    border-radius:28px;
    border-left:7px solid var(--orange);
}

.page-home .section:first-of-type .feature:nth-child(2),
.page-home .section:first-of-type .feature:nth-child(3){
    transform:translateY(28px);
    border-left-color:var(--blue);
}

.page-home .stats{
    padding:18px;
    border-radius:30px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.page-about .two-col{
    grid-template-columns:minmax(330px,.82fr) minmax(420px,1.18fr);
    gap:48px;
}

.page-about .two-col > div:first-child{
    position:sticky;
    top:170px;
    align-self:start;
    padding:34px;
    border-radius:40px 10px 40px 10px;
    background:linear-gradient(145deg,var(--navy),var(--blue));
    color:#fff;
    box-shadow:var(--shadow);
}

.page-about .two-col > div:first-child .title,
.page-about .two-col > div:first-child .orange-text,
.page-about .two-col > div:first-child .lead{
    color:#fff;
}

.page-about .timeline{
    counter-reset:aboutStep;
}

.page-about .step{
    counter-increment:aboutStep;
    padding:26px 28px 26px 92px;
    border-radius:16px 42px 16px 42px;
    color: #1769c2;
    font-weight:900;
}

.page-about .step::before{
    content:counter(aboutStep);
    width:44px;
    height:44px;
    left:24px;
    top:24px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    background:linear-gradient(135deg,var(--orange),var(--blue));
    box-shadow:none;
}

.page-about .section.white .grid-4{
    grid-template-columns:repeat(2,1fr);
}

.page-about .section.white .feature{
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.page-programs .section:first-of-type .grid-3{
    grid-template-columns:1fr;
    max-width:1040px;
    margin:auto;
    gap:18px;
}

.page-programs .section:first-of-type .feature{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:22px;
    align-items:center;
    padding:22px 34px 22px 22px;
    border-radius:999px 34px 34px 999px;
}

.page-programs .section:first-of-type .feature:nth-child(even){
    margin-left:80px;
    grid-template-columns:1fr 90px;
    border-radius:34px 999px 999px 34px;
}

.page-programs .section:first-of-type .feature:nth-child(even) .icon{
    order:2;
}

.page-programs .section:first-of-type .feature .icon{
    width:74px;
    height:74px;
    margin:0;
    border-radius:50%;
}

.page-programs .section.white .two-col{
    grid-template-columns:1.25fr .75fr;
    align-items:center;
}

.page-programs .section.white .card{
    border-radius:50px 12px 50px 12px;
}

.page-facilities .section:first-of-type .grid-3{
    grid-template-columns:repeat(6,1fr);
    grid-auto-flow:dense;
}

.page-facilities .section:first-of-type .feature{
    grid-column:span 2;
    min-height:230px;
}

.page-facilities .section:first-of-type .feature:nth-child(1),
.page-facilities .section:first-of-type .feature:nth-child(4){
    grid-column:span 3;
}

.page-facilities .section:first-of-type .feature:nth-child(2){
    grid-row:span 2;
}

.page-facilities .gallery{
    grid-template-columns:1.3fr .7fr .9fr;
    align-items:stretch;
}

.page-facilities .gallery .photo:first-child{
    grid-row:span 2;
    height:auto;
    min-height:600px;
}

.page-facilities .gallery .photo{
    border-radius:12px 42px 12px 42px;
}

.page-gallery .tabs{
    justify-content:flex-start;
}

.page-gallery .gallery{
    columns:3 260px;
    column-gap:24px;
    display:block;
}

.page-gallery .gallery .photo{
    display:inline-block;
    width:100%;
    height:360px;
    margin:0 0 24px;
    border-radius:28px;
}

.page-gallery .gallery .photo:nth-child(3n+2){
    height:460px;
}

.page-gallery .gallery .photo:nth-child(4n){
    height:280px;
}

.page-resources .two-col{
    grid-template-columns:minmax(360px,1.15fr) minmax(290px,.85fr);
    gap:42px;
}

.page-resources .two-col > div:first-child{
    padding:36px;
    border-radius:12px 58px 12px 58px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.page-resources .resource-row{
    padding:20px;
    margin-bottom:15px;
    border-radius:24px;
    background:linear-gradient(90deg,#fff,var(--soft));
    border:1px solid var(--line);
}

.page-resources .poster{
    border-radius:20px;
    outline:10px solid rgba(244,123,32,.08);
    transform:rotate(0deg);
}

.page-team .grid-3{
    grid-template-columns:repeat(4,1fr);
}

.page-team .team-card{
    padding-top:92px;
    text-align:left;
    border-radius:26px;
}

.page-team .team-card .avatar,
.page-team .team-card .photo-avatar{
    position:absolute;
    top:22px;
    left:24px;
    width:82px;
    height:82px;
    margin:0;
    border-radius:22px;
}

.page-team .team-card h3{
    margin-top:16px;
    padding-top:8px;
}

.page-team .team-heading{
    display:inline-block;
    padding:12px 22px;
    border-radius:999px;
    color:#fff;
    text-align:left;
    background:linear-gradient(90deg,var(--navy),var(--blue));
}

.page-testimonials .two-col{
    grid-template-columns:.85fr 1.15fr;
    align-items:center;
}

.page-testimonials .grid-2{
    columns:2 320px;
    column-gap:24px;
    display:block;
}

.page-testimonials .grid-2 .card{
    break-inside:avoid;
    display:inline-block;
    width:100%;
    margin:0 0 24px;
    border-radius:8px 34px 8px 34px;
}

.page-testimonials .quote{
    float:left;
    margin-right:12px;
}

.page-contact .two-col{
    grid-template-columns:minmax(320px,.75fr) minmax(420px,1.25fr);
    align-items:stretch;
}

.page-contact .two-col > div:first-child{
    padding:32px;
    border-radius:36px;
    color:#fff;
    background:linear-gradient(145deg,var(--navy),var(--blue));
    box-shadow:var(--shadow);
}

.page-contact .two-col > div:first-child .title,
.page-contact .two-col > div:first-child .lead{
    color:#fff;
}

.page-contact .info-line{
    padding:16px;
    margin:14px 0;
    border-radius:20px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
}

.page-contact .contact-box{
    border-radius:12px 44px 44px 12px;
}

/* =====================================================
   16. Footer and logo popup
   Bottom credit area and full-size logo preview popup.
===================================================== */
.footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:14px 6.5%;
    color:#fff7ef;
    background:linear-gradient(
        90deg,
        var(--navy),
        var(--blue),
        var(--orange)
    );
}

.footer-left{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:30px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.20);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.footer-right{
    text-align:right;
    line-height:1.7;
}

.footer b{
    color:#bdf3cb;
}

.footer-link{
    color:#fff7ef;
    text-decoration:none;
    font-weight:900;
}

.footer-link:hover{
    text-decoration:underline;
}

@media(max-width:720px){

    .footer{
        flex-direction:column;
        text-align:center;
    }

    .footer-right{
        text-align:center;
    }

}
.logo-popup{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.86);
}

.logo-popup img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
    padding:15px;
    border-radius:28px;
    background:#fff;
}

.close-popup{
    position:absolute;
    top:20px;
    right:30px;
    color:white;
    font-size:35px;
    font-weight:bold;
    cursor:pointer;
}

/* =====================================================
   17. Responsive design
   Tablet, mobile, zoom-in and narrow screen support.
===================================================== */
@media(max-width:1380px){
    .brand-row{
        align-items:flex-start;
    }

    .brand-name b{
        font-size:23px;
    }

    .right-title,
    .plain-right-title{
        min-width:280px;
    }

    .right-title b,
    .plain-right-title b{
        font-size:21px;
    }

    .menu-btn{
        display:inline-flex;
    }

    .nav{
        display:none;
        flex-direction:column;
        align-items:stretch;
        overflow:visible;
        padding:12px 5.5%;
    }

    .nav.show{
        display:flex;
    }

    .nav a{
        width:100%;
        white-space:normal;
    }

    .datebox{
        margin:8px 0 0;
        text-align:center;
        white-space:normal;
    }

    .page-head h1{
        font-size:38px;
    }

    .title,
    .title-orange{
        font-size:30px;
    }
}

@media(min-width:1381px){
    .menu-btn{
        display:none;
    }

    .nav{
        display:flex;
    }
}

@media(max-width:1050px){
    .page-home .section:first-of-type .grid-4,
    .page-about .section.white .grid-4,
    .page-team .grid-3{
        grid-template-columns:repeat(2,1fr);
    }

    .page-facilities .section:first-of-type .grid-3{
        grid-template-columns:repeat(2,1fr);
    }

    .page-facilities .section:first-of-type .feature,
    .page-facilities .section:first-of-type .feature:nth-child(1),
    .page-facilities .section:first-of-type .feature:nth-child(4){
        grid-column:span 1;
    }

    .page-programs .section:first-of-type .feature:nth-child(even){
        margin-left:0;
    }
}

@media(max-width:980px){
    .hero{
        grid-template-columns:1fr;
        text-align:center;
        padding:58px 6%;
    }

    .hero-content{
        margin:auto;
    }

    .hero-content::before{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-btns{
        justify-content:center;
    }

    .hero-slideshow{
        height:420px;
    }

    .grid-4,
    .grid-3,
    .gallery,
    .two-col{
        grid-template-columns:1fr 1fr;
    }

    .stats{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:900px){
    .brand-row{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .brand{
        width:100%;
    }

    .right-title,
    .plain-right-title{
        width:100%;
        max-width:none;
        min-width:0;
        text-align:left;
    }

    .founder-layout{
        grid-template-columns:1fr;
    }

    .founder-photo-card{
        position:relative;
        top:0;
    }

    .founder-photo-card img{
        height:auto;
        max-height:560px;
    }

    .president-message-layout{
        grid-template-columns:1fr;
    }

    .president-photo-card{
        max-width:420px;
        width:100%;
        margin:auto;
    }

    .president-photo-card img{
        min-height:auto;
        max-height:520px;
    }

}

@media(max-width:720px){
    .page-home .section:first-of-type .grid-4,
    .page-about .two-col,
    .page-about .section.white .grid-4,
    .page-programs .section.white .two-col,
    .page-resources .two-col,
    .page-team .grid-3,
    .page-testimonials .two-col,
    .page-contact .two-col,
    .page-founder .founder-layout,
    .page-facilities .gallery{
        grid-template-columns:1fr;
    }

    .page-programs .section:first-of-type .feature,
    .page-programs .section:first-of-type .feature:nth-child(even){
        grid-template-columns:1fr;
        border-radius:26px;
        padding:24px;
    }

    .page-programs .section:first-of-type .feature:nth-child(even) .icon{
        order:0;
    }

    .page-home .section:first-of-type .feature:nth-child(2),
    .page-home .section:first-of-type .feature:nth-child(3){
        transform:none;
    }

    .page-facilities .section:first-of-type .grid-3{
        grid-template-columns:1fr;
    }

    .page-facilities .gallery .photo:first-child{
        min-height:330px;
    }

    .page-team .team-card{
        padding-top:28px;
        text-align:center;
    }

    .page-team .team-card .avatar,
    .page-team .team-card .photo-avatar{
        position:static;
        width:126px;
        height:126px;
        margin:0 auto 16px;
        border-radius:50%;
    }
}

@media(max-width:620px){
    body{
        font-size:16px;
    }

    .top-strip{
        font-size:10px;
    }

    .brand{
        align-items:flex-start;
        gap:12px;
    }

    .logo-mark{
        width:64px;
        height:64px;
        min-width:64px;
    }

    .brand-name{
        overflow-x:auto;
    }

    .brand-name b{
        font-size:18px;
    }

    .brand-name small{
        font-size:11px;
    }

    .right-title b,
    .plain-right-title b{
        font-size:18px;
        white-space:normal;
    }

    .right-title small,
    .plain-right-title small{
        font-size:12px;
    }

    .hero{
        min-height:560px;
        padding:48px 5%;
    }

    .hero::after{
        display:none;
    }

    #typing-text,
    .hero h1{
        font-size:32px;
        min-height:78px;
        overflow-x:auto;
    }

    .hero h2{
        font-size:18px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-slideshow{
        height:310px;
        border-width:7px;
        border-radius:28px 28px 28px 10px;
    }

    .page-head{
        padding:52px 5%;
    }

    .page-head h1{
        font-size:30px;
    }

    .page-head::after{
        font-size:46px;
    }

    .founder-hero{
        min-height:360px;
        padding:52px 5%;
    }

    .founder-hero h1{
        font-size:44px;
    }

    .founder-hero p{
        font-size:16px;
    }

    .section{
        padding:38px 5%;
    }

    .title,
    .title-orange{
        font-size:26px;
    }

    .grid-4,
    .grid-3,
    .grid-2,
    .gallery,
    .two-col,
    .stats{
        grid-template-columns:1fr;
    }

    .card{
        padding:23px;
    }

    .poster{
        padding:24px;
    }

    .poster h2{
        font-size:24px;
    }

    .helpline{
        font-size:22px;
        padding:12px 18px;
    }
}


.protection-badge{
  display:inline-block;
  margin-top:12px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:30px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
}
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

input, textarea, [contenteditable="true"]{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

/* =====================================================
   CCTV PAGE ADDON
   Added separately so existing website UI/UX remains untouched.
===================================================== */
.cctv-live-box{
    margin-top:28px;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(8,44,95,.14);
    box-shadow:var(--shadow-sm);
    background:linear-gradient(135deg,#ffffff,#eef6ff);
}

.cctv-live-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:16px 20px;
    color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--blue),var(--orange));
    font-weight:900;
}

.cctv-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    font-size:12px;
    white-space:nowrap;
}

.cctv-status::before{
    content:'';
    width:9px;
    height:9px;
    border-radius:50%;
    background:#32ff7e;
    box-shadow:0 0 12px rgba(50,255,126,.8);
}

.cctv-frame-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#08172e;
}

.cctv-frame-wrap iframe,
.cctv-frame-wrap video,
.cctv-frame-wrap img{
    width:100%;
    height:100%;
    display:block;
    border:0;
    object-fit:cover;
}

.cctv-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    padding:28px;
    text-align:center;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(8,44,95,.90),rgba(15,76,145,.72)),
        url('assets/images/cctv.svg') center/160px no-repeat;
}

.cctv-placeholder b{
    font-size:28px;
    line-height:1.2;
}

.cctv-code-note{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    color:var(--navy);
    background:linear-gradient(90deg,rgba(215,233,255,.75),rgba(255,177,74,.16));
    border:1px solid rgba(244,123,32,.20);
    font-weight:800;
}

.cctv-code-note code{
    color:var(--orange);
    font-weight:900;
}

.cctv-mini-grid{
    margin-top:26px;
}

.cctv-mini-card{
    min-height:185px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
}

.cctv-mini-card .icon{
    margin-bottom:4px;
}

@media(max-width:720px){
    .cctv-live-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .cctv-placeholder b{
        font-size:22px;
    }
}


/* =====================================================
   RESPONSIVE + SCROLL ADDON
   Existing UI, colour and content remain same; only behaviour is improved.
===================================================== */
.topbar{
    transition:transform .34s ease, box-shadow .34s ease;
}

.topbar.hide-on-scroll{
    transform:translateY(-100%);
}

.scroll-top-btn{
    position:fixed;
    right:22px;
    bottom:24px;
    z-index:1200;
    width:50px;
    height:50px;
    border:0;
    border-radius:50%;
    color:#fff;
    font-size:28px;
    line-height:1;
    font-weight:900;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.28s ease;
    background:linear-gradient(135deg,var(--blue),var(--orange));
    box-shadow:0 14px 34px rgba(8,44,95,.24);
}

.scroll-top-btn.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top-btn:hover{
    transform:translateY(-4px);
}

.cctv-placeholder b{
    font-size:clamp(32px,5vw,72px);
    line-height:1.08;
    max-width:1000px;
    text-shadow:0 10px 28px rgba(0,0,0,.35);
}

@media(max-width:1380px){
    .menu-btn{
        display:inline-flex;
    }

    .nav{
        display:none;
        flex-direction:column;
        align-items:stretch;
        overflow:visible;
        padding:12px 5.5%;
    }

    .nav.show{
        display:flex;
    }

    .nav a{
        width:100%;
        white-space:normal;
    }

    .datebox{
        margin:8px 0 0;
        text-align:center;
        white-space:normal;
    }
}

@media(min-width:1381px){
    .menu-btn{
        display:none;
    }

    .nav{
        display:flex;
        flex-wrap:nowrap;
    }
}

@media(max-width:900px){
    .brand-row{
        gap:18px;
    }

    .brand-name b{
        white-space:normal;
    }
}

@media(max-width:480px){
    body{
        font-size:16px;
    }

    .scroll-top-btn{
        right:15px;
        bottom:16px;
        width:44px;
        height:44px;
        font-size:24px;
    }

    .cctv-placeholder{
        padding:18px;
    }
}

@media(min-width:1800px){
    .brand-row,
    .nav,
    .hero,
    .section,
    .page-head,
    .footer{
        padding-left:8%;
        padding-right:8%;
    }

    .hero{
        min-height:760px;
    }
}