/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {

            *,
            :before,
            :after,
            ::backdrop {
               --tw-translate-x: 0;
               --tw-translate-y: 0;
               --tw-translate-z: 0;
               --tw-border-style: solid;
               --tw-font-weight: initial;
               --tw-ordinal: initial;
               --tw-slashed-zero: initial;
               --tw-numeric-figure: initial;
               --tw-numeric-spacing: initial;
               --tw-numeric-fraction: 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-content: "";
            }
         }
      }

      @layer theme {

         :root,
         :host {
            --font-sans: "Google Sans", "Roboto", sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            --color-emerald-400: oklch(76.5% .177 163.223);
            --spacing: .25rem;
            --text-xs: .75rem;
            --text-xs--line-height: calc(1 / .75);
            --text-sm: .875rem;
            --text-sm--line-height: calc(1.25 / .875);
            --text-base: 1rem;
            --text-base--line-height: calc(1.5 / 1);
            --font-weight-medium: 500;
            --radius-lg: .5rem;
            --radius-xl: .75rem;
            --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
            --default-transition-duration: .15s;
            --default-transition-timing-function: cubic-bezier(.31, .94, .34, 1);
            --default-font-family: var(--font-sans);
            --default-mono-font-family: var(--font-mono);
            --color-primary: var(--primary, #336ef3);
            --color-error: var(--brand-red, #ea4335);
            --color-success: var(--brand-green, #34a853);
            --color-card: var(--surface-container-de-emphasis, #f7f8fa);
            --color-border: var(--divider, #dcdfe5);
            --color-secondary-hover: var(--surface-container-highest, #e1e3e8);
            --color-muted: var(--surface-container, #f0f2f5);
            --color-muted-foreground: var(--on-surface-de-emphasis, #56595e);
            --color-foreground: var(--on-surface-default, #0a0a0a);
         }
      }

      @layer base {

         *,
         :after,
         :before,
         ::backdrop {
            box-sizing: border-box;
            border: 0 solid;
            margin: 0;
            padding: 0;
         }

         ::file-selector-button {
            box-sizing: border-box;
            border: 0 solid;
            margin: 0;
            padding: 0;
         }

         html,
         :host {
            -webkit-text-size-adjust: 100%;
            tab-size: 4;
            line-height: 1.5;
            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);
            -webkit-tap-highlight-color: transparent;
         }

         hr {
            height: 0;
            color: inherit;
            border-top-width: 1px;
         }

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

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

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

         b,
         strong {
            font-weight: bolder;
         }

         code,
         kbd,
         samp,
         pre {
            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-variation-settings: var(--default-mono-font-variation-settings, normal);
            font-size: 1em;
         }

         small {
            font-size: 80%;
         }

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

         sub {
            bottom: -.25em;
         }

         sup {
            top: -.5em;
         }

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

         :-moz-focusring {
            outline: auto;
         }

         progress {
            vertical-align: baseline;
         }

         summary {
            display: list-item;
         }

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

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

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

         button,
         input,
         select,
         optgroup,
         textarea {
            font: inherit;
            font-feature-settings: inherit;
            font-variation-settings: inherit;
            letter-spacing: inherit;
            color: inherit;
            opacity: 1;
            background-color: #0000;
            border-radius: 0;
         }

         ::file-selector-button {
            font: inherit;
            font-feature-settings: inherit;
            font-variation-settings: inherit;
            letter-spacing: inherit;
            color: inherit;
            opacity: 1;
            background-color: #0000;
            border-radius: 0;
         }

         :where(select:is([multiple], [size])) optgroup {
            font-weight: bolder;
         }

         :where(select:is([multiple], [size])) optgroup option {
            padding-inline-start: 20px;
         }

         ::file-selector-button {
            margin-inline-end: 4px;
         }

         ::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%, transparent);
               }
            }
         }

         textarea {
            resize: vertical;
         }

         ::-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 {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-year-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-month-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-day-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-hour-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-minute-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-second-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-millisecond-field {
            padding-block: 0;
         }

         ::-webkit-datetime-edit-meridiem-field {
            padding-block: 0;
         }

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

         button,
         input:where([type="button"], [type="reset"], [type="submit"]) {
            appearance: button;
         }

         ::file-selector-button {
            appearance: button;
         }

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

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

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

      @layer components;

      @layer utilities {
         .pointer-events-auto {
            pointer-events: auto;
         }

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

         .absolute {
            position: absolute;
         }

         .relative {
            position: relative;
         }

         .static {
            position: static;
         }

         .inset-x-0 {
            inset-inline: calc(var(--spacing) * 0);
         }

         .top-0 {
            top: calc(var(--spacing) * 0);
         }

         .top-1\/2 {
            top: 50%;
         }

         .right-0 {
            right: calc(var(--spacing) * 0);
         }

         .right-2\.5 {
            right: calc(var(--spacing) * 2.5);
         }

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

         .-my-3 {
            margin-block: calc(var(--spacing) * -3);
         }

         .mt-1 {
            margin-top: calc(var(--spacing) * 1);
         }

         .block {
            display: block;
         }

         .flex {
            display: flex;
         }

         .grid {
            display: grid;
         }

         .inline {
            display: inline;
         }

         .h-1 {
            height: calc(var(--spacing) * 1);
         }

         .h-9 {
            height: calc(var(--spacing) * 9);
         }

         .h-11 {
            height: calc(var(--spacing) * 11);
         }

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

         .h-full {
            height: 100%;
         }

         .w-9 {
            width: calc(var(--spacing) * 9);
         }

         .w-\[6ch\] {
            width: 6ch;
         }

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

         .w-full {
            width: 100%;
         }

         .min-w-0 {
            min-width: calc(var(--spacing) * 0);
         }

         .flex-1 {
            flex: 1;
         }

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

         .grow {
            flex-grow: 1;
         }

         .-translate-y-1\/2 {
            --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
         }

         .animate-ping {
            animation: var(--animate-ping);
         }

         .cursor-pointer {
            cursor: pointer;
         }

         .touch-none {
            touch-action: none;
         }

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

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

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

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

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

         .gap-0\.5 {
            gap: calc(var(--spacing) * .5);
         }

         .gap-1\.5 {
            gap: calc(var(--spacing) * 1.5);
         }

         .gap-3 {
            gap: calc(var(--spacing) * 3);
         }

         .gap-5 {
            gap: calc(var(--spacing) * 5);
         }

         .gap-x-4 {
            column-gap: calc(var(--spacing) * 4);
         }

         .gap-x-6 {
            column-gap: calc(var(--spacing) * 6);
         }

         .gap-y-4 {
            row-gap: calc(var(--spacing) * 4);
         }

         .truncate {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
         }

         .overflow-hidden {
            overflow: hidden;
         }

         .overflow-visible {
            overflow: visible;
         }

         .rounded {
            border-radius: .25rem;
         }

         .rounded-full {
            border-radius: 3.40282e38px;
         }

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

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

         .border {
            border-style: var(--tw-border-style);
            border-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-border {
            border-color: var(--color-border);
         }

         .\!bg-muted {
            background-color: var(--color-muted) !important;
         }

         .bg-\[\#0d1117\] {
            background-color: #0d1117;
         }

         .bg-\[\#0d1117\]\/60 {
            background-color: oklab(17.6285% -.00282954 -.0137322 / .6);
         }

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

         .bg-muted,
         .bg-muted\/90 {
            background-color: var(--color-muted);
         }

         @supports (color: color-mix(in lab, red, red)) {
            .bg-muted\/90 {
               background-color: color-mix(in oklab, var(--color-muted) 90%, transparent);
            }
         }

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

         .p-3 {
            padding: calc(var(--spacing) * 3);
         }

         .p-5 {
            padding: calc(var(--spacing) * 5);
         }

         .px-1\.5 {
            padding-inline: calc(var(--spacing) * 1.5);
         }

         .px-3 {
            padding-inline: calc(var(--spacing) * 3);
         }

         .px-5 {
            padding-inline: calc(var(--spacing) * 5);
         }

         .py-0\.5 {
            padding-block: calc(var(--spacing) * .5);
         }

         .py-3 {
            padding-block: calc(var(--spacing) * 3);
         }

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

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

         .font-sans {
            font-family: var(--font-sans);
         }

         .\!text-base {
            font-size: var(--text-base) !important;
            line-height: var(--tw-leading, var(--text-base--line-height)) !important;
         }

         .text-sm {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
         }

         .text-xs {
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height));
         }

         .font-medium {
            --tw-font-weight: var(--font-weight-medium);
            font-weight: var(--font-weight-medium);
         }

         .whitespace-nowrap {
            white-space: nowrap;
         }

         .whitespace-pre-wrap {
            white-space: pre-wrap;
         }

         .text-emerald-400 {
            color: var(--color-emerald-400);
         }

         .text-error {
            color: var(--color-error);
         }

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

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

         .text-success {
            color: var(--color-success);
         }

         .tabular-nums {
            --tw-numeric-spacing: tabular-nums;
            font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
         }

         .opacity-0 {
            opacity: 0;
         }

         .shadow-none {
            --tw-shadow: 0 0 #0000;
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         }

         .transition-all {
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
            transition-duration: var(--tw-duration, var(--default-transition-duration));
         }

         .transition-colors {
            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: var(--tw-duration, var(--default-transition-duration));
         }

         .duration-300 {
            --tw-duration: .3s;
            transition-duration: .3s;
         }

         .select-none {
            -webkit-user-select: none;
            user-select: none;
         }

         .after\:absolute:after {
            content: var(--tw-content);
            position: absolute;
         }

         .after\:-inset-1:after {
            content: var(--tw-content);
            inset: calc(var(--spacing) * -1);
         }

         .after\:top-1\/2:after {
            content: var(--tw-content);
            top: 50%;
         }

         .after\:left-1\/2:after {
            content: var(--tw-content);
            left: 50%;
         }

         .after\:h-11:after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 11);
         }

         .after\:w-11:after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 11);
         }

         .after\:-translate-x-1\/2:after {
            content: var(--tw-content);
            --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
         }

         .after\:-translate-y-1\/2:after {
            content: var(--tw-content);
            --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
         }

         @media (hover: hover) {
            .hover\:bg-secondary-hover:hover {
               background-color: var(--color-secondary-hover);
            }
         }

         .focus\:outline-none:focus {
            --tw-outline-style: none;
            outline-style: none;
         }

         .focus-visible\:ring-2:focus-visible {
            --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         }

         .focus-visible\:ring-primary:focus-visible {
            --tw-ring-color: var(--color-primary);
         }

         @media (min-width: 40rem) {
            .sm\:grid-cols-2 {
               grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .sm\:gap-x-8 {
               column-gap: calc(var(--spacing) * 8);
            }
         }

         @media (min-width: 48rem) {
            .md\:gap-x-12 {
               column-gap: calc(var(--spacing) * 12);
            }
         }
      }

      @media (prefers-color-scheme: dark) {
         :root:not(.light) {
            --color-primary: var(--primary, #336ef3);
            --color-primary-hover: var(--primary-hover, #395fe1);
            --color-error: var(--brand-red, #ea4335);
            --color-warning: var(--brand-yellow, #fbbc04);
            --color-success: var(--brand-green, #34a853);
            --color-background: var(--surface-container-de-emphasis, #272930);
            --color-card: var(--surface-container-de-emphasis, #272930);
            --color-card-hover: var(--surface-container-high, #363840);
            --color-border: var(--divider, #363840);
            --color-input: var(--surface-container, #2c2e35);
            --color-secondary: var(--surface-container-high, #363840);
            --color-secondary-hover: var(--surface-container-highest, #42444d);
            --color-accent: var(--surface-container-highest, #42444d);
            --color-accent-foreground: var(--on-surface-default, #e6e8f0);
            --color-muted: var(--surface-container, #2c2e35);
            --color-muted-foreground: var(--on-surface-de-emphasis, #adafb8);
            --color-foreground: var(--on-surface-default, #e6e8f0);
            --color-disabled: var(--surface-container, #2c2e35);
            --color-disabled-foreground: var(--disabled-foreground, #797c90);
         }
      }

      .dark {
         --color-primary: var(--primary, #336ef3);
         --color-primary-hover: var(--primary-hover, #395fe1);
         --color-error: var(--brand-red, #ea4335);
         --color-warning: var(--brand-yellow, #fbbc04);
         --color-success: var(--brand-green, #34a853);
         --color-background: var(--surface-container-de-emphasis, #272930);
         --color-card: var(--surface-container-de-emphasis, #272930);
         --color-card-hover: var(--surface-container-high, #363840);
         --color-border: var(--divider, #363840);
         --color-input: var(--surface-container, #2c2e35);
         --color-secondary: var(--surface-container-high, #363840);
         --color-secondary-hover: var(--surface-container-highest, #42444d);
         --color-accent: var(--surface-container-highest, #42444d);
         --color-accent-foreground: var(--on-surface-default, #e6e8f0);
         --color-muted: var(--surface-container, #2c2e35);
         --color-muted-foreground: var(--on-surface-de-emphasis, #adafb8);
         --color-foreground: var(--on-surface-default, #e6e8f0);
         --color-disabled: var(--surface-container, #2c2e35);
         --color-disabled-foreground: var(--disabled-foreground, #797c90);
      }

      input[type="date"]::-webkit-calendar-picker-indicator {
         cursor: pointer;
         opacity: .6;
      }

      @media (prefers-color-scheme: dark) {
         :root:not(.light) input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert();
            opacity: .7;
         }
      }

      .dark input[type="date"]::-webkit-calendar-picker-indicator {
         filter: invert();
         opacity: .7;
      }

      @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-border-style {
         syntax: "*";
         inherits: false;
         initial-value: solid;
      }

      @property --tw-font-weight {
         syntax: "*";
         inherits: false
      }

      @property --tw-ordinal {
         syntax: "*";
         inherits: false
      }

      @property --tw-slashed-zero {
         syntax: "*";
         inherits: false
      }

      @property --tw-numeric-figure {
         syntax: "*";
         inherits: false
      }

      @property --tw-numeric-spacing {
         syntax: "*";
         inherits: false
      }

      @property --tw-numeric-fraction {
         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-content {
         syntax: "*";
         inherits: false;
         initial-value: "";
      }

      @keyframes ping {

         75%,
         100% {
            opacity: 0;
            transform: scale(2);
         }
      }
      
      ul {
    padding-left: 25px; /* Standard indentation */
    margin: 20px 0;
}

li {
    margin-bottom: 18px;
    padding: 10px 0;
    font-weight: 500; /* Slightly bolder text */
    color: #cdcbcb;
    line-height: 1.6; /* Increased line height for better reading flow */
    border-bottom: 1px dashed #cccccc1c; /* A subtle separator */
}

/* Optional: Add a visual cue to the concepts themselves */
li::before {
    content: "• "; /* Use a custom marker */
    color: #2980b9; /* Highlight color */
    font-weight: bold;
    margin-right: 5px;
}

    /* --- Global Reset & Body Setup --- */


/* --- Hero Section Styling --- */
.hero-section {
    /* 1. Background Image Setup */
    background-image: url('../../../img/hero.png'); /* << CHANGE THIS PATH! */
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    
    /* 2. Full Screen Height & Positioning */
    height: 55vh; /* Takes up 80% of the viewport height */
    width: 100%;
    
    /* 3. Centering Content using Flexbox (The modern way) */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    
    /* Optional: To handle the image display cleanly */
    position: relative; 
    text-align: center;
    background-color: #0d1117;
}

.hs-h1{
   color: white;
}

.date-a{
   color: #74798b;
   font-size: 0.9rem;
}

/* --- Overlay for better Text Readability (Crucial for image backgrounds) --- */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Dark, semi-transparent overlay */
   /*  background-color: rgba(0, 0, 0, 0.5); Adjust opacity (0.5 is 50% black) */
    z-index: 1; /* Ensure the content sits above this overlay */
}

/* --- Content Box Styling --- */
.hero-content {
    z-index: 2; /* Make sure the text is visible on top of the overlay */
    max-width: 800px;
    padding: 40px;
    background-color: rgba(1, 8, 16, 0.725); /* Slightly transparent white box for readability */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Soft shadow */
}

/* --- Typography Styling (The H1) --- */
.hero-content h1 {
    font-size: 3.5em; /* Large and impactful size */
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700; /* Bold for impact */
    /* Optional: Add a subtle text shadow to make H1 pop off the image */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); 
}

.hero-content p {
    font-size: 1.25em;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- Call to Action Button Styling --- */
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff4d6d; /* Bright, contrasting color */
    color: white;
    text-decoration: none;
    border-radius: 50px; /* Pill shape */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid #ff4d6d;
}

.cta-button:hover {
    background-color: #e93f5a; /* Darker shade on hover */
    transform: translateY(-3px); /* Slight lift effect */
}

/* --- Responsiveness (Making it look good on smaller screens) --- */
@media (max-width: 768px) {
    .hero-content {
        padding: 30px 20px;
    }

    .hero-content h1 {
        font-size: 2.5em; /* Slightly smaller H1 for mobile */
    }

    .hero-content p {
        font-size: 1.1em;
    }
}