/**
 * MAMSPARK Brand Variables & Overrides
 * -----------------------------------
 * Project: MAMSPARK (PVT.) LTD Website
 * Template Base: Flattern (BootstrapMade)
 * Customization Layer: TownsTech
 *
 * IMPORTANT:
 * - This file overrides template variables ONLY
 * - main.css MUST remain untouched
 * - Load this file AFTER main.css
 */

/*--------------------------------------------------------------
# Brand Fonts
--------------------------------------------------------------*/
:root {
  --default-font: "Inter", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --heading-font: "Poppins", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/*--------------------------------------------------------------
# Brand Color System (MAMSPARK)
--------------------------------------------------------------*/
:root {
  /* Core Brand Colors */
  --mamspark-purple: #4b1d6b;
  --mamspark-blue: #1aa3c8;
  --mamspark-green: #8dc63f;

  /* Global Template Overrides */
  --background-color: #ffffff;
  --default-color: #4b5563;      /* Professional body text */
  --accent-color: var(--mamspark-blue);
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

/*--------------------------------------------------------------
# Navigation Color Overrides
--------------------------------------------------------------*/
:root {
  --nav-color: #1f2937;
  --nav-hover-color: var(--mamspark-purple);

  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;

  --nav-dropdown-color: #1f2937;
  --nav-dropdown-hover-color: var(--mamspark-blue);
}

/*--------------------------------------------------------------
# Hero Section Brand Alignment
--------------------------------------------------------------*/
.hero .container {
  border-top: 4px solid var(--mamspark-blue);
}

/*--------------------------------------------------------------
# Services Section – Environmental Cue
--------------------------------------------------------------*/
.services .service-item .icon {
  background: linear-gradient(
    135deg,
    var(--mamspark-blue),
    var(--mamspark-green)
  );
}

/*--------------------------------------------------------------
# Call To Action – Primary Conversion Area
--------------------------------------------------------------*/
.call-to-action {
  background: linear-gradient(
    135deg,
    rgba(26, 163, 200, 0.95),
    rgba(26, 163, 200, 0.95)
  );
}

.call-to-action h3,
.call-to-action p {
  color: #ffffff;
}

/*--------------------------------------------------------------
# Footer Brand Finish
--------------------------------------------------------------*/

.footer h4::after {
  background: var(--mamspark-blue);
}

.footer a:hover {
  color: var(--mamspark-green);
}

/*--------------------------------------------------------------
# Buttons – Brand Consistency
--------------------------------------------------------------*/
.btn-primary,
.btn-get-started,
.cta-btn {
  border-color: var(--mamspark-blue);
}

.btn-primary:hover,
.btn-get-started:hover,
.cta-btn:hover {
  background-color: var(--mamspark-blue);
  color: #ffffff;
}

/*--------------------------------------------------------------
# Scroll To Top Button
--------------------------------------------------------------*/
.scroll-top {
  background-color: var(--mamspark-blue);
}

/*--------------------------------------------------------------
# Section Titles Accent
--------------------------------------------------------------*/
.section-title h2::before,
.section-title h2::after {
  background: var(--mamspark-blue);
}