:root {
     --background: 180 20% 99%;
     --foreground: 220 30% 15%;
     --card: 0 0% 100%;
     --card-foreground: 220 30% 15%;
     --popover: 0 0% 100%;
     --popover-foreground: 220 30% 15%;
     --primary: 183 100% 35%;
     --primary-foreground: 0 0% 100%;
     --secondary: 252 75% 60%;
     --secondary-foreground: 0 0% 100%;
     --muted: 180 30% 96%;
     --muted-foreground: 220 15% 40%;
     --accent: 25 100% 55%;
     --accent-foreground: 0 0% 100%;
     --teal: 183 100% 35%;
     --teal-light: 180 60% 95%;
     --teal-dark: 183 100% 28%;
     --purple: 252 75% 60%;
     --purple-light: 252 80% 95%;
     --purple-dark: 252 75% 45%;
     --coral: 25 100% 55%;
     --coral-light: 25 100% 95%;
     --coral-dark: 25 100% 45%;
     --yellow: 45 100% 50%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
     --border: 180 20% 90%;
     --input: 180 20% 90%;
     --ring: 183 100% 35%;
     --radius: 0.75rem;
     --gradient-hero: linear-gradient(135deg, hsl(180 60% 97%) 0%, hsl(252 60% 97%) 100%);
     --gradient-primary: linear-gradient(135deg, hsl(183 100% 35%) 0%, hsl(183 100% 45%) 100%);
     --gradient-cta: linear-gradient(135deg, hsl(25 100% 55%) 0%, hsl(35 100% 55%) 100%);
     --gradient-purple: linear-gradient(135deg, hsl(252 75% 60%) 0%, hsl(260 80% 65%) 100%);
     --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(180 30% 98%) 100%);
     /*--gradient-footer: linear-gradient(180deg, hsl(230 50% 20%) 0%, hsl(230 55% 15%) 100%);*/
     --gradient-band: linear-gradient(135deg, hsl(183 100% 35%) 0%, hsl(252 75% 55%) 50%, hsl(25 100% 55%) 100%);
     --shadow-sm: 0 2px 8px -2px hsl(220 30% 15% / 0.08);
     --shadow-md: 0 4px 16px -4px hsl(220 30% 15% / 0.1);
     --shadow-lg: 0 8px 32px -8px hsl(220 30% 15% / 0.12);
     --shadow-xl: 0 16px 48px -12px hsl(220 30% 15% / 0.15);
     --shadow-card: 0 4px 24px -8px hsl(183 100% 35% / 0.15);
     --shadow-button: 0 4px 16px -4px hsl(25 100% 55% / 0.4);
}
 html, body {
     overflow-x: hidden !important;
     width: 100% !important;
     position: relative !important;
}
 .bg-primary {
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
}
 .bg-secondary {
     background-color: hsl(var(--secondary));
     color: hsl(var(--secondary-foreground));
}
 .bg-accent {
     background-color: hsl(var(--accent));
     color: hsl(var(--accent-foreground));
}
 .bg-muted {
     background-color: hsl(var(--muted));
     color: hsl(var(--muted-foreground));
}
 .bg-background {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
}
 .bg-card {
     background-color: hsl(var(--card));
     color: hsl(var(--card-foreground));
}
 .bg-popover {
     background-color: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
}
 .bg-destructive {
     background-color: hsl(var(--destructive));
     color: hsl(var(--destructive-foreground));
}
 .bg-blue{
     background-color: #2563eb;
     color: white;
}
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border-color: hsl(var(--border));
}
 html {
     scroll-behavior: smooth;
}
 body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: 'Inter', system-ui, sans-serif;
     font-feature-settings: 'kern' 1;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     line-height: 1.5;
}
 button, input, optgroup, select, textarea {
     font-family: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
     font-size: 100%;
     font-weight: inherit;
     line-height: inherit;
     letter-spacing: inherit;
     color: inherit;
     margin: 0;
     padding: 0;
}
 h1, h2, h3, h4, h5, h6 {
     font-weight: 600;
     letter-spacing: -0.025em;
     line-height: 1.2;
}
 .gradient-hero {
     background: var(--gradient-hero);
}
 .gradient-primary {
     background: var(--gradient-primary);
}
 .gradient-cta {
     background: var(--gradient-cta);
}
 .gradient-purple {
     background: var(--gradient-purple);
}
 .gradient-card {
     background: var(--gradient-card);
}
 .gradient-footer {
     background: var(--gradient-footer);
}
 .gradient-band {
     background: var(--gradient-band);
}
 .shadow-card {
     box-shadow: var(--shadow-card);
}
 .shadow-button {
     box-shadow: var(--shadow-button);
}
 .text-gradient {
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     background-image: linear-gradient(135deg, hsl(183 100% 35%) 0%, hsl(252 75% 60%) 100%);
}
 .section-padding {
     padding-top: 2rem;
     padding-bottom: 2rem;
}
 @media (min-width: 768px) {
     .section-padding {
         padding-top: 2rem;
         padding-bottom: 2rem;
    }
}
 @media (min-width: 1024px) {
     .section-padding {
         padding-top: 2rem;
         padding-bottom: 2rem;
    }
}
 .section-hero-padding {
     padding-top: 2rem;
     padding-bottom: 2rem;
}
 .container-wide {
     max-width: 80rem;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1rem;
     padding-right: 1rem;
}
 .text-white{
     color:#fff;
}
 @media (min-width: 640px) {
     .container-wide {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
    }
}
 @media (min-width: 1024px) {
     .container-wide {
         padding-left: 2rem;
         padding-right: 2rem;
    }
}
/* Animations */
 @keyframes float {
     0%, 100% {
         transform: translateY(0);
    }
     50% {
         transform: translateY(-10px);
    }
}
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(20px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.95);
    }
     to {
         opacity: 1;
         transform: scale(1);
    }
}
 @keyframes accordion-down {
     from {
         height: 0;
    }
     to {
         height: var(--radix-accordion-content-height);
    }
}
 @keyframes accordion-up {
     from {
         height: var(--radix-accordion-content-height);
    }
     to {
         height: 0;
    }
}
 .animate-float {
     animation: float 6s ease-in-out infinite;
}
 .animate-fade-up {
     animation: fadeUp 0.6s ease-out forwards;
}
 .animate-scale-in {
     animation: scaleIn 0.5s ease-out forwards;
}
 .animate-accordion-down {
     animation: accordion-down 0.2s ease-out;
}
 .animate-accordion-up {
     animation: accordion-up 0.2s ease-out;
}
 @media (min-width: 1024px) {
     .lg\:py-28 {
         padding-top: 7rem;
         padding-bottom: 7rem;
    }
}
 .container {
     width: 100%;
     margin-right: auto;
     margin-left: auto;
     padding-right: 2rem;
     padding-left: 2rem;
}
 @media (min-width: 1400px) {
     .container {
         max-width: 1400px;
    }
}
 .mx-auto {
     margin-left: auto;
     margin-right: auto;
}
 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
}
 .gap-4 {
     gap: 1rem;
}
 .text-muted-foreground {
     color: hsl(var(--muted-foreground));
}
 .text-xs {
     font-size: 0.75rem;
     line-height: 1rem;
}
 .pt-2 {
     padding-top: 0.5rem;
}
 #main{
     margin-top: -64px !important;
}
/* Button Styles */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     white-space: nowrap;
     border-radius: 0.5rem;
     font-size: 0.875rem;
     font-weight: 600;
     transition: all 0.2s;
     border: none;
     cursor: pointer;
     text-decoration: none;
     outline: none;
}
 .btn:focus-visible {
     outline: 2px solid hsl(var(--ring));
     outline-offset: 2px;
}
 .btn:disabled {
     pointer-events: none;
     opacity: 0.5;
}
 .btn-sm {
     height: 2.25rem;
     border-radius: 0.375rem;
     padding: 0 1rem;
     font-size: 0.75rem;
     margin:0 5px;
}
 .btn-default {
     height: 2.5rem;
     padding: 0.5rem 1.25rem;
}
 .btn-lg {
     height: 3rem;
     border-radius: 0.75rem;
     padding: 0 2rem;
     font-size: 1rem;
}
 .btn-xl {
     height: 3.5rem;
     border-radius: 0.75rem;
     padding: 0 2.5rem;
     font-size: 1.125rem;
}
 .btn-default-variant {
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
     box-shadow: var(--shadow-md);
}
 .btn-default-variant:hover {
     background-color: hsl(var(--primary) / 0.9);
     box-shadow: var(--shadow-lg);
}
 .btn-ghost {
     background: transparent;
     color: hsl(var(--foreground));
}
 .btn-ghost:hover {
     background-color: hsl(var(--muted));
     color: hsl(var(--foreground));
}
 .btn-cta {
     background-color: hsl(var(--accent));
     color: hsl(var(--accent-foreground));
     box-shadow: var(--shadow-button);
}
 .btn-cta:hover {
     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
     transform: scale(1.02);
}
 .btn-cta:active {
     transform: scale(0.98);
}
 .btn-hero-outline {
     border: 2px solid hsl(var(--primary));
     color: hsl(var(--primary));
     background-color: hsl(var(--card) / 0.8);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
}
 .btn-hero-outline:hover {
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
}
 .btn-outline {
     border: 2px solid hsl(var(--primary));
     background: transparent;
     color: hsl(var(--primary));
}
 .btn-outline:hover {
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
}
 .text-primary-foreground {
     color: hsl(var(--primary-foreground));
}
 .border-t {
     border-top-width: 1px;
}
 .border-primary-foreground\/10 {
     border-color: hsl(var(--primary-foreground) / 0.1);
}
 .align-items-center {
     align-items: center !important;
}
 .d-flex {
     display: flex !important;
}
 .header-actions {
     display: none;
}
 @media (min-width: 1024px) {
     .header-actions {
         display: flex;
         align-items: center;
         gap: 0.75rem;
    }
}