/* ==========================================================================
   AAPOLIX COMPONENTS.CSS
========================================================================== */
/* ==========================================================
   01. BUTTONS
========================================================== */

.apx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--apx-3) var(--apx-5);
    border-radius: var(--apx-radius-md);
    font-size: var(--apx-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--apx-normal);
    border: 1px solid transparent;
    text-decoration: none;
	background: var(--apx-bg);
    color: var(--apx-primary);
}
.apx-btn-primary {
    background: var(--apx-primary);
    color: #fff;
}
.apx-btn-primary:hover {
    background: var(--apx-primary-hover);
}
.apx-btn-outline {
    background: transparent;
    border-color: var(--apx-primary);
    color: var(--apx-primary);
}
.apx-btn-outline:hover {
    background: var(--apx-primary);
    color: #fff;
}
.apx-btn-sm {
    padding: var(--apx-2) var(--apx-3);
    font-size: var(--apx-text-sm);
}
.apx-btn-lg {
    padding: var(--apx-4) var(--apx-6);
    font-size: var(--apx-text-lg);
}
.acd-download-button {background: var(--apx-primary);
    color: #fff;}
.acd-download-button:hover {background: var(--apx-primary);
    color: #fff;}

/* ==========================================================
   02. BADGES
========================================================== */

.apx-badge {
    display: inline-block;
    padding: var(--apx-1) var(--apx-3);
    font-size: var(--apx-text-sm);
    border-radius: 999px;
    background: var(--apx-surface);
    color: var(--apx-text);
}
.apx-badge-primary {
    background: var(--apx-primary);
    color: #fff;
}
/* ==========================================================
   03. ALERTS
========================================================== */
.apx-alert {
    padding: var(--apx-4);
    border-radius: var(--apx-radius-md);
    border: 1px solid var(--apx-border);
    margin-bottom: var(--apx-5);
}
.apx-alert-success {
    background: #ecfdf5;
    border-color: #10b981;
}
.apx-alert-error {
    background: #fef2f2;
    border-color: #ef4444;
}
.apx-alert-info {
    background: #eff6ff;
    border-color: #3b82f6;
}
/* ==========================================================
   04. CARDS
========================================================== */
.apx-card {
    background: #fff;
    border: 1px solid var(--apx-border);
    border-radius: var(-apx-radius-sm);
    box-shadow: var(--apx-shadow);
    overflow: hidden;
	padding-block: 0px;
}
.apx-card img{padding-block: 0px; }
.apx-card-body {
   /* padding: var(--apx-4); */
}
.apx-card-title {
    font-size: var(--apx-text-lg);
    font-weight: 700;
    margin-bottom: var(--apx-3);
}
.apx-card-text {
    color: var(--apx-muted);
    font-size: var(--apx-text-sm);
}
.apx-card-thumb{
    display: block;
    overflow: hidden;
}
.apx-card-thumb img{
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
	padding-block: 0px;
	border-radius: var(-apx-radius-sm);
}

/* ==========================================================
   04.1. HOME CARDS
========================================================== */
.apx-hcard {
    background:var(--apx-surface);
    border: 1px solid var(--apx-border);
    border-radius: var(-apx-radius-sm);
    margin-top: var(--apx-5);
    overflow: hidden;
}
.apx-hcard-body {
   padding: var(--apx-4);
}
.apx-hcard-title {
    font-size: var(--apx-text-lg);
    font-weight: 700;
    margin-bottom: var(--apx-3);
}
.apx-hcard-text {
    color: var(--apx-muted);
    font-size: var(--apx-text-sm);
}
.apx-hcard-thumb{
    display: block;
    overflow: hidden;
}
.apx-hcard-thumb img{
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.apx-hcard-label {font-size: var(--apx-text-base);}

/* ==========================================================
   04.2. HOME PAGE
========================================================== */
.apx-hpcard {
    background:var(--apx-surface);
    border: 1px solid var(--apx-border);
    border-radius: 15px;
    margin-top: var(--apx-5);
    overflow: hidden;
	box-shadow: var(--apx-shadow);
}
.apx-hpcard-body {
   padding: var(--apx-4);
}
.apx-hpcard-title {
    font-size: var(--apx-text-lg);
    font-weight: 700;
    margin-bottom: var(--apx-3);
}
.apx-hpcard-text {
    color: var(--apx-muted);
    font-size: var(--apx-text-sm);
}
.apx-hpcard-thumb{
    display: block;
    overflow: hidden;
}
.apx-hpcard-thumb img{
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.apx-hpcard-label {font-size: var(--apx-text-base);}

/* ==========================================================
   05. POST NAVIGATION
========================================================== */
.apx-nav-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--apx-border);
    border-radius: 12px;
    background: var(--apx-bg);
    text-decoration: none;
    transition: all 0.2s ease;
    height: 100%;
}
.apx-nav-btn:hover {
    border-color: #cbd5e1;
    background: var(--apx-surface);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
/* label (Previous / Next) */
.apx-nav-label {
    font-size: 12px;
    color: var(--apx-muted);
    font-weight: 500;
}
/* title */
.apx-nav-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--apx-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* alignment fix */
.apx-nav-next {
    align-items: flex-end;
    text-align: right;
}
.apx-related-header {
    font-size: var(--apx-text-lg);
    font-weight: 700;
    color: var(--apx-text);
}
/* grid spacing already handled */
.apx-related-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--apx-border);
    border-radius: 12px;
    background: var(--apx-bg);
    text-decoration: none;
    transition: all 0.2s ease;
}
.apx-related-card:hover {
    background: var(--apx-surface);
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.apx-related-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--apx-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.apx-related-arrow {
    color: var(--apx-muted);
    font-size: 16px;
    transition: transform 0.2s ease;
}
.apx-related-card:hover .apx-related-arrow {
    transform: translateX(4px);
    color: var(--apx-text);
}
.apx-parent-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--apx-border);
    border-radius: 12px;
    background: var(--apx-surface);
}
.apx-parent-label {
    font-size: 12px;
    color: var(--apx-muted);
    font-weight: 500;
}
.apx-parent-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--apx-link);
    text-decoration: none;
}
.apx-parent-link:hover {
    text-decoration: underline;
}
/* ==========================================================
   06. PAGINATION
========================================================== */
.apx-pagination {
    flex-wrap: wrap;
    gap: var(--apx-2);
    margin-top: var(--apx-6);
}
.apx-pagination a,
.apx-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--apx-2) var(--apx-3);
    border: 1px solid var(--apx-border);
    border-radius: var(--apx-radius-sm);
    font-size: var(--apx-text-sm);
    text-decoration: none;
    color: var(--apx-text);
}
.apx-pagination a:hover {
    border-color: var(--apx-primary);
    color: var(--apx-primary);
}
.apx-pagination .current {
    background: var(--apx-primary);
    color: #fff;
    border-color: var(--apx-primary);
}
/* ==========================================================
   07. FORMS
========================================================== */
.apx-form-group {
    margin-bottom: var(--apx-5);
}
.apx-label {
    display: block;
    margin-bottom: var(--apx-2);
    font-weight: 600;
}
.apx-help-text {
    font-size: var(--apx-text-sm);
    color: var(--apx-muted);
    margin-top: var(--apx-1);
}
.apx-input {
    width: 100%;
    padding: var(--apx-3) var(--apx-4);
    border: 1px solid var(--apx-border);
    border-radius: var(--apx-radius-md);
    transition: all var(--apx-normal);
}
.apx-input:focus {
    border-color: var(--apx-primary);
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.15);
    outline: none;
}

/* ==========================================================
   09. TABS
========================================================== */
.apx-tabs {
    display: flex;
    gap: var(--apx-3);
    border-bottom: 1px solid var(--apx-border);
}
.apx-tab {
    padding: var(--apx-3) var(--apx-4);
    cursor: pointer;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}
.apx-tab.is-active {
    border-color: var(--apx-primary);
    color: var(--apx-primary);
}
/* ==========================================================
   11. BLOG COMPONENTS
========================================================== */
/* ==========================================================================
   AAPX BLOG PREVIEW SYSTEM
========================================================================== */
.apx-blog-preview{
    padding: var(--apx-6) 0;
}
/* =========================
   TITLE
========================= */
.apx-blog-title{
    font-size: var(--apx-text-xl);
    font-weight: 800;
	text-align: center;
    color: var(--apx-text, #111827);
    letter-spacing: -0.02em;
    margin-bottom: var(--apx-5);
}
/* =========================
   BLOG CARD VARIANT
========================= */
.apx-blog-card{
    overflow: hidden;
	border-radius: 12px;
}
/* thumbnail wrapper */

/* hover zoom */
.apx-blog-card:hover .apx-card-thumb img{
    transform: scale(1.05);
}
/* title override */
.apx-blog-card-title{
    font-size: var(--apx-text-sm);
    font-weight: 700;
	padding: var(--apx-3);
    margin: 0;	
	line-height: 1.45;	
}
.apx-blog-card-title a{
	color:var(--apx-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.apx-blog-card-title a:hover{
	color: var(--apx-text);
}
/* ==========================================
   BLOG PAGE
========================================== */
.apx-blog-label{
    display:inline-block;
    margin-bottom:.75rem;
    padding:.4rem .9rem;
    border-radius:999px;
    background:var(--apx-surface);
    border:1px solid var(--apx-border);
    color:var(--apx-primary);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.apx-blog-description{
    margin-bottom: var(--apx-5);
    color:var(--apx-muted);
    text-wrap:balance;
}

/* ==========================================================
   12. SEARCH
========================================================== */
.apx-search-label{
    display: inline-block;
    margin-bottom: var(--apx-2);
    font-size: var(--apx-text-sm);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apx-primary);
}
.apx-search-card-title{
    margin: 0;
    font-size: var(--apx-text-sm);
	padding: var(--apx-4);
    font-weight: 700;
    line-height: 1.45;
}
.apx-search-card-title a{
    color: var(--apx-primary);
    text-decoration: none;
    transition: color var(--apx-normal);
}
.apx-search-card-title a:hover{
    color: var(--apx-text);
}
/* ==========================================================
   13. ARCHIVES
========================================================== */
.apx-archive-label{
    display:inline-block;
    margin-bottom:.75rem;
    padding:.4rem .9rem;
    border-radius:999px;
    background:var(--apx-surface);
    border:1px solid var(--apx-border);
    color:var(--apx-primary);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.apx-archive-card-title{
    margin: 0;
    font-size: var(--apx-text-sm);
	padding: var(--apx-4);
    font-weight: 700;
    line-height: 1.45;
	text-wrap:balance;
}
.apx-archive-card-title a{
    color: var(--apx-primary);
    text-decoration: none;
    transition: color var(--apx-normal);
}
.apx-archive-card-title a:hover{
    color: var(--apx-text);
}
.apx-archive-description{
    max-width:100%;
    margin-bottom: var(--apx-5);
    color:var(--apx-muted);
}
.apx-archive-description p{
    margin:0;
	font-size: 12px;
}
/* ==========================================================
   14. SERVICES
========================================================== */
.apx-service{
    padding: var(--apx-6) 0;
}
.apx-service *{
    box-sizing: border-box;
}
.apx-service-header h2{
    font-size: var(--apx-text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
	text-align: center;
    color: var(--apx-text, #111827);
	letter-spacing: -0.02em;
	margin-bottom: var(--apx-5);
}
/* ==========================================================================
   FEATURED SECTION
========================================================================== */
.apx-service-featured{
    margin-top: var(--apx-6);
    margin-bottom: var(--apx-6);
    display: flex;
    justify-content: center;
}
/* ==========================================================
   15. CLIENT SHOWCASE
========================================================== */
.aapolix-client-showcase {
    width: 100%;
}
/* TITLE (mobile first) */
.aapolix-client-title {
    text-align: center;
    margin: 18px 0 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--apx-text, #111827);
    letter-spacing: -0.02em;
}
/* WRAPPER */
.aapolix-client-scroll-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 8px 0;
    margin-bottom: 20px;
}
/* TRACK */
.aapolix-client-scroll-track {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    animation: aapolixScrollClients 30s linear infinite;
    will-change: transform;
}
/* CLIENT ITEM (mobile optimized touch target) */
.aapolix-client-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--apx-text, #111827);
    background: var(--apx-surface, #f9fafb);
    border: 1px solid var(--apx-border, #e5e7eb);
    transition: all 0.2s ease;
}
/* HOVER */
.aapolix-client-item:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: #d1d5db;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
/* PAUSE ANIMATION */
.aapolix-client-scroll-wrapper:hover .aapolix-client-scroll-track,
.aapolix-client-scroll-track.paused {
    animation-play-state: paused;
}
/* ANIMATION */
@keyframes aapolixScrollClients {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================
   16. UNITY COMPONENTS
========================================================== */
.unity-container {
    width: 100%;
    padding: 20px 0;
}
/* HEADER TEXT */
.unity-container h2 {
    font-size: var(--apx-text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
	margin-bottom: var(--apx-5);
	text-align: center;
    color: var(--apx-text, #111827);
}
.unity-container p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--apx-muted, #6b7280);
    max-width: 90%;
    margin: 0 auto 20px;
}
/* =========================
   GRID (MOBILE FIRST)
========================= */
.unity-grid {
    display: grid;
    grid-template-columns: 1fr;   /* mobile first */
    gap: 14px;
    padding: 0 12px;
}
/* =========================
   SHORTS CARD (OPTIMIZED)
========================= */
.unity-card {
    position: relative;
    height: 320px; /* mobile optimized (important for shorts) */
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: transform 0.25s ease;
}
.unity-card:hover {
    transform: translateY(-4px);
}
/* =========================
   SLIDES
========================= */
.unity-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.unity-slide.active {
    opacity: 1;
    z-index: 2;
}
.unity-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 6s ease;
}
.unity-slide.active img {
    transform: scale(1.08);
}
/* =========================
   OVERLAY
========================= */
.unity-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.15)
    );
    z-index: 3;
}
/* =========================
   CATEGORY
========================= */
.unity-category {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.6);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
/* =========================
   TITLE
========================= */
.unity-title-wrap {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 5;
}
.unity-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
}
.unity-card.show-title .unity-title {
    opacity: 1;
    transform: translateY(0);
}
/* =========================
   SHINE EFFECT (SOFTER)
========================= */
.unity-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.08),
        transparent,
        rgba(255,255,255,0.03)
    );
    animation: shine 6s linear infinite;
}
@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* ==========================================================
   17. YGE COMPONENTS
========================================================== */
.yge-card{
    background: var(--apx-bg);
    border: 1px solid var(--apx-border);
    border-radius: 18px;
    padding: var(--apx-5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.25s ease;
    box-shadow: var(--apx-shadow);
}
/* hover effect (AAPX premium style) */
.yge-card:hover{
    transform: translateY(-6px);
    border-color: #d1d5db;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
/* ==========================================================================
   ICON
========================================================================== */
.yge-icon{
    font-size: 28px;
    margin-bottom: var(--apx-3);
    color: var(--apx-primary);
    opacity: 0.95;
}
/* ==========================================================================
   TEXT STYLING
========================================================================== */
.yge-card h4{
    font-size: var(--apx-text-base);
    font-weight: 700;
    color: var(--apx-text);
    margin: 0 0 var(--apx-2);
}
.yge-card p{
    font-size: var(--apx-text-sm);
    line-height: 1.7;
    color: var(--apx-muted);
    margin: 0;
}
/* ==========================================================================
   FEATURED CARD VARIANT
========================================================================== */
.yge-card-featured{
    background: var(--apx-surface);
    border: 1px solid rgba(10,102,194,0.15);
    max-width: 520px;
    width: 100%;
}
/* center featured content */
.yge-card-featured h4,
.yge-card-featured p{
    text-align: center;
}
/* ==========================================================
   18. BREADCRUMBS
========================================================== */
.mos-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
margin-left: 20px;
    font-size: 13px;
    color: var(--apx-muted);
    margin-bottom: var(--apx-5);
}
/* Links */
.mos-breadcrumbs a {
    text-decoration: none;
    color: var(--apx-muted);
    transition: color .2s ease;
}
.mos-breadcrumbs a:hover {
    color: var(--apx-text);
}
/* Separator */
.mos-sep {
    margin: 0 8px;
    color: rgba(107, 114, 128, 0.6); /* soft muted */
    
}
/* Current page */
.mos-current {
    color: var(--apx-text);
    font-weight: 300;
	font-size: 12px;
}
/* Optional: subtle hover underline effect */
.mos-breadcrumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* ==========================================================
   19. HTML SITEMAP
========================================================== */
.mos-html-sitemap{
    background: var(--apx-bg);
	/*
    border: 1px solid var(--apx-border);
	box-shadow: var(--apx-shadow);
    border-radius: 12px;
    padding: var(--apx-5);
    margin: var(--apx-6) 0;
	*/
}
.mos-html-sitemap ul{
    list-style: none;
    margin: var(--apx-3) 0 0;
	/*
    padding-left: var(--apx-5);
		*/
}
.mos-html-sitemap li{
    position: relative;
    margin: var(--apx-3) 0;
}
.mos-html-sitemap li::before{
    content: "";
    position: absolute;
    left: -16px;
    top: 12px;
    width: 8px;
    height: 1px;
    background: var(--apx-border);
}
.mos-html-sitemap ul ul{
    margin-top: var(--apx-2);
    border-left: 1px solid var(--apx-border);
    padding-left: var(--apx-5);
}
.mos-html-sitemap a{
    color: var(--apx-text);
    text-decoration: none;
    font-size: var(--apx-text-base);
    font-weight: 500;
    transition: color var(--apx-normal);
}
.mos-html-sitemap a:hover{
    color: var(--apx-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mos-html-sitemap small{
    margin-left: 6px;
    font-size: var(--apx-text-sm);
    color: var(--apx-muted);
    font-weight: 500;
}
/* ==========================================================
   20. WORDPRESS GALLERY
========================================================== */
/* GRID WRAPPER */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}
/* EACH ITEM */
.gallery-item {
    margin: 0 !important;
}
/* IMAGE CARD */
.gallery-icon {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--apx-surface);
    border: 1px solid var(--apx-border);
    transition: all .25s ease;
}
/* IMAGE */
.gallery-icon img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .35s ease;
	padding: 0px;
}
/* HOVER EFFECT */
.gallery-icon:hover {
    border-color: rgba(0,0,0,0.15);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.gallery-icon:hover img {
    transform: scale(1.05);
}
/* LIGHT OVERLAY EFFECT */
.gallery-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .25s ease;
}
.gallery-icon:hover::after {
    background: rgba(255,255,255,0.05);
}
.gallery-icon::after {
    pointer-events: none;
}
/* REMOVE DEFAULT FIGURE SPACE */
.gallery figure {
    margin: 0;
}
/* ==========================================================
   21. WORDPRESS PLAYLIST
========================================================== */
/* =========================
   WRAPPER
========================= */
.wp-playlist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--apx-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--apx-bg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
/* =========================
   VIDEO PLAYER (MOBILE FIRST)
========================= */
.mejs-container.mejs-video {
    width: 100% !important;
    /* FIXED NORMAL VIDEO RATIO */
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    background: #000;
    overflow: hidden;
}
.mejs-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* important for normal videos */
}
/* =========================
   PLAYLIST SECTION
========================= */

.wp-playlist-tracks {
    padding: 10px;
    background: var(--apx-surface);
    max-height: 260px;
    overflow-y: auto;
}

/* =========================
   TRACK ITEM
========================= */
.wp-playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--apx-border);
    border-radius: 10px;
    background: var(--apx-bg);
    transition: all .2s ease;
    font-size: var(--apx-text-smx);
}
/* hover */
.wp-playlist-item:hover {
    background: var(--apx-surface);
}
/* active */
.wp-playlist-playing {
    border-color: var(--apx-primary, #111827);
    background: rgba(17, 24, 39, 0.04);
}
/* =========================
   TITLE STYLE
========================= */
.wp-playlist-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--apx-text);
    text-decoration: none;
    min-width: 0;
}
.wp-playlist-caption::before {
    content: "▶";
    font-size: 10px;
    color: var(--apx-muted);
}
.wp-playlist-playing .wp-playlist-caption::before {
    color: var(--apx-primary);
}
/* truncate title */
.wp-playlist-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* =========================
   DURATION
========================= */
.wp-playlist-item-length {
    font-size: 12px;
    color: var(--apx-muted);
    flex-shrink: 0;
}
/* =========================
   CONTROLS CLEANUP
========================= */
.wp-playlist-next,
.wp-playlist-prev {
    display: none;
}
/* ==========================================================
   22. UTILITIES
========================================================== */
.apx-text-center {
    text-align: center;
}
.apx-text-right {
    text-align: right;
}
.apx-hover-lift {}
/* TABLET */
@media (min-width: 600px) {
    .unity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px){
	.apx-service{
        padding: var(--apx-6) 0;
    }
	.aapolix-client-title {
        font-size: var(--apx-text-xl);
		letter-spacing: -0.02em;
		margin-bottom: var(--apx-5);
	   font-weight: 800;
	   text-align: center;
		color: var(--apx-text, #111827);
    }
    .aapolix-client-item {
        padding: 9px 16px;
        font-size: 13px;
    }
    .aapolix-client-scroll-track {
        gap: 12px;
        animation-duration: 35s;
    }
	.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
    .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
}
/* DESKTOP */
@media (min-width: 992px) {

	.apx-service{
        padding: var(--apx-6) 0;
    }
	.aapolix-client-title {
        font-size: 1.75rem;
    }
    .aapolix-client-item {
        padding: 10px 18px;
        font-size: 13.5px;
    }
    .aapolix-client-scroll-wrapper {
        padding: 12px 0;
    }
    .unity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
	.wp-playlist {
        flex-direction: row;
    }
    .mejs-container.mejs-video {
        flex: 2;
        max-height: 70vh;
        aspect-ratio: 16 / 9;
    }
    .wp-playlist-tracks {
        flex: 1;
        max-height: 70vh;
        overflow-y: auto;
    }
}
/* LARGE DESKTOP */
@media (min-width: 1200px) {
    .unity-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* =========================
   MOBILE FIX (IMPORTANT)
========================= */
@media (max-width: 480px) {
    .unity-card {
        height: 280px; /* better for small screens */
    }
    .unity-title {
        font-size: 13px;
    }
}
/* =========================
   ACCESSIBILITY
========================= */
@media (prefers-reduced-motion: reduce) {
    .aapolix-client-scroll-track {
        animation: none;
    }
	.unity-card::before {
        animation: none;
    }

    .unity-slide {
        transition: none;
    }
}

/* FAQ */
.apx-faq{
    margin-block: var(--apx-8);
}

.apx-faq-item{
    background: var(--apx-surface);
    border: 1px solid var(--apx-border);
    border-radius: var(--apx-radius-md);
    margin-bottom: var(--apx-3);
    overflow: hidden;
    transition: .25s ease;
}

.apx-faq-item[open]{
    border-color: var(--apx-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
}

.apx-faq-item summary{
    list-style: none;
    cursor: pointer;
    padding: var(--apx-4);
    font-size: var(--apx-text-base);
    font-weight: 600;
    color: var(--apx-heading);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.apx-faq-item summary::-webkit-details-marker{
    display:none;
}

.apx-faq-item summary::after{
    content:"+";
    font-size:1.35rem;
    color:var(--apx-primary);
    transition:.25s ease;
}

.apx-faq-item[open] summary::after{
    content:"−";
}

.apx-faq-content{
    padding:0 var(--apx-4) var(--apx-4);
    color:var(--apx-text);
}

.apx-faq-content p{
    margin:0;
}