html, body {
  overflow-x: hidden;
}

#nav-menu .hfe-nav-menu .hfe-menu-item::after {
	content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0;
    height: 2px !important;
    background-color: rgb(81, 26, 11) !important; 
    transition: width 0.3s ease-in-out !important;
    display: block !important;
}

#nav-menu .hfe-nav-menu .hfe-menu-item:hover::after {
	width: 100% !important;
}

/* Direct targeting of the active link underline */
#nav-menu .hfe-nav-menu li.current-menu-item > a.hfe-menu-item::after {
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Style vertical decorative texts in the hero section */
.hero-vertical-texts {
    white-space: nowrap !important;
	width: 0px !important; /* Collapses the phantom horizontal space */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.hero-vertical-text-left {
	position: absolute !important;
	left: -40px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.hero-vertical-text-right {
	position: absolute !important;
	right: -40px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.dynamic-text {
    display: inline-block; /* Konieczne, aby Fitty mogło zmierzyć szerokość */
    white-space: nowrap;   /* Blokuje łamanie linii przed przeliczeniem */
    width: 95%;            /* Rodzic ograniczy tekst do 95% swojej szerokości */
}

/* O Nas */
#about-hero-heading {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;
}

#about-hero-heading .left {
  color: #FFEADA !important;
  margin-left: 10.25vw;
}

/* Reset dla widoku mobilnego */
@media (max-width: 767px) {
  #about-hero-heading {
	  display: none !important;
  }
}



@media (max-width: 1920px) {
  #about-hero-heading .left {
    margin-left: 11.75vw;
  }
}

@media (max-width: 1366px) {
  #about-hero-heading .left {
    margin-left: 40px;
  }
}

.opening-hours p:last-child {
    margin-bottom: 0 !important;
}

.location-description p:last-child {
    margin-bottom: 0 !important;
}

.about-desc p:last-child {
	margin-bottom: 0 !important;
}

.menu-item-desc p:last-child {
	margin-bottom: 0 !important;
}

.footer-copyright p:last-child {
	margin-bottom: 0 !important;
}

.menu-item-price  p:last-child {
	margin-bottom: 0 !important;
}

.contact-item-desc  p:last-child {
	margin-bottom: 0 !important;
}

.zero-bottom-margin p:last-child {
	margin-bottom: 0 !important;
}

/* Timeline Container */
.timeline-container {
    position: relative;
}
/* Central Vertical Line */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: rgba(81, 26, 11, 0.2);
    transform: translateX(-50%);
}

/* Carousel image cropping */
.elementor-element-3d664ff .swiper-slide {
  aspect-ratio: 3 / 4;
  max-height: 450px;
}

.elementor-element-3d664ff .swiper-slide-inner {
  height: 100%;
}

.elementor-element-3d664ff .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === THE ABSOLUTE MOBILE FIX === */
@media (max-width: 768px) {
    /* 1. Reset the Vertical Line to the left edge */
    .timeline-container::before { 
        left: 30px !important; 
        transform: none !important;
    }
    
    /* 2. Force BOTH rows to be simple left-aligned rows */
    .timeline-row-left, 
    .timeline-row-right {
        width: 100% !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: row !important; /* Force side-by-side */
        justify-content: flex-start !important; /* Force start alignment */
        align-items: flex-start !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 40px !important;
    }

    /* 3. The Marker - Static on the left edge of the content */
    .timeline-marker { 
        position: relative !important;
        /* This ensures the marker always stays on the absolute left */
        order: -1 !important; 
        flex: 0 0 40px !important;
        height: 40px !important;
        margin-right: 20px !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
    }

    /* 4. The Content Block - Left aligned text */
    .timeline-content-block {
        flex: 1 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    
    /* 5. Force ALL text elements to left align */
    .timeline-container .elementor-widget-heading *,
    .timeline-container .elementor-widget-text-editor *,
    .timeline-container .elementor-heading-title,
    .timeline-container .elementor-text-editor {
        text-align: left !important;
    }
	
	/* 6. Align the text block with the marker */
	.timeline-content-block h2, 
    .timeline-content-block .elementor-heading-title {
        margin-top: 8px !important; 
    }

}