/* ==========================================================================
   GW Hero Slider - CSS
   Plugin by Gerencie Web
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
.gw-hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #0a0a1a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gw-hero-slider *,
.gw-hero-slider *::before,
.gw-hero-slider *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. SLIDES WRAPPER & SLIDES
   -------------------------------------------------------------------------- */
.gw-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.gw-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    will-change: transform;
}

.gw-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   3. SLIDE BACKGROUND (Parallax)
   -------------------------------------------------------------------------- */
.gw-slide-bg {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   3b. VIDEO BACKGROUND
   -------------------------------------------------------------------------- */
.gw-slide-video-wrap {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: transform;
}

.gw-slide-video-wrap.gw-video-active {
    opacity: 1;
}

.gw-slide-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Iframe video (YouTube/Vimeo) */
.gw-slide-video-iframe-wrap {
    pointer-events: none;
}

.gw-slide-video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh; /* 16:9 aspect ratio */
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Video Pause/Play Button */
.gw-video-pause-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 12;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    transition: all 0.3s ease;
    pointer-events: all;
}

.gw-video-pause-btn:hover {
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.6);
}

.gw-video-pause-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.gw-video-icon-pause,
.gw-video-icon-play {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   4. OVERLAY
   -------------------------------------------------------------------------- */
.gw-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   5. SLIDE CONTENT WRAPPER & CONTENT
   -------------------------------------------------------------------------- */

/* Wrapper: full-height flex container that controls vertical & horizontal positioning */
.gw-slide-content-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 80px 30px 180px;
    pointer-events: none;
}

/* Content: auto-height box that wraps the actual text/button elements */
.gw-slide-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    text-align: center;
    pointer-events: auto;
}

/* Content Animation Classes */
.gw-slide-content > * {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.gw-slide.active .gw-slide-content > * {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.gw-slide.active .gw-slide-content > *:nth-child(1) { transition-delay: 0.3s; }
.gw-slide.active .gw-slide-content > *:nth-child(2) { transition-delay: 0.45s; }
.gw-slide.active .gw-slide-content > *:nth-child(3) { transition-delay: 0.6s; }
.gw-slide.active .gw-slide-content > *:nth-child(4) { transition-delay: 0.75s; }
.gw-slide.active .gw-slide-content > *:nth-child(5) { transition-delay: 0.9s; }
.gw-slide.active .gw-slide-content > *:nth-child(6) { transition-delay: 1.05s; }

/* --------------------------------------------------------------------------
   5b. CONTENT BOX (Visual container for readability)
   -------------------------------------------------------------------------- */

/* Base active state - transition for smooth appearance */
.gw-slide-content.gw-cbox-active {
    position: relative;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* --- Text Shadow --- */
.gw-slide-content.gw-cbox-text-shadow .gw-slide-title,
.gw-slide-content.gw-cbox-text-shadow .gw-slide-subtitle,
.gw-slide-content.gw-cbox-text-shadow .gw-slide-description {
    text-shadow: var(--cbox-ts-x, 0px) var(--cbox-ts-y, 2px) var(--cbox-ts-blur, 8px) var(--cbox-ts-color, rgba(0,0,0,0.7));
}

/* --- Animated Border: Glow --- */
.gw-slide-content.gw-cbox-border-animated {
    border: 2px solid transparent;
    animation: gw-cbox-glow var(--cbox-anim-speed, 4s) ease-in-out infinite;
}

@keyframes gw-cbox-glow {
    0%, 100% {
        border-color: var(--cbox-anim-color, #c9a96e);
        box-shadow: 0 0 8px 0 var(--cbox-anim-color, #c9a96e),
                    inset 0 0 8px 0 rgba(201, 169, 110, 0.1);
    }
    50% {
        border-color: transparent;
        box-shadow: 0 0 2px 0 transparent,
                    inset 0 0 2px 0 transparent;
    }
}

/* --- Animated Border: Rotating Dashed --- */
.gw-slide-content.gw-cbox-border-animated_dash {
    border: none;
    overflow: visible;
}

.gw-slide-content.gw-cbox-border-animated_dash::before,
.gw-slide-content.gw-cbox-border-animated_dash::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    pointer-events: none;
}

.gw-slide-content.gw-cbox-border-animated_dash::before {
    border: 2px dashed var(--cbox-anim-color, #c9a96e);
    animation: gw-cbox-dash-rotate var(--cbox-anim-speed, 4s) linear infinite;
    opacity: 0.7;
}

.gw-slide-content.gw-cbox-border-animated_dash::after {
    border: 2px dashed var(--cbox-anim-color, #c9a96e);
    animation: gw-cbox-dash-rotate var(--cbox-anim-speed, 4s) linear infinite reverse;
    opacity: 0.3;
    inset: -7px;
}

@keyframes gw-cbox-dash-rotate {
    0% {
        clip-path: inset(0 0 calc(100% - 2px) 0);
    }
    25% {
        clip-path: inset(0 0 0 calc(100% - 2px));
    }
    50% {
        clip-path: inset(calc(100% - 2px) 0 0 0);
    }
    75% {
        clip-path: inset(0 calc(100% - 2px) 0 0);
    }
    100% {
        clip-path: inset(0 0 calc(100% - 2px) 0);
    }
}

/* Alternative animated dash using background gradient technique */
@keyframes gw-cbox-border-travel {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    }
    100% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    }
}

.gw-slide-content.gw-cbox-border-animated_dash {
    background-image:
        linear-gradient(90deg, var(--cbox-anim-color, #c9a96e) 50%, transparent 50%),
        linear-gradient(0deg, var(--cbox-anim-color, #c9a96e) 50%, transparent 50%),
        linear-gradient(90deg, var(--cbox-anim-color, #c9a96e) 50%, transparent 50%),
        linear-gradient(0deg, var(--cbox-anim-color, #c9a96e) 50%, transparent 50%);
    background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    animation: gw-cbox-border-travel var(--cbox-anim-speed, 4s) linear infinite;
}

.gw-slide-content.gw-cbox-border-animated_dash::before,
.gw-slide-content.gw-cbox-border-animated_dash::after {
    content: none;
    display: none;
}

/* --------------------------------------------------------------------------
   6. TOP DIVIDER (Line)
   -------------------------------------------------------------------------- */
.gw-slide-divider-top {
    width: 60px;
    height: 3px;
    background-color: #c9a96e;
    margin-bottom: 20px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. SUBTITLE
   -------------------------------------------------------------------------- */
.gw-slide-subtitle {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: #c9a96e;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. TITLE
   -------------------------------------------------------------------------- */
.gw-slide-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 60px;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 20px 0;
    padding: 0;
    letter-spacing: 3px;
}

/* --------------------------------------------------------------------------
   9. ICON DIVIDER
   -------------------------------------------------------------------------- */
.gw-slide-icon-divider {
    margin-bottom: 25px;
}

.gw-slide-icon-divider i {
    font-size: 22px;
    color: #c9a96e;
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   10. DESCRIPTION
   -------------------------------------------------------------------------- */
.gw-slide-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 600px;
}

/* --------------------------------------------------------------------------
   11. BUTTON (Solid border + Dashed outer border)
   -------------------------------------------------------------------------- */
.gw-slide-button-wrap {
    position: relative;
    display: inline-block;
}

.gw-slide-button-wrap::before {
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    border: 1px dashed rgba(201, 169, 110, 0.5);
    pointer-events: none;
    transition: border-color 0.4s ease;
}

.gw-slide-button {
    display: inline-block;
    padding: 18px 48px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #c9a96e;
    background-color: transparent;
    border: 1px solid #c9a96e;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.gw-slide-button:hover {
    color: #1a1a2e;
    background-color: #c9a96e;
    border-color: #c9a96e;
}

.gw-slide-button-wrap:hover::before {
    border-color: #c9a96e;
}

/* --------------------------------------------------------------------------
   12. NAVIGATION ARROWS
   -------------------------------------------------------------------------- */
.gw-slider-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.gw-slider-arrow {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(25, 25, 45, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: #c9a96e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
    padding: 0;
    outline: none;
}

.gw-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.gw-arrow-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    transition: fill 0.3s ease;
}

/* Outer semi-transparent border using ::before pseudo-element */
.gw-slider-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.12);
    margin: -10px;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gw-slider-arrow:hover {
    background-color: #c9a96e;
    border-color: #c9a96e;
    color: #1a1a2e;
}

.gw-slider-arrow:hover::before {
    border-color: rgba(201, 169, 110, 0.25);
}

.gw-slider-arrow:hover .gw-arrow-icon svg {
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   13. ARROW PREVIEW (Thumbnail on hover) - CORRECTED POSITIONS
   -------------------------------------------------------------------------- */
.gw-arrow-preview {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
}

/* DEFAULT: Inner position (preview between arrows - correct side) */
/* Left arrow -> preview on RIGHT side */
.gw-arrow-preview-prev {
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(0.4);
}

/* Right arrow -> preview on LEFT side */
.gw-arrow-preview-next {
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(0.4);
}

.gw-slider-arrow:hover .gw-arrow-preview {
    opacity: 1;
}

.gw-slider-arrow:hover .gw-arrow-preview-prev {
    transform: translateY(-50%) scale(1);
}

.gw-slider-arrow:hover .gw-arrow-preview-next {
    transform: translateY(-50%) scale(1);
}

/* Preview position: outer (outside arrows - away from center) */
.gw-hero-slider[data-preview-pos="outer"] .gw-arrow-preview-prev {
    right: calc(100% + 12px);
    left: auto;
    transform: translateY(-50%) scale(0.4);
}

.gw-hero-slider[data-preview-pos="outer"] .gw-arrow-preview-next {
    left: calc(100% + 12px);
    right: auto;
    transform: translateY(-50%) scale(0.4);
}

.gw-hero-slider[data-preview-pos="outer"] .gw-slider-arrow:hover .gw-arrow-preview-prev,
.gw-hero-slider[data-preview-pos="outer"] .gw-slider-arrow:hover .gw-arrow-preview-next {
    transform: translateY(-50%) scale(1);
}

/* Preview position: above */
.gw-hero-slider[data-preview-pos="above"] .gw-arrow-preview-prev,
.gw-hero-slider[data-preview-pos="above"] .gw-arrow-preview-next {
    bottom: calc(100% + 12px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0.4);
}

.gw-hero-slider[data-preview-pos="above"] .gw-slider-arrow:hover .gw-arrow-preview-prev,
.gw-hero-slider[data-preview-pos="above"] .gw-slider-arrow:hover .gw-arrow-preview-next {
    transform: translateX(-50%) scale(1);
}

/* Preview position: below */
.gw-hero-slider[data-preview-pos="below"] .gw-arrow-preview-prev,
.gw-hero-slider[data-preview-pos="below"] .gw-arrow-preview-next {
    top: calc(100% + 12px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0.4);
}

.gw-hero-slider[data-preview-pos="below"] .gw-slider-arrow:hover .gw-arrow-preview-prev,
.gw-hero-slider[data-preview-pos="below"] .gw-slider-arrow:hover .gw-arrow-preview-next {
    transform: translateX(-50%) scale(1);
}

.gw-arrow-preview-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   14. SHAPE DIVIDERS
   -------------------------------------------------------------------------- */
.gw-shape-divider {
    position: absolute;
    pointer-events: none;
    line-height: 0;
    overflow: hidden;
}

.gw-shape-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gw-shape-divider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Left shape - position set inline via PHP */
.gw-shape-left {
    /* left, top/bottom, width, height, transform all set inline */
}

/* Right shape - position set inline via PHP */
.gw-shape-right {
    /* right, top/bottom, width, height, transform all set inline */
}

/* Bottom shape - position set inline via PHP */
.gw-shape-bottom {
    /* bottom, left/right/margin-left, width, height, transform all set inline */
}

/* --------------------------------------------------------------------------
   15. SCROLL INDICATOR (Mouse icon with animated dot)
   -------------------------------------------------------------------------- */
.gw-scroll-indicator {
    width: 28px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    position: relative;
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.gw-scroll-indicator:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.gw-scroll-indicator-dot {
    width: 4px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: gw-scroll-bounce 2s infinite;
}

@keyframes gw-scroll-bounce {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* --------------------------------------------------------------------------
   16. PAGINATION DOTS
   -------------------------------------------------------------------------- */
.gw-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.gw-pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: all 0.35s ease;
    outline: none;
}

.gw-pagination-dot.active {
    background-color: transparent;
    border-color: #c9a96e;
    width: 20px;
    height: 20px;
}

.gw-pagination-dot.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #c9a96e;
}

.gw-pagination-dot:hover:not(.active) {
    background-color: #c9a96e;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   17. BREADCRUMBS
   -------------------------------------------------------------------------- */
.gw-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666666;
}

.gw-breadcrumbs a {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.gw-breadcrumbs a:hover {
    color: #c9a96e;
}

.gw-breadcrumb-sep {
    font-size: 9px;
    color: #c9a96e;
}

.gw-breadcrumb-current {
    color: #999999;
}

/* --------------------------------------------------------------------------
   18. BOTTOM ELEMENTS (Scroll, Pagination, Breadcrumbs)
   -------------------------------------------------------------------------- */
.gw-bottom-elements {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 16;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* When shape bottom exists, push elements up a bit */
.gw-hero-slider:has(.gw-shape-bottom) .gw-bottom-elements {
    bottom: 10px;
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   Note: Most sizing is now handled via Elementor responsive controls.
   These media queries provide fallback defaults and structural adjustments.
   -------------------------------------------------------------------------- */

/* --- Hide on Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .gw-hide-tablet {
        display: none !important;
    }
}

/* --- Hide on Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
    .gw-hide-mobile {
        display: none !important;
    }
}

/* --- 1024px: Tablets landscape --- */
@media (max-width: 1024px) {
    /* Arrow previews hidden on tablets */
    .gw-arrow-preview {
        display: none !important;
    }

    /* Content box adjustments */
    .gw-slide-content.gw-cbox-active {
        max-width: 90%;
    }

    /* Video pause button slightly smaller */
    .gw-video-pause-btn {
        width: 36px;
        height: 36px;
    }

    .gw-video-pause-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* --- 768px: Tablets portrait / large phones --- */
@media (max-width: 768px) {
    /* Hide arrows when option is enabled */
    .gw-hide-arrows-mobile .gw-slider-nav {
        display: none !important;
    }

    /* Bottom elements */
    .gw-bottom-elements {
        bottom: 15px;
    }

    /* Pagination dots */
    .gw-pagination {
        gap: 10px;
    }

    /* Breadcrumbs */
    .gw-breadcrumbs {
        font-size: 12px;
        gap: 10px;
    }

    /* Scroll indicator */
    .gw-scroll-indicator {
        width: 24px;
        height: 38px;
        margin-bottom: 12px;
    }

    .gw-scroll-indicator-dot {
        width: 3px;
        height: 6px;
    }

    /* Video pause button */
    .gw-video-pause-btn {
        width: 34px;
        height: 34px;
        bottom: 15px;
        right: 15px;
    }

    .gw-video-pause-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Content box */
    .gw-slide-content.gw-cbox-active {
        max-width: 95%;
    }

    /* Arrow preview (ensure hidden) */
    .gw-arrow-preview {
        display: none !important;
    }

    /* Video iframe - ensure proper sizing on tablet */
    .gw-slide-video-iframe {
        width: 200vh;
        height: 120vh;
    }
}

/* --- 576px: Small phones landscape --- */
@media (max-width: 576px) {
    /* Breadcrumbs */
    .gw-breadcrumbs {
        font-size: 11px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Bottom elements */
    .gw-bottom-elements {
        bottom: 12px;
        width: 90%;
    }

    /* Pagination dots */
    .gw-pagination {
        gap: 8px;
    }

    /* Content box animated borders - reduce intensity */
    .gw-slide-content.gw-cbox-border-animated_dash {
        background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px;
    }
}

/* --- 480px: Small phones portrait --- */
@media (max-width: 480px) {
    /* Video pause button */
    .gw-video-pause-btn {
        width: 30px;
        height: 30px;
        bottom: 12px;
        right: 12px;
    }

    .gw-video-pause-btn svg {
        width: 12px;
        height: 12px;
    }

    /* Scroll indicator */
    .gw-scroll-indicator {
        width: 22px;
        height: 34px;
        margin-bottom: 10px;
    }

    /* Bottom elements */
    .gw-bottom-elements {
        bottom: 10px;
    }

    /* Content box - reduce padding on very small screens */
    .gw-slide-content.gw-cbox-active {
        max-width: 98%;
    }

    /* Breadcrumbs */
    .gw-breadcrumbs {
        font-size: 10px;
        gap: 6px;
    }

    /* Pagination dots */
    .gw-pagination {
        gap: 6px;
        margin-bottom: 10px;
    }
}

/* --------------------------------------------------------------------------
   20. THEME CONFLICT OVERRIDES (Woodmart, Flatsome, etc.)
   High-specificity rules to prevent theme CSS from breaking slider elements.
   NOTE: Color properties do NOT use !important so Elementor controls can
   override them. Only structural/layout properties use !important.
   -------------------------------------------------------------------------- */

/* --- ARROWS: Structural Reset --- */
.gw-hero-slider .gw-slider-nav .gw-slider-arrow,
.gw-hero-slider .gw-slider-nav .gw-slider-arrow.gw-arrow-prev,
.gw-hero-slider .gw-slider-nav .gw-slider-arrow.gw-arrow-next,
.gw-hero-slider .gw-slider-nav button.gw-slider-arrow {
    position: absolute !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    line-height: 1 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    float: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    z-index: 10 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Arrow prev - left side */
.gw-hero-slider .gw-slider-nav .gw-slider-arrow.gw-arrow-prev {
    right: auto !important;
}

/* Arrow next - right side */
.gw-hero-slider .gw-slider-nav .gw-slider-arrow.gw-arrow-next {
    left: auto !important;
}

/* Arrow outer border (::before) override */
.gw-hero-slider .gw-slider-nav .gw-slider-arrow::before,
.gw-hero-slider .gw-slider-nav button.gw-slider-arrow::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 50% !important;
    border-style: solid !important;
    pointer-events: none !important;
    background: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* Arrow ::after reset (some themes add content here) */
.gw-hero-slider .gw-slider-nav .gw-slider-arrow::after,
.gw-hero-slider .gw-slider-nav button.gw-slider-arrow::after {
    content: none !important;
    display: none !important;
}

/* Arrow icon structural override */
.gw-hero-slider .gw-slider-nav .gw-slider-arrow .gw-arrow-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gw-hero-slider .gw-slider-nav .gw-slider-arrow .gw-arrow-icon svg {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor !important;
    display: block !important;
}

/* --- PAGINATION DOTS: Structural Reset --- */
.gw-hero-slider .gw-pagination .gw-pagination-dot,
.gw-hero-slider .gw-pagination button.gw-pagination-dot {
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    line-height: 1 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    float: none !important;
    display: block !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: all 0.35s ease !important;
}

/* Active dot structural override */
.gw-hero-slider .gw-pagination .gw-pagination-dot.active,
.gw-hero-slider .gw-pagination button.gw-pagination-dot.active {
    border-radius: 50% !important;
}

/* Active dot inner circle */
.gw-hero-slider .gw-pagination .gw-pagination-dot.active::after,
.gw-hero-slider .gw-pagination button.gw-pagination-dot.active::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dot hover structural override */
.gw-hero-slider .gw-pagination .gw-pagination-dot:hover:not(.active),
.gw-hero-slider .gw-pagination button.gw-pagination-dot:hover:not(.active) {
    border-radius: 50% !important;
}

/* --- VIDEO PAUSE BUTTON: Structural Reset --- */
.gw-hero-slider .gw-slide .gw-video-pause-btn,
.gw-hero-slider .gw-slide button.gw-video-pause-btn {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 12 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    pointer-events: all !important;
}

/* --- SLIDE BUTTON (CTA): Structural Reset --- */
.gw-hero-slider .gw-slide .gw-slide-button,
.gw-hero-slider .gw-slide a.gw-slide-button {
    display: inline-block !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* --- GENERAL RESET for all buttons inside slider --- */
.gw-hero-slider button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

/* --- CONTENT BOX OVERRIDES --- */
.gw-hero-slider .gw-slide .gw-slide-content.gw-cbox-active {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
}

.gw-hero-slider .gw-slide .gw-slide-content.gw-cbox-border-animated {
    animation: gw-cbox-glow var(--cbox-anim-speed, 4s) ease-in-out infinite !important;
}

.gw-hero-slider .gw-slide .gw-slide-content.gw-cbox-border-animated_dash {
    animation: gw-cbox-border-travel var(--cbox-anim-speed, 4s) linear infinite !important;
}

/* --------------------------------------------------------------------------
   21. ELEMENTOR EDITOR SPECIFIC
   -------------------------------------------------------------------------- */
.elementor-editor-active .gw-hero-slider {
    min-height: 500px;
}

.elementor-editor-active .gw-slide {
    pointer-events: none;
}

.elementor-editor-active .gw-slide.active {
    pointer-events: auto;
}