src/styles/globals.css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 34, 40, 49;
  --background-rgb: 238, 238, 238;
  --primary: 79, 70, 229; /* Indigo-600 */
  --secondary: 55, 65, 81; /* Gray-700 */
  --accent: 244, 63, 94; /* Rose-500 */
  --success: 16, 185, 129; /* Emerald-500 */
  --warning: 251, 191, 36; /* Amber-400 */
  --info: 59, 130, 246; /* Blue-500 */
}

.dark {
  --foreground-rgb: 238, 238, 238;
  --background-rgb: 17, 24, 39;
}

* {
  @apply transition-colors duration-300;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  font-family: 'Inter', sans-serif;
  transition: background-color 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
}

/* IMPROVED TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  @apply font-bold tracking-tight;
}

.section-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16;
}

.section-title {
  @apply text-3xl md:text-4xl font-bold mb-8 text-center;
}

.section-subtitle {
  @apply text-xl md:text-2xl font-semibold mb-4;
}

.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent;
}

.nav-link {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-all duration-300;
}

.nav-link-light {
  @apply text-secondary hover:text-primary hover:bg-gray-100;
}

.nav-link-dark {
  @apply text-light hover:text-primary hover:bg-secondary;
}

.btn {
  @apply px-5 py-2.5 rounded-md font-medium transition-all duration-300 transform shadow-sm;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-opacity-90 hover:shadow-md hover:shadow-primary/20;
}

.btn-secondary {
  @apply bg-secondary text-white hover:bg-opacity-90 hover:shadow-md hover:shadow-secondary/20;
}

.btn-outline {
  @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
}

.btn-accent {
  @apply bg-accent text-white hover:bg-opacity-90 hover:shadow-md hover:shadow-accent/20;
}

.card {
  @apply rounded-lg overflow-hidden shadow-md transition-all duration-300 hover:shadow-xl;
}

.card-light {
  @apply bg-white;
}

.card-dark {
  @apply bg-secondary;
}

/* Glass effect */
.glass {
  @apply bg-white/30 dark:bg-dark/30 backdrop-blur-md shadow-lg;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-light dark:bg-dark;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary/70 dark:bg-primary/80 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-primary dark:bg-accent;
}

/* Form styles */
.form-input {
  @apply w-full px-4 py-3 rounded-md border focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300;
}

.form-input-light {
  @apply border-gray-300 bg-white text-dark focus:border-primary;
}

.form-input-dark {
  @apply border-gray-600 bg-secondary text-light focus:border-primary;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

/* Animation classes */
.fade-in {
  @apply opacity-0 transition-opacity duration-1000;
}

.fade-in.appear {
  @apply opacity-100;
}

.slide-up {
  @apply transform translate-y-10 transition-transform duration-1000;
}

.slide-up.appear {
  @apply translate-y-0;
}

/* Skills section */
.skill-icon {
  @apply w-16 h-16 mx-auto mb-3 text-primary dark:text-primary transition-all duration-300 hover:scale-110 hover:drop-shadow-lg;
}

/* Project card */
.project-card {
  @apply flex flex-col h-full bg-white dark:bg-dark rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-1;
}

.project-image {
  @apply w-full h-64 object-cover rounded-t-lg;
}

/* Education timeline */
.timeline-container {
  @apply relative;
}

.timeline-container::after {
  content: '';
  @apply absolute top-0 bottom-0 left-1/2 w-1 bg-gradient-to-b from-primary via-accent to-primary -translate-x-1/2 z-0;
}

.timeline-item {
  @apply relative mb-16 w-full z-10;
}

.timeline-content {
  @apply relative w-[calc(50%-20px)] p-0 shadow-md;
  transform: translateZ(0);
}

.timeline-item:nth-child(odd) .timeline-content {
  @apply ml-auto;
}

.timeline-dot {
  @apply absolute top-6 left-1/2 -translate-x-1/2 w-5 h-5 rounded-full z-10 border-2 border-white dark:border-dark shadow-md;
}

.timeline-date {
  @apply font-medium text-sm text-primary dark:text-primary opacity-90 mb-1;
}

/* Better mobile timeline */
@media (max-width: 768px) {
  .timeline-container::after {
    @apply left-5;
  }
  
  .timeline-content {
    @apply w-[calc(100%-40px)] ml-10;
  }
  
  .timeline-item:nth-child(odd) .timeline-content {
    @apply ml-10;
  }
  
  .timeline-dot {
    @apply left-5;
  }
  
  /* Adjust arrows for mobile */
  .timeline-item:nth-child(odd) .timeline-content > div:last-child {
    @apply left-[-8px] !important;
  }
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Gradient background */
.gradient-bg {
  @apply bg-gradient-to-br from-primary/5 via-accent/5 to-info/5;
}

.dark .gradient-bg {
  @apply from-primary/10 via-accent/10 to-info/10;
}

/* Testimonial carousel custom styles */
.testimonial-slider .slick-dots {
  @apply flex justify-center gap-2 mt-6;
}

.testimonial-slider .slick-dots li {
  @apply inline-block m-0;
}

.testimonial-slider .slick-dots li button {
  @apply font-sans text-transparent overflow-hidden w-3 h-3 rounded-full transition-all duration-300;
}

.testimonial-slider .slick-dots li.slick-active button div {
  @apply bg-primary scale-125;
}

/* Fix for Slick carousel */
.slick-slider, .slick-list, .slick-track {
  @apply w-full;
}

.slick-slide > div {
  @apply h-full;
}

/* Animated card hover */
.testimonial-card {
  @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* Create pulse animation for navigation dots */
@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

.testimonial-slider .slick-dots li.slick-active button div {
  animation: pulse-dot 2s ease-in-out infinite;
}
