/**
Theme Name: Phorbis Child-Theme
Author: jut-so GmbH
Author URI: https://jut-so.de
Description: Phorbis Custom Child Theme basierend auf dem Hello Elementor Theme. 
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jut-so-child-theme
Template: hello-elementor
*/

/* variable.css and layout.css included via functions.php */

/* Default headline margins
 * Note: Pay attention to widget spacing. 
 * When using heading widget, margin-bottom is set to 0
 * then the spacing is controlled by the widget spacing
  .elementor-widget.elementor-widget.elementor-widget-heading .elementor-widget-container 
 */

body {
	-webkit-font-smoothing: antialiased;
	/* requested by design for retina displays */
	font-synthesis:none;
}
/* iOs horizontal scroll fix */
html,body {
	overflow-x:hidden;
	scroll-behavior: smooth;
}
:target {
  scroll-margin-top: 77px; /* same as header height */
}
body #content .mini-heading em {
    font-family: var(--body-font-family), Sans-serif;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    text-decoration: var(--body-text-decoration);
	vertical-align: middle;
	display: inline;
	font-style: normal;
	line-height:100%;
}
body #content .mini-heading em::after {
	content: "───";
	display: inline;
	margin-left: 15px;
	line-height:100%;
}

.anim-border a,
.anim-border1 a {
    position: relative;
}
.anim-border a:after,
.anim-border1 .elementor-post__read-more:after{
    content: '';
    position: absolute;
    height: 2px;
    width: 0;
    left: 0;
    bottom: -2px;
    background: var(--272727) !important;
    transition: all 0.3s ease;
}
.anim-border a:hover:after,
.anim-border1 .elementor-post__read-more:hover:after{
    width: 100%;
}

body .elementor-widget-posts .jutso-hover-fields {
	display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(170deg, var(--gradienttop) -4%, var(--gradientbottom) 103%);
    text-align: left;
    color: black;
    padding: 35px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.jutso-hover-thumbnail:hover .jutso-hover-fields {
    display: flex;
}
.elementor-grid-4 .jutso-hover-thumbnail .jutso-hover-fields{
	padding: 20px;
}
body .elementor-widget-posts .jutso-hover-title {
    font-size: var(--team-title-font-size);
    font-weight: var(--team-title-font-weight);
    line-height: var(--team-title-line-height);
    letter-spacing: var(--team-title-letter-spacing);
}
body .elementor-widget-posts .jutso-hover-content p {
    font-size: var(--team-content-font-size);
    font-weight: var(--team-content-font-weight);
    line-height: var(--team-content-line-height);
}
body .elementor-widget-posts  .jutso-hover-content {
	width: 100%;
}

/* ==========================================================================
   Gradient Movement Effect for Elementor Buttons
   ========================================================================== */

/* Parent container */
.ripple-button {
    position: relative;
    display: inline-block;
}

/* The actual button */
.ripple-button .elementor-button {
    position: relative;
    overflow: hidden !important;
    /* Remove the hover transform that moves button up */
    transition: transform 0.15s ease-out;
}

/* Remove the hover translateY effect */
.ripple-button .elementor-button:hover {
    transform: none;
}

/* Ripple elements for gradient movement */
.ripple-button .elementor-button .ripple {
    position: absolute;
    border-radius: 50%;
    width: 0;
    height: 0;
    opacity: 0.8;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: ripple-expand 0.5s ease-out forwards;
    z-index: 1;
    
    /* Gradient that moves from entry point */
    background: radial-gradient(circle, rgba(216, 254, 239, 0.5) 0%, rgba(151, 207, 255, 0.5) 100%);
}

/* Second ripple for layered effect */
.ripple-button .elementor-button .ripple.second {
    animation-delay: 0.3s;
}

/* Ripple expansion animation */
@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

/* Click feedback - make button bigger */
.ripple-button .elementor-button.click-scale {
    transform: scale(1.05);
    transition: transform 0.15s ease-out;
}

/* Focus state */
.ripple-button .elementor-button:focus {
    outline: 2px solid var(--007cba);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .ripple-button .elementor-button .ripple {
        animation-duration: 0.4s;
    }
    
    @keyframes ripple-expand {
        0% {
            width: 0;
            height: 0;
            opacity: 0.8;
        }
        100% {
            width: 300px;
            height: 300px;
            opacity: 0;
        }
    }
	
	/* Teams widget hight issue */

	.teams > .e-con-inner {
		display: block;
	}
	.teams > .e-con-inner > .elementor-element:not(:last-child) {
		margin-bottom: 40px;
	}
	
	body .elementor-posts .elementor-post {
		/*flex-direction: column-reverse;*/
	}

}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ripple-button .elementor-button .ripple {
        animation: none;
    }
    
    .ripple-button .elementor-button.click-scale {
        transform: none;
        transition: none;
    }
}

/* Owl Dots*/

@media (max-width: 1024px) {
  .ownl-custom-carousel {
    display: none;
  }
}
.owl-dots {
  display: flex !important;
  justify-content: center;
  margin-top: 15px;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
}

.owl-dot {
  display: inline-block;
  margin: 0 5px;
}

.owl-dot span {
  width: 12px;
  height: 12px;
  background: var(--d9d9d9);
  display: block;
  border-radius: 50%;
}

.owl-dot.active span {
  background: var(--42e1de);
}

.optional-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.optional-links .linkedin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

p a {
	color:#333333 !important;
	text-decoration:underline !important;
	transition: 0.3s;
}
p a:hover {
	color:#29D4CB !important;
}