:root {
    --clr-primary: #0E0E12 ;
    --clr-primary-black: #000;
    --clr-secondary: #4f4fff;
    --clr-secondary-dark: #14141A;
    --clr-ancient: #EDEDFA;
    --clr-ancient-gray: #818189;
    --clr-ancient-white: #fff;

    --left: #14141A;
    --right: #14141a00;

    --fs-h1: 64px;
    --fs-h2: 56px;
    --fs-h3: 48px;
    --fs-h4: 28px;
    --fs-p: 18px;

    --ff-main: 'Poppins', sans-serif; 

    --swiper-scrollbar-drag-bg-color: var(--clr-ancient);
}

html {
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

a {
    color: var(--clr-primary);
    text-decoration: none;
}

.h1, h2, h3, h4,h5 ,h6 {
    padding: 0;
    margin: 0;
    font-size: 16px;
}

a {
    text-decoration:none;
}

ul {
    list-style: none;
}

li {
    list-style: none;
}

.container {
    --padding: 1rem;
    --max-width: 1280px;

    max-width: min(var(--max-width), 100% - var(--padding) * 10);
    margin-inline: auto;
}

@media (max-width:1400px) {
    .container {
        --padding: 1rem;
        --max-width: 1280px;
    
        max-width: min(var(--max-width), 100% - var(--padding) * 5);
        margin-inline: auto;
    }
}

@media (max-width:555px) {   
    .container {
        --padding: 1rem;
        --max-width: 1280px;
    
        max-width: min(var(--max-width), 100% - var(--padding) * 2);
        margin-inline: auto;
    }
}

/* nav */

nav {
    position: absolute;
    width: 100%;
    z-index: 6;
}

.nav-color {
    background-color: var(--clr-secondary-dark);
}

.no-color {
    background-color: rgba(0, 0, 0, 0);
}

.logo {
    margin-top: 3px;
}

.nav-container{
    --padding: 1rem;
    --max-width: 1280px;

    max-width: min(var(--max-width), 100% - var(--padding) * 10);
    margin-inline: auto;
}

@media (max-width:1400px) {
    .nav-container {
        --padding: 1rem;
        --max-width: 1280px;
    
        max-width: min(var(--max-width), 100% - var(--padding) * 5);
        margin-inline: auto;
    }
}

@media (max-width:555px) {   
    .nav-container {
        --padding: 1rem;
        --max-width: 1280px;
    
        max-width: min(var(--max-width), 100% - var(--padding) * 2);
        margin-inline: auto;
    }
}


.nav-flex {
    display: flex;
    padding: 30px 0px;
    align-items: center;
    gap: 50px;
    justify-content:space-between;
}

.nav-flex-flex {
    display: flex;
    gap: 47px;
    align-items: center;
}

.nav-box-img {
    display: flex;
    width: 187.72px;
    height: 36px;
}

.nav-ul {
    display: flex;
    gap: 20px;
    padding-top: 8px;
}

.nav-li--a {
    color: var(--clr-ancient);
}

.nav-btn {
    position: relative;
    display: flex;
    width: 173px;
    height: 45px;
    /* background-image: url(/img/nav-btn-background-v4.svg); */
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
}

.nav-btn-text {
    z-index: 2;
}

.nav-btn-svg {
    position: absolute;
}

.nav-btn-text {
    display: flex;
    padding-bottom: 1px;
    font-weight: bold;
    color: var(--clr-ancient-white);
}

.nav-hamburger-div {
    display: none;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
}
.nav-mob-background {
    display: none;
}


@media (max-width:1100px) {
    .nav-hamburger-div {
        display: block;
    }
    .nav-ul {
        display: none;
    }

    .nav-btn {
        position: absolute;
        right: -0px;
        margin-top: 5px;
        /* top: -5px; */
    }

    .nav-mob-background {
        z-index: 3;
        display: none;
        position: absolute;
        width: 100%;
        height: 388px;
        /* background-color: var(--clr-secondary-dark); */
        /* box-shadow: 0px 2px 50px #ededfa0d; */
        background-image: linear-gradient(
            110deg,
            var(--right) 0%,
            var(--right) 0%
        );
    }
    .nav-flex {
        position: relative;
        z-index: 5;
    }

    .nav-flex-flex .nav-box-img {
        margin-left: 60px;
    }

    .nav-ul[data-status='active'] {
        display: flex;
    }

    .nav-ul {
        top: 126px;
        flex-direction: column;
        position:absolute;
        left: 0px;
    }
    .nav-ul .nav-li .nav-li--a {
        font-size: 26px !important
    }

    .nav-hamburger-div {
        position: absolute;
        z-index: 7;
        top: 35.5px;
        left: 40px;
    }

    .nav-line {
        top: 105px;
        width: 100%;
        height: 0.5px;
        margin-top: 105px;
        background-color: var(--clr-ancient-gray);
    }
}

@media (max-width:1000px) {
    .no-color {
        background-color: var(--clr-secondary-dark);
    }
    .nav-line {
        top: 90px;
        margin-top: 94px;
    }

    .nav-ul {
        top: 122px;
    }
}
@media (max-width:800px) {
    nav {
        top: 0;
        position: sticky;
    }
}

@media (max-width:600px) {
    .nav-flex {
        padding: 27.5px 0;
        justify-content: center;
    }

    .nav-btn {
        display: none;
    }

    .nav-hamburger-div {
        position: absolute;
        z-index: 7;
        top: 34px;
        left: 40px;
    }

    .nav-flex-flex .nav-box-img {
        margin-left: 0px;
    }

    .nav-btn[data-status='active'] {
        display: flex;
        position: absolute;
        top: 368px;
    }
    .nav-line {
        top: 95px;
        width: 100%;
        height: 0.5px;
        margin-top: 95px;
        background-color: var(--clr-ancient-gray);
    }

    .nav-mob-background {
        height: 464px;
    }
}

@media (max-width:555px) {
    .nav-hamburger-div {
        left: 24px;
    }
}

@media (max-width:450px) {
    .nav-flex {
        gap: 16px;
    }
    .nav-flex-flex {
        gap: 16px;
    }
    

}
@media (max-width:400px) {
    .nav-container {
        --padding: 1rem;
        --max-width: 1280px;
    
        max-width: min(var(--max-width), 100% - var(--padding) * 3);
        margin-inline: auto;
    }
    /* .nav-btn {
        width: 115px;
        height: 30px;
        font-size: 12px;
    } */

    .nav-hamburger-div {
        left: 24px;
    }
}

@media (max-width:375px) {

}

/* footer */

.footer-color {
    background-color: var(--clr-secondary-dark);
}

.footer-padding {
    padding: 120px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-grid--box-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-ul-grid {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 160px 160px;
    row-gap: 32px;
}

.footer-grid--box-3 {
    display: flex;
    width: 100%;
    justify-content: flex-end;

}

.footer-btn-div {
    display: flex;
}

.footer-text {
    color: var(--clr-ancient-gray);
    margin-top: 32px;
    font-size: 16px;
}

.footer-box-svg {
    display: flex;
    gap: 16px;
}

.footer-svg svg {
    width: 30px;
    height: 30px;
    opacity: 50%;
    cursor: pointer;
}

.footer-privacy-terms-box {
    margin-top: 24px;
    display: flex;
    gap: 24px;
}

.footer-privacy-terms {
    color: var(--clr-ancient);
    opacity: 50%;
    font-size: 13px;
    cursor: pointer;
}
    

.footer-grid--box-4 {
    margin-top: 160px;
}

@media (max-width:1200px) {
    .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

@media (max-width:1100px) {
    .footer-grid {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1fr;
    }

    .footer-btn-div {
        display: none;
    }
}

@media (max-width:1000px) {
    .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    .footer-ul-grid {
        margin-top: 9px;
        display: grid;
        grid-template-columns: 120px 120px;
        row-gap: 32px;
    }
}

@media (max-width:950px) {

    .footer-grid--box-3 {
        /* display: none; */
    }

    .footer-grid {
        display: grid;
        grid-template-columns:  1fr 1fr;
    }

    .footer-grid--box-2 {
        margin-top: 48px;
        grid-column-start: 1;
        grid-row-start: 2;
    }

    .footer-grid--box-4 {
        margin-top: 60px;
        grid-column-start:1 ;
        grid-row-start:3 ;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-grid--box-2 {
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }

    .footer-ul-grid {
        margin-top: 0;
        display: grid;
        grid-template-columns: 120px 120px;
        row-gap: 32px;
    }

    
}

@media (max-width:700px) {
    .footer-grid {
        display: grid;
        grid-template-columns:  1.5fr 1fr;
    }
    
}

@media (max-width:600px) {

    .footer-grid--box-3 {
        display: none;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

}



/* cards */

.cards-background {
    padding: 120px 0;
    background-color: var(--clr-primary);
}

.cards-blur {
    position: absolute;
    background-color: var(--clr-secondary);
    width: 100%;
    height: 100%;
    filter:blur(300px);
    opacity: 8%;
}

.cards-font-h2 {
    color: var(--clr-ancient);
    text-align: center;
    max-width: 70%;
    line-height: 72px;
    margin: 0 auto;
    font-size: 64px;
    font-weight: bold;
    letter-spacing: -6%;
}

.cards {
    position: relative;
    margin-top: 80px;
    display: grid;
    grid-template-columns: 416px 416px 416px;
    gap: 16px;
}

.card {
    cursor: pointer;
    position: relative;
    /* background: rgb(20,20,26); */
    height: 360px;
    width: 416px;
    border-radius: 12px;
    /* border: 0.25px solid var(--clr-ancient-gray); */

}

/* hover */
.card > .card-content {
    border: 0.25px solid var(--clr-ancient-gray);
    background-color: rgb(20,20,26);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    inset: 0.5px;
    /* padding: 10px; */
    position: absolute;
    z-index: 2;
  }

#cards:hover > .card::after {
    opacity: 1;
}

.card:hover::before {
    opacity: 1;
}

.card::before,
.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  /* transition: opacity 500ms; */
  width: 100%;
  transition: opacity 400ms ease 0s;
}

.card::before {
    background: radial-gradient(
      800px circle at var(--mouse-x) var(--mouse-y), 
      #4f4fff10,
      transparent 60%
    );
    z-index: 3;
  }

.card::after {  
    background: radial-gradient(
      600px circle at var(--mouse-x) var(--mouse-y), 
      #4f4fff80,
      transparent 100%
    );
    z-index: 1;
}  

.card-text-box {
    padding-top: 24px;
    margin: 0 25px;
}

.card-svg-heading-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-heading {
    font-size: 28px;
    line-height: 31px;
    font-weight: bold;
    color: var(--clr-ancient);
}

.card-text {
    margin-left: 45px;
    margin-top: 20px;
    color: var(--clr-ancient-gray);
    font-size: 18px;
    line-height: 28px;
}

.card-svg-earn {
    padding-top: 2px;
    width: 30px ;
    height: 30px;
}

.card-custom-img-box {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 20px;
}

.card-custom-img {
    /* padding-top: 20px; */
    width: 280px;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/img/earn-rewards-custom-v3.png);
}

.card-custom-img-box-2 {
    margin-left: 0px;
    width: 100%;
    height: 180px;
}

.card-custom-img-2 {
    margin-top: 20px;
    margin-left: 70px;
    background-image: url(/img/custom-plate-v2.png);
    background-position: left;
    background-size: cover;
    height: 160px;
    background-repeat: no-repeat;
}

.card-text-box-2 {
    padding-top: 24px;
    margin: 0 25px;
}

.card-custom-img-box-3 {
    margin-left: 0px;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;

    height: 180px;
}

.card-custom-img-3 {
    margin-top: 0px;
    margin-left: 0px;
    background-image: url(/img/custom-car.png);
    background-position: left;
    background-size:auto;
    height: 180px;
    background-repeat: no-repeat;
    /* overflow: hidden; */
}

.card-text-box-3 {
    padding-top: 10px;
    margin: 0 25px;
}

.car-svg-heading-box-3 {
    gap:20px
}

.card-custom-img-box-4 {
    padding: 20px 0 0;
    margin-left: 0px;
    width: 100%;
    height: 180px;
}

.card-custom-img-4 {
    margin-top: 0px;
    padding-top: 30px;
    margin-left: 0px;
    background-image: url(/img/custom-secure-v3.png);
    background-position: center;
    background-size:contain;
    height: 180px;
    background-repeat: no-repeat;
}

.card-text-box-4 {
    margin: 9px 25px 0 25px;
}

.card-custom-img-box-5 {
    position: absolute;
    padding: 5px 0;
    margin-left: 0px;
    width: 100%;
    height: 180px;
}

.card-custom-img-5 {
    margin-top: 0px;
    padding-top: 30px;
    margin-left: 0px;
    background-image: url(/img/custom-visibility-v4.png);
    background-position: center;
    background-size:contain;
    height: 180px;
    background-repeat: no-repeat;
}

.card-text-box-5 {
    padding-top: 185px;
    margin: 0 25px;
}

.card-custom-img-box-6 {
    top: 0;
    left: 0px;
    position: absolute;
    padding: 0px 0 0;
    margin-left: 0px;
    width: 100%;
    height: 180px;
}

.card-custom-img-6 {
    margin-top: 15px;
    padding-top: 0px;
    margin-left: 0px;
    background-image: url(/img/custom-idea-v15.png);
    background-size: contain;
    height: 180px;
    background-repeat: no-repeat;
}

.card-text-box-6 {
    margin: 0 25px;
}

@media (max-width:1440px) {
    .cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* grid-template-columns: 416px 416px; */

        gap: 16px;
        justify-content: center;
    }

    .card {
        width: 380px;
    }
}

@media (max-width:1250px) {
    .card {
        width: 350px;
    }
}

@media (max-width:1162px) {
    .card {
        width: 416px;
    }
}


@media (max-width:950px) {
    .card {
        width: 350px;
    }

    .cards-font-h2 {
        font-size: 56px;
        max-width: 80%;
    }
}

@media (max-width:800px) {
    .cards {
        margin-top: 68px;
        gap: 24px;
    }

    .card {
        width: 100%;
    }

    .cards-font-h2 {
        font-size: 52px;
        max-width: 80%;
        line-height: 64px;
    }

    .card-text-box {
       padding-top: 40px;
    }

    .card-custom-img-box-2 {
        /* position: absolute; */
        margin-left: 0px;
        width: 100%;
        height: 180px;
    }
    
    .card-custom-img-2 {
        padding-top: 20px;
        margin-left: 70px;
        background-image: url(/img/custom-plate-v2.png);
        background-position: left;
        background-size: cover;
        height: 160px;
        background-repeat: no-repeat;
    }


    .card-text-box-2 {
        padding-top: 40px;
    }

    .card-custom-img-box-3 {
        position: absolute;
        margin-left: 0px;
        width: 100%;
        height: 180px;
    }
    
    .card-custom-img-3 {
        position: absolute;
        margin-top: 0px;
        margin-left: 0px;
        background-image: url(/img/custom-car-mobile-v2.png);
        background-position-y:70%;
        background-position-x:-35px;
        background-size:100%;
        height: 180px;
        width: 100%;
        background-repeat: no-repeat;
    }
    
    .card-text-box-3 {
        
        padding-top: 215px;
        margin: 0 25px;
    }

    
    .card-custom-img-box-6 {
        position: absolute;
        padding: 0px 0 0;
        margin-left: 0px;
        width: 100%;
        height: 180px;
    }

    .card-custom-img-6 {
        margin-top: 20px;
        padding-top: 0px;
        margin-left: 0px;
        background-image: url(/img/custom-idea-mobile-v2.png);
        background-position: 50%;
        background-size:contain;
        height: 170px;
        background-repeat: no-repeat;
    }

    .card-text-box-6 {
        margin: 0 25px;
    }

}

@media (max-width:650px) {

    .cards-font-h2 {
        font-size: 48px;
        max-width: 100%;
        line-height: 64px;
    }

    .card-text-box-2 {
        padding-top: 30px;
    }
    .card-custom-img-2 {
        padding-top: 0px;
    }

    .card-custom-img-box {
        padding-top: 20px;
    }

    .card-text-box {
        padding-top: 30px;
    }

    .card-custom-img-2 {
        /* padding-top: 20px; */
        margin-left: 70px;
        background-image: url(/img/custom-plate-v2.png);
        background-position: left;
        background-size: cover;
        height: 160px;
        background-repeat: no-repeat;
    }

    .card-text-box-3 {
        
        padding-top: 205px;
        margin: 0 25px;
    }

}

@media (max-width:555px) {
    .cards {
        gap:16px;
    }

    
}

@media (max-width:518px) {
    .card-text-box-3 {
        
        padding-top: 195px;
        margin: 0 25px;
    }
}

@media (max-width:440px) {
    .cards-font-h2 {
        font-size: 40px;
        max-width: 90%;
        line-height: 48px;
    }
}

@media (max-width:430px) {
    .card-custom-img-3 {
        background-position-y:80%;
        background-position-x:-35px;
    }
    
    .card-heading {
        font-size: 24px;
        line-height: 26px;
    }
    
    .card-text {
        font-size: 17px;
        line-height: 24px;
        margin-top: 16px;
    }
}

@media (max-width:411px) {
    .cards-font-h2 {
        font-size: 36px;
        max-width: 90%;
        line-height: 48px;
    }
}

@media (max-width:375px) {
    .cards-font-h2 {
        font-size: 32px;
        max-width: 90%;
        line-height: 44px;
    }
}

/* hero */

@media (min-width:1800px) {

   .font-h1 {
    font-size: 100px;
   }

    .video-container {
        background-color: var(--clr-primary);
        margin-bottom: -7px;
        display: flex;
        justify-content: center;
    }

    video {
        display: flex;
        max-width: 100%;
        height: 1000px;
    }

    .video-text-box {
        margin-top: 180px;
        display: flex;
        width: 100%;
        height: 100%;
    }
    
    .video-text {
        text-align: left;
    }
    
    .video-text-p {
        margin-top: 16px;
        font-size: 24px;
        text-align: left;
    }

    .video-button {
        margin-top: 32px;
    }

    .video-button-text {
        display: flex;
        justify-content: center;
        color: #fff;
    }
}

@media (min-width:1640px) {
    video {
        height: auto;
        max-width: 115%;
    }

        .video-text-box {
        margin-top: 180px;
        display: flex;
        width: 100%;
        height: 100%;
    }
    
    .video-text {
        text-align: left;
    }
    
    .video-text-p {
        margin-top: 16px;
        font-size: 24px;
        text-align: left;
        color: var(--clr-ancient);
    }

    .video-button {
        margin-top: 32px;
    }

    .video-button-text {
        display: flex;
        justify-content: center;
    }
    
}

@media (max-width:1640px) {

    video {
        height: auto;
        width: 110%;
    }
    
    .video-text-box {
        margin-top: 180px;
        display: flex;
        justify-content: flex-start;
    }

    .video-text-p {
        margin-top: 16px;
        font-size: 22px;
        text-align: left;
        font-weight: 300;
        
    }

    .video-button {
        margin-top: 32px;
    }
}

@media (max-width:1000px) {
    .video-text-box {
        margin-top: 120px;
    }

    @media (max-width:900px) {
        .video-text-box {
            margin-top: 80px;
        }
    }
}

.video  {
    margin-bottom: -7px;
}
.video-container {
    overflow: hidden;

    position: relative;
}

.video-text-container {
        width: 100%;
        height: 90%;
        position: absolute;
        top: 0%;
        left: 0%;
        z-index: 1;
        color: white;
        font-size: 2rem;
        text-align: center;
}



.video-button {
    position: relative;
    display: flex;
    justify-content: center;
    width: 223px;
    height: 58px;
    /* background-image: url(/img/video-btn.svg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.video-button-text {
    justify-self: center;
    align-self: center;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    position: absolute;
    top: 15px;
    left: 44px;
    color: #fff;
}

.video-button-box {
    width: fit-content;
}

@media (max-width:800px) {
    video {
        left: -30%;
        position: absolute;
        width: auto;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

    }
    
    .video-container {
        position: relative;
        width: 100%;
        height: 700px;
        object-fit: cover;
    }

    .video-text-box {
        margin-top: 64px;
        display: flex;
        justify-content: left;
    }

    .video-text-p {
        margin-top: 12px;
        font-size: 22px;
        text-align: left;
        font-weight: 300;
    }

    .video-button-box {
        justify-content: left;
    }

    .video-button {
        /* margin-top: 352px; */
        /* width: 100%; */
        align-self: left;
    }

}

@media (max-width:660px) {
    video {
        left: -40%;
    }
}

@media (max-width:620px) {
    video {
        left: -50%;
    }

    .video-container {
        height: 700px;
    }

    .video-text-box {
        margin-top: 32px;
    }

    .video-text-p {
        margin-top: 8px;
        font-size: 20px;
        line-height: 24px;
    }

    .video-button {
        margin-top: 24px;
    }
}


@media (max-width:580px) {
    video {
        left: -70%;
    }
}

@media (max-width:555px) {
    .video-text-box {
        justify-content: center;
    }
    .video-text-p {
        text-align: center;
    }
    .video-button {
        width: 100%;
    }

    .video-text-box {
        margin-top: 24px;
    }

    .video-text-p {
        margin-top: 4px;
        font-size: 20px;
        line-height: 24px;
    }

    .video-button {
        margin-top: 16px;
    }
}

@media (max-width:500px) {
    video {
        left: -100%;
    }
}

@media (max-width:450px) {
    video {
        left: -120%;
    }
}

@media (max-width:400px) {
    video {
        left: -135%;
    }
}

@media (max-width:350px) {
    video {
        left: -140%;
    }
}

/* our team */

.our-team-background {
    background-color: var(--clr-primary);
    padding: 124px 0;
}

.our-team-main-heading {
    color: var(--clr-ancient);
}

.our-team-img-box {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.our-team-img-1 {
    background-image: url(/img/team-member1-v1.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.our-team-img-2 {
    background-image: url(/img/team-member2-v1.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.our-team-img-3 {
    background-image: url(/img/team-member3-v1.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.our-team-text-box-flex {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.our-team-text-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(14,14,18,1) 100%);
    border-top: 0.5px solid var(--clr-ancient-gray);
}

.our-team-text-box--box {
    margin: 0px 25px 0px 25px;
}

.our-team-heading {
    line-height: 32px;
    font-size: 32px;
    font-weight: 600;
    color: var(--clr-ancient)
}

.our-team-p {
    color: var(--clr-ancient-gray);
    margin-top: 8px;
} 

@media (max-width:1440px) {
    .our-team-main-heading {
        max-width: 1188px;
        margin: 0 40px ;
    }
}

@media (max-width:1230px) {
    .our-team-main-heading {
        margin: 0 30px ;
    }
    
}

@media (max-width:1195px) {
    .our-team-main-heading {
        margin: 0 20px ;
 }
    
}

@media (max-width:1160px) {
    .our-team-main-heading {
        margin: 0 auto;
        width: fit-content;
    }
}

@media (max-width:800px) {

    .our-team-img-1 {
        background-position-y: 20%;
    }

    .our-team-img-2 {
        background-position-y: 0;
    }

    .our-team-img-3 {
        background-position-y: 0%;
    }

    .our-team-card {
        height: 480px;
    }
    
    .our-team-text-box {
        height: 150px;
    }
}

.cards-blur-v2 {
    position: absolute;
    background-color: var(--clr-secondary);
    width: 100%;
    height: 100%;
    filter: blur(50px);
    opacity: 8%;
}

/* our partners */

.our-partners-background {
    background-color: var(--clr-primary);
    padding-bottom: 180px;
}

.our-partners-heading {
    color: var(--clr-ancient);
}
/* slider */


@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-400px * 3))}
}

.slider {
    padding-top: 50px;
	background: var(--clr-primary);
	/* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125); */
	height: 100px;
	margin: auto;
	overflow:hidden;
	position: relative;
	width: 100%;
	
}
	.slider::before,
	.slider::after {
        background: linear-gradient(to right,  var(--clr-primary) 0%,rgba(255,255,255,0) 100%);
		content: "";
		height: 100px;
		position: absolute;
		width: 200px;
		z-index: 2;
	}
	
	.slider::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	.slider::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: scroll 25s linear infinite;
		display: flex;
        gap: 100px;
		width: calc(400px * 5);
	}
	
	.slide {
		height: 50px;
		width: 400px;
	}

/* news */

.news-background {
    background-color: var(--clr-secondary-dark);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1014px;
}

.news-main-heading  {
    position: absolute;
    z-index: 3;
    color: var(--clr-ancient);
    top: 90px;
}

.btn-left {
    margin-top: 128px;
    position: absolute;
    /* left: 10px; */
    margin-right: 1130px;
}

.btn-left-click {
    z-index: 4;
    position: relative;

}

.btn-right {
    margin-top: 128px;
    position: absolute;
    margin-left: 1130px;
    /* right: 10px; */
}

.btn-right-click {
    position: relative;
    z-index: 4;
}


.news-carusel {
    transition: transform 0.5s ease;
    margin-top: 120px;
    position: absolute;
    display: flex;
    gap:25px;
    /* top: 266px; */
    align-items: center;
}

.news-box {
    position: relative;
    background-color: #0D0D11;
    width: 360px;
    height: 600px;
    margin: 0 auto;
}

.news-box--img-box {
    width: 100%;
    height: 360px;
    background-image: url(/img/news-img.png);  
}

.news-box--img {
    width: 100%;
    height: 360px;  
    background-color: rgba(0, 0, 0, 0.60);
}

.news-box--text {
    position: relative;
    display: flex;
    align-items: center;
    height: 240px;
}

.news-box--test-mask {
    height: 100%;
    position: absolute;
    z-index: 3;

    background-color: rgba(0, 0, 0, 0.60);
    width: 100%;
    display: flex;
    align-items: center;
}

.swiper-slide[data-status='active'] > .news-box > .news-box--test-mask {
    background-color: rgba(0, 0, 0, 0.00);
}

.news-box--text-text {
    margin: 0 40px;
}

.news-date {
    color: var(--clr-ancient);
    font-size: 16px;
    font-weight: 400;
}

.news-heading {
    color: var(--clr-ancient);
    font-size: 28px;
    line-height: 36px;
}

.news-btn {
    position: relative;
    margin-top: 24px;
    padding-left: 0px;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 280px;
    height: 58px;
    /* background-image: url(/img/news-btn.svg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.news-btn-svg {
    position: absolute;
}

.news-btn-text {
    z-index: 2;
    color: var(--clr-ancient);
    font-size: 18px;
    font-weight: bold;
    padding-left: 52px;
    padding-right: 112px;
}
/* news middle */

.swiper-slide[data-status='active'] .news-box {
    width: 400px;
    height: 630px;
    background-color: var(--clr-secondary);

}

.swiper-slide[data-status='active'] > .news-box > .news-box--img-box > .news-box--img {
    background-color: rgba(0, 0, 0, 0.00);
}

.swiper-slide[data-status='active'] > .news-box > .news-box--text > .news-box--test-mask {
    background-color: rgba(0, 0, 0, 0.00);

}

.swiper-slide[data-status='active'] > .news-box > .news-box--text {
    height: 280px;
}

.swiper-slide[data-status='active'] > .news-box > .news-box--text > .news-box--text-text >.news-heading {
    margin-top: 10px;
}
 
.swiper-slide[data-status='active'] > .news-box > .news-box--test-mask {
    display: none;
}

.roadmap-background {
    overflow: hidden;
    background-color: var(--clr-primary);
    height: 100%;
}

.roadmap-blur {
    position: absolute;
    background-color: var(--clr-secondary);
    height: 100%;
    width: 100%;
    opacity: 0.03;
    filter: blur(50px);
}

.roadmap-background-rect {
    border-top: 1px solid var(--clr-secondary);
    border-bottom: 1px solid var(--clr-secondary);
    height: 120%;
    background: linear-gradient(45deg, rgba(14,14,18,1) 0%, rgba(14,14,18,0.6) 100%);
}

.roadmap-heading-main {
    padding-top: 100px;
    color: var(--clr-ancient);
}

.roadmap-carusel {
    margin-top: 100px;
    position: relative;

}

.roadmap-carusel-track {
    position: absolute;
    display: flex;
    gap: 16px;
}

.roadmap-box {
    height: 600px;
    width: 360px;
    background: linear-gradient(-45deg, rgba(20,20,27,0.5) 0%, rgba(20,20,26,0.5) 100%);
    filter: drop-shadow(0 10px 5px #00000050);
    border-radius: 12px;
    overflow: hidden;
}

.roadmap-box--box {
    width: calc(100% - (20px * 2));
    height: calc(100% - (20px * 2));
    margin: 20px;

}

.roadmap-quarter {
    color: var(--clr-secondary);
}

.roadmap-heading-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* if is completed */
.roadmap-box[data-status='completed'] > .roadmap-box--box > .roadmap-heading-box::after {
    display: flex;
    background-image: url(/img/roadmap-btn-background.png);
    content: 'COMPLETED';
    background-repeat: no-repeat;
    width: 92px;
    height: 24px;
    font-size: 10px;
    letter-spacing: -5%;
    line-height: 24px;
    align-self: center;
    justify-content: center;
    color: var(--clr-ancient);
    filter: drop-shadow(0 2px 6px #7070E035);
}

/* if is ongoing */

.roadmap-box[data-status='ongoing'] > .roadmap-box--box > .roadmap-heading-box::after {
    display: flex;
    background-image: url(/img/roadmap-current-btn.png);
    content: 'CURRENT';
    background-repeat: no-repeat;
    width: 92px;
    height: 24px;
    font-size: 10px;
    letter-spacing: -5%;
    line-height: 24px;
    align-self: center;
    justify-content: center;
    color: var(--clr-ancient);
    filter: drop-shadow(0 2px 6px #7070E035);
}

.roadmap-heading {
    font-size: 32px;
    color: var(--clr-ancient);
}

.roadmap-text-box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.roadmap-text-small {
    display: flex;
    align-items: center;
    gap: 10px;
}

.roadmap-text {
    color: var(--clr-ancient);
    font-size: 18px;
}

.roadmap-dot {
    width: 5px;
    height: 5px;
    border-radius: 15px;
    background-color: var(--clr-ancient);
}

.roadmap-text-small::before{
    width: 5px;
    height: 5px;
    background-color: var(--clr-ancient);
    border-radius: 15px;
}

/* .container-raodmap {
    --padding: 1rem;
    margin-left: 5rem;
} */

@media (min-width:1400px) {

    
    .container-raodmap {
        --padding: 1rem;
        margin-left: auto;
        margin: 0 auto;
        width: 1280px;
    }
}

@media (max-width:1399px) {
    .container-raodmap {
        --padding: 1rem;
        margin-left: calc(var(--padding) *  2.5);
    }
}

.div {
    background-color: none;
    height: 100%;
}

.div-div > .swiper-slide {
    width: 360px !important
}

.roadmap-background-v2 {
    padding: 120px 0;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.scrollbar-colored {
    background-color: var(--clr-secondary)
}

/* future */

.future-background {
    padding-top: 120px;

    background-color: var(--clr-primary) ;
}

.future-main-heading {
    text-align: center;
    color: var(--clr-ancient);
}

.future-box {
    margin-top: 120px;
    border-radius: 12px;
    border:0.5px solid var(--clr-ancient-gray);
    background: linear-gradient(145deg, rgba(20,20,26,0.9) 0%, rgba(20,20,26,0.7) 100%);
}

.future-box--box {
    margin: 30px 40px;
    display: flex;
    gap: 100px;
}

.future-box--box {
    display: flex;
    justify-content: center;
}

.future-text-box {

}

.future-heading {
    color: var(--clr-ancient);
    font-size: 48px;
    font-weight: bold;
    letter-spacing: -5%;
}

.future-p {
    margin-top: 20px;
    color: var(--clr-ancient);
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
}

.future-btn {
    margin-top:40px;
}

.future-card-box {

}

.future-card-custom-img-box {
    height: 100%;
    width: 100%;
}

.future-card-custom-img {
    margin-top: 30px;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/img/future-custom.png);
    background-repeat: no-repeat;
    background-position-x: 70%;
    
}

.future-card {
    position: relative;
}

@media (max-width:1162px) {
    .card-futu {
        width: 350px;
    }
}

@media (max-width:1140px) {
    .future-p {
        margin-top: 12px;
    }
    .future-btn {
        margin-top:32px;
    }
}

@media (max-width:1080px) {
    .future-box--box {
        gap: 40px;
    }
}

@media (max-width:984px) {
    .future-box--box {
        flex-direction: column;
    }

    .future-card {
        width: 100%;
    }

    .card-futu {
        width: 100%;
    }

    .future-card-custom-img {
        background-position-x: 50%;
    }

}

@media (max-width:600px) {
    .future-p {
        font-size: 18px;
    }
}




/* documentation-page */
/* documentation-page */
/* documentation-page */
/* documentation-page */
/* documentation-page */


.documentation-body {
    background-color: #060608;
    width: 100%;
    height: 100%;
}

.nav-line-container {
    position: relative;
    height: 106px;
}

.documentation-nav-line {
    top: 106px;
    position: absolute;
    width: 100%;
    height: 0.5px;
    background-color: var(--clr-ancient-gray);
}

.documentation-main-grid {
    position: relative;
    display: grid;
    grid-template-columns: 230px auto;
    column-gap: 24px;
}

.documentation-left {
    top: 0px;
    height: 500px;
    position: sticky;
    display: flex;
    flex-direction: column;
}

.documentation-right {
    margin-top: 60px;
}

@media (max-width:1000px) {
    .nav-documentation-background {
        background-color: #000;
    }

    /* .nav-line-container{
        display: none;
    } */
}



.documentation-heading-colored {
    color: var(--clr-ancient) !important
}

.subheading-box-first {
    /* margin-top: px !important */
}

@media (max-width:800px) {
    .technology-first-heading {
        margin-top: 120px;
    }

    .documentation-right {
        margin-top: 120px;
    }

    .nav-line-container {
        display: none;
    }
}

.technology-first-heading {
    margin-top: 60px;
}

.technology-heading-box {
    margin-top: 18px;
}

.technology-box-first {
    margin-top: 0px;
}

.technology-heading {
    color: var(--clr-ancient-white);
    font-size: 20px;
    font-weight: 600;
}

.technology-subheading-box {
    display: flex;
    align-items: center;
    gap:10px;
    margin-top: 12px;
}

.technology-subheading {
    color:#ffffff50;
    font-size: 16px;
    font-weight: 400;
}

.technology-colored {
    /* background-color: linear-gradient(90deg, rgba(2,2,224,1) 0%, rgba(0,189,178,1) 100%); */
    width: fit-content;
    background: -webkit-linear-gradient(45deg, #0202e0,  #00bdb2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.benefits-colored {
    width: fit-content;
    background: linear-gradient(135deg, rgba(255,164,113,1) 0%, rgba(252,255,85,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.secure-colored {
    width: fit-content;
    background: linear-gradient(135deg, #B4D2FF 0%, #9292ED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.indepth-colored {
    width: fit-content;
    background: linear-gradient(135deg, #FFFF5B 0%, #99FF66 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tokenomics-colored {
    width: fit-content;
    background: linear-gradient(135deg, #FF5F51 0%, #D500FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dct-start-div {

}

.dct-name-subheading {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.dct-start-heading {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -2px;
    margin-top: 24px;
    color: var(--clr-ancient);
    font-weight: 500;
}

.dct-start-p {
    margin-top: 24px;
    line-height: 26px;
    color: var(--clr-ancient);
    font-weight: 300;
}

.dct-start-line {
    width: 100%;
    background-color: var(--clr-ancient);
    opacity: 50%;
    height: 0.5px;
    margin-top: 60px;
}

.dct-temp {
    display: grid;
    grid-template-columns: 200px auto;
}

@media (min-width:1170px) {
    .documentation-main-grid {
        grid-template-columns: 200px 836px;
        justify-content: center;
        gap:80px
    }

    /* .documentation-right {
        width: 836px;
    } */
}

.dct-temp-1 {
    margin-top: 40px;
}

.dct-temp-left {

}

.dct-temp-right {

}

.dct-start-line-temp1 {
    grid-column-start: 1;
    grid-column-end: 3;

}

.dct-temp-subheading {
    color: var(--clr-ancient);
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;

}

.dct-temp-heading {
    color: var(--clr-ancient);
    font-size: 26px;
    font-weight: 600;
    line-height: 30px;

}

.dct-temp-p {
    margin-top: 16px;
    color: var(--clr-ancient);
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
}

.dct-temp-2 {
    margin-top: 40px;
}

.dct-temp-img-box {
    position: relative;
    margin-top: 60px;
    width: 100%;
    height: 326px;
}

.dct-temp-img {
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
}

.dct-img-problem {
    background-image: url(/img/documentation/techno-problem.svg);
}

.dct-temp-background-1 {
    top: 0;
    z-index: -1;
    opacity: 0.12;
    filter: blur(150px);
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(2,2,224,1) 0%, rgba(0,189,178,1) 100%);
    border-radius: 12px;
}

.dct-start-line-temp2 {
    margin-top: 60px;
    grid-column-start: 1;
    grid-column-end: 3;
}

.dct-temp-3 {
    margin-top: 40px;
}

.dct-temp-img-box-2 {
    margin-top: 60px;
    position: relative;
    grid-column-start: 1;
    grid-column-end: 3;
    height: 326px;
    width: 100%;
}

.dct-img-solution {
    background-image: url(/img/documentation/techno-solution.svg);
}

.footer-line {
    margin-top: 120px;
    background-color: var(--clr-ancient);
    opacity: 0.5;
    width: 100%;
    height: 0.5px;
}

.dct-temp-img-test {
    object-fit: contain;
}

.documentation-footer-background {
    background-color: #060608;
}

@media (max-width:1030px) {
    .dct-temp {
        margin-top: 48px;
        display: block;
    }
    
    .dct-temp-right {
        margin-top: 16px;
    }

    .dct-temp-subheading {
        font-weight: 400;
    }
}

@media (max-width:950px) {
    .dct-temp-img-box-2 {
        height: 240px;
    }

    .dct-temp-img-box {
        height: 290px;
    }
}

@media (max-width:850px) {
    .dct-temp-img-box-2 {
        height: 200px;
    }

    .dct-temp-img-box {
        height: 240px;
    }
}

.documentation-mob {
    display: none;
}

.nav-relative {
    position: relative;
}

.nav-line-container-v2 {
    width: 100%;
    position: absolute;
    height: 100px;
    display: flex;
    align-items: flex-end;
}

.swiper-slide > .technology-subheading-box {
    margin-top: 0px;
}

.nav-mob-background[data-status='active'] {
    display: block;
}

.nav-mob-background[data-status='inactive'] {
    display: none;
}

@media (max-width:800px) {
    .documentation-main-grid {
        grid-template-columns: 1fr;
    }

    .documentation-left {
        display: none;
    }

    .documentation-mob {
        z-index: 5;
        top: 96px;
        background-color: #000000;
        position: sticky;
        display: block;
        height: 72px;
        /* padding-top: 16px;
        padding-bottom: 16px; */
    }

    .documentation-right {
        margin-top: 60px;
    }
    
    .scrollbar-none {
        display: none;
    }

    .documentation-mob {
        border-top: 0.25px solid var(--clr-ancient-gray);
        border-bottom: 0.25px solid var(--clr-ancient-gray);
    }

    .documentation-mob-flex {
        height: 100%;
        padding-left: 40px;
        display: flex;
        align-items: center;
        border-bottom: 0.25px solid var(--clr-ancient-gray);
        opacity: 1;
    }

    .documentation-full-list {
        height: 100%;
        position: absolute;
        top: 00px;
        right: 0px;
    }

    .background-mob-btn {
        right: 0;
        z-index: 5;
        position: absolute;
        width: 120px;
        height: 100%;
        background: linear-gradient(135deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1) 100%);
    }

    .documentation-svg-box {
        position: absolute;
        padding: 15px;
        top: 10px;
        right: 25px;
    }
}

@media (max-width:600px) {
    .documentation-mob {
        top: 0px;
    }

    nav {
        position: relative;
    }
}

@media (max-width:555px) {
    .documentation-mob-flex {
        padding-left: 16px;
    }
}

.documentation-mob {
    z-index: 5;
}

.documentation-full-list-big[data-status='active'] {
    display: block;
}

.documentation-full-list-big[data-status='inactive'] {
    display: none;
}


/* documentation-full-list */

.documentation-full-list-big {
    position: absolute;
    z-index: 4;
    height: auto;
    width: 100%;
    /* top: 169px; */
    background-color: #000;
    padding-bottom: 100px;
}

.no-scroll {
    position: absolute;
    top: 1969px;
    overflow: hidden;
    height: 0.5px;
}

.documentation-full-list-big {

}

.documentation-fl-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fl-box-1 {
    margin-top: 32px;
}

/* body-no scroll */

.body-noscroll {
    overflow: hidden;
}

/* all images for dct */

.dct-temp-background-benefits {
    background: linear-gradient(135deg, rgba(255,164,113,1) 0%, rgba(252,255,85,1) 100%);
}

.dct-temp-background-secure {
    background: linear-gradient(135deg, #B4D2FF 0%, #9292ED 100%);
}

.dct-temp-background-indepth {
    background: linear-gradient(135deg, #FFFF5B 0%, #99FF66 100%);
}

.dct-temp-background-tokenomics {
    background: linear-gradient(135deg, #FF5F51 0%, #D500FF 100%);
}

.dct-img-earn {
    background-image: url(/img/documentation/earn-custom.svg);
    background-position: center;
}

.dct-img-parking {
    background-image: url(/img/documentation/parking-custom.svg);
    background-position: center;
    border-radius: 25px;
}

.dct-img-promote {
    background-image: url(/img/documentation/promote-custom.svg);
    background-position: center;
}

.dct-img-customazible {
    background-image: url(/img/documentation/customazible-custom.svg);
    background-position: center;
}

.dct-img-secure {
    background-image: url(/img/documentation/secure-custom.svg);
    background-position: center;
}

.swiper-wrapper-single {
    width: 100vw;
}

.dct-img-patent {
    background-image: url(/img/documentation/patent-custom.svg);
    background-position: center;
}

.dct-img-install {
    background-image: url(/img/documentation/custom-install.svg);
    background-position: center;
}

.dct-temp-img-box-2-tokenomics {
    height: 500px;
}

@media (max-width:990px) {
    .dct-temp-img-box-2-tokenomics {
        height: 360px;
    }
}

.dct-img-tokenomics {
    background-image: url(/img/documentation/tokenomics-custom.svg);
    background-position: center;
}

.dct-temp-ul {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.dct-temp-li {
    display: flex;
    margin: 12px 0;
    font-size: 18px;
    font-weight: 300;
    color: var(--clr-ancient);
    line-height: 30px;
    align-items: center;
    gap: 15px;
}

.dct-temp-subheading-ul {
    margin-top: 32px;
}

.dct-temp--ul-p {
    width: fit-content;
}

.dct-temp-li::before {
    content: "";
    background-color: var(--clr-ancient);
    width: 5px;
    height: 5px;
    border-radius: 5px;
}

.documentation-full-list-big {
    overflow: auto;
    height: 100vh;
}

.documnetation-full-list-p-colored {
    color: var(--clr-ancient);
}

.documentation-fl-flex {
    padding-bottom: 210px;
}

@media (max-width:800px) {
    .technology-first-heading {
    
    margin-top: 120px;}
}

.current-box {
    color: var(--clr-ancient);
    opacity: 0.8;
}

/* contact-us */

.contact-us-background {
    position: relative;
    padding: 220px 0 120px ;
    background: linear-gradient(-45deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,1) 100%);
}

.contact-us-background-blur {
    background-color: #4f4fff;
    /* filter: blur(100px); */
    opacity: 1;
    z-index: -1;
}

.contact-back {
    background-color: var(--clr-primary-black);
}

.contact-us-grid {
    display: grid;
    gap: 80px;
    grid-template-columns: 1fr 1fr;
}

.contact-us-heading {
    color: var(--clr-ancient);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -2px;
}

.form {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 32px;
}  

.input {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 32px;
    font-weight: 300;
    width: 100%;
    height: 100%;
    padding: 20px 24px;

}

.input-box {
    /* width: ; */
    /* padding: 16px 24px; */
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(35,35,40,1) 0%, rgba(35,35,40,0.5) 100%);
    border: 0.3px solid var(--clr-ancient-gray);
    /* width: 100%; */
} 

.input-box-message {
    height: 300px;
}

.input-message {
    /* height: 100%; */
    width: 100%;
}


.input-box-1 {
    
}

.input-box-2 {
    
}

.input-box-3 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.input-box-4 {
    grid-column-start: 1;
    grid-column-end: 3;
}


.btn-box {
    /* padding: 24px ; */
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 3;
}

.btn-submit {
    background-color: var(--clr-secondary);
    border: none;
    padding: 24px;
    border-radius: 8px;
    width: 100%;
    color: var(--clr-ancient);
    font-size: 20px;
    letter-spacing: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.contact-us-box-1 {
    position: relative;
    z-index: 3;
}

.contact-us-box-2 {
    /* position: relative; */
}

.contact-us-img-box {
    position: absolute;
    right: 0px;
    width: 100%;
    height: 100%;
}

.contact-us-img {
    background-image: url(/img/contact-us/custom\ plate.svg);
    height: 100%;
    margin-left: 52vw;
    background-repeat: no-repeat;
    background-position-y: 30%;
}


@media (max-width:1150px) {
    .input-box-1 {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .input-box-2 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .form {
        gap: 24px;
    }
}

@media (max-width:1000px) {
    .contact-us-grid {
        grid-template-columns: 1fr;
    }
    .contact-us-img-box {
        display: none;
    }
}

@media (max-width:800px) {
    .contact-us-background {
        padding: 80px 0 80px;
    }
}

.news-padding {
    padding: 180px 0 120px;
    background-color: #0E0E12;
}

.background-news {
    overflow: hidden;
    position: relative;
    background-color: #0E0E12;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.news-box-main-1 {
    display: flex;
    height: 600px;
    /* justify-content: center; */
    align-items: center;
}

.news-h2 {
    color: var(--clr-ancient);
    line-height: 58px;
}

.news-p {
    margin-top: 16px;
    color: var(--clr-ancient);
}

.news-box-box {

}

.news-sc-img-box {
    position: absolute;
    height: 100%;
    width: 100%;
    margin-left: 50vw;
}

.news-sc-img {
    background-image: url(/img/news/hero-news.svg);
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: contain;
    height: 100%;
    /* width: ; */
}

.news-blur-back {
    position: absolute;
    height: 100%;
    width: 700px;
    background-color: var(--clr-secondary);
    background: radial-gradient(circle, var(--clr-secondary) 0%, rgba(0,0,0,0) 70%);
    margin-left: 50vw;
    opacity: 0.25;
}

@media (max-width:800px) {
    .news-padding {
        padding: 80px 0 80px;
        background-color: #0E0E12;
    }
    .news-blur-back {
        background: radial-gradient(circle, var(--clr-secondary) 0%, rgba(0,0,0,0) 60%);

    }
}

@media (max-width:710px) {
    .news-blur-back {
        margin-left: 40vw;
    }

    .news-sc-img-box {
        margin-left: 40vw;

    }
}

@media (max-width:555px) {
    .news-box-main-1 {
        display: flex;
        height: 520px;
    }
}

@media (max-width:450px) {
    .news-h2 {
        font-size: 48px;
    }

    .news-box-main-1 {
        /* display: flex; */
        height: 420px;
    }
}

.news-temp-background {
    padding: 80px 0;
    background-color: #0E0E12;
}

.news-temp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 70px;
    row-gap: 90px;
}

@media (max-width:1400px) {
    .news-temp-grid {
        column-gap: 32px;
    }
}

@media (max-width:1230px) {
    .news-temp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }

    .news-temp-grid > .news-box {
        width: 100%;
    }
}

@media (max-width:900px) {
    .news-temp-grid {
    grid-template-columns: 1fr ;
    }
}

@media (max-width: 390px) {
    .news-temp-background > .container {
        --padding: 0px
    }
}

.news-temp-box {
    /* border: 1px solid var(--clr-ancient-gray); */
    filter: drop-shadow(0px 0px 10px #EDEDFA20);
}

.news-temp-more-box {
    position: relative;
}

.news-temp-more {
    margin-top: 80px;
    /* position: relative; */
    display: flex;
    justify-content: center;
}

.news-btn-more::after {
    left: 0;
    top: 21px;
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--clr-ancient)
}

.news-btn-more {
    background-color: transparent;
    border: none;
    color: var(--clr-ancient);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -8%;
}

.news-arrow {

}


/* swiper-news */


.swiper-news {
    width: 100%;
    margin-top:90px;
}

.swiper-news-wrapper {
    display: flex;
    /* justify-content: center; */
    width: 100%;
}

@media (max-width:460px) {
    .swiper-slide[data-status='active'] .news-box {
        width: 360px;
    }
}

/* quick fixes */

@media (max-width:860px) {
    .roadmap-heading-main {
        width: fit-content;
        margin: 0 auto
    }
    .our-partners-heading {
        width: fit-content;
        margin: 0 auto
    }
}

@media (max-width:750px) {
    .roadmap-heading-main {
        padding-top: 80px;
    }

    .roadmap-background-v2 {
        padding-top: 80px;
    }

    .future-background {
        padding-top: 80px;
    }

    .futur-box {
        margin-top: 80px;
    }

    .our-team-background {
        padding: 80px 0;
    }
}

@media (max-width:555px) {
    .container-raodmap {
        --padding: 1rem;
        margin-left: calc(var(--padding) * 1);
    }

    .cards {
        margin-top: 68px;
        gap: 24px;
    }
}


.padding-top-205 {
    padding-top: 205px;
}

.padding-top-178 {
    padding-top: 178px;
}

.font-h1 {
    font-size: 56px;
    font-weight: 500;
    letter-spacing: 2px;
}

.font-h2 {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: -6%;
}

.font-h3 {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: -5%;
}

.font-h4 {
    font-size: 28px;
    font-weight: bold;
}

.font-h5 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -4%;
}

.font-p {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}


.logo-v2 {
    width: 50px;
    height: 50px;
}

.colored-word {
    color: var(--clr-secondary);
    font-weight: 600;
    text-decoration: underline;
}

.colored {
    color: var(--clr-secondary);
}

.about-us-video {
    /* display: flex;
    justify-content: center; */
}

.video-about-text-box {
    margin-top: 120px;
}

.about-us-video > video {
    width: 120%;
}

.video-h1 {
    text-align: center;
}
.video-about-p {
    text-align: center;
    max-width: 500px;
    font-size: 18px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 16px;
}
.video-button-box-about {
    width: fit-content;
    height: 60px;
    margin: 0 auto;
    position: relative;
}

.video-about-button {
    margin-top: 16px;
}

.video-div {
    display: flex;
    justify-content: center;
    height: 900px;
}

.video-iframe {
    height: 130% !important
}
@media (min-width:1440px) {
    .video-iframe {
        max-height: 1000px;
    }
}

@media (max-width:1200px) {
    .video-div {
        height: 800px;
    }
}

@media (max-width:977px) {
    .video-div {
        height: 700px;
    }
    
    .video-iframe {
        height: 140% !important
    }
}

@media (max-width:750px) {
    .video-div {
        height: 700px;
    }
    
    .video-iframe {
        height: 150% !important
    }
}

@media (max-width:660px) {
    .video-div {
        height: 800px;
    }
    
    .video-iframe {
        height: 150% !important
    }
}

@media (max-width:610px) {
    .video-div {
        height: 650px;
    }
    
    .video-iframe {
        height: 185% !important ;
    }
}


@media (max-width:420px) {
    .video-div {
        height: 690px;
    }

    .video-iframe {
        height: 170% !important ;
    }
}

@media (max-width:400px) {
    .video-div {
        height: 760px;
    }

    .video-iframe {
        height: 170% !important ;
    }
}



@media (max-width:1400px) {
    .about-us-video > video {
        width: 150%;
    }
}

@media (max-width:1130px) {
    .about-us-video > video {
        width: 180%;
    }
}

@media (max-width:955px) {
    .about-us-video > video {
        width: 200%;
    }
}

@media (max-width:800px) {
    .video-about-text-box {
        margin-top: 60px;
    }

    .video-h1 {
        width: fit-content;
        margin: 0 auto;
    }

    .about-us-video > video {
        left: auto;
    }
}

@media (max-width:660px) {
    .about-us-text-video {
        height: auto;
        padding-bottom: 80px;
        background-color: var(--clr-primary);
    }

    .about-us-video {
        height: 750px;
    }

    .about-us-video > video {
        margin-top: 190px;
        width: 110%;
    }
}

@media (max-width:610px) {
    .about-us-video {
        height: 780px;
    }

    .about-us-video > video {
        margin-top: 200px;
        width: 120%;
    }
}

@media (max-width:570px) {
    .about-us-video {
        height: 720px;
    }
}

@media  (max-width:555px) {
    .video-button-box-about {
        width: auto;
        
    }
}

@media (max-width:480px) {

    .about-us-video > video {
        margin-top: 220px;
        width: 120%;
    }

    .about-us-video {
        height: 700px;
    }
}

@media (max-width:400px) {
    .about-us-video > video {
        margin-top: 240px;
        width: 140%;
    }
    .about-us-video {
        height: 730px;
    }
}

.video-about-text-box {
    justify-content: center;
    text-align: center;
}

@media (max-width:1100px) {
    .hero-video {
        width: 150%;
        left: -100px;
        height: 700px;
    }
}

@media (max-width:800px) {
    .video-hero-container {
        /* width: 140%; */
        height: auto;
        /* left: -100px; */
        overflow: hidden;
    }
    
    .hero-video {
        width: 150%;
        left: -100px;
        height: 600px;
    }
}

@media (max-width:710px) {
    .hero-video {
        width: 180%;
        left: -300px;
        height:1000px;
    }

    .video-text-hero {
        height: auto;
        padding-bottom: 60px;
        background-color: var(--clr-primary);
    }

    .hero-iframe {
        padding-top: 360px;
    }
}

@media (max-width:640px) {
    .hero-video {
        width: 180%;
        left: -300px;
        height:950px;
    }
}

@media (max-width:620px) {
    .hero-iframe {
        padding-top: 320px;
    }

    .hero-video {
        width: 200%;
    }
}

@media (max-width:560px) {
    .hero-iframe {
        padding-top: 300px;
    }

    .hero-video {
        width: 250%;
        left: -450px;
    }
}

@media (max-width:500px) {
    .hero-iframe {
        padding-top: 300px;
    }

    .hero-video {
        width: 250%;
        left: -350px;
        height: 800px;
    }
}

@media (min-width:1800px) {

    .font-h1 {
     font-size: 80px;
     letter-spacing: -0.5px;
     font-weight: 700;

    }
}

@media (max-width:1640px) {
    .font-h1 {
        font-size: 72px;
        letter-spacing: -0.5px;
        font-weight: 700;
       }
}

@media (max-width:800px) {
    .font-h1 {
        font-size: 54px;
        letter-spacing: -0.5px;
        font-weight: 600;
        text-align: left;
       }
}

@media (max-width:555px) {
    .font-h1 {
        text-align: center;
    }
}


.overlay {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #00000060;
}

.overlay[data-status='inactive'] {
    display: none;
}

.overlay[data-status='active'] {
    display: block;
}
 

@media (max-width:950px) {
    .font-h2 {
        font-size: 58px;
        line-height: 60px;
    }
    .future-heading {
        font-size: 44px;
        line-height: 48px;
    }
}

@media (max-width:800px) {
    .font-h2 {
        font-size: 52px;
        line-height: 64px;
    }
}

@media (max-width:650px) {
    .font-h2 {
        font-size: 48px;
        line-height: 60px;
    }
}

@media (max-width:440px) {
    .font-h2 {
        font-size: 40px;
        line-height: 48px;
    }

    .news-h2 {
        line-height: 40px;
    }
}

@media (max-width:555px) {
    .video-button-box {
        margin: 0 auto;
    }
}

/* buttons */

/* about btn */
.video-button-box:hover > .button-svg {
    position: relative;
    cursor: pointer;
    fill: #fff;
}

.video-button-box:hover > .video-button-text {
    cursor: pointer;
    color: var(--clr-primary);
}

/* hero-btn */
.video-button-hero:hover > .button-svg {
    fill: #fff;
    cursor: pointer;
}

.video-button-hero:hover > .video-button-text {
    color: var(--clr-primary);
    cursor: pointer;
}

/* nav btn */

.nav-btn:hover > .nav-btn-svg > path {
    fill: #fff;
    cursor: pointer;
}

.nav-btn:hover > .nav-btn-text {
    color: var(--clr-primary);
    cursor: pointer;
}

/* news-btn */

.news-btn:hover > .news-btn-svg > path + path + path + path {
    fill:var(--clr-primary);
    /* stroke: var(--clr-primary); */
}

.news-btn:hover > .news-btn-svg > path + path + path  {
    fill: var(--clr-primary);
    /* stroke: var(--clr-primary); */
}

.news-btn:hover > .news-btn-svg > path + path  {
    fill: #fff;
    stroke: var(--clr-primary);
}

.news-btn:hover > .news-btn-svg > path  {
    fill: #fff;
    stroke: var(--clr-primary);
}

.news-btn:hover > .news-btn-text {
    color: var(--clr-primary);
}

/* nav */

.nav-items:hover {
    color: blue !important;
}

.nav-li--a:hover {
    color: var(--clr-secondary);
}

.a-tag-btn {
    position: absolute;
    right: -0px;
    margin-top: 28px;
    top: -5px;
}


/* footer */

.footer-svg:hover svg {
    opacity: 1;
}

.footer-privacy-terms:hover {
    opacity: 1;
    cursor: pointer;
}

/* card-fix */

.card-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}