*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --blue-50: #E6F1FB; --blue-100: #B5D4F4; --blue-200: #85B7EB;
      --blue-600: #185FA5; --blue-800: #0C447C; --blue-900: #042C53;
      --teal-50: #E1F5EE; --teal-100: #9FE1CB; --teal-600: #0F6E56; --teal-800: #085041;
      --green-50: #EAF3DE; --green-800: #27500A;
      --amber-50: #FAEEDA; --amber-800: #633806;
      --pink-50: #FBEAF0; --pink-800: #72243E;
      --red-50: #FCEBEB; --red-600: #A32D2D; --red-800: #791F1F;
      --gray-50: #F1EFE8; --gray-100: #D3D1C7; --gray-200: #B4B2A9; --gray-600: #5F5E5A;
      --border: rgba(0,0,0,0.12);
      --text: #1a1a1a; --text-muted: #6b6b68;
      --bg: #ffffff; --bg-secondary: #f8f7f4;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; }

 /* ==========================
   VISION & OBJECTIVES
========================== */

.vision-header{

    background:#fff;

    text-align:center;

    padding:20px 20px 10px;

}

.vision-header h2{

    font-size:42px;

    color:#003366;

    margin:0 0 10px;
}

.vision-header p{

    color:#666;

    font-size:18px;

    margin:0;
}


/* Main Section */

.vision-section{

    padding:10px 50px 50px;

    background:#fff;
}

.vision-container{

    max-width:1400px;

    margin:auto;
}


/* Vision & Objective Cards */

.vision-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(350px,1fr));

    gap:25px;
}

.vision-box{

    background:#fff;

    padding:25px;

    border-radius:20px;

    border:1px solid #e5edf5;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.3s ease;
}

.vision-box:first-child{

    border-top:4px solid #185FA5;
}

.vision-box:last-child{

    border-top:4px solid #ff5b7f;
}

.vision-box:hover{

    transform:translateY(-6px);

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

.vision-box h3{

    font-size:28px;

    color:#185FA5;

    margin-bottom:15px;
}

.vision-box p{

    font-size:17px;

    line-height:1.8;

    color:#555;
}


/* List Styling */

.vision-list{

    margin-top:15px;

    padding-left:20px;
}

.vision-list li{

    margin-bottom:10px;

    line-height:1.6;

    color:#555;

    font-size:16px;
}


/* Mobile */

@media (max-width:768px){

    .vision-header{

        padding:10px 15px;
    }

    .vision-header h2{

        font-size:30px;
    }

    .vision-header p{

        font-size:15px;
    }

    .vision-section{

        padding:15px 15px 30px;
    }

    .vision-grid{

        grid-template-columns:1fr;

        gap:20px;
    }

    .vision-box{

        padding:20px;
    }

    .vision-box h3{

        font-size:24px;
    }

    .vision-box p{

        font-size:15px;
    }

    .vision-list li{

        font-size:15px;
    }
}




/* ==========================
   UNION ACTIVITIES
========================== */


.activities-header{

    background:#fff;

    text-align:center;

    padding:20px 20px 10px;
}

.activities-header h2{

    font-size:42px;

    color:#003366;

    margin:0 0 10px;
}

.activities-header p{

    color:#666;

    font-size:18px;

    margin:0;
}

.activities-section{

    padding:35px 50px 30px;

    background:#fff;

    text-align:center;


    
}

.activities-section h2{

    font-size:42px;

    color:#003366;

    margin-bottom:10px;
}

.activities-subtitle{

    color:#666;

    max-width:700px;

    margin:0 auto 50px;
}

.activities-grid{

    display:grid;
    
    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:25px;
}

.activity-card{

    background:#fff;

    padding:25px 20px;

    border-radius:20px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

    transition:.3s ease;
     min-height:320px;
}

.activity-card:hover{

    transform:translateY(-8px);

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

.activity-icon{

    width:60px;

    height:60px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    border-radius:50%;
}

.activity-card h3{

    margin-bottom:10px;

    font-size:20px;
}

.activity-card p{

    color:#555;

    line-height:1.5;
}

/* Card Colors */

.support{

    border-top:5px solid #185FA5;
}

.support .activity-icon{

    background:#eaf3ff;
}

.coordination{

    border-top:5px solid #28a745;
}

.coordination .activity-icon{

    background:#ebfff0;
}

.policy{

    border-top:5px solid #ff9800;
}

.policy .activity-icon{

    background:#fff6e8;
}

.events{

    border-top:5px solid #7e57c2;
}

.events .activity-icon{

    background:#f5efff;
}

/* Mobile */

@media (max-width:768px){

    .activity-card{

        padding:18px;

        min-height:auto;
    }

    .activity-icon{

        width:50px;
        height:50px;

        font-size:22px;

        margin-bottom:10px;
    }

    .activity-card h3{

        font-size:18px;

        margin-bottom:8px;
    }

    .activity-card p{

        font-size:14px;

        line-height:1.5;

        margin:0;
    }

  
    .activities-header{

        padding:10px 15px;
    }

    .activities-header h2{

        font-size:30px;
    }

    .activities-header p{

        font-size:15px;
    }

    .activities-section{

        padding:15px 15px 30px;
    }

    
}




.main-footer {
  background: #2f6f9f;
  color: #fff;
  margin-top: 40px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;

  max-width: 1200px;
  margin: 0 auto;

  padding: 40px 2.5rem;
}

.footer-box h2, .footer-box h3 {
  margin-bottom: 15px;
}

.footer-box p {
  font-size: 14px;
  line-height: 1.6;
}

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

.footer-box ul li {
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}

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

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

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

.footer-box a:visited,
.footer-box a:active {
  color: #ffffff;
}

.footer-bottom {
  text-align: center;
  padding: 15px;
  background: #2a628c;
  font-size: 13px;
}
 

@media (max-width: 700px) {
  .vision-grid {
    grid-template-columns: 1fr;
  }
}

/* ✅ ADD HERE */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}


    /* NAV */
    nav { display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; height: 62px; border-bottom: 0.5px solid var(--border); position: sticky; top: 0; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); z-index: 200; }
    .logo{
    display:flex;
    align-items:center;
    gap:12px;

    font-family:'DM Serif Display', serif;
    font-size:28px;
    color:var(--blue-800);
    text-decoration:none;
}

.logo span{
    color:var(--teal-600);
}

.site-logo{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

@media (max-width:768px){

    .site-logo{
        width:38px;
        height:38px;
    }

    .logo{
        font-size:22px;
        gap:10px;
    }
}
    .nav-links { display: flex; gap:2px; }
    .nav-links button { background: none; border: none; font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 400; color: var(--text-muted); padding: 7px 15px; border-radius: 7px; cursor: pointer; transition: background 0.15s, color 0.15s; }
    .nav-links button:hover { background: var(--gray-50); color: var(--text); }
    .nav-links button.active { background: var(--blue-50); color: var(--blue-800); font-weight: 500; }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

    /* PAGES */
    .page { display: none; animation: fadeIn 0.22s ease; }
    .page.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    .page-header { padding: 3rem 2.5rem 2rem; border-bottom: 0.5px solid var(--border); }
    .page-header h2 { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--blue-900); line-height: 1.2; }
    .page-header p { font-size: 14px; color: var(--text-muted); margin-top: 0.4rem; }







    .btn-primary { background: #fff; color: var(--blue-800); border: none; padding: 11px 26px; border-radius: 8px; font-family: 'DM Sans',sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; }
    .btn-primary:hover { opacity: 0.9; }


   .stats-bar{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    max-width:1400px;

     margin:-70px auto 0;

    padding:0 30px;

    position:relative;
    z-index:20;
}

    .stat-icon{

    font-size:32px;

    margin-bottom:10px;
}
   .stat-item{

    background:#fff;

    border-radius:18px;

    padding:12px 20px;

    min-height:100px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}
.stat-item:hover{

    transform:translateY(-8px);

    box-shadow:
        0 15px 35px rgba(251, 250, 250, 0.916);
}
   .stat-item:nth-child(1){

    border-top:4px solid #185FA5;
}

.stat-item:nth-child(2){

    border-top:4px solid #28a745;
}

.stat-item:nth-child(3){

    border-top:4px solid #ff9800;
}

.stat-item:nth-child(4){

    border-top:4px solid #7e57c2;
}
  .stat-num{

    font-family:'DM Serif Display', serif;
    color:#003366;
    font-size:2rem;
     margin-bottom:4px;
}
   .stat-label{

    font-size:16px;

    color:#666;
}

.stat-action{
    margin-top:8px;
    font-size:13px;
    color:#185FA5;
    font-weight:600;
}

@media(max-width:768px){

    .stats-bar{

        grid-template-columns:repeat(2,1fr);

        gap:8px;

        padding:10px;
        margin: -5px;; /* remove overlap */ 
    }

    .stat-item{

        padding:10px 8px;

        min-height:80px;

        border-radius:12px;
    }

    .stat-icon{

        font-size:22px;

        margin-bottom:4px;
    }

    .stat-num{

        font-size:1.5rem;

        margin-bottom:2px;
    }

    .stat-label{

        font-size:11px;
    }

    .stat-action{

        margin-top:4px;

        font-size:11px;
    }
}



                                
    
                                            /* GALLERY */
  
 /* =====================================
   GALLERY GRID
===================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(320px,1fr));

    gap:25px;

    padding:30px 2.5rem;

    max-width:1400px;

    margin:auto;
}

/* =====================================
   GALLERY CARD
===================================== */

.gallery-item{
    position:relative;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    animation:fadeIn .5s ease;
}

.gallery-item:hover{
    transform:translateY(-6px);

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

/* =====================================
   GALLERY COVER IMAGE
===================================== */

.gallery-cover{
    width:100%;
    height:210px;
    object-fit:cover;
    display:block;
}

.gallery-item:hover .gallery-cover{
    transform:scale(1.05);
}

/* =====================================
   CARD CONTENT
===================================== */

.gallery-card-info{
    padding:16px;
}

.gallery-card-info h3{
    margin:0;

    font-size:18px;

    font-weight:600;

    color:#185FA5;
}

.gallery-description{
    margin:8px 0;

    color:#666;

    font-size:14px;

    line-height:1.5;

    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


/* =====================================
   PHOTO COUNT BADGE
===================================== */

.photo-badge{
    position:absolute;

    top:12px;
    right:12px;

    background:#185FA5;
    color:#fff;

    min-width:42px;
    height:42px;

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

    border-radius:50%;

    font-size:12px;
    font-weight:600;

    z-index:2;

    box-shadow:
        0 4px 10px rgba(0,0,0,.2);
}

/* =====================================
   CARD FADE ANIMATION
===================================== */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =====================================
   FULL SCREEN IMAGE VIEWER
===================================== */

#imageViewer{
    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    z-index:10000;

    text-align:center;
}

#viewerImage{

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%)
        scale(1);

    max-width:90vw;
    max-height:85vh;

    width:auto;
    height:auto;

    object-fit:contain;

    transition:.15s ease;
}
/* =====================================
   MOBILE RESPONSIVE
===================================== */

@media (max-width:700px){

    .gallery-grid{
        grid-template-columns:1fr;
        gap:16px;
        padding:0 12px;
    }

    .gallery-cover{
        height:220px;
    }

    #imageViewer{
        overflow:hidden;
    }

    #viewerImage{
        max-width:95vw;
        max-height:75vh;
    }

    #imageCounter{
        bottom:15px !important;

        padding:8px 16px !important;

        font-size:14px !important;
    }

    #prevBtn{
        left:10px !important;
        top:50% !important;
    }

    #nextBtn{
        right:10px !important;
        top:50% !important;
    }
}
    /* NEWS */
    /* =========================
   NEWS TOOLBAR
========================= */

.news-toolbar{
    padding:25px 2.5rem 35px;
}

#newsSearch{
    width:100%;
    max-width:650px;
    margin-bottom:25px;
}

.news-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.filter-btn{
    border:none;
    padding:10px 18px;
    border-radius:30px;
    background:#f1f5f9;
    color:#334155;
    cursor:pointer;
    font-size:14px;
    transition:.25s;
}

.filter-btn:hover{
    background:#185FA5;
    color:#fff;
}

.filter-btn.active{
    background:#185FA5;
    color:#fff;
}

/* =========================
   NEWS LIST
========================= */

.news-list{
    padding:0 2.5rem 50px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.news-item{
    display:grid;
    grid-template-columns:90px 1fr 130px;
    gap:1.5rem;
    padding:1.8rem 0;
    border-bottom:1px solid var(--border);
    align-items:center;
}



.news-date{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.1;
}

.news-date strong{
    font-size:34px;
    margin:0;
}

.news-month{
    font-size:18px;
    margin-top:2px;
}

.news-year{
    font-size:18px;
}
.news-tag{
    display:inline-block;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    background:var(--blue-50);
    color:var(--blue-800);
    padding:4px 10px;
    border-radius:6px;
    margin-bottom:10px;
}

.news-body h3{
    font-size:24px;
    margin-bottom:10px;
    font-weight:500;
}

.news-body p{
    font-size:15px;
    color:var(--text-muted);
    line-height:1.7;
}

.news-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.btn-download{
    display:inline-flex;
    align-items:center;
    gap:8px;

    background:var(--blue-50);
    color:var(--blue-800);

    border:1px solid var(--blue-100);

    padding:10px 16px;

    border-radius:8px;

    text-decoration:none;

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

    transition:.2s;
}

.btn-download:hover{
    background:var(--blue-100);
}

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

@media(max-width:768px){

    .news-toolbar{
        padding:20px 1rem 25px;
    }

    .news-list{
        padding:0 1rem 30px;
    }

    .news-filters{
        gap:8px;
    }

    .filter-btn{
        font-size:13px;
        padding:8px 14px;
    }

    .news-item{
        grid-template-columns:1fr;
        gap:15px;
        text-align:left;
    }

   .news-date{
        width:60px;
        flex-shrink:0;
    }

    .news-date strong{
        font-size:40px;
    }

    .news-month{
        font-size:16px;
    }

    .news-year{
        font-size:16px;
    }

    .news-actions{
        justify-content:flex-start;
    }

    .news-body h3{
        font-size:20px;
    }

    .news-body p{
        font-size:14px;
    }
}
    /* TEAM */
  /* ==========================
   TEAM SECTION
========================== */

.team-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    padding:40px 50px;

    background:#f8fafc;
}

.team-card{

    background:#fff;

    padding:25px 20px;

    text-align:center;

    border-radius:20px;

    border-top:4px solid #185FA5;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s ease;
}

.team-card:hover{

    transform:translateY(-6px);

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

.avatar{

    width:100px;

    height:100px;

    margin:0 auto 18px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid #eaf3ff;

    box-shadow:0 6px 15px rgba(24,95,165,.15);
}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.team-card h3{

    font-size:22px;

    color:#003366;

    margin-bottom:8px;

    font-weight:700;
}

.team-role{

    color:#185FA5;

    font-size:16px;

    font-weight:600;

    margin-bottom:12px;
}

.team-mobile{

    color:#555;

    font-size:15px;

    margin-top:10px;

    padding-top:10px;

    border-top:1px solid #eee;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;
}

.team-mobile a{

    color:#555;

    text-decoration:none;
}

.team-mobile a:hover{

    color:#185FA5;
}

.team-card p{

    font-size:14px;

    color:#666;

    line-height:1.6;
}






/* Mobile */

@media (max-width:768px){

    .team-grid{

        grid-template-columns:1fr;

        gap:15px;

        padding:15px;
    }

    .team-card{

        padding:18px;
    }

    .avatar{

        width:80px;

        height:80px;
    }

    .team-card h3{

        font-size:18px;
    }

    .team-role{

        font-size:14px;
    }

    .team-mobile{

        font-size:14px;
    }
}



/*member*/

.member-table-wrapper{

    width:100%;

    overflow-x:auto;
}

.member-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.member-table thead{

    background:#003366;
}

.member-table thead th{

    color:#fff;

    padding:18px;

    text-align:left;

    font-size:15px;

    font-weight:600;
}

.member-table td{

    padding:16px;

    border-top:1px solid #e5e7eb;
}

.member-table tbody tr:nth-child(even){

    background:#f8fafc;
}

.member-table tbody tr:hover{

    background:#eef6ff;
}

.member-search{

    flex:2;

    min-width:300px;

    height:62px;

    padding:0 24px;

    border:1px solid #d9d9d9;

    border-radius:18px;

    font-size:16px;

    background:#fff;

    outline:none;
}

      /* CONTACT */
    
   
    .contact-icon { width: 34px; height: 34px; background: var(--blue-50); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
    .contact-row p      { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
    .contact-row strong { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
   
      /* RESPONSIVE */
    @media (max-width: 700px) {
      nav { padding: 0 1.2rem; }
      .nav-links { display: none; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0; background: #fff; border-bottom: 0.5px solid var(--border); padding: 0.5rem 1rem 1rem; gap: 4px; }
      .nav-links.open { display: flex; }
      .nav-links button { width: 100%; text-align: left; padding: 10px 14px; }
      .hamburger { display: flex; }
      .page-header{
        padding:24px 16px;
    }

    .page-header h2{
        font-size:36px;
    }

    .page-header p{
        font-size:14px;
        line-height:1.6;
    }
      .stats-bar { grid-template-columns: 1fr 1fr; }
      .stat-item { border-right: none; border-bottom: 0.5px solid var(--border); }
      .gallery-grid{
        grid-template-columns:1fr;
        gap:16px;
        padding:0 12px;
    }

    .gallery-item{
        border-radius:14px;
    }

    .gallery-cover{
        height:220px;
        object-fit:cover;
    }

    .gallery-card-info{
        padding:14px;
    }

    .gallery-card-info h3{
        font-size:18px;
    }

    .gallery-description{
        font-size:13px;
    }
      .news-list { padding: 0 1.2rem; }
      .news-item { grid-template-columns: 64px 1fr; gap: 1rem; }
      .news-actions { grid-column: 1 / -1; flex-direction: row; }
     
      .contact-layout { grid-template-columns: 1fr; }
      .contact-info { border-right: none; border-bottom: 0.5px solid var(--border); padding: 1.8rem 1.2rem; }
    
      .photo-badge{

    position:absolute;
    top:12px;
    right:12px;

    background:#185FA5;
    color:#fff;

    min-width:42px;
    height:42px;

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

    border-radius:50%;

    font-size:13px;
    font-weight:600;

    box-shadow:
        0 4px 10px rgba(0,0,0,.2);

}

#galleryModal > div{

        width:95% !important;

        margin:15px auto !important;

        padding:15px !important;
    }

    #galleryModalImages{

        grid-template-columns:1fr !important;

    }
    
      
    }


    /* Social Media Icons */

    .social-icons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.social-icons a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: white;
  color: #2f6f9f;
  transform: translateY(-3px);
}
  



    /* Birthday */


.birthday-modal{

    display:none;

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.65);

    z-index:9999;

    justify-content:center;

    align-items:center;
}

.birthday-modal-content{

    background:white;

    width:90%;

    max-width:600px;

    padding:25px;

    border-radius:16px;

    max-height:80vh;

    overflow:auto;

    position:relative;

     margin-top:20px;
}

.birthday-close{

    position:absolute;

    top:12px;

    right:18px;

    font-size:28px;

    cursor:pointer;
}

.birthday-card{

    display:flex;

    gap:15px;

    align-items:center;

    padding:15px 0;

    border-bottom:
        1px solid #eee;
}

.birthday-date{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#185FA5;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:600;
}


/* =========================
   BIRTHDAY MODAL MOBILE
========================= */

@media (max-width:768px){

    .birthday-modal-content{

        width:95%;

        padding:20px;

        max-height:85vh;

        border-radius:12px;
    }

    .birthday-modal-content h2{

        font-size:22px;

        padding-right:30px;
    }

    .birthday-close{

        top:10px;

        right:15px;

        font-size:24px;
    }

    .birthday-card{

        gap:12px;

        padding:12px 0;
    }

    .birthday-date{

        width:45px;

        height:45px;

        font-size:14px;

        flex-shrink:0;
    }

    .birthday-card h3{

        font-size:16px;

        margin:0 0 4px;
    }

    .birthday-card p{

        font-size:13px;

        margin:0;

        color:#666;
    }
}

/* =========================
   MEMBERSHIP SECTION
========================= */



.contact-membership h3{

    margin-bottom:25px;

    color:#185FA5;

    font-size:24px;
}

.join-step{

    display:flex;

    gap:18px;

    margin-bottom:22px;

    align-items:flex-start;
}

.join-step span{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    background:#185FA5;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:16px;
}

.join-step h4{

    margin:0 0 6px;

    font-size:17px;

    color:#1f2937;
}

.join-step p{

    margin:0;

    color:#6b7280;

    line-height:1.6;

    font-size:14px;
}



/* =========================
   CONTACT PAGE LAYOUT
========================= */

.contact-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    padding:2.5rem;
}

/* =========================
   LEFT CARD
========================= */

.contact-info{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:24px;

    padding:2.5rem;
}

.contact-info h3{

    font-family:'DM Serif Display', serif;

    font-size:1.5rem;

    color:var(--blue-900);

    margin-bottom:2rem;
}

/* =========================
   RIGHT CARD
========================= */

.contact-membership{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:24px;

    padding:2.5rem;
}

.contact-membership h3{

    font-family:'DM Serif Display', serif;

    font-size:1.5rem;

    color:var(--blue-900);

    margin-bottom:2rem;
}

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

@media (max-width:768px){

    .contact-layout{

        grid-template-columns:1fr;

        gap:20px;

        padding:1rem;
    }

    .contact-info,
    .contact-membership{

        padding:1.5rem;
    }
}



.hero-slider{

    position:relative;

    height:380px;

    overflow:hidden;
}

.hero-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;


    opacity:0;

    transition:opacity .8s ease;
    object-fit:cover;
   object-position:center 40%;
}

.hero-slide.active{

    opacity:1;
}

.hero-slider::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.00);

    z-index:1;
}

.hero-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    z-index:2;

    color:white;
}

.hero-content h1{

    font-size:72px;

    margin-bottom:15px;

    font-family:'DM Serif Display', serif;
}

.hero-content p{

    font-size:24px;

    letter-spacing:1px;
}

@media(max-width:768px){

    .hero-slider{ 
        height:300px; 
    } 
    .hero-content h1{ 
        font-size:42px; } 
        .hero-content p{ 
            font-size:16px; } 


 
        }


.whatsapp-row{
    margin-top:10px;
    padding-top:15px;
    border-top:1px solid #e5e7eb;
}

.whatsapp-btn{
    display:inline-block;
    margin-top:12px;
    padding:10px 18px;

    background:#25D366;
    color:#fff;

    text-decoration:none;
    border-radius:8px;

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

    transition:.3s;
}

.whatsapp-btn:hover{
    background:#1ea952;
    transform:translateY(-2px);
}

.whatsapp-row .contact-icon{
    background:#eafaf0;
}


.department-modal-content{
    background:#fff;

    width:90%;
    max-width:900px;

    padding:25px;

    border-radius:16px;

    max-height:80vh;

    overflow:auto;

    position:relative;
}


.member-filters{
    display:flex;
    gap:20px;
    margin:30px 0;
    flex-wrap:wrap;
    align-items:center;
}

.member-filters input,
.member-filters select{

    height:62px;

    padding:0 24px;

    border:1px solid #d9d9d9;

    border-radius:18px;

    font-size:16px;

    background:#fff;

    outline:none;
}

.member-filters input{
    flex:2;
    min-width:300px;
}

.member-filters select{
    flex:1;
    min-width:220px;
}

.member-filters input:focus,
.member-filters select:focus{

    border-color:#185FA5;

    box-shadow:0 0 0 3px rgba(24,95,165,.08);
}
@media (max-width:768px){

     .member-search{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
    }

    .member-filters{
        padding:0 12px;
    }

    #departmentFilter,
    #designationFilter{

        width:100% !important;

        min-width:100% !important;

        max-width:100% !important;

        height:50px;

        font-size:14px;

        border-radius:12px;

        margin:0;
    }
}



.home-media-section{

    display:grid;

    grid-template-columns:50% 50%;

    gap:30px;

    padding:60px 40px;
}

.news-column{

    overflow:hidden;
}

.news-ticker-wrapper{

    height:250px;

    overflow:hidden;

    margin-top:15px;
}

#homeNewsContainer{

    display:flex;

    flex-direction:column;

    animation:scrollNews 20s linear infinite;
}
.news-column .section-title{

    padding-bottom:10px;
}

.ticker-news-item{

    padding:15px 0;

    border-bottom:1px solid #eee;

    cursor:pointer;

    font-size:16px;

    color:#444;

    transition:.3s;
}

.ticker-news-item:hover{

    color:#185FA5;

    padding-left:10px;
}

@keyframes scrollNews{

    from{

        transform:translateY(0);
    }

    to{

        transform:translateY(-50%);
    }
}

.highlight-news{

    background:#fff8cc;

    transition:.5s;
}


.news-column,
.gallery-column,
.videos-column,
.leader-column{


     height:430px;
   background:#fff;

    padding:25px;

    border-radius:20px;

    border:1px solid #e5edf5;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.3s ease;
}

.news-column{

    border-top:5px solid #185FA5;
}

.gallery-column{

    border-top:5px solid #28a745;
}

.news-column:hover,
.gallery-column:hover{

    transform:translateY(-5px);

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


.home-news-item:last-child{

    border-bottom:none;
}


.home-news-item .date{
    font-size:13px;
}

.home-news-item:last-child{

    border-bottom:none;
}




.home-gallery-slider{

    margin:20px 0;

    border-radius:20px;

    overflow:hidden;
}

.home-gallery-slider img{

    width:100%;

    height:200px;

    object-fit:cover;

    border-radius:20px;

    transition:.5s ease;
}


.gallery-column:hover{

    transform:translateY(-5px);

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



.home-gallery-slider img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:18px;
}

.section-title h2{

    color:#003366;

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;
}

@media(max-width:768px){


    .news-column,
.gallery-column,
.videos-column,
.leader-column{
    height: 380px;
}

    .home-media-section{

        grid-template-columns:1fr;

        padding:20px 15px;
    }
    .news-ticker-wrapper{

        height:180px;
    }

    .home-gallery-slider img{

        height:180px;
    }
}
  
   /* Gallery popup grid */

#galleryModalImages{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:15px;
}

/* Popup images */

.gallery-modal-image{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;
}

.gallery-modal-image:hover{

    transform:scale(1.03);
}


@media(max-width:768px){

    #galleryModalImages{

        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .gallery-modal-image{

        height:130px;
    }
}


/* =====================================
   RECENT VIDEOS
===================================== */

.videos-column{

    background:#fff;

    border-radius:20px;

    padding:15px;

    border:1px solid #e5e7eb;

    border-top:5px solid #e53935;

    transition:.3s;

    overflow:hidden;

    height:430px;

    display:flex;

    flex-direction:column;
}

.videos-column:hover{

    transform:translateY(-5px);

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

/* =====================================
   VIDEO CARD
===================================== */

.video-card{

    display:flex;

    flex-direction:column;

    height:100%;

    animation:fadeVideo .5s ease;
}

/* =====================================
   THUMBNAIL
===================================== */

.video-thumbnail{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:14px;

    transition:.35s;

    cursor:pointer;
}

.video-thumbnail:hover{

    transform:scale(1.02);

    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

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

.video-title{

    font-size:18px;

    font-weight:600;

    color:#0a3b73;

    margin-top:10px;

    line-height:1.3;

    min-height:48px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* =====================================
   DATE
===================================== */

.video-date{

    font-size:13px;

    color:#666;

    margin-top:5px;
}

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

.video-dots{

    display:flex;

    justify-content:center;

    gap:8px;

    margin:12px 0;
}

.video-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#cfd8dc;

    cursor:pointer;

    transition:.3s;
}

.video-dot.active{

    width:22px;

    border-radius:20px;

    background:#e53935;
}

.video-dot:hover{

    background:#185FA5;
}

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

.visit-channel{

    margin-top:auto;

    display:block;

    width:100%;

    text-align:center;

    padding:10px;

    background:#e62117;

    color:#fff;

    text-decoration:none;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

    transition:.3s;
}

.visit-channel:hover{

    background:#c81910;
}

/* =====================================
   ANIMATION
===================================== */

@keyframes fadeVideo{

    from{

        opacity:0;

        transform:translateY(10px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* =====================================
   TABLET
===================================== */

@media(max-width:992px){

    .videos-column{

        height:400px;
    }

    .video-thumbnail{

        height:165px;
    }

}

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

@media(max-width:768px){

    .videos-column{

        height:auto;

        padding:12px;

        margin:0 10px;

        border-radius:16px;
    }

    .video-thumbnail{

        height:180px;
    }

    .video-title{

        font-size:16px;

        min-height:auto;
    }

    .video-date{

        font-size:12px;
    }

    .video-dots{

        margin:10px 0;
    }

    .visit-channel{

        font-size:14px;

        padding:10px;
    }

}


/* =====================================
   LEADER MESSAGE
===================================== */

.leader-column{

    background:#fff;

    border-radius:20px;

    padding:18px;

    border:1px solid #e5e7eb;

    border-top:5px solid #185FA5;

    transition:.3s;

    overflow:hidden;

    height:430px;

    display:flex;

    flex-direction:column;
}

.leader-column:hover{

    transform:translateY(-5px);

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

/* =====================================
   CARD
===================================== */

.leader-card{

    display:flex;

    flex-direction:column;

    height:100%;
}

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

.leader-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;
}

/* =====================================
   PHOTO
===================================== */

.leader-photo{

    width:130px;

    height:130px;

    border-radius:50%;

    object-fit:cover;

    object-position:center;

    border:4px solid #185FA5;

    flex-shrink:0;

    transition:.3s;
}

.leader-photo:hover{

    transform:scale(1.05);
}

/* =====================================
   INFO
===================================== */

.leader-info{

    flex:1;
}

.leader-name{

    font-size:24px;

    font-weight:700;

    color:#0a3b73;

    line-height:1.2;
}

.leader-designation{

    margin-top:8px;

    color:#777;

    font-size:16px;

    font-weight:500;
}

/* =====================================
   MESSAGE
===================================== */

.leader-message{

    border-top:1px solid #e5e7eb;

    padding-top:15px;

    font-size:15px;

    line-height:1.8;

    color:#444;

    text-align:justify;

    overflow-y:auto;

    flex:1;

    scrollbar-width:thin;

    scrollbar-color:#185FA5 #f5f5f5;
}

.leader-message::-webkit-scrollbar{

    width:6px;
}

.leader-message::-webkit-scrollbar-thumb{

    background:#185FA5;

    border-radius:20px;
}

.leader-message::-webkit-scrollbar-track{

    background:#f5f5f5;
}

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

@media(max-width:768px){

    .leader-column{

        height:auto;

        padding:15px;

        border-radius:18px;
    }

    .leader-header{

        flex-direction:column;

        text-align:center;

        gap:12px;
    }

    .leader-photo{

        width:95px;

        height:95px;
    }

    .leader-name{

        font-size:20px;
    }

    .leader-designation{

        font-size:14px;
    }

    .leader-message{

        font-size:14px;

        line-height:1.7;

        overflow:visible;
    }

}