.main-wrapper {
  position:relative;
  min-height: 100vh;
  width: 100%;
  background-color: #141414;
  /* background-image: linear-gradient(135deg, #485461 0%, #28313b 74%); */
  overflow-x: hidden;
  transform-style: preserve-3d;
  z-index: 1;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 109;
  height: 3rem;
}

.menu {
  /* max-width: 72rem; */
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.hamburger-menu {
  /* height: 4rem; */
  /* width: 3rem; */
  cursor: pointer;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: flex-end; */
}

.bar {
  width: 1.9rem;
  height: 1.5px;
  border-radius: 2px;
  background-color: #eee;
  transition: 0.5s;
  position: relative;
}

.bar:before,
.bar:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: #eee;
  transition: 0.5s;
}

.bar:before {
  transform: translateY(-9px);
}

.bar:after {
  transform: translateY(9px);
}

.main {
  position: relative;
  width: 100%;
  height:100%;
  left: 0;
  z-index: 5;
  overflow: hidden;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.main-anim{position: absolute;height:100vh; background:#333; border:1px solid #111517; border-radius:7px;}

.main-wrapper.active .bar {
  transform: rotate(360deg);
  background-color: transparent;
}
.main-wrapper.active .bar:before {
  transform: translateY(0) rotate(45deg);
}
.main-wrapper.active .bar:after {
  transform: translateY(0) rotate(-45deg);
}
.main-wrapper.active .main {
  animation: main-animation 0.5s ease;
  cursor: pointer;
  transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}

@keyframes main-animation {
  from {transform: translate(0);}
  to {transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);}
}

.linkss {
  position: fixed;
  width: 0%;
  left: 50%;
  top: 50%;
  height: 0vh;
  display:flex; 
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: #111517f7;
  z-index: 9997;
  transform: translate(-50%, -50%);
   transition:all .5s ease-in-out;
}
.show-linkss{ width:100%; height:100%; transition:all .5s ease-in-out;}

.linkss ul {
  list-style: none;
  width:100%;
  text-align: center;
}
.linkss ul li {display: block;}
.linkss ul li a {
  position:relative;
  text-decoration: none;
  color: #fff;
  /*padding: 0.7rem 0;*/
  display: inline-block;
  font-size: clamp(1.6rem, 8vw, 3.8rem);
  font-weight: 800;
  font-family: "SF UI Display Bold";
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s;
  /* opacity: 0; */
  text-align:center;
}
.linkss ul li a:before{position: absolute; width:0; height:6px; content:""; background:var(--yellow); top:45%; left:50%; transform:translateX(-50%); transition:all .5s ease-in-out;}
.linkss ul li a:hover {color: #ddd; transition:all .5s ease-in-out;}
.linkss ul li a:hover:before{width: 120%; content:""; transition:all .5s ease-in-out;}
/*.main-wrapper.active .linkss a {*/
/*  animation: appear 0.5s forwards ease var(--i);*/
/*}*/

.social-wrap { padding: 20px; text-align: center;}
.social-wrap .social { position: relative; text-decoration: none; display: inline-block; color: #FFCB29; text-align: center;font-size: 1.5em; padding: 5px 15px; margin: 10px 5px 10px; transition: all 0.5s ease-in-out;}
.social-wrap .social:hover { position: relative; transform:rotateY(360deg); padding: 5px 15px; transition: all 0.5s ease-in-out;}

@keyframes appear {
  from { opacity: 0; transform: translateY(10px);}
  to { opacity: 1; transform: translateY(0px);}
}
@keyframes hide {
  from { opacity: 1;transform: translateY(0px); }
  to { opacity: 0; transform: translateY(10px);}
}
.shadow {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: left;
  transition: 0.5s;
  /* background-color: #000; */
}
.shadow.one {z-index: -1; opacity: 0.15;}
.shadow.two { z-index: -2; opacity: 0.1;}
.main-wrapper.active .shadow.one {
  animation: shadow-one 0.6s ease-out;
  transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
@keyframes shadow-one {
  0% { transform: translate(0);}
  5% { transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);}
  100% { transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);}
}
.main-wrapper.active .shadow.two {
  animation: shadow-two 0.6s ease-out;
  transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
@keyframes shadow-two {
  0% { transform: translate(0);}
  20% { transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);}
  100% { transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);}
}
.main-wrapper.active .main:hover + .shadow.one { transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);}
.main-wrapper.active .main:hover {transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);}
/* ===============bottom background================= */
.bottom-bg{
  position: absolute;
  bottom:0;
  left: 0;
  width:100%;
  min-height:190px;
  background-position: center;
  background-size: cover;
  opacity:0.6;
}

@media(min-width:768px){
    .links {
        width: 100%;
        text-align: center;
        background-color:#000000ea;
    }
}

@media(max-width:768px){
    .links {
        width: 100%;
        text-align: center;
        background-color:#000000ea;
    }
}