/* Add here all your CSS customizations */
body { 
   
  font-optical-sizing: auto;
  font-style: normal;
 /* font-variation-settings:  "wdth" 100;
        font-size: 16px !important;	*/
        color:#7A7A7A !important;
		font-size: 1.09rem !important;
        font-weight: 400;
	
}
html, body {
  touch-action: manipulation;
}

/* COLOR DEFINITIO */
:root {
 --zp-green : #19a138;
--zp-grey :#eef1f3;
--zp-koyulacivert:#0b3e5c;
--zp-grey-hell:#f8f9fa;
--zp-footer-black: #01122e /* #062133;   /* alte #0d2d3d */;
--zp-footer-grey:#b0c4d4;
--zp-footer-grey-hell:#95b0c6;
--zp-footer-grey-hell-text:#748f9d;
--zp-title-color-koyumavi: #1a4d6d;
 
}
 
.text-color-koyumavi {
    color:var(--zp-title-color-koyumavi);
}
.text-4 {
 font-size: 1rem !important;
 
}
.text-standart {
     font-size: 1.10rem !important;
}

.text-sub-title {
    font-size: 1.20rem !important;
}

 

/*

- Ana Koyu Mavi: #0a3d5c (Premium, güvenilir)
- Vurgu Mavisi: #1e5a7a (Elegant)
- Yeşil CTA: #28a745 (Profesyonel)
- Footer Koyu: #041f2e (Derin, lüks)
- Açık Gri: #f5f7fa (Temiz, modern)

*/
 
  
 
 


.page-header {

 		color: white;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		text-align: center;

 		/* Arka plan resmi + gradient birlikte */
  
 		background-size: cover;
 		background-position: center;
 	}
.error-404 {
  position: relative;
  background-image: url('/images/error/404_error.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  height: 100%;
}

.error-404::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(63, 66, 135, 0.594); /* Siyah yarı saydam overlay */
  z-index: 2;
}

/* İçeriklerin üstte görünmesi için */
.error-404 > * {
  position: relative;
  z-index: 3;
}
.footer {
   /* background-image: url('/images/home/background-6.jpg') !important;*/
    background-size: cover !important;
    background-position: center 100% !important;
    background-repeat: no-repeat !important;
} 
#footer .footer-copyright {
    background: var(--zp-footer-black);
    margin-top: 3em !important;
    padding: 10px 0px 0px 0px !important;
}

#footer{
	background: var(--zp-footer-black);
}
#footer .logo img {
     
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

.recent-posts > ul > li + li {
    margin-top: 5px !important;
}

.overlay:before {
    background: #2388ed42 !important;
}

.form-control:not(.form-control-sm):not(.form-control-lg){
	    line-height: 2.0 !important;
		font-size: 14px !important;
}

.box-hover:hover {
	 background-color: #f1f3f7 !important; /* hover olduğunda değişecek renk */
}

.img-lesitung-height {
	    height: 131px !important;
}




 
/* Slider arka plan overlay */
.slider-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45); /* Siyah yarı saydam katman */
    z-index: 1; /* Görünür olması için üstte */
    pointer-events: none; /* Slider'ın tıklanabilirliğini etkilemez */
}

/* Yazılar overlay'in üstünde kalsın */
.slider-container.rev_slider_wrapper .tp-caption {
    position: relative;
    z-index: 2;
}

.text-zs-green {
  color:#33c178 !important;
}
.text-zs-gray{
  color:#373643 !important;
}

.background-color-zs-green {
  background-color:#33c178 !important;
}


.background-color-zs-gray {
  background-color:#373643 !important;
}
 
 

/*
* General Custom Styles
*/
.custom-font-1 {
	font-family: 'Playfair Display', serif !important;
}

.custom-top-image-border-1 {
	position: relative;
}
.custom-top-image-border-1:before {
	content: '';
	display: block;
	position: absolute;
	top: -1.8vw;
	left: 0;
	width: 100%;
	height: 8vw;
	background: url('../../img/demos/restaurant/styled-border-2.png');
	background-size: 100%;
	background-repeat: no-repeat;
}

.custom-top-image-border-2 {
	position: relative;
}
.custom-top-image-border-2:before {
	content: '';
	display: block;
	position: absolute;
	top: -3.2vw;
	left: 0;
	width: 100%;
	height: 8vw;
	background: url('../../img/demos/restaurant/styled-border-1.png');
	background-size: 100%;
	background-repeat: no-repeat;
}

/*
* Header
*/
@media (min-width: 992px) {
	html:not(.sticky-header-active) #header.header-transparent .header-nav-main nav > ul > li > a {
		color: #FFF !important;
	}
	html:not(.sticky-header-active) #header .header-nav.header-nav-line-under-text.custom-header-nav-line-under-text-style .header-nav-main nav > ul > li.active > a, html:not(.sticky-header-active) #header .header-nav.header-nav-line-under-text.custom-header-nav-line-under-text-style .header-nav-main nav > ul > li:hover > a, html:not(.sticky-header-active) #header .header-nav.header-nav-line-under-text.custom-header-nav-line-under-text-style .header-nav-main nav > ul > li:focus > a {
		color: #FFF;
	}

	#header .header-nav.header-nav-line-under-text.custom-header-nav-line-under-text-style .header-nav-main nav > ul > li > a:before {
		border-width: 5px;
		top: 64%;
	}

	 .min-image-height-130 {
	    max-height: 140px;
        min-height: 147px;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#header .header-nav-main.header-nav-main-uppercase nav > ul > li > a {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}
/*
* Food Menu
*/
.food-menu .menu-item {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
}


html .overlay-color-quaternary:not(.no-skin):before {
    background-color: #24292c !important;
}

@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li > a, #header .header-nav.header-nav-line-under-text .header-nav-main nav > ul > li > a.active{
        color: #2c2c2c !important;
    }
}

.overlay.overlay-show:before  {
    opacity: 0.9;
}

.margin-top--15 {
	margin-top:-15px;
}


.opacity-background-09:before  {
    opacity: 0.9;
}

.opacity-background-08:before  {
    opacity: 0.8;
}

.opacity-background-07:before  {
    opacity: 0.7;
}

.opacity-background-06:before  {
    opacity: 0.6;
}

.opacity-background-05:before  {
    opacity: 0.5;
}

.opacity-background-04:before  {
    opacity: 0.4;
}

.opacity-background-03:before  {
    opacity: 0.3;
}

 @media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1300px !important;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1080px;
    }
}
 

.rev_slider li.slide-overlay .slotholder:after {
	background: #000000 !important
 
}

.rev_slider li.slide-overlay.slide-overlay-level-9 .slotholder:after {
    opacity: 0.68 !important;
}
html #header.header-transparent .header-body:before {
	background:  #01122ee0 !important;
} 

@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li > a {
        color: #ffffff !important;
    }
}

html .btn-primary, html.sticky-header-active .btn-sticky-primary {
    border-color: var(--zp-green);
    color: #FFF;
    background-color: var(--zp-green);
}

.text-zs-green {
    color: var(--zp-green) !important;
}

.recent-posts > ul > li > a {
    color: var(--zp-footer-grey) !important;
}
.footer-section a:hover{
	color: var(--zp-green);
}

.recent-posts > ul > li:before {
    color:var(--zp-green) !important
}

html .overlay-color-primary:not(.no-skin):before {
    background-color: var(--zp-green) !important;
}
html .overlay-color-footer:not(.no-skin):before {
    background-color: #01122ee0 !important;
}
 
.text-color-black {
	color: var(--zp-footer-black);
}
 

#footer p, #footer li {
    color:var(--zp-footer-grey-hell-text) ;
}

.footer a {
    
    color: var(--zp-footer-grey) !important;
}

#footer .footer-copyright.footer-copyright-container-border-top:before {
    max-width: 1400px !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--zp-title-color-koyumavi);
}

p {
   
     font-weight: 400;
}

.icon-box.icon-box-style-10 {
    border-top-color: var(--zp-green);
}

@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-sub-title {
        color:var(--zp-green);
    }
}

@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li.dropdown-mega > .dropdown-menu {
        background: var(--zp-footer-black);

    }
}

p{   
    line-height: 1.6 !important;
}

.bg-hover-green:hover{
    background-color: #e0e2e6;

}
 

 .standorte-preview span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 15px;
        }

         .standorte-preview span:after {
            content: " •";
            margin-left: 5px;
            color: #4CAF50;
        }

        .standorte-preview span:last-child:after {
            content: "";
        }

         .standorte-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 15px;
        }


.card-design {
    animation-delay: 400ms;
    background: #fff;
    margin: 0 auto;
 
    z-index: 2;
    padding: 25px;
    box-shadow: 0 3px 1rem rgba(0, 0, 0, 0.15);
    border-radius: 7px;
}

.checkbox-custom.checkbox-custom-transparent input[type="checkbox"]:checked + label:after {
    color: #0d2d3d !important;
}

.box-shadow {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
}

html .bg-secondary:not(.no-skin) {
 background-color: var(--zp-green) !important;
}

.cta {
    padding: 80px 0;
    background: linear-gradient(#08213396, var(--zp-footer-black)), url('/images/home/tragwerksplaner_frankfurt_am_main.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
}

html .text-color-primary:not(.no-skin), html .text-primary:not(.no-skin) {
    color: var(--zp-green) !important;
}

 .text-muted {
    color: #6c757d !important;
}

html .bg-primary:not(.no-skin) {
    background-color: var(--zp-green) !important;
}

 html.sticky-header-active #header .header-btn-collapse-nav.on-sticky-dark .hamburguer span, html.sticky-header-active #header .header-btn-collapse-nav.on-sticky-dark .close span {
    background: var(--zp-green) !important;
}

#header .header-btn-collapse-nav .hamburguer span{
  
    height: 3px;
}

 

.accordion .accordion-header a {
    color: #ffffff;
    font-weight: 400;
}


@media (max-width: 991px) {
    #header .header-nav-main nav > ul li.dropdown-mega .dropdown-mega-sub-title {
        margin-top: 10px;
        display: block;
        color: var(--zp-green) !important;
    }
}

@media (max-width: 991px) {
    #header .header-nav-main nav > ul li a:not(.btn) {
        position: relative;
        display: block;
        color: #fff !important;
  }
}


@media (max-width: 991px) {
    #header .header-nav-main:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 107vw !important;
        height: 100%;
        z-index: -1;
        transform: translateX(-53%);
        box-shadow: 1px 10px 11px -1px rgba(89, 89, 89, 0.75) !important;
        -webkit-box-shadow: 1px 10px 11px -1px rgba(89, 89, 89, 0.75);
        -moz-box-shadow: 1px 10px 11px -1px rgba(89,89,89,0.75);
        background: var(--zp-footer-black) !important;
    }
}

@media (max-width: 991px) {
    #header .header-nav-main nav > ul li a:not(.btn) {
    
        padding: 15px 0 !important;
 
    }
}

 


/* Mobile özel düzenleme */
@media (max-width: 767px) {
    .tp-caption h1,
    .tp-caption.text-uppercase {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 110vw !important;
        padding: 0 10px !important;
    }
    
    .tp-caption h2,
    .tp-caption div {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 110vw !important;
        padding: 0 10px !important;
    }


/* Revolution Slider - Mobile Text Wrapping Fix */
.tp-caption h1,
.tp-caption.text-uppercase,
.tp-caption h2,
.tp-caption div {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 110vw !important;
}
}

 

.bauweise-item , .card{
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
   padding: 15px;

    transition: all 0.3s  ease;
}

h1, h2, h3, h4, h5, h6 {
   
    font-weight: 600 !important;
}
.border-success {
    border-color: var(--zp-green) !important;
}

.bg-green-1 {
background-color: #19a1380d !important;
}
.image-frame.image-frame-style-2 {
    border-radius: 5px !important;
        border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.image-frame.image-frame-style-2:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(358deg, #000 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 5px;
    right: 0;
    bottom: 0;
    z-index:3;
}



.bg-light-10 {
    background-color: #02132e14 !important;
}
	.feature-item {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.15);
		padding: 20px;
		border-radius: 12px;
		backdrop-filter: blur(10px);
        background: #f1f3f7;
	}


.img-float {
		position: absolute;
		bottom: -130px;
        right: -90px;
		width: 64%;
		border-radius: 5px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
		border: 4px solid white;
	}

.img-main {
		width: 100%;
		border-radius: 5px;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
		height: 358px;
		border: 4px solid white;
	}



	.hero-features {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
		margin-bottom: 40px;
	}



	.feature-icon {
		width: 50px;
		height: 50px;
		background: white;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #28a745;
		margin-right: 15px;
		flex-shrink: 0;
	}

	.feature-text {
		display: flex;
		flex-direction: column;
	}

	.feature-text strong {

		font-size: 16px;
		display: block;
		margin-bottom: 4px;
	}

	.hero-images {
		position: relative;
		z-index: 2;
	}

	.image-stack {
		position: relative;
	}

	.stats-badge {
		position: absolute;
		top: 20px;
		left: -30px;
		background: white;
		padding: 25px 30px;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		text-align: center;
	}





	@media (max-width: 991px) {
		.hero-title {
			font-size: 36px;
		}

		.img-float {
			width: 50%;
			bottom: -20px;
			right: -20px;
		}

		.stats-badge {
			left: 10px;
			padding: 20px;
		}
	}


.bg-dark-5 {
    background-color: var(--zp-footer-black) !important; 
    /* background-color: #2E3237 !important; */
}