/*
Theme Name: Design
Theme URI: https://studioafraz.com
Description: Website
Author: Studio Afraz
Author URI: https://studioafraz.com
Template: Total
Version: 1.0
*/

/* START WP-Admin */
#wp-admin-bar-wp-logo, #wp-admin-bar-comments {
	display:none;
}
/* END WP-Admin */

/* START General */

#site-logo{
	background-image: url(img/XXX.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
/* END General */

/* START Header */
#site-navigation a {
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#site-navigation-wrap.has-menu-underline .main-navigation-ul>li>a>.link-inner::after {transform-origin: 0% 0%;opacity: 1;transform: scaleX(0);}
.megamenu .sub-menu {width: auto !important;}
/* END Header */

/* START Forms */
textarea {resize: none;}
/* END Forms */

/* START Buttons */
.theme-button.white:hover {opacity: 1 !important;}
/* END Buttons */

.vcex-heading i {font-family: 'Ink Free';font-style: normal;font-size: 1.3em;margin-right: 0.15em;}

figure.vcex-image:not(.pride-flag) img, .vcex-icon-box.stage, .vcex-pricing, .vcex-icon-box.faq, .wpex-slider-media img{border-radius: 30px;}

.vcex-icon-box.stage {
    background: #243139;
    padding: 2em;
    color: #e9dac5;
}

.vcex-icon-box.stage .vcex-icon-box-heading{color: #e9dac5;}

.wpex-post-cards .service {
	border: 2px solid #f9e9da;
	border-radius: 30px;
	padding: 30px;
}

.vcex-pricing {
	background:#243139;
	border: 2px solid #243139;
	width: 320px;
	max-width: 100%;
}

.vcex-pricing .vcex-pricing-cost {
  order: 3;
  background: #e9dac5;
  width: calc(100% + 50px);
  margin-bottom: -25px;
  margin-left: -25px;
  border-radius: 0 0 28px 28px;
  font-size: 1.5em;
  color: #243139;
  padding: 15px 0;
}

.vcex-pricing .vcex-pricing-content {
  order: 2;
}

.vcex-pricing .vcex-pricing-header, .vcex-pricing .vcex-pricing-content {color: #e9dac5;}
.vcex-pricing .vcex-pricing-header {font-family: 'Ink Free';font-size: 1.3em;}
.vcex-pricing-content ul li {border-top: 1px dashed #e9dac5;padding-top: 15px !important;font-size: 0.85em;}
.vcex-pricing-content ul li:last-child{padding-bottom:15px;}

.vcex-icon-box.faq{
	background: #f9e9da;
    padding: 2em;
    color: #243139;
}


.vcex-icon-box.faq .vcex-icon-box-heading {
	height: 60px;
    display: flex;
    align-items: center;
	color: #243139;
	font-family: 'Ink Free';
    font-size: 1.3em;
}

.vcex-icon-box-text {font-size: 0.85em;}

#phasen .vcex-grid-container, #leistungen .wpex-post-cards {
	max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

#leistungen .wpex-post-cards .targetperson {
	font-size: 0.75em;
	position: absolute;
	z-index: 1;
	border-radius: 30px 0;
	padding: 15px 20px;
	color: #e9dac5;
	font-family: 'Ink Free';
}

#leistungen .wpex-post-cards .targetperson:has(.mother) {
    background: #61021a;
}

#leistungen .wpex-post-cards .targetperson:has(.child) {
    background: #243139;
}


#kontakt .vcex-icon-box .vcex-icon-box-icon{
	border-radius: 100%;
	font-size: 30px;
	padding: 20px;
	background: #243139;
	border: 1px solid #243139;
	color:#e9dac5;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#kontakt .vcex-icon-box:hover .vcex-icon-box-icon{background: transparent;color:#61021a}
#kontakt .vcex-icon-box h2{font-family: 'Ink Free';}
#kontakt .vcex-icon-box-content {color:#243139}

.vcex-icon-box.faq .vcex-icon-box-content {color:#61021a}


#hero {
	max-width: 1280px;
    left: 50%;
    transform: translateX(-50%);
}
#hero .wpb_raw_code > .wpb_wrapper {display: flex;justify-content: center;}
#lottie-hero {max-width: 540px;}

.wpex-carousel__dots-dot {background: #243139 !important}
.wpex-carousel__dots-dot.active {background: #61021a !important}

.textbox-flex {
  display: flex;
  gap: 20px;
  align-items: center;
}

.textbox-image {
  flex: 0 0 auto;
}

.textbox-text {
  flex: 1 1 auto;
}

@media (min-width: 768px) {
	#kosten .packages {
		grid-template-columns: max-content max-content;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	#hero .wpex-flex {align-items: flex-start;}
	#kosten .packages {
		justify-items: center;
	}
	.textbox-flex {
		display: flex;
		gap: 20px;
		flex-direction: column;
		align-items: center;
	}
}