/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
 Description: Child theme for Hello Elementor
 Version: 1.001
*/

/* ==========================================================================
    1. Font Definitions (@font-face)
    ========================================================================== */

@font-face {
    font-family: 'Forward Variable';
    src: url('https://typeforward.com/wp-content/uploads/2024/07/forward.woff2') format('woff2');
    font-variation-settings: 'wght' 50 950, 'wdth' 0 50;
    font-display: block;
}

@font-face {
    font-family: 'Gogh Variable';
    src: url('https://typeforward.com/wp-content/uploads/2024/07/GoghTVariable.woff2') format('woff2');
    font-variation-settings: 'wght' 50 900;
    font-display: block;

}

@font-face {
    font-family: 'Gogh Variable Italic';
    src: url('https://typeforward.com/wp-content/uploads/2024/07/GoghTVariableItalic.woff2') format('woff2');
    font-variation-settings: 'wght' 50 900;
    font-display: block;
}


/* ==========================================================================
    2. Global CSS Variables & Theme Settings
    ========================================================================== */

:root {

    /* === Base Color Palette === */
    --palette-dark: #0C0C0C;
    --palette-light: white;
    --palette-gray: #848484;




    /* === Colors === */
    --color-dark: var(--palette-dark);
    --color-light: var(--palette-light);
    --color-gray: var(--palette-gray);

    /* === Border Properties === */
    --ui-border-width: 2px;
    --radius-percentage-factor: 0.08;
    --ui-max-border-radius: 12px;

    /* === Transitions === */
    --ui-transition-duration: 0.12s;
    --ui-transition-timing-function: ease-in-out;

    /* === Font === */
    --ui-font-family: 'Gogh Variable', sans-serif;
    --font-family-italic: 'Gogh Variable Italic', var(--ui-font-family);

    --font-family-hero-showcase: 'Forward Variable', sans-serif;
    /* Specific font for hero showcase */


    /* Default Typographic Settings */
    --ui-font-size-default: 18px;
    /* Default font size for the root */
    --ui-line-height-default: 1.5;
    /* Default line height */
    --ui-letter-spacing-default: normal;
    /* Default letter spacing */
    --ui-font-weight-default-value: 400;
    /* Default font weight value for variable font */
    --ui-font-variation-settings-default: 'wght' var(--ui-font-weight-default-value);
    /* Default font variation setting for Gogh */


    /* === Focus Outline === */
    --focus-outline-width: 2px;
    --focus-outline-style: dotted;
    --focus-outline-color: var(--color-dark);
    --focus-outline-offset: 2px;
}

/* Theme specific overrides for sections. The places on dark background use these*/
.theme-dark {
    --color-dark: var(--palette-light);
    --color-light: var(--palette-dark);
}




/* ==========================================================================
    3. Comprehensive Global Resets & Base Styles
    ========================================================================== */

/* --- Core & Document --- */

html {
    /* 2. Global browser rendering adjustments */
    -webkit-text-size-adjust: 100%;
    /* Prevent font scaling in landscape on iOS */
    -moz-tab-size: 4;
    /* Standardize tab size (older Firefox) */
    tab-size: 4;
    /* Standardize tab size */
}

/* Universal Box Model, Spacing, and Border Reset.*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
}



/* Body Base Styles: Define appearance and layout for the main content area */
body {
    /* Basic layout: Ensure body fills viewport height */
    min-height: 100vh;
    /* Font rendering enhancements */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* HTML5 Block Element Display. */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/* Hidden Attribute & Template. */
[hidden],
template {
    display: none !important;
}


/* Typographic Resets. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin-block-start: 0;
    margin-block-end: 0;
    font-family: inherit;
    line-height: 1.2;
    color: inherit;
}

/* Paragraphs - reset default browser margins */
p {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Emphasis & Importance */
strong,
b {
    /* Prevent double-bolding */
    font-weight: normal;
    font-variation-settings: 'wght' 700;
}

em,
i {
    font-family: var(--font-family-italic);
    font-style: normal;
    /* Prevent double-italicizing */
}

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Code & Preformatted Text */
code,
kbd,
samp,
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Small Text */
small {
    font-size: 80%;
}

/* Abbreviations & Acronyms */
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
}


/* Apply dark theme colors if a section has the .theme-dark class */
.theme-dark {
    background-color: var(--color-light);
    color: var(--color-dark);
}

/* Custom Text Selection Styles.
    * Uses the current theme's primary text and background colors
    * to create an inverted selection effect.*/

::selection {
    background-color: var(--color-dark);
    color: var(--color-light);
    text-shadow: none;
}

/* Firefox specific */
::-moz-selection {
    background-color: var(--color-dark);
    color: var(--color-light);
    text-shadow: none;
}

/* --- Lists --- */

ul,
ol {
    /* This sets the bullet to be a solid circle. */
    list-style-type: disc;

    /* This is the key: 'outside' places the bullet to the left of the
     text block, creating the hanging indent effect from your picture. */
    list-style-position: outside;

    /* This adds space between the left edge and the bullet, and more
     importantly, between the bullet and your text.
     Adjust 25px to increase or decrease the spacing. */
    padding-left: 25px;
}

/* --- Links --- */

a {
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    /* Remove the gray background on active links in IE 10. */
}

a:hover,
a:active {
    color: inherit;
}


/* --- Media Elements --- */

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    /* Allow SVG color to be controlled by parent's text color */
    fill: currentColor;
}

/* --- Tables --- */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th,
td {
    text-align: left;
    font-weight: inherit;
    vertical-align: middle;
    padding: 0;
    /* Reset padding, often added by default */
}

/* --- Interaction & Theming --- */
/* Interactive Element Cursor Cues */
/* Interactive Element Cursor.
/* Interactive Element Cursor Cues */
button,
[type="button"],
[type="reset"],
[type="submit"],
select,
label[for] {
    cursor: pointer;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled],
input[disabled],
select[disabled],
textarea[disabled] {
    cursor: not-allowed;
}


/* Custom Text Selection Styles */
::selection {
    background-color: var(--color-dark);
    color: var(--color-light);
    text-shadow: none;
}

::-moz-selection {
    /* Firefox specific */
    background-color: var(--color-dark);
    color: var(--color-light);
    text-shadow: none;
}




/* ==========================================================================
    4. Element Normalization & Resets (Removed/Overrides Elementor, for custom styling)
    ========================================================================== */


/* --- General Form Element Reset --- */
/*
    * 1. Inherit typography.
    * 2. Remove default margins, padding, borders, background.
    * 3. Remove browser-specific appearances.
    * 4. Ensure consistent box model (already universal).
    * 5. Set consistent vertical alignment.
*/
button,
input,
optgroup,
select,
textarea {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    vertical-align: middle;
}

label {
    line-height: 1.4;
}

/* --- Text Inputs, Select, Textarea --- */

/* Common base styles/resets for text-based inputs, select, and textarea */
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    transition: all var(--ui-transition-duration) var(--ui-transition-timing-function);
    vertical-align: middle;
    font: inherit;
    color: inherit;
    background-color: transparent;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.e-con>.e-con-inner {
    margin: 0;
}

.e-con.e-flex>.e-con-inner {
    flex-grow: 0;
}

.e-con {
    /* --width: inherit; */
}




/* Fixed Problem with the footer direction */

.elementor-69 .elementor-element.elementor-element-db5bccc {
    flex-direction: row !important;
}

/* --- Mobile (max 744px) --- */
@media (max-width: 744px) {
    .elementor-69 .elementor-element.elementor-element-db5bccc {
        flex-direction: column-reverse !important;
    }
}

/* Textarea specific normalizations */
textarea {
    overflow: auto;
    /* Show scrollbars only when needed */
    resize: vertical;
    /* Allow only vertical resizing */
    vertical-align: top;
    /* Align better with labels for multi-line */
    -moz-appearance: none;
    /* Need explicit none for textarea in FF */
    appearance: none;
}

/* Select specific normalizations */
select {
    text-transform: none;
    /* Remove inheritance in Firefox */
    /* Requires custom arrow styling as appearance: none removes the default arrow */
    -moz-appearance: none;
    /* Explicitly remove default appearance */
    appearance: none;
}

/* Note: For select dropdown arrows, you'll need custom CSS, often using background images or pseudo-elements */

/* Search input specific normalizations */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    /* Remove built-in cancel/decoration */
}

input[type="search"] {
    /* Override base appearance: none for search-specific behavior if needed, */
    /* but keep webkit resets */
    -moz-appearance: textfield;
    /* Often desired behavior in FF */
    /* appearance: auto; */
    /* May be needed depending on desired styling */
}


/* Number input specific normalizations (remove spinners) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Use textfield appearance for consistent look */
input[type="number"] {
    -moz-appearance: textfield;
    /* Firefox */
    appearance: textfield;
    /* Standard (though base rule sets to none, this can override) */
}

/* Hide spinners in Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Buttons --- */
/* Specific resets and normalizations for buttons */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    /* Base resets */
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: normal;
    text-align: center;
    text-transform: none;
    vertical-align: middle;
    cursor: pointer;

    /* Correct inability to style clickable types in iOS/Safari */
    -webkit-appearance: button;
    -moz-appearance: none;
    appearance: none;
}

/* Remove excess padding/border in Firefox */
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Base interactive button styling (can be overridden by specific button components) */
/* Consolidate selectors for base styles */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    display: inline-block;
    /* Correct display */
    font-weight: inherit;
    /* Inherit font weight */
    white-space: nowrap;
    /* Prevent wrapping */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Prevent text selection */

    /* Resets for properties commonly defined in components */
    border: inherit;
    /* Use 'none' above or 'inherit' if base border exists */
    padding: inherit;
    /* Define padding in specific button styles */
    font-size: inherit;
    /* Inherit font size */
    border-radius: inherit;
    /* Define radius in specific button styles */
    transition: inherit;
    /* Define transitions in specific button styles */
}


/* Basic button hover/focus reset (prevents default browser styles) */
/* Define actual hover/focus styles in components */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="reset"]:hover,
[type="reset"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
    background-color: transparent;
    /* Ensures reset background persists */
    color: inherit;
    /* Ensures reset color persists */
    /* Add outline: none; here ONLY if you have robust :focus-visible styles */
    /* Example: outline: none; */
}

/* --- Other Input Types --- */

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    padding: 0;
}

.content__gdprLegal p {
    margin: 0px !important;
}

/* File input */
input[type="file"] {
    /* Full custom styling is complex and often involves hiding the default input */
    /* and styling a label or button instead. */
    /* Base resets for the input itself */
    background: transparent;
    border: none;
    padding: 0;
}

/* Reset the button part in WebKit */
input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none;
    /* Basic reset */
    appearance: none;
    /* Standard */
    font: inherit;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Reset the button part in Firefox (requires ::file-selector-button pseudo) */
input[type="file"]::file-selector-button {
    font: inherit;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    /* Add any specific button styling here if needed */
}

/* ==========================================================================
    5. Accessibility Features
    ========================================================================== */

/* --- Focus Styles (Modern Approach using :focus-visible) --- */
/**
    * Visible focus indicators are crucial for keyboard navigation and accessibility.
    * The following rules implement a modern approach using :focus-visible.
    * This shows focus styles primarily when interaction is via keyboard, providing essential cues without always showing them for mouse clicks.
    * It's still vital to ensure these focus styles are clear and have sufficient contrast. Define the --focus-* variables in your :root selector.
*/

/*
    * Remove default browser outline ONLY IF you provide clear custom :focus-visible styles.
    * Removing the outline without a replacement harms accessibility.
*/

*:focus {
    outline: none;
}

/* Add custom outline for elements when focused via keyboard or programmatically. */
*:focus-visible {
    /* Define these variables in :root or a suitable scope */
    outline-width: var(--focus-outline-width, 2px);
    /* Example: 2px */
    outline-style: var(--focus-outline-style, solid);
    /* Example: solid */
    outline-color: var(--focus-outline-color, Highlight);
    /* Example: Use system highlight or a high-contrast color */
    outline-offset: var(--focus-outline-offset, 2px);
    /* Example: 2px offset */
}


/* --- Reduced Motion Preference --- */
/**
    * Respect user's preference for reduced motion.
    * This disables or minimizes animations, transitions, and smooth scrolling
    * for users who have this preference set in their operating system or browser.
*/
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        /* For animations that repeat */
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        /* Disable smooth scrolling if used */
    }

    /*
            * Optional: Target specific elements if more granular control is needed.
            * Example:
            * .element-with-complex-animation { animation: none !important; }
            * html { scroll-behavior: auto !important; }
            */
}


/* ==========================================================================
    6. Base Style
    ========================================================================== */

html {
    /* 1. Root font size for REM units and base typographic defaults */
}


/* Body Base Styles: Define appearance and layout for the main content area */
body {
    background-color: var(--color-light);
    color: var(--color-dark);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-size-default);
    line-height: var(--ui-line-height-default);
    letter-spacing: var(--ui-letter-spacing-default);
    font-variation-settings: var(--ui-font-variation-settings-default);
    transition: font-variation-settings var(--ui-transition-duration) var(--ui-transition-timing-function);

    /* NOTE: Core typographic properties (font-size, font-family, line-height, etc.) are inherited from the 'html' element by default. */
}


/* ==========================================================================
   7. Layout (Refactored with Breakpoint Sections)
   ========================================================================== */

:root {
    /* --- Main Content Widths --- */
    --width-content-desktop: 1128px;
    --width-content-tablet: 744px;
    --width-content-mobile: 320px;

    /* --- Layout Component Widths --- */
    --width-main-desktop: 520px;
    --width-main-tablet: 376px;
    --width-side-all: 320px;

    /* --- Gaps & Padding --- */
    --padding-indent-desktop: 96px;
}

/* --- Common Base Styles --- */

/* --- Foundational Groupings --- */
.row,
.section__general,
.section__content-container,
.section__content,
.layout__main,
.layout__side,
.section__container-buttons,
.section__container-buttons-square,
.distribute-evenly {
    display: flex;
}

.section__content-container,
.layout__main,
.layout__side,
.section__container-buttons {
    flex-direction: column;
}

.row,
.section__container-buttons-square,
.section__content--row {
    flex-direction: row !important;
}

.section__general,
.section__content-container {
    align-items: center !important;
}

/* --- Internal Layout Components --- */
.layout__main,
.layout__side {
    flex-grow: 0 !important;
}


.title__box {
    width: 100%;
    padding-bottom: 6px;
    border-bottom: var(--ui-border-width) solid var(--color-dark);
}

/* --- Buttons & Modifiers --- */
.section__container-buttons {
    align-items: end;
    gap: 16px !important;
}

.section__container-buttons-square {
    gap: 24px !important;
}

.section__content--column {
    flex-direction: column !important;
}

/* --- Utility Classes --- */
.distribute-evenly {
    justify-content: space-between !important;
}

.layout--auto-width {
    width: auto !important;
}

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


/* ==========================================================================
   Responsive Styles per Breakpoint
   ========================================================================== */

/* --- Desktop (1336px and up) --- */
@media (min-width: 1336px) {
    .section__general {
        padding: 192px 0 !important;
        gap: 144px !important;
    }

    .section__content-container,
    .section__content,
    .section__content--row,
    .nav .section__content-container,
    .title__box {
        width: var(--width-content-desktop) !important;
    }

    .section__content-container {
        gap: 96px !important;
    }

    .section__content {
        gap: 96px !important;
    }

    .layout__main {
        width: var(--width-main-desktop) !important;
    }

    .layout__side {
        width: var(--width-side-all) !important;
    }

    .layout__main,
    .layout__side {
        gap: 48px !important;
    }

    .indented {
        padding-left: var(--padding-indent-desktop) !important;
        padding-right: var(--padding-indent-desktop) !important;
    }
}

/* --- Tablet (745px - 1335px) --- */
@media (min-width: 745px) and (max-width: 1335px) {
    .section__general {
        padding: 144px 0 !important;
        gap: 96px !important;
    }

    .section__content-container,
    .section__content,
    .section__content--row,
    .nav .section__content-container,
    .title__box {
        width: var(--width-content-tablet) !important;
    }
    
    .section__content-container {
        gap: 72px !important;
    }

    .section__content {
        gap: 48px !important;
    }

    .layout__main {
        width: var(--width-main-tablet) !important;
    }

    .layout__side {
        width: var(--width-side-all) !important;
    }
    
    .layout__main,
    .layout__side {
        gap: 48px !important;
    }

    .indented {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --- Mobile (max-width: 744px) --- */
@media (max-width: 744px) {
    .section__general {
        padding: 96px 0 !important;
        gap: 64px !important;
    }

    .section__content-container,
    .section__content,
    .section__content--row,
    .nav .section__content-container,
    .title__box {
        width: var(--width-content-mobile) !important;
    }

    .section__content-container {
        gap: 48px !important;
    }

    .section__content,
    .section__content--row {
        flex-direction: column !important;
    }

    .section__content {
        gap: 36px !important;
    }

    .layout__main,
    .layout__side {
        width: var(--width-content-mobile) !important;
    }
    
   .layout__main,
   .layout__side {
        gap: 24px !important;
    }

    .indented {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}





/* ==========================================================================
   8. Navigations
   ========================================================================== */


/* --- Specific Components (Nav, Title) --- */
.nav .section__content-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Base Navigation Styles --- */

.nav {
    background-color: var(--color-light);
    color: var(--color-dark);
    border-bottom: var(--ui-border-width) solid var(--color-dark);
    align-items: center;
    z-index: 1000;
    transition: background-color var(--ui-transition-duration) var(--ui-transition-timing-function), color var(--ui-transition-duration) var(--ui-transition-timing-function);
}

/* Adds overall padding to the navigation bar */
header.nav {
    padding: 12px;
}

/* --- Theming --- */

/* Modifier for navigation on a dark background */
.nav.nav-on-dark {
    background-color: var(--color-dark);
    color: var(--color-light);
    border-bottom: var(--ui-border-width) solid var(--color-light) !important;
}


/*
 * ULTRA-SPECIFICITY FIX V2:
 * Targets the mobile popup border by chaining the body and element classes.
*/
body.body-expects-dark-popup .elementor-6667.nav.nav-on-dark {
    border-bottom-color: var(--color-light) !important;
}


/* --- Navigation Layout Components --- */

/* 1. Logo */
.nav__logo {
    height: 64px;
    flex-shrink: 0; /* Prevents the logo from shrinking on smaller screens */
}

.nav__logo svg {
    height: 100%;
    width: auto;
}

/* 2. Desktop Navigation Container */
.nav__desktop {
    display: flex;
    /* Aligns the group of links to the far right of its container */
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 32px !important;
}


/* --- Navigation Item Styles --- */

/* 1. Link & Item Structure */
.nav__item {
    display: inline-block;
    position: relative;
    text-align: center;
}

.nav__link {
    text-decoration: none;
    display: inline-block;
}

.nav__text a {
    color: inherit !important;
}

/* 2. Typography & Hover Effect */
.nav__text,
.nav__text--hidden {
    font-size: 24px;
    position: relative;
}

/* Visible text, positioned over the hidden text */
.nav__text {
    font-variation-settings: 'wght' 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: font-variation-settings var(--ui-transition-duration) var(--ui-transition-timing-function);
}

/* Hidden bold text to reserve space and prevent layout shift on hover */
.nav__text--hidden {
    font-variation-settings: 'wght' 700;
    color: transparent;
}

/* On hover, make the visible text bold */
.nav__item:hover .nav__text {
    font-variation-settings: 'wght' 700;
}


/* --- Hamburger & Close Icons --- */

/* 1. Shared Variables */
:root {
    --hamburger-icon-width: 42px;
    --hamburger-icon-height: 28px;
    --hamburger-bar-thickness: 4px;
    --hamburger-bar-border-radius: 0px;
}

/* 2. Base Icon Styles (shared by Hamburger and Close) */
.nav__hamburger,
.nav__close {
    width: var(--hamburger-icon-width);
    height: var(--hamburger-icon-height);
    position: relative;
    cursor: pointer;
}

/* 3. Hamburger Icon (3 Bars) */
.nav__hamburger span,
.nav__hamburger::before,
.nav__hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top-width: var(--hamburger-bar-thickness);
    border-style: solid;
    border-color: currentColor;
    border-radius: var(--hamburger-bar-border-radius);
}

.nav__hamburger::before {
    top: 0;
}

.nav__hamburger span {
    top: 50%;
    transform: translateY(-50%);
}

.nav__hamburger::after {
    bottom: 0;
}

/* 4. Close Icon (X) */
.nav__close::before,
.nav__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--hamburger-bar-thickness);
    background-color: currentColor;
    border-radius: var(--hamburger-bar-border-radius);
    transition: transform var(--ui-transition-duration) var(--ui-transition-timing-function),
                opacity var(--ui-transition-duration) var(--ui-transition-timing-function);
}

.nav__close::before {
    transform: translateY(-50%) rotate(45deg);
}

.nav__close::after {
    transform: translateY(-50%) rotate(-45deg);
}


/* --- Mobile Popup Menu --- */

.nav__mobile--popup {
    height: 100vh;
    background-color: var(--color-light);
    color: var(--color-dark);
    transition: background-color var(--ui-transition-duration) var(--ui-transition-timing-function),
                color var(--ui-transition-duration) var(--ui-transition-timing-function);
}

.nav__mobile--popup a {
    color: inherit;
}

/* Proactive theming to prevent flash of incorrect theme */
.body-expects-dark-popup .nav__mobile--popup {
    background-color: var(--color-dark);
    color: var(--color-light);
}


/* --- Responsive Media Queries --- */

/* Tablet & Mobile */
@media (max-width: 1335px) {
    .nav__desktop {
        display: none !important;
    }

    .nav__mobile {
        display: flex !important;
        justify-content: center;
        align-items: center !important;
        width: auto;
    }
}

/* Desktop */
@media (min-width: 1336px) {
    .nav__desktop {
        display: flex !important;
    }

    .nav__mobile {
        display: none !important;
    }
}


/* --- Footer Navigation --- */

.footer-nav__item a {
    transition: font-variation-settings 0.12s ease-in-out;
    color: inherit;
    font-size: 20px;
}

.footer-nav__item a:hover {
    font-variation-settings: 'wght' 800 !important;
}


/* ==========================================================================
   Mobile Popup Alignment
   ========================================================================== */

/*
  STEP 1: Remove default Elementor wrapper padding.
  This allows our popup content to go to the edges of the screen.
*/
#elementor-popup-modal-6667 .dialog-widget-content {
    padding: 0 !important;
    background-color: transparent !important; /* Ensure no conflicting background */
}

/*
  STEP 2: Force the popup's internal header to match the main site header's padding.
  We target the custom container inside your popup.
*/
#elementor-popup-modal-6667 .nav__mobile--popup {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/*
  STEP 3: Force the popup's content width to match the main site's
  content width at both tablet and mobile breakpoints.
*/

/* --- For Tablet --- */
@media (min-width: 745px) and (max-width: 1335px) {
    #elementor-popup-modal-6667 .section__content-container {
        width: var(--width-content-tablet) !important;
    }
}

/* --- For Mobile --- */
@media (max-width: 744px) {
    #elementor-popup-modal-6667 .section__content-container {
        width: var(--width-content-mobile) !important;
    }
}