/* navigation_bar.css */

.navbar {
   top: 0;
   left: 0;
   width: 100%;
   position: fixed;
   background: white;
   backdrop-filter: blur(10px);
   z-index: 1;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   padding: 10px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: auto;
   flex-wrap: wrap;
}

.logo {
   color: #1395d3;
   font-size: 24px;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px;
}

.logo img {
   border-radius: 8px;
   height: 45px;
   width: 40px;
}

.search {
   display: flex;
   align-items: center;
   background: linear-gradient(145deg, #f0eeee, #ffffff);
   border-radius: 25px;
   padding: 5px 10px;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   width: auto;
   max-width: 200px;
}

.search:hover {
   background: linear-gradient(145deg, #ffffff, #f0eeee);
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);
}

.srch {
   background: transparent;
   border: none;
   color: #1f2756;
   font-size: 14px;
   padding: 5px;
   width: 100%;
   transition: all 0.3s ease;
   outline: none;
}

.srch::placeholder {
   color: #1f2756;
   opacity: 0.7;
}

/* Menu Styles */
.menu {
   width: 100%;
   order: 1;
}

.ull {
   background: linear-gradient(90deg, #1f2756, #2a3475);
   display: flex;
   align-items: center;
   justify-content: center;
   height: auto;
   padding: 10px;
   border-radius: 8px;
   flex-wrap: wrap;
   gap: 5px;
}

.ull li {
   list-style: none;
   margin: 5px;
   position: relative;
}

.ull a {
   text-decoration: none;
   color: white;
   font-size: 14px;
   font-weight: bold;
   transition: all 0.3s ease;
   padding: 8px 15px;
   border-radius: 20px;
   letter-spacing: 0.5px;
   display: block;
}

.ull a:hover {
   background: linear-gradient(135deg, #1395d3, #0f7ab0);
   box-shadow: 0 4px 8px rgba(19, 149, 211, 0.3);
}

.ull li::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   background: #fff;
   bottom: -5px;
   left: 50%;
   transform: translateX(-50%);
   transition: width 0.3s ease;
}

.ull li:hover::after {
   width: 70%;
}

.btn {
   height: 30px;
   padding: 0 15px;
   background: #1a3c6d;
   border: none;
   border-radius: 20px;
   color: white;
   font-weight: 500;
   cursor: pointer;
   transition: 0.3s;
   font-size: 14px;
}

.btn:hover {
   background: #1395d3;
}

/* Styles for larger screens */
@media (min-width: 768px) {
   .navbar {
       flex-wrap: nowrap;
       align-items: center;
       padding: 10px 30px;
       height: 80px;
   }

   .logo {
       font-size: 28px;
       padding: 15px 25px;
   }

   .logo img {
       height: 55px;
       width: 50px;
   }

   .menu {
       width: auto;
       order: 0;
   }

   .ull {
       justify-content: flex-start;
       height: 50px;
       padding-left: 250px;
   }

   .ull li {
       margin: 0 15px;
   }

   .ull a {
       font-size: 16px;
   }
}

/* Styles for smaller screens */
@media (max-width: 767px) {
   .logo {
       font-size: 20px;
       padding: 10px;
   }

   .logo img {
       height: 40px;
       width: 35px;
   }

   .search {
       width: 90%;
       max-width: none;
       margin: 10px auto;
       order: -1;
   }

   .search input {
       font-size: 12px;
       padding: 8px;
   }

   .ull {
       padding: 10px;
       flex-direction: column;
       align-items: stretch;
       text-align: center;
       gap: 10px;
   }

   .ull li {
       margin: 0;
   }

   .ull a {
       font-size: 14px;
       padding: 10px;
   }
}