/* EXACT CSS from User's Working HTML + Strict Overrides for WordPress Themes - Namespaced with vhp- prefix */
.vhp-hero {
    height: 72vh !important;
    min-height: 650px !important;
    position: relative !important;
    z-index: 1 !important; /* Low z-index prevents transparent/fixed header menus from being covered */
    overflow: visible !important; /* Allow stats to overflow the bottom */
    font-family: 'Poppins', sans-serif !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.vhp-hero .vhp-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 1s ease !important;
    z-index: 1 !important;
    overflow: hidden !important; /* Force image clipping within the slide height */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.vhp-hero .vhp-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Target ONLY background images with vhp-slide-bg to prevent Twemoji stretching */
.vhp-hero .vhp-slide img.vhp-slide-bg {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Strictly enforce native size on WordPress Twemoji emojis inside main texts */
.vhp-hero img.emoji, .vhp-hero .vhp-slide img.emoji {
    width: 1.2em !important;
    height: 1.2em !important;
    min-width: 1.2em !important;
    min-height: 1.2em !important;
    max-width: 1.2em !important;
    max-height: 1.2em !important;
    display: inline-block !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
    vertical-align: -0.12em !important;
    margin: 0 0.2em !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Dynamic black layer density based on --oo CSS Variable */
.vhp-hero .vhp-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, var(--oo, 0.75)), rgba(0, 0, 0, calc(var(--oo, 0.75) * 0.33))) !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vhp-hero .vhp-content {
    position: absolute !important;
    top: 42% !important; /* Raised slightly to prevent button overlapping with the stats card */
    max-width: 700px !important;
    color: #fff !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

/* Dynamic Positioning & Text Alignment based on --ta CSS Variable */
.vhp-hero .vhp-slide[style*="--ta: left"] .vhp-content {
    left: 7% !important;
    right: auto !important;
    text-align: left !important;
    transform: translateY(-50%) !important;
}

.vhp-hero .vhp-slide[style*="--ta: center"] .vhp-content {
    left: 50% !important;
    right: auto !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
}

.vhp-hero .vhp-slide[style*="--ta: right"] .vhp-content {
    right: 7% !important;
    left: auto !important;
    text-align: right !important;
    transform: translateY(-50%) !important;
}

.vhp-hero .vhp-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    border-radius: 50px !important;
    background: rgba(223,117,0,.2) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    margin-bottom: 20px !important;
}

.vhp-hero .vhp-content h1 {
    font-size: 58px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    color: #fff !important;
}

.vhp-hero .vhp-content p {
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
    color: #fff !important;
}

.vhp-hero .vhp-btn {
    display: inline-block !important;
    padding: 15px 26px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    background: #DF7500 !important;
    color: #fff !important;
}

/* Stats section - number on top, icon+label below layout */
.vhp-hero .vhp-stats {
    position: absolute !important;
    left: 50% !important;
    bottom: -90px !important; /* Positioned exactly 50% overlay on slider (90px overlay / 90px below container) */
    transform: translateX(-50%) !important;
    width: min(1280px,92%) !important;
    background: #fff !important;
    border-radius: 24px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    box-shadow: 0 15px 45px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
    z-index: 20 !important;
    margin: 0 !important;
}

.vhp-hero .vhp-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.vhp-hero .vhp-stat:not(:last-child):after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 60px !important;
    background: #e9e9e9 !important;
}

/* Make stats values big and orange */
.vhp-hero .vhp-stat h2 {
    font-size: 52px !important;
    color: #DF7500 !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
}

/* Stat Emojis (both native emoji characters and WordPress Twemoji replacements) styled larger */
.vhp-hero .vhp-icon {
    font-size: 32px !important; /* Increased from 20px to make emoji icons bigger */
    line-height: 1 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vhp-hero .vhp-icon img.emoji {
    width: 32px !important; /* Make WordPress SVG emojis match the font-size */
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.vhp-hero .vhp-stat span {
    color: #444 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.vhp-hero .vhp-dots {
    position: absolute !important;
    bottom: 145px !important; /* Raised to 145px so that it sits 55px above the stats card and never overlaps it */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 30 !important;
    margin: 0 !important;
}

.vhp-hero .vhp-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.4) !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
}

.vhp-hero .vhp-dot.active {
    background: #DF7500 !important;
}

/* Responsive CSS from User's Working HTML */
@media(max-width:900px){
    .vhp-hero{height:650px !important;min-height:650px !important;}
    .vhp-hero .vhp-content{left:20px !important;right:20px !important;max-width:100% !important;}
    .vhp-hero .vhp-content h1{font-size:34px !important;line-height:1.15 !important;}
    .vhp-hero .vhp-content p{font-size:15px !important;line-height:1.7 !important;}
    .vhp-hero .vhp-stats{width:96% !important;grid-template-columns:repeat(4,1fr) !important;bottom:-60px !important;border-radius:18px !important;}
    .vhp-hero .vhp-stat{padding:15px 8px !important;gap:8px !important;flex-direction:column !important;text-align:center !important;}
    .vhp-hero .vhp-icon{font-size:26px !important;}
    .vhp-hero .vhp-icon img.emoji {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }
    .vhp-hero .vhp-stat h2{font-size:24px !important;margin:0 !important;}
    .vhp-hero .vhp-stat span{font-size:11px !important;line-height:1.3 !important;display:block !important;}
    .vhp-hero .vhp-stat:not(:last-child)::after{height:40px !important;}
    .vhp-hero .vhp-slide img.vhp-slide-bg {
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
    }
    
    /* Responsive Content Positioning Overrides */
    .vhp-hero .vhp-slide[style*="--ta: left"] .vhp-content {
        left: 20px !important;
        right: 20px !important;
        top: 38% !important;
        transform: translateY(-50%) !important;
    }
    .vhp-hero .vhp-slide[style*="--ta: center"] .vhp-content {
        left: 50% !important;
        right: auto !important;
        top: 38% !important;
        transform: translate(-50%, -50%) !important;
    }
    .vhp-hero .vhp-slide[style*="--ta: right"] .vhp-content {
        left: 20px !important;
        right: 20px !important;
        top: 38% !important;
        transform: translateY(-50%) !important;
    }
    
    .vhp-hero .vhp-dots{
        bottom:100px !important; /* Adjusted for tablet */
    }
}

@media(max-width:480px){
    .vhp-hero{height:620px !important;min-height:620px !important;}
    .vhp-hero .vhp-tag{font-size:12px !important;padding:8px 14px !important;}
    .vhp-hero .vhp-content h1{font-size:24px !important;line-height:1.15 !important;margin-bottom:12px !important;}
    .vhp-hero .vhp-content p{font-size:14px !important;line-height:1.6 !important;margin-bottom:15px !important;}
    .vhp-hero .vhp-btn{padding:10px 18px !important;font-size:13px !important;}
    .vhp-hero .vhp-slide img.vhp-slide-bg {
        object-fit:cover !important;
        object-position:center center !important;
    }
    
    /* Small Mobile Content Position Overrides */
    .vhp-hero .vhp-slide[style*="--ta: left"] .vhp-content {
        left: 18px !important;
        right: 18px !important;
        top: 45% !important;
        max-width: calc(100% - 36px) !important;
    }
    .vhp-hero .vhp-slide[style*="--ta: center"] .vhp-content {
        left: 50% !important;
        top: 45% !important;
        max-width: calc(100% - 36px) !important;
    }
    .vhp-hero .vhp-slide[style*="--ta: right"] .vhp-content {
        left: 18px !important;
        right: 18px !important;
        top: 45% !important;
        max-width: calc(100% - 36px) !important;
    }
    
    .vhp-hero .vhp-stats{
        bottom:-50px !important; /* Adjusted for mobile */
        width:95% !important;
    }
    .vhp-hero .vhp-dots{
        bottom:90px !important; /* Adjusted for mobile */
    }
}