body {
    min-height: 100vh;
    background-image: radial-gradient(circle, #2b6168, #234d53, #1b3a3f, #13282b, #091719);
}

/* #navbar {
    background-color: black;
} */
h1 {
    font-family: "Playfair Display", serif;
}

.nav-link {
  border-radius: 20px;
}

.nav-link:hover {
  color: #000 !important;
  background-color: #f8f9fa;
}

.section-title {
    font-size: 2.5rem;
}

.icon {
    color: white;
}

.hero, .btn-form {
    background-image: linear-gradient(to right bottom, #43605e, #476866, #4a716e, #4e7977, #51827f, #508984, #4f9188, #4e988c, #4aa08b, #4aa787, #4eae81, #57b479);
}

.btn-form:hover {
    background-image: linear-gradient(to right bottom, #65938d, #66908c, #688d8a, #698988, #6b8686);
    color: white;
}

.my-name {
    color: #18391a;
}

.btn-resume {
    background-color: #1b3a3f;
    color: white;
}

.btn-resume:hover {
    background-color: white;
    color: #1b3a3f;
}

.about-text {
    text-align: justify;
}

.card-bg {
    background-image: radial-gradient(circle, #2b6168, #234d53, #1b3a3f, #13282b, #091719);
}

.card-img-top {
    height: 300px;
    object-fit: cover;
}

.profile-img {
    max-height: 450px;
    object-fit: cover;
}

.card-hover {
  overflow: hidden;
  transition: transform 0.3s ease;
}

.img-wrapper {
  overflow: hidden;
}

.card-hover:hover {
  transform: translateY(-6px);
}

.card {
    border: 3px solid black;
} 

@media (max-width: 576px) {
    .profile-img {
        max-height: 300px;
    }

    .role-name {
        font-size: 1.7em;
    }
}