@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary: #013310;
  --secondary:#1a5f3a;
  --ternary: #727272;
  --black:#000000;
  --white: #FFFFFF;
  --grey: #828282;
  --warning: #EA9F48;
  --success: #4AB37B;
  --success-medium: #A9CCB9;
  --success-light: #CCEBDA;
  --error: #EF717D;
  --error-light: #FFF6F7;
  --gardient-1: linear-gradient(135deg, #013310 17.38%, #1a5f3a 99.89%);
  --jute-green: #02CF27; 
  --soft-mint: #f4fff4;
  --deep-forest: #052c05;
  --glass-white: rgba(255, 255, 255, 0.8);

}
body {
  font-family: "Noto Sans", sans-serif;;
  background-color: var(--white);
}
h1,h2,h3,h4,h5,h6{
    line-height: 1;
    font-family: "Noto Sans", sans-serif;;
}
h1 {
    font-size : 4.75rem;
    font-weight: 700;
    color: var(--white);
}
h2{
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--secondary);
}
h3{
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--white);
}
h4 {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary);
}
h5 {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--white);
}
h6 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-light);
}
.text-gd{
    background: var(--gardient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
p {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--black);
}
.btn {
    padding: 1rem 1.5rem;
    margin: 1rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn_primary {
    background: var(--gardient-1);
    border: 1px solid var(--white);
    color: var(--white);
    box-shadow: 0 10px 25px rgba(28, 92, 9, 0.3);
}

.btn_primary:hover {
    transform: scale(1.05);
    color: var(--white);
    border: 1px solid var(--white);
    box-shadow: 0 15px 35px rgba(9, 133, 25, 0.5);
    gap: 14px;
}

.btn_secondary {
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    box-shadow: 0 10px 25px rgba(65, 63, 63, 0.3);
}
.btn_secondary:hover {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(65, 63, 63, 0.3);
    gap: 14px;
}
.padding-top { padding-top: 5rem; }
.padding-bottom { padding-bottom: 5rem; }
.mendatory { color: var(--error); }
.container-fluid {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

.row {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.switch {
  position: relative;
  display: inline-block;
  margin: 16px;
  }

  .switch > span {
  position: absolute;
  top: 9px;
  pointer-events: none;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
  }

  input.check-toggle-round-flat:checked ~ .off {
  color: #000;
  }

  input.check-toggle-round-flat:checked ~ .on {
  color: #fff;
  }

  .switch > span.on {
  left: 0;
  padding-left: 5px;
  color: #000000;
  }

  .switch > span.off {
  right: 0;
  padding-right: 4px;
  color: #fff;
  }

  .check-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
  }
  .check-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }

  input.check-toggle-round-flat + label {
  padding: 2px;
  width: 100px;
  height: 35px;
  background-color: #000;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  }
  input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
  }

  input.check-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #000000;
  -webkit--moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  }
  input.check-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 48px;
  background-color: #fff;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -o-transition: margin 0.2s;
  transition: margin 0.2s;
  }

  input.check-toggle-round-flat:checked + label {
  }

  input.check-toggle-round-flat:checked + label:after {
  margin-left: 44px;
  }
  

/* General Navbar Styling */
.navigation {
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1050;
    transition: all 0.3s ease-in-out;
}
.navbar-nav {
    margin: 0 2rem;
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 1rem 1rem 1rem 1rem;
}
.nav-img {
    max-height: 70px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.nav-item .btn_primary{
    padding: .5rem 1.5rem;
}
.nav-link {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #333 !important;
    padding: 1rem 0.5rem;
}

.nav-link:hover {
    color: #02CF27 !important;
}
.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
    color: var(--white);
    text-decoration: none;
    background: var(--gardient-1);
}

/* Desktop Only: Symmetrical Centering */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        justify-content: space-between;
    }
    
    .navbar-nav.flex-fill {
        flex: 1 1 0% !important;
    }

    .navbar-brand {
        flex: 0 0 auto;
    }
}

/* Mobile Only Styling */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: #fff;
        padding: 20px 0;
        border-top: 1px solid #f1f1f1;
    }

    .nav-link {
        padding: 12px 0;
        border-bottom: 1px solid #f9f9f9;
    }

    .dropdown-menu {
        border: none;
        background: #fcfcfc;
        padding-left: 15px;
    }
    .navigation {
      padding: 0 2rem;
    }
    .navbar-nav {
        position: relative;
        left: 0;
        right: 0;
        padding: 0;
        height: 100vh;
        top: 0;
        background: transparent;
        display: unset;
    }
    .navbar-light .navbar-nav .nav-link {
        font-size: 1rem;
        text-align: left;
        border-bottom: 1px solid var(--white);
        padding: .5rem .5rem !important;
        border-radius: .5rem;
        margin: .5rem 0;
    }
     #mainNavbar {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #mainNavbar .navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
    }
  
}
/* The class added via JS */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    animation-duration: 0.5s;
    background-color: rgba(255, 255, 255, 0.95); /* Slight transparency */
    backdrop-filter: blur(10px); /* Modern blur effect */
}
/* Icon Colors */
.fa-home, .fa-phone-alt {
    color: #444;
}

.footer-section {
    background-color: #fcfcfc;
    border-top: 1px solid #eeeeee;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #02CF27; /* Brand Green */
    padding-left: 5px;
}

.footer-section h6 {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.social-links a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-3px);
}

.text-success {
    color: #02CF27 !important;
}

/* Make it look good on mobile */
@media (max-width: 768px) {
    .footer-section {
        text-align: center;
    }
    .footer-section .d-flex {
        justify-content: center;
        text-align: left;
    }
}

.page-banner {
    background: linear-gradient(180deg, #1e7a46 0%, #155e35 100%);
    height: 280px;
    display: flex;
    align-items: center;
    color: #ffffff;
    width: 100%;
}

.banner-wrapper {
    width: 100%;
}
.banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
    text-align: left;
}

.banner-subtitle p{
    color: var(--white);
    opacity: .8;
}

.login-btn{
    background: var(--primary);
    color: #ffffff !important;
}
.login-btn:hover{
    background: var(--secondary);
}
.notification{
    background: #013310;
}
.marquee-container {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.marquee {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
}

/* Left to right */
@keyframes marquee {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

/* --- Home CSS  --- */

.hero-slider .carousel-item {
    height: 100vh;
    min-height: 700px;
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

/* --- Centering Content --- */
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%; /* Important for vertical centering */
}

.hero-badge {
    background: rgba(2, 207, 39, 0.2);
    color: #02CF27;
    border: 1px solid #02CF27;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gradient-text {
    background: linear-gradient(90deg, #82ff1f, #02CF27);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.fw-800 { font-weight: 800; }
.bg-mesh {
    background: radial-gradient(circle at 10% 20%, #f4fff4 0%, #ffffff 80%);
}
.bg-mesh-2 {
    background: radial-gradient(circle at 10% 20%, #ffffff 0%, #f4fff4 70%);
}

/* Info Card Styling */
.info-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid #eee;
}

.bg-success-soft {
    background-color: rgba(2, 207, 39, 0.1) !important;
}

/* Data Tile Styling */
.stat-tile {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    border: 1px solid #eef0f2;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.stat-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.tile-icon {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #6c757d;
}

.counter-text {
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

/* Special Highlight for the last tile */
.highlight-tile {
    background: #02CF27; /* Your brand green */
    border: none;
}

.highlight-tile .tile-icon {
    color: #ffffff;
}

/* --- Cards & Stats --- */
.glass-card {
    background: white;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
    transition: 0.4s ease;
}
.glass-card:hover { transform: translateY(-10px); border-color: var(--jute-green); }

/* --- Product Grid --- */
.product-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1/1;
    margin-bottom: 20px;
}
.product-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.product-box:hover img { scale: 1.1; }
.product-label {
    position: absolute; bottom: 20px; left: 20px;
    background: white; padding: 10px 20px; border-radius: 12px; font-weight: 700;
}
/* --- End Home CSS  --- */

/* --- About CSS --- */
/* Sidebar Interaction */
.nav-link-hist {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 5px 0;
    transition: 0.3s;
    display: block;
}

.nav-link-hist:hover, .nav-link-hist.active {
    color: #02CF27; /* Your Green Branding */
    transform: translateX(5px);
}

/* Typography for long text */
.hs-text {
    font-size: 1.15rem;
    line-height: 1.85;
    color: #3a3a3a;
    margin-bottom: 1.25rem;
    text-align: justify;
}

.highlight-box {
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.history-content h3 {
    color: #1a1a1a;
    letter-spacing: -0.5px;
    font-weight: 700;
}

.bg-success-soft {
    background-color: rgba(2, 207, 39, 0.08);
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .hs-text {
        text-align: left;
        font-size: 1.05rem;
    }
}
.mission-vision-section {
    background-color: #f8f9fa; /* Light gray background to make cards pop */
}

/* Card Styling */
.mv-card {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 4px; /* Very slight rounding as per image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: none;
}

.mv-card:hover {
    transform: translateY(-5px);
}

/* Icon Styling */
.mv-icon {
    width: 65px;
    height: 65px;
    background-color: #1a5e38; /* Matching the jute green */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 25px;
}

/* Typography */
.mv-title {
    color: #1a5e38;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.mv-text {
    color: #555555;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
}


/* ---End About CSS --- */

/* ---Department CSS --- */
.dept-details-section {
    background-color: #ffffff;
}

/* Icon Container */
.info-icon {
    width: 50px;
    height: 50px;
    background-color: #1a5e38; /* Theme Green */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* Typography */
.info-title {
    color: #1a5e38;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 5px; /* Aligns title top with icon top */
}

.info-text {
    color: #444;
    line-height: 1.7;
    font-size: 16px;
}

/* List Styling */
.info-list {
    list-style: none;
    padding-left: 0;
}

.info-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: #444;
}

/* Custom Bullet Points */
.info-list li::before {
    content: "•";
    color: #1a5e38;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 10px;
}
/* Header Styling */
.service-header-icon {
    width: 45px;
    height: 45px;
    background-color: #1a5e38;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.service-main-title {
    color: #1a5e38;
    font-weight: 700;
    font-size: 32px;
}

/* Service Card Styling */
.service-item {
    background-color: #ffffff;
    padding: 25px 30px;
    border-left: 5px solid #1a5e38; /* The distinctive green accent */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    align-items: center;
    color: #444;
    font-size: 17px;
    transition: all 0.3s ease;
}

.service-item:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(5px); /* Subtle slide effect on hover */
}

/* Background adjustment for section */
.services-section {
    background-color: #fcfcfc;
}

/* Header & Intro */
.charter-header-icon {
    width: 45px;
    height: 45px;
    background-color: #1a5e38;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;      /* Vertically center icon */
    justify-content: center;   /* Horizontally center icon */
    font-size: 20px;
}

.charter-main-title {
    color: #1a5e38;
    font-weight: 700;
    font-size: 32px;
}

.charter-intro {
    color: #666;
    font-size: 18px;
}

/* List Item Styling */
.charter-item {
    background-color: #f8f9fa; /* Very light gray background */
    padding: 20px 25px;
    margin-bottom: 15px;      /* Spacing between items */
    border-left: 4px solid #1a5e38;
    color: #444;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.charter-item:hover {
    background-color: #f1f1f1;
}
.policies-section {
    background-color: #f8f9fa;
}

.policy-header-icon {
    width: 45px;
    height: 45px;
    background-color: #1a5e38;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.policy-main-title {
    color: #1a5e38;
    font-weight: 700;
}
/* Policy Card Container */
.policy-card {
    background: #ffffff;
    padding: 20px 40px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Individual Item Styling */
.policy-item {
    padding: 25px 0;
    border-bottom: 1px solid #eeeeee;
}

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

.policy-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 5px;
}

.policy-desc {
    font-size: 15px;
    color: #666666;
    margin-bottom: 0;
}

/* Hover Effect */
.policy-item:hover .policy-name {
    color: #1a5e38;
    transition: color 0.3s ease;
}

/* Enhanced Beautiful PDF Button Style */
.btn-pdf {
    background-color: transparent;
    color: #dc3545; /* Clean PDF Red */
    border: 1px solid #dc3545;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-pdf:hover {
    background-color: #dc3545;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.btn-pdf svg {
    transition: transform 0.2s ease;
}

.btn-pdf:hover svg {
    transform: scale(1.1);
}

.team-section {
    background-color: #fcfcfc;
}

.team-header-icon {
    width: 45px;
    height: 45px;
    background-color: #1a5e38;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.team-main-title {
    color: #1a5e38;
    font-weight: 700;
}

/* Card Styling */
.team-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
}

.member-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #000;
}

.member-role {
    color: #1a5e38;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 15px;
}

.member-contact p {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

/* Individual Card Styling */
.team-card {
    background-color: #f8faf9; /* The light gray background from your image */
    padding: 30px;
    border-radius: 4px;
    border: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.team-card:hover {
    background-color: #f1f1f1;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.team-info {
    background: transparent; 
}

/* Image Container */
.team-img-wrapper {
    flex-shrink: 0;
    margin-left: 15px;
}

.team-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: fill;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* --- End Department CSS --- */

/* --- Media CSS --- */

/* Filter Buttons */
.btn-filter {
    border-radius: 50px;
    padding: 8px 24px;
    margin: .25rem;
    background-color: #f0f2f5;
    color: #444;
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-filter:hover {
    background-color: #e2e6ea;
}

.btn-filter.active {
    background-color: #1a5e38; /* Theme Green */
    color: #fff;
}

/* Gallery Images */
.gallery-item {
    transition: all 0.4s ease-in-out;
}

.gallery-card {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gallery-card img {
    width: 100%;
    height: 250px; /* Fixed height for uniformity */
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}
/* Section Header Styling */
.video-header-icon {
    width: 45px;
    height: 45px;
    background-color: #1a5e38; /* Theme Green */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.video-main-title {
    color: #1a5e38;
    font-weight: 700;
}

/* Card & Video Container */
.video-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Soft shadow */
    height: 100%;
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-thumb-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Fixed 16:9 Aspect Ratio */
    background: #000;
}

.gallery-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* UI Elements */
.video-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #1a5e38; /* Green badge */
    padding: 6px 12px;
    font-weight: 500;
    border-radius: 50px;
    z-index: 2;
    pointer-events: none; /* Allows clicks to pass through to the video */
}

.video-body {
    padding: 20px;
}

.video-title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.section-main-title {
    font-weight: 700;
    font-size: 28px;
    color: #0d1b2a;
    margin-bottom: 30px;
}

/* Card Container */
.pub-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eef0f2;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Force same height for all images */
.pub-img-container {
    height: 350px; /* Adjust this to control overall height */
    overflow: hidden;
}

.pub-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This keeps aspect ratio without stretching */
    transition: transform 0.5s ease;
}

.pub-card:hover .pub-img {
    transform: scale(1.05);
}

/* Content Area */
.pub-body {
    padding: 20px;
    flex-grow: 1; /* Pushes button to the bottom if title is short */
    display: flex;
    flex-direction: column;
}

.pub-badge {
    background-color: #f1f8f5;
    color: #1a5e38;
    font-weight: 500;
    border-radius: 32px;
    padding: 8px 10px;
}

.pub-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
    line-height: 1.4;
}

.pub-meta {
    font-size: 13px;
    color: #6c757d;
}

/* Download Button Styling */
.btn-download {
    background-color: #1a5e38;
    color: #fff;
    padding: .5rem 1.5rem;
    margin: auto;
    transition: background 0.3s ease;
}

.btn-download:hover {
    background-color: #144a2c;
    color: #fff;
}
/* --- End Media CSS --- */

/* --- Database CSS --- */
.data-section {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Gradient Stat Cards */
.stat-card {
    padding: 30px 20px;
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover { transform: translateY(-5px); }
.stat-card h3 { font-size: 32px; font-weight: 800; margin-bottom: 5px; }
.stat-card p { color:var(--white); font-size: 14px; margin: 0; opacity: 0.9; }

.grad-blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.grad-green { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.grad-orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.grad-purple { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); }

/* Table Container Card */
.content-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #f1f1f1;
}

/* Status Badges */
.badge-status {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.badge-status.active { background-color: #dcfce7; color: #166534; }
.badge-status.pending { background-color: #fef9c3; color: #854d0e; }

/* Action Button */
.btn-view {
    color: #1a5e38;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-export-all {
    background-color: #1a5e38;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.btn-export-all:hover { background-color: #144a2c; color: white; }
/* Search Wrapper Design */
.search-wrapper {
    position: relative;
}

.search-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
}

.search-wrapper .form-control {
    padding-left: 40px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Table Row Comfort & Stripes */
.custom-table {
    border-collapse: separate;
    border-spacing: 0;
}

.custom-table thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    padding: 15px;
    border-bottom: 2px solid #e9ecef;
}

.custom-table tbody td {
    padding: 18px 15px; /* Increased padding to remove congestion */
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f1f1;
}

/* Zebra Striping (Even/Odd colors) */
.custom-table tbody tr:nth-child(odd) td {
    background-color: #f1f1f1;
}

.custom-table tbody tr:nth-child(even) td {
    background-color: #fafbfc;
}

/* Hover effect */
.custom-table tbody tr:hover {
    background-color: #f1f8f5 !important;
    transition: background-color 0.2s ease;
}

/* --- End Database CSS --- */

/* --- Analytics CSS --- */

/* Container Card Styling */
.analytics-card {
    padding: 30px;
    border-radius: 20px;
    color: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.analytics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Specific Gradients from image_53ee6b.png */
.grad-dark-green {
    background: linear-gradient(135deg, #1e5f3c 0%, #2a7d52 100%);
}

.grad-mid-green {
    background: linear-gradient(135deg, #328f5e 0%, #41a673 100%);
}

.grad-light-green {
    background: linear-gradient(135deg, #46a178 0%, #5cb88f 100%);
}

/* Text Elements */
.metric-label {
    color: var(--white);
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 8px;
}

.metric-value {
    color: var(--white);
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 0;
}

.metric-unit {
    color: var(--white);
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 20px;
}

.metric-trend {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.95;
}

.charts-section .btn_primary, .charts-section .btn_secondary{
    margin: .25rem;
    padding: .5rem 1.5rem;
}
.charts-section .btn_secondary{
    color: var(--deep-forest);
}
/* Icon Box */
.metric-icon {
    background: rgba(255, 255, 255, 0.15);
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    backdrop-filter: blur(4px);
}
.chart-title {
    font-size: 20px;
    font-weight: 700;
    color: #0d1b2a;
}

.content-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #f1f3f5;
}

/* Custom Table Adjustments for charts section */
.custom-table thead th {
    background-color: #f8f9fa;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.search-wrapper {
    position: relative;
}
.search-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
}
.search-wrapper .form-control {
    padding-left: 35px;
}
/* --- End Analytics CSS --- */

/* --- Contact CSS --- */
    .contact-card {
        background: var(--white);
        border: 1px solid #f1f1f1;
        border-radius: 1rem;
        padding: 2.5rem;
        height: 100%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    }

    .card-title { font-weight: 500; margin-bottom: 1.5rem; }

    /* --- Form Styling --- */
    .form-label { font-weight: 500; font-size: 0.9rem; color: #444; }
    .form-control, .form-select {
        border-radius: .75rem;
        padding: .75rem 1rem;
        border: 1px solid #e0e0e0;
        background-color: #fdfdfd;
    }
    .form-control:focus {
        border-color: var(--secondary);
        box-shadow: 0 0 0 0.25rem rgba(230, 57, 70, 0.1);
    }

    .btn-send {
        background-color: var(--secondary);
        color: var(--white);
        border: none;
        padding: 1rem;
        border-radius: .75rem;
        font-weight: 600;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: 0.3s;
    }
    .btn-send:hover { background-color: var(--jute-green); transform: translateY(-2px); }

    /* --- Info Side Styling --- */
    .info-item { display: flex; gap: 20px; margin-bottom: 1.5rem; }
    .info-icon {
        min-width: 50px; height: 50px;
        background-color: var(--secondary);
        color: var(--white);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }
    .info-content a { color: var(--gray); }
    .info-content h6 { font-weight: 700; margin-bottom: 5px; }
    .info-content p { color: var(--gray); font-size: 0.95rem; margin: 0; line-height: 1.5; }

    /* Why Contact Us List */
    .why-list { list-style: none; padding: 0; }
    .why-list li { display: flex; align-items: center; gap: 10px; margin-bottom: .75rem; color: var(--gray-light); font-size: 0.95rem; }
    .why-list li i { color: var(--secondary); font-size: 0.8rem; }

    .map {
        width: 100%;
        height: 300px;
        border-radius: 1rem;
    }

/* --- End Contact CSS --- */
@media screen and (max-width: 991px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    p {
        font-size: .85rem;
    }
    .padding-top {
        padding-top: 3rem;
    }

    .padding-bottom {
        padding-bottom: 3rem;
    }
    .btn {
        padding: .75rem 1rem;
        margin: .5rem .5rem;
        font-size: 1rem;
    }
}