:root {
    --color-scoltia-primary: #1d4eff;
    --color-scoltia-secondary: #33efab;
    --color-scoltia-tertiary: #fcc8c8;
    --color-scoltia-white: #ffffff;
    --color-scoltia-grey: #d3dee5;
    --color-scoltia-black: #000000;
  }
@font-face {
    font-family: 'rubik-regular';
    src: url('fonts/static/Rubik-Regular.ttf') format('truetype');
}
.card{
    border-radius:0;
    border: none;
    min-height:150px!important;
}
body{
    font-family: 'rubik-regular';
}
.color-scoltia-white{
    color: var(--color-scoltia-white);
}
.btn-menu{
    background-image: url("img/Menu.png");
    background-size: cover;
    background-position: center;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.btn-arrow{
    background-image: url("img/Right.png");
    background-size: cover;
    background-position: center;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* estilos cards */
/*
    ** All elements border-box
*/
*,
*:before,
*::after {
  box-sizing: border-box;
}

/*
    ** Root element font size
    ** No default margins and paddings
*/
html,
body {
  /* font-size: 16px; */
  margin: 0;
  padding: 0;
}

/*
    **root elements display block
*/
html,
body {
  display: block;
}

/*
    ** Body main style
*/
body {
  line-height: 1.317101995;
  scroll-behavior: smooth;
  /* font-family: sans-serif; */
  /* background-color: #ffffff; */
}

button:focus {
  outline: 0;
}

img,
embed,
svg,
audio,
canvas,
iframe,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

hr {
  height: 0;
  border: 0;
  border-bottom: 1px solid #dfdfdf;
  margin: 0;
}

body {
  color: #5c7470;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0;
}

h1 {
  /* font-size: 4rem; */
  margin-top: 0;
  margin-bottom: 80px;
}



p {
  margin: 0;
}

.cards-grid {
  display: flex;
  grid-gap: 80px;
  padding-bottom: 60px;
}

/* FLIP CARD */
.flip-card {
  perspective: 2000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 550ms cubic-bezier(0.1, 0.22, 0.8, 1.13);
  transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-front {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.flip-card-back {
  font-size: 1.25rem;
  text-align: center;
  display: grid;
  place-items: center;
  /* padding: 32px; */
  background-color: #191919;
  transform: rotateY(180deg);
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}