/* Theme color */
 body {
    background-color: #333333;
    color: #ffffff;
  }
 /* General header styling */
header {
    background: linear-gradient(to bottom, #333333, #444444); /* Gradient effect */
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between elements on smaller screens */

  }
  
  /* For medium and larger screens, align items horizontally */
  @media (min-width: 768px) {
    header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  
  
  /* Logo styling */
  #logo-img {
    width: 100px; /* Adjust size as needed */
    height: auto;
    border-radius: 10%; /* Rounded corners */
    margin-right: 10px; /* Space between logo and heading */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6), 
                -5px -5px 10px rgba(255, 255, 255, 0.2); /* 3D shadow effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Hover effect for logo */
  #logo-img:hover {
    transform: scale(1.05) rotate(3deg); /* Slight hover effect */
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.7), 
                -8px -8px 15px rgba(255, 255, 255, 0.3); /* Enhanced shadow on hover */
  }
  
  /* H1 Styling */
  h1 {
    margin: 0;
    font-size: 2.2rem; /* Smaller default font size for mobile */
    color: #ff6e00;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center; /* Center-align on smaller screens */
  }
  
  @media (min-width: 768px) {
    h1 {
      
      text-align: left; /* Align to the left on larger screens */
    }
  }
  
  /* H1 Heading Styling */
  #h1_heading {
    color: #007bff; /* Initial color */
    background: linear-gradient(60deg, #ff6e00, #007bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  /* H1 Heading Hover Effect */
  #h1_heading:hover {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.7);
    transform: scale(1.02);
  }
  
  /* Responsive layout adjustments */
  @media (max-width: 767px) {
    header {
      text-align: center;
      gap: 15px;
    }
    #logo-img {
      margin-right: 0; /* Remove right margin for better centering */
    }
    h1 {
      flex-direction: column; /* Stack heading and subheading vertically */
      gap: 5px; /* Adjust spacing for stacked layout */
    }
  }
  

  /* header h1 {
    color: transparent;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s;
  }

  header h1:hover {
    color: #db6302; /* Glow effect */
 

  /* Ensure the navbar stretches the full width */
  .navbar {
    width: 100%;
  }

  /* Flex properties to ensure that the items take equal space */
  .navbar-nav {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Align items to the start (left) */
    padding-left: 20px;
  }

  .navbar-nav .nav-item {
    flex-grow: 1; /* Ensure each nav-item takes up equal space */
    text-align: start;
  }

  .navbar-nav .nav-link {
    color: #ffffff;
    display: inline-block; /* Ensure the link behaves like inline-block */
    padding: 5px 10px; /* Add padding around the text */
  }

  .navbar-nav .nav-item button {
    text-align: left; /* Align the button text to the left */
    padding-left: 10px; /* Optional: Add some padding for aesthetics */
  }

  .navbar-nav .nav-link:hover {
    background-color: #db6302; /* Background color on hover */
    color: #ffffff; /* Text color */
    border-radius: 4px; /* Optional: Add a border radius to smooth the background around the text */
  }

  .navbar-nav .nav-link:focus {
    background-color: #db6302; /* Same hover effect on focus */
    color: #ffffff;
  }

  /* Sidebar Gradient Background */
  #sidebar {
    background: linear-gradient(to bottom, #127aeb, #e06f1e);
  }

  /* Geospatial Portal Gradient Background */
  #collapseTwo {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
  }

  /* Footer */
  footer {
    background-color: #222222;
    color: #db6302;
  }

  /* Full width for map */
  .map-container {
    height: 90vh;
    border: 1px solid #ccc;
  }

  iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }

  /* Menu toggle for mobile */
  .navbar-collapse {
    flex-grow: 0;
  }

  /* Customizing Sidebar */
  #sidebar {
    width: 300px;
    height: 100%;
    left: -300px;
    top: 0;
    transition: 0.3s;
    z-index: 10;
  }
  /* Sidebar Styling */
  .sidebar {
    background-color: #2c3e50;
    padding: 20px;
  }

  /* Remove bullet points from unordered lists inside accordion */
  .accordion-body ul {
    list-style-type: none; /* Removes the default bullet points */
    padding-left: 0; /* Optional: Removes the left padding for clean alignment */
  }

  /* Optional: You can still style the list items for better visual separation */
  

  /* Style for the accordion box items */
  .accordion-box {
    display: block;
    padding: 10px;
    margin: 10px;
    /* background-color: #333; */
    border-radius: 5px;
    color: #fff;
    /* margin-bottom: 8px; */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, transform 0.3s;
  }

  .accordion-box {
    background-color: #007bff; /* Change color on hover */
    
  }

  /* Optional: Adjust the accordion header content padding and icons */
  .accordion-header-content {
    display: flex;
    align-items: center;
    /* gap: 10px; */
    font-size: 16px;
  }
  .accordion-box a {
    text-decoration: none; /* Removes underline from the links */
    color: inherit; /* Inherit the text color from the parent (for consistency) */
  }

  /* Remove underline from links when hovering */
  .accordion-box a:hover {
    text-decoration: none; /* Ensure no underline on hover */
    color: #fff; /* Optional: set color when hovered */
  }

  .accordion-item {
    background-color: #34495e;
    border: 1px solid #1a252f;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .accordion-button {
    background-color: #34495e;
    color: white;
    padding: 10px;
    text-align: left;
    border: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .accordion-button:hover {
    background-color: #1a252f;
  }

  .accordion-button:focus {
    box-shadow: none;
  }

  /* Add Icons before header text */
  .accordion-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Custom Link Style */
  .custom-link {
    color: #f39c12;
    text-decoration: none;
  }

  .custom-link:hover {
    text-decoration: underline;
    text-decoration: none;
  }

  /* Accordion Body */
  .accordion-body {
    background-color: #34495e;
    color: #ecf0f1;
    padding: 5px;
  }

  /* Close Button */
  #closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    /* padding: 10px; */
    /* border-radius: 50%; */
  }

  /* Skynet Footer */
  .text-center p {
    font-size: 14px;
    color: #95a5a6;
  }
  /* Footer Showing Address and google embed map */
footer {
    text-align: center;
    padding: 20px;
    color: wheat;
    font-size: larger;
    font-family: 'Times New Roman', Times, serif;
    background: #232526;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
  }
  
  footer a {
    color: wheat;
    text-decoration: none; 
  }
  
  footer a:hover {
    text-decoration: underline;
  }
  
  footer button {
    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  footer button:hover {
    background-color: #dc7311;
  }
  
  .social-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
  }
  
  .social-links a img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
  }
  
  .social-links a img:hover {
    transform: scale(1.2);
  }

  /* subscribe-section */
  .subscribe-section {
    /* background-color: #1c1c1c; */
    color: #ffffff;
    padding: 1px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 8px;
    max-width: 400px;
    margin: auto;
  }
  
  .subscribe-section h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
  }
  
  .subscribe-form {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  
  .subscribe-form input {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
  }
  
  .subscribe-form input:focus {
    border-color: #007bff;
  }
  
  .subscribe-form button {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .subscribe-form button:hover {
    background-color: #0056b3;
  }
  #map {
    width: 100%;
    height: calc(100vh - 160px); /* Adjust for header, navbar, and footer */
    position: relative;
    z-index: 1; /* Lower z-index for map */
    margin-top: 0; /* Ensure no gap between map and navbar */
  }