/*
Theme Name: Inno Haftungsdach
Theme URI: https://mathesconsulting.de
Template: hello-elementor
Author: Mathes Consulting Team
Author URI: https://mathesconsulting.de
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 1.1.1.1754682822
Updated: 2025-08-08 19:53:42

*/

.right-red-btn a, .left-red-btn a {
	position: relative;
}
.right-red-btn a::after {
	content: '';
	position: absolute;
	width: 124px;
	height: 98px;
	top: -19px;
	right: -14px;
	z-index: -1;
	background-image: url(/wp-content/uploads/2025/08/red-btn-bg.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.left-red-btn a::after {
	content: '';
	position: absolute;
	width: 124px;
	height: 98px;
	top: -14px;
	left: -14px;
	z-index: -1;
	background-image: url(/wp-content/uploads/2025/08/red-btn-bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(-1, -1);
}
.right-gray-btn a::after {
	content: '';
	position: absolute;
	width: 124px;
	height: 98px;
	top: -19px;
	right: -14px;
	z-index: -1;
	background-image: url(/wp-content/uploads/2025/08/gray-btn-bg.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.left-gray-btn a::after {
	content: '';
	position: absolute;
	width: 124px;
	height: 98px;
	top: -14px;
	left: -14px;
	z-index: -1;
	background-image: url(/wp-content/uploads/2025/08/gray-btn-bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(-1, -1);
}

.rect-box.elementor-element {
	opacity: 1;
	transition: all .15s linear !important;
	border: 1px solid #44546C;
}
.rect-box.elementor-element:hover {
	background-image: unset !important;
	border-color: #fff;
	background-color: #5f6d81 !important;
	transition: all .3s linear !important;
}
/* .rect-box.elementor-element::before {
content: '';
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .1);
opacity: 0;
transition: all .15s linear !important;
}
.rect-box.elementor-element:hover::before {
opacity: 1;
} */


.features-sec {
	/* 	background-image: url(/wp-content/themes/inno-haftungsdach/assets/features-img3.png) !important; */
}


.rect-box1.elementor-element {
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
	background-color: #fff;
	border: 1px solid #fff;
	transition: all .15s linear;
}
.rect-box1.elementor-element:hover {
	clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
} 
.rect-box1.elementor-element::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
	background-color: #5f6d81;
	transition: all .15s linear;
}
.rect-box1.elementor-element:hover::before {
	clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
}

header#top {
	background-color: transparent;
	transition: all .1s linear;
	box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0);
}
header#top.elementor-sticky--effects {
	background-color: #fff;
	box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.15);
}




.scale-down-right, .scale-down-br, .scale-down-center {
	opacity: 0; 
}
.scale-down-right.animate {
	-webkit-animation: scale-down-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: scale-down-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	opacity: 1;
}
.scale-down-br.animate {
	-webkit-animation: scale-down-br 0.55s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: scale-down-br 0.55s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	opacity: 1;
}
.scale-down-center.animate {
	-webkit-animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	opacity: 1;
}


@-webkit-keyframes scale-down-right {
	0% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
}
@keyframes scale-down-right {
	0% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
}

@-webkit-keyframes scale-down-br {
	0% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
		-webkit-transform-origin: 100% 90%;
		transform-origin: 100% 90%;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 90%;
		transform-origin: 100% 90%;
	}
}
@keyframes scale-down-br {
	0% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
		-webkit-transform-origin: 100% 90%;
		transform-origin: 100% 90%;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 90%;
		transform-origin: 100% 90%;
	}
}


@-webkit-keyframes scale-down-center {
	0% {
		-webkit-transform: scale(1.25);
		transform: scale(1.25);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes scale-down-center {
	0% {
		-webkit-transform: scale(1.25);
		transform: scale(1.25);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}


@media screen and (max-width: 767px){
	.right-red-btn a::after, .right-gray-btn a::after {
		width: 115px;
		height: 90px;
		top: -18px;
		right: -13px;
	}
	.left-red-btn a::after, .left-gray-btn a::after {
		width: 115px;
		height: 90px;
		top: -14px;
		left: -14px;
	}
}

.social-btns {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	row-gap: 15px;
}

.li-button {
	position: relative;
	background: rgba(255, 255, 255, 0);
	backdrop-filter: blur(10px);
	border: 1px solid #fff;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: flex-start;
	padding: 0px 10px;
}
.li-button:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.li-button svg {
	width: 26px;
	height: 26px;
	fill: white;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.phone-button {
	position: relative;
	background: rgba(255, 255, 255, 0);
	backdrop-filter: blur(10px);
	border: 1px solid #fff;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: flex-start;
	padding: 0px 10px;
}
.phone-button:hover {
	width: 250px;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.phone-icon {
	width: 26px;
	height: 26px;
	fill: white;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}
.phone-number {
	color: white;
	font-size: 16px;
	font-weight: 500;
	margin-left: 15px;
	opacity: 0;
	transform: translateX(20px);
/* 	transform: translateX(60px); */
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: 0.1s;
	white-space: nowrap;
	letter-spacing: 0.5px;
}
.phone-button:hover .phone-number {
	opacity: 1;
	transform: translateX(0);
}
.phone-button:hover .phone-icon {
	transform: scale(1.1);
}
.phone-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: inherit;
}
.phone-button:hover::before {
	opacity: 1;
}

/* Ripple effect on click */
.phone-button:active {
	transform: scale(0.98);
}

/* Additional glow effect */
.phone-button:hover {
	box-shadow: 
		0 10px 30px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}