.layout {
width: 1280px;
height: 1920px;
margin: 0 auto; /* Center the layout horizontally */
}
/* Header Styles */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 2%; /* Adjusted padding for responsiveness */
background-color: #F5F5F5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-width: 1200px;
margin: 0 auto; /* Center the container horizontally */
}
.logo img {
max-width: 25%; /* Ensure the logo image scales appropriately */
margin-right: auto; /* Push the logo to the far left */
}
/* Navbar Styles */
.navbar {
display: flex;
align-items: center;
width: 100%;
}
.nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
margin-right: 25px;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: bold;
padding: 8px 12px;
border-radius: 8px;
position: relative;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/* Glowing line border effect on hover */
.nav-links a::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -5px; /* Adjust the distance of the underglow effect */
height: 2px;
background: linear-gradient(90deg, #fff, #000); /* Gradient from light to dark horizontally */
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease-in-out;
}
.nav-links a:hover {
color: #ff5733;
background-color: #f0f0f0;
}
.nav-links a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.nav-links a:hover::before {
opacity: 1;
}
.nav-links a:hover {
color: #ff5733; /* Change the color on hover */
background-color: #f0f0f0; /* Added background color change on hover for better visibility */
position: relative; /* Ensure z-index works correctly */
}
