.btn-primary {
  background-color: #8A1111 !important;
  padding: 9px 17px 9px 15px !important;
  border-color: transparent !important;
  border-radius: 6px;
  color: white;
  width: max-content;
  border: 0px !important;
  border-color: transparent !important;
  white-space: nowrap;
}
.btn-primary:hover {
  background-color: #ab1818 !important;
  color: white !important;
}
.btn-primary:active, .btn-primary:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn-secondary {
  background-color: transparent !important;
  padding: 9px 17px 9px 15px !important;
  border-radius: 6px;
  color: grey !important;
  border: none !important;
  width: max-content;
  white-space: nowrap;
  color: white !important;
}
.btn-secondary svg {
  stroke: #455468;
}
.btn-secondary:hover {
  background-color: #8A1111 !important;
  color: white !important;
}
.btn-secondary:hover svg {
  stroke: white;
}

.btn-discard {
  padding: 9px 17px 9px 15px !important;
  background-color: white !important;
  border: 1px solid #D0D5DD;
  color: black !important;
  white-space: nowrap;
}
.btn-discard:hover {
  background-color: rgba(208, 213, 221, 0.9);
}

@font-face {
  font-family: "Montserat";
  src: url(../font/Montserrat-VariableFont_wght.ttf);
}
.form-control {
  border: 1px solid #AFBACA;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background-color: transparent;
  box-shadow: 0px 1px 2px 1px rgba(16, 24, 40, 0.05) !important;
}

.form-control:focus {
  border-color: #14204E !important;
}

body {
  font-family: Montserat;
  scroll-behavior: smooth;
  background-color: #14204E;
  color: white;
  overflow-x: hidden !important;
}

.navbar-toggler-icon {
  background-image: url("../icon/menu-svgrepo-com.svg");
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.btn-close {
  --bs-btn-close-bg: url("../icon/icon.png");
  opacity: 100% !important;
}
.btn-close:focus {
  box-shadow: none !important;
}

.header .navbar {
  color: white;
  background-color: #14204E;
}
.header .navbar .navbar-toggler {
  border: none;
}
.header .navbar .navbar-nav .nav-item a {
  color: white;
  font-weight: 500;
}
.header .navbar .navbar-nav .nav-item a:hover {
  color: #8A1111 !important;
}
.header .navbar .navbar-brand {
  color: white;
}

.Hero-Section {
  height: 100vh;
}
.Hero-Section .hero-left {
  width: 80%;
}
.Hero-Section .hero-left .Hero-Heading {
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: -2%;
  line-height: 72px;
}
.Hero-Section .hero-right {
  background-image: url("../images/hero.png");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100% 100%;
}

.Section-PerformanceAnalytics .PerformanceText .PerformanceTextHeading {
  letter-spacing: -2%;
  line-height: 44px;
  font-weight: 600;
  font-size: 2.2rem;
}
.Section-PerformanceAnalytics .PerformanceText .PerformanceTextPara {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #D0D5DD;
}

.Section-track .trackText .Section-trackHeading {
  letter-spacing: -2%;
  line-height: 44px;
  font-weight: 600;
  font-size: 2.2rem;
}
.Section-track .trackText .Section-trackPara {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #D0D5DD;
}
.Section-track .Track-left-Section .Track-left-icon {
  padding: 10px;
  background-color: white;
  border-radius: 50%;
}
.Section-track .Track-left-Section .Track-left-Heading {
  color: white;
  font-weight: 600;
  line-height: 38px;
  font-size: 1.87rem;
}
.Section-track .Track-left-Section .Track-left-Paragraph {
  font-size: 18px;
  font-weight: 400;
  color: #D0D5DD;
}
.Section-track .Track-left-Section .Track-left-ListItem li {
  font-size: 18px;
  font-weight: 400;
  color: #D0D5DD;
}

.section-Referal .section-Referal-Heading {
  letter-spacing: -2%;
  line-height: 44px;
  font-weight: 600;
  font-size: 2.2rem;
}
.section-Referal .section-Referal-Paragraph {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #D0D5DD;
}
.section-Referal .section-Referal-Right .section-Referal-item {
  background: white;
  padding: 1rem;
  width: 80%;
  border-radius: 10px;
}
.section-Referal .section-Referal-Right .section-Referal-item .Referal-item-Heading {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #101828;
}
.section-Referal .section-Referal-Right .section-Referal-item .Referal-item-paragraph {
  font-weight: 400;
  font-size: 1rem;
  line-height: 24px;
  color: #475467;
}
.section-Referal .section-Referal-Right .Section-Referal-App {
  width: 80%;
}

.section-Pricing .section-Pricing-Heading {
  letter-spacing: -2%;
  line-height: 44px;
  font-weight: 600;
  font-size: 2.2rem;
}
.section-Pricing .section-Pricing-Paragraph {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #D0D5DD;
}
.section-Pricing .section-Pricing-left .section-Pricing-icon {
  padding: 10px;
  background-color: white;
  border-radius: 50%;
}
.section-Pricing .section-Pricing-left .section-Pricing-subHead {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}
.section-Pricing .section-Pricing-left .section-Pricing-Para {
  font-size: 18px;
  font-weight: 400;
  color: #D0D5DD;
  line-height: 28px;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card {
  background-color: white;
  border-radius: 10px;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Plan-Head {
  color: #14204E;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Plan-sub {
  font-weight: 400;
  font-size: 1rem;
  line-height: 24px;
  color: #475467;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Price {
  color: #14204E;
  font-weight: 600;
  font-size: 3.75rem;
  line-height: 72px;
  letter-spacing: -2%;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Price .priceSup {
  font-size: 36px;
  font-weight: 600;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Price .priceSub {
  font-weight: 500;
  font-size: 1rem;
  line-height: 24px;
  color: #475467;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Feature {
  color: #14204E;
  font-weight: 600;
  font-size: 1rem;
  line-height: 24px;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Featurepara {
  color: #475467;
  font-weight: 600;
  font-size: 1rem;
  line-height: 24px;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Feature-points {
  color: #475467;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}
.section-Pricing .section-Pricing-Right .section-Pricing-Card .card-Feature-points .card-Feature-icon {
  padding: 5px;
  background-color: #DCFAE6;
  border-radius: 50%;
}

.toGiveBackgrounImage {
  background-image: url("../images/ellipse.png");
  background-repeat: no-repeat;
  background-position: 42% 100%;
}

.section-Contactus {
  padding-bottom: 4rem;
}
.section-Contactus .section-Contactus-Heading {
  color: white;
  font-weight: 600;
  line-height: 44px;
  font-size: 2.2rem;
}
.section-Contactus .section-Contactus-Para {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #D0D5DD;
}
.section-Contactus .ContactUsLefSection {
  background-color: white;
  border-radius: 10px;
}
.section-Contactus .ContactUsLefSection .ContactUsLefSectionName {
  color: #344054;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.section-Contactus .ContactUsRightSection .card {
  background-color: transparent;
  border: none;
}
.section-Contactus .ContactUsRightSection .card .card-subtitle {
  color: white;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}
.section-Contactus .ContactUsRightSection .card .card-text {
  color: white;
}
.section-Contactus .ContactUsRightSection .card .card-link {
  color: white;
  text-decoration: none;
}

.section-StartTrial .trial-BackgroundColor {
  background-color: white;
  border-radius: 10px;
}
.section-StartTrial .StartTrial-Heading {
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 44px;
  color: #14204E;
}
.section-StartTrial .StartTrial-Paragraph {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #14204E;
}

.footer {
  background-color: #14204E;
  color: white;
}
.footer ul li a {
  color: white;
}
.offcanvas-end {
  background-color: #14204E;
}

.nav-link {
  color: white !important;
}

:root {
  --white: white;
  --gray: #999;
  --lightgray: whitesmoke;
  --darkgreen: #2a9d8f;
  --popular: #ffdd40;
  --starter: #f73859;
  --essential: #00aeef;
  --professional: #ff7f45;
}

.toggleSetting .switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid lightgrey;
  margin-bottom: 25px;
  border-radius: 30px;
  background: var(--white);
}
.toggleSetting .switch-wrapper [type=radio] {
  position: absolute;
  left: -9999px;
}
.toggleSetting .switch-wrapper [type=radio]:checked#monthly ~ label[for=monthly],
.toggleSetting .switch-wrapper [type=radio]:checked#yearly ~ label[for=yearly] {
  color: var(--white);
}
.toggleSetting .switch-wrapper [type=radio]:checked#monthly ~ label[for=monthly]:hover,
.toggleSetting .switch-wrapper [type=radio]:checked#yearly ~ label[for=yearly]:hover {
  background: transparent;
}
.toggleSetting .switch-wrapper [type=radio]:checked#monthly + label[for=yearly] ~ .highlighter {
  transform: none;
}
.toggleSetting .switch-wrapper [type=radio]:checked#yearly + label[for=monthly] ~ .highlighter {
  transform: translateX(100%);
}
.toggleSetting .switch-wrapper label {
  font-size: 16px;
  z-index: 1;
  min-width: 100px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
}
.toggleSetting .switch-wrapper label:hover {
  background: var(--lightgray);
}
.toggleSetting .switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: #8A1111;
  transition: transform 0.25s ease-in-out;
}

@media only screen and (max-width: 1024px) {
  .Hero-Section .hero-left {
    width: 100%;
  }
  .Hero-Section .hero-left .Hero-Heading {
    font-size: 2.5rem;
    line-height: 53px;
  }
  .Section-PerformanceAnalytics .PerformanceText .PerformanceTextHeading {
    font-size: 2rem;
  }
  .Section-PerformanceAnalytics .PerformanceText .PerformanceTextPara {
    font-size: 18px;
  }
  .Section-track .trackText .Section-trackHeading {
    font-size: 2rem;
  }
  .Section-track .trackText .Section-trackPara {
    font-size: 18px;
  }
  .Section-track .Track-left-Section .Track-left-ListItem li img {
    width: 1.5rem;
  }
  .Section-track .Track-left-Section .Track-left-Heading {
    font-size: 1.6rem;
  }
  .section-Referal .section-Referal-Heading {
    font-size: 2rem;
  }
  .section-Referal .section-Referal-Paragraph {
    font-size: 18px;
  }
  .section-Pricing .section-Pricing-Heading {
    font-size: 2rem;
  }
  .section-Pricing .section-Pricing-Paragraph {
    font-size: 18px;
  }
  .section-Contactus .section-Contactus-Heading {
    font-size: 2rem;
  }
  .section-Contactus .section-Contactus-Para {
    font-size: 18px;
  }
  .toGiveBackgrounImage {
    background-position: 38% 76%;
  }
  .section-StartTrial .StartTrial-Heading {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .section-Referal .section-Referal-Right .section-Referal-item {
    width: 100%;
  }
  .toGiveBackgrounImage {
    background-position: 83% 37%;
  }
  .section-Contactus {
    padding-bottom: 1rem;
  }
  .tosetFullWidth {
    width: 100% !important;
  }
}
@media only screen and (max-width: 426px) {
  .Section-Referal-App h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  .Hero-Section {
    height: 70vh !important;
  }
  .Hero-Section .hero-left .Hero-Heading {
    font-size: 2rem !important;
    line-height: 46px;
  }
  .Section-PerformanceAnalytics .PerformanceText .PerformanceTextHeading {
    font-size: 1.6rem;
    line-height: 40px;
  }
  .Section-PerformanceAnalytics .PerformanceText .PerformanceTextPara {
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 2rem;
  }
  .Section-track .trackText .Section-trackHeading {
    font-size: 1.6rem;
    line-height: 40px;
  }
  .Section-track .trackText .Section-trackPara {
    font-size: 15px;
    line-height: 21px;
  }
  .Section-track .Track-left-Section .Track-left-ListItem li img {
    width: 1.5rem;
  }
  .Section-track .Track-left-Section .Track-left-Heading {
    font-size: 1.6rem;
  }
  .section-Referal .section-Referal-Heading {
    font-size: 1.6rem;
    line-height: 40px;
  }
  .section-Referal .section-Referal-Paragraph {
    font-size: 15px;
    line-height: 21px;
  }
  .section-Pricing .section-Pricing-Heading {
    font-size: 1.6rem;
    line-height: 40px;
  }
  .section-Pricing .section-Pricing-Paragraph {
    font-size: 15px;
    line-height: 21px;
  }
  .section-Contactus .section-Contactus-Heading {
    font-size: 1.6rem;
    line-height: 40px;
  }
  .section-Contactus .section-Contactus-Para {
    font-size: 15px;
    line-height: 21px;
  }
  .toGiveBackgrounImage {
    background-position: 33% 12%;
  }
  .section-StartTrial .StartTrial-Heading {
    font-size: 1.6rem;
    line-height: 40px;
  }
  .toSetCanvasWidth {
    width: 80% !important;
  }
}
@media only screen and (max-width: 320px) {
  .Hero-Section {
    margin-bottom: 2rem;
  }
  .Hero-Section .hero-left .Hero-Heading {
    font-size: 2rem !important;
    line-height: 46px;
  }
  .section-Pricing .section-Pricing-left .section-Pricing-subHead {
    font-size: 20px;
    line-height: 24px;
  }
  .section-Pricing .section-Pricing-left .section-Pricing-Para {
    line-height: 26px;
    font-size: 1rem;
  }
  .section-Pricing .section-Pricing-Heading {
    font-size: 1.6rem;
    line-height: 32px;
  }
}

/*# sourceMappingURL=stylesheet.css.map */