@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.cdnfonts.com/css/satoshi");

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
:root {
  --mainColor: #000000;
  --whiteColor: #ffffff;
}
body {
  font-family: "Chakra Petch", sans-serif;
  background: var(--mainColor);
  cursor: none;
}
a, button{
  cursor: none;
}
.lgHeading {
  font-weight: 700;
  font-size: 2rem;
}
.mdHeading {
  font-weight: 500;
  font-size: 1rem;
}
.mainBtn {
  border: 1px solid #fff;
  border-radius: 8px;
  color: #fff;
  background-color: transparent;
}

/* Landing Before */
.landingBeforeWrper {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 3rem;
  background: var(--mainColor);
}
.landingImageCol {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.LandingImgebg {
  width: 100%;
  height: auto;
}
.landingImgText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
}
.lightBar {
  position: absolute;
  left: 52%;
  bottom: 9%;
  transform: translateX(-50%);
  width: 86%;
  height: 5px;
  background: #75d7ff;
}
.lineShadow{
  width: 100%;
  height: 0px;
  background: linear-gradient(to bottom, transparent, #75d7ff)  ;
  position: absolute;
  left: 0;
  bottom: 0;
}
.landingTextCol {
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
  position: relative;
}
.landingTextImg {
  width: 100%;
}
.landRotateText {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%) rotate(-90deg);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--whiteColor);
}
.landingTopImg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.landingText {
  font-size: 2.84rem;
  font-weight: 400;
  color: #669aaf;
  position: absolute;
  bottom: 0;
} 
.landingRightCol, .landingLeftCol{ 
  transform-origin: left bottom; 
}

  /* sideMenu */
  .sideMenuWraper {
    width: 100%;
    height: 100%; 
    background: #090416; 
    position: fixed;
    top: 0;
    left: 0; 
    z-index: 99999; 
  }
  .sideMenuWraper::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;  
    background-image: url("../img/sidemenubg.png");
    background-position: center;
    background-size: cover;
  }
  .sideMenuWraper::-webkit-scrollbar{ 
    width: 8px;
  }
  .sideMenuWraper::-webkit-scrollbar-thumb{
    background: #0e86b7;
    border-radius: 20px;
  }
  .sideMenuWraper::-webkit-scrollbar-track{
    background: #585555;
    width: 10px;
  }
  .sideMenuContainer{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center; 
    padding: 3rem 0;  
  }

  .closeSide {
    position: absolute;
    left: 8%;
    top: 3%;  
  }
  .sideLogo {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%); 
  }
  .sideMenuContainer {
    position: relative;
    width: 100%;
  }
  .sideImg {
    width: 100%;
    height: auto;
  }
  .sideTextMainContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sideTextWrper {
    width: 85%;
    margin: 1rem 0;
  }
  .sideSmText {
    font-family: "Satoshi", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: #78c1f3;
  }
  .sidelgText { 
    font-size: 9.5rem;
    font-weight: 700;
    -webkit-text-stroke: 4px #669aaf;
    color: transparent;
    text-align: center;
    line-height: 0.9;
    transition: color 0.2s ease-in;
  }
  .sidelgText:hover {
    color: #669aaf;
    text-shadow: 0px 0px 13.55px #0e86b7;
  }
  
   @media only screen and (max-width: 768px) {
    .footerOrder {
        display: flex !important; /* Ensure the flex layout is applied */
        justify-content: center !important; /* Align items in the center */
        gap: 0 !important; /* Remove the gap between items */
        flex-wrap: wrap !important; /* Ensure wrapping of content if needed */
    }

    .footerLink {
        padding: 0 0.5rem !important; /* Apply padding */
        text-align: center !important; /* Center align the text for mobile */
    }
}



  /* /* customCurser */
.customCurser{
  opacity: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #d05821;
  position: fixed;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}