/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/
.page-header {
    position: relative;
    display: block;
    padding: 0 15px; /* ensure equal page inset on both sides */
    box-sizing: border-box;
    text-align: center;
}
.page-header__wrap {
    position: relative;
    display: block;
    max-width: 1320px;
    width: 100%;
    margin: 20px auto 12px;
    background: linear-gradient(180deg, rgba(var(--crank-gray-rgb), 0.96) 0%, rgba(0, 0, 0, 0.98) 100%);
    border-radius: 25px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0; /* inner padding handled by container */
    text-align: center;
}
/* Let the global .container rules control side padding so headers align
   with the rest of the page. (Removed explicit zero padding.) */
.page-header__shape-1 {
    display: none;
    background-image: url("../../images/shapes/page-header-shape-2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.page-header__inner {
    position: relative;
    display: block;
    padding: 16px 0;
    overflow: hidden;
    z-index: 1;
    text-align: center;
}
.page-header__inner h2 {
    font-weight: 600;
    line-height: 42px;
    font-size: clamp(32px, 3vw, 44px);
    color: var(--crank-white) !important;
    margin: 0 !important;
    text-align: center;
}
/* When header is immediately followed by the main about-section, remove extra top gap */
.page-header + .faq-one .section-title {
    margin-top: 0;
}
.thm-breadcrumb__box {
    display: none;
}
.thm-breadcrumb {
    position: relative;
    display: inline-block;
}
.thm-breadcrumb li {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: var(--crank-white);
    text-transform: capitalize;
    font-family: var(--crank-font-two);
    transition: all 500ms ease;
}
.thm-breadcrumb li span {
    position: relative;
    font-size: 12px;
    margin-left: 14px;
    margin-right: 13px;
}
.thm-breadcrumb li a {
    position: relative;
    display: inline-block;
    color: var(--crank-white);
    transition: all 500ms ease;
}
.thm-breadcrumb li:hover a {
    color: var(--crank-base);
}
.page-header__img-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    animation: topBottom 3s ease-in-out infinite;
    z-index: -1;
}
.page-header__img-1 img {
    width: auto;
}
.page-header__shape-2 {
    position: absolute;
    width: 359px;
    height: 359px;
    right: 94px;
    bottom: -25px;
    background-color: rgba(var(--crank-base-rgb), 0.15);
    border-radius: 50%;
    z-index: -1;
}
.page-header__shape-3 {
    position: absolute;
    width: 464px;
    height: 464px;
    right: 45px;
    bottom: -80px;
    background-color: rgba(var(--crank-base-rgb), 0.2);
    border-radius: 50%;
    z-index: -1;
}
.page-header__shape-4 {
    position: absolute;
    width: 550px;
    height: 550px;
    right: 0;
    bottom: -120px;
    border-radius: 50%;
    background-color: rgba(var(--crank-base-rgb), 0.2);
    z-index: -1;
}
.page-header__shape-5 {
    position: absolute;
    top: -95px;
    left: 75px;
    opacity: 0.5;
    animation-name: rotateme;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotateme;
    -webkit-animation-duration: 24s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotateme;
    -moz-animation-duration: 24s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: rotateme;
    -ms-animation-duration: 24s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: rotateme;
    -o-animation-duration: 24s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.page-header__shape-5 img {
    width: auto;
}
/* Mobile: keep consistent side padding and adjust heading spacing on small screens */
@media (max-width: 575.98px) {
    .page-header {
        /* outer header should not add extra horizontal padding on mobile;
           inner container will provide the side inset so we avoid double-padding */
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    .page-header__inner {
        /* slightly reduce vertical padding on small screens */
        padding: 12px 0;
    }
    .page-header__inner h2 {
        /* ensure heading scales nicely on small phones */
        font-size: 22px;
        line-height: 28px;
        text-align: center;
    }
}
/* Tablet + Mobile: ensure header alignment up to small-desktop widths */
@media (max-width: 991.98px) {
    .page-header {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }
    /* Match global .container padding on small/medium screens so the
       header aligns with page content (use 30px to match responsive.css). */
    .page-header__wrap .container {
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .page-header__inner {
        padding: 12px 0;
    }
    .page-header__inner h2 {
        font-size: 22px;
        line-height: 28px;
        text-align: center;
    }
}
/*--------------------------------------------------------------
    # End
    --------------------------------------------------------------*/
/* ------------------------------------------------------------
   Ensure consistent spacing after the page header across site
   ------------------------------------------------------------ */
.page-header {
    margin-bottom: 60px;
}
@media (max-width: 991.98px) {
    .page-header {
        margin-bottom: 20px;
    }
}
@media (max-width: 575.98px) {
    .page-header {
        margin-bottom: 30px;
    }
}
/* When a <section> immediately follows the page header, remove its
   top padding/margin so the visible gap equals the header margin only. */
.page-header + section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}