@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

.header {
	
	background: #035181;
	z-index: 999;
    height: 48px;
    padding: 0px;
    display: flex;
}

.nav-bar{
	padding: 0px 20px;
}

.nav-bar ul {
  display: flex;
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  
 
}

.nav-bar ul li {
  margin-right: 20px; /* Adjust the spacing between navigation items */
}

.nav-bar ul li a {
  display: block;
  color: #fefefe;
  font-size: 14px;
  padding: 8px;
  border-radius: 12px;
  margin: 3px;
  transition: color 0.2s, transform 0.2s, background 0.2s; /* Combine transitions for cleaner code */
  text-decoration: none;
  margin-top: 5px;
  
}

 .menu-item  a:hover {
  color: #11101b;
  transform: scale(1.1); /* Increase size on hover */
  background: red;
}
.menu-item .sub-menu a{
	font-size: 15px;
}
.menu-item .sub-menu a:hover {
  color: #11101b;
  transform: scale(1.1); /* Increase size on hover */
  background: red;
  width: 180px;
  margin: 0;
}
.menu-item .sub-menu {
  position: absolute;
  background: rgb(0, 128, 255);
  border-radius: 12px;
  pointer-events: none;
  padding: 9px; /* Adjust padding for better readability */
  transform: translateY(20px);
  opacity: 0;
  color: #11101b;
  transition: transform 0.3s, opacity 0.3s; /* Combine transitions for cleaner code */
  display: block;
  z-index: 99;
  width: 20rem;
  margin-top: -2px;
}

/*.menu-item .sub-menu .sub-item{
	width: 2rem;
	background-color: greenyellow;
}*/


.menu-item:hover .sub-menu {
  pointer-events: all;
  transform: translateY(0);
  opacity: 1;
}

.more .more-menu {
margin-top: 60px;
width: 20rem;	
position: absolute;
background: rgb(0, 0, 128);
list-style: none;	
top: -60px;
left: 100%;
white-space: nowrap;
border-radius: 12px;
overflow: hidden;
pointer-events: none;
transform: translateY(20px);
opacity: 0;
transition: 0.3s;
transition-property:transform,opacity ;
padding: 9px;
display: block;
	 
}
.more .more-menu .more-item a{
	font-size: 14px;
	
}
.more .more-menu .more-item a:hover{
	background-color:red;
	padding: 10px;
	width: 170px;
}
.more .more-menu li{
 margin-left: 6px;
}

.more:hover .more-menu{
	
	pointer-events: all;
	transform: translateY(0);
	opacity: 1;
	
}
	/* Mobile navigation Button */
	
	
@media only screen and (max-width: 1127px) {
  /*  #navbar-toggle {
		display: block;
        position: absolute;
        left: 18px;
        top: 20px;
        cursor: pointer;
        z-index: 99;
    }*/
    
    .mobile-viewbutton{
		display: block;
		cursor: pointer;
		margin-left: 15px;
		margin-top: 8px;
		top: 245px;
		right: 10px;
	}
	
	.mobile-viewbutton .line{
		width: 30px;
		height: 3px;
		background: #fefefe;
		margin: 6px 0;
		
		
	}

    .header .nav-bar .menu{
        height: 590px; /* Adjusted to auto for mobile view */
        position: absolute;
        top: 295px; /* Adjusted top position */
        left: 0px;
        right: 0px;
        width: 100vw;
        background: #175d9b;
        /*transition: 0.2s;*/
		overflow: hidden;
		z-index: 999;
		overflow-y: auto;
        
    }

    .nav-bar ul {
        display: block;
        width: 100%;
        margin: 10px auto 0 auto;
        text-align: center;
        transition: 0.5s;
        opacity: 0;
        padding: 20px;
    }

    .nav-bar.active ul {
        opacity: 1;
    }

    .menu-item .sub-menu {
        opacity: 1;
        position: relative;
        top: 0;
        transform: translateX(10px);
        background: rgba(225, 225, 225, 0.1);
        border-radius: 5px;
        overflow: hidden;
        display: none;
    }

    .menu-item:hover .sub-menu {
        transform: translate(10px);
    }
    
    
    .menu-item .sub-menu .sub-item{
	box-shadow: none;
	
}
.menu-item .sub-menu .sub-item:hover{
	background: none;
}
.menu-item .sub-menu .sub-item:hover{
	
	transition: 0.3s;
}

    .more .more-menu {
        opacity: 1;
        position: relative;
        margin-top: 10px;
        top: 0;
        left: 0;
        transform: translateY(0);
        transition: 0.3s;
        background: rgb(0, 0, 128);
        border-radius: 12px;
        display: none;
        list-style: none;
        white-space: nowrap;
        overflow: hidden;
        pointer-events: none;
        transition-property: transform, opacity;
        padding: 3px;
        width: 180px;
    }
   

    .more .more-menu .more-item {
        box-shadow: none;
    }

    .more .more-menu .more-item:hover {
        background: none;
    }

    .more .more-menu .more-item a {
        margin-left: 0px;
    }

    #navbar-toggle span,
    #navbar-toggle span:before,
    #navbar-toggle span:after {
        cursor: pointer;
        border-radius: 1px;
        height: 3px;
        width: 30px;
        background: #d2593f;
        position: absolute;
        display: block;
        content: '';
        transition: all 300ms ease-in-out;
        text-decoration: none;
    }

    #navbar-toggle span:before {
        top: -10px;
    }

    #navbar-toggle span:after {
        bottom: -10px;
    }

    #navbar-toggle.active span {
        background-color: transparent;
    }

    #navbar-toggle.active span:before,
    #navbar-toggle.active span:after {
        top: 0;
    }

    #navbar-toggle.active span:before {
        transform: rotate(45deg);
    }

    #navbar-toggle.active span:after {
        transform: rotate(-45deg);
    }
}

@media only screen and (max-width: 1025px) {
   
    .header .nav-bar .menu {
        height: auto; /* Adjusted to auto for mobile view */
        position: absolute;
        top: 244px; /* Adjusted top position */
      }
    
    }
    @media only screen and (max-width: 774px) {
   
    .header .nav-bar .menu {
        height: auto; /* Adjusted to auto for mobile view */
        position: absolute;
        top: 245px; /* Adjusted top position */
      
    }
    }
    
     @media only screen and (max-width: 602px) {
   
    .header .nav-bar .menu {
          position: absolute;/* Adjusted to auto for mobile view */
          top: 210px; /* Adjusted top position */
      
    }
    }
     @media only screen and (max-width: 528px) {
   
    .header .nav-bar .menu {
          position: absolute;/* Adjusted to auto for mobile view */
          top: 231px; /* Adjusted top position */
      
    }
    }
     @media only screen and (max-width: 382px) {
   
    .header .nav-bar .menu {
          position: absolute;/* Adjusted to auto for mobile view */
          top: 251px; /* Adjusted top position */
      
    }
    }
      @media only screen and (max-width: 299px) {
   
    .header .nav-bar .menu {
          position: absolute;/* Adjusted to auto for mobile view */
          top: 276px; /* Adjusted top position */
      
    }
    }
      @media only screen and (max-width: 241px) {
   
    .header .nav-bar .menu {
          position: absolute;/* Adjusted to auto for mobile view */
          top: 319px; /* Adjusted top position */
      
    }
    }