:root {
  --theme-primary: #ff3131;
  --theme-secondary: #007a3f;
  --theme-accent: #41D5FB;
  --theme-light: #F8F9FA;
  --theme-dark: #212529;
  --theme-gradient: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
  /* RGB helpers for shadows */
  --theme-primary-rgb: 255, 49, 49;
  --theme-secondary-rgb: 0, 122, 63;
  /* Map to Bootstrap vars for better compatibility */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
}

/* Unified button styles */
.btn-theme {
  background-color: var(--theme-primary);
  color: white !important;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3);
}

.btn-theme:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--theme-primary-rgb), 0.4);
}

.btn-theme-outline {
  background: transparent;
  border: 2px solid var(--theme-primary);
  color: var(--theme-primary) !important;
  border-radius: 50px;
  padding: 10px 28px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-theme-outline:hover {
  background-color: var(--theme-primary);
  color: white !important;
}

/* Card styles */
.card-theme {
  background: white;
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card-theme:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Typography */
.heading-theme {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--theme-dark);
  letter-spacing: -0.5px;
}

.subheading-theme {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: #6c757d;
}

/* Form elements */
.input-theme {
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

.input-theme:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(105, 81, 233, 0.1);
}

/* Alert/modal styling */
.alert-theme {
  border-radius: 12px;
  border-left: 4px solid var(--theme-primary);
}

/* Enhanced theme button variants */
.btn-theme.btn-sm {
  padding: 6px 18px;
  font-size: 13px;
}

.btn-theme.btn-lg {
  padding: 16px 40px;
  font-size: 16px;
}

/* Success button variant - get-started-btn style */
.btn-theme-success {
  background-color: var(--theme-secondary);
  color: white !important;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--theme-secondary-rgb), 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-theme-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--theme-secondary-rgb), 0.4);
}

/* Info button variant - get-started-btn style */
.btn-theme-info {
  background-color: var(--theme-primary);
  color: white !important;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-theme-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--theme-primary-rgb), 0.4);
}

/* Secondary button variant - get-started-btn style */
.btn-theme-secondary {
  background-color: var(--theme-secondary);
  color: white !important;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--theme-secondary-rgb), 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-theme-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
}

/* Primary theme button - get-started-btn style */
.btn-theme,
.get-started-btn {
  padding: 12px 24px;
  background-color: var(--theme-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3);
}

.btn-theme-outline {
  background: transparent;
  color: var(--theme-primary) !important;
  border: 2px solid var(--theme-primary);
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-theme-outline:hover {
  background-color: var(--theme-primary);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--theme-primary-rgb), 0.4);
}

.btn-theme:hover,
.get-started-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--theme-primary-rgb), 0.4);
  color: white !important;
}

/* Enhanced card styling */
.card-theme .card-header {
  background: linear-gradient(135deg, var(--theme-light) 0%, #ffffff 100%);
  border-bottom: 1px solid #e9ecef;
  border-radius: 16px 16px 0 0;
}

.card-theme .card-body {
  padding: 2rem;
}

/* Table theme styling */
.table-theme {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.table-theme thead th {
  background: var(--theme-gradient);
  color: white;
  border: none;
  font-weight: 600;
  padding: 1rem;
}

.table-theme tbody tr:hover {
  background-color: rgba(105, 81, 233, 0.05);
}

/* Badge theme styling */
.badge-theme {
  background: var(--theme-gradient);
  color: white;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

/* Modal theme styling */
.modal-theme .modal-content {
  border-radius: 20px;
  border: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-theme .modal-header {
  border-bottom: 1px solid #e9ecef;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, var(--theme-light) 0%, #ffffff 100%);
  padding: 1.5rem 2rem;
}

.modal-theme .modal-body {
  padding: 2rem;
}

/* Spacing and Layout Utilities */
.section-spacing {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-spacing-sm {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Navigation spacing */
.nav-custom {
  padding: 1rem 0;
}

.nav-custom .navigation {
  gap: 2rem;
}

.nav-custom .navigation-inr .nav-links {
  padding: 0.75rem 1rem;
  margin: 0 0.25rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-custom .navigation-inr .nav-links:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.1);
  color: var(--theme-primary);
}

/* Form spacing improvements */
.form-group-theme {
  margin-bottom: 1.5rem;
}

.form-group-theme .form-label {
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--theme-dark);
}

.input-group-theme {
  position: relative;
  margin-bottom: 1rem;
}

.input-group-theme .input-group-text {
  background: var(--theme-light);
  border: 2px solid #e9ecef;
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 12px 16px;
}

.input-group-theme .form-control {
  border-left: none;
  border-radius: 0 12px 12px 0;
}

/* Button spacing */
.btn-group-theme {
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Legacy CTA buttons from template - force to theme colors */
.get-started-btn,
.subscribe-btn,
.learn-btn,
.request-btn {
  padding: 12px 24px;
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3) !important;
}

.get-started-btn:hover,
.subscribe-btn:hover,
.learn-btn:hover,
.request-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--theme-primary-rgb), 0.4) !important;
}

/* Map Bootstrap primary variants to theme */
.btn-primary {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25);
}

.btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* Solid green secondary buttons */
.btn-secondary {
  background-color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-secondary-rgb), 0.25);
}

.btn-outline-secondary {
  color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: #fff !important;
  background-color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
}

.btn-group-theme .btn-theme,
.btn-group-theme .btn-theme-outline,
.btn-group-theme .btn-theme-success,
.btn-group-theme .btn-theme-info,
.btn-group-theme .btn-theme-secondary {
  margin: 0.25rem;
}

/* Card spacing improvements */
.card-theme {
  margin-bottom: 1.5rem;
}

.card-theme .card-header {
  padding: 1rem 1.5rem;
}

.card-theme .card-body {
  padding: 1.5rem;
}

.card-theme .card-footer {
  padding: 1rem 1.5rem;
  background: transparent;
  border-top: 1px solid #e9ecef;
}

/* Table spacing */
.table-theme {
  margin-bottom: 0;
}

/* Bootstrap utility overrides to new primary */
.text-primary { color: var(--theme-primary) !important; }
.bg-primary { background-color: var(--theme-primary) !important; }
.border-primary { border-color: var(--theme-primary) !important; }

.table-theme td,
.table-theme th {
  padding: 1rem 1.5rem;
  vertical-align: middle;
}

.hero-slider-inner {
  padding: 0;
}

/* Section headings */
.main-heading-otr {
  margin-bottom: 3rem;
  text-align: center;
}

.main-heading-otr .tag-section {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-heading-otr .heading-otr {
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--theme-dark);
  line-height: 1.2;
}

.main-heading-otr .desc-otr {
  font-size: 1.125rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Harmonize section headings for Our Clients and Testimonials */
.digital-clients .main-heading-otr,
.testimonial .main-heading-otr {
  margin-bottom: 3rem;
  text-align: center;
}

.digital-clients .main-heading-otr .tag-section,
.testimonial .main-heading-otr .tag-section {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.digital-clients .main-heading-otr .heading-otr,
.testimonial .main-heading-otr .heading-otr {
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--theme-dark);
  line-height: 1.2;
}

.digital-clients .main-heading-otr .desc-otr,
.testimonial .main-heading-otr .desc-otr {
  font-size: 1.125rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Responsive spacing */
@media (max-width: 768px) {
  .section-spacing {
    padding: 3rem 0;
  }
  
  .container-theme {
    padding: 0 1rem;
  }
  
  .card-theme .card-body {
    padding: 1.5rem;
  }
  
  .main-heading-otr .heading-otr {
    font-size: 2rem;
  }
  
  .digital-clients .main-heading-otr .heading-otr,
  .testimonial .main-heading-otr .heading-otr {
    font-size: 2rem; /* match responsive heading size */
  }
  
  .btn-group-theme {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== Force overrides for legacy orange selectors ===== */
/* Statistics blue/primary number color */
.hero-section-digital .container .hero-wrapper .statistics .row-statistics .col-counter .col-counter-inr .count .counter-otr .count-flex .blue {
  color: var(--theme-primary) !important;
}

/* Ensure tag-section in Clients and Testimonials uses theme primary even if template CSS is more specific */
.digital-clients .main-heading-otr .tag-section,
.testimonial .main-heading-otr .tag-section {
  color: var(--theme-primary) !important;
}

/* Blog category badge */
.blog .container .wrapper .row-custom .col-otr .col-inr .content-otr .cata {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

/* ===== Replace orange hues in section/background gradients with red (keep gradients) ===== */
:root {
  /* Bright variant: vibrant primary/secondary sweep with highlight glows */
  --theme-section-bg:
    linear-gradient(135deg, rgba(255, 77, 77, 1) 0%, rgba(255, 49, 49, 1) 40%, rgba(0, 192, 106, 1) 70%, rgba(0, 122, 63, 1) 100%),
    conic-gradient(from 200deg at 85% 15%, rgba(var(--theme-primary-rgb), 0.55) 0deg, rgba(var(--theme-primary-rgb), 0.55) 120deg, transparent 120deg 360deg),
    conic-gradient(from 20deg at 15% 85%, rgba(var(--theme-secondary-rgb), 0.55) 0deg, rgba(var(--theme-secondary-rgb), 0.55) 110deg, transparent 110deg 360deg),
    radial-gradient(100% 140% at 0% 0%, rgba(255,255,255,0.12) 0%, transparent 60%),
    radial-gradient(100% 140% at 100% 100%, rgba(255,255,255,0.1) 0%, transparent 60%);

  /* No radial/circular blobs; shapes will be created via pseudo-elements */
}

/* Key sections from compiled app.css */
.inner-page-header,
.services,
.footer-main,
.loader {
  /* Reset any compiled backgrounds and apply solid base */
  background: none !important;
  background-color: var(--theme-primary) !important;
}

/* Multiple solid colors per section */
.inner-page-header { background-color: var(--theme-primary) !important; }
.cta.home-cooprate-cta { background-color: var(--theme-primary) !important; }
.services { background-color: var(--theme-secondary) !important; }
.footer-main { background-color: var(--theme-dark) !important; }
.loader { background-color: var(--theme-secondary) !important; }

/* Apply same bright background to CTA section */
.cta.home-cooprate-cta {
  /* Reset any compiled backgrounds and apply solid base */
  background: none !important;
  background-color: var(--theme-primary) !important;
  position: relative;
  overflow: hidden;
}

/* Section-specific base hues */
.inner-page-header { background-color: var(--theme-primary) !important; }
.services { background-color: var(--theme-secondary) !important; }
.footer-main { background-color: var(--theme-dark) !important; }
.loader { background-color: var(--theme-secondary) !important; }
.cta.home-cooprate-cta { background-color: var(--theme-primary) !important; }

/* ========== Geometric SHAPES (no gradients) using solid pseudo-elements ========== */
.inner-page-header,
.services,
.footer-main,
.cta.home-cooprate-cta {
  position: relative;
  overflow: hidden;
}

/* Header shapes: angled bars */
.inner-page-header::before,
.inner-page-header::after {
  content: "";
  position: absolute;
  display: block;
  background-color: rgba(var(--theme-secondary-rgb), 0.18);
  transform: rotate(8deg);
  pointer-events: none;
}
.inner-page-header::before {
  width: 65vw; height: 18vh; left: -10vw; top: -6vh;
}
.inner-page-header::after {
  width: 55vw; height: 14vh; right: -8vw; top: 22vh;
  background-color: rgba(var(--theme-primary-rgb), 0.18);
}

/* Services shapes: crossing blocks */
.services::before,
.services::after {
  content: ""; position: absolute; display: block; pointer-events: none;
}
.services::before { width: 50vw; height: 22vh; left: -12vw; top: 10vh; background-color: rgba(255,255,255,0.12); transform: rotate(-6deg); }
.services::after  { width: 38vw; height: 16vh; right: -10vw; bottom: 8vh; background-color: rgba(var(--theme-primary-rgb),0.20); transform: rotate(5deg); }

/* Footer shapes: top band and side wedge */
.footer-main::before,
.footer-main::after { content: ""; position: absolute; display: block; pointer-events: none; }
.footer-main::before { width: 100vw; height: 10vh; left: 0; top: 0; background-color: rgba(255,255,255,0.06); }
.footer-main::after  { width: 40vw; height: 20vh; right: -12vw; bottom: -6vh; background-color: rgba(var(--theme-secondary-rgb),0.22); transform: rotate(7deg); }

/* CTA shapes: bold corner cuts */
.cta.home-cooprate-cta::before,
.cta.home-cooprate-cta::after { content: ""; position: absolute; display: block; pointer-events: none; }
.cta.home-cooprate-cta::before { width: 58vw; height: 18vh; left: -14vw; top: -6vh; background-color: rgba(255,255,255,0.10); transform: rotate(8deg); }
.cta.home-cooprate-cta::after  { width: 36vw; height: 22vh; right: -10vw; bottom: -8vh; background-color: rgba(var(--theme-secondary-rgb),0.25); transform: rotate(-8deg); }
/* Ensure internal overlay doesn't mask our gradient */
.cta.home-cooprate-cta > .overlay {
  background: transparent !important;
  background-image: none !important;
}
/* Remove dark overlay mask coming from compiled CSS */
.cta.home-cooprate-cta > .overlay::before {
  background: transparent !important;
}

/* Slanted edges and decorative overlays for CTA */
.cta.home-cooprate-cta::before,
.cta.home-cooprate-cta::after {
  /* Remove decorative overlays for solid look */
  content: none !important;
}

@media (max-width: 768px) {
  .cta.home-cooprate-cta::after { content: none !important; }
}

/* Ensure no decorative overlays on solid sections */
.inner-page-header,
.services,
.footer-main {
  position: relative;
  overflow: hidden;
}

/* Remove any gradient overlays for solid look */
.inner-page-header::before,
.services::before,
.footer-main::before,
.inner-page-header::after,
.services::after {
  content: none !important;
}

/* Remove bottom slant: ensure straight edges */
.inner-page-header,
.services,
.footer-main {
  clip-path: none !important;
}

/* Subtle floating blobs overlay */
.inner-page-header::after,
.services::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -10%;
  width: 45vw;
  height: 45vw;
  max-width: 640px;
  max-height: 640px;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--theme-primary-rgb), 0.2) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(var(--theme-secondary-rgb), 0.2) 0%, transparent 55%);
  filter: blur(6px);
  pointer-events: none;
}

@media (max-width: 768px) {
  /* Avoid clipping issues on small screens */
  .inner-page-header,
  .services,
  .footer-main {
    clip-path: none;
  }
  .inner-page-header::after,
  .services::after {
    width: 75vw;
    height: 75vw;
    right: -20%;
    top: -20%;
  }
}