.nav-main {

  background-image: none !important;

  background-color: transparent !important;

  position: fixed;

  z-index: 999;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100vw;

  transition: background-color 0.3s, top 0.3s;

}



body {

  margin: 0;

}



.nav-main.nav-hide {

  top: -150px; /* Adjust based on the header height */

}



.nav-main.nav-show {

  top: 0;

  background-color: rgba(0, 0, 0, 0.6) !important; /* 70% opaque */

}



.mynav {

  display: flex;

  justify-content: space-between;

  padding: 20px 0px;

}



.close {

  display: flex;

  justify-content: center;

  align-items: center; 

  gap: 10px;

  font-size: 17px;

  font-weight: 400;

  color: aliceblue;

}



.close span {

  font-size: 17px;

  font-weight: 400;

  color: #5f5f5f;



}

.close-btn

{

   cursor: pointer; 

}







.menu {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 40px;

}



.dropdown-menu {

  background-color: black !important;

}



.dropdown-item {

  font-size: 28px;

  text-decoration: none;

  color: white !important;

  font-weight: 700;

  font-family: jura;

}



.dropdown-item:hover {

  background-color: black !important;

}



/* Fixed nav-black styles */

.nav-black {

  position: fixed; /* Changed from absolute to fixed */

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  opacity: 0;

  transform: translateY(-100%);

  transition: all 0.8s ease-in-out;

  z-index: 99999;

  background-color: black; 

  pointer-events: none;

  overflow-y: auto; /* Allow scrolling within the menu */

}



/* Active class for visible nav */

.nav-black.active {

  opacity: 1;

  transform: translateY(0);

  pointer-events: all;

}



.none {

  display: none;

}



.nav-links {

  font-size: 28px;

  text-decoration: none;

  color: white;

  font-weight: 700;

  font-family: jura;





}



.padding {

  padding: 0px 5vw;

}



.block {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.block2 {

  width: 65%;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  height: 100%;

}



.block3 {

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  height: 100%;

  width: fit-content;

  right: 0;

}



.socials {

  border-top: 2px solid #313131;

  display: flex;

  justify-content: flex-start;

}



.socials svg {

  margin-right: 20px;

  color: #FFFFFF;

}



.links {

  font-size: 27px;

  color: white;

  font-weight: 700;

  margin-bottom: 10px;

  font-family: Jura;

}



.link {

  font-size: 16px;

  color: white;

  font-weight: 500;

  font-family: Jura;

}



.links:after {

  content: ' →';

  color: #006596;

  display: inline-block; 

  transition: transform 0.3s ease;

}



.links:hover::after {

  transform: translateX(5px);

}



/* Hamburger menu animation styles */

.close svg {

  width: 50px;

  cursor: pointer;

}



#top-line,

#bottom-line,

#middle-line {

  transform-box: fill-box;

  transform-origin: center;

}



svg:hover {

  #top-line {

    animation: down-rotate 0.6s ease-out both;

  }

  #bottom-line {

    animation: up-rotate 0.6s ease-out both;

  }

  #middle-line {

    animation: hide 0.6s ease-out forwards;

  }

}

.dropdown

{

  z-index: 9999999;

}



@keyframes fadeSlideDown {

  from {

    opacity: 0;

    transform: translateY(-20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}





.animate-links .nav-links

{

  opacity: 0;

  animation: fadeSlideDown 1.3s forwards;

}







.animate-links .nav-links:nth-child(1) {

  animation-delay: 0.3s;

}



/* .animate-links .nav-item.dropdown:nth-child(2) {

  animation-delay: 0.5s;

} */

 .animate-links .nav-links:nth-child(2) {

  animation-delay: 0.5s;

}



.animate-links .nav-links:nth-child(3) {

  animation-delay: 0.7s;

}



.animate-links .nav-links:nth-child(4) {

  animation-delay: 0.9s;

}



.animate-links .nav-links:nth-child(5) {

  animation-delay: 1.1s;

}



























@keyframes up-rotate {

  0% {

    animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);

    transform: translateY(0px);

  }

  30% {

    transform-origin: center;

    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

    transform: translateY(-10px);

  }

  100% {

    transform-origin: center;

    transform: translateY(-10px) rotate(45deg) scale(0.9);

  }

}



@keyframes down-rotate {

  0% {

    animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);

    transform: translateY(0px);

  }

  30% {

    transform-origin: center;

    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

    transform: translateY(10px);

  }

  100% {

    transform-origin: center;

    transform: translateY(10px) rotate(-45deg) scale(0.9);

  }

}



@keyframes hide {

  29% {

    opacity: 1;

  }

  30% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}



@media (max-width: 1023px) {

  .block3 {

    display: none;

  }

  .block {

    width: 100%;

  }

  .block2 {

    width: 100%;

  }

}



@media (max-width: 776px) {

  .nav-links {

    font-size: 18px;

    text-decoration: none;

    color: white;

    font-weight: 700;

    font-family: jura;

  }

  .dropdown-item {

    font-size: 18px;

    text-decoration: none;

    color: white !important;

    font-weight: 700;

    font-family: jura;

  }

  .home-logo {

width: 75px;
    height: 75px;

  }
  .west-city-logo 
  {
        max-width: 148px;
  }

}