/*
 * Theme Name:   Digital Keys Child
 * Theme URI:    https://digital-keys.com.sa
 * Description:  Child theme for Hello Elementor — Digital Keys
 * Author:       Hasnain
 * Author URI:   https://digital-keys.com.sa
 * Template:     hello-elementor
 * Version:      1.0.4
 * Text Domain:  digital-keys-child
 */

:root {
    --color-bg-dark:       #0A0E17;
    --color-bg-dark-alt:   #0D1B2E;
    --color-bg-dark-card:  #111827;
    --color-bg-white:      #FFFFFF;
    --color-bg-light:      #F5F6F8;
    --color-bg-light-alt:  #EEF0F3;
    --color-accent:        #1B6FC8;
    --color-accent-hover:  #1559A8;
    --color-accent-light:  #D6E8F9;
    --color-eyebrow-text:  #5F6C7B;
    --color-eyebrow-icon:  #027AD5;
    --color-eyebrow:       #5F6C7B;
    --color-text-primary:  #00080F;
    --color-text-white:    #FFFFFF;
    --color-text-muted:    #5F6C7B;
    --color-text-muted-dk: #9CA3AF;
    --color-text-link:     #1B6FC8;

    --color-border:        #D4D4D4;
    --color-border-dark:   rgba(255, 255, 255, 0.08);
    --color-border-focus:  #1B6FC8;

    
    --btn-gradient:
        linear-gradient(
            50deg,
            rgba(138, 193, 255, 0.45) 0%,
            rgba(138, 193, 255, 0.05) 50%,
            rgba(138, 193, 255, 0.35) 100%
        );
    --btn-gradient-hover:
        linear-gradient(
            50deg,
            rgba(138, 193, 255, 0.60) 0%,
            rgba(138, 193, 255, 0.12) 50%,
            rgba(138, 193, 255, 0.50) 100%
        );
    --btn-gradient-reversed:
        linear-gradient(
            50deg,
            rgba(138, 193, 255, 0.05) 0%,
            rgba(138, 193, 255, 0.55) 50%,
            rgba(138, 193, 255, 0.05) 100%
        );
    --btn-stroke:        rgba(138, 193, 255, 0.50);
    --btn-pad-y:         18px;
    --btn-pad-x:         32px;
    --btn-gap:           12px;
    --btn-radius:        999px;
    --btn-text-on-light: #34373A;
    --btn-text-on-dark:  #FFFFFF;

    --color-btn-primary-bg:    rgba(138, 193, 255, 0.35);
    --color-btn-primary-text:  #34373A;
    --color-btn-primary-hover: rgba(138, 193, 255, 0.55);
    --color-btn-dark-bg:       #1E2A3A;
    --color-btn-dark-hover:    #263545;

    --font-en:   'Inter',  sans-serif;
    --font-ar:   'Cairo',  sans-serif;
    --font-mono: 'Courier New', monospace;

    --text-h1:  40px;
    --text-h2:  32px;
    --text-h3:  26px;
    --text-h4:  22px;
    --text-h5:  20px;
    --text-h6:  12px;

    --text-body:    16px;
    --text-body-sm: 15px;
    --text-caption: 14px;
    --text-label:   12px;

    --lh-h1:   1.20;
    --lh-h2:   1.25;
    --lh-h3:   1.30;
    --lh-h4:   1.35;
    --lh-h5:   1.60;
    --lh-h6:   1.60;
    --lh-body: 1.60;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     800;

    --ls-tight:  -0.01em;
    --ls-normal:  0;
    --ls-wide:    0.04em;
    --ls-wider:   0.08em;

    --space-1:    4px;
    --space-2:    8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-14:  56px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-28: 112px;
    --space-32: 128px;

    --section-pad-y:     var(--space-20);   /* 80px  */
    --section-pad-y-lg:  var(--space-32);   /* 128px */
    --section-pad-y-sm:  var(--space-10);   /* 40px  */
    --section-pad-x:     var(--space-12);   /* 48px  */
    --content-max-width: 1200px;
    --content-narrow:     800px;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-pill: 999px;

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    font-family:             var(--font-en);
    font-size:               var(--text-body-sm);
    font-weight:             var(--fw-regular);
    line-height:             var(--lh-body);
    color:                   var(--color-text-primary);
    background-color:        var(--color-bg-white);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
}

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

ul, ol {
    margin:  0;
    padding: 0;
}

h1,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xxl"],
.elementor-widget-heading h1 {
    font-family:    var(--font-en);
    font-size:      var(--text-h1);
    font-weight:    var(--fw-regular);
    line-height:    var(--lh-h1);
    letter-spacing: var(--ls-tight);
}

h2,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xl"],
.elementor-widget-heading h2 {
    font-family:    var(--font-en);
    font-size:      var(--text-h2);
    font-weight:    var(--fw-regular);
    line-height:    var(--lh-h2);
    letter-spacing: var(--ls-tight);
}

h3,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-large"],
.elementor-widget-heading h3 {
    font-family:    var(--font-en);
    font-size:      var(--text-h3);
    font-weight:    var(--fw-medium);
    line-height:    var(--lh-h3);
    letter-spacing: var(--ls-normal);
}

h4,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-medium"],
.elementor-widget-heading h4 {
    font-family:    var(--font-en);
    font-size:      var(--text-h4);
    font-weight:    var(--fw-medium);
    line-height:    var(--lh-h4);
    letter-spacing: var(--ls-normal);
}

h5,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-small"],
.elementor-widget-heading h5 {
    font-family:    var(--font-en);
    font-size:      var(--text-h5);
    font-weight:    var(--fw-regular);
    line-height:    var(--lh-h5);
    letter-spacing: var(--ls-normal);
}

h6,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xs"],
.elementor-widget-heading h6 {
    font-family:    var(--font-en);
    font-size:      var(--text-h6);
    font-weight:    var(--fw-semibold);
    line-height:    var(--lh-h6);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
}

p {
    font-family:   var(--font-en);
    font-size:     var(--text-body);
    font-weight:   var(--fw-regular);
    line-height:   var(--lh-body);
    color:         var(--color-text-muted);
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

.p-small,
.elementor-widget-text-editor.p-small p {
    font-size:   var(--text-body-sm);
    line-height: var(--lh-body);
}

.text-caption {
    font-size:      var(--text-caption);
    color:          var(--color-text-muted);
    letter-spacing: 0.01em;
}

.eyebrow,
.text-eyebrow,
h6.eyebrow,
.elementor-widget-heading h6.eyebrow,
.elementor-heading-title.eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  var(--space-4);
    font-family:    var(--font-en);
    font-size:      var(--text-h6);
    font-weight:    var(--fw-semibold);
    line-height:    var(--lh-h6);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color:          var(--color-eyebrow-text);
}

.eyebrow .eyebrow-icon,
.eyebrow i,
.eyebrow svg,
.text-eyebrow .eyebrow-icon,
.text-eyebrow i,
.text-eyebrow svg {
    color:       var(--color-eyebrow-icon);
    fill:        var(--color-eyebrow-icon);
    flex-shrink: 0;
    display:     inline-flex;
    align-items: center;
    font-size:   12px;
    line-height: 1;
}

.bg-dark     .eyebrow,
.bg-dark     .text-eyebrow,
.bg-dark-alt .eyebrow,
.bg-dark-alt .text-eyebrow,
[class*="bg-dark"] h6.eyebrow {
    color: #FFFFFF;
}

.bg-dark     .eyebrow i,
.bg-dark     .eyebrow svg,
.bg-dark     .eyebrow .eyebrow-icon,
.bg-dark-alt .eyebrow i,
.bg-dark-alt .eyebrow svg,
.bg-dark-alt .eyebrow .eyebrow-icon,
.bg-dark     .text-eyebrow i,
.bg-dark     .text-eyebrow svg,
.bg-dark-alt .text-eyebrow i,
.bg-dark-alt .text-eyebrow svg {
    color: #FFFFFF;
    fill:  #FFFFFF;
}

.eyebrow.elementor-icon-list-items,
.elementor-widget-icon-list.eyebrow .elementor-icon-list-items {
    display:   inline-flex;
    flex-wrap: nowrap;
    gap:       0;
}

.eyebrow .elementor-icon-list-item,
.elementor-widget-icon-list.eyebrow .elementor-icon-list-item {
    display:     inline-flex;
    align-items: center;
    gap:         12px;
}

.eyebrow .elementor-icon-list-icon,
.elementor-widget-icon-list.eyebrow .elementor-icon-list-icon {
    color:     var(--color-eyebrow-icon);
    font-size: 12px;
    width:     auto;
    margin:    0;
}

.eyebrow .elementor-icon-list-text,
.elementor-widget-icon-list.eyebrow .elementor-icon-list-text {
    font-family:    var(--font-en);
    font-size:      var(--text-h6);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color:          var(--color-eyebrow-text);
    padding:        0;
}

.bg-dark     .eyebrow .elementor-icon-list-icon,
.bg-dark-alt .eyebrow .elementor-icon-list-icon,
.bg-dark     .elementor-widget-icon-list.eyebrow .elementor-icon-list-icon,
.bg-dark-alt .elementor-widget-icon-list.eyebrow .elementor-icon-list-icon {
    color: #FFFFFF;
}

.bg-dark     .eyebrow .elementor-icon-list-text,
.bg-dark-alt .eyebrow .elementor-icon-list-text,
.bg-dark     .elementor-widget-icon-list.eyebrow .elementor-icon-list-text,
.bg-dark-alt .elementor-widget-icon-list.eyebrow .elementor-icon-list-text {
    color: #FFFFFF;
}

strong, b {
    font-weight: var(--fw-semibold);
}

em, i {
    font-style: italic;
}

a {
    color:           var(--color-text-link);
    text-decoration: none !important;
    transition:      color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}


.btn-primary,
.elementor-button.btn-primary,
.elementor-widget-button.btn-primary .elementor-button {
    display:              inline-flex;
    align-items:          center;
    gap:                  var(--btn-gap);
    padding:              var(--btn-pad-y) var(--btn-pad-x);
    background:           var(--btn-gradient);
    background-color:     transparent !important;
    color:                var(--color-text-white);
    font-family:          var(--font-en);
    font-size:            var(--text-body-sm);
    font-weight:          var(--fw-medium);
    line-height:          1;
    border-radius:        var(--btn-radius);
    border:               1px solid var(--btn-stroke);
    cursor:               pointer;
    white-space:          nowrap;
    text-decoration:      none !important;
    backdrop-filter:      blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        background   var(--transition-base),
        box-shadow   var(--transition-base),
        border-color var(--transition-base),
        transform    var(--transition-fast);
}

.btn-primary:hover,
.elementor-button.btn-primary:hover {
    background:   var(--btn-gradient-hover);
    border-color: rgba(138, 193, 255, 0.70);
    color:        var(--color-text-white);
    box-shadow:   0 4px 24px rgba(138, 193, 255, 0.30);
    transform:    translateY(-1px);
    text-decoration: none;
}

.btn-primary:active,
.elementor-button.btn-primary:active {
    transform:  translateY(0);
    box-shadow: none;
}

.btn-primary--dark,
.elementor-button.btn-primary--dark,
.elementor-widget-button.btn-primary--dark .elementor-button,
.bg-dark     .elementor-button.btn-primary,
.bg-dark-alt .elementor-button.btn-primary {
    color: var(--btn-text-on-dark);
}

.btn-primary--dark:hover,
.bg-dark     .elementor-button.btn-primary:hover,
.bg-dark-alt .elementor-button.btn-primary:hover {
    color: var(--btn-text-on-dark);
}

.btn-primary .elementor-button-icon,
.elementor-button.btn-primary .elementor-button-icon {
    display:     inline-flex;
    align-items: center;
    font-size:   1em;
    line-height: 1;
    flex-shrink: 0;
}

.btn-outline,
.elementor-button.btn-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--btn-gap);
    padding:         var(--btn-pad-y) var(--btn-pad-x);
    background:      transparent;
    color:           var(--btn-text-on-light);
    font-family:     var(--font-en);
    font-size:       var(--text-body-sm);
    font-weight:     var(--fw-medium);
    line-height:     1;
    border-radius:   var(--btn-radius);
    border:          1px solid var(--color-border);
    cursor:          pointer;
    white-space:     nowrap;
    text-decoration: none;
    transition:
        background   var(--transition-base),
        border-color var(--transition-base),
        color        var(--transition-base),
        transform    var(--transition-fast);
}

.btn-outline:hover,
.elementor-button.btn-outline:hover {
    background:   var(--btn-gradient);
    border-color: transparent;
    color:        var(--btn-text-on-light);
    transform:    translateY(-1px);
}

.btn-outline--dark,
.bg-dark     .elementor-button.btn-outline,
.bg-dark-alt .elementor-button.btn-outline {
    color:        var(--btn-text-on-dark);
    border-color: var(--btn-stroke);
}

.btn-outline--dark:hover,
.bg-dark     .elementor-button.btn-outline:hover,
.bg-dark-alt .elementor-button.btn-outline:hover {
    background:   var(--btn-gradient);
    border-color: transparent;
    color:        var(--btn-text-on-dark);
}

.bg-dark     { background-color: var(--color-bg-dark)     !important; }
.bg-dark-alt { background-color: var(--color-bg-dark-alt) !important; }
.bg-white    { background-color: var(--color-bg-white)    !important; }
.bg-light    { background-color: var(--color-bg-light)    !important; }

.bg-dark .elementor-heading-title,
.bg-dark-alt .elementor-heading-title,
.text-white {
    color: var(--color-text-white) !important;
}

.bg-dark p,
.bg-dark-alt p,
.text-muted-dark {
    color: var(--color-text-muted-dk) !important;
}

.section-pad    { padding-top: var(--section-pad-y);    padding-bottom: var(--section-pad-y); }
.section-pad-lg { padding-top: var(--section-pad-y-lg); padding-bottom: var(--section-pad-y-lg); }
.section-pad-sm { padding-top: var(--section-pad-y-sm); padding-bottom: var(--section-pad-y-sm); }
.no-pad-top     { padding-top:    0 !important; }
.no-pad-bottom  { padding-bottom: 0 !important; }


.content-narrow {
    max-width:    var(--content-narrow);
    margin-left:  auto;
    margin-right: auto;
}


hr,
.divider {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     var(--space-8) 0;
}

.bg-dark hr,
.bg-dark-alt hr {
    border-color: var(--color-border-dark);
}


.card {
    background:    var(--color-bg-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
    transition:
        box-shadow var(--transition-base),
        transform  var(--transition-base);
}

.card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform:  translateY(-2px);
}

.card-dark {
    background:    var(--color-bg-dark-card);
    border:        1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
}

.cards-grid              { align-items: stretch; }
.cards-grid > .e-con     { height: 100%; }


.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--content-max-width);
}


.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-en);
}


.elementor-widget-text-editor p {
    font-family: var(--font-en);
    font-size:   var(--text-body);
    line-height: var(--lh-body);
    color:       var(--color-text-muted);
}


.elementor-icon-list-item > .elementor-icon-list-text {
    font-family: var(--font-en);
    font-size:   var(--text-body-sm);
    line-height: var(--lh-body);
}


.elementor-nav-menu .elementor-item {
    font-family:    var(--font-en);
    font-size:      var(--text-body-sm);
    font-weight:    var(--fw-regular);
    letter-spacing: 0.01em;
    transition:     color var(--transition-fast);
}

.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item:hover {
    color: var(--color-accent) !important;
}

.sub-menu a.hfe-sub-menu-item {
    color:   var(--color-btn-dark-bg);
    padding: 16px 12px !important;
}

.elementor-widget-button .elementor-button {
    font-family:   var(--font-en);
    font-weight:   var(--fw-medium);
    font-size:     var(--text-body-sm);
    padding:       var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    position:      relative;
    overflow:      hidden;
    transition:
        background   var(--transition-base),
        border-color var(--transition-base),
        box-shadow   var(--transition-base),
        transform    var(--transition-fast);
}

.elementor-widget-button .elementor-button-content-wrapper {
    gap: var(--btn-gap);
}

.elementor-widget-button .elementor-button:hover {
    transform: translateY(-1px);
}

.elementor-widget-button .elementor-button.elementor-button-default,
.elementor-widget-button .elementor-button[class*="elementor-button-"] {
    background:           var(--btn-gradient);
    border:               1px solid var(--btn-stroke);
    color:                var(--btn-text-on-light);
    backdrop-filter:      blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.elementor-widget-button .elementor-button.elementor-button-default:hover,
.elementor-widget-button .elementor-button[class*="elementor-button-"]:hover {
    background:   var(--btn-gradient-reversed);
    border-color: rgba(138, 193, 255, 0.80);
    box-shadow:   0 4px 24px rgba(138, 193, 255, 0.25);
    color:        var(--btn-text-on-light);
}

.bg-dark     .elementor-widget-button .elementor-button,
.bg-dark-alt .elementor-widget-button .elementor-button {
    color: var(--btn-text-on-dark);
}

.bg-dark     .elementor-widget-button .elementor-button:hover,
.bg-dark-alt .elementor-widget-button .elementor-button:hover {
    color: var(--btn-text-on-dark);
}

.elementor-widget-button.btn-stroke .elementor-button {
    z-index:  0;
    overflow: visible;
    position: relative;
}

.elementor-widget-button.btn-stroke .elementor-button::before {
    content:       '';
    position:      absolute;
    inset:         -1px;
    border-radius: inherit;
    background:    transparent;
    border:        1px solid transparent;
    transition:
        box-shadow   600ms ease,
        border-color 600ms ease;
    pointer-events: none;
    z-index:        1;
}

.elementor-widget-button.btn-stroke .elementor-button:hover {
    background:   var(--btn-gradient-reversed) !important;
    border-color: rgba(138, 193, 255, 0.20) !important;
    box-shadow:   none;
    transform:    translateY(-1px);
}

.elementor-widget-button.btn-stroke .elementor-button:hover::before {
    border-color: rgba(138, 193, 255, 0.90);
    box-shadow:
        0 0  8px 1px rgba(138, 193, 255, 0.50),
        0 0 20px 2px rgba(138, 193, 255, 0.25),
        inset 0 0 8px 1px rgba(138, 193, 255, 0.15);
}

.bg-dark     .elementor-widget-button.btn-stroke .elementor-button,
.bg-dark-alt .elementor-widget-button.btn-stroke .elementor-button {
    color: var(--btn-text-on-dark);
}

.bg-dark     .elementor-widget-button.btn-stroke .elementor-button:hover,
.bg-dark-alt .elementor-widget-button.btn-stroke .elementor-button:hover {
    color: var(--btn-text-on-dark);
}

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-button.btn-stroke .elementor-button::before,
    .elementor-widget-button.btn-stroke .elementor-button {
        transition: none;
    }
}

.elementor-counter-number-wrapper {
    font-family: var(--font-en);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}

.elementor-counter-title {
    font-family: var(--font-en);
    font-size:   var(--text-caption);
    color:       var(--color-text-muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea {
    font-family:   var(--font-en);
    font-size:     var(--text-body-sm);
    color:         var(--color-text-primary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       10px var(--space-4);
    width:         100%;
    transition:
        border-color var(--transition-fast),
        box-shadow   var(--transition-fast);
    background:    var(--color-bg-white);
}

input:focus,
select:focus,
textarea:focus {
    outline:      none;
    border-color: var(--color-border-focus);
    box-shadow:   0 0 0 3px rgba(27, 111, 200, 0.12);
}

#card-services,    .card-services,
#card-sub-services, .card-sub-services {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius-xl);
}

#card-services > *,    .card-services > *,
#card-sub-services > *, .card-sub-services > * {
    position: relative;
    z-index:  1;
}

#card-services::before,    .card-services::before,
#card-sub-services::before, .card-sub-services::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background-size:     cover;
    background-repeat:   no-repeat;
    border-radius:  inherit;
    z-index:        0;
    pointer-events: none;
}

#card-services,
.card-services {
    min-height: 280px;
}
 
#card-services::before,
.card-services::before {
    background-image:    var(--img-card-bg);
    background-position: center center;
}

#card-sub-services,
.card-sub-services {
    min-height: 260px;
}
#card-sub-services::before,
.card-sub-services::before {
    background-image:    var(--img-card-bg);
    background-size:     90% 90%;
    background-position: center center;
}


.trp-shortcode-switcher__wrapper {
    display:       inline-flex !important;
    align-items:   center !important;
    background:    #F2F2F2 !important;
    border-radius: 999px !important;
}

.trp-opposite-button {
    border:     none !important;
    background: transparent !important;
    padding:    0 !important;
}

.trp-current-language-item__wrapper {
    display:     inline-flex !important;
    align-items: center !important;
}

.trp-opposite-button .trp-language-item {
    font-family:     var(--font-en) !important;
    font-size:       14px !important;
    color:           var(--color-bg-dark) !important;
    text-decoration: none !important;
    transition:      color 0.2s !important;
}

.wpcf7,
.wpcf7 form {
    width: 100%;
}

.wpcf7-form p {
    margin:      0;
    font-size:   inherit;   
    color:       inherit;
    line-height: inherit;
}

.cf7-stack {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5); 
    width:          100%;
}

.cf7-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-6);
    width:                 100%;
}

.cf7-grid .full-width {
    grid-column: 1 / -1;
}

.wpcf7-form label {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);   /* 8px label ↔ field */
    width:          100%;
    font-family:    var(--font-en);
    font-size:      var(--text-body-sm);
    font-weight:    var(--fw-medium);
    color:          var(--color-text-primary);
}

.wpcf7-form-control-wrap {
    display: block;
    width:   100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
    font: inherit;                    
    font-family: var(--font-en);      
    font-size:   var(--text-body-sm);
    font-weight: var(--fw-regular);
    color:       var(--color-text-primary);
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
    width:              100%;
    max-width:          100%;
    padding:            14px var(--space-4);   /* 14px 16px */
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-md);      /* 8px */
    background:         var(--color-bg-white);
    font-family:        var(--font-en);
    font-size:          var(--text-body-sm);
    font-weight:        var(--fw-regular);
    line-height:        var(--lh-body);
    color:              var(--color-text-primary);
    box-sizing:         border-box;
    transition:
        border-color var(--transition-fast),
        box-shadow   var(--transition-fast);
    appearance:         none;
    -webkit-appearance: none;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
    outline:      none;
    border-color: var(--color-border-focus);
    box-shadow:   0 0 0 3px rgba(27, 111, 200, 0.12);
}

.wpcf7 textarea.wpcf7-textarea {
    font-family: var(--font-en);   
    font-size:   var(--text-body-sm);
    line-height: var(--lh-body);
    min-height:  120px;            
    max-height:  300px;
    resize:      vertical;
}

.wpcf7 select.wpcf7-select {
    font-family:         var(--font-en);   
    font-size:           var(--text-body-sm);
    cursor:              pointer;
    
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F6C7B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right:       40px;
}

[dir="rtl"] .wpcf7 select.wpcf7-select,
html[lang="ar"] .wpcf7 select.wpcf7-select {
    background-position: left 14px center;
    padding-right:       var(--space-4);
    padding-left:        40px;
}

.dk-select {
    position:      relative;
    width:         100%;
    box-sizing:    border-box;
    cursor:        pointer;
    user-select:   none;
    -webkit-user-select: none;
}

.dk-select__selected {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         14px var(--space-4);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    background:      var(--color-bg-white);
    font-family:     var(--font-en);
    font-size:       var(--text-body-sm);
    font-weight:     var(--fw-regular);
    line-height:     var(--lh-body);
    color:           var(--color-text-primary);
    box-sizing:      border-box;
    transition:
        border-color var(--transition-fast),
        box-shadow   var(--transition-fast);
}

.dk-select--open .dk-select__selected,
.dk-select:focus .dk-select__selected {
    outline:      none;
    border-color: var(--color-border-focus);
    box-shadow:   0 0 0 3px rgba(27, 111, 200, 0.12);
}

.dk-select--invalid .dk-select__selected {
    border-color: #dc3232;
}

.dk-select__selected-text {
    flex: 1;
    min-width: 0;
    overflow:  hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dk-select__selected-text--placeholder {
    color: #9CA3AF;
}

.dk-select__caret {
    flex-shrink: 0;
    width:       12px;
    height:      8px;
    color:       var(--color-eyebrow-text);
    transition:  transform var(--transition-fast);
}

.dk-select--open .dk-select__caret {
    transform: rotate(180deg);
}

.dk-select__list {
    position:     absolute;
    top:          calc(100% + 4px);
    left:         0;
    right:        0;
    z-index:      999;
    list-style:   none;
    margin:       0;
    padding:      var(--space-2) 0;
    background:   var(--color-bg-white);
    border:       1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:   0 8px 24px rgba(0, 0, 0, 0.08);
    max-height:   240px;
    overflow-y:   auto;
    display:      none;
}

.dk-select--open .dk-select__list {
    display: block;
}

.dk-select__option {
    padding:     10px var(--space-4);
    font-family: var(--font-en);
    font-size:   var(--text-body-sm);
    font-weight: var(--fw-regular);
    color:       var(--color-text-primary);
    cursor:      pointer;
    transition:  background var(--transition-fast),
                 color      var(--transition-fast);
    line-height: var(--lh-body);
}

.dk-select__option:hover {
    background: var(--color-accent-light);
    color:      var(--color-accent);
}

.dk-select__option--active {
    background: var(--color-accent-light);
    color:      var(--color-accent);
    font-weight: var(--fw-medium);
}

.dk-select__option--placeholder {
    color: #9CA3AF;
}

.dk-select__option--placeholder:hover {
    background: var(--color-bg-light);
    color:      #9CA3AF;
}

.bg-dark     .dk-select__selected,
.bg-dark-alt .dk-select__selected {
    background:   var(--color-bg-dark-card);
    border-color: var(--color-border-dark);
    color:        var(--color-text-white);
}

.bg-dark     .dk-select__list,
.bg-dark-alt .dk-select__list {
    background:   var(--color-bg-dark-card);
    border-color: var(--color-border-dark);
}

.bg-dark     .dk-select__option,
.bg-dark-alt .dk-select__option {
    color: var(--color-text-white);
}

.bg-dark     .dk-select__option:hover,
.bg-dark-alt .dk-select__option:hover,
.bg-dark     .dk-select__option--active,
.bg-dark-alt .dk-select__option--active {
    background: rgba(27, 111, 200, 0.25);
    color:      var(--color-text-white);
}

[dir="rtl"] .dk-select__selected,
html[lang="ar"] .dk-select__selected {
    flex-direction: row-reverse;
}

[dir="rtl"] .dk-select__list,
html[lang="ar"] .dk-select__list {
    text-align: right;
}

.wpcf7 .wpcf7-list-item-label {
    font-family: var(--font-en);
    font-size:   var(--text-body-sm);
    color:       var(--color-text-primary);
}

.wpcf7 input[type="file"] {
    font-family: var(--font-en);
    font-size:   var(--text-body-sm);
}

.wpcf7-not-valid-tip {
    margin-top:  var(--space-1);       /* 4px */
    font-family: var(--font-en);
    font-size:   var(--text-caption);  
    color:       #dc3232;              
}

[dir="rtl"] .wpcf7-not-valid-tip,
html[lang="ar"] .wpcf7-not-valid-tip {
    direction: rtl;
}

.wpcf7 form .wpcf7-response-output {
    margin:        var(--space-5) 0 0;
    padding:       var(--space-3) var(--space-5);
    border-width:  2px;
    border-style:  solid;
    border-radius: var(--radius-md);
    font-family:   var(--font-en);
    font-size:     var(--text-body-sm);
    line-height:   var(--lh-body);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}

.wpcf7 form.sent .wpcf7-response-output         { border-color: #46b450; color: #1a5e1e; background: #f0faf0; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output       { border-color: #dc3232; color: #7a1010; background: #fdf0f0; }
.wpcf7 form.spam .wpcf7-response-output          { border-color: #f56e28; color: #7a3010; background: #fdf4f0; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; color: #6b4c00; background: #fffbf0; }

.wpcf7-spinner {
    margin: 0 0 0 var(--space-3);   
}

.wpcf7 input.wpcf7-submit {
    
    -webkit-appearance: none;
    appearance:         none;
    outline:            none;

    display:            inline-block;
    text-align:         center;
    box-sizing:         border-box;
    cursor:             pointer;
    white-space:        nowrap;

    padding:            var(--btn-pad-y) var(--btn-pad-x);

    font-family:        var(--font-en);
    font-size:          var(--text-body-sm);
    font-weight:        var(--fw-medium);
    line-height:        1;
    color:              var(--btn-text-on-light);

    border-radius:      var(--btn-radius);
    border:             1px solid var(--btn-stroke);
    
    background:         var(--btn-gradient);
    backdrop-filter:    blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background   var(--transition-base),
        border-color var(--transition-base),
        box-shadow   var(--transition-base),
        transform    var(--transition-fast);
}

.wpcf7 input.wpcf7-submit:hover {
    background:   var(--btn-gradient-hover);
    border-color: rgba(138, 193, 255, 0.70);
    box-shadow:   0 4px 24px rgba(138, 193, 255, 0.30);
    transform:    translateY(-1px);
    color:        var(--btn-text-on-light);
}

.wpcf7 input.wpcf7-submit:active {
    transform:  translateY(0);
    box-shadow: none;
}

.wpcf7 input.wpcf7-submit:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.bg-dark     .wpcf7 input.wpcf7-submit,
.bg-dark-alt .wpcf7 input.wpcf7-submit {
    color: var(--btn-text-on-dark);
}

.bg-dark     .wpcf7 input.wpcf7-submit:hover,
.bg-dark-alt .wpcf7 input.wpcf7-submit:hover {
    color: var(--btn-text-on-dark);
}


@media (max-width: 1024px) {
    :root {
        --text-h1:          34px;
        --text-h2:          28px;
        --text-h3:          22px;
        --text-h4:          20px;
        --text-h5:          18px;
        --text-body:        17px;
        --section-pad-y:    var(--space-16);
        --section-pad-y-lg: var(--space-24);
    }


    #card-services,
    .card-services {
        min-height: 320px;
    }

    #card-services::before,
    .card-services::before {
        background-size:     cover;
        background-position: center center;
    }


    #card-sub-services,
    .card-sub-services {
        min-height: 300px;
    }

    #card-sub-services::before,
    .card-sub-services::before {
        background-size:     cover;
        background-position: center center;
    }
}


@media (max-width: 767px) {
    :root {
        --text-h1:          28px;
        --text-h2:          24px;
        --text-h3:          20px;
        --text-h4:          18px;
        --text-h5:          17px;
        --text-body:        16px;
        --section-pad-y:    var(--space-12);   /* 48px */
        --section-pad-y-lg: var(--space-16);   /* 64px */
        --section-pad-y-sm: var(--space-8);    /* 32px */
    }

    body {
        font-size: var(--text-body-sm);
    }

    h1, h2 { letter-spacing: 0; }

    .cf7-grid {
        grid-template-columns: 1fr;
    }

    .cf7-grid .full-width {
        grid-column: auto;
    }

    .wpcf7 input.wpcf7-submit {
        width: 100%;
    }

    #card-services,
    .card-services {
        min-height: 0;
    }

    #card-services::before,
    .card-services::before {
        background-size:     100% 100%;
        background-position: center center;
    }

    #card-sub-services,
    .card-sub-services {
        min-height: 0;
    }

    #card-sub-services::before,
    .card-sub-services::before {
        background-size:     100% 100%;
        background-position: center center;
    }
}

#footer-menu .sub-menu .hfe-creative-menu, #footer-menu .sub-menu .hfe-creative-menu a {
    list-style: none;
    padding:    6px 0px!important;
    margin:     0 6px !important;
}

#footer-menu .sub-menu .hfe-sub-menu-item {
    display:        block;
    /* font-size:      var(--text-caption) !important; */
    font-weight: 400;
    text-decoration: none !important;
    color: white;
    transition:     color var(--transition-fast);
}

#footer-menu .sub-menu .hfe-sub-menu-item:hover {
    color: var(--color-text-white) !important;
}

#footer-menu .sub-menu .hfe-sub-menu-item-active {
    color: var(--color-accent-light) !important;
}
/* 
.hero-overflow-clip {
    position:   relative !important;
    overflow:   hidden;
    min-height: 600px;
}

.hero-overflow-clip > .e-con-inner {
    position: static !important;
}

.hero-img-wrap::before,
#hero-img-wrap::before {
    --background-overlay: '';
    right: 0!important;
    width: 100%!important;
    height: 100%!important;
    z-index: 3; */

}