/* Header Sticky for desktop */
.desktop-header,
.headerMobile {
  position: relative; /* Or static, depending on your default layout */
  z-index: 1000; /* Ensure it stays on top of other content */
  /* Your other default header styles (e.g., background, padding) */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for transform and box-shadow */
  transform: translateY(0); /* Initially not translated */
}

.desktop-header.scrolled-header,
.headerMobile.scrolled-header{
  position: fixed; /* Make it stick to the top */
  top: 0;
  left: 0;
  width: 100%;
  /* Add styles for when the header is sticky */
  background-color: var(--prime-secondary) !important; /* Example: semi-transparent white background */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
  transform: translateY(0); /* Ensure it's visible when scrolled */
  margin-top: 0 !important;
}

.headerMobile.scrolled-header {
	background-color: #000000 !important
}

/* Optional: Adjust padding to avoid content jumping */
body {
  padding-top: 0; /* Reset default body padding */
  transition: padding-top 0.3s ease-in-out; /* Smooth transition for body padding */
}

body.has-sticky-header {
  padding-top: /* Height of your header */; /* Add padding to the top of the body to prevent content from being hidden behind the sticky header */
}

/* You might need to adjust the height value based on your header's actual height */
/* Example: If your header is 80px tall */
body.has-sticky-header {
  padding-top: 80px;
}


/*Header Logo*/

/* 1. Make the link container relatively positioned to hold the mask */
.desktop-header .headerLogo a {
    display: inline-block;
    position: relative;
    width: 60px; /* Matches your image width */
    height: 53px; /* Matches your image height */
}

/* 2. Hide the original white logo completely */
.desktop-header .headerLogo img {
    opacity: 0; 
}

/* 3. Create the color block and mask it with your SVG shape */
.desktop-header .headerLogo a::after {
    content: "";
    position: absolute;
    inset: 0; 
    
    /* This applies your dynamic CSS variable! */
    background-color: var(--prime-secondary); 

    /* Use your exact SVG URL as the cookie-cutter mask */
    -webkit-mask-image: url('https://services.themetiller.top/wp-content/uploads/2026/04/Elite-garage-doors-logo-main.svg');
    mask-image: url('https://services.themetiller.top/wp-content/uploads/2026/04/Elite-garage-doors-logo-main.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Optional: Add a smooth transition if it changes on hover/scroll */
    transition: background-color 0.3s ease;
}


.desktop-header.scrolled-header .headerLogo a::after {
	background-color: #ffffff; 
}


.desktop-header .headerLogo img{
	transition: .5s;
}

.desktop-header.scrolled-header .headerLogo img{
	width: 50px !important;
}

.desktop-header.scrolled-header .elementor-button-icon {
	display: none !important;
}

.desktop-header.scrolled-header .elementor-button-text  {
	padding: 5px 0 !important;
}

.desktop-header.scrolled-header .elementor-button-text:hover  {
	border: 1px solid var(--prime-primary) !important;
}

.desktop-header.scrolled-header .elementor-nav-menu--main .elementor-item,
.desktop-header.scrolled-header .animate-underline-ltr .elementor-icon-list-item:hover .elementor-icon-list-icon i{
	color: #ffffff !important;
  	fill: #ffffff !important;
}


.desktop-header.scrolled-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.desktop-header.scrolled-header .elementor-nav-menu--main .elementor-item:hover,
.desktop-header.scrolled-header .animate-underline-ltr .elementor-icon-list-item:hover .elementor-icon-list-text,
.desktop-header.scrolled-header .animate-underline-ltr .elementor-icon-list-item:hover .elementor-icon-list-icon i{
	color: var(--prime-primary) !important;
}



.desktop-header.scrolled-header .animate-underline-ltr .elementor-icon-list-item:hover a::before {
	background-color: #000000 !important;		
}
.desktop-header.scrolled-header .headerSearch:hover .elementor-icon svg {
	fill: #000000 !important;
}

.mobile-menu-logo a img {
	height: 107px;
} 

@media only screen and(max-width: 1200px){
	.desktop-header .elementor-button-icon {
      display: none;
  }
}

/* close Header Sticky for desktop */

.mobile-main-menu .elementor-nav-menu--main .elementor-nav-menu ul {
	position: inherit;
	left: 0;
  	z-index: 0;
  	margin: 0 !important
}

/* ==========  Footer ========== */
.working-time p strong {
  color: rgba(255, 255, 255, .5);
  font-weight: 300;
}

/*Contact form 7 validation*/
.wpcf7-not-valid-tip {
  display: none;
}

.wpcf7-spinner {
	position: absolute;
  	top: 15px;
  	right: 40px;
}

@media only screen and (max-width:768px){
	.wpcf7-spinner {
    position: absolute;
    top: unset;
    right: unset;
    bottom: 10px;
    left: 30px;
}

}

/* ==========  Footer close ========== */

/* Slider Navigation */
#hero-slider.elementor-widget-n-carousel .swiper-pagination-bullets{
	display: flex;
  	flex-direction: column;
	gap: 10px;
  	padding-left: 30px;
}

/* ========================================= */
/* ELEMENTOR NESTED CAROUSEL FADE (GRID FIX) */
/* ========================================= */

/* 1. Stop wrapper movement and use Grid to stack slides natively */
.prime-fade-carousel .swiper-wrapper {
    transform: none !important; 
    display: grid !important;
    width: 100% !important;
}

/* 2. Place all slides in the exact same grid cell (fixes height collapse and offsets) */
.prime-fade-carousel .swiper-slide {
    grid-area: 1 / 1 !important; /* Puts every slide in row 1, col 1 */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 1000ms ease-in-out, visibility 0ms linear 1000ms !important; 
    z-index: 1 !important;
}

/* 3. Reveal the active slide (and Elementor's duplicate active slide) */
.prime-fade-carousel .swiper-slide.swiper-slide-active,
.prime-fade-carousel .swiper-slide.swiper-slide-duplicate-active {
    opacity: 1 !important;
    visibility: visible !important; 
    pointer-events: auto !important;
    transition: opacity 1000ms ease-in-out, visibility 0ms linear 0ms !important;
    z-index: 10 !important; 
}

/* 4. Force inner elements to be clickable immediately */
.prime-fade-carousel .swiper-slide-active .e-con,
.prime-fade-carousel .swiper-slide-active .e-con-inner,
.prime-fade-carousel .swiper-slide-active a,
.prime-fade-carousel .swiper-slide-active .elementor-button,
.prime-fade-carousel .swiper-slide-duplicate-active .e-con,
.prime-fade-carousel .swiper-slide-duplicate-active .e-con-inner,
.prime-fade-carousel .swiper-slide-duplicate-active a,
.prime-fade-carousel .swiper-slide-duplicate-active .elementor-button {
    pointer-events: auto !important;
}

/* 5. Safeguard Navigation Arrows & Bullets */
.prime-fade-carousel .elementor-swiper-button,
.prime-fade-carousel .swiper-pagination {
    z-index: 20 !important;
    pointer-events: auto !important;
}

/* ========================================= */
/* CAROUSEL BACKGROUND ZOOM (JS REFLOW FIX)  */
/* ========================================= */

.prime-fade-carousel .swiper-slide {
    overflow: hidden !important; 
}

/* 1. Instant Reset State (0ms) - When slide is hiding */
.prime-fade-carousel .swiper-slide > .e-con,
.prime-fade-carousel .swiper-slide > .e-con > .e-con-inner {
    transform: scale(1) !important;
    transition: transform 0ms linear !important; 
}

/* 2. Zoom State (6000ms) - Triggered by JS '.start-zoom' */
/* Also keeps zooming while fading out (.swiper-slide-prev) */
.prime-fade-carousel .swiper-slide.start-zoom > .e-con,
.prime-fade-carousel .swiper-slide.swiper-slide-prev > .e-con,
.prime-fade-carousel .swiper-slide.swiper-slide-duplicate-prev > .e-con {
    transform: scale(1.08) !important;
    transition: transform 6000ms linear !important; 
}

/* 3. Counter-Zoom State (Holds text still) */
.prime-fade-carousel .swiper-slide.start-zoom > .e-con > .e-con-inner,
.prime-fade-carousel .swiper-slide.swiper-slide-prev > .e-con > .e-con-inner,
.prime-fade-carousel .swiper-slide.swiper-slide-duplicate-prev > .e-con > .e-con-inner {
    transform: scale(0.9259) !important;
    transition: transform 6000ms linear !important;
}


/*Service query Form */
.service_query {
	box-shadow: 0px 10px 40px 10px rgba(0, 0, 0, 0.05);
}

/* ======== Service Section ======== */
.service-section-bottom-text h3 {
  color: #ffffff !important;
}

.service-section-bottom-text h3 a {
  	padding-bottom: 10px;
	border-bottom: 2px dotted rgba(255, 68, 5, 1);
  	transition: .5s;
}

.service-section-bottom-text h3 a:hover {
    border-bottom: 2px dotted rgba(255, 68, 5, 0);
}