/* body smoothing */

body, button {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* responsive video fix */
.e-div-block {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
}

.elementor-widget-theme-post-content figure.wp-block-embed {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
}

.elementor-widget-theme-post-content .wp-block-embed__wrapper {
    width: 100% !important;
    display: block !important;
}

.elementor-widget-theme-post-content .wp-block-embed__wrapper iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
}

/* text */

p + p {
    margin-top: 1.25em;
}

/*
   ANIMATED UNDERLINE ON HOVER

   Add the class "animated-underline" to any Elementor element (menu item, link, text, etc.)
   and this CSS will add the animated left-to-right underline effect on hover.

   Usage in Elementor:
   1. Select the element you want to animate (menu item, link, etc.)
   2. Go to Advanced > Custom Attributes
   3. Add CSS Class: animated-underline
   4. Add this CSS to: Dashboard > Elementor > Custom CSS
      (or add it to your theme's Additional CSS section)
*/

.animated-underline {
    position: relative;
    display: inline-block;
}

/* Create the underline element */
.animated-underline::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1, 0.64, 1);
}

/* Animate on hover */
.animated-underline:hover::after {
    transform: scaleX(1);
}

Optional: If you want the underline to stay animated, uncomment this */
.animated-underline.active::after {
    transform: scaleX(1);
}