/* Custom CSS for animations and overrides */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Base styles */
body {
    scroll-behavior: smooth;
}
/* Animation classes */
.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}
.typewriter-container {
  margin-bottom: -3rem;
  border-right: 0.05em solid #f43f5e;
  white-space: nowrap;
  animation: 
    typing 4s steps(30, end) infinite,
    blinking-cursor 0.75s step-end infinite;
}

.typing-text {
  font-family: monospace;
  font-size: 2em;
  display: inline-block;
}

/* New animation that includes typing and deleting */
@keyframes typing {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* Alternative version with longer pause at full text */
@keyframes typing-with-pause {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  80% {
    width: 100%; /* Pause with text fully visible */
  }
  100% {
    width: 0;
  }
}

/* If you want a more realistic type-delete effect */
@keyframes typing-deleting {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes blinking-cursor {
  from, to { border-color: transparent; }
  50% { border-color: #f43f5e; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up {
    animation: slideUp 1s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    section {
        padding: 2rem 1rem !important;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-content {
        text-align: center;
       
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .project-card {
        margin-bottom: 1.5rem;
    }
    
    .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }
    
    .testimonial-grid {
        grid-template-columns: 1fr !important;
    }
    
    .contact-section {
        flex-direction: column;
    }
    
    .modal-content {
        width: 95% !important;
        max-height: 85vh !important;
    }
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Project card hover effect */
.project-card {
    transition: all 0.3s ease;
}

.project-card:hover {
    box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.1);
}

/* Gradient text */
.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Form inputs */
input, textarea {
    transition: all 0.2s ease;
}

input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
}

/* Modal transitions */
.modal-enter {
    opacity: 0;
}

.modal-enter-active {
    opacity: 1;
    transition: opacity 200ms;
}

.modal-exit {
    opacity: 1;
}

.modal-exit-active {
    opacity: 0;
    transition: opacity 200ms;
}