/*
Theme Name: KM
Description: Custom child theme for Hello Elementor
Author: Sogand
Version: 1.0.0
Text Domain: km
Template: hello-elementor
*/

.service-ticker {
    width: 60%;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Ticker */
.ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 12px;

    animation: ticker-scroll 24s linear infinite;
    animation-play-state: running;

    will-change: transform;
}

/* IMPORTANT: actual movement */
@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 6px));
    }
}

@media (max-width: 767px) {
    .service-ticker {
        width: 80%;
    }
}

/* Pills */

.ticker-pill {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;

    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    white-space: nowrap;

    font-size: 15px;
    font-weight: 500;
    line-height: 1;

    box-sizing: border-box;
}


/* LEFT FADE */
.service-ticker::before {
    content: "";
    position: absolute;
    z-index: 10;

    top: -20px;
    bottom: -20px;
    left: -20px;
    width: 110px;

    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(13, 13, 13, 1) 0%,
        rgba(13, 13, 13, 0.92) 20%,
        rgba(13, 13, 13, 0.60) 50%,
        rgba(13, 13, 13, 0.20) 75%,
        rgba(13, 13, 13, 0) 100%
    );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    mask-image: linear-gradient(
        to right,
        black 0%,
        black 30%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to right,
        black 0%,
        black 30%,
        transparent 100%
    );
}


/* RIGHT FADE */
.service-ticker::after {
    content: "";
    position: absolute;
    z-index: 10;

    top: -20px;
    bottom: -20px;
    right: -20px;
    width: 110px;

    pointer-events: none;

    background: linear-gradient(
        to left,
        rgba(13, 13, 13, 1) 0%,
        rgba(13, 13, 13, 0.92) 20%,
        rgba(13, 13, 13, 0.60) 50%,
        rgba(13, 13, 13, 0.20) 75%,
        rgba(13, 13, 13, 0) 100%
    );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    mask-image: linear-gradient(
        to left,
        black 0%,
        black 30%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to left,
        black 0%,
        black 30%,
        transparent 100%
    );
}


/* Never pause */
.service-ticker:hover .ticker-track,
.service-ticker:focus .ticker-track,
.service-ticker:active .ticker-track {
    animation-play-state: running !important;
}

/* HERO Buttons */

/* =========================================
   BUTTON
   ========================================= */

.refined-dark-button .elementor-button {
    background-color: rgba(255, 255, 255, 0.08) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    border-radius: 24px;
    corner-shape: superellipse(1.4);

    box-shadow: none;

    color: #fff;

    padding: 16px 28px;

    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   FIRST TEXT
   ========================================= */

.refined-dark-button .span-mother {
    display: flex;
    overflow: hidden;
}

.refined-dark-button .span-mother span {
    display: block;
}


/* Move original text DOWN */
.refined-dark-button:hover .span-mother {
    position: absolute;
}

.refined-dark-button:hover .span-mother span {
    transform: translateY(1.2em);
}


/* Stagger */
.refined-dark-button .span-mother span:nth-child(1) {
    transition: 0.2s;
}

.refined-dark-button .span-mother span:nth-child(2) {
    transition: 0.3s;
}

.refined-dark-button .span-mother span:nth-child(3) {
    transition: 0.4s;
}

.refined-dark-button .span-mother span:nth-child(4) {
    transition: 0.45s;
}

.refined-dark-button .span-mother span:nth-child(5) {
    transition: 0.5s;
}

.refined-dark-button .span-mother span:nth-child(6) {
    transition: 0.55s;
}

.refined-dark-button .span-mother span:nth-child(7) {
    transition: 0.6s;
}

.refined-dark-button .span-mother span:nth-child(8) {
    transition: 0.65s;
}


/* =========================================
   SECOND TEXT
   ========================================= */

.refined-dark-button .span-mother2 {
    display: flex;

    position: absolute;

    overflow: hidden;
}

.refined-dark-button .span-mother2 span {
    display: block;

    transform: translateY(-1.2em);
}


/* Bring second text UP */
.refined-dark-button:hover .span-mother2 span {
    transform: translateY(0);
}


/* Stagger */
.refined-dark-button .span-mother2 span:nth-child(1) {
    transition: 0.2s;
}

.refined-dark-button .span-mother2 span:nth-child(2) {
    transition: 0.3s;
}

.refined-dark-button .span-mother2 span:nth-child(3) {
    transition: 0.4s;
}

.refined-dark-button .span-mother2 span:nth-child(4) {
    transition: 0.45s;
}

.refined-dark-button .span-mother2 span:nth-child(5) {
    transition: 0.5s;
}

.refined-dark-button .span-mother2 span:nth-child(6) {
    transition: 0.55s;
}

.refined-dark-button .span-mother2 span:nth-child(7) {
    transition: 0.6s;
}

.refined-dark-button .span-mother2 span:nth-child(8) {
    transition: 0.65s;
}

/* =========================================
   Blog posts LOOP ITEM
   ========================================= */

.elementor-element-60e27e8 {
    position: relative;
}


/* =========================================
   POST TITLE
   ========================================= */

.elementor-element-60e27e8
.elementor-element-df88f1c {
    position: relative;
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.elementor-element-60e27e8:hover
.elementor-element-df88f1c {
    transform: translateX(10px);
}

.elementor-element-ae6af53 .elementor-icon {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor-element-60e27e8:hover .elementor-element-ae6af53 .elementor-icon {
    transform: rotate(90deg);
}

/* =========================================
   TITLE + DOT
   ========================================= */

.elementor-element-60e27e8
.elementor-element-df88f1c {
    position: relative;
    overflow: visible !important;
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

/* Create the dot on the title widget */
.elementor-element-60e27e8
.elementor-element-df88f1c::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    background: #cae8bd;
    border-radius: 50%;

    left: -18px;
    top: 50%;

    transform: translateY(-50%) scale(0);

    opacity: 0;

    z-index: 10;

    pointer-events: none;

    transition:
        transform 0.35s cubic-bezier(.22, 1, .36, 1),
        opacity 0.25s ease;
}

/* Show dot when the LOOP ITEM is hovered */
.elementor-element-60e27e8:hover
.elementor-element-df88f1c::before {
    transform: translateY(-50%) scale(1);
    opacity: 1;

    animation: km-dot-blink 1s ease-in-out infinite;
}

@keyframes km-dot-blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}


.client-ticker {
    width: 75%;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}


/* Ticker */
.client-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 40px;

    animation: client-ticker-scroll 24s linear infinite;
    animation-play-state: running;

    will-change: transform;
}


/* Movement */
@keyframes client-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 25px));
    }
}


/* Logos */
.client-logo {
    flex: 0 0 auto;

    width: 170px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    display: block;

    width: auto;
    max-width: 300px;
    height: 70px;

    object-fit: contain;

    opacity: 0.5;

    transition: opacity 0.3s ease;
}


/* Logo hover */
.client-logo:hover img {
    opacity: 1;
}


/* LEFT FADE */
.client-ticker::before {
    content: "";
    position: absolute;
    z-index: 10;

    top: -20px;
    bottom: -20px;
    left: -20px;
    width: 110px;

    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(17, 43, 43, 1) 0%,
        rgba(17, 43, 43, 0.92) 20%,
        rgba(17, 43, 43, 0.60) 50%,
        rgba(17, 43, 43, 0.20) 75%,
        rgba(17, 43, 43, 0) 100%
    );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    mask-image: linear-gradient(
        to right,
        black 0%,
        black 30%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to right,
        black 0%,
        black 30%,
        transparent 100%
    );
}


/* RIGHT FADE */
.client-ticker::after {
    content: "";
    position: absolute;
    z-index: 10;

    top: -20px;
    bottom: -20px;
    right: -20px;
    width: 110px;

    pointer-events: none;

    background: linear-gradient(
        to left,
        rgba(17, 43, 43, 1) 0%,
        rgba(17, 43, 43, 0.92) 20%,
        rgba(17, 43, 43, 0.60) 50%,
        rgba(17, 43, 43, 0.20) 75%,
        rgba(17, 43, 43, 0) 100%
    );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    mask-image: linear-gradient(
        to left,
        black 0%,
        black 30%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to left,
        black 0%,
        black 30%,
        transparent 100%
    );
}


/* Never pause on hover */
.client-ticker:hover .client-ticker-track,
.client-ticker:focus .client-ticker-track,
.client-ticker:active .client-ticker-track {
    animation-play-state: running !important;
}

/* =========================================
   Footer BG
   ========================================= */
.grdntbck {
    width: 100%;
    opacity: 1;

    background: radial-gradient(50% 50% at 50% 0%, rgb(21, 21, 21) 0%, rgb(0, 0, 0) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transform: none;
}


.form-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px !important;
    background: linear-gradient(
    135deg,
    rgb(20, 20, 20) 0%,
    rgb(0, 0, 0) 100%
);
    opacity: 1;
    transform: none;
    will-change: transform;
}

.elementor-form .elementor-button {
    width: 100%;
    background-color: #CAE8BD;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px;
    corner-shape: superellipse(1.4);

    box-shadow:
        rgba(202, 232, 189, 0.14) 0px 0.64px 1.91px -0.5px,
        rgba(202, 232, 189, 0.15) 0px 1.93px 5.79px -1px,
        rgba(202, 232, 189, 0.16) 0px 5.11px 15.32px -1.5px,
        rgba(202, 232, 189, 0.21) 0px 16px 48px -2px;

    opacity: 1;
    will-change: auto;
}

.elementor-form .elementor-button {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.elementor-form .elementor-button:hover {
    background-color: #D8F0CC;
    transform: translateY(-1px);

    box-shadow:
        rgba(202, 232, 189, 0.18) 0px 1px 2px -0.5px,
        rgba(202, 232, 189, 0.20) 0px 3px 8px -1px,
        rgba(202, 232, 189, 0.24) 0px 8px 20px -1.5px,
        rgba(202, 232, 189, 0.28) 0px 16px 48px -2px;
}

.elementor-form .elementor-button:hover {
    background-color: #FFFFFF;
    color: #102A2A;
    transform: translateY(-1px);

    box-shadow:
        rgba(202, 232, 189, 0.18) 0px 1px 2px -0.5px,
        rgba(202, 232, 189, 0.20) 0px 3px 8px -1px,
        rgba(202, 232, 189, 0.24) 0px 8px 20px -1.5px,
        rgba(202, 232, 189, 0.28) 0px 16px 48px -2px;
}

.elementor-form .elementor-button:hover .elementor-button-text {
    color: #102A2A;
}


/* =========================================
   ELEMENTOR PRISM BACKGROUND (for contact form)
   ========================================= */

.gradient-waves-section {
    position: relative !important;
    overflow: hidden !important;
}

/* HTML widget = full background */
.gradient-waves-section .elementor-widget-html {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.gradient-waves-section .elementor-widget-html > .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prism container */
.prism-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.prism-background canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Elementor content stays above Prism */
.gradient-waves-section > .e-con-inner,
.gradient-waves-section > .elementor-container,
.gradient-waves-section .e-con-inner {
    position: relative;
    z-index: 1;
}

.gradient-waves-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 0;
    pointer-events: none;
}

.gradient-waves-section .elementor-widget-html {
    z-index: 0 !important;
}

.gradient-waves-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}

.gradient-waves-section > .e-con-inner,
.gradient-waves-section > .elementor-container,
.gradient-waves-section .e-con-inner {
    position: relative;
    z-index: 2;
}