/* ============================================================
   TABLE OF CONTENTS
   ============================================================
   1.  CSS Variables
   2.  Reset & Typography
   3.  Utility Classes
   4.  Preloader
   5.  Header
   6.  Mobile Menu
   7.  Search Popup
   8.  Off-canvas Sidebar
   9.  Hero / Banner
   10. Buttons
   11. Section Styles
   12. Cards & Grid
   13. Counter / Odometer
   14. Testimonials
   15. Contact Form
   16. Footer
   17. Breadcrumb
   18. Accordion
   19. Cursor
   20. Toast Notifications
   21. Animations / Keyframes
   22. Responsive
   23. AOS Overrides
   24. Misc (Magnific, Swiper, Nice Select)
   ============================================================ */

/* ============================================================
   1.  CSS VARIABLES
   ============================================================ */
:root {
  --main-50:   hsl(14, 84%, 94%);
  --main-100:  hsl(14, 84%, 86%);
  --main-200:  hsl(14, 84%, 76%);
  --main-300:  hsl(14, 84%, 66%);
  --main-400:  hsl(14, 84%, 56%);
  --main-500:  hsl(14, 84%, 50%);
  --main-600:  hsl(14, 84%, 44%);
  --main-700:  hsl(14, 84%, 36%);
  --main-800:  hsl(14, 84%, 28%);
  --main-900:  hsl(14, 84%, 18%);
  --main-color: var(--main-400);

  --neutral-50:   hsl(0, 0%, 97%);
  --neutral-100:  hsl(0, 0%, 93%);
  --neutral-200:  hsl(0, 0%, 85%);
  --neutral-300:  hsl(0, 0%, 72%);
  --neutral-400:  hsl(0, 0%, 58%);
  --neutral-500:  hsl(0, 0%, 48%);
  --neutral-600:  hsl(0, 0%, 38%);
  --neutral-700:  hsl(0, 0%, 28%);
  --neutral-800:  hsl(0, 0%, 20%);
  --neutral-900:  hsl(0, 0%, 12%);
  --neutral-950:  hsl(0, 0%, 6%);

  --white:        hsl(0, 0%, 100%);
  --black:        hsl(209, 49%, 10%);
  --heading-color: hsl(209, 49%, 10%);
  --body-color:   hsl(0, 0%, 38%);

  --font-heading: "New Amsterdam", sans-serif;
  --font-body:    "Open Sans", sans-serif;

  --size-1:   0.0625rem;
  --size-2:   0.125rem;
  --size-3:   0.1875rem;
  --size-4:   0.25rem;
  --size-5:   0.3125rem;
  --size-6:   0.375rem;
  --size-7:   0.4375rem;
  --size-8:   0.5rem;
  --size-9:   0.5625rem;
  --size-10:  0.625rem;
  --size-11:  0.6875rem;
  --size-12:  0.75rem;
  --size-13:  0.8125rem;
  --size-14:  0.875rem;
  --size-15:  0.9375rem;
  --size-16:  1rem;
  --size-17:  1.0625rem;
  --size-18:  1.125rem;
  --size-19:  1.1875rem;
  --size-20:  1.25rem;
  --size-21:  1.3125rem;
  --size-22:  1.375rem;
  --size-23:  1.4375rem;
  --size-24:  1.5rem;
  --size-25:  1.5625rem;
  --size-26:  1.625rem;
  --size-27:  1.6875rem;
  --size-28:  1.75rem;
  --size-29:  1.8125rem;
  --size-30:  1.875rem;
  --size-31:  1.9375rem;
  --size-32:  2rem;
  --size-33:  2.0625rem;
  --size-34:  2.125rem;
  --size-35:  2.1875rem;
  --size-36:  2.25rem;
  --size-37:  2.3125rem;
  --size-38:  2.375rem;
  --size-39:  2.4375rem;
  --size-40:  2.5rem;
  --size-41:  2.5625rem;
  --size-42:  2.625rem;
  --size-43:  2.6875rem;
  --size-44:  2.75rem;
  --size-45:  2.8125rem;
  --size-46:  2.875rem;
  --size-47:  2.9375rem;
  --size-48:  3rem;
  --size-49:  3.0625rem;
  --size-50:  3.125rem;
  --size-51:  3.1875rem;
  --size-52:  3.25rem;
  --size-53:  3.3125rem;
  --size-54:  3.375rem;
  --size-55:  3.4375rem;
  --size-56:  3.5rem;
  --size-57:  3.5625rem;
  --size-58:  3.625rem;
  --size-59:  3.6875rem;
  --size-60:  3.75rem;
  --size-61:  3.8125rem;
  --size-62:  3.875rem;

  --fs-xs:    0.625rem;
  --fs-sm:    0.75rem;
  --fs-base:  0.875rem;
  --fs-md:    1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.875rem;
  --fs-4xl:   2.25rem;
  --fs-5xl:   3rem;
  --fs-6xl:   3.75rem;
  --fs-7xl:   4.5rem;
  --fs-8xl:   6rem;

  --transition-fast:       0.15s ease;
  --transition-base:       0.3s ease;
  --transition-slow:       0.5s ease;
  --transition-extra-slow: 0.8s ease;
  --transition-cubic:      0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================================
   2.  RESET & TYPOGRAPHY
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-color);
  background-color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.02em;
}

h1 { font-size: var(--fs-7xl); }
h2 { font-size: var(--fs-5xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

a {
  color: var(--main-color);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--main-600);
}

a:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

::selection {
  background-color: var(--main-color);
  color: var(--white);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--neutral-100);
}

::-webkit-scrollbar-thumb {
  background: var(--main-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--main-400);
}


/* ============================================================
   3.  UTILITY CLASSES
   ============================================================ */

/* ---- Background Colors ---- */
.bg-main-50   { background-color: var(--main-50); }
.bg-main-100  { background-color: var(--main-100); }
.bg-main-200  { background-color: var(--main-200); }
.bg-main-300  { background-color: var(--main-300); }
.bg-main-400  { background-color: var(--main-400); }
.bg-main-500  { background-color: var(--main-500); }
.bg-main-600  { background-color: var(--main-600); }
.bg-main-700  { background-color: var(--main-700); }
.bg-main-800  { background-color: var(--main-800); }
.bg-main-900  { background-color: var(--main-900); }

.bg-neutral-50   { background-color: var(--neutral-50); }
.bg-neutral-100  { background-color: var(--neutral-100); }
.bg-neutral-200  { background-color: var(--neutral-200); }
.bg-neutral-300  { background-color: var(--neutral-300); }
.bg-neutral-400  { background-color: var(--neutral-400); }
.bg-neutral-500  { background-color: var(--neutral-500); }
.bg-neutral-600  { background-color: var(--neutral-600); }
.bg-neutral-700  { background-color: var(--neutral-700); }
.bg-neutral-800  { background-color: var(--neutral-800); }
.bg-neutral-900  { background-color: var(--neutral-900); }
.bg-neutral-950  { background-color: var(--neutral-950); }

.bg-white       { background-color: var(--white); }
.bg-transparent { background-color: transparent; }

/* ---- Text Colors ---- */
.text-main-50   { color: var(--main-50); }
.text-main-100  { color: var(--main-100); }
.text-main-200  { color: var(--main-200); }
.text-main-300  { color: var(--main-300); }
.text-main-400  { color: var(--main-400); }
.text-main-500  { color: var(--main-500); }
.text-main-600  { color: var(--main-600); }
.text-main-700  { color: var(--main-700); }
.text-main-800  { color: var(--main-800); }
.text-main-900  { color: var(--main-900); }

.text-neutral-50   { color: var(--neutral-50); }
.text-neutral-100  { color: var(--neutral-100); }
.text-neutral-200  { color: var(--neutral-200); }
.text-neutral-300  { color: var(--neutral-300); }
.text-neutral-400  { color: var(--neutral-400); }
.text-neutral-500  { color: var(--neutral-500); }
.text-neutral-600  { color: var(--neutral-600); }
.text-neutral-700  { color: var(--neutral-700); }
.text-neutral-800  { color: var(--neutral-800); }
.text-neutral-900  { color: var(--neutral-900); }
.text-neutral-950  { color: var(--neutral-950); }

.text-heading { color: var(--heading-color); }
.text-body    { color: var(--body-color); }
.text-white   { color: var(--white); }
.text-black   { color: var(--black); }
.text-main    { color: var(--main-color); }


/* ---- Hover Background Variants ---- */
.hover-bg-main-50:hover   { background-color: var(--main-50); }
.hover-bg-main-100:hover  { background-color: var(--main-100); }
.hover-bg-main-200:hover  { background-color: var(--main-200); }
.hover-bg-main-300:hover  { background-color: var(--main-300); }
.hover-bg-main-400:hover  { background-color: var(--main-400); }
.hover-bg-main-500:hover  { background-color: var(--main-500); }
.hover-bg-main-600:hover  { background-color: var(--main-600); }
.hover-bg-main-700:hover  { background-color: var(--main-700); }
.hover-bg-main-800:hover  { background-color: var(--main-800); }
.hover-bg-main-900:hover  { background-color: var(--main-900); }

.hover-bg-neutral-50:hover   { background-color: var(--neutral-50); }
.hover-bg-neutral-100:hover  { background-color: var(--neutral-100); }
.hover-bg-neutral-200:hover  { background-color: var(--neutral-200); }
.hover-bg-neutral-300:hover  { background-color: var(--neutral-300); }
.hover-bg-neutral-400:hover  { background-color: var(--neutral-400); }
.hover-bg-neutral-500:hover  { background-color: var(--neutral-500); }
.hover-bg-neutral-600:hover  { background-color: var(--neutral-600); }
.hover-bg-neutral-700:hover  { background-color: var(--neutral-700); }
.hover-bg-neutral-800:hover  { background-color: var(--neutral-800); }
.hover-bg-neutral-900:hover  { background-color: var(--neutral-900); }
.hover-bg-neutral-950:hover  { background-color: var(--neutral-950); }

.hover-bg-white:hover       { background-color: var(--white); }
.hover-bg-transparent:hover { background-color: transparent; }

/* ---- Hover Text Variants ---- */
.hover-text-main-50:hover   { color: var(--main-50); }
.hover-text-main-100:hover  { color: var(--main-100); }
.hover-text-main-200:hover  { color: var(--main-200); }
.hover-text-main-300:hover  { color: var(--main-300); }
.hover-text-main-400:hover  { color: var(--main-400); }
.hover-text-main-500:hover  { color: var(--main-500); }
.hover-text-main-600:hover  { color: var(--main-600); }
.hover-text-main-700:hover  { color: var(--main-700); }
.hover-text-main-800:hover  { color: var(--main-800); }
.hover-text-main-900:hover  { color: var(--main-900); }

.hover-text-neutral-50:hover   { color: var(--neutral-50); }
.hover-text-neutral-100:hover  { color: var(--neutral-100); }
.hover-text-neutral-200:hover  { color: var(--neutral-200); }
.hover-text-neutral-300:hover  { color: var(--neutral-300); }
.hover-text-neutral-400:hover  { color: var(--neutral-400); }
.hover-text-neutral-500:hover  { color: var(--neutral-500); }
.hover-text-neutral-600:hover  { color: var(--neutral-600); }
.hover-text-neutral-700:hover  { color: var(--neutral-700); }
.hover-text-neutral-800:hover  { color: var(--neutral-800); }
.hover-text-neutral-900:hover  { color: var(--neutral-900); }
.hover-text-neutral-950:hover  { color: var(--neutral-950); }

.hover-text-white:hover   { color: var(--white); }
.hover-text-main:hover    { color: var(--main-color); }
.hover-text-heading:hover { color: var(--heading-color); }


/* ---- Border Colors ---- */
.border-main-50   { border-color: var(--main-50); }
.border-main-100  { border-color: var(--main-100); }
.border-main-200  { border-color: var(--main-200); }
.border-main-300  { border-color: var(--main-300); }
.border-main-400  { border-color: var(--main-400); }
.border-main-500  { border-color: var(--main-500); }
.border-main-600  { border-color: var(--main-600); }
.border-main-700  { border-color: var(--main-700); }
.border-main-800  { border-color: var(--main-800); }
.border-main-900  { border-color: var(--main-900); }

.border-neutral-50   { border-color: var(--neutral-50); }
.border-neutral-100  { border-color: var(--neutral-100); }
.border-neutral-200  { border-color: var(--neutral-200); }
.border-neutral-300  { border-color: var(--neutral-300); }
.border-neutral-400  { border-color: var(--neutral-400); }
.border-neutral-500  { border-color: var(--neutral-500); }
.border-neutral-600  { border-color: var(--neutral-600); }
.border-neutral-700  { border-color: var(--neutral-700); }
.border-neutral-800  { border-color: var(--neutral-800); }
.border-neutral-900  { border-color: var(--neutral-900); }

.border-white { border-color: var(--white); }
.border-black { border-color: var(--black); }

/* ---- Hover Border Variants ---- */
.hover-border-main-50:hover   { border-color: var(--main-50); }
.hover-border-main-100:hover  { border-color: var(--main-100); }
.hover-border-main-200:hover  { border-color: var(--main-200); }
.hover-border-main-300:hover  { border-color: var(--main-300); }
.hover-border-main-400:hover  { border-color: var(--main-400); }
.hover-border-main-500:hover  { border-color: var(--main-500); }
.hover-border-main-600:hover  { border-color: var(--main-600); }
.hover-border-main-700:hover  { border-color: var(--main-700); }
.hover-border-main-800:hover  { border-color: var(--main-800); }
.hover-border-main-900:hover  { border-color: var(--main-900); }

.hover-border-white:hover  { border-color: var(--white); }
.hover-border-black:hover  { border-color: var(--black); }


/* ---- Width Classes ---- */
.tw-w-25   { width: 25%; }
.tw-w-33   { width: 33.33333%; }
.tw-w-50   { width: 50%; }
.tw-w-66   { width: 66.66667%; }
.tw-w-75   { width: 75%; }
.tw-w-100  { width: 100%; }
.tw-w-auto { width: auto; }

.max-w-100  { max-width: 100px; }
.max-w-200  { max-width: 200px; }
.max-w-300  { max-width: 300px; }
.max-w-400  { max-width: 400px; }
.max-w-500  { max-width: 500px; }
.max-w-600  { max-width: 600px; }
.max-w-700  { max-width: 700px; }
.max-w-800  { max-width: 800px; }
.max-w-900  { max-width: 900px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }

/* ---- Height Classes ---- */
.tw-h-auto  { height: auto; }
.tw-h-100   { height: 100%; }
.tw-h-100vh { height: 100vh; }
.tw-h-50vh  { height: 50vh; }

/* ---- Padding Classes ---- */
.tw-p-0   { padding: 0; }
.tw-p-1   { padding: var(--size-1); }
.tw-p-2   { padding: var(--size-2); }
.tw-p-3   { padding: var(--size-3); }
.tw-p-4   { padding: var(--size-4); }
.tw-p-5   { padding: var(--size-5); }
.tw-p-6   { padding: var(--size-6); }
.tw-p-7   { padding: var(--size-7); }
.tw-p-8   { padding: var(--size-8); }
.tw-p-9   { padding: var(--size-9); }
.tw-p-10  { padding: var(--size-10); }
.tw-p-11  { padding: var(--size-11); }
.tw-p-12  { padding: var(--size-12); }
.tw-p-13  { padding: var(--size-13); }
.tw-p-14  { padding: var(--size-14); }
.tw-p-15  { padding: var(--size-15); }
.tw-p-16  { padding: var(--size-16); }
.tw-p-17  { padding: var(--size-17); }
.tw-p-18  { padding: var(--size-18); }
.tw-p-19  { padding: var(--size-19); }
.tw-p-20  { padding: var(--size-20); }
.tw-p-21  { padding: var(--size-21); }
.tw-p-22  { padding: var(--size-22); }
.tw-p-23  { padding: var(--size-23); }
.tw-p-24  { padding: var(--size-24); }
.tw-p-25  { padding: var(--size-25); }
.tw-p-26  { padding: var(--size-26); }
.tw-p-27  { padding: var(--size-27); }
.tw-p-28  { padding: var(--size-28); }
.tw-p-29  { padding: var(--size-29); }
.tw-p-30  { padding: var(--size-30); }
.tw-p-31  { padding: var(--size-31); }
.tw-p-32  { padding: var(--size-32); }
.tw-p-33  { padding: var(--size-33); }
.tw-p-34  { padding: var(--size-34); }
.tw-p-35  { padding: var(--size-35); }
.tw-p-36  { padding: var(--size-36); }
.tw-p-37  { padding: var(--size-37); }
.tw-p-38  { padding: var(--size-38); }
.tw-p-39  { padding: var(--size-39); }
.tw-p-40  { padding: var(--size-40); }
.tw-p-41  { padding: var(--size-41); }
.tw-p-42  { padding: var(--size-42); }
.tw-p-43  { padding: var(--size-43); }
.tw-p-44  { padding: var(--size-44); }
.tw-p-45  { padding: var(--size-45); }
.tw-p-46  { padding: var(--size-46); }
.tw-p-47  { padding: var(--size-47); }
.tw-p-48  { padding: var(--size-48); }
.tw-p-49  { padding: var(--size-49); }
.tw-p-50  { padding: var(--size-50); }
.tw-p-51  { padding: var(--size-51); }
.tw-p-52  { padding: var(--size-52); }
.tw-p-53  { padding: var(--size-53); }
.tw-p-54  { padding: var(--size-54); }
.tw-p-55  { padding: var(--size-55); }
.tw-p-56  { padding: var(--size-56); }
.tw-p-57  { padding: var(--size-57); }
.tw-p-58  { padding: var(--size-58); }
.tw-p-59  { padding: var(--size-59); }
.tw-p-60  { padding: var(--size-60); }
.tw-p-61  { padding: var(--size-61); }
.tw-p-62  { padding: var(--size-62); }


/* ---- Margin Classes ---- */
.tw-m-0   { margin: 0; }
.tw-m-1   { margin: var(--size-1); }
.tw-m-2   { margin: var(--size-2); }
.tw-m-3   { margin: var(--size-3); }
.tw-m-4   { margin: var(--size-4); }
.tw-m-5   { margin: var(--size-5); }
.tw-m-6   { margin: var(--size-6); }
.tw-m-7   { margin: var(--size-7); }
.tw-m-8   { margin: var(--size-8); }
.tw-m-9   { margin: var(--size-9); }
.tw-m-10  { margin: var(--size-10); }
.tw-m-11  { margin: var(--size-11); }
.tw-m-12  { margin: var(--size-12); }
.tw-m-13  { margin: var(--size-13); }
.tw-m-14  { margin: var(--size-14); }
.tw-m-15  { margin: var(--size-15); }
.tw-m-16  { margin: var(--size-16); }
.tw-m-17  { margin: var(--size-17); }
.tw-m-18  { margin: var(--size-18); }
.tw-m-19  { margin: var(--size-19); }
.tw-m-20  { margin: var(--size-20); }
.tw-m-21  { margin: var(--size-21); }
.tw-m-22  { margin: var(--size-22); }
.tw-m-23  { margin: var(--size-23); }
.tw-m-24  { margin: var(--size-24); }
.tw-m-25  { margin: var(--size-25); }
.tw-m-26  { margin: var(--size-26); }
.tw-m-27  { margin: var(--size-27); }
.tw-m-28  { margin: var(--size-28); }
.tw-m-29  { margin: var(--size-29); }
.tw-m-30  { margin: var(--size-30); }
.tw-m-31  { margin: var(--size-31); }
.tw-m-32  { margin: var(--size-32); }
.tw-m-33  { margin: var(--size-33); }
.tw-m-34  { margin: var(--size-34); }
.tw-m-35  { margin: var(--size-35); }
.tw-m-36  { margin: var(--size-36); }
.tw-m-37  { margin: var(--size-37); }
.tw-m-38  { margin: var(--size-38); }
.tw-m-39  { margin: var(--size-39); }
.tw-m-40  { margin: var(--size-40); }
.tw-m-41  { margin: var(--size-41); }
.tw-m-42  { margin: var(--size-42); }
.tw-m-43  { margin: var(--size-43); }
.tw-m-44  { margin: var(--size-44); }
.tw-m-45  { margin: var(--size-45); }
.tw-m-46  { margin: var(--size-46); }
.tw-m-47  { margin: var(--size-47); }
.tw-m-48  { margin: var(--size-48); }
.tw-m-49  { margin: var(--size-49); }
.tw-m-50  { margin: var(--size-50); }
.tw-m-51  { margin: var(--size-51); }
.tw-m-52  { margin: var(--size-52); }
.tw-m-53  { margin: var(--size-53); }
.tw-m-54  { margin: var(--size-54); }
.tw-m-55  { margin: var(--size-55); }
.tw-m-56  { margin: var(--size-56); }
.tw-m-57  { margin: var(--size-57); }
.tw-m-58  { margin: var(--size-58); }
.tw-m-59  { margin: var(--size-59); }
.tw-m-60  { margin: var(--size-60); }
.tw-m-61  { margin: var(--size-61); }
.tw-m-62  { margin: var(--size-62); }


/* ---- Padding Y ---- */
.tw-py-0   { padding-top: 0; padding-bottom: 0; }
.tw-py-1   { padding-top: var(--size-1); padding-bottom: var(--size-1); }
.tw-py-2   { padding-top: var(--size-2); padding-bottom: var(--size-2); }
.tw-py-3   { padding-top: var(--size-3); padding-bottom: var(--size-3); }
.tw-py-4   { padding-top: var(--size-4); padding-bottom: var(--size-4); }
.tw-py-5   { padding-top: var(--size-5); padding-bottom: var(--size-5); }
.tw-py-6   { padding-top: var(--size-6); padding-bottom: var(--size-6); }
.tw-py-7   { padding-top: var(--size-7); padding-bottom: var(--size-7); }
.tw-py-8   { padding-top: var(--size-8); padding-bottom: var(--size-8); }
.tw-py-9   { padding-top: var(--size-9); padding-bottom: var(--size-9); }
.tw-py-10  { padding-top: var(--size-10); padding-bottom: var(--size-10); }
.tw-py-11  { padding-top: var(--size-11); padding-bottom: var(--size-11); }
.tw-py-12  { padding-top: var(--size-12); padding-bottom: var(--size-12); }
.tw-py-13  { padding-top: var(--size-13); padding-bottom: var(--size-13); }
.tw-py-14  { padding-top: var(--size-14); padding-bottom: var(--size-14); }
.tw-py-15  { padding-top: var(--size-15); padding-bottom: var(--size-15); }
.tw-py-16  { padding-top: var(--size-16); padding-bottom: var(--size-16); }
.tw-py-17  { padding-top: var(--size-17); padding-bottom: var(--size-17); }
.tw-py-18  { padding-top: var(--size-18); padding-bottom: var(--size-18); }
.tw-py-19  { padding-top: var(--size-19); padding-bottom: var(--size-19); }
.tw-py-20  { padding-top: var(--size-20); padding-bottom: var(--size-20); }
.tw-py-21  { padding-top: var(--size-21); padding-bottom: var(--size-21); }
.tw-py-22  { padding-top: var(--size-22); padding-bottom: var(--size-22); }
.tw-py-23  { padding-top: var(--size-23); padding-bottom: var(--size-23); }
.tw-py-24  { padding-top: var(--size-24); padding-bottom: var(--size-24); }
.tw-py-25  { padding-top: var(--size-25); padding-bottom: var(--size-25); }
.tw-py-26  { padding-top: var(--size-26); padding-bottom: var(--size-26); }
.tw-py-27  { padding-top: var(--size-27); padding-bottom: var(--size-27); }
.tw-py-28  { padding-top: var(--size-28); padding-bottom: var(--size-28); }
.tw-py-29  { padding-top: var(--size-29); padding-bottom: var(--size-29); }
.tw-py-30  { padding-top: var(--size-30); padding-bottom: var(--size-30); }
.tw-py-31  { padding-top: var(--size-31); padding-bottom: var(--size-31); }
.tw-py-32  { padding-top: var(--size-32); padding-bottom: var(--size-32); }
.tw-py-33  { padding-top: var(--size-33); padding-bottom: var(--size-33); }
.tw-py-34  { padding-top: var(--size-34); padding-bottom: var(--size-34); }
.tw-py-35  { padding-top: var(--size-35); padding-bottom: var(--size-35); }
.tw-py-36  { padding-top: var(--size-36); padding-bottom: var(--size-36); }
.tw-py-37  { padding-top: var(--size-37); padding-bottom: var(--size-37); }
.tw-py-38  { padding-top: var(--size-38); padding-bottom: var(--size-38); }
.tw-py-39  { padding-top: var(--size-39); padding-bottom: var(--size-39); }
.tw-py-40  { padding-top: var(--size-40); padding-bottom: var(--size-40); }
.tw-py-41  { padding-top: var(--size-41); padding-bottom: var(--size-41); }
.tw-py-42  { padding-top: var(--size-42); padding-bottom: var(--size-42); }
.tw-py-43  { padding-top: var(--size-43); padding-bottom: var(--size-43); }
.tw-py-44  { padding-top: var(--size-44); padding-bottom: var(--size-44); }
.tw-py-45  { padding-top: var(--size-45); padding-bottom: var(--size-45); }
.tw-py-46  { padding-top: var(--size-46); padding-bottom: var(--size-46); }
.tw-py-47  { padding-top: var(--size-47); padding-bottom: var(--size-47); }
.tw-py-48  { padding-top: var(--size-48); padding-bottom: var(--size-48); }
.tw-py-49  { padding-top: var(--size-49); padding-bottom: var(--size-49); }
.tw-py-50  { padding-top: var(--size-50); padding-bottom: var(--size-50); }
.tw-py-51  { padding-top: var(--size-51); padding-bottom: var(--size-51); }
.tw-py-52  { padding-top: var(--size-52); padding-bottom: var(--size-52); }
.tw-py-53  { padding-top: var(--size-53); padding-bottom: var(--size-53); }
.tw-py-54  { padding-top: var(--size-54); padding-bottom: var(--size-54); }
.tw-py-55  { padding-top: var(--size-55); padding-bottom: var(--size-55); }
.tw-py-56  { padding-top: var(--size-56); padding-bottom: var(--size-56); }
.tw-py-57  { padding-top: var(--size-57); padding-bottom: var(--size-57); }
.tw-py-58  { padding-top: var(--size-58); padding-bottom: var(--size-58); }
.tw-py-59  { padding-top: var(--size-59); padding-bottom: var(--size-59); }
.tw-py-60  { padding-top: var(--size-60); padding-bottom: var(--size-60); }
.tw-py-61  { padding-top: var(--size-61); padding-bottom: var(--size-61); }
.tw-py-62  { padding-top: var(--size-62); padding-bottom: var(--size-62); }

/* ---- Padding X ---- */
.tw-px-0   { padding-left: 0; padding-right: 0; }
.tw-px-1   { padding-left: var(--size-1); padding-right: var(--size-1); }
.tw-px-2   { padding-left: var(--size-2); padding-right: var(--size-2); }
.tw-px-3   { padding-left: var(--size-3); padding-right: var(--size-3); }
.tw-px-4   { padding-left: var(--size-4); padding-right: var(--size-4); }
.tw-px-5   { padding-left: var(--size-5); padding-right: var(--size-5); }
.tw-px-6   { padding-left: var(--size-6); padding-right: var(--size-6); }
.tw-px-7   { padding-left: var(--size-7); padding-right: var(--size-7); }
.tw-px-8   { padding-left: var(--size-8); padding-right: var(--size-8); }
.tw-px-9   { padding-left: var(--size-9); padding-right: var(--size-9); }
.tw-px-10  { padding-left: var(--size-10); padding-right: var(--size-10); }
.tw-px-11  { padding-left: var(--size-11); padding-right: var(--size-11); }
.tw-px-12  { padding-left: var(--size-12); padding-right: var(--size-12); }
.tw-px-13  { padding-left: var(--size-13); padding-right: var(--size-13); }
.tw-px-14  { padding-left: var(--size-14); padding-right: var(--size-14); }
.tw-px-15  { padding-left: var(--size-15); padding-right: var(--size-15); }
.tw-px-16  { padding-left: var(--size-16); padding-right: var(--size-16); }
.tw-px-17  { padding-left: var(--size-17); padding-right: var(--size-17); }
.tw-px-18  { padding-left: var(--size-18); padding-right: var(--size-18); }
.tw-px-19  { padding-left: var(--size-19); padding-right: var(--size-19); }
.tw-px-20  { padding-left: var(--size-20); padding-right: var(--size-20); }
.tw-px-21  { padding-left: var(--size-21); padding-right: var(--size-21); }
.tw-px-22  { padding-left: var(--size-22); padding-right: var(--size-22); }
.tw-px-23  { padding-left: var(--size-23); padding-right: var(--size-23); }
.tw-px-24  { padding-left: var(--size-24); padding-right: var(--size-24); }
.tw-px-25  { padding-left: var(--size-25); padding-right: var(--size-25); }
.tw-px-26  { padding-left: var(--size-26); padding-right: var(--size-26); }
.tw-px-27  { padding-left: var(--size-27); padding-right: var(--size-27); }
.tw-px-28  { padding-left: var(--size-28); padding-right: var(--size-28); }
.tw-px-29  { padding-left: var(--size-29); padding-right: var(--size-29); }
.tw-px-30  { padding-left: var(--size-30); padding-right: var(--size-30); }
.tw-px-31  { padding-left: var(--size-31); padding-right: var(--size-31); }
.tw-px-32  { padding-left: var(--size-32); padding-right: var(--size-32); }
.tw-px-33  { padding-left: var(--size-33); padding-right: var(--size-33); }
.tw-px-34  { padding-left: var(--size-34); padding-right: var(--size-34); }
.tw-px-35  { padding-left: var(--size-35); padding-right: var(--size-35); }
.tw-px-36  { padding-left: var(--size-36); padding-right: var(--size-36); }
.tw-px-37  { padding-left: var(--size-37); padding-right: var(--size-37); }
.tw-px-38  { padding-left: var(--size-38); padding-right: var(--size-38); }
.tw-px-39  { padding-left: var(--size-39); padding-right: var(--size-39); }
.tw-px-40  { padding-left: var(--size-40); padding-right: var(--size-40); }
.tw-px-41  { padding-left: var(--size-41); padding-right: var(--size-41); }
.tw-px-42  { padding-left: var(--size-42); padding-right: var(--size-42); }
.tw-px-43  { padding-left: var(--size-43); padding-right: var(--size-43); }
.tw-px-44  { padding-left: var(--size-44); padding-right: var(--size-44); }
.tw-px-45  { padding-left: var(--size-45); padding-right: var(--size-45); }
.tw-px-46  { padding-left: var(--size-46); padding-right: var(--size-46); }
.tw-px-47  { padding-left: var(--size-47); padding-right: var(--size-47); }
.tw-px-48  { padding-left: var(--size-48); padding-right: var(--size-48); }
.tw-px-49  { padding-left: var(--size-49); padding-right: var(--size-49); }
.tw-px-50  { padding-left: var(--size-50); padding-right: var(--size-50); }
.tw-px-51  { padding-left: var(--size-51); padding-right: var(--size-51); }
.tw-px-52  { padding-left: var(--size-52); padding-right: var(--size-52); }
.tw-px-53  { padding-left: var(--size-53); padding-right: var(--size-53); }
.tw-px-54  { padding-left: var(--size-54); padding-right: var(--size-54); }
.tw-px-55  { padding-left: var(--size-55); padding-right: var(--size-55); }
.tw-px-56  { padding-left: var(--size-56); padding-right: var(--size-56); }
.tw-px-57  { padding-left: var(--size-57); padding-right: var(--size-57); }
.tw-px-58  { padding-left: var(--size-58); padding-right: var(--size-58); }
.tw-px-59  { padding-left: var(--size-59); padding-right: var(--size-59); }
.tw-px-60  { padding-left: var(--size-60); padding-right: var(--size-60); }
.tw-px-61  { padding-left: var(--size-61); padding-right: var(--size-61); }
.tw-px-62  { padding-left: var(--size-62); padding-right: var(--size-62); }


/* ---- Margin Top ---- */
.tw-mt-0   { margin-top: 0; }
.tw-mt-1   { margin-top: var(--size-1); }
.tw-mt-2   { margin-top: var(--size-2); }
.tw-mt-3   { margin-top: var(--size-3); }
.tw-mt-4   { margin-top: var(--size-4); }
.tw-mt-5   { margin-top: var(--size-5); }
.tw-mt-6   { margin-top: var(--size-6); }
.tw-mt-7   { margin-top: var(--size-7); }
.tw-mt-8   { margin-top: var(--size-8); }
.tw-mt-9   { margin-top: var(--size-9); }
.tw-mt-10  { margin-top: var(--size-10); }
.tw-mt-11  { margin-top: var(--size-11); }
.tw-mt-12  { margin-top: var(--size-12); }
.tw-mt-13  { margin-top: var(--size-13); }
.tw-mt-14  { margin-top: var(--size-14); }
.tw-mt-15  { margin-top: var(--size-15); }
.tw-mt-16  { margin-top: var(--size-16); }
.tw-mt-17  { margin-top: var(--size-17); }
.tw-mt-18  { margin-top: var(--size-18); }
.tw-mt-19  { margin-top: var(--size-19); }
.tw-mt-20  { margin-top: var(--size-20); }
.tw-mt-21  { margin-top: var(--size-21); }
.tw-mt-22  { margin-top: var(--size-22); }
.tw-mt-23  { margin-top: var(--size-23); }
.tw-mt-24  { margin-top: var(--size-24); }
.tw-mt-25  { margin-top: var(--size-25); }
.tw-mt-26  { margin-top: var(--size-26); }
.tw-mt-27  { margin-top: var(--size-27); }
.tw-mt-28  { margin-top: var(--size-28); }
.tw-mt-29  { margin-top: var(--size-29); }
.tw-mt-30  { margin-top: var(--size-30); }
.tw-mt-31  { margin-top: var(--size-31); }
.tw-mt-32  { margin-top: var(--size-32); }
.tw-mt-33  { margin-top: var(--size-33); }
.tw-mt-34  { margin-top: var(--size-34); }
.tw-mt-35  { margin-top: var(--size-35); }
.tw-mt-36  { margin-top: var(--size-36); }
.tw-mt-37  { margin-top: var(--size-37); }
.tw-mt-38  { margin-top: var(--size-38); }
.tw-mt-39  { margin-top: var(--size-39); }
.tw-mt-40  { margin-top: var(--size-40); }
.tw-mt-41  { margin-top: var(--size-41); }
.tw-mt-42  { margin-top: var(--size-42); }
.tw-mt-43  { margin-top: var(--size-43); }
.tw-mt-44  { margin-top: var(--size-44); }
.tw-mt-45  { margin-top: var(--size-45); }
.tw-mt-46  { margin-top: var(--size-46); }
.tw-mt-47  { margin-top: var(--size-47); }
.tw-mt-48  { margin-top: var(--size-48); }
.tw-mt-49  { margin-top: var(--size-49); }
.tw-mt-50  { margin-top: var(--size-50); }
.tw-mt-51  { margin-top: var(--size-51); }
.tw-mt-52  { margin-top: var(--size-52); }
.tw-mt-53  { margin-top: var(--size-53); }
.tw-mt-54  { margin-top: var(--size-54); }
.tw-mt-55  { margin-top: var(--size-55); }
.tw-mt-56  { margin-top: var(--size-56); }
.tw-mt-57  { margin-top: var(--size-57); }
.tw-mt-58  { margin-top: var(--size-58); }
.tw-mt-59  { margin-top: var(--size-59); }
.tw-mt-60  { margin-top: var(--size-60); }
.tw-mt-61  { margin-top: var(--size-61); }
.tw-mt-62  { margin-top: var(--size-62); }

/* ---- Margin Bottom ---- */
.tw-mb-0   { margin-bottom: 0; }
.tw-mb-1   { margin-bottom: var(--size-1); }
.tw-mb-2   { margin-bottom: var(--size-2); }
.tw-mb-3   { margin-bottom: var(--size-3); }
.tw-mb-4   { margin-bottom: var(--size-4); }
.tw-mb-5   { margin-bottom: var(--size-5); }
.tw-mb-6   { margin-bottom: var(--size-6); }
.tw-mb-7   { margin-bottom: var(--size-7); }
.tw-mb-8   { margin-bottom: var(--size-8); }
.tw-mb-9   { margin-bottom: var(--size-9); }
.tw-mb-10  { margin-bottom: var(--size-10); }
.tw-mb-11  { margin-bottom: var(--size-11); }
.tw-mb-12  { margin-bottom: var(--size-12); }
.tw-mb-13  { margin-bottom: var(--size-13); }
.tw-mb-14  { margin-bottom: var(--size-14); }
.tw-mb-15  { margin-bottom: var(--size-15); }
.tw-mb-16  { margin-bottom: var(--size-16); }
.tw-mb-17  { margin-bottom: var(--size-17); }
.tw-mb-18  { margin-bottom: var(--size-18); }
.tw-mb-19  { margin-bottom: var(--size-19); }
.tw-mb-20  { margin-bottom: var(--size-20); }
.tw-mb-21  { margin-bottom: var(--size-21); }
.tw-mb-22  { margin-bottom: var(--size-22); }
.tw-mb-23  { margin-bottom: var(--size-23); }
.tw-mb-24  { margin-bottom: var(--size-24); }
.tw-mb-25  { margin-bottom: var(--size-25); }
.tw-mb-26  { margin-bottom: var(--size-26); }
.tw-mb-27  { margin-bottom: var(--size-27); }
.tw-mb-28  { margin-bottom: var(--size-28); }
.tw-mb-29  { margin-bottom: var(--size-29); }
.tw-mb-30  { margin-bottom: var(--size-30); }
.tw-mb-31  { margin-bottom: var(--size-31); }
.tw-mb-32  { margin-bottom: var(--size-32); }
.tw-mb-33  { margin-bottom: var(--size-33); }
.tw-mb-34  { margin-bottom: var(--size-34); }
.tw-mb-35  { margin-bottom: var(--size-35); }
.tw-mb-36  { margin-bottom: var(--size-36); }
.tw-mb-37  { margin-bottom: var(--size-37); }
.tw-mb-38  { margin-bottom: var(--size-38); }
.tw-mb-39  { margin-bottom: var(--size-39); }
.tw-mb-40  { margin-bottom: var(--size-40); }
.tw-mb-41  { margin-bottom: var(--size-41); }
.tw-mb-42  { margin-bottom: var(--size-42); }
.tw-mb-43  { margin-bottom: var(--size-43); }
.tw-mb-44  { margin-bottom: var(--size-44); }
.tw-mb-45  { margin-bottom: var(--size-45); }
.tw-mb-46  { margin-bottom: var(--size-46); }
.tw-mb-47  { margin-bottom: var(--size-47); }
.tw-mb-48  { margin-bottom: var(--size-48); }
.tw-mb-49  { margin-bottom: var(--size-49); }
.tw-mb-50  { margin-bottom: var(--size-50); }
.tw-mb-51  { margin-bottom: var(--size-51); }
.tw-mb-52  { margin-bottom: var(--size-52); }
.tw-mb-53  { margin-bottom: var(--size-53); }
.tw-mb-54  { margin-bottom: var(--size-54); }
.tw-mb-55  { margin-bottom: var(--size-55); }
.tw-mb-56  { margin-bottom: var(--size-56); }
.tw-mb-57  { margin-bottom: var(--size-57); }
.tw-mb-58  { margin-bottom: var(--size-58); }
.tw-mb-59  { margin-bottom: var(--size-59); }
.tw-mb-60  { margin-bottom: var(--size-60); }
.tw-mb-61  { margin-bottom: var(--size-61); }
.tw-mb-62  { margin-bottom: var(--size-62); }

/* ---- Margin Start ---- */
.tw-ms-0   { margin-inline-start: 0; }
.tw-ms-1   { margin-inline-start: var(--size-1); }
.tw-ms-2   { margin-inline-start: var(--size-2); }
.tw-ms-3   { margin-inline-start: var(--size-3); }
.tw-ms-4   { margin-inline-start: var(--size-4); }
.tw-ms-5   { margin-inline-start: var(--size-5); }
.tw-ms-6   { margin-inline-start: var(--size-6); }
.tw-ms-7   { margin-inline-start: var(--size-7); }
.tw-ms-8   { margin-inline-start: var(--size-8); }
.tw-ms-9   { margin-inline-start: var(--size-9); }
.tw-ms-10  { margin-inline-start: var(--size-10); }
.tw-ms-11  { margin-inline-start: var(--size-11); }
.tw-ms-12  { margin-inline-start: var(--size-12); }
.tw-ms-13  { margin-inline-start: var(--size-13); }
.tw-ms-14  { margin-inline-start: var(--size-14); }
.tw-ms-15  { margin-inline-start: var(--size-15); }
.tw-ms-16  { margin-inline-start: var(--size-16); }
.tw-ms-17  { margin-inline-start: var(--size-17); }
.tw-ms-18  { margin-inline-start: var(--size-18); }
.tw-ms-19  { margin-inline-start: var(--size-19); }
.tw-ms-20  { margin-inline-start: var(--size-20); }
.tw-ms-21  { margin-inline-start: var(--size-21); }
.tw-ms-22  { margin-inline-start: var(--size-22); }
.tw-ms-23  { margin-inline-start: var(--size-23); }
.tw-ms-24  { margin-inline-start: var(--size-24); }
.tw-ms-25  { margin-inline-start: var(--size-25); }
.tw-ms-26  { margin-inline-start: var(--size-26); }
.tw-ms-27  { margin-inline-start: var(--size-27); }
.tw-ms-28  { margin-inline-start: var(--size-28); }
.tw-ms-29  { margin-inline-start: var(--size-29); }
.tw-ms-30  { margin-inline-start: var(--size-30); }
.tw-ms-31  { margin-inline-start: var(--size-31); }
.tw-ms-32  { margin-inline-start: var(--size-32); }
.tw-ms-33  { margin-inline-start: var(--size-33); }
.tw-ms-34  { margin-inline-start: var(--size-34); }
.tw-ms-35  { margin-inline-start: var(--size-35); }
.tw-ms-36  { margin-inline-start: var(--size-36); }
.tw-ms-37  { margin-inline-start: var(--size-37); }
.tw-ms-38  { margin-inline-start: var(--size-38); }
.tw-ms-39  { margin-inline-start: var(--size-39); }
.tw-ms-40  { margin-inline-start: var(--size-40); }
.tw-ms-41  { margin-inline-start: var(--size-41); }
.tw-ms-42  { margin-inline-start: var(--size-42); }
.tw-ms-43  { margin-inline-start: var(--size-43); }
.tw-ms-44  { margin-inline-start: var(--size-44); }
.tw-ms-45  { margin-inline-start: var(--size-45); }
.tw-ms-46  { margin-inline-start: var(--size-46); }
.tw-ms-47  { margin-inline-start: var(--size-47); }
.tw-ms-48  { margin-inline-start: var(--size-48); }
.tw-ms-49  { margin-inline-start: var(--size-49); }
.tw-ms-50  { margin-inline-start: var(--size-50); }
.tw-ms-51  { margin-inline-start: var(--size-51); }
.tw-ms-52  { margin-inline-start: var(--size-52); }
.tw-ms-53  { margin-inline-start: var(--size-53); }
.tw-ms-54  { margin-inline-start: var(--size-54); }
.tw-ms-55  { margin-inline-start: var(--size-55); }
.tw-ms-56  { margin-inline-start: var(--size-56); }
.tw-ms-57  { margin-inline-start: var(--size-57); }
.tw-ms-58  { margin-inline-start: var(--size-58); }
.tw-ms-59  { margin-inline-start: var(--size-59); }
.tw-ms-60  { margin-inline-start: var(--size-60); }
.tw-ms-61  { margin-inline-start: var(--size-61); }
.tw-ms-62  { margin-inline-start: var(--size-62); }

/* ---- Margin End ---- */
.tw-me-0   { margin-inline-end: 0; }
.tw-me-1   { margin-inline-end: var(--size-1); }
.tw-me-2   { margin-inline-end: var(--size-2); }
.tw-me-3   { margin-inline-end: var(--size-3); }
.tw-me-4   { margin-inline-end: var(--size-4); }
.tw-me-5   { margin-inline-end: var(--size-5); }
.tw-me-6   { margin-inline-end: var(--size-6); }
.tw-me-7   { margin-inline-end: var(--size-7); }
.tw-me-8   { margin-inline-end: var(--size-8); }
.tw-me-9   { margin-inline-end: var(--size-9); }
.tw-me-10  { margin-inline-end: var(--size-10); }
.tw-me-11  { margin-inline-end: var(--size-11); }
.tw-me-12  { margin-inline-end: var(--size-12); }
.tw-me-13  { margin-inline-end: var(--size-13); }
.tw-me-14  { margin-inline-end: var(--size-14); }
.tw-me-15  { margin-inline-end: var(--size-15); }
.tw-me-16  { margin-inline-end: var(--size-16); }
.tw-me-17  { margin-inline-end: var(--size-17); }
.tw-me-18  { margin-inline-end: var(--size-18); }
.tw-me-19  { margin-inline-end: var(--size-19); }
.tw-me-20  { margin-inline-end: var(--size-20); }
.tw-me-21  { margin-inline-end: var(--size-21); }
.tw-me-22  { margin-inline-end: var(--size-22); }
.tw-me-23  { margin-inline-end: var(--size-23); }
.tw-me-24  { margin-inline-end: var(--size-24); }
.tw-me-25  { margin-inline-end: var(--size-25); }
.tw-me-26  { margin-inline-end: var(--size-26); }
.tw-me-27  { margin-inline-end: var(--size-27); }
.tw-me-28  { margin-inline-end: var(--size-28); }
.tw-me-29  { margin-inline-end: var(--size-29); }
.tw-me-30  { margin-inline-end: var(--size-30); }
.tw-me-31  { margin-inline-end: var(--size-31); }
.tw-me-32  { margin-inline-end: var(--size-32); }
.tw-me-33  { margin-inline-end: var(--size-33); }
.tw-me-34  { margin-inline-end: var(--size-34); }
.tw-me-35  { margin-inline-end: var(--size-35); }
.tw-me-36  { margin-inline-end: var(--size-36); }
.tw-me-37  { margin-inline-end: var(--size-37); }
.tw-me-38  { margin-inline-end: var(--size-38); }
.tw-me-39  { margin-inline-end: var(--size-39); }
.tw-me-40  { margin-inline-end: var(--size-40); }
.tw-me-41  { margin-inline-end: var(--size-41); }
.tw-me-42  { margin-inline-end: var(--size-42); }
.tw-me-43  { margin-inline-end: var(--size-43); }
.tw-me-44  { margin-inline-end: var(--size-44); }
.tw-me-45  { margin-inline-end: var(--size-45); }
.tw-me-46  { margin-inline-end: var(--size-46); }
.tw-me-47  { margin-inline-end: var(--size-47); }
.tw-me-48  { margin-inline-end: var(--size-48); }
.tw-me-49  { margin-inline-end: var(--size-49); }
.tw-me-50  { margin-inline-end: var(--size-50); }
.tw-me-51  { margin-inline-end: var(--size-51); }
.tw-me-52  { margin-inline-end: var(--size-52); }
.tw-me-53  { margin-inline-end: var(--size-53); }
.tw-me-54  { margin-inline-end: var(--size-54); }
.tw-me-55  { margin-inline-end: var(--size-55); }
.tw-me-56  { margin-inline-end: var(--size-56); }
.tw-me-57  { margin-inline-end: var(--size-57); }
.tw-me-58  { margin-inline-end: var(--size-58); }
.tw-me-59  { margin-inline-end: var(--size-59); }
.tw-me-60  { margin-inline-end: var(--size-60); }
.tw-me-61  { margin-inline-end: var(--size-61); }
.tw-me-62  { margin-inline-end: var(--size-62); }


/* ---- Font Size Classes ---- */
.tw-text-xs   { font-size: var(--fs-xs); }
.tw-text-sm   { font-size: var(--fs-sm); }
.tw-text-base { font-size: var(--fs-base); }
.tw-text-md   { font-size: var(--fs-md); }
.tw-text-lg   { font-size: var(--fs-lg); }
.tw-text-xl   { font-size: var(--fs-xl); }
.tw-text-2xl  { font-size: var(--fs-2xl); }
.tw-text-3xl  { font-size: var(--fs-3xl); }
.tw-text-4xl  { font-size: var(--fs-4xl); }
.tw-text-5xl  { font-size: var(--fs-5xl); }
.tw-text-6xl  { font-size: var(--fs-6xl); }
.tw-text-7xl  { font-size: var(--fs-7xl); }
.tw-text-8xl  { font-size: var(--fs-8xl); }

.tw-text-1   { font-size: var(--size-1); }
.tw-text-2   { font-size: var(--size-2); }
.tw-text-3   { font-size: var(--size-3); }
.tw-text-4   { font-size: var(--size-4); }
.tw-text-5   { font-size: var(--size-5); }
.tw-text-6   { font-size: var(--size-6); }
.tw-text-7   { font-size: var(--size-7); }
.tw-text-8   { font-size: var(--size-8); }
.tw-text-9   { font-size: var(--size-9); }
.tw-text-10  { font-size: var(--size-10); }
.tw-text-11  { font-size: var(--size-11); }
.tw-text-12  { font-size: var(--size-12); }
.tw-text-13  { font-size: var(--size-13); }
.tw-text-14  { font-size: var(--size-14); }
.tw-text-15  { font-size: var(--size-15); }
.tw-text-16  { font-size: var(--size-16); }
.tw-text-17  { font-size: var(--size-17); }
.tw-text-18  { font-size: var(--size-18); }
.tw-text-19  { font-size: var(--size-19); }
.tw-text-20  { font-size: var(--size-20); }
.tw-text-21  { font-size: var(--size-21); }
.tw-text-22  { font-size: var(--size-22); }
.tw-text-23  { font-size: var(--size-23); }
.tw-text-24  { font-size: var(--size-24); }
.tw-text-25  { font-size: var(--size-25); }
.tw-text-26  { font-size: var(--size-26); }
.tw-text-27  { font-size: var(--size-27); }
.tw-text-28  { font-size: var(--size-28); }
.tw-text-29  { font-size: var(--size-29); }
.tw-text-30  { font-size: var(--size-30); }
.tw-text-31  { font-size: var(--size-31); }
.tw-text-32  { font-size: var(--size-32); }
.tw-text-33  { font-size: var(--size-33); }
.tw-text-34  { font-size: var(--size-34); }
.tw-text-35  { font-size: var(--size-35); }
.tw-text-36  { font-size: var(--size-36); }
.tw-text-37  { font-size: var(--size-37); }
.tw-text-38  { font-size: var(--size-38); }
.tw-text-39  { font-size: var(--size-39); }
.tw-text-40  { font-size: var(--size-40); }
.tw-text-41  { font-size: var(--size-41); }
.tw-text-42  { font-size: var(--size-42); }
.tw-text-43  { font-size: var(--size-43); }
.tw-text-44  { font-size: var(--size-44); }
.tw-text-45  { font-size: var(--size-45); }
.tw-text-46  { font-size: var(--size-46); }
.tw-text-47  { font-size: var(--size-47); }
.tw-text-48  { font-size: var(--size-48); }
.tw-text-49  { font-size: var(--size-49); }
.tw-text-50  { font-size: var(--size-50); }
.tw-text-51  { font-size: var(--size-51); }
.tw-text-52  { font-size: var(--size-52); }
.tw-text-53  { font-size: var(--size-53); }
.tw-text-54  { font-size: var(--size-54); }
.tw-text-55  { font-size: var(--size-55); }
.tw-text-56  { font-size: var(--size-56); }
.tw-text-57  { font-size: var(--size-57); }
.tw-text-58  { font-size: var(--size-58); }
.tw-text-59  { font-size: var(--size-59); }
.tw-text-60  { font-size: var(--size-60); }
.tw-text-61  { font-size: var(--size-61); }
.tw-text-62  { font-size: var(--size-62); }

/* ---- Gap Classes ---- */
.tw-gap-0  { gap: 0; }
.tw-gap-1  { gap: 0.25rem; }
.tw-gap-2  { gap: 0.5rem; }
.tw-gap-3  { gap: 0.75rem; }
.tw-gap-4  { gap: 1rem; }
.tw-gap-5  { gap: 1.25rem; }
.tw-gap-6  { gap: 1.5rem; }
.tw-gap-7  { gap: 1.75rem; }
.tw-gap-8  { gap: 2rem; }
.tw-gap-9  { gap: 2.25rem; }
.tw-gap-10 { gap: 2.5rem; }
.tw-gap-11 { gap: 2.75rem; }
.tw-gap-12 { gap: 3rem; }
.tw-gap-13 { gap: 3.25rem; }
.tw-gap-14 { gap: 3.5rem; }
.tw-gap-15 { gap: 3.75rem; }
.tw-gap-16 { gap: 4rem; }

/* ---- Z-Index Classes ---- */
.tw-z-0    { z-index: 0; }
.tw-z-1    { z-index: 1; }
.tw-z-2    { z-index: 2; }
.tw-z-3    { z-index: 3; }
.tw-z-4    { z-index: 4; }
.tw-z-5    { z-index: 5; }
.tw-z-10   { z-index: 10; }
.tw-z-20   { z-index: 20; }
.tw-z-30   { z-index: 30; }
.tw-z-40   { z-index: 40; }
.tw-z-50   { z-index: 50; }
.tw-z-99   { z-index: 99; }
.tw-z-999  { z-index: 999; }
.tw-z-9999 { z-index: 9999; }

/* ---- Position Classes ---- */
.tw-relative   { position: relative; }
.tw-absolute   { position: absolute; }
.tw-fixed      { position: fixed; }
.tw-sticky     { position: sticky; }
.tw-top-0      { top: 0; }
.tw-bottom-0   { bottom: 0; }
.tw-start-0    { left: 0; }
.tw-end-0      { right: 0; }
.tw-top-50     { top: 50%; }
.tw-start-50   { left: 50%; }

/* ---- Opacity Classes ---- */
.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ---- Overflow Classes ---- */
.overflow-hidden { overflow: hidden; }
.overflow-auto  { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }


/* ---- Line Clamp ---- */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Transform Classes ---- */
.rotate-0    { transform: rotate(0deg); }
.rotate-45   { transform: rotate(45deg); }
.rotate-90   { transform: rotate(90deg); }
.rotate-180  { transform: rotate(180deg); }
.rotate-270  { transform: rotate(270deg); }

.scale-75    { transform: scale(0.75); }
.scale-90    { transform: scale(0.9); }
.scale-100   { transform: scale(1); }
.scale-110   { transform: scale(1.1); }
.scale-125   { transform: scale(1.25); }

.translate-x-center { transform: translateX(-50%); }
.translate-y-center { transform: translateY(-50%); }
.translate-center   { transform: translate(-50%, -50%); }

/* ---- Transition / Duration Classes ---- */
.tw-transition-all    { transition: all var(--transition-base); }
.tw-transition-color  { transition: color var(--transition-base); }
.tw-transition-bg     { transition: background-color var(--transition-base); }
.tw-transition-transform { transition: transform var(--transition-base); }
.tw-transition-opacity   { transition: opacity var(--transition-base); }

.tw-duration-100  { transition-duration: 0.1s; }
.tw-duration-150  { transition-duration: 0.15s; }
.tw-duration-200  { transition-duration: 0.2s; }
.tw-duration-300  { transition-duration: 0.3s; }
.tw-duration-500  { transition-duration: 0.5s; }
.tw-duration-700  { transition-duration: 0.7s; }
.tw-duration-1000 { transition-duration: 1s; }

/* ---- Border Radius Classes ---- */
.tw-rounded    { border-radius: 0.25rem; }
.tw-rounded-sm { border-radius: 0.125rem; }
.tw-rounded-md { border-radius: 0.375rem; }
.tw-rounded-lg { border-radius: 0.5rem; }
.tw-rounded-xl { border-radius: 0.75rem; }
.tw-rounded-2xl { border-radius: 1rem; }
.tw-rounded-3xl { border-radius: 1.5rem; }
.rounded-circle { border-radius: 50%; }
.tw-rounded-full { border-radius: 9999px; }
.tw-rounded-0 { border-radius: 0; }

/* ---- Object Fit ---- */
.object-fit-cover   { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.object-fit-fill    { object-fit: fill; }
.object-fit-none    { object-fit: none; }


/* ---- Display Utility Classes ---- */
.tw-d-none        { display: none; }
.tw-d-block       { display: block; }
.tw-d-inline      { display: inline; }
.tw-d-inline-block { display: inline-block; }
.tw-d-flex        { display: flex; }
.tw-d-inline-flex { display: inline-flex; }
.tw-d-grid        { display: grid; }
.tw-d-table       { display: table; }

.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }
.flex-column      { flex-direction: column; }
.flex-row         { flex-direction: row; }
.flex-grow-1      { flex-grow: 1; }
.flex-shrink-0    { flex-shrink: 0; }

.tw-items-start    { align-items: flex-start; }
.tw-items-center   { align-items: center; }
.tw-items-end      { align-items: flex-end; }
.tw-items-stretch  { align-items: stretch; }

.tw-justify-start  { justify-content: flex-start; }
.tw-justify-center { justify-content: center; }
.tw-justify-end    { justify-content: flex-end; }
.tw-justify-between { justify-content: space-between; }
.tw-justify-around { justify-content: space-around; }

.tw-self-start   { align-self: flex-start; }
.tw-self-center  { align-self: center; }
.tw-self-end     { align-self: flex-end; }
.tw-self-stretch { align-self: stretch; }

.tw-text-start   { text-align: left; }
.tw-text-center  { text-align: center; }
.tw-text-end     { text-align: right; }

.tw-fw-normal    { font-weight: 400; }
.tw-fw-medium    { font-weight: 500; }
.tw-fw-semibold  { font-weight: 600; }
.tw-fw-bold      { font-weight: 700; }

.tw-uppercase    { text-transform: uppercase; }
.tw-lowercase    { text-transform: lowercase; }
.tw-capitalize   { text-transform: capitalize; }
.tw-italic       { font-style: italic; }

.tw-container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.tw-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}


/* ============================================================
   4.  PRELOADER
   ============================================================ */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--heading-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-screen.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen .loader-logo {
  margin-bottom: 30px;
  animation: loaderSpin 1.2s ease-in-out infinite;
}

.loading-screen .loader-logo img {
  width: 80px;
  height: auto;
}

.loading-screen .loader-bars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.loading-screen .loader-bars span {
  width: 6px;
  height: 20px;
  background-color: var(--main-color);
  border-radius: 3px;
  animation: loaderBar 1s ease-in-out infinite;
}

.loading-screen .loader-bars span:nth-child(2) {
  animation-delay: 0.1s;
  height: 30px;
}

.loading-screen .loader-bars span:nth-child(3) {
  animation-delay: 0.2s;
  height: 40px;
}

.loading-screen .loader-bars span:nth-child(4) {
  animation-delay: 0.3s;
  height: 30px;
}

.loading-screen .loader-bars span:nth-child(5) {
  animation-delay: 0.4s;
  height: 20px;
}

.txt-loading {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--white);
  letter-spacing: 6px;
  text-transform: uppercase;
}

.txt-loading span {
  display: inline-block;
  animation: txtLoader 1.5s ease-in-out infinite;
}

.txt-loading span:nth-child(2) { animation-delay: 0.1s; }
.txt-loading span:nth-child(3) { animation-delay: 0.2s; }
.txt-loading span:nth-child(4) { animation-delay: 0.3s; }
.txt-loading span:nth-child(5) { animation-delay: 0.4s; }
.txt-loading span:nth-child(6) { animation-delay: 0.5s; }
.txt-loading span:nth-child(7) { animation-delay: 0.6s; }
.txt-loading span:nth-child(8) { animation-delay: 0.7s; }
.txt-loading span:nth-child(9) { animation-delay: 0.8s; }
.txt-loading span:nth-child(10) { animation-delay: 0.9s; }
.txt-loading span:nth-child(11) { animation-delay: 1s; }
.txt-loading span:nth-child(12) { animation-delay: 1.1s; }
.txt-loading span:nth-child(13) { animation-delay: 1.2s; }

.loading-counter {
  position: absolute;
  bottom: 40px;
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  color: var(--main-color);
  letter-spacing: 2px;
}

/* Alternate preloader structure (animation-preloader) */
.loading-screen .animation-preloader {
  position: relative;
  z-index: 1;
  text-align: center;
}

.loading-screen .loader-border {
  width: 100px;
  height: 100px;
  border: 3px solid transparent;
  border-top-color: var(--main-color);
  border-radius: 50%;
  animation: loaderSpin 0.8s linear infinite;
  margin: 0 auto;
}

.loading-screen .letters-loading {
  display: inline-block;
  animation: txtLoader 1.5s ease-in-out infinite;
  color: var(--white);
  font-family: var(--font-heading);
}

.loading-screen .letters-loading:nth-child(2) { animation-delay: 0.1s; }
.loading-screen .letters-loading:nth-child(3) { animation-delay: 0.2s; }
.loading-screen .letters-loading:nth-child(4) { animation-delay: 0.3s; }
.loading-screen .letters-loading:nth-child(5) { animation-delay: 0.4s; }
.loading-screen .letters-loading:nth-child(6) { animation-delay: 0.5s; }
.loading-screen .letters-loading:nth-child(7) { animation-delay: 0.6s; }

.loading-screen .bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--main-color);
  z-index: 100000;
  transition: width 0.5s ease;
}

.loading-screen .top-bar {
  top: 0;
}

.loading-screen .down-bar {
  bottom: 0;
}

.loading-screen .tw-preloader-counter {
  margin-top: 15px;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--main-color);
}

.loading-screen .tw-preloader .loader-bars {
  display: flex;
  gap: 6px;
  margin: 20px 0;
}


/* ============================================================
   5.  HEADER
   ============================================================ */
.header {
  position: absolute;
  width: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: auto;
  z-index: 99;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
}

.header-transparent {
  background: transparent;
}

.header-transparent.fixed-header {
  position: fixed !important;
  inset-block-start: 0;
  backdrop-filter: blur(24px);
  animation: slideDown 0.35s ease-out;
  background: hsl(209, 49%, 10%);
  border-bottom: 1px solid hsl(209, 49%, 10%);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.header .header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header .logo .main-logo {
  display: block;
  transition: opacity var(--transition-base);
}

.header .logo .main-logo img {
  max-height: 50px;
  width: auto;
}

.header .logo .sticky-logo {
  display: none;
  transition: opacity var(--transition-base);
}

.header .logo .sticky-logo img {
  max-height: 50px;
  width: auto;
}

.fixed-header {
  padding: 10px 0;
}

.fixed-header .logo .main-logo {
  display: none;
}

.fixed-header .logo .sticky-logo {
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-menu > ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-menu > ul > li {
  position: relative;
  padding: 0;
}

.nav-menu > ul > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 0;
  padding-inline-end: 24px;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color var(--transition-base);
}

.nav-menu > ul > li > a:hover,
.nav-menu > ul > li.active > a,
.nav-menu > ul > li.activePage > a {
  color: var(--main-color) !important;
}

.has-submenu {
  position: relative;
}

.has-submenu > a::after {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: 52%;
  transform: translateY(-50%);
  content: "\e136";
  font-family: "Phosphor";
  font-weight: 400;
  font-size: 13px;
  color: var(--white);
  transition: 0.2s linear;
}

.has-submenu:hover > a::after {
  color: var(--main-color);
  transform: translateY(-50%) rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background-color: var(--white);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.102), 0 4px 6px -4px rgba(0,0,0,0.102);
  border-radius: 8px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transition: 0.4s ease;
  transform-origin: top center;
  z-index: 100;
}

.has-submenu:hover > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.nav-submenu li {
  position: relative;
}

.nav-submenu li a {
  position: relative;
  display: block;
  padding: 8px 24px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--heading-color);
  transition: all 0.4s ease-in-out;
}

.nav-submenu li a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--main-color);
  left: -2px;
  bottom: 18px;
  transition: all 0.4s ease-in-out;
}

.nav-submenu li a:hover {
  color: var(--main-color);
  margin-inline-start: 10px;
}

.nav-submenu li a:hover::before {
  width: 10px;
}

.nav-submenu li.activePage a {
  color: var(--main-color) !important;
  margin-inline-start: 10px;
}

.nav-submenu li.activePage a::before {
  width: 10px;
}

.nav-submenu .has-submenu > .nav-submenu {
  top: 0;
  left: 100%;
  margin-left: 4px;
}

.nav-submenu .has-submenu > a::after {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  content: "\e13a";
  font-family: "Phosphor";
  font-weight: 400;
}

.nav-submenu .has-submenu:hover > a::after {
  transform: translateY(-50%) rotate(0);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 90vw;
  max-width: 1100px;
  background-color: var(--white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  z-index: 100;
}

.has-submenu:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu .mega-col h4 {
  font-size: var(--fs-lg);
  margin-bottom: 15px;
  color: var(--heading-color);
}

.mega-menu .mega-col ul li a {
  display: block;
  padding: 6px 0;
  font-size: var(--fs-base);
  color: var(--body-color);
  transition: color var(--transition-fast);
}

.mega-menu .mega-col ul li a:hover {
  color: var(--main-color);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right .search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: var(--fs-md);
  transition: all var(--transition-base);
}

.header-right .search-trigger:hover {
  background: var(--main-color);
  color: var(--white);
}

.header-right .header-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: var(--main-color);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 6px;
  transition: all var(--transition-base);
}

.header-right .header-btn:hover {
  background: var(--main-600);
  color: var(--white);
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  background: none;
  border: none;
}

.mobile-menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--white);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.fixed-header .mobile-menu-toggle span {
  background-color: var(--white);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   6.  MOBILE MENU
   ============================================================ */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100vh;
  background-color: var(--heading-color);
  z-index: 9999;
  padding: 30px 20px;
  overflow-y: auto;
  transition: left var(--transition-cubic);
}

.mobile-menu.open {
  left: 0;
}

.mobile-menu .mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu .mobile-menu-header .mobile-logo img {
  max-height: 40px;
}

.mobile-menu .mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: all var(--transition-base);
}

.mobile-menu .mobile-menu-close:hover {
  background: var(--main-color);
}

.mobile-menu .mobile-nav-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-menu .mobile-nav-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: var(--neutral-200);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color var(--transition-fast);
}

.mobile-menu .mobile-nav-list li a:hover {
  color: var(--main-color);
}

.mobile-menu .mobile-nav-list li .submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--neutral-300);
  transition: transform var(--transition-fast);
}

.mobile-menu .mobile-nav-list li .submenu-toggle.open {
  transform: rotate(90deg);
}

.mobile-menu .mobile-nav-list .mobile-submenu {
  display: none;
  padding-left: 16px;
}

.mobile-menu .mobile-nav-list .mobile-submenu.open {
  display: block;
}

.mobile-menu .mobile-nav-list .mobile-submenu li a {
  font-size: var(--fs-sm);
  padding: 8px 0;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   7.  SEARCH POPUP
   ============================================================ */
.search-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}

.search-popup.open {
  opacity: 1;
  visibility: visible;
}

.search-popup .search-close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--fs-xl);
  cursor: pointer;
  transition: all var(--transition-base);
}

.search-popup .search-close:hover {
  background: var(--main-color);
}

.search-popup .search-form {
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
  transform: translateY(30px);
  transition: transform var(--transition-slow);
}

.search-popup.open .search-form {
  transform: translateY(0);
}

.search-popup .search-form .search-input-wrapper {
  position: relative;
}

.search-popup .search-form input {
  width: 100%;
  padding: 20px 60px 20px 24px;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: var(--fs-2xl);
  font-family: var(--font-body);
  transition: border-color var(--transition-base);
}

.search-popup .search-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.search-popup .search-form input:focus {
  border-color: var(--main-color);
}

.search-popup .search-form button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--white);
  font-size: var(--fs-2xl);
  cursor: pointer;
  padding: 10px;
  transition: color var(--transition-base);
}

.search-popup .search-form button:hover {
  color: var(--main-color);
}

/* ============================================================
   8.  OFF-CANVAS SIDEBAR
   ============================================================ */
.offcanvas-sidebar {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  background-color: var(--white);
  z-index: 99999;
  padding: 40px 30px;
  overflow-y: auto;
  transition: right var(--transition-cubic);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}

.offcanvas-sidebar.open {
  right: 0;
}

.offcanvas-sidebar .offcanvas-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--heading-color);
  font-size: var(--fs-lg);
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 30px;
  transition: all var(--transition-base);
}

.offcanvas-sidebar .offcanvas-close:hover {
  background: var(--main-color);
  color: var(--white);
}

.offcanvas-sidebar .offcanvas-logo {
  margin-bottom: 30px;
}

.offcanvas-sidebar .offcanvas-logo img {
  max-height: 50px;
}

.offcanvas-sidebar .offcanvas-about {
  margin-bottom: 30px;
  color: var(--body-color);
  font-size: var(--fs-base);
  line-height: 1.8;
}

.offcanvas-sidebar .offcanvas-contact {
  margin-bottom: 30px;
}

.offcanvas-sidebar .offcanvas-contact h4 {
  font-size: var(--fs-lg);
  margin-bottom: 15px;
  color: var(--heading-color);
}

.offcanvas-sidebar .offcanvas-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: var(--fs-base);
  color: var(--body-color);
}

.offcanvas-sidebar .offcanvas-contact .contact-item i {
  color: var(--main-color);
  margin-top: 4px;
  width: 16px;
}

.offcanvas-sidebar .offcanvas-social {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.offcanvas-sidebar .offcanvas-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--body-color);
  font-size: var(--fs-md);
  transition: all var(--transition-base);
}

.offcanvas-sidebar .offcanvas-social a:hover {
  background: var(--main-color);
  color: var(--white);
}

.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}


/* ============================================================
   9.  HERO / BANNER
   ============================================================ */
.banner-area {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 10, 30, 0.85) 0%, rgba(10, 10, 30, 0.4) 100%);
  z-index: 1;
}

.banner-area .banner-wrapper {
  position: relative;
  width: 100%;
  padding: 120px 0;
}

.banner-area .banner-content {
  max-width: 600px;
}

.banner-area .banner-content.banner-right {
  margin-left: auto;
}

.banner-area .banner-subtitle {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 15px;
  padding: 6px 20px;
  border: 1px solid var(--main-color);
  border-radius: 4px;
}

.banner-area .banner-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.banner-area .banner-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(40deg);
  animation: charReveal 0.6s ease forwards;
}

.banner-area .banner-text {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 30px;
  max-width: 520px;
  line-height: 1.8;
}

.banner-area .banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.banner-area .banner-image {
  position: relative;
  z-index: 2;
}

.banner-area .banner-image img {
  width: 100%;
  max-width: 600px;
  animation: float 6s ease-in-out infinite;
}

.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.hero-slider .swiper-wrapper {
  height: 100%;
}

.hero-slider .swiper-slide {
  height: auto;
  display: flex;
  align-items: center;
}

.hero-pagination {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.hero-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  opacity: 1;
  transition: all var(--transition-base);
}

.hero-pagination .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 6px;
  background: var(--main-color);
  border-color: var(--main-color);
}

.hero-button-prev {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.hero-button-next {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.hero-button-prev,
.hero-button-next {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  pointer-events: auto;
  transition: all var(--transition-base);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 10;
}

.hero-button-prev:hover,
.hero-button-next:hover {
  background: var(--main-color);
  border-color: var(--main-color);
  color: var(--white);
}

.banner-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}


/* ============================================================
   10.  BUTTONS
   ============================================================ */
.tw-hover-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--white);
  background: var(--main-color);
  border: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: color var(--transition-base);
  z-index: 1;
}

.tw-hover-btn::before {
  content: "";
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 0;
  height: 0;
  background: var(--main-700);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: -1;
}

.tw-hover-btn:hover::before {
  width: 400px;
  height: 400px;
}

.tw-hover-btn:hover {
  color: var(--white);
}

.tw-btn-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--main-color);
  color: var(--white);
  font-size: var(--fs-lg);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition-base);
  z-index: 1;
}

.tw-btn-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--main-700);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: -1;
}

.tw-btn-circle:hover::before {
  width: 200px;
  height: 200px;
}

.tw-btn-circle:hover {
  color: var(--white);
  transform: rotate(45deg);
}

.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--main-color);
  color: var(--white);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  border: none;
  box-shadow: 0 4px 20px rgba(232, 100, 44, 0.3);
}

.back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background: var(--main-600);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(232, 100, 44, 0.4);
}


/* ============================================================
   11.  SECTION STYLES
   ============================================================ */
.py-120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section-subtitle {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 10px;
}

.section-subtitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--main-color);
  border-radius: 2px;
}

.text-center .section-subtitle::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--heading-color);
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.15;
}

.section-desc {
  font-size: var(--fs-md);
  color: var(--body-color);
  max-width: 600px;
  line-height: 1.8;
}

.text-center .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.about-area {
  position: relative;
  overflow: hidden;
}

.about-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
}

.about-image .about-experience {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--main-color);
  color: var(--white);
  padding: 24px 30px;
  border-radius: 12px;
  text-align: center;
}

.about-image .about-experience .number {
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  line-height: 1;
}

.about-image .about-experience .text {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-content .about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.about-content .about-features .feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-base);
  color: var(--heading-color);
}

.about-content .about-features .feature-item i {
  color: var(--main-color);
  font-size: var(--fs-lg);
}


/* ============================================================
   12.  CARDS & GRID
   ============================================================ */

.service-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  transition: all var(--transition-base);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  z-index: 1;
}

.service-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--main-color);
  transition: height var(--transition-cubic);
  z-index: -1;
}

.service-card:hover::before {
  height: 100%;
}

.service-card .service-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: var(--main-50);
  border-radius: 50%;
  font-size: var(--fs-4xl);
  color: var(--main-color);
  transition: all var(--transition-base);
}

.service-card:hover .service-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.service-card .service-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--heading-color);
  margin-bottom: 12px;
  text-transform: uppercase;
  transition: color var(--transition-base);
}

.service-card:hover .service-title {
  color: var(--white);
}

.service-card .service-text {
  font-size: var(--fs-base);
  color: var(--body-color);
  line-height: 1.7;
  transition: color var(--transition-base);
}

.service-card:hover .service-text {
  color: rgba(255, 255, 255, 0.85);
}

.service-card .service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--fs-base);
  color: var(--main-color);
  transition: all var(--transition-base);
}

.service-card:hover .service-link {
  color: var(--white);
}

.team-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.team-card .team-image {
  position: relative;
  overflow: hidden;
}

.team-card .team-image img {
  width: 100%;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-image img {
  transform: scale(1.08);
}

.team-card .team-image .team-social {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  transition: bottom var(--transition-base);
}

.team-card:hover .team-image .team-social {
  bottom: 0;
}

.team-card .team-image .team-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: var(--fs-sm);
  transition: all var(--transition-base);
}

.team-card .team-image .team-social a:hover {
  background: var(--main-color);
}

.team-card .team-info {
  padding: 20px 24px;
  text-align: center;
}

.team-card .team-info .team-name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--heading-color);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.team-card .team-info .team-role {
  font-size: var(--fs-sm);
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.blog-card .blog-image {
  position: relative;
  overflow: hidden;
}

.blog-card .blog-image img {
  width: 100%;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-image img {
  transform: scale(1.08);
}

.blog-card .blog-image .blog-date {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--main-color);
  color: var(--white);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-card .blog-content {
  padding: 24px;
}

.blog-card .blog-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: var(--fs-xs);
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-card .blog-meta a {
  color: var(--neutral-400);
}

.blog-card .blog-meta a:hover {
  color: var(--main-color);
}

.blog-card .blog-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--heading-color);
  margin-bottom: 10px;
  text-transform: uppercase;
  transition: color var(--transition-base);
}

.blog-card .blog-title a {
  color: var(--heading-color);
}

.blog-card .blog-title a:hover {
  color: var(--main-color);
}

.blog-card .blog-text {
  font-size: var(--fs-base);
  color: var(--body-color);
  line-height: 1.7;
  margin-bottom: 16px;
}

.blog-card .blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: gap var(--transition-fast);
}

.blog-card .blog-link:hover {
  gap: 12px;
}

.event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
  align-items: center;
}

.event-card:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

.event-card .event-date {
  text-align: center;
  background: var(--main-50);
  padding: 16px 20px;
  border-radius: 10px;
  min-width: 80px;
}

.event-card .event-date .date-day {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  color: var(--main-color);
  line-height: 1;
}

.event-card .event-date .date-month {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.event-card .event-info .event-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--heading-color);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.event-card .event-info .event-title a {
  color: var(--heading-color);
}

.event-card .event-info .event-title a:hover {
  color: var(--main-color);
}

.event-card .event-info .event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--fs-sm);
  color: var(--neutral-400);
}

.event-card .event-info .event-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-card .event-info .event-meta i {
  color: var(--main-color);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}


/* ============================================================
   13.  COUNTER / ODOMETER
   ============================================================ */
.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
  display: block;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
  display: block;
  -webkit-backface-visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
  transition: transform 2s;
}

.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
  transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
  transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  transition: transform 2s;
  transform: translateY(0);
}

.counter-item {
  text-align: center;
  padding: 30px;
}

.counter-item .counter-number {
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  color: var(--main-color);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-item .counter-icon {
  font-size: var(--fs-4xl);
  color: var(--main-300);
  margin-bottom: 10px;
}

.counter-item .counter-label {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
}

/* ============================================================
   14.  TESTIMONIALS
   ============================================================ */
.testimonial-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.testimonial-card .testimonial-quote {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: var(--fs-6xl);
  color: var(--main-50);
  line-height: 1;
  font-family: Georgia, serif;
}

.testimonial-card .testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  color: #f59e0b;
  font-size: var(--fs-sm);
}

.testimonial-card .testimonial-text {
  font-size: var(--fs-base);
  color: var(--body-color);
  line-height: 1.8;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-card .testimonial-author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card .testimonial-author .author-name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--heading-color);
  text-transform: uppercase;
}

.testimonial-card .testimonial-author .author-role {
  font-size: var(--fs-xs);
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================================
   15.  CONTACT FORM
   ============================================================ */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  color: var(--heading-color);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-group .form-control {
  width: 100%;
  padding: 14px 18px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  font-size: var(--fs-base);
  color: var(--body-color);
  transition: all var(--transition-base);
  font-family: var(--font-body);
}

.form-group .form-control::placeholder {
  color: var(--neutral-400);
}

.form-group .form-control:focus {
  border-color: var(--main-color);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(232, 100, 44, 0.1);
}

.form-group textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.form-group select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-group .form-control.error {
  border-color: #dc2626;
}

.form-group .error-message {
  font-size: var(--fs-xs);
  color: #dc2626;
  margin-top: 4px;
}

.form-submit {
  padding: 14px 40px;
  background: var(--main-color);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-base);
}

.form-submit:hover {
  background: var(--main-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 100, 44, 0.3);
}


/* ============================================================
   16.  FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--heading-color);
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.footer .footer-top {
  padding: 80px 0 40px;
}

.footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
}

.footer .footer-col .footer-logo {
  margin-bottom: 20px;
}

.footer .footer-col .footer-logo img {
  max-height: 50px;
}

.footer .footer-col .footer-about {
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: 20px;
}

.footer .footer-col .footer-social {
  display: flex;
  gap: 10px;
}

.footer .footer-col .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-md);
  transition: all var(--transition-base);
}

.footer .footer-col .footer-social a:hover {
  background: var(--main-color);
  color: var(--white);
}

.footer .footer-col .footer-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.footer .footer-col .footer-links li {
  margin-bottom: 10px;
}

.footer .footer-col .footer-links li a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.6);
  transition: all var(--transition-fast);
}

.footer .footer-col .footer-links li a:hover {
  color: var(--main-color);
  padding-left: 6px;
}

.footer .footer-col .footer-contact li {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.footer .footer-col .footer-contact li i {
  color: var(--main-color);
  margin-top: 4px;
  min-width: 16px;
}

.footer .footer-col .footer-newsletter p {
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: 16px;
}

.footer .footer-col .newsletter-form {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
}

.footer .footer-col .newsletter-form input {
  flex: 1;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--white);
  font-size: var(--fs-base);
}

.footer .footer-col .newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer .footer-col .newsletter-form button {
  padding: 14px 20px;
  background: var(--main-color);
  color: var(--white);
  border: none;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background var(--transition-base);
}

.footer .footer-col .newsletter-form button:hover {
  background: var(--main-600);
}

.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
}

.footer .footer-bottom .footer-bottom-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer .footer-bottom .copyright {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
}

.footer .footer-bottom .copyright a {
  color: var(--main-color);
}

.footer .footer-bottom .footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer .footer-bottom .footer-bottom-links a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

.footer .footer-bottom .footer-bottom-links a:hover {
  color: var(--main-color);
}

/* ============================================================
   17.  BREADCRUMB
   ============================================================ */
.breadcrumb-area {
  position: relative;
  padding: 180px 0 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.breadcrumb-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 10, 30, 0.85) 0%, rgba(10, 10, 30, 0.6) 100%);
}

.breadcrumb-area .breadcrumb-content {
  position: relative;
  z-index: 2;
}

.breadcrumb-area .breadcrumb-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.breadcrumb-area .breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.breadcrumb-area .breadcrumb-list a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.breadcrumb-area .breadcrumb-list a:hover {
  color: var(--main-color);
}

.breadcrumb-area .breadcrumb-list .separator {
  color: var(--main-color);
}

.breadcrumb-area .breadcrumb-list .current {
  color: var(--white);
}


/* ============================================================
   18.  ACCORDION
   ============================================================ */
.accordion-item {
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--white);
  transition: all var(--transition-base);
}

.accordion-item.active {
  border-color: var(--main-color);
  box-shadow: 0 0 0 1px var(--main-color);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.accordion-header:hover {
  background: var(--neutral-50);
}

.accordion-header .accordion-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.accordion-header .accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--heading-color);
  font-size: var(--fs-xs);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.accordion-item.active .accordion-header .accordion-icon {
  background: var(--main-color);
  color: var(--white);
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-cubic);
}

.accordion-body .accordion-content {
  padding: 0 20px 20px;
  font-size: var(--fs-base);
  color: var(--body-color);
  line-height: 1.8;
}

.accordion-item.active .accordion-body {
  max-height: 500px;
}

/* ============================================================
   19.  CURSOR
   ============================================================ */
.tw-cursor-dot,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--main-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
}

.cursor-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--main-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.tw-cursor-circle.active,
.cursor-circle.active {
  width: 60px;
  height: 60px;
  border-color: var(--main-300);
  background: rgba(232, 100, 44, 0.08);
}

@media (hover: none) and (pointer: coarse) {
  .cursor-dot,
.tw-cursor-circle,
.cursor-circle {
    display: none;
  }
}

/* ============================================================
   20.  TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  position: relative;
  min-width: 320px;
  max-width: 420px;
  background: var(--white);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  animation: toastIn 0.4s ease forwards;
  overflow: hidden;
}

.toast-item.toast-out {
  animation: toastOut 0.4s ease forwards;
}

.toast-item .toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.toast-item.toast-success .toast-icon {
  background: #10b981;
  color: var(--white);
}

.toast-item.toast-error .toast-icon {
  background: #ef4444;
  color: var(--white);
}

.toast-item.toast-warning .toast-icon {
  background: #f59e0b;
  color: var(--white);
}

.toast-item.toast-info .toast-icon {
  background: #3b82f6;
  color: var(--white);
}

.toast-item .toast-content {
  flex: 1;
}

.toast-item .toast-content .toast-title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.toast-item .toast-content .toast-message {
  font-size: var(--fs-xs);
  color: var(--body-color);
  line-height: 1.5;
}

.toast-item .toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--neutral-400);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 2px;
  transition: color var(--transition-fast);
}

.toast-item .toast-close:hover {
  color: var(--heading-color);
}

.toast-item .toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--main-color);
  border-radius: 0 0 10px 10px;
  animation: toastProgress 3s linear forwards;
}

.toast-item.toast-success .toast-progress {
  background: #10b981;
}

.toast-item.toast-error .toast-progress {
  background: #ef4444;
}

.toast-item.toast-warning .toast-progress {
  background: #f59e0b;
}

.toast-item.toast-info .toast-progress {
  background: #3b82f6;
}


/* ============================================================
   21.  ANIMATIONS / KEYFRAMES
   ============================================================ */
@keyframes loaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loaderBar {
  0%, 100% {
    transform: scaleY(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes txtLoader {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px);
    color: var(--main-color);
  }
}

@keyframes charReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) rotateX(40deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes toastProgress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}


/* ============================================================
   22.  RESPONSIVE
   ============================================================ */

/* 576px */
@media (max-width: 576px) {
  .tw-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-image .about-experience {
    position: relative;
    bottom: 0;
    right: 0;
    margin-top: -20px;
  }

  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer .footer-bottom .footer-bottom-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .banner-area .banner-title {
    font-size: 2.2rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .header-right .header-btn {
    display: none;
  }

  .event-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .event-card .event-date {
    display: inline-block;
  }

  .offcanvas-sidebar {
    width: 320px;
    right: -340px;
  }

  .search-popup .search-form input {
    font-size: var(--fs-xl);
  }

  .toast-item {
    min-width: auto;
    max-width: 90vw;
  }

  .breadcrumb-area {
    padding: 150px 0 60px;
  }

  .about-content .about-features {
    grid-template-columns: 1fr;
  }
}

/* 768px */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .header-right .search-trigger {
    width: 38px;
    height: 38px;
    font-size: var(--fs-sm);
  }

  .banner-area {
    min-height: 80vh;
  }

  .banner-area .banner-content {
    text-align: center;
    margin: 0 auto;
  }

  .banner-area .banner-text {
    margin-left: auto;
    margin-right: auto;
  }

  .banner-area .banner-buttons {
    justify-content: center;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-wrapper {
    gap: 40px;
  }

  .py-120 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-title {
    font-size: 2rem;
  }

  .banner-area .banner-title {
    font-size: 2.8rem;
  }

  .offcanvas-sidebar {
    width: 360px;
  }

  .search-popup .search-close {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  .mega-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 992px */
@media (max-width: 992px) {
  .banner-area .banner-content.banner-right {
    margin-left: 0;
  }

  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-wrapper {
    grid-template-columns: 1fr;
  }

  .about-image {
    order: -1;
  }

  .banner-area .banner-title {
    font-size: 3.2rem;
  }

  .py-120 {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* 1200px */
@media (max-width: 1200px) {
  .tw-container {
    max-width: 1140px;
  }

  .nav-menu > ul > li > a {
    padding: 10px 14px;
    font-size: var(--fs-sm);
  }

  .mega-menu {
    max-width: 960px;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 1400px */
@media (max-width: 1400px) {
  .tw-container {
    max-width: 1320px;
  }

  .mega-menu {
    max-width: 1100px;
  }
}


/* ============================================================
   23.  AOS OVERRIDES
   ============================================================ */
[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
}

[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos="fade-down"] {
  opacity: 0;
  transform: translateY(-40px);
  transition-property: opacity, transform;
}

[data-aos="fade-down"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos="fade-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition-property: opacity, transform;
}

[data-aos="fade-left"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="fade-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition-property: opacity, transform;
}

[data-aos="fade-right"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="zoom-in"] {
  opacity: 0;
  transform: scale(0.85);
  transition-property: opacity, transform;
}

[data-aos="zoom-in"].aos-animate {
  opacity: 1;
  transform: scale(1);
}

[data-aos="flip-up"] {
  opacity: 0;
  transform: perspective(400px) rotateX(-15deg);
  transition-property: opacity, transform;
}

[data-aos="flip-up"].aos-animate {
  opacity: 1;
  transform: perspective(400px) rotateX(0);
}

/* ============================================================
   24.  MISC (Magnific, Swiper, Nice Select)
   ============================================================ */

/* ---- Magnific Popup Overrides ---- */
.mfp-bg {
  background: rgba(10, 10, 30, 0.92);
  opacity: 1;
}

.mfp-close {
  color: var(--white) !important;
  font-size: 36px !important;
  opacity: 0.8 !important;
  transition: opacity var(--transition-fast);
}

.mfp-close:hover {
  opacity: 1 !important;
}

.mfp-figure::after {
  box-shadow: none;
}

.mfp-arrow {
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.mfp-arrow:hover {
  opacity: 1;
}

/* ---- Swiper Dot Styles ---- */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--neutral-300);
  opacity: 0.5;
  transition: all var(--transition-base);
}

.swiper-pagination-bullet-active {
  background: var(--main-color);
  opacity: 1;
  width: 30px;
  border-radius: 6px;
}

.swiper-button-prev,
.swiper-button-next {
  width: 50px;
  height: 50px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
  color: var(--heading-color);
  font-weight: 700;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--main-color);
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  color: var(--white);
}

/* ---- Nice Select Overrides ---- */
.nice-select {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--neutral-50);
  font-size: var(--fs-base);
  color: var(--body-color);
  transition: all var(--transition-base);
}

.nice-select:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(232, 100, 44, 0.1);
}

.nice-select::after {
  width: 8px;
  height: 8px;
  border-color: var(--neutral-400);
  right: 18px;
}

.nice-select .list {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 6px 0;
  margin-top: 4px;
}

.nice-select .list li {
  padding: 8px 18px;
  font-size: var(--fs-base);
  color: var(--body-color);
  min-height: auto;
  line-height: 1.5;
}

.nice-select .list li:hover {
  color: var(--main-color);
  background: var(--main-50);
}

.nice-select .list li.selected {
  color: var(--main-color);
  font-weight: 500;
}