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

        .developer-page {
            background: #f4f9fd;
            min-height: 100vh;
            padding: 35px 0 55px;
        }


        /* =========================================================
           SECTION HEADER
        ========================================================= */

        .developer-heading {
            text-align: center;
            margin-bottom: 28px;
        }

        .developer-heading-top {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;

            color: #183f70;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;

            margin-bottom: 5px;
        }

        .developer-heading-top::before,
        .developer-heading-top::after {
            content: "";
            width: 42px;
            height: 2px;
            background: #2699ff;
        }

        .developer-heading h1 {
            margin: 0;

            color: #0d376d;

            font-size: 38px;
            line-height: 1.15;
            font-weight: 800;
        }

        .developer-heading h1 span {
            color: #1877ed;
        }

        .developer-heading p {
            margin: 7px 0 0;

            color: #617895;

            font-size: 16px;
            font-weight: 400;
        }


        /* =========================================================
           DEVELOPER GRID
        ========================================================= */

        .developer-grid {
            width: 100%;
        }


        /* =========================================================
           CARD
        ========================================================= */

        .developer-card {
            width: 100%;
            height: 112px;

            background: rgba(255, 255, 255, 0.94);

            border: 1px solid #e3edf6;

            border-radius: 14px;

            box-shadow:
                0 5px 18px rgba(24, 74, 120, 0.08);

            display: flex;
            align-items: center;

            padding: 12px;

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;

            overflow: hidden;
        }

        .developer-card:hover {
            transform: translateY(-3px);

            border-color: #b9ddff;

            box-shadow:
                0 10px 25px rgba(24, 74, 120, 0.13);
        }


        /* =========================================================
           LOGO AREA
        ========================================================= */

        .developer-logo-box {
            flex: 0 0 125px;

            width: 125px;
            height: 86px;

            background: linear-gradient(
                145deg,
                #f9fcff,
                #f0f6fb
            );

            border: 1px solid #edf3f8;

            border-radius: 13px;

            display: flex;

            align-items: center;
            justify-content: center;

            overflow: hidden;

            padding: 8px;
        }

        .developer-logo {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: contain;

            object-position: center;
        }


        /* =========================================================
           CONTENT
        ========================================================= */

        .developer-info {
            min-width: 0;

            flex: 1;

            padding-left: 18px;
        }

        .developer-name {
            color: #0c376e;

            font-size: 17px;
            font-weight: 750;

            line-height: 1.2;

            margin: 0 0 5px;

            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            overflow: hidden;
        }

        .developer-type {
            color: #70839b;

            font-size: 12px;

            margin-bottom: 8px;
        }


        /* =========================================================
           PROFILE BUTTON
        ========================================================= */

        .developer-profile-btn {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            gap: 8px;

            min-width: 116px;

            padding: 7px 12px;

            border: 1.5px solid #58adff;

            border-radius: 6px;

            background: #fff;

            color: #0875ed;

            text-decoration: none;

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

            transition: all 0.2s ease;
        }

        .developer-profile-btn i {
            font-size: 13px;
            transition: transform 0.2s ease;
        }

        .developer-profile-btn:hover {
            background: #0875ed;

            color: #fff;

            border-color: #0875ed;
        }

        .developer-profile-btn:hover i {
            transform: translateX(3px);
        }


        /* =========================================================
           PAGINATION
        ========================================================= */

        .developer-pagination-wrapper {
            margin-top: 30px;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .developer-pagination {
            display: flex;

            align-items: center;

            gap: 7px;

            margin: 0;

            padding: 0;

            list-style: none;
        }

        .developer-pagination .page-item {
            margin: 0;
        }

        .developer-pagination .page-link {
            width: 38px;
            height: 38px;

            padding: 0;

            display: flex;

            align-items: center;
            justify-content: center;

            border: 1px solid #dce8f3;

            border-radius: 7px;

            background: #fff;

            color: #153e70;

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

            box-shadow: 0 2px 6px rgba(20, 70, 110, 0.05);

            text-decoration: none;

            transition: all 0.2s ease;
        }

        .developer-pagination .page-link:hover {
            color: #fff;

            background: #1877ed;

            border-color: #1877ed;
        }

        .developer-pagination .page-item.active .page-link {
            color: #fff;

            background: #1877ed;

            border-color: #1877ed;

            box-shadow: 0 4px 10px rgba(24, 119, 237, 0.25);
        }

        .developer-pagination .page-item.disabled .page-link {
            color: #a8b8c8;

            background: #f5f8fb;

            border-color: #e5edf4;

            cursor: not-allowed;
        }


        /* =========================================================
           RECORD INFORMATION
        ========================================================= */

        .developer-page-info {
            text-align: center;

            margin-top: 10px;

            color: #73869c;

            font-size: 12px;
        }


        /* =========================================================
           DESKTOP
           4 CARDS PER ROW
        ========================================================= */

        @media (min-width: 992px) {

            .developer-container {
                max-width: 1500px;
                padding-left: 25px;
                padding-right: 25px;
            }

            .developer-grid > .developer-col {
                flex: 0 0 25%;
                max-width: 25%;
            }

        }


        /* =========================================================
           TABLET
        ========================================================= */

        @media (min-width: 768px) and (max-width: 991.98px) {

            .developer-grid > .developer-col {
                flex: 0 0 50%;
                max-width: 50%;
            }

            .developer-card {
                height: 112px;
            }

        }


        /* =========================================================
           MOBILE
           2 CARDS PER ROW
        ========================================================= */

        @media (max-width: 767.98px) {

            .developer-page {
                padding-top: 25px;
                padding-bottom: 40px;
            }

            .developer-container {
                padding-left: 5px;
                padding-right: 5px;
            }

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

            .developer-heading-top {
                gap: 8px;

                font-size: 9px;
                letter-spacing: 2px;
            }

            .developer-heading-top::before,
            .developer-heading-top::after {
                width: 25px;
            }

            .developer-heading h1 {
                font-size: 25px;
            }

            .developer-heading p {
                font-size: 12px;

                padding: 0 12px;
            }

            /*
            ---------------------------------------------------------
            2 CARDS PER ROW
            ---------------------------------------------------------
            */

            .developer-grid {
                margin-left: -3px;
                margin-right: -3px;
            }

            .developer-grid > .developer-col {
                flex: 0 0 50%;
                max-width: 50%;

                padding-left: 3px;
                padding-right: 3px;

                margin-bottom: 8px;
            }

            /*
            ---------------------------------------------------------
            MOBILE CARD
            ---------------------------------------------------------
            */

            .developer-card {
                height: 118px;

                border-radius: 10px;

                padding: 7px;

                display: block;

                text-align: center;
            }

            /*
            ---------------------------------------------------------
            MOBILE LOGO
            ---------------------------------------------------------
            */

            .developer-logo-box {
                width: 100%;
                height: 52px;

                padding: 5px;

                border-radius: 8px;

                margin-bottom: 5px;
            }

            /*
            ---------------------------------------------------------
            MOBILE CONTENT
            ---------------------------------------------------------
            */

            .developer-info {
                padding-left: 0;
            }

            .developer-name {
                font-size: 11px;

                line-height: 1.15;

                min-height: 25px;

                margin-bottom: 2px;

                -webkit-line-clamp: 2;
            }

            .developer-type {
                font-size: 8px;

                line-height: 1;

                margin-bottom: 5px;
            }

            /*
            ---------------------------------------------------------
            MOBILE BUTTON
            ---------------------------------------------------------
            */

            .developer-profile-btn {
                min-width: 0;

                width: auto;

                padding: 4px 7px;

                border-radius: 5px;

                font-size: 8px;

                gap: 4px;
            }

            .developer-profile-btn i {
                font-size: 8px;
            }

            /*
            ---------------------------------------------------------
            PAGINATION MOBILE
            ---------------------------------------------------------
            */

            .developer-pagination-wrapper {
                margin-top: 18px;
            }

            .developer-pagination {
                gap: 4px;
            }

            .developer-pagination .page-link {
                width: 31px;
                height: 31px;

                border-radius: 5px;

                font-size: 11px;
            }

            .developer-page-info {
                font-size: 10px;
            }

        }


        /* =========================================================
           VERY SMALL MOBILE
        ========================================================= */

        @media (max-width: 380px) {

            .developer-card {
                height: 112px;
            }

            .developer-logo-box {
                height: 47px;
            }

            .developer-name {
                font-size: 10px;
            }

            .developer-type {
                font-size: 7px;
            }

            .developer-profile-btn {
                font-size: 7px;

                padding: 3px 6px;
            }

            .developer-pagination .page-link {
                width: 28px;
                height: 28px;

                font-size: 10px;
            }

        }