bt-trader/app/Views/front/welcome/whatwedo.php

<style>
    /* ===== WHAT WE DO (BT-Trader look) ===== */
    .bt-what {
        background: #fff;
        padding: 90px 0;
    }

    .bt-what .bt-container {
        max-width: 1320px;
        /* 화면 여백 넓게 */
    }

    /* 2x2 grid with cross lines */
    .bt-what-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: relative;
    }

    .bt-what-grid::before {
        /* vertical line */
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e9e9e9;
        transform: translateX(-0.5px);
        pointer-events: none;
    }

    .bt-what-grid::after {
        /* horizontal line */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: #e9e9e9;
        transform: translateY(-0.5px);
        pointer-events: none;
    }

    .bt-cell {
        min-height: 380px;
        /* 캡처처럼 칸이 큼 */
        padding: 70px 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Top-left title block */
    .bt-what-title {
        font-size: 56px;
        font-weight: 500;
        letter-spacing: -0.02em;
        margin-bottom: 22px;
    }

    .bt-what-intro {
        max-width: 420px;
        font-size: 14px;
        line-height: 1.8;
        color: #333;
    }

    /* Service blocks */
    .bt-service {
        max-width: 520px;
    }

    .bt-service h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.25;
        margin: 18px 0 18px;
        letter-spacing: -0.01em;
    }

    .bt-service p {
        font-size: 14px;
        line-height: 2.0;
        color: #333;
        margin: 0;
        max-width: 430px;
    }

    /* Icon: overlapped squares */
    .bt-icon {
        width: 58px;
        height: 58px;
        position: relative;
        margin-bottom: 18px;
    }

    .bt-icon::before {
        content: "";
        position: absolute;
        width: 52px;
        height: 52px;
        border: 1px solid #111;
        background: transparent;
        top: 0;
        left: 0;
    }

    .bt-icon::after {
        content: "";
        position: absolute;
        width: 28px;
        height: 28px;
        background: #6D4CFF;
        border: 1px solid #111;
        right: 6px;
        bottom: 6px;
    }

    /* Slight variations like screenshot */
    .bt-icon.v2::after {
        right: 10px;
        bottom: 10px;
    }

    .bt-icon.v3::before {
        left: 8px;
        top: 2px;
    }

    .bt-icon.v3::after {
        left: 0px;
        bottom: 0px;
        right: auto;
    }

    /* responsive */
    @media (max-width: 991.98px) {
        .bt-what {
            padding: 50px 0;
        }

        .bt-what-grid {
            grid-template-columns: 1fr;
        }

        .bt-what-grid::before,
        .bt-what-grid::after {
            display: none;
            /* 모바일은 라인 제거(원본도 보통 다름) */
        }

        .bt-cell {
            padding: 40px 22px;
            min-height: auto;
            border-top: 1px solid #e9e9e9;
        }

        .bt-cell:first-child {
            border-top: 0;
        }

        .bt-what-title {
            font-size: 44px;
        }
    }
</style>

<section class="bt-what" id="what-we-do">
    <div class="container bt-container">
        <div class="bt-what-grid">

            <!-- Top Left -->
            <div class="bt-cell">
                <div>
                    <div class="bt-what-title">What We Do</div>
                    <div class="bt-what-intro">
                        At BT-Trader, we specialize in titanium and high-value metal trading across the U.S., Korea, and
                        Southeast Asia,
                        supplying premium titanium ingots, solids, scrap, and specialty nickel alloys through a trusted
                        global network.
                    </div>
                </div>
            </div>

            <!-- Top Right -->
            <div class="bt-cell">
                <div class="bt-service">
                    <div class="bt-icon v2"></div>
                    <h3>
                        Titanium &amp; Specialty Metals<br>
                        Trading Experts
                    </h3>
                    <p>
                        We supply high-grade titanium ingots, solids, scrap, and specialty alloys through a trusted
                        global network.
                        Our team ensures precise sourcing, consistent quality, and reliable delivery for manufacturers
                        and industrial partners.
                    </p>
                </div>
            </div>

            <!-- Bottom Left -->
            <div class="bt-cell">
                <div class="bt-service">
                    <div class="bt-icon"></div>
                    <h3>
                        Global Procurement and Export of<br>
                        Non-Ferrous Metal Scrap
                    </h3>
                    <p>
                        We purchase and export non-ferrous metal scrap—including titanium, nickel alloys, and high-value
                        industrial metals—to international markets.
                        Every shipment is inspected, graded, and prepared to meet global standards.
                    </p>
                </div>
            </div>

            <!-- Bottom Right -->
            <div class="bt-cell">
                <div class="bt-service">
                    <div class="bt-icon v3"></div>
                    <h3>
                        Operating Global Metal<br>
                        Supply Network
                    </h3>
                    <p>
                        Our multi-region supply chain enables stable sourcing and fast logistics across the U.S., Korea,
                        and Southeast Asia.
                        We coordinate shipping, warehousing, and export documentation to ensure efficient and dependable
                        global distribution.
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>