/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 html, body {
     height: 100%;
     font-family: 'Orbitron', sans-serif;
     background: #ffffff;
     color: #111;
     overflow-x: hidden;
}
 a {
     text-decoration: none;
     color: inherit;
}
 ul {
     list-style: none;
}
/*────────────────────────────────────────────────────────────────────────── LAYOUT STRUCTURE ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}
 main {
     padding-top: 5rem;
    /* account for header height */
     padding-bottom: 4rem;
    /* account for footer height */
     min-height: calc(100vh - 9rem);
     display: flex;
     flex-direction: column;
     align-items: center;
     background: #ffffff;
     padding-left: 2rem;
     padding-right: 2rem;
}
.search-box {
  display: flex;  /* Or block */
  gap: 10px;
}

.mobile_view {
  display: flex !important;  /* ensure it's visible */
}

input[type="text"] {
  flex: 1;
  padding: 8px;
}
@media (max-width: 600px) {
  .mobile_view {
    display: none; /* ❌ this will hide the search bar */
  }
}

/*────────────────────────────────────────────────────────────────────────── HEADER STYLES (INCLUDING BURGER MENU) ──────────────────────────────────────────────────────────────────────────*/
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
/* Standard nav-links */
 .nav-links {
     display: none;
     gap: 1.5rem;
}

 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Burger icon */
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
/* Mobile nav overlay */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
    /* <-- Raised above header’s z-index */
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
/* Close button inside overlay */
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
/*────────────────────────────────────────────────────────────────────────── TOAST / NOTIFICATION STYLES ──────────────────────────────────────────────────────────────────────────*/
 #toast-container {
     position: fixed;
     bottom: 1.5rem;
     right: 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     z-index: 9999;
     pointer-events: none;
    /* doesn’t block clicks */
}
 .toast {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(25, 25, 25, 0.95);
     color: #fff;
     padding: 0.75rem 1rem;
     border-radius: 6px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.4);
     font-size: 0.95rem;
     opacity: 0;
     transform: translateX(100%);
     animation: slideIn 0.4s forwards, fadeOut 0.4s forwards 3.6s;
}
 .toast .emoji {
     font-size: 1.3rem;
}
 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateX(100%);
    }
     to {
         opacity: 1;
         transform: translateX(0);
    }
}
 @keyframes fadeOut {
     from {
         opacity: 1;
    }
     to {
         opacity: 0;
    }
}
/*────────────────────────────────────────────────────────────────────────── DATE & TIME DISPLAY ──────────────────────────────────────────────────────────────────────────*/
 .date-time {
     text-align: center;
     font-size: 1rem;
     color: #555;
     margin-bottom: 0.5rem;
}
/*────────────────────────────────────────────────────────────────────────── WEATHER BOX STYLES ──────────────────────────────────────────────────────────────────────────*/
 .weather-container {
     background: rgba(240, 248, 255, 0.90);
     border: 2px solid #0a8bf2;
     border-radius: 12px;
     padding: 2rem 2.5rem;
     max-width: 360px;
     width: 90%;
     text-align: center;
     box-shadow: 0 0 20px rgba(10, 139, 242, 0.3);
     backdrop-filter: blur(4px);
     position: relative;
}
 .weather-container h2 {
     font-size: 2rem;
     margin-bottom: 1rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.8);
}
 .weather-container img {
     width: 80px;
     height: 80px;
     margin: 0.5rem 0;
}
 .weather-container p {
     margin: 0.4rem 0;
     font-size: 1rem;
     color: #111;
}
 .weather-container .small {
     font-size: 0.85rem;
     color: #555;
}
 .loading, .error {
     font-size: 1rem;
     color: #c0392b;
     text-shadow: 0 0 6px rgba(192, 57, 43, 0.7);
}
/*────────────────────────────────────────────────────────────────────────── ABOUT SECTION STYLES ──────────────────────────────────────────────────────────────────────────*/
 .about {
     max-width: 800px;
     margin: 2rem auto;
     padding: 1.5rem;
     background: rgba(240, 248, 255, 0.90);
     border: 1px solid #0a8bf2;
     border-radius: 8px;
}
 .about h2 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
     color: #0a8bf2;
     text-align: center;
}
 .about p {
     font-size: 1rem;
     line-height: 1.5;
     color: #111;
     text-align: justify;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER STYLES ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 
  @media (max-width: 1400px) {
 .nav-links li a {
  font-size: 12px;
}
.nav-links {
  gap: .0rem !important;
}
}
  @media (max-width: 1200px) {
.nav-links {
  gap: .0rem !important;
}
header a {
  margin: 0 0.6rem !important;
}
}
 @media (max-width: 1130px) {
     /* Hide nav-links, show burger */
     .nav-links {
         display: none !important;
    }
     .burger {
         display: flex !important;
    }  
 }
 @media (max-width: 768px) {
  
   .goog-te-gadget img {
  display: none !important;
}
    /* Weather container adjustments */
     .weather-container {
         padding: 1.5rem 1.8rem;
    }
     .weather-container h2 {
         font-size: 1.75rem;
    }
     .about {
         padding: 1rem;
    }
     .about h2 {
         font-size: 1.25rem;
    }
     .about p {
         font-size: 0.95rem;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .weather-container {
         padding: 1.2rem 1.5rem;
    }
     .weather-container h2 {
         font-size: 1.5rem;
    }
     .date-time {
         font-size: 0.9rem;
    }
     .about {
         margin: 1rem;
         padding: 1rem;
    }
     .about h2 {
         font-size: 1.1rem;
    }
     .about p {
         font-size: 0.9rem;
    }
}
 .nav-links {
     display: flex;
     gap: 1.5rem;
}
 .has-submenu {
     position: relative;
}
 .submenu {
     position: absolute;
     top: 100%;
     left: 0;
     background: rgba(25, 25, 25, 0.95);
     list-style: none;
     padding: 0.5rem 0;
     display: none;
     border-radius: 4px;
}
 .submenu li a {
     display: block;
     padding: 0.5rem 1rem;
     color: #eee;
     white-space: nowrap;
}
 .submenu li a:hover {
     background: #0a8bf2;
     color: #fff;
}
 .has-submenu:hover .submenu {
     display: block;
}
 .button-group {
     display: flex;
     justify-content: center;
    /* centers buttons horizontally */
     gap: 0.75rem;
    /* space between buttons */
     flex-wrap: wrap;
    /* allow wrapping on small screens */
     margin: 2rem 0;
    /* vertical spacing above/below */
}
 .btn {
     display: inline-block;
     padding: 0.6rem 1.2rem;
     background-color: #0a8bf2;
     color: #fff;
     text-decoration: none;
     font-weight: 500;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.2s ease;
}
 .btn:hover {
     background-color: #076cb0;
}
 .white-link {
     color: #fff;
}
 .link-row {
     display: inline-flex;
     gap: 1rem;
    /* spacing between links */
}
/* RESET & BASE */


/* CSS */
/* Header & Footer base styles */
 header, footer {
     position: fixed;
     left: 0;
     width: 100%;
     background: rgba(25,25,25,0.95);
     display: flex;
     align-items: center;
     padding: 1rem 2rem;
     box-shadow: 0 2px 8px rgba(0,0,0,0.25);
     z-index: 10;
}
/* Header specific */
 header {
     top: 0;
     justify-content: space-between;
     border-bottom: 1px solid #333;
}
/* Footer specific */
 footer {
     bottom: 0;
     justify-content: center;
     border-top: 1px solid #333;
}
/* Logo */
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10,139,242,0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
}
/* Make footer text and links white */
 footer {
     color: #fff;
    /* base text color */
}
 footer .nav-links li a {
     color: #fff;
    /* links */
}
 footer .nav-links li a:hover {
     color: #0a8bf2;
    /* keep your hover accent */
}
/* Nav Links (shared) */
 .nav-links {
     display: flex;
     gap: 1.5rem;
     list-style: none;
     margin: 0;
     padding: 0;
}
 .nav-links li a {
     text-decoration: none;
}
 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 2px;
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Ensure main content isn’t hidden under fixed header/footer */

 -links li a:hover::after {
     width: 60%;
}
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
     margin: 1rem 0;
}
/* SEARCH BOX */
 .search-container {
     /*max-width: 600px;*/
     /*margin: 2rem auto;*/
     /*padding: 0 1rem;*/
     width: 100%;
  max-width: 1000px;
  margin-top: 2rem;
  margin-bottom: 5rem;
}
 h1 {
     text-align: center;
     color: #0a8bf2;
     margin-bottom: 1.5rem;
     text-shadow: 0 0 6px rgba(10, 139, 242, 0.7);
}
 .search-box {
     display: flex;
     margin-bottom: 0px;
     width: 70%;
}
 .search-box input[type="text"] {
     /* flex: 1; */
   padding: 5px 10px;
     border: 2px solid #0a8bf2;
     border-right: none;
     border-radius: 8px 0 0 8px;
     font-size: 1rem;
}
 .search-box button {
     padding: 5px 10px;
     background: #0a8bf2;
     color: #fff;
     border: 2px solid #0a8bf2;
     border-radius: 0 8px 8px 0;
     font-size: 1rem;
     cursor: pointer;
     transition: background 0.2s ease;
}
 .search-box button:hover {
     background: #076cb0;
}
/*──────────────────────────────────────────────────────────────────────── Responsive adjustments ────────────────────────────────────────────────────────────────────────*/
/* Tablet and small desktop */
 @media (max-width: 768px) {
     .search-container {
         max-width: 100%;
         margin: 1.5rem auto;
    }
     h1 {
         font-size: 1.75rem;
         margin-bottom: 1.25rem;
    }
     .search-box input[type="text"], .search-box button {
         font-size: 0.9rem;
         padding: 0.65rem;
    }
}
/* Mobile phones */
 @media (max-width: 480px) {
     .search-box {
         flex-direction: column;
    }
     .search-box input[type="text"] {
         border-radius: 8px;
         border-right: 2px solid #0a8bf2;
         margin-bottom: 0.5rem;
    }
     .search-box button {
         border-radius: 8px;
         width: 100%;
    }
     h1 {
         font-size: 1.5rem;
         margin-bottom: 1rem;
    }
}
/* RESULT CARDS */
 .results {
     /*margin-top: 2rem;*/
     /*display: grid;*/
     /*grid-template-columns: 1fr;*/
     /*gap: 1rem;*/
     display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
 .result-item {
     padding: 1rem;
     background: rgba(240,248,255,0.95);
     border: 2px solid #0a8bf2;
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(10,139,242,0.3);
     transition: transform 0.2s ease;
}
 .result-item:hover {
     transform: translateY(-4px);
}
 .result-item a {
     font-size: 1.1rem;
     font-weight: 700;
     color: #0a8bf2;
}
 .result-meta {
     margin-top: 0.5rem;
     font-size: 0.95rem;
     color: #333;
}
/* NO RESULTS */
 .no-results {
     text-align: center;
     margin-top: 2rem;
     font-size: 1.1rem;
     color: #555;
}
/* RESPONSIVE */
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .search-box {
         flex-direction: column;
    }
     .search-box input[type="text"], .search-box button {
         width: 100%;
         border-radius: 8px;
    }
     .search-box input[type="text"] {
         margin-bottom: 0.5rem;
    }
    /* full-screen overlay */
     #loader {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(255,255,255,0.8);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 9999;
    }
    /* spinner graphic */
     .spinner {
         width: 50px;
         height: 50px;
         border: 5px solid #ccc;
         border-top-color: #333;
         border-radius: 50%;
         animation: spin 1s linear infinite;
    }
     @keyframes spin {
         to {
             transform: rotate(360deg);
        }
    }
}
/* state page */
/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/

 ul {
     list-style: none;
}
/*────────────────────────────────────────────────────────────────────────── LAYOUT STRUCTURE ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}

/*────────────────────────────────────────────────────────────────────────── HEADER STYLES (INCLUDING BURGER MENU) ──────────────────────────────────────────────────────────────────────────*/
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
/* Standard nav-links */
 .nav-links {
     display: flex;
     gap: 1.5rem;
}

 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Burger icon */
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
/* Mobile nav overlay */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
    /* <-- Raised above header’s z-index */
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
/* Close button inside overlay */
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
/*────────────────────────────────────────────────────────────────────────── BROWSING‐PAGE STYLES ──────────────────────────────────────────────────────────────────────────*/
 .browse-container {
  width: 100%;
  max-width: 1000px;
  margin-top: 2rem;
  margin-bottom: 5rem;
}
 .browse-container h1 {
     font-size: 2rem;
     color: #0a8bf2;
     margin-bottom: 1rem;
     text-align: center;
     text-shadow: 0 0 6px rgba(10, 139, 242, 0.7);
}
 .browse-list {
     list-style: none;
     padding-left: 0;
}
 .browse-list li + li {
     margin-top: 0.75rem;
}
 .browse-list a {
     display: block;
     padding: 0.75rem 1rem;
     background: rgba(240, 248, 255, 0.95);
     font-size: 1rem;
     color: #111;
     transition: background 0.2s ease, box-shadow 0.2s ease;
}
 .no-items {
     text-align: center;
     font-size: 1.1rem;
     color: #555;
     margin-top: 2rem;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER STYLES ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
.mobile_view
{
    display: none !important;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 @media (max-width: 768px) {
     .mobile_view
{
 display: flex !important;
    width: 100%;
    margin-bottom: 18px;
}

.desktop_view {
  display: none !important;

}
#google_translate_element {
width: 115px important;
  overflow: hidden important;
}
#google_translate_element a {
font-size: 10px !important;
}
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .browse-container {
         margin-top: 1.5rem;
         padding: 0 1rem;
    }
     .browse-container h1 {
         font-size: 1.6rem;
    }
     .browse-list a {
         font-size: 0.95rem;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .browse-container h1 {
         font-size: 1.4rem;
    }
     .browse-list a {
         font-size: 0.9rem;
    }
}
/* state page */
/* contact page */
/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/


 a {
     text-decoration: none;
     color: inherit;
}
 ul {
     list-style: none;
}
 input, textarea {
     font-family: 'Orbitron', sans-serif;
     outline: none;
     border: 2px solid #0a8bf2;
     border-radius: 6px;
     padding: 0.75rem 1rem;
     font-size: 1rem;
     width: 100%;
     background: rgba(240, 248, 255, 0.95);
     color: #111;
     transition: border-color 0.2s ease;
}
 input:focus, textarea:focus {
     border-color: #0a9ff5;
}
 button {
     font-family: 'Orbitron', sans-serif;
     background: #0a8bf2;
     color: #fff;
     border: none;
     border-radius: 6px;
     padding: 0.75rem 1.5rem;
     font-size: 1rem;
     cursor: pointer;
     transition: background 0.2s ease;
}
 button:hover {
     background: #0a9ff5;
}
/*────────────────────────────────────────────────────────────────────────── LAYOUT STRUCTURE ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     border-top: 1px solid #333;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 1rem 2rem;
}


/*────────────────────────────────────────────────────────────────────────── HEADER STYLES (INCLUDING BURGER MENU) ──────────────────────────────────────────────────────────────────────────*/
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
/* Standard nav-links */
 .nav-links {
     display: flex;
     gap: 1.5rem;
}

 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Burger icon */
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
/* Mobile nav overlay */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
    /* <-- Raised above header’s z-index */
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
/* Close button inside overlay */
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
.browse-list {
  list-style: none;
  padding: 0;
}
.village-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.village-link {
  flex-grow: 1;
  text-decoration: none;
  color: inherit;
}
.info-link {
  margin-left: 0.5rem;
  font-size: 1.2rem;
  text-decoration: none;
}
.info-link:hover {
  opacity: 0.7;
}

/*────────────────────────────────────────────────────────────────────────── CONTACT FORM STYLES ──────────────────────────────────────────────────────────────────────────*/
 .contact-container {
     max-width: 600px;
     width: 100%;
     margin-top: 2rem;
     border: 2px solid #0a8bf2;
     border-radius: 8px;
     background: rgba(240, 248, 255, 0.95);
     padding: 2rem;
     box-shadow: 0 0 12px rgba(10, 139, 242, 0.2);
     margin-bottom: 5rem;
}
 .contact-container h1 {
     font-size: 2rem;
     color: #0a8bf2;
     margin-bottom: 1rem;
     text-align: center;
     text-shadow: 0 0 6px rgba(10, 139, 242, 0.7);
}
 .form-group {
     margin-bottom: 1.25rem;
}
 .form-group label {
     display: block;
     font-size: 1rem;
     font-weight: 600;
     color: #111;
     margin-bottom: 0.5rem;
}
 .form-group input, .form-group textarea {
     width: 100%;
}
 .form-group textarea {
     resize: vertical;
     min-height: 120px;
}
 .submit-btn {
     display: block;
     margin: 1rem auto 0 auto;
     text-align: center;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER CONTENT STYLES ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
     justify-content: center;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     width: 100%;
     text-align: center;
     font-size: 0.85rem;
     color: #777;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .contact-container {
         padding: 1rem;
         margin: 1.5rem auto;
    }
     .contact-container h1 {
         font-size: 1.75rem;
    }
     .form-group label, .form-group input, .form-group textarea {
         font-size: 0.95rem;
    }
     button {
         width: 100%;
         padding: 0.75rem;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .contact-container h1 {
         font-size: 1.5rem;
    }
     .form-group label, .form-group input, .form-group textarea {
         font-size: 0.9rem;
    }
}
 .logo a {
     color: inherit;
    /* keep the same color as .logo */
     text-decoration: none;
    /* remove the underline */
     display: inline-block;
    /* ensures hover effects, if any, work nicely */
}
/* contact page */
/* privacy page */
/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/

 ul {
     list-style: none;
}
/*────────────────────────────────────────────────────────────────────────── HEADER & FOOTER ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
 .nav-links {
     display: flex;
     gap: 1.5rem;
}

 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
/*────────────────────────────────────────────────────────────────────────── MAIN CONTENT ──────────────────────────────────────────────────────────────────────────*/


 h1 {
     text-align: center;
     color: #0a8bf2;
     margin-bottom: 1rem;
}
 h2 {
     color: #0a8bf2;
     margin-top: 1.5rem;
}
 p {
     margin: 0.75rem 0;
     line-height: 1.6;
}
 ul {
     margin: 0.75rem 0 0.75rem 1.5rem;
     line-height: 1.6;
}
 ul li {
     margin-bottom: 0.5rem;
}
 a {
     color: #0a8bf2;
}
 a:hover {
     text-decoration: underline;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER SOCIAL ICONS ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .container {
         margin-top: 1rem;
         padding: 1rem;
    }
     h1 {
         font-size: 1.6rem;
    }
     h2 {
         font-size: 1.3rem;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .container {
         padding: 0.75rem 1rem;
    }
     h1 {
         font-size: 1.4rem;
    }
     h2 {
         font-size: 1.2rem;
    }
     ul {
         margin-left: 0rem;
    }
}
/* privacy page */
/* districts page */
/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/

 ul {
     list-style: none;
}
/*────────────────────────────────────────────────────────────────────────── LAYOUT STRUCTURE ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
    /* dark translucent bar */
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     bottom: 0;
    /* pin to bottom */
     display: flex;
     justify-content: center;
    /* center everything horizontally */
     align-items: center;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
    /* center items inside the column */
     width: 100%;
}
 .footer-text {
     width: 100%;
     text-align: center;
    /* center the text itself */
     font-size: 0.85rem;
     color: #777;
     margin-top: 0.5rem;
    /* space below icons */
}
/* If you have social-icons above the text, you can keep them centered too: */
 .social-icons {
     display: flex;
     gap: 1rem;
     justify-content: center;
    /* center the icons row */
}


/*────────────────────────────────────────────────────────────────────────── HEADER STYLES (INCLUDING BURGER MENU) ──────────────────────────────────────────────────────────────────────────*/
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
/* Standard nav-links */
 .nav-links {
     display: flex;
     gap: 1.5rem;
}

 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Burger icon */
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
/* Mobile nav overlay */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
    /* <-- Raised above header’s z-index */
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
/* Close button inside overlay */
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
/*────────────────────────────────────────────────────────────────────────── DISTRICTS LIST STYLES (WITH WEATHER INFO) ──────────────────────────────────────────────────────────────────────────*/
 .districts-container {
     width: 100%;
     max-width: 1000px;
     margin-top: 2rem;
      margin-bottom: 5rem;
}
 .districts-container h1 {
     font-size: 2rem;
     color: #0a8bf2;
     margin-bottom: 1rem;
     text-align: center;
     text-shadow: 0 0 6px rgba(10, 139, 242, 0.7);
}
 .districts-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 1.5rem;
}
 .district-card {
     background: rgba(240, 248, 255, 0.90);
     border: 2px solid #0a8bf2;
     border-radius: 8px;
     padding: 1rem;
     text-align: center;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     cursor: pointer;
     position: relative;
     min-height: 130px;
}
 .district-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 4px 12px rgba(10, 139, 242, 0.3);
}
 .district-card h2 {
     font-size: 1.2rem;
     font-weight: 600;
     color: #111;
     margin-bottom: 0.5rem;
}
 .weather-info {
     font-size: 0.9rem;
     color: #333;
     margin-top: 0.5rem;
}
 .weather-info img {
     width: 30px;
     vertical-align: middle;
     margin-right: 4px;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER STYLES ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 @media (max-width: 768px) {
    /* Hide nav-links, show burger */
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .districts-list {
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
     .district-card {
         min-height: 120px;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .districts-container h1 {
         font-size: 1.5rem;
    }
     .district-card h2 {
         font-size: 1rem;
    }
     .districts-list {
         grid-template-columns: 1fr;
    }
}
 .logo a {
     color: inherit;
    /* keep the same color as .logo */
     text-decoration: none;
    /* remove the underline */
     display: inline-block;
    /* ensures hover effects, if any, work nicely */
}
/* districts page */
/* alert page */
/* RESET & BASE */


 ul {
     list-style: none;
}
/* HEADER & FOOTER */
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .nav-links {
     display: flex;
     gap: 1.5rem;
}
 .nav-links li a:hover {
     color: #0a8bf2;
}
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
     margin: 1rem 0;
}
/* MAIN CONTENT */


 .container {
     width: 100%;
     max-width: 900px;
     margin: 2rem auto;
     padding: 1rem 2rem;
     /* background: #fff; */
     /* border-radius: 6px; */
     /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}
 h1 {
     text-align: center;
     color: #0a8bf2;
     margin-bottom: 1rem;
}
/* CARD GRID */
 .cards {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: center;
     margin-top: 1rem;
}
 .card {
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     padding: 1rem;
     width: calc(50% - 1rem);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}
 .card-emoji {
     font-size: 2rem;
     margin-bottom: 0.5rem;
}
 .card-village {
     font-size: 1.25rem;
     color: #0a8bf2;
     margin: 0.25rem 0;
}
 .card-location {
     font-size: 0.9rem;
     color: #555;
     margin-bottom: 0.5rem;
}
 .card-time {
     font-size: 0.8rem;
     color: #888;
}
/* FOOTER SOCIAL ICONS */
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
/* MEDIA QUERIES */
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .container {
         margin-top: 1rem;
         padding: 1rem;
    }
     h1 {
         font-size: 1.6rem;
    }
     .card {
         width: calc(100% - 1rem);
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .container {
         padding: 0.75rem 1rem;
    }
     h1 {
         font-size: 1.4rem;
    }
     .card-emoji {
         font-size: 1.5rem;
    }
}
/* alert page */
/* add vilage page */

 body {
     font-family:'Orbitron',sans-serif;
     background:#f9f9f9;
     color:#111;
}
/* LAYOUT */
/* Header styling */
 header {
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background: rgba(25, 25, 25, 0.95);
     padding: 1rem 2rem;
     display: flex;
     justify-content: center;
    /* centers header content horizontally */
     align-items: center;
    /* centers header content vertically */
     z-index: 10;
}
 header a {
     color: #fff;
    /* white font */
     text-decoration: none;
     margin: 0 1rem;
     font-weight: 600;
}
 header a:hover, header a.active {
     color: #0a8bf2;
    /* highlight on hover/active */
}
/* Footer styling */
 footer {
     width: 100%;
     position: fixed;
     bottom: 0;
     left: 0;
     background: rgba(25, 25, 25, 0.95);
     padding: 1rem 2rem;
     display: flex;
     justify-content: center;
    /* centers footer content horizontally */
     align-items: center;
    /* centers footer content vertically */
     color: #fff;
    /* white font */
     z-index: 10;
}
 .footer-text {
     font-size: 0.85rem;
}

 .message {
     text-align:center;
     margin-bottom:1.5rem;
     font-size:1rem;
}
 form .field {
     margin-bottom:1rem;
}
 form label {
     display:block;
     margin-bottom:0.5rem;
     font-weight:600;
}
 form input[type="text"] {
     width:100%;
     padding:0.5rem;
     border:1px solid #ccc;
     border-radius:4px;
}
 form button {
     /* width:100%; */
     padding:0.75rem;
     background:#0a8bf2;
     color:#fff;
     border:none;
     border-radius:4px;
     cursor:pointer;
     transition:background 0.2s;
     font-size:1rem;
}
 form button:hover {
     background:#076cb0;
}
 @media(max-width:600px) {
     header, footer {
         padding:0.75rem 1rem;
    }
     form {
         font-size:0.9rem;
    }
}
/* add village page */
/* district page */
/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/


/*────────────────────────────────────────────────────────────────────────── LAYOUT STRUCTURE ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}
/*────────────────────────────────────────────────────────────────────────── HEADER STYLES (INCLUDING BURGER MENU) ──────────────────────────────────────────────────────────────────────────*/
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
/* Standard nav-links */
 .nav-links {
     display: flex;
     gap: 1.5rem;
}

 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Burger icon */
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
/* Mobile nav overlay */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
    /* <-- Raised above header’s z-index */
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
/* Close button inside overlay */
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
/*────────────────────────────────────────────────────────────────────────── BROWSING‐PAGE STYLES ──────────────────────────────────────────────────────────────────────────*/
 .browse-container p.back-link {
     text-align: center;
     margin-bottom: 1rem;
}
 .browse-container p.back-link a {
     color: #0a8bf2;
     font-weight: bold;
     transition: color 0.2s ease;
}
 .browse-container p.back-link a:hover {
     color: #076cb0;
}
 .browse-list {
     list-style: none;
     padding-left: 0;
}
 .browse-list li + li {
     margin-top: 0.75rem;
}

 .no-items {
     text-align: center;
     font-size: 1.1rem;
     color: #555;
     margin-top: 2rem;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER STYLES ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
     .browse-container {
         margin-top: 1.5rem;
         padding: 0 1rem;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }

}
/* district page */
/* state page */
/*────────────────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────────────────*/



/*────────────────────────────────────────────────────────────────────────── LAYOUT STRUCTURE ──────────────────────────────────────────────────────────────────────────*/
 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}

/*────────────────────────────────────────────────────────────────────────── HEADER STYLES (INCLUDING BURGER MENU) ──────────────────────────────────────────────────────────────────────────*/
 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
}
/* Standard nav-links */
 .nav-links {
     display: flex;
     gap: 1.5rem;
}
 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
/* Burger icon */
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
/* Mobile nav overlay */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
    /* <-- Raised above header’s z-index */
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
/* Close button inside overlay */
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}
/*────────────────────────────────────────────────────────────────────────── BROWSING‐PAGE STYLES ──────────────────────────────────────────────────────────────────────────*/

 .browse-container p.back-link {
     text-align: center;
     margin-bottom: 1rem;
}
 .browse-container p.back-link a {
     color: #0a8bf2;
     font-weight: bold;
     transition: color 0.2s ease;
}
 .browse-container p.back-link a:hover {
     color: #076cb0;
}
 .browse-list {
     list-style: none;
     padding-left: 0;
}
 .browse-list li + li {
     margin-top: 0.75rem;
}
 .no-items {
     text-align: center;
     font-size: 1.1rem;
     color: #555;
     margin-top: 2rem;
}
/*────────────────────────────────────────────────────────────────────────── FOOTER STYLES ──────────────────────────────────────────────────────────────────────────*/
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
/*────────────────────────────────────────────────────────────────────────── MEDIA QUERIES (MOBILE) ──────────────────────────────────────────────────────────────────────────*/
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
}
/* state page */
/* sub district page */
/*────────────────────────────────────────────────────────────────────────── ... (same styling as before) ... Only the .browse-list <li> entries have been updated to wrap each village in a link. ──────────────────────────────────────────────────────────────────────────*/

 header, footer {
     width: 100%;
     background: rgba(25, 25, 25, 0.95);
     position: fixed;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 header {
     top: 0;
     border-bottom: 1px solid #333;
}
 footer {
     bottom: 0;
     justify-content: center;
}

 .logo {
     font-size: 1.5rem;
     color: #0a8bf2;
     text-shadow: 0 0 8px rgba(10, 139, 242, 0.7);
}
 .logo a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
}
 nav {
     display: flex;
     align-items: center;
     width: 65%;
     justify-content: space-between;
}
 .nav-links {
     display: flex;
     gap: 1.5rem;
}
 .nav-links li a {
     font-weight: 500;
     position: relative;
     color: #ddd;
     transition: color 0.2s ease;
}
 .nav-links li a:hover {
     color: #0a8bf2;
}
 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0%;
     height: 2px;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     background: #0a8bf2;
     transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
     width: 60%;
}
 .burger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     margin-left: 1rem;
}
 .burger span {
     width: 25px;
     height: 3px;
     background: #ddd;
     border-radius: 2px;
     transition: background 0.3s ease, transform 0.3s ease;
}
 .burger span.active {
     background: #0a8bf2;
}
 .nav-overlay {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background: rgba(25, 25, 25, 0.97);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: left 0.3s ease;
     z-index: 11;
}
 .nav-overlay.active {
     left: 0;
}
 .nav-overlay ul {
     flex-direction: column;
     gap: 2rem;
}
 .nav-overlay li a {
     font-size: 1.5rem;
     color: #eee;
}
 .nav-overlay .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #eee;
     cursor: pointer;
     transition: color 0.2s ease;
}
 .nav-overlay .close-btn:hover {
     color: #0a8bf2;
}

 .browse-container p.back-link {
     text-align: center;
     margin-bottom: 1rem;
}
 .browse-container p.back-link a {
     color: #0a8bf2;
     font-weight: bold;
     transition: color 0.2s ease;
}
 .browse-container p.back-link a:hover {
     color: #076cb0;
}
 .browse-list {
   display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
 .browse-list li + li {
     margin-top: 0rem;
}
/* Each village is now wrapped in a link */
 .browse-list li {
     background: rgba(240, 248, 255, 0.95);
     border: 2px solid #0a8bf2;
     border-radius: 8px;
     padding: 0.75rem 1rem;
     font-size: 1rem;
     color: #111;
     height: 165px;
     display: flex;
  flex-direction: column;
  justify-content: center;
}
 .browse-list li a {
     display: block;
     color: #111;
}
 .no-items {
     text-align: center;
     font-size: 1.1rem;
     color: #555;
     margin-top: 2rem;
}
 .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}
 .social-icons {
     display: flex;
     gap: 1rem;
}
 .social-icons a {
     color: #ccc;
     font-size: 1.2rem;
     transition: color 0.2s ease;
}
 .social-icons a:hover {
     color: #0a8bf2;
}
 .footer-text {
     font-size: 0.85rem;
     color: #777;
}
 @media (max-width: 768px) {
     .nav-links {
         display: none;
    }
     .burger {
         display: flex;
    }

     .browse-list li {
         font-size: 0.95rem;
    }
}
 @media (max-width: 480px) {
     header, footer {
         padding: 0.8rem 1rem;
    }
     .logo {
         font-size: 1.25rem;
    }
     .browse-list li {
         font-size: 0.9rem;
    }
}
/* sub district page */
/* village page */




 header, footer {
     width:100%;
     background:rgba(25,25,25,0.95);
     position:fixed;
     left:0;
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:1rem 2rem;
     z-index:10;
     box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
 header {
     top:0;
     border-bottom:1px solid #333;
}
 footer {
     bottom:0;
     justify-content:center;
}


 .logo {
     font-size:1.5rem;
     color:#0a8bf2;
     text-shadow:0 0 8px rgba(10,139,242,0.7);
}
 .nav-links {
     display:none;
     gap:.3rem;
}
 .nav-links a {
     color:#ddd;
     transition:color .2s;
}
 .nav-links a:hover {
     color:#0a8bf2;
}
 .burger {
     display:flex;
     flex-direction:column;
     gap:5px;
     cursor:pointer;
}
 .burger span {
     width:25px;
     height:3px;
     background:#ddd;
     border-radius:2px;
}
 .village-container {
     width:100%;
     height:100%;
     display:flex;
     flex-direction:column;
     justify-content:space-evenly;
     align-items:center;
     margin: 2rem auto 5rem auto;
     /* background:rgba(240,248,255,0.95); */
}
 .village-container h1 {
     font-size:2rem;
     color:#0a8bf2;
     text-shadow:0 0 6px rgba(10,139,242,0.7);
     text-align:center;
}
 .village-details p {
     font-size:1.1rem;
     color:#333;
     margin:0.3rem 0;
     text-align:center;
}
 .village-info-box {
     background:rgba(240,248,255,0.9);
     border:2px solid #0a8bf2;
     border-radius:8px;
     padding:1rem;
     margin:1rem 0;
     max-width:90%;
     text-align:center;
}
 .current-weather {
     text-align:center;
}
 .current-weather h2 {
     font-size:1.4rem;
     margin-bottom:0.5rem;
}
 .current-weather .emoji {
     font-size:3rem;
}
 .vote-section p {
     font-size:1.1rem;
     color:#333;
     margin-bottom:0.5rem;
     text-align:center;
}
 .vote-buttons {
     display:flex;
     justify-content:center;
     gap:1rem;
}
 .vote-buttons button {
     font-size:2.5rem;
     background:transparent;
     border:none;
     cursor:pointer;
     opacity:0.8;
     transition:opacity .2s, transform .1s;
}
 .vote-buttons button:hover {
     opacity:1;
     transform:translateY(-3px);
}
 .subscription-form {
     margin-top:1.5rem;
     text-align:center;
     display:flex;
     justify-content: center;
}
 .subscription-form input[type="email"] {
     padding:.6rem .8rem;
     width:220px;
     max-width:80%;
     border:2px solid #0a8bf2;
     border-radius:4px;
     margin-right:.5rem;
}
 .subscription-form button {
     padding:.6rem 1rem;
     background:#0a8bf2;
     color:#fff;
     border:none;
     border-radius:4px;
     cursor:pointer;
}
 .subscription-message {
     margin-top:.75rem;
     font-size:.95rem;
     color:#0a8bf2;
}
 .footer-text {
     font-size:.85rem;
     color:#777;
}
 @media(max-width:768px){
     .nav-links{
        display:none;
    }
     .burger{
        display:flex;
    }
     .village-container h1{
        font-size:1.6rem;
    }
     .village-details p{
        font-size:1rem;
    }
     .current-weather h2{
        font-size:1.2rem;
    }
     .current-weather .emoji{
        font-size:2.5rem;
    }
     .vote-buttons button{
        font-size:2rem;
    }
     .subscription-form input[type="email"]{
        width:180px;
    }
     .subscription-form button{
        font-size:.9rem;
    }
}
 @media(max-width:480px){
     header,footer{
        padding:.6rem 1rem;
    }
     .logo{
        font-size:15px;
    }
    nav {
  width: 45% !important;
    }
     .village-container h1{
        font-size:1.4rem;
    }
     .village-details p{
        font-size:.9rem;
    }
     .current-weather h2{
        font-size:1rem;
    }
     .current-weather .emoji{
        font-size:2rem;
    }
     .vote-buttons button{
        font-size:1.6rem;
    }
     .subscription-form input[type="email"]{
      width: 100%;
    margin-bottom: 10px;
    }
     .subscription-form button{
        padding:.5rem .8rem;
    }
     .subscription-message{
        font-size:.9rem;
    }
}
 .village-container {
     display: flex;
     justify-content: center;
    /* horizontal centering */
    /* you can still use align-items to control vertical alignment if needed */
}
 .current-weather1 {
    /* no special margins or positioning needed here */
     text-align: center;
}
/* village page */
 .news-container {
     width: 100%;
     max-width: 1000px;
     margin-top: 2rem;
      margin-bottom: 5rem;
}