/* Import Tailwind CSS */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* IBM Plex Mono Latin 400 Normal */

@font-face {
  font-family: 'IBM Plex Mono';

  font-weight: 400;

  font-style: normal;

  font-display: optional;

  src:
      url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'),
      url('/fonts/ibm-plex-mono-latin-400-normal.woff') format('woff');

  unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
      U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

  ascent-override: 90%;

  descent-override: 22%;

  line-gap-override: 0%;

  size-adjust: 100%;
}

/* IBM Plex Mono Latin 700 Normal */

@font-face {
  font-family: 'IBM Plex Mono';

  font-weight: 700;

  font-style: normal;

  font-display: optional;

  src:
      url('/fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2'),
      url('/fonts/ibm-plex-mono-latin-700-normal.woff') format('woff');

  unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
      U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

  ascent-override: 90%;

  descent-override: 22%;

  line-gap-override: 0%;

  size-adjust: 100%;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(36 33 40 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* Typography base styles */

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  line-height: 1.2;
}

.gradient-bar {
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
}

.gradient-bg {
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
}

/* Social icon container - fixed positioning */

.social-icon-container {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
}

/* Social icon default state - prevent movement */

.social-icon {
  transition: opacity 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
}

/* Gradient overlay with LinkedIn icon shape - fixed positioning */

.social-icon-container.linkedin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cpath d='M49.3765 35.9082C49.3746 39.6426 47.8893 43.2234 45.2473 45.8627C42.6053 48.5021 39.0231 49.9838 35.2886 49.9819C31.5542 49.9801 27.9734 48.4948 25.334 45.8528C22.6947 43.2108 21.213 39.6285 21.2148 35.8941C21.2167 32.1596 22.702 28.5789 25.344 25.9395C27.986 23.3002 31.5682 21.8184 35.3027 21.8203C39.0372 21.8222 42.6179 23.3075 45.2573 25.9495C47.8966 28.5914 49.3783 32.1737 49.3765 35.9082ZM49.7989 60.4088H21.6373V148.555H49.7989V60.4088ZM94.2942 60.4088H66.2734V148.555H94.0126V102.299C94.0126 76.5313 127.595 74.1376 127.595 102.299V148.555H155.405V92.7242C155.405 49.2849 105.7 50.9042 94.0126 72.2366L94.2942 60.4088Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cpath d='M49.3765 35.9082C49.3746 39.6426 47.8893 43.2234 45.2473 45.8627C42.6053 48.5021 39.0231 49.9838 35.2886 49.9819C31.5542 49.9801 27.9734 48.4948 25.334 45.8528C22.6947 43.2108 21.213 39.6285 21.2148 35.8941C21.2167 32.1596 22.702 28.5789 25.344 25.9395C27.986 23.3002 31.5682 21.8184 35.3027 21.8203C39.0372 21.8222 42.6179 23.3075 45.2573 25.9495C47.8966 28.5914 49.3783 32.1737 49.3765 35.9082ZM49.7989 60.4088H21.6373V148.555H49.7989V60.4088ZM94.2942 60.4088H66.2734V148.555H94.0126V102.299C94.0126 76.5313 127.595 74.1376 127.595 102.299V148.555H155.405V92.7242C155.405 49.2849 105.7 50.9042 94.0126 72.2366L94.2942 60.4088Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease-in-out;
}

/* Gradient overlay with GitHub icon shape - fixed positioning */

.social-icon-container.github::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 147'%3E%3Cpath d='M75.0012 0.279297C65.188 0.279297 55.471 2.21214 46.4048 5.96746C37.3387 9.72278 29.101 15.227 22.1621 22.166C8.14826 36.1798 0.275391 55.1866 0.275391 75.0051C0.275391 108.034 21.7217 136.056 51.3878 145.995C55.1241 146.592 56.3197 144.276 56.3197 142.258V129.63C35.6207 134.113 31.2119 119.616 31.2119 119.616C27.7745 110.948 22.9173 108.632 22.9173 108.632C16.1173 103.999 23.4404 104.148 23.4404 104.148C30.913 104.671 34.8734 111.845 34.8734 111.845C41.3746 123.203 52.3593 119.841 56.6186 118.047C57.2912 113.19 59.234 109.902 61.3264 108.034C44.7372 106.166 27.3261 99.7393 27.3261 71.2688C27.3261 62.9742 30.1657 56.3236 35.0229 51.0181C34.2756 49.15 31.6602 41.3785 35.7701 31.2905C35.7701 31.2905 42.0471 29.2729 56.3197 38.9125C62.2231 37.2686 68.6495 36.4466 75.0012 36.4466C81.3529 36.4466 87.7793 37.2686 93.6826 38.9125C107.955 29.2729 114.232 31.2905 114.232 31.2905C118.342 41.3785 115.727 49.15 114.979 51.0181C119.837 56.3236 122.676 62.9742 122.676 71.2688C122.676 99.814 105.19 106.091 88.5265 107.959C91.2167 110.276 93.6826 114.834 93.6826 121.783V142.258C93.6826 144.276 94.8782 146.667 98.6892 145.995C128.355 135.981 149.727 108.034 149.727 75.0051C149.727 65.1919 147.794 55.4749 144.039 46.4088C140.283 37.3426 134.779 29.1049 127.84 22.166C120.901 15.227 112.664 9.72278 103.597 5.96746C94.5313 2.21214 84.8143 0.279297 75.0012 0.279297Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 147'%3E%3Cpath d='M75.0012 0.279297C65.188 0.279297 55.471 2.21214 46.4048 5.96746C37.3387 9.72278 29.101 15.227 22.1621 22.166C8.14826 36.1798 0.275391 55.1866 0.275391 75.0051C0.275391 108.034 21.7217 136.056 51.3878 145.995C55.1241 146.592 56.3197 144.276 56.3197 142.258V129.63C35.6207 134.113 31.2119 119.616 31.2119 119.616C27.7745 110.948 22.9173 108.632 22.9173 108.632C16.1173 103.999 23.4404 104.148 23.4404 104.148C30.913 104.671 34.8734 111.845 34.8734 111.845C41.3746 123.203 52.3593 119.841 56.6186 118.047C57.2912 113.19 59.234 109.902 61.3264 108.034C44.7372 106.166 27.3261 99.7393 27.3261 71.2688C27.3261 62.9742 30.1657 56.3236 35.0229 51.0181C34.2756 49.15 31.6602 41.3785 35.7701 31.2905C35.7701 31.2905 42.0471 29.2729 56.3197 38.9125C62.2231 37.2686 68.6495 36.4466 75.0012 36.4466C81.3529 36.4466 87.7793 37.2686 93.6826 38.9125C107.955 29.2729 114.232 31.2905 114.232 31.2905C118.342 41.3785 115.727 49.15 114.979 51.0181C119.837 56.3236 122.676 62.9742 122.676 71.2688C122.676 99.814 105.19 106.091 88.5265 107.959C91.2167 110.276 93.6826 114.834 93.6826 121.783V142.258C93.6826 144.276 94.8782 146.667 98.6892 145.995C128.355 135.981 149.727 108.034 149.727 75.0051C149.727 65.1919 147.794 55.4749 144.039 46.4088C140.283 37.3426 134.779 29.1049 127.84 22.166C120.901 15.227 112.664 9.72278 103.597 5.96746C94.5313 2.21214 84.8143 0.279297 75.0012 0.279297Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease-in-out;
}

/* Show gradient overlay and hide original icon when entire card is hovered */

.social-card:hover .social-icon-container::before {
  opacity: 1;
}

.social-card:hover .social-icon {
  opacity: 0;
}

/* Make button section respond to card hover */

.social-card:hover .social-button {
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
}

.container {
  width: 100%;
}

@media (min-width: 360px) {
  .container {
    max-width: 360px;
  }
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-\[calc\(env\(safe-area-inset-bottom\2c 0px\)\+2\.5rem\)\] {
  bottom: calc(env(safe-area-inset-bottom,0px) + 2.5rem);
}

.left-0 {
  left: 0px;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0px;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-4 {
  top: 1rem;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-full {
  grid-column: 1 / -1;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 44px;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-8 {
  height: 2rem;
}

.h-\[130svh\] {
  height: 130svh;
}

.h-\[235px\] {
  height: 235px;
}

.h-full {
  height: 100%;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[100svh\] {
  min-height: 100svh;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-16 {
  width: 4rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-30 {
  width: 120px;
}

.w-32 {
  width: 128px;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-\[165px\] {
  width: 165px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.max-w-20 {
  max-width: 5rem;
}

.max-w-28 {
  max-width: 7rem;
}

.max-w-32 {
  max-width: 128px;
}

.max-w-48 {
  max-width: 12rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-container {
  max-width: 1440px;
}

.max-w-content {
  max-width: 1200px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: 28rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.grow {
  flex-grow: 1;
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

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

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-y-auto {
  overflow-y: auto;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[\#6A686C\] {
  --tw-border-opacity: 1;
  border-color: rgb(106 104 108 / var(--tw-border-opacity, 1));
}

.border-\[\#FFFFFF33\] {
  border-color: #FFFFFF33;
}

.bg-\[\#2C2931\] {
  --tw-bg-opacity: 1;
  background-color: rgb(44 41 49 / var(--tw-bg-opacity, 1));
}

.bg-\[\#629FDE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(98 159 222 / var(--tw-bg-opacity, 1));
}

.bg-\[\#6A686C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(106 104 108 / var(--tw-bg-opacity, 1));
}

.bg-background-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(36 33 40 / var(--tw-bg-opacity, 1));
}

.bg-background-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(44 41 49 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-text-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-opacity-40 {
  --tw-bg-opacity: 0.4;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-90 {
  --tw-bg-opacity: 0.9;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-11 {
  padding-left: 44px;
  padding-right: 44px;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-32 {
  padding-top: 128px;
  padding-bottom: 128px;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-15 {
  padding-bottom: 60px;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-\[calc\(env\(safe-area-inset-bottom\2c 0px\)\+1\.25rem\)\] {
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + 1.25rem);
}

.pl-8 {
  padding-left: 2rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-helvetica {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.font-mono {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[130px\] {
  font-size: 130px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[48px\] {
  font-size: 48px;
}

.text-\[80px\] {
  font-size: 80px;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wide {
  letter-spacing: 0.96px;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-text-primary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-text-secondary {
  color: rgba(255, 255, 255, 0.5);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.opacity-0 {
  opacity: 0;
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* vertical center guide for headings */

.centerline {
  position: relative;
}

.centerline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  /* use your existing lines/ui stroke colors */
  background-color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  opacity: 0;
}

/* snap containers to either side of the centerline */

.center-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.snap-left {
  justify-self: end;
  /* right edge kisses the line */
  text-align: right;
}

.snap-right {
  justify-self: start;
  /* left edge kisses the line */
  text-align: left;
}

/* line is hidden on all screen sizes */

@media (min-width: 360px) {
  .centerline::before {
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .centerline::before {
    opacity: 0;
  }
}

/* Mobile menu animations */

.mobile-menu.open {
  transform: translateX(0);
}

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

/* Hamburger animation */

.\!hamburger.open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px) !important;
}

.hamburger.open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.\!hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0 !important;
}

.hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.\!hamburger.open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px) !important;
}

.hamburger.open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

body.menu-open {
  overflow: hidden;
}

/* Component styles moved to Tailwind utilities - hamburger animation needs custom CSS */

/* Import Fontsource IBM Plex Mono - only needed weights */

/* Using custom font-face declarations instead of fontsource CSS to control paths */

/* Base styles */

.hover\:gradient-text:hover {
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.group:hover .group-hover\:gradient-text {
  background: linear-gradient(
      90deg,
      #e4c555 0%,
      /* Yellow */ #629fde 16.66%,
      /* Blue */ #27ae60 33.32%,
      /* Green */ #ff3333 49.98%,
      /* Red */ #f45cb3 66.64%,
      /* Pink */ #f87c46 83.3%,
      /* Orange */ #ff6b35 100% /* Orange variant */
    );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-5:hover {
  --tw-bg-opacity: 0.05;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:bg-opacity-60 {
  --tw-bg-opacity: 0.6;
}

@media (min-width: 360px) {
  .xs\:bottom-\[calc\(env\(safe-area-inset-bottom\2c 0px\)\+3\.5rem\)\] {
    bottom: calc(env(safe-area-inset-bottom,0px) + 3.5rem);
  }

  .xs\:left-5 {
    left: 1.25rem;
  }

  .xs\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .xs\:mb-16 {
    margin-bottom: 4rem;
  }

  .xs\:mb-24 {
    margin-bottom: 6rem;
  }

  .xs\:mb-8 {
    margin-bottom: 2rem;
  }

  .xs\:block {
    display: block;
  }

  .xs\:hidden {
    display: none;
  }

  .xs\:h-80 {
    height: 20rem;
  }

  .xs\:h-9 {
    height: 2.25rem;
  }

  .xs\:w-9 {
    width: 2.25rem;
  }

  .xs\:w-auto {
    width: auto;
  }

  .xs\:flex-row {
    flex-direction: row;
  }

  .xs\:flex-col {
    flex-direction: column;
  }

  .xs\:gap-4 {
    gap: 1rem;
  }

  .xs\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .xs\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .xs\:text-left {
    text-align: left;
  }

  .xs\:text-\[18px\] {
    font-size: 18px;
  }

  .xs\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .xs\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .xs\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .xs\:leading-relaxed {
    line-height: 1.625;
  }
}

@media (min-width: 640px) {
  .sm\:mb-32 {
    margin-bottom: 128px;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:h-\[150svh\] {
    height: 150svh;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:text-\[130px\] {
    font-size: 130px;
  }

  .sm\:text-\[20px\] {
    font-size: 20px;
  }
}

@media (min-width: 768px) {
  .md\:bottom-16 {
    bottom: 4rem;
  }

  .md\:left-11 {
    left: 44px;
  }

  .md\:right-auto {
    right: auto;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-12 {
    margin-bottom: 3rem;
  }

  .md\:mb-16 {
    margin-bottom: 4rem;
  }

  .md\:mb-20 {
    margin-bottom: 5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-11 {
    height: 44px;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-\[400px\] {
    height: 400px;
  }

  .md\:min-h-\[500px\] {
    min-height: 500px;
  }

  .md\:w-11 {
    width: 44px;
  }

  .md\:w-6 {
    width: 1.5rem;
  }

  .md\:w-96 {
    width: 24rem;
  }

  .md\:w-\[180px\] {
    width: 180px;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

  .md\:max-w-2xl {
    max-width: 42rem;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:p-16 {
    padding: 4rem;
  }

  .md\:px-11 {
    padding-left: 44px;
    padding-right: 44px;
  }

  .md\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .md\:pt-24 {
    padding-top: 6rem;
  }

  .md\:text-\[24px\] {
    font-size: 24px;
  }

  .md\:text-\[80px\] {
    font-size: 80px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-paragraph {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:leading-relaxed {
    line-height: 1.625;
  }
}

@media (min-width: 1280px) {
  .mmd\:text-\[180px\] {
    font-size: 180px;
  }
}

@media (min-width: 1440px) {
  .lg\:mb-24 {
    margin-bottom: 6rem;
  }

  .lg\:min-h-\[600px\] {
    min-height: 600px;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-\[120px\] {
    font-size: 120px;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:leading-relaxed {
    line-height: 1.625;
  }
}