/* ============================================================
   HOME.CSS – Home Page Specific Styles
   ============================================================ */

/* ── About Preview Section ───────────────────────────────── */
.section-about-preview {
    background: var(--bg-body);
    position: relative;
    overflow: hidden;
}

/* ── Services Overview ───────────────────────────────────── */
.section-services-overview {
    background: var(--bg-body);
    position: relative;
}

/* ── Clients Preview (Theme Aware) ───────────────────────── */
.section-clients-preview {
    background: var(--bg-darker);
    position: relative;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.section-clients-preview .section-title { color: var(--text-primary); }
.section-clients-preview .section-badge {
    background: var(--badge-bg);
    border-color: var(--badge-border);
    color: var(--badge-text);
}

.bg-section-alt { background: var(--bg-section-alt); }

/* ── Section Dividers & Refinements ──────────────────────── */
section { 
    padding: 100px 0; 
    position: relative;
}

.border-top { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }

@media (max-width: 768px) { section { padding: 60px 0; } }

/* ── Services Marquee ─────────────────────────────────────── */
.services-marquee-wrapper {
    overflow: hidden;
    padding: 60px 0;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.services-marquee-row {
    display: flex;
    width: max-content;
    white-space: nowrap;
}

.services-marquee-content {
    display: flex;
    gap: 30px;
    animation: marquee-left 45s linear infinite;
    padding-right: 30px;
}

.row-right .services-marquee-content {
    animation: marquee-right 45s linear infinite;
}

.service-marquee-item {
    width: 300px;
    flex-shrink: 0;
}

.services-marquee-wrapper:hover .services-marquee-content {
    animation-play-state: paused;
}

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

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

@media (max-width: 768px) {
    .service-marquee-item { width: 260px; }
    .services-marquee-content { animation-duration: 25s; gap: 20px; }
    .services-marquee-row { gap: 20px; }
    .services-marquee-wrapper { padding: 30px 0; }
}