.hero-header-master  {display: none !important}

.monthly-byte-items .wrapper,
.key-contacts-section .wrapper,
section.hero-header .wrapper                      {padding: 0 24px;}

section.hero-header           {padding: 70px 0 0; height: auto;}
section.hero-header .wrapper  {gap: 50px;}
section.hero-header.bg-image  {background-image: none !important;}

.main-bg-image                {background-image: url(/digital-transformation-academy/_assets/bg-gradient.svg); background-size: cover; background-repeat: no-repeat; background-position: top right;}

.hero-text-box                {background-color: rgba(0,34,54,0.5); max-width: 100%; min-width:363px;}

.hero-text-box .subtitle   {color: #ffffff; font-size: 18px; font-weight: 700; margin-bottom: 15px;}

.hero-text-box .logo-and-title            {margin-bottom: 50px;}
.hero-text-box .logo-and-title img.logo   {width: 262px;}
.hero-text-box .page-title                {margin-bottom: 20px;}

.hero-text-box .title   {font-size: 38px; font-weight: 400}

.hero-header .col-1        {width: auto; flex: 1; padding: 0;}
.hero-header .col-right h2 {font-size: 35px; font-weight: 700; color: #ffffff; margin-bottom: 0.35em}
.hero-header .col-right p  {font-size: 24px; font-weight: 300; color: #ffffff}

section.hero-header .btn-back          {align-self: flex-start; background-color: var(--hlc-midnight-blue); color: #ffffff; border-color: var(--hlc-midnight-blue)}
section.hero-header .btn-back:before   {background-image: url(/digital-transformation-academy/_assets/btn-arrow-hl-dark-white.png);}

/* KEY CONTACTS */
.key-contacts-section   {margin-top: 26px; padding-bottom: 70px;}
.key-contacts           {display: flex; width: 100%;  background-color: rgba(255,255,255,0.5); padding: 30px; gap: 30px; flex-wrap: wrap; max-width: 996px; }
.key-contact            {flex: 1; max-width: 157px;}
.key-contact img        {width: 100%; margin-bottom: 10px; max-width: 85px; }
.key-contact h3         {color: var(--hlc-midnight-blue); font-size: 15px; margin-bottom: 0.75em; line-height: 1.2em;}


section.monthly-byte-items                {background-image: url(/digital-transformation-academy/_assets/bg-image-dark.jpg); background-size: cover; background-position: top right; background-repeat: no-repeat; margin-top: 0; padding: 60px 0;  color: #ffffff;}
section.monthly-byte-items h2             {font-size: 34px; font-weight: 300; color: #ffffff;}
section.monthly-byte-items .item .title,   
section.monthly-byte-items .item .copy p, 
section.monthly-byte-items .item .copy ul,
section.monthly-byte-items .item .copy ol    {color: #ffffff;}

section.monthly-byte-items .item .copy ol li a,
section.monthly-byte-items .item .copy ul li a,
section.monthly-byte-items .item .copy p a      {text-decoration: underline; font-weight: normal; border: none !important}

section.monthly-byte-items .item .copy ol li a:hover,
section.monthly-byte-items .item .copy ul li a:hover,
section.monthly-byte-items .item .copy p a:hover   {color: var(--hl-light-green);}

section.monthly-byte-items .item             {margin: 35px 0 60px; border-left: 5px solid var(--hl-light-green); padding-left: 20px;}
section.monthly-byte-items .item-image       {width: 355px; flex-shrink: 0}
section.monthly-byte-items .item-image img   {max-width: 100%;}
section.monthly-byte-items .item-image.has-lightbox img {display: block;}
section.monthly-byte-items .monthly-byte-image-button {display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left;}
section.monthly-byte-items .monthly-byte-image-button:focus-visible,
section.monthly-byte-items .monthly-byte-view-image:focus-visible {outline: 2px solid var(--hl-light-green); outline-offset: 4px;}
section.monthly-byte-items .monthly-byte-view-image {display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 0; border: 0; background: transparent; color: #ffffff; font-family: 'GT Ultra Regular', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.2; cursor: pointer;}
section.monthly-byte-items .monthly-byte-view-image:hover {color: var(--hl-light-green);}
section.monthly-byte-items .monthly-byte-magnifier-icon {position: relative; display: inline-block; width: 18px; height: 18px; border: 2px solid var(--hl-light-green); border-radius: 50%; background-image: linear-gradient(var(--hl-light-green), var(--hl-light-green)), linear-gradient(var(--hl-light-green), var(--hl-light-green)); background-position: center; background-repeat: no-repeat; background-size: 8px 2px, 2px 8px; flex-shrink: 0;}
section.monthly-byte-items .monthly-byte-magnifier-icon:after {content: ""; position: absolute; display: block; width: 9px; height: 2px; right: -8px; bottom: -5px; background-color: var(--hl-light-green); transform: rotate(45deg); transform-origin: left center;}
section.monthly-byte-items .monthly-byte-view-image:after {content: ""; width: 9px; height: 9px; border-right: 2px solid var(--hl-light-green); border-bottom: 2px solid var(--hl-light-green); transform: rotate(-45deg); transition: transform 0.2s;}
section.monthly-byte-items .monthly-byte-view-image:hover:after {transform: translateX(3px) rotate(-45deg);}
section.monthly-byte-items .item .title      {width: 100%; margin-bottom: 0.5em; font-size: 26px;}
section.monthly-byte-items .item .copy h3    {font-size: 24px; font-weight: 300; color: var(--hl-light-green); margin-bottom: 1em}

section.monthly-byte-items .icon             {width: 53px; height: auto; margin-bottom: 15px;} 

.monthly-byte-lightbox {display: none; position: fixed; z-index: 10000; inset: 0; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 56px); background-color: rgba(0, 34, 54, 0.94);}
.monthly-byte-lightbox.is-open {display: flex;}
.monthly-byte-lightbox-frame {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.monthly-byte-lightbox-frame img {display: block; max-width: calc(100vw - 80px); max-height: calc(100vh - 80px); width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);}
.monthly-byte-lightbox-close {position: fixed; top: 20px; right: 20px; z-index: 10001; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background-color: var(--hl-light-green); background-image: url("/_assets/icon-close-dark.png"); background-position: center; background-repeat: no-repeat; background-size: 17px; cursor: pointer;}
.monthly-byte-lightbox-close:hover,
.monthly-byte-lightbox-close:focus-visible {background-color: #ffffff;}
.monthly-byte-lightbox-close span {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}




@media (max-width: 900px) {

   section.hero-header           {height: auto; padding-top: 40px;}
   section.hero-header .wrapper  {flex-direction: column; align-items: flex-start; gap: 20px;}
   section.hero-header .btn-back {order: 1; margin-left: auto}
   .hero-header .col-1           {order: 2; width: 100%}
   .hero-header .col-right       {order: 3;}
   .hero-text-box                {width: 100%; margin-bottom: 25px;}
   
}
   

@media (max-width:720px) {
   
   section.monthly-byte-items .item {flex-direction: column}
   section.monthly-byte-items .item-image {width: 100%;}
   .monthly-byte-lightbox-frame img {max-width: calc(100vw - 32px); max-height: calc(100vh - 92px);}
   
}

@media (max-width: 500px) {
   
   section.top-navigation.desktop .col-1  {flex-direction: row}

   .main-bg-image    {background-image: url(/digital-transformation-academy/_assets/bg-gradient-mb.jpg); }
   
   .key-contacts     {align-items: flex-start}
   .key-contact      {display: flex; flex: 1 1 100%; gap: 17px;}
   .key-contact p    {margin-bottom: 0}
   .key-contact img  {margin-bottom: 0}
   .kc-text          {align-self: flex-end}
   
}