body{
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Amulya', sans-serif;
  color: #0a2540;
}

/* Gradient Text for Headlines */
.gradient-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section Titles & Subtitles for consistency */
.section-title {
  @apply text-3xl md:text-4xl font-bold text-swiss-purple mb-4;
}

.section-subtitle {
  @apply text-lg md:text-xl text-gray-600 max-w-2xl mx-auto;
}

/* Feature Card Enhancements for Values/Mission */
.feature-card {
  @apply bg-white rounded-2xl shadow-lg border border-gray-100 p-8 text-center transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105;
}

.feature-card .icon-circle {
  @apply w-16 h-16 bg-swiss-purple/10 text-swiss-purple rounded-full flex items-center justify-center mx-auto mb-6;
}

.feature-card svg {
  @apply w-8 h-8;
}

/* Team Member Card Enhancements */
.team-member-card {
  @apply bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1;
}

.team-member-card img {
  @apply object-cover object-center; /* Ensure images fill the space correctly */
}

@keyframes fade-in-up {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
      opacity: 0;
      transform: translateX(-20px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
      opacity: 0;
      transform: translateX(20px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
  opacity: 0; /* Ensures elements are hidden before animation */
}
.animate-fade-in-left {
  animation: fade-in-left 0.6s ease-out forwards;
  opacity: 0;
}
.animate-fade-in-right {
  animation: fade-in-right 0.6s ease-out forwards;
  opacity: 0;
}

/* Add delay using Tailwind's arbitrary values or more utility classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }



/* --- Global Animations (if not already defined) --- */
@keyframes fadeInSlideUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeInSlideRight {
  from {
      opacity: 0;
      transform: translateX(-30px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
      opacity: 0;
      transform: scale(0.95);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}



@keyframes text-gradient-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Hero Section specific styles */
.hero-image-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); /* Darken bottom of image for text readability */
  z-index: 1;
  border-radius: 2rem; /* Matches image border-radius */
}

/* Team Member Card Enhancements */
.team-member-card {
  @apply bg-white rounded-3xl shadow-xl border border-gray-100 p-8 text-center transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1;
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  will-change: transform, box-shadow;   
  box-shadow: 0 20px 40px rgba(var(--swiss-purple-rgb, 88, 28, 135), 0.2);
}



.team-member-card .team-info {
  @apply p-6 lg:p-8 text-center;
}

.team-member-card .social-links {
  @apply absolute bottom-0 left-0 right-0 p-4 bg-white/90 backdrop-blur-sm transform translate-y-full opacity-0 flex justify-center gap-4; /* Hidden by default */
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-bottom-left-radius: 1.5rem; /* Match card radius */
  border-bottom-right-radius: 1.5rem; /* Match card radius */
}

.team-member-card:hover .social-links {
  transform: translateY(0); /* Slide up on hover */
  opacity: 1;
}

.team-member-card .social-links a {
  @apply text-swiss-purple hover:text-swiss-purple-light transition-colors duration-200;
}

.team-member-card img{
  border-radius: 5px 5px 0 0;
  border-bottom: 2px solid #e5e7eb;
}

.team-social button{
  padding: .5rem;
  border-radius: 5px;
}
/* Journey and Values Feature Cards */
.journey-card {
  @apply bg-white p-8 lg:p-10 rounded-3xl shadow-xl border border-gray-100 h-full relative overflow-hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.journey-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.journey-card::before { /* Subtle background pattern/texture */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(230, 230, 250, 0.2) 1px, transparent 1px); /* Very subtle dot pattern */
  background-size: 8px 8px;
  opacity: 0.5;
  z-index: 0;
}

.journey-card h3, .journey-card p {
  position: relative; /* Ensure text is above ::before pseudo-element */
  z-index: 1;
}


/* Core Values Feature Cards (more robust) */
.value-feature-card { /* Renamed from .feature-card for distinction */
  @apply bg-white rounded-3xl shadow-lg border border-gray-100 p-8 text-center relative overflow-hidden h-full;
  transition: all 0.3s ease-in-out;
  will-change: transform, box-shadow, background-color;
  background-size: 200% 200%; /* For background animation */
  background-position: 50% 50%;
}

.value-feature-card::before { /* Gradient overlay on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, var(--swiss-purple-light), var(--swiss-purple));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  border-radius: 1.5rem; /* Match card border-radius */
}

.value-feature-card:hover::before {
  opacity: 0.1; /* Slight gradient tint on hover */
}

.value-feature-card:hover {
  transform: translateY(-10px) rotateZ(1deg); /* Slight lift and rotation */
  box-shadow: 0 25px 50px rgba(var(--swiss-purple-rgb, 88, 28, 135), 0.3); /* Stronger, tinted shadow */
}

.value-feature-card .icon-circle {
  @apply w-18 h-18 bg-swiss-purple/15 text-swiss-purple rounded-full flex items-center justify-center mx-auto mb-6; /* Larger icon circle */
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.value-feature-card:hover .icon-circle {
  background-color: white; /* Icon circle turns white on hover */
  transform: scale(1.1); /* Icon slightly larger */
}

.value-feature-card .icon-circle svg {
  @apply w-9 h-9; /* Larger SVG */
  transition: color 0.3s ease;
}

.value-feature-card:hover .icon-circle svg {
  color: #3b1288; /* SVG color becomes purple on hover */
}

.value-feature-card h3 {
  @apply text-xl font-bold text-swiss-purple mb-3 relative z-10;
  transition: color 0.3s ease;
}

.value-feature-card:hover h3 {
  @apply text-swiss-purple; /* Ensure text remains readable or shifts color */
}

.value-feature-card p {
  @apply text-gray-600 relative z-10;
  transition: color 0.3s ease;
}

.value-feature-card:hover p {
  @apply text-gray-700; /* Ensure text remains readable */
}

/* --- Footer Specific Enhancements --- */
.footer-link-group h4 {
  @apply text-lg font-bold text-swiss-purple-dark mb-5 relative; /* Deeper purple for headings */
}

.footer-link-group h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px; /* Adjust as needed for spacing */
  width: 40px; /* Short underline */
  height: 3px;
  background-color: var(--swiss-purple-light); /* Accent color for underline */
  border-radius: 9999px; /* Pill shape */
}

.footer-link-group ul li a {
  @apply text-gray-700 hover:text-swiss-purple transition-colors duration-200 text-base;
}

/* --- Sleek Form Styles --- */
.sleek-form .form-field {
  position: relative;
  margin-bottom: 1.25rem; /* Space between fields */
}

.sleek-form input[type="text"],
.sleek-form input[type="email"],
.sleek-form select {
  @apply w-full px-5 py-3 border border-gray-300 rounded-xl outline-none transition-all duration-300 ease-in-out bg-white text-gray-800; /* More padding, larger border-radius */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}

.sleek-form input[type="text"]:focus,
.sleek-form input[type="email"]:focus,
.sleek-form select:focus {
  @apply border-swiss-purple-light ring-3 ring-swiss-purple-light/20; /* Ring effect on focus */
  box-shadow: 0 4px 12px rgba(var(--swiss-purple-rgb, 88, 28, 135), 0.1); /* Enhanced shadow on focus */
}

.sleek-form input::placeholder,
.sleek-form select option[value=""][disabled] {
  @apply text-gray-400 italic;
}

.sleek-form button[type="submit"] {
  @apply w-full px-6 py-3 rounded-xl font-semibold text-white bg-swiss-purple transition-all duration-300 ease-in-out shadow-lg;
  background: linear-gradient(45deg, var(--swiss-purple), var(--swiss-purple-light)); /* Gradient button */
  background-size: 200% auto;
  transition: background-position 0.4s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.sleek-form button[type="submit"]:hover {
  background-position: right center; /* Shift gradient on hover */
  transform: translateY(-2px) scale(1.01); /* Subtle lift and scale */
  box-shadow: 0 10px 20px rgba(var(--swiss-purple-rgb, 88, 28, 135), 0.3); /* Stronger shadow */
}

/* Social icons enhancement */
.footer-social-link {
  @apply p-2 rounded-full border border-gray-300 text-gray-600 hover:bg-swiss-purple hover:text-white hover:border-swiss-purple transition-all duration-300 flex items-center justify-center;
}

.footer-social-link svg {
  @apply w-5 h-5; /* Ensure consistent icon size */
}
.nav-links a{
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #0a2540 !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
  letter-spacing: -.01em !important;
  opacity: 0.7;
}
.nav-links a:hover{
  opacity: 1 !important;
  color: rgb(67 22 151 / var(--tw-bg-opacity, 1)) !important;
}
.cta-button{
  height: 50px;
  line-height: 50px;
  padding: 0;
  padding-left: 2em;
  padding-right: 2em;
}

.mobile-nav{
  font-size: 1rem !important;
  letter-spacing: -.01em !important;
  opacity: 0.7;
  font-weight: 600 !important;
}
.swisspay-cta{
  border-radius: 5px;
}
.footer-cta{
  display:block;
  height: 40px;
  line-height: 40px;
  padding: 0;
  padding-left: 1.2em;
  padding-right: 1.2em;

}
.opacity-10 {
  opacity: 0.1;
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.inset-0 {
  inset: 0px;
}
@media (min-width: 1024px) {
  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}
.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
/* added */


*,
::before,
::after {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}
::backdrop {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}
/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,
::after,
::before {
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb
}
::after,
::before {
  --tw-content:''
}
:host,
html {
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  tab-size:4;
  font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent
}
body {
  margin:0;
  line-height:inherit
}
hr {
  height:0;
  color:inherit;
  border-top-width:1px
}
abbr:where([title]) {
  -webkit-text-decoration:underline dotted;
  text-decoration:underline dotted
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:inherit;
  font-weight:inherit
}
a {
  color:inherit;
  text-decoration:inherit
}
b,
strong {
  font-weight:bolder
}
code,
kbd,
pre,
samp {
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings:normal;
  font-variation-settings:normal;
  font-size:1em
}
small {
  font-size:80%
}
sub,
sup {
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline
}
sub {
  bottom:-.25em
}
sup {
  top:-.5em
}
table {
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse
}
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
}
button,
select {
  text-transform:none
}
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none
}
:-moz-focusring {
  outline:auto
}
:-moz-ui-invalid {
  box-shadow:none
}
progress {
  vertical-align:baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height:auto
}
[type=search] {
  -webkit-appearance:textfield;
  outline-offset:-2px
}
::-webkit-search-decoration {
  -webkit-appearance:none
}
::-webkit-file-upload-button {
  -webkit-appearance:button;
  font:inherit
}
summary {
  display:list-item
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin:0
}
fieldset {
  margin:0;
  padding:0
}
legend {
  padding:0
}
menu,
ol,
ul {
  list-style:none;
  margin:0;
  padding:0
}
dialog {
  padding:0
}
textarea {
  resize:vertical
}
input::placeholder,
textarea::placeholder {
  opacity:1;
  color:#9ca3af
}
[role=button],
button {
  cursor:pointer
}
:disabled {
  cursor:default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display:block;
  vertical-align:middle
}
img,
video {
  max-width:100%;
  height:auto
}
[hidden]:where(:not([hidden=until-found])) {
  display:none
}
.absolute {
  position:absolute
}
.relative {
  position:relative
}
.sticky {
  position:sticky
}
.inset-0 {
  inset:0px
}
.bottom-0 {
  bottom:0px
}
.left-0 {
  left:0px
}
.right-0 {
  right:0px
}
.top-0 {
  top:0px
}
.z-50 {
  z-index:50
}
.mx-auto {
  margin-left:auto;
  margin-right:auto
}
.mb-12 {
  margin-bottom:3rem
}
.mb-16 {
  margin-bottom:4rem
}
.mb-2 {
  margin-bottom:0.5rem
}
.mb-4 {
  margin-bottom:1rem
}
.mb-6 {
  margin-bottom:1.5rem
}
.mb-8 {
  margin-bottom:2rem
}
.mr-1 {
  margin-right:0.25rem
}
.mr-4 {
  margin-right:1rem
}
.mt-8 {
  margin-top:2rem
}
.block {
  display:block
}
.flex {
  display:flex
}
.inline-flex {
  display:inline-flex
}
.grid {
  display:grid
}
.hidden {
  display:none
}
.h-12 {
  height:3rem
}
.h-16 {
  height:4rem
}
.h-4 {
  height:1rem
}
.h-48 {
  height:12rem
}
.h-5 {
  height:1.25rem
}
.h-6 {
  height:1.5rem
}
.h-64 {
  height:16rem
}
.h-8 {
  height:2rem
}
.w-12 {
  width:3rem
}
.w-16 {
  width:4rem
}
.w-4 {
  width:1rem
}
.w-48 {
  width:12rem
}
.w-5 {
  width:1.25rem
}
.w-6 {
  width:1.5rem
}
.w-64 {
  width:16rem
}
.w-8 {
  width:2rem
}
.w-full {
  width:100%
}
.max-w-2xl {
  max-width:42rem
}
.max-w-3xl {
  max-width:48rem
}
.max-w-7xl {
  max-width:80rem
}
.flex-shrink-0 {
  flex-shrink:0
}
.-translate-x-24 {
  --tw-translate-x:-6rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-32 {
  --tw-translate-y:-8rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-32 {
  --tw-translate-x:8rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-24 {
  --tw-translate-y:6rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.grid-cols-1 {
  grid-template-columns:repeat(1, minmax(0, 1fr))
}
.flex-wrap {
  flex-wrap:wrap
}
.items-start {
  align-items:flex-start
}
.items-center {
  align-items:center
}
.justify-center {
  justify-content:center
}
.justify-between {
  justify-content:space-between
}
.gap-4 {
  gap:1rem
}
.gap-6 {
  gap:1.5rem
}
.gap-8 {
  gap:2rem
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse:0;
  margin-right:calc(1rem * var(--tw-space-x-reverse));
  margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse:0;
  margin-right:calc(2rem * var(--tw-space-x-reverse));
  margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))
}
.overflow-hidden {
  overflow:hidden
}
.rounded-full {
  border-radius:9999px
}
.rounded-lg {
  border-radius:0.5rem
}
.rounded-md {
  border-radius:0.375rem
}
.rounded-xl {
  border-radius:0.75rem
}
.border {
  border-width:1px
}
.border-gray-100 {
  --tw-border-opacity:1;
  border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))
}
.border-gray-200 {
  --tw-border-opacity:1;
  border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))
}
.border-transparent {
  border-color:transparent
}
.bg-black {
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-100 {
  --tw-bg-opacity:1;
  background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))
}
.bg-gray-50 {
  --tw-bg-opacity:1;
  background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))
}
.bg-green-100 {
  --tw-bg-opacity:1;
  background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))
}
.bg-green-500 {
  --tw-bg-opacity:1;
  background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))
}
.bg-indigo-100 {
  --tw-bg-opacity:1;
  background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))
}
.bg-indigo-500 {
  --tw-bg-opacity:1;
  background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))
}
.bg-indigo-600 {
  --tw-bg-opacity:1;
  background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))
}
.bg-orange-100 {
  --tw-bg-opacity:1;
  background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))
}
.bg-purple-100 {
  --tw-bg-opacity:1;
  background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))
}
.bg-purple-500 {
  --tw-bg-opacity:1;
  background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))
}
.bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.bg-yellow-100 {
  --tw-bg-opacity:1;
  background-color:rgb(254 249 195 / var(--tw-bg-opacity, 1))
}
.bg-gradient-to-r {
  background-image:linear-gradient(to right, var(--tw-gradient-stops))
}
.from-indigo-500 {
  --tw-gradient-from:#6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-purple-600 {
  --tw-gradient-to:#9333ea var(--tw-gradient-to-position)
}
.p-2 {
  padding:0.5rem
}
.p-6 {
  padding:1.5rem
}
.p-8 {
  padding:2rem
}
.px-3 {
  padding-left:0.75rem;
  padding-right:0.75rem
}
.px-4 {
  padding-left:1rem;
  padding-right:1rem
}
.px-6 {
  padding-left:1.5rem;
  padding-right:1.5rem
}
.px-8 {
  padding-left:2rem;
  padding-right:2rem
}
.py-1 {
  padding-top:0.25rem;
  padding-bottom:0.25rem
}
.py-16 {
  padding-top:4rem;
  padding-bottom:4rem
}
.py-20 {
  padding-top:5rem;
  padding-bottom:5rem
}
.py-3 {
  padding-top:0.75rem;
  padding-bottom:0.75rem
}
.py-4 {
  padding-top:1rem;
  padding-bottom:1rem
}
.text-center {
  text-align:center
}
.font-sans {
  font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
.text-2xl {
  font-size:1.5rem;
  line-height:2rem
}
.text-3xl {
  font-size:1.875rem;
  line-height:2.25rem
}
.text-4xl {
  font-size:2.25rem;
  line-height:2.5rem
}
.text-base {
  font-size:1rem;
  line-height:1.5rem
}
.text-lg {
  font-size:1.125rem;
  line-height:1.75rem
}
.text-sm {
  font-size:0.875rem;
  line-height:1.25rem
}
.text-xl {
  font-size:1.25rem;
  line-height:1.75rem
}
.font-bold {
  font-weight:700
}
.font-medium {
  font-weight:500
}
.font-semibold {
  font-weight:600
}
.tracking-tight {
  letter-spacing:-0.025em
}
.text-blue-600 {
  --tw-text-opacity:1;
  color:rgb(37 99 235 / var(--tw-text-opacity, 1))
}
.text-gray-600 {
  --tw-text-opacity:1;
  color:rgb(75 85 99 / var(--tw-text-opacity, 1))
}
.text-gray-700 {
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity, 1))
}
.text-gray-900 {
  --tw-text-opacity:1;
  color:rgb(17 24 39 / var(--tw-text-opacity, 1))
}
.text-green-600 {
  --tw-text-opacity:1;
  color:rgb(22 163 74 / var(--tw-text-opacity, 1))
}
.text-green-800 {
  --tw-text-opacity:1;
  color:rgb(22 101 52 / var(--tw-text-opacity, 1))
}
.text-indigo-200 {
  --tw-text-opacity:1;
  color:rgb(199 210 254 / var(--tw-text-opacity, 1))
}
.text-indigo-600 {
  --tw-text-opacity:1;
  color:rgb(79 70 229 / var(--tw-text-opacity, 1))
}
.text-indigo-800 {
  --tw-text-opacity:1;
  color:rgb(55 48 163 / var(--tw-text-opacity, 1))
}
.text-orange-600 {
  --tw-text-opacity:1;
  color:rgb(234 88 12 / var(--tw-text-opacity, 1))
}
.text-purple-600 {
  --tw-text-opacity:1;
  color:rgb(147 51 234 / var(--tw-text-opacity, 1))
}
.text-purple-800 {
  --tw-text-opacity:1;
  color:rgb(107 33 168 / var(--tw-text-opacity, 1))
}
.text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.text-yellow-400 {
  --tw-text-opacity:1;
  color:rgb(250 204 21 / var(--tw-text-opacity, 1))
}
.text-yellow-800 {
  --tw-text-opacity:1;
  color:rgb(133 77 14 / var(--tw-text-opacity, 1))
}
.opacity-10 {
  opacity:0.1
}
.opacity-5 {
  opacity:0.05
}
.opacity-90 {
  opacity:0.9
}
.shadow {
  --tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-sm {
  --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.transition-all {
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}
.transition-colors {
  transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}
.duration-300 {
  transition-duration:300ms
}
.hover\:scale-105:hover {
  --tw-scale-x:1.05;
  --tw-scale-y:1.05;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
.hover\:bg-indigo-50:hover {
  --tw-bg-opacity:1;
  background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))
}
.hover\:bg-indigo-700:hover {
  --tw-bg-opacity:1;
  background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))
}
.hover\:text-indigo-600:hover {
  --tw-text-opacity:1;
  color:rgb(79 70 229 / var(--tw-text-opacity, 1))
}
.hover\:shadow-md:hover {
  --tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
@media (min-width: 640px) {
  .sm\:px-6 {
    padding-left:1.5rem;
    padding-right:1.5rem
  }
  .sm\:text-4xl {
    font-size:2.25rem;
    line-height:2.5rem
  }
}
@media (min-width: 768px) {
  .md\:flex {
    display:flex
  }
  .md\:hidden {
    display:none
  }
  .md\:grid-cols-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
  .md\:grid-cols-3 {
    grid-template-columns:repeat(3, minmax(0, 1fr))
  }
  .md\:text-2xl {
    font-size:1.5rem;
    line-height:2rem
  }
  .md\:text-4xl {
    font-size:2.25rem;
    line-height:2.5rem
  }
  .md\:text-6xl {
    font-size:3.75rem;
    line-height:1
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
  .lg\:grid-cols-3 {
    grid-template-columns:repeat(3, minmax(0, 1fr))
  }
  .lg\:grid-cols-4 {
    grid-template-columns:repeat(4, minmax(0, 1fr))
  }
  .lg\:px-8 {
    padding-left:2rem;
    padding-right:2rem
  }
  .lg\:py-20 {
    padding-top:5rem;
    padding-bottom:5rem
  }
  .lg\:py-24 {
    padding-top:6rem;
    padding-bottom:6rem
  }
  .lg\:py-32 {
    padding-top:8rem;
    padding-bottom:8rem
  }
}

 
        /* Header */
        .header {
            background: linear-gradient(135deg, #3b1288 0%, #9333ea 100%);
          color: white;
          padding: 4rem 0;
          text-align: center;
          position: relative;
          overflow: hidden;
      }
      
      .header::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.1)"><path d="M0,0v46.29c47.79,22.85,103.59,32.28,158,28,70.36-5.52,136.33-33.12,206.8-37.39C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1047.17,5.24,1100,19.86V0Z"/></svg>') repeat-x;
          background-size: 1000px 100px;
          animation: wave 20s linear infinite;
      }
      
      @keyframes wave {
          0% { background-position-x: 0; }
          100% { background-position-x: 1000px; }
      }
      
      .header h1 {
          font-size: 3rem;
          font-weight: 700;
          margin-bottom: 1rem;
          position: relative;
          z-index: 1;
      }
      
      .header p {
          font-size: 1.25rem;
          opacity: 0.9;
          max-width: 600px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
      }
      
      /* Main Content */
      .main-content {
          padding: 5rem 0;
          background: linear-gradient(to bottom, #f8fafc, #fff);
      }
      
      .search-box {
          background: white;
          border-radius: 50px;
          padding: 1rem 2rem;
          margin-bottom: 3rem;
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
          display: flex;
          align-items: center;
          gap: 1rem;
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 3rem;
      }
      
      .search-box input {
          flex: 1;
          border: none;
          outline: none;
          font-size: 1rem;
          padding: 0.5rem 0;
      }
      
      .search-box svg {
          color: #3b1288;
      }
      
      .faq-grid {
          display: grid;
          grid-template-columns: 1fr 2fr;
          gap: 3rem;
          margin-top: 2rem;
      }
      
      .faq-categories {
          background: white;
          border-radius: 1rem;
          padding: 2rem;
          box-shadow: 0 4px 20px rgba(0,0,0,0.08);
          height: fit-content;
          position: sticky;
          top: 2rem;
      }
      
      .faq-categories h3 {
          color: #3b1288;
          font-size: 1.25rem;
          margin-bottom: 1.5rem;
          font-weight: 600;
      }
      
      .category-item {
          display: flex;
          align-items: center;
          padding: 0.75rem 1rem;
          margin-bottom: 0.5rem;
          border-radius: 0.5rem;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 2px solid transparent;
      }
      
      .category-item:hover,
      .category-item.active {
          background: #3b1288;
          color: white;
          transform: translateX(5px);
      }
      
      .category-item svg {
          margin-right: 0.75rem;
          width: 20px;
          height: 20px;
      }
      
      .faq-content {
          background: white;
          border-radius: 1rem;
          padding: 2rem;
          box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      }
      
      .faq-section {
          margin-bottom: 2rem;
      }
      
      .faq-section h4 {
          color: #3b1288;
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
          font-weight: 600;
          border-bottom: 2px solid #3b1288;
          padding-bottom: 0.5rem;
      }
      
      .faq-item {
          border: 1px solid #e5e7eb;
          border-radius: 0.75rem;
          margin-bottom: 1rem;
          overflow: hidden;
          transition: all 0.3s ease;
      }
      
      .faq-item:hover {
          border-color: #3b1288;
          box-shadow: 0 4px 15px rgba(107, 70, 193, 0.1);
      }
      
      .faq-question {
          padding: 1.5rem;
          background: #f8fafc;
          cursor: pointer;
          font-weight: 600;
          color: #1f2937;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all 0.3s ease;
      }
      
      .faq-question:hover {
          background: #3b1288;
          color: white;
      }
      
      .faq-answer {
          padding: 1.5rem;
          background: white;
          color: #6b7280;
          line-height: 1.7;
          border-top: 1px solid #e5e7eb;
          display: none;
      }
      
      .faq-toggle {
          font-size: 1.5rem;
          font-weight: bold;
          transition: transform 0.3s ease;
      }
      
      .faq-item.active .faq-toggle {
          transform: rotate(45deg);
      }
      
      .faq-item.active .faq-question {
          background: #3b1288;
          color: white;
      }
      
      .faq-item.active .faq-answer {
          display: block;
      }
      
      /* Contact Section */
      .contact-section {
          background: #3b1288;
          color: white;
          padding: 4rem 0;
          text-align: center;
          margin-top: 3rem;
      }
      
      .contact-section h3 {
          font-size: 2rem;
          margin-bottom: 1rem;
      }
      
      .contact-section p {
          font-size: 1.1rem;
          margin-bottom: 2rem;
          opacity: 0.9;
      }
      
      .contact-buttons {
          display: flex;
          gap: 1rem;
          justify-content: center;
          flex-wrap: wrap;
      }
      
      .contact-btn {
          background: white;
          color: #3b1288;
          padding: .5rem 1rem;
          border-radius: 5px;
          text-decoration: none;
          font-weight: 600;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }
      
      .contact-btn:hover {
          background: #f3f4f6;
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      }
      
      /* Responsive Design */
      @media (max-width: 768px) {
          .header h1 {
              font-size: 2rem;
          }
          
          .header p {
              font-size: 1rem;
          }
          
          .faq-grid {
              grid-template-columns: 1fr;
              gap: 2rem;
          }
          
          .faq-categories {
              position: static;
          }
          
          .contact-buttons {
              flex-direction: column;
              align-items: center;
          }
          
          .contact-btn {
              width: 100%;
              max-width: 300px;
              justify-content: center;
          }
      }

/* Custom Alert Styles */
#custom-alert {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: white;
  font-weight: 500;
  opacity: 0;
  transform: translateX(120%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  max-width: 300px;
}

#custom-alert.show {
  opacity: 1;
  transform: translateX(0);
}

#custom-alert.success {
  background-color: #10B981; /* Green for success */
}

#custom-alert.error {
  background-color: #EF4444; /* Red for error */
}