/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/
.page-header {
    position: relative;
    display: block;
    padding: 100px 0 100px 0;
    overflow: hidden;
    z-index: 1;
}

.page-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.page-header__bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}


.page-header__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: -moz-linear-gradient(-90deg, rgb(16, 16, 21) 0%, rgba(16, 16, 21, 0) 60%);
    background-image: -webkit-linear-gradient(-90deg, rgb(16, 16, 21) 0%, rgba(16, 16, 21, 0) 60%);
    background-image: -ms-linear-gradient(-90deg, rgb(16, 16, 21) 0%, rgba(16, 16, 21, 0) 60%);
    z-index: 1;
}






.page-header__inner {
    position: relative;
    display: block;
}

.page-header__inner h2 {
    font-size: 60px;
    font-weight: 500;
    line-height: 70px;
    color: var(--techguru-white);
    text-transform: capitalize;
    margin-top: 5%;
}

.thm-breadcrumb__box {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    padding: 2px 12px 3px;
    background-color: rgba(var(--techguru-white-rgb), .12);
    z-index: 1;
}

.thm-breadcrumb {
    position: relative;
    display: inline-block;
}

.thm-breadcrumb li {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--techguru-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.thm-breadcrumb li+li {
    margin-left: 8px;
}

.thm-breadcrumb li span {
    font-size: 10px;
}

.thm-breadcrumb li a {
    position: relative;
    display: inline-flex;
    color: var(--techguru-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    align-items: center;
    gap: 8px;
}

.thm-breadcrumb li:hover a {
    color: var(--techguru-base);
}

/* ==================================================================
   Carola breadcrumb trail — project addition
   ==================================================================
   Everything above is the previous theme's page-header CSS
   (.page-header__*). It matches no markup on the site any more and is
   inert; left in place rather than deleted.

   Carola's breadcrumb-section styles only the <h1>. The trail beneath
   it is ours — kept so the banner still offers navigation and so the
   visible path matches the breadcrumb structured data — so it needs
   styling, and unstyled it rendered as a black bulleted list on the
   dark banner.

   Colours follow the theme: white on the banner, --theme-color for
   hover and for the current page.
   ================================================================== */
.breadcrumb-section .banner-content .bread-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-section .banner-content .bread-crumb li {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    font-family: var(--primary-font);
    font-weight: 400;
}

/* Separator between crumbs, never before the first one. */
.breadcrumb-section .banner-content .bread-crumb li + li::before {
    content: "/";
    margin: 0 10px;
    opacity: 0.55;
}

.breadcrumb-section .banner-content .bread-crumb li a {
    color: #fff;
    transition: color 0.3s ease;
}

.breadcrumb-section .banner-content .bread-crumb li a:hover {
    color: var(--theme-color);
}

/* The page you are on is not a link, so mark it in the theme colour. */
.breadcrumb-section .banner-content .bread-crumb li.current {
    color: var(--theme-color);
}

@media (max-width: 767px) {
    .breadcrumb-section .banner-content .bread-crumb li {
        font-size: 14px;
    }
}

/* ==================================================================
   Banner top scrim — so the overlaid header always reads
   ==================================================================
   The home-three header is `position: absolute` and sits ON the banner,
   with a transparent top bar. Its text is therefore at the mercy of
   whatever the owner uploads: the breadcrumb image is bright sky along
   the top, and white header text vanished into it.

   The slide got the same treatment for the same reason. Darkening only
   the top band keeps the photograph itself intact — the heading and the
   trail sit lower down, over the part that is untouched.
   ================================================================== */
.breadcrumb-section {
    position: relative;
}

.breadcrumb-section::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 190px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, rgb(9 9 11 / 72%) 0%, rgb(9 9 11 / 34%) 55%, rgb(9 9 11 / 0) 100%);
}

/* The banner's own content has to stay above it. */
.breadcrumb-section .container,
.breadcrumb-section .banner-content {
    position: relative;
    z-index: 2;
}

/* ==================================================================
   Overlaid header bar
   ==================================================================
   The home-three nav bar is a solid rgb(18,18,18) block floating on the
   banner. Over a photograph that reads as a slab pasted on top — the
   picture stops at its edge and starts again underneath.

   Kept solid dark by owner decision, which is also Carola's own
   home-three treatment. It reads as a deliberate bar rather than a panel
   floating on the picture, and against the banner scrim every item in it
   holds its contrast whatever photograph sits behind.

   The sticky state matches it, so nothing changes colour as you scroll —
   only the shadow goes, since there is no banner beneath it to lift off.
   ================================================================== */
.home-three .main_header .main_header_inner {
    background-color: rgb(18, 18, 18);
    border: 0;
    box-shadow: 0 14px 40px rgb(0 0 0 / 18%);
}

/* Scrolled: solid again, and the border goes with it. */
.home-three .sticky_header .main_header_inner,
.home-three.fixed_header .sticky_header .main_header_inner {
    background-color: rgb(18, 18, 18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
}