/*=============== GOOGLE FONTS ===============*/
/*=============== Poppins ===============*/
/* poppins-regular - latin */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("../fonts/poppins-v20-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/poppins-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* poppins-500 - latin */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: local(""), url("../fonts/poppins-v20-latin-500.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/poppins-v20-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* poppins-600 - latin */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: local(""), url("../fonts/poppins-v20-latin-600.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/poppins-v20-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* poppins-700 - latin */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/poppins-v20-latin-700.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/poppins-v20-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* poppins-800 - latin */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: local(""), url("../fonts/poppins-v20-latin-800.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/poppins-v20-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* poppins-900 - latin */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: local(""), url("../fonts/poppins-v20-latin-900.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/poppins-v20-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/*=============== Nunito ===============*/
/* nunito-sans-regular - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/nunito-sans-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-sans-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-600 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/nunito-sans-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-sans-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-700 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/nunito-sans-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-sans-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-800 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/nunito-sans-v12-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-sans-v12-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*=============== Lato ===============*/
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/lato-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('../fonts/lato-v23-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  --color-body: #fff;
  --color-header: #fff;
  --color-container: #fff;
  --color-title: rgb(254, 254, 254);
  --color-subtitle: rgb(69, 57, 151);
  --color-text: rgb(58, 108, 116);
  --color-blue: #1887dd;
  --color-blue-link: #44a4ee;
  --color-blue-dark: #1d5893;
  --color-red: #fa5741;

  --clr-primary-400: 263 55% 52%;
  --clr-secondary-400: 217 19% 35%;
  --clr-secondary-500: 219 29% 14%;
  --clr-neutral-100: 0 0% 100%;
  --clr-neutral-200: 210 46% 95%;
  --clr-neutral-300: 0 0% 81%;


  /*========== Font and typography ==========*/
  --lato-font: "Lato", sans-serif;
  --nunito-font: "Nunito Sans", sans-serif;
  --poppins-font: "Poppins", sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
  --smallest-font-size: 0.688rem;

  /*========== Font weight ==========*/
  --font-500: 500;
  --font-600: 600;
  --font-700: 700;
  --font-800: 800;
  --font-900: 900;

  /*========== Margenes Bottom ==========*/
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;
  --mb-3-5: 3.5rem;
  --mb-4: 4rem;
  --mb-4-5: 4.5rem;
  --mb-5: 5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 991px) {
  :root {
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
    --smallest-font-size: 0.75rem;
  }
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*=============== BASE ===============*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: var(--header-height) 0 0 0;
  font-family: var(--lato-font);
  font-size: var(--normal-font-size);
  color: var(--color-body);
  text-rendering: optimizeSpeed;
  background-image: url("../img/bg_mobile.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
  background-color: #191919 !important;
  margin: 0 auto !important;
}

.video-container .box-text h1 {
  font-family: var(--nunito-font);
  font-size: 2rem;
  letter-spacing: 1px;
  font-weight: 900;
  color: var(--title-color);
  margin-bottom: 1.5rem;
  line-height: 2.5rem;
}

.box-icons__item span {
  font-family: var(--lato-font);
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0.8px;
  font-weight: 500;
  color: var(--title-color);
}

p {
  font-family: var(--lato-font);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.8px;
  font-weight: 500;
  color: var(--title-color);
  margin-bottom: 1.5rem;
}

.video-container .box-text a,
.banner-container .box-text a {
  display: block;
  font-family: var(--nunito-font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-align: center;
  color: var(--title-color);
  background-color: var(--color-blue);
  padding: 0.85rem 1.5rem;
  transition: 0.3s ease-in-out;
}

.video-container .box-text a:hover,
.banner-container .box-text a:hover {
  background-color: var(--color-blue-dark);
}

ul {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

img,
picture {
  width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

iframe, video {
  position: relative;
  width: 100%;
  outline: none;
}

button,
input {
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  font-family: var(--lato-font);
  font-size: var(--normal-font-size);
}


/*=============== BASE Responsive ===============*/
@media screen and (min-width: 991px) {
  .video-container .box-text h1 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    line-height: normal;
  }

  p {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .video-container .box-text a,
  .banner-container .box-text a {
    background-color: var(--color-blue);
    font-size: 1rem;
    padding: 1rem 2rem;
  }

  .box-icons__item span {
    font-size: 1.2rem;
  }

  body {
    background-image: url("../img/bg.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;
  }
  
}


@media screen and (min-width: 1240px) {
  .video-container .box-text h1 {
    /* font-size: 2.5rem; */
    font-size: 2.3rem;
    margin-bottom: 2rem;
  }

  p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
  }

  .video-container .box-text a,
  .banner-container .box-text a {
    background-color: var(--color-blue);
    font-size: 1.2rem;
    padding: 1rem 3.5rem;
  }

  .box-icons__item span {
    font-size: 1.4rem;
  }
  
}

/*=============== REUSABLE CSS CLASSES ===============*/
.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1rem);
}
.flow > :first-child {
  margin-top: 0 !important;
  margin-left: 0 !important;
}
.flow > :last-child {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

/*=============== LAYOUT ===============*/
.container {
  /* max-width: 1240px; */
  max-width: 90rem;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
}

/* For large devices */
@media screen and (min-width: 1240px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }
}

/*=============== HEADER ===============*/
.header {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 1.4rem;
  /* letter-spacing: 0.8px; */
  font-family: var(--nunito-font);
  font-weight: 800;
  color: #fff;
  /* font-size: calc(1em + 1vw); */
}

.nav__logo img {
  display: block;
  width: 3rem;
  height: auto;
  /* padding-right: .5rem; */
}

.nav__logo span {
  color: var(--color-blue);
}

.nav button {
  display: none;
  color: var(--color-red);
  background-color: transparent;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 1rem 1.75rem;
}

.nav button:hover {
  color: var(--title-color);
}

@media screen and (min-width: 991px)/* 62rem */ {
  .nav {
    height: calc(var(--header-height) + 1rem);
  }
  
  .nav button {
    display: block;
  }

  .nav__logo img {
    width: 4rem;
  }

  .nav__logo {
    font-size: 1.9rem;
  }
}


/* =============== SECTION MAIN =============== */
.main {
  height: auto;
  width: min(95%, 90rem);
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: calc(var(--header-height) + 1rem);
  margin-inline: auto;
  margin-bottom: 2rem;
}

@media screen and (min-width: 991px)/* 62rem */ {
  .main {
    gap: 2.5rem;
    margin-top: calc(var(--header-height) + 3rem);
    margin-bottom: 2.5rem;
  }
}


/* =============== SECTION VIDEO =============== */
.video-container {
  display: grid;
  font-size: var(--normal-font-size);
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'one'
    'two';
  gap: 1rem;
  padding: 1rem;
}

.video-container .box1 {
  grid-area: one;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.video-container .box2 {
  grid-area: two;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.video-container .box-text {
  width: 100%;
  padding: 0;
  text-align: center;
  color: #fff;
  padding: 1rem 0 0 0;
}

.video-container .box-text span {
  font-weight: 700;
  color: var(--color-red);
}

.video-container .button-container {
  padding: 1rem 0;
}

.video-container .box-video {
  cursor: pointer;
}


/* =============== Video Responsive =============== */
@media screen and (min-width: 991px) {
  .video-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "one one one two";
  }

  .video-container .box1 {
    padding: 2rem;
  }

  .video-container .box-text {
    padding: 1rem 1rem 1rem 0;
    text-align: left;
  }

  
}


/* =============== SECTION PROFILE =============== */
.profile-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  font-size: var(--normal-font-size);
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.profile-container .box-title {
  font-size: 1.2rem;
  text-align: left;
  letter-spacing: 0.8px;
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem 1.5rem;
  font-weight: 600;
}

.profile-container .box-title span{
  color: var(--color-blue);
}

.profile-container .box-photo {
  display: flex;
  gap: .4rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* padding: 1rem 0; */
}

.profile-container .box-photo img {
  width: 50%;
  max-width: 45%;
}

.profile-container .box-button {
  width: 100%;
  color: var(--color-blue);
  padding: 1rem 1rem 2rem 1rem;
  text-align: center;
}

.profile-container .box-button a {
  display: inline-block;
  color: var(--color-blue-link);
  font-family: var(--lato-font);
  font-size: 1.2rem;
  font-weight: var(--font-700);
  text-align: center;
  letter-spacing: 0.5px;
  transition: 0.3s;
}

.profile-container .box-button a:hover {
  color: var(--color-blue-dark);
}

/* .profile-container .box-middle-title {
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.75rem;
  text-align: center;
  font-family: var(--nunito-font);
  font-size: 1.8rem;
  letter-spacing: 1px;
  font-weight: var(--font-800);
} */

.profile-container .box-icons {
  display: grid;
  justify-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 1rem;
  font-family: var(--nunito-font);
  background: rgba(0, 0, 0, 0.7);
  
}

.profile-container .box-icons .box-icons__item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: 0.3s;
}

.profile-container .box-icons .box-icons__item img {
  display: block;
  width: 3rem;
}


/* =============== PROFILE Responsive =============== */
@media screen and (min-width: 991px) {
  .next_row {
    display: none;
  }
  
  .profile-container .box-title {
    font-size: 1.4rem;
    text-align: left;
  }

  .profile-container .box-photo {
    display: flex;
    gap: .4rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* padding: 1.5rem 0 0 0; */
  }

  .profile-container .box-photo img {
    display: inline-block;
    width: 100%;
    max-width: 10.5rem;
    cursor: pointer;
  }

  .profile-container .box-button {
    padding: 2rem;
    text-align: right;
  }

  .profile-container .box-button a {
    font-size: 1.2rem;
  }

  /* .profile-container .box-middle-title {
    font-size: 1.6rem;
  } */

  .profile-container .box-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
  }

  .profile-container .box-icons .box-icons__item img {
    display: block;
    width: 3.5rem;
  }
}


@media screen and (min-width: 1240px) {
  .profile-container .box-title {
    font-size: 1.7rem;
    text-align: left;
  }

  .profile-container .box-button a {
    font-size: 1.4rem;
  }

  /* .profile-container .box-middle-title {
    font-size: 2.7rem;
  } */

  .profile-container .box-icons .box-icons__item img {
    display: block;
    width: 4.5rem;
  }
}







/* =============== SECTION TEXT =============== */
.text-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  font-size: var(--normal-font-size);
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.text-container .box-title, 
.text-container .box-title h1 {
  font-size: 1.2rem;
  text-align: left;
  letter-spacing: 0.8px;
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
  line-height: normal;
}

.text-container .box-title span{
  color: var(--color-blue);
}

.text-container .box-description {
  font-size: 1rem;
  padding: 1rem 1.5rem;
  font-weight: 500;
  margin-bottom: 0;
}

.text_italic {
  font-style: italic;
}

.text_bold_800 {
  font-weight: 800;
}

/* =============== SECTION BANNER =============== */
.banner-container {
  display: grid;
  font-size: var(--normal-font-size);
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'one'
    'two';
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

.banner-container .box-text {
  padding: 0;
  text-align: center;
}

.banner-container .box-text h1 {
  margin-bottom: 0.5rem;
}

.banner-container .box-text .box-text__subtitle {
  color: var(--color-red);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.8px;
  padding-bottom: 1.5rem;
}

.banner-container .button-container {
  padding: 1rem 0;
}


/* =============== BANNER Responsive =============== */
@media screen and (min-width: 991px) {
  .banner-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "two one one";
    margin-bottom: 2.5rem;
  }

  .banner-container .box-text {
    padding: 1rem 3rem 1rem 1rem;
    text-align: right;
  }

  .banner-container .box-text h1 {
    margin-bottom: 1rem;
  }

  .banner-container .box-text .box-text__subtitle {
    font-size: 1.4rem;
    padding-bottom: 3rem;
    font-weight: 700;
  }

  .banner-container .box-text .button-container {
    padding: 0 0 0 3rem;
  }
}


@media screen and (min-width: 1240px) {
  .banner-container .box-text .box-text__subtitle {
    font-size: 1.7rem;
  }
}


/*========== SCROLL UP ==========*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background: rgba(0, 0, 0, 0.8);
  padding: .5rem;
  border-radius: .5rem;
  display: flex;
  opacity: .9;
  z-index: 100;
  transition: .3s ease-in-out;
}

.scrollup:hover {
  background: rgba(0, 0, 0, 1);
  opacity: 1;
}

.scrollup__icon {
  color: var(--color-title);
  font-size: 1.2rem;
}

/* Show scroll */
.show-scroll {
  bottom: 5rem;
}


@media screen and (min-width: 991px) {
  .scrollup {
    right: 2rem;
  }
}
  


/* =============== FOOTER =============== */
.footer {
  height: auto;
  width: min(95%, 90rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  color: var(--color-footer);
  padding: 1em;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.5em;
  transition: 0.3s;
  color: #7d8191;
}

.footer a {
  color: #7d8191;
  text-decoration: none;
  transition: 0.3s;
}

.footer a:hover {
  color: var(--color-body)
}


/* =============== EMPTY =============== */
.empty {
  display: none;
  height: 100vh;
}

@media screen and (min-width: 991px) {
  .empty {
    display: block;
  }
}





/* =============== SECTION ALL RESPONSIVE =============== */