@media (max-width: 768px) { /* Styles for mobile devices */ 

  /* Base styles */
  #dolphinnav { background-color: #fff; padding: 0 20px; z-index:9999;position: relative;z-index: 1000;} 
  #dolphinnav .nav-list { list-style-type: none; margin: 0; padding: 0; display: block; position: relative;  z-index: 1000;}
  #dolphinnav .nav-list li { display: inline-block; /* Inline-block for horizontal alignment */ margin-right: 15px; /* Spacing between items */ } 
  #dolphinnav .nav-list li a { text-decoration: none; color: #4d1fca; padding: 14px 20px; display: block; }
  #dolphinnav .nav-list li a:hover { background-color: #4d1fca; color: #fff; } /* Menu icon for mobile */
	#dolphinnav .menu-icon { display: none; cursor: pointer; left: 20px; position: absolute;} 
	#dolphinnav .menu-icon span { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #1D6893;}
  #dolphinnav .nav-list { display: none; /* Navigation is collapsed by default */ width: 100%; background-color: #fff; } #dolphinnav .nav-list.show { display: block; /* Expand when menu icon is clicked */ } #dolphinnav .nav-list li { display: block; /* Block display for vertical alignment */ width: 100%; text-align: center; margin: 0; /* Remove margin for better alignment */ }
  #dolphinnav .menu-icon { display: block; /* Display menu icon on mobile */ }

.navigate { list-style: none; } 
.navigate li { position: relative; margin-right: 20px; } 
.navigate a { color: white; text-decoration: none;  display: block; } 
/* Style for the submenu */ 
.submenu { list-style: none; padding: 0; margin-left:20px;margin-top:0px; display: none; position: absolute; top: 100%; left: 0; z-index:9999; } 
.submenu li { margin: 0; border:1px solid #fff; background-color: #939fb9;} 
.submenu a { padding: 10px; width: 150px; } 
.navigate li:hover .submenu { display: block; }

.navMenu { list-style: none; } 
.navMenu li { position: relative; margin-right: 0px; } 
.navMenu a { color: white; text-decoration: none;  display: block; } 

.submenunav { list-style: none;  margin-left:185px;margin-top:0px; display: none; position: absolute; top: 100%; left: 0; z-index:9999; } 
.submenunav li { margin: 0; padding: 1px;border:1px solid #fff; background-color: #496e91;} 
.submenunav a { width: 200px; height:20px;  } 
.navMenu li:hover .submenunav { display: block; }

/*auto complete for search */
#searchLocationDiv, #searchText{
  display:inline-block;
}

#searchLocation{
    width:130px;
    height:35px;
    margin-right:5px;
}

.suggestions { border: 1px solid #ccc; border-top: none;padding:5px; border-radius: 0 0 4px 4px; max-height: 150px; overflow-y: auto; background-color: #e7e7bc; display: none;  width: 80%; box-sizing: border-box; z-index: 1000; } 
.suggestions div { padding: 10px; cursor: pointer; } 
.suggestions div:hover { background-color: #fff; }
}

@media (min-width: 769px) {
  .navigate { list-style: none; } 
  .navigate li { position: relative; margin-right: 20px; } 
  .navigate a { color: white; text-decoration: none;  display: block; } 
  /* Style for the submenu */ 
  .submenu { list-style: none; padding: 0; margin-left:185px;margin-top:0px; display: none; position: absolute; top: 100%; left: 0; z-index:9999; } 
  .submenu li { margin: 0; border:1px solid #fff; background-color: #939fb9;} 
  .submenu a { padding: 10px; width: 150px; } 
  .navigate li:hover .submenu { display: block; }
  
  .navMenu { list-style: none; } 
  .navMenu li { position: relative; margin-right: 0px; } 
  .navMenu a { color: white; text-decoration: none;  display: block; } 
  
  .submenunav { list-style: none;  margin-left:185px;margin-top:0px; display: none; position: absolute; top: 100%; left: 0; z-index:9999; } 
  .submenunav li { margin: 0; padding: 1px;border:1px solid #fff; background-color: #496e91;} 
  .submenunav a { width: 200px; height:20px;  } 
  .navMenu li:hover .submenunav { display: block; }
  
  /*auto complete for search */
  #searchLocationDiv, #searchText{
    display:inline-block;
  }
  
  #searchLocation{
      width:130px;
      height:35px;
      margin-right:5px;
  }
  
  .suggestions { border: 1px solid #ccc; border-top: none;padding:5px; border-radius: 0 0 4px 4px; max-height: 150px; overflow-y: auto; background-color: #e7e7bc; display: none; width: 100%; box-sizing: border-box; z-index: 1000; } 
  .suggestions div { padding: 10px; cursor: pointer; } 
  .suggestions div:hover { background-color: #fff; }
}


/* Styles for screens between 768px and 1280px */
@media (min-width: 769px) and (max-width: 1279px) {
  /* Your styles for tablets */
  #dolphinnav {
    background-color: #1f7a33;
    padding: 0 2px;
    margin-top: 10px;
    z-index: 9999;
    width: 100%;
    background-image: linear-gradient(to bottom, #c1c3eb, #47912a);
}
#dolphinnav .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    white-space: nowrap; /* Prevent items from wrapping */
}
#dolphinnav .nav-list li {
    display: inline-block;
    /* Inline-block for horizontal alignment */
    margin-right: 0px;
    /* Spacing between items */
}
#dolphinnav .nav-list li a {
    text-decoration: none;
    color: #fff;
    padding: 4px 4px;
    display: block;
    font-size: 11px;
}
#dolphinnav .nav-list li a.current, #dolphinnav .nav-list li a.current:hover {
    background-color: #4d1fca;
    color: #fff;
    background: #4d1fca url(Images/dolphin_left-ON.gif) no-repeat top left;
}
}

/* Styles for screens larger than 1280px */
@media (min-width: 1280px) {
  /* Your styles for desktop devices */
  #dolphinnav {
    background-color: #1f7a33;
    padding: 0px;
    margin-top: 8px;
    z-index: 9999;
    width: 100%;
    background-image: linear-gradient(to bottom, #d6f5dd, #47912a);
}
#dolphinnav .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    white-space: nowrap; /* Prevent items from wrapping */
}
#dolphinnav .nav-list li {
    display: inline-block;
    /* Inline-block for horizontal alignment */
    margin-right: 0px;
    /* Spacing between items */
}
#dolphinnav .nav-list li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 5px;
    display: block;
    font-size: 14px;
}
#dolphinnav .nav-list li a.current, #dolphinnav .nav-list li a.current:hover {
    background-color: #4d1fca;
    color: #fff;
    background: #4d1fca url(Images/dolphin_left-ON.gif) no-repeat top left;
}
}