:root {
    --bgColor: #0E0F12;
    --bgColor2: #16181C;
    --cardgradient: #24262D;
    --headingcolor: #FFFFFF;
    --textcolor: #9CB0C2;
    --buttoncolor: #33A9FF;
}

@font-face {
    font-family: gilroy-light;
    src: url(./fonts/gilroy/Gilroy-Light.ttf);
}

@font-face {
    font-family: gilroy-thin;
    src: url(./fonts/gilroy/Gilroy-Thin.ttf);
}

@font-face {
    font-family: gilroy-medium;
    src: url(./fonts/gilroy/Gilroy-Medium.ttf);
}

@font-face {
    font-family: gilroy-regular;
    src: url(./fonts/gilroy/Gilroy-Regular.ttf);
}

@font-face {
    font-family: gilroy-semibold;
    src: url(./fonts/gilroy/Gilroy-SemiBold.ttf);
}

@font-face {
    font-family: gilroy-bold;
    src: url(./fonts/gilroy/Gilroy-Bold.ttf);
}

@font-face {
    font-family: kajiro;
    src: url(./fonts/kajiro/Kajiro\ Bold.ttf);
}

@font-face {
    font-family: neue-light;
    src: url(./fonts/NeueMachina-Light_gwWCZxVuQl.ttf);
}

@font-face {
    font-family: neue-regular;
    src: url(./fonts/NeueMachina-Regular_DQCmjH1st.ttf);
}


/* glass morphish  */

.glassmorphism {
    background-color: #00000014;
    backdrop-filter: blur(5px);
}
.notglassmorphism{
    background-color: transparent;
    backdrop-filter: none;
}
.loader span{
    display: inline-block;
}


/* button css  */

.btn {
    width: 8em;
    position: relative;
    height: 3em;
    border: 3px ridge #149CEA;
    outline: none;
    background-color: transparent;
    color: white;
    transition: 1s;
    border-radius: 0.3em;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.btn:hover {
    box-shadow: inset 0px 0px 25px #1479EA;
}

/* btn-css */
.shadow__btn {
    padding: 10px 20px;
    border: none;
    font-size: 17px;
    color: #fff;
    border-radius: 7px;
    /* letter-spacing: 4px; */
    /* font-weight: 700; */
    /* text-transform: uppercase; */
    transition: 0.5s;
    transition-property: box-shadow;
}

.shadow__btn {
    background: rgb(0, 140, 255);
    box-shadow: 0 0 25px rgb(0, 140, 255);
}

.shadow__btn:hover {
    box-shadow: 0 0 5px rgb(0, 140, 255),
        0 0 25px rgb(0, 140, 255),
        0 0 50px rgb(0, 140, 255),
        0 0 100px rgb(0, 140, 255);
}

/* btn-css */
.btn-account {
    /* font-size: 1.2rem; */
    padding: 1rem 2.5rem;
    border: none;
    outline: none;
    border-radius: 0.4rem;
    cursor: pointer;
    /* text-transform: uppercase; */
    background-color: rgb(14, 14, 26);
    color: rgb(234, 234, 234);
    font-weight: 700;
    transition: 0.6s;
    box-shadow: 0px 0px 60px #1f4c65;
    -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
}

.btn-account:active {
    scale: 0.92;
}

.btn-account:hover {
    background: rgb(2, 29, 78);
    background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);
    color: rgb(4, 4, 38);
}

/* nav section */
.nav {
    background-color: #0000000c;
    backdrop-filter: blur(5px);
}


.scrolled {
    top: -50%;
}


/* hero section  */

.hero-img-div {
    perspective: 300px;
    transform-style: preserve-3d;
}

.desktop {
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-img-div:hover .desktop {
    transform: rotateY(-7deg);
    filter: drop-shadow(10px 20px 10px rgba(255, 255, 255, 0.073));
}

/* page2  */


/* page3  */

.image-container {
    perspective: 500px;
}

.page3-card:hover {
    background: linear-gradient(to bottom right, #23252C, #101115);
}

/* page5 */
.page5 {
    transform-style: preserve-3d;
}

.page5-card {
    /* background: linear-gradient(to right, #24262D, #17191D); */
    background: radial-gradient(circle at bottom right,
            #2D71BE 5%,
            #173252 20%,
            #19232c 25%);
    ;
}

.container {
    perspective: 1500px;
}

.page5-right {
    perspective: 1000px;
}

.page5-right img {
    transition: all 0.75s ease-out;
    /* filter: drop-shadow(5px 5px 15px rgba(128, 128, 128, 0.532)); */
}

.page5_card-up {
    perspective: 600px;
}

.connection {
    /* perspective: 1500px; */
    transition: all 0.75s ease-out;
    background-color: rgba(112, 128, 144, 0.509);
    backdrop-filter:  blur(5px);
    /* box-shadow: 10px 10px 30px rgba(112, 128, 144, 0.2), -10px -10px 30px rgba(112, 128, 144, 0.2); */
}

.swiper-slide{
    border-radius: 10px;
    background-color: #484d5e;
}

/* underline animation  */

 /* Underline initially */
 .link-underline {
    display: inline-block;
    position: relative;
    padding-bottom: 4px;
    transition: all .2s linear;
    text-decoration: none;
  
    &:before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 1px;
      width: 0%;
      transition: width 0s ease;
    }
    
    &:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 0%;
      background: #ffffff;
      transition: width .5s ease;
    }
    
    &:hover {
      &:before {
        width: 100%;
        background: #ffffff;
        transition: width .5s ease;
      }
  
      &:after {
        width: 100%;
        background: transparent;
        transition: width 0s ease;
      }
    }
  }