@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');

/* Navigation Bar style */
.header{
	/* background:linear-gradient(45deg,#000421,#330002); */
	backdrop-filter:blur(15px);
	padding: 0;
	position:fixed;
	z-index:2;
	width:100%;
	top:0;
}

/* Header Scrolling Effect only for Homepage */
.header.scrolled {
  background:linear-gradient(45deg,#000421,#330002);
  transition: linear 2s;
}

.logo {
      float: left;
      padding: 0;
      margin-left: 16px;
      margin-top: 0px;
}

/* Logo Image */
img.logo {	
	width:160px;
	margin-top:10px;
}

nav {
	display:flex;
	align-items: center;
	justify-content: right;
}

nav ul {
      float:left;
	  padding:0px 0;
	  margin:0;
}

nav ul li {
      display: inline-block;
      float: left;
	  transition:0.1s linear;
}

nav ul li:not(:first-child) {
      margin-left: 0px;
}

nav ul li:last-child {
      margin-right: 0px;
}

nav ul li a.menu {
      display: inline-block;
      outline: none;
      color: #ffffff;
	  font-family:manrope;
	  font-weight:500;
      text-decoration: none;
      font-size: 14px;
	  padding:25px 20px;
}

nav ul li a.menu:hover {
	background:#ff002d;
	color:#ffffff;
}


@media screen and (max-width:768px) {
	/* Logo Image */
	img.logo {	
		width:35px;
		margin:5px -15px;
		padding:0;
	}

	nav ul li:not(:first-child) {
		margin-left: 28px;
	}
	
}



@media screen and (max-width: 500px) {

	.header {
		padding:0 20px;
		height:70px;		
		backdrop-filter:none;
	}	
	
	img.logo {
		width:37vw;
		margin:12px 0 0 -24px;
	}

    .nav-wrapper {
            position: fixed;
            top: 0;
            right:-100%;
            width: 100%;
            height: 100vh;
            z-index:9999;
			/* background:rgba(56,56,56, 0.8); */
			backdrop-filter:blur(15px);
            opacity: 0;
            transition: all 0.75s;
			background-repeat:no-repeat;
			background-position:center center;
			background-size:cover;
      }

      .nav-wrapper ul {
            position: absolute;
            top: 50%;
            transform: translateX(0%) translateY(-50%);
            width: 100%;
			height:auto;
			padding:0;
      }

      .nav-wrapper ul li {
            display: block;
            width: 100%;
            text-align: right;	
      }
	  
	  .nav-wrapper ul li:hover > a.menu{
		background:#9d9b9ba8;
		color:#ffffff;
		transition:0s;
	  }

      .nav-wrapper ul li:nth-child(1) a.menu {
            transition-delay: 0.2s;
			transform: translateX(500px);

      }

      .nav-wrapper ul li:nth-child(2) a.menu {
            transition-delay: 0.3s;
			transform: translateX(500px);
      }

      .nav-wrapper ul li:nth-child(3) a.menu {
            transition-delay: 0.4s;
			transform: translateX(500px);
      }

      .nav-wrapper ul li:nth-child(4) a.menu {
            transition-delay: 0.5s;
			transform: translateX(500px);
      }
	 
      .nav-wrapper ul li:nth-child(5) a.menu {
            transition-delay: 0.6s;
			transform: translateX(500px);
      }
	  
      .nav-wrapper ul li:nth-child(6) a.menu {
            transition-delay: 0.7s;
			transform: translateX(500px);
      }
	  
      .nav-wrapper ul li:nth-child(7) a.menu {
            transition-delay: 0.8s;
			transform: translateX(500px);
      }
	  
      .nav-wrapper ul li:nth-child(8) a.menu {
            transition-delay: 0.9s;
			transform: translateX(500px);
      }

      .nav-wrapper ul li:not(:first-child) {
            margin-left: 0;
      }

      .nav-wrapper ul li a.menu {
            padding: 5px 44px;
            opacity: 0;
			font-family:oswald;
            color: #ffffff;
            font-size: 7vw;
            font-weight:500;
			width:100%;
            transform: translateX(-100px);
            transition: all 0.5s ease;
      }

      .nav-btn {
            position: fixed;
            right: 10px;
            top: 10px;
            display: block;
            width: 48px;
            height: 48px;
            cursor: pointer;
            z-index: 9999;
            border-radius: 50%;
      }

      .nav-btn i {
            display: block;
            width: 20px;
            height: 2px;
            background: #ffffff;
            border-radius: 2px;
            margin-left: 14px;
      }

      .nav-btn i:nth-child(1) {
            margin-top: 16px;
      }

      .nav-btn i:nth-child(2) {
            margin-top: 4px;
            opacity: 1;
      }

      .nav-btn i:nth-child(3) {
            margin-top: 4px;
      }
}

#nav:checked + .nav-btn {
      transform: rotate(45deg);
}

#nav:checked + .nav-btn i {
      background: #fff;
      transition: transform 0.5s ease;
}

#nav:checked + .nav-btn i:nth-child(1) {
      transform: translateY(6px) rotate(180deg);
}

#nav:checked + .nav-btn i:nth-child(2) {
      opacity: 0;
}

#nav:checked + .nav-btn i:nth-child(3) {
      transform: translateY(-6px) rotate(90deg);
	  color:#fff;
}

#nav:checked ~ .nav-wrapper {
      z-index:0;
	  right:0;
      opacity: 1;
	  
}

#nav:checked ~ .nav-wrapper ul li a.menu {
      opacity: 1;
      transform: translateX(0);
}

.hidden {
      display: none;
}