@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap");

        :root {
            --project-blue: #0d6efd;
            --project-yellow: #ffc107;
            --project-text: #263548;
            --project-muted: #667487;
            --project-border: #e6ebf2;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: "Prompt", sans-serif;
            color: var(--project-text);
            min-height: 100vh;
            background:
                radial-gradient(circle at 0% 12%, rgba(13, 110, 253, 0.09) 0 135px, transparent 136px),
                radial-gradient(circle at 100% 88%, rgba(255, 193, 7, 0.10) 0 150px, transparent 151px),
                linear-gradient(135deg, #f8fafc 0%, #f1f5fa 100%);
        }

        section.py-5 {
            position: relative;
            padding-top: 42px !important;
            padding-bottom: 58px !important;
            overflow: hidden;
        }

        section.py-5::before {
            content: "";
            position: absolute;
            top: 105px;
            left: 3%;
            width: 74px;
            height: 7px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--project-blue), var(--project-yellow));
            opacity: 0.85;
        }

        section.py-5::after {
            content: "";
            position: absolute;
            right: 3.5%;
            bottom: 40px;
            width: 88px;
            height: 88px;
            border: 16px solid rgba(13, 110, 253, 0.07);
            border-radius: 50%;
        }

        section.py-5 > .container {
            position: relative;
            z-index: 1;
            max-width: 1260px;
        }

        .btn-outline-primary {
            position: relative;
            z-index: 2;
            padding: 9px 18px;
            margin-bottom: 26px !important;
            background: rgba(255, 255, 255, 0.96);
            border-width: 1.5px;
            box-shadow: 0 7px 18px rgba(13, 110, 253, 0.09);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .btn-outline-primary:hover {
            transform: translateX(-3px);
            box-shadow: 0 10px 22px rgba(13, 110, 253, 0.16);
        }

        .row.g-5 {
            --bs-gutter-x: 2rem;
            --bs-gutter-y: 2rem;
            align-items: stretch;
            padding: 20px;
            margin-top: 0;
            background: rgba(255, 255, 255, 0.56);
            border: 1px solid rgba(255, 255, 255, 0.92);
            border-radius: 24px;
            box-shadow: 0 18px 46px rgba(29, 47, 73, 0.09);
            backdrop-filter: blur(5px);
        }

        .row.g-5 > .col-lg-8,
        .row.g-5 > .col-lg-4 {
            display: flex;
        }

        .row.g-5 > .col-lg-8 {
            position: relative;
        }

        .row.g-5 > .col-lg-8::before {
            content: "";
            position: absolute;
            top: -1px;
            left: 36px;
            z-index: 3;
            width: 92px;
            height: 7px;
            border-radius: 0 0 8px 8px;
            background: var(--project-yellow);
        }

        .project-hero-img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 545px;
            object-fit: cover;
            object-position: center;
            border: 7px solid #fff;
            border-radius: 18px;
            box-shadow: 0 15px 32px rgba(31, 45, 61, 0.16) !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .project-hero-img:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(31, 45, 61, 0.20) !important;
        }

        .info-card {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            min-height: 545px;
            padding: 1.8rem;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--project-border);
            border-radius: 18px;
            box-shadow: 0 15px 32px rgba(31, 45, 61, 0.12);
        }

        .info-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--project-blue) 0%, #5c9cff 74%, var(--project-yellow) 100%);
        }

        #detail-title {
            margin-top: 3px;
            margin-bottom: 1.25rem !important;
            font-size: clamp(1.55rem, 2.2vw, 2rem);
            line-height: 1.35;
        }

        .info-card ul {
            margin-bottom: 0;
        }

        .info-card ul li {
            margin-bottom: 10px !important;
            padding: 11px 12px;
            line-height: 1.6;
            background: #f7f9fc;
            border: 1px solid #e9eef4;
            border-radius: 11px;
        }

        .info-card ul li i {
            display: inline-block;
            width: 20px;
            text-align: center;
        }

        .info-card hr {
            margin: 18px 0;
            opacity: 0.13;
        }

        #detail-desc {
            margin-bottom: 0;
            padding: 13px 14px;
            color: var(--project-muted) !important;
            line-height: 1.82;
            background: #f8fafc;
            border-left: 4px solid var(--project-blue);
            border-radius: 0 10px 10px 0;
        }

        .info-card .btn-warning {
            margin-top: auto !important;
            padding: 11px 16px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 8px 18px rgba(255, 193, 7, 0.23);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .info-card .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(255, 193, 7, 0.31);
        }

        @media (max-width: 991.98px) {
            section.py-5 {
                padding-top: 32px !important;
            }

            .row.g-5 {
                padding: 16px;
            }

            .row.g-5 > .col-lg-8,
            .row.g-5 > .col-lg-4 {
                display: block;
            }

            .project-hero-img {
                height: 430px;
                min-height: 0;
            }

            .info-card {
                min-height: 0;
            }

            .info-card .btn-warning {
                margin-top: 1rem !important;
            }
        }

        @media (max-width: 575.98px) {
            section.py-5 {
                padding-top: 24px !important;
                padding-bottom: 38px !important;
            }

            section.py-5::before,
            section.py-5::after {
                display: none;
            }

            .btn-outline-primary {
                margin-bottom: 20px !important;
            }

            .row.g-5 {
                --bs-gutter-x: 1rem;
                --bs-gutter-y: 1rem;
                padding: 10px;
                border-radius: 18px;
            }

            .row.g-5 > .col-lg-8::before {
                left: 28px;
                width: 72px;
                height: 6px;
            }

            .project-hero-img {
                height: 285px;
                border-width: 5px;
                border-radius: 14px;
            }

            .info-card {
                padding: 1.35rem;
                border-radius: 14px;
            }

            #detail-title {
                font-size: 1.45rem;
            }

            .info-card ul li {
                padding: 10px 11px;
            }
        }