/*
        |--------------------------------------------------------------------------
        | ROOT COLORS
        |--------------------------------------------------------------------------
        */

        :root {

            --primary: #0d4f4a;
            --primary-dark: #07332f;
            --secondary: #177d70;

            --accent: #d8a640;

            --background: #f4f7f6;
            --white: #ffffff;

            --text: #1d2928;
            --text-light: #65706f;

            --border: #d9e1df;

            --shadow:
                0 10px 30px rgba(0,0,0,.08);

            --radius: 14px;

        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            color: var(--text);

            background:
                var(--background);

            line-height: 1.65;

        }

        a {
            text-decoration: none;
        }

        /*
        |--------------------------------------------------------------------------
        | HEADER
        |--------------------------------------------------------------------------
        */

        header {

            background:
                var(--primary-dark);

            color:
                var(--white);

            position:
                sticky;

            top: 0;

            z-index: 999;

        }

        .nav-container {

            max-width: 1200px;

            margin: auto;

            padding:
                0 25px;

            height:
                76px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

        }

        .logo {

            color:
                var(--white);

            font-size:
                22px;

            font-weight:
                700;

            letter-spacing:
                .5px;

        }

        .logo span {

            color:
                var(--accent);

        }

        nav ul {

            display:
                flex;

            list-style:
                none;

            gap:
                28px;

        }

        nav a {

            color:
                rgba(255,255,255,.85);

            font-size:
                14px;

            transition:
                .2s;

        }

        nav a:hover {

            color:
                var(--white);

        }

        /*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */

        .hero {

            min-height:
                680px;

            display:
                flex;

            align-items:
                center;

            position:
                relative;

            background-image:
                linear-gradient(
                    90deg,
                    rgba(5,38,35,.94),
                    rgba(5,38,35,.60),
                    rgba(5,38,35,.25)
                ),
                url('qtcs_head.jpg');

            background-size:
                cover;

            background-position:
                center;

            color:
                var(--white);

        }

        .hero-container {

            width:
                100%;

            max-width:
                1200px;

            margin:
                auto;

            padding:
                70px 25px;

        }

        .hero-content {

            max-width:
                760px;

        }

        .standard-badge {

            display:
                inline-block;

            padding:
                8px 16px;

            border:
                1px solid rgba(255,255,255,.35);

            border-radius:
                30px;

            font-size:
                13px;

            letter-spacing:
                1px;

            margin-bottom:
                25px;

        }

        .hero h1 {

            font-size:
                clamp(42px, 7vw, 78px);

            line-height:
                1.05;

            margin-bottom:
                24px;

        }

        .hero h1 span {

            color:
                var(--accent);

        }

        .hero p {

            font-size:
                20px;

            max-width:
                650px;

            color:
                rgba(255,255,255,.88);

            margin-bottom:
                35px;

        }

        .hero-buttons {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                15px;

        }

        /*
        |--------------------------------------------------------------------------
        | BUTTONS
        |--------------------------------------------------------------------------
        */

        .btn {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                10px;

            padding:
                15px 24px;

            border-radius:
                8px;

            font-weight:
                700;

            transition:
                .25s;

            cursor:
                pointer;

            border:
                none;

        }

        .btn-primary {

            background:
                var(--accent);

            color:
                #1e1b13;

        }

        .btn-primary:hover {

            transform:
                translateY(-2px);

            filter:
                brightness(1.05);

        }

        .btn-outline {

            border:
                1px solid rgba(255,255,255,.6);

            color:
                var(--white);

        }

        .btn-outline:hover {

            background:
                var(--white);

            color:
                var(--primary-dark);

        }

        /*
        |--------------------------------------------------------------------------
        | GENERAL SECTIONS
        |--------------------------------------------------------------------------
        */

        section {

            padding:
                100px 25px;

        }

        .container {

            max-width:
                1200px;

            margin:
                auto;

        }

        .section-tag {

            color:
                var(--secondary);

            font-weight:
                700;

            text-transform:
                uppercase;

            letter-spacing:
                1.5px;

            font-size:
                13px;

            margin-bottom:
                14px;

        }

        h2 {

            font-size:
                clamp(32px, 4vw, 50px);

            line-height:
                1.15;

            margin-bottom:
                25px;

        }

        .lead {

            font-size:
                19px;

            color:
                var(--text-light);

            max-width:
                850px;

        }

        /*
        |--------------------------------------------------------------------------
        | CARDS
        |--------------------------------------------------------------------------
        */

        .card-grid {

            display:
                grid;

            grid-template-columns:
                repeat(auto-fit, minmax(250px, 1fr));

            gap:
                25px;

            margin-top:
                55px;

        }

        .card {

            background:
                var(--white);

            padding:
                35px;

            border-radius:
                var(--radius);

            box-shadow:
                var(--shadow);

        }

        .card i {

            font-size:
                34px;

            color:
                var(--secondary);

            margin-bottom:
                20px;

        }

        .card h3 {

            margin-bottom:
                14px;

            font-size:
                21px;

        }

        .card p {

            color:
                var(--text-light);

        }

        /*
        |--------------------------------------------------------------------------
        | TECHNOLOGY CHANGE
        |--------------------------------------------------------------------------
        */

        .split {

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                80px;

            align-items:
                center;

        }

        .check-list {

            list-style:
                none;

            margin-top:
                30px;

        }

        .check-list li {

            margin-bottom:
                15px;

            padding-left:
                32px;

            position:
                relative;

        }

        .check-list li:before {

            content:
                "\f00c";

            font-family:
                "Font Awesome 6 Free";

            font-weight:
                900;

            position:
                absolute;

            left:
                0;

            color:
                var(--secondary);

        }

        /*
        |--------------------------------------------------------------------------
        | PROCESS
        |--------------------------------------------------------------------------
        */

        .process {

            background:
                var(--primary-dark);

            color:
                var(--white);

        }

        .process .section-tag {

            color:
                var(--accent);

        }

        .process .lead {

            color:
                rgba(255,255,255,.75);

        }

        .process-grid {

            margin-top:
                60px;

            display:
                grid;

            grid-template-columns:
                repeat(auto-fit, minmax(180px, 1fr));

            gap:
                25px;

        }

        .process-item {

            text-align:
                center;

            padding:
                25px;

        }

        .process-number {

            width:
                58px;

            height:
                58px;

            margin:
                0 auto 20px;

            border-radius:
                50%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                var(--accent);

            color:
                #222;

            font-weight:
                800;

            font-size:
                22px;

        }

        .process-item p {

            color:
                rgba(255,255,255,.75);

            font-size:
                15px;

        }

        /*
        |--------------------------------------------------------------------------
        | QTCC
        |--------------------------------------------------------------------------
        */

        .qtcc-box {

            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
                );

            color:
                var(--white);

            border-radius:
                var(--radius);

            padding:
                60px;

            margin-top:
                50px;

        }

        .qtcc-box h2 {

            margin-bottom:
                20px;

        }

        .qtcc-box p {

            max-width:
                850px;

            color:
                rgba(255,255,255,.85);

            font-size:
                18px;

        }

        /*
        |--------------------------------------------------------------------------
        | DOCUMENT ACCESS
        |--------------------------------------------------------------------------
        */

        .access-section {

            background:
                #edf3f1;

        }

        .access-box {

            margin-top:
                50px;

            background:
                var(--white);

            padding:
                50px;

            border-radius:
                var(--radius);

            box-shadow:
                var(--shadow);

            border-left:
                5px solid var(--accent);

        }

        .access-box ul {

            margin:
                25px 0 35px 20px;

        }

        .access-box li {

            margin-bottom:
                10px;

        }

        /*
        |--------------------------------------------------------------------------
        | FORMS
        |--------------------------------------------------------------------------
        */

        .forms-section {

            background:
                var(--primary-dark);

            color:
                var(--white);

        }

        .forms-grid {

            display:
                grid;

            grid-template-columns:
                repeat(auto-fit, minmax(320px, 1fr));

            gap:
                35px;

            margin-top:
                60px;

        }

        .form-box {

            background:
                var(--white);

            color:
                var(--text);

            padding:
                40px;

            border-radius:
                var(--radius);

        }

        .form-box h3 {

            font-size:
                27px;

            margin-bottom:
                12px;

        }

        .form-box > p {

            color:
                var(--text-light);

            margin-bottom:
                30px;

        }

        .form-group {

            margin-bottom:
                18px;

        }

        label {

            display:
                block;

            margin-bottom:
                7px;

            font-size:
                14px;

            font-weight:
                700;

        }

        input,
        textarea,
        select {

            width:
                100%;

            padding:
                13px 14px;

            border:
                1px solid var(--border);

            border-radius:
                7px;

            font-size:
                15px;

            font-family:
                inherit;

        }

        textarea {

            min-height:
                120px;

            resize:
                vertical;

        }

        input:focus,
        textarea:focus,
        select:focus {

            outline:
                none;

            border-color:
                var(--secondary);

        }

        .form-box .btn {

            width:
                100%;

            margin-top:
                5px;

        }

        .honeypot {

            display:
                none;

        }

        /*
        |--------------------------------------------------------------------------
        | ALERT
        |--------------------------------------------------------------------------
        */

        .alert {

            max-width:
                1200px;

            margin:
                30px auto 0;

            padding:
                18px 25px;

            border-radius:
                8px;

        }

        .alert-success {

            background:
                #d9f2e8;

            color:
                #165b42;

        }

        .alert-error {

            background:
                #f8dddd;

            color:
                #7b2020;

        }

        /*
        |--------------------------------------------------------------------------
        | FOOTER
        |--------------------------------------------------------------------------
        */

        footer {

            background:
                #051f1d;

            color:
                rgba(255,255,255,.75);

            padding:
                70px 25px 25px;

        }

        .footer-grid {

            max-width:
                1200px;

            margin:
                auto;

            display:
                grid;

            grid-template-columns:
                2fr 1fr 1fr;

            gap:
                50px;

        }

        .footer-title {

            color:
                var(--white);

            font-size:
                21px;

            font-weight:
                700;

            margin-bottom:
                18px;

        }

        .footer-links {

            list-style:
                none;

        }

        .footer-links li {

            margin-bottom:
                10px;

        }

        .footer-links a {

            color:
                rgba(255,255,255,.65);

        }

        .footer-links a:hover {

            color:
                var(--white);

        }

        .footer-bottom {

            max-width:
                1200px;

            margin:
                55px auto 0;

            padding-top:
                25px;

            border-top:
                1px solid rgba(255,255,255,.1);

            font-size:
                13px;

            display:
                flex;

            justify-content:
                space-between;

            gap:
                20px;

            flex-wrap:
                wrap;

        }

        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

        @media (max-width: 850px) {

            nav {
                display: none;
            }

            .split {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .hero {
                min-height: 600px;
            }

        }

        @media (max-width: 600px) {

            section {
                padding: 70px 20px;
            }

            .hero-container {
                padding: 60px 20px;
            }

            .qtcc-box,
            .access-box,
            .form-box {
                padding: 30px 22px;
            }

            .nav-container {
                padding: 0 20px;
            }

        }