/* .navWrap{
width: 100%;
position: fixed;
top: 0;
align-items: center;
padding: 18px 38px;
display: flex;
justify-content: space-between;
z-index: 9;
backdrop-filter: blur(10px);
background-color: rgba(0,0,0,0.3);
} */
.navWrap{
top: 0px !important;
padding: 18px 20px;
transition: 0.2s all ease-out;
}
.nav-up {
top: -97px !important;
transition: 0.2s all ease-out;
}
.searchWrap{
display: flex;
width: 100%;
margin-bottom: 10px;
/* max-width: 186px; */
justify-content: end;
position: relative;
}
.menuWrap{
display: flex;
flex-direction: column;
}
.searchBtn{
position: absolute;
right: 20px;
top: 1px;
color: #072E64;
}
.search{
height: 27px;
border-radius: 50px;
padding-right: 30px;
}nav{
/* padding: 18px 20px; */
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
display: flex;
position: fixed;
z-index: 10;
justify-content: space-between;
}
.searchWrap .inputGroup{
margin-right: 10px;
}
/*Styling Links*/
.nav-links{
margin-bottom: 0px;
display: flex;
list-style: none;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a{
text-decoration: none;
margin: 0 1vw;
color: #fff;
}
.nav-links li a:hover {
color: #4c94ff;
}
.nav-links li {
position: relative;
}
.nav-links li a::after {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #4094ff;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::after{
width: 80%;
}
/*Styling Buttons*/
.login-button{
background-color: transparent;
border: 1.5px solid #f2f5f7;
border-radius: 2em;
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #f2f5f7;
border:1.5px solid #f2f5f7;
transition: all ease-in-out 350ms;
}
.join-button{
color: #131418;
background-color: #61DAFB;
border: 1.5px solid #61DAFB;
border-radius: 2em;
padding: 0.6rem 0.8rem;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
border:1.5px solid #f2f5f7;
transition: all ease-in-out 350ms;
}
/*Styling Hamburger Icon*/
.hamburger div{
width: 30px;
height:3px;
background: #f2f5f7;
margin: 5px;
transition: all 0.3s ease;
}
.hamburger{
display: none;
}
/*Stying for small screens*/
@media screen and (max-width: 1001px){
.navWrap{
padding:0px;
}
.logo{
padding: 10px 20px;
}
nav{
position: fixed;
z-index: 3;
}
.hamburger{
display:block;
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
transition: all 0.7s ease;
}
.nav-links{
position: fixed;
background: #131418;
height: 100vh;
width: 100%;
left: 0;
padding: 0;
margin: 0;
flex-direction: column;
clip-path: circle(50px at 90% -20%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open{
clip-path: circle(1500px at 90% -10%);
-webkit-clip-path: circle(1500px at 90% 70%);
pointer-events: all;
}
.nav-links li{
opacity: 0;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4){
transition: all 0.5s ease 0.7s;
}
.nav-links li:nth-child(5){
transition: all 0.5s ease 0.8s;
}
.nav-links li:nth-child(6){
transition: all 0.5s ease 0.9s;
margin: 0;
}
.nav-links li:nth-child(7){
transition: all 0.5s ease 1s;
margin: 0;
}
.navWrap li.fade{
opacity: 1 !important;
}
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
transition: all 0.7s ease;
width:0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}