html {
  scroll-behavior: smooth;
}

#intro {
  padding: 20px;
  border-radius: 5px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 8px rgba(62, 62, 62, 0.471);
}

#section {
  height: calc(100vh - 40px);
}

.hero-bg {
  background-image: url("/public/b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.intro-btn {
  padding: 8px 18px;

  cursor: pointer;
  border-radius: 5px;
}

.intro-btn:hover {
  background-color: #e9e9e9;
  color: #4c52a9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.info-btn {
  padding: 2px 6px;
  width: 6rem;
  color: #4b52b5;
  border: 2px solid whitesmoke;
  background: whitesmoke;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  margin-top: 10px;
}

.info-btn:hover {
  color: white;
}

.info-btn:after {
  content: "";
  background: #4850a0;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

.info-btn:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.proj-btn {
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  /* background-color: #007bff; */
  color: #7f84e0;
  border: 2px solid #7f84e0;
}

.proj-btn:hover {
  background-color: #5555c8;
  color: white;
  border: 2px solid #5555c8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.wrapper:hover .proj-card {
  filter: blur(20px);
}

.proj-card:hover {
  filter: blur(0px) !important;
  transform: scale(1.05);
  box-shadow: 0px 5px 12px rgba(165, 165, 254, 0.959);
  backdrop-filter: blur(15px); /* optional */
  transition: 0.3s ease;
  z-index: 1;
  border: 2px solid #7f84e0;
}

.resume-btn {
  /* From Uiverse.io by CristianMontoya98 */
  padding: 9px 18px;
  color: #4b52b5;
  border: 1px solid #4e55b0;
  border-radius: 5px;
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.resume-btn:hover {
  color: white;
}

.resume-btn:after {
  content: "";
  background: #5258b2;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

.resume-btn:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.home-resume-btn {
  /* From Uiverse.io by CristianMontoya98 */
  padding: 6px 15px 6px 16px;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.home-resume-btn:hover {
  color: white;
}

.home-resume-btn:after {
  content: "";
  background: #545aaf;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

.home-resume-btn:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}



.bio-bg {
  background-image: url("../public/a.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
 
}