/* Existing styles remain the same */
.skill-tag {
    transition: transform 0.3s ease;
}
.skill-tag:hover {
    transform: translateY(-3px);
}

.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.parallax-header {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.filter-button.active {
    /* background-color: #6366F1; Will be handled by JS adding Tailwind classes */
    /* color: white; Will be handled by JS adding Tailwind classes */
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.form-input:focus {
    border-color: #6366F1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.scroll-top-button {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.scroll-top-button.visible {
    opacity: 1;
    visibility: visible;
}

/* --- START: New Modal Styles --- */
body.modal-open {
    overflow: hidden; /* Prevent background scrolling when modal is open */
}

#projectDetailModal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* For Safari compatibility */
}

/* Project Detail Modal Specific Styling (Tailwind handles most, but these are fallbacks or specific overrides) */
#projectDetailModal .prose h2,
#projectDetailModal .prose h3,
#projectDetailModal .prose h4 {
    /* color: #1f2937; Slightly darker text for headings in modal if needed */
    margin-bottom: 0.75em;
}
/* #projectDetailModal .prose p,
#projectDetailModal .prose li,
#projectDetailModal .prose code {
    color: #374151; /* Default text color for prose content 
} */
#projectDetailModal .prose code {
    /* background-color: #f3f4f6; */
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
#projectDetailModal .prose hr {
    border-color: #e5e7eb;
}
/* --- END: New Modal Styles --- */

/* Dark Mode Styles */
.dark body {
    background-color: #1a1a1a;
    color: #e5e5e5;
}

.dark .bg-white {
    background-color: #2d2d2d;
}

.dark .text-gray-800 {
    color: #e5e5e5;
}

.dark .text-gray-600 {
    color: #a3a3a3;
}

.dark .text-gray-700 {
    color: #d4d4d4;
}

.dark .bg-gray-50 {
    background-color: #262626;
}

.dark .bg-gray-100 {
    background-color: #333333;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #404040;
}

.dark .border-gray-200 {
    border-color: #404040;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.dark .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, #1a1a1a, #2d2d2d);
}

/* Smooth transition for theme changes */
html, body, .bg-white, .bg-gray-50, .bg-gray-100, .project-card, .rounded-lg, .shadow-md, .modal, .prose, .rounded-button, .scroll-top-button, .filter-button, .bg-primary, .bg-secondary {
    transition: background-color 0.5s cubic-bezier(.4,0,.2,1), color 0.5s cubic-bezier(.4,0,.2,1), border-color 0.5s, box-shadow 0.5s;
}

/* Modal dark mode */
.dark #projectDetailModal .bg-white,
.dark #formModal .bg-white {
    background-color: #232323;
}

/* Card dark mode */
.dark .project-card,
.dark .rounded-lg,
.dark .shadow-md {
    background-color: #232323;
    color: #e5e5e5;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
}

/* Prose dark mode */

.dark .prose p,
.dark .prose li,
.dark .prose code {
    color: #e5e5e5;
}

/* Button styles for both modes */
.button-base, .rounded-button, .filter-button {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    font-weight: 500;
}
.bg-primary, .button-base.bg-primary {
    background-color: #6366F1;
    color: #fff;
}
.bg-secondary, .button-base.bg-secondary {
    background-color: #A855F7;
    color: #fff;
}
.dark .bg-primary, .dark .button-base.bg-primary {
    background-color: #818CF8;
    color: #232323;
}
.dark .bg-secondary, .dark .button-base.bg-secondary {
    background-color: #C084FC;
    color: #232323;
}

/* White button (for light mode) */
.button-base.bg-white, .rounded-button.bg-white {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}
.button-base.bg-white:hover, .rounded-button.bg-white:hover {
    background-color: #f3f4f6;
}

/* White button (for dark mode) */
.dark .button-base.bg-white, .dark .rounded-button.bg-white {
    background-color: #232323;
    color: #818CF8;
    border: 1px solid #818CF8;
}
.dark .button-base.bg-white:hover, .dark .rounded-button.bg-white:hover {
    background-color: #333;
}

/* Filter button active state */
.filter-button.active {
    background-color: #6366F1;
    color: #fff;
}
.dark .filter-button.active {
    background-color: #818CF8;
    color: #232323;
}

/* Icon button backgrounds */
.bg-gray-100, .w-8.h-8 {
    background-color: #f3f4f6;
    color: #6366F1;
}
.dark .bg-gray-100, .dark .w-8.h-8 {
    background-color: #232323;
    color: #818CF8;
}

/* Contact card dark mode */
.dark .bg-white.rounded-lg.shadow-md {
    background-color: #232323;
    color: #e5e5e5;
}

/* Contact icon backgrounds */
/* .dark .bg-purple-100 { background-color: #4b2991; }
.dark .bg-blue-100 { background-color: #1e40af; }
.dark .bg-indigo-100 { background-color: #3730a3; } */

/* Fix for modal backdrop in dark mode */
.dark #projectDetailModal {
    background-color: rgba(10,10,10,0.85);
}

/* Sun/Moon Toggle Animation */
#themeToggleAnimated {
    box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
    border: none;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(90deg, #f3f4f6 0%, #e0e7ff 100%);
}
.dark #themeToggleAnimated {
    background: linear-gradient(90deg, #23283b 0%, #181c24 100%);
}
#themeToggleAnimated .sun-moon-icon {
    box-shadow: 0 2px 8px 0 rgba(255, 221, 51, 0.18);
    transition: transform 0.5s cubic-bezier(.4,0,.2,1), background 0.5s, box-shadow 0.5s;
    background: linear-gradient(135deg, #ffe066 60%, #ffd700 100%);
}
.dark #themeToggleAnimated .sun-moon-icon {
    background: linear-gradient(135deg, #818cf8 60%, #23283b 100%);
    box-shadow: 0 2px 8px 0 rgba(129, 140, 248, 0.18);
}
#themeToggleAnimated:active .sun-moon-icon {
    transform: scale(0.92) rotate(25deg);
}

/* Slideshow Styles */

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.slide-item {
    display: none; /* Hide slides by default */
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.3);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Dots */
.dots-container {
    text-align: center;
    padding: 10px 0;
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.dot.active, .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 0.5s;
}
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* Slideshow Styles END */