:where([class^="ri-"])::before {
  content: "\f3c2";
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #0a0a0a;
  color: #e0e0e0;
}

.gradient-text {
  background: linear-gradient(90deg, #00ff94, #0066ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 255, 148, 0.1);
}

.neon-border {
  box-shadow: 0 0 5px rgba(0, 255, 148, 0.5);
}

.neon-border:hover {
  box-shadow: 0 0 15px rgba(0, 255, 148, 0.8);
}

.skill-bar {
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, #00ff94, #0066ff);
  border-radius: 3px;
}

input:focus,
textarea:focus {
  border-color: #00ff94;
  box-shadow: 0 0 0 2px rgba(0, 255, 148, 0.2);
}

#hero {
  background-color: #00ff94;
  background-image: url('../images/bg.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 576px) {
  .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 768px) {
  .container-fluid {
    max-width: 95%;
  }
}
@media (min-width: 992px) {
  /* .container-fluid {
    max-width: 960px;
  } */
}
@media (min-width: 1200px) {
  .container-fluid {
    max-width: 90%;
  }
}
@media (min-width: 1400px) {
  .container-fluid {
    max-width: 80%;
  }
}