/* HEADER BASE */

.zirius-container{
width: 100%;
}

nav{
display: none;
}	

.zirius-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
/*background: #0B1C30;*/
background:  rgba(11, 28, 48, 0.03);
transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.3s ease-in-out;
/*padding: 20px 30px;*/
z-index: 1000;
display: flex;
align-items: center;
height: 60px;
border: 1px solid #0F2540;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}

/* Sticky Header */
.zirius-header.scrolled {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/*padding: 10px 20px;*/
transition: all 0.4s ease-in-out;

}

/* Header Content Layout */
.zirius-header-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

/* LOGO */
.zirius-logo img {
max-height: 50px;
transition: transform 0.3s ease-in-out;
}

.zirius-header.scrolled .zirius-logo img {
/*transform: scale(0.85);*/
}

/* MENU */
.zirius-main-nav {
display: flex;
width: 100%;
}

.zirius-menu {
list-style: none;
display: flex;
/*gap: 25px;*/
transition: opacity 0.3s ease-in-out;
margin-bottom: 0px;
/*padding-right: 0px !important;
padding-left: 0px !important;*/
width: 100%;
justify-content: space-evenly;
/*padding: 0;*/
}

.zirius-menu li{
  margin-bottom: 0px;
}

.zirius-menu a {
text-decoration: none;
color: #ffffff !important;
transition: color 0.3s, transform 0.3s;
font-family: var(--ff-inter);
font-size: clamp(14.4px, calc(13.23px + 0.27vw), 16px);
}

.zirius-header.scrolled .zirius-menu a {
color: #333;
}

/* Hover Animation */
.zirius-menu a:hover {
color: #0073e6;
transform: translateY(-2px);
}

/* BUTTONS (Hidden in Mobile) */
.zirius-header-buttons {
display: flex;
gap: 15px;
margin-left: auto;
}

.zirius-btn {
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
font-weight: 600;
transition: all 0.3s ease-in-out;
}

.zirius-btn.primary {
background: #0073e6;
color: #fff;
}

.zirius-btn:hover {
opacity: 0.8;
}
/*Changes In main Style CSS*/
.menu-item	{
padding-right: 0px !important;
}

/*Changes In main Style CSS End*/

@media only screen and (max-width: 1280px) and (min-width: 993px){
.zirius-menu a {
font-size: clamp(14px, calc(10px + 0.27vw), 16px);
}
.r-btn {
width: clamp(80px, 20vw, 100px);
height: clamp(24px, 5vw, 32px);
font-size: clamp(14px, calc(10px + 0.27vw), 16px);		
}
.r-line-btn {
width: clamp(70px, 18vw, 75px);
height: clamp(24px, 5vw, 32px);
font-size: clamp(14px, calc(10px + 0.27vw), 16px);		
}
.header-gd-l-button{
justify-content: center;
align-items: center;
}

.header-gd-l-button {
gap: 25px !important;
}	

}	

/* RESPONSIVE DESIGN */
@media (max-width: 993px) {
.zirius-main-nav,
.zirius-header-buttons {
display: none; /* Hide Menu & Buttons */
}

.zirius-header-content {
justify-content: space-between;
}

/* Mobile Toggle Button */
.zirius-mobile-menu-toggle {
display: flex;
flex-direction: column;
cursor: pointer;
z-index: 1100;
}

.zirius-mobile-menu-toggle span {
background: #fff;
height: 3px;
width: 25px;
margin: 3px 0;
transition: transform 0.3s ease-in-out, opacity 0.3s;
border-radius: 10px;
}

.zirius-header.scrolled .zirius-mobile-menu-toggle span {
background: #FFFFFF;
}

/* MOBILE MENU */
.zirius-mobile-nav {
position: fixed;
/*top: 0;
left: 0;*/
width: 100%;
/*height: 100vh;
background: rgba(0, 0, 0, 0.9);*/
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
display: block;
/*align-items: center;
justify-content: center;*/
z-index: 11;
}

.zirius-mobile-nav.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
}

.zirius-mobile-menu {
list-style: none;
text-align: center;
}

.zirius-mobile-menu li {
padding: 15px 0;
}

.zirius-mobile-menu a {
color: #fff;
font-size: 24px;
text-decoration: none;
transition: color 0.3s ease-in-out;
}

.zirius-mobile-menu a:hover {
color: #0073e6;
}

/* Mobile Menu Toggle Animation */
.zirius-mobile-menu-toggle.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.zirius-mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}

.zirius-mobile-menu-toggle.active span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}

ul#menu-zirius-float-menu-1{
display: block;
background-color: #0B1C30;
margin-top: 60px;
padding-bottom: 10px;
padding-top: 15px;
padding-left: 25px;
}

ul#menu-zirius-float-menu-1 li{
margin-bottom: 10px;
}

}