/**
 * Telenor Design System CSS
 * Version: 3.0.0
 * 
 * Standalone CSS for Telenor components - can be used on any website.
 * Requires Telenor font to be loaded separately.
 * 
 * Contents:
 * 1. CSS Custom Properties (Buttons + Hero tokens)
 * 2. Base Button Styles
 * 3. Button Size Variants
 * 4. Button Primary/Secondary/Tertiary Variants
 * 5. Button Icon Helpers
 * 6. Elementor Button Integration
 * 7. Hero Section System
 * 8. Button Overrides inside Hero Sections
 * 
 * Button Usage:
 * <button class="btn btn--primary btn--md">Button</button>
 * <button class="btn btn--secondary btn--md btn--dark">Dark BG</button>
 * 
 * Hero Usage:
 * Add CSS class to container: hero-outer hero-dark
 * Modifiers: hero-cover, hero-bleed, hero-tall, hero-compact, hero-reverse
 */

/* ==========================================================================
   1) CSS Custom Properties
   ========================================================================== */

:root {
  /* ----- BUTTON TOKENS ----- */
  
  /* Light Background Colors */
  --telenor-cta-default: #2D28CD;
  --telenor-cta-hover: #2E28FA;
  --telenor-cta-active: #130F99;
  --telenor-cta-focus: #7773E6;
  --telenor-cta-disabled-bg: #F3F3F7;
  --telenor-cta-disabled-text: #BEC1CC;
  
  /* Dark Background Colors */
  --telenor-cta-dark-default: #E8FDFF;
  --telenor-cta-dark-hover: #B4FFFF;
  --telenor-cta-dark-active: #73F1F1;
  --telenor-cta-dark-focus: #A2B6C4;
  --telenor-cta-dark-bg: #000F3C;
  --telenor-cta-dark-disabled: #666C80;
  
  /* Secondary Backgrounds */
  --telenor-secondary-bg-light: #EFEEFB;
  --telenor-secondary-bg-dark: #25365b;
  
  /* Tertiary Focus */
  --telenor-tertiary-focus-dark: #00C8FF;

  /* ----- HERO TOKENS ----- */
  
  /* Legacy container-based heroes */
  --grid: 1180px;
  --bg: #020F3D;

  /* Hero row + anchor */
  --hero-row-max: 1920px;
  --hero-band: 1440px;
  --hero-pad-x: clamp(16px, 2.5vw, 32px);

  /* Height presets for cover/bleed */
  --hero-min: clamp(420px, 48vw, 680px);
  --hero-min-compact: clamp(360px, 40vw, 520px);
  --hero-min-tall: clamp(560px, 62vw, 820px);

  /* Clamp typography defaults (global) */
  --hero-title-size: clamp(32px, 3.2vw, 56px);
  --hero-title-size-cover: clamp(30px, 5vw, 56px);
  --hero-body-size: clamp(16px, 1.1vw, 20px);
}


/* ==========================================================================
   2) Base Button Styles
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Telenor Evolution UI Medium', system-ui, sans-serif;
  font-weight: 500;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:focus {
  outline: none;
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
}


/* ==========================================================================
   3) Button Size Variants
   ========================================================================== */

/* Small */
.btn--sm {
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 22px;
}

/* Medium (Default) */
.btn--md {
  height: 52px;
  padding: 0 28px;
  font-size: 18px;
  line-height: 24px;
}

/* Large */
.btn--lg {
  height: 60px;
  padding: 0 36px;
  font-size: 20px;
  line-height: 26px;
}

/* Icon Only */
.btn--icon {
  width: 56px;
  height: 56px;
  padding: 0;
}


/* ==========================================================================
   4a) Primary Variant (Filled) - Light Background
   ========================================================================== */

.btn--primary {
  background-color: var(--telenor-cta-default);
  color: #FFFFFF;
}

.btn--primary:hover {
  background-color: var(--telenor-cta-hover);
}

.btn--primary:focus {
  background-color: var(--telenor-cta-default);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--telenor-cta-focus);
}

.btn--primary:active {
  background-color: var(--telenor-cta-active);
}

.btn--primary:disabled,
.btn--primary[disabled] {
  background-color: var(--telenor-cta-disabled-bg);
  color: var(--telenor-cta-disabled-text);
}


/* ==========================================================================
   4b) Primary Variant (Filled) - Dark Background
   ========================================================================== */

.btn--primary.btn--dark {
  background-color: var(--telenor-cta-dark-default);
  color: var(--telenor-cta-dark-bg);
}

.btn--primary.btn--dark:hover {
  background-color: var(--telenor-cta-dark-hover);
}

.btn--primary.btn--dark:focus {
  background-color: var(--telenor-cta-dark-hover);
  box-shadow: 0 0 0 2px var(--telenor-cta-dark-bg), 0 0 0 4px var(--telenor-cta-dark-focus);
}

.btn--primary.btn--dark:active {
  background-color: var(--telenor-cta-dark-active);
}

.btn--primary.btn--dark:disabled,
.btn--primary.btn--dark[disabled] {
  background-color: var(--telenor-cta-disabled-bg);
  color: var(--telenor-cta-disabled-text);
}


/* ==========================================================================
   4c) Secondary Variant (Outlined) - Light Background
   ========================================================================== */

.btn--secondary {
  background-color: var(--telenor-secondary-bg-light);
  color: var(--telenor-cta-default);
  border-color: transparent;
}

.btn--secondary:hover {
  border-color: var(--telenor-cta-default);
}

.btn--secondary:focus {
  border-color: var(--telenor-cta-default);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--telenor-cta-focus);
}

.btn--secondary:active {
  border-color: transparent;
  color: var(--telenor-cta-active);
}

.btn--secondary:disabled,
.btn--secondary[disabled] {
  background-color: var(--telenor-cta-disabled-bg);
  color: var(--telenor-cta-disabled-text);
  border-color: transparent;
}


/* ==========================================================================
   4d) Secondary Variant (Outlined) - Dark Background
   ========================================================================== */

.btn--secondary.btn--dark {
  background-color: var(--telenor-secondary-bg-dark);
  color: var(--telenor-cta-dark-default);
  border-color: transparent;
}

.btn--secondary.btn--dark:hover {
  border-color: var(--telenor-cta-dark-hover);
  color: var(--telenor-cta-dark-hover);
}

.btn--secondary.btn--dark:focus {
  border-color: var(--telenor-cta-dark-hover);
  color: var(--telenor-cta-dark-hover);
  box-shadow: 0 0 0 2px var(--telenor-cta-dark-bg), 0 0 0 4px var(--telenor-cta-dark-focus);
}

.btn--secondary.btn--dark:active {
  border-color: var(--telenor-cta-dark-active);
  color: var(--telenor-cta-dark-active);
}

.btn--secondary.btn--dark:disabled,
.btn--secondary.btn--dark[disabled] {
  background-color: var(--telenor-cta-disabled-bg);
  color: var(--telenor-cta-disabled-text);
  border-color: transparent;
}


/* ==========================================================================
   4e) Tertiary Variant (Ghost/Text) - Light Background
   ========================================================================== */

.btn--tertiary {
  background-color: transparent;
  color: var(--telenor-cta-default);
  border-color: transparent;
  padding-left: 4px;
  padding-right: 4px;
}

.btn--tertiary:hover {
  text-decoration: underline;
}

.btn--tertiary:focus {
  border: 1px solid var(--telenor-cta-focus);
  border-radius: 4px;
}

.btn--tertiary:active {
  color: var(--telenor-cta-active);
}

.btn--tertiary:disabled,
.btn--tertiary[disabled] {
  color: var(--telenor-cta-disabled-text);
}


/* ==========================================================================
   4f) Tertiary Variant (Ghost/Text) - Dark Background
   ========================================================================== */

.btn--tertiary.btn--dark {
  background-color: transparent;
  color: var(--telenor-cta-dark-default);
  border-color: transparent;
}

.btn--tertiary.btn--dark:hover {
  color: var(--telenor-cta-dark-hover);
  text-decoration: underline;
}

.btn--tertiary.btn--dark:focus {
  border: 1px solid var(--telenor-tertiary-focus-dark);
  border-radius: 4px;
}

.btn--tertiary.btn--dark:active {
  color: var(--telenor-cta-dark-active);
}

.btn--tertiary.btn--dark:disabled,
.btn--tertiary.btn--dark[disabled] {
  color: var(--telenor-cta-dark-disabled);
}


/* ==========================================================================
   5) Icon Helpers
   ========================================================================== */

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.btn__icon svg {
  width: 100%;
  height: 100%;
}

/* Icon-only button icon size */
.btn--icon .btn__icon {
  width: 24px;
  height: 24px;
}

/* Icon Positions */
.btn__icon--left {
  margin-right: 4px;
}

.btn__icon--right {
  margin-left: 4px;
}


/* ==========================================================================
   6) Elementor Button Integration
   
   Use these classes on the Elementor Button widget's "CSS Classes" field
   (found under Advanced tab). Example: btn btn--primary btn--md
   ========================================================================== */

/* Reset Elementor's wrapper elements to be invisible */
.btn.elementor-widget-button,
.btn.elementor-widget-button .elementor-widget-container,
.btn.elementor-widget-button .elementor-button-wrapper {
  display: contents;
}

/* Apply base button styles to the actual anchor element */
.btn.elementor-widget-button .elementor-button {
  /* Reset Elementor defaults */
  all: unset;
  box-sizing: border-box;
  
  /* Apply our base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Telenor Evolution UI Medium', system-ui, sans-serif;
  font-weight: 500;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
}

.btn.elementor-widget-button .elementor-button:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Size Variants - Elementor
   -------------------------------------------------------------------------- */

/* Small */
.btn--sm.elementor-widget-button .elementor-button {
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 22px;
}

/* Medium */
.btn--md.elementor-widget-button .elementor-button {
  height: 52px;
  padding: 0 28px;
  font-size: 18px;
  line-height: 24px;
}

/* Large */
.btn--lg.elementor-widget-button .elementor-button {
  height: 60px;
  padding: 0 36px;
  font-size: 20px;
  line-height: 26px;
}

/* Icon Only */
.btn--icon.elementor-widget-button .elementor-button {
  width: 56px;
  height: 56px;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Primary Variant - Elementor (Light Background)
   -------------------------------------------------------------------------- */

.btn--primary.elementor-widget-button .elementor-button {
  background-color: var(--telenor-cta-default);
  color: #FFFFFF;
}

.btn--primary.elementor-widget-button .elementor-button:hover {
  background-color: var(--telenor-cta-hover);
}

.btn--primary.elementor-widget-button .elementor-button:focus {
  background-color: var(--telenor-cta-default);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--telenor-cta-focus);
}

.btn--primary.elementor-widget-button .elementor-button:active {
  background-color: var(--telenor-cta-active);
}

/* --------------------------------------------------------------------------
   Primary Variant - Elementor (Dark Background)
   -------------------------------------------------------------------------- */

.btn--primary.btn--dark.elementor-widget-button .elementor-button {
  background-color: var(--telenor-cta-dark-default);
  color: var(--telenor-cta-dark-bg);
}

.btn--primary.btn--dark.elementor-widget-button .elementor-button:hover {
  background-color: var(--telenor-cta-dark-hover);
}

.btn--primary.btn--dark.elementor-widget-button .elementor-button:focus {
  background-color: var(--telenor-cta-dark-hover);
  box-shadow: 0 0 0 2px var(--telenor-cta-dark-bg), 0 0 0 4px var(--telenor-cta-dark-focus);
}

.btn--primary.btn--dark.elementor-widget-button .elementor-button:active {
  background-color: var(--telenor-cta-dark-active);
}

/* --------------------------------------------------------------------------
   Secondary Variant - Elementor (Light Background)
   -------------------------------------------------------------------------- */

.btn--secondary.elementor-widget-button .elementor-button {
  background-color: var(--telenor-secondary-bg-light);
  color: var(--telenor-cta-default);
  border-color: transparent;
}

.btn--secondary.elementor-widget-button .elementor-button:hover {
  border-color: var(--telenor-cta-default);
}

.btn--secondary.elementor-widget-button .elementor-button:focus {
  border-color: var(--telenor-cta-default);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--telenor-cta-focus);
}

.btn--secondary.elementor-widget-button .elementor-button:active {
  border-color: transparent;
  color: var(--telenor-cta-active);
}

/* --------------------------------------------------------------------------
   Secondary Variant - Elementor (Dark Background)
   -------------------------------------------------------------------------- */

.btn--secondary.btn--dark.elementor-widget-button .elementor-button {
  background-color: var(--telenor-secondary-bg-dark);
  color: var(--telenor-cta-dark-default);
  border-color: transparent;
}

.btn--secondary.btn--dark.elementor-widget-button .elementor-button:hover {
  border-color: var(--telenor-cta-dark-hover);
  color: var(--telenor-cta-dark-hover);
}

.btn--secondary.btn--dark.elementor-widget-button .elementor-button:focus {
  border-color: var(--telenor-cta-dark-hover);
  color: var(--telenor-cta-dark-hover);
  box-shadow: 0 0 0 2px var(--telenor-cta-dark-bg), 0 0 0 4px var(--telenor-cta-dark-focus);
}

.btn--secondary.btn--dark.elementor-widget-button .elementor-button:active {
  border-color: var(--telenor-cta-dark-active);
  color: var(--telenor-cta-dark-active);
}

/* --------------------------------------------------------------------------
   Tertiary Variant - Elementor (Light Background)
   -------------------------------------------------------------------------- */

.btn--tertiary.elementor-widget-button .elementor-button {
  background-color: transparent;
  color: var(--telenor-cta-default);
  border-color: transparent;
  padding-left: 4px;
  padding-right: 4px;
}

.btn--tertiary.elementor-widget-button .elementor-button:hover {
  text-decoration: underline;
}

.btn--tertiary.elementor-widget-button .elementor-button:focus {
  border: 1px solid var(--telenor-cta-focus);
  border-radius: 4px;
}

.btn--tertiary.elementor-widget-button .elementor-button:active {
  color: var(--telenor-cta-active);
}

/* --------------------------------------------------------------------------
   Tertiary Variant - Elementor (Dark Background)
   -------------------------------------------------------------------------- */

.btn--tertiary.btn--dark.elementor-widget-button .elementor-button {
  background-color: transparent;
  color: var(--telenor-cta-dark-default);
  border-color: transparent;
}

.btn--tertiary.btn--dark.elementor-widget-button .elementor-button:hover {
  color: var(--telenor-cta-dark-hover);
  text-decoration: underline;
}

.btn--tertiary.btn--dark.elementor-widget-button .elementor-button:focus {
  border: 1px solid var(--telenor-tertiary-focus-dark);
  border-radius: 4px;
}

.btn--tertiary.btn--dark.elementor-widget-button .elementor-button:active {
  color: var(--telenor-cta-dark-active);
}


/* ==========================================================================
   7) HERO SECTION SYSTEM
   ==========================================================================
   Philosophy:
   - Keep your existing layout system and widths (50/50, 1920 row, 1440 anchor).
   - Remove duplicated rules and consolidate "source of truth" variables.
   - Video rules stay explicit (Elementor video is easy to break if over-optimized).
   
   What this section covers:
   1) Legacy auto-split heroes (Elementor containers without .hero-outer)
   2) Modern hero system (.hero-outer / .hero-1920 / .hero-content / .hero-media)
   3) Video hero (.hero-outer.hero-has-video)
   4) Special mobile cover hero helpers
   ========================================================================== */


/* --------------------------------------------------------------------------
   7a) LEGACY AUTO-SPLIT HERO (Elementor containers without .hero-outer)
   -------------------------------------------------------------------------- */

/* Split hero: text left, image on right child (keeps full-width blue) */
.e-con.e-parent.e-con-full:has(> .e-con.e-child:first-child .elementor-widget-heading):has(> .e-con.e-child:nth-child(2)[data-settings*="background_background"]){
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0!important;

  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;

  box-sizing:border-box;
  overflow:hidden;
  background:var(--bg);
}

/* NOTE:
   Some of the following selectors include legacy typos (e.child / e.parent).
   We keep them as-is to avoid "silent" behavior changes on pages that might
   rely on them (even if they look odd). */

.e-con.e-parent.e-con-full:has(> .e-con.e-child:first-child .elementor-widget-heading):has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"])> .e-con.e-child:first-child{
  width:50vw;
  min-height:682px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  padding:80px 80px 80px calc((100vw - var(--grid))/2);
  background:transparent;
}
.e-con.e-parent.e-con-full:has(> .e-con.e-child:first-child .elementor-widget-heading):has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"])> .e-con.e-child:nth-child(2){
  width:50vw;
  min-height:682px;
  box-sizing:border-box;
  background-position:center right;
  background-repeat:no-repeat;
  background-size:cover;
}
.e-con.e-parent.e-con-full:has(> .e-con.e.child:first-child .elementor-widget-heading):has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"])> .e-con.e.child:first-child .elementor-widget:not(:last-child){
  margin-bottom:0!important;
}

/* Full-background hero: image on the parent (keeps its own bg) */
.e-con.e-parent.e-con-full[data-settings*="background_background"]:has(> .e-con.e.child:first-child .elementor-widget-heading):not(:has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"])){
  position:relative;
  display:flex;
  gap:0!important;

  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;

  box-sizing:border-box;
  overflow:hidden;

  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.e-con.e-parent.e-con-full[data-settings*="background_background"]:has(> .e-con.e.child:first-child .elementor-widget-heading):not(:has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"]))> .e-con.e.child:first-child{
  width:100%;
  min-height:682px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  padding:80px 80px 80px calc((100vw - var(--grid))/2);
  background:transparent;
}
.e-con.e-parent.e-con-full[data-settings*="background_background"]:has(> .e-con.e.child:first-child .elementor-widget-heading):not(:has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"]))> .e-con.e.child:first-child .elementor-widget:not(:last-child){
  margin-bottom:0!important;
}

/* Nested blue hero with video (keeps widget bg color) */
.e-con.e-parent.tcxn-blue-bg{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  box-sizing:border-box;
  overflow:hidden;
}
.e-con.e.parent.tcxn-blue-bg .custom-header-width{
  display:flex;
  gap:0!important;
  align-items:stretch;
  width:100%;
}
.e-con.e.parent.tcxn-blue-bg .custom-header-width> .e-con.e.child:first-child{
  width:50vw;
  min-height:682px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  padding:80px 80px 80px calc((100vw - var(--grid))/2);
  background:transparent;
}
.e-con.e.parent.tcxn-blue-bg .custom-header-width> .e-con.e.child:nth-child(2){
  width:50vw;
  min-height:682px;
  box-sizing:border-box;
}

/* Image block (1440 total, keeps its own bg) */
.tcxn-image-block .tcxn-image-block__inner{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  gap:0;
  align-items:stretch;
}
.tcxn-image-block .tcxn-image-block__content{
  width:50%;
  box-sizing:border-box;
  padding:80px 80px 80px 0;
}
.tcxn-image-block.image-right .tcxn-image-block__content{
  order:1;
  padding-left:calc((100vw - var(--grid))/2);
}
.tcxn-image-block.image-right .tcxn-image-block__image{order:2;}
.tcxn-image-block .tcxn-image-block__image{
  width:50%;
  min-height:682px;
  background-position:center right;
  background-repeat:no-repeat;
  background-size:cover;
}

/* Tablet (legacy auto heroes) */
@media (max-width:1024px){
  .e-con.e-parent.e-con-full:has(> .e-con.e.child:first-child .elementor-widget-heading):has(> .e-con.e.child:nth-child(2)[data-settings*="background_background"]){
    flex-direction:column;
  }

  /* SAFE ADDITION: "separated" layouts => TEXT first on tablet/mobile */
  .e-con.e-parent.e-con-full:has(> .e-con.e-child:first-child .elementor-widget-heading):has(> .e-con.e-child:nth-child(2)[data-settings*="background_background"]) > .e-con.e-child:first-child{
    order:1;
    width:100%;
    padding:48px 32px;
  }
  .e-con.e-parent.e-con-full:has(> .e-con.e-child:first-child .elementor-widget-heading):has(> .e-con.e-child:nth-child(2)[data-settings*="background_background"]) > .e-con.e-child:nth-child(2){
    order:2;
    width:100%;
    min-height:320px;
  }

  .e-con.e.parent.e.con-full[data-settings*="background_background"]:has(> .e.con.e.child:first-child .elementor-widget-heading):not(:has(> .e.con.e.child:nth-child(2)[data-settings*="background_background"]))> .e-con.e.child:first-child{
    padding:48px 32px;
  }

  /* Image block: content first, image second */
  .tcxn-image-block .tcxn-image-block__inner{flex-direction:column;}
  .tcxn-image-block .tcxn-image-block__content{
    order:1;
    width:100%;
    padding:48px 32px;
  }
  .tcxn-image-block .tcxn-image-block__image{
    order:2;
    width:100%;
    min-height:320px;
  }
}

/* Mobile (legacy auto heroes) */
@media (max-width:767px){
  .e-con.e.parent.e.con-full:has(> .e.con.e.child:first-child .elementor-widget-heading):has(> .e.con.e.child:nth-child(2)[data-settings*="background_background"])> .e-con.e.child:first-child{
    padding:32px;
  }
  .e-con.e.parent.e.con-full[data-settings*="background_background"]:has(> .e.con.e.child:first-child .elementor-widget-heading):not(:has(> .e.con.e.child:nth-child(2)[data-settings*="background_background"]))> .e-con.e.child:first-child{
    padding:32px;
  }
  .tcxn-image-block .tcxn-image-block__content{padding:32px;}
}


/* --------------------------------------------------------------------------
   7b) MODERN HERO SYSTEM (.hero-outer / .hero-1920 / .hero-content / .hero-media)
   -------------------------------------------------------------------------- */

/* Theme (LIGHT default) */
.hero-outer{
  --hero-bg:       #E6E9F4;
  --hero-heading:  #000F3C;
  --hero-text:     #000F3C;

  --hero-btn-bg:   #2D28CD;
  --hero-btn-text: #E8FDFF;

  /* Tablet/Mobile spacing knobs (defaults match your "Figma feel") */
  --hero-stack-pad-y-tablet: 48px;
  --hero-stack-pad-x-tablet: 32px;
  --hero-stack-pad-y-mobile: 32px;
  --hero-stack-pad-x-mobile: 32px;

  /* Optional: gap between TEXT and MEDIA when stacked */
  --hero-stack-gap: 0px;

  /* Spacing between widgets (stacked view) */
  --hero-gap-heading-text: 16px; /* heading → body */
  --hero-gap-text-button:  32px; /* body → button */

  /* Per-hero media focus (background-position) */
  --hero-media-pos: center right;
  --hero-media-pos-mobile: var(--hero-media-pos);

  position: relative;
  background-color: var(--hero-bg);
  color: var(--hero-text);
}

/* DARK theme */
.hero-outer.hero-dark{
  --hero-bg:       #000F3C;
  --hero-heading:  #FFFFFF;
  --hero-text:     #FFFFFF;
  --hero-btn-bg:   #E8FDFF;
  --hero-btn-text: #000F3C;
}

/* LIGHT / AQUA theme (matches subpage hero backgrounds) */
.hero-outer.hero-light{
  --hero-bg:       #e8fdff;
  --hero-heading:  #000F3C;
  --hero-text:     #000F3C;
  --hero-btn-bg:   #2D28CD;
  --hero-btn-text: #FFFFFF;
}

/* ==========================================================================
   AUTO-HEIGHT HERO (content determines height, no min-height)
   ========================================================================== */

/* Remove fixed min-height on auto heroes */
.hero-outer.hero-auto .hero-1920 > .e-con-inner{
  min-height: auto !important;
}

.hero-outer.hero-auto.hero-cover{
  min-height: auto;
}

.hero-outer.hero-auto .hero-content,
.hero-outer.hero-auto .hero-media{
  min-height: auto !important;
}

/* Ensure proper padding when height is auto */
.hero-outer.hero-auto .hero-content{
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 1025px){
  .hero-outer.hero-auto .hero-content{
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* Typography colors */
.hero-outer h1,
.hero-outer h2,
.hero-outer h3{ color: var(--hero-heading) !important; }
.hero-outer .elementor-widget-text-editor{ color: var(--hero-text) !important; }

/* Default Buttons (fallback when NOT using .btn classes) */
.hero-outer .elementor-button{
  background-color: var(--hero-btn-bg) !important;
  color: var(--hero-btn-text) !important;
  border-color: transparent !important;
  border-radius: 999px;
  transition: filter .2s ease;
}
.hero-outer .elementor-button:hover{ filter: brightness(.95); }

/* 1920 row */
.hero-1920,
.hero-1920 > .e-con-inner{
  width: min(100vw, var(--hero-row-max)) !important;
  max-width: var(--hero-row-max) !important;
  margin: 0 auto !important;
}

/* Flex on inner */
.hero-1920 > .e-con-inner{
  display: flex !important;
  flex-direction: row;
  align-items: center;
  position: relative; /* required for bleed/scrim layering */
}

/* Anchored text padding (desktop) */
.hero-content{
  padding-left: calc(
    max(0px, (min(100vw, var(--hero-row-max)) - var(--hero-band)) / 2)
    + var(--hero-pad-x)
  );
  padding-right: var(--hero-pad-x);
  box-sizing: border-box;
}

/* Reverse: anchor to right band */
.hero-outer.hero-reverse .hero-content{
  padding-left: var(--hero-pad-x);
  padding-right: calc(
    max(0px, (min(100vw, var(--hero-row-max)) - var(--hero-band)) / 2)
    + var(--hero-pad-x)
  );
}

/* Split 50/50 */
.hero-outer .hero-content,
.hero-outer .hero-media{
  flex: 0 0 50%;
  min-width: 0;
}

/* Media background defaults (NOT for video heroes) */
.hero-outer:not(.hero-has-video) .hero-media{
  background-size: cover;
  background-position: var(--hero-media-pos);
  background-repeat: no-repeat;
}

/* On tablet/mobile we often want different crop focus */
@media (max-width:1024px){
  .hero-outer:not(.hero-has-video) .hero-media{
    background-position: var(--hero-media-pos-mobile);
  }
}

/* Reverse columns */
.hero-outer.hero-reverse .hero-1920 > .e-con-inner{
  flex-direction: row-reverse !important;
}

/* COVER */
.hero-outer.hero-cover .hero-1920 > .e-con-inner{ min-height: var(--hero-min); }
.hero-outer.hero-cover .hero-media{ display: none !important; }
.hero-outer.hero-cover{
  background-size: cover !important;
  background-position: var(--hero-cover-pos, center);
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* BLEED (desktop) */
.hero-outer.hero-bleed .hero-1920 > .e-con-inner{ min-height: var(--hero-min); }
.hero-outer.hero-bleed .hero-media{
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;

  background-size: cover;
  background-position: var(--hero-media-pos);
  background-repeat: no-repeat;
}
.hero-outer.hero-bleed .hero-content{
  position: relative;
  z-index: 2;
  max-width: min(700px, 42vw);
}

/* Height modifiers */
.hero-outer.hero-compact .hero-1920 > .e-con-inner{ min-height: var(--hero-min-compact) !important; }
.hero-outer.hero-tall    .hero-1920 > .e-con-inner{ min-height: var(--hero-min-tall)    !important; }

/* Scrim (left) */
.hero-outer.has-scrim-l .hero-1920 > .e-con-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 15, 60, 0.55) 0%,
    rgba(0, 15, 60, 0.35) 35%,
    rgba(0, 15, 60, 0) 65%
  );
  z-index: 1;
  pointer-events: none;
}

/* ICON */
.hero-outer.hero-icon .hero-media{
  --icon-col: 38%;
  flex: 0 0 var(--icon-col);
  min-height: 240px;

  background-size: contain;
  background-position: var(--hero-media-pos);
  background-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   7c) Tablet/Mobile stacking for .hero-outer (TEXT first)
   -------------------------------------------------------------------------- */

@media (max-width:1024px){

  .hero-outer .hero-1920 > .e-con-inner{
    flex-direction: column !important;
    align-items: stretch;
    gap: var(--hero-stack-gap) !important;
  }

  /* Default order: TEXT first, MEDIA second */
  .hero-outer .hero-content{ order: 1 !important; }
  .hero-outer .hero-media{   order: 2 !important; }

  /* Optional: add class "hero-media-first" to flip order */
  .hero-outer.hero-media-first .hero-content{ order: 2 !important; }
  .hero-outer.hero-media-first .hero-media{   order: 1 !important; }

  /* Full width when stacked */
  .hero-outer .hero-content,
  .hero-outer .hero-media{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Put ALL padding on the outer text column */
  .hero-outer .hero-content{
    padding: var(--hero-stack-pad-y-tablet) var(--hero-stack-pad-x-tablet) !important;
  }

  /* Remove padding on nested Elementor containers inside text column */
  .hero-outer .hero-content .hero-text{ padding: 0 !important; }
  .hero-outer .hero-content .e-con{ padding: 0 !important; }

  /* Spacing between widgets (16px / 32px) */
  .hero-outer .hero-content .elementor-widget{ margin: 0 !important; }
  .hero-outer .hero-content .elementor-widget-heading{
    margin-bottom: var(--hero-gap-heading-text) !important;
  }
  .hero-outer .hero-content .elementor-widget-text-editor{
    margin-bottom: var(--hero-gap-text-button) !important;
  }
  .hero-outer .hero-content .elementor-widget-button{ margin-top: 0 !important; }

  /* BLEED on tablet/mobile: media becomes a normal block under text */
  .hero-outer.hero-bleed .hero-media{
    position: relative !important;
    inset: auto;
    width: 100% !important;
    height: clamp(260px, 56vw, 420px) !important;
  }

  /* Scrim not needed when text is no longer over media */
  .hero-outer.hero-bleed.has-scrim-l .hero-1920 > .e-con-inner::before{
    display:none;
  }
}

@media (max-width:767px){
  .hero-outer .hero-content{
    padding: var(--hero-stack-pad-y-mobile) var(--hero-stack-pad-x-mobile) !important;
  }
  .hero-outer.hero-bleed .hero-media{
    height: clamp(220px, 60vw, 360px) !important;
  }
}


/* --------------------------------------------------------------------------
   7d) Clamp typography (single source of truth)
   -------------------------------------------------------------------------- */

.hero-outer .hero-content .elementor-widget-heading .elementor-heading-title{
  font-size: var(--hero-title-size) !important;
  line-height: 1.15;
}
.hero-outer.hero-cover .hero-content .elementor-widget-heading .elementor-heading-title{
  font-size: var(--hero-title-size-cover) !important;
  line-height: 1.1;
}
.hero-outer .hero-content .elementor-widget-text-editor,
.hero-outer .hero-content .elementor-widget-text-editor p{
  font-size: var(--hero-body-size) !important;
  line-height: 1.45;
}

/* Remove default margins that otherwise break the 16px/32px spacing */
.hero-outer .hero-content .elementor-widget-heading .elementor-heading-title{
  margin: 0 !important;
}
.hero-outer .hero-content .elementor-widget-text-editor p{
  margin: 0 !important;
}
/* If multiple paragraphs exist, keep readable spacing between them */
.hero-outer .hero-content .elementor-widget-text-editor p + p{
  margin-top: 0.75em !important;
}


/* --------------------------------------------------------------------------
   7e) VIDEO HERO (Elementor) – Hosted <video> + YouTube/Vimeo iframe
   -------------------------------------------------------------------------- */

.hero-outer.hero-has-video{
  --hero-max: 420px;
  --hero-video-ar: 1.7777778; /* 16/9 numeric */
  --hero-video-bars: #000F3C; /* blue behind video */
}

/* Base: blue behind video */
.hero-outer.hero-has-video .hero-media{
  background-color: var(--hero-video-bars) !important;
  overflow: hidden !important;
}

/* Tablet/Mobile: ensure the hero is NOT height-locked */
@media (max-width:1024px){
  .hero-outer.hero-has-video,
  .hero-outer.hero-has-video .hero-1920,
  .hero-outer.hero-has-video .hero-1920 > .e-con-inner{
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}

/* Desktop video rules */
@media (min-width:1025px){

  /* Fix the desktop hero height to the cap */
  .hero-outer.hero-has-video,
  .hero-outer.hero-has-video .hero-1920,
  .hero-outer.hero-has-video .hero-1920 > .e-con-inner,
  .hero-outer.hero-has-video .hero-content,
  .hero-outer.hero-has-video .hero-media{
    min-height: var(--hero-max) !important;
    height: var(--hero-max) !important;
    max-height: var(--hero-max) !important;
    overflow: hidden !important;
  }

  /* Keep 50/50 */
  .hero-outer.hero-has-video .hero-content,
  .hero-outer.hero-has-video .hero-media{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }

  /* Media = flex row so the video can be vertically centered */
  .hero-outer.hero-has-video .hero-media{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;          /* ensures bars above AND below */
    justify-content: flex-start !important;  /* left align (background sits to the right) */

    /* width when video hits the max height */
    --hero-video-w-max: calc(var(--hero-max) * var(--hero-video-ar));
    --hero-video-w: min(100%, var(--hero-video-w-max));

    /* Right side uses hero background color */
    background-image: linear-gradient(
      90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) var(--hero-video-w),
      var(--hero-bg) var(--hero-video-w),
      var(--hero-bg) 100%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  /* Prevent Elementor from centering via text-align */
  .hero-outer.hero-has-video .hero-media .elementor-widget-container{
    text-align: left !important;
  }

  /* The widget itself must not stretch to full height */
  .hero-outer.hero-has-video .hero-media .elementor-widget-video,
  .hero-outer.hero-has-video .hero-media .elementor-widget-video .elementor-widget-container{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Cap width so a 16:9 box never becomes taller than --hero-max */
  .hero-outer.hero-has-video .hero-media .elementor-widget-video{
    max-width: var(--hero-video-w-max) !important;
    flex: 0 1 auto !important;
  }

  /* HOSTED <video> */
  .hero-outer.hero-has-video
  .hero-media
  .elementor-widget-video
  .elementor-widget-container
  > .elementor-wrapper.e-hosted-video{
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: inline-block !important;
    max-width: 100% !important;
    line-height: 0 !important;
  }

  .hero-outer.hero-has-video
  .hero-media
  .elementor-wrapper.e-hosted-video
  > video.elementor-video{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: var(--hero-max) !important;
    display: block !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* IFRAME (YouTube/Vimeo etc.) – keep ratio box */
  .hero-outer.hero-has-video
  .hero-media
  .elementor-widget-video
  .elementor-widget-container
  > .elementor-wrapper:not(.e-hosted-video){
    width: 100% !important;
    max-width: var(--hero-video-w-max) !important;

    height: 0 !important;
    padding: 0 !important;
    padding-bottom: 56.25% !important;

    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0 !important;

    /* avoid conflicts with Elementor's aspect-ratio rule */
    aspect-ratio: auto !important;
  }

  .hero-outer.hero-has-video
  .hero-media
  .elementor-wrapper:not(.e-hosted-video)
  > iframe.elementor-video{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   7f) SPECIAL COVER HERO (mobile image) – match Figma
   -------------------------------------------------------------------------- */

@media (max-width: 767px){
  .hero-outer.hero-cover.hero-mobileimage{
    --hero-title-size-cover: clamp(28px, 7vw, 40px);
    --hero-body-size: clamp(14px, 3.8vw, 18px);
  }
}

/* --------------------------------------------------------------------------
   7g) SPECIAL HERO (MOBILE) – bottom-aligned content
   -------------------------------------------------------------------------- */

.hero-outer.hero-cover.hero-cover-mobile-fixed{
  --hero-cover-mobile-height: 550px;
  --hero-cover-mobile-bottom-pad: 32px;
}

@media (max-width: 767px){

  .hero-outer.hero-cover.hero-cover-mobile-fixed .hero-1920 > .e-con-inner{
    min-height: var(--hero-cover-mobile-height) !important;
  }

  .hero-outer.hero-cover.hero-cover-mobile-fixed .hero-content{
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;

    padding-top: 0 !important;
    padding-bottom: var(--hero-cover-mobile-bottom-pad) !important;
  }

  .hero-outer.hero-cover.hero-cover-mobile-fixed
  .hero-content .elementor-widget-text-editor{
    margin-bottom: var(--hero-gap-text-button) !important;
  }

  .hero-outer.hero-cover.hero-cover-mobile-fixed
  .hero-content .elementor-widget-button{
    margin-top: 0 !important;
  }
}


/* ==========================================================================
   8) BUTTON OVERRIDES INSIDE HERO SECTIONS
   ==========================================================================
   These selectors have higher specificity than .hero-outer .elementor-button
   to ensure our .btn classes win over generic hero button styles.
   
   Specificity comparison:
   - .hero-outer .elementor-button = 0,0,2,0 (2 classes)
   - .hero-outer .btn.elementor-widget-button .elementor-button = 0,0,4,0 (4 classes)
   
   With 4 classes AND !important, our .btn styles always win.
   ========================================================================== */

/* When using .btn classes on buttons inside .hero-outer,
   our styles take precedence over the hero defaults */
.hero-outer .btn.elementor-widget-button .elementor-button {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Telenor Evolution UI Medium', system-ui, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  text-decoration: none !important;
}

.hero-outer .btn.elementor-widget-button .elementor-button:focus {
  outline: none !important;
}

/* --------------------------------------------------------------------------
   Size Variants inside Hero
   -------------------------------------------------------------------------- */

.hero-outer .btn--sm.elementor-widget-button .elementor-button {
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  line-height: 22px !important;
}

.hero-outer .btn--md.elementor-widget-button .elementor-button {
  height: 52px !important;
  padding: 0 28px !important;
  font-size: 18px !important;
  line-height: 24px !important;
}

.hero-outer .btn--lg.elementor-widget-button .elementor-button {
  height: 60px !important;
  padding: 0 36px !important;
  font-size: 20px !important;
  line-height: 26px !important;
}

.hero-outer .btn--icon.elementor-widget-button .elementor-button {
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Primary Variant inside Hero (Light Background)
   -------------------------------------------------------------------------- */

.hero-outer .btn--primary.elementor-widget-button .elementor-button {
  background-color: var(--telenor-cta-default) !important;
  color: #FFFFFF !important;
}

.hero-outer .btn--primary.elementor-widget-button .elementor-button:hover {
  background-color: var(--telenor-cta-hover) !important;
  filter: none !important;
}

.hero-outer .btn--primary.elementor-widget-button .elementor-button:focus {
  background-color: var(--telenor-cta-default) !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--telenor-cta-focus) !important;
}

.hero-outer .btn--primary.elementor-widget-button .elementor-button:active {
  background-color: var(--telenor-cta-active) !important;
}

/* --------------------------------------------------------------------------
   Primary Variant inside Hero (Dark Background)
   -------------------------------------------------------------------------- */

.hero-outer .btn--primary.btn--dark.elementor-widget-button .elementor-button {
  background-color: var(--telenor-cta-dark-default) !important;
  color: var(--telenor-cta-dark-bg) !important;
}

.hero-outer .btn--primary.btn--dark.elementor-widget-button .elementor-button:hover {
  background-color: var(--telenor-cta-dark-hover) !important;
  filter: none !important;
}

.hero-outer .btn--primary.btn--dark.elementor-widget-button .elementor-button:focus {
  background-color: var(--telenor-cta-dark-hover) !important;
  box-shadow: 0 0 0 2px var(--telenor-cta-dark-bg), 0 0 0 4px var(--telenor-cta-dark-focus) !important;
}

.hero-outer .btn--primary.btn--dark.elementor-widget-button .elementor-button:active {
  background-color: var(--telenor-cta-dark-active) !important;
}

/* --------------------------------------------------------------------------
   Secondary Variant inside Hero (Light Background)
   -------------------------------------------------------------------------- */

.hero-outer .btn--secondary.elementor-widget-button .elementor-button {
  background-color: var(--telenor-secondary-bg-light) !important;
  color: var(--telenor-cta-default) !important;
  border-color: transparent !important;
}

.hero-outer .btn--secondary.elementor-widget-button .elementor-button:hover {
  border-color: var(--telenor-cta-default) !important;
  filter: none !important;
}

.hero-outer .btn--secondary.elementor-widget-button .elementor-button:focus {
  border-color: var(--telenor-cta-default) !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--telenor-cta-focus) !important;
}

.hero-outer .btn--secondary.elementor-widget-button .elementor-button:active {
  border-color: transparent !important;
  color: var(--telenor-cta-active) !important;
}

/* --------------------------------------------------------------------------
   Secondary Variant inside Hero (Dark Background)
   -------------------------------------------------------------------------- */

.hero-outer .btn--secondary.btn--dark.elementor-widget-button .elementor-button {
  background-color: var(--telenor-secondary-bg-dark) !important;
  color: var(--telenor-cta-dark-default) !important;
  border-color: transparent !important;
}

.hero-outer .btn--secondary.btn--dark.elementor-widget-button .elementor-button:hover {
  border-color: var(--telenor-cta-dark-hover) !important;
  color: var(--telenor-cta-dark-hover) !important;
  filter: none !important;
}

.hero-outer .btn--secondary.btn--dark.elementor-widget-button .elementor-button:focus {
  border-color: var(--telenor-cta-dark-hover) !important;
  color: var(--telenor-cta-dark-hover) !important;
  box-shadow: 0 0 0 2px var(--telenor-cta-dark-bg), 0 0 0 4px var(--telenor-cta-dark-focus) !important;
}

.hero-outer .btn--secondary.btn--dark.elementor-widget-button .elementor-button:active {
  border-color: var(--telenor-cta-dark-active) !important;
  color: var(--telenor-cta-dark-active) !important;
}

/* --------------------------------------------------------------------------
   Tertiary Variant inside Hero (Light Background)
   -------------------------------------------------------------------------- */

.hero-outer .btn--tertiary.elementor-widget-button .elementor-button {
  background-color: transparent !important;
  color: var(--telenor-cta-default) !important;
  border-color: transparent !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.hero-outer .btn--tertiary.elementor-widget-button .elementor-button:hover {
  text-decoration: underline !important;
  filter: none !important;
}

.hero-outer .btn--tertiary.elementor-widget-button .elementor-button:focus {
  border: 1px solid var(--telenor-cta-focus) !important;
  border-radius: 4px !important;
}

.hero-outer .btn--tertiary.elementor-widget-button .elementor-button:active {
  color: var(--telenor-cta-active) !important;
}

/* --------------------------------------------------------------------------
   Tertiary Variant inside Hero (Dark Background)
   -------------------------------------------------------------------------- */

.hero-outer .btn--tertiary.btn--dark.elementor-widget-button .elementor-button {
  background-color: transparent !important;
  color: var(--telenor-cta-dark-default) !important;
  border-color: transparent !important;
}

.hero-outer .btn--tertiary.btn--dark.elementor-widget-button .elementor-button:hover {
  color: var(--telenor-cta-dark-hover) !important;
  text-decoration: underline !important;
  filter: none !important;
}

.hero-outer .btn--tertiary.btn--dark.elementor-widget-button .elementor-button:focus {
  border: 1px solid var(--telenor-tertiary-focus-dark) !important;
  border-radius: 4px !important;
}

.hero-outer .btn--tertiary.btn--dark.elementor-widget-button .elementor-button:active {
  color: var(--telenor-cta-dark-active) !important;
}


/* ==========================================================================
   9) "Start Where It Makes Sense" Section Components
   
   Use these classes in Elementor to recreate the section without custom CSS.
   Apply classes via Advanced → CSS Classes on Containers or Widgets.
   ========================================================================== */

/* ----- Path Card (ljusblå kort) -----
   Usage: Add "path-card" to a Container's CSS Classes
   Result: Light blue background, 24px radius, hover shadow
   ----- */
.path-card {
  background-color: #e8fdff;
  border-radius: 24px;
  padding: 20px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.path-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
              0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Elementor Container support */
.path-card.e-con {
  background-color: #e8fdff !important;
  border-radius: 24px !important;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.path-card.e-con:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
              0 2px 4px -2px rgba(0, 0, 0, 0.1);
}


/* ----- Path Badge (mörk blå header-ruta) -----
   Usage: Add "path-badge" to a Container with text
   Result: Dark blue background, white text, 16px radius
   ----- */
.path-badge {
  background-color: #000F3C;
  border-radius: 16px;
  padding: 12px 20px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  display: inline-block;
}

/* Elementor Container support */
.path-badge.e-con {
  background-color: #000F3C !important;
  border-radius: 16px !important;
  padding: 12px 20px !important;
}

/* Ensure text inside badge is white */
.path-badge.e-con,
.path-badge.e-con .elementor-widget-text-editor,
.path-badge.e-con .elementor-widget-heading .elementor-heading-title,
.path-badge.e-con p,
.path-badge.e-con span {
  color: #FFFFFF !important;
}


/* ----- Path Arrow (triangel-pekare nedåt) -----
   Usage: Add "path-arrow" to a Spacer widget or HTML widget
   Or use: <div class="path-arrow"></div>
   Result: Triangle pointing down, offset 40px from left
   ----- */
.path-arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000F3C;
  margin-left: 40px;
}

/* Elementor spacer/widget support */
.path-arrow.elementor-widget-spacer,
.path-arrow.elementor-widget-html {
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

.path-arrow.elementor-widget-spacer .elementor-widget-container,
.path-arrow.elementor-widget-html .elementor-widget-container {
  width: 0 !important;
  height: 0 !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 10px solid #000F3C !important;
  margin-left: 40px !important;
}


/* ----- Path Image (rundade hörn för bilder) -----
   Usage: Add "path-image" to a Container with an Image widget
   Result: Image gets 16px rounded corners
   ----- */
.path-image {
  border-radius: 16px;
  overflow: hidden;
}

.path-image.e-con {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.path-image img,
.path-image.e-con img,
.path-image .elementor-widget-image img {
  border-radius: 16px;
}


/* ==========================================================================
   10) ISO Badge Overlay (flytande certifieringsbox)
   
   Usage: Add "iso-overlay" to a Container positioned over an image
   Result: White box with shadow, positioned bottom-left
   ========================================================================== */

.iso-overlay {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.iso-overlay.e-con {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Position helper - use with parent container set to position: relative */
.iso-overlay--positioned {
  position: absolute;
  bottom: -40px;
  left: 20px;
  z-index: 10;
}

/* ISO text styling */
.iso-overlay .iso-text,
.iso-overlay.e-con .elementor-widget-heading .elementor-heading-title {
  color: #2D28CD !important;
  font-size: 14px;
  font-weight: 500;
}


/* ==========================================================================
   11) Challenge Card (utmaningskort - ljusgrå bakgrund)
   
   Usage: Add "challenge-card" to a Container
   Result: Light gray/purple background, rounded corners, text styling
   ========================================================================== */

.challenge-card {
  background-color: #E0E0EC;
  border-radius: 16px;
  padding: 24px 28px;
}

.challenge-card.e-con {
  background-color: #E0E0EC !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
}

/* Title styling */
.challenge-card .challenge-title,
.challenge-card.e-con .elementor-widget-heading .elementor-heading-title {
  color: #000F3C !important;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
}

/* Body text styling */
.challenge-card .challenge-text,
.challenge-card.e-con .elementor-widget-text-editor,
.challenge-card.e-con p {
  color: #4A4A68 !important;
  font-size: 16px;
  line-height: 1.6;
}


/* ==========================================================================
   12) Video Section (videosektion med ram och play-knapp)
   
   Usage: Add "video-section" to outer Container
   Result: Light border, rounded corners, split layout
   ========================================================================== */

.video-section {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  overflow: hidden;
}

.video-section.e-con {
  background-color: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Video badge (blå "VIDEO" etikett) */
.video-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2D28CD;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-badge::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #2D28CD;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Play button overlay (stor blå cirkel) */
.play-button {
  width: 72px;
  height: 72px;
  background-color: #2D28CD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.play-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(45, 40, 205, 0.3);
}

.play-button::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid #FFFFFF;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

/* Elementor widget support for play button */
.play-button.elementor-widget-html .elementor-widget-container {
  width: 72px !important;
  height: 72px !important;
  background-color: #2D28CD !important;
  border-radius: 50% !important;
}


/* ==========================================================================
   13) Customer Grid (2x2 kundbildrutnät)
   
   Usage: Add "customer-grid" to a Container with 4 image containers
   Result: Staggered 2x2 grid with rounded images
   ========================================================================== */

.customer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.customer-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

/* Staggered effect - offset second column */
.customer-grid > *:nth-child(2),
.customer-grid > *:nth-child(4) {
  margin-top: 24px;
}

.customer-grid.e-con > .e-con:nth-child(2),
.customer-grid.e-con > .e-con:nth-child(4) {
  margin-top: 24px !important;
}

/* Customer image cards */
.customer-image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.customer-image.e-con {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.customer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}


/* ==========================================================================
   14) Pricing Card (priskort med ikon och checklista)
   
   Usage: Add "pricing-card" to a Container
   Result: White card with shadow, rounded corners
   ========================================================================== */

.pricing-card {
  background-color: #FFFFFF;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pricing-card.e-con {
  background-color: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Icon box (teal/aqua ikon-ruta) */
.pricing-icon {
  width: 56px;
  height: 56px;
  background-color: #00B0A0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 24px;
}

/* Eyebrow text */
.pricing-eyebrow {
  color: #666C80;
  font-size: 14px;
  font-weight: 400;
}

/* Pricing title */
.pricing-title {
  color: #2D28CD;
  font-size: 28px;
  font-weight: 700;
}

/* Checklist items */
.pricing-checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.pricing-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: #000F3C;
  font-size: 16px;
}

.pricing-checklist li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-color: #00B0A0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Elementor icon list support */
.pricing-card.e-con .elementor-icon-list-icon svg {
  fill: #00B0A0 !important;
  color: #00B0A0 !important;
}


/* ==========================================================================
   15) Contact/Testimonial Section (kontaktformulär med testimonials)
   
   Usage: Add classes to respective containers
   ========================================================================== */

/* Quote box (ljusblå citatruta) */
.quote-box {
  background-color: #E8FDFF;
  border-radius: 12px;
  padding: 20px 24px;
  font-style: italic;
  color: #000F3C;
  font-size: 16px;
  line-height: 1.6;
}

.quote-box.e-con {
  background-color: #E8FDFF !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
}

.quote-box.e-con p,
.quote-box.e-con .elementor-widget-text-editor {
  font-style: italic !important;
  color: #000F3C !important;
}

/* Gartner rating widget (rating-box) */
.rating-box {
  background-color: #000F3C;
  border-radius: 12px;
  padding: 16px 20px;
  color: #FFFFFF;
}

.rating-box.e-con {
  background-color: #000F3C !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

.rating-box .rating-label {
  font-size: 12px;
  color: #A0A0B0;
}

.rating-box .rating-title {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

.rating-box .rating-stars {
  color: #FFB800;
}

.rating-box .rating-score {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
}

/* Form container */
.form-container {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
}

.form-container.e-con {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 32px !important;
}

/* Form inputs */
.form-container input,
.form-container select,
.form-container textarea {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  width: 100%;
  transition: border-color 0.2s ease;
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
  border-color: #2D28CD;
  outline: none;
}

/* Form labels */
.form-container label {
  font-size: 14px;
  font-weight: 500;
  color: #000F3C;
  margin-bottom: 6px;
  display: block;
}

.form-container label .required {
  color: #E53935;
}

/* Author info (avatar + name) */
.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-weight: 600;
  color: #000F3C;
  font-size: 16px;
}

.author-role {
  font-size: 14px;
  color: #666C80;
}


/* ==========================================================================
   16) Dashboard Features Section (dashboard med callout-kort)
   
   Usage: 
   - .dashboard-section: Wrapper för hela sektionen
   - .dashboard-frame: Container för dashboard-bild (laptop-liknande ram)
   - .feature-callout: Individuellt feature-kort med streckad linje
   - .feature-callout--left/--right/--bottom: Position modifier
   ========================================================================== */

.dashboard-section {
  position: relative;
  padding: 40px 0;
}

/* Dashboard frame (laptop-liknande container) */
.dashboard-frame {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 700px;
  margin: 0 auto;
}

.dashboard-frame.e-con {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.dashboard-frame img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}

/* Feature callout card */
.feature-callout {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
  position: relative;
  max-width: 280px;
}

.feature-callout.e-con {
  background-color: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #E5E7EB !important;
}

/* Feature callout title */
.feature-callout-title,
.feature-callout .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
  margin-bottom: 8px !important;
}

/* Feature callout description */
.feature-callout-desc,
.feature-callout .elementor-widget-text-editor p {
  font-size: 14px !important;
  color: #666C80 !important;
  line-height: 1.5 !important;
}

/* Dashed connector lines */
.feature-callout--left::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -32px;
  width: 32px;
  border-top: 2px dashed #2D28CD;
}

.feature-callout--left::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  width: 8px;
  height: 8px;
  background-color: #2D28CD;
  border-radius: 50%;
  transform: translateY(-50%);
}

.feature-callout--right::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -32px;
  width: 32px;
  border-top: 2px dashed #2D28CD;
}

.feature-callout--right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 8px;
  height: 8px;
  background-color: #2D28CD;
  border-radius: 50%;
  transform: translateY(-50%);
}

.feature-callout--bottom::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 33%;
  height: 16px;
  border-left: 2px dashed #2D28CD;
}

.feature-callout--bottom::before {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(33% - 4px);
  width: 8px;
  height: 8px;
  background-color: #2D28CD;
  border-radius: 50%;
}


/* ==========================================================================
   17) Simple Feature Card (grått bakgrund, enkel text)
   
   Usage: .feature-card-simple
   ========================================================================== */

.feature-card-simple {
  background-color: #F5F5F5;
  border-radius: 12px;
  padding: 24px;
}

.feature-card-simple.e-con {
  background-color: #F5F5F5 !important;
  border-radius: 12px !important;
  padding: 24px !important;
}

.feature-card-simple-title,
.feature-card-simple .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
  margin-bottom: 8px !important;
}

.feature-card-simple-desc,
.feature-card-simple .elementor-widget-text-editor p {
  font-size: 15px !important;
  color: #666C80 !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   18) Trust Bar Extended (2-rads logo-grid)
   
   Usage: .trust-bar-extended
   ========================================================================== */

.trust-bar-extended {
  padding: 48px 0;
  text-align: center;
}

.trust-bar-extended.e-con {
  padding: 48px 0 !important;
  text-align: center !important;
}

/* Eyebrow text */
.trust-bar-eyebrow {
  font-size: 14px;
  color: #666C80;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}

/* Logo grid - 2 rows */
.trust-bar-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 48px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}

.trust-bar-logos.e-con {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 24px 48px !important;
}

@media (max-width: 768px) {
  .trust-bar-logos,
  .trust-bar-logos.e-con {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 24px !important;
  }
}

.trust-bar-logo {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
  max-height: 40px;
  width: auto;
}

.trust-bar-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}


/* ==========================================================================
   19) Case Study Card (horisontellt kort med bild, stats)
   
   Usage: .case-study-card, .case-study-card--reverse (bild höger)
   ========================================================================== */

.case-study-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: row;
}

.case-study-card.e-con {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #E5E7EB !important;
  display: flex !important;
  flex-direction: row !important;
}

.case-study-card--reverse,
.case-study-card--reverse.e-con {
  flex-direction: row-reverse !important;
}

@media (max-width: 1024px) {
  .case-study-card,
  .case-study-card.e-con,
  .case-study-card--reverse,
  .case-study-card--reverse.e-con {
    flex-direction: column !important;
  }
}

/* Image container (40% width) */
.case-study-image {
  width: 40%;
  position: relative;
  overflow: hidden;
}

.case-study-image.e-con {
  width: 40% !important;
}

@media (max-width: 1024px) {
  .case-study-image,
  .case-study-image.e-con {
    width: 100% !important;
    height: 250px !important;
  }
}

.case-study-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient overlay for logo */
.case-study-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
}

/* Logo overlay */
.case-study-logo {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  height: 40px;
  width: auto;
}

/* Content container (60% width) */
.case-study-content {
  width: 60%;
  padding: 32px 40px;
}

.case-study-content.e-con {
  width: 60% !important;
  padding: 32px 40px !important;
}

@media (max-width: 1024px) {
  .case-study-content,
  .case-study-content.e-con {
    width: 100% !important;
    padding: 24px !important;
  }
}

/* Eyebrow */
.case-study-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: #2D28CD;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* Title */
.case-study-title {
  font-size: 26px;
  font-weight: 500;
  color: #000F3C;
  margin-bottom: 16px;
  line-height: 1.3;
}

/* Description */
.case-study-desc {
  font-size: 15px;
  color: #666C80;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Stats row */
.case-study-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.case-study-stats.e-con {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.case-study-stat {
  text-align: center;
}

.case-study-stat-value {
  font-size: 32px;
  font-weight: 500;
  color: #2D28CD;
  line-height: 1;
  margin-bottom: 4px;
}

.case-study-stat-label {
  font-size: 12px;
  color: #666C80;
  line-height: 1.3;
}


/* ==========================================================================
   20) Testimonial Quote Card (med citat-ikon och företagslogo)
   
   Usage: .testimonial-quote-card
   ========================================================================== */

.testimonial-quote-card {
  background-color: #F5F5F5;
  border-radius: 16px;
  padding: 24px;
}

.testimonial-quote-card.e-con {
  background-color: #F5F5F5 !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

/* Quote icon (citat-marks) */
.testimonial-quote-icon {
  width: 32px;
  height: 28px;
  margin-bottom: 16px;
}

/* Can use this gradient for quote icon */
.testimonial-quote-icon svg,
.testimonial-quote-icon img {
  width: 100%;
  height: 100%;
}

/* Quote text */
.testimonial-quote-text {
  font-size: 15px;
  color: #000F3C;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 20px;
}

.testimonial-quote-card .elementor-widget-text-editor p {
  font-size: 15px !important;
  color: #000F3C !important;
  line-height: 1.6 !important;
  font-style: italic !important;
}

/* Author section */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #E0E0E0;
}

.testimonial-author-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-author-name {
  font-size: 14px;
  font-weight: 500;
  color: #000F3C;
}

.testimonial-author-role {
  font-size: 13px;
  color: #666C80;
}


/* ==========================================================================
   21) CONTAINER-BASED ELEMENTOR INTEGRATION
   
   These selectors allow you to apply a SINGLE class to the outer container
   and have all internal Elementor widgets styled automatically.
   
   Usage:
   1. Add class to outer Container (e.g., "pricing-card")
   2. All internal widgets are styled automatically based on structure
   ========================================================================== */


/* --------------------------------------------------------------------------
   A) Pricing Card - Container-Based Styling
   
   Structure: Container > [Icon Container] + Heading + Text + Icon List
   -------------------------------------------------------------------------- */

/* Auto-style first child container as icon box */
.pricing-card.e-con > .e-con:first-child,
.pricing-card > .e-con:first-child {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  background-color: #00B0A0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.pricing-card.e-con > .e-con:first-child .elementor-widget-icon svg,
.pricing-card.e-con > .e-con:first-child .elementor-icon svg {
  fill: #FFFFFF !important;
  width: 24px !important;
  height: 24px !important;
}

/* Support for icon fonts (<i> elements) in icon container */
.pricing-card.e-con > .e-con:first-child .elementor-widget-icon i,
.pricing-card.e-con > .e-con:first-child .elementor-icon i {
  color: #FFFFFF !important;
  font-size: 24px !important;
}

/* Auto-style heading as title - high specificity to override Elementor */
.pricing-card.e-con.e-con .elementor-widget-heading .elementor-heading-title,
.pricing-card.e-con .elementor-element.elementor-widget-heading .elementor-heading-title,
.e-con.pricing-card .elementor-heading-title {
  color: #2D28CD !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
}

/* Auto-style text editor as description - high specificity */
.pricing-card.e-con.e-con .elementor-widget-text-editor p,
.pricing-card.e-con.e-con .elementor-widget-text-editor .elementor-widget-container,
.pricing-card.e-con .elementor-element.elementor-widget-text-editor p,
.pricing-card.e-con .elementor-element.elementor-widget-text-editor .elementor-widget-container,
.e-con.pricing-card .elementor-widget-text-editor p,
.e-con.pricing-card .elementor-widget-text-editor .elementor-widget-container {
  color: #666C80 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* Auto-style icon list with teal checkmarks - high specificity */
.pricing-card.e-con.e-con .elementor-widget-icon-list .elementor-icon-list-icon,
.pricing-card.e-con .elementor-element.elementor-widget-icon-list .elementor-icon-list-icon,
.e-con.pricing-card .elementor-icon-list-icon {
  background-color: transparent !important;
  min-width: 24px !important;
}

.pricing-card.e-con.e-con .elementor-widget-icon-list .elementor-icon-list-icon svg,
.pricing-card.e-con .elementor-element.elementor-widget-icon-list .elementor-icon-list-icon svg,
.e-con.pricing-card .elementor-icon-list-icon svg {
  fill: #00B0A0 !important;
  width: 20px !important;
  height: 20px !important;
}

.pricing-card.e-con.e-con .elementor-widget-icon-list .elementor-icon-list-icon i,
.pricing-card.e-con .elementor-element.elementor-widget-icon-list .elementor-icon-list-icon i,
.e-con.pricing-card .elementor-icon-list-icon i {
  color: #00B0A0 !important;
  font-size: 20px !important;
}

.pricing-card.e-con.e-con .elementor-widget-icon-list .elementor-icon-list-text,
.pricing-card.e-con .elementor-element.elementor-widget-icon-list .elementor-icon-list-text,
.e-con.pricing-card .elementor-icon-list-text {
  color: #000F3C !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.pricing-card.e-con.e-con .elementor-widget-icon-list .elementor-icon-list-item,
.e-con.pricing-card .elementor-icon-list-item {
  margin-bottom: 12px !important;
}

/* Auto-style button - high specificity */
.pricing-card.e-con.e-con .elementor-widget-button .elementor-button,
.pricing-card.e-con .elementor-element.elementor-widget-button .elementor-button,
.e-con.pricing-card .elementor-button {
  background-color: #2D28CD !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 14px 28px !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

.pricing-card.e-con.e-con .elementor-widget-button .elementor-button-wrapper,
.e-con.pricing-card .elementor-button-wrapper {
  width: 100% !important;
}


/* --------------------------------------------------------------------------
   B) Case Study Card - Container-Based Styling
   
   Structure: Container > [Image Container (40%)] + [Content Container (60%)]
   -------------------------------------------------------------------------- */

/* Auto 40/60 split for child containers */
.case-study-card.e-con > .e-con:first-child {
  width: 40% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.case-study-card.e-con > .e-con:first-child .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.case-study-card.e-con > .e-con:last-child {
  width: 60% !important;
  padding: 32px 40px !important;
}

@media (max-width: 1024px) {
  .case-study-card.e-con > .e-con:first-child,
  .case-study-card.e-con > .e-con:last-child {
    width: 100% !important;
  }
  
  .case-study-card.e-con > .e-con:first-child {
    height: 250px !important;
  }
  
  .case-study-card.e-con > .e-con:last-child {
    padding: 24px !important;
  }
}

/* Auto-style first heading as eyebrow */
.case-study-card.e-con .elementor-widget-heading:first-of-type .elementor-heading-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #2D28CD !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 12px !important;
}

/* Auto-style second heading as title */
.case-study-card.e-con .elementor-widget-heading:nth-of-type(2) .elementor-heading-title {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}

/* Auto-style text editor as description (both <p> wrapped and direct text) */
.case-study-card.e-con .elementor-widget-text-editor p,
.case-study-card.e-con .elementor-widget-text-editor .elementor-widget-container {
  font-size: 15px !important;
  color: #666C80 !important;
  line-height: 1.6 !important;
}

/* Auto-style counter widgets as stats */
.case-study-card.e-con .elementor-widget-counter {
  text-align: center !important;
}

.case-study-card.e-con .elementor-widget-counter .elementor-counter-number-wrapper {
  font-size: 32px !important;
  font-weight: 500 !important;
  color: #2D28CD !important;
}

.case-study-card.e-con .elementor-widget-counter .elementor-counter-title {
  font-size: 12px !important;
  color: #666C80 !important;
}


/* --------------------------------------------------------------------------
   C) Video Section - Container-Based Styling
   
   Structure: Container > Heading ("VIDEO") + Icon (play) + Text
   -------------------------------------------------------------------------- */

/* Auto-style first heading as VIDEO badge */
.video-section.e-con .elementor-widget-heading:first-of-type .elementor-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #2D28CD !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Auto-style Icon widget as play button */
.video-section.e-con .elementor-widget-icon .elementor-icon {
  width: 72px !important;
  height: 72px !important;
  background-color: #2D28CD !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.video-section.e-con .elementor-widget-icon .elementor-icon:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(45, 40, 205, 0.3) !important;
}

.video-section.e-con .elementor-widget-icon .elementor-icon svg {
  fill: #FFFFFF !important;
  width: 28px !important;
  height: 28px !important;
}

.video-section.e-con .elementor-widget-icon .elementor-icon i {
  color: #FFFFFF !important;
  font-size: 28px !important;
}

/* Auto-style text editor as description (both <p> wrapped and direct text) */
.video-section.e-con .elementor-widget-text-editor p,
.video-section.e-con .elementor-widget-text-editor .elementor-widget-container {
  color: #000F3C !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   D) Testimonial Quote Card - Container-Based Styling
   
   Structure: Container > Image (quote icon) + Text (quote) + Image (logo) + Heading (name)
   -------------------------------------------------------------------------- */

/* Auto-style first image as quote icon */
.testimonial-quote-card.e-con .elementor-widget-image:first-of-type img {
  width: 32px !important;
  height: auto !important;
  margin-bottom: 16px !important;
}

/* Auto-style text editor as italic quote (both <p> wrapped and direct text) */
.testimonial-quote-card.e-con .elementor-widget-text-editor:first-of-type p,
.testimonial-quote-card.e-con .elementor-widget-text-editor:first-of-type .elementor-widget-container {
  font-style: italic !important;
  font-size: 15px !important;
  color: #000F3C !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* Auto-style last image as company logo */
.testimonial-quote-card.e-con .elementor-widget-image:last-of-type img {
  height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Auto-style heading as author name */
.testimonial-quote-card.e-con .elementor-widget-heading .elementor-heading-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
}


/* --------------------------------------------------------------------------
   E) Trust Bar Extended - Container-Based Styling
   
   Structure: Container > Heading (eyebrow) + Images (logos in grid)
   -------------------------------------------------------------------------- */

/* Auto-style heading as eyebrow */
.trust-bar-extended.e-con .elementor-widget-heading .elementor-heading-title {
  font-size: 14px !important;
  color: #666C80 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 32px !important;
}

/* Auto-style all images with grayscale effect */
.trust-bar-extended.e-con .elementor-widget-image img {
  filter: grayscale(100%) !important;
  opacity: 0.7 !important;
  transition: all 0.3s ease !important;
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
}

.trust-bar-extended.e-con .elementor-widget-image img:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   F) Form Container - Container-Based Styling (Elementor Form widget)
   
   Structure: Container > Form widget
   -------------------------------------------------------------------------- */

/* Elementor Form widget support */
.form-container.e-con .elementor-field-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
  margin-bottom: 6px !important;
}

.form-container.e-con .elementor-field-textual {
  border: 1px solid #E5E5E5 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  transition: border-color 0.2s ease !important;
}

.form-container.e-con .elementor-field-textual:focus {
  border-color: #2D28CD !important;
  outline: none !important;
}

.form-container.e-con .elementor-button[type="submit"] {
  background-color: #2D28CD !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  font-weight: 500 !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.form-container.e-con .elementor-button[type="submit"]:hover {
  background-color: #2E28FA !important;
}


/* --------------------------------------------------------------------------
   G) Customer Grid - Container-Based Styling
   
   Structure: Container (grid) > 4x Container (images)
   -------------------------------------------------------------------------- */

/* Auto-style child containers with rounded images */
.customer-grid.e-con > .e-con {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.customer-grid.e-con > .e-con .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}


/* --------------------------------------------------------------------------
   H) Challenge Card - Container-Based Styling
   
   Structure: Container > Heading + Text
   Already works, adding explicit Elementor selectors for completeness
   -------------------------------------------------------------------------- */

.challenge-card.e-con .elementor-widget-heading .elementor-heading-title {
  color: #000F3C !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  margin-bottom: 12px !important;
}

.challenge-card.e-con .elementor-widget-text-editor p,
.challenge-card.e-con .elementor-widget-text-editor .elementor-widget-container {
  color: #4A4A68 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   I) Path Card - Container-Based Styling
   
   Structure: Container > [Badge Container] + Heading + Text + Arrow
   -------------------------------------------------------------------------- */

/* Auto-style first child as badge */
.path-card.e-con > .e-con:first-child {
  background-color: #000F3C !important;
  border-radius: 16px !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

.path-card.e-con > .e-con:first-child .elementor-widget-heading .elementor-heading-title {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Auto-style heading as title */
.path-card.e-con > .elementor-widget-heading .elementor-heading-title {
  color: #000F3C !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

/* Auto-style text as description (both <p> wrapped and direct text) */
.path-card.e-con > .elementor-widget-text-editor p,
.path-card.e-con > .elementor-widget-text-editor .elementor-widget-container {
  color: #666C80 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   J) Quote Box - Container-Based Styling
   
   Structure: Container > Text (italic quote)
   -------------------------------------------------------------------------- */

.quote-box.e-con .elementor-widget-text-editor p,
.quote-box.e-con .elementor-widget-text-editor .elementor-widget-container {
  font-style: italic !important;
  color: #000F3C !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   K) Rating Box - Container-Based Styling
   
   Structure: Container > Heading (label) + Heading (title) + Stars + Score
   -------------------------------------------------------------------------- */

.rating-box.e-con .elementor-widget-heading:first-of-type .elementor-heading-title {
  font-size: 12px !important;
  color: #A0A0B0 !important;
}

.rating-box.e-con .elementor-widget-heading:nth-of-type(2) .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

.rating-box.e-con .elementor-widget-star-rating .elementor-star-rating {
  color: #FFB800 !important;
}

.rating-box.e-con .elementor-widget-counter .elementor-counter-number-wrapper {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   L) Dashboard Frame - Container-Based Styling
   
   Structure: Container > Image (screenshot)
   -------------------------------------------------------------------------- */

.dashboard-frame.e-con .elementor-widget-image img {
  border-radius: 8px !important;
  width: 100% !important;
  height: auto !important;
}


/* --------------------------------------------------------------------------
   M) Feature Callout - Container-Based Styling
   
   Structure: Container > Heading + Text
   -------------------------------------------------------------------------- */

.feature-callout.e-con .elementor-widget-heading .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
  margin-bottom: 8px !important;
}

.feature-callout.e-con .elementor-widget-text-editor p,
.feature-callout.e-con .elementor-widget-text-editor .elementor-widget-container {
  font-size: 14px !important;
  color: #666C80 !important;
  line-height: 1.5 !important;
}


/* --------------------------------------------------------------------------
   N) Feature Card Simple - Container-Based Styling
   
   Structure: Container > Heading + Text
   -------------------------------------------------------------------------- */

.feature-card-simple.e-con .elementor-widget-heading .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #000F3C !important;
  margin-bottom: 8px !important;
}

.feature-card-simple.e-con .elementor-widget-text-editor p,
.feature-card-simple.e-con .elementor-widget-text-editor .elementor-widget-container {
  font-size: 15px !important;
  color: #666C80 !important;
  line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   O) ISO Overlay - Container-Based Styling
   
   Structure: Container > Image (badges)
   -------------------------------------------------------------------------- */

.iso-overlay.e-con .elementor-widget-image img {
  max-width: 100% !important;
  height: auto !important;
}