.hero-pattern {
  background-image: radial-gradient(
    circle,
    rgba(241, 250, 238, 0.1) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}
.nav-link {
  position: relative;
}
.nav-link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #e63946;
  transition: width 0.3s ease-in;
  -webkit-transition: width 0.3s ease-in;
  -moz-transition: width 0.3s ease-in;
  -ms-transition: width 0.3s ease-in;
  -o-transition: width 0.3s ease-in;
}
.nav-link:hover:after {
  width: 100%;
}
.section-divider {
  position: relative;
  height: 100px;
  overflow: hidden;
}
.section-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(
      45deg,
      transparent 33.333%,
      #f1faee 33.333%,
      #f1faee 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg,
      transparent 33.333%,
      #f1faee 33.333%,
      #f1faee 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
  transform: rotate(180deg);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e63946;
  border: 3px solid #1d3557;
}
.skill-bar {
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}
.skill-progress {
  height: 100%;
  background-color: #e63946;
  border-radius: 4px;
}
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.03);
}