/* ==========================================================================
   TRIO EVENTS MANAGEMENT HEADER STYLING
   ========================================================================== */

:root {
    --trio-font-heading: 'Outfit', sans-serif;
    --trio-font-body: 'Inter', sans-serif;

    /* Colors */
    --trio-bg-dark: #0a0d14;
    --trio-bg-header: rgba(10, 13, 20, 0.75);
    --trio-border-color: rgba(255, 255, 255, 0.08);

    --trio-text-primary: #f8fafc;
    --trio-text-secondary: #94a3b8;
    --trio-text-muted: #475569;

    /* Gradient accents */
    --trio-primary-gradient: linear-gradient(135deg, #ED4266 0%, #feb632 100%);
    --trio-accent-color: #feb632;

    /* Heights and spacing */
    --trio-header-height: 80px;
}

/* Base Body Styles for premium showcase */
body {
    background-color: var(--trio-bg-dark);
    color: var(--trio-text-primary);
    font-family: var(--trio-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Header Container */
#header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--trio-header-height);
    background-color: var(--trio-bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--trio-border-color);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#header.trio-light-header {
    --trio-bg-header: #000000;
    --trio-border-color: rgba(255, 255, 255, 0.12);
    --trio-text-primary: #ffffff;
    --trio-text-secondary: #cbd5e1;
    --trio-text-muted: #94a3b8;
}

#header.scrolled {
    background-color: #000000;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

#header.trio-light-header.scrolled {
    background-color: #000000;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.trio-header-container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Design */
.trio-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.trio-logo-link:hover {
    transform: scale(1.02);
}

.trio-logo-img {
    height: 56px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
    /* Render image at high-quality scale (HD) */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.trio-logo-link:hover .trio-logo-img {
    transform: scale(1.02);
}

#header .trio-logo-img {
    height: 68px;
    /* Increased size for header logo */
}


.trio-logo-svg {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
}

.trio-light-header .trio-logo-svg {
    filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.25));
}

.trio-logo-text {
    display: flex;
    flex-direction: column;
}

.trio-brand-name {
    font-family: var(--trio-font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: var(--trio-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.trio-brand-tagline {
    font-family: var(--trio-font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--trio-text-secondary);
    margin-top: 1px;
}

/* Desktop Navigation */
.trio-nav-desktop {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%;
}

.trio-nav-desktop .menu {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

.trio-nav-desktop .menu-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.trio-nav-desktop .menu-item a {
    font-family: var(--trio-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--trio-text-secondary);
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    transition: color 0.2s ease;
}

.trio-nav-desktop .menu-item a:hover,
.trio-nav-desktop .menu-item.current-menu-item a {
    color: var(--trio-text-primary);
}

.trio-nav-desktop .menu-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--trio-primary-gradient);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.trio-nav-desktop .menu-item a:hover::after,
.trio-nav-desktop .menu-item.current-menu-item a::after {
    width: 100%;
}

/* Dropdown navigation styles */
.trio-nav-desktop .menu-item-has-children {
    position: relative;
}

.trio-nav-desktop .sub-menu {
    position: absolute;
    top: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--trio-bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--trio-border-color);
    border-radius: 8px;
    padding: 12px 0;
    min-width: 200px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.trio-nav-desktop .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.trio-nav-desktop .sub-menu .menu-item {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
}

.trio-nav-desktop .sub-menu .menu-item a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--trio-text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.trio-nav-desktop .sub-menu .menu-item a:hover {
    color: var(--trio-text-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

.trio-light-header .trio-nav-desktop .sub-menu .menu-item a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Remove active line decoration for submenu links */
.trio-nav-desktop .sub-menu .menu-item a::after {
    display: none;
}

.trio-dropdown-icon {
    font-size: 9px;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.trio-nav-desktop .menu-item-has-children:hover .trio-dropdown-icon {
    transform: rotate(180deg);
}

/* Right Actions */
.trio-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trio-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--trio-text-secondary);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.trio-search-toggle:hover {
    color: var(--trio-text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.trio-light-header .trio-search-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.trio-search-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trio-btn-cta {
    font-family: var(--trio-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 9999px;
    background: var(--trio-primary-gradient);
    border: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trio-btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    opacity: 0.95;
}

.trio-btn-cta:active {
    transform: translateY(0);
}

/* Search Dropdown Panel */
.trio-search-dropdown {
    position: absolute;
    top: var(--trio-header-height);
    left: 0;
    width: 100%;
    background-color: rgba(10, 13, 20, 0.95);
    border-bottom: 1px solid var(--trio-border-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 24px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
}

.trio-light-header .trio-search-dropdown {
    background-color: rgba(10, 13, 20, 0.98);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.trio-search-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.trio-search-container {
    max-width: 600px;
    margin: 0 auto;
}

.trio-search-form {
    display: flex;
    align-items: center;
    border: 1px solid var(--trio-border-color);
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 99px;
    padding: 4px 6px 4px 18px;
    transition: all 0.3s ease;
    gap: 8px;
}

.trio-light-header .trio-search-form {
    background-color: rgba(255, 255, 255, 0.05);
}

.trio-search-form:focus-within {
    border-color: var(--trio-accent-color);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
}

.trio-light-header .trio-search-form:focus-within {
    background-color: rgba(255, 255, 255, 0.1);
}

.trio-search-input {
    flex-grow: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--trio-font-body);
    font-size: 15px;
    color: var(--trio-text-primary);
    padding: 8px 0;
}

.trio-search-input::placeholder {
    color: var(--trio-text-muted);
}

.trio-search-submit {
    font-family: var(--trio-font-body);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: var(--trio-primary-gradient);
    border: none;
    border-radius: 99px;
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trio-search-submit:hover {
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

/* Hamburger Menu Toggle */
.trio-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 1002;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .trio-menu-toggle {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 10px;
        backdrop-filter: blur(5px);
    }

    .scrolled .trio-menu-toggle {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
    }

    .trio-btn-call {
        display: none !important;
    }
}

.trio-hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}

.trio-hamburger-inner,
.trio-hamburger-inner::before,
.trio-hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--trio-text-primary);
    position: absolute;
    transition: transform 0.2s ease, background-color 0.2s ease, top 0.2s ease, bottom 0.2s ease, opacity 0.2s ease;
    border-radius: 4px;
}

.trio-hamburger-inner {
    top: 50%;
    margin-top: -1px;
}

.trio-hamburger-inner::before {
    content: '';
    top: -8px;
}

.trio-hamburger-inner::after {
    content: '';
    bottom: -8px;
}

.trio-menu-toggle.active .trio-hamburger-inner {
    transform: rotate(45deg);
}

.trio-menu-toggle.active .trio-hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.trio-menu-toggle.active .trio-hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
}

/* Mobile Dropdown Menu List */
.trio-nav-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
    background-color: rgba(10, 13, 20, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    padding: 24px;
    display: none;
    flex-direction: column;
    gap: 32px;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.trio-light-header .trio-nav-mobile {
    background-color: rgba(10, 13, 20, 0.98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.trio-nav-mobile.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.trio-nav-mobile .menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.trio-nav-mobile .menu-item a {
    font-family: var(--trio-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--trio-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
}

.trio-nav-mobile .menu-item a:hover,
.trio-nav-mobile .menu-item.current-menu-item a {
    color: var(--trio-text-primary);
}

.trio-nav-mobile .menu-item-has-children {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trio-nav-mobile .sub-menu {
    padding-left: 16px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 1px solid var(--trio-border-color);
}

.trio-nav-mobile .sub-menu .menu-item a {
    font-size: 16px;
    font-weight: 500;
}

.trio-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.trio-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
}



/* Responsive Rules */
@media (max-width: 900px) {
    .trio-nav-desktop {
        display: none;
    }

    .trio-menu-toggle {
        display: block;
    }

    .trio-nav-mobile {
        display: flex;
    }

    .trio-header-actions {
        gap: 12px;
    }

    .trio-btn-cta {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ==========================================================================
   TRIO EVENTS MANAGEMENT FOOTER STYLING
   ========================================================================== */

.trio-light-footer {
    background-color: #000000;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 64px 0 24px 0;
    font-family: var(--trio-font-body);
}

.trio-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.trio-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 48px;
}

.trio-footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trio-footer-brand .trio-logo-link {
    margin-bottom: 12px;
}

.trio-footer-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

.trio-footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.trio-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* Individual Brand Color Styles (Default State) */
.trio-footer-socials a.trio-social-fb {
    background-color: #e8f2fe;
    color: #1877f2;
    border-color: rgba(24, 119, 242, 0.15);
}

.trio-footer-socials a.trio-social-tw {
    background-color: #f1f5f9;
    color: #0f1419;
    /* X brand black */
    border-color: rgba(15, 20, 25, 0.15);
}

.trio-footer-socials a.trio-social-ig {
    background-color: #fef0f3;
    color: #e1306c;
    border-color: rgba(225, 48, 108, 0.15);
}

.trio-footer-socials a.trio-social-ln {
    background-color: #e6f0fa;
    color: #0a66c2;
    border-color: rgba(10, 102, 194, 0.15);
}

/* Hover States (Inverted Brand Color Layouts) */
.trio-footer-socials a:hover {
    color: #ffffff !important;
    transform: translateY(-4px);
}

.trio-footer-socials a.trio-social-fb:hover {
    background-color: #1877f2;
    border-color: #1877f2;
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.35);
}

.trio-footer-socials a.trio-social-tw:hover {
    background-color: #0f1419;
    border-color: #0f1419;
    box-shadow: 0 6px 15px rgba(15, 20, 25, 0.35);
}

.trio-footer-socials a.trio-social-ig:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    border-color: #d6249f;
    box-shadow: 0 6px 15px rgba(214, 36, 159, 0.35);
}

.trio-footer-socials a.trio-social-ln:hover {
    background-color: #0a66c2;
    border-color: #0a66c2;
    box-shadow: 0 6px 15px rgba(10, 102, 194, 0.35);
}

.trio-social-svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.trio-footer-title {
    font-family: var(--trio-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    position: relative;
}

.trio-footer-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--trio-primary-gradient);
    margin-top: 8px;
    border-radius: 2px;
}

.trio-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trio-footer-links li a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-block;
}

.trio-footer-links li a:hover,
.trio-footer-links li.current-menu-item a {
    color: var(--trio-accent-color);
    transform: translateX(4px);
}

.trio-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
}

.trio-footer-contact span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trio-footer-cta {
    align-self: flex-start;
    margin-top: 8px;
    color: #ffffff !important;
}

.trio-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #94a3b8;
    flex-wrap: wrap;
    gap: 16px;
}

.trio-footer-sub-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.trio-footer-sub-links a:hover {
    color: var(--trio-accent-color);
}

/* Footer Responsive Rules */
@media (max-width: 900px) {
    .trio-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .trio-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .trio-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   TRIO HOME PAGE TEMPLATE STYLING
   ========================================================================== */

/* Hero Section */
.trio-hero {
    position: relative;
    padding: 160px 24px 120px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;
    overflow: hidden;
    margin-top: calc(-1 * var(--trio-header-height));
    background-color: var(--trio-bg-dark);
}

.trio-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
    z-index: 1;
}

.trio-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.trio-hero-subtitle {
    font-family: var(--trio-font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--trio-accent-color);
    background-color: rgba(99, 102, 241, 0.1);
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.trio-hero-title {
    font-family: var(--trio-font-heading);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--trio-text-primary);
    letter-spacing: -1.5px;
}

.trio-hero-desc {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
    color: var(--trio-text-secondary);
}

.trio-hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Button styles */
.trio-btn-outline {
    font-family: var(--trio-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--trio-text-primary);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 9999px;
    border: 1px solid var(--trio-border-color);
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trio-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--trio-text-primary);
}

.trio-btn-outline-white {
    font-family: var(--trio-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trio-btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Section styling */
.trio-section {
    padding: 80px 24px !important;

    margin: 0 auto;
}

.trio-section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trio-section-subtitle {
    font-family: var(--trio-font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--trio-accent-color);
}

.trio-blog-section .trio-section-subtitle,
.trio-brands-section .trio-section-subtitle {
    color: var(--trio-accent-color);
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253, 215, 52);
    display: inline-block;
    align-self: center;
}

.trio-testimonials-section .trio-section-subtitle {
    color: var(--trio-accent-color);
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253, 215, 52);
    display: inline-block;
    align-self: flex-start;
}

.trio-section-title {
    font-family: var(--trio-font-heading);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--trio-text-primary);
    letter-spacing: -1px;
}

.trio-section-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--trio-text-secondary);
}

/* Services section cards */
/* Proper Services Section Styling */
.trio-services-section {
    background-color: #ffffff;
    /* White background */
    padding: 80px 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Light background-wise header text colors */
.trio-services-section .trio-section-title {
    color: #0f172a;
}

.trio-services-section .trio-section-desc {
    color: #475569;
}

/* Subtitle Pill Style (Light Background Adaption) */
.trio-services-section .trio-section-subtitle {
    color: var(--trio-accent-color);
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253 215 52);
    display: inline-block;
    align-self: center;
}

/* Services Cards Grid */
.trio-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.trio-service-card {
    background-color: transparent;
    /* Background will be handled by ::after to show conic gradient */
    border: none;
    /* Remove default border to show conic gradient */
    border-radius: 20px;
    padding: 40px 28px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;

    /* Staggered entrance animation properties */
    opacity: 0;
    transform: translateY(30px);
    animation: cardFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    /* Current active border color variable */
    --card-accent-current: var(--card-accent-normal);
}

.trio-service-card:hover {
    --card-accent-current: var(--card-accent);
}

/* Inner Solid Card Body Cover */
.trio-service-card::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #f8fafc;
    /* Light gray shade background */
    border-radius: 18px;
    /* Adjusted radius for 2px border width */
    z-index: -1;
    transition: background-color 0.3s ease;
}

.trio-service-card:hover::after {
    background-color: #ffffff;
    /* pure white highlight on hover */
}

/* Conic Gradient Border Light (Sequential Rotating Sweep) */
.trio-service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -2;
    animation: sequenceBorder 8s linear infinite;
    opacity: 1;
    /* Keep border fully visible in normal state */
    transition: opacity 0.3s ease;
}

.trio-service-card:hover::before {
    opacity: 1;
}

.trio-service-card:nth-child(1):hover::before {
    animation: hoverSpinCorporate 2s linear infinite !important;
}

.trio-service-card:nth-child(2):hover::before {
    animation: hoverSpinSocial 2s linear infinite !important;
}

.trio-service-card:nth-child(3):hover::before {
    animation: hoverSpinWedding 2s linear infinite !important;
}

.trio-service-card:nth-child(4):hover::before {
    animation: hoverSpinConcert 2s linear infinite !important;
}

/* 1 by 1 Sequential Animation Delays & Accent Variables */
.trio-service-card:nth-child(1) {
    animation-delay: 0.1s;
    /* Staggered load-in fadeInUp delay */
    --card-accent: #ff7b54;
}

.trio-service-card:nth-child(1)::before {
    animation-delay: 0s;
    /* Loop delay for continuous sweep */
}

.trio-service-card:nth-child(2) {
    animation-delay: 0.25s;
    --card-accent: #f9d423;
}

.trio-service-card:nth-child(2)::before {
    animation-delay: -2s;
}

.trio-service-card:nth-child(3) {
    animation-delay: 0.4s;
    --card-accent: #ED4266;
}

.trio-service-card:nth-child(3)::before {
    animation-delay: -4s;
}

.trio-service-card:nth-child(4) {
    animation-delay: 0.55s;
    --card-accent: #feb632;
}

.trio-service-card:nth-child(4)::before {
    animation-delay: -6s;
}

@keyframes sequenceBorder {
    0% {
        transform: rotate(0deg);
        background: #ffffff;
        /* Solid white border by default */
    }

    1% {
        background: conic-gradient(from 0deg, transparent 0%, #ffffff 15%, transparent 30%, transparent 50%, #ffffff 65%, transparent 80%, transparent 100%);
    }

    8% {
        background: conic-gradient(from 0deg, transparent 0%, #eab308 15%, transparent 30%, transparent 50%, #eab308 65%, transparent 80%, transparent 100%);
    }

    18% {
        background: conic-gradient(from 0deg, transparent 0%, #eab308 15%, transparent 30%, transparent 50%, #eab308 65%, transparent 80%, transparent 100%);
    }

    24% {
        background: conic-gradient(from 0deg, transparent 0%, #ffffff 15%, transparent 30%, transparent 50%, #ffffff 65%, transparent 80%, transparent 100%);
    }

    25% {
        transform: rotate(360deg);
        background: #ffffff;
    }

    25.1%,
    100% {
        transform: rotate(0deg);
        background: #ffffff;
        /* Solid white border by default */
    }
}

@keyframes hoverSpinCorporate {
    0% {
        transform: rotate(0deg);
        background: conic-gradient(from 0deg, transparent 0%, #ff7b54 15%, transparent 30%, transparent 50%, #ff7b54 65%, transparent 80%, transparent 100%);
    }

    100% {
        transform: rotate(360deg);
        background: conic-gradient(from 0deg, transparent 0%, #ff7b54 15%, transparent 30%, transparent 50%, #ff7b54 65%, transparent 80%, transparent 100%);
    }
}

@keyframes hoverSpinSocial {
    0% {
        transform: rotate(0deg);
        background: conic-gradient(from 0deg, transparent 0%, #f9d423 15%, transparent 30%, transparent 50%, #f9d423 65%, transparent 80%, transparent 100%);
    }

    100% {
        transform: rotate(360deg);
        background: conic-gradient(from 0deg, transparent 0%, #f9d423 15%, transparent 30%, transparent 50%, #f9d423 65%, transparent 80%, transparent 100%);
    }
}

@keyframes hoverSpinWedding {
    0% {
        transform: rotate(0deg);
        background: conic-gradient(from 0deg, transparent 0%, #ED4266 15%, transparent 30%, transparent 50%, #ED4266 65%, transparent 80%, transparent 100%);
    }

    100% {
        transform: rotate(360deg);
        background: conic-gradient(from 0deg, transparent 0%, #ED4266 15%, transparent 30%, transparent 50%, #ED4266 65%, transparent 80%, transparent 100%);
    }
}

@keyframes hoverSpinConcert {
    0% {
        transform: rotate(0deg);
        background: conic-gradient(from 0deg, transparent 0%, #feb632 15%, transparent 30%, transparent 50%, #feb632 65%, transparent 80%, transparent 100%);
    }

    100% {
        transform: rotate(360deg);
        background: conic-gradient(from 0deg, transparent 0%, #feb632 15%, transparent 30%, transparent 50%, #feb632 65%, transparent 80%, transparent 100%);
    }
}

@keyframes cardFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trio-service-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background-color: rgba(0, 0, 0, 0.03);
    /* Darker tint for light backgrounds */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.trio-service-card:hover {
    transform: translateY(-10px);
}

/* Unique Hover Border Colors & Shadows for Cards */
.trio-service-card:nth-child(1):hover {
    border-color: rgba(99, 102, 241, 0.35);
    /* Corporate - Indigo */
    box-shadow: 0 20px 45px rgba(99, 102, 241, 0.12);
}

.trio-service-card:nth-child(2):hover {
    border-color: rgba(245, 158, 11, 0.35);
    /* Social - Amber */
    box-shadow: 0 20px 45px rgba(245, 158, 11, 0.12);
}

.trio-service-card:nth-child(3):hover {
    border-color: rgba(236, 72, 153, 0.35);
    /* Weddings - Pink */
    box-shadow: 0 20px 45px rgba(236, 72, 153, 0.12);
}

.trio-service-card:nth-child(4):hover {
    border-color: rgba(168, 85, 247, 0.35);
    /* Concerts - Purple */
    box-shadow: 0 20px 45px rgba(168, 85, 247, 0.12);
}

/* Hover Icon Changes */
.trio-service-card:hover .trio-service-icon {
    background-color: rgba(0, 0, 0, 0.06);
    transform: scale(1.08);
    animation: bounceIcon 1s ease infinite;
}

@keyframes bounceIcon {

    0%,
    100% {
        transform: translateY(0) scale(1.08);
    }

    50% {
        transform: translateY(-5px) scale(1.08);
    }
}

.trio-service-card h3 {
    font-family: var(--trio-font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    /* Dark slate heading */
    letter-spacing: -0.5px;
}

.trio-service-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    /* Dark slate text paragraph */
    flex-grow: 1;
}

.trio-service-card a {
    font-size: 13px;
    font-weight: 700;
    color: var(--trio-accent-color);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.trio-service-card a:hover {
    color: #0f172a;
    /* Dark text hover contrast */
    transform: translateX(4px);
}

/* Events Showcase Section */
.trio-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.trio-event-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trio-event-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
}

.trio-event-img {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.trio-event-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(10, 13, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 99px;
    letter-spacing: 0.5px;
}

.trio-event-details {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trio-event-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--trio-text-secondary);
}

.trio-event-details h3 {
    font-family: var(--trio-font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--trio-text-primary);
    line-height: 1.3;
}

.trio-event-details p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--trio-text-secondary);
}

.trio-event-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--trio-accent-color);
    text-decoration: none;
    transition: transform 0.2s ease;
    display: inline-block;
    align-self: flex-start;
    margin-top: 8px;
}

.trio-event-link:hover {
    transform: translateX(4px);
}

/* Premium Stats Counter Section */
.trio-stats-section {
    background-color: #f8fafc;
    background-image: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 80px 0;
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.trio-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.trio-stat-card {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 20px;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
}

/* Staggered slow floating/bobbing animations */
.trio-stat-card:nth-child(1) {
    animation: floatStatCard1 8s ease-in-out infinite;
}

.trio-stat-card:nth-child(2) {
    animation: floatStatCard2 9s ease-in-out infinite;
}

.trio-stat-card:nth-child(3) {
    animation: floatStatCard3 7s ease-in-out infinite;
}

.trio-stat-card:nth-child(4) {
    animation: floatStatCard4 10s ease-in-out infinite;
}

.trio-stat-card:hover {
    animation-play-state: paused;
    transform: translateY(-12px);
    /* Fixed lift elevation on hover */
    background-color: #ffffff;
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

/* Glowing background color leak (with slow breathe) */
.trio-stat-glow {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(25px);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;
    animation: glowBreathe 6s ease-in-out infinite;
}

.trio-stat-card:hover .trio-stat-glow {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.4);
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
}

.trio-stat-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.trio-stat-number {
    font-family: var(--trio-font-heading);
    font-size: clamp(48px, 6vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #fd5a4b 0%, #4338ca 100%);
    /* Metallic Slate to Indigo */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
    display: inline-block;
}

.trio-stat-suffix {
    font-family: var(--trio-font-heading);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: #4338ca;
    margin-left: 2px;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s ease;
}

.trio-stat-card:hover .trio-stat-number {
    transform: scale(1.05);
}

.trio-stat-card:hover .trio-stat-suffix {
    transform: scale(1.2) translateY(-4px);
    color: #feb632;
}

/* Keyframes for Stats Bobbing & Breathing */
@keyframes floatStatCard1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes floatStatCard2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes floatStatCard3 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes floatStatCard4 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes glowBreathe {

    0%,
    100% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
    }
}

.trio-stat-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #475569;
    /* Slate 600 */
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Responsive constraints for stats */
@media (max-width: 900px) {
    .trio-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 500px) {
    .trio-stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trio-stat-card {
        padding: 36px 20px;
    }
}

/* CTA Banner */
.trio-cta-banner {
    position: relative;
    padding: 80px 24px;
    text-align: center;
    background: linear-gradient(146deg, #393188 0%, #f04f61 100%);
    overflow: hidden;
}

.trio-cta-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.trio-cta-content h2 {
    font-family: var(--trio-font-heading);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
    line-height: 1.2;
}

.trio-cta-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #94a3b8;
}

.trio-cta-actions {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Responsive grid rules for home templates */
@media (max-width: 990px) {
    .trio-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trio-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .trio-hero {
        padding-top: 130px;
    }

    .trio-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .trio-services-grid {
        grid-template-columns: 1fr;
    }

    .trio-events-grid {
        grid-template-columns: 1fr;
    }

    .trio-stats-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Hero Slider Styles (Light Colorwise) */
.trio-hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
    margin-top: calc(-1 * var(--trio-header-height));
    background-color: #f8fafc;
}

.trio-slider-viewport {
    position: relative;
    width: 100%;
    height: 100%;
}

.trio-slides-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.trio-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    transform: translateX(60px);
    /* Enter transition: slide from right */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.8s ease;
    z-index: 1;
}

.trio-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 2;
}

.trio-slide.exit {
    opacity: 0;
    transform: translateX(-60px);
    /* Exit transition: slide to left */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(1.1);
    /* Zoom out on active slide */
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.trio-slide.active .trio-slide-bg {
    transform: scale(1);
    opacity: 1;
}

/* Slide Gradients (CTA Banner Color Wise - Indigo and Pink gradient combination) */
.slide-corporate {
    background-image:
        linear-gradient(rgba(6, 8, 12, 0.25), rgba(13, 17, 23, 0.55)),
        linear-gradient(146deg, #393188 0%, #f04f61 100%);
}

.slide-wedding {
    background-image:
        linear-gradient(rgba(6, 8, 12, 0.25), rgba(13, 17, 23, 0.55)),
        linear-gradient(215deg, #393188 0%, #f04f61 100%);
}

.slide-concert {
    background-image:
        linear-gradient(rgba(6, 8, 12, 0.25), rgba(13, 17, 23, 0.55)),
        linear-gradient(35deg, #393188 0%, #f04f61 100%);
}

.trio-slide-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.trio-slide-subtitle {
    font-family: var(--trio-font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--trio-accent-color);
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(251 208 38);
    opacity: 0;
    transform: translateY(20px);
}

.trio-slide-title {
    font-family: var(--trio-font-heading);
    font-size: clamp(34px, 5.5vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -1.5px;
    opacity: 0;
    transform: translateY(30px);
}

.trio-slide-desc {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.6;
    color: #cbd5e1;
    opacity: 0;
    transform: translateY(30px);
}

.trio-slide-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
}

.trio-slide-actions .trio-btn-cta {
    background: linear-gradient(135deg, #ED4266 0%, #feb632 100%);
    box-shadow: 0 4px 15px rgba(237, 66, 102, 0.35);
}

.trio-slide-actions .trio-btn-cta:hover {
    box-shadow: 0 6px 20px rgba(237, 66, 102, 0.55);
}

.trio-slide-actions .trio-btn-call {
    background: linear-gradient(135deg, #feb632 0%, #f9d423 100%);
    box-shadow: 0 4px 15px rgba(254, 182, 50, 0.35);
    color: #0f172a !important;
}

.trio-slide-actions .trio-btn-call:hover {
    box-shadow: 0 6px 20px rgba(254, 182, 50, 0.55);
}

.trio-slide-actions .trio-btn-call .trio-pulse-dot,
.trio-slide-actions .trio-btn-call .trio-pulse-dot::after {
    background-color: #ED4266;
}

/* Animations for Active Slide Content */
.trio-slide.active .trio-slide-subtitle {
    animation: slideFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

.trio-slide.active .trio-slide-title {
    animation: slideFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

.trio-slide.active .trio-slide-desc {
    animation: slideFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s;
}

.trio-slide.active .trio-slide-actions {
    animation: slideFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
}

@keyframes slideFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) skewY(2deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) skewY(0);
    }
}

/* Slider Navigation Arrows */
.trio-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.trio-slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%) scale(1.05);
}

.trio-slider-arrow.prev {
    left: 24px;
}

.trio-slider-arrow.next {
    right: 24px;
}

.trio-slider-arrow svg {
    width: 20px;
    height: 20px;
}

/* Slider Dot Indicators */
.trio-slider-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.trio-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.trio-slider-dot:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.trio-slider-dot.active {
    width: 28px;
    border-radius: 99px;
    background-color: var(--trio-accent-color);
}

/* Ensure the header blends correctly in mobile */
@media (max-width: 768px) {
    .trio-hero-slider {
        height: 60vh;
        min-height: 485px;
    }

    .trio-about-section {
        padding: 80px 15px !important;
    }

    .trio-brands-section {
        padding: 80px 15px !important;
    }

    .trio-mvp-section {
        padding: 80px 15px !important;
    }

    .trio-testimonials-section {
        padding: 80px 15px !important;
    }

    .trio-gallery-section {
        padding: 80px 15px !important;
    }

    .trio-stats-section {
        padding: 80px 15px !important;
    }

    .trio-why-choose-section {
        padding: 80px 15px !important;
    }

    .trio-services-section {
        padding: 80px 15px !important;
    }

    .trio-blog-section {
        padding: 80px 15px !important;
    }

    .trio-slider-arrow {
        width: 40px;
        height: 40px;
    }

    .trio-reach-section {
        padding: 80px 15px !important;
    }

    .trio-slider-arrow.prev {
        left: 12px;
    }

    .trio-slider-arrow.next {
        right: 12px;
    }
}

/* Custom Homepage Global Container Override (Full Width) */
.page-template-template-homepage #container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.page-template-template-homepage #content {
    max-width: 100% !important;
}

/* Custom Boxed Grid Constraint Wrapper */
.trio-container {
    max-width: 1200px;
    margin: 0 auto;

    width: 100%;
}

/* Unique Call Now Button Styles (Logo-Theme Peach to Yellow Gradient) */
.trio-btn-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #feb632 0%, #f9d423 100%);
    color: #0f172a !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(254, 182, 50, 0.35);
    border: none;
    border-radius: 9999px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

.trio-btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 182, 50, 0.55);
    opacity: 0.95;
}

.trio-phone-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    fill: none;
    stroke: currentColor;
}

.trio-btn-call:hover .trio-phone-icon {
    animation: phoneRing 0.5s ease infinite;
}

@keyframes phoneRing {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(15deg);
    }
}

.trio-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #ED4266;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.trio-pulse-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ED4266;
    animation: pulseGlow 1.5s infinite ease-in-out;
    z-index: 1;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* About Us Section Styles */
.trio-about-section {
    background-color: #ffffff;
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.trio-about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

/* Left Side: Overlapping Card Composition */
.trio-about-visual {
    position: relative;
    width: 100%;
    height: 480px;
}

.trio-visual-card {
    position: absolute;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-back {
    width: 70%;
    height: 320px;
    top: 0;
    left: 0;
    z-index: 1;
    animation: floatBack 8s ease-in-out infinite;
}

.card-front {
    width: 65%;
    height: 280px;
    bottom: 0;
    right: 5%;
    z-index: 2;
    animation: floatFront 6s ease-in-out infinite;
}

.card-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.85;
}

.card-gradient-overlay.bg-corporate {
    background: radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.12) 0%, transparent 80%), linear-gradient(135deg, #f8fafc 0%, #fd7a5375 100%);
}

.card-gradient-overlay.bg-wedding {
    background: radial-gradient(circle at 90% 90%, rgba(236, 72, 153, 0.1) 0%, transparent 80%), linear-gradient(135deg, #fffbeb 0%, #ebb255 100%);
}

.card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-badge {
    align-self: flex-start;
    font-family: var(--trio-font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--trio-accent-color);
    background-color: rgba(99, 102, 241, 0.08);
    padding: 4px 12px;
    border-radius: 99px;
}

.card-title {
    font-family: var(--trio-font-heading);
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.card-text {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}

.card-quote-icon {
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 1;
    color: rgba(236, 72, 153, 0.3);
    position: absolute;
    top: -20px;
    left: 20px;
}

.card-quote {
    font-family: var(--trio-font-heading);
    font-size: 17px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
    color: #1e293b;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.card-author {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}

.trio-visual-badge {
    position: absolute;
    top: 42%;
    left: 48%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: var(--trio-accent-color);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
    border: 4px solid #ffffff;
    animation: badgePulse 3s infinite ease-in-out;
}

/* Dotted/Dashed spinning ring around the badge */
.trio-visual-badge::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 2px dashed var(--trio-accent-color);
    animation: spinRing 15s linear infinite;
    pointer-events: none;
}

@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.trio-visual-badge .badge-number {
    font-family: var(--trio-font-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.trio-visual-badge .badge-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-top: 2px;
    padding: 0 6px;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
        box-shadow: 0 15px 30px rgba(99, 102, 241, 0.6);
    }
}

/* Hover effects for visual cards */
.trio-about-visual:hover .card-back {
    animation-play-state: paused;
    transform: translateY(-15px) scale(1.02) rotate(-1deg);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.1);
}

.trio-about-visual:hover .card-front {
    animation-play-state: paused;
    transform: translateY(15px) scale(1.02) rotate(1deg);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.1);
}

@keyframes floatBack {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(-0.5deg);
    }
}

@keyframes floatFront {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(10px) rotate(0.5deg);
    }
}

/* Right Side: Content styling */
.trio-about-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trio-about-subtitle {
    font-family: var(--trio-font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--trio-accent-color);
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253 215 52);
    align-self: flex-start;
}


.trio-about-title {
    font-family: var(--trio-font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    letter-spacing: -1px;
}

.trio-about-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
}

.trio-about-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 10px 0;
}

.trio-about-features li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background-color: transparent;
}

.trio-about-features li:hover {
    background-color: rgba(99, 102, 241, 0.03);
    transform: translateX(6px);
}

.trio-about-features li .feature-icon {
    width: 20px;
    height: 20px;
    color: #fe8232;
    background-color: rgba(16, 185, 129, 0.08);
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.trio-about-features li:hover .feature-icon {
    transform: scale(1.2) rotate(360deg);
    background-color: #fe8232;
    color: #ffffff;
}

.trio-about-features li strong {
    font-family: var(--trio-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    display: block;
    margin-bottom: 4px;
}

.trio-about-features li p {
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

.trio-about-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.trio-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-family: var(--trio-font-heading);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.trio-link-arrow svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.trio-link-arrow:hover {
    color: var(--trio-accent-color);
}

.trio-link-arrow:hover svg {
    transform: translateX(4px);
}

/* Responsive constraints for About section */
@media (max-width: 900px) {
    .trio-about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .trio-about-visual {
        height: 420px;
        max-width: 500px;
        margin: 0 auto;
    }

    .card-back {
        width: 75%;
        height: 280px;
    }

    .card-front {
        width: 70%;
        height: 240px;
    }

    .trio-visual-badge {
        width: 100px;
        height: 100px;
    }

    .trio-visual-badge .badge-number {
        font-size: 24px;
    }
}

/* Mission, Vision, Philosophy Section Styles */
.trio-mvp-section {
    background-color: #f8fafc;
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.page-template-template-about-php .trio-mvp-section {
    padding: 0 0 80px 0;
}

.trio-mvp-section .trio-section-title {
    color: #0f172a;
}

.trio-mvp-section .trio-section-desc {
    color: #475569;
}

.trio-mvp-section .trio-section-subtitle {
    color: var(--trio-accent-color);
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253 215 52);
    display: inline-block;
    align-self: center;
}


.trio-mvp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 20px;
}

.trio-mvp-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card Top Accents */
.pillar-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 0;
}

.mission-card .pillar-accent-line {
    background: linear-gradient(135deg, #ED4266, #ff6b57);
}

.vision-card .pillar-accent-line {
    background: linear-gradient(135deg, #ff6b57, #ff9a3c);
}

.philosophy-card .pillar-accent-line {
    background: linear-gradient(135deg, #ff9a3c, #feb632);
}

.trio-mvp-card:hover .pillar-accent-line {
    height: 100%;
}

.trio-mvp-card h3,
.trio-mvp-card p {
    position: relative;
    z-index: 1;
    transition: color 0.4s ease;
}

.trio-mvp-card:hover h3,
.trio-mvp-card:hover p {
    color: #ffffff;
}

/* Icon Wrappers */
.pillar-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.mission-card .pillar-icon-wrapper {
    background-color: rgba(237, 66, 102, 0.1);
    color: #ED4266;
}

.vision-card .pillar-icon-wrapper {
    background-color: rgba(255, 107, 87, 0.1);
    color: #ff6b57;
}

.philosophy-card .pillar-icon-wrapper {
    background-color: rgba(254, 182, 50, 0.1);
    color: #feb632;
}

.pillar-icon {
    width: 28px;
    height: 28px;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.trio-mvp-card:hover .pillar-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.trio-mvp-card:hover .pillar-icon {
    transform: rotate(15deg) scale(1.2);
}

/* Card Hover States */
.trio-mvp-card:hover {
    transform: translateY(-15px);
}

.mission-card:hover {
    box-shadow: 0 30px 60px rgba(237, 66, 102, 0.2);
    border-color: transparent;
}

.vision-card:hover {
    box-shadow: 0 30px 60px rgba(255, 107, 87, 0.2);
    border-color: transparent;
}

.philosophy-card:hover {
    box-shadow: 0 30px 60px rgba(254, 182, 50, 0.2);
    border-color: transparent;
}

/* Card Contents */
.trio-mvp-card h3 {
    font-family: var(--trio-font-heading);
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.trio-mvp-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

/* Micro-animations on Hover */
.mission-card:hover .pillar-icon {
    animation: pulseBullseye 1.2s infinite ease-in-out;
}

.vision-card:hover .pillar-icon {
    animation: sweepEye 1.5s infinite ease-in-out;
}

.philosophy-card:hover .pillar-icon {
    animation: spinCompass 1.5s ease-in-out forwards;
}

@keyframes pulseBullseye {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes sweepEye {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.08) rotate(-10deg);
    }

    75% {
        transform: scale(1.08) rotate(10deg);
    }
}

@keyframes spinCompass {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive grid for MVP section */
@media (max-width: 900px) {
    .trio-mvp-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .trio-mvp-card {
        padding: 32px 28px;
    }
}

/* Purpose-Driven Event Planning Corner Graphic styling */
#mission-vision .trio-container {
    position: relative;
}

.trio-mvp-corner-wrapper {
    position: absolute;
    top: -73px;
    right: -107px;
    width: 130px;
    height: 130px;
    z-index: 10;
    transition: all 0.3s ease;
}

.trio-mvp-svg-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: transparent;
}

.trio-meeting-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.trio-meeting-svg path,
.trio-meeting-svg circle {
    stroke: #caced6;
    /* New light-gray outline stroke color */
}

/* Orbit Ring */
.trio-mvp-orbit-ring {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px dashed transparent;
    border-top: 2px dashed #caced6;
    /* Matching dashed outline orbit */
    border-right: 2px dashed #caced6;
    border-radius: 50%;
    animation: orbitSpin 12s linear infinite;
    pointer-events: none;
}

@keyframes orbitSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Line drawing animation */
.svg-group-circle {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawSvgCircle 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.svg-group-bulb path {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: drawSvgLines 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 0.5s;
}

.svg-group-table path {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: drawSvgLines 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 1.5s;
}

.svg-group-people circle,
.svg-group-people path {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: drawSvgLines 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 2.5s;
}

@keyframes drawSvgCircle {
    0% {
        stroke-dashoffset: 300;
    }

    35%,
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawSvgLines {
    0% {
        stroke-dashoffset: 150;
    }

    35%,
    100% {
        stroke-dashoffset: 0;
    }
}

/* Responsive adjustment: center above header on mobile */
@media (max-width: 900px) {
    .trio-mvp-corner-wrapper {
        position: relative;
        top: 0;
        right: 0;
        margin: 0 auto 30px auto;
        width: 120px;
        height: 120px;
    }
}

/* ==========================================================================
   TRIO EVENTS GALLERY SLIDER STYLING
   ========================================================================== */

.trio-gallery-section {
    background-color: #ffffff;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

.trio-gallery-section .trio-section-title {
    color: #0f172a;
    /* Dark slate heading */
}

.trio-gallery-section .trio-section-desc {
    color: #475569;
    /* Slate secondary text */
}

.trio-gallery-section .trio-section-subtitle {
    color: #feb632;
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253 215 52);
    display: inline-block;
    align-self: center;
}

.trio-gallery-marquee-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 40px 0 20px 0;
}

.trio-gallery-marquee-track {
    display: flex;
    width: max-content;
    gap: 30px;
    animation: marqueeScroll 45s linear infinite;
}

.trio-gallery-marquee-wrapper:hover .trio-gallery-marquee-track {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Seamless looping */
    }
}

.trio-gallery-slide {
    width: calc(20vw - 20px);
    /* 1 row 5 columns wide on desktop */
    min-width: 280px;
    /* Safe minimum boundary on smaller screens */
    height: 440px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.04);
    background-color: #0b0f19;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.trio-gallery-slide:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
}

.trio-slide-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-gallery-slide:hover .trio-slide-img {
    transform: scale(1.08) rotate(1deg);
}

.trio-slide-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
    opacity: 0.4;
}

/* Category Tag Floating */
.trio-slide-tag {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tag-concert {
    background: rgba(99, 102, 241, 0.85);
}

.tag-wedding {
    background: rgba(236, 72, 153, 0.85);
}

.tag-corporate {
    background: rgba(79, 70, 229, 0.85);
}

.tag-social {
    background: rgba(245, 158, 11, 0.85);
}

.tag-luxury {
    background: rgba(14, 165, 233, 0.85);
}

.tag-art {
    background: rgba(168, 85, 247, 0.85);
}

/* Slide Info Asymmetrical Overlay Panel */
.trio-slide-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.85);
    /* Frosted white glass overlay */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    padding: 24px;
    z-index: 3;
    transform: translateY(20px);
    opacity: 0.9;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-gallery-slide:hover .trio-slide-overlay {
    transform: translateY(0);
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.95);
}

.trio-slide-meta {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4338ca;
    /* Indigo text color */
    display: block;
    margin-bottom: 6px;
}

.trio-slide-overlay h3 {
    font-family: var(--trio-font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    /* Dark slate heading */
    margin: 0 0 12px 0;
    letter-spacing: -0.3px;
}

.trio-slide-link {
    font-size: 12px;
    font-weight: 700;
    color: #4338ca;
    /* Indigo link color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease, color 0.3s ease;
}

.trio-slide-link:hover {
    color: #0f172a;
    /* Dark slate hover color */
    transform: translateX(4px);
}

/* Slider Navigation Buttons */
.trio-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
}

.trio-gallery-arrow-prev {
    left: 32px;
    transform: translateY(-50%) translateX(-15px);
}

.trio-gallery-arrow-next {
    right: 32px;
    transform: translateY(-50%) translateX(15px);
}

/* Reveal arrows on wrapper hover */
.trio-gallery-marquee-wrapper:hover .trio-gallery-arrow {
    opacity: 1;
}

.trio-gallery-marquee-wrapper:hover .trio-gallery-arrow-prev {
    transform: translateY(-50%) translateX(0);
}

.trio-gallery-marquee-wrapper:hover .trio-gallery-arrow-next {
    transform: translateY(-50%) translateX(0);
}

.trio-gallery-arrow svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.trio-gallery-arrow:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.3);
}

.trio-gallery-arrow-prev:hover svg {
    transform: translateX(-2px);
}

.trio-gallery-arrow-next:hover svg {
    transform: translateX(2px);
}

.trio-gallery-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* ==========================================================================
   TRIO WHY CHOOSE SECTION STYLING (SPLIT LIGHT-GRAY)
   ========================================================================== */

.trio-why-choose-section {
    background-color: #f8fafc;
    background-image: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.trio-why-split-layout {
    display: grid;
    grid-template-columns: 1.15fr 1.85fr;
    gap: 70px;
    align-items: start;
}

/* Sticky Left Side column */
.trio-why-split-visual {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trio-why-split-visual .trio-section-subtitle {
    color: #feb632;
    background-color: transparent;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid rgb(253 215 52);
    display: inline-block;
    align-self: flex-start;
}

.trio-why-split-visual .trio-section-title {
    color: #0f172a;
    text-align: left;
    margin: 0;
}

.trio-why-split-visual .trio-section-desc {
    color: #475569;
    text-align: left;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Decorative graphic bars */
.trio-why-decor-lines {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.trio-why-decor-lines .decor-line {
    height: 5px;
    border-radius: 99px;
    background: #e2e8f0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-why-decor-lines .line-1 {
    width: 50px;
    background: #f04f61;
}

.trio-why-decor-lines .line-2 {
    width: 25px;
}

.trio-why-decor-lines .line-3 {
    width: 12px;
}

/* Interaction: animate line widths on parent section hover */
.trio-why-split-layout:hover .decor-line.line-2 {
    width: 38px;
    background: #fd7a53;
}

.trio-why-split-layout:hover .decor-line.line-3 {
    width: 28px;
    background: #fde533;
}

/* Right Side Cards */
.trio-why-split-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.trio-why-split-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 24px;
    padding: 36px;
    display: flex;
    gap: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.015);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-why-split-card:hover {
    transform: translateX(12px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.06);
}

/* Vertical drawing card left accent edge line */
.trio-why-card-edge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-why-split-card:hover .trio-why-card-edge {
    transform: scaleY(1);
}

.card-strategy .trio-why-card-edge {
    background: #f04f61;
}

.card-creativity .trio-why-card-edge {
    background: #fd7a53;
}

.card-logistics .trio-why-card-edge {
    background: #fde533;
}

/* Icon boxes */
.trio-why-split-icon {
    font-size: 30px;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-strategy .trio-why-split-icon {
    color: #f04f61;
    background: rgba(99, 102, 241, 0.05);
}

.card-creativity .trio-why-split-icon {
    color: #fd7a53;
    background: rgba(236, 72, 153, 0.05);
}

.card-logistics .trio-why-split-icon {
    color: #fde533;
    background: rgba(20, 184, 166, 0.05);
}

/* Icon rotation and jump on card hover */
.trio-why-split-card:hover .trio-why-split-icon {
    transform: scale(1.1) rotate(-8deg);
}

/* Card Content Typography */
.trio-why-split-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trio-why-split-content h3 {
    font-family: var(--trio-font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.4px;
}

.trio-why-split-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* Responsive constraints for split layout */
@media (max-width: 900px) {
    .trio-why-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trio-why-split-visual {
        position: relative;
        top: 0;
    }

    .trio-why-split-card {
        padding: 32px 24px;
        gap: 20px;
    }
}

/* ==========================================================================
   TRIO WHY CHOOSE ANIMATED CORNER STRATEGY VECTOR GRAPHIC
   ========================================================================== */

/* Strategy SVG in card icon wrapper */
.trio-strategy-svg-icon {
    width: 34px;
    height: 34px;
    display: block;
}

/* Floating Corner Graphic */
.trio-why-corner-graphic {
    position: absolute;
    bottom: 11px;
    left: 14px;
    width: 150px;
    height: 150px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.16;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trio-strategy-svg {
    width: 100%;
    height: 100%;
}

.trio-strategy-svg circle,
.trio-strategy-svg path {
    stroke: #ff7b54;
    /* Strategy Indigo Accent */
}

/* Spinner Orbit Ring */
.trio-strategy-orbit-ring {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 1.5px dashed transparent;
    border-top: 1.5px dashed #ff7b54;
    border-right: 1.5px dashed #ff7b54;
    border-radius: 50%;
    animation: orbitSpin 15s linear infinite;
}

/* Concentric drawing path settings */
.trio-why-corner-graphic .svg-ring-outer {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: drawStrategyRingOuter 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.trio-why-corner-graphic .svg-ring-middle {
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    animation: drawStrategyRingMiddle 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.trio-why-corner-graphic .svg-ring-inner {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: drawStrategyRingInner 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.trio-why-corner-graphic .svg-crosshair-h,
.trio-why-corner-graphic .svg-crosshair-v {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: drawStrategyLines 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.trio-why-corner-graphic .svg-arrow,
.trio-why-corner-graphic .svg-arrowhead {
    stroke-dasharray: 55;
    stroke-dashoffset: 55;
    animation: drawStrategyArrow 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Keyframes for drawing */
@keyframes drawStrategyRingOuter {

    0%,
    10% {
        stroke-dashoffset: 260;
    }

    45%,
    85% {
        stroke-dashoffset: 0;
    }

    95%,
    100% {
        stroke-dashoffset: 260;
    }
}

@keyframes drawStrategyRingMiddle {

    0%,
    18% {
        stroke-dashoffset: 170;
    }

    45%,
    85% {
        stroke-dashoffset: 0;
    }

    95%,
    100% {
        stroke-dashoffset: 170;
    }
}

@keyframes drawStrategyRingInner {

    0%,
    25% {
        stroke-dashoffset: 80;
    }

    45%,
    85% {
        stroke-dashoffset: 0;
    }

    95%,
    100% {
        stroke-dashoffset: 80;
    }
}

@keyframes drawStrategyLines {

    0%,
    30% {
        stroke-dashoffset: 80;
    }

    50%,
    85% {
        stroke-dashoffset: 0;
    }

    95%,
    100% {
        stroke-dashoffset: 80;
    }
}

@keyframes drawStrategyArrow {

    0%,
    38% {
        stroke-dashoffset: 55;
    }

    55%,
    85% {
        stroke-dashoffset: 0;
    }

    95%,
    100% {
        stroke-dashoffset: 55;
    }
}

/* ==========================================================================
   TRIO LATEST INSIGHTS BLOG SECTION STYLING
   ========================================================================== */

.trio-blog-section {
    background-color: #ffffff;
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.trio-blog-section .trio-section-title {
    color: #000000;
}

/* 2-Column 3-Blog Editorial Grid */
.trio-blog-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
}

.trio-blog-col-left {
    height: 600px;
}

.trio-blog-col-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 600px;
}

/* Left Featured Card (Blog 1) */
.trio-blog-card-featured {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    padding: 44px;
    text-decoration: none;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.02);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-blog-card-featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.trio-blog-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.trio-blog-card-featured:hover .trio-blog-card-image,
.trio-blog-card-grid:hover .trio-blog-card-image {
    transform: scale(1.05);
}

.trio-blog-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(9, 13, 22, 0.1) 0%, rgba(9, 13, 22, 0.85) 100%);
    z-index: 2;
}

.trio-blog-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trio-blog-card-content h3 {
    font-family: var(--trio-font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    /* White text on dark overlay */
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.trio-blog-card-featured:hover h3 {
    color: #ffffff;
    text-decoration: underline;
}

.trio-blog-card-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.trio-blog-card-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 4px;
}

.trio-blog-tag {
    background: #ff7b54;
    color: #ffffff;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 99px;
}

.trio-blog-readtime {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.trio-blog-explore-link {
    font-size: 13px;
    font-weight: 700;
    color: #a5b4fc;
    margin-top: 10px;
    transition: transform 0.3s ease;
    align-self: flex-start;
}

.trio-blog-card-featured:hover .trio-blog-explore-link {
    transform: translateX(5px);
}

/* Right Grid Cards (Horizontal Layout) */
.trio-blog-card-grid {
    display: flex;
    flex-direction: row;
    height: 288px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.015);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 16px;
    position: relative;
}

.trio-blog-card-grid:hover {
    transform: translateY(-8px);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}

.trio-blog-card-img-wrapper {
    width: 40%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.trio-blog-card-info {
    width: 60%;
    padding: 16px 16px 16px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.trio-blog-card-info h3 {
    font-family: var(--trio-font-heading);
    font-size: 19px;
    font-weight: 800;
    color: #000000;
    /* Pure black titles */
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.trio-blog-card-grid:hover h3 {
    color: #000000;
    text-decoration: underline;
}

.trio-blog-card-info p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}

.trio-blog-card-meta-dark {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 2px;
}

.trio-blog-tag-simple {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.trio-blog-tag-simple.text-pink {
    color: #ED4266;
}

.trio-blog-tag-simple.text-teal {
    color: #14b8a6;
}

.trio-blog-date {
    font-size: 12px;
    color: #94a3b8;
}

.trio-blog-explore-link-dark {
    font-size: 13px;
    font-weight: 700;
    color: #4338ca;
    margin-top: 6px;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.trio-blog-card-grid:hover .trio-blog-explore-link-dark {
    transform: translateX(5px);
    color: #0f172a;
}

/* Outline-Styled Large Index Numbering */
.trio-blog-number {
    position: absolute;
    top: 28px;
    right: 36px;
    font-size: 56px;
    font-weight: 900;
    font-family: var(--trio-font-heading);
    -webkit-text-stroke: 1.5px rgba(15, 23, 42, 0.07);
    color: transparent;
    line-height: 1;
    pointer-events: none;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-blog-card-featured .trio-blog-number {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);
}

.trio-blog-card-featured:hover .trio-blog-number {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-4px) scale(1.05);
}

.trio-blog-card-grid:hover .trio-blog-number {
    -webkit-text-stroke-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-4px) scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .trio-blog-split-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .trio-blog-col-left,
    .trio-blog-col-right {
        height: auto;
    }

    .trio-blog-card-featured {
        height: 420px;
        padding: 30px;
    }

    .trio-blog-card-featured h3 {
        font-size: 22px;
    }

    .trio-blog-card-grid {
        flex-direction: column;
        height: auto;
        padding: 16px;
    }

    .trio-blog-card-img-wrapper {
        width: 100%;
        height: 220px;
        border-radius: 18px;
    }

    .trio-blog-card-info {
        width: 100%;
        padding: 24px 12px 12px 12px;
    }

    .trio-blog-number {
        top: 24px;
        right: 28px;
        font-size: 44px;
    }
}

/* Blog View More Action Button */
.trio-blog-action-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    position: relative;
    z-index: 5;
}

.trio-btn-blog-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 44px;
    font-family: var(--trio-font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ED4266;
    background: transparent;
    border: 2px solid #feb632;
    border-radius: 99px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(254, 182, 50, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-btn-blog-more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.trio-btn-blog-more:hover {
    background: linear-gradient(135deg, #ED4266 0%, #feb632 100%);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(237, 66, 102, 0.3);
}

.trio-btn-blog-more:hover svg {
    transform: translateX(4px);
}

.trio-btn-blog-more:active {
    transform: translateY(-1px);
}

/* ==========================================================================
   TRIO TRUSTED BRANDS LOGO MARQUEE STYLING
   ========================================================================== */

.trio-brands-section {
    background-color: #f8fafc;
    /* Alternating cool slate background */
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* ===========================================
   TRIO LOGO SVG DRAW — FLOATING ICONS
   20 icons — draw line-by-line + top ➜ bottom
   =========================================== */

/* Container — full section, behind all content */
.trio-services-floating-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Base SVG icon — positioned above section, falls downward */
.trio-float-icon {
    position: absolute;
    top: -110px;
    opacity: 0;
    animation: trioBgIconFall linear infinite;
    will-change: transform, opacity;
}

/* ---- Fall keyframe — top ➜ bottom, fade in/out ---- */
@keyframes trioBgIconFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: var(--icon-op);
    }

    88% {
        opacity: var(--icon-op);
    }

    100% {
        transform: translateY(var(--fall-dist)) rotate(var(--icon-rot));
        opacity: 0;
    }
}

/* ====================================================
   LINE-BY-LINE DRAW ANIMATION
   7 strokes: t(2) + r(2) + i(2) + o(1) — brand colors
   ==================================================== */

/* All SVG path/line/circle/ellipse children */
.tfi-p {
    fill: none;
    stroke-dasharray: 250;
    /* > max path length (~138 for 'o' circle) */
    stroke-dashoffset: 250;
    animation-name: tfiDraw;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    /* hidden before start, stays drawn after */
    animation-iteration-count: 1;
}

@keyframes tfiDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Staggered delays — letter strokes draw one after another */
.tfi-p1 {
    animation-delay: 0.10s;
}

/* t  — stem       (red-pink #ED4266) */
.tfi-p2 {
    animation-delay: 0.55s;
}

/* t  — crossbar   (red-pink #ED4266) */
.tfi-p3 {
    animation-delay: 1.00s;
}

/* r  — stem       (orange  #ff7b54)  */
.tfi-p4 {
    animation-delay: 1.42s;
}

/* r  — shoulder   (orange  #ff7b54)  */
.tfi-p5 {
    animation-delay: 1.84s;
}

/* i  — dot        (or-gold #ff9a3c)  */
.tfi-p6 {
    animation-delay: 2.14s;
}

/* i  — stem       (gold    #feb632)  */
.tfi-p7 {
    animation-delay: 2.56s;
}

/* o  — circle     (gold    #feb632)  */


/* ---- 20 unique icons — position / size / speed / delay ---- */
.trio-fi-1 {
    --icon-op: 0.11;
    --fall-dist: 650px;
    --icon-rot: 10deg;
    left: 2%;
    width: 60px;
    animation-duration: 9s;
    animation-delay: 0s;
}

.trio-fi-2 {
    --icon-op: 0.08;
    --fall-dist: 700px;
    --icon-rot: -8deg;
    left: 8%;
    width: 44px;
    animation-duration: 12s;
    animation-delay: 1.5s;
}

.trio-fi-3 {
    --icon-op: 0.13;
    --fall-dist: 680px;
    --icon-rot: 15deg;
    left: 14%;
    width: 72px;
    animation-duration: 8s;
    animation-delay: 3s;
}

.trio-fi-4 {
    --icon-op: 0.07;
    --fall-dist: 720px;
    --icon-rot: -5deg;
    left: 20%;
    width: 38px;
    animation-duration: 14s;
    animation-delay: 0.5s;
}

.trio-fi-5 {
    --icon-op: 0.11;
    --fall-dist: 660px;
    --icon-rot: 20deg;
    left: 27%;
    width: 55px;
    animation-duration: 10s;
    animation-delay: 4s;
}

.trio-fi-6 {
    --icon-op: 0.09;
    --fall-dist: 690px;
    --icon-rot: -12deg;
    left: 33%;
    width: 48px;
    animation-duration: 11s;
    animation-delay: 2s;
}

.trio-fi-7 {
    --icon-op: 0.14;
    --fall-dist: 710px;
    --icon-rot: 6deg;
    left: 39%;
    width: 80px;
    animation-duration: 7s;
    animation-delay: 5.5s;
}

.trio-fi-8 {
    --icon-op: 0.07;
    --fall-dist: 650px;
    --icon-rot: -18deg;
    left: 45%;
    width: 36px;
    animation-duration: 13s;
    animation-delay: 1s;
}

.trio-fi-9 {
    --icon-op: 0.10;
    --fall-dist: 730px;
    --icon-rot: 25deg;
    left: 51%;
    width: 62px;
    animation-duration: 9.5s;
    animation-delay: 6s;
}

.trio-fi-10 {
    --icon-op: 0.08;
    --fall-dist: 680px;
    --icon-rot: -10deg;
    left: 57%;
    width: 46px;
    animation-duration: 11.5s;
    animation-delay: 2.5s;
}

.trio-fi-11 {
    --icon-op: 0.12;
    --fall-dist: 700px;
    --icon-rot: 14deg;
    left: 62%;
    width: 68px;
    animation-duration: 8.5s;
    animation-delay: 0.8s;
}

.trio-fi-12 {
    --icon-op: 0.09;
    --fall-dist: 660px;
    --icon-rot: -22deg;
    left: 67%;
    width: 42px;
    animation-duration: 12.5s;
    animation-delay: 4.5s;
}

.trio-fi-13 {
    --icon-op: 0.11;
    --fall-dist: 720px;
    --icon-rot: 18deg;
    left: 72%;
    width: 58px;
    animation-duration: 10.5s;
    animation-delay: 1.8s;
}

.trio-fi-14 {
    --icon-op: 0.07;
    --fall-dist: 690px;
    --icon-rot: -7deg;
    left: 77%;
    width: 34px;
    animation-duration: 15s;
    animation-delay: 7s;
}

.trio-fi-15 {
    --icon-op: 0.14;
    --fall-dist: 650px;
    --icon-rot: 28deg;
    left: 81%;
    width: 76px;
    animation-duration: 7.5s;
    animation-delay: 3.5s;
}

.trio-fi-16 {
    --icon-op: 0.08;
    --fall-dist: 710px;
    --icon-rot: -15deg;
    left: 85%;
    width: 50px;
    animation-duration: 11s;
    animation-delay: 5s;
}

.trio-fi-17 {
    --icon-op: 0.10;
    --fall-dist: 680px;
    --icon-rot: 9deg;
    left: 89%;
    width: 65px;
    animation-duration: 9s;
    animation-delay: 2.2s;
}

.trio-fi-18 {
    --icon-op: 0.09;
    --fall-dist: 700px;
    --icon-rot: -20deg;
    left: 93%;
    width: 40px;
    animation-duration: 13.5s;
    animation-delay: 0.3s;
}

.trio-fi-19 {
    --icon-op: 0.12;
    --fall-dist: 720px;
    --icon-rot: 12deg;
    left: 96%;
    width: 56px;
    animation-duration: 10s;
    animation-delay: 6.5s;
}

.trio-fi-20 {
    --icon-op: 0.07;
    --fall-dist: 660px;
    --icon-rot: -30deg;
    left: 99%;
    width: 32px;
    animation-duration: 14.5s;
    animation-delay: 4s;
}

/* ====================================================
   PORTFOLIO CHAMPAGNE BOTTLE DRAW — FLOATING ICONS
   20 icons — draw line-by-line + top ➜ bottom
   ==================================================== */

.trio-portfolio-floating-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.trio-bottle-icon {
    position: absolute;
    top: -140px;
    opacity: 0;
    animation: bottleBgFall linear infinite;
    will-change: transform, opacity;
}

@keyframes bottleBgFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: var(--icon-op);
    }

    88% {
        opacity: var(--icon-op);
    }

    100% {
        transform: translateY(var(--fall-dist)) rotate(var(--icon-rot));
        opacity: 0;
    }
}

/* Bottle draw properties */
.bottle-p {
    fill: none;
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation-name: bottleDraw;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes bottleDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Staggered delays for bottle parts */
.bottle-p1 {
    animation-delay: 0.10s;
}

/* Body */
.bottle-p2 {
    animation-delay: 0.55s;
}

/* Cap */
.bottle-p3 {
    animation-delay: 0.95s;
}

/* Label */
.bottle-p4 {
    animation-delay: 1.35s;
}

/* Sparkle 1 */
.bottle-p5 {
    animation-delay: 1.65s;
}

/* Sparkle 2 */
.bottle-p6 {
    animation-delay: 1.95s;
}

/* Sparkle 3 */

/* ---- 20 unique bottle icons — position / size / speed / delay ---- */
.trio-bi-1 {
    --icon-op: 0.10;
    --fall-dist: 850px;
    --icon-rot: 15deg;
    left: 3%;
    width: 45px;
    animation-duration: 10s;
    animation-delay: 0.5s;
}

.trio-bi-2 {
    --icon-op: 0.07;
    --fall-dist: 800px;
    --icon-rot: -10deg;
    left: 9%;
    width: 32px;
    animation-duration: 13s;
    animation-delay: 2.0s;
}

.trio-bi-3 {
    --icon-op: 0.12;
    --fall-dist: 820px;
    --icon-rot: 20deg;
    left: 16%;
    width: 55px;
    animation-duration: 9s;
    animation-delay: 1.0s;
}

.trio-bi-4 {
    --icon-op: 0.08;
    --fall-dist: 880px;
    --icon-rot: -5deg;
    left: 22%;
    width: 38px;
    animation-duration: 14s;
    animation-delay: 3.5s;
}

.trio-bi-5 {
    --icon-op: 0.11;
    --fall-dist: 860px;
    --icon-rot: 25deg;
    left: 28%;
    width: 42px;
    animation-duration: 11s;
    animation-delay: 0s;
}

.trio-bi-6 {
    --icon-op: 0.09;
    --fall-dist: 830px;
    --icon-rot: -15deg;
    left: 34%;
    width: 36px;
    animation-duration: 12.5s;
    animation-delay: 4.5s;
}

.trio-bi-7 {
    --icon-op: 0.13;
    --fall-dist: 890px;
    --icon-rot: 12deg;
    left: 40%;
    width: 60px;
    animation-duration: 8.5s;
    animation-delay: 1.5s;
}

.trio-bi-8 {
    --icon-op: 0.06;
    --fall-dist: 810px;
    --icon-rot: -20deg;
    left: 46%;
    width: 30px;
    animation-duration: 15s;
    animation-delay: 6.0s;
}

.trio-bi-9 {
    --icon-op: 0.10;
    --fall-dist: 870px;
    --icon-rot: 30deg;
    left: 52%;
    width: 48px;
    animation-duration: 10.5s;
    animation-delay: 2.5s;
}

.trio-bi-10 {
    --icon-op: 0.08;
    --fall-dist: 840px;
    --icon-rot: -8deg;
    left: 58%;
    width: 35px;
    animation-duration: 12s;
    animation-delay: 0.8s;
}

.trio-bi-11 {
    --icon-op: 0.12;
    --fall-dist: 860px;
    --icon-rot: 18deg;
    left: 64%;
    width: 52px;
    animation-duration: 9.5s;
    animation-delay: 3.0s;
}

.trio-bi-12 {
    --icon-op: 0.07;
    --fall-dist: 820px;
    --icon-rot: -25deg;
    left: 69%;
    width: 33px;
    animation-duration: 13.5s;
    animation-delay: 5.5s;
}

.trio-bi-13 {
    --icon-op: 0.11;
    --fall-dist: 880px;
    --icon-rot: 14deg;
    left: 74%;
    width: 44px;
    animation-duration: 11.5s;
    animation-delay: 1.2s;
}

.trio-bi-14 {
    --icon-op: 0.09;
    --fall-dist: 850px;
    --icon-rot: -12deg;
    left: 79%;
    width: 37px;
    animation-duration: 14.5s;
    animation-delay: 4.0s;
}

.trio-bi-15 {
    --icon-op: 0.14;
    --fall-dist: 810px;
    --icon-rot: 28deg;
    left: 83%;
    width: 58px;
    animation-duration: 8s;
    animation-delay: 2.2s;
}

.trio-bi-16 {
    --icon-op: 0.08;
    --fall-dist: 870px;
    --icon-rot: -18deg;
    left: 87%;
    width: 40px;
    animation-duration: 12.8s;
    animation-delay: 6.5s;
}

.trio-bi-17 {
    --icon-op: 0.10;
    --fall-dist: 840px;
    --icon-rot: 10deg;
    left: 91%;
    width: 46px;
    animation-duration: 10.2s;
    animation-delay: 1.8s;
}

.trio-bi-18 {
    --icon-op: 0.09;
    --fall-dist: 860px;
    --icon-rot: -22deg;
    left: 95%;
    width: 34px;
    animation-duration: 13.5s;
    animation-delay: 0.3s;
}

.trio-bi-19 {
    --icon-op: 0.12;
    --fall-dist: 890px;
    --icon-rot: 16deg;
    left: 97%;
    width: 50px;
    animation-duration: 9.8s;
    animation-delay: 3.2s;
}

.trio-bi-20 {
    --icon-op: 0.07;
    --fall-dist: 830px;
    --icon-rot: -30deg;
    left: 99%;
    width: 28px;
    animation-duration: 15.5s;
    animation-delay: 7.0s;
}

/* ====================================================
   TESTIMONIALS QUOTATION DRAW — FLOATING ICONS
   20 icons — draw line-by-line + top ➜ bottom
   ==================================================== */

.trio-testimonial-floating-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.trio-quote-icon {
    position: absolute;
    top: -140px;
    opacity: 0;
    animation: quoteBgFall linear infinite;
    will-change: transform, opacity;
}

@keyframes quoteBgFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: var(--icon-op);
    }

    88% {
        opacity: var(--icon-op);
    }

    100% {
        transform: translateY(var(--fall-dist)) rotate(var(--icon-rot));
        opacity: 0;
    }
}

/* Quote draw properties */
.quote-p {
    fill: none;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation-name: quoteDraw;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes quoteDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Staggered delays for quote parts */
.quote-p1 {
    animation-delay: 0.20s;
}

/* Left Quote */
.quote-p2 {
    animation-delay: 0.60s;
}

/* Right Quote */

/* ---- 20 unique quote icons — position / size / speed / delay ---- */
.trio-qi-1 {
    --icon-op: 0.11;
    --fall-dist: 650px;
    --icon-rot: 12deg;
    left: 4%;
    width: 55px;
    animation-duration: 11s;
    animation-delay: 0s;
}

.trio-qi-2 {
    --icon-op: 0.08;
    --fall-dist: 700px;
    --icon-rot: -10deg;
    left: 9%;
    width: 40px;
    animation-duration: 14s;
    animation-delay: 1.5s;
}

.trio-qi-3 {
    --icon-op: 0.13;
    --fall-dist: 680px;
    --icon-rot: 22deg;
    left: 15%;
    width: 65px;
    animation-duration: 9s;
    animation-delay: 3s;
}

.trio-qi-4 {
    --icon-op: 0.07;
    --fall-dist: 720px;
    --icon-rot: -5deg;
    left: 22%;
    width: 35px;
    animation-duration: 15s;
    animation-delay: 0.5s;
}

.trio-qi-5 {
    --icon-op: 0.11;
    --fall-dist: 660px;
    --icon-rot: 18deg;
    left: 27%;
    width: 50px;
    animation-duration: 10.5s;
    animation-delay: 4s;
}

.trio-qi-6 {
    --icon-op: 0.09;
    --fall-dist: 690px;
    --icon-rot: -15deg;
    left: 33%;
    width: 44px;
    animation-duration: 12s;
    animation-delay: 2s;
}

.trio-qi-7 {
    --icon-op: 0.14;
    --fall-dist: 710px;
    --icon-rot: 8deg;
    left: 40%;
    width: 72px;
    animation-duration: 8.5s;
    animation-delay: 5.5s;
}

.trio-qi-8 {
    --icon-op: 0.07;
    --fall-dist: 650px;
    --icon-rot: -20deg;
    left: 46%;
    width: 32px;
    animation-duration: 13.5s;
    animation-delay: 1s;
}

.trio-qi-9 {
    --icon-op: 0.10;
    --fall-dist: 730px;
    --icon-rot: 25deg;
    left: 52%;
    width: 58px;
    animation-duration: 10s;
    animation-delay: 6s;
}

.trio-qi-10 {
    --icon-op: 0.08;
    --fall-dist: 680px;
    --icon-rot: -12deg;
    left: 58%;
    width: 42px;
    animation-duration: 12.5s;
    animation-delay: 2.5s;
}

.trio-qi-11 {
    --icon-op: 0.12;
    --fall-dist: 700px;
    --icon-rot: 15deg;
    left: 63%;
    width: 62px;
    animation-duration: 9.5s;
    animation-delay: 0.8s;
}

.trio-qi-12 {
    --icon-op: 0.09;
    --fall-dist: 660px;
    --icon-rot: -25deg;
    left: 68%;
    width: 38px;
    animation-duration: 14.5s;
    animation-delay: 4.5s;
}

.trio-qi-13 {
    --icon-op: 0.11;
    --fall-dist: 720px;
    --icon-rot: 20deg;
    left: 73%;
    width: 52px;
    animation-duration: 11.5s;
    animation-delay: 1.8s;
}

.trio-qi-14 {
    --icon-op: 0.07;
    --fall-dist: 690px;
    --icon-rot: -8deg;
    left: 78%;
    width: 30px;
    animation-duration: 16s;
    animation-delay: 7s;
}

.trio-qi-15 {
    --icon-op: 0.14;
    --fall-dist: 650px;
    --icon-rot: 30deg;
    left: 82%;
    width: 68px;
    animation-duration: 8s;
    animation-delay: 3.5s;
}

.trio-qi-16 {
    --icon-op: 0.08;
    --fall-dist: 710px;
    --icon-rot: -18deg;
    left: 86%;
    width: 46px;
    animation-duration: 13s;
    animation-delay: 5s;
}

.trio-qi-17 {
    --icon-op: 0.10;
    --fall-dist: 680px;
    --icon-rot: 10deg;
    left: 90%;
    width: 56px;
    animation-duration: 10.8s;
    animation-delay: 2.2s;
}

.trio-qi-18 {
    --icon-op: 0.09;
    --fall-dist: 700px;
    --icon-rot: -22deg;
    left: 94%;
    width: 36px;
    animation-duration: 14.2s;
    animation-delay: 0.3s;
}

.trio-qi-19 {
    --icon-op: 0.12;
    --fall-dist: 720px;
    --icon-rot: 14deg;
    left: 96%;
    width: 60px;
    animation-duration: 9.2s;
    animation-delay: 6.5s;
}

.trio-qi-20 {
    --icon-op: 0.07;
    --fall-dist: 660px;
    --icon-rot: -32deg;
    left: 99%;
    width: 26px;
    animation-duration: 15.2s;
    animation-delay: 4s;
}


.trio-brands-section .trio-section-title {
    color: #000000;
}

.trio-brands-marquee-wrapper {
    margin-top: 65px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Gradient faders at screen boundaries */
.trio-brands-fader {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%;
    z-index: 5;
    pointer-events: none;
}

.trio-brands-fader.left-fader {
    left: 0;
    background: linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
}

.trio-brands-fader.right-fader {
    right: 0;
    background: linear-gradient(270deg, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
}

.trio-brands-row {
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}

.trio-brands-track {
    display: flex;
    gap: 70px;
    width: max-content;
    align-items: center;
}

.trio-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 60px;
    color: #94a3b8;
    /* Subtle gray monochrome brand logo outline */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.trio-brand-logo svg {
    width: 100%;
    height: 100%;
}

.trio-brand-logo:hover {
    color: #ff7b54;
    /* Active colorize effect on hover */
    transform: scale(1.12);
}

/* Infinite Marquee Loop Calculations
   5 logos (170px) + 5 gaps (70px) = 1200px total width per loop cycle.
   Translate precisely -1200px for a seamless loop boundary. */
.scroll-left {
    animation: marqueeLeft 25s linear infinite;
}

.scroll-right {
    animation: marqueeRight 25s linear infinite;
}

/* Pause scroll on row hover */
.trio-brands-row:hover .trio-brands-track {
    animation-play-state: paused;
}

@keyframes marqueeLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-1200px);
    }
}

@keyframes marqueeRight {
    0% {
        transform: translateX(-1200px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Responsive constraints */
@media (max-width: 768px) {
    .trio-brands-section {
        padding: 80px 0;
    }

    .trio-brands-track {
        gap: 40px;
    }

    .trio-brand-logo {
        width: 120px;
        height: 45px;
    }

    /* 5 logos (120px) + 5 gaps (40px) = 800px per loop cycle */
    @keyframes marqueeLeft {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-800px);
        }
    }

    @keyframes marqueeLeft {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-800px);
        }
    }

    @keyframes marqueeRight {
        0% {
            transform: translateX(-800px);
        }

        100% {
            transform: translateX(0);
        }
    }
}

/* ==========================================================================
   TRIO TESTIMONIALS SECTION STYLING
   ========================================================================== */

.trio-testimonials-section {
    background-color: #ffffff;
    /* Alternating solid white background */
    padding: 80px 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.trio-testimonials-split {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.trio-testimonials-left {
    width: 35%;
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trio-testimonials-left .trio-section-title {
    color: #000000;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -1px;
}

.trio-testimonials-quote-mark {
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.15);
    margin: -20px 0 -40px -8px;
    pointer-events: none;
    user-select: none;
}

.trio-testimonials-lead-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

.trio-testimonials-right {
    width: 65%;
}

/* Slider Navigation Controls */
.trio-testimonials-nav {
    display: flex;
    gap: 16px;
    margin-top: 36px;
}

.trio-testimonials-nav-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #000000;
    background: transparent;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.trio-testimonials-nav-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.trio-testimonials-nav-btn:hover {
    background: #000000;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.trio-testimonials-nav-btn:active {
    transform: scale(0.95);
}

/* Horizontal Slider Viewport and Track */
.trio-testimonials-slider-viewport {
    width: 100%;
    overflow: hidden;
    padding: 16px 0;
    /* Allows shadows to overflow beautifully without crop */
}

.trio-testimonials-slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    width: max-content;
}

.trio-testimonial-card-slide {
    width: 440px;
    /* Fixed card width on desktop */
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.015);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.trio-testimonial-card-slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.05);
    border-color: rgba(99, 102, 241, 0.2);
}

.trio-testimonial-card-quote-icon {
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 80px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.012);
    line-height: 1;
    pointer-events: none;
    transition: color 0.4s ease;
}

.trio-testimonial-card-slide:hover .trio-testimonial-card-quote-icon {
    color: rgba(99, 102, 241, 0.05);
}

.trio-stars {
    color: #f9d423;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.trio-testimonial-text {
    font-size: 15px;
    line-height: 1.65;
    color: #1e293b;
    margin: 0 0 28px 0;
    font-style: italic;
}

.trio-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
}

/* Colorful gradient initials avatars */
.trio-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.avatar-blue {
    background: linear-gradient(135deg, #feb632 0%, #ff7b54 100%);
}

.avatar-pink {
    background: linear-gradient(135deg, #ED4266 0%, #f43f5e 100%);
}

.avatar-teal {
    background: linear-gradient(135deg, #ED4266 0%, #feb632 100%);
}

.avatar-orange {
    background: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
}

.trio-author-info h4 {
    font-size: 14px;
    font-weight: 800;
    color: #000000;
    margin: 0;
}

.trio-author-info p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* Responsive breakdowns */
@media (max-width: 992px) {
    .trio-testimonials-split {
        flex-direction: column;
        gap: 40px;
    }

    .trio-testimonials-left {
        width: 100%;
        position: relative;
        top: 0;
    }

    .trio-testimonials-right {
        width: 100%;
    }

    .trio-testimonial-card-slide {
        width: calc(100vw - 64px);
    }

    .trio-testimonials-slider-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
    }

    .trio-testimonials-nav {
        display: none;
        /* Hide navigation buttons on touch viewports */
    }

    .trio-testimonials-quote-mark {
        margin: -10px 0 -20px -4px;
        font-size: 100px;
    }
}

/* ==========================================================================
   TRIO ABOUT US TEMPLATE STYLING
   ========================================================================== */

/* Immersive Hero Banner */
.trio-about-hero-immersive {
    position: relative;
    padding: 180px 0 140px 0;
    overflow: hidden;
    background-color: #0f172a;
    /* Dark slate base */
    color: #ffffff;
    text-align: center;
}

/* Dynamic animated gradient background */
.trio-hero-animated-bg {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(237, 66, 102, 0.4) 0%, rgba(255, 123, 84, 0.3) 25%, rgba(254, 182, 50, 0.2) 50%, transparent 80%);
    animation: trioHeroBgRotate 20s linear infinite;
    z-index: 0;
    opacity: 0.8;
}

@keyframes trioHeroBgRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Glass overlay for blur */
.trio-hero-glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    z-index: 1;
}

.trio-relative-z {
    position: relative;
    z-index: 5;
}

.trio-about-hero-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Pill badge */
.trio-hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin-bottom: 30px;
    padding: 8px 24px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.trio-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ED4266;
    box-shadow: 0 0 10px rgba(237, 66, 102, 0.8);
    animation: trioPulseDot 2s infinite;
}

@keyframes trioPulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

/* Title & Text */
.trio-hero-title {
    font-family: var(--trio-font-heading);
    font-size: clamp(48px, 8vw, 84px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 24px 0;
    letter-spacing: -2px;
}

.trio-hero-gradient-text {
    background: linear-gradient(135deg, #ED4266 0%, #ff7b54 50%, #feb632 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.trio-hero-subtitle {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 650px;
}

/* Floating Shapes */
.trio-hero-floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 2;
    opacity: 0.5;
}

.trio-hshape-1 {
    width: 300px;
    height: 300px;
    background: #ED4266;
    top: 10%;
    width: 180px;
    height: 180px;
    background: rgba(20, 184, 166, 0.1);
    bottom: 10%;
    right: 15%;
}

/* Animations for visual excellence */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes orbPulse {

    0%,
    100% {
        transform: scale(1) translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1) translateY(-10px);
        opacity: 0.6;
    }
}

/* Load Entrance Animation with slight scale-in */
@keyframes breadcrumbScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.trio-about-hero-centered-content>* {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.trio-about-hero-centered-content .trio-banner-breadcrumbs {
    animation: breadcrumbScaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.05s;
}

.trio-about-hero-centered-content .trio-banner-title {
    animation-delay: 0.2s;
}

/* Apply pulse animation to custom orbs */
.trio-orb-1 {
    animation: orbPulse 10s ease-in-out infinite !important;
}

.trio-orb-2 {
    animation: orbPulse 8s ease-in-out infinite 2s alternate !important;
}

/* Timeline/Journey Section */
.trio-about-journey-section {
    background-color: #f8fafc;
    padding: 120px 0;
    position: relative;
    z-index: 2;
}

.trio-about-journey-split {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.trio-about-journey-left {
    width: 35%;
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trio-about-journey-right {
    width: 65%;
}

.trio-about-timeline-track {
    position: relative;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.trio-about-timeline-line {
    position: absolute;
    left: 16px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, #ED4266 0%, #feb632 100%);
    opacity: 0.15;
}

.trio-about-milestone {
    position: relative;
}

.trio-about-milestone-marker {
    position: absolute;
    left: -44px;
    top: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #ff7b54;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-about-milestone:hover .trio-about-milestone-marker {
    transform: scale(1.3);
    background: #ff7b54;
    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.15);
}

.trio-about-milestone-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-about-milestone-card:hover {
    transform: translateX(12px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.03);
    border-color: rgba(99, 102, 241, 0.15);
}

.trio-milestone-year {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: #ff7b54;
    background: rgba(99, 102, 241, 0.06);
    padding: 4px 12px;
    border-radius: 99px;
    margin-bottom: 12px;
}

.trio-about-milestone-card h3 {
    font-family: var(--trio-font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #000000;
    margin: 0 0 10px 0;
}

.trio-about-milestone-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin: 0;
}

/* Core Values Section */
.trio-about-values-section {
    background-color: #ffffff;
    padding: 120px 0;
    position: relative;
    z-index: 2;
}

.trio-about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.trio-value-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.05);
    border-color: rgba(99, 102, 241, 0.15);
}

.trio-value-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(99, 102, 241, 0.06);
    color: #ff7b54;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s ease;
}

.trio-value-icon svg {
    width: 24px;
    height: 24px;
}

.trio-value-card:hover .trio-value-icon {
    background: #ff7b54;
    color: #ffffff;
    transform: rotate(10deg);
}

.trio-value-card h3 {
    font-family: var(--trio-font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #000000;
    margin: 0 0 12px 0;
}

.trio-value-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
    margin: 0;
}

/* Leadership Section */
.trio-about-team-section {
    background-color: #f8fafc;
    padding: 120px 0;
    position: relative;
    z-index: 2;
}

.trio-about-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.trio-team-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.015);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
    border-color: rgba(99, 102, 241, 0.1);
}

.trio-team-img-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.trio-team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trio-team-card:hover .trio-team-img {
    transform: scale(1.05);
}

.trio-team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 2;
}

.trio-team-info {
    padding: 32px;
}

.trio-team-info h4 {
    font-family: var(--trio-font-heading);
    font-size: 19px;
    font-weight: 800;
    color: #000000;
    margin: 0 0 4px 0;
}

.trio-team-role {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ff7b54;
    margin-bottom: 16px;
}

.trio-team-info p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* About CTA Section */
.trio-about-cta-banner {
    background-color: #0f172a;
    padding: 120px 0;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.trio-about-cta-content {
    position: relative;
    z-index: 3;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.trio-about-cta-content h2 {
    font-family: var(--trio-font-heading);
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -1px;
}

.trio-about-cta-content p {
    font-size: 16px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

.trio-btn-about-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 44px;
    font-family: var(--trio-font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background: #ff7b54;
    border-radius: 99px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.trio-btn-about-cta:hover {
    transform: translateY(-4px);
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
}

/* Responsive adjustments for About Us */
@media (max-width: 992px) {
    .trio-about-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trio-about-hero {
        padding: 120px 0 80px 0;
    }

    .trio-about-title {
        font-size: 42px;
    }

    .trio-about-hero-graphic-wrapper {
        height: auto;
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .trio-glass-card {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        animation: none !important;
        flex: 1 1 calc(50% - 20px);
        max-width: 240px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }

    .trio-about-hero-vector-decor,
    .trio-about-hero-circle-backdrop,
    .trio-about-glow-orb {
        display: none !important;
    }

    .trio-about-journey-split {
        flex-direction: column;
        gap: 40px;
    }

    .trio-about-journey-left {
        width: 100%;
        position: relative;
        top: 0;
    }

    .trio-about-journey-right {
        width: 100%;
    }

    .trio-about-values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .trio-about-team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .trio-glass-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .trio-about-values-grid {
        grid-template-columns: 1fr;
    }

    .trio-about-team-grid {
        grid-template-columns: 1fr;
    }

    .trio-about-timeline-track {
        padding-left: 36px;
    }

    .trio-about-milestone-marker {
        left: -30px;
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .trio-about-timeline-line {
        left: 10px;
    }

    .trio-about-milestone-card {
        padding: 28px;
    }

    .trio-about-milestone-card:hover {
        transform: translateY(-4px);
        /* Vertical shift instead of horizontal on narrow screens */
    }
}

/* Responsive adjustments for simple centered hero */
@media (max-width: 768px) {
    .trio-about-hero-simple {
        padding: 100px 0 70px 0;
    }
}

/* About Us Page - Set all section titles to black */
.trio-about-journey-section .trio-section-title,
.trio-about-values-section .trio-section-title,
.trio-about-team-section .trio-section-title {
    color: #000000;
}

/* ==========================================================================


/* ============================================================ */
/* NEW PAGE BANNER SECTION WITH BREADCRUMBS
/* ============================================================ */

.trio-page-banner {
    position: relative;
    padding: 50px 0 50px;
    background-color: #0b0f19;
    color: #ffffff;
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.trio-banner-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.trio-banner-mesh-gradient {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(at 20% 80%, rgba(237, 66, 102, 0.4) 0px, transparent 50%),
        radial-gradient(at 80% 20%, rgba(254, 182, 50, 0.4) 0px, transparent 50%) !important;
    animation: trio-banner-mesh-spin 30s linear infinite;
    pointer-events: none;
}

@keyframes trio-banner-mesh-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.trio-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(176deg, #ED4266 0%, #feb632 100%);
}

.trio-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

.trio-banner-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.trio-banner-highlight {
    background: none;
    -webkit-text-fill-color: #0b0f19;
    color: #0b0f19;
    text-shadow: none;
}

.trio-banner-tagline {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    max-width: 600px;
}

/* Breadcrumbs Styling */
.trio-breadcrumbs-wrap {
    display: inline-block;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 12px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.trio-breadcrumbs-wrap:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.trio-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}

.trio-breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.trio-breadcrumb-link:hover {
    color: #4361ee;
}

.trio-breadcrumb-link svg {
    opacity: 0.8;
}

.trio-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
}

.trio-breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
}

/* Abstract Decorative Shapes */
.trio-banner-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.5;
}

.trio-bshape-1 {
    width: 300px;
    height: 300px;
    background: #4361ee;
    top: -100px;
    left: -100px;
}

.trio-bshape-2 {
    width: 250px;
    height: 250px;
    background: #f72585;
    bottom: -50px;
    right: -100px;
}

@media (max-width: 768px) {
    .trio-page-banner {
        padding: 140px 0 80px;
    }

    .trio-banner-title {
        font-size: 2.5rem;
    }

    .trio-breadcrumbs-wrap {
        padding: 10px 20px;
    }

    .trio-breadcrumbs {
        font-size: 0.85rem;
    }
}

/* ============================================================ */
/* SCROLL REVEAL ANIMATIONS
/* ============================================================ */

[data-trio-animate] {

    transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-trio-animate="fade-up"] {
    transform: translateY(50px);
}

[data-trio-animate="fade-down"] {
    transform: translateY(-50px);
}

[data-trio-animate="fade-left"] {
    transform: translateX(50px);
}

[data-trio-animate="fade-right"] {
    transform: translateX(-50px);
}

[data-trio-animate="zoom-in"] {
    transform: scale(0.9);
}

[data-trio-animate="zoom-out"] {
    transform: scale(1.05);
}

[data-trio-animate].trio-animate-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ============================================================ */
/* ABOUT US: TEXT & IMAGE SECTION
/* ============================================================ */

.trio-about-split-section {
    padding: 80px 0;
    background-color: #fafbfc;
    position: relative;
    overflow: hidden;
}

.trio-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.trio-split-content {
    padding-right: 40px;
}

.trio-split-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff0f3;
    color: #ED4266;
    padding: 8px 16px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.trio-split-dot {
    width: 8px;
    height: 8px;
    background: #ED4266;
    border-radius: 50%;
    animation: trio-pulse 2s infinite;
}

@keyframes trio-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(237, 66, 102, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(237, 66, 102, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(237, 66, 102, 0);
    }
}

.trio-split-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    color: #0b0f19;
    line-height: 1.15;
    margin-bottom: 30px;
}

.trio-highlight-text {
    background: linear-gradient(135deg, #ED4266, #feb632);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.trio-split-desc {
    font-size: 1.15rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 40px;
}

.trio-split-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trio-split-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.trio-split-list svg {
    width: 24px;
    height: 24px;
    color: #ED4266;
    stroke-width: 3;
}

.trio-split-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ED4266 0%, #feb632 100%);
    color: #ffffff;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(237, 66, 102, 0.3);
}

.trio-split-btn:hover {
    background: linear-gradient(135deg, #feb632 0%, #ED4266 100%);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(237, 66, 102, 0.5);
    color: #ffffff;
}

.trio-split-visual {
    position: relative;
}

.trio-split-image-container {
    position: relative;
    padding-bottom: 30px;
    padding-right: 30px;
}

.trio-split-image-mask {
    border-radius: 30px 100px 30px 30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.trio-split-img-placeholder {
    width: 100%;
    height: 600px;
    background: url('https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.trio-split-image-mask:hover .trio-split-img-placeholder {
    transform: scale(1.05);
}

.trio-split-decor-box {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 40px;
    border-radius: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(237, 66, 102, 0.3);
    z-index: 3;
    overflow: hidden;
}

.trio-split-decor-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #ffffff);
    animation: trio-border-spin 4s linear infinite;
    z-index: -2;
}

.trio-split-decor-box::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: linear-gradient(135deg, #ED4266, #feb632);
    border-radius: 27px;
    z-index: -1;
}

@keyframes trio-border-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.trio-decor-number,
.trio-decor-text {
    position: relative;
    z-index: 1;
}

.trio-decor-number {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
}

.trio-decor-text {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Add an abstract shape behind the image */
.trio-split-visual::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 300px;
    height: 300px;
    background: rgba(67, 97, 238, 0.1);
    border-radius: 50%;
    z-index: 1;
    filter: blur(30px);
}

@media (max-width: 991px) {
    .trio-split-wrapper {
        grid-template-columns: 1fr;
    }

    .trio-split-content {
        padding-right: 0;
        order: 2;
        /* Move text below image on mobile */
    }

    .trio-split-visual {
        order: 1;
    }

    .trio-split-img-placeholder {
        height: 400px;
    }
}

.trio-floating-anim {
    animation: trio-float 4s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes trio-float {
    0% {
        transform: translateY(0);
        box-shadow: 0 20px 40px rgba(247, 37, 133, 0.3);
    }

    50% {
        transform: translateY(-15px);
        box-shadow: 0 35px 50px rgba(247, 37, 133, 0.2);
    }

    100% {
        transform: translateY(0);
        box-shadow: 0 20px 40px rgba(247, 37, 133, 0.3);
    }
}

/* ============================================================ */
/* ABOUT US: TEAM SECTION
/* ============================================================ */

.trio-team-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.trio-team-section .trio-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.trio-team-section .trio-section-title {
    color: #000000;
}

.trio-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.trio-team-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(11, 15, 25, 0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    padding-top: 40px;
}

.trio-team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(11, 15, 25, 0.1);
}

/* Animated decorative rhombus */
.trio-team-card::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, #ED4266, #feb632);
    border-radius: 20px;
    z-index: 0;
    opacity: 0.15;
    animation: trio-rhombus-float 6s ease-in-out infinite;
}

@keyframes trio-rhombus-float {

    0%,
    100% {
        transform: translateX(-50%) rotate(45deg) scale(1);
    }

    50% {
        transform: translateX(-50%) rotate(135deg) scale(1.1);
    }
}

.trio-team-img-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    overflow: hidden;
    z-index: 1;
    transition: clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s ease;
}

.trio-team-card:hover .trio-team-img-wrapper {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: scale(1.05);
    border-radius: 20px;
}

.trio-team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.trio-team-card:hover .trio-team-img-wrapper img {
    transform: scale(1.08);
}

.trio-team-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 15, 25, 0.8) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.trio-team-card:hover .trio-team-img-overlay {
    opacity: 1;
}

.trio-team-social {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 2;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s ease;
}

.trio-team-card:hover .trio-team-social {
    transform: translateY(0);
    opacity: 1;
}

.trio-team-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}

.trio-team-social a:hover {
    background: linear-gradient(135deg, #ED4266, #feb632);
    color: #ffffff;
}

.trio-team-social svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    /* for feather icons */
}

.trio-team-info {
    padding: 30px;
    text-align: center;
    background: transparent;
    position: relative;
    z-index: 1;
}

.trio-team-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(135deg, #ED4266, #feb632);
    transition: width 0.4s ease;
}

.trio-team-card:hover .trio-team-info::before {
    width: 60px;
}

.trio-team-info h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b0f19;
    margin-bottom: 5px;
}

.trio-team-info span {
    font-size: 0.95rem;
    color: #ED4266;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .trio-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .trio-team-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Unique Orbit Event Management Cycle Section --- */
.trio-orbit-layout {
    padding: 0px 0;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

.trio-orbit-layout .trio-section-title {
    color: #000000;
}

.trio-orbit-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 600px;
    margin: 60px auto 0;
}

/* Center Piece */
.trio-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trio-orbit-center-inner {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    border: 4px solid #fff;
}

.trio-orbit-center-text {
    color: #fff;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* Orbit Rings */
.trio-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.1);
    z-index: 1;
}

.trio-orbit-ring.ring-1 {
    width: 380px;
    height: 380px;
}

.trio-orbit-ring.ring-2 {
    width: 560px;
    height: 560px;
    border-style: dashed;
    opacity: 0.5;
}

.trio-orbit-dash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 480px;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.dash-circle-1 {
    transform-origin: 250px 250px;
    animation: rotateDashCW 40s linear infinite;
}

.dash-circle-2 {
    transform-origin: 250px 250px;
    animation: rotateDashCCW 30s linear infinite;
}

.dash-circle-3 {
    transform-origin: 250px 250px;
    animation: rotateDashCW 25s linear infinite;
}

.dash-circle-4 {
    transform-origin: 250px 250px;
    animation: rotateDashCCW 20s linear infinite;
}

.dash-circle-5 {
    transform-origin: 250px 250px;
    animation: rotateDashCW 15s linear infinite;
}

@keyframes rotateDashCW {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateDashCCW {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* Orbit Items */
.trio-orbit-item {
    position: absolute;
    width: 280px;
    z-index: 5;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.trio-orbit-item:hover {
    transform: scale(1.05);
    z-index: 20;
}

/* Positioning the 4 steps in a circle */
.trio-orbit-item.step-1 {
    top: 10%;
    left: 0;
}

.trio-orbit-item.step-2 {
    top: 10%;
    right: 0;
    text-align: right;
}

.trio-orbit-item.step-3 {
    bottom: 10%;
    right: 0;
    text-align: right;
}

.trio-orbit-item.step-4 {
    bottom: 10%;
    left: 0;
}

/* Item Card */
.trio-orbit-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 1);
    position: relative;
}

/* Card Icons */
.trio-orbit-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    position: relative;
}

.trio-orbit-item.step-2 .trio-orbit-icon,
.trio-orbit-item.step-3 .trio-orbit-icon {
    margin-left: auto;
}

.trio-orbit-icon svg {
    width: 30px;
    height: 30px;
}

.trio-orbit-num {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #1e293b;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.trio-orbit-item.step-2 .trio-orbit-num,
.trio-orbit-item.step-3 .trio-orbit-num {
    right: auto;
    left: -10px;
}

/* Content */
.trio-orbit-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.trio-orbit-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trio-orbit-content li {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 6px;
    position: relative;
}

/* Responsive */
@media (max-width: 991px) {
    .trio-orbit-container {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .trio-orbit-center {
        position: relative;
        transform: none;
        top: 0;
        left: 0;
        margin-bottom: 20px;
    }

    .trio-orbit-ring,
    .trio-orbit-dash {
        display: none;
    }

    .trio-orbit-item {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100%;
        max-width: 400px;
    }

    .trio-orbit-item.step-2,
    .trio-orbit-item.step-3 {
        text-align: left;
    }

    .trio-orbit-item.step-2 .trio-orbit-icon,
    .trio-orbit-item.step-3 .trio-orbit-icon {
        margin-left: 0;
    }

    .trio-orbit-item.step-2 .trio-orbit-num,
    .trio-orbit-item.step-3 .trio-orbit-num {
        right: -10px;
        left: auto;
    }
}

/* ==========================================================================
   Contact Us Template Styles
   ========================================================================== */

/* Main Section Layout */
.trio-contact-main {
    padding: 100px 0;
    background-color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.trio-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: stretch;
}

/* Contact Info Sidebar */
.trio-contact-info-wrapper {
    position: relative;
    z-index: 2;
}

.trio-contact-info-card {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 24px;
    padding: 50px 40px;
    color: #fff;
    height: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.trio-contact-info-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.trio-info-header,
.trio-info-items,
.trio-contact-social {
    position: relative;
    z-index: 2;
}

.trio-info-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #fff;
}

.trio-info-header p {
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.trio-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.trio-info-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.trio-info-item:hover .trio-info-icon {
    background: #3b82f6;
}

.trio-info-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.trio-info-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #fff;
}

.trio-info-text p,
.trio-info-text a {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.3s ease;
}

.trio-info-text a:hover {
    color: #3b82f6;
}

.trio-contact-social {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trio-contact-social h4 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 20px;
}

.trio-social-links {
    display: flex;
    gap: 15px;
}

.trio-social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.trio-social-links a:hover {
    background: #3b82f6;
    transform: translateY(-3px);
}

.trio-social-links a svg {
    width: 18px;
    height: 18px;
}

/* Contact Form Area */
.trio-contact-form-wrapper {
    background: #fff;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.trio-contact-form-inner h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.trio-contact-form-inner p {
    color: #64748b;
    margin-bottom: 35px;
    font-size: 1.05rem;
}

.trio-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trio-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.trio-form-group {
    display: flex;
    flex-direction: column;
}

.trio-form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.trio-form-group input,
.trio-form-group select,
.trio-form-group textarea {
    width: 100%;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1e293b;
    transition: all 0.3s ease;
}

.trio-form-group input:focus,
.trio-form-group select:focus,
.trio-form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.trio-submit-btn {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-top: 10px;
    align-self: flex-start;
}

.trio-submit-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.trio-submit-btn svg {
    width: 18px;
    height: 18px;
}

/* Map Section */
.trio-map-section {
    width: 100%;
    height: 450px;
    position: relative;
}

.trio-map-container {
    width: 100%;
    height: 100%;
}

.trio-map-container iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(100%) invert(92%) contrast(83%);
    /* Simple styling to fit modern UI */
}

/* Responsive */
@media (max-width: 991px) {
    .trio-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trio-contact-info-card {
        padding: 40px 30px;
    }

    .trio-contact-form-wrapper {
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .trio-form-row {
        grid-template-columns: 1fr;
    }

    .trio-contact-info-header h2 {
        font-size: 1.8rem;
    }

    .trio-contact-form-inner h3 {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   Teams Template Styles
   ========================================================================== */

/* Directory Filters */
.trio-team-directory {
    padding: 100px 0;
    background: #f8fafc;
}

.trio-team-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.trio-filter-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trio-filter-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.trio-filter-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

/* Unique Team Grid */
.trio-unique-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    padding-top: 30px;
}

/* Unique Member Card */
.trio-team-member-unique {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Visual Section */
.trio-member-visual {
    position: relative;
    width: 260px;
    height: 320px;
    margin-bottom: 30px;
    z-index: 2;
}

/* Decorative Blob Background */
.trio-member-blob-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: -1;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: morphingBg 8s ease-in-out infinite alternate;
}

.trio-team-member-unique:hover .trio-member-blob-bg {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(168, 85, 247, 0.2));
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
}

@keyframes morphingBg {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

/* Arch Image */
.trio-member-img-arch {
    width: 100%;
    height: 100%;
    border-radius: 130px 130px 20px 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
    border: 4px solid #fff;
}

.trio-member-img-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.trio-team-member-unique:hover .trio-member-img-arch {
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
    border-color: #f8fafc;
}

.trio-team-member-unique:hover .trio-member-img-arch img {
    transform: scale(1.08);
}

/* Floating Socials */
.trio-member-social-float {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.trio-member-social-float a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--social-index) * 0.1s);
}

.trio-team-member-unique:hover .trio-member-social-float a {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.trio-member-social-float a:hover {
    background: #3b82f6;
    color: #fff;
    transform: translateY(-5px) scale(1.1);
    transition-delay: 0s;
}

.trio-member-social-float a svg {
    width: 20px;
    height: 20px;
}

/* Content */
.trio-member-content {
    background: #fff;
    padding: 35px 25px 25px;
    border-radius: 24px;
    width: calc(100% + 20px);
    margin-top: -60px;
    /* Overlap the image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}

.trio-team-member-unique:hover .trio-member-content {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.trio-member-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.trio-team-member-unique:hover .trio-member-name {
    color: #3b82f6;
}

.trio-member-title {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.trio-member-divider {
    width: 40px;
    height: 3px;
    background: #e2e8f0;
    margin: 0 auto 15px;
    border-radius: 2px;
    transition: width 0.4s ease, background 0.4s ease;
}

.trio-team-member-unique:hover .trio-member-divider {
    width: 80px;
    background: #3b82f6;
}

.trio-member-desc {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* CTA Section */
.trio-join-team-cta {
    position: relative;
    padding: 120px 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.trio-join-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #393186 0%, #1e1b4b 100%);
    z-index: 1;
}

.trio-join-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.05;
}

.trio-join-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.trio-join-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.trio-join-content p {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 40px;
    line-height: 1.7;
}

.trio-btn-primary {
    display: inline-block;
    background: var(--trio-primary-gradient);
    color: #fff;
    padding: 16px 36px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(237, 66, 102, 0.3);
    /* ED4266-based shadow */
}

.trio-btn-primary:hover {
    background: linear-gradient(135deg, #d63758 0%, #e6a020 100%);
    /* Slightly darker gradient on hover */
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(237, 66, 102, 0.4);
}

/* Responsive */
@media (max-width: 991px) {
    .trio-directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .trio-directory-grid {
        grid-template-columns: 1fr;
    }

    .trio-join-content h2 {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Blog Template Styles
   ========================================================================== */

/* Blog Grid */
.trio-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Blog Card */
.trio-blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.trio-blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Image Wrapper */
.trio-blog-img-wrap {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.trio-blog-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.trio-blog-card:hover .trio-blog-img-wrap img {
    transform: scale(1.05);
}

.trio-blog-category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    color: #3b82f6;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Content Area */
.trio-blog-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.trio-blog-meta {
    margin-bottom: 15px;
}

.trio-meta-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
}

.trio-meta-date svg {
    width: 16px;
    height: 16px;
}

.trio-blog-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.trio-blog-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.trio-blog-card:hover .trio-blog-title a {
    color: #3b82f6;
}

.trio-blog-excerpt {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex: 1;
}

/* Footer (Author & Read More) */
.trio-blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
    margin-top: auto;
}

.trio-blog-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trio-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.trio-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trio-author-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}

.trio-read-more {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #3b82f6;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.trio-read-more svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.trio-read-more:hover {
    color: #2563eb;
}

.trio-read-more:hover svg {
    transform: translateX(4px);
}

/* Pagination */
.trio-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.trio-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 12px;
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.trio-pagination .page-numbers:hover {
    background: #f8fafc;
    color: #3b82f6;
    border-color: #3b82f6;
}

.trio-pagination .page-numbers.current {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .trio-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .trio-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Clients Template Styles
   ========================================================================== */

/* Logo Grid */
.trio-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: center;
    justify-items: center;
}

.trio-logo-item {
    width: 100%;
    height: 120px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.trio-logo-item:hover {
    background: #fff;
    color: #3b82f6;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.1);
}

/* Testimonials Grid */
/* Testimonials Section - Hidden as requested */
.trio-testimonials {
    display: none !important;
}

.trio-testimonial-grid {
    display: none !important;
}

.trio-testimonial-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.trio-testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.trio-quote-icon {
    width: 40px;
    height: 40px;
    color: #3b82f6;
    opacity: 0.2;
    margin-bottom: 20px;
    transition: opacity 0.4s ease;
}

.trio-testimonial-card:hover .trio-quote-icon {
    opacity: 0.5;
}

.trio-testimonial-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #334155;
    font-style: italic;
    margin-bottom: 30px;
    flex: 1;
}

.trio-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 20px;
}

.trio-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.trio-author-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.trio-author-info span {
    font-size: 0.85rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 991px) {
    .trio-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trio-testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .trio-logo-grid {
        grid-template-columns: 1fr;
    }

    .trio-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* Custom Proper Grid Logos Section */
.trio-proper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.trio-proper-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 50px 25px;
    /* Increased top/bottom padding to center logo */
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.trio-proper-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

.trio-proper-logo {
    color: #94a3b8;
    margin-bottom: 0;
    /* Removed margin since there is no text below */
    transition: all 0.3s ease;
    filter: grayscale(100%);
    opacity: 0.7;
}

.trio-proper-card:hover .trio-proper-logo {
    color: #3b82f6;
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.trio-proper-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.15rem;
    color: #0f172a;
    font-weight: 700;
}

.trio-proper-info span {
    font-size: 0.9rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .trio-proper-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .trio-proper-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .trio-proper-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Gallery Template Styles
   ========================================================================== */

.trio-gallery-section {
    padding: 80px 0;
    background-color: #f8fafc;
}

/* Gallery Filters */
.trio-gallery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
}

.trio-filter-btn {
    background: transparent;
    border: 2px solid #e2e8f0;
    color: #64748b;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trio-filter-btn:hover {
    border-color: #cbd5e1;
    color: #0f172a;
}

.trio-filter-btn.active {
    background: linear-gradient(135deg, #393186 0%, #1e1b4b 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(57, 49, 134, 0.3);
}

/* Masonry Grid (CSS Columns approach for simple masonry) */
.trio-masonry-grid {
    column-count: 3;
    column-gap: 20px;
    width: 100%;
}

.trio-masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trio-masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Overlay & Hover Effects */
.trio-masonry-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
}

.trio-masonry-info {
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.trio-masonry-info h3 {
    color: #ffffff;
    font-size: 1.25rem;
    margin: 0 0 5px 0;
    font-weight: 700;
}

.trio-masonry-info span {
    color: #93c5fd;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.trio-masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.2);
}

.trio-masonry-item:hover img {
    transform: scale(1.05);
}

.trio-masonry-item:hover .trio-masonry-overlay {
    opacity: 1;
}

.trio-masonry-item:hover .trio-masonry-info {
    transform: translateY(0);
}

/* Responsive Masonry */
@media (max-width: 1024px) {
    .trio-masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .trio-masonry-grid {
        column-count: 1;
    }

    .trio-gallery-filters {
        gap: 10px;
    }

    .trio-filter-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* Lightbox Modal */
.trio-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    z-index: 9999;
    display: none;
    /* Hidden by default, toggled via JS */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.trio-lightbox.active {
    opacity: 1;
}

.trio-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10000;
}

.trio-lightbox-close:hover {
    color: #ef4444;
}

.trio-lightbox-content {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.trio-lightbox.active .trio-lightbox-content {
    transform: scale(1);
}

.trio-lightbox-caption {
    margin-top: 20px;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
}

.trio-lightbox-prev,
.trio-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    padding: 20px;
    transition: all 0.3s ease;
    z-index: 10000;
    user-select: none;
    opacity: 0.7;
}

.trio-lightbox-prev:hover,
.trio-lightbox-next:hover {
    opacity: 1;
    color: #3b82f6;
    /* Matching the brand highlight color */
}

.trio-lightbox-prev {
    left: 20px;
}

.trio-lightbox-next {
    right: 20px;
}

@media (max-width: 768px) {

    .trio-lightbox-prev,
    .trio-lightbox-next {
        font-size: 30px;
        padding: 10px;
    }
}

/* ==========================================================================
   Services Template Styles
   ========================================================================== */

.trio-services-intro {
    padding: 80px 0 40px;
    text-align: center;
    background-color: #f8fafc;
}

.trio-intro-content {
    max-width: 800px;
    margin: 0 auto;
}

.trio-intro-content h2 {
    font-size: 2.5rem;
    color: #0f172a;
    margin-bottom: 20px;
    font-weight: 800;
}

.trio-intro-content p {
    font-size: 1.15rem;
    color: #64748b;
    line-height: 1.8;
}

.trio-services-list {
    padding: 40px 0 100px;
    background-color: #f8fafc;
}

.trio-container-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Reduced gap for 4 columns */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.trio-service-list-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    /* Unique Shape Border */
    border: 2px solid #e2e8f0;
    border-radius: 60px 12px 60px 12px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.trio-service-list-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #393186, #feb632);
    z-index: -1;
    border-radius: 62px 14px 62px 14px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hover Animation */
.trio-service-list-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 40px -10px rgba(57, 49, 134, 0.15);
    border-color: transparent;
}

.trio-service-list-card:hover::before {
    opacity: 1;
    /* Reveals gradient border on hover */
}

/* Premium Shine Animation */
.trio-service-list-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: left 0.75s ease-in-out;
    z-index: 10;
    pointer-events: none;
}

.trio-service-list-card:hover::after {
    left: 200%;
}


.trio-list-card-image {
    width: 100%;
    height: 180px;
    /* Reduced height for narrower column */
    overflow: hidden;
    position: relative;
    border-radius: 60px 12px 0 0;
}

.trio-list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.trio-service-list-card:hover .trio-list-card-image img {
    transform: scale(1.15);
}

.trio-list-card-content {
    padding: 25px;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    border-radius: 0 0 60px 12px;
}

.trio-list-card-content h3 {
    font-size: 1.5rem;
    /* Reduced font size */
    color: #0f172a;
    margin-bottom: 12px;
    font-weight: 800;
}

.trio-list-card-content p {
    font-size: 0.95rem;
    /* Reduced font size */
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.trio-list-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: grid;
    grid-template-columns: 1fr;
    /* 1 column for features */
    gap: 10px;
}

.trio-list-features li {
    font-size: 0.85rem;
    /* Reduced font size */
    color: #334155;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.trio-read-more-btn {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: #3b82f6;
    /* Accent color */
    text-decoration: none;
    transition: all 0.3s ease;
}

.trio-read-more-btn .arrow {
    margin-left: 8px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.trio-read-more-btn:hover {
    color: #1e40af;
    /* Darker accent */
}

.trio-read-more-btn:hover .arrow {
    transform: translateX(5px);
}

@media (max-width: 1024px) {
    .trio-container-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 640px) {
    .trio-container-grid {
        grid-template-columns: 1fr;
    }

    .trio-list-card-content {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   Trio Cycle Section Styles
   ========================================================================== */

.trio-cycle-section {
    padding: 80px 0 0 0;
    background-color: #ffffff;
}

/* ==========================================================================
   Trio Infinity Loop Redesign
   ========================================================================== */

.trio-infinity-wrapper {
    position: relative;
    width: 100%;

    overflow: visible;
}

/* Winding SVG Infinity Background */
.trio-infinity-svg {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.infinity-path-base {
    stroke-dasharray: 12 18;
    animation: infinityDots 30s linear infinite;
}

.infinity-path-glow {
    stroke-dasharray: 12 18;
    animation: infinityDots 30s linear infinite;
}

@keyframes infinityDots {
    to {
        stroke-dashoffset: -3000;
    }
}

/* Infinity Nodes */
.trio-infinity-node {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Positioning the 4 nodes along the Infinity curves */
.node-inf-1 {
    top: -2%;
    left: 16%;
    transform: translate(-50%, -50%);
}

/* Top Left Curve Peak */
.node-inf-2 {
    top: -2%;
    left: 63%;
    transform: translate(-50%, -50%);
}

/* Bottom Right Curve Peak */
.node-inf-3 {
    top: 54%;
    left: 63%;
    transform: translate(-50%, -50%);
}

/* Top Right Curve Peak */
.node-inf-4 {
    top: 54%;
    left: 17%;
    transform: translate(-50%, -50%);
}

/* Bottom Left Curve Peak */

.inf-node-marker {
    width: 60px;
    height: 60px;
    background: #0f172a;
    border: 3px solid #393186;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(57, 49, 134, 0.4);
    transition: all 0.4s ease;
    z-index: 2;
    position: relative;
}

.inf-node-card {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

.inf-node-card h4 {
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.inf-node-card p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Hover Effects Removed per request */

/* Responsive Fallback: Vertical Timeline */
@media (max-width: 992px) {
    .trio-infinity-svg {
        display: none;
    }

    .trio-infinity-wrapper .trio-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 50px 0;
    }

    .trio-infinity-node {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 400px;
    }

    /* Vertical connecting line */
    .trio-infinity-wrapper .trio-container::before {
        content: '';
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        background: linear-gradient(180deg, #393186, #feb632, #ef4444);
        border-radius: 2px;
        opacity: 0.3;
    }
}

/* Single Service Hero Section Removed, using shared page banner instead */

.trio-ss-subtitle {
    display: inline-block;
    color: #feb632;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    background: rgba(254, 182, 50, 0.1);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(254, 182, 50, 0.3);
}

.trio-ss-title {
    color: #ffffff;
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.trio-ss-tagline {
    color: #cbd5e1;
    font-size: 1.3rem;
    line-height: 1.6;
}

/* 2. Service Overview */
.trio-ss-overview {
    padding: 100px 0;
    background: #f8fafc;
}

.trio-ss-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.trio-content-editor {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.8;
}

.trio-content-editor p {
    margin-bottom: 20px;
}

.trio-ss-image-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1);
}

.trio-ss-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.trio-ss-image-wrapper:hover img {
    transform: scale(1.05);
}

.trio-ss-image-accent {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, #393186 0%, transparent 70%);
    opacity: 0.5;
    z-index: 1;
}

/* 3. Key Offerings */
.trio-ss-offerings {
    padding: 100px 0;
    background: #ffffff;
}

.trio-ss-offerings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.trio-ss-offering-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    text-align: center;
}

.trio-ss-offering-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(57, 49, 134, 0.08);
    border-color: #cbd5e1;
}

.trio-offering-icon {
    width: 70px;
    height: 70px;
    background: rgba(57, 49, 134, 0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    color: #393186;
    transition: all 0.4s ease;
}

.trio-offering-icon svg {
    width: 32px;
    height: 32px;
}

.trio-ss-offering-card:hover .trio-offering-icon {
    background: #393186;
    color: #ffffff;
    transform: rotateY(180deg);
}

.trio-ss-offering-card h3 {
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.trio-ss-offering-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 4. Recent Work Gallery */
.trio-ss-gallery {
    padding: 100px 0;
    background: #0f172a;
    color: #ffffff;
}

.trio-ss-gallery .trio-section-title {
    color: #ffffff;
}

.trio-ss-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.trio-ss-gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.trio-ss-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.trio-ss-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(57, 49, 134, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.trio-ss-gallery-item:hover img {
    transform: scale(1.1);
}

.trio-ss-gallery-item:hover .trio-ss-gallery-overlay {
    opacity: 1;
}

.trio-ss-gallery-overlay .overlay-icon {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 300;
    width: 60px;
    height: 60px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.trio-ss-gallery-item:hover .overlay-icon {
    transform: translateY(0);
}

/* 5. CTA Section */
.trio-ss-cta {
    padding: 100px 0;
    background: #ffffff;
}

.trio-ss-cta-box {
    background: #0f172a;
    border-radius: 30px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1);
}

.trio-ss-cta-box .cta-bg-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(57, 49, 134, 0.3) 0%, transparent 60%);
    animation: rotateGlow 20s linear infinite;
    pointer-events: none;
}

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

.trio-ss-cta-box h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.trio-ss-cta-box p {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.trio-ss-cta-box .trio-btn-primary {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 992px) {
    .trio-ss-title {
        font-size: 3.5rem;
    }

    .trio-ss-overview-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trio-ss-offerings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trio-ss-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .trio-ss-title {
        font-size: 2.5rem;
    }

    .trio-ss-offerings-grid {
        grid-template-columns: 1fr;
    }

    .trio-ss-gallery-grid {
        grid-template-columns: 1fr;
    }

    .trio-ss-cta-box {
        padding: 50px 30px;
    }

    .trio-ss-cta-box h2 {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Privacy Policy Page Styles
   ========================================================================== */

/* Legal Hero Section Removed, using shared page banner instead */

/* Legal Content Section */
.trio-legal-content-section {
    padding: 80px 0;
    background-color: #fff;
}

.trio-narrow-container {

    margin: 0 auto;
}

.trio-legal-content {
    background: #ffffff;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
}

.trio-legal-content h2 {
    color: #0f172a;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 40px 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.trio-legal-content h2:first-child {
    margin-top: 0;
}

.trio-legal-content h3 {
    color: #1e293b;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 30px 0 15px 0;
}

.trio-legal-content p {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.trio-legal-content ul,
.trio-legal-content ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.trio-legal-content li {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
}

.trio-legal-content a {
    color: #3b82f6;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.trio-legal-content a:hover {
    color: #1e40af;
}

.trio-legal-content strong {
    color: #0f172a;
    font-weight: 700;
}

/* Responsive Legal Page */
@media (max-width: 768px) {
    .trio-legal-content {
        padding: 30px 20px;
    }

    .trio-legal-content h2 {
        font-size: 1.5rem;
    }
}