/* Start custom CSS for text-editor, class: .elementor-element-033cdc3 */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cps-red:       #CC2229;
      --cps-red-dark:  #8B1A1A;
      --cps-blue:      #1A3A8F;
      --cps-blue-link: #1A5FB4;
      --cps-cyan-soft: #4DD9FF;
      --cps-white:     #FFFFFF;
      --cps-offwhite:  #F4F7FC;
      --cps-border:    #DDE3EF;
      --cps-text:      #1C1C1C;
      --cps-muted:     #5A6478;
      --toeic-green:   #6ab04c;
      --toeic-green-dark: #4e8a35;
      --radius-md:     10px;
      --radius-lg:     14px;
      --font-body:     'DM Sans', 'Segoe UI', sans-serif;
      --font-display:  'Playfair Display', Georgia, serif;
    }

    body {
      font-family: var(--font-body);
      background: var(--cps-offwhite);
      color: var(--cps-text);
      font-size: 15px;
      line-height: 1.6;
    }

    a { text-decoration: none; transition: color 0.15s, opacity 0.15s; }
    svg { display: block; flex-shrink: 0; }

    /* ── HERO ── */
    #cps-hero {
      position: relative;
      background: linear-gradient(135deg, #0A1628 0%, #0D2855 30%, #0B3070 52%, #0F4A8A 72%, #1560A8 86%, #1D7CC4 100%);
      overflow: hidden;
      padding: 4rem 2rem 3.5rem;
      text-align: center;
    }
    #cps-hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none; z-index: 1;
    }
    .cps-orb { position: absolute; border-radius: 50%; pointer-events: none; }
    .orb-tl { width:380px;height:380px;top:-100px;left:-100px;background:radial-gradient(circle,rgba(0,120,255,0.22) 0%,transparent 65%); }
    .orb-br { width:300px;height:300px;bottom:-80px;right:-60px;background:radial-gradient(circle,rgba(0,191,255,0.18) 0%,transparent 65%); }
    .orb-tr { width:220px;height:220px;top:30px;right:28%;background:radial-gradient(circle,rgba(29,124,196,0.28) 0%,transparent 60%); }

    .hero-inner { position: relative; z-index: 2; }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .hero-icons {
      display: flex; justify-content: center; gap: 1.25rem;
      margin-bottom: 1.75rem; animation: fadeUp 0.6s ease both;
    }
    .hero-icon-box {
      width:58px;height:58px;border-radius:16px;
      background:rgba(255,255,255,0.07);
      border:1px solid rgba(0,191,255,0.30);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 0 24px rgba(0,191,255,0.20),inset 0 1px 0 rgba(255,255,255,0.08);
      transition:transform 0.2s;
    }
    .hero-icon-box:hover { transform:translateY(-4px); }
    .hero-icon-box svg { width:24px;height:24px;stroke:#4DD9FF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }

    .hero-badge {
      display:inline-block;
      background:rgba(0,191,255,0.12);border:1px solid rgba(0,191,255,0.28);
      color:var(--cps-cyan-soft);font-size:11px;letter-spacing:1.8px;
      text-transform:uppercase;padding:5px 16px;border-radius:40px;
      margin-bottom:0.9rem;animation:fadeUp 0.6s 0.1s ease both;
    }
    .hero-title {
      font-family:var(--font-display);color:#fff !important;
      font-size:42px;font-weight:600;letter-spacing:-0.5px;
      margin-bottom:0.5rem;
      text-shadow:0 2px 24px rgba(0,0,0,0.30);
      animation:fadeUp 0.6s 0.2s ease both;
    }
    .hero-sub {
      color:rgba(255,255,255,0.62);font-size:14.5px;
      margin-bottom:0;animation:fadeUp 0.6s 0.3s ease both;
    }

    /* ── RED STRIP ── */
    #cps-strip { height:4px;background:linear-gradient(90deg,var(--cps-red-dark) 0%,var(--cps-red) 50%,var(--cps-red-dark) 100%); }

    /* ── LAYOUT ── */
    .cps-section { max-width:1020px;margin:0 auto;padding:2.5rem 1.5rem; }
    .cps-section.no-top { padding-top:0; }

    /* ── CARD ── */
    .cps-card {
      background:var(--cps-white);border:1px solid var(--cps-border);
      border-radius:var(--radius-lg);padding:2rem 1.75rem;
      box-shadow:0 4px 20px rgba(26,58,143,0.07);
    }
    .card-title {
      font-size:18px;font-weight:600;color:var(--cps-blue);
      margin-bottom:1.5rem;display:flex;align-items:center;gap:10px;
    }
    .card-title::after {
      content:'';flex:1;height:2px;
      background:linear-gradient(90deg,var(--cps-red),transparent);border-radius:2px;
    }
    .card-title-dot { width:9px;height:9px;border-radius:50%;background:var(--cps-red);flex-shrink:0; }

    /* ── SECTION TITLE ── */
    .section-title {
      font-family:var(--font-display);font-size:22px;font-weight:600;
      color:var(--cps-blue);text-align:center;margin-bottom:1.5rem;position:relative;
    }
    .section-title span { background:var(--cps-offwhite);padding:0 14px;position:relative;z-index:1; }
    .section-title::before {
      content:'';position:absolute;top:52%;left:0;right:0;height:1px;
      background:linear-gradient(90deg,transparent,var(--cps-border),transparent);
    }

    /* ── HERO PROMO GRID (image left + video right) ── */
    .promo-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:0;
      border-radius:var(--radius-lg);
      overflow:hidden;
      box-shadow:0 6px 28px rgba(0,0,0,0.14);
    }

    /* Left promo panel */
    .promo-left {
      position:relative;
      background:linear-gradient(135deg,#1a2a40 0%,#2a4060 100%);
      padding:2.5rem 2rem;
      display:flex;flex-direction:column;
      justify-content:flex-end;
      min-height:240px;
      overflow:hidden;
    }
    .promo-left::before {
      content:'';
      position:absolute;inset:0;
      background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
      z-index:1;
    }
    /* decorative circles for visual interest */
    .promo-left::after {
      content:'';
      position:absolute;
      width:320px;height:320px;
      top:-60px;right:-60px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(106,176,76,0.18) 0%,transparent 70%);
      pointer-events:none;
    }
    .promo-left-inner { position:relative;z-index:2; }
    .promo-left h2 {
      font-family:var(--font-display);
      font-size:22px;font-weight:600;
      color:#fff;line-height:1.35;
      margin-bottom:1.25rem;
      text-shadow:0 2px 12px rgba(0,0,0,0.4);
    }
    .promo-book-btn {
      display:inline-block;
      background:var(--cps-blue);
      color:#fff;font-size:12px;font-weight:700;
      letter-spacing:1px;text-transform:uppercase;
      padding:10px 24px;border-radius:var(--radius-md);
      box-shadow:0 4px 14px rgba(26,58,143,0.4);
      transition:opacity 0.18s,box-shadow 0.18s;
      text-decoration: none !important;
    }
    .promo-book-btn:hover { opacity:0.88;color:#fff;box-shadow:0 6px 20px rgba(26,58,143,0.5); }

    /* Right: YouTube embed */
    .promo-right {
      position:relative;
      background:#000;
    }
    .promo-right iframe {
      width:100%;height:100%;
      min-height:240px;
      display:block;border:none;
    }

    /* ── GREEN BANNER ── */
    .green-banner {
      background:var(--toeic-green);
      padding:1rem 1.5rem;
      text-align:center;
      margin-top:1.5rem;
      border-radius:var(--radius-md);
    }
    .green-banner p {
      font-size:16px;font-weight:700;
      color:#fff;letter-spacing:1px;
      text-transform:uppercase;
    }

    /* ── TWO ACTION BUTTONS ── */
    .action-btns {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1rem;
      margin-top:1.25rem;
    }
    .action-btn {
      text-decoration: none !important;    
      display:flex;align-items:center;justify-content:center;
      background:var(--cps-white);
      border:1.5px solid var(--cps-border);
      border-radius:var(--radius-md);
      padding:1rem 1.5rem;
      font-size:15px;font-weight:600;
      color:var(--cps-text);
      box-shadow:0 3px 10px rgba(26,58,143,0.06);
      transition:border-color 0.18s,box-shadow 0.18s,transform 0.18s;
    }
    .action-btn:hover {
      border-color:var(--toeic-green);
      box-shadow:0 6px 18px rgba(106,176,76,0.18);
      transform:translateY(-2px);
      color:var(--cps-text);
    }

    /* ── TOEIC PROGRAM BANNER ── */
    .program-banner {
      background:var(--toeic-green);
      border-radius:var(--radius-md);
      padding:1.1rem 1.5rem;
      text-align:center;
      margin-top:1.5rem;
    }
    .program-banner p {
      font-size:20px;font-weight:700;
      color:#fff;font-style:italic;
      font-family:var(--font-display);
    }

    /* ── TOEIC PROGRAM CARDS ── */
    .toeic-cards {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1.25rem;
      margin-top:1.5rem;
    }
    .toeic-card {
      background:var(--cps-white);
      border:1.5px solid var(--cps-border);
      border-radius:var(--radius-lg);
      padding:2rem 1.5rem;
      text-align:center;
      box-shadow:0 3px 12px rgba(26,58,143,0.06);
      transition:transform 0.18s,box-shadow 0.18s;
      display:flex;flex-direction:column;align-items:center;gap:0.75rem;
    }
    .toeic-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(106,176,76,0.14); }

    .toeic-card-icon {
      width:56px;height:56px;
      display:flex;align-items:center;justify-content:center;
      margin-bottom:0.25rem;
    }
    .toeic-card-icon svg {
      width:44px;height:44px;
      stroke:#b8960a;fill:none;
      stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    }

    .toeic-card h3 {
      font-size:16px;font-weight:700;
      color:var(--cps-text);line-height:1.4;
    }
    .toeic-card p {
      font-size:13.5px;color:var(--cps-muted);
      line-height:1.7;flex:1;
    }
    .toeic-learn-btn {
      text-decoration: none !important;    
      display:inline-block;
      background:var(--toeic-green);
      color:#fff;font-size:13.5px;font-weight:600;
      padding:10px 28px;border-radius:var(--radius-md);
      box-shadow:0 4px 12px rgba(106,176,76,0.30);
      transition:opacity 0.18s,box-shadow 0.18s;
      margin-top:0.5rem;
    }
    .toeic-learn-btn:hover { opacity:0.88;color:#fff;box-shadow:0 6px 18px rgba(106,176,76,0.40); }

    /* ── RESPONSIVE ── */
    @media (max-width:720px) {
      .promo-grid { grid-template-columns:1fr; }
      .promo-right iframe { min-height:220px; }
      .action-btns,
      .toeic-cards { grid-template-columns:1fr; }
      .cps-section { padding:1.5rem 1rem; }
    }
    @media (max-width:600px) { .hero-title { font-size:30px; } }
    @media (max-width:420px) { #cps-hero { padding:3rem 1rem 2.5rem; } }/* End custom CSS */