@tailwind base;
@tailwind components;
@tailwind utilities;

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 28, 2021 */
@font-face {
  font-family: 'farrobold';
  src: url('../fonts/farro-bold-webfont.woff2') format('woff2'),
    url('../fonts/farro-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;

}

@font-face {
  font-family: 'farroregular';
  src: url('../fonts/farro-regular-webfont.woff2') format('woff2'),
    url('../fonts/farro-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'whytebold';
  src: url('../fonts/whyte-bold-webfont.woff2') format('woff2'),
    url('../fonts/whyte-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;

}

@font-face {
  font-family: 'whyteregular';
  src: url('../fonts/whyte-regular-webfont.woff2') format('woff2'),
    url('../fonts/whyte-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'farromedium';
  src: url('../fonts/farro-medium-webfont.woff2') format('woff2'),
    url('../fonts/farro-medium-webfont.woff') format('woff');
  font-weight: medium;
  font-style: normal;

}


@font-face {
  font-family: 'whytemedium';
  src: url('../fonts/whyte-medium-webfont.woff2') format('woff2'),
    url('../fonts/whyte-medium-webfont.woff') format('woff');
  font-weight: medium;
  font-style: normal;

}

*, html, body {
  font-family: 'whyteregular', sans-serif;
}

.farro {
  font-family: 'farrobold', sans-serif !important;
}

html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  font-size: 14px;
}

.navbar.fixedd-top.top-nav-collapse {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #202020;
}

.hero-height {
  height: 100vh;
}

.height-swiper-team {
  height: 95vh;
}

@media (min-width: 1200px) {
  .hero-height {
    height: 90vh;
  }
  .height-swiper-team {
    height: 100%;
  }
}

.three-lines-limit {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.swiper-pagination-hero {
  position: absolute;
  bottom: 0 !important;
  top: unset !important;
  right: 0 !important;
  transform: none !important;
  padding-bottom: 6rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-end;
}

.swiper-pagination-hero .swiper-pagination-bullet-active:before {
  content: " ";
  position: absolute;
  left: -20px;
  width: 15px;
  background-color: white;
  height: 2px;
  bottom: 0;
  margin: auto;
}

.swiper-pagination-team {
  position: absolute;
  z-index: 0;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.swiper-pagination-team .swiper-team-desktop.swiper-pagination-bullet {
  width: 20%;
  opacity: 0.7 !important;
}

.swiper-pagination-team .swiper-team-desktop.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

.swiper-pagination-team .swiper-team-desktop.swiper-pagination-bullet-active h5,
.swiper-pagination-team .swiper-team-desktop.swiper-pagination-bullet-active h6 {
  font-weight: bold !important;
}

.swiper-pagination-team .swiper-team-mobile.swiper-pagination-bullet {
  opacity: 0.5 !important;
  border-radius: unset;
  width: 45px;
  height: 5px;
  background-color: black;
}

.swiper-pagination-team .swiper-team-mobile.swiper-pagination-bullet-active {
  opacity: 1 !important;
}


.swiper-pagination-team .swiper-team-desktop.swiper-pagination-bullet-active .arrow-icon img {
  rotate: 180deg;
}

.swiper-pagination-nosotros {
  z-index: 0;
  transform: none !important;
  width: 100%;
  position: absolute;
  display: flex;
  bottom: 0 !important;
  top: unset !important;
  background-color: white;
  align-items: center;
  padding: 1rem 0;
}

.swiper-pagination-nosotros .swiper-pagination-bullet {
  opacity: 0.5 !important;
  border-radius: unset;
  width: 45px;
  height: 5px;
  background-color: black;
}

.swiper-pagination-nosotros .swiper-pagination-bullet-active {
  opacity: 1 !important;
}

.swiper-pagination-porque {
  z-index: 0;
  transform: none !important;
  width: 100%;
  position: absolute;
  display: flex;
  bottom: 0 !important;
  top: unset !important;
  background-color: white;
  align-items: center;
  padding: 1rem 0;
}

.swiper-pagination-porque .swiper-pagination-bullet {
  opacity: 0.5 !important;
  border-radius: unset;
  width: 45px;
  height: 5px;
  background-color: black;
}

.swiper-pagination-porque .swiper-pagination-bullet-active {
  opacity: 1 !important;
}

/*
.swiper-pagination-team .swiper-pagination-bullet:nth-child(0) {
  content: " ";
  position: absolute;
  left: -20px;
  width: 15px;
  background-color: white;
  height: 2px;
  bottom: 0;
  margin: auto;
}

*/
.navbar-items li a {
  transition: all ease-in-out .2s;
}

.navbar-items li a:hover {
  border-bottom: 0px solid #F58C5F;
}

.navbar-items li a.active {
  border-bottom: 5px solid #F58C5F;
  transition: all ease-in-out .2s;
}

.clicked-button {
  background-color: #F58C5F !important;
  color: white !important;
}