/* ════════════════════════════════════════════════════════════
   █ HOMEPAGE (REAL / LIVE) · CUSTOM SECTION STYLES
   █ The live homepage is the Elementor build; Elementor loads
   █ its own post-CSS. This file carries ONLY the custom HTML
   █ sections embedded in it (testimonials/services/tools —
   █ obtt/ts-/services- classes). Was WPCode snippet 23807178,
   █ previously loaded SITEWIDE; now scoped to the front page.
   ════════════════════════════════════════════════════════════ */
/* ============================================================
   MASTER-HOMEPAGE.CSS - all 3 homepage sections in one file
   Order: tokens/global -> testimonials -> services -> tools
   ============================================================ */

/* ============================================================
   HOMEPAGE-GLOBAL.CSS
   Shared design tokens & foundations for all homepage sections
   Load once, BEFORE the section stylesheets.
   Sections covered: .ts-section (testimonials), .section-heading
   + .services-wrap (services tabs), .obtt (tools grid)
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --teal: #29a3c4;
  --teal-dark: #0e93a8;
  --teal-darker: #0b7c8e;
  --orange: #e2702a;
  --cream: #fdf9e7;

  /* Neutrals */
  --ink: #3f3f3f;
  --heading: #111111;
  --border-teal: #56b6d3;
  --border-gray: #E4E8F0;

  /* Testimonials accents */
  --ts-blue: #1A56DB;
  --ts-green: #0E9F6E;

  /* Tools accents */
  --obtt-teal: #0d9488;
  --obtt-emerald: #059669;
  --obtt-cyan: #1296B5;
  --obtt-slate: #475569;
  --obtt-dark: #0f172a;

  /* Typography */
  --font-body: 'Nunito', 'Segoe UI', Arial, sans-serif;
  --font-ts: 'Inter', sans-serif;
  --font-obtt: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 14px;
  --radius-card-lg: 18px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.25s;
  --dur-slow: 0.3s;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-btn: 0 3px 10px rgba(0,0,0,.08);
}

/* ---------- 2. Scoped reset ----------
   One reset for all homepage sections, scoped so it can never
   leak into Elementor, the theme, or other page content. */
.ts-section, .ts-section *, .ts-section *::before, .ts-section *::after,
.section-heading, .section-heading *,
.services-wrap, .services-wrap *, .services-wrap *::before, .services-wrap *::after,
.obtt, .obtt *, .obtt *::before, .obtt *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- 3. Base typography per section root ---------- */
.ts-section { font-family: var(--font-ts); }
.section-heading,
.services-wrap { font-family: var(--font-body); color: var(--ink); }
.obtt { font-family: var(--font-obtt); color: var(--obtt-dark); line-height: 1.7; font-size: 16px; }
/* Guard against Elementor/theme typography overrides inside the tools grid */
.obtt *, .obtt *::before, .obtt *::after { font-family: var(--font-obtt) !important; }

/* ---------- 4. Shared card foundation ---------- */
.ts-card,
.obtt .obtt-card {
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- 5. Interactive elements ---------- */
.ts-btn, .ts-dot, .ts-thumb,
.tab-btn,
.services-wrap .cta-row a.cta-btn,
.obtt .obtt-tab {
  cursor: pointer;
}

/* ---------- 6. Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes obtt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,148,136,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(13,148,136,0); }
}

/* ---------- 7. Accessibility / motion helper ---------- */
@media (prefers-reduced-motion: reduce) {
  .ts-track, .ts-card, .ts-thumb img, .ts-thumb::before,
  .panel, .tab-btn, .cta-btn,
  .obtt .obtt-card, .obtt .obtt-tab {
    transition: none;
    animation: none;
  }
}

/* ---------- 8. Utility classes ---------- */
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-text-center { text-align: center; }
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 9. Breakpoints reference ----------
   980/768/480 tools grid - 900 services stack - 860/500 testimonials */

/* ============================================================
   SECTION 1 - CLIENT VIDEO TESTIMONIALS SLIDER
   Requires: homepage-global.css
   ============================================================ */

/* Wrapper — transparent so Elementor's section background shows through */
.ts-section { width: 100%; padding: 0; }

/* ── Slider ── */
.ts-outer { overflow: hidden; width: 100%; }

.ts-track {
  display: flex;
  gap: 18px;
  transition: transform 0.45s var(--ease-out);
  will-change: transform;
}

/* Each card = 1/4 width minus gaps (3 gaps / 4 cards) */
.ts-card {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 0;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-med), transform var(--dur-med);
}

.ts-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* ── Thumbnail ── */
.ts-thumb {
  position: relative;
  width: 100%;
  padding-top: 56%;
  overflow: hidden;
  background: #EEF0F5;
  flex-shrink: 0;
}

.ts-thumb img,
.ts-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ts-thumb:hover img { transform: scale(1.04); }

/* Vignette overlay */
.ts-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 50%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}

/* Play button */
.ts-thumb::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A56DB'%3E%3Cpolygon points='6,3 20,12 6,21'/%3E%3C/svg%3E") 58% 50% / 16px 16px no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
  z-index: 2;
  pointer-events: none;
}

.ts-thumb:hover::before {
  background-color: #ffffff;
  transform: translate(-50%, -50%) scale(1.1);
}

/* When the video embed is active, hide play button + overlay */
.ts-thumb.playing { cursor: default; }
.ts-thumb.playing::before,
.ts-thumb.playing::after { display: none; }

/* ── Card body ── */
.ts-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.ts-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ts-blue);
  line-height: 1.3;
}

/* ── Stats ── */
.ts-stats {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-gray);
  background: #F6F8FF;
  flex-shrink: 0;
}

.ts-stat {
  flex: 1;
  padding: 9px 8px;
  text-align: center;
}

.ts-stat + .ts-stat { border-left: 1px solid var(--border-gray); }

.ts-stat-val {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--ts-green);
  letter-spacing: -0.01em;
  line-height: 1;
}

.ts-stat-lbl {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #333;
  margin-top: 3px;
}

/* ── Quote ── */
.ts-quote {
  font-size: 14px;
  line-height: 1.78;
  color: #000;
  flex: 1;
  padding-left: 10px;
  border-left: 2px solid #DBEAFE;
}

/* ── Navigation ── */
.ts-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.ts-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #D1D5DB;
  background: #ffffff;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  line-height: 0;
}

.ts-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-btn:hover:not(:disabled) {
  border-color: var(--ts-blue);
  color: var(--ts-blue);
  background: #EFF6FF;
}

.ts-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ts-dots { display: flex; gap: 7px; align-items: center; }

.ts-dot {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background: #D1D5DB;
  border: none;
  padding: 0;
  transition: background var(--dur-fast), width var(--dur-med);
}

.ts-dot.active { background: var(--ts-blue); width: 20px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .ts-card { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 500px) {
  .ts-card { flex: 0 0 100%; }
}

/* ============================================================
   SECTION 2 - DIGITAL MARKETING SERVICES TABS
   Requires: homepage-global.css
   Note: the old standalone body{} and :root{} rules moved to
   the global file / removed for Elementor compatibility.
   ============================================================ */

/* ---------- Page heading ---------- */
.section-heading {
  text-align: center;
  margin-bottom: 36px;
}

.section-heading h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--heading);
  line-height: 1.2;
}

.section-heading h3 {
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 800;
  color: var(--teal);
  line-height: 1.25;
}

/* ---------- Section layout ---------- */
.services-wrap {
  max-width: 1180px;
  margin: 0 auto 40px; /* bottom room for the overlapping CTA pill */
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-card);
  padding: 28px 28px 52px;
  display: flex;
  gap: 40px;
  position: relative;
  background: #fff;
}

/* ---------- Sidebar (tabs) ---------- */
.services-sidebar {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tabs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tab-btn {
  width: 100%;
  display: block;
  text-align: center;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: var(--orange);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-sm);
  transition: background var(--dur-med) ease, color var(--dur-med) ease, box-shadow var(--dur-med) ease;
}

.tab-btn:hover,
.tab-btn:focus-visible,
.tab-btn.active {
  background: #ffffff;
  color: var(--teal);
  border-color: #c9c9c9;
  box-shadow: var(--shadow-btn);
  outline: none;
}

/* ---------- Content panels ---------- */
.services-content {
  flex: 1 1 auto;
  min-width: 0;
}

.panel {
  display: none;
  animation: fadeIn .35s ease;
}

.panel.active { display: block; }

.panel p {
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.panel ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 20px;
}

.panel ul li {
  font-size: 15.5px;
  line-height: 1.75;
}

/* ---------- CTA ---------- */
.services-wrap .cta-row {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 5;
}

/* !important kept deliberately: overrides theme/Elementor link styles */
.services-wrap .cta-row a.cta-btn {
  display: inline-block;
  text-decoration: none !important;
  background: var(--teal-dark) !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.2 !important;
  white-space: nowrap;
  padding: 16px 38px !important;
  margin: 0;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 4px 14px rgba(14, 147, 168, .45);
  transition: background var(--dur-med) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.services-wrap .cta-row a.cta-btn:hover,
.services-wrap .cta-row a.cta-btn:focus {
  background: var(--teal-darker) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14, 147, 168, .55);
  text-decoration: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .services-wrap {
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px 52px;
  }
  .services-sidebar { flex: 1 1 auto; }
}

/* ============================================================
   SECTION 3 - SEO & AI TECHNOLOGIES TOOL GRID
   Requires: homepage-global.css
   !important kept where it guards against Elementor/theme
   global typography; removed where nothing competes.
   ============================================================ */

.obtt .container{max-width:1250px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
.obtt h2{font-weight:800 !important}

/* ============ SECTION ============ */
.obtt.obtt-section{position:relative;background:linear-gradient(180deg,#f0fdfa 0%,#ecfdf5 55%,#f0fdf4 100%);padding:90px 0;overflow:hidden}
.obtt.obtt-section::before{content:'';position:absolute;width:900px;height:900px;top:-390px;right:-270px;background:radial-gradient(circle,rgba(13,148,136,.10) 0%,transparent 65%);pointer-events:none}
.obtt.obtt-section::after{content:'';position:absolute;width:820px;height:820px;bottom:-340px;left:-260px;background:radial-gradient(circle,rgba(16,185,129,.10) 0%,transparent 65%);pointer-events:none}

/* ============ HEADER ============ */
.obtt .obtt-header{text-align:center;max-width:760px;margin:0 auto 36px;position:relative;z-index:2}
.obtt .obtt-badge-wrap{display:flex;justify-content:center;margin-bottom:14px}
.obtt .obtt-badge{display:inline-flex !important;align-items:center !important;gap:8px !important;width:auto !important;max-width:max-content !important;background:#fff !important;color:var(--obtt-teal) !important;font-size:12px !important;font-weight:900 !important;letter-spacing:1.6px !important;text-transform:uppercase !important;padding:8px 17px !important;border-radius:var(--radius-pill) !important;border:1.5px solid rgba(13,148,136,.22) !important;box-shadow:0 6px 16px rgba(13,148,136,.12)}
.obtt .obtt-badge .obtt-dot{width:7px;height:7px;border-radius:50%;background:var(--obtt-teal);animation:obtt-pulse 1.8s infinite}
.obtt .obtt-header h2{font-size:43px !important;color:var(--obtt-dark) !important;line-height:1.18 !important;letter-spacing:-1px !important;margin-bottom:16px !important}
.obtt .obtt-header h2 .accent{color:var(--obtt-cyan) !important;-webkit-text-fill-color:var(--obtt-cyan) !important;background:none !important;-webkit-background-clip:unset !important;background-clip:unset !important}
.obtt .obtt-header p{font-size:16px !important;font-weight:600 !important;color:var(--obtt-slate) !important;line-height:1.7 !important;max-width:600px;margin:0 auto !important}

/* ============ TABS ============ */
.obtt .obtt-radio{position:absolute;opacity:0;pointer-events:none}
.obtt .obtt-tabs{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:36px;position:relative;z-index:2}
.obtt .obtt-tab{font-size:13px !important;font-weight:800 !important;padding:10px 22px;border-radius:var(--radius-pill);border:1.5px solid #b6e3da;background:#fff;color:var(--obtt-slate) !important;transition:background var(--dur-med) ease,color var(--dur-med) ease,border-color var(--dur-med) ease,box-shadow var(--dur-med) ease;letter-spacing:0.3px !important;line-height:1 !important}
.obtt .obtt-tab:hover{border-color:var(--obtt-teal);color:var(--obtt-teal) !important;background:#f0fdfa}
.obtt #tt-all:checked ~ .obtt-tabs label[for="tt-all"],
.obtt #tt-seo:checked ~ .obtt-tabs label[for="tt-seo"],
.obtt #tt-ai:checked ~ .obtt-tabs label[for="tt-ai"],
.obtt #tt-an:checked ~ .obtt-tabs label[for="tt-an"],
.obtt #tt-lo:checked ~ .obtt-tabs label[for="tt-lo"]{background:linear-gradient(135deg,var(--obtt-emerald),var(--obtt-teal));border-color:transparent;color:#fff !important;box-shadow:0 8px 20px rgba(13,148,136,.32)}

/* ============ TOOL GRID ============ */
.obtt .obtt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;z-index:2}
.obtt .obtt-card{border:1.5px solid #d1f0ea;border-radius:var(--radius-card-lg);padding:24px 14px 18px;align-items:center;gap:12px;transition:transform var(--dur-slow) ease,border-color var(--dur-slow) ease,box-shadow var(--dur-slow) ease;position:relative}
.obtt .obtt-card::before{content:'';position:absolute;inset:0;background:var(--t-grad);opacity:0;transition:opacity var(--dur-slow) ease}
.obtt .obtt-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 16px 40px var(--t-shadow)}
.obtt .obtt-card:hover::before{opacity:1}
.obtt .obtt-ic{position:relative;z-index:1;width:54px;height:54px;border-radius:var(--radius-card);background:#fff;border:1.5px solid var(--t-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-slow) ease,border-color var(--dur-slow) ease;overflow:hidden}
.obtt .obtt-ic img{width:32px;height:32px;object-fit:contain;display:block}
.obtt .obtt-ic .fb{display:none;font-size:19px !important;font-weight:900 !important;color:var(--t-color) !important;letter-spacing:-0.5px !important}
.obtt .obtt-card:hover .obtt-ic{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.7)}
.obtt .obtt-name{position:relative;z-index:1;font-size:13px !important;font-weight:800 !important;color:var(--obtt-dark) !important;text-align:center;line-height:1.35 !important;transition:color var(--dur-slow) ease}
.obtt .obtt-card:hover .obtt-name{color:#fff !important}

/* ============ CATEGORY VISIBILITY ============ */
.obtt .obtt-grid .tool{display:flex}
.obtt #tt-seo:checked ~ .obtt-grid .tool:not(.c-seo),
.obtt .obtt-grid[data-cat="seo"] .tool:not(.c-seo){display:none}
.obtt #tt-ai:checked ~ .obtt-grid .tool:not(.c-ai),
.obtt .obtt-grid[data-cat="ai"] .tool:not(.c-ai){display:none}
.obtt #tt-an:checked ~ .obtt-grid .tool:not(.c-an),
.obtt .obtt-grid[data-cat="an"] .tool:not(.c-an){display:none}
.obtt #tt-lo:checked ~ .obtt-grid .tool:not(.c-lo),
.obtt .obtt-grid[data-cat="lo"] .tool:not(.c-lo){display:none}

/* ============ COLOR VARIANTS ============ */
.obtt .v1{--t-color:#0d9488;--t-border:rgba(13,148,136,.25);--t-grad:linear-gradient(135deg,#0d9488,#0f766e);--t-shadow:rgba(13,148,136,.28)}
.obtt .v2{--t-color:#059669;--t-border:rgba(5,150,105,.25);--t-grad:linear-gradient(135deg,#059669,#047857);--t-shadow:rgba(5,150,105,.28)}
.obtt .v3{--t-color:#0891b2;--t-border:rgba(8,145,178,.25);--t-grad:linear-gradient(135deg,#0891b2,#0e7490);--t-shadow:rgba(8,145,178,.28)}
.obtt .v4{--t-color:#2563eb;--t-border:rgba(37,99,235,.25);--t-grad:linear-gradient(135deg,#2563eb,#1d4ed8);--t-shadow:rgba(37,99,235,.28)}
.obtt .v5{--t-color:#7c3aed;--t-border:rgba(124,58,237,.25);--t-grad:linear-gradient(135deg,#7c3aed,#6d28d9);--t-shadow:rgba(124,58,237,.28)}
.obtt .v6{--t-color:#d97706;--t-border:rgba(217,119,6,.25);--t-grad:linear-gradient(135deg,#d97706,#b45309);--t-shadow:rgba(217,119,6,.28)}
.obtt .v7{--t-color:#db2777;--t-border:rgba(219,39,119,.25);--t-grad:linear-gradient(135deg,#db2777,#be185d);--t-shadow:rgba(219,39,119,.28)}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .obtt .obtt-grid{grid-template-columns:repeat(4,1fr)}
  .obtt .obtt-header h2{font-size:34px !important}
}
@media(max-width:768px){
  .obtt.obtt-section{padding:66px 0}
  .obtt .obtt-header h2{font-size:28px !important;letter-spacing:-0.5px !important}
  .obtt .obtt-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .obtt .obtt-header h2{font-size:24px !important}
  .obtt .obtt-grid{grid-template-columns:1fr 1fr}
  .obtt .obtt-tab{padding:9px 16px}
}