@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {--background: 45 33% 96%;--foreground: 140 20% 20%;--card: 0 0% 100%;--card-foreground: 140 20% 20%;--popover: 0 0% 100%;--popover-foreground: 140 20% 20%;--primary: 160 48% 21%;--primary-foreground: 0 0% 100%;--secondary: 45 33% 96%;--secondary-foreground: 160 48% 21%;--muted: 40 20% 90%;--muted-foreground: 140 10% 40%;--accent: 45 70% 47%;--accent-foreground: 0 0% 100%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 40 20% 88%;--input: 40 20% 88%;--ring: 160 48% 21%;--radius: 0.625rem;/* Custom Colors */
--dark-green: #1B4D3E;--light-green: #2D6A4F;--off-white: #F8F6F1;--cream: #F5F3EE;--gold: #C9A227;--text-dark: #2C3E33;--text-light: #5A6B5C;--border-light: #E8E4DC;/* Animation Easings */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);--ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);--ease-dramatic: cubic-bezier(0.87, 0, 0.13, 1);--ease-cultural: cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@layer base {* {@apply border-border;}

html {scroll-behavior: smooth;}
body {@apply bg-[#F8F6F1] text-[#2C3E33] antialiased;font-family: 'Inter', sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Playfair Display', serif;}
}
@layer components {.btn-primary {@apply bg-[#1B4D3E] text-white px-6 py-3 rounded-lg font-medium transition-all duration-300;}
.btn-primary:hover {@apply bg-[#2D6A4F] shadow-lg transform -translate-y-0.5;}
.btn-secondary {@apply bg-transparent border-2 border-[#1B4D3E] text-[#1B4D3E] px-6 py-3 rounded-lg font-medium transition-all duration-300;}
.btn-secondary:hover {@apply bg-[#1B4D3E] text-white;}
.section-padding {@apply px-4 sm:px-6 lg:px-8 xl:px-16 2xl:px-24;}
.card-hover {@apply transition-all duration-300;}
.card-hover:hover {@apply shadow-xl transform -translate-y-2;}
.text-gradient {@apply bg-gradient-to-r from-[#1B4D3E] to-[#2D6A4F] bg-clip-text text-transparent;}
.glass-effect {@apply backdrop-blur-xl bg-white/90;}
.nav-link {@apply relative text-[#2C3E33] font-medium transition-colors duration-300;}
.nav-link::after {content: '';@apply absolute bottom-0 left-1/2 w-0 h-0.5 bg-[#1B4D3E] transition-all duration-300 -translate-x-1/2;}
.nav-link:hover::after {@apply w-full;}
.polaroid {@apply bg-white p-3 pb-8 shadow-lg transform rotate-1 transition-all duration-300;}
.polaroid:hover {@apply rotate-0 shadow-2xl scale-105;}
}
@layer utilities {.animate-fade-in {animation: fadeIn 0.6s var(--ease-out-expo) forwards;}
.animate-slide-up {animation: slideUp 0.6s var(--ease-out-expo) forwards;}
.animate-slide-in-left {animation: slideInLeft 0.6s var(--ease-out-expo) forwards;}
.animate-slide-in-right {animation: slideInRight 0.6s var(--ease-out-expo) forwards;}
.animate-scale-in {animation: scaleIn 0.5s var(--ease-elastic) forwards;}
.animate-float {animation: float 4s ease-in-out infinite;}
.animate-pulse-soft {animation: pulseSoft 2s ease-in-out infinite;}
.animate-count-up {animation: countUp 2s var(--ease-out-expo) forwards;}
.stagger-1 { animation-delay: 0.1s;}
.stagger-2 { animation-delay: 0.2s;}
.stagger-3 { animation-delay: 0.3s;}
.stagger-4 { animation-delay: 0.4s;}
.stagger-5 { animation-delay: 0.5s;}
}
@keyframes fadeIn {from { opacity: 0;}to { opacity: 1;}}
@keyframes slideUp {from { opacity: 0;transform: translateY(40px);}to { opacity: 1;transform: translateY(0);}}
@keyframes slideInLeft {from {opacity: 0;transform: translateX(-50px);}to { opacity: 1;transform: translateX(0);}}
@keyframes slideInRight {from { opacity: 0;transform: translateX(50px);}to { opacity: 1;transform: translateX(0);}}
@keyframes scaleIn {from { opacity: 0;transform: scale(0.8);}to { opacity: 1;transform: scale(1);}}
@keyframes float {0%, 100% { transform: translateY(0);}50% { transform: translateY(-10px);}}
@keyframes pulseSoft {0%, 100% { opacity: 1;}50% { opacity: 0.7;}}
@keyframes countUp {from { opacity: 0;}to { opacity: 1;}}

@media (prefers-reduced-motion: reduce) {
/*
*, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}
*/
}