.elementor-973 .elementor-element.elementor-element-0c79bda{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-973 .elementor-element.elementor-element-3c4f11a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-973 .elementor-element.elementor-element-2f9a9fd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-973 .elementor-element.elementor-element-ef6dff1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-973 .elementor-element.elementor-element-4126d01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-973 .elementor-element.elementor-element-4126d01.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-973 .elementor-element.elementor-element-0c79bda{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-973 .elementor-element.elementor-element-3c4f11a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-973 .elementor-element.elementor-element-4126d01{--width:330.8px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-3c4f11a */<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Geely EX2 | Premium Experience</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        /* FONT CONTHRAX UNTUK HEADLINE & TITLE */
        @font-face {
            font-family: 'Conthrax';
            src: url('https://geelysmcibubur.com/wp-content/uploads/2025/08/conthrax-sb.ttf') format('truetype');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        /* RESET TOTAL & PENCEGAHAN OVERFLOW */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --primary: #111111;
            --secondary: #555555;
            --bg-color: #FFFFFF;
            --bronze-dark: #8C5A17;
            --bronze-soft: #F9F3EA;
            --border-color: #E5E5E5;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--primary);
            overflow-x: hidden;
            width: 100%;
        }

        /* CONTAINER UTAMA - FULLWIDTH */
        .g-wrapper {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 5%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* HEADER SECTION */
        .g-header {
            text-align: center;
            max-width: 700px;
            width: 100%;
        }

        .g-eyebrow {
            display: block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--bronze-dark);
            margin-bottom: 12px;
        }

        .g-heading {
            font-family: 'Conthrax', sans-serif;
            font-size: clamp(32px, 6vw, 64px);
            color: var(--primary);
            line-height: 1.1;
            margin-bottom: 16px;
            text-transform: uppercase;
        }

        .g-subtitle {
            font-size: 15px;
            line-height: 1.6;
            color: var(--secondary);
        }

        /* HERO IMAGE */
        .g-hero {
            width: 100%;
            max-width: 1000px;
            margin: 20px 0 30px 0;
            display: flex;
            justify-content: center;
        }

        .g-hero img {
            width: 100%;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.06));
        }

        /* PRICING SECTION - GRID */
        .g-pricing {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .g-card {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            background: #fff;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
        }

        .g-badge {
            align-self: flex-start;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--bronze-dark);
            background-color: var(--bronze-soft);
            padding: 6px 12px;
            border-radius: 100px;
            margin-bottom: 16px;
        }

        .g-card-title {
            font-family: 'Conthrax', sans-serif;
            font-size: 20px;
            color: var(--primary);
            margin-bottom: 16px;
        }

        .g-price-old {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
            margin-bottom: 2px;
        }

        .g-price-new {
            font-size: clamp(26px, 5.5vw, 42px);
            font-weight: 700;
            color: var(--primary);
            line-height: 1;
            letter-spacing: -0.03em;
        }

        .g-save {
            font-size: 13px;
            font-weight: 600;
            color: var(--bronze-dark);
            margin-top: 8px;
        }

        /* BENEFITS SECTION */
        .g-benefits {
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 32px;
            background: #FAFAFA;
            border-top: 4px solid var(--bronze-dark);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
        }

        .g-ben-text {
            flex: 1;
        }

        .g-ben-title {
            font-family: 'Conthrax', sans-serif;
            font-size: clamp(20px, 3vw, 28px);
            margin-bottom: 12px;
            color: var(--primary);
        }

        .g-ben-desc {
            font-size: 14px;
            color: var(--secondary);
            line-height: 1.6;
        }

        .g-ben-list {
            flex: 1.2;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .g-ben-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary);
        }

        .g-check {
            color: var(--bronze-dark);
            background: var(--bronze-soft);
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 12px;
            flex-shrink: 0;
        }

        /* ==========================================================================
           RESPONSIVE KHUSUS MOBILE (HP) - DIREVISI
           ========================================================================== */
        @media (max-width: 900px) {
            .g-benefits {
                flex-direction: column;
                align-items: flex-start;
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .g-wrapper {
                padding: 30px 20px;
            }
            
            /* 1. Teks dikurangi ukurannya agar tidak memanjang ke bawah */
            .g-eyebrow {
                font-size: 10px;
                margin-bottom: 8px;
            }
            .g-heading {
                font-size: 28px;
                margin-bottom: 10px;
            }
            .g-subtitle {
                font-size: 12.5px; /* Mengecilkan teks jauh lebih padat */
                line-height: 1.5; /* Merapatkan jarak antar baris teks */
                padding: 0 10px;
            }

            /* 2. Mobil dibesarkan agar penuh & merapatkan ruang kosong */
            .g-hero {
                margin: 5px 0 15px 0; /* Ruang kosong atas-bawah dibuang */
            }
            .g-hero img {
                transform: scale(1.2); /* Membesarkan visual mobil 20% khusus di HP */
            }

            /* Grid Pricing & Benefit (Tidak diubah, sudah aman) */
            .g-pricing {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .g-card {
                padding: 20px;
            }
            .g-price-new {
                font-size: 32px; /* Ukuran statis aman untuk HP */
            }
            .g-ben-list {
                grid-template-columns: 1fr;
                width: 100%;
            }
            .g-benefits {
                padding: 24px;
            }
        }

        @media (max-width: 360px) {
            .g-price-new {
                font-size: 26px;
            }
            .g-card-title {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>

    <div class="g-wrapper">
        
        <!-- TEXT HEADER -->
        <header class="g-header">
            <span class="g-eyebrow">Introducing The All New</span>
            <h1 class="g-heading">Geely EX2</h1>
            <p class="g-subtitle">Experience the perfect synthesis of aerodynamic elegance and forward-thinking engineering. Designed to elevate your everyday journey with uncompromising refinement.</p>
        </header>

        <!-- HERO CAR IMAGE -->
        <div class="g-hero">
            <img src="https://geelysmcibubur.com/wp-content/uploads/2025/12/EX2.23-scaled.webp" alt="Geely EX2">
        </div>

        <!-- PRICING CARDS -->
        <div class="g-pricing">
            
            <div class="g-card">
                <span class="g-badge">Special Introductory Price</span>
                <h3 class="g-card-title">GEELY EX2 PRO</h3>
                <div class="g-price-old">Rp259.900.000</div>
                <div class="g-price-new">Rp239.900.000</div>
                <div class="g-save">Save Rp20.000.000</div>
            </div>

            <div class="g-card">
                <span class="g-badge">Most Popular</span>
                <h3 class="g-card-title">GEELY EX2 MAX</h3>
                <div class="g-price-old">Rp289.900.000</div>
                <div class="g-price-new">Rp269.900.000</div>
                <div class="g-save">Save Rp20.000.000</div>
            </div>

        </div>

        <!-- BENEFITS -->
        <div class="g-benefits">
            
            <div class="g-ben-text">
                <span class="g-eyebrow">Exclusive Dealer Benefit</span>
                <h2 class="g-ben-title">There May Be More Than What You See</h2>
                <p class="g-ben-desc">Additional purchase incentives and exclusive ownership benefits may be available exclusively through Geely SM Group.</p>
            </div>

            <div class="g-ben-list">
                <div class="g-ben-item"><div class="g-check">✓</div> Exclusive Purchase Incentive</div>
                <div class="g-ben-item"><div class="g-check">✓</div> Additional Ownership Benefit</div>
                <div class="g-ben-item"><div class="g-check">✓</div> Priority Vehicle Allocation</div>
                <div class="g-ben-item"><div class="g-check">✓</div> Limited Time Program</div>
            </div>

        </div>

    </div>

</body>
</html>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c9033ae */.hero{
    font-family: "Poppins", sans-serif;
    font-size: clamp(64px, 6vw, 92px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -3px;
    color: #111827;
    margin: 20px 0 28px;
    text-transform: uppercase;
    max-width: 700px;
}

.hero span{
    color:#2563EB;
}/* End custom CSS */
/* Start custom CSS */#chaty-widget-0 {
  display: none !important;
}/* End custom CSS */