:root {
    --blue-50: #0a0f1a;
    --blue-100: #0c1523;
    --blue-200: #12223a;
    --blue-300: #0e325c;
    --blue-400: #14427d;
    --blue-500: #23539f;
    --blue-600: #3767ba;
    --blue-700-opac: #4b7bd570;
    --blue-700: #4b7bd5;
    --blue-800: #67a0f4;
    --blue-900: #99c7ff;
    --blue-950: #cce5ff;
}

body {

    margin: 0;
    font-family: 'Lexend', sans-serif !important;
    background: linear-gradient(to top, var(--blue-100), var(--blue-200));
    background-repeat: no-repeat;
}

.margin-home {
  margin-top: 100px;
}
.text-gradient {
    background: linear-gradient(to right, var(--blue-800), var(--blue-950));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.information-fixed {
    top: 15%;
    left: 10%;
    position: fixed;
    color: white;
}



.nav-link {
    color: white;
    transition: 0.5s ease-in-out;
    font-size: 1rem;

}

.nav-link:hover {
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}


.link-external {
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: 0.5s ease-in-out;
}

.link-external:hover {
    transition: 0.5s ease-in-out;
    color: var(--blue-900);
}

.card {
    background-color: transparent;
    border: 1px solid rgba( 255, 255, 255, 0.8 );
    transition: 0.5s ease;
    border-radius: 20px;
  }
  .card:hover {
    background: rgba( 255, 255, 255, 0.1 );

    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-radius: 20px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    transition: 0.5s ease;
    cursor: pointer;
  }

  .card:hover .card-title {
    color: var(--blue-800);
    text-shadow: 1px 1px 10px var(--blue-300);
  }

.badge {

    background-color: var(--blue-700-opac);
    font-weight: 300;
    color: var(--blue-950);
  }
  .card-title {
    font-weight: 600;
  }
  .card-text {
    font-weight: 300;
  }

  .logo-dev {
    height: 64px;
    width: 64px;
    object-fit: contain;

  }

  .btn-link {
    background-color: var(--blue-200);
    text-decoration: none;
    color: white;
    padding: 20px;
    width: 100%;
    border-radius: 50px;
  }

    .btn-link:hover {
    background-color: var(--blue-500);
    text-decoration: none;
    color: white;
    padding: 20px;
    width: 100%;
    border-radius: 50px;
  }

  .card img {

    object-fit: cover;
  }

  @media (max-width : 700px) {
    .card {
      border-radius: 10px;
    }
    .card img {
      border-radius: 5px;

    }
    .margin-home {
      margin-top: 50px;
    }

    html,body {
      overflow-x: hidden;
    }

  .logo-dev {
    height: 48px;
    width: 48px;
    object-fit: contain;

  }
  html {
    background-color: var(--blue-200);

}
  }

.bg-modal {
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.151);
  border-radius: 20px;
  box-shadow: 0px 0px 0px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  transition: 0.5s ease-in-out;
}
.btn-transparent {
    backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.151);
  border-radius: 20px;
  box-shadow: 0px 0px 0px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  color: white;
}

.btn-transparent:hover {
  background-color: rgba(255, 255, 255, 0.351);
  
}
.image-clickable {
  transition: 0.5s ease-in-out;

}

.image-clickable:hover {
  scale: 1.1;
  transition: 0.5s ease-in-out;

}
.carousel-control-prev-icon
{
scale: 1.5;
}

.carousel-control-next-icon {
scale: 1.5;




}
.modal-xl {
  height: 200px

}
.gallery-thumb {
  border: var(--blue-900);
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.151);
  transition: 0.5s ease-in-out;
}

.gallery-thumb:hover {
  scale: 1.1;
  transition: 0.5s ease-in-out;
  background-color: rgba(255, 255, 255, 0.351);
}

.btn-close {
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.351);
  padding: 10px;
  border-radius: 50px;
  color: white;
}