body {
  font-family: 'Montserrat', sans-serif;
  scroll-behavior: smooth;
  color: #22545f;
}

a {
  color: #3B7F8E;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #7EC3D2;
  text-decoration: underline;
}

.btn,
.nav-link {
  text-decoration: none !important;
}

.nav-link:hover {
  color: #7ec3d2
}

h1, h2, h3, h4, h5 {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
}

h1 {
  color: #fff;
  font-size: 2.4rem;
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 3.2rem;
  }
}

h2 {
  font-size: 2rem;
}

h2, h3 {
  color: #7ec3d2;
}

h4, h5 {
  color: #488694;
}

.bold {
  font-weight: bold;
}

.text-dark {
  color: #22545f;
}

@media only screen and (max-width: 767px) {
  .lead {
    font-size: 1rem;
  }
}

.blockquote {
  font-size: 1em;
  padding: 1em 1em 1em 1.5em;
  border-left: 2px solid #488694;
}

.service-card, .need-card, .tech-card {
  transition: transform 0.3s, box-shadow 0.3s;
  /*cursor: pointer;*/
}

.service-card:hover, .need-card:hover, .tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.need-card img, .tech-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.hero-carousel img {
  height: 500px;
  object-fit: cover;
}

@media only screen and (min-width: 1200px) {
  .hero-carousel img {
    height: 650px;
  }
}

header {
  backdrop-filter: blur(10px);
  background: rgb(220 242 247 / 50%);
  box-shadow: 0px 6px 20px 0 rgba(72, 134, 148, 0.3);
}

.navbar-brand img {
  max-width: 280px;
}

@media only screen and (max-width: 767px) {
  .navbar-brand {
    max-width: 70%;
  }

  .navbar-brand img {
    max-width: 100%;
  }

  .nav-link {
    padding: 1rem 0.2rem;
  }

  section {
    text-align: center;
  }
}

#hero {
  padding-top: 50px;
}

.hero {
  margin-top: 100px;
}

@media only screen and (min-width: 768px) {
  #hero {
    padding-top: 60px;
  }

  .hero {
    margin-top: 110px;
  }
}

.carousel-caption {
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg,rgba(59, 127, 142, 1) 0%, rgba(59, 127, 142, 0) 100%);
  padding: 8rem 1rem 2rem;
}

.card-title {
  color: #488694;
}

.bg-light {
  background: rgb(220 242 247 / 100%) !important;
}

.bg-dark {
  background: #488694 !important;
}

.bg-primary {
  background: #7ec3d2 !important;
}

#servicios ul li {
  list-style: none;
}

#contacto {
  background: linear-gradient(-45deg, #7EC3D2, #5da9b9, #98bfc8, #6cafbf);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

#contacto a {
  color: #DCF2F7;
}

#contacto a:hover {
  color: #fff;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.form-control {
  padding: 1rem .75rem;
}

.btn-outline-primary {
    --bs-btn-color: #7ec3d2;
    --bs-btn-border-color: #7ec3d2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7ec3d2;
    --bs-btn-hover-border-color: #7ec3d2;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7ec3d2;
    --bs-btn-active-border-color: #7ec3d2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #7ec3d2;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #7ec3d2;
    --bs-gradient: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7ec3d2;
    --bs-btn-border-color: #7ec3d2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7ec3d2;
    --bs-btn-hover-border-color: #7ec3d2;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7ec3d2;
    --bs-btn-active-border-color: #7ec3d2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #7ec3d2;
    --bs-btn-disabled-border-color: #7ec3d2;
}

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #7ec3d2;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #F7FEFF;
    --bs-btn-hover-border-color: #F7FEFF;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #F7FEFF;
    --bs-btn-active-border-color: #F7FEFF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #7ec3d2;
    --bs-btn-disabled-border-color: #7ec3d2;
}

.whatsapp-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #25D366;
  color: white;
  padding: 12px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
}

.whatsapp-btn i { margin-right: 8px; font-size: 30px;}

.bi {margin-right: 8px;}

#metodo {
  background: #dcf2f7 url(img/flower.png) no-repeat right bottom;
  background-size: auto 110%;
}

@media only screen and (max-width: 767px) {
  #metodo {
    background: #dcf2f7 url(img/flower.png) no-repeat right bottom;
    background-size: auto 50%;
  }
}

.marquee {
  display: flex;
  align-items: center;
  -webkit-justify-content: center;
  /* Safari */
  justify-content: center;
  gap: 10px;
  padding: 10px;
}
.marquee .item {
}
.marquee .item img {
  width: 100%;
  height: auto;
  display: block;
}