/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 10 2026 | 04:46:19 */


.slider-root {
      position: relative;
      width: 100%;
      max-width: 1500px;
      margin: 0 auto;
      overflow: hidden;
      background: #0a0f1e;
      user-select: none;
      font-family: 'DM Sans', sans-serif;
    }

    /* ── Slides ── */
    .slide {
      display: none;
      position: relative;
      width: 100%;
      min-height: 520px;
      flex-direction: row;
      align-items: stretch;
    }
    .slide.active { display: flex; }

    /* ── Image half ── */
    .slide-image {
      width: 50%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .slide-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.0);
      transition: transform 7s ease;
    }
    .slide.active .slide-image img { transform: scale(1.07); }
    .slide-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, transparent 50%, #0a0f1e 98%);
    }

    /* ── Text half ── */
    .slide-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 80px 60px 40px;
      position: relative;
      z-index: 1;
    }

    .slide-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(24px, 2.8vw, 42px);
      font-weight: 900;
      line-height: 1.2;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .slide-headline .highlight { color: #f0ab00; }

    .slide-sub {
      font-size: 18px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255,255,255,0.68);
      margin-bottom: 36px;
      max-width: 480px;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #f0ab00;
      color: #0a0f1e;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      letter-spacing: 0.2px;
      text-decoration: none !important;
      align-self: flex-start;
      transition: background 0.2s, transform 0.15s;
    }
    .cta-btn:hover { background: #ffc429; transform: translateY(-2px); text-decoration: none !important; }
    .cta-btn:active { transform: scale(0.97); }

    /* ── Badge – above title ── */
    .slide-badge {
      display: inline-flex !important;
      width: auto !important;
      max-width: fit-content;
      background: rgba(240,171,0,0.12);
      border: 1px solid rgba(240,171,0,0.40);
      color: #f0ab00;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 14px;
    }

    /* ── Banner overlay arrows ── */
    .banner-arrow {
      position: absolute;
      top: calc(50% - 28px);
      transform: translateY(-50%);
      z-index: 20;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.28);
      background: rgba(10,15,30,0.50);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      line-height: 1;
    }
    .banner-arrow:hover {
      background: rgba(240,171,0,0.90);
      border-color: #f0ab00;
      color: #0a0f1e;
      transform: translateY(-50%) scale(1.1);
    }
    .banner-arrow.left  { left: 20px; }
    .banner-arrow.right { right: 20px; }

    /* ── Controls bar – dots only ── */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 28px;
      background: rgba(255,255,255,0.04);
      border-top: 1px solid rgba(255,255,255,0.07);
      gap: 10px;
    }

    .dot {
      width: 30px;
      height: 4px;
      border-radius: 2px;
      background: rgba(255,255,255,0.22);
      cursor: pointer;
      border: none;
      transition: background 0.3s, width 0.3s;
      padding: 0;
    }
    .dot.active { background: #f0ab00; width: 52px; }

    /* ── Responsive ── */
    @media (max-width: 860px) {
      .slide { min-height: auto; flex-direction: column; }
      .slide-image { width: 100%; height: 260px; }
      .slide-image::after {
        background: linear-gradient(to bottom, transparent 45%, #0a0f1e 100%);
      }
      .slide-content { padding: 30px 24px 36px; }
      .slide-sub { max-width: 100%; }
      .banner-arrow {
        width: 40px; height: 40px; font-size: 16px;
        top: 130px; transform: none;
      }
      .banner-arrow:hover { transform: scale(1.1); }
      .banner-arrow.left  { left: 12px; }
      .banner-arrow.right { right: 12px; }
    }

    @media (max-width: 480px) {
      .slide-image { height: 200px; }
      .banner-arrow { top: 100px; }
    }