/* ========================================
Theme Color
======================================== */

:root{

  --main-color:#2563eb;

  --sub-color:#f5f9ff;

  --text-color:#334155;

  --heading-color:#1e3a5f;

  --nav-color:#1e3a5f;

  --border-color:#dbeafe;

  --card-color:#ffffff;

  --shadow-color:
    rgba(
      37,
      99,
      235,
      .08
    );

}

/* ========================================
Body
======================================== */

body{

  color:
    var(
      --text-color
    );

  background:
    var(
      --sub-color
    );

}

/* ========================================
Headings
======================================== */

.section-title,
.hero-title,
.content-title,
.service-title,
.price-title,
.feature-title{

  color:
    var(
      --heading-color
    );

}

/* ========================================
Links
======================================== */

a{

  color:
    var(
      --main-color
    );

}

/* ========================================
Buttons
======================================== */

.btn-main,
.hero-btn,
.content-btn{

  background:
    var(
      --main-color
    );

  color:#fff;

}

/* ========================================
nav
======================================== */

.nav-link{

  color:
    var(
      --nav-color
    );

}

.nav-btn{

  background:
    var(
      --main-color
    );

  color:#fff !important;

}

.nav-btn:hover{

  opacity:.9;

  color:#fff !important;

}

/* ========================================
Cards
======================================== */

.price-card,
.feature-card,
.gallery-card,
.flow-item,
.news-item,
.voice-card,
.team-card{

  background:
    var(
      --card-color
    );

  box-shadow:
    0 10px 30px
    var(
      --shadow-color
    );

}

/* ========================================
Table
======================================== */

.content-table{

  background:#fff;

}

.content-table th{

  background:
    rgba(
      37,
      99,
      235,
      .06
    );

}

.content-table th,
.content-table td{

  border-color:
    var(
      --border-color
    );

}

/* ========================================
Hero
======================================== */

.hero-card{

  background:
    rgba(
      255,
      255,
      255,
      .9
    );

}

.hero-template-card_left.hero-text-auto_dark .hero-card,
.hero-template-card_center.hero-text-auto_dark .hero-card,
.hero-template-card_right.hero-text-auto_dark .hero-card{

  background:
    rgba(
      37,
      99,
      235,
      .88
    );

  color:#fff;

}

/* ========================================
Flow
======================================== */

.flow-step{

  background:
    var(
      --main-color
    );

  color:#fff;

}

.flow-item:not(:last-child)::after{

  color:
    var(
      --main-color
    );

}

/* ========================================
Price
======================================== */

.price-amount{

  color:
    var(
      --main-color
    );

}

/* ========================================
FAQ
======================================== */

.faq-q{

  background:
    var(
      --main-color
    );

  color:#fff;

}

.faq-a{

  background:
    #eff6ff;

  color:
    var(
      --main-color
    );

}

/* ========================================
Team
======================================== */

.team-section{

  background:#f5f9ff;

}

.team-name{

  color:
    var(
      --heading-color
    );

}

.team-position{

  color:
    var(
      --main-color
    );

}

/* ========================================
Voice
======================================== */

.voice-stars{

  color:
    var(
      --main-color
    );

}

/* ========================================
CTA
======================================== */

.cta-box{

  background:
    linear-gradient(
      135deg,
      var(--main-color),
      #1d4ed8
    );

  color:#fff;

}

.cta-box .btn-main{

  background:#fff;

  color:
    var(
      --main-color
    );

}

/* ========================================
Fixed Footer
======================================== */

.fixed-footer-btn{

  color:
    var(
      --main-color
    );

}

/* ========================================
Required
======================================== */

.required{

  color:
    var(
      --main-color
    );

}