/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* ==========================================================
   PRIMECUT — CAPABILITY ROWS

   Elementor controls:
   - typography
   - base colors
   - widths
   - borders
   - alignment
   - horizontal spacing
   - child container layout

   CSS controls:
   - collapsed / expanded vertical spacing
   - reveal animation
   - hover accent
   - arrow rotation
   ========================================================== */


/* ==========================================================
   MOTION VARIABLES
   ========================================================== */

.capability-list {
    --cap-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cap-expand: 520ms;
    --cap-content: 360ms;
    --cap-fade: 260ms;
    --cap-arrow: 340ms;
}


/* ==========================================================
   BASE ROW
   ========================================================== */

.capability-row {
    position: relative;
    overflow: hidden;
    cursor: pointer;

    color: inherit;
    text-decoration: none;

    /*
     * Vertical row spacing is controlled here because
     * it is part of the animation.
     */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.capability-row:hover,
.capability-row:focus,
.capability-row:visited {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   DESCRIPTION AREA
   ========================================================== */

.capability-description .elementor-image-box-content {
    display: grid;
    grid-template-rows: auto 0fr;
    row-gap: 0;

    transition:
        grid-template-rows var(--cap-expand) var(--cap-ease),
        row-gap var(--cap-expand) var(--cap-ease);
}


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

.capability-description .elementor-image-box-title {
    transition:
        color 280ms ease;
}


/* ==========================================================
   DESCRIPTION — COLLAPSED
   ========================================================== */

.capability-description .elementor-image-box-description {
    min-height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(4px);

    transition:
        opacity var(--cap-fade) ease,
        transform var(--cap-content) var(--cap-ease);

    transition-delay: 0ms;
}


/* ==========================================================
   SERVICES — COLLAPSED
   ========================================================== */

.capability-services {
    opacity: 0;
    transform: translateY(4px);

    transition:
        opacity var(--cap-fade) ease,
        transform var(--cap-content) var(--cap-ease);

    transition-delay: 0ms;
}


/* ==========================================================
   NUMBER
   ========================================================== */

.capability-number .elementor-heading-title {
    transition:
        color 280ms ease;
}


/* ==========================================================
   ARROW
   ========================================================== */

.capability-row-arrow svg {
    transform: rotate(-90deg);
    transform-origin: center;

    transition:
        transform var(--cap-arrow) var(--cap-ease),
        fill 220ms ease;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1025px) {

    .capability-row {
        transition:
            padding-bottom var(--cap-expand) var(--cap-ease);
    }


    /* ------------------------------------------------------
       HOVER
       ------------------------------------------------------ */

    .capability-row:hover {
        padding-bottom: 2.75rem;
    }

    .capability-row:hover
    .capability-description
    .elementor-image-box-content {
        grid-template-rows: auto 1fr;
        row-gap: 0.9rem;
    }

    .capability-row:hover
    .capability-description
    .elementor-image-box-description {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 90ms;
    }

    .capability-row:hover
    .capability-services {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 110ms;
    }

    .capability-row:hover
    .capability-number
    .elementor-heading-title {
        color: var(--e-global-color-accent);
    }

    .capability-row:hover
    .capability-row-arrow svg {
        transform: rotate(0deg);
        fill: var(--e-global-color-accent);
    }


    /* ------------------------------------------------------
       KEYBOARD
       ------------------------------------------------------ */

    .capability-row:focus-visible {
        outline: 2px solid var(--e-global-color-accent);
        outline-offset: -2px;

        padding-bottom: 2.75rem;
    }

    .capability-row:focus-visible
    .capability-description
    .elementor-image-box-content {
        grid-template-rows: auto 1fr;
        row-gap: 0.9rem;
    }

    .capability-row:focus-visible
    .capability-description
    .elementor-image-box-description {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 90ms;
    }

    .capability-row:focus-visible
    .capability-services {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 110ms;
    }

    .capability-row:focus-visible
    .capability-number
    .elementor-heading-title {
        color: var(--e-global-color-accent);
    }

    .capability-row:focus-visible
    .capability-row-arrow svg {
        transform: rotate(0deg);
        fill: var(--e-global-color-accent);
    }

}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1024px) {

    .capability-row {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .capability-description
    .elementor-image-box-content {
        grid-template-rows: auto 1fr;
        row-gap: 0.75rem;

        transition: none;
    }

    .capability-description
    .elementor-image-box-description {
        min-height: 0;
        overflow: visible;

        opacity: 1;
        transform: none;

        transition: none;
    }

    .capability-services {
        opacity: 1;
        transform: none;

        transition: none;
    }

    .capability-number
    .elementor-heading-title {
        color: var(--e-global-color-accent);
    }

    .capability-row-arrow svg {
        transform: rotate(-90deg);
        fill: currentColor;

        transition: none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .capability-row,
    .capability-description .elementor-image-box-content,
    .capability-description .elementor-image-box-title,
    .capability-description .elementor-image-box-description,
    .capability-services,
    .capability-number .elementor-heading-title,
    .capability-row-arrow svg {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

}

/* Footer CTA */
.footer-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    transition:
        color 0.45s ease,
        border-color 0.45s ease;
}

/* Sliding  background */
.footer-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-color:var(--e-global-color-accent, #E0BF7D);
    transform: translateY(101%);

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keep CTA content above animated background */
.footer-cta > * {
    position: relative;
    z-index: 1;
}

/* Background enters from the bottom */
.footer-cta:hover::before {
    transform: translateY(0);
}

.footer-cta:hover {
    background-color: transparent !important;
    border-color: var(--e-global-color-accent, #E0BF7D);
    color: #fff;
}

/* Heading */
.footer-cta .elementor-heading-title {
    color: inherit;

    transition:
        color 0.35s ease;
}

/* Arrow clipping viewport */
.footer-cta-arrow-wrapper {
    position: relative;

    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;

    overflow: hidden;
}

/* Stack both arrow widgets */
.footer-cta-arrow,
.footer-cta-arrow-hover {
    position: absolute;
    inset: 0;

    width: 24px;
    height: 24px;
    margin: 0;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default arrow */
.footer-cta-arrow {
    color: #333;
    transform: translate(0, 0);
}

/* Hover arrow starts down-left */
.footer-cta-arrow-hover {
    color: #fff;
    transform: translate(-125%, 125%);
}

/* Default arrow exits up-right */
.footer-cta:hover .footer-cta-arrow {
    transform: translate(125%, -125%);
}

/* Hover arrow enters from down-left */
.footer-cta:hover .footer-cta-arrow-hover {
    transform: translate(0, 0);
}

/* Normalize Jet Inline SVG wrappers */
.footer-cta-arrow .elementor-widget-container,
.footer-cta-arrow-hover .elementor-widget-container,
.footer-cta-arrow .elementor-jet-inline-svg,
.footer-cta-arrow-hover .elementor-jet-inline-svg,
.footer-cta-arrow .jet-elements,
.footer-cta-arrow-hover .jet-elements,
.footer-cta-arrow .jet-inline-svg__wrapper,
.footer-cta-arrow-hover .jet-inline-svg__wrapper,
.footer-cta-arrow .jet-inline-svg,
.footer-cta-arrow-hover .jet-inline-svg,
.footer-cta-arrow .jet-inline-svg__inner,
.footer-cta-arrow-hover .jet-inline-svg__inner {
    width: 24px;
    height: 24px;
    line-height: 0;
}

/* SVG sizing and color */
.footer-cta-arrow svg,
.footer-cta-arrow-hover svg {
    display: block;

    width: 24px;
    height: 24px;

    fill: currentColor;
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .footer-cta,
    .footer-cta::before,
    .footer-cta .elementor-heading-title,
    .footer-cta-arrow,
    .footer-cta-arrow-hover {
        transition-duration: 0.01ms;
    }
}