/* Make sure the container does not get overflow issues */
.zoom-carousel .swiper-slide {
  overflow: hidden;
}

/* Smooth transition */
.zoom-carousel .swiper-slide img {
  transition: transform 0.3s ease-in-out;
}
.mobile-shop-info {
		display:none;
	}

/* Zoom on hover */
.zoom-carousel .swiper-slide img:hover {
  transform: scale(1.4);
}


a.diamond-link {
	text-decoration:none!important;
	color:#d0aa39!important;
}

a.eheringe-link {
	text-decoration:none!important;
	color:#d0aa39!important;
}

a.verlobungsringe-link {
	
	text-decoration:none!important;
	color:#d0aa39!important;
}


a.vorsteckringe-link {
	text-decoration:none!important;
	color:#d0aa39!important;
}

button.forminator-button.forminator-button-submit {
	color: black;
	border-radius: 20px!important;
}

button.forminator-button.forminator-button-submit:hover {
	background-color:black!important;
	color:white!important;
}

.prize-icon .elementor-widget-container .elementor-icon-box-wrapper .elementor-icon-box-icon svg path {

	stroke:rgb(222, 185, 169)!important;
}

.prize-icon svg path:last-of-type {
	stroke:rgb(222, 185, 169)!important;
}

.icon-tcwi-gears circle {
stroke:rgb(222, 185, 169)!important;}

h1 {
	font-size:40px;
}

h2 {
	font-size:30px;
}

h3{
	font-size:20px
}

@media screen and (max-width: 767px) {
	h1 {
	font-size:20px;
}

h2 {
	font-size:18px;
}

h3{
	font-size:15px
}
	.uber-container > .elementor-element.elementor-element-bf02a58.elementor-widget.elementor-widget-image  {
		max-height:100%;
	}
	
	.elementor-element.elementor-element-c51894a.e-con-full.uber-container.e-flex.e-con.e-child {
		max-height:410px;
	}
	
}

@media screen and (max-width: 1024px) {
.shop-info {
		display:none;
	}
	
	.mobile-shop-info {
		display:block;
	}
}
.header-container {
    /* position: -webkit-sticky; Remove this */
    /* top: 0; Remove this */
    z-index: 100; /* Ensure it stays on top */
    background-color: #fff; /* Adjust as needed */
    transition: transform 0.3s ease, padding 0.3s ease; /* Add transitions */
    transform: translateY(0);
    padding-top: 0px;
}

.header-container.fixed-top {
    position: fixed; /* Change to fixed positioning */
    width: 100%; /* Ensure full width */
    left: 0; /* Align to the left */
    top: 0;
    padding-top: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
    transform: translateY(0);
}

.header-container.hidden {
     transform: translateY(-100%);
 }

@keyframes slideFromRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply the animation to your container */
.animated-background-container {
    animation: slideFromRight 0.3s ease-out forwards;
    /* This will prevent the element from being visible before animation starts */
    opacity: 0;
    /* Makes the animation smoother */
    will-change: transform;
}

/* Optional: Only play animation when element comes into view */
.animated-background-container.e-lazyloaded {
    opacity: 0;
    animation: slideFromRight 0.3s ease-out forwards;
}

/* Animation for elements coming from bottom */
@keyframes slideFromBottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Base styles for all animated elements */
.home-first-h,
.home-second-h,
.home-first-b,
.home-second-b {
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    will-change: transform;
}

/* First heading appears first */
.home-first-h {
    animation-name: slideFromBottom;
    animation-delay: 0.3s;
}

/* Second heading appears after first */
.home-second-h {
    animation-name: slideFromBottom;
    animation-delay: 0.6s;
}

/* First button appears after second heading */
.home-first-b {
    animation-name: slideFromBottom;
    animation-delay: 0.9s;
}

/* Second button appears last */
.home-second-b {
    animation-name: slideFromBottom;
    animation-delay: 1.2s;
}

/* Optional: Add this if you want animations to play when elements come into view */
.elementor-widget.elementor-invisible {
    animation: none !important;
}