/* =====================================================
   GLOBAL
===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.container {
    width: 90%;
    margin: auto;
}

/* =====================================================
   TOP BAR
===================================================== */
.top-bar {
    background: #2A498E;
    color: white;
    padding: 6px 0;
    font-size: 13px;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-login {
    display: flex;
    gap: 12px;
}

.social-icon {
    color: white;
    font-size: 15px;
}

.official-btn {
    background: orange;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
}

/* Hide on Mobile */
.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

/* =====================================================
   LOGO SECTION
===================================================== */
.logo-section {
    background: #fff;
    padding: 15px 0;
    border-bottom: 2px solid #eee;
}

.logo-section-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-image {
    width: 100px;
}

.logo-text h1 {
    font-size: 30px;
    color: #111;
    font-weight: 700;
    line-height: 1.1;
}

.log-in-btn {
    background: #EF633A;
    color: white;
    padding: 10px 22px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

/* =====================================================
   NAVBAR
===================================================== */
nav {
    background: #1a5c9e;
    color: #fff;
}

nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

.main-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    color: white;
    padding: 12px 10px;
    display: block;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

/* Dropdown */
.dropdown {
    display: none;
    position: absolute;
    background: white;
    color: black;
    min-width: 180px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.dropdown a {
    color: black;
    padding: 10px;
    display: block;
}

.nav-item:hover > .dropdown {
    display: block;
}

/* Sub-dropdown */
.sub-dropdown {
    position: relative;
}

.sub-dropdown .dropdown {
    left: 100%;
    top: 0;
}

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


@media (max-width: 768px) {

    .hamburger {
        display: block;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #003b75;
        padding: 10px;
        border-radius: 0 0 8px 8px;
    }

    .main-nav.active {
        display: flex;
    }

    .dropdown {
        position: static;
        background: #004a90;
        box-shadow: none;
    }

    .dropdown a {
        color: white;
        padding-left: 25px;
    }

    .nav-item.open > .dropdown {
        display: block;
    }
}



 







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

body {
    color: #333;
    line-height: 1.6;
    background-color: #f5f5f5;
}

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

/* Header Styles */
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
}

.logo-left img,
.logo-right img {
height: 80px;   /* adjust size */
width: auto;
}

.header-top {
flex: 1;
padding: 0 20px;
}

.header-top h1 {
font-size: 26px;
margin: 0;
color: #0066cc;
}

/* ====== ==================================================================. HEADER STYLING ============================================================================== */
/* Container: Desktop layout */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: nowrap;
}

/* Logos styling */
.logo-left img,
.logo-right img {
height: 120px;
width: auto;
border-radius: 12px;
border: 3px solid #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.logo-right img:hover {
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ✅ Mobile layout */
@media (max-width: 768px) {
.header-container {
flex-direction: column;  /* stack vertically */
align-items: center;
}

/* Group both logos on the same row */
.logo-left,
.logo-right {
display: inline-block;
margin: 0 10px;
}

.logo-left img,
.logo-right img {
height: 80px;   /* smaller logos on mobile */
}

/* Put logos side by side */
.logo-left, .logo-right {
vertical-align: middle;
}

/* Force logos to appear above text */
.logo-left, .logo-right {
order: -1;  /* logos first */
}

.header-top {
text-align: center;
margin-top: 10px;
}
}




.header-top h1 {
color: rgb(192, 2, 2);        /* Make h1 red */
font-size: 2rem;   /* Bigger font size */
font-weight: bold; /* Emphasize */
margin: 10px 0;
}

.header-top h2, 
.header-top h3, 
.header-top h4 {
font-size: 1rem;   /* Smaller font */
font-weight: normal;
color: #333;       /* Grayish text */
margin: 2px 0;
}

/* Special Effects with Colors */
.header-top h4:nth-child(4) {
color: #ff8800;
}

.header-top h4:nth-child(5) {
color: #1a5c9e;
}

/* ====== Professional Underline Animation ====== */
.header-top h1::after
{
content: "";
display: block;
width: 90px;
height: 4px;
/* background: #1a5c9e; */
margin: 6px auto 0;
border-radius: 2px;
/* animation: underlineSlide 2s ease infinite alternate; */
}


h3 .orange-text {
color: rgb(255, 123, 0);   /* Makes only this part orange */
font-weight: bold;
}

@keyframes underlineSlide {
from { width: 40px; background: #b30000; }
to { width: 120px; background: #1a5c9e; }
}

/* ====== Responsive Design ====== */
@media (max-width: 992px) {
.header-container {
flex-direction: column;
align-items: center;
text-align: center;
}

/* Logos stay at the top */
.logo-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 15px; /* space between logos */
margin-bottom: 12px;
order: -1; /* force logos above text */
}

.logo-left img,
.logo-right img {
height: 55px; /* adjust size for mobile */
max-width: 100px;
}

/* Headings scale down */
.header-top h1 {
font-size: 20px;
}
.header-top h2 {
font-size: 10px;
}
.header-top h3 {
font-size: 10px;
}
.header-top h4 {
font-size: 10px;
}
}



/* ======================================================================  NAVBAR   =================================================================*/
/* Navigation Styles */
nav {
background: #ec7d06;  
color: white;
font-weight: bold;
font-family: Arial, sans-serif;

position: sticky;
top: 0;              /* stick at very top */
z-index: 1000;       /* above other content */
}

/* Navbar container */
.main-nav {


display: flex;

justify-content: center;
align-items: center;
flex-wrap: wrap;       /* ✅ allow items to wrap into 2 rows */
gap: 8px;              /* spacing */
white-space: nowrap;
max-width: 1000px;     /* keep nav centered on large screens */
margin: auto;
}

/* Each nav item */
.nav-item {
position: relative;
}

/* Main nav links */
.nav-item > a {

display: block;
font-weight: bold;
padding: 10px 14px;
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: background 0.3s;
}

.nav-item > a:hover {
background: #c76d06;
border-radius: 4px;
}

/* Dropdown styling */
.dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: white;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 999;
}

/* Show dropdown on hover */
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* Dropdown links */
.dropdown a {
display: block;
padding: 8px 12px;
font-size: 12px;
color: #333;
text-decoration: none;
border-bottom: 1px solid #eee;
}

.dropdown a:last-child {
border-bottom: none;
}

.dropdown a:hover {
background: #f0f0f0;
color: #1a5c9e;
}


/* Login dropdown wrapper */
.login-dropdown {
position: relative;
display: inline-block;
}

/* Login button style (same as other links) */
.login-dropdown > a {
padding: 8px 12px;
color: white;
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background 0.3s;
}

.login-dropdown > a:hover {
background: #0f3b6b;
border-radius: 4px;
}

/* Dropdown menu */
.login-dropdown .dropdown {
position: absolute;
top: 100%;
right: 0;                  /* align to right */
min-width: 160px;
background: white;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
display: none;
z-index: 999;
}

/* Dropdown links */
.login-dropdown .dropdown a {
display: block;
padding: 8px 12px;
font-size: 12px;
color: #333;
text-decoration: none;
border-bottom: 1px solid #eee;
}

.login-dropdown .dropdown a:last-child {
border-bottom: none;
}

.login-dropdown .dropdown a:hover {
background: #f0f0f0;
color: #1a5c9e;
}

/* Show dropdown on hover */
.login-dropdown:hover .dropdown {
display: block;
}


/* ✅ Responsive: stack items on smaller screens */
@media (max-width: 768px) {
.main-nav {
flex-direction: column;   /* stack links vertically */
gap: 4px;
}

.nav-item > a {
padding: 10px;
text-align: center;
}

.dropdown {
position: static;         /* dropdown flows inline */
box-shadow: none;
min-width: 100%;
transform: none;
opacity: 1;
visibility: visible;
display: none;            /* hidden by default */
}

.nav-item:hover .dropdown {
display: block;           /* show when tapped */
}
}

/* Bold only top-level (main) menu items */
.main-nav > .nav-item > a {
font-weight: bold;
}

/* Responsive */
/* hamburger default hidden (desktop) */
.hamburger {
display: none;
border: 0;
background: transparent;
padding: 8px;
cursor: pointer;
}

/* hamburger bars */
.hamburger .bar {
display: block;
width: 22px;
height: 2px;
margin: 4px 0;
background: var(--nav-text);
transition: transform .25s ease, opacity .2s ease;
}

/* nav (desktop) */
.main-nav {

display: flex;
}
.nav-list {

display: flex;
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.nav-item a {

color: var(--nav-text);
text-decoration: none;
padding: 8px 6px;
}

/* dropdown (desktop behavior) */
.has-dropdown {
position: relative;
}
.dropdown {
position: absolute;
left: 0;
top: calc(100% + 6px);
background: white;
color: #111;
min-width: 160px;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
display: none;
z-index: 1200;
padding: 8px 0;
}
.has-dropdown:hover > .dropdown { display: block; }
.dropdown li { padding: 0; }
.dropdown a { display:block; padding: 8px 12px; color: inherit; }




/* Sub-dropdown container */
.sub-dropdown {
    position: relative;
  }
  
  /* Sub-dropdown content */
  .sub-dropdown-content {
    display: none;
    position: absolute;
    left: 100%; /* Show to the right of parent */
    top: 0;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 4px;
  }
  
  
  /* Show sub-dropdown on hover */
  .sub-dropdown:hover .sub-dropdown-content {
    display: block;
  }
  
  /* Hover effect for sub-dropdown items */
  .sub-dropdown-content a:hover {
    background-color: #e0e0e0;
  }
  


/* ----------------------------
Responsive / Mobile rules
---------------------------- */
@media (max-width: 768px) {
.header-inner { align-items: center; }

/* show hamburger */
.hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
}

/* transform hamburger when active */
.hamburger.is-active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-active .bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.hamburger.is-active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile nav: hidden by default */
.main-nav {
display: none;               /* hidden on mobile until activated */
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--nav-mobile-bg);
color: var(--nav-mobile-text);
z-index: 1100;
box-shadow: 0 8px 20px rgba(0,0,0,.12);
padding: 12px 16px;
flex-direction: column;
}
.main-nav.active { display: flex; }

.nav-list {
flex-direction: column;
gap: 0;
}
.nav-item a {
padding: 12px 8px;
color: var(--nav-mobile-text);
border-bottom: 1px solid rgba(0,0,0,.06);
}

/* mobile dropdowns: controlled via .open on parent */
.dropdown {
position: static;
box-shadow: none;
border-radius: 0;
display: none; /* closed by default on mobile */
padding-left: 12px;
background: transparent;
}
.nav-item.open > .dropdown { display: block; }

.caret { margin-left:6px; }
}

/* optional: prevent page scroll when menu open */
body.menu-open {
overflow: hidden;
}



/*============================================================================== Content Styles =================================================================*/
.most-searched {
    background-color: #f9f9f9;
    padding: 4px;
    border-radius: 9px;
    margin: 0px 0;
}

.most-searched h3 {
    margin-top: 0;
    color: #0066cc;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.most-searched ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.most-searched li {
    padding: 5px 0;
}

.content-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.section {
    flex: 1;
    min-width: 300px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.section h2 {
    color: #0066cc;
    border-bottom: 2px solid #0066cc;
    padding-bottom: 10px;
    margin-top: 0;
}

.news-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
}

.news-item:last-child {
    border-bottom: none;
}

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

.info-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
}

.info-list li:last-child {
    border-bottom: none;
}

.initiative {
    background-color: #e6f2ff;
    padding: 15px;
    border-radius: 5px;
    margin-top: 15px;
}

hr {
    border: none;
    border-top: 2px solid #ddd;
    margin: 20px 0;
}

/* Footer */
footer {
    background: #1a5c9e;
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-top: 30px;
}

/* Base nav */
/*====================================================================================== Base nav ================================ */
.nav {
background: #003366;
color: white;
}
nav .container {
display: flex;
align-items: center;
justify-content: space-between;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}

/* Hamburger hidden on desktop */
.hamburger {
display: none;
cursor: pointer;
font-size: 24px;
padding: 12px;
}

/* Main nav on desktop */
.main-nav {
display: flex;
gap: 10px;
}

/* Dropdown base */
.dropdown {
display: none;
position: absolute;
background: #fff;
color: #333;
min-width: 200px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 999;
}
.dropdown a {
color: #333;
padding: 10px 15px;
}
.nav-item {
position: relative;
}
.nav-item:hover > .dropdown {
display: block; /* desktop hover */
}

/* Sub-dropdown arrow */
.sub-dropdown > a {
display: flex;
justify-content: space-between;
align-items: center;
}
.sub-dropdown .dropdown {
left: 100%;
top: 0;
}

/* ---------- Mobile (≤768px) ---------- */
/* === MOBILE STYLES === */

@media (max-width: 768px) {
    .nav-item:hover .dropdown {
        display: none !important;
    }

    .nav-item.open .dropdown {
        display: block !important;
    }
}


@media (max-width: 768px) {
.container {
position: relative; /* Needed for absolute positioning of nav */
}

.hamburger {
display: block;
margin-left: auto;   
cursor: pointer;
z-index: 1100;
}

.main-nav {
display: none;
flex-direction: column;
position: absolute;
top: 100%;    /* directly below navbar */
right: 20px;     /* aligned with hamburger */
width: 450px;
/* width: 400px; */
background: #003b75;
padding: 10px 0;
border-radius: 0 0 6px 6px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.main-nav.active {
display: flex;
}

.nav-item {
width: 100%;
}

.dropdown {
position: static;
box-shadow: none;
background: #00488d;
display: none;
flex-direction: column;
}

.dropdown a {
color: white;
padding: 10px 20px;
}

.nav-item.open > .dropdown {
display: flex;
}

.sub-dropdown .dropdown a {
padding-left: 40px;
}
}




/* ===========================================================================. Top Bar Styling  ================================================================================ */
.top-bar {
background: #1a5c9e;
color: white;
font-size: 12px;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
}

.top-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.top-bar a {
color: white;
text-decoration: none;
margin: 0 6px;
transition: color 0.3s ease;
}

.top-bar a:hover {
color: #ffcc00;
text-decoration: underline;
}

.separator {
margin: 0 4px;
color: rgba(255,255,255,0.6);
}

/* ===== Responsive Top Bar ===== */
@media (max-width: 768px) {
.top-bar-container {
display: flex;
flex-direction: column;   /* stack items vertically */
align-items: center;      /* center horizontally */
justify-content: center;
gap: 0px;                 /* space between rows */
text-align: center;
padding: 0px 0;
}

.right-links {
display: flex;
flex-wrap: wrap;          /* allow wrapping if many links */
justify-content: center;
gap: 0px;                 /* space between links */
}

.right-links a {
margin: 0;
display: inline-block;
font-size: 10px;          /* smaller text for mobile */
padding: 4px 6px;
}
}






/*============================================================================== ENd the header =================================================================*/



.explore-btn {
    text-decoration: none;   /* remove underline */
}

.hero-section {
    position: relative;
    width: 100%;
    height: 70vh; /* Full screen */
    background: url('images/1.jpg') no-repeat center center;
    background-size: cover; /* Cover entire hero */
    display: flex;
    justify-content: flex-start; /* Left align horizontally */
    padding-left: 5%; /* Space from left edge */
    padding-top: 15%; /* Add gap from top */
    overflow: hidden;
    color: #fff;
}

/* Optional overlay for better text visibility */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(13,22,43,0.9) 0%, rgba(13,22,43,0.6) 50%, rgba(13,22,43,0.1) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 550px; /* Limit text width */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keep text on left */
    text-align: left;
    margin-left: 2%; /* Move content closer to left edge */
    margin-top: -5%;  /* Move content slightly higher from center */
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

/* Paragraph below heading */
.hero-content p {
    font-size: 1.05rem;
    margin-bottom: 25px;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* Button */
.explore-btn {
    background-color: #e96b34;
    color: #fff;
    padding: 12px 28px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.explore-btn:hover {
    background-color: #d85c2c;
    transform: translateY(-2px);
}

/* Large tablets / smaller desktops */
@media (max-width: 1200px) {
    .hero-section { height: 70vh; padding-top: 10%; } /* added more top padding */
    .hero-content {
        margin-top: 0; /* remove margin since padding handles spacing */
    }
    .hero-content h1 { font-size: 3rem; }
    .hero-content p { font-size: 1.1rem; }
}

/* Tablets */
@media (max-width: 992px) {
    .hero-section { height: 60vh; padding-top: 12%; } /* increased top padding */
    .hero-content {
        margin-top: 0; 
    }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1rem; }
    .explore-btn { padding: 10px 25px; font-size: 0.95rem; }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section { height: 55vh; padding: 15% 15px 0 15px; } /* top padding 15% */
    .hero-content {
        margin-top: 0; 
    }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 0.95rem; }
    .explore-btn { padding: 8px 20px; font-size: 0.9rem; }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .hero-section { height: 50vh; padding: 18% 10px 0 10px; } /* top padding 18% for small screens */
    .hero-content {
        margin-top: 0; 
    }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content p { font-size: 0.85rem; margin-bottom: 15px; }
    .explore-btn { padding: 6px 15px; font-size: 0.85rem; }
}



/*============================================================================== ENd the header =================================================================*/

.search-buttons {
    display: flex;
    
    flex-wrap: wrap;
    justify-content: space-between; /* evenly fills row */
    gap: 0;                          /* remove gaps */
    width: 100%;
  }
  
  .search-btn {
    display: flex;           /* icon left, text right */
    align-items: center;
    width: 100%;             /* full screen width */
    height: 100px;           /* adjust height as needed */
    border-radius: 0;        /* edge-to-edge, no gaps */
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  /* for desktop - 3 buttons in a row */
  @media (min-width: 768px) {
    .search-btn {
      flex: 1;           /* distribute evenly */
      height: 150px;
    }
  }
  
  /* Icon section 20% */
  .search-btn i {
    width: 40%;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Text section 80% */
  .search-btn span {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    text-align: left;
  }
  
  .search-btn span small {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.8;
  }
  
  /* Hover effect */
  .search-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  }
  
  /* Individual card colors */
  .search-btn.glimpses { background: #e4405f; } /* pink/red */
  .search-btn.sss      { background: #1da1f2; } /* blue */
  .search-btn.lab      { background: #ff8800; } /* orange */
  

  





/* ============================================================ Notice list======================================================================== */
/* Grid layout for cards */


.cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 equal columns */
    grid-template-rows: repeat(2, 1fr);     /* 2 equal rows */
    gap: 20px;
    width: 100vw;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
  }
  /* Card base */
  .cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 equal columns */
    grid-template-rows: repeat(2, 1fr);     /* 2 equal rows */
    gap: 20px;
    width: 100vw;   /* full screen width */
    height: 100vh;  /* full screen height */
    padding: 20px;
    box-sizing: border-box;
  }
  
  /* Make each card fill its grid cell */
  .card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    border: 1px solid #e0e6ed;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;   /* 🔑 ensures equal height */
    overflow: hidden;
  }
  
  /* Scrollable area takes available space */
  .scroll-box {
    flex: 1;        /* fills remaining space */
    overflow-y: auto;
    padding: 10px;
  }
  
  
  /* Card Header */
  .card h2 {
    font-size: 18px;
    margin: 0;
    padding: 12px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #1e3a8a, #3182ce); /* default blue */
  }
  
  /* Each card custom header color */
  .notice-card h2 {
    background: linear-gradient(90deg, #b30000, #ff4d4d); /* red */
  }
  
  .card:nth-child(2) h2 {
    background: linear-gradient(90deg, #065f46, #10b981); /* green */
  }
  
  .card:nth-child(3) h2 {
    background: linear-gradient(90deg, #92400e, #f59e0b); /* amber */
  }
  
  .card:nth-child(4) h2 {
    background: linear-gradient(90deg, #1e3a8a, #2563eb); /* blue */
  }
  
  /* Scrollable content */
  .scroll-box {
    flex: 1; /* fill remaining space */
    overflow-y: auto;
    padding: 10px;
  }
  
  .notice-list {
    padding: 10px;
    list-style: none;
    margin: 0;
  }
  
  .notice-list li {
    padding: 6px 8px;
    margin-bottom: 6px;
    background: #f9fafc;
    border-radius: 6px;
    font-size: 14px;
  }
  
  .notice-list li:hover {
    background: #eef4ff;
  }
  
  /* Highlighted text */
  .highlight {
    font-weight: 700;
    background: linear-gradient(45deg, #ff4d4d, #b30000);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
  }
  
    .highlight-year {
      color: #d7141e;      /* Blue color */
      font-weight: bold;   /* Bold */
      background: #e6f0ff; /* Light blue background */
      padding: 2px 4px;
      border-radius: 4px;
    }
  
  /* View All button */
  .view-all-container {
    text-align: center;
    padding: 10px;
  }
  
  .view-all-btn {
    display: inline-block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(45deg, #3182ce, #1e4e8c);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s;
  }
  
  .view-all-btn:hover {
    background: linear-gradient(45deg, #ff4d4d, #b30000);
    transform: translateY(-2px);
  }
  
  /* Scrollbar styling */
  .scroll-box::-webkit-scrollbar {
    width: 6px;
  }
  .scroll-box::-webkit-scrollbar-thumb {
    background: #3182ce;
    border-radius: 6px;
  }
  .scroll-box::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  
  /* Mobile (max 768px) → 1 column (stacked cards) */
  @media (max-width: 768px) {
    .cards-container {
      grid-template-columns: 1fr;   /* single column */
      grid-template-rows: auto;     /* rows adjust automatically */
      width: 100%;                  /* full width */
      height: 100vh;                /* lock container to viewport height */
      padding: 10px;
      overflow-y: auto;             /* 🔑 enable vertical scroll inside */
      -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    }
  
    .card {
      height: 500px;   /* cards expand with content */
    }
  }
  
  
  



/* ------------------------------------------------------------------------Notice And Event---------------------------------------------------------------------- */



:root {
    --primary-blue: #1645a2;
    --secondary-orange: #e96b34;
    --text-dark: #222;
    --text-light: #fff;
    --bg-light: #fff;
}

/* --- SECTION STYLING --- */
.notice-section {
    padding: 60px 20px;
    background-color: var(--bg-light);
}

/* Section heading H2 */
.notice-section h2 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-dark);
    position: relative;
}

.notice-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-orange);
    margin: 8px auto 0;
}

/* --- CONTAINER --- */
.notice-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;

    
}

/* --- NOTICES BOX --- */
.notice-list-wrapper {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* darker and stronger shadow */
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: 0.3s ease; /* optional: smooth hover effect */
}

.notice-title {
    background-color: #f8f8f8;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px 20px;
    text-align: center; /* H3/Title in center */
    border-bottom: 1px solid #ddd;
}

.notice-title .fas {
    color: var(--secondary-orange);
    margin-right: 10px;
}

/* SCROLL AREA */
.scroll-area {
    height: 400px;
    overflow: hidden;
    position: relative;
}

.scroll-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
}

.notice-item {
    padding: 15px 20px;
    border-bottom: 1px dashed #eee;
    background-color: #fff;
    position: relative;

   
}



.notice-heading {
    text-align: center; /* Center each notice heading */
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.notice-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.notice-download {
    color: var(--secondary-orange);
    font-weight: 600;
    margin-left: 10px;
}

.notice-type {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #f0f0f0;
    color: var(--secondary-orange);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.read-more {
    font-size: 0.9rem;
    color: var(--primary-blue);
    font-weight: 600;
    margin-top: 5px;
    display: inline-block;
}

/* --- IMPORTANT LINKS BOX --- */
.important-links-sidebar {
    background-color: var(--primary-blue);
    color: var(--text-light);
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.important-links-sidebar h3 {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center; /* Centered heading */
    border-bottom: 2px solid var(--secondary-orange);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

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

.link-list li {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.link-list a {
    display: block;
    padding: 12px 0;
    color: var(--text-light);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.link-list a:hover {
    padding-left: 10px;
    background-color: rgba(0,0,0,0.1);
}

/* --- RESPONSIVE FOR TABLETS AND MOBILES --- */
@media (max-width: 992px) {
    .notice-container {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 30px;
        width: 100%; /* Full width */
        max-width: 100%; /* Prevent container limit */
        padding: 0; /* Remove container padding */
    }

    .notice-list-wrapper,
    .important-links-sidebar {
        width: 100%; /* Full width of container */
        max-width: 100%;
    }

    .scroll-area {
        height: 300px; /* Adjust scroll height */
        padding: 10px;
    }

    .notice-heading {
        font-size: 1rem;
    }

    .important-links-sidebar h3 {
        font-size: 1.2rem;
    }
}

/* For extra small devices (mobile phones) */
@media (max-width: 480px) {
    .notice-section {
        padding: 20px 10px;
    }

    .scroll-area {
        height: 400px; /* Smaller scroll box */
    }

    .notice-heading {
        font-size: 0.95rem;
    }

    .important-links-sidebar h3 {
        font-size: 1rem;
    }
}  





/* -------------------------------------------------------------------Statistics And Programs------------------------------------------------------------------------ */




.stats-section {
    text-align: center;
    padding: 40px 20px;
}

.stats-section h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
}

/* underline bar */
.stats-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-orange); /* or use #000000 for black */
    margin: 8px auto 0;
    border-radius: 5px;
}

/* MAIN BOX */
.main-box {
    background: #e8e8e8;
    padding: 30px;
    border-radius: 100px;
    max-width: 1300px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

/* EACH STAT INSIDE BOX */
.stat-item {
    width: 180px;
}

.stat-item h3 {
    font-size: 60px;
    color: #000000;
    margin: 0;
    font-weight: 700;
}

.stat-item p {
    font-size: 15px;
    font-weight: 100;
    margin-top: 8px;
}
/* ======= MOBILE RESPONSIVE FIX (VERTICAL) ======= */
@media (max-width: 600px) {
    .main-box {
        flex-direction: column;          /* Stack vertically */
        align-items: center;             /* Center align */
        gap: 40px;                       /* Gap between items */
        
        max-width: 250px;                /* Smaller box */
        padding: 20px;                   /* Less padding */
        border-radius: 65px;             /* Slightly reduced curve */
    }

    .stat-item {
        width: 100%;                     /* Full width */
        max-width: 240px;                /* Smaller item width */
        margin-bottom: 10px;             /* Spacing */
    }

    .stat-item h3 {
        font-size: 60px;                 /* Smaller number font */
    }

    .stat-item p {
        font-size: 20px;                 /* Smaller text */
    }
}







/* -----------------------------------------------------------------------Our Features-------------------------------------------------------------------------- */


.features-section {
    padding: 30px 20px;
}

/* --- Section Title Styling --- */
.section-title {
    font-size: 42px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    display: block;
    width: 150px; /* Width of the underline */
    height: 3px;
    background-color: #ff6633; /* Orange color for the underline */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* --- Features Row (The main container for the cards) --- */
.features-row {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Space between the cards */
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
}

/* --- Feature Card Styling --- */
.feature-card {
    flex: 1; /* Allows the cards to take equal space */
    min-width: 280px; /* Minimum width before wrapping */
    text-align: left;
    padding: 0 15px; /* Horizontal padding for alignment */
    /* Center the cards when they wrap */
    margin: 20px auto; 
}
.card-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #333;
    position: relative; /* Needed for pseudo-element positioning */
    display: inline-block; /* So underline fits text width */
}

/* Orange underline below the title */
.card-title::after {
    content: '';
    display: block;
    width: 50px;               /* Length of the underline */
    height: 3px;               /* Thickness */
    background-color: #ff6633; /* Orange color */
    margin-top: 5px;           /* Space between text and underline */
    border-radius: 2px;        /* Optional: rounded edges */
}
.card-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 25px;
}

/* --- Icon Box Styling --- */
.icon-box {
    width: 50px;
    height: 50px;
    border: 2px solid #ff6633; /* Orange border */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #ff6633; /* Orange icon color */
    margin-bottom: 10px;
}

/* --- Read More Button Styling --- */
.read-more-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ff6633; /* Orange border */
    color: #ff6633; /* Orange text color */
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}
/* Orange underline */
.mcc-section-title::after {
    content: '';
    display: block;
    width: 80px;               /* Width of the underline */
    height: 3px;               /* Thickness */
    background-color: #ff6633; /* Orange color */
    margin: 10px auto 0;       /* Space above and center */
    border-radius: 2px;        /* Optional rounded edges */
}

.read-more-btn:hover {
    background-color: #ff6633;
    color: #ffffff;
}


/* --- Responsive Adjustments (Media Query) --- */
@media (max-width: 992px) {
    /* On medium screens (e.g., tablets), display two cards per row */
    .features-row {
        justify-content: center; /* Center cards when they wrap */
    }
    .feature-card {
        flex: 0 1 calc(50% - 40px); /* Two cards per row with margin/gap adjustment */
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    /* On small screens (e.g., mobile phones), display one card per row */
    .feature-card {
        flex: 0 1 100%; /* Full width */
        max-width: none;
        padding: 0 10px;
        text-align: center; /* Center text for single column view */
    }
    
    .icon-box {
        margin: 0 auto 10px auto; /* Center the icon box */
    }
    
    .section-title {
        font-size: 30px;
    }
}



/* ----------------------------------------------------------------------Why SNC----------------------------------------------------------------------------- */




body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.mcc-container {
    max-width: 1300px; /* Optional: limit width */
    margin: 0 auto;    /* Center the container */
    padding: 0 20px;   /* Space on left and right */
}
.mcc-features-section {
    background-color: #1645a2; /* Dark Blue */
    color: #fff; 
    padding: 60px 20px;
}

.mcc-section-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 50px;
    color: #fff;
}

.mcc-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Each feature item: horizontally aligned, vertically centered, compact spacing */
.mcc-feature-item {
    display: flex;
    align-items: center; /* Center icon vertically with text */
    gap: 15px; /* Compact space between icon and text */
}

/* Circular icon */
.mcc-icon-circle {
    width: 80px;  /* slightly smaller for compactness */
    height: 80px;
    border-radius: 50%;
    background-color: #eae1dd; /* Light circle */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #151515;
    flex-shrink: 0;
    margin-bottom: 40px; /* Optional spacing under the icon */
}

/* Text container */
.mcc-feature-text {
    flex: 1;
}

/* Title with slight compact spacing */
.mcc-feature-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
}

/* Description smaller for compact layout */
.mcc-feature-description {
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    margin: 0; /* remove extra spacing */
}
/* Responsive */
@media (max-width: 992px) {
    .mcc-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mcc-features-grid {
        grid-template-columns: 1fr;
    }

    .mcc-feature-item {
        flex-direction: row;
        gap: 15px;
    }
}




/* ---------------------------------------------------------------------------Gallery------------------------------------------------------------------------ */

/* Overall Section Styling */
.gallery-section {
    padding: 60px 20px;
    text-align: center;
    background-color: white;
}

.gallery-title {
    font-size: 42px;
    margin-bottom: 10px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    color: #333;
}

.gallery-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 3px;
    background-color: #f07203;
    margin: 5px auto 0;
}

.gallery-caption {
    font-size: 16px;
    color: #666;
    margin-bottom: 90px; /* slightly smaller spacing */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Core Responsive Grid Layout --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto); /* reduced height for compactness */
    gap: 10px; /* smaller spacing between images */
}

.gallery-item {
    overflow: hidden;
    border-radius: 4px; /* slightly smaller radius */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* lighter shadow for compact look */
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

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

/* --- Specific Item Placement --- */
.item-1 { grid-column: span 2; grid-row: span 1; }
.item-2 { grid-column: span 1; grid-row: span 1; }
.item-3 { grid-column: span 1; grid-row: span 2; }
.item-4 { grid-column: span 3; grid-row: span 2; }
.item-5 { grid-column: 4 / 5; grid-row: 3 / 4; }
.item-6 { grid-column: 4 / 5; grid-row: 4 / 5; }


/* --- Responsiveness for Mobile/Tablet --- */
/* --- Responsive --- */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(100px, auto); /* smaller row height for tablets */
        gap: 8px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(100px, auto);
        gap: 6px;
    }
}









/* ----------------------------------------------------------------------------Principal Message------------------------------------------------------------------------- */



/* Overall Section Styling */
.principal-message-section {
    background-color: #f7f7f7; /* Light grey background */
    padding: 60px 20px;
    text-align: center;
}



.principal-message-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 50px;
    color: #040000;
    position: relative;
    display: inline-block;
}

/* Orange underline */
.principal-message-title::after {
    content: '';
    display: block;
    width: 80px;               /* Width of the underline */
    height: 3px;               /* Thickness */
    background-color: #ff6633; /* Orange color */
    margin: 10px auto 0;       /* Space above and center */
    border-radius: 2px;        /* Optional rounded edges */
}


/* --- Content Block Layout (Desktop) --- */

.message-content-block {
    display: flex;
    align-items: flex-start; /* Align columns at the top */
    justify-content: center;
    gap: 20px;
 
    padding: 0px;
    border-radius: 8px;
   
}

/* Image Column Styling */
.image-column {
    flex: 0 0 350px; /* Fixed width for the image container on desktop */
    text-align: center;
}

.principal-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Increased from 75% to 100% → taller (1:1 ratio) */
    position: relative;
    overflow: hidden;
    background-color: #a0c3e7; /* Light blue placeholder */
}

.principal-photo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the photo fills the space */
    display: block;
}

/* Name Tag Styling */
.principal-tag {
    background-color: #ff5722; /* Red-Orange color from the image */
    color: white;
    padding: 10px 0;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}

/* Message Column Styling */
.message-column {
    flex: 1; /* Takes up the remaining space */
    text-align: left;
    display: flex; /* Helps center the quote content if needed */
    align-items: center;
    min-height: 500px; /* Ensure message column matches image height */
}

/* Quote Styling */
.principal-quote {
    margin: -100px 0 0 0;  /* 20px top margin, 0 for right/bottom/left */
    padding-left: 0;
    color: #444;
    font-size: 17px;
    line-height: 1.6;
    font-style: italic;
    position: relative;
}


.quote-icon {
    font-size: 70px;
    color: #c0c0c0; /* Light grey quote icon */
    position: absolute;
    top: -25px;
    left: -20px;
    font-family: serif; /* Use a font that renders a classic quote mark */
    opacity: 0.6;
}

.principal-quote p {
    margin: 0 0 20px 0;
    padding-left: 40px; /* Space for the large quote icon */
}

.principal-quote cite {
    display: block;
    text-align: right;
    font-style: normal;
    font-weight: 600;
    color: #333;
    margin-top: 15px;
}
@media (max-width: 768px) {
    .message-content-block {
        flex-direction: column;      /* Stack items vertically */
        padding: 20px 15px;          /* Balanced padding */
        align-items: center;
        position: relative;
    }

    .image-column {
        width: 100%;
        max-width: 350px;            /* Controls image size */
        margin: 0 auto 20px auto;    /* Space below image */
        text-align: center;
    }

    .image-column img {
        width: 100%;
        height: auto;
        display: block;
    }

    .message-column {
        width: 100%;
        padding: 0 10px;
        text-align: center;
        position: relative;
        margin-top: 10px;            /* Prevents overlap */
    }

    .message-column p {
        margin: 10px 0;
        font-size: 16px;
        line-height: 1.6;
    }

    /* Fix quote spacing */
    .principal-quote {
        margin-top: 20px;            /* Push quote below image */
        position: relative;
    }

    .principal-quote p {
        padding-left: 0;             /* Remove heavy padding */
    }

    /* Fix quote icon overlapping */
    .quote-icon {
        font-size: 40px;
        top: -5px;
        left: -5px;
        position: absolute;
    }
}








/* ----------------------------------------------------------------------Quick Links------------------------------------------------------------------------------ */



/* Overall Section Styling */
.quick-links-section {
    background-color: white; /* Assuming a white background */
    padding: 40px 0;
    text-align: center;
}



.quick-links-title {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    color: #333;
}

.quick-links-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 3px;
    background-color: #ff8800; /* Yellow underline */
    margin: 5px auto 0;
}

/* --- Slider Core Styling --- */

/* 1. Track Container: Defines the visible window */
.slider-track-container {
    overflow: hidden; /* **Key:** Hides the repeating content */
    white-space: nowrap; /* Prevents logos from wrapping */
    position: relative;
    padding: 20px 0;
}

/* Optional: Add soft shadows/fades on the edges */
.slider-track-container::before,
.slider-track-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Allows interaction beneath the fade */
}

.slider-track-container::before {
    left: 0;
    /* Gradient from transparent to white */
    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
}

.slider-track-container::after {
    right: 0;
    /* Gradient from white to transparent */
    background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
}


/* 2. Slider Track: Holds all the content (original + duplicate) */
.slider-track {
    display: flex; /* Makes the logo groups sit side-by-side */
    width: fit-content; /* **Key:** Let the content define the width */
    animation: slide-left 35s linear infinite; /* Apply the animation */
}

/* Pause animation on hover */
.slider-track-container:hover .slider-track {
    animation-play-state: paused;
}


/* 3. Logo Group: Contains the set of logos */
.logo-group {
    display: flex;
    flex-shrink: 0; /* Prevents groups from shrinking */
    justify-content: space-around;
    align-items: center;
}

.logo-item {
    margin: 0 20px; /* Space between logos */
    padding: 10px;
    transition: transform 0.3s ease;
}

/* Image Styling */
.logo-item img {
    max-width: 100px; /* Max size for logos */
    height: 150px; /* Fixed height for consistent look */
    object-fit: contain; /* Ensures images are fully visible */
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1)); /* Optional subtle shadow */
}

/* Add slight hover interaction */
.logo-item:hover {
    transform: translateY(-5px);
}

/* --- The Animation Definition --- */

@keyframes slide-left {
    from {
        /* Start position (0% translation) */
        transform: translateX(0%);
    }
    to {
        /* End position: Translate left by 50% of the combined width, 
           moving exactly one full set of logos off-screen. */
        transform: translateX(-50%);
    }
}











/* --------------------------------------------------------------------------Footer--------------------------------------------------------------------------- */



/* Overall Footer Styling */
.main-footer {
    background-color: #0c1a3b; /* A deep dark blue/black fallback */
    background-image: url('images/1.jpg'); /* Replace with the actual image path */
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    position: relative;
}

.main-footer::before {
    /* Optional: Dark overlay for better text contrast, similar to the image */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* 60% black overlay */
    z-index: 0;
}

.main-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; /* Keep content above the overlay */
    z-index: 1; 
}

/* --- Top Row Layout (Desktop Grid) --- */

.footer-top-row {
    display: grid;
    /* Defines 3 columns: 1.5 parts for Logo, 2 parts for Map, 1.5 parts for Contact */
    grid-template-columns: 1.5fr 2fr 1.5fr; 
    gap: 30px;
    padding-bottom: 50px;
}

.footer-col {
    padding: 10px 0;
}

/* --- 1. Branding Column --- */

.footer-branding {
    display: flex;
    align-items: flex-start;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-logo {
    width: 80px; /* Size of the college emblem */
    height: auto;
}

.college-name-box {
    text-align: left;
}

.college-name {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.3;
}

.tagline {
    font-size: 12px;
    margin: 5px 0 0 0;
    color: #a0a0a0;
}

/* --- 2. Map Column --- */

.footer-map {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.map-embed-container {
    background-color: white;
    width: 100%;
    /* Fixed aspect ratio for the map image */
    padding-bottom: 60%; 
    height: 0;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.map-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-larger-map {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    color: white;
    padding: 8px 0;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.view-larger-map:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* --- 3. Contact Column --- */

.footer-contact {
    text-align: left;
}

.contact-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    position: relative;
    display: inline-block;
}

.contact-divider {
    width: 50px;
    height: 3px;
    background-color: #ff5722; /* Orange color from the image */
    margin: 5px 0 20px 0;
}

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

.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
}

.contact-list i {
    color: #ff5722; /* Orange icon color */
    font-size: 18px;
    margin-right: 15px;
    /* Adjust map marker position to align better */
    padding-top: 2px; 
}

.contact-list p {
    margin: 0;
    line-height: 1.4;
}

/* --- Bottom Bar --- */

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black bar */
    padding: 20px 0;
    font-size: 13px;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

/* --- Responsiveness (Mobile/Tablet) --- */

@media (max-width: 992px) {
    .footer-top-row {
        /* Switch to 2 columns on tablet: Map and Contact Info side-by-side */
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-branding {
        /* Branding takes full width on top */
        grid-column: 1 / -1; 
        justify-content: center;
        margin-bottom: 20px;
    }

    .college-name-box {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .footer-top-row {
        /* Stack all columns vertically on mobile */
        grid-template-columns: 1fr;
    }
    
    .footer-branding {
        text-align: center;
        grid-column: 1; /* Reset column span */
        justify-content: center;
        margin-bottom: 0;
    }
    
    .logo-container {
        flex-direction: column;
        text-align: center;
    }

    .college-name-box {
        text-align: center;
        margin-top: 10px;
    }

    .footer-contact {
        text-align: center; /* Center the contact title */
        margin-top: 30px;
    }
    
    .contact-divider {
        margin: 5px auto 20px auto; /* Center the divider */
    }

    .footer-map {
        order: 3; /* Move map to the bottom of the content blocks */
        margin-top: 30px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom-content p {
        margin: 5px 0;
    }
}