/* Navbar Link Styles */
 .nav-link {
     color: white !important;
     font-weight: 500;
 }

 .nav-link.active {
     text-decoration: underline;
 }

 .nav-link:hover {
     color: #e6f4ea !important;
 }

 /* Dropdown on Hover */
 .navbar-nav .dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
 }

 .dropdown-menu {
     margin-top: 0;
     border-radius: 0;
 }

 /* Button Styles */
 .btn-primary-custom {
     background-color: #017a38 !important;
     color: white !important;
     padding: 12px 25px !important;
     font-size: 16px !important;
     font-weight: 600 !important;
     border-radius: 40px !important;
     transition: all 0.3s ease !important;
 }

 .btn-primary-custom:hover {
     background-color: #015f2a !important;
     transform: translateY(-3px) !important;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
 }

 .btn-primary-custom:focus {
     outline: none !important;
 }

 /* Accessibility Toolbar Styles */
 .accessibility-toolbar {
     background-color: white;
     font-size: 15px;
     color: #333;
     /* border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
 }

 /* Skip Link */
 .skip-link {
     color: #333;
     font-weight: 600;
     text-decoration: none;
     padding: 4px 12px;
     border-radius: 4px;
     background-color: rgba(0, 0, 0, 0.05);
     transition: all 0.2s ease;
 }

 .skip-link:hover,
 .skip-link:focus {
     background-color: rgba(0, 0, 0, 0.1);
     color: #333;
     text-decoration: none;
 }

 /* Font Size Controls */
 .font-controls {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .font-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.05);
     color: #333;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
     font-weight: 500;
 }

 .font-btn:hover {
     background-color: rgba(0, 0, 0, 0.1);
     transform: translateY(-2px);
 }

 /* Contrast Controls */
 .contrast-controls {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .contrast-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
     font-weight: bold;
 }

 .contrast-btn.dark {
     background-color: #222;
     color: white;
 }

 .contrast-btn.light {
     background-color: white;
     color: #222;
     border: 1px solid #ddd;
 }

 .contrast-btn:hover {
     transform: translateY(-2px);
 }

 /* Language Selector */
 .language-selector {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .language-link {
     color: #555;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.2s ease;
     padding: 2px 5px;
 }

 .language-link.active,
 .language-link:hover {
     color: #333;
     text-decoration: none;
 }

 .language-link.active {
     border-bottom: 2px solid #333;
 }

 /* Search Box */
 .search-box {
     display: flex;
     align-items: center;
     background-color: rgba(0, 0, 0, 0.05);
     border-radius: 20px;
     padding: 0 5px;
     overflow: hidden;
 }

 .search-input {
     background: transparent;
     border: none;
     color: #333;
     padding: 6px 10px;
     width: 140px;
     outline: none;
 }

 .search-input::placeholder {
     color: rgba(0, 0, 0, 0.5);
 }

 .search-btn {
     background: transparent;
     border: none;
     color: #333;
     cursor: pointer;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .social-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     font-size: 18px;
     border-radius: 50%;
     transition: all 0.3s ease;
     color: white;
 }

 /* Facebook - Simple blue */
 .social-icon.facebook {
     background-color: #1877F2;
 }

 /* Instagram - Simple pink */
 .social-icon.instagram {
     background-color: #E4405F;
 }

 /* YouTube - Simple red */
 .social-icon.youtube {
     background-color: #FF0000;
 }

 /* Hover effect for all social icons */
 .social-icon:hover {
     opacity: 0.9;
     transform: translateY(-3px);
 }

 /* Simple Black and White Contrast Modes */

 /* Dark Mode - Black background, white text */
 body.dark-contrast {
     background-color: #000000 !important;
     color: #ffffff !important;
 }

 body.dark-contrast * {
     background-color: #000000 !important;
     color: #ffffff !important;
     border-color: #ffffff !important;
 }

 body.dark-contrast a {
     color: #ffffff !important;
 }

 /* Preserve green elements in dark mode */
 body.dark-contrast .accessibility-toolbar,
 body.dark-contrast .btn-primary-custom,
 body.dark-contrast .language-selector .btn,
 body.dark-contrast .navbar,
 body.dark-contrast .bg-success,
 body.dark-contrast [style*="background-color: #017a38"],
 body.dark-contrast [style*="background-color:#017a38"] {
     background-color: #017a38 !important;
     color: white !important;
     border-color: #017a38 !important;
 }

 /* Preserve green hover states */
 body.dark-contrast .btn-primary-custom:hover,
 body.dark-contrast .language-selector .btn:hover,
 body.dark-contrast .language-selector .btn:focus {
     background-color: #025d2b !important;
     color: white !important;
 }

 /* Preserve green dropdown backgrounds */
 body.dark-contrast .language-selector .dropdown-menu {
     background-color: #e6f4ee !important;
     border-color: #025d2b !important;
 }

 body.dark-contrast .language-selector .dropdown-item:hover {
     background-color: #c5e5d9 !important;
     color: #000 !important;
 }

 body.dark-contrast .language-selector .dropdown-item.active {
     background-color: #017a38 !important;
     color: white !important;
 }

 /* Preserve any green sections or containers */
 body.dark-contrast .green-section,
 body.dark-contrast .bg-green,
 body.dark-contrast section[style*="background"],
 body.dark-contrast div[style*="background-color: #017a38"] {
     background-color: #017a38 !important;
     color: white !important;
 }

 /* Heading styles - Primary green color */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: #017a38 !important;
     font-weight: 600;
 }

 /* Ensure headings stay green in dark contrast mode */
 body.dark-contrast h1,
 body.dark-contrast h2,
 body.dark-contrast h3,
 body.dark-contrast h4,
 body.dark-contrast h5,
 body.dark-contrast h6 {
     color: #017a38 !important;
 }

 /* Active button style */
 .contrast-btn.active {
     background-color: #007bff !important;
     color: white !important;
 }

 .goog-te-banner-frame {
     display: none !important;
 }

 .goog-te-menu-value:hover {
     text-decoration: none !important;
 }

 .goog-text-highlight {
     background-color: transparent !important;
     box-shadow: none !important;
 }

 .goog-te-gadget {
     height: 0px !important;
     overflow: hidden;
 }

 #google_translate_element {
     position: absolute;
     top: -9999px;
     left: -9999px;
     width: 0;
     height: 0;
     overflow: hidden;
 }

 /* Language Selector Enhancements */
 .language-selector {
     margin: 0 10px;
 }

 .language-selector .btn {
     background-color: wite;
     color: black;
     font-weight: 600;
     padding: 5px 5px;
     border-radius: 30px;
     border: 2px solid #017a38;
     transition: all 0.3s ease;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .language-selector .btn:hover,
 .language-selector .btn:focus {
     background-color: #025d2b;
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

 .language-selector .dropdown-menu {
     border-radius: 12px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border: 1px solid #025d2b;
     padding: 10px 0;
     min-width: 150px;
     background-color: #e6f4ee;
 }

 .language-selector .dropdown-item {
     padding: 8px 20px;
     font-weight: 500;
     transition: background-color 0.2s;
     color: #333;
 }

 .language-selector .dropdown-item:hover {
     background-color: #c5e5d9;
     color: #000;
 }

 .language-selector .dropdown-item.active {
     background-color: #017a38;
     color: white;
     font-weight: 600;
 }

 .language-selector .fas {
     margin-right: 5px;
 }

 @media only screen and (max-width: 576px) {

     /* Fix toolbar position relative to logo */
     .accessibility-toolbar {
         padding: 8px 10px !important;
         /* Increase space after logo */
         position: relative !important;
         /* Make sure positioning context is correct */
     }

     /* Reset any previous layout styles */
     .accessibility-toolbar>.d-flex {
         position: relative !important;
         display: block !important;
         /* Override flex display */
         width: 100%;
     }

     /* Top row container - create explicitly */
     .accessibility-toolbar>.d-flex::before {
         content: "";
         display: block;
         width: 100%;
         height: 40px;
         /* Fixed height for top row */
         position: relative;
         margin-bottom: 15px;
     }

     /* Skip link positioning */
     .accessibility-toolbar>.d-flex>div:first-child {
         position: absolute !important;
         top: 5px;
         left: 5px;
         margin: 0 !important;
         z-index: 2;
     }

     /* Language selector positioning */
     .accessibility-toolbar .language-selector.dropdown {
         position: absolute !important;
         top: 5px;
         right: 5px;
         margin: 0 !important;
         z-index: 2;
     }

     /* Controls row positioning */
     .accessibility-toolbar>.d-flex>div:nth-child(2) {
         margin-top: 15px !important;
         display: flex !important;
         justify-content: center !important;
         flex-wrap: wrap !important;
         width: 100% !important;
     }

     /* Control buttons spacing */
     .font-controls,
     .contrast-controls,
     .screen-reader {
         margin: 0 5px !important;
     }

     /* Button sizing */
     .font-btn,
     .contrast-btn {
         padding: 4px !important;
         min-width: 30px !important;
     }

     /* Explicit sizing for language button */
     .language-selector .btn {
         padding: 4px 8px !important;
         font-size: 13px !important;
     }

     /* Explicit sizing for skip link */
     .skip-link {
         font-size: 13px !important;
         padding: 4px 8px !important;
     }
 }

 /* Logo and Login Button Section - Mobile Styles */
 @media only screen and (max-width: 767px) {

     /* Container adjustments */
     .container-fluid.bg-white.py-3.border-bottom {
         padding-top: 10px !important;
         padding-bottom: 10px !important;
     }

     /* Logo container */
     .container-fluid.bg-white .row .col-md-6:first-child {
         text-align: center;
         margin-bottom: 15px;
     }

     /* Logo size adjustment */
     .container-fluid.bg-white img.img-fluid {
         max-width: 230px !important;
     }

     /* Login button container */
     .container-fluid.bg-white .row .col-md-6.text-end {
         text-align: center !important;
     }

     /* Login button adjustments */
     .btn.btn-primary-custom {
         padding: 8px 20px !important;
         font-size: 14px !important;
         border-radius: 30px !important;
     }
 }

 /* For all mobile devices - prevent overflow */
 @media only screen and (max-width: 768px) {

     /* Ensure wrapping works correctly */
     .accessibility-toolbar .gap-3 {
         gap: 0.5rem !important;
     }

     /* Ensure language dropdown doesn't get cut off */
     .language-selector {
         position: static;
     }

     .language-selector .dropdown-menu {
         max-height: 200px;
         overflow-y: auto;
     }

     /* Fix for right side whitespace */
     html,
     body {
         overflow-x: hidden;
         width: 100%;
         max-width: 100%;
     }

     /* Prevent elements from creating horizontal scrollbars */
     .container,
     .container-fluid,
     .row {
         /* max-width: 100%;
         padding-left: 10px;
         padding-right: 10px; */
         box-sizing: border-box;
     }

     /* Ensure images don't overflow */
     img {
         max-width: 100%;
         height: auto;
     }

     /* Fix any potential table overflow issues */
     table {
         max-width: 100%;
         display: block;
         overflow-x: auto;
     }
 }

 /* Logo container styling */
 .logo-container {
     align-items: center;
     flex-wrap: nowrap;
 }

 /* Latest News label with darker right border */
 .news-label-right-border {
     background-color: white;
     color: #017a38;
     border-right: 1px solid rgba(0, 0, 0, 0.5);
     /* Increased opacity from 0.1 to 0.5 */
     border-top: none;
     border-bottom: none;
     border-left: none;
 }

 /* Mobile government logo styling - improved dimensions */
 .mobile-govt-logo {
     display: none;
     /* Hidden by default */
     width: 60px;
     /* Fixed width */
     height: 60px;
     /* Fixed height */
     margin-left: 20px;
     /* Less space between logos */
     vertical-align: middle;
     object-fit: contain;
     /* Maintain aspect ratio without stretching */
     border-radius: 3px;
     /* Slight rounded corners */
 }

 /* Responsive adjustments */
 @media only screen and (max-width: 767px) {

     /* Show mobile government logo with improved styling */
     .mobile-govt-logo {
         display: inline-block;
     }

     /* Better container for logo alignment */
     .logo-container {
         justify-content: flex-start;
         align-items: center;
         overflow-x: hidden;
         gap: 8px;
         /* Consistent spacing */
     }

     /* Adjust handicraft logo for mobile */
     .logo-container img.img-fluid:not(.mobile-govt-logo) {
         max-width: 200px !important;
         /* Slightly smaller to accommodate govt logo */
     }
 }