/* START RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: "Roboto", sans-serif;
  color: #193252;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  background: none;
  border: none;
  padding: 0;
}
a {
  text-decoration: none;
}

.btn-primary {
  color: #fff;
  font-weight: 500;
  background-color: #2962ff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.btn-primary:hover {
  background-color: #033ad0;
}

.btn-type-2 {
  color: #2962ff;
  font-weight: 500;
  background-color: #bbdefb;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.btn-type-2:hover {
  background-color: #90caf9;
}

.btn-cases {
  font-weight: 500;
  background: linear-gradient(
    -220deg,
    rgb(202, 210, 255) 20%,
    rgb(196, 255, 242) 80%
  );
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.btn-cases:hover {
  background: linear-gradient(
    -220deg,
    rgb(163, 177, 255) 20%,
    rgb(133, 253, 227) 80%
  );
}

html {
  scroll-behavior: smooth;
}

/* END RESET */

.wrap,
.wrap-blog {
  max-width: 800px;
  margin: auto;
  padding: 0 1.2em;
}

@media screen and (min-width: 1024px) {
  .wrap {
    max-width: 1024px;
    padding: 0 2em;
  }
  .wrap-blog {
    max-width: 820px;
  }
}

@media screen and (min-width: 1280px) {
  .wrap {
    max-width: 1280px;
  }
}

/* HOME > SECTION 1 > HERO */
/* language white */
.lang {
  position: relative;
}

.globe {
  position: relative;
  margin-left: 3rem;
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.globe::after {
  content: "⌄";
  position: absolute;
  right: -14px;
  margin-bottom: 0.3rem;
  margin-left: 0.3rem;
  font-weight: 700;
  display: none;
}

.globe:hover::after {
  display: block;
}

.globe img {
  margin-right: 0.5rem;
  width: 14px;
}

.drop,
.drop-w {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #fff;
  padding: 0.7rem;
  width: 120px;
  border-radius: 6px;
  color: #193252;
  visibility: hidden;
  box-shadow: 2px 10px 24px rgba(0, 0, 0, 0.3);
}
.drop a,
.drop-w a {
  position: relative;
  list-style: none;
  font-style: none;
  text-decoration: none;
  color: #193252;
  padding: 0.7rem;
  cursor: pointer;
  border-radius: 6px;
}

.drop-item:hover {
  background-color: #eeeeee;
}

/* language color */
.globe-w {
  position: relative;
  margin-left: 3rem;
  color: #193252;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.globe-w::after {
  content: "⌄";
  position: absolute;
  right: -14px;
  margin-bottom: 0.3rem;
  margin-left: 0.3rem;
  font-weight: 700;
  display: none;
}

.globe-w:hover::after {
  display: block;
}

.globe-w img {
  margin-right: 0.5rem;
  width: 14px;
}

.hero {
  background: linear-gradient(135deg, #2962ff 20%, #00b0ff 80%);
  padding-bottom: 8.2em;
  margin-bottom: 2em;
}

.header-home {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120px;
}

.nav {
  display: none;
}

.hamb {
  width: 26px;
}

.logo {
  width: 44px;
}

.logo-1 {
  width: 70px;
}

.btns-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn-hero {
  position: relative;
  color: #fff;
  font-weight: 400;
  font-size: 1rem;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
}

.btn-hero-1::before {
  position: absolute;
  content: "";
  width: 270px;
  height: 40px;
  background-color: #fff;
  border-radius: 8px;
  opacity: 0.15;
  display: none;
}

.btn-hero-2::before {
  position: absolute;
  content: "";
  width: 270px;
  height: 40px;
  background-color: #fff;
  border-radius: 8px;
  opacity: 0.15;
  display: none;
}

.btn-hero-3::before {
  position: absolute;
  content: "";
  width: 200px;
  height: 40px;
  background-color: #fff;
  border-radius: 8px;
  opacity: 0.15;
  display: none;
}

.btn-hero:hover::before {
  display: block;
}

.btns-hero svg {
  width: 20px;
  margin-left: 0.4em;
}

.btns-hero a:first-child {
  margin-bottom: 1.2em;
}

.hero-col-2 {
  display: none;
}

.hero-col-2 img {
  width: 96%;
  margin-left: auto;
}

.hero-content {
  margin-top: 1em;
}

.hero-title {
  font-size: 2.4rem;
  text-align: center;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1em;
}

.hero-text {
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 2em;
}

.wrap-home {
  position: relative;
}

.menu-mob {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}

.close-menu {
  width: 20px;
}

.header-menu-mob {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  margin-bottom: 2em;
}

.logo-menu {
  width: 44px;
}

.navigation-mob {
  height: 70%;
}

.navigation-mob li {
  height: 60px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}

.hero-col-1 {
  margin-bottom: 2em;
}

.lang-m {
  margin-top: auto;
  padding: 1.2em 1.2em 0 1.2em;
}

.lang-m a {
  margin-right: 1.2em;
  background-color: #eceff1;
  padding: 0.4em 1.2em;
  border-radius: 8px;
}

@media screen and (min-width: 1024px) {
  .hero {
    padding-bottom: 8em;
  }

  .hamb {
    display: none;
  }

  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav li {
    margin-left: 2em;
  }

  .nav a {
    color: #fff;
  }

  .nav a:hover {
    text-decoration: underline;
  }

  .hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3em;
  }

  .hero-col-1 {
    width: 46%;
  }

  .hero-col-2 {
    display: flex;
    justify-content: flex-end;
    width: 54%;
  }

  .hero-title,
  .hero-text {
    text-align: left;
    width: 90%;
  }

  .btns-hero {
    align-items: flex-start;
  }
}

@media screen and (min-width: 1280px) {
  .hero-title,
  .hero-text {
    text-align: left;
    width: 80%;
  }
  .hero-title {
    font-size: 3rem;
  }

  .hero-text {
    font-size: 1.3rem;
  }

  .nav li {
    margin-left: 3em;
  }

  .hero-col-2 img {
    width: 100%;
  }
}

@media screen and (min-width: 1440px) {
  .hero {
    padding-bottom: 12em;
  }

  .hero-content {
    margin-top: 5em;
  }

  .hero-title {
    font-size: 3.2rem;
  }
}

.header-2 {
  background-color: #fff;
  width: 100%;
  position: fixed;
  top: -120px;
  left: 0;
  z-index: 9;
  transition: all 500ms;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.11), 0 6px 6px rgba(0, 0, 0, 0.1);
}

.header-2.active {
  top: 0;
}

.header-content-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.nav-2 a {
  color: #193252;
}

/* HOME > SECTION 2 - DIRECTION */
.who {
  padding-bottom: 3em;
  margin-top: 12em;
  position: relative;
}

.who-about {
  margin-top: 0;
}

/* COMPANIES HOME */

.comapnies {
  width: 84%;
  display: flex;
  max-width: 920px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
  padding: 1em;
  border-radius: 20px;
}

.comapnies .logo-comp {
  width: auto;
  margin: 0.6em;
}

.comapnies .comp-1 {
  height: 20px;
}

.comapnies .comp-2,
.comp-7 {
  height: 20px;
}

.comapnies .comp-3,
.comp-4,
.comp-5,
.comp-12 {
  height: 28px;
}

.comapnies .comp-6,
.comp-8 {
  height: 30px;
}

.comapnies .comp-9,
.comp-10 {
  height: 32px;
}

.comapnies .comp-11 {
  height: 42px;
}

@media screen and (min-width: 768px) {
  .comapnies {
    top: -170px;
  }
}

@media screen and (min-width: 1024px) {
  .comapnies {
    width: 100%;
    top: -360px;
  }

  .comapnies .logo-comp {
    width: auto;
    margin: 1em 3em 1em 3em;
  }

  .comapnies .comp-1 {
    height: 28px;
  }

  .comapnies .comp-2,
  .comp-7 {
    height: 26px;
  }

  .comapnies .comp-3,
  .comp-5 {
    height: 32px;
  }

  .comp-4 {
    height: 36px;
  }

  .comapnies .comp-6 {
    height: 38px;
  }
}

@media screen and (min-width: 1280px) {
  .comapnies {
    justify-content: space-around;
    max-width: 1280px;
    height: auto;
  }

  .comapnies .logo-comp {
    width: auto;
    margin: 2em 3em;
  }

  .comapnies .comp-1 {
    height: 34px;
  }

  .comapnies .comp-2,
  .comp-7 {
    height: 30px;
  }

  .comapnies .comp-3,
  .comp-5,
  .comp-12 {
    height: 36px;
  }

  .comp-4 {
    height: 40px;
  }

  .comapnies .comp-8 {
    height: 42px;
  }

  .comapnies .comp-6 {
    height: 50px;
  }

  .comapnies .comp-9,
  .comp-10 {
    height: 46px;
  }

  .comapnies .comp-11 {
    height: 56px;
  }
}

.who-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 2em;
  text-align: center;
}

.direction {
  position: relative;
}

.direction-card {
  position: relative;
  background-color: #fff;
  max-width: 275px;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  border-radius: 20px 20px 0px 20px;
  height: auto;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4em;
}

.dir-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 40px;
}

.dir-body {
  line-height: 1.5;
  margin-bottom: 1.6em;
  font-size: 0.9rem;
}

.knw-mor {
  width: 100%;
  margin-top: auto;
}

.dir-box-icon {
  position: absolute;
  top: -40px;
  left: calc(50% - 40px);
  background-color: #fff;
  width: 80px;
  height: 80px;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dir-icon {
  width: 50px;
}

@media screen and (min-width: 1024px) {
  .who {
    padding-bottom: 7em;
    margin-top: 14em;
  }

  .who-about {
    margin-top: 0;
  }

  .direction {
    display: flex;
    justify-content: space-around;
  }

  .direction-card {
    width: 30%;
    padding: 2em;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .dir-title {
    font-size: 1.6rem;
  }

  .dir-body {
    font-size: 1rem;
  }

  .dir-box-icon {
    top: -60px;
    left: calc(50% - 60px);
    width: 120px;
    height: 120px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dir-icon {
    width: 62px;
  }

  .who-title {
    margin-bottom: 3em;
    font-size: 2.4rem;
  }
}

@media screen and (min-width: 1280px) {
  .direction-card {
    max-width: 100%;
  }
}

/* HOME SECTION 3 - ABOUT */

.about {
  padding-bottom: 3em;
}

.about-box {
  width: 100%;
  background: linear-gradient(
    -220deg,
    rgba(220, 225, 255, 1) 20%,
    rgba(227, 255, 249, 1) 80%
  );
  border-radius: 20px;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  height: auto;
}

.abour-mg {
  padding: 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2em;
}

.about-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 1em;
}

.about-body {
  line-height: 1.5;
  margin-bottom: 1.6em;
  text-align: center;
}

.abt-btn {
  width: 100%;
  margin-bottom: 2em;
}

.abt-imgs {
  display: flex;
  justify-content: center;
  align-items: center;
}

.abyss-desk {
  display: none;
}

.abyss-mobile {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .abour-mg {
    margin-bottom: 5em;
  }

  .abyss-mobile {
    display: none;
  }

  .abyss-desk {
    display: block;
    width: 100%;
    max-width: 1000px;
  }
}

@media screen and (min-width: 1024px) {
  .about {
    padding-bottom: 7em;
  }

  .abt-btn {
    width: 320px;
  }
}

@media screen and (min-width: 1280px) {
  .about-box {
    border-radius: 50px;
  }

  .about-title {
    font-size: 2.4rem;
  }

  .about-body {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 900px;
  }
}

.services {
  padding-bottom: 2em;
}

.services-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1em;
}

.serv-items {
  display: flex;
  flex-direction: column;
}

.serv-item {
  margin-bottom: 1.6em;
}

.serv-items img {
  margin-bottom: 0.7em;
  width: 40px;
}

.serv-title {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.5em;
}

.serv-item p {
  line-height: 1.4;
}

@media screen and (min-width: 1024px) {
  .services-title {
    font-size: 2.4rem;
  }
  .serv-items {
    flex-direction: row;
    justify-content: space-between;
  }

  .serv-item {
    margin: 0;
    width: 28%;
  }
  .services {
    padding-bottom: 7em;
  }

  .serv-title {
    font-size: 1.6rem;
  }

  .serv-item p {
    font-size: 1rem;
  }
}

/* HOME > SECTION 4 > FOOTER */

.footer {
  background-color: #2962ff;
  padding-top: 3em;
}

@media screen and (min-width: 1024px) {
  .footer {
    padding-top: 5em;
  }
}

.footer .footer-item {
  font-weight: 300;
  margin-bottom: 0.4em;
}

.footer-item a:hover {
  text-decoration: underline;
}

.footer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.col-list {
  margin-bottom: 1.2em;
}

.col-list .footer-item,
.col-list a {
  color: #fff;
  line-height: 1.8;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
  width: 100%;
}

.col-1,
.col-2,
.col-3,
.col-4 {
  margin-bottom: 1.5em;
}

.col-1 {
  display: flex;
  align-items: center;
}

.logo-et-footer {
  width: 64px;
  margin-right: 2rem;
}

.logo-usp-footer {
  width: 72px;
}

.footer-title {
  font-weight: 500;
  font-size: 1rem;
  color: #ffff8d;
  margin-bottom: 0.7em;
}

.footer-icon svg {
  width: 15px;
  margin-left: 0.3em;
}

.social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 3em;
}

.social li {
  width: 24px;
  margin-right: 2em;
}

@media screen and (min-width: 1024px) {
  .footer-box {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 5em;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-list,
  .social {
    margin-bottom: 0;
  }

  .col-list {
    margin-bottom: 2em;
  }

  .col-4 {
    margin-right: 5em;
  }

  .col-1 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .logo-et-footer {
    margin-right: 0;
    margin-bottom: 2rem;
  }

  .logo-usp-footer {
    width: 72px;
  }
}
.divider-footer {
  height: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}
.copywright {
  width: 100%;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  padding: 1em 0;
}
.year {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  margin-top: 1px;
}

/* ORGANIZATIONS FUNDATIONS */

.header-w {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  background-color: #fff;
}

.nav-w {
  display: none;
}

@media screen and (min-width: 1024px) {
  .nav-w {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-w li {
    margin-left: 2em;
  }

  .nav-w a {
    color: #193252;
  }

  .nav-w a:hover {
    text-decoration: underline;
  }
}

.hero-title-org {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 1em;
}

.hero-text-org {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 2em;
}

.hero-org {
  padding-bottom: 3em;
}

.cta-org {
  max-width: 320px;
  margin: 0 auto;
}
.hero-col-org-2 {
  display: none;
}

@media screen and (min-width: 1024px) {
  .hero-org {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5em;
    padding-bottom: 5em;
  }

  .hero-col-org-2 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
  }
}

.hero-text-org {
  text-align: left;
  margin-bottom: 3em;
}

.cta-org {
  max-width: 320px;
  margin: 0 0 auto;
}

.hero-col-org-2 img {
  position: relative;
  filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 45%));
}

@media screen and (min-width: 1280px) {
  .hero-col-org-2 img {
    width: 460px;
    position: relative;
  }

  .hero-title-org {
    font-size: 2.4rem;
  }
}

/* WHY */

.why {
  padding-bottom: 3em;
}

.why-title {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1.2em;
}

.why-item {
  line-height: 1.5;
  margin-bottom: 1.8em;
}

.why-item img {
  height: 40px;
}

.why-list {
  max-width: 600px;
}

@media screen and (min-width: 1024px) {
  .why {
    padding-bottom: 7em;
  }
  .why-title {
    width: 300px;
    line-height: 1.3;
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: 1.2em;
    margin-right: 2em;
  }

  .why-box {
    display: flex;
    justify-content: flex-start;
  }

  .why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 1em;
  }
}

/* QUOTES */

.quotes {
  background: linear-gradient(
    -220deg,
    rgba(220, 225, 255, 1) 20%,
    rgba(227, 255, 249, 1) 80%
  );
  width: 100%;
  padding-bottom: 3em;
  padding-top: 2em;
}

.quote-title {
  font-size: 2rem;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 0;
  font-weight: 500;
}

.quote {
  background-color: #fff;
  width: 90%;
  max-width: 880px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  margin-bottom: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  position: relative;
}

.quote::after {
  position: absolute;
  content: url("images/mark.svg");
  top: -10px;
  width: 40px;
}

.quote-text {
  margin: 2em 1.2em 1.2em 3.2em;
}

.quote-text p {
  line-height: 1.4;
  font-size: 1.2rem;
  margin-bottom: 0;
  color: #2962ff;
}

.quote-text p:first-child {
  margin-bottom: 0.5em;
  font-size: 0.9rem;
  color: #193252;
}

.quote-text p:last-child {
  font-size: 0.8rem;
  color: #193252;
}

.pic-quote {
  position: absolute;
  width: 60px;
  height: 60px;
  left: -30px;
  top: calc(50% - 30px);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
}

@media screen and (min-width: 768px) {
  .quote {
    margin-right: auto;
    margin-bottom: 6em;
  }

  .quote:last-child {
    margin-bottom: 0;
  }
  .quote::after {
    left: 50px;
  }

  .quote-text {
    margin-left: 4.2em;
  }
}

@media screen and (min-width: 1024px) {
  .quote-text p {
    font-size: 1.4rem;
  }

  .quote-text p:first-child {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .quote-text p:last-child {
    font-size: 0.9rem;
  }

  .quote-text {
    margin: 3em 3em 3em 5.6em;
  }

  .quote-title {
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: 2em;
  }

  .quotes {
    padding-bottom: 7em;
    padding-top: 5em;
  }

  .pic-quote {
    top: calc(50% - 50px);
    left: -40px;
    width: 100px;
    height: 100px;
  }

  .quote::after {
    left: 80px;
    width: 50px;
  }
}

/* CASES */

.cases {
  width: 100%;
  padding-bottom: 3em;
  padding-top: 3em;
}

.cases-box {
  display: grid;
}

.cases-title {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1em;
}

.case {
  margin-bottom: 1.8em;
  padding: 1em;
  max-width: 600px;
  border: solid 1px lightgray;
  border-radius: 20px;
}

.case h4 {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 0.5em;
  font-weight: 500;
}

.tag {
  font-size: 0.8rem;
  padding: 0.5em 0.8em;
  background-color: gray;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 1em;
}

.tag-health {
  background-color: #b3e5fc;
  color: #01579b;
}

.tag-environment {
  background-color: #c8e6c9;
  color: #1b5e20;
}

.tag-education {
  background-color: #ffe0b2;
  color: #e65100;
}

.case img {
  margin-bottom: 0.6em;
  width: 140px;
}

.case p {
  line-height: 1.5;
}

.btn-cases {
  max-width: 240px;
}

@media screen and (min-width: 1024px) {
  .cases {
    padding-bottom: 5em;
    padding-top: 5em;
  }

  .cases-title {
    font-size: 2.4rem;
  }

  .it-1 {
    grid-area: head;
  }

  .it-2 {
    grid-area: nav;
  }

  .case-1 {
    grid-area: a;
  }

  .case-2 {
    grid-area: b;
  }

  .case-3 {
    grid-area: c;
  }

  .cases-box {
    grid-template-columns: 200px 160px 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "head head a a a a"
      "nav nav a a a a"
      "nav nav b b b b"
      "nav nav b b b b"
      "nav nav c c c c"
      "nav nav c c c c";
    gap: 10px;
  }
}

/* CONTACT */

.contact {
  padding: 0 0 5em 0;
}

.contact-box {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.contact-content {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-content p {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.6em;
  line-height: 1.4;
}

.btn-contact {
  width: 100%;
  max-width: 400px;
}

@media screen and (min-width: 1024px) {
  .contact-box {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }

  .contact-content p {
    font-size: 2rem;
    width: 420px;
  }

  .contact-content-sci p {
    font-size: 2rem;
    width: 620px;
  }

  .contact-content {
    padding: 4em 0;
  }
}

/* PAGE SCIENTISTS */

.hero-title-sci {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1em;
}

.hero-text-sci {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 2em;
}

.hero-sci {
  padding-bottom: 3em;
}

.cta-sci {
  max-width: 320px;
  margin: 0 auto;
}
.hero-col-sci-2 {
  display: none;
}

@media screen and (min-width: 1024px) {
  .hero-sci {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5em;
    padding-bottom: 5em;
  }

  .hero-col-sci-2 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
  }

  .hero-title-sci {
    font-size: 2.4rem;
    text-align: left;
    margin-bottom: 1em;
  }
}

.hero-text-sci {
  text-align: left;
  margin-bottom: 3em;
}

.cta-sci {
  max-width: 320px;
  margin: 0 0 auto;
}

.hero-col-sci-2 img {
  position: relative;
  filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 45%));
}

@media screen and (min-width: 1280px) {
  .hero-col-sci-2 img {
    width: 460px;
    position: relative;
  }
}

.about-pg {
  background: #2962ff;
  padding-bottom: 1.4em;
}

/* PAGE ABOUT */

.about-content {
  margin-top: 1em;
}

.about-col-1 {
  margin-bottom: 2em;
}

.about-col-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-col-2 img {
  width: 100%;
  max-width: 460px;
  margin-bottom: 2em;
}

.about-text {
  color: #fff;
  font-size: 2rem;
  line-height: 1.4;
}

@media screen and (min-width: 1024px) {
  .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3em;
  }

  .about-col-1 {
    width: 50%;
    margin-bottom: 0;
  }
  .about-pg {
    padding-bottom: 4em;
  }

  .about-text {
    font-size: 2.8rem;
  }
}

@media screen and (min-width: 1280px) {
  .about-col-2 img {
    max-width: 600px;
  }

  .about-content {
    margin-top: 0;
  }
}

/* TRADUCAO DO CONHECIMENTO
   KNOWLEDGE TRANSLATION */

.kt {
  padding: 3em 0;
}

.kt-title {
  font-size: 2rem;
  font-weight: 500;
  color: #2962ff;
  line-height: 1.3;
  margin-bottom: 1.2em;
}

.kt-steps {
  width: 100%;
  margin-bottom: 2em;
}

.step {
  background-color: #fff;
  border-radius: 20px;
  padding: 1.4em;
  line-height: 1.5;
  margin-bottom: 1.2em;
  border: solid 1px lightgray;
}

.step-title {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.step-title svg {
  width: 50px;
  margin-right: 1em;
}

.step-title p {
  font-size: 3.2rem;
  line-height: 1;
}

.arrow {
  display: none;
}

@media screen and (min-width: 768px) {
  .step {
    width: 40%;
    margin-right: 1.2em;
  }

  .kt-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media screen and (min-width: 1024px) {
  .kt {
    padding: 5em 0 7em 0;
  }

  .kt-steps {
    align-items: center;
    margin-bottom: 4em;
  }

  .step {
    margin-right: 0;
    width: 16%;
    height: 100%;
    min-height: 220px;
  }

  .arrow {
    display: block;
    width: 20px;
  }

  .kt-title {
    font-size: 2.4rem;
    font-weight: 500;
    color: #2962ff;
    line-height: 1.3;
    margin-bottom: 1.2em;
  }

  .kt {
    padding-bottom: 5em;
  }
}

.acc-item {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.6em;
  height: auto;
  transition: all 200ms;
  cursor: pointer;
  position: relative;
}

.down {
  position: absolute;
  content: url("images/down.svg");
  right: 20px;
  top: 24px;
  width: 14px;
  transition: all 100ms;
}

.down.active {
  transform: rotate(180deg);
}

.acc-item.active::after {
  transform: rotate(180deg);
}

.acc-item:hover {
  background-color: #f5f5f5;
}

.acc-mg {
  margin: 1.6em 1.2em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.acc-item p {
  font-weight: 600;
}

.acc-text {
  line-height: 1.5;
  padding-top: 2em;
  display: none;
}

.acc-text.active {
  display: block;
}

@media screen and (min-width: 1024px) {
  .acc-box {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .acc-mg {
    margin: 2.2em 1.2em;
  }
  .down {
    top: 35px;
  }

  .acc-item p {
    font-size: 1.2rem;
  }
}

/* PROFILE */
.exp {
  padding-bottom: 3em;
}

.exp-box {
  border: solid 1px #bdbdbd;
  padding: 1.4em;
  border-radius: 20px;
}

.exp-title {
  font-size: 2em;
  color: #2962ff;
  font-weight: 500;
  margin-bottom: 1em;
}

.exp-profile {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.exp-profile img {
  width: 80px;
  border-radius: 40px;
  margin-right: 1em;
}

.exp-name p:first-child {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.3em;
  width: 100%;
  display: flex;
  align-items: center;
}

.exp-name p:last-child {
  font-size: 1rem;
  font-weight: 300;
}

.exp-name a {
  width: 22px;
  margin-left: 0.5em;
}

.exp-body p {
  line-height: 1.5;
  margin-bottom: 1em;
}

.study {
  display: flex;
  flex-wrap: wrap;
}

.study p {
  width: 100%;
  font-size: 1.1rem;
  line-height: 1.4;
  font-style: italic;
  margin-bottom: 1em;
  font-weight: 600;
}

.study1 {
  height: 72px;
  margin: 1em;
}

.study2 {
  height: 48px;
  margin: 1em;
}

.study3 {
  height: 68px;
  margin: 1em;
}

.study4 {
  height: 74px;
  margin: 1em;
}

@media screen and (min-width: 768px) {
  .exp-name a {
    width: 20px;
    margin-left: 1.2em;
  }
}

@media screen and (min-width: 1024px) {
  .exp {
    padding-bottom: 5em;
  }

  .exp-box {
    padding: 4em;
  }

  .exp-title {
    font-size: 2.4rem;
    color: #2962ff;
    font-weight: 500;
    margin-bottom: 1em;
  }

  .exp-profile img {
    width: 120px;
    border-radius: 60px;
    margin-right: 1.4em;
  }

  .exp-profile {
    margin-bottom: 2em;
  }

  .exp-name p:first-child {
    font-size: 1.4rem;
    margin-bottom: 0.6em;
  }

  .exp-name p:last-child {
    font-size: 1.2rem;
    font-weight: 400;
  }

  .exp-body p {
    line-height: 1.7;
    margin-bottom: 1.4em;
    max-width: 900px;
  }

  .study {
    align-items: center;
  }

  .study p {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1.4em;
  }

  .study1 {
    height: 90px;
    margin: 0 2em 0 0;
  }

  .study2 {
    height: 50px;
    margin: 0 2em;
  }

  .study3 {
    height: 80px;
    margin: 0 2em;
  }

  .study4 {
    height: 84px;
    margin: 1em;
  }

  .exp-name a {
    width: 24px;
    margin-left: 1.2em;
  }

  .exp-box {
    max-width: 900px;
    margin: auto;
    margin-bottom: 5em;
  }
}

.bio-books p {
  line-height: 1.7;
}

.bio-books p a {
  text-decoration: underline;
  line-height: 1.7;
  color: #2962ff;
}

/* TESTIMONY */

.testimony {
  padding-bottom: 3em;
}

.test-box-d {
  display: none;
}

.test-m-item {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  padding: 1.4em;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.test-m-1 {
  background-color: #fff1dd;
  margin-bottom: 2em;
}

.test-m-2 {
  background-color: #ddefff;
}

.test-m-txt {
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 1em;
}

.test-m-name {
  font-weight: 600;
  line-height: 1.5;
}

@media screen and (min-width: 1024px) {
  .testimony {
    padding-bottom: 7em;
  }

  .test-box-m {
    display: none;
  }

  .test-box-d {
    display: block;
  }
}

.test-d-card {
  width: 100%;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 0;
  height: 300px;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  background-image: url("images/angela.jpg");
  background-repeat: no-repeat;
  background-size: 60%;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10em;
}

.test-d-item {
  position: absolute;
  right: 140px;
  width: 340px;
  height: 300px;
  padding: 2.4em;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  background-color: #fff1dd;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.11), 0 6px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.test-d-txt {
  font-size: 1.3rem;
  line-height: 1.5;
  margin-bottom: 1.2em;
  font-style: italic;
}

.test-d-name {
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 600;
}

.test-d-card-2 {
  width: 100%;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 0;
  height: 300px;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  background-image: url("images/oms.jpg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 50%;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 7em;
}

.test-d-2 {
  position: absolute;
  left: 140px;
  width: 340px;
  height: 300px;
  padding: 2.4em;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  background-color: #e3f2fd;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.11), 0 6px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (min-width: 1280px) {
  .test-d-card,
  .test-d-card-2 {
    height: 360px;
  }

  .test-d-item,
  .test-d-2 {
    width: 380px;
    height: 360px;
  }

  .test-d-txt {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 1.2em;
  }
}

/* WHO ABOUT */
.who-about {
  margin-top: 0;
}

/* CASES */
.case-title {
  font-size: 2.8rem;
  font-weight: 500;
  margin: 1em auto;
  text-align: center;
}

.chips-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2em;
}

.chip {
  padding: 1em;
  border: solid 2px gray;
  border-radius: 40px;
  display: flex;
  align-items: center;
  margin: 0.5em;
  cursor: pointer;
  background-color: #fff;
}

.chip:hover {
  background-color: #f5f5f5;
}

.radio {
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  border: solid 2px gray;
  border-radius: 16px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 1024px) {
  .chip {
    font-size: 1rem;
    margin: 0.7em;
  }

  .chips-box {
    margin-bottom: 5em;
  }
}

.chip-1,
.radio-1 {
  border-color: #e53935;
  color: #e53935;
}

.chip-1.active {
  color: #fff;
  background-color: #e53935;
}

.radio-1.active {
  border: solid 2px #fff;
}

.radio-1.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-2,
.radio-2 {
  border-color: #5e35b1;
  color: #5e35b1;
}

.chip-2.active {
  color: #fff;
  background-color: #5e35b1;
}

.radio-2.active {
  border: solid 2px #fff;
}

.radio-2.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-3,
.radio-3 {
  border-color: #00acc1;
  color: #00acc1;
}

.chip-3.active {
  color: #fff;
  background-color: #00acc1;
}

.radio-3.active {
  border: solid 2px #fff;
}

.radio-3.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-4,
.radio-4 {
  border-color: #afb42b;
  color: #afb42b;
}

.chip-4.active {
  color: #fff;
  background-color: #afb42b;
}

.radio-4.active {
  border: solid 2px #fff;
}

.radio-4.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-5,
.radio-5 {
  border-color: #f45e1e;
  color: #f45e1e;
}

.chip-5.active {
  color: #fff;
  background-color: #f45e1e;
}

.radio-5.active {
  border: solid 2px #fff;
}

.radio-5.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-6,
.radio-6 {
  border-color: #d81b60;
  color: #d81b60;
}

.chip-6.active {
  color: #fff;
  background-color: #d81b60;
}

.radio-6.active {
  border: solid 2px #fff;
}

.radio-6.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-7,
.radio-7 {
  border-color: #1e88e5;
  color: #1e88e5;
}

.chip-7.active {
  color: #fff;
  background-color: #1e88e5;
}

.radio-7.active {
  border: solid 2px #fff;
}

.radio-7.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-8,
.radio-8 {
  border-color: #43a047;
  color: #43a047;
}

.chip-8.active {
  color: #fff;
  background-color: #43a047;
}

.radio-8.active {
  border: solid 2px #fff;
}

.radio-8.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.chip-9,
.radio-9 {
  border-color: #ffa000;
  color: #ffa000;
}

.chip-9.active {
  color: #fff;
  background-color: #ffa000;
}

.radio-9.active {
  border: solid 2px #fff;
}

.radio-9.active::after {
  border-radius: 8px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.box-default {
  width: 100%;
  height: 240px;
  display: grid;
  place-items: center;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  border-radius: 50px;
  margin-bottom: 2em;
}

.box-default p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .box-default {
    margin-bottom: 8em;
  }

  .box-default p {
    font-size: 1.4rem;
  }
}

/* CASES SECTIONS*/

#case1,
#case2,
#case3,
#case4,
#case5,
#case6,
#case7,
#case8,
#case9 {
  display: none;
  margin-bottom: 2em;
}

.case-box {
  margin-bottom: 2em;
}

.content-title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.5em;
}

.ct1 {
  color: #e53935;
}

.ct2 {
  color: #5e35b1;
}

.ct3 {
  color: #00acc1;
}

.ct4 {
  color: #afb42b;
}

.ct5 {
  color: #f45e1e;
}

.ct6 {
  color: #d81b60;
}

.ct7 {
  color: #1e88e5;
}

.ct8 {
  color: #43a047;
}

.ct9 {
  color: #ffa000;
}

.case-logos {
  margin-bottom: 2em;
}

.case-logos img:first-child {
  height: 60px;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.case-logos img:last-child {
  height: 40px;
  margin-bottom: 0.5em;
}

.case-logos-2 img:first-child {
  height: 32px;
  margin-right: 1em;
}

.case-logos-2 img:last-child {
  height: 40px;
  margin-right: 1em;
}

.case-logos-3 img:first-child {
  height: 32px;
  margin-right: 1em;
}

.case-logos-3 img:last-child {
  height: 40px;
  margin-right: 1em;
}

.case-logos-4 img:first-child {
  height: 40px;
  margin-right: 1em;
}

.case-logos-5 img:first-child {
  height: 24px;
  margin-right: 1em;
}

.case-logos-6 img:first-child {
  height: 34px;
  margin-right: 1em;
}

.case-logos-6 img:last-child {
  height: 44px;
}

.case-logos-9 img:first-child {
  height: 80px;
  margin-right: 1em;
}

.case-description {
  line-height: 1.5;
  margin-bottom: 1em;
}

.divider {
  height: 1px;
  width: 100%;
  background-color: #e0e0e0;
  margin-bottom: 1em;
}

.chalenge-title {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1em;
}

.chalenge-title img {
  width: 40px;
}

.chalenge-title h4 {
  font-size: 1.6rem;
  font-weight: 500;
}

.chalenge p {
  line-height: 1.5;
  margin-bottom: 1em;
}

.before-title,
.after-title {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1em;
  width: 200px;
  height: 64px;
  background-color: #193252;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.before p {
  line-height: 1.5;
  margin-bottom: 1em;
}

.bef-articles img {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin-bottom: 2em;
  width: 100%;
}

.bef-articles-fl img {
  width: 280px;
  margin-right: 1em;
}

.bef-articles-amz img {
  width: 100%;
  max-width: 400px;
  margin-right: 1em;
}

.bef-articles-nf img {
  max-width: 400px;
}

.aft-content p {
  line-height: 1.5;
  margin-bottom: 1em;
}

.aft-content-amz img {
  max-width: 600px;
}

.aft-content img {
  width: 100%;
}

.aft-content-fl {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aft-content-fl img {
  max-width: 460px;
  margin: auto;
}

.bw-content {
  padding: 1.4em;
  border: solid 1px gray;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 0;
}

.bw-images {
  margin-bottom: 2em;
}

.web1,
.web2 {
  width: 100%;
  margin-bottom: 1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.img-social img {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin-bottom: 1em;
}

.back-top {
  height: 56px;
  width: 220px;
  background-color: #eeeeee;
  border-radius: 8px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-top:hover {
  background-color: #e0e0e0;
}

.back-top svg {
  width: 14px;
  margin-right: 0.5em;
}

@media screen and (min-width: 1024px) {
  .back-top {
    margin-left: auto;
  }
  .bw-content {
    padding: 2em;
  }
}

/* CASE 2 */

.video {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  width: 100%;
  position: relative;
  margin-bottom: 3em;
  display: flex;
  transition: 150ms;
}

.video:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.video img {
  width: 100%;
}

.play {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 80px;
  transform: translate(-50%, -50%);
}

.video-modal-1,
.video-modal-2,
.video-modal-3,
.video-modal-4,
.video-modal-5,
.video-modal-6,
.video-modal-7,
.video-modal-8 {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: 250ms ease-out;
}

.video-modal-1.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-2.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-3.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-4.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-5.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-6.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-7.active {
  visibility: visible;
  opacity: 1;
}

.video-modal-8.active {
  visibility: visible;
  opacity: 1;
}

.video-box-1,
.video-box-2,
.video-box-3,
.video-box-4,
.video-box-5,
.video-box-6,
.video-box-7,
.video-box-8 {
  width: 100%;
  max-width: 700px;
  height: 240px;
  position: relative;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.35);
  visibility: hidden;
  opacity: 0;
  transition: 350ms ease-out;
  transition-delay: 200ms;
  transform: translateY(100px);
}

.video-box-1.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-2.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-3.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-4.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-5.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-6.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-7.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.video-box-8.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.close {
  position: absolute;
  right: 0;
  margin-right: 0;
  top: -70px;
  border: solid 2px #193252;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #fff;
}

.close:hover {
  background-color: #e0e0e0;
}

.close svg {
  width: 16px;
  margin-right: 0.5em;
}

@media screen and (min-width: 768px) {
  .video-box {
    height: 400px;
  }
}

@media screen and (min-width: 1024px) {
  .video-box {
    width: 100%;
    max-width: 1100px;
    height: 61vh;
    position: relative;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.35);
  }

  .content-title {
    font-size: 3.2rem;
  }
  .case-logos {
    margin-bottom: 3em;
  }
  .case-description {
    margin-bottom: 3em;
    max-width: 60%;
  }
  .divider {
    margin-bottom: 3em;
  }
  .chalenge {
    max-width: 60%;
    margin-bottom: 3em;
  }

  .before {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3em;
  }

  .bef-content {
    width: 70%;
  }

  .before p {
    margin-bottom: 3em;
  }
  .img-social {
    display: flex;
    justify-content: space-between;
  }

  .bef-articles {
    display: flex;
    justify-content: space-around;
  }

  .after {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5em;
  }

  .aft-content {
    width: 70%;
  }
  .aft-content p {
    margin-bottom: 3em;
  }
  .img-social img {
    width: 30%;
  }

  .img-social a {
    width: 30%;
  }

  .img-social a img {
    width: 100%;
  }

  .img-social-mapfire img {
    width: 40%;
    margin-left: auto;
  }

  .web2 {
    margin-bottom: 3em;
  }

  .case-box {
    margin-bottom: 5em;
  }

  .case-content {
    margin-bottom: 5em;
  }
}

@media screen and (min-width: 1280px) {
  .case-description {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .chalenge p {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .before p {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .aft-content p {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .bef-content,
  .aft-content {
    width: 74%;
  }
}

/* PUBLIC MANAGEMENT - GESTOR PUBLICO */

.hero-manag {
  padding-bottom: 3em;
}

.hero-col-manag-2 {
  display: none;
}

.hero-title-manag {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 1em;
}

.hero-text-manag {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 2em;
}

.cta-manag {
  max-width: 320px;
  margin: 0 auto;
}

@media screen and (min-width: 1024px) {
  .hero-col-manag-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
  }

  .hero-col-manag-2 img {
    width: 100%;
    max-width: 360px;
  }

  .hero-col-manag-2 img {
    filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 45%));
  }

  .hero-manag {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5em;
    padding-bottom: 5em;
  }

  .cta-manag {
    max-width: 320px;
    margin: 0 0 auto;
  }
}

@media screen and (min-width: 1280px) {
  .hero-col-manag-2 img {
    width: 100%;
    max-width: 380px;
  }

  .hero-title-manag {
    font-size: 2.4rem;
  }
}

.whats {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.whats svg {
  width: 40px;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
  transition: all 200ms;
}

@media screen and (min-width: 1024px) {
  .whats {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .whats:hover svg {
    -webkit-animation: jello-horizontal 0.9s both;
    animation: jello-horizontal 0.9s both;
    filter: drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.3));
  }

  @-webkit-keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
}

/* FORM FEEDBACK */

.form-feedback {
  font-size: 0.92rem;
  position: fixed;
  top: calc(50% - 34px);
  right: -58px;
  background-color: #e8eef4;
  padding: 0.8em 1em;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: solid 1px #78909c;
  transform: rotate(-90deg);
  box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 150ms;
}

.form-feedback:hover {
  font-size: 0.94rem;
  right: -60px;
  padding: 0.9em 1.1em;
  box-shadow: -1px 2px 30px rgba(0, 0, 0, 0.2);
}

/* ERRO 404 */

.error {
  height: 100vh;
  width: 100%;
  display: grid;
  place-content: center;
}

.message-erro {
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;
}

.message-erro svg {
  margin: 0 auto 1em auto;
  width: 40px;
}

.error-2 {
  background-color: #fff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 0;
  padding: 2em;
  max-width: 520px;
  margin-bottom: 4em;
}

.error-2 p {
  font-size: 1.2rem;
  line-height: 1.3;
}

@media screen and (min-width: 1024px) {
  .error-2 {
    padding: 4em;
  }
  .error-2 p {
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

.error-2 svg {
  width: 100px;
  margin-bottom: 1em;
}

.cta-org.home {
  margin-left: auto;
  margin-right: auto;
}

/* POSTS */
.post-title {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.5em;
}

.meta {
  margin-bottom: 3em;
  font-weight: 300;
}

.body {
  margin-bottom: 5em;
}
.body p {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 1.6em;
}

.body h3 {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

.body ul li {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  list-style-type: disc;
  list-style-position: inside;
}

.body ol li {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1em;
  line-height: 1.4;
  list-style-type: decimal-leading-zero;
  list-style-position: inside;
}

.body ol li p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  font-weight: 400;
}

.body ol li {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1em;
  line-height: 1.4;
}

.body a {
  color: #2962ff;
  text-decoration: underline;
}

.new-blog {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2962ff;
  height: 360px;
  margin-bottom: 5em;
}

.new-blog a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0);
  padding: 1.2em;
  border-radius: 10px;
  transition: all 200ms;
}

.new-blog a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.new-blog h4 {
  max-width: 300px;
  text-align: center;
  color: #fff;
  font-size: 1.8em;
  font-weight: 200;
  line-height: 1.6;
}

.new-blog span {
  font-weight: 500;
  color: #fff;
}

.new-blog img {
  width: 60px;
  margin: auto;
  margin-bottom: 1em;
}

@media screen and (min-width: 1024px) {
  .new-blog h4 {
    max-width: 600px;
    font-size: 2rem;
  }
}

/* MODAL LANDING PAGE */

.modal-lp {
  background-color: #eaf2ff;
  height: 90vh;
  width: 90vw;
  /* right: 100px; */
  bottom: 5vh;
  left: 3vw;
  position: fixed;
  bottom: -600px;
  opacity: 0;
  left: 0;
  padding: 1.2rem;
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px 12px 0 0;
  transition: all;
}

.modal-lp.active {
  bottom: 0px;
  opacity: 1;
}

.md-txt {
  width: 100%;
  font-size: 1.32rem;
  text-align: center;
  line-height: 1.28;
  margin-bottom: 2rem;
}

.go-lp {
  position: relative;
  width: 50%;
  color: #fff;
  background-color: #2962ff;
  border-radius: 8px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.45);
  font-size: 1.1rem;
}

.go-lp:hover {
  background-color: #003ee7;
}

.md-title {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.4rem;
}

.md-close {
  position: absolute;
  right: 1.2rem;
  top: 0.9rem;
  border: solid 1px gray;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.md-close:hover {
  background-color: lightgray;
  cursor: pointer;
}

.md-close img {
  width: 20px;
}

@media screen and (min-width: 1024px) {
  .modal-lp {
    height: 90vh;
    width: 90vw;
    /* right: 100px; */
    bottom: 5vh;
    left: 3vw;
    box-shadow: -28px 0 70px rgba(0, 0, 0, 0.5);
    border-radius: 12px 12px;
    padding: 0 2rem;
    transition: ease-out 600ms;
    visibility: hidden;
  }

  .md-txt {
    margin-top: 2rem;
  }

  .md-close {
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    border: solid 1px gray;
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    border-radius: 8px;
  }

  .modal-lp.active {
    bottom: 32px;
    visibility: visible;
  }
}