/* ==================================================
   Skill India Rojgar Foundation – FINAL CLEAN CSS
================================================== */

/* ========== RESET ========== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --blue:#004E89;
    --orange:#FF6B35;
    --green:#2D6A4F;
    --dark:#1a1a1a;
    --gray:#666;
    --light:#f6f7fb;
    --white:#fff;
    --shadow:0 6px 20px rgba(0,0,0,.12);
}

body{
    font-family:Segoe UI,system-ui,sans-serif;
    color:var(--dark);
    background:#fff;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

/* ========== CONTAINER ========== */
.container{
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}

/* ==================================================
   HEADER
================================================== */
.main-header{
    position:sticky;
    top:0;
    z-index:9999;
    background:linear-gradient(90deg,#002b5b,#004e89);
}

.header-container{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    position:relative;
}

.logo{
    width:130px;
    height:auto;
}

.site-title h1{
    font-size:14px;
    color:#fff;
    line-height:1.2;
}

.site-title .tagline{
    font-size:10px;
    color:#ffd700;
}

/* MOBILE MENU BUTTON */
.menu-toggle{
    margin-left:auto;
    width:36px;
    height:36px;
    border:2px solid #fff;
    background:none;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    cursor:pointer;
}

.menu-toggle span{
    width:20px;
    height:2px;
    background:#fff;
}

/* NAV */
.main-nav{
    max-height:0;
    overflow:hidden;
    background:#003b73;
    transition:max-height .4s ease;
}

.main-nav.active{
    max-height:500px;
}

.nav-menu{
    list-style:none;
}

.nav-menu a{
    display:block;
    padding:12px 18px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.nav-menu a:hover,
.nav-menu a.active{
    background:rgba(255,107,53,.25);
}

/* ==================================================
   HERO SECTION
================================================== */
.hero-section{
    position:relative;
    height:380px;
    overflow:hidden;
}

.hero-slider,
.slide{
    height:100%;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .7s ease;
}

.slide.active{
    opacity:1;
}

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

.slide-text{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    padding:20px;
    text-shadow:0 3px 12px rgba(0,0,0,.45);
}

.slide-text h2{
    font-size:22px;
}

.slide-text p{
    font-size:14px;
    margin-top:8px;
}

/* HERO CONTROLS */
.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.35);
    color:#fff;
    cursor:pointer;
}

.slider-btn.prev{ left:10px; }
.slider-btn.next{ right:10px; }

.slider-dots{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
}

.dot{
    width:10px;
    height:10px;
    background:#ffffff99;
    border-radius:20px;
}

.dot.active{
    width:28px;
    background:#fff;
}


/* ==================================================
   MEMBERS / LEADERS – FINAL UPDATED
================================================== */

.leaders-section{
    padding:50px 0;
}

/* HEADER (TITLE + DESCRIPTION SAFE) */
.leaders-section .section-header{
    text-align:center;
    margin-bottom:25px;
}

.leaders-section .section-header h2{
    font-size:26px;
    color:#004E89;
    margin-bottom:6px;
}

.leaders-section .section-header p{
    font-size:14px;
    color:#555;
}

/* SLIDER CONTAINER */
.leaders-slider-container{
    position:relative;
    overflow:hidden;
}

/* SLIDER */
.leaders-slider{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.leaders-slider::-webkit-scrollbar{
    display:none;
}

/* CARD */
.leader-card{
    flex:0 0 260px;          /* desktop size */
    max-width:260px;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:transform .3s ease;
}

.leader-card:hover{
    transform:translateY(-6px);
}

/* IMAGE */
.leader-image{
    height:300px;
    background:#f2f2f2;
}

.leader-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
}

/* CONTENT */
.leader-content{
    padding:14px;
    text-align:center;
}

.leader-content h3{
    font-size:16px;
    font-weight:600;
    margin-bottom:4px;
}

.leader-position{
    font-size:13px;
    font-weight:600;
    color:#004E89;
    margin-bottom:6px;
}

.leader-description{
    font-size:13px;
    color:#555;
    line-height:1.5;
}

/* CONTACT ICONS */
.leader-contact{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:8px;
}

.leader-contact a{
    width:34px;
    height:34px;
    background:#004E89;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

/* SLIDER BUTTONS */
.leader-slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#004E89;
    color:#fff;
    cursor:pointer;
    z-index:10;
}

.leader-slider-btn.prev{ left:-10px; }
.leader-slider-btn.next{ right:-10px; }

/* ================= MOBILE FIX ================= */
@media(max-width:768px){

    .leaders-slider{
        scroll-snap-type:x mandatory;
    }

    .leader-card{
        flex:0 0 100%;      /* 🔥 ONE CARD AT A TIME */
        max-width:100%;
        scroll-snap-align:center;
    }

    .leader-image{
        height:320px;
    }

    .leader-slider-btn{
        display:none;       /* swipe only on mobile */
    }
}

/* ==================================================
   GALLERY
================================================== */
.gallery-section{
    padding:50px 0;
    background:var(--light);
}

.gallery-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
}

.gallery-item{
    height:220px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

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

/* ==================================================
   VISION & ABOUT
================================================== */
.vision-section,
.about-section{
    padding:50px 0;
}

.vision-section{
    background:#fff;
}

.about-section{
    background:var(--light);
}

.vision-section h2,
.about-section h2{
    text-align:center;
    color:var(--blue);
    margin-bottom:15px;
}

/* ==================================================
   DESKTOP
================================================== */
@media(min-width:992px){

    .header-container{
        padding:12px 30px;
    }

    .menu-toggle{ display:none; }

    .main-nav{
        max-height:none;
        background:none;
    }

    .nav-menu{
        display:flex;
        justify-content:center;
    }

    .nav-menu a{
        border:none;
        padding:10px 14px;
    }

    .hero-section{ height:560px; }

    .slide-text h2{ font-size:40px; }
    .slide-text p{ font-size:18px; }

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

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

/* SMOOTH SCROLL */
html{ scroll-behavior:smooth; }
/* =====================================
   PRODUCTS UI POLISH – GAP & HEADING FIX
===================================== */

/* Reduce overall vertical gap */
.products-section{
    padding:40px 0 45px;
}

/* SECTION HEADING */
.products-section .section-header{
    text-align:left;
    max-width:1000px;
    margin:0 auto 20px;
}

.products-section .section-header h2{
    font-size:28px;
    font-weight:700;
    color:#004E89;            /* 🔥 header blue */
    margin-bottom:6px;
    letter-spacing:.4px;
}

.products-section .section-header p{
    font-size:14px;
    color:#555;
    margin:0;
}

/* GRID GAP FIX */
.products-grid{
    max-width:900px;      /* removes empty right space */
}


/* ===============================
   PRODUCT IMAGE – FINAL SAFE FIX
================================ */

.product-card{
    max-width:420px;      /* 🔥 card controls size */
    width:100%;
}

.product-image{
    width:100%;           /* 🔥 NEVER FIXED WIDTH */
    height:320px;         /* 🔥 balanced height */
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* TITLE */
.product-content h3{
    font-size:15px;
    color:#003B73;            /* darker blue */
}

/* LINK */
.product-btn{
    font-size:13px;
    color:#004E89;
}
/* =====================================
   FORCE PRODUCTS CENTER ALIGN (1–2 ITEMS)
===================================== */

/* Center section header */
.products-section .section-header{
    text-align:center !important;
}

/* Force grid center */
.products-grid{
    justify-content:center !important;
    justify-items:center !important;
}

/* Center each card content */
.product-card{
    text-align:center;
}
/* =====================================
   PRODUCTS GRID – FORCE 2 COLUMN LAYOUT
===================================== */

/* DESKTOP & TABLET */
.products-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr); /* 🔥 2 products in one row */
    gap:40px;                              /* balanced gap */
    max-width:900px;
    margin:0 auto;
    justify-items:center;
}

/* PRODUCT CARD */
.product-card{
    width:100%;
    max-width:420px;
    text-align:center;
}

.product-image{
    width:100%;
    height:300px;         /* card height fix */
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;     /* clean crop */
}


/* MOBILE – SINGLE COLUMN */
@media(max-width:768px){
    .products-grid{
        grid-template-columns:1fr;   /* 🔥 mobile stack */
        gap:25px;
        max-width:420px;
    }

    .product-image{
        height:260px;
    }
}
/* ==================================================
   MEMBERS / LEADERS – FINAL CSS (HTML MATCHED)
================================================== */

.leaders-section{
    padding:50px 0;
    background:#f7f9fc;
}

/* SECTION HEADER */
.leaders-section .section-header{
    text-align:center;
    margin-bottom:25px;
}

.leaders-section .section-header h2{
    font-size:26px;
    font-weight:700;
    color:#004E89;
    margin-bottom:6px;
}

.leaders-section .section-header p{
    font-size:14px;
    color:#555;
    margin:0;
}

/* SLIDER CONTAINER */
.leaders-slider-container{
    position:relative;
    max-width:1100px;
    margin:0 auto;
    overflow:hidden;
}

/* SLIDER */
.leaders-slider{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:10px 0;
}

.leaders-slider::-webkit-scrollbar{
    display:none;
}

/* CARD */
.leader-card{
    flex:0 0 260px;          /* desktop width */
    max-width:260px;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    text-align:center;
    transition:transform .3s ease;
}

.leader-card:hover{
    transform:translateY(-6px);
}

/* IMAGE */
.leader-card img{
    width:100%;
    height:300px;
    object-fit:cover;
    object-position:top center;
    display:block;
}

/* NAME */
.leader-card h4{
    font-size:15px;
    font-weight:600;
    padding:12px;
    margin:0;
    color:#111;
}

/* SLIDER BUTTONS (DESKTOP) */
.leader-slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#004E89;
    color:#fff;
    cursor:pointer;
    z-index:10;
}

.leader-slider-btn.prev{ left:-10px; }
.leader-slider-btn.next{ right:-10px; }

/* ================= MOBILE – ONE CARD ONLY ================= */
@media(max-width:768px){

    .leaders-slider{
        scroll-snap-type:x mandatory;
    }

    .leader-card{
        flex:0 0 100%;      /* 🔥 ONE CARD AT A TIME */
        max-width:100%;
        scroll-snap-align:center;
    }

    .leader-card img{
        height:320px;
    }

    .leader-slider-btn{
        display:none;       /* swipe only on mobile */
    }
}
/* =====================================
   VISION SECTION
===================================== */
.vision-section{
    padding:50px 0;
    background:#ffffff;
}

.vision-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:20px;
}

.vision-card{
    background:#f5f8fc;
    padding:22px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.vision-card h3{
    font-size:18px;
    color:#004E89;
    margin-bottom:10px;
}

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


/* =====================================
   ABOUT SECTION
===================================== */
.about-section{
    padding:50px 0;
    background:#f7f9fc;
}

.about-content{
    max-width:900px;
    margin:0 auto;
}

.about-text p{
    font-size:15px;
    color:#444;
    line-height:1.8;
    margin-bottom:15px;
    text-align:justify;
}

.about-points{
    margin-top:15px;
    padding-left:18px;
}

.about-points li{
    font-size:14px;
    color:#004E89;
    margin-bottom:8px;
    list-style:disc;
}


/* =====================================
   FOOTER
===================================== */
.footer{
    background:#003B73;
    color:#ffffff;
    padding:40px 0 15px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-bottom:20px;
}

.footer-box h3{
    font-size:17px;
    margin-bottom:12px;
    color:#FFD700;
}

.footer-box p{
    font-size:14px;
    line-height:1.7;
    color:#e6e6e6;
}

.footer-box ul{
    list-style:none;
    padding:0;
}

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

.footer-box ul li a{
    color:#ffffff;
    text-decoration:none;
    font-size:14px;
}

.footer-box ul li a:hover{
    text-decoration:underline;
}

.footer-bottom{
    text-align:center;
    font-size:13px;
    color:#d0d0d0;
    border-top:1px solid rgba(255,255,255,.2);
    padding-top:12px;
}


/* =====================================
   MOBILE FIX
===================================== */
@media(max-width:768px){

    .vision-section,
    .about-section{
        padding:40px 15px;
    }

    .footer{
        padding:30px 15px 15px;
    }

    .footer-bottom{
        font-size:12px;
    }
}
/* =====================================
   VISION SECTION – CARD STYLE FIX
===================================== */

.vision-section{
    padding:60px 0;
    background:#ffffff;
}

/* Heading + subtitle */
.vision-section .section-header{
    text-align:center;
    max-width:900px;
    margin:0 auto 30px;
}

.vision-section .section-header h2{
    font-size:28px;
    font-weight:700;
    color:#004E89;
    margin-bottom:8px;
}

.vision-section .section-header p{
    font-size:15px;
    color:#555;
    text-align:center;   /* 🔥 CENTER FIX */
    margin:0 auto;
}

/* Cards grid */
.vision-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
    max-width:1100px;
    margin:0 auto;
}

/* Card */
.vision-card{
    background:#f6f9fe;
    padding:24px 22px;
    border-radius:14px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:transform .3s ease;
}

.vision-card:hover{
    transform:translateY(-6px);
}

.vision-card h3{
    font-size:18px;
    color:#004E89;
    margin-bottom:10px;
    font-weight:600;
}

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


/* =====================================
   ABOUT SECTION – CLEAN ALIGNMENT
===================================== */

.about-section{
    padding:60px 0;
    background:#f7f9fc;
}

/* Heading */
.about-section .section-header{
    text-align:center;
    max-width:900px;
    margin:0 auto 25px;
}

.about-section .section-header h2{
    font-size:28px;
    font-weight:700;
    color:#004E89;
    margin-bottom:6px;
}

.about-section .section-header p{
    font-size:15px;
    color:#555;
}

/* Content */
.about-content{
    max-width:900px;
    margin:0 auto;
}

.about-text p{
    font-size:15px;
    line-height:1.8;
    color:#444;
    margin-bottom:16px;
    text-align:justify;
}

/* Bullet points */
.about-points{
    margin-top:15px;
    padding-left:18px;
}

.about-points li{
    font-size:14px;
    color:#004E89;
    margin-bottom:8px;
    line-height:1.5;
}

/* =====================================
   MOBILE OPTIMIZATION
===================================== */
@media(max-width:768px){

    .vision-section,
    .about-section{
        padding:45px 15px;
    }

    .vision-section .section-header h2,
    .about-section .section-header h2{
        font-size:24px;
    }

    .vision-section .section-header p,
    .about-section .section-header p{
        font-size:14px;
    }
}
/* =====================================
   LEADERS – MOBILE ONE CARD FIX (FINAL)
===================================== */
@media (max-width: 768px) {

    .leaders-slider-container{
        overflow:hidden;
    }

    .leaders-slider{
        gap:0;                    /* 🔥 gap remove */
        padding:0;
        scroll-snap-type:x mandatory;
    }

    .leader-card{
        flex:0 0 100vw;           /* 🔥 FULL MOBILE WIDTH */
        max-width:100vw;
        scroll-snap-align:start;
    }

    .leader-card img{
        width:100%;
        height:320px;
        object-fit:cover;
    }
}
.product-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.product-title{
    text-decoration:none;
    color:#222;
}

.product-title:hover h3{
    color:#2874f0;
}
@media (max-width: 767px){

    /* HERO SECTION FULL WIDTH */
    .hero-section{
        width:100vw;
        height:auto;
        overflow:hidden;
    }

    .hero-slider{
        width:100%;
        height:auto;
        position:relative;
    }

    .slide{
        position:relative;   /* 🔥 absolute hata diya mobile me */
        height:auto;
        opacity:0;
    }

    .slide.active{
        opacity:1;
    }

    /* IMAGE FULL WIDTH – NO BLANK */
    .hero-img{
        width:100%;
        height:auto;         /* 🔥 auto height */
        max-height:none;
        object-fit:cover;    /* 🔥 width full cover */
        display:block;
    }

    /* TEXT SAFE */
    .slide-text{
        position:absolute;
        bottom:15px;
        left:0;
        right:0;
        padding:15px;
    }
}
@media (max-width: 767px){

    /* HERO CONTAINER */
    .hero-section{
        width:100vw;
        height:auto;              /* 🔥 NO FIXED HEIGHT */
        overflow:hidden;
    }

    .hero-slider{
        position:relative;
    }

    /* SLIDES (STACK PREVENT) */
    .slide{
        position:absolute;
        inset:0;
        opacity:0;
        transition:opacity .6s ease;
    }

    .slide.active{
        opacity:1;
        position:relative;        /* 🔥 active slide takes height */
    }

    /* IMAGE – ZERO CROP */
    .hero-img{
        width:100%;               /* mobile width */
        height:auto;              /* 🔥 auto height */
        object-fit:contain;       /* 🔥 NO CUT */
        display:block;
    }

    /* TEXT */
    .slide-text{
        position:absolute;
        bottom:12px;
        left:0;
        right:0;
        padding:15px;
    }
}
.hero-image-link{
    display:block;
    width:100%;
    height:100%;
}

.hero-img{
    cursor:pointer;
}
.slide-text{
    pointer-events:none;   /* 🔥 CLICK IMAGE PE JAYEGA */
}

.slide-text a{
    pointer-events:auto;   /* 🔥 BUTTON CLICKABLE RAHE */
}
/* 🔥 ONLY ACTIVE SLIDE CLICKABLE */
.slide{
    pointer-events:none;
}

.slide.active{
    pointer-events:auto;
}