/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height:100%;
  font-family: sans-serif;
  line-height: 1.6;
  background: #f9f9f9;
  color: #333;
  overflow-x: hidden;
}




  .subtext {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.5s ease;
      margin-top: 0;
    }
    
    .subtext.active {
      max-height: 100px;
      opacity: 1;
      margin-top: 0.5rem;
    }
    
    .role-button {
      transition: all 0.3s ease;
      padding: 0.5rem 0;
      border-bottom: 2px solid transparent;
    }
    
    .role-button:hover {
      border-bottom-color: #022f4d;
    } */


    
/* Base Styles */
* {
  border-color: hsl(var(--border));
}

/* Removes tap highlight on mobile (iOS, Android) */
button, a, input, textarea {
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: rgba(0, 0, 0, 0);
  outline: none;
}

 

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Light Theme Variables */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* Dark Theme Variables */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}


/* Utility Classes */
.bg-background {
  background-color: hsl(var(--background));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.bg-card {
  background-color: hsl(var(--card));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.bg-popover {
  background-color: hsl(var(--popover));
}

.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.border {
  border-color: hsl(var(--border));
}

.input {
  border-color: hsl(var(--input));
}

.ring {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.rounded {
  border-radius: var(--radius);
}

/* Sidebar Specific Styles */
.bg-sidebar-background {
  background-color: hsl(var(--sidebar-background));
}

.text-sidebar-foreground {
  color: hsl(var(--sidebar-foreground));
}

.bg-sidebar-primary {
  background-color: hsl(var(--sidebar-primary));
}

.text-sidebar-primary-foreground {
  color: hsl(var(--sidebar-primary-foreground));
}

.bg-sidebar-accent {
  background-color: hsl(var(--sidebar-accent));
}

.text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}

.border-sidebar {
  border-color: hsl(var(--sidebar-border));
}

.ring-sidebar {
  box-shadow: 0 0 0 1px hsl(var(--sidebar-ring));
}

/* Animation */
.animate-fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Logo Animation */
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

/* Card Styles */
.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* Font Family */
.font-inter {
  font-family: 'Inter', sans-serif;
}


  .bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(252 211 77 / var(--tw-bg-opacity));
  }

  .bg-primary-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity));
  }

  .bg-primary-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity));
  }

  .bg-primary-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity));
  }

  .bg-primary-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(252 211 77 / var(--tw-bg-opacity));
  }

  .bg-primary-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity));
  }

  .bg-primary-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity));
  }
  .hover-bg-primary-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity));
  }
  
 .hover-bg-primary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.hover-text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}


  .text-primary {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}

.text-primary-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.hover-text-primary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

:root {
  --tw-text-opacity: 1;
}

.text-primary-foreground {
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, var(--tw-text-opacity));
}




.border-primary,
.border-primary-300 {
  border-color: rgba(252, 211, 77, 1);
}

.text-card-foreground {
    color: hsl(var(--card-foreground));
}

/* .to-primary-100 {
    --tw-gradient-to: #FEF3C7;
} */


/* .to-primary-100 {
  background: linear-gradient(to bottom right, white, #FEF3C7);
} */

/* .to-primary-100 {
  --tw-gradient-to: #FEF3C7 var(--tw-gradient-to-position);
} */

/* .from-primary-50 {
    --tw-gradient-from: #FFFBEB;
    --tw-gradient-to: rgba(255, 251, 235, 0); 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
} */

.from-primary-50 {
  --tw-gradient-from: #FFFBEB;
  --tw-gradient-to: rgba(255, 251, 235, 0); /* default fallback */
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-100 {
  --tw-gradient-to: #FEF3C7;
}

.my-gradient-bg {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  padding: 40px;
  color: #111;
}


.text-primary-foreground-90 {
  color: #1f2937e6;
}


.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #FFFBEB, #FEF3C7);
}



/* Ensure you have Inter font loaded */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');