:root{
  --font-rubik: "Rubik", "Comfortaa", sans-serif;
}

/* DEFAULT */

body{
  color: #75696d;
  font-size: 16px;
}

.arcs {
  display: none;
}

.content{
  max-width: 1100px;
  margin: 0 auto;
}

.content-wrapper{
  padding: 80px 40px;
  position: relative;
  z-index: 1;
}

.content{
  position: relative;
  z-index: 10;
  padding: 0 20px;
}

.bg-shadow{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

.content h1{
  font-size: 2rem;
  margin: 1rem 0;
}

.content h2{
  font-size: 1.5rem;
  font-family: var(--font-rubik)
}

.highlight{
  color: var(--secondary-color);
}

.link-btn{
  border-radius: 9px;
  border: 1px solid #aaa;
  color: #fff;
  font-size: .9rem;
  height: 70px;
  line-height: 70px;
  padding: 0 35px;
  text-transform: uppercase;
}

.link-btn:hover{
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: #fff;
}

.strong-color{
  color: #261f25;
}

.rubik{
  font-family: var(--font-rubik);
}

/* Content colors */

.content-wrapper.dark {
  background-color: #232323;
  color: #aea2a6;
}

.content-wrapper.dark h1 {
  color: #fff;
}

.content-wrapper.white{
  background-color: #fff;
}

.content-wrapper.white h1{
  color: #261f25;
}

.content-wrapper.gray{
  background-color: #f6f6f6;
}

.content-wrapper.gray h1{
  color: #261f25;
}

.content-wrapper.dark-gray {
  background-color: #e5e5e5;
}

.content-wrapper.dark-gray h1 {
  color: #261f25;
}

.content-wrapper.dark-purple{
  background-color: #252025;
  color: #fff;
}

.content-wrapper.dark-purple h1{
  -moz-columns: #fff;
       columns: #fff;
}

/* Arcs */

#beneficios{
  background-image: url(/img/landing-page/arcs-beneficios.jpg);
  background-repeat: no-repeat;
  background-position: left top;
}

#beneficios2 {
  background-image: url(/img/landing-page/arcs-beneficios2.jpg);
  background-repeat: no-repeat;
  background-position: right center;
}

#features{
  background-image: url(/img/landing-page/arcs-features.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
}

#modules{
  background-image: url(/img/landing-page/arcs-modules.jpg);
  background-repeat: no-repeat;
  background-position: right top;
}

#cases {
  background-image: url(/img/landing-page/arcs-cases.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
}

#insights{
  background-image: url(/img/landing-page/arcs-insights.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
}

#big-numbers{
  background-image: url(/img/landing-page/arcs-big-numbers.jpg);
  background-repeat: no-repeat;
  background-position: right top;
}

#depoimentos{
  background-image: url(/img/landing-page/arcs-quotes.jpg);
  background-repeat: no-repeat;
  background-position: left top;
}

/* HEADER */

#header{
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

#header .menu-toggle{
  color: #fff;
  display: none;
}

#header .logo-wrapper{
  background-color: #232323;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  height: 130px;
  padding: 0 60px;
}

#header .logo-wrapper .logo{
  width: 100%;
}

#header .menu-wrapper{
  flex: 1 1 100%;
}

#header .extra-links{
  align-items: center;
  display: flex;
  height: 50px;
  justify-content: space-between;
  max-width: 1250px;
  padding:0 1.8rem;
}

#header .extra-links .link-item{
  color: #fff;
}

#header .extra-links .link-item:hover{
  text-decoration: underline;
}

#header .extra-links .link-item.ico{
  width: 20px;
  height: 20px;
}

#header .menu-bg{
  background-color: rgba(255,255,255,0.1);
}

body.scrollDown #header .upper{
  background-color: rgba(0, 0, 0, 0.7);
}

body.scrollDown #header .menu-bg {
  background-color: rgba(0, 0, 0, 0.8);
}

#header .menu-login-wrapper{
  align-items: center;
  display: flex;
  gap: 1rem;
  height: 80px;
  max-width: 1250px;
  padding-right: 30px;
}

#header .menu {
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 1rem;
  height: 80px;
  flex: 1 1 100%;
  text-transform: uppercase;
  margin: 0 0 0 50px;
}

#header .menu  a{
  color: #fff;
  flex: 1;
  text-align: center;
  text-shadow: 0 0 4px rgba(0,0,0,1);
}

#header .menu a:hover{
  text-decoration: underline;
}

#header .login-btn{
  background: #9756cc;
  border-radius: 9px;
  color: #fff;
  font-size: .7rem;
  height: 40px;
  line-height: 40px;
  text-transform: uppercase;
  width: 160px;
}

#header .login-btn:hover{
  background: #7b3cae;
}

/* INITIAL PRESENTATION */

.initial-content{
  align-items: center;
  display: flex;
  color: #fff;
  min-height: 800px;
  padding-top: 200px;
}

.initial-content h1{
  font-size: 3rem;
}

.initial-content .subtitle{
  font-size: 1.2rem;
}

.initial-content h2{
  font-weight: bold;
  margin-bottom: 2rem;
}

.initial-content .content{
  margin: 0 auto;
  width: 100%;
}

.hero {
  --items-per-row: 1;
  color: #333;
}

.hero .item {
  color: #fff;
  flex: none;
  width: var(--carousel-item-width);
}

.hero mwc-icon-button{
  color: #333;
}

.hero p:not(.subtitle){
  font-family: "Montserrat", "Comfortaa";
}

.hero .nav > .btn{
  background: transparent;
  width: 60px;
  height: 60px;
  color: #fff;
  border: 1px solid #fff1;
}

wiz-carousel.hero{
  --mdc-icon-button-size: 60px;
}

.hero .nav>.btn:hover{
}

.news .image-wrapper{
  background-color: #fff;
  padding: 4px;
  border-radius: 8px;
  max-width: 265px;
  width: 100%;
}

.news h2{
  font-weight: 500;
  margin-bottom: 1rem;
}

.news .hero-propmark-title{
  max-width: 485px;
  font-size: 1.4rem;
}

.news .gray{
  color: #d6d6d6;
}

.btn-link{
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  color: #d6d6d6;
  display: inline-block;
  text-transform: uppercase;
  padding: 20px 10px;
  margin-top: 1rem;
  font-size: .8rem;
}

.btn-link:hover{
  color: #fff;
  border-color: #fff;
}

.gray .btn-link{
  color: var(--on-surface);
  border-color: var(--on-surface);
}

.gray .btn-link:hover{
  color: var(--on-surface);
  border-color: var(--on-surface);
  opacity: .8;
}

/* BENEFICIOS */

.channels{
  max-width: 1050px;
  margin: 0 auto;
  margin-top: 4rem;
}

.channels li{
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  width: 170px;
  height: 130px;
}

.channels li .ico{
  font-size: 3rem;
}

.channels li p{
  text-align: center;
}

/* FEATURES */

.features-wrapper{
  padding-bottom: 0;
}

.feature-links{
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 3rem;
  --items-per-row: 3;
}

.feature-links > .item{
  padding: 40px 0 80px;
  flex: none;
  width: var(--carousel-item-width);
}

/* .feature-links .item:hover {
    background-color: #ffffff;
    border-bottom: 4px solid var(--secondary-color);
    padding-bottom: 76px;
} */

.feature-links .ico{
  color: var(--secondary-color);
  font-size: 3rem;
  margin-bottom: 2rem;
}

.feature-links h2{
  color: #261f25;
  font-weight: 500;
  margin-bottom: 1rem;
}

.feature-links p{
  color: #75696d;
}

.feature-links .read-more{
  font-weight: bold;
  margin-top: 2rem;
}

.feature-links a:hover .read-more{
  color: var(--secondary-color);
}

/* MODULES */

.modules-wrapper .logo.mini{
  max-width: 216px;
  width: 100%;
  margin: 0 auto;
}

.modules-wrapper h1{
  font-size: 3.3rem;
  margin-bottom: 4rem;
}

.precision-modules ul{
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 1rem;
}

.precision-modules li:not(.logo){
  align-items: center;
  color: #fff;
  min-height: 30px;
  justify-content: center;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  min-height: 236px;
}

.precision-modules .pulse-list li:nth-child(2){ background: #3c2b46;
}

.precision-modules .pulse-list li:nth-child(3) { background: #312636;
}

.precision-modules .pulse-list li:nth-child(4) { background: #2b232e;
}

.precision-modules .impact-list li:nth-child(2){ background: #511a31;
}

.precision-modules .impact-list li:nth-child(3) { background: #451b2e;
}

.precision-modules .impact-list li:nth-child(4) { background: #3b1d2b;
}

.precision-modules .impact-list li:nth-child(5),
.precision-modules .impact-list li:nth-child(6){
  color: #c9c9c9;
  border: 2px solid #581833;
  background: transparent;
}

.precision-modules .impact-list li .plus{
  color: #ff0060;
}

.precision-modules .total-listening-list li:nth-child(2){ background: #444229;
}

.precision-modules .total-listening-list li:nth-child(3) { background: #3c3a28;
}

.precision-modules .total-listening-list li:nth-child(4) { background: #353227;
}

.precision-modules .total-listening-list li:nth-child(5) { background: #312d26;
}

.precision-modules .total-listening-list li:nth-child(6) { background: #2d2926;
}

.precision-modules .total-listening-list li:nth-child(7),
.precision-modules .total-listening-list li:nth-child(8),
.precision-modules .total-listening-list li:nth-child(9),
.precision-modules .total-listening-list li:nth-child(10){
  color: #c9c9c9;
  border: 2px solid #4e4e2a;
  background: transparent;
}

.precision-modules .total-listening-list li .plus{
  color: #c0cc37;
  font-size: 1.1rem;
}

/* REPORTS */

.report-bottom-bar{
  border-top: 4px solid var(--secondary-color);
  bottom: 0;
  left: 50%;
  max-width: 970px;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}

/* CASES */

.cases-wrapper h1{
  font-family: var(--font-rubik);
  font-weight: bold;
  margin-bottom: 2rem;
}

.cases-wrapper .case-item .img-wrapper{
  background-color: #cccccc;
  height: 157px;
  position: relative;
  width: 270px;
}

.cases-wrapper .case-item:hover .img-wrapper{
  background-color: #474246;
}

.cases-wrapper .case-item .img-wrapper .date{
  background-color: #fff;
  bottom: 0;
  -moz-columns: #261f25;
       columns: #261f25;
  left: 30px;
  line-height: 42px;
  font-family: var(--font-rubik);
  font-weight: 500;
  height: 42px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 115px;
}

.cases-wrapper .case-item h2{
  color: #261f25;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.cases-wrapper .case-item .user-wrapper{
  align-items: center;
  display: flex;
  gap: 1rem;
}

.cases-wrapper .case-item .img{
  background-color: #cccccc;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

.contact-message{
  background-color: #261f25;
  display: flex;
  height: 120px;
  font-family: var(--font-rubik);
  margin-top: 3rem;
}

.contact-message .question{
  align-items: center;
  color: #fff;
  display: flex;
  height: 120px;
  font-size: 1.5rem;
  justify-content: center;
  max-width: 265px;
  padding: 30px;
  width: 100%;
}

.contact-message .message {
  align-items: center;
  color: #75696d;
  display: flex;
  font-size: 1.1rem;
  height: 120px;
  justify-content: center;
  max-width: 730px;
  padding: 30px;
  position: relative;
  width: 100%;
}

.contact-message .message::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 42px;
  border-left: 2px solid #6e6469;
}

.contact-message .contact{
  align-items: center;
  background: #6d6165;
  color: #fff;
  display: flex;
  height: 120px;
  justify-content: center;
  max-width: 167px;
  padding: 30px;
  position: relative;
  width: 100%;
}

.contact-message .contact:hover{
  text-decoration: underline;
}

.contact-message .contact::before {
  border-left: 4px solid #aea2a6;
  content: "";
  height: 42px;
  left: 6px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translateY(-50%);
}

/* SUBSCRIBE REPORTS */

.subscribe-reports-wrapper h2,
.subscribe-reports-wrapper p{
  color: #aea2a6;
}

.gray.subscribe-reports-wrapper h2,
.gray.subscribe-reports-wrapper p,
.gray.subscribe-reports-wrapper .form .text,
.gray.subscribe-reports-wrapper .form input,
.gray.subscribe-reports-wrapper .form textarea {
  color: var(--on-surface);
}

.form label{
  display: block;
}

.form .text{
  color: #aea2a6;
  display: block;
  text-transform: uppercase;
  font-family: var(--font-rubik);
  margin-bottom: .5rem;
}

.form input, .form textarea{
  border-radius: 9px;
  color: #aea2a6;
  height: 65px;
  line-height: 65px;
  padding: 5px 20px;
  width: 100%;
}

.form textarea{
  height: auto;
  min-height: 200px;
  line-height: 1rem;
  padding: 20px;
}

.form .send{
  background: #9756cc;
  color: #ffffff;
  font-family: var(--font-rubik);
  height: 65px;
  position: relative;
  text-transform: uppercase;
  width: 170px;
}

.form .send:hover{
  background: #7b3cae;
}

.form .send::before{
  border-left: 3px solid #252025;
  content: "";
  height: 38px;
  left: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* BIG NUMBERS */

.big-numbers-mark{
  width: 42px;
  border-top: 2px solid var(--secondary-color);
}

.big-number{
  align-items: center;
  border-radius: 9px;
  border: 1px solid #d4d4d4;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: 260px;
  justify-content: center;
  max-width: 370px;
  padding: .5rem;
  width: 100%;
}

.big-number .ico{
  color: var(--secondary-color);
  font-size: 2rem;
}

.big-number .number{
  color: var(--secondary-color);
  font-size: 2.5rem;
  font-family: "Montserrat";
  font-weight: 200;
}

.big-number p{
  align-items: center;
  color: #a9a9a9;
  display: flex;
  min-height: 60px;
}

/* TEAM */

.team-list{
  align-items: center;
  display: flex;
  width: 100%;
  --items-per-row: 4;
}

.team-list a{
  /* max-width: 270px; */
  flex: none;
  position: relative;
  width: var(--carousel-item-width);
}

.team-list img{
  display: block;
  width: 100%;
  max-width: 270px;
}

.team-list .name-wrapper{
  background-color: #fff;
  bottom: 0;
  color: #261f25;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-rubik);
  font-size: .9rem;
  text-transform: uppercase;
  width: 100%;
  padding: .5rem;
}

.team-list .name{
  flex: 1 1 100%;
}

.team-list .name-wrapper .icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #fff;
}

.team-list .name-wrapper .icon svg{
  width: 30px;
  height: 30px;
}

.team-list a .name-wrapper .role{
  flex: 1 1 100%;
}

.team-list a:hover .name-wrapper{
  background-color: #261f25;
  color: #fff;
}

/*
.team-list a:hover .name-wrapper .name{
    display: none;
}

.team-list a:hover .name-wrapper .role {
    display: block;
} */

.team-list a:hover .icon{
  background: #41ccc5;
}

/* partners */

.client-logo.meta{
  height: 30px;
}

/* CLIENTS */

.clients-title{
  margin-bottom: 2rem !important;
}

.clients{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
  width: 100%;
}

.clients .client{
  max-width: 130px;
  max-height: 80px;
  width: 100%;
  /* https: //codepen.io/sosuke/pen/Pjoqqp - criador de filtro */
  filter: invert(81%) sepia(0%) saturate(39%) hue-rotate(137deg) brightness(89%) contrast(79%);
}

.clients .samsung{
  max-width: 237px;
  max-height: 120px;
}

.title-ico > *{
  font-size: 2rem !important;
  color: #000;
}

/* TESTIMONIAL */

.testimonial .quote-symbol{
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.testimonial .quote-symbol img{
  width: 40px;
}

.testimonial .description{
  color: #261f25;
  font-size: 1.6rem;
  max-width: 900px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.testimonial .author{
  font-family: var(--font-rubik);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: #261f25;
  font-size: 1.2rem;
  margin: 2rem 0 1rem 0;
}

.testimonial .role{
  text-align: center;
  position: relative;
}

.testimonial .role::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 170px;
  font-family: var(--font-rubik);
  border-bottom: 2px solid #ddd;
}

/* SUBSCRIBE DEMO */

.white material-form input{
  background-color: #f6f6f6;
}

.footer{
  background: #232323;
  height: 70px;
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer a:hover{
  color: #fff;
  text-decoration: underline;
}

.contact-dialog{
  --mdc-theme-surface: #252025 !important;
}

.contact-dialog material-form{
  min-width: min(100vw, 510px);
}

/* SCROLL TOP */

#scroll-top{
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  text-decoration: none;
  border-radius: 35px;
  display: none;
  transition: all 0.3s ease;
  z-index: 9999;
}

.scrollDown #scroll-top{
  display: block;
}

#scroll-top span{
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 15px;
  font-size: 19px;
  transition: all 0.3s ease;
}

#scroll-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

#scroll-top:hover span{
  color: #fff;
  top: 5px;
}

drawer-wrapper{
  box-shadow: none !important;
}

.drawer-toggler {
  background-color: #666;
  border-bottom: 0;
  border-radius: 8px;
  color: #fff;
}

.drawer-toggler .drawer-toggler-icon {
  --mdc-theme-text-disabled-on-light: #333;
}

drawer-wrapper:hover .drawer-toggler,
drawer-wrapper:hover .drawer-toggler-icon {
  --mdc-theme-text-disabled-on-light: #333;
  color: #333;
}

drawer-wrapper .drawer {
  padding: 1rem;
}

.drawer-toggler {
  background: #EEEEEE;
  color: var(--on-surface);
}

drawer-wrapper:hover>div.drawer-toggler,
.drawer-toggler[open="true"] {
  background: #8d5bc6;
  color: #fff;
}

.f-montserrat,
.p-montserrat p{
  font-family: 'Montserrat', 'Comfortaa', sans-serif;
}

@media (max-width: 920px) {
  #header .logo-wrapper{
    flex: 1 0 70%;
    height: 80px;
  }

  #header .menu-wrapper {
    flex: 1 1 30%;
  }

  #header .logo-wrapper .logo{
    width: 90%;
  }

  #header .menu-wrapper .upper{
    display: none;
  }

  .content-wrapper{
    padding: 60px 0px;
  }

  #header .logo-wrapper{
    padding: 0 20px;
  }

  #header .login-btn{
    width: 120px;
    font-size: .8rem;
  }

  #header .menu-login-wrapper{
    justify-content: space-between;
    padding-right: 0;
  }

  #header .menu-toggle{
    align-items: center;
    display: flex;
    cursor: pointer;
    justify-content: center;
    height: 80px;
    width: 100%;
    z-index: 99999999;
  }

  #header .menu-toggle i{
    font-size: 2rem;
  }

  #header .menu{
    display: none;
  }

  #header .menu.show{
    display: block;
    position: absolute;
    top:80px;
    left:0;
    width: 100%;
    height: calc(100vh - 80px);
    margin: 0;
    padding: 20px 0;
    flex-direction: column;
    background-color: #252025;
  }

  #header .menu.show a{
    display: block;
    width: 100%;
    padding: 20px 20px;
    text-align: left;
    font-size: 1.2rem;
  }

  #header .menu .login-btn{
    display: block;
    margin: 20px 20px;
  }

  #header .extra-links{
    justify-content: start;
    padding-left: 30px;
  }

  .link-btn{
    padding: 0 10px;
  }

  #initial > .presentation{
    margin-top: 7rem;
  }

  #initial .initial-content h1{
    margin: 2.5rem 0;
  }

  .modules-wrapper h1{
    font-size: 2rem;
  }

  .contact-message{
    flex-wrap: wrap;
    height: auto;
  }

  .contact-message > *{
    max-width: 100%  !important;
    text-align: center;
    height: auto !important;
  }

  .contact-message .message::before,
    .contact-message .contact::before{
    display: none;
  }

  .contact-message .question{
    padding-bottom: 0;
  }

  .subscribe-report-text{
    margin-bottom: 1rem;
  }

  .subscribe-report-text,
    .subscribe-report-form{
    width: 100% !important;
  }

  .big-number{
    max-width: unset;
  }

  .precision-modules ul{
    flex: 1 1 100%;
  }

  .case-item{
    margin-bottom: 50px;
  }

  .feature-links, .team-list{
    --items-per-row: 1;
  }

  .channels li{
    width: calc(50% - 1.5rem);
  }

  .channels li p{
    margin: 0 5px;
  }
}