@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

body {
  font-family: 'Poppins', sans-serif;
  color: #000;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
}

h2, 
.category-title {
  margin-bottom: 70px;
}

h2 span,
h3 span {
  color: #87E873;
}

.py-section {
  padding-top: 95px;
  padding-bottom: 95px;
}

.pt-section {
  padding-top: 95px;
}

.pb-section {
  padding-bottom: 95px;
}

.btn,
.form-control {
  font-weight: 600;
  border-radius: 8px;
}

.btn-main {
  background-color: #747883;
  color: #fff;
}

.btn-main:hover,
.btn-main:focus {
  background-color: #87E873;
  color: #000;
}

.btn-second {
  background-color: #87E873;
  color: #000;
}

.btn-second:hover,
.btn-second:focus {
  background-color: #000;
  color: #fff;
}

.btn-third {
  background-color: #fff;
  color: #000;
}

.btn-third:hover,
.btn-third:focus {
  background-color: #000;
  color: #fff;
}

.navbar {
  background-color: #fff;
}

.navbar-toggler {
  color: #000;
}

.nav-link {
  font-weight: 600;
  color: #9799A2;
}

.nav-link.active {
  color: #747883;
}

.nav-link:hover {
  color: #747883;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

.hero-text {
  width: 70%;
  margin: auto;
}

#hero-nosotros {
  background: url('../img/nosotros-hero.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
}

#hero-servicios {
  background: url('../img/servicios-hero.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
}

#hero-servicios-especializados {
  background: url('../img/servicios-especializados-hero.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
}

#hero-nomina {
  background: url('../img/nomina-hero.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
}

#hero-recursos-humanos {
  background: url('../img/recursos-humanos-hero.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
}

#hero-contacto {
  background: url('../img/contacto-hero.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
}

#intro-home-servicios {
  background: url('../img/pattern-waves.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}


#intro-home-nosotros,
#intro-contacto-nosotros {
  background: linear-gradient(to top, #ffffff 30%, #747883 30%);
  color: #fff;
  position: relative;
}

#intro-nosotros {
  background: url('../img/pattern-waves.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.circle-outline {
  max-width: 300px;
  background-color: #747883;
  border-radius: 50%;
  text-align: center;
  padding: 10%;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.circle-outline:hover {
  background-color: #87E873;
}

.title-link,
.title-link:hover,
.title-link h5 {
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

#cta-nosotros {
  background-color: #747883;
  color: #fff;
}

#faq {
  min-height: 70vh;
}

.accordion-item {
  border: none;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
  color: #000;
  background-color: transparent;
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.breadcrumb-item a {
  color: #87E873;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #737884;
}

.service-title {
  margin-left: 5px;
  margin-right: 5px;
}

.service-title h5 {
  position: relative;
}
.service-title h5 .badge {
  font-size: .6em;
  position: absolute;
  bottom: 5px;
  margin-left: 5px;
}

#form {
  background: url('../img/pattern-waves.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #747883;
  color: #fff;
  position: relative;
}

.sello-extera {
  width: 95px;
  position: absolute;
  right: 20px;
  top: 20px;
}

#form label {
  color: #000;
}

#gracias {
  min-height: 80vh;
  background: url('../img/pattern-waves.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

footer {
  background-color: #000;
  color: #fff;
}

footer h6 {
  color: #87E873;
  margin-bottom: 15px;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer li {
  margin-bottom: 15px;
}

footer a,
footer a:hover, 
footer a:focus {
  color: #fff;
  text-decoration: none;
}

footer .fa-inverse {
  color: #000;
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {
  h1 {
    font-size: 3em;
  }

  .py-lg-section {
    padding-top: 95px;
    padding-bottom: 95px;
  }
  
  .pt-lg-section {
    padding-top: 95px;
  }
  
  .pb-lg-section {
    padding-bottom: 95px;
  }
}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}