/* GENERAL-STYLE */

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.4s ease all;
}

a:focus,
a,
a:active,
a:visited {
  text-decoration: none;
  color: unset;
}

body {
  font-size: 75.5%;
  size: 62.5%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input,
input.form-control {
  height: 2.5em;
  width: 100%;
  background: rgba(224, 224, 224, 0.25);
  border: 1.5px solid rgba(54, 85, 153, 0.5);
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
}

button {
  box-sizing: border-box;
  border-radius: 10px;
  padding: 5px;
  height: 3.214em;
  width: 14.286em;
  margin: 5px;
  font-size: 1.714em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.white-fill {
  background: #ffffff;
  border: 1.5px solid #ffffff;
  color: #355194;
}

.white-outline {
  border: 1.5px solid #fff;
  color: #fff;
  background: transparent;
}

.blue-fill {
  background: #355194;
  border: 1.5px solid #355194;
  color: #fff;
}

.blue-outline {
  border: 1.5px solid #355194;
  color: #355194;
  background: transparent;
}

/* GENERAL-STYLE */

#details,
#roi-sect,
.calculate,
.start,
.monthly,
.faq,
#pricing {
  display: none;
}

/* HIDDEN */

nav {
  transition: 0.6s ease position;
}

nav.navbar {
  background: #f0f2f6;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  max-width: 100%;
}

.navbar-brand {
  width: 7.5em;
}

.navbar-brand > img {
  width: 100%;
}

.navbar-nav {
  margin-left: auto;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 18px;
  color: #355194;
  text-transform: uppercase;
  margin-left: 50px !important;
}

.navbar-light .navbar-nav .nav-link:first-child {
  margin-left: 0;
}

button.navbar-toggler {
  border: none;
  background-color: transparent;
  width: 40px;
  height: 40px;
  background-size: cover;
  padding: 0;
}

.navbar-light .navbar-toggler-icon {
  background-image: url('../svg/menu-2.svg');
}

/* WELCOME */
.welcome {
  padding-top: 9.462em;
  font-family: 'Raleway';
  font-style: normal;
  text-align: center;
}

.welcome > .welcome__title {
  font-weight: 600;
  font-size: 3.538em;
  line-height: 54px;
  color: #233763;
}

.welcome > .welcome__subTitle {
  font-weight: 400;
  font-size: 1.714em;
  line-height: 28px;
  color: #000000;
}

/* SLIDER */

.slider {
  width: 85%;
  background: #ffffff;
  box-shadow: 1px 0px 20px rgba(69, 91, 99, 0.1);
  border-radius: 10px;
  padding: 2.857em 5.714em;
  padding-bottom: 5.714em;
  margin-top: 8.714em;
}

.slider > .slider__title {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-size: 1.714em;
  line-height: 28px;
  text-align: center;
  color: #879198;
}

.slider .slider-value {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: normal;
  font-size: 4em;
  line-height: 66px;
  text-align: center;
  color: #365599;
  margin: 0 auto;
  height: max-content;
}

.slider__slide > input {
  -webkit-appearance: none;
  background: rgba(247, 247, 247, 0.25);
  border: 2px solid #dbdbdb;
  border-radius: 10px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  outline: none;
  height: 13px;
  padding: 0;
  min-width: 100%;
}

.slider__slide > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2em;
  height: 2em;
  background-color: #355396;
  border-radius: 50%;
  background-size: cover;
  cursor: pointer;
  border: none;
}

.slider__slide > input::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.857em;
  height: 2.857em;
  background-color: #355396;
  border-radius: 50%;
  background-size: cover;
  cursor: pointer;
  border: none;
  z-index: 2;
}

.slider__marker {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
}

.slider__marker > .thick {
  background: #c4c4c4;
  width: 0.215em;
  height: 1.563em;
  z-index: 0;
}
.slider__marker > .thick-short {
  background: #c4c4c4;
  width: 0.215em;
  height: 0.625em;
  position: relative;
  bottom: -0.495em;
  z-index: 0;
}

.slider__marker > .slim {
  height: 0.938em;
  background: #c4c4c4;
  width: 0.125em;
  position: relative;
  bottom: -0.325em;
  z-index: 0;
}

#totalEmailSubs {
  min-width: 100% !important;
}

.slider__marker > .thick:nth-child(1):before {
  content: '15,000';
  position: relative;
  top: 1.563em;
  left: -1.5em;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 32px;
  color: #000000;
}
/* 
.slider__marker > .thick.middle:before {
  content: '500,000';
  position: relative;
  top: 1.563em;
  left: -1.5em;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 32px;
  color: #000000;
} */

.slider__marker > .thick:last-child:before {
  content: '1,000,000';
  position: relative;
  top: 1.563em;
  left: -1.5em;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 32px;
  color: #000000;
}

.details {
  margin-top: 7.143em;
  width: 85%;
  padding: 3.571em;
  background: #ffffff;
  box-shadow: 1px -2px 16px rgba(69, 91, 99, 0.1);
  border-radius: 10px;
}

.details > .details__title {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  text-align: right;
  font-size: 1.286em;
  line-height: 21px;
  color: #6c6c6c;
}

.details__text--darkBg {
  background: #e9edf2;
  padding: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  width: 90%;
  margin-right: auto;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 1.143em;
  line-height: 19px;
  color: #6c6c6c;
}

.details__text--darkBg p span {
  color: #355396;
  font-weight: 500;
  font-size: 1.2em;
}

.details .dot > .dot-big {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: #c4c4c4;
}

.details .dot > .dot-small {
  width: 0.313em;
  height: 0.313em;
  border-radius: 50%;
  background: #c4c4c4;
}

.details .dot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0 1.2em;
  margin-top: 11px;
}
.details__text--dotted {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 1.286em;
  line-height: 32px;
  color: #2a373e;
}

.details__text--dotted p {
  margin-bottom: 0px;
}

.details__text--dotted p span {
  color: #355396;
  font-size: 1.286em;
}

/* ROI */

.ROI {
  margin-top: 2.857em;
  background: #355194;
  padding: 10.714em 7.143em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Raleway';
}

.ROI .roi__title {
  font-style: normal;
  font-weight: 600;
  font-size: 3.286em;
  line-height: 54px;
  color: #cdd3e5;
}

.ROI .roi__subtitle {
  font-style: normal;
  font-weight: 500;
  font-size: 1.714em;
  margin-bottom: 2em;
  line-height: 28px;
  color: #ffffff;
}

/* ROI-CARDS */

.calculate {
  margin-bottom: 1.429em;
}

.calculate:last-child {
  margin-bottom: 0;
}

.roi-cards .roi-card {
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 1px 4px 16px rgba(103, 127, 138, 0.19);
  border-radius: 10px;
  padding: 5em 10%;
  width: 80%;
  margin: auto;
}

.roi-cards .roi-card:last-child {
  margin-bottom: 0;
}

.roi-card__mainTitle {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-size: 2.571em;
  line-height: 42px;
  text-align: center;
  color: #355396;
}

.roi-card__title {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: normal;
  font-size: 1.286em;
  line-height: 21px;
  text-align: center;
  color: #263238;
}

.roi-card__mainTitle:last-child {
  text-align: left;
}

.roi-card form {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.roi-card form label {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: normal;
  font-size: 1.714em;
  line-height: 28px;
  color: #323435;
}

.subscribers-value {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-size: 1.286em;
  line-height: 21px;
  color: #323435;
}

.subscribers-value span {
  font-size: 1.714em;
  color: #355396;
}

.roi-card button {
  margin: auto;
  margin-top: 1.571em;
}

#result table thead tr th {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-size: 1.714em;
  line-height: 28px;
  color: #355396;
  border: 1.2px solid #355396;
}

#result table {
  border: 2px solid #355396;
  box-sizing: border-box;
}

#result table tbody tr td {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-size: 1.643em;
  line-height: 27px;
  color: #455a64;
  border: 1.2px solid #355396;
}

.dot > .dot-big {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: #c4c4c4;
}
.dot > .dot-small {
  width: 0.313em;
  height: 0.313em;
  border-radius: 50%;
  background: #c4c4c4;
}
.dot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0 1.2em;
  margin-top: 11px;
}
section.roi-cards
  div#result.calculate
  div.roi-card
  div.result__data
  div.dot__data
  div.row
  div.details__dotText
  p {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 1.286em;
  line-height: 32px;
  color: #2a373e;
  margin-bottom: 0;
}

section.roi-cards
  div#result.calculate
  div.roi-card
  div.result__data
  div.dot__data
  div.row
  div.details__dotText
  p
  span {
  color: #355396;
  font-size: 1.286em;
}

/* START */

.start {
  margin: 5.714em auto 5.714em auto;
  width: max-content;
}

.start__title {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-size: 2.571em;
  line-height: 42px;
  text-align: center;
  color: #263238;
}

.start button {
  margin: auto;
}

/* PRICING */
.pricing-toggle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#pricing-toggle {
  display: none;
}

.pricing-toggle-label {
  background: #99e1d9;
  border-radius: 155px;
  width: 60px;
  height: 30px;
  box-shadow: 0px 2.5px 6px rgba(0, 0, 0, 0.15);
  padding: 5px;
  position: relative;
  cursor: pointer;
  margin: 0;
}

.pricing-toggle .row .monthly-text {
  color: #99e1d9;
}

.pricing-toggle-button {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  transition: 1s ease all;
}

.pricing-toggle > .row {
  align-items: center;
}

.pricing-toggle > .row > p {
  margin: 0px 10px;
}

.pricing-toggle > .row > p {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 1.443em;
  line-height: 16px;
  text-align: center;
  color: #333d42;
  text-transform: capitalize;
}

#pricing-toggle:checked ~ label {
  background: #365599;
}

#pricing-toggle:checked ~ label > div {
  right: 5px;
}

/* PRICING CARD */

.billCard {
  background: #ffffff;
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.15);
  padding: 2.857em;
  height: max-content;
  width: 80%;
  margin-bottom: 40px;
}

.bill-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.billCard .billTitle {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #70abaf;
}

.billCard .billSubTitle {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.286em;
  line-height: 32px;
  text-align: center;
  color: #879198;
}

.billCard .billPrice {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 4.929em;
  line-height: 32px;
  text-align: center;
  color: #50565f;
}

.billPrice > .multiple {
  font-family: 'Maven Pro';
  font-size: 0.4em;
}

.billList ul {
  list-style-image: url('../svg/green-list.svg');
  list-style-position: inside;
}

.atMil {
  visibility: hidden;
}

.websiteNum{
  text-transform: capitalize;
}

.billList ul li {
  margin-bottom: 10px;
}

.billList ul li p {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.286em;
  line-height: 18px;
  color: #879198;
  margin: 0;
  margin-left: 10px;
  display: inline;
}

.feature-title {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: bold;
  font-size: 1.714em;
  line-height: 32px;
  text-align: center;
  color: #70abaf;
}

.featureList {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.143em;
  line-height: 32px;
  color: #879198;
}

.billCard div p.annual-color,
.annual-color {
  color: #365599;
}

.pricing__outro {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 1.143em;
  line-height: 16px;
  text-align: center;
  color: #c4c4c4;
}

/* FAQ */

.faq__title {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 2.825em;
  line-height: 51px;
  color: #333d42;
  text-align: center;
}

.faq-item {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 0.7px solid #c4c4c4;
  margin-bottom: 2.5em;
}

.faq-item > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-item > div > img {
  width: 1.12em;
}

.faq-item > div > p {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  font-size: 1.586em;
  line-height: 35px;
  color: #879198;
}

.faq-item > p {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  font-size: 1.243em;
  line-height: 33px;
  color: #879198;
  transition: 0.6s ease display;
  display: none;
  margin-left: 5px;
}
/* FOOTER */

footer {
  margin-top: 40px;
  padding: 260px 5.714em 2.812em 5.714em;
  background: url('../svg/footer.svg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}


  .social > .row > a:nth-child(2){
    margin-left: 15px;
    margin-right: 15px;
  }

footer .footer-logo {
  margin-top: 20px;
}

footer .footer-logo img {
  width: 12em;
}

footer ul {
  list-style: none;
}

footer .copyright {
  margin-top: 20px;
  padding-left: 10px;
  padding-top: 10px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.286em;
  line-height: 32px;
  color: #ffffff;
  border-top: 2px solid #ffffff;
}

footer .list-group .list-title,
footer .social .social-title {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-size: 1.429em;
  line-height: 32px;
  color: #ffffff;
  margin-bottom: 10px;
}

footer .list-group .list-item a {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.214em;
  line-height: 32px;
  color: #ffffff;
}

footer .social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-lists {
  justify-content: space-between;
}

@media all and (max-width: 966px) {
  .container {
    margin: x-small;
  }

  .roi__flex {
    margin: auto;
    justify-content: center;
  }

  .ROI {
    margin-top: 2.857em;
    background: #355194;
    padding: 10.714em 3.143em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Raleway';
  }
  .roi-cards .roi-card,
  .details,
  .slider {
    width: 100%;
    margin: auto;
  }

  .roi-card form {
    width: 100%;
  }

  body {
    width: small;
    height: small;
    padding: small;
    /* margin: small; */
  }

  .navbar-light .navbar-nav .nav-link,
  .navbar-light .navbar-nav .nav-link:hover {
    margin-bottom: 10px;
    margin-left: 0 !important;
  }
}

@media all and (max-width: 720px) {
  #slide,
  .slider__marker {
    display: none;
  }

  .details > .details__title{
    text-align: center;
  }

  .footer-lists {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }

  footer {
    margin-top: 100px;
    padding: 200px 40px 40px 40px;
  }
  footer .list-group {
    width: 100%;
  }
  footer .list-group .list-title {
    width: 100%;
    border-bottom: 2px solid #ffffff;
  }

  footer .list-group {
    margin-bottom: 10px;
  }

  footer .social {
    align-items: center;
  }


  footer .social .ml-3:first-child {
    margin-left: 0px !important;
  }
}

@media all and (max-width: 520px) {
  .roi-card form button {
    width: 90%;
  }

  .billCard button {
    width: 90%;
  }
}

@keyframes transitionFade {
  from {
    display: block;
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.learnMore,
.learnMoreMonth {
  font-size: 1.42em;
  text-align: center;
  color: #233763;
  margin-top: 10px;
}

.showing {
  animation: 0.4s transitionFade 1;
  transition: 0.4s ease all;
  animation-fill-mode: forwards;
}

.monthCard,
.annualCard {
  display: none;
}

.showFeature {
  display: block;
  animation: 0.4s transitionFade 1;
  transition: 0.4s ease all;
  animation-fill-mode: forwards;
}