.tz_co_asoft_academia_website_academia_navigation_styles_wrapper {
position: fixed;
display: grid;
justify-content: space-between;
align-items: center;
background-color: white;
top: 0;
width: calc(100% - 4em);
padding: 2em;
z-index: 10;
}
@media (width > 1120px) {
.tz_co_asoft_academia_website_academia_navigation_styles_wrapper {
grid-template-columns: 3fr 5fr 2fr;
}
.tz_co_asoft_academia_website_academia_navigation_styles_menu {
display: flex;
}
.tz_co_asoft_academia_website_academia_navigation_styles_toggle {
display: none;
}
}
@media (width <= 1120px) {
.tz_co_asoft_academia_website_academia_navigation_styles_wrapper {
grid-template-columns: 3fr 1fr;
}
.tz_co_asoft_academia_website_academia_navigation_styles_menu {
display: none;
}
.tz_co_asoft_academia_website_academia_navigation_styles_button {
display: none;
}
}
.tz_co_asoft_academia_website_academia_navigation_styles_logo {
width: clamp(13em, calc(20vw + 1em), 18em);
}
.tz_co_asoft_academia_website_academia_navigation_styles_menu {
justify-self: center;
gap: 1.5rem;
}
.tz_co_asoft_academia_website_academia_navigation_styles_item {
text-decoration: none;
font-size: clamp(1.1rem, calc(0.9vw + 0.5rem), 1.2rem);
font-weight: 500;
color: black;
display: inline-block;
cursor: pointer;
white-space: nowrap;
&::after {
content: '';
display: block;
height: 4px;
background-image: linear-gradient(90deg, #30C0F9, #0061FF, #0061FF, #0061FF, #0061FF);
width: 0;
transition-duration: 0.5s;
}
&:hover {
&::after {
content: '';
width: 100%;
}
}
}
.tz_co_asoft_academia_website_academia_navigation_styles_button {
padding: 1em 2em;
background-color: black;
color: white;
border-radius: 10em;
text-decoration: none;
justify-self: end;
width: max-content;
}
.tz_co_asoft_academia_website_academia_navigation_styles_toggle {
width: 3em;
justify-self: end;
}
.tz_co_asoft_academia_website_academia_navigation_styles_drawer {
position: absolute;
background-color: white;
overflow-x: hidden;
height: 100vh;
width: 0;
top: 0;
left: 100vw;
transition-duration: 0.3s;
z-index: 12;
overscroll-behavior: contain;
}
.tz_co_asoft_academia_website_academia_navigation_styles_opened {
left: 0;
width: 100%;
}
.tz_co_asoft_academia_website_academia_navigation_styles_header {
display: flex;
justify-content: space-between;
padding: 2em;
}
.tz_co_asoft_academia_website_academia_navigation_styles_drawermenu {
display: flex;
flex-direction: column;
padding: 2em;
}
.tz_co_asoft_academia_website_academia_navigation_styles_draweritem {
text-decoration: none;
font-size: 1.5rem;
color: black;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
white-space: nowrap;
text-align: center;
padding: 1em;
}
.tz_co_asoft_academia_website_academia_navigation_styles_drawerbuttonblack {
background-color: black;
color: white;
}
.tz_co_asoft_academia_website_academia_navigation_styles_drawerbutton {
padding: 1em 2em;
border-radius: 10em;
font-size: 1.5em;
text-decoration: none;
margin: 0.5em 0;
text-align: center;
}