/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1767339304
Updated: 2026-01-02 07:35:04

*//* Dropdown menu */
.menu-item-has-children .sub-menu {
    position: absolute;
    top: 120%;
    left: 0;

    min-width: 240px;
    padding: 10px 0;
    margin: 0;

    background: #fff;
    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);
    transition: all 0.35s ease;

    z-index: 999;
}

/* Show dropdown */
.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    top: 100%;
}

/* Remove bullets */
.menu-item-has-children .sub-menu li {
    list-style: none;
}

/* Links */
.menu-item-has-children .sub-menu li a {
    display: block;
    padding: 14px 22px;

    color: #1c3a32 !important;
    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    transition: all 0.28s ease;
}

/* Hover */
.menu-item-has-children .sub-menu li a:hover {
    background: #1c3a32 !important;
    color: #fff !important;
    padding-left: 28px;
}
.elementor-nav-menu .sub-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin-left: 6px;
    position: static !important;
}
/* FORCE menu link to behave correctly */
.elementor-nav-menu a.has-submenu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px;

    white-space: nowrap !important;
}

/* Fix arrow container */
.elementor-nav-menu .sub-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;

    margin-left: 6px !important;
    position: static !important;
}

/* Fix SVG inside arrow */
.elementor-nav-menu .sub-arrow svg {
    width: 10px;
    height: 10px;
    display: block;
}

/* Prevent Elementor from pushing arrow down */
.elementor-nav-menu a.has-submenu > span {
    flex-shrink: 0;
}
/* ---------------------------------------------------------------------------
   Client feedback (2026-08-21), task 2: render the registered-trademark mark
   at a smaller size. Markup is <sup class="woot-reg">®</sup>, injected into
   Elementor content; this rule is what actually sizes it.
   --------------------------------------------------------------------------- */
.woot-reg {
    font-size: 0.5em;
    line-height: 0;
    letter-spacing: 0;
    /* `vertical-align: super` rides too high in the large serif used for the
       CEO quote. A relative em offset keeps the mark in the same optical spot
       whatever size the surrounding text is. */
    vertical-align: baseline;
    position: relative;
    top: -0.55em;
}

/* Nav labels run ~15px, where 0.5em lands around 7px and the mark reads as a stray
   degree sign. Scale it up a little wherever the surrounding text is small. */
.elementor-nav-menu .woot-reg,
.elementor-nav-menu--dropdown .woot-reg {
    font-size: 0.68em;
    top: -0.4em;
}

/* ===========================================================================
   Woot motion — homepage animation & interactivity (2026-08-21)
   Paired with js/woot-motion.js, which adds the .is-in / .woot-* hooks.
   Everything here is inert until that JS tags elements, so if the script
   fails to load the page still renders normally (no hidden content).
   =========================================================================== */

/* --- scroll reveals ------------------------------------------------------ */
.woot-motion .woot-reveal {
    opacity: 0;
    transition:
        opacity   0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--woot-delay, 0ms);
    will-change: opacity, transform;
}
.woot-motion .woot-reveal--up    { transform: translate3d(0, 26px, 0); }
.woot-motion .woot-reveal--left  { transform: translate3d(-30px, 0, 0); }
.woot-motion .woot-reveal--right { transform: translate3d(30px, 0, 0); }
.woot-motion .woot-reveal--zoom  { transform: scale(0.96); }

.woot-motion .woot-reveal.is-in {
    opacity: 1;
    transform: none;
}
/* once it has played, stop reserving a compositor layer */
.woot-motion .woot-reveal.is-done { will-change: auto; }

/* --- buttons ------------------------------------------------------------- */
.woot-motion .elementor-button {
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}
.woot-motion .elementor-button:hover,
.woot-motion .elementor-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(28, 58, 50, 0.18);
}
.woot-motion .elementor-button .elementor-button-icon,
.woot-motion .elementor-button svg {
    transition: transform 0.28s ease;
}
.woot-motion .elementor-button:hover .elementor-button-icon,
.woot-motion .elementor-button:hover svg {
    transform: translateX(4px);
}

/* --- product category cards --------------------------------------------- */
.woot-motion .woot-card {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
.woot-motion .woot-card:hover,
.woot-motion .woot-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(28, 58, 50, 0.14);
}

/* --- certification logos ------------------------------------------------- */
.woot-motion .woot-cert img {
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.woot-motion .woot-cert:hover img,
.woot-motion .woot-cert:focus-within img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* --- hero background: headroom so the parallax never exposes an edge ----- */
.woot-motion .woot-hero .elementor-background-slideshow,
.woot-motion .woot-hero .elementor-background-slideshow__slide__image {
    will-change: transform;
}
.woot-motion .woot-hero .elementor-background-slideshow__slide__image {
    transform: scale(1.12);
    transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- decorative illustrations drift -------------------------------------- */
.woot-motion .woot-drift { will-change: transform; }

/* --- marquee: nudge faster on hover -------------------------------------- */
.woot-motion .top-marquee .marquee-track {
    animation-duration: 22s;
    transition: none;
}
.woot-motion .top-marquee:hover .marquee-track {
    animation-duration: 9s;
}

/* --- sticky, shrinking header -------------------------------------------- */
.woot-motion .elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.woot-motion .elementor-location-header .e-con-inner,
.woot-motion .elementor-location-header .e-con > .e-con-inner {
    transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}
.woot-motion .elementor-location-header img {
    transition: max-height 0.3s ease, transform 0.3s ease;
}
.woot-motion.woot-scrolled .elementor-location-header {
    box-shadow: 0 6px 24px rgba(28, 58, 50, 0.10);
}
.woot-motion.woot-scrolled .elementor-location-header .e-con-inner {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.woot-motion.woot-scrolled .elementor-location-header img {
    transform: scale(0.86);
}

/* --- accessibility: honour the OS "reduce motion" setting ---------------- */
@media (prefers-reduced-motion: reduce) {
    .woot-motion .woot-reveal,
    .woot-motion .woot-reveal--up,
    .woot-motion .woot-reveal--left,
    .woot-motion .woot-reveal--right,
    .woot-motion .woot-reveal--zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .woot-motion .woot-hero .elementor-background-slideshow__slide__image { transform: none; }
    .woot-motion .woot-drift { transform: none !important; }
    .woot-motion .top-marquee .marquee-track { animation-duration: 22s !important; }
    .woot-motion .elementor-button,
    .woot-motion .woot-card,
    .woot-motion .woot-cert img { transition: none; }
}

/* ---------------------------------------------------------------------------
   Home v2 category tiles. Elementor's image-box image_width control emits no CSS
   for this widget, leaving the artwork at its intrinsic size inside a much wider
   column. Size it here so the tiles read as a grid.
   --------------------------------------------------------------------------- */
.woot-tile .elementor-image-box-img {
    display: block;
    /* !important is deliberate. Elementor emits its own 30% default at
       `.elementor-<page> .elementor-element.elementor-element-<id>
        .elementor-image-box-wrapper .elementor-image-box-img`, which no theme-level
       class can outrank, and it ignores the image_width control value even when
       that value is stored correctly on the widget. */
    width: 100% !important;
    margin-inline: 0 !important;
}
.woot-tile .elementor-image-box-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}
.woot-tile .elementor-image-box-img img { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.woot-tile:hover .elementor-image-box-img img { transform: scale(1.04); }