/* Base Styles */
body{
    scroll-behavior: smooth;
}
  
/* Typing Effect */
#typing-text::after {
    content: "|";
    animation: blink 1s infinite;
}
  
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
  
 /* Navigation */
.nav-link {
    position: relative;
    transition: color 0.3s ease;
}
  
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #4f46e5;
    transition: width 0.3s ease;
} 
.nav-link:hover::after {
    width: 100%;
}
.profile-img{
    border-radius: 80% 50%; 
}

/* Mobile Menu Fix */
#mobile-menu {
    display: none;
}

#mobile-menu.show {
    display: block;
    max-height: 500px; /* Adjust based on your menu content height */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease;
}

/* Mobile Menu Animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease;
    opacity: 0;
}
.myimage{
    height: 100px;
}

/* Mobile menu backdrop effect */
@media (max-width: 767px) {
    #mobile-menu {
        position: absolute;
        width: 100%;
        left: 0;
        top: 100%;
        z-index: 1000;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* Optional: Add a semi-transparent overlay */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    body.menu-open::after {
        opacity: 1;
        pointer-events: auto;
    }
    .flex-buttons{
        display: flex;
        flex-direction: column;
        padding: 0 50px;
        align-content: center;
    }
    .buttons{
        margin: 10px;
    }
}
  
/* Portfolio Filter */
.portfolio-filter.active {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
}
  
/* Service Cards */
.service-card:hover {
    transform: translateY(-5px);
}
  
/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
  
.animate-fadeIn {
    animation: fadeIn 0.6s ease forwards;
}
  
/* Responsive Adjustments */
@media (max-width: 768px) {
    #mobile-menu {
        display: none;
    }
      
    #mobile-menu.show {
        display: block;
    }
}
  
/* Portfolio Items */
.portfolio-item {
    display: none;
}
  
.portfolio-item.show {
    display: block;
    animation: fadeIn 0.6s ease;
}
  
/* Section Padding */
section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
  
/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}