/*------------------------------------*\
    #Page Title
\*------------------------------------*/
.page-title {
    padding-top   : 0;
    padding-bottom: 0;

    .page-title-wrap {
        display    : flex;
        align-items: center;
        height     : 560px;

        @media #{$maxTablet} {
            height: 500px;
        }
    }

    .title {
        @media #{$maxTablet} {
            text-align: center;
        }

        .title-sub-heading {
            font-family  : var(--global--font-body);
            font-weight  : 700;
            font-size    : 15px;
            line-height  : 1;
            color        : var(--global--color-gray);
            margin-bottom: 0;

            @media #{$maxTablet} {
                line-height: 1.4;
            }
        }

        .title-heading {
            margin-bottom : 24px;
            font-family   : var(--global--font-heading);
            color         : var(--global--color-white);
            font-size     : 75px;
            font-weight   : 700;
            line-height   : 75px;
            text-transform: capitalize;

            @media #{$maxSmall} {
                font-size  : 32px;
                line-height: 1.4;
            }
        }

        .title-desc {
            color        : var(--global--color-gray);
            font-size    : 18px;
            line-height  : 29px;
            margin-bottom: 30px;
            font-weight  : 700;
        }

        .title-action {
            margin-bottom: 0px;
            display      : flex;
            align-items  : center;

            @media #{$maxTablet} {
                justify-content: center;
            }

            @media #{$maxSmall} {
                display       : flex;
                flex-direction: column;
                align-items   : center;
            }

            .btn {
                justify-content: space-between;
                border-radius  : 4px;
                padding        : 0 30px;
                box-shadow     : 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
                font-family    : var(--global--font-body);
                font-size      : 15px;
                font-weight    : 700;
                display        : inline-flex;
                width          : 200px;
                height         : 65px;
                margin-right   : 30px;

                &:last-child {
                    margin-right: 0;
                }

                @media #{$maxSmall} {
                    width        : 190px;
                    height       : 50px;
                    margin-right : 0;
                    margin-bottom: 20px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }

                i {
                    font-size   : 12px;
                    margin-right: 0;
                }
            }

            .btn-video {
                i {
                    width : 65px;
                    height: 65px;
                }
            }
        }

        .title-list {
            margin-bottom: 14px;

            @media #{$maxSmall} {
                display        : flex;
                flex-wrap      : wrap;
                align-items    : center;
                justify-content: center;
                margin-right   : 0;
            }

            .icon {
                margin-right: 35px;
                display     : inline-block;

                &:last-child {
                    margin-right: 0;
                }

                @media #{$maxSmall} {
                    margin-right : 0;
                    margin       : 0 15px;
                    margin-bottom: 15px;

                    &:last-child {
                        margin-right: 15px;
                    }
                }

                &:hover {
                    i {
                        transform: translateY(-10px);
                    }
                }

                i {
                    display        : flex;
                    justify-content: center;
                    align-items    : center;
                    transition     : 0.3s ease-in-out;

                    &::before {
                        margin-left: 0;
                        font-size  : 67px;
                        color      : var(--global--color-white);
                    }
                }
            }
        }
    }

    .breadcrumb-wrap {
        height       : 60px;
        display      : flex;
        align-items  : center;
        border-bottom: 1px solid #eaeaea;
    }

    .breadcrumb {
        font-family: var(--global--font-body);
        font-size  : 14px;
        font-weight: 400;
        line-height: 1;
        background : transparent;
        color      : var(--global--color-gray);
        display    : flex;

        @media #{$minLarge} {
            justify-content: start;
        }

        @media #{$maxTablet} {
            justify-content: center;
        }

        a {
            font-family: var(--global--font-body);
            font-size  : 14px;
            font-weight: 400;
            line-height: 1px;
            background : transparent;
            color      : var(--global--color-heading);

            &:hover {
                color: var(--global--color-primary);
            }
        }

        .active {
            color: var(--global--color-body);
        }

        .breadcrumb-item+.breadcrumb-item {
            padding-left: 0;

            &::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 700;
                font-size  : 11px;
                padding    : 0 10px;
                color      : var(--global--color-heading);
                content    : "\f054";
            }
        }

        &.breadcrumb-light {
            color: var(--global--color-white);

            a {
                color: var(--global--color-white);
            }

            .active {
                color: var(--global--color-white);
            }

            .breadcrumb-item+.breadcrumb-item {
                &::before {
                    color: var(--global--color-white);
                }
            }
        }
    }

    &.page-title-blank {
        .breadcrumb-wrap {
            min-height   : 100px;
            border-bottom: 0;

            .breadcrumb {
                a {
                    color: var(--global--color-heading);

                    &:hover {
                        color: var(--global--color-primary);
                    }
                }

                .active {
                    color: var(--global--color-body);
                }
            }

            .breadcrumb-item+.breadcrumb-item {
                &::before {
                    color: var(--global--color-heading);
                }
            }
        }
    }

    &.page-title-blank-2 {
        .breadcrumb-wrap {
            min-height   : 100px;
            border-bottom: 0;

            .breadcrumb {
                @media #{$maxTablet} {
                    line-height    : 1.4;
                    justify-content: flex-start;
                }

                a {
                    color        : var(--global--color-heading);
                    margin-bottom: 5px;

                    &:hover {
                        color: var(--global--color-primary);
                    }
                }

                .active {
                    color: var(--global--color-body);
                }
            }

            .breadcrumb-item+.breadcrumb-item {
                &::before {
                    color: var(--global--color-heading);
                }
            }
        }
    }

    &.page-title-1 {
        .page-title-wrap {
            background-position-y: bottom;

            .title {
                .title-action {
                    .btn {
                        margin-right: 40px;

                        @media #{$maxSmall} {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }

    &.page-title-3 {
        .page-title-wrap {
            @media #{$minLarge} {
                background-position-y: -75px;
            }

            .title {
                .title-action {
                    .btn {
                        width       : 234px;
                        margin-right: 0;

                        &:hover {
                            i {
                                color: var(--global--color-white);
                            }
                        }

                        i {
                            transition: 0.3s ease-in-out;
                            color     : var(--global--color-heading);
                        }
                    }
                }
            }
        }
    }

    &.page-title-4 {
        .page-title-wrap {
            @media #{$minLarge} {
                background-position-y: 73%;
            }

            .title {
                .title-action {
                    .btn {
                        width       : 170px;
                        margin-right: 0;

                        &:hover {
                            i {
                                color: var(--global--color-white);
                            }
                        }

                        i {
                            transition: 0.3s ease-in-out;
                            color     : var(--global--color-heading);
                        }
                    }
                }
            }
        }
    }

    &.page-title-5 {
        .page-title-wrap {
            background-position-y: bottom;

            .title {
                .title-action {
                    .btn {
                        &:first-child {
                            width: 170px;
                        }

                        &:last-child {
                            width  : 178px;
                            padding: 0 27px;

                            @media #{$noteBook} {
                                padding: 0 25px;
                            }
                        }
                    }
                }
            }
        }
    }

    &.page-title-6 {
        .page-title-wrap {
            .title {
                .title-action {
                    .btn {
                        width: 170px;
                    }
                }
            }
        }
    }

    &.page-title-7 {
        .page-title-wrap {
            .title {
                .title-action {
                    .btn {
                        padding: 0 27px;
                        width  : 170px;

                        @media #{$noteBook} {
                            padding: 0 25px;
                        }
                    }
                }
            }
        }
    }

    &.page-title-8 {
        .page-title-wrap {
            .title {
                .title-action {
                    .btn {
                        padding: 0 27px;
                        width  : 170px;

                        @media #{$noteBook} {
                            padding: 0 25px;
                        }
                    }
                }
            }
        }
    }

    &.page-title-9 {
        .page-title-wrap {
            height: 350px;

            @media #{$minLarge} {
                background-position-y: 70%;
            }

            .title {
                .title-heading {
                    margin-bottom: 0;
                }
            }
        }

        .breadcrumb-wrap {
            .breadcrumb {
                @media #{$minLarge} {
                    justify-content: center;
                }
            }
        }
    }

    &.page-title-10 {
        position: relative;

        .page-title-wrap {
            height     : 675px;
            align-items: flex-end;

            .title {
                margin-bottom: 110px;

                .title-action {
                    .btn {
                        &:first-child {
                            width: 170px;
                        }

                        &:last-child {
                            width  : 178px;
                            padding: 0 27px;

                            @media #{$noteBook} {
                                padding: 0 25px;
                            }
                        }
                    }
                }
            }

            .breadcrumb-wrap {
                height         : auto;
                border-bottom  : 0;
                justify-content: center;
                margin-bottom  : 28px;
            }
        }
    }

    &.page-title-11 {
        position: relative;

        .page-title-wrap {
            height     : 675px;
            align-items: flex-end;

            .title {
                margin-bottom: 110px;

                .title-action {
                    .btn {
                        &:first-child {
                            width: 170px;
                        }

                        &:last-child {
                            width  : 178px;
                            padding: 0 27px;

                            @media #{$noteBook} {
                                padding: 0 25px;
                            }
                        }
                    }
                }
            }

            .breadcrumb-wrap {
                height         : auto;
                border-bottom  : 0;
                justify-content: center;
                margin-bottom  : 28px;
            }
        }
    }

    &.page-title-12 {
        .page-title-wrap {
            height               : 470px;
            background-position-y: top;

            .title {
                .title-heading {
                    margin-bottom: 23px;
                }
            }
        }

        .breadcrumb-wrap {
            .breadcrumb {
                @media #{$minLarge} {
                    justify-content: center;
                }
            }
        }
    }

    &.page-title-13 {
        .page-title-wrap {
            height               : 395px;
            background-position-y: bottom;

            @media #{$minLarge} {
                background-position-y: 75%;
            }

            @media #{$maxSmall} {
                height: 230px;
            }

            .title {
                .title-heading {
                    margin-bottom: 20px;
                }
            }
        }
    }

    &.page-title-14 {
        .page-title-wrap {
            height               : 350px;
            background-position-y: bottom;

            @media #{$minLarge} {
                background-position-y: 75%;
            }

            @media #{$maxSmall} {
                height: 230px;
            }
        }
    }
}