.elementor-70 .elementor-element.elementor-element-61e7a02{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-70 .elementor-element.elementor-element-8c87bfa{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-70 .elementor-element.elementor-element-05bccae .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-70 .elementor-element.elementor-element-61e7a02{--width:100%;}.elementor-70 .elementor-element.elementor-element-8c87bfa{--width:100%;}}@media(max-width:1024px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:767px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}/* Start custom CSS *//* ============================================================
   SITE WIDTH — 1350px
   The old 1260 figure is hardcoded in .wrap (techcraft-global.css)
   and in every wrapper ID across the page shims, header and footer.
   Overriding here keeps those files untouched. The body prefix
   raises specificity so these win whichever stylesheet Elementor
   prints last. To change the width again, edit only this block.
   ============================================================ */
body .wrap,
body #tcNav,
body #tcPhInner,body .page-hero .inner,
body #tcWhoWrap,body #tcDeliverWrap,body #tcSvcWrap,
body #tcStorySplit,body #tcValWrap,body #tcCredWrap,body #tcLdrSplit,
body #tcDirWrap,body #tcProcWrap,body #tcWhoSrvSplit,body #tcActWrap,
body #tcIncSplit,body #tcForWrap,body #tcRelWrap,
body #tcNewsWrap,
body #tcCtaWrap,
body #tcFootInner{max-width:1350px}

/* ============================================================
   HEADER SKIN
   ============================================================ */
#tcHeader{position:sticky;top:0;z-index:60;background:rgba(252,252,253,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0;gap:0}
#tcNav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:96px;gap:18px;margin:0 auto;padding:0 48px;width:100%}
#tcNav>.elementor-widget{width:auto;flex:none}
#tcMainNav .elementor-nav-menu{display:flex;gap:30px;list-style:none;margin:0;padding:0}
#tcMainNav .elementor-nav-menu li{margin:0}
#tcMainNav .elementor-nav-menu a{font-size:16px;font-weight:600;letter-spacing:.02em;position:relative;padding:6px 0;white-space:nowrap;color:var(--ink);background:transparent;border:0}
#tcMainNav .elementor-nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--ink);transition:width .25s}
#tcMainNav .elementor-nav-menu a:hover::after,#tcMainNav .elementor-nav-menu a[aria-current="page"]::after{width:100%}
@media(max-width:1240px){#tcMainNav{display:none}}
@media(max-width:640px){#tcNav{padding:0 22px;height:84px}}

/* ============================================================
   HOMEPAGE HERO — light, blueprint panel retained, no photo.
   Height reduced from 718px: padding trimmed 84/96 -> 52/60 and
   the drawing panel capped at 470px wide, which scales its height
   down proportionally so it no longer sets the hero's height.
   The credential strip was removed from the markup, so its rules
   are gone from here too — the claims remain in the footer and
   on About.
   ============================================================ */
#main .hero{background:linear-gradient(180deg,#FCFCFD 0%,#F4F5F8 100%)}
#main .hero::before{display:none}
#main .hero-inner{padding:52px 0 60px;align-items:center;gap:56px}
#main .hero-art{max-width:470px;width:100%;justify-self:end}
#main .eyebrow{color:var(--blue);border-color:rgba(62,110,224,.28);background:rgba(62,110,224,.06)}
#main .hero h1{color:var(--ink)}
#main .hero h1 .g{background:linear-gradient(100deg,#3E6EE0,#0A1E44);-webkit-background-clip:text;background-clip:text;color:transparent}
#main .hero p.sub{color:var(--ink2)}
#main .btn-dark-ghost{border-color:var(--line);color:var(--ink);background:#fff}
#main .btn-dark-ghost:hover{background:var(--paper2);color:var(--ink)}
@media(max-width:900px){#main .hero-art{max-width:none;justify-self:stretch}}

/* ============================================================
   INTERIOR PAGE HEROES — light, copy left, photo right
   #tcPageHero = converted to native widgets
   .page-hero  = still on HTML widgets
   ============================================================ */
body #tcPageHero,body .page-hero{
  background-color:#EDEFF4;
  background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-general.jpg);
  background-size:cover;background-position:right center;background-repeat:no-repeat;
  color:var(--ink);
  min-height:440px;display:flex;align-items:stretch}
body #tcPageHero::before,body .page-hero::before{
  background:linear-gradient(90deg,rgba(252,252,253,.97) 0%,rgba(252,252,253,.90) 40%,rgba(252,252,253,.42) 70%,rgba(252,252,253,.12) 100%);
  z-index:0}

/* HTML-widget pages nest .inner inside .wrap, which would apply the
   width cap and 48px gutter twice. Neutralise it inside heroes only. */
body .page-hero .wrap{max-width:none;margin:0;padding:0;width:100%;display:flex}

body #tcPhInner,body .page-hero .inner{
  position:relative;z-index:1;margin:0 auto;
  padding:56px 48px;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center}

/* hero CTAs removed — the page content below carries the actions */
body #tcPageHero .hero-ctas,body .page-hero .hero-ctas{display:none}

body .page-hero .crumbs,body #tcPageHero .crumbs{color:var(--ink2)}
body .page-hero .crumbs a,body #tcPageHero .crumbs a{color:var(--ink2)}
body .page-hero .crumbs a:hover,body #tcPageHero .crumbs a:hover{color:var(--ink)}
body .page-hero .crumbs .sep,body #tcPageHero .crumbs .sep{color:#9AA7C4}

body .page-hero h1,body #tcPhH1 .elementor-heading-title{color:var(--ink);max-width:620px}
body .page-hero .g,body #tcPhH1 .g{background:linear-gradient(100deg,#3E6EE0,#0A1E44);-webkit-background-clip:text;background-clip:text;color:transparent}
body .page-hero p,body #tcPhP{color:var(--ink2);max-width:520px}

body .page-hero .chip,body #tcPageHero .chip{
  background:rgba(62,110,224,.08)!important;
  border-color:rgba(62,110,224,.30)!important;
  color:var(--blue)!important}

/* ---- per-page hero backgrounds (WordPress body classes) ---- */
.page-id-31 #tcPageHero{background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-services.jpg)}
.page-id-32 #tcPageHero{background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-accredited-learning.jpg)}
.page-id-33 #tcPageHero{background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-custom-programmes.jpg)}
.page-id-34 #tcPageHero{background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-quality-materials.jpg)}
.page-id-35 #tcPageHero{background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-programme-coordination.jpg)}
.page-id-40 .page-hero{background-image:url(https://techcraftskills.co.za/wp-content/uploads/2026/08/hero-contact.jpg)}

@media(max-width:900px){body #tcPageHero,body .page-hero{min-height:380px}}
@media(max-width:640px){
  body #tcPageHero,body .page-hero{min-height:320px}
  body #tcPhInner,body .page-hero .inner{padding:40px 22px}
  body #tcPageHero::before,body .page-hero::before{background:linear-gradient(90deg,rgba(252,252,253,.97) 0%,rgba(252,252,253,.93) 60%,rgba(252,252,253,.70) 100%)}
}/* End custom CSS */