/* GENERAL ****************************** */
body {
  /*font-family: Inter;*/
  font-family: Hind Madurai;
  font-size: 14px;
  background-color: #fcfcfc;
  color: #535353;
}

html {
  scroll-padding-top: 55px;
}

::selection,
::moz-selection {
  background-color: #d2acda;
  color: white;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Montserrat;
}

h2 {
  color: #535353;
}

p {
  font-family: Hind Madurai;
  font-size: 14px;
}

hr {
  border-color: #C7CB85;
}

/* Iconos de los titulos de las secciones*/
h2 i {
  font-size: 1.5rem;
}

.logo-42myf {
  color: #535353;
}


a.link {
  text-decoration: none !important;
  color: #95c8c6 !important;
  cursor: pointer;
  color: #95c8c6 !important;
  transition: color 0.3s ease, transform 0.3s ease;
}

a.link:hover {
  text-decoration: none !important;
  color: #d2acda !important;
  cursor: pointer;
  color: #d2acda !important;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* SECCIONES **************************** */
#encabezado {
  background-color: #fcfcfc;
}

#skills {
  background-color: #fcfcfc;
}

#experiencia {
  padding-top: 35px;
}

#experiencia,
#contactar {
  color: #535353;
}

#aboutme {
  background-color: #fcfcfc;
}

.mw-150 {
  max-width: 150px;
}

.mw-200 {
  max-width: 200px;
}

.mw-220 {
  max-width: 220px;
}

.devicon-kotlin-plain,
.devicon-android-plain {
  color: #fcfcfc;
}


/* .titulo-seccion {
  padding-top: 15px;
} */

/* NAVBAR **************************** */
.navbar {
  font-family: Consolas;
  background-color: #ebebeb;
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  z-index: 1000;
}

.navbar-menu {
  width: 50%;
  display: flex;
  justify-content: center;
}

.navbar-nav {
  flex-direction: column;
  /* Para que los elementos queden en columna */
}

.nav-link {
  color: #535353;
  transition: color 0.8s ease, transform 0.8s ease;
}

.nav-link:hover {

  color: #C7CB85;
  transition: color 0.8s ease, transform 0.8s ease;
}

.navbar-toggler {
  border: none;
}


.offcanvas,
.offcanvas-title {
  background-color: #F5F5F5;
}

@media (max-width: 991px) {
  .navbar-scroll {
    background-color: #fff;
  }

  .navbar-scroll .navbar-brand,
  .navbar-scroll .nav-link,
  .navbar-scroll .fa-bars {
    color: #C7CB85 !important;
  }
}

.navbar-brand {
  letter-spacing: 3px;
  font-size: 1rem;
  font-weight: 500;
}

.navbar-scroll .navbar-brand,
.navbar-scroll .nav-link,
.navbar-scroll .fa-bars {
  color: #fff;
}

.navbar-scroll {
  box-shadow: none;
}

.navbar-scrolled {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
}

.navbar-scrolled .navbar-brand,
.navbar-scrolled .nav-link,
.navbar-scrolled .fa-bars {
  color: #535353;
}

.navbar-scrolled {
  background-color: #fff;
}

@media (max-width: 450px) {
  #intro {
    height: 1300px !important;
  }
}

@media (min-width: 550px) and (max-width: 650px) {
  #intro {
    height: 1100px !important;
  }
}

@media (min-width: 800px) and (max-width: 800px) {
  #intro {
    height: 600px !important;
  }
}

.display-1 {
  font-weight: 500 !important;
  letter-spacing: 40px;
}

@media (min-width: 800px) {
  .display-1 {
    font-size: 10rem;
  }
}

@media (min-width: 700px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 950px;
  }
}

/* SECTION SOBRE MÍ */

@media (max-width: 768px) {
  .sobre-mi .row {
    flex-direction: row !important;
  }

  .sobre-mi .col-md-2 {
    order: 1;
  }

  .sobre-mi .col-md-9 {
    order: 2;
  }
}

.imagen-perfil {
  width: 155px;
  height: 155px;
  border-radius: 50%;
  background-color: #dfdfdf;
  background-image: url('../img/mara.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.8s ease, transform 0.8s ease;
}

.imagen-perfil:hover {
  transform: scale(1.10);
  background-color: #C7CB85;
}

.bg-badge-work {
  border-radius: 50px;
  max-height: 35px;
  align-items: center;
  background-color: #d2acda !important;
  color: #f5f5f5 !important;
  transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s ease;
}

.bg-badge-work:hover {
  background-color: #95c8c6 !important;
  transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s ease;
}

.devicon-kotlin-plain {
  color: #fcfcfc !important;
}

/*SOBRE MI*/

.img-2 {
  /* margin-top: 50px;
  margin-left: -40px; */
  margin-top: 0px;
  margin-left: 50px;
  margin-right: -85px;
  background-color: #95c8c6;

  border-radius: 50%;
  object-fit: cover;
  transform: scale(1);
  transition: background-color 0.8s ease, transform 0.8s ease;
  max-width: 100%;
  max-height: 230px;
  min-width: 230px;
}

.img-2:hover {
  transform: scale(1.10);
  background-color: #f8e5cd;
  transition: background-color 0.8s ease, transform 0.8s ease;
}

.img-1 {
  /* margin-top: 170px;
  margin-left: 35px; */
  margin-top: 150px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: #efe9e1;
  border-radius: 50%;
  object-fit: cover;
  /* Cambio de scale-down a cover */
  transform: scale(1);
  transition: background-color 0.8s ease, transform 0.8s ease;
  max-width: 100%;
  max-height: 170px;
  min-width: 170px;
}

.frase {
  margin-bottom: -250px;
  max-width: 100%;
  max-height: 320px;
  min-width: 320px;
}

.img-1:hover {
  transform: scale(1.05);
  background-color: #a6dfdd;
  transition: background-color 0.8s ease, transform 0.8s ease;
}

.aboutme-container {
  margin-left: auto;
  display: block;
  text-align: center;
}

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

.col-lg-5 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* TECNOLOGÍAS *********************** */
.badge {
  align-items: left;
  height: 30px;
  border-radius: 50px;
  background-color: #95c8c6;
  color: #fcfcfc;
  transition: background-color 1.5s ease, color 1.5s ease, transform 1.5s ease;
  font-size: 14px;
  font-weight: 200;
}

.bg-badge:hover {

  background-color: #d2acda;
  color: #fcfcfc;
  transition: background-color 0.8s ease, color 0.8s ease, transform 0.8s ease;
}

.fab-custom,
fa {
  color: #F4F4ED;
}

.company-logo {
  width: auto;
  height: 60px;
  transition: transform 0.3s ease;
  transform: scale(1.08)
}

.company-logo:hover {
  transition: transform 0.3s ease;
  transform: scale(1.08)
}

/* EXPERIENCIA LABORAL LINEA TEMPORAL */

.timeline {
  position: relative;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  margin-bottom: 10px;
  padding-left: 40px;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: #d2acda;
  border-radius: 50%;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  bottom: -25px;
  width: 2px;
  background-color: #d2acda;
}

.timeline-content {
  padding: 0;
}

.timeline-item:last-child::before {
  bottom: auto;
}

/*FORMACION LINEA TEMPORAL*/
.timeline2 {
  position: relative;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.timeline-item2 {
  position: relative;
  margin-bottom: 10px;
  padding-left: 40px;
}

.timeline-dot2 {
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: #95c8c6;
  border-radius: 50%;
}

.timeline-item2::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  bottom: -25px;
  width: 2px;
  background-color: #95c8c6;
}

.timeline-content2 {
  padding: 0;
}

.timeline-item2:last-child::before {
  bottom: auto;
}

/* CONTACTAR *************************** */

.btn-enviar {
  background-color: #95c8c6;
  color: #F5F5F5;
}

.btn-enviar:hover {
  background-color: #89b8b6;
  color: #F5F5F5;
}

input::placeholder,
textarea::placeholder {
  font-size: 14px;
  font-family: Hind Madurai;
  color: #c4c4c4 !important;
}

.email {
  font-size: 1.5em;
  transition: color 0.3s ease, transform 0.3s ease;
}

#formulario-contacto {
  margin-top: -10px;
}


/* FOOTER **************************** */

footer {
  background-color: #F4F4ED;

  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

footer p {
  margin: 0;
}