@font-face {
  font-family: 'Quicksand-Bold';
  src: url('/skins/page/fonts/Quicksand-Bold.ttf');
}

@font-face {
  font-family: 'Quicksand-Light';
  src: url('/skins/page/fonts/Quicksand-Light.ttf');
}

@font-face {
  font-family: 'Quicksand-Medium';
  src: url('/skins/page/fonts/Quicksand-Medium.ttf');
}

@font-face {
  font-family: 'Quicksand-Regular';
  src: url('/skins/page/fonts/Quicksand-Regular.ttf');
}

@font-face {
  font-family: 'Quicksand-SemiBold';
  src: url('/skins/page/fonts/Quicksand-SemiBold.ttf');
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Quicksand-Regular', sans-serif;
  box-sizing: border-box;
  font-weight: 400;
}

:root {
  --azuloscuro: #2c388c;
  --azulclaro: #5472c2;
  --grisoscuro: #646464;
  --grisclaro: #e6e6e6;

}

body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}


/* BANNER PRINCIPAL */
.content-slider {
  display: block;
}

.content-slider-responsive {
  display: none;
}

.fondo-imagen {
  position: relative;
  background-color: #b1c6ff;
}

.img-banner {
  height: 65vh;
  width: 100%;
  object-fit: cover;
}

.imagen-superpuesta {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  /* Centrar la imagen en el div */
  /* Ajusta el tamaño de la imagen superpuesta según tus necesidades */
}

.titulo-banner {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  text-align: center;
  font-family: 'Quicksand-Light';
font-weight:700;

}

.slider-internas {
  margin-top: 100px;
}

body header {
  /* height: 100px; */
}

.navbar {
  height: 100px;
  background: var(--azulclaro);

  opacity: 0.8;
  --bs-navbar-padding-y: 0;
  transition: transform 0.3s ease;
  /* Agrega una transición a la propiedad 'transform' */
  transition: opacity 0.3s ease;
  /* Agrega una transición a la propiedad 'transform' */

  transform: translateY(-100%);
  /* Restablece la posición cuando es necesario */

}

.scrolling {
  margin-top: 0px;
  position: fixed;
  top: 0px;
  opacity: 1;
  z-index: 999;
  width: 100%;
  transform: translateY(0%);
  /* Restablece la posición cuando es necesario */


}

/* 
.navbar-nav a {
  color: #FFF;
  font-size: 1.2rem;
  font-weight: 400;
  font-family: 'Quicksand-Light';

} 

.navbar-nav a:hover {
  color: #FFF;
  font-weight: 500;
}

.navbar-nav a.activo {
  color: #FFF !important;
  font-size: 1.2rem;
  font-weight: 900;
  font-family: 'Quicksand-Bold';
}

.navbar-nav a.activo::after {
  content: "";
  width: 100%;
  background: var(--azuloscuro);
  height: 2px;
  display: block;
}

*/
.navbar-nav a {
  font-size: 1.2rem;

  font-family: 'Quicksand-Light';
  text-align: center;

  cursor: pointer;
  max-width: fit-content;

  --s: 0.1em;
  --c: #2c388c;
  color: #FFF;
  padding-bottom: var(--s);
  background: linear-gradient(90deg, var(--c) 50%, var(--azuloscuro) 0) calc(100% - var(--_p, 0%)) / 200% 100%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) var(--s) no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.5s ease;
}

.navbar-nav a:hover {
  color: #FFF;
  font-weight: bold;
  --_p: 100%;

 /*  text-shadow: 0 0 1px #ffffff,
    0 0 1px #ffffff,
    0 0 2px #ffffff; */

}

.navbar-nav a.activo {
  color: #FFF !important;
  font-size: 1.2rem;
  font-weight: 900;
  font-family: 'Quicksand-Bold';
  background: linear-gradient(90deg, var(--c) 50%, var(--azuloscuro) 0) calc(100% - var(--_p, 0%)) / 200% 100%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) var(--s) no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  --_p: 100%;

}

/* .navbar-nav a.activo::after {
  content: "";
  width: 100%;
  background: var(--azuloscuro);
  height: 2px;
  display: block;


} */


.link-hover {
  position: relative;
  display: inline-block;
}

.default-image,
.hover-image {
  position: absolute;
  top: -13px;
  left: -130px;
    opacity: 0;
  transition: opacity 0.3s ease; /* Transición suave de 0.3 segundos en la opacidad */
}

.default-image {
  opacity: 1; /* La imagen por defecto es visible */
}

.link-hover:hover .default-image {
  opacity: 0; /* Oculta la imagen por defecto al pasar el mouse */
}

.link-hover:hover .hover-image {
  opacity: 1; /* Muestra la imagen de hover al pasar el mouse */
  filter: drop-shadow(1px 1px 5px var(--azuloscuro));
  transform: scale(1.2);
}

.link-hover-2 {
  position: relative;
  display: inline-block;
}

.default-image-2,
.hover-image-2 {
  position: absolute;
  top: -13px;
    left: -80px;
  opacity: 0;
  transition: opacity 0.3s ease; /* Transición suave de 0.3 segundos en la opacidad */
}

.default-image-2 {
  opacity: 1; /* La imagen por defecto es visible */
}

.link-hover-2:hover .default-image-2 {
  opacity: 0; /* Oculta la imagen por defecto al pasar el mouse */
}

.link-hover-2:hover .hover-image-2 {
  opacity: 1; /* Muestra la imagen de hover al pasar el mouse */
  filter: drop-shadow(1px 1px 5px var(--azuloscuro));
  transform: scale(1.2);
}
/*-----------------------------------------------
 FOOTER 
 ------------------------------------------------*/
footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
}

footer * {
  font-family: 'Quicksand-Medium';

}

.footer-superior {
  background: var(--grisclaro)
}

.footer-inferior {
  padding: 20px 0;
  background: var(--grisoscuro);
  display: flex;
  justify-content: center;

}

.footer-inferior span {
  color: #FFF;
  text-align: center;
  width: 100%;
  margin: auto;
}

.footer-inferior span a {
  color: #a0c7ff;
  text-decoration: none;

}

.info-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  color:var(--grisoscuro);
}

.info-footer img {
  width: 30px;
}

.contenedor-general {
  margin-top: -100px;
  /* height: 100%; */
}


/* HOME */
.contenedor-seccion {
  padding: 60px 0;
}

.btn-conteiner {
  margin-top: 30px;
  display: flex;
  justify-content: start;

}

.btn-content {
  display: flex;
  align-items: center;
  padding: 0px 20px;
  text-decoration: none;
  font-family: 'Quicksand-Light';
  font-weight: 600;
  font-size: 20px;
  color: #FFF;
  background: var(--azulclaro);
  transition: 1s;
  border-radius: 100px;
  box-shadow: 0 0 0.2em 0 var(--azuloscuro);
}

.btn-content:hover,
.btn-content:focus {
  transition: 0.5s;
  -webkit-animation: btn-content 1s;
  color: #FFF;

  animation: btn-content 1s;
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 0.4em 0 var(--azuloscuro);
}

.btn-content .icon-arrow {
  transition: 0.5s;
  margin-right: 0px;
  transform: scale(0.6);
}

.btn-content .btn-title {
  font-family: 'Quicksand-Light';

}

.btn-content:hover .icon-arrow {
  transition: 0.5s;
  margin-right: 25px;
}

.icon-arrow {
  width: 20px;
  margin-left: 15px;
  position: relative;
  /* top: 6%; */
}

/* SVG */
#arrow-icon-one {
  transition: 0.4s;
  transform: translateX(-60%);
}

#arrow-icon-two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.btn-content:hover #arrow-icon-three {
  animation: color_anim 1s infinite 0.2s;
}

.btn-content:hover #arrow-icon-one {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.6s;
}

.btn-content:hover #arrow-icon-two {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */
@keyframes color_anim {
  0% {
    fill: white;
  }

  50% {
    fill: var(--azuloscuro);
  }

  100% {
    fill: white;
  }
}

/* Button animations */
@-webkit-keyframes btn-content {
  0% {
    outline: 0.2em solid var(--azuloscuro);
    outline-offset: 0;
  }
}

@keyframes btn-content {
  0% {
    outline: 0.2em solid var(--azuloscuro);
    outline-offset: 0;
  }
}


.content-box h2 {
  color: var(--azulclaro);
  font-weight: 600;
  font-family: 'Quicksand-Light';

}

.content-box .descripcion-seccion {
  color: var(--grisoscuro);
}

.imagen-seccion {
  display: flex;
  justify-content: center;
  align-items: center;
  object-position: center center;
  height: 100%;

}

.imagen-seccion img {
  width: 70%;
  margin: auto;
  object-fit: contain;
}


/* HOME CONTENIDO PORTAFOLIO DE SERVICIOS */
.row_2 {
  display: flex;
}

.row_2 .design-five  {
  display: flex;
  margin: auto 0;
}


.design-four {
  margin: auto;
}

.design-five .descripcion p span {
  font-family: 'Quicksand-Light';
  /* font-weight: 600; */

}

.itemSlider img {
  margin: auto;
  width: 120px;
  cursor: pointer;
}

.carousel-control-next {
  right: -50px;
  font-size: 43px;
  color: var(--azuloscuro);
}

.carousel-control-prev {
  left: -50px;
  font-size: 43px;
  color: var(--azuloscuro);
}

.row_justify_2 {
  justify-content: end !important;
}

.design-three {
  margin: auto;
}

.id_2 .col-lg-3{
  width: 20%;
}
.id_2 .col-sm-9{
  width: 80%;
}
.id_14 .col-lg-3{
  width: 20%;
}
.id_14 .col-sm-9{
  width: 80%;
}
.row_2 .descripcion,
.row_14 .descripcion{
  
  line-height: 1;
}

.btn-conteiner_design_one {
  margin-top: 30px;

  display: flex;
  justify-content: start;

}

.btn-content_design_one {
  display: flex;
  align-items: center;
  padding: 0px 20px;
  text-decoration: none;
  font-family: 'Quicksand-Light';
  font-weight: 600;
  font-size: 18px;
  color: #FFF;
  background: var(--azuloscuro);
  transition: 1s;
  border-radius: 100px;
  box-shadow: 0 0 0.2em 0 var(--azuloscuro);
}

.btn-content_design_one:hover,
.btn-content_design_one:focus {
  transition: 0.5s;
  -webkit-animation: btn-content_design_one 1s;
  color: #FFF;

  animation: btn-content_design_one 1s;
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 0.4em 0 var(--azuloscuro);
}

.btn-content_design_one .icon-arrow {
  transition: 0.5s;
  margin-right: 0px;
  transform: scale(0.6);
}

.btn-content_design_one .btn-title {
  font-family: 'Quicksand-Light';

}

.btn-content_design_one:hover .icon-arrow {
  transition: 0.5s;
  margin-right: 25px;
}

.icon-arrow {
  width: 20px;
  margin-left: 15px;
  position: relative;
  /* top: 6%; */
}

/* SVG */
#arrow-icon-one {
  transition: 0.4s;
  transform: translateX(-60%);
}

#arrow-icon-two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.btn-content_design_one:hover #arrow-icon-three {
  animation: color_anim_design_one 1s infinite 0.2s;
}

.btn-content_design_one:hover #arrow-icon-one {
  transform: translateX(0%);
  animation: color_anim_design_one 1s infinite 0.6s;
}

.btn-content_design_one:hover #arrow-icon-two {
  transform: translateX(0%);
  animation: color_anim_design_one 1s infinite 0.4s;
}

/* SVG animations */
@keyframes color_anim_design_one {
  0% {
    fill: white;
  }

  50% {
    fill: var(--azuloscuro);
  }

  100% {
    fill: white;
  }
}

/* Button animations */
@-webkit-keyframes btn-content_design_one {
  0% {
    outline: 0.2em solid var(--azuloscuro);
    outline-offset: 0;
  }
}

@keyframes btn-content_design_one {
  0% {
    outline: 0.2em solid var(--azuloscuro);
    outline-offset: 0;
  }
}

.slider_16 img {
  width: 225px;
  height: 150px;
  object-fit: contain;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
  color: var(--azuloscuro);
  text-decoration: none;
  outline: 0;
  opacity: .9;
}


/* CONTACTENOS */
.img-banner-internas {
  height: 200px;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  font-weight: 700;

}

.titulo-banner-internas {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  text-align: center;
  font-family: 'Quicksand-Light';
  font-weight: 700;
}

.form-control {
  border-radius: 25px !important;
  border: 1px solid var(--azulclaro) !important;
}

.form-control::placeholder {
  color:#a6a6a6;
  font-weight: 400;
  font-family: 'Quicksand-Medium';

}

/* SERVICIOS */
.design-two {
  padding: 0 80px;
}

.design-two h2 {
  text-align: left;
  color: var(--azulclaro);
  padding-right: 2rem;

}

.design-two .img-design-two {
  width: 100px;
}

.design-two .descripcion {

  margin-top: 25px;
}

.design-two .descripcion p {
  text-align: justify;
  color: var(--grisoscuro);
}

/* NOSOTROS */

.design-imagen {
  height: 300px;
}

.design-imagen .img-disenio-imagen {
  object-fit: cover;
  height: 300px;
}

.design-imagen .descripcion {
  padding: 0 20px;


}

.design-imagen .descripcion p span {
  font-family: 'Quicksand-Light';


}



/* NOTICIAS */
.caja-noticias {

  padding: 30px 0;
}

.caja-noticias h2 {
  text-align: left;
  color: var(--azulclaro);
  padding-right: 2rem;
}


.caja-noticias .fecha-design-one {
  color: var(--azuloscuro);
  font-size: 1.1rem;
  font-weight: 700;
}

.caja-noticias .img-design-one {
  max-width: 500px;
}

.hr-design-one {
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 40px; */

  background-color: var(--azulclaro);
  height: 2px;
  width: 85%;
  border: 0;
  border-top: 0;
  opacity: .5;
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;

  gap: 15px;
  text-decoration: none;
  color: var(--grisoscuro);
}

.paginacion i {
  color: var(--azulclaro);
  font-size: 30px;
  font-weight: 800;
}

.detalle-noticia .descripcion p {
  color: var(--grisoscuro);

}
.hamburger {
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 3em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}


.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
.navbar-toggler{
  border: 0;
}
.navbar-toggler:focus{
  box-shadow: 0 0 0;
}