/* Default theme */
:root {
  --primary-color: linear-gradient(to right, #ff0000, #ff9393); 
  --secondary-color: #ffa500;
}

/* Green-Scheme theme */
body.green-scheme {
  --primary-color: linear-gradient(90deg, #0097b2, #7ed957);
  --secondary-color: #ffa500;
}

/* Orange-Scheme theme */
body.orange-scheme {
  --primary-color: linear-gradient(to right, #ff6a00, #ffa362);
  --secondary-color: #ffa500;
}

/* Blue-Scheme theme */
body.blue-scheme {
  --primary-color: linear-gradient(to right, #005aff, #59b5eb);
  --secondary-color: #ffa500;
}

/* Use the variables anywhere in your CSS */ 
.service-card .icon,
.hero-txt .btn-snd, 
.hire-box .btn-set a,
.pricing-card .special,
.re-slider > i,
.btn-site, 
.site-footer h4::after,
.btn-submit {
  background: var(--primary-color);
}

.hero-btn i,
.sidebar ul li i,
.my-social ul li a, 
.contact-box i,
.heading p, 
.stack span,
.hire-box h5, 
.service-card ul li::before,
.hero-txt ul li,
#typing {
  color: var(--secondary-color); 
}

/* border color */
.profile img {
    border: 5px solid var(--secondary-color);
}


/* Font Family Setup */
.hero-txt ul li,
.hero-btn,
.heading h2,
.heading p,
.btn-set a,
.btn-submit,
.stack span,
.btn-site,
.service-card ul li,
.project-card .info h3,
.pricing-card .top p,
.pricing .bottom a,
.profiles a,
.hire-box h5,
.sidebar-access ul li a,
.site-footer h4,
.contact-box p,
.copyright,
.sticky-nav ul li a {
    font-family: "Sansita", sans-serif !important;
}