/*
Theme Name: Tayvora (Child Theme)
Theme URI: https://toyvora.com
Author: Tayvora Solutions Pvt Ltd
Author URI: https://toyvora.com
Description: Bespoke digital agency experience handcrafted exclusively for Tayvora Solutions.
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tayvora
Template: osty
*/

/* Add your own modification from here
-------------------------------------------------------------- */

/* ==========================================================================
   Zero Horizontal Overflow & Mobile Wobble/Drag Lock
   ========================================================================== */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

#page,
#content,
.site,
.site-content,
.site-main,
.page-content,
.elementor,
.elementor-section-wrap,
.elementor-1234 {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

.ms-text-ticker,
.ms-slider,
.swiper,
.swiper-container,
.portfolio_wrap,
.ms-projects,
.elementor-element-572d490,
.elementor-element-fp_section1,
.elementor-element-cl_section1,
.elementor-element-67704be,
.ms-footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   Universal Infinite Marquee / Text Ticker Layout Fix (Zero Overlap & Smooth Loop)
   ========================================================================== */
.ms-text-ticker,
.ms_text_ticker,
.elementor-widget-ms_text_ticker,
.ms-footer .ms-text-ticker,
.ms-footer .ms_text_ticker,
.ms-footer .elementor-widget-ms_text_ticker {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
}

.ms-text-ticker *,
.ms_text_ticker *,
.elementor-widget-ms_text_ticker *,
.ms-footer .ms-text-ticker *,
.ms-footer .ms_text_ticker * {
    max-width: none !important;
}

.ms-text-ticker .ms-tt-wrap,
.ms_text_ticker .ms-tt-wrap,
.elementor-widget-ms_text_ticker .ms-tt-wrap,
.ms-footer .ms-tt-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: content-box !important;
}

.ms-text-ticker .ms-tt-wrap .ms-tt,
.ms-text-ticker .ms-tt,
.ms_text_ticker .ms-tt,
.elementor-widget-ms_text_ticker .ms-tt,
.ms-footer .ms-tt,
.ms-footer ul.ms-tt {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: content-box !important;
}

.ms-text-ticker .ms-tt__text,
.ms_text_ticker .ms-tt__text,
.elementor-widget-ms_text_ticker .ms-tt__text,
.ms-footer .ms-tt__text,
.ms-footer .ms_text_ticker li,
.ms-footer .ms_text_ticker ul li {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: none !important;
}

.ms-text-ticker .ms-tt__text.img,
.ms_text_ticker .ms-tt__text.img,
.elementor-widget-ms_text_ticker .ms-tt__text.img,
.ms-footer .ms-tt__text.img,
.ms-footer .ms_text_ticker .ms-tt__text.img {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
}

.ms-text-ticker .ms-tt__text.img img,
.ms-text-ticker .ms-tt__text.img svg,
.ms_text_ticker .ms-tt__text.img img,
.ms_text_ticker .ms-tt__text.img svg,
.ms-footer .ms-tt__text.img img,
.ms-footer .ms-tt__text.img svg {
    max-width: none !important;
    flex-shrink: 0 !important;
    display: block !important;
}

@media (max-width: 768px) {
    #ms-header.main-header,
    .main-header,
    .ms-nb--transparent.main-header {
        width: calc(100% - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   Toyvora Brand Theme Variables
   ========================================================================== */
:root,
[data-theme="light"] {
    --color-primary: #6633ff;
    --color-primary-rgb: 102, 51, 255;
    --color-primary-hover: #5329e0;
    --color-primary-light: rgba(102, 51, 255, 0.08);
    --color-primary-glow: rgba(102, 51, 255, 0.25);
    --color-accent: #7c4dff;
    --color-accent-rgb: 124, 77, 255;

    /* Neutrals & Text */
    --color-bg: #ffffff;
    --color-contrast-higher: #111827;
    --color-contrast-high: #1f2937;
    --color-contrast-medium: #4b5563;
    --color-contrast-low: #e5e7eb;
    --color-contrast-lower: #f8f9fc;
    --color-surface-card: #ffffff;
    --color-surface-hover: #f3f4f8;

    /* Typography */
    --font-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', sans-serif;

    /* Elevation & Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 24px;
    --border-radius-pill: 9999px;
    --shadow-toyvora-sm: 0 2px 8px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(102, 51, 255, 0.04);
    --shadow-toyvora-md: 0 8px 24px rgba(17, 24, 39, 0.06), 0 2px 8px rgba(102, 51, 255, 0.08);
    --shadow-toyvora-lg: 0 16px 40px rgba(17, 24, 39, 0.08), 0 4px 16px rgba(102, 51, 255, 0.12);
    --shadow-toyvora-glow: 0 8px 30px rgba(102, 51, 255, 0.28);
}

[data-theme="dark"] {
    --color-primary: #7c4dff;
    --color-primary-rgb: 124, 77, 255;
    --color-primary-hover: #9066ff;
    --color-primary-light: rgba(124, 77, 255, 0.12);
    --color-primary-glow: rgba(124, 77, 255, 0.35);
    --color-accent: #6633ff;

    /* Dark Neutrals */
    --color-bg: #0c0c12;
    --color-contrast-higher: #f9fafb;
    --color-contrast-high: #e5e7eb;
    --color-contrast-medium: #9ca3af;
    --color-contrast-low: #242433;
    --color-contrast-lower: #161622;
    --color-surface-card: #14141e;
    --color-surface-hover: #1c1c2b;

    --shadow-toyvora-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-toyvora-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-toyvora-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-toyvora-glow: 0 8px 32px rgba(124, 77, 255, 0.3);
}

/* ==========================================================================
   Typography Overrides
   ========================================================================== */
body, p, span, li, a, input, textarea, select, button {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.ms-heading {
    font-family: var(--font-heading);
    letter-spacing: -0.025em;
    font-weight: 700;
}

/* Gradient highlight class for headlines */
.toyvora-gradient-text,
.gradient-heading {
    background: linear-gradient(135deg, #6633ff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ==========================================================================
   Header & Brand Logo
   ========================================================================== */
.main-header__logo {
    display: inline-flex;
    align-items: center;
}

.main-header__logo img,
.main-header__logo svg,
.site-logo img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-header__logo:hover img,
.main-header__logo:hover svg {
    transform: scale(1.03);
}

/* Nav Menu Items */
.main-header .ms-nav .menu-item > a {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.95rem;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: opacity 0.25s ease, color 0.25s ease;
    position: relative;
}

.main-header .ms-nav .menu-item > a:hover,
.main-header .ms-nav .menu-item.current-menu-item > a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================================
   Button Styling & Hover Micro-interactions
   ========================================================================== */
.btn,
.btn--primary,
.ms-btn,
.elementor-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em;
    border-radius: var(--border-radius-pill) !important;
    padding: 14px 30px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn--primary,
.btn.btn--primary,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-sm,
.elementor-element .elementor-button {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px var(--color-primary-glow);
}

.btn--primary:hover,
.btn.btn--primary:hover,
.elementor-element .elementor-button:hover,
.wp-block-button__link:hover {
    background-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-toyvora-glow) !important;
}

.btn--primary:active,
.elementor-element .elementor-button:active {
    transform: translateY(0);
}

/* Secondary / Outline Button */
.btn--outline,
.btn--secondary,
.elementor-button.elementor-button-secondary {
    background: transparent !important;
    color: var(--color-contrast-higher) !important;
    border: 1.5px solid var(--color-contrast-low) !important;
}

.btn--outline:hover,
.btn--secondary:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: var(--color-primary-light) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Smooth Interactive Button & Load More (Stable Length & Smooth Easing)
   ========================================================================== */
.btn-load-more,
.btn.btn-load-more,
.btn-osty,
.ajax-area .btn-load-more {
    height: 48px !important;
    min-width: 172px !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: var(--border-radius-pill) !important;
    box-shadow: 0 4px 18px var(--color-primary-glow) !important;
    border: none !important;
    overflow: hidden !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-load-more:hover,
.btn.btn-load-more:hover,
.btn-osty:hover,
.ajax-area .btn-load-more:hover {
    background-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-toyvora-glow) !important;
    transform: translateY(-2px);
}

.btn-load-more .f-btn-r,
.btn .f-btn-r {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 24px !important;
    background-color: transparent !important;
    border-radius: var(--border-radius-pill) !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1;
}

.btn-load-more:hover .f-btn-r,
.btn:hover .f-btn-r {
    transform: translateX(12px) !important;
    background-color: transparent !important;
}

.btn-load-more .btn-r_icon,
.btn .f-btn-r .btn-r_icon {
    width: 16px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 10px !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease !important;
}

.btn-load-more:hover .btn-r_icon,
.btn:hover .f-btn-r .btn-r_icon {
    transform: translateX(10px) !important;
    opacity: 0 !important;
}

.btn-load-more .f-btn-r span,
.btn-load-more span.load-more-text,
.btn-load-more span,
.btn-osty .f-btn-r span,
.btn .f-btn-r span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.btn-load-more:hover span:last-child:not(.load-more-icon),
.btn-load-more:hover .f-btn-r span {
    color: #ffffff !important;
}

/* Left & Right Button Icon Holders */
.btn .f-btn-l,
.btn-load-more .f-btn-l {
    width: 20px !important;
    height: 100% !important;
    position: absolute !important;
    left: -28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    border-radius: var(--border-radius-pill) !important;
    transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
    opacity: 0;
    z-index: 2;
}

.btn-load-more:hover .f-btn-l,
.btn:hover .f-btn-l {
    left: 22px !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Tayvora Button Icon (Pure White) */
.tayvora-btn-icon,
.btn-r_icon svg,
.f-btn-l svg,
.btn-load-more svg:not(.load-more-icon svg) {
    width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.5s ease !important;
}

.tayvora-btn-icon path,
.btn-r_icon svg path,
.f-btn-l > svg path,
.btn-load-more .btn-r_icon svg path,
.btn-load-more .f-btn-l > svg path {
    fill: #ffffff !important;
}

/* ==========================================================================
   Portfolio Showcase Section Gap & Load More Button Spacing
   ========================================================================== */
.portfolio_wrap .ajax-area,
.elementor-widget-ms_projects .ajax-area,
.ajax-area {
    margin-top: 50px !important;
    margin-bottom: 90px !important;
    padding-bottom: 8px !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .portfolio_wrap .ajax-area,
    .elementor-widget-ms_projects .ajax-area,
    .ajax-area {
        margin-top: 40px !important;
        margin-bottom: 65px !important;
    }
}

@media (max-width: 768px) {
    .portfolio_wrap .ajax-area,
    .elementor-widget-ms_projects .ajax-area,
    .ajax-area {
        margin-top: 35px !important;
        margin-bottom: 50px !important;
        padding-bottom: 5px !important;
    }
}

/* Spinner icon in Load More */
.btn-load-more .load-more-icon svg {
    stroke: #ffffff !important;
}

.btn-load-more .spin2 {
    stroke: #ffffff !important;
}

/* ==========================================================================
   Modern Engaging Micro-Interaction CTA Buttons ("Contact Me" & "Discover Our Work")
   ========================================================================== */
.elementor-widget-ms-button a.ms-btn,
.ms-btn.btn--primary,
.ms-btn.btn--subtle,
.ms-btn.btn--contrast,
.btn--subtle,
.btn--primary,
.btn--contrast {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;
    border-radius: 9999px !important;
    padding: 13px 32px !important;
    height: 48px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Button Shimmer / Light Sweep Overlay */
.ms-btn::before,
.btn--contrast::before,
.btn--subtle::before,
.btn--primary::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.25) 50%, 
        transparent 100%
    ) !important;
    transform: rotate(25deg) !important;
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.ms-btn:hover::before,
.btn--contrast:hover::before,
.btn--subtle:hover::before,
.btn--primary:hover::before {
    left: 140% !important;
}

/* Primary Vibrant Button: "Discover Our Work" */
.btn--subtle:not(.js-filter-nav__control),
.btn.btn--subtle:not(.js-filter-nav__control),
a.btn.btn--subtle,
.btn--primary,
.btn.btn--primary,
a.btn.btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 18px var(--color-primary-glow), 
                inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.btn--subtle:not(.js-filter-nav__control):hover,
.btn.btn--subtle:not(.js-filter-nav__control):hover,
a.btn.btn--subtle:hover,
.btn--primary:hover,
.btn.btn--primary:hover,
a.btn.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.025) !important;
    box-shadow: 0 10px 30px rgba(102, 51, 255, 0.55), 
                inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.btn--subtle:not(.js-filter-nav__control):active,
.btn--primary:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* Contrast Dark Obsidian Button: "Contact Me" */
.btn--contrast,
.btn.btn--contrast,
a.btn.btn--contrast {
    background: linear-gradient(135deg, #0f0f14 0%, #161622 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 
                inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

.btn--contrast:hover,
.btn.btn--contrast:hover,
a.btn.btn--contrast:hover {
    background: linear-gradient(135deg, #181826 0%, #242438 100%) !important;
    color: #ffffff !important;
    border-color: rgba(102, 51, 255, 0.45) !important;
    transform: translateY(-3px) scale(1.025) !important;
    box-shadow: 0 10px 28px rgba(102, 51, 255, 0.28), 
                inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

.btn--contrast:active {
    transform: translateY(-1px) scale(0.98) !important;
}

.btn--contrast .ms-btn__text,
.btn--contrast:hover .ms-btn__text,
.btn--subtle:not(.js-filter-nav__control) .ms-btn__text,
.btn--subtle:not(.js-filter-nav__control):hover .ms-btn__text,
.btn--primary .ms-btn__text,
.btn--primary:hover .ms-btn__text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ==========================================================================
   Portfolio Category Filter Navigation Bar (Clean Single Pill - No Grey Box)
   ========================================================================== */
/* Completely hide duplicate mobile dropdown button on desktop */
.js-filter-nav__control,
.btn--subtle.js-filter-nav__control,
.filter-nav--collapsed,
.filter-nav__control,
.filter-nav__close-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Destroy all parent theme background pseudo-elements that cause awkward 14px/16px box corners */
.subnav::before,
.subnav::after,
.subnav__container::before,
.subnav__container::after,
.portfolio_wrap .subnav::before,
.portfolio_wrap .subnav::after,
.portfolio_wrap[data-filter=s_1] .subnav::before,
.portfolio_wrap[data-filter=s_1] .subnav::after,
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container::before,
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container::after,
.filter-nav::before,
.filter-nav::after,
.filter-nav__wrapper::before,
.filter-nav__wrapper::after,
.filter-nav__nav::before,
.filter-nav__nav::after,
.filter-nav--expanded .filter-nav__btn::before,
.filter-nav--expanded .filter-nav__btn::after,
.portfolio_wrap .subnav .filter-nav__btn::before,
.portfolio_wrap .subnav .filter-nav__btn::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Reset all outer wrapper containers to transparent */
.portfolio_wrap .subnav,
.portfolio_wrap .subnav__container,
.portfolio_wrap .filter-nav,
.portfolio_wrap .filter-nav__wrapper,
.portfolio_wrap .filter-nav__nav,
.filter-nav,
.filter-nav--expanded,
.filter-nav__wrapper,
.filter-nav__nav,
.subnav,
.subnav__container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    margin: 0 auto 38px auto !important;
    overflow: visible !important;
}

/* ==========================================================================
   Hero Section Header Intro, Title & Balanced Spacing Rhythm
   ========================================================================== */
.ms-ah-wrapper .content__title,
.ms-ah-wrapper h1,
.ms-ah-wrapper h2,
.ms-ah-wrapper .char,
.ms-ah-wrapper .word {
    text-transform: none !important;
}

.elementor-1234 .elementor-element-572d490 {
    min-height: auto !important;
    padding-bottom: 60px !important;
    position: relative !important;
}

/* Hero Header Top Intro Section */
.elementor-1234 .elementor-element-84e73b0 {
    min-height: auto !important;
    padding-top: clamp(85px, 10vh, 115px) !important;
    padding-bottom: 22px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-1234 .elementor-element-ac931b8 {
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Toyvora Hero Intro Widget Wrapper & Typography Defaults */
.toyvora-hero-intro-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.toyvora-hero-headline {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-family: inherit;
    font-size: clamp(2.1rem, 3.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.025em;
    color: #0f172a;
    text-align: center;
    box-sizing: border-box;
}

[data-theme="dark"] .toyvora-hero-headline,
body.dark-theme .toyvora-hero-headline {
    color: #f8fafc;
}

.toyvora-hero-description {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #64748b;
    box-sizing: border-box;
}

.toyvora-hero-description,
.toyvora-hero-description p {
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.62;
    color: inherit;
    text-align: center;
    font-weight: 400;
    margin: 0 auto;
}

[data-theme="dark"] .toyvora-hero-description,
[data-theme="dark"] .toyvora-hero-description p,
body.dark-theme .toyvora-hero-description,
body.dark-theme .toyvora-hero-description p {
    color: #94a3b8;
}

/* Scroll + Statement Row — position relative, SCROLL pinned left, Statement centered */
.elementor-1234 .elementor-element-25a51c1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin-top: 18px !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
    padding-left: min(5vw, 60px) !important;
    padding-right: min(5vw, 60px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* Scroll Indicator & Arrow — Hidden gracefully per design preference (Preserved in DOM) */
.elementor-1234 .elementor-element-b76e49d,
.elementor-element-b76e49d,
.elementor-1234 .elementor-element-895e8c3,
.elementor-element-895e8c3,
.elementor-1234 .elementor-element-919002f,
.elementor-element-919002f {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hero Statement — centered in the row */
.elementor-1234 .elementor-element-f0a91eb {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    text-align: center !important;
}

.elementor-1234 .elementor-element-f0a91eb .elementor-widget-container,
.elementor-1234 .elementor-element-f0a91eb .elementor-widget-text-editor {
    max-width: 680px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.elementor-1234 .elementor-element-f0a91eb p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #64748b !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
    margin: 0 auto !important;
}

[data-theme="dark"] .elementor-1234 .elementor-element-f0a91eb p {
    color: #94a3b8 !important;
}

.elementor-1234 .elementor-element-877cc44 {
    margin-top: 28px !important;
}

/* ==========================================================================
   Featured Projects Section (fp_section1) — video background
   ========================================================================== */
.elementor-1234 .elementor-element-fp_section1 {
    position: relative !important;
    overflow: hidden !important;
    background: #000000 !important;
    padding-left: min(5vw, 60px) !important;
    padding-right: min(5vw, 60px) !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

/* Video background container — full-cover absolute behind content */
.elementor-1234 .elementor-element-fp_videobg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000000 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.elementor-1234 .elementor-element-fp_videobg .elementor-widget-video,
.elementor-1234 .elementor-element-fp_videobg .elementor-widget-container,
.elementor-1234 .elementor-element-fp_videobg .elementor-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.elementor-1234 .elementor-element-fp_videobg video.elementor-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0.95 !important;
    display: block !important;
    pointer-events: none !important;
}

/* Left & right columns — sit above the video */
.elementor-1234 .elementor-element-fp_leftcol,
.elementor-1234 .elementor-element-fp_rightcol,
.elementor-1234 .elementor-element-fp_grid_row {
    position: relative !important;
    z-index: 2 !important;
}

/* / Portfolio label */
.elementor-1234 .elementor-element-fp_portfolio_label .elementor-heading-title {
    color: #DADADA !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
}

/* Featured Projects title */
.elementor-1234 .elementor-element-fp_title,
.elementor-1234 .elementor-element-fp_title .ms-ah-wrapper h1,
.elementor-1234 .elementor-element-fp_title .content__title {
    color: #ffffff !important;
    font-size: clamp(2.5rem, 4.5vw, 4rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

/* Description text */
.elementor-1234 .elementor-element-fp_desc,
.elementor-1234 .elementor-element-fp_desc .ms-ah-wrapper h1,
.elementor-1234 .elementor-element-fp_desc .content__title,
.elementor-1234 .elementor-element-fp_desc p {
    color: #DADADA !important;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem) !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
}

/* Projects grid */
.elementor-1234 .elementor-element-fp_grid_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-1234 .elementor-element-fp_projects_widget {
    width: 100% !important;
}

.elementor-1234 .elementor-element-fp_projects_widget .ms-p-cat {
    color: #DADADA !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.elementor-1234 .elementor-element-fp_projects_widget h3 {
    color: #FFFFFF !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   Client Logos Animated Ticker Bar (cl_section1)
   ========================================================================== */
.elementor-1234 .elementor-element-cl_section1 {
    background: transparent !important;
    padding: 40px 0 50px 0 !important;
    margin: 20px 0 40px 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.elementor-1234 .elementor-element-cl_section1 .ms-tt-wrap {
    display: flex !important;
    align-items: center !important;
}

.elementor-1234 .elementor-element-cl_section1 .ms-tt__text.img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 40px !important;
}

.elementor-1234 .elementor-element-cl_section1 .ms-tt__text.img img {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: none !important;
    opacity: 0.65 !important;
    filter: grayscale(100%) brightness(0.2) !important;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease !important;
}

.elementor-1234 .elementor-element-cl_section1 .ms-tt__text.img:hover img {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.06) !important;
}

[data-theme="dark"] .elementor-1234 .elementor-element-cl_section1 .ms-tt__text.img img {
    opacity: 0.6 !important;
    filter: grayscale(100%) brightness(0) invert(1) !important;
}

[data-theme="dark"] .elementor-1234 .elementor-element-cl_section1 .ms-tt__text.img:hover img {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    transform: scale(1.06) !important;
}

.elementor-1234 .elementor-element-67704be {
    margin-top: 34px !important;
}

/* The ONLY visible container: Perfectly Smooth Fully Rounded Capsule Pill */
.filter-nav--expanded .filter-nav__list,
.portfolio_wrap .filter-nav__list,
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container .filter-nav__list {
    background: rgba(245, 246, 250, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 9999px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(102, 51, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(102, 51, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    height: auto !important;
}

[data-theme="dark"] .filter-nav--expanded .filter-nav__list,
[data-theme="dark"] .portfolio_wrap .filter-nav__list,
[data-theme="dark"] .portfolio_wrap[data-filter=s_2] .subnav .subnav__container .filter-nav__list {
    background: rgba(14, 15, 26, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(102, 51, 255, 0.14) !important;
}

/* Filter Item Wrapper */
.filter-nav--expanded .filter-nav__item,
.portfolio_wrap .filter-nav__item,
.portfolio_wrap .subnav .subnav__link,
.subnav__link {
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.filter-nav--expanded .filter-nav__marker {
    display: none !important;
}

/* Active Category: Clean Solid Brand Pill (No Gradient) */
.filter-nav--expanded .filter-nav__item.active .filter-nav__btn,
.portfolio_wrap .filter-nav__item.active .filter-nav__btn,
.portfolio_wrap .subnav .subnav__link.active .filter-nav__btn,
.elementor-element-edit-mode .filter-nav__item.subnav__link.active .filter-nav__btn,
.filter-nav__item.active .filter-nav__btn,
.filter-nav__btn[aria-current="true"],
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container .active .filter-nav__btn {
    background: #6633ff !important;
    background-color: #6633ff !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 16px rgba(102, 51, 255, 0.35) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Inactive Filter Item Buttons */
.filter-nav--expanded .filter-nav__btn,
.portfolio_wrap .subnav .filter-nav__btn,
.portfolio_wrap[data-filter=s_1] .subnav .filter-nav__btn,
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container .filter-nav__btn {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    color: #334155;
    -webkit-text-fill-color: #334155;
    border-radius: 9999px;
    padding: 0 22px;
    height: 42px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    z-index: 1 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
}

.filter-nav--expanded .filter-nav__btn:hover:not([aria-current="true"]),
.portfolio_wrap .subnav .filter-nav__btn:hover:not([aria-current="true"]),
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container .filter-nav__btn:hover:not([aria-current="true"]) {
    color: #6366f1;
    -webkit-text-fill-color: #6366f1;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 9999px;
    transform: translateY(-1px);
}
    border-radius: 9999px;
}

[data-theme="dark"] .filter-nav--expanded .filter-nav__btn {
    color: #d1d5db !important;
    -webkit-text-fill-color: #d1d5db !important;
}

[data-theme="dark"] .filter-nav--expanded .filter-nav__btn:hover:not([aria-current="true"]),
[data-theme="dark"] .portfolio_wrap .subnav .filter-nav__btn:hover:not([aria-current="true"]) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(102, 51, 255, 0.2) !important;
    border-radius: 9999px !important;
}

/* ==========================================================================
   Dynamic Parallax Sticky Navbar (Floating Translucent Dark Purple Glass Pill)
   ========================================================================== */
#ms-header.main-header,
.main-header,
.ms-nb--transparent.main-header {
    position: fixed !important;
    top: 20px !important;
    left: 0 !important;
    right: 0 !important;
    width: calc(100% - 48px) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    z-index: 99999 !important;
    height: 74px !important;
    min-height: 74px !important;
    background: linear-gradient(165deg, rgba(18, 19, 44, 0.92) 0%, rgba(10, 11, 26, 0.88) 48%, rgba(5, 5, 14, 0.94) 100%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) !important;
    backdrop-filter: blur(28px) saturate(190%) contrast(104%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 9999px !important;
    box-shadow: 0 18px 42px -8px rgba(3, 3, 10, 0.65), 
                0 0 28px 0 rgba(102, 51, 255, 0.16), 
                inset 0 1px 1px 0 rgba(255, 255, 255, 0.22),
                inset 0 -1px 1px 0 rgba(0, 0, 0, 0.35),
                inset 0 0 24px 0 rgba(102, 51, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                width 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                backdrop-filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                -webkit-backdrop-filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Admin Bar Offset for Floating Top State */
body.admin-bar #ms-header.main-header,
body.admin-bar .main-header {
    top: 56px !important;
}

/* Scrolled State: Morphs into Sleek Translucent Dark Purple Glass Island Pill */
#ms-header.main-header.is-scrolled,
.main-header.is-scrolled,
.ms-nb--transparent.main-header.is-scrolled {
    top: 12px !important;
    width: calc(100% - 40px) !important;
    max-width: 1240px !important;
    height: 66px !important;
    min-height: 66px !important;
    background: linear-gradient(165deg, rgba(16, 17, 40, 0.72) 0%, rgba(9, 10, 24, 0.64) 48%, rgba(5, 5, 13, 0.74) 100%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) contrast(105%) !important;
    backdrop-filter: blur(32px) saturate(200%) contrast(105%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 9999px !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.62), 
                0 0 30px rgba(102, 51, 255, 0.20), 
                inset 0 1px 1px rgba(255, 255, 255, 0.30),
                inset 0 -1px 1px rgba(0, 0, 0, 0.4),
                inset 0 0 28px rgba(102, 51, 255, 0.08) !important;
}

body.admin-bar #ms-header.main-header.is-scrolled,
body.admin-bar .main-header.is-scrolled {
    top: 44px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #ms-header.main-header.is-scrolled,
    body.admin-bar .main-header.is-scrolled {
        top: 54px !important;
    }
}

/* Dark Mode Scrolled Glass */
[data-theme="dark"] #ms-header.main-header,
[data-theme="dark"] .main-header,
[data-theme="dark"] .ms-nb--transparent.main-header {
    background: linear-gradient(165deg, rgba(16, 17, 40, 0.94) 0%, rgba(9, 10, 24, 0.90) 48%, rgba(4, 4, 12, 0.96) 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 18px 45px -8px rgba(0, 0, 0, 0.75), 
                0 0 28px rgba(102, 51, 255, 0.18),
                inset 0 1px 1px rgba(255, 255, 255, 0.22),
                inset 0 -1px 1px rgba(0, 0, 0, 0.4),
                inset 0 0 24px rgba(102, 51, 255, 0.06) !important;
}

[data-theme="dark"] #ms-header.main-header.is-scrolled,
[data-theme="dark"] .main-header.is-scrolled,
[data-theme="dark"] .ms-nb--transparent.main-header.is-scrolled {
    background: linear-gradient(165deg, rgba(14, 15, 36, 0.74) 0%, rgba(8, 9, 22, 0.66) 48%, rgba(4, 4, 11, 0.76) 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    border-top-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.75), 
                0 0 30px rgba(102, 51, 255, 0.22),
                inset 0 1px 1px rgba(255, 255, 255, 0.30),
                inset 0 -1px 1px rgba(0, 0, 0, 0.4),
                inset 0 0 28px rgba(102, 51, 255, 0.08) !important;
}

/* Navigation Menu: Visible at Top, Smoothly Collapses on Scroll */
.main-header .main-header__nav {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.main-header.is-scrolled .main-header__nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.92) !important;
}

/* Dynamic Center Current Page Indicator Badge (Hidden at Top, Appears Only on Scroll) */
.main-header__center-badge {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 5 !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.main-header.is-scrolled .main-header__center-badge {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.navbar-current-page-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    cursor: default !important;
    user-select: none !important;
    pointer-events: none !important;
}

[data-theme="dark"] .navbar-current-page-indicator {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-page-label {
    font-family: var(--font-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}

[data-theme="dark"] .nav-page-label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 768px) {
    .main-header__center-badge {
        display: none !important;
    }
}

/* Header Layout Wrapper */
.main-header__layout {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    height: 100% !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
}

.main-header__inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo Container with Dynamic Scale on Scroll */
.main-header__logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 175px !important;
    z-index: 10 !important;
}

.main-header__logo a {
    display: flex !important;
    align-items: center !important;
}

.main-header__logo img {
    height: 49px !important;
    width: auto !important;
    max-height: 52px !important;
    max-width: 240px !important;
    display: block !important;
    transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease !important;
}

.is-scrolled .main-header__logo img {
    height: 42px !important;
    max-height: 44px !important;
}

.main-header__logo a:hover img {
    transform: scale(1.04);
}

@media screen and (max-width: 768px) {
    .main-header__layout {
        padding: 0 12px !important;
    }
    .main-header__logo {
        min-width: auto !important;
    }
    .main-header__logo img {
        height: 46px !important;
        max-height: 48px !important;
        max-width: 200px !important;
    }
    .is-scrolled .main-header__logo img {
        height: 40px !important;
        max-height: 42px !important;
    }
}

/* ==========================================================================
   Centered Horizontal Primary Navigation Menu (Visible & Engaging)
   ========================================================================== */
.main-header__nav,
.main-header__default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
}

.main-header--widgets {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 120px !important;
    z-index: 10 !important;
}

.main-header__default > #primary-menu-default,
.main-header__nav .navbar-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.main-header__default > #primary-menu-default > .menu-item,
.main-header__nav .navbar-nav > .menu-item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.main-header__default > #primary-menu-default > .menu-item > a,
.main-header__nav .navbar-nav > .menu-item > a {
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
    padding: 6px 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                text-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s ease !important;
}

/* Active Page Link - 100% Bright Luminous Pure White with Soft Polished Sheen */
.main-header__default > #primary-menu-default > .menu-item.current-menu-item > a,
.main-header__nav .navbar-nav > .menu-item.current-menu-item > a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Default Progressive Gentle White Transparent Gradient Falloff */
.main-header__default > #primary-menu-default > .menu-item:nth-child(1):not(.current-menu-item) > a,
.main-header__nav .navbar-nav > .menu-item:nth-child(1):not(.current-menu-item) > a {
    color: rgba(255, 255, 255, 1) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

.main-header__default > #primary-menu-default > .menu-item:nth-child(2):not(.current-menu-item) > a,
.main-header__nav .navbar-nav > .menu-item:nth-child(2):not(.current-menu-item) > a {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
    opacity: 0.88 !important;
}

.main-header__default > #primary-menu-default > .menu-item:nth-child(3):not(.current-menu-item) > a,
.main-header__nav .navbar-nav > .menu-item:nth-child(3):not(.current-menu-item) > a {
    color: rgba(255, 255, 255, 0.76) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.76) !important;
    opacity: 0.76 !important;
}

.main-header__default > #primary-menu-default > .menu-item:nth-child(4):not(.current-menu-item) > a,
.main-header__nav .navbar-nav > .menu-item:nth-child(4):not(.current-menu-item) > a {
    color: rgba(255, 255, 255, 0.66) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
    opacity: 0.66 !important;
}

.main-header__default > #primary-menu-default > .menu-item:nth-child(5):not(.current-menu-item) > a,
.main-header__nav .navbar-nav > .menu-item:nth-child(5):not(.current-menu-item) > a {
    color: rgba(255, 255, 255, 0.58) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important;
    opacity: 0.58 !important;
}

/* Hover State - Lights Up to 100% Crisp Polished White */
.main-header__default > #primary-menu-default > .menu-item:hover > a,
.main-header__nav .navbar-nav > .menu-item:hover > a,
.main-header__default > #primary-menu-default > .menu-item > a:focus,
.main-header__nav .navbar-nav > .menu-item > a:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.55) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   Navbar Interactive Fluid Bottom Hover Glow (Soft Smooth Purple Shade)
   ========================================================================== */
.toyvora-nav-bottom-glow {
    position: absolute !important;
    bottom: 0px !important;
    left: 0 !important;
    width: 72px !important;
    height: 24px !important;
    border-radius: 50% 50% 0 0 !important;
    background: radial-gradient(ellipse 70px 24px at 50% 100%, rgba(192, 132, 252, 0.65) 0%, rgba(147, 51, 234, 0.35) 40%, rgba(99, 102, 241, 0.12) 65%, transparent 85%) !important;
    filter: blur(6px) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translate3d(var(--glow-x, 0px), 6px, 0) scale(0.85) !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
                width 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1 !important;
    mix-blend-mode: screen !important;
    will-change: transform, opacity, width !important;
}

.toyvora-nav-bottom-glow.is-visible {
    opacity: 1 !important;
    transform: translate3d(var(--glow-x, 0px), 0px, 0) scale(1) !important;
}

.main-header.is-scrolled .toyvora-nav-bottom-glow {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Submenu Dropdown Card (Clean Glassmorphic Panel - Stable Text) */
.main-header__layout .main-header__nav .navbar-nav .sub-menu,
.main-header__default .navbar-nav .sub-menu {
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(102, 51, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px -10px rgba(102, 51, 255, 0.18), 0 6px 16px rgba(0, 0, 0, 0.06) !important;
    padding: 8px !important;
    min-width: 200px !important;
    top: calc(100% + 10px) !important;
    transform: translateX(-50%) translateY(0) !important;
    gap: 2px !important;
}

[data-theme="dark"] .main-header__layout .main-header__nav .navbar-nav .sub-menu,
[data-theme="dark"] .main-header__default .navbar-nav .sub-menu {
    background: rgba(18, 18, 28, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

.main-header__layout .main-header__nav .navbar-nav .sub-menu::after,
.main-header__default .navbar-nav .sub-menu::after {
    display: none !important;
}

.main-header__layout .main-header__nav .navbar-nav .sub-menu li > a,
.main-header__default .navbar-nav .sub-menu li > a {
    font-family: var(--font-primary) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    transform: none !important;
    transition: all 0.2s ease !important;
    line-height: 1.3 !important;
    display: block !important;
}

[data-theme="dark"] .main-header__layout .main-header__nav .navbar-nav .sub-menu li > a,
[data-theme="dark"] .main-header__default .navbar-nav .sub-menu li > a {
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6 !important;
}

.main-header__layout .main-header__nav .navbar-nav .sub-menu li > a:hover,
.main-header__default .navbar-nav .sub-menu li > a:hover {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    background-color: rgba(102, 51, 255, 0.08) !important;
    transform: translateX(3px) !important;
}

/* ==========================================================================
   Action "Menu" Button & Widgets (Strict Single Clean Pill - No Double Box)
   ========================================================================== */
.move .main-header--widgets::before,
.move .main-header--widgets::after,
.main-header--widgets::before,
.main-header--widgets::after,
.move .ms-hw-inner::before,
.move .ms-hw-inner::after,
.ms-hw-inner::before,
.ms-hw-inner::after,
.move .container-menu::before,
.move .container-menu::after,
.container-menu::before,
.container-menu::after,
.move .main-header__btn::before,
.move .main-header__btn::after,
.main-header__btn::before,
.main-header__btn::after,
.main-header__inner::before,
.main-header__inner::after,
.main-header__inner.move::before,
.main-header__inner.move::after,
body[data-theme=dark] .move .main-header--widgets::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 0 !important;
}

.move .main-header--widgets,
.main-header--widgets,
.move .main-header__btn,
.main-header__btn,
.move .container-menu,
.container-menu,
.move .ms-h_w,
.ms-h_w,
.move .ms-hw-inner,
.ms-hw-inner {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-header .container-menu,
.container-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.action-menu,
.main-header .action-menu {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #7c4dff 0%, #a855f7 50%, #6366f1 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 9px 20px !important;
    height: 42px !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35) !important;
    margin: 0 !important;
    outline: none !important;
}

.is-scrolled .action-menu,
.move .action-menu {
    height: 40px !important;
    padding: 8px 18px !important;
}

.action-menu:hover,
.action-menu.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 50%, #818cf8 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6) !important;
}

.action-menu .menu-text,
.action-menu.active .menu-text,
.action-menu .menu-text .menu-text_open,
.action-menu.active .menu-text .menu-text_open,
.action-menu .menu-text span,
.action-menu.active .menu-text span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: var(--font-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: inline-block !important;
}

.action-menu .menu-lines .menu-line {
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* ==========================================================================
   Redesigned Glassmorphic Dropdown Menu Modal (Only opens on click)
   ========================================================================== */
.ms-ma-bg,
.ms-ma-bg::before,
.ms-ma-bg::after,
.main-header__inner .ms-ma-bg,
.main-header__btn .ms-ma-bg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

.close-menu-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99990 !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.close-menu-bg.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.ms-menu-wrapper {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 250px !important;
    width: 260px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
    backdrop-filter: blur(32px) saturate(190%) !important;
    border: 1px solid rgba(102, 51, 255, 0.16) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px -10px rgba(102, 51, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    clip-path: none !important;
    transform-origin: top right !important;
    z-index: 99999 !important;
    padding: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-12px) scale(0.94) !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.35s !important;
}

/* Only open when user explicitly toggles active state */
.action-menu.active ~ .ms-menu-wrapper,
.action-menu.active + .ms-menu-wrapper,
.main-header__inner.menu-is-open .ms-menu-wrapper,
.ms-menu-wrapper.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

[data-theme="dark"] .ms-menu-wrapper {
    background: rgba(18, 18, 28, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7) !important;
}

.ms-menu-wrapper .ms-menu {
    background: transparent !important;
}

.ms-menu-wrapper .ms-menu-container ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ms-menu-wrapper .ms-menu-container .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ms-menu-wrapper .ms-menu-container .menu-item a {
    font-family: var(--font-primary) !important;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    padding: 11px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .ms-menu-wrapper .ms-menu-container .menu-item a,
body[data-theme=dark] .ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a span {
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6 !important;
}

.ms-menu-wrapper .ms-menu-container .menu-item a:hover {
    background-color: rgba(102, 51, 255, 0.1) !important;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    transform: translateX(5px) !important;
}

[data-theme="dark"] .ms-menu-wrapper .ms-menu-container .menu-item a:hover,
body[data-theme=dark] .ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a:hover span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Luminous Scroll Progress Line */
#toyvora-scroll-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 20px !important;
    height: 2.5px !important;
    width: 0% !important;
    max-width: calc(100% - 40px) !important;
    background: linear-gradient(90deg, #6633ff 0%, #a855f7 50%, #7c4dff 100%) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 10px rgba(102, 51, 255, 0.6) !important;
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.4s ease, width 0.1s ease-out !important;
    z-index: 100 !important;
}

.is-scrolled #toyvora-scroll-progress {
    opacity: 1 !important;
}

/* Body Top Spacing */
body {
    padding-top: 0 !important;
}

/* Smooth Scrolling for Parallax */
html {
    scroll-behavior: smooth !important;
}





/* ==========================================================================
   Cards & Section UI Enhancements
   ========================================================================== */
/* Pricing Tables */
.ms-pt-block {
    border-radius: var(--border-radius-lg);
    background: var(--color-surface-card);
    border: 1px solid var(--color-contrast-low);
    padding: 36px 30px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
}

.ms-pt-block:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-toyvora-md);
}

.ms-pt-block .ms-pt--price .price {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-contrast-higher);
}

.ms-pt-block .ms-pt--price .currency {
    color: var(--color-primary);
    font-weight: 700;
}

/* Highlighted Popular Plan */
.ms-pt-block.is-featured,
.elementor-element[data-settings*="featured"] .ms-pt-block {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-toyvora-glow);
}

/* Accordion Enhancements */
.ms_accordion .ms_ac_panel {
    border-radius: var(--border-radius-md);
    background: var(--color-contrast-lower);
    margin-bottom: 14px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.ms_accordion .ms_ac_panel.active,
.ms_accordion .ms_ac_panel:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-toyvora-sm);
}

.ms_accordion .ms_ac--label {
    padding: 20px 24px;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--color-contrast-higher);
}

.ms_accordion .ms_ac--icon {
    color: var(--color-primary);
}

/* Badges & Chips */
.toyvora-badge,
.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--border-radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Forms & Input Fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    font-family: var(--font-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    border: 1.5px solid var(--color-contrast-low) !important;
    background: var(--color-contrast-lower) !important;
    color: var(--color-contrast-higher) !important;
    padding: 14px 18px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--color-primary-light) !important;
    outline: none !important;
}

/* ==========================================================================
   Smooth Scrolling & Selection (Optimized for Lenis Engine)
   ========================================================================== */
html.lenis, html.lenis body {
    height: auto !important;
}

.lenis.lenis-smooth, html {
    scroll-behavior: auto !important;
}

::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* ==========================================================================
   Navbar Brand Logo Proportions & Luxury Micro-Interaction
   ========================================================================== */
.main-header__logo,
.main-header__logo .logo-dark,
.main-header__logo .logo-light,
.main-header__logo a,
.main-header__inner .main-header__logo {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    overflow: visible !important;
    max-width: none !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.main-header .main-header__logo .logo-dark {
    display: none !important;
}

.main-header .main-header__logo .logo-light {
    display: flex !important;
}

.main-header__logo {
    cursor: pointer !important;
}

.main-header__logo a,
.main-header__logo img,
.main-header__logo svg,
.main-header__logo .logo-dark img,
.main-header__logo .logo-light img {
    transform: scale(1) translateZ(0) !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
    will-change: transform, opacity !important;
}

.main-header__logo:hover a,
.main-header__logo:hover img,
.main-header__logo:hover svg,
.main-header__logo a:hover img,
.main-header__logo a:hover svg {
    opacity: 1 !important;
    transform: scale(1.04) translateZ(0) !important;
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.7)) !important;
}

.main-header__logo:active a,
.main-header__logo:active img,
.main-header__logo:active svg,
.main-header__logo a:active img,
.main-header__logo a:active svg {
    transform: scale(0.96) translateZ(0) !important;
    opacity: 0.85 !important;
    transition-duration: 0.12s !important;
}

.main-header__logo img,
.main-header__logo svg,
.main-header__logo .logo-dark img,
.main-header__logo .logo-light img,
.ms-logo img {
    height: 49px !important;
    max-height: 52px !important;
    min-height: 44px !important;
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain !important;
    display: block !important;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 768px) {
    .main-header__logo img,
    .main-header__logo svg,
    .main-header__logo .logo-dark img,
    .main-header__logo .logo-light img,
    .ms-logo img {
        height: 46px !important;
        max-height: 48px !important;
        min-height: 42px !important;
        max-width: 200px !important;
    }
}

/* ==========================================================================
   Toyvora Custom Cursor Branding
   ========================================================================== */
:root {
    --cursor-color: #6633ff !important;
}

.ms-cursor-dot,
.ms-cursor-ring {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    z-index: 9999999 !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ms-cursor-ring {
    width: 36px !important;
    height: 36px !important;
    margin: -18px 0 0 -18px !important;
    border: 2px solid rgba(102, 51, 255, 0.75) !important;
    background: rgba(102, 51, 255, 0.05) !important;
    box-shadow: 0 0 16px rgba(102, 51, 255, 0.25) !important;
    transition: transform 0.15s ease-out, border-color 0.25s ease, background 0.25s ease, width 0.25s ease, height 0.25s ease !important;
}

.ms-cursor-dot {
    width: 8px !important;
    height: 8px !important;
    margin: -4px 0 0 -4px !important;
    background-color: #6633ff !important;
    box-shadow: 0 0 8px rgba(102, 51, 255, 0.8) !important;
}

@media (max-width: 768px) {
    .ms-cursor-dot,
    .ms-cursor-ring {
        display: none !important;
    }
}

/* ==========================================================================
   Toyvora High-End Electric Luxury Seamless Gradient Footer
   ========================================================================== */
.ms-footer,
.ms-footer--template,
.footer-container {
    position: relative !important;
    background: linear-gradient(180deg, #0f1026 0%, #090a18 45%, #05050d 100%) !important;
    background-color: #090a18 !important;
    color: #f8fafc !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-family: var(--font-primary) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ms-footer::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 15% !important;
    right: 15% !important;
    width: 70% !important;
    height: 420px !important;
    background: radial-gradient(ellipse at top, rgba(102, 51, 255, 0.24) 0%, rgba(139, 92, 246, 0.1) 45%, transparent 75%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.ms-footer::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 5% !important;
    width: 600px !important;
    height: 320px !important;
    background: radial-gradient(ellipse at bottom, rgba(236, 72, 153, 0.14) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ensure All Internal Elementor Containers are Transparent & Gap-Free */
.ms-footer .footer-container,
.ms-footer .elementor-2314,
.ms-footer .elementor,
.ms-footer .elementor-element {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

.ms-footer .elementor-2314 > .e-con,
.ms-footer .elementor-2314 > .elementor-container,
.ms-footer > .footer-container > .elementor > .e-con:first-child,
.ms-footer .elementor-section:first-child {
    margin-top: 0 !important;
}

/* Footer Giant Gradient Headline */
.ms-footer .elementor-widget-heading h1,
.ms-footer .elementor-widget-heading h2,
.ms-footer .elementor-widget-heading h3,
.ms-footer h1,
.ms-footer h2,
.ms-footer h3 {
    background: linear-gradient(135deg, #ffffff 20%, #a855f7 70%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

/* Footer Column Titles ("Social Media", "Contact") */
.ms-footer .elementor-widget-heading p,
.ms-footer .elementor-widget-heading h4,
.ms-footer .elementor-widget-heading h5,
.ms-footer .elementor-widget-heading h6,
.ms-footer .ms-footer__title {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
}

/* Align Social Media and Contact Column Tops at Exact Same Baseline */
.ms-footer .elementor-element-9040abd {
    align-items: flex-end !important;
}
.ms-footer .elementor-element-b7fdb1f,
.ms-footer .elementor-element-68ec9eb {
    height: auto !important;
    min-height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: flex-end !important;
}
.ms-footer .elementor-element-340553f,
.ms-footer .elementor-element-a4c9e24 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.ms-footer .elementor-element-340553f .elementor-heading-title,
.ms-footer .elementor-element-a4c9e24 .elementor-heading-title {
    margin: 0 !important;
    padding: 0 0 2px 0 !important;
    line-height: 1 !important;
}
.ms-footer .elementor-element-74b5597 {
    margin-top: -6px !important;
    padding-top: 0 !important;
}
.ms-footer .elementor-element-1fb8920 {
    margin-top: -8.5px !important;
    padding-top: 0 !important;
}

/* Footer Social Media Icons */
.ms-footer .ms-social-icons a,
.ms-footer .elementor-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    fill: #cbd5e1 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ms-footer .ms-social-icons a svg,
.ms-footer .elementor-social-icon svg {
    fill: #cbd5e1 !important;
    color: #cbd5e1 !important;
}

.ms-footer .ms-social-icons a:hover,
.ms-footer .elementor-social-icon:hover {
    background: #6633ff !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transform: translateY(-4px) scale(1.15) !important;
    box-shadow: 0 8px 24px rgba(102, 51, 255, 0.5) !important;
}

/* Footer Direct Contact Email Link ("hello@toyvora.com") — No underline / No grey line */
.ms-footer a[href^="mailto"]::before,
.ms-footer a[href^="mailto"]::after,
.ms-footer .ms-simple-link a::before,
.ms-footer .ms-simple-link a::after,
/* Footer Direct Contact Email Link ("hello@toyvora.com") — Reverted Purple Underline & Baseline Alignment */
.ms-footer a[href^="mailto"]::before,
.ms-footer a[href^="mailto"]::after,
.ms-footer .ms-simple-link a::before,
.ms-footer .ms-simple-link a::after,
.ms-footer .ms-sl::before,
.ms-footer .ms-sl::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

.ms-footer .elementor-element-1fb8920 {
    margin-top: -8.5px !important;
}

.ms-footer a[href^="mailto"],
.ms-footer .ms-simple-link a,
.ms-footer .ms-sl {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #a855f7 !important;
    -webkit-text-fill-color: #a855f7 !important;
    border-bottom: 2px solid #a855f7 !important;
    box-shadow: none !important;
    display: inline-block !important;
    line-height: 1.15 !important;
    padding-bottom: 2px !important;
    transition: all 0.3s ease !important;
}

.ms-footer a[href^="mailto"]:hover,
.ms-footer .ms-simple-link a:hover,
.ms-footer .ms-sl:hover {
    transform: translateX(4px) !important;
    filter: drop-shadow(0 0 12px #a855f7) !important;
    opacity: 0.9 !important;
}

/* Footer Marquee Text Ticker — correct rendered classes */
.ms-footer .ms-text-ticker .ms-tt__text,
.ms-footer .ms-tt .ms-tt__text,
.ms-footer .elementor-widget-ms_text_ticker .ms-tt__text,
.ms-footer .ms_text_ticker,
.ms-footer .ms_text_ticker li,
.ms-footer .ms-ticker span,
.ms-footer .ms_text_ticker ul li {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(4.2rem, 5.2vw, 5.8rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.ms-footer .ms-text-ticker .ms-tt__text.img,
.ms-footer .elementor-widget-ms_text_ticker .ms-tt__text.img,
.ms-footer .ms_text_ticker .ms-tt__text.img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 40px !important;
    height: auto !important;
    max-height: 100% !important;
}

.ms-footer .ms-text-ticker .ms-tt__text img,
.ms-footer .ms-text-ticker .ms-tt__text svg,
.ms-footer .elementor-widget-ms_text_ticker .ms-tt__text img,
.ms-footer .elementor-widget-ms_text_ticker .ms-tt__text svg,
.ms-footer .ms_text_ticker img,
.ms-footer .ms_text_ticker svg {
    display: inline-block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 64px !important;
    filter: none !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

.toyvora-mob-br {
    display: none !important;
}

@media (max-width: 768px) {
    .ms-footer .ms-text-ticker .ms-tt__text,
    .ms-footer .ms-tt .ms-tt__text,
    .ms-footer .elementor-widget-ms_text_ticker .ms-tt__text,
    .ms-footer .ms_text_ticker,
    .ms-footer .ms_text_ticker li,
    .ms-footer .ms-ticker span,
    .ms-footer .ms_text_ticker ul li {
        font-size: 38px !important;
    }
    .ms-footer .ms-text-ticker .ms-tt__text.img,
    .ms-footer .elementor-widget-ms_text_ticker .ms-tt__text.img,
    .ms-footer .ms_text_ticker .ms-tt__text.img {
        display: inline-flex !important;
        margin: 0 20px !important;
    }
    .ms-footer .ms-text-ticker .ms-tt__text img,
    .ms-footer .ms-text-ticker .ms-tt__text svg,
    .ms-footer .elementor-widget-ms_text_ticker .ms-tt__text img,
    .ms-footer .elementor-widget-ms_text_ticker .ms-tt__text svg,
    .ms-footer .ms_text_ticker img,
    .ms-footer .ms_text_ticker svg {
        display: inline-block !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: none !important;
    }

    /* Mobile Spacing & Balanced Vertical Rhythm */
    .ms-footer .elementor-element-be898e6 {
        row-gap: 24px !important;
        gap: 24px !important;
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }

    /* 1. Main Column Stack Spacing */
    .ms-footer .elementor-element-9040abd {
        row-gap: 20px !important;
        gap: 20px !important;
        margin: 0 !important;
    }

    /* 2. Social Media Group & Contact Group internal gaps */
    .ms-footer .elementor-element-b7fdb1f,
    .ms-footer .elementor-element-68ec9eb {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        row-gap: 3px !important;
        gap: 3px !important;
    }

    .ms-footer .elementor-element-340553f,
    .ms-footer .elementor-element-a4c9e24 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .ms-footer .elementor-element-340553f .elementor-heading-title,
    .ms-footer .elementor-element-a4c9e24 .elementor-heading-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 0.9rem !important;
    }

    .ms-footer .elementor-element-74b5597,
    .ms-footer .elementor-element-1fb8920 {
        width: 100% !important;
        text-align: left !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .ms-footer .elementor-element-74b5597 .elementor-widget-container,
    .ms-footer .elementor-element-74b5597 ul,
    .ms-footer .elementor-element-1fb8920 .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    .ms-footer .elementor-element-1fb8920 a {
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* 3. Scrolling Ticker: Exactly Centered between Email and Copyright */
    .ms-footer .elementor-element-a9c3c24,
    .ms-footer .elementor-element-c4e76c6 {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Bottom Credits Container */
    .toyvora-mob-br {
        display: block !important;
        content: "" !important;
        height: 0 !important;
    }

    .ms-footer .elementor-element-abc4a76 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: -20px !important;
        padding: 0 20px 24px 20px !important;
    }

    .ms-footer .elementor-element-3086738 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ms-footer .elementor-element-945fdfb {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ms-footer .elementor-element-945fdfb .elementor-heading-title {
        text-align: center !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        line-height: 1.65 !important;
        font-size: 0.78rem !important;
        white-space: normal !important;
        word-break: normal !important;
        display: block !important;
    }
}

/* Footer Bottom Row: Align Next-Gen tagline with the Contact element left edge */
.ms-footer .elementor-element-abc4a76 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
.ms-footer .elementor-element-3086738 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}
.ms-footer .elementor-element-4646d29 {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

/* Footer Copyright — by Elementor element ID (overrides h2 gradient) */
.ms-footer .elementor-element-945fdfb,
.ms-footer .elementor-element-945fdfb .elementor-widget-container {
    overflow: visible !important;
}
.ms-footer .elementor-element-945fdfb h2,
.ms-footer .elementor-element-945fdfb .elementor-heading-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    padding-bottom: 5px !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
}

/* Footer Tagline — by Elementor element ID (overrides h2 gradient) */
.ms-footer .elementor-element-7615c6f,
.ms-footer .elementor-element-7615c6f .elementor-widget-container {
    overflow: visible !important;
}
.ms-footer .elementor-element-7615c6f h2,
.ms-footer .elementor-element-7615c6f .elementor-heading-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #ec4899 !important;
    -webkit-text-fill-color: #ec4899 !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    padding-bottom: 5px !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important;
    width: 100% !important;
}
.ms-footer .elementor-element-7615c6f .toyvora-tagline-accent {
    color: #ec4899 !important;
    -webkit-text-fill-color: #ec4899 !important;
    opacity: 0.7 !important;
}

/* ==========================================================================
   Send to Top Button (10px Squircle + Rotating Fading Orange Outline Beam)
   ========================================================================== */
.back-to-top {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    left: auto !important;
    z-index: 99999 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.88) !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.back-to-top.active,
.back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        width: 42px !important;
        height: 42px !important;
    }
    .back-to-top .ms-btt--inner {
        width: 42px !important;
        height: 42px !important;
    }
}

.back-to-top .ms-btt--inner {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    background: #6633ff !important;
    box-shadow: 0 6px 20px rgba(102, 51, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* Rotating Fading Orange Outline Beam on Hover */
.back-to-top .ms-btt--inner::before {
    content: "" !important;
    position: absolute !important;
    top: -65% !important;
    left: -65% !important;
    width: 230% !important;
    height: 230% !important;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 230deg,
        rgba(255, 120, 0, 0.15) 270deg,
        rgba(255, 140, 0, 0.6) 310deg,
        #ff6b00 345deg,
        #ffa31a 360deg
    ) !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    animation: toyvoraOrangeBeam 1.3s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.back-to-top:hover .ms-btt--inner {
    border-color: rgba(255, 140, 0, 0.4) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 0, 0.3), 0 4px 16px rgba(102, 51, 255, 0.4) !important;
}

.back-to-top:hover .ms-btt--inner::before {
    opacity: 1 !important;
}

@keyframes toyvoraOrangeBeam {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Inner Surface Mask so Orange Beam appears strictly along the edge */
.back-to-top .ms-btt--inner::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    background: #6633ff !important;
    border-radius: 8px !important;
    z-index: 2 !important;
    transition: background 0.3s ease !important;
}

.back-to-top:hover .ms-btt--inner::after {
    background: #5829d6 !important;
}

.back-to-top:active .ms-btt--inner::after {
    background: #4a21ba !important;
}

/* Pure White Unrotated Tayvora Icon (Elevated above rotating beam) */
.back-to-top svg,
.back-to-top .ms-btt--inner svg,
.back-to-top.active .ms-btt--inner svg,
.tayvora-btt-icon {
    position: relative !important;
    z-index: 3 !important;
    width: 20px !important;
    height: 20px !important;
    transform: none !important;
    -webkit-transform: none !important;
    rotate: 0deg !important;
    scale: 1 !important;
    fill: #ffffff !important;
    color: #ffffff !important;
    display: block !important;
    transition: opacity 0.25s ease !important;
}

.back-to-top svg path,
.back-to-top .ms-btt--inner svg path,
.tayvora-btt-icon path {
    fill: #ffffff !important;
    color: #ffffff !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   Branded Accent Headings (Replaced Old Yellow #FCCA73)
   ========================================================================== */
.elementor-element-f8f1c52 .elementor-heading-title,
.elementor-element-858312f .ms-ts__title {
    color: #818cf8 !important;
    background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

/* ==========================================================================
   Compact Portfolio Filter Capsule
   ========================================================================== */
.filter-nav--expanded .filter-nav__list,
.portfolio_wrap .filter-nav__list,
.portfolio_wrap[data-filter=s_2] .subnav .subnav__container .filter-nav__list {
    background: rgba(245, 246, 250, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 9999px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(102, 51, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(102, 51, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 auto !important;
    max-width: 96vw !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.filter-nav--expanded .filter-nav__list::-webkit-scrollbar,
.portfolio_wrap .filter-nav__list::-webkit-scrollbar {
    display: none !important;
}

[data-theme="dark"] .filter-nav--expanded .filter-nav__list,
[data-theme="dark"] .portfolio_wrap .filter-nav__list,
[data-theme="dark"] .portfolio_wrap[data-filter=s_2] .subnav .subnav__container .filter-nav__list {
    background: rgba(14, 15, 26, 0.92) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(102, 51, 255, 0.14) !important;
}

.portfolio_wrap .subnav {
    margin: 0 auto 34px auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.filter-nav__btn,
.portfolio_wrap .subnav .filter-nav__btn,
.portfolio_wrap .filter-nav__item .filter-nav__btn,
button.filter-nav__btn {
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    height: 36px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide redundant GET IN TOUCH section on contact page */
body.page-id-4727 .tayvora-git-section,
body.contact .tayvora-git-section,
body[class*="contact"] .tayvora-git-section {
    display: none !important;
}

/* ==========================================================================
   Contact Form 7 & Submit Button Luxury Styling
   ========================================================================== */
.ms-cf--bottom {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
}

.ms-cf--bottom .form-quiz {
    display: flex !important;
    align-items: center !important;
}

.ms-cf--bottom .form-quiz label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

[data-theme="dark"] .ms-cf--bottom .form-quiz label,
.dark-mode .ms-cf--bottom .form-quiz label {
    color: #e2e8f0 !important;
}

.ms-cf--bottom .form-quiz input.wpcf7-quiz {
    width: 130px !important;
    height: 48px !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    font-weight: 600 !important;
    color: inherit !important;
}

[data-theme="dark"] .ms-cf--bottom .form-quiz input.wpcf7-quiz {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.ms-contact-form-7 .wpcf7-btn,
.wpcf7-btn {
    display: inline-flex !important;
    position: relative !important;
    height: 48px !important;
    min-width: 140px !important;
    width: auto !important;
    border-radius: 9999px !important;
    background: #6633ff !important;
    background-color: #6633ff !important;
    box-shadow: 0 4px 18px rgba(102, 51, 255, 0.35) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: none !important;
    transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease !important;
    vertical-align: middle !important;
}

.ms-contact-form-7 .wpcf7-btn:hover,
.wpcf7-btn:hover {
    background: #5329e0 !important;
    background-color: #5329e0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 51, 255, 0.48) !important;
}

.wpcf7-btn input[type="submit"].wpcf7-submit {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpcf7-btn .btn-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    pointer-events: none !important;
    margin: 0 !important;
    background: transparent !important;
}

.wpcf7-btn .f-btn-l {
    position: absolute !important;
    left: -28px !important;
    width: 20px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
    z-index: 2 !important;
    transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}

.wpcf7-btn:hover .f-btn-l {
    left: 20px !important;
    opacity: 1 !important;
    background: transparent !important;
}

.wpcf7-btn .f-btn-r {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 26px !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 9999px !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1 !important;
}

.wpcf7-btn:hover .f-btn-r {
    transform: translateX(10px) !important;
    background: transparent !important;
}

.wpcf7-btn .btn-r_icon {
    width: 16px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 10px !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

.wpcf7-btn:hover .btn-r_icon {
    transform: translateX(8px) !important;
    opacity: 0 !important;
}

.wpcf7-btn span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.wpcf7-btn svg {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
}

.wpcf7-btn svg path {
    fill: #ffffff !important;
}

/* Universal Ticker Icon & Arrow Brand Color */
.ms-text-ticker .ms-tt__text.img img,
.elementor-widget-ms_text_ticker .ms-tt__text.img img,
.elementor-element-4f01190 img,
.elementor-element-b5ef424 img {
    filter: invert(48%) sepia(85%) saturate(3000%) hue-rotate(225deg) brightness(100%) contrast(105%) !important;
}

/* ==========================================================================
   Portfolio Cards Text & Category Layout (No Overflow / No Awkward Wrap)
   ========================================================================== */
.portfolio_wrap .grid-item-p .ms-p-content,
.ms-projects .grid-item-p .ms-p-content,
.grid-item-p .ms-p-content {
    width: 100% !important;
    padding-top: 14px !important;
}

.portfolio_wrap .grid-item-p .ms-p-content__inner,
.ms-projects .grid-item-p .ms-p-content__inner,
.grid-item-p .ms-p-content__inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

.portfolio_wrap .grid-item-p .ms-p-content h3,
.ms-projects .grid-item-p .ms-p-content h3,
.grid-item-p .ms-p-content h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 1.12rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    color: #111827 !important;
}

[data-theme="dark"] .portfolio_wrap .grid-item-p .ms-p-content h3,
[data-theme="dark"] .ms-projects .grid-item-p .ms-p-content h3,
[data-theme="dark"] .grid-item-p .ms-p-content h3 {
    color: #ffffff !important;
}

.portfolio_wrap .grid-item-p .ms-p-content .ms-p-cat,
.ms-projects .grid-item-p .ms-p-content .ms-p-cat,
.grid-item-p .ms-p-content .ms-p-cat {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #818cf8 !important;
    margin-top: 2px !important;
    display: inline-block !important;
}

/* Mobile Optimization: Hero Section Harmony & Visual Polish */
@media (max-width: 768px) {
    .elementor-1234 .elementor-element-572d490 {
        padding-bottom: 45px !important;
    }

    /* 1. Header Container & Proportional Headline */
    .elementor-1234 .elementor-element-84e73b0 {
        min-height: auto !important;
        height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .elementor-1234 .elementor-element-ac931b8 {
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .toyvora-hero-headline {
        font-size: clamp(1.75rem, 7vw, 2.4rem);
        line-height: 1.22;
        letter-spacing: -0.02em;
        text-align: center;
        margin-bottom: 12px;
    }

    .toyvora-hero-description,
    .toyvora-hero-description p {
        font-size: 14.5px;
        line-height: 1.58;
        text-align: center;
    }

    /* 2. Visual Showcase Slider — Single Card Centered & Impactful */
    .elementor-1234 .elementor-element-4487e05,
    .elementor-1234 .elementor-element-51580b3,
    .elementor-1234 .elementor-element-51580b3 .ms-slider,
    .elementor-1234 .elementor-element-51580b3 .swiper,
    .elementor-1234 .elementor-element-51580b3 .swiper-container {
        height: 230px !important;
        min-height: 230px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .elementor-1234 .elementor-element-4487e05 {
        margin-top: 10px !important;
        margin-bottom: 16px !important;
    }

    .elementor-1234 .elementor-element-51580b3 .swiper-slide {
        width: 100% !important;
        height: 230px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .elementor-1234 .elementor-element-51580b3 .ms-slider--img {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
    }

    .elementor-1234 .elementor-element-51580b3 .ms-slider--img img {
        height: 215px !important;
        max-height: 215px !important;
        width: auto !important;
        max-width: 85vw !important;
        object-fit: contain !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
        margin: 0 auto !important;
    }

    /* 3. Hide SCROLL element & polish Statement typography */
    .elementor-1234 .elementor-element-b76e49d,
    .elementor-element-b76e49d {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .elementor-1234 .elementor-element-25a51c1 {
        margin-top: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        justify-content: center !important;
    }

    .elementor-1234 .elementor-element-f0a91eb {
        max-width: 380px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .elementor-1234 .elementor-element-becbac9 p,
    .elementor-1234 .elementor-element-f0a91eb p {
        font-size: 14.5px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        color: #64748b !important;
        letter-spacing: -0.01em !important;
    }

    /* 4. CTA Buttons — Perfectly balanced & responsive */
    .elementor-1234 .elementor-element-877cc44 {
        margin-top: 22px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-1234 .elementor-element-7a229ff,
    .elementor-1234 .elementor-element-9beddec {
        flex: 1 1 0 !important;
        max-width: 165px !important;
        width: 100% !important;
    }

    .elementor-1234 .elementor-element-7a229ff .btn,
    .elementor-1234 .elementor-element-9beddec .btn {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        border-radius: 9999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .elementor-1234 .elementor-element-7a229ff .ms-btn__text,
    .elementor-1234 .elementor-element-9beddec .ms-btn__text {
        font-size: 13.5px !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   Eliminate Rogue Mobile Header Dropdown Black Box
   ========================================================================== */
    @media (max-width: 1024px) {
    #main-header-nav,
    .main-header__nav,
    .main-header__default,
    .main-header__layout .main-header__nav,
    .main-header .main-header__nav.main-header__default,
    .js .main-header__nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }
}

/* ==========================================================================
   Portfolio Card Title Layout Stability (Prevent Hover Jumps & Word Wrapping)
   ========================================================================== */
.portfolio_wrap .portfolio-feed .item--inner .ms-p-content h3,
.portfolio_wrap .portfolio-feed .item--inner:hover .ms-p-content h3,
.grid-item-p .ms-p-content h3,
.grid-item-p:hover .ms-p-content h3,
.ms-projects .grid-item-p .ms-p-content h3,
.ms-projects .grid-item-p:hover .ms-p-content h3 {
    letter-spacing: -0.02em !important;
    transform: none !important;
    transition: color 0.3s ease !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.portfolio_wrap .grid-item-p .ms-p-content__inner,
.grid-item-p .ms-p-content__inner,
.ms-projects .grid-item-p .ms-p-content__inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ==========================================================================
   Featured Projects (Top 3 Cards on Homepage) - Title at Top, Category Badge Anchored to Bottom Edge
   ========================================================================== */
.elementor-1234 .elementor-element-fp_projects_widget,
.elementor-element-fp_projects_widget {
    width: 100% !important;
}

.elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .item--inner,
.elementor-element-fp_projects_widget .grid-item-p .item--inner,
.elementor-1234 .elementor-element-fp_projects_widget .grid-item-p a,
.elementor-element-fp_projects_widget .grid-item-p a {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

.elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content,
.elementor-element-fp_projects_widget .grid-item-p .ms-p-content {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(8, 8, 16, 0.72) 0%, rgba(8, 8, 16, 0.05) 40%, rgba(8, 8, 16, 0.1) 60%, rgba(8, 8, 16, 0.82) 100%) !important;
    z-index: 4 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner,
.elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    gap: 0 !important;
}

.elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner h3,
.elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner h3,
.elementor-1234 .elementor-element-fp_projects_widget h3,
.elementor-element-fp_projects_widget h3 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.2rem, 1.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    margin: 0 !important;
    color: #ffffff !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner .ms-p-cat,
.elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner .ms-p-cat,
.elementor-1234 .elementor-element-fp_projects_widget .ms-p-cat,
.elementor-element-fp_projects_widget .ms-p-cat {
    position: absolute !important;
    bottom: 24px !important;
    left: 24px !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    align-self: flex-start !important;
    text-align: left !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #c084fc !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    height: auto !important;
    background: rgba(15, 12, 29, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    z-index: 6 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

@media (max-width: 768px) {
    .elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content,
    .elementor-element-fp_projects_widget .grid-item-p .ms-p-content {
        padding: 20px 16px !important;
    }

    .elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner h3,
    .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner h3,
    .elementor-1234 .elementor-element-fp_projects_widget h3,
    .elementor-element-fp_projects_widget h3 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    .elementor-1234 .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner .ms-p-cat,
    .elementor-element-fp_projects_widget .grid-item-p .ms-p-content__inner .ms-p-cat,
    .elementor-1234 .elementor-element-fp_projects_widget .ms-p-cat,
    .elementor-element-fp_projects_widget .ms-p-cat {
        bottom: 16px !important;
        left: 16px !important;
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
}

/* ==========================================================================
   Tayvora About Us Light Luxury & Seamless Gradient Architecture (page-4981)
   ========================================================================== */
.page-id-4981 {
    background-color: #ffffff !important;
    overflow-x: clip !important;
}

html:has(.page-id-4981),
body.page-id-4981 {
    overflow-x: clip !important;
}

.page-id-4981 .ms-main,
.page-id-4981 .ms-page-content,
.page-id-4981 .elementor-4981 {
    background-color: #ffffff !important;
    color: #334155 !important;
    overflow-x: clip !important;
}

/* Hero Section (Reference 1) */
.page-id-4981 [data-id="about_hero_sec"] {
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, rgba(248, 249, 252, 0.95) 70%), #0c0c12 !important;
    position: relative !important;
    overflow: hidden !important;
}

.page-id-4981 [data-id="about_hero_sec"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.6;
    pointer-events: none;
}

.page-id-4981 [data-id="hero_headline"] .elementor-heading-title {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

.page-id-4981 .about-hero-purple-text {
    color: #a78bfa !important;
    display: inline-block !important;
}

/* Core Capabilities & Narrative Section (Reference 2) */
.page-id-4981 [data-id="about_capabilities_sec"] {
    background: linear-gradient(180deg, #f8f9fc 0%, #faf5ff 35%, #f3e8ff 70%, #ffffff 100%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-bottom: none !important;
    position: relative !important;
    padding-bottom: 40px !important;
}

.page-id-4981 [data-id="ab_cap_tag"] .elementor-heading-title {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Giant Kinetic Ticker (Reference 2) */
.tayvora-kinetic-ticker-wrap {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 10px 0 !important;
}

.tayvora-kinetic-ticker {
    display: inline-flex !important;
    align-items: center !important;
    animation: tayvoraMarquee 28s linear infinite !important;
    font-size: clamp(38px, 5vw, 68px) !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: #0f172a !important;
    text-transform: capitalize !important;
}

.tayvora-kinetic-ticker .ticker-star {
    color: #8b5cf6 !important;
    font-style: normal !important;
    margin: 0 20px !important;
    font-size: 0.85em !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

@keyframes tayvoraMarquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.page-id-4981 [data-id="ab_portfolio_btn"] a.elementor-button,
.page-id-4981 [data-id="ab_portfolio_btn"] .elementor-button {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
    padding: 14px 34px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    box-shadow: 0 6px 20px -4px rgba(99, 102, 241, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.page-id-4981 [data-id="ab_portfolio_btn"] a.elementor-button:hover,
.page-id-4981 [data-id="ab_portfolio_btn"] .elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px -4px rgba(99, 102, 241, 0.6) !important;
}

/* Metrics Bar (Light Luxury) */
.page-id-4981 [data-id="about_metrics_sec"] {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    box-shadow: 0 16px 36px -8px rgba(99, 102, 241, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.04) !important;
    border-radius: 20px !important;
    margin-top: 0px !important;
    margin-bottom: 80px !important;
    position: relative !important;
    z-index: 2 !important;
}

.page-id-4981 [data-id="about_metrics_sec"] > .e-con-inner,
.page-id-4981 [data-id="about_metrics_sec"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .page-id-4981 [data-id="about_metrics_sec"] .elementor-element[data-id^="metric_col_"] {
        flex: 1 1 25% !important;
        max-width: 25% !important;
    }
}

@media (max-width: 767px) {
    .page-id-4981 [data-id="about_metrics_sec"] {
        padding: 28px 16px !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: calc(100% - 32px) !important;
        box-sizing: border-box !important;
    }
    .page-id-4981 [data-id="about_metrics_sec"] > .e-con-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        gap: 24px 16px !important;
        justify-items: center !important;
        align-items: center !important;
    }
    .page-id-4981 [data-id="about_metrics_sec"] .elementor-element[data-id^="metric_col_"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .page-id-4981 [data-id^="m_num_"] .elementor-heading-title {
        font-size: 24px !important;
        letter-spacing: -0.5px !important;
        text-align: center !important;
    }
    .page-id-4981 [data-id^="m_lbl_"] .elementor-heading-title {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}

/* Methodology Section (Light Luxury) */
.page-id-4981 [data-id="am_tag"] .elementor-heading-title,
.page-id-4981 [data-id="at_tag"] .elementor-heading-title {
    color: #6366f1 !important;
    font-weight: 700 !important;
}

.page-id-4981 [data-id="am_title"] .elementor-heading-title,
.page-id-4981 [data-id="at_title"] .elementor-heading-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Ensure sticky scroll works through parent Elementor containers */
.page-id-4981 .elementor-4981,
.page-id-4981 .ms-main,
.page-id-4981 .ms-page-content,
.page-id-4981 [data-id="about_method_sec"],
.page-id-4981 [data-id="about_method_sec"] > .e-con-inner,
.page-id-4981 [data-id="about_method_deck_widget"] {
    overflow: visible !important;
}

/* ==========================================================================
   Tayvora Modern Bold Sleek Track-Based Scroll Deck (1 Card at a Time)
   ========================================================================== */
.tayvora-method-scroll-track {
    position: relative !important;
    width: 100% !important;
    height: 350vh !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.tayvora-method-sticky-frame {
    position: sticky !important;
    top: 105px !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 0 20px 0 !important;
    box-sizing: border-box !important;
}

.tayvora-method-head-inner {
    text-align: center !important;
    margin-bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

.am-tag-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #6366f1 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.am-title-text {
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.6px !important;
}

@media (max-width: 767px) {
    .am-title-text {
        font-size: 24px !important;
    }
}

.tayvora-deck-container {
    position: relative !important;
    width: 100% !important;
    height: 480px !important;
    min-height: 480px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 32px !important;
}

@media (max-width: 900px) {
    .tayvora-deck-container {
        height: auto !important;
        min-height: 580px !important;
    }
}

.tayvora-stack-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 32px !important;
    padding: 44px 50px !important;
    box-shadow: 
        0 20px 50px -15px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(99, 102, 241, 0.06) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 44px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    will-change: transform !important;
    overflow: hidden !important;
}

.tayvora-stack-card:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: 
        0 25px 60px -15px rgba(99, 102, 241, 0.2),
        0 0 0 1px rgba(99, 102, 241, 0.1) !important;
}

/* Left Side Content */
.tsc-left {
    flex: 1 1 55% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.tsc-step {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #6366f1 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.tsc-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.6px !important;
}

.tsc-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin: 0 !important;
}

.tsc-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-top: 4px !important;
}

.tsc-pill {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    transition: all 0.25s ease !important;
}

.tayvora-stack-card:hover .tsc-pill {
    background: #f5f3ff !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    color: #6366f1 !important;
}

/* Right Side Visual Image */
.tsc-right {
    flex: 0 0 45% !important;
    max-width: 440px !important;
    width: 100% !important;
}

.tsc-img-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10.5 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.tsc-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tayvora-stack-card:hover .tsc-img-wrap img {
    transform: scale(1.06) !important;
}

.tsc-img-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(15, 23, 42, 0.2) 100%) !important;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    .tayvora-stack-card {
        flex-direction: column-reverse !important;
        padding: 30px 24px !important;
        gap: 20px !important;
        border-radius: 24px !important;
    }
    .tsc-right {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .tsc-title {
        font-size: 22px !important;
    }
    .tsc-desc {
        font-size: 14px !important;
    }
}

/* Team Member Cards (Light Luxury) */
.page-id-4981 [data-id^="tm_col_"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.page-id-4981 [data-id^="tm_col_"]:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: 0 20px 35px -10px rgba(99, 102, 241, 0.12) !important;
}

.page-id-4981 .ms-tm--box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.page-id-4981 .ms-tm--img {
    width: 100% !important;
    aspect-ratio: 4/4.5 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

.page-id-4981 .ms-tm--img img {
    border-radius: 14px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.page-id-4981 .ms-tm--content {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 16px 0 4px 0 !important;
    background: transparent !important;
    text-align: left !important;
}

.page-id-4981 .ms-tm--title {
    color: #0f172a !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.page-id-4981 .ms-tm--function {
    color: #6366f1 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.page-id-4981 .ms-tm--socials {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 3 !important;
}

.page-id-4981 .ms-s-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease !important;
}

.page-id-4981 .ms-s-icon:hover {
    background: #6366f1 !important;
}

.page-id-4981 .ms-s-icon svg {
    width: 12px !important;
    height: 12px !important;
    fill: #ffffff !important;
}

/* ==========================================================================
   GLOBAL GET IN TOUCH CONTACT FORM & SEAMLESS FOOTER BLEND
   ========================================================================== */
.tayvora-git-section {
    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 15%, #d8c5fe 38%, #6633ff 60%, #30107e 82%, #0f1026 100%) !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 120px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

@media (max-width: 767px) {
    .tayvora-git-section {
        padding-top: 45px !important;
        padding-bottom: 80px !important;
    }
}

/* Seamless blend into dark footer: remove footer border-top and gap globally */
.ms-footer {
    border-top: none !important;
    margin-top: 0 !important;
    background: #0f1026 !important;
    background-image: linear-gradient(180deg, #0f1026 0%, #090a18 45%, #05050d 100%) !important;
}

.tayvora-git-card {
    background: #ffffff !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    padding: 52px 56px !important;
    max-width: 1140px !important;
    width: 92% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    gap: 48px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 991px) {
    .tayvora-git-card {
        grid-template-columns: 1fr !important;
        padding: 36px 24px !important;
        gap: 36px !important;
    }
}

/* Left Column */
.git-tag {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.git-bullet {
    font-size: 10px !important;
    color: #6633ff !important;
}

.git-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
    letter-spacing: -0.8px !important;
    margin: 0 0 20px 0 !important;
}

@media (max-width: 767px) {
    .git-title {
        font-size: 26px !important;
    }
}

.git-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #64748b !important;
    margin: 0 0 28px 0 !important;
}

.git-badges {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.git-badge {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.gb-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #6633ff !important;
    display: inline-block !important;
}

/* Right Column (Form) */
.git-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.git-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

@media (max-width: 600px) {
    .git-row-2 {
        grid-template-columns: 1fr !important;
    }
}

.git-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.git-field label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.git-field input,
.git-field select,
.git-field textarea {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    color: #0f172a !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.git-field input:focus,
.git-field select:focus,
.git-field textarea:focus {
    background: #ffffff !important;
    border-color: #6633ff !important;
    box-shadow: 0 0 0 3px rgba(102, 51, 255, 0.15) !important;
}

.git-field textarea {
    resize: vertical !important;
    min-height: 95px !important;
}

.git-submit-btn {
    background: linear-gradient(135deg, #6633ff, #8b5cf6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 52px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px -4px rgba(102, 51, 255, 0.45) !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.git-submit-btn:hover {
    background: linear-gradient(135deg, #5522ee, #7c3aed) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px -4px rgba(102, 51, 255, 0.65) !important;
}

/* ==========================================================================
   Hero Section Showcase Slider — Rounded Squircle Frames
   ========================================================================== */
.elementor-element-51580b3 .ms-slider.default-slider .ms-slider--img img,
.elementor-element-51580b3 .ms-slider .swiper-slide,
.elementor-element-51580b3 .ms-slider--img,
.elementor-element-51580b3 .swiper-material-wrapper,
.elementor-element-51580b3 .ms-material-image,
.elementor-element-51580b3 .swiper-slide img {
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   About Us Page — Leadership Team Cards Micro-Interactions
   ========================================================================== */
.elementor-element-tm_card_1,
.elementor-element-tm_card_2,
.elementor-element-tm_card_3 {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
    cursor: pointer !important;
}

.elementor-element-tm_card_1:hover,
.elementor-element-tm_card_2:hover,
.elementor-element-tm_card_3:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25), 0 0 25px rgba(102, 51, 255, 0.18) !important;
}

/* ==========================================================================
   Toyvora Dual-Row Hero Moving Grid Showcase (Full-Width Edge-to-Edge Marquee)
   ========================================================================== */
:root {
    --toyvora-card-width: 290px;
    --toyvora-card-height: 240px;
    --toyvora-card-gap: 24px;
    --toyvora-row-gap: 24px;
    --toyvora-card-radius: 18px;
    --toyvora-row1-duration: 38s;
    --toyvora-row2-duration: 38s;
}

.toyvora-hero-marquee-wrapper {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--toyvora-row-gap, 24px) !important;
    padding: 16px 0 !important;
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    contain: layout paint;
}

.toyvora-marquee-row {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    user-select: none !important;
    display: flex !important;
}

.toyvora-marquee-track {
    display: flex !important;
    width: max-content !important;
    will-change: transform !important;
}

/* Opposing Continuous Animation Directions */
.toyvora-marquee--ltr .toyvora-marquee-track {
    animation: toyvoraMarqueeLTR var(--toyvora-row1-duration, 38s) linear infinite !important;
}

.toyvora-marquee--rtl .toyvora-marquee-track {
    animation: toyvoraMarqueeRTL var(--toyvora-row2-duration, 38s) linear infinite !important;
}

@keyframes toyvoraMarqueeLTR {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes toyvoraMarqueeRTL {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.toyvora-marquee-group {
    display: flex !important;
    align-items: center !important;
    gap: var(--toyvora-card-gap, 24px) !important;
    padding-right: var(--toyvora-card-gap, 24px) !important;
    flex-shrink: 0 !important;
}

/* Uniform 290x240 Card Styling - Pure Image, Zero Outlines */
.toyvora-marquee-card {
    width: var(--toyvora-card-width, 290px) !important;
    height: var(--toyvora-card-height, 240px) !important;
    flex-shrink: 0 !important;
    border-radius: var(--toyvora-card-radius, 18px) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
}

.toyvora-marquee-card:hover {
    transform: translateY(-6px) scale(1.025) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    z-index: 20 !important;
}

.toyvora-card-inner {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    border-radius: var(--toyvora-card-radius, 18px) !important;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.toyvora-card-media {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    border-radius: var(--toyvora-card-radius, 18px) !important;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
}

.toyvora-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: var(--toyvora-card-radius, 18px) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: scale(1) !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.toyvora-marquee-card:hover .toyvora-card-media img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   Expanded Project Overview Modal (Lightbox)
   ========================================================================== */
.toyvora-project-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.toyvora-project-modal.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.toyvora-modal-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 6, 24, 0.82) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    cursor: pointer !important;
}

.toyvora-modal-container {
    position: relative !important;
    width: 100% !important;
    max-width: 780px !important;
    max-height: 90vh !important;
    background: linear-gradient(145deg, rgba(24, 14, 48, 0.95) 0%, rgba(14, 8, 30, 0.98) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px rgba(124, 77, 255, 0.25) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: scale(0.94) translateY(16px) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
}

.toyvora-project-modal.is-active .toyvora-modal-container {
    transform: scale(1) translateY(0) !important;
}

.toyvora-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: all 0.25s ease !important;
    outline: none !important;
}

.toyvora-modal-close:hover {
    background: rgba(239, 68, 68, 0.8) !important;
    border-color: transparent !important;
    transform: rotate(90deg) scale(1.05) !important;
}

.toyvora-modal-body {
    overflow-y: auto !important;
    max-height: calc(90vh - 2px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.toyvora-modal-media {
    width: 100% !important;
    height: 380px !important;
    background: #090514 !important;
    position: relative !important;
    overflow: hidden !important;
}

.toyvora-modal-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.toyvora-modal-info {
    padding: 28px 32px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.toyvora-modal-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.toyvora-modal-tag {
    font-family: var(--font-primary) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #c084fc !important;
}

.toyvora-modal-title {
    font-family: var(--font-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}

.toyvora-modal-desc {
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: rgba(248, 250, 252, 0.8) !important;
    margin: 0 !important;
}

.toyvora-modal-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}

.toyvora-modal-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    font-family: var(--font-primary) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
}

.toyvora-btn--primary {
    background: linear-gradient(135deg, #7c4dff 0%, #a855f7 50%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 18px rgba(124, 77, 255, 0.45) !important;
}

.toyvora-btn--primary:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 50%, #818cf8 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.65) !important;
    color: #ffffff !important;
}

.toyvora-btn--secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.toyvora-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Mobile Responsiveness for Marquee & Modal */
@media screen and (max-width: 768px) {
    :root {
        --toyvora-card-width: 250px;
        --toyvora-card-height: 200px;
        --toyvora-card-gap: 16px;
        --toyvora-row-gap: 16px;
    }
    .toyvora-modal-media {
        height: 260px !important;
    }
    .toyvora-modal-info {
        padding: 20px 22px 24px !important;
    }
    .toyvora-modal-title {
        font-size: 1.25rem !important;
    }
}