/**
 * BOTA Design System v1.2
 * Typography-driven design system for bota.business
 * Built for BeTheme / Muffin Builder
 *
 * BRAND KIT
 *   Fonts:  Outfit 800 (display/headings), DM Sans (body), DM Mono (labels/meta)
 *   Colors: Blue #2020cc, Black #0d0d0d, White #fff
 *           N700 #333, N500 #666, N100 #e8e8e8, N50 #f5f5f5
 *   Rule:   Blue max 20% per composition
 *
 * FONT LOADING
 *   Via child theme functions.php → wp_enqueue_style('bota-fonts')
 *   Never use @import in this file — BeTheme CSS parser rejects it.
 *
 * FILE LOCATION
 *   /wp-content/themes/betheme-child/css/bota-design-system.css
 *   Enqueued in functions.php with version parameter for cache busting.
 *
 * BETHEME CONSTRAINTS
 *   - CSS parser doesn't support @import or grid-template-columns (use flexbox)
 *   - @keyframes for animations must go in inline <style> in HTML blocks
 *   - .button class uses CSS variables (--mfn-button-bg) — use a.bota-btn instead
 *   - Column-level CSS targeting is unreliable — use .mcb-column or inline HTML
 *
 * TABLE OF CONTENTS
 *   1. Global (hero, buttons, links, numbers, CTA, caps, facts, visuals)
 *   2. Services
 *   3. About
 *   4. Projects
 *   5. Responsive (all pages)
 *   6. Contact
 *   7. Products
 *   8. Homepage (logo carousel, services grid)
 *   9. Footer
 *  10. BeTheme overrides
 *  11. Legacy
 */


/* ============================================
   1. GLOBAL COMPONENTS
   Shared across all pages
   ============================================ */

/* --- 1.1 Hero ---
   Used on: Services, About, Projects, Products, Contact
   Structure: section.bota-hero > .bota-hero-label + h1.bota-hero-title + .bota-hero-desc
   Background: white (default), set in Muffin Builder section settings.
*/
.bota-hero {
  padding: 140px 0 80px !important;
}
.bota-hero-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px !important;
}
.bota-hero h1,
.bota-hero .bota-hero-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(46px, 5.5vw, 68px) !important;
  line-height: 1.15 !important;
  letter-spacing: -3px !important;
  color: #0d0d0d !important;
}
.bota-hero-title em {
  font-style: normal;
  color: #2020cc;
}
.bota-hero-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #666 !important;
  max-width: 540px;
  margin-top: 28px !important;
}

/* --- 1.2 Primary button ---
   Usage: <a href="..." class="bota-btn">Label</a>
   Bypasses BeTheme's .button class and --mfn-button-bg variables entirely.
   Blue bg, white text, black on hover.
*/
a.bota-btn {
  background: #2020cc !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 36px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  transition: background 0.2s !important;
  margin-right: 24px !important;
}
a.bota-btn:hover {
  background: #0d0d0d !important;
  color: #fff !important;
}

/* --- 1.3 Secondary link ---
   Usage: <a href="..." class="bota-cta-link">Label</a>
   Gray text with subtle underline, turns blue on hover.
   Sits inline next to .bota-btn.
*/
.bota-cta-link {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: #666 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #e8e8e8 !important;
  padding-bottom: 2px !important;
  transition: all 0.2s !important;
}
.bota-cta-link:hover {
  color: #2020cc !important;
  border-color: #2020cc !important;
}

/* --- 1.4 Row numbers ---
   Monospace numbers used in service rows, approach rows, etc.
   Usage: <div class="bota-svc-number">01</div>
*/
.bota-svc-number {
  font-family: 'DM Mono', monospace !important;
  font-size: 13px !important;
  color: #666 !important;
  padding-top: 6px;
  transition: color 0.3s;
}

/* --- 1.5 CTA section ---
   Gray background CTA block used at the bottom of most pages.
   Structure: section.bota-cta-section > h2 + p + .bota-btn + .bota-cta-link
   Background color (#dfdfdf) set in Muffin Builder section settings.
*/
.bota-cta-section {
  text-align: center !important;
  padding: 80px 0 100px !important;
}
.bota-cta-section h2 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  letter-spacing: -2px !important;
  line-height: 1.1 !important;
  color: #0d0d0d !important;
  margin-bottom: 16px !important;
}
.bota-cta-section h5,
.bota-cta-section p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  color: #666 !important;
  max-width: 440px;
  margin: 0 auto 36px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

/* --- 1.6 Capability tags ---
   Small gray pills showing capability keywords.
   Usage: <div class="bota-caps"><span>Tag</span><span>Tag</span></div>
   Used on: Services rows, Products sections, Smart Mobility page
*/
.bota-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px !important;
}
.bota-caps span {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: #333 !important;
  background: #f5f5f5 !important;
  padding: 5px 12px;
  border-radius: 4px;
}

/* --- 1.7 Facts/stats ---
   Big numbers + monospace labels + description.
   Used on: About page, Smart Mobility stats row.
   Structure: .bota-fact-number + .bota-fact-label + .bota-fact-desc
   .bota-fact-divider adds blue left border between columns.
*/
.bota-fact-number {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 56px !important;
  letter-spacing: -3px !important;
  color: #0d0d0d !important;
  line-height: 1 !important;
}
.bota-fact-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}
.bota-fact-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #666 !important;
}
.bota-fact-divider {
  border-left: 2px solid #2020cc !important;
  padding-left: 24px !important;
}

/* --- 1.8 Featured visual container ---
   Gray box for product/project screenshots.
   Usage: add class .bota-featured-visual to column containing an image.
*/
.bota-featured-visual {
  background: #f5f5f5 !important;
  border-radius: 12px !important;
  padding: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 360px !important;
}
.bota-featured-visual img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
  margin: auto !important;
}


/* ============================================
   2. SERVICES PAGE
   URL: /it-services-albania-software-ai-cybersecurity-cloud-smart-systems-bota/
   Structure: Hero > 8 numbered service rows > CTA
   Each row: section.bota-service-row with 1/6 (number) + 1/3 (title) + 1/2 (desc+caps)
   ============================================ */

/* Service row — shifts left on hover, text turns blue */
.bota-service-row {
  border-bottom: 1px solid #e8e8e8 !important;
  padding: 48px 0 !important;
  transition: all 0.3s ease;
}
.bota-service-row:first-of-type {
  border-top: 1px solid #e8e8e8 !important;
}
.bota-service-row:hover {
  padding-left: 16px !important;
}
.bota-service-row:hover h2,
.bota-service-row:hover .bota-svc-number,
.bota-service-row:hover .bota-svc-title {
  color: #2020cc !important;
}

/* Service title — Outfit 800 */
.bota-svc-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.15 !important;
  letter-spacing: -1.5px !important;
  color: #0d0d0d !important;
  transition: color 0.3s;
  margin-bottom: 12px !important;
}

/* Kandos tag — blue bordered label, links to /kandos/ */
.bota-svc-tag {
  display: inline-block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: #2020cc !important;
  border: 1px solid #2020cc;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a:hover .bota-svc-tag {
  background: #2020cc !important;
  color: #fff !important;
  transition: all 0.2s;
}

/* "NEW CAPABILITY" badge — small blue pill above AI Tools row */
.bota-badge-new {
  display: inline-block !important;
  background: #2020cc;
  color: #fff !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  padding: 2px 7px !important;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

/* Service description */
.bota-svc-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #666 !important;
  max-width: 420px;
}


/* ============================================
   3. ABOUT PAGE
   URL: /about-bota-technology-company-albania-15-years-40-systems/
   Structure: Hero > Who We Are > Pillars > Approach > Facts > Quote > CTA
   ============================================ */

/* --- 3.1 Who we are ---
   Blue left-border statement + two-column detail text.
   Content avoids naming specific people or past roles.
*/
.bota-who-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 80px 0 !important;
}
.bota-who-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 48px !important;
}
.bota-who-statement {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1.5px !important;
  color: #0d0d0d !important;
  max-width: 900px;
  padding-left: 32px !important;
  border-left: 3px solid #2020cc;
  margin-bottom: 64px !important;
}
.bota-who-statement em {
  font-style: normal;
  color: #2020cc;
}
.bota-who-details {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #666 !important;
}
.bota-who-details strong {
  color: #0d0d0d;
  font-weight: 600;
}

/* --- 3.2 Pillars ---
   Three columns: number + title + description.
   Note: Vertical dividers dropped due to Muffin Builder nesting issues.
*/
.bota-pillars-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 80px 0 !important;
}
.bota-pillar-number {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: #2020cc !important;
  margin-bottom: 16px !important;
}
.bota-pillar-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
  color: #0d0d0d !important;
  margin-bottom: 12px !important;
}
.bota-pillar-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #666 !important;
}

/* --- 3.3 Approach rows ---
   Same hover pattern as service rows: shift left + blue on hover.
   .bota-approach-section wraps the "OUR APPROACH" label.
   .bota-approach-row wraps each numbered row.
*/
.bota-approach-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 80px 0 !important;
}
.bota-approach-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 48px !important;
}
.bota-approach-row {
  border-bottom: 1px solid #e8e8e8 !important;
  padding: 48px 0 !important;
  transition: all 0.3s ease;
}
.bota-approach-row:first-of-type {
  border-top: 1px solid #e8e8e8 !important;
}
.bota-approach-row:hover {
  padding-left: 16px !important;
}
.bota-approach-row:hover .bota-svc-number,
.bota-approach-row:hover .bota-approach-title,
.bota-approach-row:hover h2 {
  color: #2020cc !important;
}
.bota-approach-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 2.5vw, 30px) !important;
  letter-spacing: -1px !important;
  line-height: 1.2 !important;
  color: #0d0d0d !important;
  transition: color 0.3s;
}
.bota-approach-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #666 !important;
}

/* --- 3.4 Facts ---
   Light gray background section with stat numbers.
   Uses global .bota-fact-* classes from section 1.7.
*/
.bota-facts-section {
  background: #f5f5f5 !important;
  padding: 80px 0 !important;
}
.bota-facts-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 48px !important;
}

/* --- 3.5 Quote ---
   Large faded quotation mark + italic text + author with blue bar.
   Layout: 2/3 (quote) + 1/3 (author).
*/
.bota-quote-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 100px 0 !important;
}
.bota-quote-mark {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 120px !important;
  color: #2020cc !important;
  opacity: 0.08;
  line-height: 0.5 !important;
  margin-bottom: 16px !important;
}
.bota-quote-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
  color: #333 !important;
  font-style: italic !important;
}
.bota-quote-bar {
  width: 40px;
  height: 3px;
  background: #2020cc;
  margin-bottom: 16px !important;
  display: block;
}
.bota-quote-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.5px !important;
  color: #0d0d0d !important;
}
.bota-quote-role {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #666 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ============================================
   4. PROJECTS PAGE
   URL: /our-projects-technology-systems-platforms-delivered-bota-albania/
   Structure: Hero > Featured Project > Client Grid (3x3) > CTA
   ============================================ */

/* --- 4.1 Featured project ---
   1/2 (text: label + title + subtitle + desc + stats + stack + btn) + 1/2 (visual)
*/
.bota-featured-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 80px 0 !important;
}
.bota-featured-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px !important;
}
.bota-featured-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  color: #0d0d0d !important;
  margin-bottom: 8px !important;
}
.bota-featured-subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #333 !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}
.bota-featured-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #666 !important;
  margin-bottom: 32px !important;
}

/* Featured project stats — 2x2 flexbox grid
   (BeTheme CSS parser doesn't support grid-template-columns) */
.bota-featured-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 32px !important;
}
.bota-featured-stat {
  flex: 0 0 calc(50% - 10px) !important;
  border-top: 2px solid #e8e8e8 !important;
  padding-top: 12px !important;
}
.bota-featured-stat strong {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #0d0d0d !important;
  display: block !important;
}
.bota-featured-stat span {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #666 !important;
}

/* Tech stack line */
.bota-featured-stack {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #666 !important;
  margin-bottom: 24px !important;
}

/* --- 4.2 Client grid ---
   3x3 project cards. Cards lift on hover, name turns blue.
*/
.bota-clients-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 80px 0 !important;
}
.bota-clients-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px !important;
}
.bota-clients-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  color: #0d0d0d !important;
  margin-bottom: 48px !important;
}
.bota-project-card {
  transition: all 0.3s ease !important;
}
.bota-project-card:hover {
  transform: translateY(-4px) !important;
}
.bota-project-card:hover .bota-project-name {
  color: #2020cc !important;
}
.bota-project-thumb {
  background: #f5f5f5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.bota-project-thumb img {
  width: 100% !important;
  border-radius: 10px !important;
}
.bota-project-category {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px !important;
}
.bota-project-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.5px !important;
  color: #0d0d0d !important;
  margin-bottom: 6px !important;
  transition: color 0.3s !important;
}
.bota-project-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #666 !important;
}


/* ============================================
   5. RESPONSIVE — ALL PAGES
   ============================================ */
@media (max-width: 768px) {
  .bota-hero {
    padding: 120px 24px 60px !important;
  }

  /* Hide row numbers on mobile */
  .bota-svc-number {
    display: none !important;
  }

  /* Stack service and approach rows vertically */
  .bota-service-row .mcb-wrap-inner,
  .bota-approach-row .mcb-wrap-inner {
    flex-direction: column !important;
  }
  .bota-service-row .mcb-wrap-inner > .mcb-column,
  .bota-approach-row .mcb-wrap-inner > .mcb-column {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .bota-who-statement {
    font-size: 26px !important;
    padding-left: 20px !important;
  }
  .bota-quote-text {
    font-size: 18px !important;
  }
  .bota-fact-number {
    font-size: 44px !important;
  }

  /* Stack CTA link below button */
  .bota-cta-link {
    margin-left: 0 !important;
    margin-top: 16px !important;
  }
}


/* ============================================
   6. CONTACT PAGE
   URL: /contact/
   Structure: Hero > Info (3 cols: Address, Contact, Hours) > Form + CTA boxes
   ============================================ */

/* --- 6.1 Contact info cards ---
   Numbered columns (01, 02, 03) with title + description.
*/
.bota-contact-info-number {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: #2020cc !important;
  margin-bottom: 8px !important;
}
.bota-contact-info-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
  color: #0d0d0d !important;
  margin-bottom: 12px !important;
}
.bota-contact-info-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #666 !important;
}
.bota-contact-info-desc a {
  color: #2020cc !important;
  text-decoration: none !important;
}
.bota-contact-info-desc a:hover {
  color: #0d0d0d !important;
}

/* --- 6.2 Form section --- */
.bota-contact-form-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  letter-spacing: -1.5px !important;
  color: #0d0d0d !important;
  margin-bottom: 8px !important;
  padding-top: 40px !important;
}
.bota-contact-form-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #666 !important;
  margin-bottom: 32px !important;
}

/* --- 6.3 CTA boxes ---
   "Have a project in mind?" + "Not sure where to start?"
   First box gets border-top via inline style in HTML.
*/
.bota-contact-cta-box {
  padding-top: 24px !important;
  margin-bottom: 40px !important;
}
.bota-contact-cta-box strong {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #0d0d0d !important;
}
.bota-contact-cta-box p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #666 !important;
}
.bota-contact-cta-box a {
  font-family: 'DM Mono', monospace !important;
  font-size: 13px !important;
  color: #2020cc !important;
  text-decoration: none !important;
}
.bota-contact-cta-box a:hover {
  color: #0d0d0d !important;
}

/* --- 6.4 Contact Form 7 ---
   Global CF7 styles. Submit disabled (gray) until consent checkbox ticked.
*/
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  background: #fff !important;
  color: #0d0d0d !important;
  transition: border-color 0.2s !important;
  box-shadow: none !important;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
  border-color: #2020cc !important;
  outline: none !important;
}
.wpcf7-form-control.wpcf7-submit {
  background: #2020cc !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 36px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  text-transform: none !important;
  box-shadow: none !important;
  width: auto !important;
}
.wpcf7-form-control.wpcf7-submit:hover {
  background: #0d0d0d !important;
}
.wpcf7-form-control.wpcf7-submit:disabled {
  background: #e8e8e8 !important;
  color: #666 !important;
  cursor: not-allowed !important;
}
.wpcf7-list-item-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #666 !important;
}
.wpcf7-form-control::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}


/* ============================================
   7. PRODUCTS PAGE
   URL: /products/
   Structure: Hero > Kandos > TechBroker > Smart Mobility > EnerSkor
   Each product: section.bota-product-section with 1/2 + 1/2 layout.
   Text and visual sides alternate per section.
   ============================================ */
.bota-product-section {
  border-top: 1px solid #e8e8e8 !important;
  padding: 80px 0 !important;
}
.bota-product-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px !important;
}
.bota-product-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  color: #0d0d0d !important;
  margin-bottom: 8px !important;
}
.bota-product-subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #333 !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}
.bota-product-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #666 !important;
  margin-bottom: 24px !important;
}
.bota-product-meta {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #666 !important;
  margin-bottom: 24px !important;
}
.bota-product-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
}
.bota-product-visual img {
  max-width: 100% !important;
  height: auto !important;
}


/* ============================================
   8. HOMEPAGE
   URL: / (bota.business)
   Structure: Hero (custom HTML) > Logo carousel > Services grid
             > Audit CTA (custom HTML) > CTA
   Note: Hero and Audit CTA are self-contained HTML blocks with inline styles.
   ============================================ */

/* --- 8.1 Client logo carousel ---
   Pure CSS infinite scroll. No JS, no plugins.
   Logos are duplicated in HTML for seamless loop.
   Grayscale by default, color on hover. White fade edges.
   IMPORTANT: @keyframes must be in an inline <style> tag in the HTML block
   because BeTheme's CSS parser strips @keyframes from this file.
*/
.bota-home-clients {
  padding: 40px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
}
.bota-logo-track {
  overflow: hidden !important;
  padding: 20px 0 !important;
  position: relative;
}
.bota-logo-track::before,
.bota-logo-track::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.bota-logo-track::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent);
}
.bota-logo-track::after {
  right: 0;
  background: linear-gradient(270deg, #fff, transparent);
}
.bota-logo-scroll {
  display: flex;
  gap: 60px;
  align-items: center;
  width: max-content;
  animation: bota-scroll 30s linear infinite;
}
.bota-logo-scroll:hover {
  animation-play-state: paused;
}
.bota-logo-scroll img {
  height: 50px !important;
  width: auto !important;
  opacity: 0.45 !important;
  transition: opacity 0.3s !important;
  filter: grayscale(100%) !important;
}
.bota-logo-scroll img:hover {
  opacity: 0.85 !important;
  filter: grayscale(0%) !important;
}
/* @keyframes bota-scroll is in the homepage HTML block inline <style> */

/* --- 8.2 Services grid ---
   8 service cards in 2x4 layout (1/2 + 1/2 wraps).
   Each card: SVG icon + name + description + "Read more" link.
*/
.bota-home-services {
  padding: 80px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
}
.bota-home-services-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px !important;
}
.bota-home-services-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  color: #0d0d0d !important;
  margin-bottom: 8px !important;
}
.bota-home-services-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #666 !important;
  margin-bottom: 48px !important;
}
.bota-home-svc-card {
  padding: 24px 0 !important;
  transition: all 0.3s !important;
}
.bota-home-svc-card:hover .bota-home-svc-name {
  color: #2020cc !important;
}
.bota-home-svc-icon {
  margin-bottom: 16px !important;
}
.bota-home-svc-icon img {
  height: 40px !important;
  width: auto !important;
}
.bota-home-svc-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.3px !important;
  color: #0d0d0d !important;
  margin-bottom: 8px !important;
  transition: color 0.3s !important;
}
.bota-home-svc-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #666 !important;
}
.bota-home-svc-text a {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #2020cc !important;
  text-decoration: none !important;
}
.bota-home-svc-text a:hover {
  color: #0d0d0d !important;
}


/* ============================================
   9. FOOTER
   BeTheme footer restyled with BOTA typography.
   Dark background inherited from theme settings.
   Column HTML managed via BeTheme widget areas.
   ============================================ */
#Footer {
  font-family: 'DM Sans', sans-serif !important;
}
#Footer h4 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
}
#Footer h6 {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.4 !important;
}
#Footer p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  opacity: 0.55 !important;
}
#Footer a:not(.nav-badge) {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  transition: opacity 0.2s !important;
}
#Footer .bota-footer-nav ul li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
}
#Footer .bota-footer-nav .nav-badge {
  font-family: 'DM Mono', monospace !important;
}
#Footer .footer_copy {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
#Footer .footer_copy a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
}


/* ============================================
   10. BETHEME OVERRIDES
   Fixes for BeTheme / Muffin Builder specifics
   that conflict with the design system.
   ============================================ */

/* Force inline layout for button + link pairs.
   BeTheme wraps .column_attr in block divs. */
.bota-cta-section .column_attr,
.bota-featured-section .column_attr {
  display: inline !important;
}

/* Fallback for any remaining BeTheme .button instances.
   Prefer a.bota-btn (section 1.2) to avoid this entirely. */
.bota-cta-section .button,
.bota-cta-section a.button,
.bota-featured-section .button,
.bota-featured-section a.button {
  background: #2020cc !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 36px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 24px !important;
}


/* ============================================
   11. LEGACY
   Third-party or pre-existing styles to preserve.
   ============================================ */
.coporation2-border-bottom {
  border-bottom: 1px solid #d3d6dd;
}