/* =========================
           PAGE BANNER
        ========================== */

        .page-banner {
            width: 100%;
            min-height: 360px;

            position: relative;

            display: flex;
            align-items: center;

            overflow: hidden;

            background:
                linear-gradient(
                    90deg,
                    rgba(17, 41, 29, 0.96),
                    rgba(17, 41, 29, 0.80)
                ),
                url("images/about/about-banner.jpg") center center / cover no-repeat;
        }

        .page-banner-container {
            width: 100%;
            max-width: 1200px;

            margin: 0 auto;
            padding: 60px 20px;

            position: relative;
            z-index: 2;
        }

        .page-banner-content {
            max-width: 700px;
        }

        .page-banner-subtitle {
            display: inline-block;

            margin-bottom: 15px;

            color: #7bc043;

            font-size: 13px;
            font-weight: 700;

            letter-spacing: 3px;
        }

        .page-banner h1 {
            margin: 0 0 18px;

            color: #ffffff;

            font-size: 58px;
            line-height: 1.1;

            font-weight: 700;
        }

        .page-banner h1 span {
            color: #7bc043;
        }

        .page-banner p {
            max-width: 580px;

            margin: 0;

            color: rgba(255, 255, 255, 0.82);

            font-size: 16px;
            line-height: 1.7;
        }


        /* Breadcrumb */

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;

            margin-top: 28px;

            font-size: 13px;
        }

        .breadcrumb a {
            color: #ffffff;

            text-decoration: none;

            transition: 0.3s ease;
        }

        .breadcrumb a:hover {
            color: #7bc043;
        }

        .breadcrumb span {
            color: rgba(255, 255, 255, 0.45);
        }

        .breadcrumb strong {
            color: #7bc043;

            font-weight: 600;
        }
        
        /* =========================
           TABLET
        ========================== */

        @media (max-width: 900px) {

            


            /* Banner */

            .page-banner {
                min-height: 320px;
            }

            .page-banner h1 {
                font-size: 48px;
            }
        }
        
        /* =========================
           MOBILE
        ========================== */

        @media (max-width: 700px) {

            /* Banner */

            .page-banner {
                min-height: 300px;
            }

            .page-banner-container {
                padding: 55px 20px;
            }

            .page-banner h1 {
                font-size: 40px;
            }

            .page-banner-subtitle {
                font-size: 11px;

                letter-spacing: 2px;
            }

            .page-banner p {
                font-size: 15px;
            }
        }