.elementor-991856 .elementor-element.elementor-element-34d1d14 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-991856 .elementor-element.elementor-element-34d1d14:not(.elementor-motion-effects-element-type-background), .elementor-991856 .elementor-element.elementor-element-34d1d14 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0a1a;background-image:url("https://publicpixel.com.sa/wp-content/uploads/2026/02/high-voltage-electric-pole-with-power-line-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-991856 .elementor-element.elementor-element-34d1d14 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-34d1d14{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-34d1d14 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-c1d69fe > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-1f8aff1{--spacer-size:80px;}.elementor-991856 .elementor-element.elementor-element-bbe86bf > .elementor-widget-container{margin:0 0 0 0;}.elementor-991856 .elementor-element.elementor-element-0811433{--spacer-size:16px;}.elementor-991856 .elementor-element.elementor-element-507cdf7 > .elementor-widget-container{margin:0 0 0 0;}.elementor-991856 .elementor-element.elementor-element-507cdf7{text-align:start;}.elementor-991856 .elementor-element.elementor-element-507cdf7 .elementor-heading-title{font-family:"Tajawal", Sans-serif;font-size:88px;font-weight:900;line-height:0.92em;letter-spacing:-0.03em;color:#ffffff;}.elementor-991856 .elementor-element.elementor-element-28fccfd{--spacer-size:1px;}.elementor-991856 .elementor-element.elementor-element-1934411 > .elementor-widget-container{margin:0 0 0 0;}.elementor-991856 .elementor-element.elementor-element-1934411{font-family:"Tajawal", Sans-serif;font-size:17px;line-height:1.85em;color:#ffffff;}.elementor-991856 .elementor-element.elementor-element-1934411 a{font-family:"Tajawal", Sans-serif;font-size:17px;line-height:1.85em;color:#ffffff;}.elementor-991856 .elementor-element.elementor-element-5f6fb54{--spacer-size:40px;}.elementor-991856 .elementor-element.elementor-element-388cc1c{--spacer-size:80px;}.elementor-991856 .elementor-element.elementor-element-a223854{--spacer-size:80px;}.elementor-991856 .elementor-element.elementor-element-5710097 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-991856 .elementor-element.elementor-element-5710097:not(.elementor-motion-effects-element-type-background), .elementor-991856 .elementor-element.elementor-element-5710097 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-991856 .elementor-element.elementor-element-5710097 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-5710097{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-5710097 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-448c900:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-448c900 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-448c900 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-448c900 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-5ef8b75 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-991856 .elementor-element.elementor-element-5ef8b75 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-5ef8b75{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-5ef8b75 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-33daba9:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-33daba9 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-33daba9 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-33daba9 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-d3e1d8e > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-991856 .elementor-element.elementor-element-d3e1d8e > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-d3e1d8e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-d3e1d8e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-4c8f11a:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-4c8f11a > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-4c8f11a > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-4c8f11a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-66a5553 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-66a5553{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-66a5553 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-7f81568:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-7f81568 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-7f81568 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-7f81568 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-ac62ee3 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-ac62ee3{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-ac62ee3 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-c9f825f:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-c9f825f > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-c9f825f > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-c9f825f > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-0805d9d > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-0805d9d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-0805d9d > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-6804b32:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-6804b32 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-6804b32 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-6804b32 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-e70e897 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-e70e897{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-e70e897 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-b75b15e:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-b75b15e > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-b75b15e > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-b75b15e > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-58c0016 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-58c0016{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-58c0016 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-0e20f31:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-0e20f31 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-0e20f31 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-0e20f31 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-ca38552 > .elementor-container{min-height:100vh;}.elementor-991856 .elementor-element.elementor-element-ca38552{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-ca38552 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-587fa9a:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-991856 .elementor-element.elementor-element-587fa9a > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B1018;}.elementor-991856 .elementor-element.elementor-element-587fa9a > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding-block-start:0px;padding-inline-start:0px;padding-block-end:0px;padding-inline-end:0px;}.elementor-991856 .elementor-element.elementor-element-587fa9a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-991856 .elementor-element.elementor-element-9b260e4{width:100%;max-width:100%;}.elementor-991856 .elementor-element.elementor-element-406a886{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-991856 .elementor-element.elementor-element-406a886:not(.elementor-motion-effects-element-type-background), .elementor-991856 .elementor-element.elementor-element-406a886 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_5 );}.elementor-991856 .elementor-element.elementor-element-55bd536 .elementor-icon-wrapper{text-align:center;}.elementor-991856 .elementor-element.elementor-element-55bd536.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-55bd536.elementor-view-framed .elementor-icon, .elementor-991856 .elementor-element.elementor-element-55bd536.elementor-view-default .elementor-icon{color:var( --e-global-color-vamtam_accent_2 );border-color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-55bd536.elementor-view-framed .elementor-icon, .elementor-991856 .elementor-element.elementor-element-55bd536.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-55bd536 .elementor-icon{font-size:35px;}.elementor-991856 .elementor-element.elementor-element-55bd536 .elementor-icon svg{height:35px;}.elementor-991856 .elementor-element.elementor-element-55bd536 .elementor-icon i, .elementor-991856 .elementor-element.elementor-element-55bd536 .elementor-icon svg{transform:rotate(0deg);}.elementor-991856 .elementor-element.elementor-element-20d217a > .elementor-widget-container{margin:0 0 0 0;}.elementor-991856 .elementor-element.elementor-element-20d217a{text-align:center;}.elementor-991856 .elementor-element.elementor-element-20d217a .elementor-heading-title{font-family:"Tajawal", Sans-serif;font-size:18px;line-height:1.9em;color:var( --e-global-color-vamtam_accent_2 );}.elementor-991856 .elementor-element.elementor-element-b0ae895{--display:flex;}.elementor-991856 .elementor-element.elementor-element-b0ae895:not(.elementor-motion-effects-element-type-background), .elementor-991856 .elementor-element.elementor-element-b0ae895 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-vamtam_accent_5 );}.elementor-991856 .elementor-element.elementor-element-6c03449{--swiper-slides-to-display:3;--swiper-offset-size:100px;--swiper-slides-gap:24px;z-index:2;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-991856 .elementor-element.elementor-element-6c03449 > .elementor-widget-container{margin:0 0 2vh 0;}.elementor-991856 .elementor-element.elementor-element-6c03449.elementor-element{--align-self:stretch;}.elementor-991856 .elementor-element.elementor-element-6c03449 .swiper-slide > .elementor-element{height:100%;}@media(max-width:1024px){.elementor-991856 .elementor-element.elementor-element-6c03449{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-991856 .elementor-element.elementor-element-34d1d14{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-c1d69fe > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-bbe86bf > .elementor-widget-container{margin:60 0 0 0;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-507cdf7 > .elementor-widget-container{margin:0 0 0 0;}.elementor-991856 .elementor-element.elementor-element-507cdf7 .elementor-heading-title{font-size:34px;}.elementor-991856 .elementor-element.elementor-element-1934411 > .elementor-widget-container{margin:0 0 0 0;}.elementor-991856 .elementor-element.elementor-element-ba81bb7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-5710097{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-448c900 > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-5ef8b75{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-33daba9 > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-d3e1d8e{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-4c8f11a > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-66a5553{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-7f81568 > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-ac62ee3{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-c9f825f > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-0805d9d{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-6804b32 > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-e70e897{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-b75b15e > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-58c0016{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-0e20f31 > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-ca38552{padding:0px 0px 0px 0px;}.elementor-991856 .elementor-element.elementor-element-587fa9a > .elementor-element-populated{padding-block-start:0px;padding-inline-start:64px;padding-block-end:0px;padding-inline-end:48px;}.elementor-991856 .elementor-element.elementor-element-6c03449{--swiper-slides-to-display:1;--swiper-offset-size:0px;--swiper-slides-gap:20px;}}/* Start custom CSS for heading, class: .elementor-element-507cdf7 */.hero-h1 em {
  font-weight: bold;
  font-style: italic; /* keeps italic */
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-34d1d14 *//* Mobile: blur ONLY the hero section (add class: hero-blur to the hero section/container) */
@media (max-width: 767px){

  /* HERO wrapper only */
  .elementor-location-single .hero-blur{
    position: relative;
    overflow: hidden;
    isolation: isolate; /* prevents pseudo layers from affecting siblings */
  }

  /* Blur ONLY the hero background (not the whole page behind it) */
  .elementor-location-single .hero-blur::before{
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;               /* inherits hero background image/color */
    background-position: center;
    background-size: cover;
    filter: blur(10px);
    transform: scale(1.08);            /* avoid blur edges */
    z-index: 0;
    pointer-events: none;
  }

  /* Dark overlay on top of the blurred background */
  .elementor-location-single .hero-blur::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
    pointer-events: none;
  }

  /* Keep hero content above overlay */
  .elementor-location-single .hero-blur > *{
    position: relative;
    z-index: 1;
  }

  /* Make text white ONLY inside hero */
  .elementor-location-single .hero-blur,
  .elementor-location-single .hero-blur .elementor-heading-title,
  .elementor-location-single .hero-blur .elementor-widget-text-editor,
  .elementor-location-single .hero-blur .elementor-widget-text-editor p{
    color: #fff !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-12c440a *//* Mobile fixes for the Introduction section */
@media (max-width: 900px) {
  section[style*="background:#000000"] {
    padding: 72px 0 56px !important;
  }

  section[style*="background:#000000"] .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Make the 2-col text grid stack */
  section[style*="background:#000000"] .fade-up[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-bottom: 44px !important;
  }

  /* Heading spacing */
  section[style*="background:#000000"] h2 {
    margin-bottom: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  /* Ensure text doesn't feel cramped */
  section[style*="background:#000000"] .body-text {
    font-size: 16px;
    line-height: 1.75;
  }

  /* Highlight box spacing */
  section[style*="background:#000000"] div[style*="border-left:3px solid"] {
    padding: 18px !important;
  }
}

@media (max-width: 560px) {
  section[style*="background:#000000"] {
    padding: 56px 0 44px !important;
  }

  section[style*="background:#000000"] .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Safer mobile headline size (keeps your clamp but prevents oversized feel) */
  section[style*="background:#000000"] h2 {
    font-size: clamp(26px, 7.2vw, 42px) !important;
    line-height: 1.12 !important;
    margin-bottom: 18px !important;
  }

  /* Stat cards grid should go 1 column on small phones */
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Avoid overflow on big numbers like "95,563 km" */
  .intro-stat-num {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .intro-stat-card {
    padding: 18px !important;
  }
}

/* Make stat grid responsive even on desktop if it isn’t already */
.intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  .intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .intro-grid { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-5710097 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-5710097 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5710097 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-5710097{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8218396 *//* Make table scrollable on small screens */
@media (max-width: 992px){

  .competitor-table{
    min-width: 900px; /* prevents column crushing */
    border-collapse: collapse;
  }

  /* Make parent act like scroll container */
  .fade-up:has(.competitor-table){
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fallback if :has() isn't supported */
  .competitor-table{
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  /* Keep header aligned */
  .competitor-table thead,
  .competitor-table tbody{
    width: 100%;
  }

  /* Improve mobile spacing */
  .competitor-table th,
  .competitor-table td{
    padding: 14px 16px;
    font-size: 14px;
    white-space: nowrap; /* keeps structure intact */
  }

  /* First column can wrap */
  .competitor-table td:first-child{
    white-space: normal;
  }

  /* Score column centered */
  .competitor-table td:last-child{
    text-align: center;
  }
}

/* Optional: smoother scroll indicator */
.competitor-table::-webkit-scrollbar{
  height: 6px;
}
.competitor-table::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-5ef8b75 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-5ef8b75 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-5ef8b75{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dbf268e *//* === Framework Matrix: mobile fix (no HTML changes) === */
@media (max-width: 768px){

  /* Kill the forced min-width wrapper so it can shrink */
  .fade-up[style*="overflow-x:auto"] > div[style*="min-width:700px"]{
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Optional: remove horizontal scrolling on mobile */
  .fade-up[style*="overflow-x:auto"]{
    overflow-x: visible !important;
  }

  /* Hide the desktop header row */
  .matrix-header{
    display: none !important;
  }

  /* Each row becomes a card */
  .matrix-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
  }

  /* Cells become labeled rows */
  .matrix-cell{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;

    /* prevent weird overflow */
    min-width: 0;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Add labels automatically (no HTML needed) */
  .matrix-row .matrix-cell::before{
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }

  .matrix-row .matrix-cell:nth-child(1)::before{ content: "Main"; }
  .matrix-row .matrix-cell:nth-child(2)::before{ content: "Support A"; }
  .matrix-row .matrix-cell:nth-child(3)::before{ content: "Support B"; }
  .matrix-row .matrix-cell:nth-child(4)::before{ content: "Output"; }

  /* Make “Output” feel like a CTA row */
  .matrix-row .mc-output{
    justify-content: center !important;
    text-align: center !important;
    font-weight: 800;
  }
}

/* Small phones: tighter */
@media (max-width: 480px){
  .matrix-cell{
    padding: 14px 14px !important;
    font-size: 14px !important;
  }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-4c8f11a *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-4c8f11a .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-4c8f11a{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-d3e1d8e */.elementor-991856 .elementor-element.elementor-element-d3e1d8e{
  position: relative;
  overflow: hidden;
  min-height: 90vh;
}

.elementor-991856 .elementor-element.elementor-element-d3e1d8e .hero-bg-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.elementor-991856 .elementor-element.elementor-element-d3e1d8e .hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.elementor-991856 .elementor-element.elementor-element-d3e1d8e .elementor-container,
.elementor-991856 .elementor-element.elementor-element-d3e1d8e .e-con,
.elementor-991856 .elementor-element.elementor-element-d3e1d8e .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7a2e842 *//* ✅ MOBILE FIX: force 2-col inline grids to stack */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-7a2e842 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ✅ MOBILE FIX: Competitor <table> scrolls instead of breaking */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .competitor-table{
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;           /* keep columns aligned */
    min-width: 820px;              /* prevents column crush */
  }

  .elementor-991856 .elementor-element.elementor-element-7a2e842 .competitor-table th,
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .competitor-table td{
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* allow first column to wrap if needed */
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .competitor-table td:first-child{
    white-space: normal !important;
    min-width: 160px;
  }
}

/* ✅ MOBILE FIX: Matrix framework (grid “table”) becomes stacked cards */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-header{ display: none !important; }

  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-row{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 14px !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
  }

  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-cell{
    padding: 16px !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    justify-content: space-between;
  }

  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-row .matrix-cell::before{
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-right: 14px;
    flex: 0 0 auto;
    content: "";
  }

  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-row .matrix-cell:nth-child(1)::before{ content: "Main"; }
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-row .matrix-cell:nth-child(2)::before{ content: "Support A"; }
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-row .matrix-cell:nth-child(3)::before{ content: "Support B"; }
  .elementor-991856 .elementor-element.elementor-element-7a2e842 .matrix-row .matrix-cell:nth-child(4)::before{ content: "Output"; }

  .elementor-991856 .elementor-element.elementor-element-7a2e842 .mc-output{
    justify-content: center !important;
    text-align: center !important;
    font-weight: 800 !important;
  }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-7f81568 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-7f81568 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-7f81568 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-7f81568{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-66a5553 */.elementor-991856 .elementor-element.elementor-element-66a5553{
  position: relative;
  overflow: hidden;
  min-height: 90vh;
}

.elementor-991856 .elementor-element.elementor-element-66a5553 .hero-bg-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.elementor-991856 .elementor-element.elementor-element-66a5553 .hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.elementor-991856 .elementor-element.elementor-element-66a5553 .elementor-container,
.elementor-991856 .elementor-element.elementor-element-66a5553 .e-con,
.elementor-991856 .elementor-element.elementor-element-66a5553 .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-028a656 *//* ✅ FIX LAST "TABLE" (sub-components 3-card grid) on mobile */
@media (max-width: 900px){
  .sub-components{
    grid-template-columns: 1fr !important;
    gap: 14px !important;          /* nicer spacing than 3px */
  }

  .sub-card{
    padding: 22px !important;      /* reduce padding on small screens */
  }

  .sub-card-title{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .sub-card-body{
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
}

/* Extra small phones */
@media (max-width: 480px){
  .sub-card{ padding: 18px !important; }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-ac62ee3 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-ac62ee3{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}


/* ✅ FIX the Manifesto 2-column grid inside Output card (mobile) */
@media (max-width: 900px){

  /* target the exact inline grid in the manifesto section */
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .output-card [style*="display:grid"][style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* also reduce the big padding you set inline (56px) */
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .output-card{
    padding: 24px !important;
  }

  /* keep typography comfortable */
  .elementor-991856 .elementor-element.elementor-element-ac62ee3 .output-card h3{
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-0805d9d *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-0805d9d .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-0805d9d .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-0805d9d{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}


/* ✅ FIX the Manifesto 2-column grid inside Output card (mobile) */
@media (max-width: 900px){

  /* target the exact inline grid in the manifesto section */
  .elementor-991856 .elementor-element.elementor-element-0805d9d .output-card [style*="display:grid"][style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* also reduce the big padding you set inline (56px) */
  .elementor-991856 .elementor-element.elementor-element-0805d9d .output-card{
    padding: 24px !important;
  }

  /* keep typography comfortable */
  .elementor-991856 .elementor-element.elementor-element-0805d9d .output-card h3{
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c568375 *//* ✅ FIX: Brand Personality 5-column "table" on mobile (CSS only, no HTML changes) */
@media (max-width: 900px){

  /* target the EXACT inline grid that makes the 5 columns */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:repeat(5,1fr)"]{
    grid-template-columns: 1fr !important;  /* stack cards */
    gap: 12px !important;
  }

  /* make each small card full-width + nicer spacing */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:repeat(5,1fr)"] > div{
    width: 100% !important;
    padding: 18px 14px !important;
    text-align: left !important;
  }

  /* tighten text so it doesn’t look squeezed */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:repeat(5,1fr)"] > div > div:first-child{
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:repeat(5,1fr)"] > div > div:last-child{
    font-size: 12px !important;
    line-height: 1.65 !important;
  }
}

/* ✅ FIX: Brand Tone + Brand Slogan 2-column block on mobile (CSS only) */
@media (max-width: 900px){

  /* this is the wrapper: display:grid; grid-template-columns:1fr 1fr; gap:3px */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:3px"]{
    grid-template-columns: 1fr !important;  /* stack B then C */
    gap: 12px !important;
  }

  /* make sure the two cards fill the width nicely */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:3px"] > .sub-card{
    width: 100% !important;
  }

  /* reduce side padding inside the cards so text doesn’t feel squeezed */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:3px"] > .sub-card{
    padding: 24px 18px !important;
  }

  /* slogan big box: keep it responsive + prevent overflow */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:3px"] .sub-card [style*="padding:28px"][style*="text-align:center"]{
    padding: 22px 16px !important;
  }

  /* big slogan text scaling */
  .elementor-991856 .elementor-element.elementor-element-c568375 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:3px"] .sub-card [style*="font-size:28px"]{
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-e70e897 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-e70e897 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-e70e897 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-e70e897{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}


/* ✅ FIX the Manifesto 2-column grid inside Output card (mobile) */
@media (max-width: 900px){

  /* target the exact inline grid in the manifesto section */
  .elementor-991856 .elementor-element.elementor-element-e70e897 .output-card [style*="display:grid"][style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* also reduce the big padding you set inline (56px) */
  .elementor-991856 .elementor-element.elementor-element-e70e897 .output-card{
    padding: 24px !important;
  }

  /* keep typography comfortable */
  .elementor-991856 .elementor-element.elementor-element-e70e897 .output-card h3{
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-58c0016 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-58c0016 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-58c0016 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-58c0016{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}

/* ✅ FIX Component 05 (Value/Advantage 2-col + Charts 2-col) + fix tiny Chart.js canvas width */
@media (max-width: 900px){

  /* 1) Stack the A/B section (gap:40px) to 1 column */
  .elementor-991856 .elementor-element.elementor-element-58c0016 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:40px"]{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2) Stack the charts row (gap:3px) to 1 column */
  .elementor-991856 .elementor-element.elementor-element-58c0016 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:3px"]{
    grid-template-columns: 1fr !important;
  }

  /* 3) Make sure cards don’t get squeezed */
  .elementor-991856 .elementor-element.elementor-element-58c0016 [style*="display:grid"][style*="grid-template-columns:1fr 1fr"] > *{
    min-width: 0 !important;
  }

  /* 4) FORCE Chart.js canvas to fill the available width (override inline width:198px) */
  .elementor-991856 .elementor-element.elementor-element-58c0016 .chart-card > div[style*="position:relative"][style*="height:280px"]{
    width: 100% !important;
  }

  .elementor-991856 .elementor-element.elementor-element-58c0016 .chart-card canvas{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 280px !important;          /* matches your wrapper height */
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9b260e4 *//* ✅ FIX Component 06 (4 pillars + 2fr/1fr charts + 3 stats cards) + fix tiny Chart.js canvas width */

/* 0) Make any grid child shrink correctly (prevents overflow/squeezing) */
.elementor-991856 .elementor-element.elementor-element-9b260e4 [style*="display:grid"] > *{
  min-width: 0 !important;
}

/* 1) Pillars row: 4 columns -> 2 columns on tablets, 1 column on phones */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 [style*="display:grid"][style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}
@media (max-width: 560px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 [style*="display:grid"][style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Chart section: 2fr/1fr -> stacked on mobile */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 [style*="display:grid"][style*="grid-template-columns:2fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* 3) Stats row: 3 columns -> 1 column on mobile */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 [style*="display:grid"][style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
  }
}

/* 4) ✅ Radar chart canvas fill (override inline width:286px) */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 .chart-card > div[style*="position:relative"][style*="height:300px"]{
    width: 100% !important;
  }

  .elementor-991856 .elementor-element.elementor-element-9b260e4 #chartPillars{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 300px !important;     /* keep same height as wrapper */
  }

  /* Safety: if Chart.js adds inline styles, force them too */
  .elementor-991856 .elementor-element.elementor-element-9b260e4 .chart-card canvas{
    width: 100% !important;
    max-width: none !important;
  }
}

/* ✅ FIX “The Takeaway” section (the 2 paragraphs become super narrow on mobile) */

/* 1) Reduce the huge side padding on mobile */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 section[style*="padding:100px 64px"]{
    padding: 80px 24px !important;
  }
}

/* 2) Stack the 2-column paragraph grid into 1 column on mobile */
@media (max-width: 900px){
  .elementor-991856 .elementor-element.elementor-element-9b260e4 section[style*="padding:100px 64px"]
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* 3) Prevent grid children from forcing weird width behavior */
.elementor-991856 .elementor-element.elementor-element-9b260e4 section[style*="padding:100px 64px"]
div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"] > *{
  min-width: 0 !important;
}

/* =========================================
   CSS-ONLY FIX (no HTML changes)
   Fixes: word-by-word wrapping + squeezed columns
   ========================================= */

/* 1) Override inline padding like: padding:100px 64px; */
@media (max-width: 900px) {
  section[style*="padding:100px 64px"],
  section[style*="padding:80px 64px"],
  section[style*="padding:80px 64px 64px"],
  div[style*="padding:80px 64px"],
  div[style*="padding:80px 64px 64px"],
  div[style*="padding:100px 64px"],
  div[style*="padding:120px 64px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 2) Fix the “max-width container without padding” blocks:
   <div style="max-width:var(--max);margin:0 auto;"> */
@media (max-width: 900px) {
  div[style*="max-width:var(--max)"][style*="margin:0 auto"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 3) Force any inline 2-column grids to become 1 column on mobile
   (this is what causes the word-per-line issue in your screenshots) */
@media (max-width: 900px) {
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"],
  div[style*="display:grid"][style*="grid-template-columns: 1fr 1fr"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr;"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr;gap"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* 4) CTA banner: prevent overflow + wrap nicely */
@media (max-width: 900px) {
  .cta-banner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .cta-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* 5) Prevent “letter-by-letter / word-by-word” wrapping */
body, p, h1, h2, h3, h4, span, a {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 6) Small typography safety for very narrow screens */
@media (max-width: 420px) {
  .cta-h { font-size: 22px !important; }
  .body-text { font-size: 16px !important; }
}

/* =========================================
   Closing 3Q: force 1-column layout (01 -> title -> body)
   No HTML changes
   ========================================= */

/* Make each question card stack vertically */
.closing-3q-item{
  grid-template-columns: 1fr !important;   /* override inline 56px 1fr */
  gap: 14px !important;
  align-items: start;
}

/* Number first (full width) */
.closing-3q-item .closing-q-num{
  order: 1;
  display: block;
  margin: 0 0 4px 0;
}

/* Title second */
.closing-3q-item .closing-q-title{
  order: 2;
  display: block;
  font-weight: 800;                        /* ensure bold */
  line-height: 1.35;
  margin: 0 0 6px 0;
}

/* Body third */
.closing-3q-item .closing-q-body{
  order: 3;
  display: block;
  margin: 0;
  max-width: 65ch;                          /* nicer reading width */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Ensure the inner wrapper doesn't fight layout */
.closing-3q-item > div:nth-child(2){
  display: flex;
  flex-direction: column;
}

/* --- FIX: Saudi Energy (gold) bar not visible (it's under the purple bar) --- */
/* Targets the exact "track" divs you built inline: height:4px + position:relative */
div[style*="height:4px"][style*="position:relative"]{
  overflow: hidden;
}

div[style*="height:4px"][style*="position:relative"] > div{
  left: 0;
  top: 0;
}

/* Gold (Saudi Energy) is the FIRST absolute bar in your markup */
div[style*="height:4px"][style*="position:relative"] > div:first-child{
  z-index: 2; /* on top */
}

/* Purple (Right Name) is the SECOND absolute bar */
div[style*="height:4px"][style*="position:relative"] > div:last-child{
  z-index: 1; /* behind */
}

/* Force Saudi Energy bars to use the exact brand color */
div[style*="height:4px"][style*="position:absolute"][style*="rgba(251,203,59"]{
  background:#fbcb3b !important;
  opacity:1 !important;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-ca38552 *//* FULL WIDTH (mobile) inside hero section */
@media (max-width: 768px){
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-container,
  .elementor-991856 .elementor-element.elementor-element-ca38552 .e-con{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If your content is inside the widget wrap, remove its padding too */
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some Elementor sections use these inner wrappers */
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
  .elementor-991856 .elementor-element.elementor-element-ca38552 .elementor-column-gap-wider > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Optional: make the section itself truly edge-to-edge (prevents 100vw overflow bugs) */
.elementor-991856 .elementor-element.elementor-element-ca38552{
  width: 100%;
  max-width: 100%;
}

/* Optional: if you still see tiny horizontal scroll on mobile */
html, body{
  overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-406a886 *//* Full-bleed background while keeping content boxed */
.elementor-991856 .elementor-element.elementor-element-406a886{
  position: relative !important;
  background: transparent !important;
}

/* This creates a full-width background behind the bar */
.elementor-991856 .elementor-element.elementor-element-406a886::before{
  content: "" !important;
  position: absolute !important;
  top: 0; bottom: 0;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: #fff !important;          /* <-- your bar color */
  z-index: 0 !important;
}

/* Keep heading above the background */
.elementor-991856 .elementor-element.elementor-element-406a886 .elementor-heading-title,
.elementor-991856 .elementor-element.elementor-element-406a886 .elementor-widget-heading{
  position: relative !important;
  z-index: 2 !important;
  color: #000 !important;               /* black text */
}

/* Optional: give the bar some height/padding */
.elementor-991856 .elementor-element.elementor-element-406a886{
  padding: 22px 0 !important;
}/* End custom CSS */
/* Start custom CSS */.limit-wrapper.vamtam-box-outer-padding {
    display: none;
}/* End custom CSS */