/*!
Theme Name: Kava Child
Theme URI:
Author: Zemez
Author URI:
Description: Kava child theme.
Template: kava
Version: 1.0.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kava-child
*/

/* Min Max Font Sizes */

h2 {
	font-size: clamp(2.3em, 6vw, 4em);
}

/* Menu */

#main-menu {
	position: fixed;
	left: 0;
	right: 0;
	height: 105px;
	will-change: transform;
}
#main-menu  > .elementor-container {
	min-height: 105px;
	transition: min-height ease-in-out .4s;
}
@media only screen and (max-width: 1024px) {
	#main-menu {
		position: absolute;
	}
}

/* Desktop Menu Sticky */
@media only screen and (min-width: 1024px) {
	body.sticky-header-hidden #main-menu {
		animation: menu-sticky-header-hidden .3s ease-in normal;
		animation-fill-mode: forwards;
	}
	
	body.sticky-header-visible #main-menu{
		animation: menu-sticky-header-visible .3s ease-out normal;
		animation-fill-mode: forwards;
	}
	
	body.sticky-header-visible #main-menu > .elementor-container {
		min-height: 70px;
	}
	body.sticky-header-visible #main-menu .logo {
		opacity: 0;
	}
}

@keyframes menu-sticky-header-visible {
	0% {
		transform: translateY(-130%);
		opacity: 0
	}
	100% {
		transform: translateY(0);
		opacity: 1
	}
}

@keyframes menu-sticky-header-hidden {
	0% {
		transform: translateY(0);
		opacity: 1
	}
	100% {
		transform: translateY(-130%);
		opacity: 0
	}
}

/* SVG COlOURING */

.svg-white img, .svg-white svg {
    filter: brightness(0) saturate(100%) invert(98%);
}
.svg-turquoise img, .svg-turquoise svg {
	filter: invert(85%) sepia(82%) saturate(452%) hue-rotate(80deg) brightness(111%) contrast(110%);
}
.svg-blue img, .svg-blue svg {
	filter: invert(27%) sepia(96%) saturate(3250%) hue-rotate(229deg) brightness(94%) contrast(89%);
}
.svg-indigo img, .svg-indigo svg {
	filter: invert(9%) sepia(86%) saturate(6336%) hue-rotate(257deg) brightness(86%) contrast(97%);
}
.svg-purple img, .svg-purple svg {
	filter: invert(62%) sepia(5%) saturate(4527%) hue-rotate(203deg) brightness(93%) contrast(104%);
}
.svg-pink img, .svg-pink svg {
	filter: invert(46%) sepia(37%) saturate(1003%) hue-rotate(287deg) brightness(93%) contrast(84%);
}

/* Home Hero */

body:not(.elementor-editor-active) .hero {
    position: relative;
	height: 100svh;
    clip-path: polygon(0% 45%, 0% 45%, 0% 55%, 0% 55%);
    will-change: clip-path;
}
.progress-bar {
    transform: translateY(-50%);
}
body:not(.elementor-editor-active) .video-container {
    clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
    will-change: clip-path;
}
.video-container {
    transform: translate(-50%, -50%);
}
/*.video-container video {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 110%;
    object-fit: cover;
}*/
body:not(.elementor-editor-active) .hero-heading h1,
body:not(.elementor-editor-active) .hero-heading p,
body:not(.elementor-editor-active) .hero-services p {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
body:not(.elementor-editor-active) .hero-heading h1 span,
body:not(.elementor-editor-active) .hero-heading p span,
body:not(.elementor-editor-active) .hero-services p span {
    position: relative;
    display: block;
    transform: translateY(100%);
    will-change: transform;
}

/* Home 'Connect' Intro */

.intro-text .main span {
    font-family: basic-sans, sans-serif;
    font-style: normal;
    font-weight: 300;
}
.people img, .brand img {
    border-radius: 100% ;
    filter: blur(100px);
	will-change: filter;
}
.brand {
    transform: translateX(-95%);
	will-change: transform;
}
.people {
    transform: translateX(95%);
    mix-blend-mode: multiply;
	will-change: transform;
}
.intro-text.left {
    transform: translateY(-100%);
	will-change: transform;
}
.intro-text.right {
    transform: translateY(100%);
	will-change: transform;
}
.word-container  {
    position: relative;
    height: 64px;
    overflow: hidden;
    visibility: hidden;
}
.rotating-word-brand, .rotating-word-people {
  position: absolute;
  top: 4px;
  left: 0;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  height: 64px;
  opacity: 1;
}
.rotating-word-people {
  text-align: right;
}
@media screen and (max-width: 1024px) {
   .people img, .brand img {
	    border-radius: 100% ;
	    filter: blur(50px);
	}
	.brand {
	    transform: translateX(-70%);
	}
	.people {
	    transform: translateX(70%);
	    mix-blend-mode: multiply;
	}
	.intro-text.left {
	    transform: translateY(0%);
	}
	.intro-text.right {
	    transform: translateY(0%);
	} 
}
@media screen and (max-width: 768px) {
   .people img, .brand img {
	    border-radius: 100% ;
	    filter: blur(50px);
	}
	.brand {
	    transform: translateX(-70%);
	}
	.people {
	    transform: translateX(70%);
	    mix-blend-mode: multiply;
	}
	.intro-text.left {
	    transform: translateY(0%);
	}
	.intro-text.right {
	    transform: translateY(0%);
	} 
}

/* Client Logo Rotator */

body:not(.elementor-editor-active) .client-logo-container {
    max-height: 80px;
}
body:not(.elementor-editor-active) .client-logo-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}

/* How Cards */

body:not(.elementor-editor-active) .service-cards-container .service-card {
    flex: 1;
    position: relative;
    aspect-ratio: 5/7;
	max-height: 70vh;
    perspective: 1000px;
}

body:not(.elementor-editor-active) .service-cards-container .service-card .service-card-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    animation: floating 2s infinite ease-in-out;
}

@keyframes floating {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -50.2%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

#service-card-1 .service-card-wrapper {
    animation-delay: 0;
}
#service-card-2 .service-card-wrapper {
    animation-delay: 0.25s;
}

.service-card-title .elementor-heading-title {
    display: flex;
    justify-content: space-between;
}

.service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

body:not(.elementor-editor-active) .service-card-front, body:not(.elementor-editor-active) .service-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    
}
body:not(.elementor-editor-active) .service-card-back {
  transform: rotateY(180deg);
}

.service-card-copy {
    height: 100%;
    min-height: 100%;
}

/*body:not(.elementor-editor-active) #service-card-1 {
    transform: translateX(50%) translateY(0%) rotate(-5deg);
	will-change: transform;
}
body:not(.elementor-editor-active) #service-card-2 {
    transform: translateX(-40%) translateY(0%) rotate(3deg);
	will-change: transform;
}*/

body:not(.elementor-editor-active) #service-card-1 {
    transform: translateX(10%) translateY(0%) rotate(-5deg);
	will-change: transform;
}
body:not(.elementor-editor-active) #service-card-2 {
    transform: translateX(-0%) translateY(0%) rotate(3deg);
	will-change: transform;
}

@media screen and (max-width: 767px) {
	body:not(.elementor-editor-active) .service-cards-container .service-card {
	    position: absolute;
	}
	body:not(.elementor-editor-active) #service-card-1 {
	    transform: translateX(0%) translateY(0%) rotate(-5deg);
	}
	body:not(.elementor-editor-active) #service-card-2 {
	    transform: translateX(2%) translateY(0%) rotate(3deg);
	}
}

/* Hero Glow */

/*#circle{
  width: 80px;
  height: 80px;
  border: 1px solid #3c2946;
  position:fixed;
  border-radius:50%;
}
.hero-glow {
   transform: translate(-50%, -50%);
}
.hero-glow {
    z-index: -1;
    background-image: url(https://wearewhy.staging.tempurl.host/wp-content/uploads/2025/09/6824ade8d12d0b0ba2ecdae9_pl-gradient.svg);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 200%;
    position: absolute;
    top: -200px;
    right: -200px;
}*/

/* Image Trail Container */

.trail-heading {
    user-select: none;
}
.trail-img {
    position: absolute;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 4px !important;
    transform-origin: center;
    pointer-events: none;
    will-change: transform;
}
.trail-img1 {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
   
}
.trail-container {
    position: relative;
}

/* Work */

.service-pills .jet-listing-dynamic-repeater__items  {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}
.key-markets .jet-listing-dynamic-repeater__items  {
    display: flex;
    flex-wrap: wrap;
}

/* Sticky Cards */

.service-wrapper .service-image {
    opacity: 1;
    width: 0;
    transition: all 0.3s ease-in-out;
}
.service-wrapper:hover .service-image {
    width: 33%;
}
.sticky-cards {
    position: relative;
}
.card {
    position: sticky;
    top: 0;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card-inner {
    position: relative;
    /*height: 100%;
    transform-origin: 50% 100%;
    will-change: transform;*/
}
/*.card-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: var(--after-opacity, 0);
    will-change: opacity;
    pointer-events: none;
    z-index: 2;
}*/

/* Testimonial Slider */

.testimonial-slider .jet-listing-grid__item {
    transition: opacity 0.3s ease-in-out;
}
.testimonial-slider .jet-listing-grid__item.slick-current {
    opacity: 1
}
#t__prev, #t__next {
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
}


/* Custom Cursor for Portfolio Projects */

@media screen and (min-width: 1025px) {
	.js-custom-cursor .oww {
	    display: none;
	}
	.custom-cursor.cursor-size--large {
	    width: 160px;
	    height: 160px;
	    text-align: center;
	    padding: 10px;
	    margin: auto;
	}
	.custom-cursor .custom-cursor__content img {
	    width: 100%;
	    height: auto;
	}
	.custom-cursor .custom-cursor__content i {
	    font-size: 24px;
	    color: #fff;
	    position: absolute;
	    top: 20px;
	    left: 50%;
	    transform: translateX(-50%);
	}
	.custom-cursor.is-visible .custom-cursor__background {
	    transform: translate(-50%, -50%) scale(1);
	} 
	.custom-cursor.is-visible {
	    opacity: 1;
	}
	.custom-cursor {
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    user-select: none;
	    transition-property: opacity;
	    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	    transition-duration: 250ms;
	    z-index: 999;
	    will-change: transform;
	    transform-origin: 50% 50%;
	    backface-visibility: hidden;
	    color: rgb(0, 0, 0);
	    width: 90px;
	    height: 90px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    text-align: center;
	    opacity: 0;
	    pointer-events: none;
	    overflow: hidden;
	    border-radius: 50%;
	    background-color: #000;
	    color: #fff;
	}
}

/* Footer */

.gradient h2 {
  background: linear-gradient(to right, #FFD2B1, #D99FFF, #6FFFEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-link span {
    font-size: 40px;
    color: #fff;
}
@media (min-width: 768px) {
    .footer-link span {
    font-size: 32px;
    color: #fff;
}
}