body {
    background-color: rgb(16,16,16); /* Background color */
}

.btn-custom {
    background-color: rgb(16,16,16); /* Button background color */
    color: #ffffff; /* Button text color */
}

.btn-custom:hover {
    background-color: rgba(16,16,16, 0.8); /* Hover color */
}

.gradient-text {
    background-image: linear-gradient(to right, yellow, red); /* Gradient text */
    -webkit-background-clip: text; /* Clip background to text */
    -webkit-text-fill-color: transparent; /* Transparent text fill */
    font-weight: bold; /* Bold text */
}

.typing-effect {
    display: inline-block;
    border-right: 2px solid rgb(255, 255, 255); /* Right border */
    animation: blink 0.7s infinite; /* Blinking effect */
    font-weight: bold; /* Bold text */
}

@keyframes blink {
    50% {
        border-color: transparent; /* Hide the right border */
    }
}

/* Slide in effect for the image */
@keyframes slideIn {
    from {
        transform: translateX(100%); /* Start from the right */
        opacity: 0; /* Initially invisible */
    }
    to {
        transform: translateX(0); /* End at original position */
        opacity: 1; /* Fully visible */
    }
}

/* Fade in effect for the text */
@keyframes fadeIn {
    from {
        opacity: 0; /* Initially invisible */
    }
    to {
        opacity: 1; /* Fully visible */
    }
}

/* New styles for underline effect */
.nav-link {
    position: relative; /* Positioning context for the pseudo-element */
}

.nav-link::after {
    content: ""; /* Pseudo-element must have content */
    position: absolute; /* Absolute positioning */
    left: 0; /* Aligns to the left */
    right: 0; /* Aligns to the right */
    bottom: -2px; /* Position it just below the text */
    height: 2px; /* Height of the underline */
    background-color: rgb(235, 255, 51); /* Color of the underline */
    transform: scaleX(0); /* Initially hide the underline */
    transition: transform 0.3s ease; /* Smooth transition effect */
}

.nav-link:hover::after {
    transform: scaleX(1); /* Show the underline on hover */
}

/* Apply animation classes */
.slide-in {
    animation: slideIn 1s forwards; /* Slide in effect */
}

.fade-in {
    animation: fadeIn 1s forwards; /* Fade in effect */
    animation-delay: 0.5s; /* Delay the fade in */
}


.custom-image {
    width: 360px;
    height: 360px;
}