@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');


/* Variables for Making Changes */
:root {
    /* For Changing Menu Color */
    --nav-font-color: #fff;
    /* heading Color */
    --heading-color: #fff;
    /* font Family */
    --ff: montserrat;
    /* Big Text (Decentralized NFT Algorithm) */
    --bg-text: 5.2rem;
    /* Blue Highlighted text */
    --hightlighted-text: #2DB1E0;
    /* General Font-color */
    --fc-white: #fff;
    /* Logo Icon size */
    --w-h: 40px;
}

/* utility Classes */
.fc-white {
    color: var(--fc-white) !important;
}
.fc-blue{
    color: var(--hightlighted-text);
}
.mt-6{
    margin-top: 200px;
}



body {
    font-family: var(--ff);
    background-color: #0A1C1E;
    height: 100%;
}


img{
    width: 100%;
}
.navbar-brand {
    font-size: 2rem !important;
}

.navbar-brand img {
    width: var(--w-h) !important;
    height: var(--w-h) !important;
    transform: rotate(-45deg);
    margin-right: -15px;
}

.navbar-nav li a {
    color: var(--nav-font-color) !important;
    font-weight: 600;
}

.navbar-expand-lg .navbar-collapse {
    flex-direction: row-reverse !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url('Visual Assets/social icons/menu Icon.svg') !important;
}


.Hero-image-holder {
    background: url('Visual Assets/dna_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    position: relative;   
}
.centered-heading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
}

h1 {
    color: var(--heading-color);
    font-weight: 800 !important;
    line-height: 85px !important;
}

.big-text {
    color: var(--hightlighted-text) !important;
}

.avalanche-logo img {
    margin-top: -25px !important;
    width: 70px;
}


/* FLIPPING CARDS CSS */

/* The flip card container-timeline - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container-timeline is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container-timeline */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: transparent;
  color: white;
  transform: rotateY(180deg);
}

/******* RoadMap CSS ******/
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container-timeline around content */
.container-timeline {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container-timeline::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #2DB1E0;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container-timeline to the left */
.left {
  left: 0;
}

/* Place the container-timeline to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container-timeline (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container-timeline (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for container-timelines on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width container-timelines */
  .container-timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container-timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right container-timelines behave like the left ones */
  .right {
    left: 0%;
  }
}


/******* Team Members Cards *******/
.card-img-top{
    width: 100%;
}
.gutter-x-less{
    --bs-gutter-x: 0rem;
}
.card{
    background-color: black;
    color: white;
    margin: 0 12px;
    padding-bottom: 1.2rem;
}

.social-icons-team img{
    width: 40px;
}
.social-icons-team{
    padding-left: 8px;
}
.social-icons-holder-footer{
    flex-direction: row-reverse;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .flip-card {
        background-color: transparent;
        width: 100%;
        min-height: 300px;
        perspective: 1000px;
    }
}

@media (max-width: 992px){
    .social-icons-holder-footer {
        flex-direction: row;
        margin-top: 24px;
    }
    .reversing-row-res{
        flex-direction: column-reverse;
    }
    .reversing-row-res h2{
        margin-bottom: 4rem;
    }
    .responsive-heading-mb-spacing{
        margin-bottom: 4rem;
    }
    .navbar-expand-lg .navbar-collapse {
        flex-direction: row-reverse !important;
        background: black;
        z-index: 10;
        border-radius: 5px;
    }
}

@media (min-width: 1400px){
    .container{
    max-width: 1400px !important;
    }
}

@media only screen and (min-width: 600px) {
    .big-text {
        font-size: var(--bg-text) !important;
    }

    .rht-heading {
        margin-top: 100px;
    }
}

@media (min-width: 992px){
    .card {
        width: 23%;
    }
}


@media only screen and (max-width: 600px) {
    h1 {
        line-height: 60px !important;
    }
    .avalanche-logo img{
        width: 50px !important;
        margin-top:-20px !important;
    }
    .rht-heading {
        margin-top: 80px;
    }
    .row{
        justify-content: center;
    }
    .social-icons-holder-footer {
        flex-direction: row;
        margin-top: 24px;
    }
    .social-icons-holder-footer img{
        width: 50px;
    }
    .flip-card {
        width: 100%;
        height: 450px;
        perspective: 1000px;
        margin-bottom: 60px;
    }
    .flip-card-front {
        height: 0;
    }
    
}