html {
  font-size : 14px;
  font-family: Raleway;
}

body {
  background-color: #fff;
}

.nav-container{
  overflow-x: clip;
}


@media only screen and (max-width: 768px){
  .section-deliver{
      min-height: 0;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Raleway', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
}

@media only screen and (min-width: 1240px) {
  h2 {
    font-size: 2.5em;
  }
}

@media only screen and (max-width: 420px){
  h2{
    font-size: 26px;
  }
}

@media only screen and (max-width: 420px){
  h4{
    font-size: 22px;
  }
}

p, span:not(.btn__text), ul, blockquote, figcaption, input[type], textarea {
  font-family: 'Open Sans','Helvetica Neue', 'Helvetica', Arial, sans-serif;
}

/*  Raleway font weights */

.raleway-300{
  font-family: Raleway;
  font-weight:300;
}

.raleway-400{
  font-weight:400;
  font-family:Raleway;
}

.raleway-500{
  font-weight:500;
  font-family:Raleway;
}

.raleway-600{
  font-weight:600;
  font-family: Raleway;
}

.raleway-700{
  font-weight:700;
  font-family: Raleway;
}

.raleway-regular{
  font-family: Raleway;
}

.raleway-bold{
  font-weight: bold;
  font-family: Raleway;
}

/* CUSTOM SCROLL */


::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.nav-bar {
    padding-left: 3.25em;
    padding-right: 3.25em;
}

@media only screen and (max-width: 768px){
  .nav-bar{
    padding-left: 1em;
    padding-right: 1em;
  }
}

/*          Buttons Override                */

.btn--md{
  font-family: Raleway;
  /* text-transform: uppercase; */
  font-weight: 700;
}


.btn-pink-inverse-first {
  position:relative;
  background: white !important;
  border: 2px solid white !important;
  color: #ff6171 !important;
  border-radius: 6px !important;
  background: white !important;   
  color: #ff6171 !important; 
  margin-right:10px !important; 
  margin-left:10px !important;
}

.btn-pink-inverse {
    position:relative;
    background: white !important;
    border: 2px solid #ff6171 !important;
    color: #ff6171 !important;
    border-radius: 6px !important;
    background: white !important; 
    color: #ff6171 !important; 
    margin-right:10px !important; 
    margin-left:10px !important;
}

.btn-pink-inverse:hover, .btn-pink-inverse-first:hover {
    background: white !important;
    border: 3px solid rgb(255, 97, 113) !important;
    color: rgb(255, 97, 113) !important;
}

.btn-swinging-last{
  margin-top:0; 
  margin-bottom:1em; 
  border: 4px solid #ff6171; 
  align-self:center;
  margin-right: 10px;
  margin-left: 10px !important;
  border-radius: 6px !important;
}

.btn-swinging-last:hover{
  background-color: #ff9aa4;
  border: 4px solid #ff9aa4;
}

.menu > li {
  font-size: 1em;
}

@media only screen and (max-width: 992px){
  .menu > li {
    font-size: 0.84em;
  }
}


.menu > li a {
  text-transform: none;
}

.claim-paragraph{
  font-family: "Open Sans";
  font-size: 1.2em;
  margin-top: 1.5em;
  margin-bottom: 1em;
  text-align: center;
  display: block;
  padding-left: 0.5em;
  padding-right: 0.5em;
  line-height: 1.5em;
}

@media only screen and (max-width: 420px){
  .claim-paragraph{
    font-size: 1em;
  }
}

@media only screen and (max-width: 991px){
  .mobile-paragraph{
    width: max(420px, 70%);
    display: inline-block;
    margin: 0 auto;
    margin-top: 2em;
  }
}

@media only screen and (max-device-width: 767px){
    .mobile-paragraph{
        width: max(300px, 70%);
    }
}

@media only screen and (max-device-width: 360px){
    .mobile-paragraph{
        width: max(260px, 70%);
    }
}

@media only screen and (max-device-width: 280px){
  .mobile-paragraph{
      width: max(250px, 70%);
  }
}


.br-break-small{
  display: none;
}

@media only screen and (max-width: 420px){
  .br-break-small{
    display: block;
  }
}

.graph-big-format{
  font-family:Raleway;
  font-weight:700;
  text-transform:uppercase;
}

.call-big-format{
  font-family:Raleway;
  font-weight:400;
  text-transform:uppercase;
}


/**********************************  Fix the new color scheme **********************************/

/****************************** Security section ************************************************/
section.security-section * {
  color: #53656f ; /* !important; */
}

/**********************************  Slides Who Trusts GraphCall *************************************************/

.who-trusts-section{
  padding-top:80px;
}

.who-trusts-section .swiper-slide img {
  max-height: 4.625em;
  opacity: .6;
  margin: 0;
}

.who-trusts-section.background-who-trust-not-brazil{
  background: white;
}

.who-trusts-section.background-who-trust-brazil{
  background: #eee;
}

/**********************************  Security Section *************************************************/



.security-section.security-section-background-not-brazil{
  background: #eee;
}

.security-section.security-section-background-brazil{
  background: white;
}

/*********************************  SWIPER  ****************************************/



div.bg-color {
  background-color: transparent;
}

div.swiper-5 div.swiper-slide {
  padding: 3em 0;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  outline: 0;
  background-color: transparent;
}

div.swiper-5 .swiper-button-prev {
  background: none;
}

div.swiper-5 .swiper-button-prev:before {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
}

div.swiper-5 .swiper-button-next {
  background: none;
}

div.swiper-5 .swiper-button-next:before {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
}


/*************   Reorganization with  root values ****************************************/

/* Add your styles here */


/**************888  WE hve some section hero inside the index  *****************/

.text-elements-wrapper {
  padding-top: 2em !important;
  padding-bottom: 0em;
  max-width: min(80%, 600px);
  text-align: center;
  margin: 0 auto;
}

.text-elements-wrapper-two {
  padding-top: 0em;
  padding-bottom: 0em;
  max-width: min(80%, 600px);
  text-align: center;
  margin: 0 auto;
  height: 80%;
  display: grid;
}

@media only screen and (max-width: 280px){

  .text-elements-wrapper-two{
    max-width: min(95%, 600px);
  }
}


@media only screen and (max-width: 767px){
   .text-elements-wrapper {
    max-width: 90%;
  }
}

/************************ Buttons Demo / Try Free ****************************/

.buttons-demo-trial{    
  padding-top:0;
  align-self: center;
  display: flex;      
}

.buttons-demo-trial-inner{
  align-self:flex-start;
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 992px){

  .buttons-demo-trial-inner{
      flex-direction: row;
  }

}