/**
 * DN Hero Carousel — base styles for the Elementor widget.
 * Colours, sizes and spacing are overridable from the widget's Style tab;
 * the values here are the defaults that match the original video hero.
 */
.dn-hcw, .dn-hcw * { box-sizing: border-box; }
.dn-hcw {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #034052;
    font-family: 'Trirong', Georgia, serif;
}

.dn-hcw__viewport { position: relative; min-height: 800px; }

/* Slides stacked; crossfade via opacity */
.dn-hcw__slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.dn-hcw__slide.is-active { opacity: 1; pointer-events: auto; }

.dn-hcw__media { position: absolute; inset: 0; overflow: hidden; }
.dn-hcw__media video,
.dn-hcw__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.dn-hcw__img { background-size: cover; background-position: center center; }

/* Content area */
.dn-hcw__inner {
    position: relative;
    z-index: 2;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 24px 96px;
}
.dn-hcw--center .dn-hcw__inner { justify-content: center; }
.dn-hcw--right  .dn-hcw__inner { justify-content: flex-end; }

/* Frosted panel with brand accent bar */
.dn-hcw__panel {
    position: relative;
    max-width: 560px;
    padding: 48px 44px 52px;
    text-align: left;
    background: rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(4px) saturate(1.05);
    backdrop-filter: blur(4px) saturate(1.05);
}
.dn-hcw__panel::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #034052;
}
.dn-hcw--center .dn-hcw__panel { text-align: center; }
.dn-hcw--center .dn-hcw__panel::before { display: none; }

.dn-hcw__title {
    font-family: 'Trirong', Georgia, serif;
    color: #034052;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: .01em;
    margin: 0 0 18px;
}
.dn-hcw__desc {
    color: #034052;
    font-size: 20px;
    line-height: 1.6;
    margin: 0 0 28px;
}
.dn-hcw__btn {
    display: inline-block;
    padding: 14px 38px;
    background: #034052;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background .15s ease, color .15s ease;
}
.dn-hcw__btn:hover { background: #022d3a; color: #fff; }

/* Arrows */
.dn-hcw__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #034052; color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(2,45,58,.28);
    transition: background .15s ease, color .15s ease;
}
.dn-hcw__arrow:hover { background: #D9AE63; color: #034052; }
.dn-hcw__arrow svg { width: 22px; height: 22px; }
.dn-hcw__arrow--prev { left: 22px; }
.dn-hcw__arrow--next { right: 22px; }

/* Dots */
.dn-hcw__dots {
    position: absolute; left: 0; right: 0; bottom: 26px;
    z-index: 5;
    display: flex; gap: 10px; justify-content: center;
}
.dn-hcw__dot {
    width: 11px; height: 11px; padding: 0;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(255,255,255,.45);
    box-shadow: 0 1px 4px rgba(2,45,58,.25);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.dn-hcw__dot.is-active { background: #D9AE63; border-color: #D9AE63; }

.dn-hcw__empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 800px; color: #fff; text-align: center; padding: 40px;
}

@media (max-width: 1024px) {
    .dn-hcw__viewport, .dn-hcw__inner, .dn-hcw__empty { min-height: 600px; }
    .dn-hcw__title { font-size: 34px; }
}
@media (max-width: 767px) {
    .dn-hcw__viewport, .dn-hcw__inner, .dn-hcw__empty { min-height: 480px; }
    .dn-hcw__inner { padding: 100px 20px 72px; }
    .dn-hcw__panel { max-width: none; padding: 32px 26px 36px; }
    .dn-hcw__title { font-size: 30px; }
    .dn-hcw__desc { font-size: 16px; }
    .dn-hcw__arrow { width: 38px; height: 38px; }
    .dn-hcw__arrow--prev { left: 10px; }
    .dn-hcw__arrow--next { right: 10px; }
}

/* ──────────────────────────────────────────────────────────────
   Control hardening — the theme styles generic <button> elements,
   which was turning the round arrows/dots into squares and hiding
   the SVG icons. Structural props are forced here; colours stay on
   the base rules + Elementor Style controls so they remain editable.
   ────────────────────────────────────────────────────────────── */
.dn-hcw .dn-hcw__arrow {
    box-sizing: border-box !important;
    width: 48px !important; height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 0 !important;
    text-shadow: none !important;
    min-width: 0 !important;
}
.dn-hcw .dn-hcw__arrow svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
}
.dn-hcw .dn-hcw__dot {
    box-sizing: border-box !important;
    width: 12px !important; height: 12px !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 0 !important;
    background-image: none !important;
    box-shadow: 0 1px 4px rgba(2,45,58,.25) !important;
}
@media (max-width: 767px) {
    .dn-hcw .dn-hcw__arrow { width: 40px !important; height: 40px !important; }
}

/* ── Panel polish to match the approved design (image 6) ── */
.dn-hcw__panel { padding: 56px 56px 60px; }
.dn-hcw__title { font-size: 54px; }
.dn-hcw__desc  { font-size: 19px; }
@media (max-width: 1024px) { .dn-hcw__title { font-size: 40px; } }
@media (max-width: 767px) {
    .dn-hcw__panel { padding: 32px 28px 38px; }
    .dn-hcw__title { font-size: 30px; }
}