/* ================= COMMON ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#fff;
    top:0 !important;
}

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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:85px;
    background:#fff;
    z-index:9999;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.nav-container{
    max-width:1320px;
    height:100%;
    margin:auto;
    padding:0 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ================= LOGO ================= */

.logo{
    display:flex;
    align-items:center;
    margin-left:30px;
}

.logo-img{
    width:240px;
    transition:0.3s;
}

.logo-img:hover{
    transform:scale(1.03);
}

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

.nav ul{
    display:flex;
    align-items:center;
    gap:25px;
    list-style:none;
}

.nav ul li{
    position:relative;
}

.nav ul li a{
    text-decoration:none;
    color:#222;
    font-size:15px;
    font-weight:600;
    transition:0.3s;
    padding:10px 14px;
    border-radius:8px;
}

.nav ul li a:hover,
.nav ul li a.active{
    background:#f3f5ff;
    color:#0b3c5d;
}

/* ================= DROPDOWN ================= */

.dropdown-menu{
    position:absolute;
    top:120%;
    left:0;
    min-width:220px;
    background:#fff;
    border-radius:14px;
    padding:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.3s;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu li{
    margin-bottom:8px;
}

.dropdown-menu li a{
    display:block;
    background:#f7f8fc;
}

/* ================= MEGA MENU ================= */

.mega-menu{
    position:absolute;
    top:115%;
    left:50%;
    transform:translateX(-50%) translateY(20px);

    width:1050px;
    padding:35px;

    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(14px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,0.4);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.12),
        0 5px 20px rgba(0,0,0,0.06);

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;

    opacity:0;
    visibility:hidden;

    transition:all 0.35s ease;
    z-index:999;
}

/* SHOW MENU */
.mega-dropdown:hover .mega-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

/* ================= COLUMN ================= */

.mega-column{
    position:relative;

    background:linear-gradient(145deg,#ffffff,#f5f9ff);

    padding:22px 18px;

    border-radius:18px;

    overflow:hidden;

    transition:0.35s ease;

    border:1px solid #edf2f7;
}

/* TOP BORDER EFFECT */
.mega-column::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #0b3c5d,
        #d32f2f,
        #ff9800
    );
}

/* HOVER EFFECT */
.mega-column:hover{
    transform:translateY(-6px);

    box-shadow:
        0 15px 30px rgba(11,60,93,0.12);

    background:#fff;
}

/* ================= CATEGORY TITLE ================= */

.mega-column h4{
    position:relative;

    font-size:17px;
    font-weight:700;

    color:#0b3c5d;

    margin-bottom:18px;

    padding-bottom:10px;
}

/* TITLE UNDERLINE */
.mega-column h4::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;

    width:45px;
    height:3px;

    background:#d32f2f;
    border-radius:20px;
}

/* ================= LINKS ================= */

.mega-column a{
    display:flex;
    align-items:center;

    position:relative;

    text-decoration:none;

    color:#444;

    font-size:14px;
    font-weight:500;

    padding:11px 14px;

    margin-bottom:8px;

    border-radius:12px;

    transition:all 0.3s ease;

    overflow:hidden;
}

/* ICON */
.mega-column a::before{
    content:'➜';

    margin-right:10px;

    color:#d32f2f;

    font-size:12px;

    transition:0.3s;
}

/* HOVER */
.mega-column a:hover{
    background:linear-gradient(
        135deg,
        #0b3c5d,
        #145c8c
    );

    color:#fff;

    transform:translateX(5px);
}

/* HOVER ICON */
.mega-column a:hover::before{
    color:#fff;
}

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

@media(max-width:1100px){

    .mega-menu{
        width:95%;
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .mega-menu{
        position:static;
        transform:none !important;

        width:100%;

        padding:15px;

        display:none;

        opacity:1;
        visibility:visible;

        box-shadow:none;

        grid-template-columns:1fr;

        background:#fff;
    }

    .mega-dropdown.active .mega-menu{
        display:grid;
    }

    .mega-column{
        padding:16px;
    }

    .mega-column a{
        padding:10px 12px;
    }
}

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

.nav-right{
    display:flex;
    align-items:center;
    gap:16px;
}

/* ================= DONATE BUTTON ================= */

.donate-btn{
    background:linear-gradient(135deg,#d32f2f,#ff6b6b);
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    transition:0.3s;
    box-shadow:0 10px 25px rgba(211,47,47,0.25);
}

.donate-btn:hover{
    transform:translateY(-3px);
}

.donate-btn i{
    background:#fff;
    color:#d32f2f;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}

/* ================= LANGUAGE ================= */

.lang-wrapper{
    position:relative;
}

.lang-icon{
    width:45px;
    height:45px;
    background:#f3f5ff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.3s;
    font-size:18px;
    color:#0b3c5d;
}

.lang-icon:hover{
    background:#0b3c5d;
    color:#fff;
}

#google_translate_box{
    position:absolute;
    top:60px;
    right:0;
    width:220px;
    background:#fff;
    border-radius:14px;
    padding:18px;
    box-shadow:0 10px 35px rgba(0,0,0,0.15);
    display:none;
    z-index:99999;
}

.lang-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
    color:#0b3c5d;
}

/* GOOGLE TRANSLATE */

.goog-te-banner-frame.skiptranslate{
    display:none !important;
}

.goog-logo-link{
    display:none !important;
}

.goog-te-gadget{
    color:transparent !important;
    font-size:0px !important;
}

.goog-te-combo{
    width:100%;
    padding:10px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
}

/* ================= SOCIAL BAR ================= */

.social-bar-right{
    position:fixed;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:999;
}

.social-bar-right a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    transition:0.3s;
}

.social-bar-right a:hover{
    transform:scale(1.1);
}

.facebook{
    background:#1877f2;
}

.instagram{
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);
}

.linkedin{
    background:#0077b5;
}

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

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.menu-toggle span{
    width:26px;
    height:3px;
    background:#d32f2f;
    border-radius:3px;
}

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

@media(max-width:992px){

    .menu-toggle{
        display:flex;
    }

    .nav{
        position:fixed;
        top:85px;
        left:-100%;
        width:100%;
        height:calc(100vh - 85px);
        background:#fff;
        transition:0.3s;
        overflow-y:auto;
        padding:25px;
    }

    .nav.active{
        left:0;
    }

    .nav ul{
        flex-direction:column;
        align-items:flex-start;
    }

    .dropdown-menu,
    .mega-menu{
        position:static;
        width:100%;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        margin-top:10px;
    }

    .mega-menu{
        grid-template-columns:1fr;
        padding:15px;
    }

    .dropdown.active .dropdown-menu,
    .mega-dropdown.active .mega-menu{
        display:block;
    }

    .logo-img{
        width:190px;
    }

    .social-bar-right{
        display:none;
    }
}

/* ================= SLIDER ================= */
.slider{
    position:relative;
    width:100%;
    height:calc(100vh - 92px);
    margin-top:92px;
    overflow:hidden;
    background:#000;
}

/* ================= SLIDE ================= */
.slide{
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:0;
    transition:opacity 1.2s ease;
}

/* ACTIVE */
.slide.active{
    opacity:1;
    z-index:1;
}

/* ================= VIDEO ================= */
.video-slide video{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* ================= OVERLAY ================= */
.slider::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:2;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .slide{
        background-size:cover;
    }

    .video-slide video{
        object-fit:cover;
    }
}


/* ================= SECTIONS ================= */
section {
    padding: 90px 40px;
    max-width: 1300px; /* content ज्यादा फैलने से रोकने के लिए */
    margin: 0 auto;    /* horizontally center */
    box-sizing: border-box;
}

/* Responsive improvements (optional) */
@media (max-width: 768px) {
    .slider {
        height: 60vh;
    }
    section {
        padding: 60px 20px;
    }
}


/* ================= SECTION TITLE ================= */
.section-title {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.section-title h1 {
    color: var(--red);
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 10px;
}

.section-title h2 {
    color: var(--dark);
    font-weight: 600;
    font-size: 2rem;
    opacity: 0.85;
}
/* ================= Gallery ================= */
/.home-gallery-section{
    padding:60px 20px;
    background:#f7f9fc;
    text-align:center;
}

.gallery{
    max-width:1200px;
    margin:30px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.gallery img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.gallery img:hover{
    transform:scale(1.05);
}

.view-all{
    margin-top:25px;
}

.view-all a{
    text-decoration:none;
    padding:10px 20px;
    background:#1976d2;
    color:#fff;
    border-radius:5px;
}

/* Lightbox */
.lightbox{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.lightbox img{
    max-width:85%;
    max-height:85%;
    border-radius:8px;
}
.lightbox span{
    position:absolute;
    color:#fff;
    font-size:35px;
    cursor:pointer;
    user-select:none;
}
.lightbox .close{top:20px;right:40px;}
.lightbox .prev{left:30px;}
.lightbox .next{right:30px;}

/* ================= GALLERY SECTION ================= */
.gallery-section {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 20px;
}

/* Section Title */
.gallery-section .section-title h2 {
    font-size: 16px;
    color: #d32f2f;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.gallery-section .section-title h1 {
    font-size: 36px;
    color: #0b3c5d;
    margin-top: 8px;
    font-weight: 700;
}

/* ================= DEPARTMENT IMAGES ================= */
.department-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.department-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 200px; /* uniform height */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.department-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop without stretching */
    transition: transform 0.4s ease;
}

.department-image:hover img {
    transform: scale(1.1);
}

.department-image span {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    background: rgba(0,0,0,0.5);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
}

/* ================= GENERAL GALLERY GRID ================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 60px;
}

.gallery-item {
    width: 100%;
    padding-top: 70%; /* maintain aspect ratio (like 7:10) */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures images fit nicely */
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .department-image {
        height: 150px;
    }

    .gallery-item {
        padding-top: 60%;
    }

    .gallery-section .section-title h1 {
        font-size: 28px;
    }
}

/* ================= BLOG ================= */
.blog-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}
.blog-card{
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:.3s;
}
.blog-card:hover{
    transform:translateY(-6px);
}
.blog-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}
.blog-content{
    padding:25px;
}
.blog-content h3{
    color:var(--dark);
}
.blog-content a{
    color:var(--brand);
    font-weight:600;
}
/* ================= VIDEO GALLERY ================= */
.video-gallery-section {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 20px;
}

/* Section Title */
.video-gallery-section .section-title h2 {
    font-size: 16px;
    color: #d32f2f;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.video-gallery-section .section-title h1 {
    font-size: 36px;
    color: #0b3c5d;
    margin-top: 8px;
    font-weight: 700;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

/* Video Items */
.video-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item video {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
}

.video-item span {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    color: #0b3c5d;
}

/* Hover Effect */
.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Responsive */
@media(max-width:768px){
    .video-item video {
        height: 180px;
    }

    .video-gallery-section .section-title h1 {
        font-size: 28px;
    }
}


/* ================= DEPARTMENT PAGE ================= */
.dept-page {
    font-family: 'Poppins', sans-serif;
    background: #f8f9fb;
    color: #333;
}

/* ================= HERO SECTION ================= */
.dept-hero {
    position: relative;
    height: 65vh;
    overflow: hidden;
}

.dept-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.dept-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.dept-overlay h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.dept-overlay p {
    font-size: 18px;
    opacity: 0.95;
    max-width: 650px;
    line-height: 1.6;
}

/* ================= ABOUT ================= */
.dept-about {
    max-width: 1100px;
    margin: 70px auto;
    padding: 0 20px;
    text-align: center;
}

.dept-about h2 {
    font-size: 32px;
    color: #d32f2f;
    margin-bottom: 18px;
    font-weight: 700;
}

.dept-about p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* ================= SECTION TITLE ================= */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 16px;
    color: #d32f2f; /* subtle red accent */
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.section-title h1 {
    font-size: 36px;
    color: #0b3c5d;
    margin-top: 8px;
    font-weight: 700;
}

/* ================= BENEFITS ================= */
.dept-benefits {
    background: #f7f9fc;
    padding: 80px 20px;
}

.benefit-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.benefit-card i {
    font-size: 42px;
    color: #0b3c5d;
    margin-bottom: 18px;
    transition: color 0.3s ease;
}

.benefit-card:hover i {
    color: #d32f2f; /* subtle red on hover */
}

.benefit-card h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #0b3c5d;
    font-weight: 600;
}

.benefit-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* ================= DOCTORS ================= */
.dept-doctors {
    padding: 80px 20px;
}

.doctor-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.doctor-card {
    background: #fff;
    border-radius: 16px;
    text-align: center;
    padding: 30px 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}

.doctor-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.doctor-card img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 4px solid #d32f2f; /* red branding border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doctor-card:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.doctor-card h4 {
    font-size: 18px;
    color: #0b3c5d;
    margin-bottom: 5px;
    font-weight: 600;
}

.doctor-card span {
    font-size: 14px;
    color: #d32f2f; /* red branding */
    font-weight: 500;
}

.doctor-card p {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
}

/* ================= HEADING ================= */
h1 {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #d32f2f;
    margin: 60px 15px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================= TRUSTEE GRID ================= */
.trustee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
    padding: 20px 40px 60px;
}

/* ================= TRUSTEE CARD ================= */
.trustee-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

/* ===== Animated Gradient Border ===== */
.trustee-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2.5px;
    border-radius: 16px;
    background: linear-gradient(
        270deg,
        #0a6ebd,
        #d32f2f,
        #ff9800,
        #0a6ebd
    );
    background-size: 600% 600%;
    animation: borderMove 6s ease infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes borderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Hover Effect ===== */
.trustee-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 22px 45px rgba(10,110,189,0.35);
}

/* ================= TRUSTEE IMAGE ================= */
.trustee-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #0a6ebd, #d32f2f, #ff9800) border-box;
    margin-bottom: 15px;
}

/* ================= TRUSTEE TEXT ================= */
.trustee-card h3 {
    font-size: 18px;
    color: #222;
    margin: 10px 0 6px;
    font-weight: 700;
}

.trustee-card p {
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #0a6ebd, #d32f2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

/* ================= PROFILE MODAL ================= */
.profile-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
}

/* ================= PROFILE CONTENT ================= */
.profile-content {
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
    max-width: 520px;
    margin: 80px auto;
    padding: 35px 30px;
    border-radius: 18px;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    animation: zoomIn 0.35s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.75);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ================= CLOSE BUTTON ================= */
.profile-content .close {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #444;
    transition: color 0.3s ease;
}

.profile-content .close:hover {
    color: #e60000;
}

/* ================= PROFILE IMAGE ================= */
.profile-content img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #0a6ebd, #d32f2f, #ff9800) border-box;
    margin-bottom: 18px;
}

/* ================= PROFILE TEXT ================= */
.profile-content h2 {
    font-size: 22px;
    margin: 12px 0 6px;
    color: #222;
}

.profile-content h4 {
    font-size: 16px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #0a6ebd, #d32f2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-content p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 600px) {
    h1 {
        font-size: 26px;
    }

    .trustee-grid {
        padding: 15px;
    }

    .profile-content {
        margin: 40px 15px;
        padding: 25px 20px;
    }
}
/* ===============================
   Aashirvachan Page Styles
   =============================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #f8f9fb;
    color: #333;
}

/* Section */
.aashirvachan-section {
    padding: 90px 20px;
    background: linear-gradient(to bottom, #ffffff, #f1f5f9);
}

.container {
    max-width: 1200px;
    margin: auto;
}

/* Section Title */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 18px;
    color: #e67e22;
    margin-bottom: 10px;
}

.section-title h1 {
    font-size: 42px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.section-title p {
    font-size: 16px;
    color: #64748b;
    max-width: 600px;
    margin: auto;
}

/* Grid */
.aashirvachan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

/* Card */
.aashirvachan-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aashirvachan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.12);
}

/* Photo */
.aashirvachan-card .photo {
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.aashirvachan-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.aashirvachan-card:hover .photo img {
    transform: scale(1.08);
}

/* Content */
.aashirvachan-card .content {
    padding: 25px;
    text-align: center;
}

.aashirvachan-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 5px;
}

.aashirvachan-card span {
    display: block;
    font-size: 14px;
    color: #e67e22;
    margin-bottom: 15px;
    font-weight: 500;
}

.aashirvachan-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    position: relative;
}

/* Quote styling */
.aashirvachan-card p::before {
    content: "“";
    font-size: 40px;
    color: #e67e22;
    position: absolute;
    left: -10px;
    top: -15px;
    opacity: 0.3;
}

.aashirvachan-card p::after {
    content: "”";
    font-size: 40px;
    color: #e67e22;
    position: absolute;
    right: -10px;
    bottom: -20px;
    opacity: 0.3;
}

/* Responsive */
@media (max-width: 768px) {
    .section-title h1 {
        font-size: 32px;
    }

    .aashirvachan-card .photo {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .section-title h1 {
        font-size: 28px;
    }

    .aashirvachan-section {
        padding: 60px 15px;
    }
}

/* ================= FOOTER ================= */
.site-footer {
    background: #0b3c5d; /* Dark Blue */
    color: #ffffff;
    padding: 80px 20px 40px; /* increased top padding for spacious look */
    margin-top: 80px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Footer Grid */
.footer-container {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

/* Footer Boxes */
.footer-box h3 {
    font-size: 20px;
    margin-bottom: 18px;
    font-weight: 600;
    position: relative;
    color: #d32f2f; /* subtle red for headings */
}

.footer-box h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #d32f2f; /* red accent underline */
    margin-top: 6px;
    border-radius: 2px;
}

/* Footer Text */
.footer-box p,
.footer-box ul li {
    color: #e0e0e0;
    font-size: 15px;
    margin-bottom: 10px;
}

/* Footer Links */
.footer-box a {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-box a:hover {
    color: #d32f2f; /* red accent on hover */
    transform: translateY(-2px);
}

/* Footer List Items */
.footer-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-box ul li {
    margin-bottom: 8px;
}

/* Footer Bottom */
.footer-bottom {
    margin-top: 50px;
    padding: 20px;
    background: #fff; /* darker shade for bottom bar */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px;
    color: #dd2a7b;
}

/* Social Icons in Footer */
.footer-box .social-icons {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.footer-box .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #d32f2f; /* red circular background */
    color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
}

.footer-box .social-icons a:hover {
    background: #ffffff;
    color: #0b3c5d; /* invert colors on hover */
    transform: translateY(-3px);
}

/* Responsive Footer */
@media(max-width:768px){
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}