/*******************************************/
/*UPPER MENU*/
/*******************************************/
.up-menu-cont{
    background-color:#e6e6e6;
    padding:0;
}
.up-menu{

}
.up-menu ul{
    padding:0;
    list-style:none;
    text-align:right;
}
.up-menu li{
    padding:0;
    margin:0;
    text-transform:uppercase;
    display:inline;
}

.up-menu ul a{
    color:#282e6a;
    font-size:12px;
    font-weight:700;
    padding:4px 12px;
    line-height:30px;
    display:block;
}
.up-menu li a:hover,.up-menu li.selected a{
    color:#fff;
    background-color:#282e6a;
    opacity:1;
}

.up-menu ul li:hover > ul{
    display:block;
}
.up-menu ul ul{
    z-index:10003;
    left:0;
    background-color:#282e6a;
    padding:0;
    width:220px;
}
.up-menu ul ul li{
    margin:0;
    padding:0;
    display:block;
}

.up-menu ul ul a{
    color:#fff;
    padding:10px 20px;
    background-image:none !important;
    font-size:14px;
    display:block;
    line-height:18px;
}
.up-menu ul ul a:hover,.up-menu li.selected li.selected a{
    color:#282e6a;
    background-color:#e6e9f5;
}

/****************************************************/
/*RESPONSIVE*/
.mobile-menu-opener{
    display:inline-block;
    width:28px;
    height:25px;
    background-image:url(/Images/mobile-menu_hover.png);
    position: relative;
    top:48px;
    right:10px;
}
.mobile-menu-opener:hover{
    background-image:url(/Images/mobile-menu.png);
}

.mobile-up-menu-opener{
    display:inline-block;
    width:17px;
    height:15px;
    background-image:url(/Images/mobile-up-menu.png);
    position: relative;
    top: 5px;
}
.mobile-up-menu-opener:hover{
    background-image:url(/Images/mobile-up-menu_hover.png);
}

@media only screen and (min-width : 751px) {
/*.mobile-up-menu-opener*/
    .up-menu ul{
        display:block;
        text-align:right;
    }
    .up-menu li{
        display:inline-block;
        position:relative;
    }
    .up-menu ul ul{
        display:none;
        position:absolute;
        text-align:left;
        margin:0;
    }
    .mobile-up-menu-opener{
        display:none;
    }
}
@media only screen and (max-width : 1260px){
   .up-menu ul ul{
   left:auto;
   right:0; 
   }
    
}

@media only screen and (max-width : 750px){
    /*.mobile-up-menu-opener*/
    .mobile-up-menu-opener{
        display:block;
    }
    .up-menu {
    padding-bottom: 10px;
}
    .up-menu ul{
        display:none;
        margin:0 auto;
        clear:both;
        text-align:left;
        padding-top: 14px;
    }
    .up-menu li{
        display:block;
    }
    .up-menu ul a{
        display:block;
        padding: 2px 12px;
    }
    .up-menu ul ul{
        display:block;
        position:relative;
        width:auto;
        margin-bottom:10px;

        background-color: transparent;
    }
    .up-menu ul ul a{
        color: #464646;
        font-weight: 300;
        padding: 5px 22px;
    }


    .mobile-menu-opener{
    left:-22px;    
    }


}

/*******************************************/
/*******************************************/
/*HEADER MENU*/
/*******************************************/

.up-logo{
    float:left;
    display:block;
    font-size:0;
    border:0;
	
}
.up-logo img {
	transition:all 0.2s ease-in-out;
	transform:scale(1,1);
}
.up-logo img:hover {
	transform:scale(1.05,1.05);
}

/* Flexbox layout for the header and menu */
.header-menu {
    display: flex;
    align-items: center; /* Vertically align the logo and menu */
    justify-content: space-between; /* Ensure the logo and menu don't collide */
    width: 100%; /* Full width for proper alignment */
}

.header-menu ul {
    display: flex; /* Flexbox for the menu items */
    gap: 15px; /* Adjust gap between menu items */
    margin-left: auto; /* Ensure the menu aligns to the right */
    list-style-type: none; /* Remove default bullets from ul */
}
.header-menu li {
    position: relative;
}

.header-menu ul a {
    color: #456990;
    font-size: 22px;
    font-weight: 300;
    text-decoration: none; /* Remove underline from links */
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center; /* Ensure vertical alignment */
    white-space: nowrap; /* Prevent wrapping */
	padding: 20px 15px;
}

.header-menu > ul > li:has(> ul) > a::after {
    content: url(/Images/menu_velos.png); /* Path to the image you want to display */
    display: inline-block;
    margin-left: 8px; /* Space between the text and image */
    vertical-align: middle; /* Keep it inline with text */
	height: 6px;
    width: auto; /* Maintain aspect ratio */
    margin-bottom: 30px; /* Fine-tune this value to align the image vertically */
}
/* Add an empty pseudo-element to items without child elements to maintain alignment */
.header-menu > ul > li:not(:has(> ul)) > a::after {
    content: '';
    display: inline-block;
    margin-left: 8px; /* Same spacing as the ones with images */
	height: 6px;
    width: auto; /* Maintain aspect ratio */
	margin-bottom: 30px; /* Fine-tune this value to align the image vertically */
}
/* Ensure ::after is not applied to submenu (children) links */
.header-menu ul ul a::after {
    content: none; /* Remove any ::after pseudo-element from submenu links */
}
.header-menu li a:hover,.header-menu li.selected a, .header-menu li.selected li.selected a{
    background-color:#282e6a;
    color:#fff;
}

.header-menu li.selected li a{
    background-color:#fff;
    color:#5a88ad;
}

.header-menu ul li:hover > ul{
    display:block;
}
.header-menu ul ul{
    z-index:10003;
    left:0;
    background-color:#fff;
	box-shadow: 0px 7px 9px rgba(0,0,0,0.2);
}
.header-menu ul ul li{
    margin:0;
    padding:0;
    display:block;
}

/* Submenu items */
.header-menu ul ul a {
    color: #282e6a;
    padding: 10px 15px; /* Reduce padding for smaller distance between elements */
    background-image: none !important;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4; /* Adjust line-height for tighter spacing */
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-decoration: none;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Ensure long words wrap within the container */
}

.header-menu ul ul a:hover{
    color:#282e6a;
    background-image:none;
    background-color:#e6e9f5;
}
.header-menu ul li:last-of-type ul {
    left: auto;
    right: 0;
	
}
/*RESPONSIVE*/
@media only screen and (min-width : 751px) and (max-width : 900px){
    /*header menu*/
    .header-menu ul a {
    background-position: 93% 53%;
    font-size: 17px;
    padding: 45px 30px 45px 8px;
}

}
@media only screen and (min-width : 901px) and (max-width : 1130px){
    /*header menu*/
    .header-menu ul a {
    background-position: 93% 53%;
    font-size: 20px;
    padding: 45px 39px 45px 14px;
}

}

@media only screen and (min-width : 751px) {
    /*header menu*/
    .mobile-menu-opener{
        display:none;
    }
	/*
    .header-menu ul{
        display:block;
        float:right;
        width:78%;
        text-align:right;
    }
	*/
	.header-menu ul {
    display: flex;
    justify-content: flex-end; /* Align menu items to the right */
    width: 78%;
    text-align: right;
	}
    .header-menu li{
        display:inline-block;
    }
    .header-menu ul ul{
        display:none;
        position:absolute;
        width:300px;
        text-align:left;
        margin:0;
    }
}
@media only screen and (min-width : 1131px) {
    .up-logo{
    max-width:188px;
    width:188px;
    padding-right:40px;
    margin-top: 24px;
}
    
}

@media only screen and (max-width : 1130px){
    .up-logo {
        max-width: 188px;
        width: 22%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 1%;
        margin-top: 38px;
    }
    .up-logo img{
        width:100%;
    }
}

@media only screen and (max-width : 750px) {
    .up-logo{
    width:188px;
    padding-right:40px;
    margin-bottom: 18px;
}
    /*header menu*/
    .mobile-menu-opener{
        display:block;
    }
    .header-menu ul{
        display:none;
        
        float:none;
        margin:0 auto;
        clear:both;
    }
    .header-menu li{
        display:block;
    }
    .header-menu ul ul{
        display:block;
        position:relative;
        width:auto;
        margin-bottom:10px;
    }
    .header-menu ul a{
        padding: 15px 26px 15px 40px;
        background-position: 10px 53%;
        display:block;
    }
    .header-menu ul ul a{
        padding: 16px 24px 16px 43px;
    }
}