body:has(.ul-fullscreen-slider) #qodef-page-header {
  background-color: transparent !important;
}

.ul-fullscreen-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

/* Adjust for WordPress admin bar */
body.admin-bar .ul-fullscreen-slider {
    top: 32px;
    height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .ul-fullscreen-slider {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/* Account for site header/menu */
body:not(.admin-bar) .ul-fullscreen-slider {
    top: 0px;
    height: calc(100vh);
}

.ul-fs-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.ul-fs-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 0.8s ease-in-out;
    background: transparent;
}

.ul-fs-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 2;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 0.8s ease-in-out;
}

/* Hide content during transition */
.ul-fs-slide-content,
.ul-fs-slide-columns,
.ul-fs-slide-fg {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0s;
}

/* Show content after slide is active */
.ul-fs-slide.active .ul-fs-slide-content,
.ul-fs-slide.active .ul-fs-slide-columns,
.ul-fs-slide.active .ul-fs-slide-fg {
    opacity: 1;
    transition-delay: 0.6s; /* Delay content fade-in until after slide transition */
}

/* Ensure first slide content is visible on page load */
.ul-fs-slide:first-child .ul-fs-slide-content,
.ul-fs-slide:first-child .ul-fs-slide-columns,
.ul-fs-slide:first-child .ul-fs-slide-fg {
    opacity: 1;
}

/* Keep background visible during transition */
.ul-fs-slide-bg {
    opacity: 1 !important;
}

.ul-fs-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.ul-fs-slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.ul-fs-slide-bg-image img {
    width: 125% !important; /* Changed from 115% to 125% */
    height: 125% !important; /* Changed from 115% to 125% */
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    top: -12.5% !important; /* Adjusted centering for 125% */
    left: -12.5% !important; /* Adjusted centering for 125% */
    transform-origin: center center;
    animation: zoomOutEffect 15s ease-out forwards; /* Fixed 15 second duration */
}

@keyframes zoomOutEffect {
    0% {
        transform: scale(1.25); /* Start zoomed in at 125% (of 125% base = 156.25% total) */
    }
    100% {
        transform: scale(0.8); /* Scale down to 80% (of 125% base = 100% total) */
    }
}

/* Mobile-specific background animation - ensure full coverage */
@media (max-width: 768px) {
    .ul-fs-slide-bg-image img {
        width: 150% !important; /* Increased for mobile */
        height: 150% !important; /* Increased for mobile */
        top: -25% !important; /* Adjusted centering */
        left: -25% !important; /* Adjusted centering */
        object-fit: cover !important;
        animation: zoomOutEffectMobile 15s ease-out forwards !important;
    }
    
    @keyframes zoomOutEffectMobile {
        0% {
            transform: scale(1.15); /* Start less zoomed on mobile */
        }
        100% {
            transform: scale(0.67); /* End at 100% coverage (0.67 * 150% = ~100%) */
        }
    }
}

/* Pause animation during slide transition */
.ul-fs-slide:not(.active) .ul-fs-slide-bg-image img {
    animation-play-state: paused;
}

.ul-fs-slide-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ul-fs-slide-bg-color {
    width: 100%;
    height: 100%;
}

.ul-fs-slide-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
}

.ul-fs-slide-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.ul-fs-slide-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* Remove old navigation buttons */
.ul-fs-prev,
.ul-fs-next {
    display: none;
}

/* Remove indicators */
.ul-fs-indicators {
    display: none;
}

/* New Navigation Container */
.ul-fs-navigation {
    position: fixed;
    bottom: 30px;
    right: 15%; /* 15% right margin to stay within 70% width */
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 100;
}

body.admin-bar .ul-fs-navigation {
    bottom: 30px;
}

.ul-fs-nav-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.ul-fs-nav-btn:hover {
    opacity: 0.7;
}

.ul-fs-nav-btn:active {
    opacity: 0.5;
    transform: scale(0.95);
}

.ul-fs-nav-btn svg {
    width: 24px;
    height: 24px;
}

.ul-fs-nav-divider {
    width: 1px;
    height: 40px;
    background: #fff;
    opacity: 0.3;
}

@media (max-width: 768px) {
    .ul-fs-navigation {
        bottom: 30px;
        right: 3%;
        pointer-events: auto;
        z-index: 101;
    }
    
    .ul-fs-nav-btn {
        width: 44px; /* Increased touch target size */
        height: 44px; /* Increased touch target size */
        padding: 10px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }
    
    .ul-fs-nav-btn svg {
        width: 24px;
        height: 24px;
        pointer-events: none;
    }
    
    .ul-fs-nav-divider {
        height: 44px;
        pointer-events: none;
    }
}

.ul-fs-progress-bar {
    position: fixed;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: transparent;
    z-index: 100;
}

body.admin-bar .ul-fs-progress-bar {
    top: 32px;
    height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
    body.admin.bar .ul-fs-progress-bar {
        top: 46px;
        height: calc(100% - 46px);
    }
}

.ul-fs-progress-fill {
    width: 100%;
    height: 0;
    background: #808080;
    transition: height 0.1s linear;
}

.ul-fs-progress-fill.animating {
    transition: height linear;
}

.ul-fs-social-icons {
    position: fixed;
    bottom: 30px;
    left: 15%; /* 15% left margin to stay within 70% width */
    display: flex;
    gap: 15px;
    z-index: 100;
}

body.admin.bar .ul-fs-social-icons {
    bottom: 30px;
}

.ul-fs-social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px;
}

.ul-fs-social-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.ul-fs-social-icon:hover::after {
    transform: scaleX(1);
}

.ul-fs-social-icon svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .ul-fs-slide-content h2 {
        font-size: 2rem;
    }
    
    .ul-fs-slide-content {
        padding: 1rem;
    }
    
    .ul-fs-social-icons {
        bottom: 30px; /* Same bottom position as navigation */
        left: 3%; /* 3% left margin for mobile */
        gap: 10px;
    }
    
    .ul-fs-social-icon {
        width: 35px;
        height: 35px;
    }
    
    .ul-fs-social-icon svg {
        width: 18px;
        height: 18px;
    }
}

.ul-fs-slide-fg {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.ul-fs-slide-fg img {
    object-fit: contain;
    opacity: 1;
    display: block;
}

/* Reset animation on inactive slides */
.ul-fs-slide:not(.active) .ul-fs-slide-fg img {
    animation: none !important;
    opacity: 0;
}

/* Responsive container for images with custom width */
@media (max-width: 480px) {
    .ul-fs-slide-fg img {
        max-width: 95vw !important;
    }
}

/* Content Columns */
.ul-fs-slide-columns {
    position: relative;
    z-index: 4;
    display: flex;
    width: 70%; /* 70% of screen width */
    height: 100%;
    pointer-events: none;
    margin-left: 15%; /* 15% left margin */
    margin-right: 15%; /* 15% right margin */
}

.ul-fs-slide-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
    pointer-events: auto;
}

/* Reduce gap between rows - add this new class */
.ul-fs-slide-column.ul-fs-tight-spacing {
    gap: 5px; /* Very small gap */
}

.ul-fs-slide-column-left {
    align-items: flex-start;
}

.ul-fs-slide-column-right {
    align-items: flex-end;
}

.ul-fs-slide-row {
    max-width: 100%;
}

/* Add negative margins to row content for tighter spacing */
.ul-fs-row-text h1,
.ul-fs-row-text h2,
.ul-fs-row-text h3,
.ul-fs-row-text h4,
.ul-fs-row-text h5,
.ul-fs-row-text h6 {
    margin-top: 0;
    margin-bottom: 0;
}

.ul-fs-row-text p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Specific tight spacing between heading rows */
.ul-fs-slide-row + .ul-fs-slide-row {
    margin-top: -10px; /* Negative margin pulls rows closer */
}

/* Even tighter for consecutive headings */
.ul-fs-slide-row:has(.ul-fs-row-text h1) + .ul-fs-slide-row:has(.ul-fs-row-text h5),
.ul-fs-slide-row:has(.ul-fs-row-text h5) + .ul-fs-slide-row:has(.ul-fs-row-text h1) {
    margin-top: -15px; /* Extra tight for h5 + h1 combinations */
}

@media (max-width: 768px) {
    .ul-fs-slide-columns {
        flex-direction: column;
        width: 94%; /* 94% of screen width on mobile */
        margin-left: 3%; /* 3% left margin */
        margin-right: 3%; /* 3% right margin */
    }
    
    .ul-fs-slide-column {
        width: 100% !important;
        padding: 20px;
        gap: 10px;
    }
    
    .ul-fs-slide-row + .ul-fs-slide-row {
        margin-top: -5px;
    }
    
    .ul-fs-row-images img {
        max-width: 100px;
    }
}