@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4l16 16'/><path d='M20 4l-16 16'/></svg>"), auto;
}
/* Navigation Link Animations */
.nav-link.services {
    transition: transform 0.3s ease;
}

.nav-link.contact {
    transition: transform 0.2s ease;
}
/* Custom pointer cursor for clickable elements */
a, button, [role="button"], input[type="submit"], input[type="button"], .btn-primary, .btn-secondary, .play-button, .portfolio-item, .instagram-item, .gallery-item {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20L4 4'/><path d='M20 4L4 20'/></svg>"), pointer;
}

/* Click animation effect */
.click-animation {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: clickEffect 0.5s ease-out;
    z-index: 9999;
}

@keyframes clickEffect {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}
/* Logo Image */
.logo-image {
    transition: transform 0.3s ease;
}

.logo:hover .logo-image {
    transform: rotate(-5deg) scale(1.05);
}
/* Buttons */
.btn-primary, .btn-secondary {
    @apply inline-block text-center;
}

.btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-primary-500/30;
}

.btn-secondary {
    @apply bg-secondary-500 hover:bg-secondary-600 text-white font-medium px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-secondary-500/30;
}

/* Play Button */
.play-button {
    @apply inline-block;
}
.btn-primary.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Play Button */
.play-button {
    @apply w-20 h-20 bg-primary-500 rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 transform hover:scale-110 shadow-xl hover:shadow-primary-500/40;
}

.play-button i {
    @apply ml-1; /* Slight adjustment for play icon */
}

/* Portfolio Items */
.portfolio-item {
    @apply relative overflow-hidden rounded-xl cursor-pointer transition-all duration-500;
}

.portfolio-item-content {
    @apply relative aspect-video;
}

.portfolio-image {
    @apply w-full h-full object-cover transition-transform duration-500;
}
.portfolio-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 flex flex-col justify-end p-8 transition-opacity duration-300;
    padding-bottom: 2rem;
}
.portfolio-item:hover .portfolio-overlay {
    @apply opacity-100;
}

.portfolio-item:hover .portfolio-image {
    @apply scale-110;
}

/* Service Cards */
.service-card {
    @apply bg-gray-800/50 hover:bg-gray-800/70 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 transition-all duration-300 hover:border-primary-500/30 hover:shadow-lg hover:shadow-primary-500/10;
}

.service-icon {
    @apply w-16 h-16 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6 text-primary-500;
}

.service-icon i {
    @apply w-8 h-8;
}

/* Testimonial Slider */
.testimonial-slider {
    @apply relative max-w-4xl mx-auto;
}

.testimonial-slide {
    @apply absolute opacity-0 transition-opacity duration-500;
}

.testimonial-slide.active {
    @apply relative opacity-100;
}

.testimonial-content {
    @apply bg-gray-800/70 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50;
}

.testimonial-controls {
    @apply flex items-center justify-center mt-8 gap-4;
}

.testimonial-prev,
.testimonial-next {
    @apply w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-primary-500 transition-all duration-300;
}

.testimonial-dots {
    @apply flex gap-2;
}

.dot {
    @apply w-3 h-3 rounded-full bg-gray-700 cursor-pointer transition-all duration-300;
}

.dot.active {
    @apply bg-primary-500 w-6;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient-text {
    background-size: 300% 100%;
    animation: gradient 8s linear infinite;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
}
/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}
/* Instagram Feed Styles */
.instagram-image {
    transition: transform 0.5s ease;
}

.instagram-item:hover .instagram-image {
    transform: scale(1.1);
}

.instagram-item {
    @apply relative aspect-square overflow-hidden rounded-lg cursor-pointer;
    transition: transform 0.3s ease;
}

.instagram-item:hover {
    @apply transform scale-105;
}

.instagram-overlay {
    @apply absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 transition-opacity duration-300;
}

.instagram-item:hover .instagram-overlay {
    @apply opacity-100;
}

.instagram-overlay i {
    @apply text-white w-10 h-10;
}
/* Gallery Styles */
.gallery-item {
    @apply relative aspect-square overflow-hidden rounded-xl cursor-pointer transition-all duration-500;
}

.gallery-image {
    @apply w-full h-full object-cover transition-transform duration-500;
}
.gallery-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 flex flex-col justify-end p-8 transition-opacity duration-300;
    padding-bottom: 2rem;
}
.gallery-item:hover .gallery-overlay {
    @apply opacity-100;
}

.gallery-item:hover .gallery-image {
    @apply scale-110;
}
.gallery-placeholder, .portfolio-placeholder {
    @apply w-full h-full rounded-xl border border-dashed border-gray-700/50;
}
/* Contact Modal Styles */
#contactModal {
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}

#contactModal.show {
    opacity: 1;
    display: flex;
}

#contactModal form {
    max-width: 500px;
    width: 100%;
}

#contactModal input,
#contactModal textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(31, 41, 55, 0.8);
    border-radius: 0.5rem;
    color: white;
}

#contactModal input:focus,
#contactModal textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
/* Pricing Page Styles */
.pricing-card {
    @apply bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10 relative;
}
.pricing-card.featured {
    @apply border-primary-500/50 shadow-lg shadow-primary-500/10;
}

.pricing-card.hover\:border-secondary-500\/70:hover {
    border-color: rgba(244, 63, 94, 0.7);
}
.pricing-header {
    @apply pb-6 border-b border-gray-700/50 mb-6;
}

.price {
    @apply text-4xl font-bold my-4;
}

.pricing-features {
    @apply space-y-3 mb-6;
}

.pricing-features li {
    @apply flex items-start gap-2;
}

.pricing-features li::before {
    content: '✓';
    @apply text-primary-500 font-bold;
}

.popular-badge {
    @apply absolute -top-3 right-6 bg-primary-500 text-white text-xs font-bold px-3 py-1 rounded-full;
}

.text-success {
    @apply text-emerald-400 font-semibold;
}
/* Process Steps */
.process-step {
    @apply bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10 text-center;
}

.step-number {
    @apply w-16 h-16 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full flex items-center justify-center text-2xl font-bold mb-6 mx-auto;
}

/* Services Page Styles */
.team-card {
    @apply bg-gray-800/50 hover:bg-gray-800/70 backdrop-blur-sm transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10 rounded-xl overflow-hidden;
}

.stat-item {
    @apply bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700/50;
}