body.delayed-transform .owl-item .hero-background img {transform: translateX(-100px);transition: transform 7s ease-in-out;}
.hero-section {
    position: relative;width: 100vw;height: clamp(670px, 100vh, 800px); padding-left: 20px;padding-top: 90px; background: #000101;overflow: hidden;display: flex; justify-content: space-between;
    
    &::before {content: '';position: absolute;inset: 0;background-image: url('../img/hero-overlay-pattern.svg');background-size: cover;background-position: center;opacity: 0.2;pointer-events: none; z-index: 2;}
    
    .hero-text-wrapper{display: flex;flex-direction: column;z-index: 10;max-width: 650px; width: 100%; height: 100%; justify-content: center; 
        margin-right: -200px;
    }
    .hero-text-container {position: relative; height: 400px;}
    .hero-content {position: absolute;inset: 0;height: fit-content;align-self: center;opacity: 0;visibility: hidden; padding: 30px 30px 30px 0px; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}
    .hero-content.active {opacity: 1;visibility: visible; opacity: 1; transition: opacity 2s ease-in-out;}
    .hero-navigation{margin-top: 30px;}
    
    .hero-content h1 {font-family: 'Playfair Display', serif;font-weight: 600;font-size: clamp(36px, 5vw, 52px);line-height: 1.15;margin: 0 0 20px 0;transition: color 0.3s ease;color: #ffffff;}
    .hero-content p {font-size: 18px;line-height: 1.4;margin: 0 0 25px 0;max-width: 480px;color: #ffffff;min-height: 75px;}
    
    .cta-link {font-weight: 700;font-size: 18px;color: #ffffff;text-decoration: underline;text-underline-position: from-font;display: inline-block;}
    .cta-link:hover {color: var(--e-global-color-primary);}
    
    .hero-images-container {position: relative; width: calc(100vw - 300px);height: 100%;overflow: hidden;}
    
    /* Owl Carousel overrides */
    .hero-images-container.owl-carousel .owl-stage-outer,
    .hero-images-container.owl-carousel .owl-stage,
    .hero-images-container.owl-carousel .owl-item {height: 100%;transition: none !important;}
    
    .hero-background {clip-path: polygon(300px 0, 100% 0, 100% 100%, 0 100%); width: calc(100% - 2px);height: 100%;position: relative;overflow: hidden;}
    .hero-background img {width: calc(100% + 100px); max-width: none; height: 100%;object-fit: cover;transform: translateX(0px);}

    .hero-nav {display: flex; align-items: center; gap: 30px; position: relative; margin-top: 30px; z-index: 5;}
    .hero-nav::before{content: ''; position: absolute; top: -16px; left: -24px; z-index: -1; width: 60px; height: 60px; background-color: #043927; border-radius: 50%; display: flex;}
    .nav-btn {cursor: pointer; opacity: 1; transition: all 0.3s ease; background-color: transparent; border: 0; padding: 0;}
	.nav-btn.next-btn:hover{
		transform: translate(5px, 0);
	}
	.nav-btn.prev-btn:hover{
		 transform: translate(-5px, 0);
	}
    
    .hero-dots {display: flex;gap: 10px;z-index: 10;margin-top: 30px;}
    .dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.5);cursor: pointer;transition: background 0.3s ease;}
    .dot.active {background: #ffffff;}
    
    /* Responsive Design */
	@media (min-width: 1350px) {
		&{padding-left: 60px;}
	}
    @media (max-width: 991px) {
        &{flex-direction: column; padding-left: 0; padding-top: 70px;height:clamp(600px, 100vh, 800px);}
        .hero-text-wrapper{max-width: 100%; padding: 30px;margin-right: 0; justify-content: flex-start;}
        .hero-content{align-self:flex-start; padding: 0;}
        .hero-text-container{height: 330px;}
        .hero-navigation{margin-top: 0;}
        .hero-images-container{width: 100%; margin-top: -200px;}
        .hero-background{clip-path: polygon(0 200px, 100% 0, 100% 100%, 0 100%);}
    }
	@media (max-width: 767px) {
		.hero-nav{margin-left: 20px;margin-top: -30px;}
		.hero-text-wrapper{padding: 60px 15px 15px 15px;}
		.nav-btn{width: 35px;}
		.hero-nav::before {
			top: -16px;
			left: -24px;
			width: 50px;
			height: 50px;
		}
	}
}