/* =============================================================================
   MAIN STYLESHEET
   Framework : Tailwind CSS v4.2.0
   Project   : Varma
   Contents  : 1.  Tailwind Layer: Properties (CSS custom property polyfill)
               2.  Tailwind Layer: Theme (design tokens)
               3.  Tailwind Layer: Base (global reset + element defaults)
               4.  Tailwind Layer: Components (reusable UI blocks)
               5.  Tailwind Layer: Utilities (atomic helper classes)
               6.  Custom: Global helpers & scrollbar
               7.  Custom: Hero Banner
               8.  Custom: Tab navigation
               9.  Custom: Partner cards
               10. Custom: Service section
               11. Custom: Homepage service listing
               12. Custom: Contact form (general)
               13. Custom: Career form
               14. Custom: Insights & Related section
               15. Custom: Admin Content Area
               16. Tailwind: @property registrations + @keyframes
   ============================================================================= */

/* =============================================================================
   1. TAILWIND LAYER: PROPERTIES
   Browser polyfill — registers initial values for Tailwind's custom props
   in browsers that don't yet support @property natively.
   ============================================================================= */

@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::backdrop,
    :after,
    :before {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-divide-x-reverse: 0;
    }
  }
}

/* =============================================================================
   2. TAILWIND LAYER: THEME
   Design tokens — colours, spacing, typography scale, radii, easings, etc.
   Custom brand tokens are appended at the end of :root.
   ============================================================================= */

@layer theme {
  :host,
  :root {
    /* ---- Font stacks ---- */
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;

    /* ---- Colour palette ---- */
    --color-blue-50: #eff6ff;
    --color-gray-100: #f3f4f6;
    --color-gray-300: #d1d5dc;
    --color-gray-500: #6a7282;
    --color-black: #000;
    --color-white: #fff;

    /* ---- Spacing ---- */
    --spacing: 0.25rem;
    --container-2xl: 42rem;

    /* ---- Type scale ---- */
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.33333;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.42857;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.55556;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.4;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.33333;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 1.11111;
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;

    /* ---- Font weights ---- */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ---- Letter-spacing & line-height ---- */
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ---- Border radius ---- */
    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;

    /* ---- Easing & animation ---- */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;

    /* ---- Transition defaults ---- */
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Default font families ---- */
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);

    /* ---- Brand / project tokens ---- */
    --color-navy: #0a1628;
    --color-blue: #1a56db;
    --color-blue-hover: #1648b8;
    --color-text: #1e293b;
    --color-badge: #a9a9a926;
    --font-playfair: "Playfair Display", serif;
    --font-inter: "Inter Tight", sans-serif;
    --font-stack: "Stack Sans Text", sans-serif;
    --container-width: 1352px;
    --container-padding: 1rem;
  }
}

/* =============================================================================
   3. TAILWIND LAYER: BASE
   Opinionated global reset + sensible element defaults.
   ============================================================================= */

@layer base {
  /* ---- Universal box-sizing & reset ---- */
  *,
  ::backdrop,
  :after,
  :before {
    border: 0 solid;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  ::-webkit-file-upload-button,
  ::file-selector-button {
    border: 0 solid;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* ---- Root / html defaults ---- */
  :host,
  html {
    -webkit-text-size-adjust: 100%;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    line-height: 1.5;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }
  figure {
    margin-bottom: 0 !important;
  }

  /* ---- Inline / text elements ---- */
  hr {
    border-top-width: 1px;
    color: inherit;
    height: 0;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }

  /* ---- Monospace elements ---- */
  code,
  kbd,
  pre,
  samp {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-size: 1em;
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
  }

  /* ---- Table ---- */
  table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0;
  }

  /* ---- Misc elements ---- */
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: initial;
  }
  summary {
    display: list-item;
  }
  menu,
  ol,
  ul {
    list-style: none;
  }

  /* ---- Media / embeds ---- */
  audio,
  canvas,
  embed,
  iframe,
  img,
  object,
  svg,
  video {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    height: auto;
    max-width: 100%;
  }

  /* ---- Form controls ---- */
  button,
  input,
  optgroup,
  select,
  textarea {
    background-color: #0000;
    border-radius: 0;
    color: inherit;
    /* font: inherit; */
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    opacity: 1;
  }
  ::-webkit-file-upload-button,
  ::file-selector-button {
    background-color: #0000;
    border-radius: 0;
    color: inherit;
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    -webkit-padding-start: 20px;
    padding-inline-start: 20px;
  }
  ::-webkit-file-upload-button {
    -webkit-margin-end: 4px;
    margin-inline-end: 4px;
  }
  ::file-selector-button {
    -webkit-margin-end: 4px;
    margin-inline-end: 4px;
  }

  /* ---- Placeholder ---- */
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button)) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, #0000);
      }
    }
  }

  /* ---- Textarea ---- */
  textarea {
    resize: vertical;
  }

  /* ---- Date / time inputs (WebKit) ---- */
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  /* ---- Button appearance ---- */
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
    appearance: button;
  }
  ::-webkit-file-upload-button,
  ::file-selector-button {
    -webkit-appearance: button;
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /* ---- Hidden attribute ---- */
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  /* ---- Project-level base overrides ---- */
  html {
    scroll-behavior: smooth;
  }

  body {
    color: var(--color-text);
    font-family: var(--font-inter);
    -webkit-font-smoothing: antialiased;
    background: #fff;
    text-rendering: optimizelegibility;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-black);
    font-family: var(--font-playfair);
  }

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

  /* Highlight selection colour */
  ::selection {
    background: var(--color-blue);
    color: #fff;
  }
}

/* =============================================================================
   4. TAILWIND LAYER: COMPONENTS
   Reusable UI blocks: container, buttons, badges, stat items, hero, cards,
   contact section, locations, CTA connect, and form components.
   ============================================================================= */

@layer components {
  /* ---------------------------------------------------------------------------
     4.1 Layout helpers
     --------------------------------------------------------------------------- */

  /* Centred full-width container */
  .container-custom {
    margin-inline: auto;
    max-width: var(--container-width);
    padding-inline: var(--container-padding);
    width: 100%;
  }

  /* Default section vertical rhythm */
  section {
    padding-block: 50px;
  }
  @media (min-width: 64rem) {
    section {
      padding-block: 100px;
    }
  }

  /* ---------------------------------------------------------------------------
     4.2 Buttons
     --------------------------------------------------------------------------- */

  /* Base button */
  .btn {
    border-style: var(--tw-border-style);
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 17px;
    white-space: nowrap;
    align-items: center;
    border-width: 1px;
    display: inline-flex;
    justify-content: center;
    padding-block: 18px;
    padding-inline: 35px;
    -webkit-user-select: none;
    user-select: none;
    --tw-leading: 17px;
    --tw-font-weight: var(--font-weight-medium);
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-out);
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: var(--ease-out);
  }

  /* Secondary: transparent with white border */
  .btn-secondary {
    background-color: transparent;
    border-color: var(--color-white);
    border-style: solid;
    border-width: 1px;
    color: var(--color-white);
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }
  @media (hover: hover) {
    .btn-secondary:hover {
      background-color: #00428d;
      border-color: var(--color-white);
      color: var(--color-white);
    }
  }
  .btn-secondary:active {
    background-color: #002a73;
    border-color: var(--color-white);
    color: var(--color-white);
  }

  /* Primary: solid blue */
  .btn-primary {
    background-color: #00338d;
    border-color: #00338d;
    border-style: var(--tw-border-style);
    border-width: 1px;
    color: #ffffff;
  }
  @media (hover: hover) {
    .btn-primary:hover {
      background-color: #002a73;
      border-color: #002a73;
    }
  }
  .btn-primary:active {
    background-color: #001f57;
    border-color: #001f57;
  }

  /* Outline: transparent with black border */
  .btn-outline {
    background-color: transparent;
    border-color: var(--color-black);
    color: var(--color-black);
  }
  @media (hover: hover) {
    .btn-outline:hover {
      background-color: var(--color-black);
      border-color: var(--color-black);
      color: var(--color-white);
    }
  }
  .btn-outline:active {
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  }

  /* Size variants */
  .btn-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
  }
  .btn-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    padding-block: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 8);
  }
  .btn-block {
    width: 100%;
  }

  /* State variants */
  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .btn-loading {
    opacity: 0.8;
    pointer-events: none;
    position: relative;
  }
  .btn-loading .btn-spinner {
    animation: var(--animate-spin);
    border-color: #0000 currentColor currentColor;
    border-radius: 3.40282e38px;
    border-style: var(--tw-border-style);
    border-width: 2px;
    height: calc(var(--spacing) * 5);
    inset: calc(var(--spacing) * 0);
    margin: auto;
    position: absolute;
    width: calc(var(--spacing) * 5);
  }
  .btn-loading .btn-text {
    opacity: 0;
  }

  /* Submit button */
  .btn-submit {
    background-color: #123d8d;
    color: var(--color-white);
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
  }
  @media (hover: hover) {
    .btn-submit:hover {
      background-color: #0e2f6b;
    }
  }

  /* ---------------------------------------------------------------------------
     4.3 Section title badge
     --------------------------------------------------------------------------- */

  .section-title-badge {
    background-color: var(--color-badge);
    font-size: var(--text-sm);
    line-height: 1;
    padding-block: 12px;
    padding-inline: 19px;
    width: -webkit-fit-content;
    width: fit-content;
    align-items: center;
    border-radius: 27px;
    color: var(--color-black);
    display: inline-flex;
    flex-shrink: 0;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 25px;
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-semibold);
  }

  /* ---------------------------------------------------------------------------
     4.4 Stat items
     --------------------------------------------------------------------------- */

  .stat-item {
    padding-block: clamp(20px, 2vw, 26px);
    padding-inline: clamp(20px, 4vw, 64px);
  }

  @media (max-width: 768px) {
    .stat-item {
      border-bottom: 1px solid var(--color-gray-300);
    }
  }

  @media (min-width: 1024px) {
    .stat-item:first-child {
      padding-left: 0;
    }

    .stat-item:last-child {
      padding-right: 0;
    }
  }

  .stat-number {
    font-family: var(--font-stack);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    margin-bottom: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-tight);
    font-weight: var(--font-weight-light);
  }
  @media (min-width: 40rem) {
    .stat-number {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  @media (min-width: 48rem) {
    .stat-number {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 64rem) {
    .stat-number {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  @media (min-width: 80rem) {
    .stat-number {
      font-size: 70px;
    }
  }

  .stat-text {
    font-size: var(--text-xs);
    line-height: inherit;
    font-weight: var(--font-weight-medium);
    --tw-leading: 26px;
    --tw-font-weight: var(--font-weight-medium);
  }
  @media (min-width: 40rem) {
    .stat-text {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  @media (min-width: 48rem) {
    .stat-text {
      font-size: 18px;
      max-width: 210px;
    }
  }

  /* ---------------------------------------------------------------------------
     4.5 Card zoom (image scale on hover)
     --------------------------------------------------------------------------- */

  .card-zoom img {
    --tw-duration: 0.5s;
    --tw-ease: var(--ease-out);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 0.5s;
    transition-timing-function: var(--ease-out);
  }
  .card-zoom:hover img {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  /* ---------------------------------------------------------------------------
     4.6 Drag indicator
     --------------------------------------------------------------------------- */

  .drag-indicator {
    align-items: center;
    background: #000;
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: var(--text-sm);
    height: 90px;
    justify-content: center;
    line-height: var(--tw-leading, var(--text-sm--line-height));
    pointer-events: none;
    position: absolute;
    right: 22%;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
  }

  /* ---------------------------------------------------------------------------
     4.7 Inline contact input (used in #contact section)
     --------------------------------------------------------------------------- */

  #contact .form-input {
    background: 0 0;
    border: 1px solid #d9d9d9;
    color: #000;
    font-size: 14px;
    outline: none;
    padding: 14px 16px;
    transition:
      border 0.25s,
      box-shadow 0.25s;
    width: 100%;
  }
  #contact .form-input:focus {
    border-color: #0c3c8c;
    box-shadow: 0 0 0 2px #0c3c8c14;
  }

  /* ---------------------------------------------------------------------------
     4.8 Nav toggle animation (hamburger → X)
     --------------------------------------------------------------------------- */

  .nav-toggle.active span:first-child {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Scroll-reveal helper */
  .revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* ---------------------------------------------------------------------------
     4.9 CTA Connect section
     --------------------------------------------------------------------------- */

  .cta-connect {
    background-image: url(https://varma.webc.in/wp/wp-content/uploads/2026/02/lets-connect-scaled.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
  }
  @media (min-width: 64rem) {
    .cta-connect {
      height: 330px;
    }
  }

  .cta-connect__inner {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
    height: 100%;
    justify-content: space-between;
    padding-block: calc(var(--spacing) * 0);
  }
  @media (min-width: 64rem) {
    .cta-connect__inner {
      align-items: center;
      flex-direction: row;
      padding-block: 50px;
    }
  }

  .cta-connect__title {
    font-family: var(--font-inter);
    max-width: 800px;
    color: var(--color-white);
    font-size: 22px;
    font-weight: var(--font-weight-normal);
    line-height: 32px;
    --tw-leading: 32px;
    --tw-font-weight: var(--font-weight-normal);
  }
  @media (min-width: 40rem) {
    .cta-connect__title {
      font-size: 26px;
      line-height: 36px;
      --tw-leading: 36px;
    }
  }
  @media (min-width: 48rem) {
    .cta-connect__title {
      font-size: 32px;
      line-height: 42px;
      --tw-leading: 42px;
    }
  }
  @media (min-width: 64rem) {
    .cta-connect__title {
      font-size: 55px;
      line-height: 65px;
      --tw-leading: 65px;
    }
  }

  .cta-connect__btn {
    border-color: var(--color-white);
    border-style: var(--tw-border-style);
    border-width: 1px;
    color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 8);
    align-items: center;
    display: inline-flex;
    justify-content: center;
    --tw-duration: 0.3s;
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: 0.3s;
  }
  @media (hover: hover) {
    .cta-connect__btn:hover {
      background-color: var(--color-white);
      color: #0b2e83;
    }
  }

  /* ---------------------------------------------------------------------------
     4.10 Contact section
     --------------------------------------------------------------------------- */

  /* Title */
  .contact-title {
    font-family: var(--font-playfair);
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.15;
    margin-bottom: clamp(28px, 4vw, 55px);
  }

  /* Address description text */
  .contact-address-details {
    font-family: var(--font-inter);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.7;
    color: #565656;
    max-width: 420px;
  }

  /* Two-column layout */
  .contact-layout {
    display: grid;
    gap: clamp(32px, 4vw, 64px);
  }
  @media (min-width: 64rem) {
    .contact-layout {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: space-between;
    }
  }
  @media (min-width: 1024px) and (max-width: 1279px) {
    .contact-layout {
      gap: 32px !important;
    }
  }
  .contact-layout .contact-info {
    max-width: 554px;
    width: 100%;
  }

  /* Featured image */
  .contact-image {
    aspect-ratio: 554 / 226;
    overflow: hidden;
    position: relative;
    max-width: 554px;
    margin-bottom: 37px;
  }
  .contact-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Address block */
  .contact-address h3 {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(18px, 1.2vw, 20px);
    line-height: 1.3;
    margin-bottom: clamp(8px, 1vw, 12px);
    margin-top: clamp(20px, 3vw, 37px);
  }
  .contact-address p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #636363;
  }

  /* Meta grid (phone / email pairs) */
  .contact-meta {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    margin-top: clamp(24px, 3vw, 40px);
  }
  @media (min-width: 40rem) {
    .contact-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .contact-meta span {
    display: block;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.3;
    margin-bottom: clamp(6px, 0.8vw, 8px);
  }
  .contact-meta-value {
    font-family: var(--font-inter);
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.6;
  }
  #contact-us .footer-link {
    transition: color 0.3s ease;
  }
  #contact-us .footer-link:hover {
    color: #00338d;
  }
  /* Form title */
  .contact-form-title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: normal;
    margin-bottom: clamp(28px, 3vw, 42px);
  }

  /* Spacing between form rows */
  :where(.contact-form > :not(:last-child)) {
    margin-block-end: calc(var(--spacing) * 5);
  }

  /* Two-column form grid */
  .form-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 40rem) {
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Inputs & textarea */
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    border: 1px solid #d6d6d6;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
  }
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: var(--color-black);
    outline: none;
  }

  /* ---------------------------------------------------------------------------
     4.11 Contact Us page title
     --------------------------------------------------------------------------- */

  .contact-us-title {
    font-family: var(--font-playfair);
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    line-height: 36px;
    --tw-leading: 36px;
    --tw-font-weight: var(--font-weight-medium);
  }
  @media (min-width: 40rem) {
    .contact-us-title {
      font-size: 36px;
      line-height: 44px;
      --tw-leading: 44px;
    }
  }
  @media (min-width: 48rem) {
    .contact-us-title {
      font-size: 48px;
      line-height: 56px;
      --tw-leading: 56px;
    }
  }
  @media (min-width: 64rem) {
    .contact-us-title {
      font-size: 60px;
      line-height: 70px;
      --tw-leading: 70px;
    }
  }

  /* ---------------------------------------------------------------------------
     4.12 Locations section
     --------------------------------------------------------------------------- */

  /* Header row */
  .locations-header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    justify-content: space-between;
    margin-bottom: calc(var(--spacing) * 10);
  }
  @media (min-width: 48rem) {
    .locations-header {
      align-items: center;
      flex-direction: row;
      margin-bottom: calc(var(--spacing) * 12);
    }
  }

  /* Section title */
  .locations-title {
    font-family: var(--font-playfair);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  @media (min-width: 48rem) {
    .locations-title {
      font-size: 48px;
    }
  }

  /* Filter dropdown wrapper */
  .select-wrapper {
    position: relative;
    width: 100%;
  }
  @media (min-width: 40rem) {
    .select-wrapper {
      width: 295px;
    }
  }

  /* Custom chevron arrow for select */

  .select-wrapper:after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    pointer-events: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' viewBox='0 0 14 8'%3E%3Cpath stroke='%231e1e1e' stroke-linecap='round' stroke-width='1.5' d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Desktop spacing */
  @media (min-width: 40rem) {
    .select-wrapper:after {
      right: calc(var(--spacing) * 5);
    }
  }

  /* 🔥 ROTATE WHEN OPEN */
  .select-wrapper:has(.select2-container--open)::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Select control */
  .locations-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #f4f4f4;
    border-color: #dadada;
    border-style: var(--tw-border-style);
    border-width: 1px;
    color: #1e1e1e;
    cursor: pointer;
    font-size: var(--text-sm);
    height: 52px;
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding-inline: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 12);
    width: 100%;
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .locations-select:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  @media (min-width: 40rem) {
    .locations-select {
      font-size: var(--text-base);
      height: 58px;
      line-height: var(--tw-leading, var(--text-base--line-height));
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 64rem) {
    .locations-select {
      height: 64px;
    }
  }

  /* Locations card grid */
  .locations-grid {
    display: grid;
    gap: calc(var(--spacing) * 6);
    grid-auto-rows: minmax(0, 1fr);
  }
  @media (min-width: 40rem) {
    .locations-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 48rem) {
    .locations-grid {
      gap: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 1025px) {
    .locations-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Individual location card */
  .location-card {
    background-color: var(--color-white);
    border-color: #e4e4e4;
    border-style: var(--tw-border-style);
    border-width: 1px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-block: 33px;
    padding-inline: 35px;
  }
  .location-card h3 {
    font-family: var(--font-inter);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    color: var(--color-black);
    margin-bottom: 30px;
    --tw-leading: var(--leading-normal);
    --tw-font-weight: var(--font-weight-medium);
  }
  .location-card p {
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 26px;
    color: #3e3e3e;
    margin-bottom: 30px;
    --tw-leading: 26px;
    --tw-font-weight: var(--font-weight-medium);
  }
  .location-card ul {
    margin-bottom: clamp(28px, 4vw, 57px);
  }
  :where(.location-card ul > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(var(--spacing) * 5 * var(--tw-space-y-reverse));
    margin-block-start: calc(var(--spacing) * 5 * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(
      var(--spacing) * 5 * (1 - var(--tw-space-y-reverse))
    );
    margin-block-end: calc(
      var(--spacing) * 5 * (1 - var(--tw-space-y-reverse))
    );
  }

  /* Location meta list (label : value grid) */
  :where(.location-meta > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(var(--spacing) * 3 * var(--tw-space-y-reverse));
    margin-block-start: calc(var(--spacing) * 3 * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(
      var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))
    );
    margin-block-end: calc(
      var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))
    );
  }
  .location-meta {
    font-size: 12px;
    line-height: 18px;
    --tw-leading: 18px;
  }
  @media (min-width: 40rem) {
    .location-meta {
      font-size: 13px;
    }
  }
  .location-meta li {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 60px 10px 1fr;
    row-gap: calc(var(--spacing) * 1);
  }
  @media (min-width: 40rem) {
    .location-meta li {
      grid-template-columns: 70px 12px 1fr;
    }
  }

  /* Meta label */
  .meta-label {
    font-family: var(--font-inter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: #6c6c6c;
    --tw-font-weight: var(--font-weight-semibold);
  }
  @media (min-width: 40rem) {
    .meta-label {
      font-size: 13px;
    }
  }

  /* Meta separator and value */
  .meta-sep,
  .meta-value {
    color: #1e1e1e;
    font-weight: var(--font-weight-medium);
    --tw-font-weight: var(--font-weight-medium);
  }
  .meta-value {
    font-family: var(--font-inter);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    overflow-wrap: break-word;
  }
  @media (min-width: 40rem) {
    .meta-value {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
} /* end @layer components */

/* =============================================================================
   5. TAILWIND LAYER: UTILITIES
   Atomic single-purpose classes generated by Tailwind.
   ============================================================================= */

@layer utilities {
  /* ---- Positioning ---- */
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }

  /* ---- Margin ---- */
  .mx-auto {
    margin-inline: auto;
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-\[28px\] {
    margin-top: 28px;
  }
  .mt-\[30px\] {
    margin-top: 30px;
  }
  .mt-\[33px\] {
    margin-top: 33px;
  }
  .mt-\[52px\] {
    margin-top: 52px;
  }
  .mt-\[65px\] {
    margin-top: 65px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-15 {
    margin-bottom: calc(var(--spacing) * 15);
  }
  .mb-16 {
    margin-bottom: 64px;
  }
  .mb-\[22px\] {
    margin-bottom: 22px;
  }
  .\!mb-\[30px\] {
    margin-bottom: 30px !important;
  }
  .mb-\[33px\] {
    margin-bottom: 33px;
  }
  .mb-\[35px\] {
    margin-bottom: 35px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .\!mb-4 {
    margin-bottom: 1rem !important;
  }
  @media (min-width: 1024px) {
  .lg\:mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .lg\:mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .lg\:mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
    .lg\:mb-16 {
      margin-bottom: 64px;
    }
    .lg\:.mb-\[30px\] {
      margin-bottom: 30px;
    }
    .lg\:\!mb-\[30px\] {
      margin-bottom: 30px !important;
    }
    .lg\:mb-10 {
      margin-bottom: 2.5rem;
    }
  }
  @media (min-width: 1280px) {
    .xl\:mb-\[110px\] {
      margin-bottom: 110px;
    }
  }
  .wac-home-about-spacing {
    margin-bottom: clamp(40px, 6vw, 110px);
  }
  /* ---- Display ---- */
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
/* sm:hidden → hide from 640px and above */
@media (min-width: 640px) {
  .sm\:hidden {
    display: none !important;
  }
}
  /* ---- Aspect ratio ---- */
  .aspect-\[16\/10\] {
    aspect-ratio: 16/10;
  }
  .aspect-\[627\/359\] {
    aspect-ratio: 627/359;
  }
  .aspect-\[607\/556\] {
    aspect-ratio: 607/556;
  }
  .aspect-\[607\/388\] {
    aspect-ratio: 607/388;
  }
  .aspect-\[405\/306\] {
    aspect-ratio: 405/306;
  }

  /* ---- Sizing ---- */
  .size-\[58px\] {
    height: 58px;
    width: 58px;
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-\[5px\] {
    height: 5px;
  }
  .h-\[85px\] {
    height: 85px;
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-\[280px\] {
    height: 280px;
  }
  .h-\[500px\] {
    height: 500px;
  }
  .max-h-\[90vh\] {
    max-height: 90vh;
  }
  .max-h-\[760px\] {
    max-height: 760px;
  }
  .min-h-\[760px\] {
    min-height: 760px;
  }

  /* Responsive heights */
  @media (min-width: 640px) {
    .sm\:h-\[360px\] {
      height: 360px;
    }
  }
  @media (min-width: 768px) {
    .md\:h-\[420px\] {
      height: 420px;
    }
    .md\:h-\[760px\] {
      height: 760px;
    }
  }
  @media (min-width: 1024px) {
    .lg\:h-\[515px\] {
      height: 515px;
    }
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-\[28\%\] {
    width: 28%;
  }
  .w-fit {
    width: -webkit-fit-content;
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-\[171px\] {
    width: 171px;
  }
  /* Max widths */
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-\[320px\] {
    max-width: 320px;
  }
  .max-w-\[355px\] {
    max-width: 355px;
  }
  .max-w-\[384px\] {
    max-width: 384px;
  }
  .max-w-\[395px\] {
    max-width: 395px;
  }
  .max-w-\[410px\] {
    max-width: 410px;
  }
  .max-w-\[500px\] {
    max-width: 500px;
  }
  .max-w-\[520px\] {
    max-width: 520px;
  }
  .max-w-\[533px\] {
    max-width: 533px;
  }
  .max-w-\[535px\] {
    max-width: 535px;
  }
  .max-w-\[556px\] {
    max-width: 556px;
  }
  .max-w-\[584px\] {
    max-width: 584px;
  }
  .max-w-\[586px\] {
    max-width: 586px;
  }
  .max-w-\[587px\] {
    max-width: 587px;
  }
  .max-w-\[603px\] {
    max-width: 603px;
  }
  .max-w-\[607px\] {
    max-width: 607px;
  }
  .max-w-\[627px\] {
    max-width: 627px;
  }
  .max-w-\[636px\] {
    max-width: 636px;
  }
  .max-w-\[653px\] {
    max-width: 653px;
  }
  .max-w-\[680px\] {
    max-width: 680px;
  }
  .max-w-\[730px\] {
    max-width: 730px;
  }
  .max-w-\[837px\] {
    max-width: 837px;
  }
  .max-w-\[924px\] {
    max-width: 924px;
  }
  .max-w-\[1200px\] {
    max-width: 1200px;
  }
  .max-w-\[80\%\] {
    max-width: 80%;
  }
  @media (min-width: 1024px) {
    .lg\:max-w-\[730px\] {
      max-width: 730px;
    }
    .lg\:max-w-\[383px\] {
      max-width: 383px;
    }
  }

  /* ---- Flex & Grid ---- */
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Gap */
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-x-\[12px\] {
    column-gap: 12px;
  }
  .gap-y-\[10px\] {
    row-gap: 10px;
  }
  .gap-x-\[20px\] {
    column-gap: 20px;
  }
  .sm\:gap-x-\[18px\] {
    @media (min-width: 640px) {
      column-gap: 18px;
    }
  }
  .sm\:gap-y-\[14px\] {
    @media (min-width: 640px) {
      row-gap: 14px;
    }
  }
  .lg\:gap-1 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 1) !important;
    }
  }
  .lg\:gap-x-\[24px\] {
    @media (min-width: 1024px) {
      column-gap: 24px;
    }
  }
  .lg\:gap-y-\[18px\] {
    @media (min-width: 1024px) {
      row-gap: 18px;
    }
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .sm\:gap-4 {
    @media (min-width: 640px) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-6 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-\[5px\] {
    gap: 5px;
  }
  .gap-\[18px\] {
    gap: 18px;
  }
  .gap-\[46px\] {
    gap: 46px;
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }
  .gap-y-\[100px\] {
    row-gap: 100px;
  }
  @media (min-width: 1024px) {
    .lg\:gap-\[46px\] {
      gap: 46px;
    }
    .lg\:gap-\[40px\] {
      gap: 40px;
    }
  }

  /* Space-y helpers */
  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(var(--spacing) * 6 * var(--tw-space-y-reverse));
    margin-block-start: calc(var(--spacing) * 6 * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(
      var(--spacing) * 6 * (1 - var(--tw-space-y-reverse))
    );
    margin-block-end: calc(
      var(--spacing) * 6 * (1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-\[65px\] > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(65px * var(--tw-space-y-reverse));
    margin-block-start: calc(65px * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(65px * (1 - var(--tw-space-y-reverse)));
    margin-block-end: calc(65px * (1 - var(--tw-space-y-reverse)));
  }

  /* Divide */
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
  }
  :where(.divide-gray-300 > :not(:last-child)) {
    border-color: var(--color-gray-300);
  }

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

  /* ---- Border radius ---- */
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  /* ---- Borders ---- */
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .\!border-white {
    border-color: var(--color-white) !important;
  }
  .border-\[\#2A2A2A\] {
    border-color: #2a2a2a;
  }
  .border-\[\#252525\] {
    border-color: #252525;
  }
  .border-\[\#D7D7D7\] {
    border-color: #d7d7d7;
  }

  /* ---- Backgrounds ---- */
  .\!bg-\[\#A9A9A94D\] {
    background-color: #a9a9a94d !important;
  }
  .bg-\[\#123D8D\] {
    background-color: #123d8d;
  }
  .bg-\[\#00338D\] {
    background-color: #00338d;
  }
  .bg-\[\#F5F5F5\],
  .bg-\[\#f5f5f5\] {
    background-color: #f5f5f5;
  }
  .bg-\[\#F6F6F6\] {
    background-color: #f6f6f6;
  }
  .bg-\[\#F7F7F7\] {
    background-color: #f7f7f7;
  }
  .bg-\[\#F8F8F8\] {
    background-color: #f8f8f8;
  }

  .bg-\[\#A9A9A94D\] {
    background-color: #a9a9a94d;
  }
  .bg-\[\#eeeeee\] {
    background-color: #eee;
  }
  .bg-\[\#f8f8f8\] {
    background-color: #f8f8f8;
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-transparent {
    background-color: #0000;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }

  /* ---- Object fit ---- */
  .object-cover {
    object-fit: cover;
  }

  /* ---- Padding ---- */
  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-\[60px\] {
    padding-block: 60px;
  }
  .py-\[80px\] {
    padding-block: 80px;
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-\[15px\] {
    padding-top: 15px;
  }
  .pt-\[110px\] {
    padding-top: 110px;
  }
  .\!pb-\[44px\] {
    padding-bottom: 44px !important;
  }
  .pb-\[44px\] {
    padding-bottom: 44px;
  }
  .pb-\[53px\] {
    padding-bottom: 53px;
  }

  .pb-\[69\%\] {
    padding-bottom: 69%;
  }
  .pb-\[69\.66\%\] {
    padding-bottom: 69.66%;
  }
  .pb-\[71\.18\%\] {
    padding-bottom: 71.18%;
  }
  .pb-\[74\.518\%\] {
    padding-bottom: 74.518%;
  }
  .pb-\[75\%\] {
    padding-bottom: 75%;
  }
  .pb-\[77\.3\%\] {
    padding-bottom: 77.3%;
  }
  .pb-\[117\.14\%\] {
    padding-bottom: 117.14%;
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  @media (min-width: 1024px) {
    .lg\:pb-\[31\.82\%\] {
      padding-bottom: 31.82%;
    }
    .lg\:py-\[120px\] {
      padding-top: 120px;
      padding-bottom: 120px;
    }
    .lg\:py-\[60px\] {
      padding-top: 60px;
      padding-bottom: 60px;
    }
    .lg\:py-\[80px\] {
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }
  /* ---- Text alignment ---- */
  .text-center {
    text-align: center;
  }

  /* ---- Font family ---- */
  .font-inter {
    font-family: var(--font-inter);
  }
  .font-playfair {
    font-family: var(--font-playfair);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .font-stack {
    font-family: var(--font-stack);
  }

  /* ---- Font size ---- */
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-\[0\.8125rem\] {
    font-size: 0.8125rem;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[28px\] {
    font-size: 28px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  @media (min-width: 640px) {
    .sm\:text-\[25px\] {
      font-size: 25px;
    }
    .sm\:text-\[20px\] {
      font-size: 20px;
    }
  }

  @media (min-width: 1024px) {
    .lg\:text-\[28px\] {
      font-size: 28px;
    }
    .lg\:text-\[26px\] {
      font-size: 26px;
    }
  }

  @media (min-width: 1024px) {
    .lg\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  /* ---- Line height ---- */
  .leading-\[1\.1\] {
    line-height: 1.1;
  }
  .leading-\[11px\] {
    --tw-leading: 11px;
    line-height: 11px;
  }
  .leading-\[29px\] {
    --tw-leading: 29px;
    line-height: 29px;
  }
  .leading-\[40px\] {
    --tw-leading: 40px;
    line-height: 40px;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  /* ---- Font weight ---- */
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  /* ---- Letter spacing ---- */
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-\[0\.7px\] {
    letter-spacing: 0.7px;
  }

  /* ---- White space ---- */
  .whitespace-nowrap {
    white-space: nowrap;
  }

  /* ---- Text colour ---- */
  .\!text-white {
    color: var(--color-white) !important;
  }
  .text-\[\#313131\] {
    color: #313131;
  }
  .text-\[\#636363\] {
    color: #636363;
  }
  .text-\[\#757575\] {
    color: #757575;
  }
  .text-\[\#787878\] {
    color: #787878;
  }
  .text-\[\#D2D3D5\] {
    color: #d2d3d5;
  }
  .text-black {
    color: var(--color-black);
  }
  .text-text {
    color: var(--color-text);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/60 {
    color: #fff9;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, #0000);
    }
  }
  .text-white\/70 {
    color: #ffffffb3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, #0000);
    }
  }
  .text-white\/75 {
    color: #ffffffbf;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/75 {
      color: color-mix(in oklab, var(--color-white) 75%, #0000);
    }
  }

  /* ---- Shadows ---- */
  .shadow,
  .shadow-sm {
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, #0000001a),
      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  }
  .shadow,
  .shadow-sm,
  .shadow-xl {
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow:
      0 20px 25px -5px var(--tw-shadow-color, #0000001a),
      0 8px 10px -6px var(--tw-shadow-color, #0000001a);
  }

  /* ---- Transitions ---- */
  .transition {
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
  }
  .transition-all {
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
  }
  .transition-colors {
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-property:
      color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from,
      --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
  }
  .transition-shadow {
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-property: box-shadow;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
  }
  .transition-transform {
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
  }
  .duration-200 {
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .duration-300 {
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .duration-500 {
    --tw-duration: 0.5s;
    transition-duration: 0.5s;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .will-change-transform {
    will-change: transform;
  }

  /* ---- Transform ---- */
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }

  /* ---- Misc ---- */
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .list-disc {
    list-style-type: disc;
  }

  /* ---- Group hover ---- */
  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  /* ---- List marker colour ---- */
  .marker\:text-\[\#0000DF\] ::marker,
  .marker\:text-\[\#0000DF\]::marker,
  .marker\:text-\[\#0000DF\] ::-webkit-details-marker,
  .marker\:text-\[\#0000DF\]::-webkit-details-marker {
    color: #0000df;
  }

  /* ---- Hover utilities ---- */
  @media (hover: hover) {
    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }
    .hover\:text-black:hover {
      color: var(--color-black);
    }
    .hover\:text-white:hover {
      color: var(--color-white);
    }
    .hover\:text-white\/80:hover {
      color: #fffc;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/80:hover {
        color: color-mix(in oklab, var(--color-white) 80%, #0000);
      }
    }
  }

  /* ---- max-md: responsive utilities (< 48rem) ---- */
  @media not all and (min-width: 48rem) {
    .max-md\:fixed {
      position: fixed;
    }
    .max-md\:top-16 {
      top: calc(var(--spacing) * 16);
    }
    .max-md\:right-0 {
      right: calc(var(--spacing) * 0);
    }
    .max-md\:left-0 {
      left: calc(var(--spacing) * 0);
    }
    .max-md\:flex {
      display: flex;
    }
    .max-md\:-translate-y-\[120\%\] {
      --tw-translate-y: -120%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .max-md\:flex-col {
      flex-direction: column;
    }
    .max-md\:items-stretch {
      align-items: stretch;
    }
    .max-md\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }
    .max-md\:border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
    .max-md\:border-white\/10 {
      border-color: #ffffff1a;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .max-md\:border-white\/10 {
        border-color: color-mix(in oklab, var(--color-white) 10%, #0000);
      }
    }
    .max-md\:bg-navy {
      background-color: var(--color-navy);
    }
    .max-md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .max-md\:py-3 {
      padding-block: calc(var(--spacing) * 3);
    }
    .max-md\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }
    .max-md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .max-md\:opacity-0 {
      opacity: 0;
    }
    .max-md\:shadow-xl {
      --tw-shadow:
        0 20px 25px -5px var(--tw-shadow-color, #0000001a),
        0 8px 10px -6px var(--tw-shadow-color, #0000001a);
      box-shadow:
        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .max-md\:transition-all {
      transition-duration: var(
        --tw-duration,
        var(--default-transition-duration)
      );
      transition-property: all;
      transition-timing-function: var(
        --tw-ease,
        var(--default-transition-timing-function)
      );
    }
    .max-md\:duration-400 {
      --tw-duration: 0.4s;
      transition-duration: 0.4s;
    }
  }

  /* ---- sm: responsive utilities (>= 40rem) ---- */
  @media (min-width: 40rem) {
    .sm\:right-6 {
      right: calc(var(--spacing) * 6);
    }
    .sm\:bottom-6 {
      bottom: calc(var(--spacing) * 6);
    }
    .sm\:left-auto {
      left: auto;
    }
    .sm\:block {
      display: block;
    }
    .sm\:w-auto {
      width: auto;
    }
    .sm\:max-w-\[320px\] {
      max-width: 320px;
    }
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }
    .sm\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }
    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .sm\:text-\[22px\] {
      font-size: 22px;
    }
    .sm\:text-\[42px\] {
      font-size: 42px;
    }
    .sm\:leading-\[50px\] {
      --tw-leading: 50px;
      line-height: 50px;
    }
  }

  /* ---- md: responsive utilities (>= 48rem) ---- */
  @media (min-width: 48rem) {
    .md\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }
    .md\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }
    .md\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }
    .md\:mb-5 {
      margin-bottom: calc(var(--spacing) * 5);
    }
    .md\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }
    .md\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }
    .md\:mb-16 {
      margin-bottom: calc(var(--spacing) * 16);
    }
    .md\:mb-\[30px\] {
      margin-bottom: 30px;
    }
    .md\:mb-\[36px\] {
      margin-bottom: 36px;
    }
    .md\:mb-\[42px\] {
      margin-bottom: 42px;
    }
    .md\:mb-\[50px\] {
      margin-bottom: 50px;
    }
    .md\:mb-\[60px\] {
      margin-bottom: 60px;
    }
    .md\:mb-\[61px\] {
      margin-bottom: 61px;
    }
    .md\:mb-\[70px\] {
      margin-bottom: 70px;
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:items-center {
      align-items: center;
    }
    .md\:justify-between {
      justify-content: space-between;
    }
    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
    .md\:gap-y-0 {
      row-gap: calc(var(--spacing) * 0);
    }
    :where(.md\:divide-x > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-end-width: calc(1px * (1 - var(--tw-divide-x-reverse)));
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-style: var(--tw-border-style);
    }
    :where(.md\:divide-y-0 > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: calc(0px * (1 - var(--tw-divide-y-reverse)));
      border-top-style: var(--tw-border-style);
      border-top-width: calc(0px * var(--tw-divide-y-reverse));
    }
    .md\:px-\[60px\] {
      padding-inline: 60px;
    }
    .md\:py-\[45px\] {
      padding-block: 45px;
    }
    .md\:\!pb-\[54px\] {
      padding-bottom: 54px !important;
    }
    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .md\:text-\[18px\] {
      font-size: 18px;
    }
    .md\:text-\[24px\] {
      font-size: 24px;
    }
    .md\:text-\[34px\] {
      font-size: 34px;
    }
    .md\:text-\[36px\] {
      font-size: 36px;
    }
    .md\:text-\[38px\] {
      font-size: 38px;
    }
    .md\:text-\[40px\] {
      font-size: 40px;
    }
    .md\:text-\[43px\] {
      font-size: 43px;
    }
    .md\:text-\[56px\] {
      font-size: 56px;
    }
    .md\:leading-\[46px\] {
      --tw-leading: 46px;
      line-height: 46px;
    }
    .md\:leading-\[64px\] {
      --tw-leading: 64px;
      line-height: 64px;
    }
  }

  /* ---- lg: responsive utilities (>= 64rem) ---- */
  @media (min-width: 64rem) {
    .lg\:right-0 {
      right: calc(var(--spacing) * 0);
    }
    .lg\:bottom-0 {
      bottom: calc(var(--spacing) * 0);
    }
    .lg\:left-auto {
      left: auto;
    }
    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }
    .lg\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
    .lg\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }
    .lg\:mb-14 {
      margin-bottom: calc(var(--spacing) * 14);
    }
    .lg\:mb-20 {
      margin-bottom: calc(var(--spacing) * 20);
    }
    .lg\:mb-\[65px\] {
      margin-bottom: 65px;
    }
    .lg\:ml-auto {
      margin-left: auto;
    }
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:flex-row {
      flex-direction: row;
    }
    .lg\:items-center {
      align-items: center;
    }
    .lg\:items-end {
      align-items: flex-end;
    }
    .lg\:justify-between {
      justify-content: space-between;
    }
    .lg\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }
    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
    .lg\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }
    .lg\:gap-\[77px\] {
      gap: 77px;
    }
    .lg\:gap-x-16 {
      column-gap: calc(var(--spacing) * 16);
    }
    .lg\:gap-x-24 {
      column-gap: calc(var(--spacing) * 24);
    }
    .lg\:gap-y-\[85px\] {
      row-gap: 85px;
    }
    .lg\:px-\[55px\] {
      padding-inline: 55px;
    }
    .lg\:py-\[34px\] {
      padding-block: 34px;
    }
    .lg\:py-\[120px\] {
      padding-block: 120px;
    }
    .lg\:pt-\[100px\] {
      padding-top: 100px;
    }
    .lg\:pb-\[32\.61\%\] {
      padding-bottom: 32.61%;
    }
    .lg\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .lg\:text-\[30px\] {
      font-size: 30px;
    }
    .lg\:text-\[43px\] {
      font-size: 43px;
    }
    .lg\:text-\[48px\] {
      font-size: 48px;
    }
    .lg\:text-\[64px\] {
      font-size: 64px;
    }
    .lg\:leading-\[28px\] {
      --tw-leading: 28px;
      line-height: 28px;
    }
    .lg\:leading-\[40px\] {
      --tw-leading: 40px;
      line-height: 40px;
    }
    .lg\:leading-\[53px\] {
      --tw-leading: 53px;
      line-height: 53px;
    }
    .lg\:leading-\[72px\] {
      --tw-leading: 72px;
      line-height: 72px;
    }
  }

  /* ---- xl: responsive utilities (>= 80rem) ---- */
  @media (min-width: 80rem) {
    .xl\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
    .xl\:translate-x-\[35\%\] {
      --tw-translate-x: 35%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .xl\:translate-x-\[47\%\] {
      --tw-translate-x: 47%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .xl\:text-\[74px\] {
      font-size: 74px;
    }
    .xl\:leading-\[84px\] {
      --tw-leading: 84px;
      line-height: 84px;
    }
  }

  /* ---- Flex center shorthand ---- */
  .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  /* ---- Text wrap balance ---- */
  .text-balance {
    text-wrap: balance;
  }

  /* ---- Insights listing grid ---- */
  .insights-listing-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .insights-listing-wrap .insights-card-subtitle {
    margin-top: 18px !important;
    font-size: 13px;
  }

  @media (min-width: 640px) {
    .insights-listing-wrap {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .insights-listing-wrap {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 24px; /* ✅ reduced for iPad Pro */
      row-gap: 32px; /* ✅ reduced for iPad Pro */
    }
  }

  @media (min-width: 1280px) {
    .insights-listing-wrap {
      column-gap: 44px; /* ✅ full gap for desktop */
      row-gap: 60px; /* ✅ full gap for desktop */
    }
  }

  /* ---- Section main title ---- */
  .section-title-main {
    font-family: var(--font-playfair);
    font-weight: 400;
    color: black;
    font-size: clamp(28px, 4vw, 43px);
    line-height: clamp(36px, 5vw, 53px);
  }
} /* end @layer utilities */

/* =============================================================================
   6. CUSTOM: GLOBAL HELPERS & SCROLLBAR
   ============================================================================= */

/* Inner banner title */
.inner-bnr-title {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 400;
  line-height: clamp(40px, 6vw, 70px);
  padding-top: clamp(32px, 6vw, 92px);
}

/* Single service page title */
.single-service-title {
  font-family: var(--font-playfair);
  font-size: clamp(32px, 4.5vw, 74px);
  font-weight: 500;
  line-height: clamp(38px, 5.2vw, 84px);
  max-width: 750px;
  margin: 0 auto !important;
  text-align: center;
}
.single-service-title-wrap {
  padding-top: clamp(50px, 6vw, 60px);
}

/* Override: Deliberately re-maps .font-sans to the brand Stack Sans font
   (overrides the Tailwind @layer utilities definition above). */
.font-sans {
  font-family: var(--font-stack);
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Custom thin scrollbar (currently disabled — uncomment if needed)
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } */

/* Remove default WP figure margin in service listing */
.homepage-service-listing figure {
  margin-bottom: 0;
}
.homepage-service-listing img {
  will-change: transform;
}
.homepage-service-listing .title {
  color: white;
  font-weight: 500;
  font-family: var(--font-stack);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.2;
  max-width: 80%;
  width: 100%;
}
.insights-title {
  font-size: clamp(28px, 4vw, 60px);
  line-height: 1.2;
}
/* =============================================================================
   7. CUSTOM: HERO BANNER
   Full-viewport Swiper-based hero with overlay, title, and pagination.
   ============================================================================= */

.hero-banner {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Swiper fills full height */
.hero-banner .swiper,
.hero-banner .swiper-slide,
.hero-banner .swiper-wrapper {
  height: 100%;
}

/* Background image */
.hero-banner .hero-media {
  inset: 0;
  position: absolute;
}
.hero-banner .hero-bg {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Dark scrim overlay */
.hero-banner .hero-overlay {
  background: #00000073;
  inset: 0;
  position: absolute;
}

/* Content aligned to bottom */
.hero-banner .hero-content {
  align-items: flex-end;
  display: flex;
  height: 100%;
  position: relative;
  z-index: 2;
}
.hero-banner .hero-content-detailes {
  padding-bottom: 111px;
}

/* Hero heading */
.hero-banner .hero-title {
  color: #fff;
  font-size: clamp(32px, 5vw, 70px);
  line-height: 1.15;
  margin-bottom: 45px;
  max-width: 987px;
}
/* iPad portrait / tablet */
@media screen and (max-width: 1024px) {
  .hero-banner .hero-title {
    max-width: 750px;
  }
  .hero-banner .hero-pagination {
    right: 20px;
  }
}

/* Slide counter + bar pagination */
.hero-pagination {
  align-items: center;
  bottom: 111px;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  gap: 18px;
  position: absolute;
  right: 80px;
}
.hero-bars {
  display: flex;
  gap: clamp(5px, 1.5vw, 10px);
}
.hero-bars .bar {
  background: #ffffff59;
  height: 2px;
  width: 20px;
}
/* .hero-bars .bar.active {
  background: white !important;
} */

/* =============================================================================
   8. CUSTOM: TAB NAVIGATION
   Underline-slide tab buttons used in sectioned listings.
   ============================================================================= */
ul#insights-categories {
  overflow-x: auto;
  scrollbar-width: 0;
}
.tab-btn {
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  color: var(--color-black);
  padding-bottom: calc(var(--spacing) * 2);
  position: relative;
  --tw-leading: 22px;
  --tw-font-weight: var(--font-weight-medium);
  --tw-duration: 0.2s;
  --tw-ease: var(--ease-in-out);
  transition-property:
    color, background-color, border-color, outline-color, text-decoration-color,
    fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(
    --tw-ease,
    var(--default-transition-timing-function)
  );
  transition-duration: 0.2s;
}
@media (min-width: 48rem) {
  .tab-btn {
    padding-bottom: calc(var(--spacing) * 2.5);
    font-size: 17px;
    line-height: 24px;
    --tw-leading: 24px;
  }
}
@media (min-width: 64rem) {
  .tab-btn {
    font-size: 18px;
    line-height: var(--leading-normal);
    --tw-leading: var(--leading-normal);
  }
}

/* Animated underline via pseudo-element */
.tab-btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  margin-bottom: 1px;
  transform-origin: 50%;
  --tw-scale-x: 0%;
  --tw-duration: 0.3s;
  --tw-ease: var(--ease-in-out);
  transition-property: transform, translate, scale, rotate;
  transition-duration: 0.3s;
  transition-timing-function: var(--ease-in-out);
}
.tab-btn:after,
.tab-btn:hover:after {
  background-color: var(--color-black);
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.tab-btn:hover:after {
  --tw-scale-x: 100%;
}

/* Active state: blue colour + blue underline */
.tab-btn.active {
  color: #0000df;
}
.tab-btn.active:after {
  --tw-scale-x: 100%;
  background-color: #0000df;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}

/* Mobile Swiper pagination tweak */
@media (max-width: 768px) {
  #insights .swiper-pagination.swiper-pagination-bullets {
    bottom: 0 !important;
  }
}

/* =============================================================================
   9. CUSTOM: PARTNER CARDS
   Staff / team member cards in a grid.
   ============================================================================= */

.partner-card {
  height: 100%;
  padding-block: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 5);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f8f8f8;
  border-bottom: 1px var(--tw-border-style);
  border-color: #d2d2d2;
  font-family: var(--font-stack);
  --tw-duration: 0.2s;
  --tw-ease: var(--ease-in-out);
  transition-property:
    color,
    background-color,
    border-color,
    outline-color,
    text-decoration-color,
    fill,
    stroke,
    --tw-gradient-from,
    --tw-gradient-via,
    --tw-gradient-to,
    opacity,
    box-shadow,
    transform,
    translate,
    scale,
    rotate,
    filter,
    -webkit-backdrop-filter,
    backdrop-filter,
    display,
    content-visibility,
    overlay,
    pointer-events;
  transition-timing-function: var(
    --tw-ease,
    var(--default-transition-timing-function)
  );
  transition-duration: 0.2s;
}
@media (min-width: 40rem) {
  .partner-card {
    padding-block: calc(var(--spacing) * 10);
    padding-inline: calc(var(--spacing) * 6);
  }
}
@media (min-width: 48rem) {
  .partner-card {
    padding-block: 44px;
    padding-inline: 30px;
  }
}
/* Hover: coloured bottom border via inset shadow */
.partner-card:hover {
  border-color: #0000;
  box-shadow: inset 0 -2px #0000df;
}

/* Partner name */
.partner-card__name {
  color: var(--color-black);
  font-family: var(--font-stack);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  margin-bottom: calc(var(--spacing) * 1);
  --tw-font-weight: var(--font-weight-medium);
}
@media (max-width: 40rem) {
  .partner-card__name {
    font-size: var(--text-base);
  }
}

/* Partner role */
.partner-card__role {
  color: #6b6b6b;
  font-family: var(--font-stack);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  margin-bottom: calc(var(--spacing) * 4);
}
@media (min-width: 40rem) {
  .partner-card__role {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    margin-bottom: calc(var(--spacing) * 5);
  }
}

/* Email link */
.partner-card__email {
  color: #1e1e1e;
  font-family: var(--font-stack);
  font-size: 13px;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  transition-property:
    color,
    background-color,
    border-color,
    outline-color,
    text-decoration-color,
    fill,
    stroke,
    --tw-gradient-from,
    --tw-gradient-via,
    --tw-gradient-to,
    opacity,
    box-shadow,
    transform,
    translate,
    scale,
    rotate,
    filter,
    -webkit-backdrop-filter,
    backdrop-filter,
    display,
    content-visibility,
    overlay,
    pointer-events;
  transition-timing-function: var(
    --tw-ease,
    var(--default-transition-timing-function)
  );
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .partner-card__email:hover {
    color: var(--color-black);
  }
}

/* =============================================================================
   10. CUSTOM: SERVICE SECTION
   Two-column masonry-style layout with icon, heading, and bullet list.
   ============================================================================= */

/* ---- Service layout (masonry columns) ---- */
.service-layout {
  column-count: 1;
  column-gap: 0;
}
@media (max-width: 767.98px) {
  .service-layout {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
}

@media (min-width: 768px) {
  .service-layout {
    column-count: 2;
  }
}

/* ---- Service card ---- */
.service-card {
  display: inline-block; /* required for CSS columns */
  width: 100%;
  break-inside: avoid; /* prevent card splitting across columns */
  margin: 0 0 0 -1px;
  background: #fcfcfc;
  border: 1px solid #cfcfcf;
  padding: clamp(24px, 2vw, 32px);
}
@media (min-width: 768px) {
  .service-card {
    padding: 40px;
  }
}
@media (min-width: 1024px) {
  .service-card {
    padding: 50px 35px;
  }
}

/* ---- Card header (icon + title) ---- */
.service-card__header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}
.service-card__header h3 {
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}
@media (min-width: 1024px) {
  .service-card__header h3 {
    font-size: 28px;
  }
}

/* ---- Service icon ---- */
.service-icon {
  width: 48px;
  height: 48px;
  background: var(--color-blue-50);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Service list ---- */
.service-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 16px;
}
.service-card li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #272727;
}
.service-card li:not(:last-child) {
  margin-bottom: 15px;
}

/* Arrow bullet via SVG background */
.service-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 8px;
  background: url("https://varma.webc.in/wp/wp-content/uploads/2026/02/list-arow.svg")
    center / contain no-repeat;
}

/* ---- Homepage service overlay card (full-bleed image + gradient) ---- */
.service-overlay {
  background: linear-gradient(#0000, #0000008c);
  color: #fff;
  padding: 57px 37px;
}
.service-card:after,
.service-overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

.service-section .service-card {
  padding: 0 !important;
  border: none !important;
  position: relative;
}
.service-section .service-card .service-media {
  margin-bottom: 0 !important;
  overflow: hidden;
}
.service-section .service-card .service-media .service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card:hover .service-img {
  transform: scale(1.08);
}
.service-section .service-title {
  max-width: 80%;
  width: 100%;
  line-height: normal;
  font-size: clamp(18px, 2vw, 24px);
}
.service-section .service-overlay {
  padding: 24px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  @media (min-width: 1200px) {
    padding: 34px;
  }
}

/* Bottom blue line */
.service-section .service-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: rgb(0, 44, 255);
  transform: scaleY(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Hover animation */
.service-section .service-card:hover::after {
  transform: scaleY(1);
}
/* =============================================================================
   11. CUSTOM: HOMEPAGE SERVICE LISTING
   Image cards with animated bottom-border reveal on hover.
   ============================================================================= */

/* Positioning: overlay + hover bar share the same bottom anchor */
/* .homepage-service-listing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  width: 100%;
} */
.homepage-service-listing:after {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

/* Hover accent bar (scales up from bottom) */
.homepage-service-listing:after {
  background: #002cff;
  content: "";
  height: 7px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s;
  @media (max-width:767.98px){
    height: 0 !important;
  }
}
.homepage-service-listing:hover:after {
  transform: scaleY(1);
}

/* =============================================================================
   12. CUSTOM: CONTACT FORM (General / Home page)
   Floating-label inputs using CF7 markup.
   ============================================================================= */

/* =============================================================================
   13. CUSTOM: CAREER FORM
   Floating-label form with file upload and select dropdown.
   ============================================================================= */

/* ---- Form group wrapper ---- */
.careerForm .form-group {
  position: relative;
}
.home-general-form-wrapper .form-group {
  max-height: 100% !important;
}

/* .home-general-form-wrapper  .form-group.w-full:has(input[type="file"]) {
    border: 1px solid #dcdcdc;
} */
.careerForm .form-group.w-full textarea.wpcf7-textarea {
  height: 114px !important;
  /* max-height: 140px !important; */
  resize: none;
}
/* ---- Text / email / phone inputs ---- */
.careerForm .wpcf7-form-control.wpcf7-text,
.careerForm .wpcf7-form-control.wpcf7-email,
.careerForm .wpcf7-form-control.wpcf7-tel {
  width: 100%;
  height: 73px;
  padding: 26px 16px 8px 16px;
  border: 1px solid #dcdcdc;
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 500;
  background: #fff;
  color: #1a1a1a;
}

/* ---- Select dropdown ---- */
.careerForm select,
.careerForm .wpcf7-select {
  width: 100%;
  height: 73px;
  padding: 26px 48px 8px 16px; /* right padding leaves room for label */
  border: 1px solid #dcdcdc;
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 500;
  background-color: #fff;
  color: #1a1a1a;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  line-height: normal;
}

/* Custom dropdown chevron arrow */
/* .careerForm .form-group:has(select)::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
} */

/* ---- Textarea ---- */
.careerForm .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  min-height: 114px;
  padding: 28px 16px 14px 16px;
  border: 1px solid #dcdcdc;
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 500;
  resize: vertical;
  background: #fff;
}

/* ---- File upload ---- */
.careerForm .wpcf7-form-control.wpcf7-file {
  width: 100%;
  height: 100%;
  padding: 20px 16px;
  border: 1px solid #dcdcdc;
  font-family: var(--font-inter);
  font-size: 18px;
  display: flex;
  align-items: center;
  background: #fff;
}
.careerForm input[type="file"]::file-selector-button {
  background: #00338d;
  color: #fff;
  border: none;
  padding: 10px 18px;
  margin-right: 12px;
  cursor: pointer;
  font-family: var(--font-inter);
  font-size: 14px;
}
.careerForm input[type="file"]::file-selector-button:hover {
  background: #002a73;
}
#career-form figure {
  aspect-ratio: 556 / 567 !important;
  max-width: 556px !important;
}
/* .home-general-form-wrapper > p {
  padding-top: clamp(10px, 2vw, 67px);
} */
.career-form > p {
  padding-top: 50px !important;
}
/* ---- Floating label ---- */
.careerForm .form-group label {
  position: absolute;
  left: 16px;
  top: 24px;
  font-size: 14px;
  font-weight: 500;
  color: #898989;
  background: #fff;
  padding: 0 6px;
  pointer-events: none;
  transition: 0.25s ease;
  line-height: 1;
}

/* Float label when focused, filled, or select has a value */
.careerForm .form-group:has(.wpcf7-form-control:focus) label,
.careerForm .form-group:has(.wpcf7-form-control:not(:placeholder-shown)) label,
.careerForm .form-group:has(select:focus) label,
.careerForm .form-group:has(select:not([value=""])) label {
  top: 10px;
  font-size: 12px;
}

/* ---- Validation error ---- */
.careerForm span.wpcf7-not-valid-tip {
  font-size: 12px;
  margin-top: 6px;
  color: red;
}

/* ---- Submit button ---- */
.careerForm .wpcf7-submit {
  background: #00338d;
  color: #fff;
  border: 1px solid #00338d;
  padding: 14px 46px;
  font-family: var(--font-inter);
  font-size: 16px;
  cursor: pointer;
}
.careerForm .wpcf7-submit:hover {
  background: #002a73;
}

/* ---- Autofill override ---- */
.careerForm input:-webkit-autofill,
.careerForm textarea:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
  font-family: var(--font-inter) !important;
  font-size: 18px !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}

/* ---- Mobile overrides ---- */
@media (max-width: 768px) {
  .careerForm .wpcf7-form-control.wpcf7-text,
  .careerForm .wpcf7-form-control.wpcf7-email,
  .careerForm .wpcf7-form-control.wpcf7-tel,
  .careerForm select,
  .careerForm .wpcf7-select {
    height: 56px !important;
    padding: 20px 40px 4px 14px !important;
    font-size: 16px !important;
  }
  .careerForm .wpcf7-form-control.wpcf7-textarea {
    font-size: 16px !important;
    min-height: 120px !important;
  }
  .careerForm .form-group label {
    top: 18px !important;
    font-size: 13px !important;
  }
  .careerForm .form-group:has(.wpcf7-form-control:focus) label,
  .careerForm
    .form-group:has(.wpcf7-form-control:not(:placeholder-shown))
    label,
  .careerForm .form-group:has(select:focus) label {
    top: 8px !important;
    font-size: 11px !important;
  }
}

/* =============================================================================
   14. CUSTOM: INSIGHTS & RELATED SECTION
   Swiper-based insights listing + related posts grid.
   ============================================================================= */

/* ---- Insights Swiper bottom padding for pagination dots ---- */
.insightsSwiper.has-multiple-slides {
  padding-bottom: 44px;
}
@media (min-width: 768px) {
  .insightsSwiper.has-multiple-slides {
    padding-bottom: 54px;
  }
}

/* ---- Insight detail featured image ---- */
.insight-detail-featured {
  position: relative;
  overflow: hidden;
  max-width: 924px;
  width: 100%;
  aspect-ratio: 924 / 555; /* maintains correct height ratio */
  margin-bottom: 49px;
}
.insight-detail-featured .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.insight-detail-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Related section wrapper ---- */
.related-section {
  background: #f8f8f8;
  padding: 80px 0;
}
@media (max-width: 1024px) {
  .related-section {
    padding: 60px 0;
  }
}
@media (max-width: 640px) {
  .related-section {
    padding: 40px 0;
  }
}

/* ---- Related header (title + CTA button) ---- */
.related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 20px;
}
@media (max-width: 768px) {
  .related-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }
}

/* ---- Related section title ---- */
.related-insights {
  font-family: var(--font-inter);
  font-size: clamp(26px, 3vw, 40px);
  line-height: clamp(34px, 4vw, 50px);
  font-weight: 500;
  margin: 0;
  color: #111;
}

/* ---- Related posts grid ---- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 1200px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .related-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---- Related card ---- */
.related-card {
  display: block;
}

/* Card image with hover zoom */
.related-card__media {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  background: #ddd;
  max-width: 307px;
}
.related-card__media .wp-block-post-featured-image {
  margin: 0;
}
.related-card__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.related-card:hover img {
  transform: scale(1.05);
}

/* Card content */
.related-card__content {
  display: block;
}

/* Category label */
.related-card__category {
  font-size: 13px;
  line-height: 18px;
  color: #6b6b6b;
  margin-bottom: 20px;
}
.related-card__category a {
  color: inherit;
  text-decoration: none;
}
.related-card__category a {
  color: black !important;
}
/* Card title */
.related-card__title {
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  color: #111;
  margin: 0;
}
.related-card__title a {
  color: inherit;
  text-decoration: none;
}

/* ---- WordPress block spacing resets ---- */
.wp-block-post-featured-image {
  margin: 0;
}
.wp-block-post-title {
  margin: 0;
}

/* =============================================================================
   15. CUSTOM: ADMIN CONTENT AREA
   Rich-text / WYSIWYG content block styles for headings, paragraphs,
   lists, images, tables, blockquotes, code, and horizontal rules.
   ============================================================================= */
.admin-content-area {
  /* Base container (optional future use) */
}

/* ── LINKS ── */
.admin-content-area a {
  color: #123d8d;
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .admin-content-area a:not(.upload):hover {
    color: #0a2a63;
    text-decoration: underline;
  }
  .upload:hover{
    border-color: #0a2a63;
    span{
      color: #0a2a63;
    }
  }
}

/* ── STRONG ── */
.admin-content-area strong {
  font-weight: 900;
}

/* ── PARAGRAPH ── */
.admin-content-area p {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--primary-color);
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  .admin-content-area p {
    line-height: 1.65;
  }
}

/* ── PARAGRAPH SIBLINGS ── */
.admin-content-area p + h1,
.admin-content-area p + h2,
.admin-content-area p + h3,
.admin-content-area p + h4,
.admin-content-area p + h5,
.admin-content-area p + h6,
.admin-content-area p + ul,
.admin-content-area p + ol,
.admin-content-area p + figure,
.admin-content-area p + img {
  margin-top: 24px;
}

/* ── LISTS (CLEAN + BEST PRACTICE) ── */
.admin-content-area ul,
.admin-content-area ol {
  margin: 16px 0;
  padding-left: 20px;
}

/* UL */
.admin-content-area ul {
  list-style: disc;
}

.admin-content-area ul li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--primary-color);
}

.admin-content-area ul li + li {
  margin-top: 6px;
}

/* Nested UL */
.admin-content-area ul ul {
  list-style: circle;
  margin-top: 6px;
}

/* OL */
.admin-content-area ol {
  list-style: decimal;
}

.admin-content-area ol li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--primary-color);
}

.admin-content-area ol li + li {
  margin-top: 6px;
}

/* Nested OL */
.admin-content-area ol ol {
  list-style: lower-alpha;
  margin-top: 6px;
}

/* Desktop */
@media (min-width: 1200px) {
  .admin-content-area ul li,
  .admin-content-area ol li {
    font-size: 16px;
  }
}

/* ── LIST SIBLINGS ── */
.admin-content-area ul + p,
.admin-content-area ol + p,
.admin-content-area ul + img,
.admin-content-area ol + img {
  margin-top: 16px;
}

.admin-content-area ul + h2,
.admin-content-area ul + h3,
.admin-content-area ul + h4,
.admin-content-area ul + h5,
.admin-content-area ul + h6,
.admin-content-area ol + h2,
.admin-content-area ol + h3,
.admin-content-area ol + h4,
.admin-content-area ol + h5,
.admin-content-area ol + h6 {
  margin-top: 24px;
}

/* ── HEADINGS ── */
.admin-content-area h1,
.admin-content-area h2,
.admin-content-area h3,
.admin-content-area h4,
.admin-content-area h5,
.admin-content-area h6 {
  margin-bottom: 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--primary-color);
  font-weight: 900;
}

.admin-content-area h1 {
  font-size: 32px;
}
.admin-content-area h2 {
  font-size: 22px;
}
.admin-content-area h3 {
  font-size: 18px;
}
.admin-content-area h4 {
  font-size: 16px;
}
.admin-content-area h5,
.admin-content-area h6 {
  font-size: 15px;
}

@media (min-width: 992px) {
  .admin-content-area h1 {
    font-size: 2.25rem;
  }
  .admin-content-area h2 {
    font-size: 1.5rem;
  }
  .admin-content-area h3 {
    font-size: 1.25rem;
  }
}

/* Heading spacing */
.admin-content-area h1 + p,
.admin-content-area h2 + p,
.admin-content-area h3 + p,
.admin-content-area h4 + p,
.admin-content-area h5 + p,
.admin-content-area h6 + p,
.admin-content-area h1 + ul,
.admin-content-area h2 + ul,
.admin-content-area h3 + ul,
.admin-content-area h4 + ul,
.admin-content-area h5 + ul,
.admin-content-area h6 + ul {
  margin-top: 12px;
}

/* ── IMAGE ── */
.admin-content-area img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  margin: 24px 0;
}

/* ── FIGURE ── */
.admin-content-area figure {
  margin: 24px 0;
}

/* ── HR ── */
.admin-content-area hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 32px 0;
}

/* ── BLOCKQUOTE ── */
.admin-content-area blockquote {
  border-left: 4px solid #123d8d;
  padding: 16px 20px;
  margin: 24px 0;
  background-color: #f5f8ff;
  font-size: 16px;
  font-style: italic;
  color: var(--primary-color);
  line-height: 1.6;
}

/* ── TABLE ── */
.admin-content-area table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 14px;
}
.admin-content-area thead {
  background-color: #123d8d;
  color: #fff;
}
.admin-content-area th,
.admin-content-area td {
  padding: 10px 14px;
  text-align: left;
}
.admin-content-area td {
  border-bottom: 1px solid #e5e7eb;
}
.admin-content-area tr:nth-child(even) td {
  background-color: #f9fafb;
}

/* ── CODE ── */
.admin-content-area code {
  background-color: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
  color: #e63946;
}
.admin-content-area pre {
  background-color: #1e1e1e;
  color: #f8f8f2;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.6;
}

/* ............................................ */

@media (hover: hover) and (pointer: fine) {
  .share-icons a:hover svg rect {
    fill: #123d8d !important;
  }
}

/* ── DRAG CURSOR ── */
.drag-cursor {
  position: fixed;
  width: 122px;
  height: 122px;
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-inter);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  z-index: 999;
  letter-spacing: 0.5px;
}

.drag-cursor.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ✅ default — keep normal cursor */
.servicesSwiper,
.servicesSwiper .swiper-slide,
.servicesSwiper .swiper-slide * {
  cursor: auto;
}

/* Tablet */
@media (max-width: 1024px) {
  .drag-cursor {
    width: 100px;
    height: 100px;
    font-size: 16px;
  }
}

/* Small devices */
@media (max-width: 640px) {
  .drag-cursor {
    width: 80px;
    height: 80px;
    font-size: 14px;
  }
}

/* Disable on touch devices */
@media (hover: none) and (pointer: coarse) and (max-width: 1199.98px) {
  .drag-cursor {
    display: none !important;
    position: relative;
    width: 0;
    height: 0;
    font-size: 0;
  }

  .servicesSwiper,
  .servicesSwiper .swiper-slide,
  .servicesSwiper .swiper-slide * {
    cursor: auto !important;
  }
}
/* ............................................ */
.service-desc {
  margin-bottom: 24px;
}

.service-layout .service-card .desc {
  overflow: hidden;
  line-height: 1.6;
  max-height: calc(1.6em * 4);
  transition: max-height 0.4s ease;
}

.read-more-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;
  font-weight: 500;
  cursor: pointer;
  color: #000;
}

#who-we-are figure {
  margin-bottom: 0;
}

.about-banner-title {
  font-family: var(--font-playfair);
  font-size: clamp(28px, 4vw + 1rem, 60px);
  line-height: 1.2;
  color: white;
}
.about-bnr {
  padding-top: 5.9%;
}
.about-bnr-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(
      181.09deg,
      rgba(0, 0, 0, 0.54) 0.94%,
      rgba(0, 0, 0, 0) 35.73%
    ),
    linear-gradient(
      270.33deg,
      rgba(0, 0, 0, 0) 39.09%,
      rgba(0, 0, 0, 0.56) 89.07%
    );
}

.text-\[\#B9B9B9\] {
  color: #b9b9b9;
}
@media (min-width: 1024px) {
  .lg\:gap-x-\[5px\] {
    column-gap: 5px;
  }
}

/* ======================================================
TOUCH DEVICE HOVER FIX
Prevents sticky :hover effects on mobile & tablets
Add this at the END of the main stylesheet
====================================================== */

@media (hover: none) and (pointer: coarse) {
  /* Disable image zoom hover */
  .card-zoom:hover img {
    transform: none !important;
    scale: 1 !important;
  }

  /* Disable button hover states */
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover,
  .btn-submit:hover {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
  }

  /* Disable hover transforms and animations globally */
  /* *:hover {
    transform: none !important;
    scale: none !important;
  } */
}
/* ======================================================
GLOBAL TOUCH DEVICE HOVER FIX
Prevents sticky hover effects on mobile & tablets
====================================================== */

/* Allow hover effects ONLY on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .card-zoom:hover img {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

/* Disable hover effects on touch devices */
/* @media (hover: none) {
  *:hover {
    transform: none !important;
    scale: none !important;
    box-shadow: none !important;
  }
} */

.upload {
  width: fit-content;
  padding-bottom: 10px;
}
.upload img {
  margin: 0 !important;
}
.upload a {
  margin-bottom: 0 !important;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  font-weight: 500 !important;
  color: #000;
}
.upload-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px; /* gap-6 */
  margin-bottom: 24px; /* mb-6 */
}

/* lg breakpoint (1024px) */
@media (min-width: 1024px) {
  .upload-wrap {
    flex-direction: row; /* lg:flex-row */
    align-items: center; /* lg:items-center */
    margin-bottom: 54px; /* lg:mb-[54px] */
  }
}

/* 404 error page style */
.error-page {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px !important;
  text-align: center;
}

/* Overlay */
.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
}

/* Content above overlay */
.error-page > * {
  position: relative;
  z-index: 2;
}

/* H1 Styling */
.error-page h4 {
  font-size: 64px;
  color: black;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Paragraph */
.error-page p {
  color: black;
  font-size: 16px;
  margin-bottom: 25px;
  opacity: 0.9;
}

/* Button */
.primary-btn {
  background-color: #00338d;
  border-color: #00338d;
  border-style: var(--tw-border-style);
  border-width: 1px;
  color: #ffffff;
  border-radius: 0 !important;
  border-style: var(--tw-border-style);
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 17px;
  white-space: nowrap;
  align-items: center;
  border-width: 1px;
  display: inline-flex;
  justify-content: center;
  padding-block: 18px;
  padding-inline: 35px;
  -webkit-user-select: none;
  user-select: none;
  --tw-leading: 17px;
  --tw-font-weight: var(--font-weight-medium);
  --tw-duration: 0.2s;
  --tw-ease: var(--ease-out);
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-out);
}
.primary-btn:hover {
  background-color: #002a73;
  border-color: #002a73;
}

/* Mobile */
@media (max-width: 768px) {
  .error-page h4 {
    font-size: 34px;
  }

  .error-page p {
    font-size: 14px;
  }
}

/* Coming Soon Page Style */
.coming-soon-page {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px !important;
  text-align: center;
}

/* Overlay */
.coming-soon-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
}

/* Content above overlay */
.coming-soon-page > * {
  position: relative;
  z-index: 2;
}

/* Heading */
.coming-soon-page h4 {
  font-size: 64px;
  color: black;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Paragraph */
.coming-soon-page p {
  color: black;
  font-size: 16px;
  margin-bottom: 25px;
  opacity: 0.9;
}

/* Mobile */
@media (max-width: 768px) {
  .coming-soon-page h4 {
    font-size: 34px;
  }

  .coming-soon-page p {
    font-size: 14px;
  }
}

/* select2 style */
#locations .select2-selection,
#locations .select2-selection__rendered {
  height: 64px !important;
}
#locations .select2-selection__rendered {
  display: flex !important;
  align-items: center;
  padding: 24px 31px !important;
}
#locations .select2-selection__arrow {
  display: none;
}
.select2-dropdown {
  border-radius: 0 !important;
}
#locations .select2-container--default .select2-selection--single {
  border: 1px solid #bcbcbc !important;
  background-color: #f7f7f7 !important;
  border-radius: 0 !important;
}
/* =========================
   CONTAINER FIX (IMPORTANT)
========================= */
#locations .select2-container {
  width: 100% !important;
  max-width: 100%;
}

/* Prevent overflow causing horizontal scroll */
#locations .select2-dropdown {
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 0 !important;
}

#locations span.select2-search.select2-search--dropdown {
  display: none;
}
/* =========================
   SELECT FIELD
========================= */
.select2-container--default .select2-selection--single {
  height: 64px;
  border: 1px solid #bcbcbc;
  background-color: #f7f7f7;
  border-radius: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
}

/* Text */
#locations .select2-selection__rendered {
  padding: 0 !important;
  font-size: 16px;
  color: #333;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove default arrow */
#locations .select2-selection__arrow {
  display: none;
}

/* =========================
   DROPDOWN
========================= */
#locations .select2-dropdown {
  border: 1px solid #bcbcbc;
  border-top: none;
  border-radius: 0;
  background-color: #fff;
  overflow: hidden;
}

/* Options list */
#locations .select2-results__options {
  max-height: 240px;
  overflow-y: auto;
}

/* Each option */
#locations .select2-results__option {
  padding: 12px 16px;
  font-size: 15px;
  color: #333;
  font-weight: 400; /* FIX: prevents jump */
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover */
.select2-results__option--highlighted {
  background-color: #00338d !important;
  color: #fff;
}

/* Selected */
.select2-results__option[aria-selected="true"] {
  background-color: #e6ecf8;
  color: #00338d;
  font-weight: 400; /* FIXED */
}

/* =========================
   REMOVE SEARCH (CLEAN WAY)
========================= */
span.select2-search.select2-search--dropdown {
  display: none !important;
}

/* =========================
   FOCUS STATE
========================= */
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #00338d;
  background-color: #fff;
}

/* select in careerForm........................... */

.careerForm .select2-containerm,
.careerForm .select2-selection__rendered,
.careerForm .select2-selection {
  /* height: 73px !important; */
}

.careerForm .select2-selection__arrow {
  display: none !important;
}
.careerForm .select2-selection__rendered {
  display: flex;
  align-items: center;
  /* height: 35px !important; */
  margin-top: auto;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 500;
  color: #000 !important;
}
.careerForm .select2-selection {
  display: flex !important;
  align-items: end;
  padding: 0 15px;
  border-radius: 0 !important;
  border-color: #dcdcdc !important;
}
.careerForm label {
  color: #898989 !important;
}

.file-accept-types {
  padding-top: 10px;
  padding-bottom: 5px;
  margin: 0 !important;
  display: flex;
  justify-content: start;
}

@media (max-width: 575px) {
  .res-btn .btn {
    width: 100%;
  }
}


.value-item {
  position: relative;
}
/* Number styling */
.value-item::after {
  content: "02";
  
  position: absolute;
  left: 0;
  top: 0;

  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 136px;
  line-height: 1;

  color: #ffffff;
  opacity: 0.1;

  pointer-events: none;
}




/* ...............................................select......................... */
/* =============================================================================
   16. TAILWIND: @property REGISTRATIONS + @keyframes
   Must remain at the end of the file per Tailwind's output structure.
   ============================================================================= */

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}