/*---------------------------------------------------------------------------------------
17. About Us Page css 
18. Services Page css 
19. Service Single css 
20. Blog Archive css 
21. Blog Single css 
22. Projects Page css 
23. Project Single css 
24. Team Page css 
25. Team Single css 
26. Testimonials Page css 
27. Image Gallery css 
28. Video Gallery css 
29. FAQs Page css 
30. Contact Us Page css 
31. 404 Error Page css 
-------------------------------------------------------------------------------------- */

/************************************/
/***       Page Header css        ***/
/************************************/

.page-header {
    position: relative;
    /* background: url('../images/page-header-bg.png') no-repeat; */
    background-position: center center;
    background-size: cover;
    padding: 265px 0 80px;
    z-index: 1;
}

.page-header::before {
    content: '';
    display: block;
    position: absolute;
    left: 160px;
    bottom: 20%;
    background: url('../images/section-bg-shape-1.png') no-repeat;
    background-position: left center;
    background-size: cover;
    width: 113px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

@keyframes shape1 {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(50px) rotate(360deg);
    }
}

.page-header::after {
    content: '';
    display: block;
    position: absolute;
    right: 220px;
    top: 40%;
    background: url('../images/section-bg-shape-2.png') no-repeat;
    background-position: right center;
    background-size: cover;
    width: 82px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

.page-header-box {
    position: relative;
    text-align: center;
    z-index: 1;
}

.page-header-box h1 {
    font-size: 70px;
    display: inline-block;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 15px;
    cursor: none;
}

.page-header-box h1 span {
    font-weight: 700;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease-in-out;
}

.page-header-box h1:hover span {
    background-position: right center;
}

.page-header-box ol {
    margin: 0;
    padding: 0;
    justify-content: center;
}

.page-header-box ol li.breadcrumb-item {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--text-color);
}

.page-header-box ol li.breadcrumb-item a {
    color: inherit;
}

.page-header-box ol li.breadcrumb-item.active {
    color: var(--text-color);
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: var(--text-color);
}


/************************************/
/***    Appointments Page css     ***/
/************************************/
#calendly {
    padding: var(--sectionPadding);
    padding-top: 40px;
}

#calendly p {
    text-align: center;
    margin-bottom: 30px;
    font-size: 18px;
    color: var(--text-color);
    max-width: 800px;
    margin: 0 auto 30px auto;
}

#calendly .calendly-inline-widget {
    min-width: 320px;
    height: 964px;
    border-radius: 0.25rem;
}


/************************************/
/***    31. 404 Error Page css    ***/
/************************************/

.error-page {
    padding: 80px 0 160px;
}

.error-page-image {
    text-align: center;
    margin-bottom: 30px;
}

.error-page-image img {
    width: 100%;
    max-width: 45%;
}

.error-page-content {
    text-align: center;
}

.error-page-content .section-title {
    margin-bottom: 15px;
}

/************************************/
/***        Media Page css        ***/
/************************************/

.media-page {
    padding: 40px 0 80px;
}