body {
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("https://images.unsplash.com/photo-1526491109672-74740652b963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80");
  background-size: cover;
  background-position: center;
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.cover-container {
  max-width: 60vw;
}

.nav-link {
  padding: 0.25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 1rem;
  border-bottom: 0.25rem solid transparent;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.nav-link.active {
  color: white;
  border-bottom-color: white;
}

.btn-secondary {
  color: #000;
}

.btn-secondary:hover {
  color: #fff;
  background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027);
  background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
}

.btn-zoom {
  transition: transform 0.2s; 
}

.btn-zoom:hover {
  transform: scale(1.05); 
}

.navbar {
  background: #0f2027;
  background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027);
  background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
}

.inline-block {
  display: inline-block;
}

.transform {
  transform: none;
}

.hover-scale-110:hover {
  transform: scale(1.1);
}

.hover-rotate-3:hover {
  transform: rotate(3deg);
}

.transition-duration-300 {
  transition-duration: 300ms;
}

.hover-portf:hover {
  color: #000;
  background: #A1FFCE;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FAFFD1, #A1FFCE);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FAFFD1, #A1FFCE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.rounded-md {
  border-radius: 0.375rem; /* You can adjust the border-radius as needed */
}

.px-2 {
  padding-left: 0.5rem; /* You can adjust the padding as needed */
  padding-right: 0.5rem; /* You can adjust the padding as needed */
}

.py-1 {
  padding-top: 0.25rem; /* You can adjust the padding as needed */
  padding-bottom: 0.25rem; /* You can adjust the padding as needed */
}

.hover-text-gray-50:hover {
  color: #000; /* You can adjust the color as needed */
}

.hover-border-white:hover {
  border-color: white;
}