/* =============================================================
   GENERAL STYLES
 ============================================================ */
* {
  --ava-primary-color: #1f4181;
  --ava-secondary-color: #99c03c;
}

/* =============================================================
   BODY STYLES
 ============================================================ */
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 30px;
  font-size: 14px;
  background-color: #f8f9fa;
}

/* =============================================================
   NAVBAR STYLES
 ============================================================ */
.navbar-option {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  color: var(--ava-primary-color) !important;
  font-size: 1.2em;
}

/* =============================================================
   CAROUSEL STYLES
 ============================================================ */
.c-item {
  height: 440px;
}

.c-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}

/* =============================================================
   PARTNERS SCROLL STYLES
 ============================================================ */
@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  background: #f8f9fa;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #f8f9fa);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #f8f9fa);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 60s slide infinite linear;
}

.logos-slide img {
  height: 70px;
  margin: 0 40px;
}

/* =============================================================
   CUSTOM DIVIDER
 ============================================================ */
.divisor-personalizado-1 {
  height: 8px;
  background: linear-gradient(to right, var(--ava-primary-color), var(--ava-secondary-color));
}

.divisor-personalizado-2 {
  height: 8px;
  background: linear-gradient(to right, var(--ava-secondary-color), var(--ava-primary-color));
}

.divisor-personalizado-3 {
  height: 2px;
  background: var(--ava-primary-color);
  width: 100%;
  border-radius: 5px;
}

.divisor-personalizado-4 {
  height: 2px;
  background: var(--ava-secondary-color);
  width: 100%;
  border-radius: 5px;
}

.separador-contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linea-izquierda,
.linea-derecha {
  height: 5px;
  flex-grow: 1;
}

.linea-izquierda {
  background-color: var(--ava-primary-color);
  border-radius: 5px 0 0 5px;
}

.linea-derecha {
  background-color: var(--ava-secondary-color);
  border-radius: 0 5px 5px 0;
}

.circulo-central {
  width: 20px;
  height: 20px;
  background-color: var(--ava-primary-color);
  border-radius: 50%;
  margin: 0 -12.5px;
  z-index: 1;
}

/* =============================================================
   SIMPLE BANNER STYLES
 ============================================================ */
.simple-banner {
  background-image: url('../assets/img/oil-pipes.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--ava-primary-color);
  background-blend-mode: soft-light;
}

/* =============================================================
   PROJECT GALLERY STYLES
 ============================================================ */
.bento-item {
  height: 300px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}

.bento-item:hover {
  transform: scale(1.05);
}


.bento-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: rgba(32, 65, 128, 0.6);
  color: white;
}

.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================
   FOOTER STYLES
 ============================================================ */
footer {
  background-color: #343a40;
  color: #fff;
  padding: 3rem 0;
}

.social-icons a {
  font-size: 1.25rem;
}

@media only screen and (min-width: 992px) {

  /* =============================================================
   NAVBAR STYLES
 ============================================================ */
  .navbar-option:hover {
    color: white !important;
  }

  .hover-color:hover {
    background-color: var(--ava-primary-color);
    border-radius: 5px;
  }
}

@media only screen and (max-width: 600px) {

  /* =============================================================
   CAROUSEL STYLES
 ============================================================ */
  .c-item {
    height: 340px;
  }

  /* =============================================================
   PARTNERS SCROLL STYLES
 ============================================================ */
  .logos:before,
  .logos:after {
    width: 100px;
  }
}