:root {
  --main-bgcolor: #0ebc7f ;
  --secondary-bgcolor: #006261;
  --text-main:#0ebc7f;
  --text-secondary: #006261;
  --text-white: #ffffff;
}



@font-face {
  font-family: "Caviar"; 
  src: url('../fonts/CaviarDreams.ttf') format('truetype');
  font-style: normal;
  font-size: 400;

}

@font-face {
  font-family: "CaviarBold"; 
  src: url('../fonts/CaviarDreams_Bold.ttf') format('truetype');
/*  font-style: normal;
  font-size: 700;*/

}

*{
	margin: 0;
	padding: 0;
	font-size: 14px;
	-webkit-box-sizing: border-box;
			box-sizing:  border-box;
}


h1, h2, h3, h4, h5, h6 {
	color: #003280;
}


body{
	font-family: "Caviar";
}





.bg-icon {
  background-color: #0032a0;
}

.text-base{
  color: var(--text-main);
}

.text-base-secondary{
  
  color: var(--text-secondary);

}

.bg-main{

  background-color:  var(--main-bgcolor);

}

.bg-main-secondary{

  background-color: var(--secondary-bgcolor);

}

.btn-general {
   background-color: var(--main-bgcolor) !important;
  color: #f9f9f9;
}

.btn-general:hover {
  background: var(--secondary-bgcolor) !important;
  color: var(--text-white)  !important;
  border: 1px solid var(--main-bgcolor)  !important;
}

p {
  color: #121212;
}



img {
  width: 100%;
  height: auto;
  transition: .6s ease-out;
}

.text-justify {
  text-align: justify !important;
}

.logo {
  width: 100px;
  z-index: 9999 !important;
  display: flex;
  align-items: center;
}

.logo-foo{
      border-radius: 100%;
    box-shadow: 2px 2px 1px #0ebc7f;
}

.color-icon {
  color: #0032a0 !important;
}

.carousel-control-next,
.carousel-control-prev {
  z-index: 99 !important;
}


.sticky {
  /*background-color: hsl(0, 0%, 0%, 85%);*/
  background-color: hsl(179 100% 19.2%);
  height: 70px;
}

.sticky .list-menu .list li .item-menu {
   color: #f9f9f9 !important;
  -webkit-transition: .6s ease-in;
  transition: .6s ease-in;
}

.sticky .logo img {
  width: 70%;
}

.sticky .burger-menu {
  color: #f9f9f9 !important;
  -webkit-transition: .6s ease-in;
  transition: .6s ease-in;
}

.form-control:focus {

  border-color: var(--secondary-bgcolor) !important;
  box-shadow: 0 0 0 .25rem rgba(14, 118, 127, .25) !important;

}
.btn-close:focus{
  box-shadow: 0 0 0 .25rem rgba(14, 118, 127, .25) !important;
}

/*===================================================
    ESTILOS DEL HEADER 
=====================================================*/
header{

	/*background: rgba(255, 255, 255, 0.14);*/
  background: var(--main-bgcolor);

	border-bottom: 2px solid #d1d1d1;
  z-index: 99;
	width: 100%;
	height: 100px;
	overflow: hidden;
	z-index: 999;
	position: fixed;
	-webkit-transition: .4s ease-in;
	transition: .6s ease-in;
	display: -ms-flexbox;
	display: -webkit-box;
  display: flex;
	   -ms-flex-align: center;
	   -webkit-box-align:center;
	   -webkit-transition:.6s ease-in;
}

.d-flex{

	margin: 0;
}

header .list-menu .list li .item-menu{

	display: inline-block;
	position: relative;
	-webkit-transition: .6s ease-in;
	transition: .6s ease-in;
}

header .list-menu .list li .item-menu:after {
  content: '';
  position: absolute;
  width: 100%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #f9f9f9;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, 
  -webkit-transform 0.25s ease-out;
}

header .list-menu .list li .item-menu:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}


.list-menu .list li a{

	text-transform: uppercase;
}



/*======================================================*/




/*===================================================
    ESTILOS DEL HEADER MOVIL
=====================================================*/

header .menu-bar-movil{

	width: 100%;
	position: fixed;
	z-index: 99999 !important;
	top:0;
	display: none;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align:center;
	align-items:center;
	min-height: 5.875rem;

}


header .menu-bar-movil .logo-menu-movil {
  width: 6rem;
}

header .menu-bar-movil .burger-menu {
  cursor: pointer;
  font-size: 2.1875rem;
  color: #f9f9f9;
  -webkit-transition: .6s ease-in;
  transition: .6s ease-in;
}

header .menu-bar-movil .slideMenu {
  position: fixed;
  height: 100%;
  top: 0;
  left: -80%;
  background: #f9f9f9;
  text-align: left;
  width: 80%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

header .menu-bar-movil .slideMenu.active {
  left: 0;
}

header .menu-bar-movil .slideMenu .top-redes {
  margin-bottom: 0.625rem;
}

header .menu-bar-movil .slideMenu .top-redes a {
  padding: 0 0.5625rem;
}

header .menu-bar-movil .slideMenu .menu-principal a {
  display: block;
  padding: 0.625rem 1rem;
}

header .menu-bar-movil .slideMenu .menu-principal a:hover {
  background: #fff;
}














.carousel-bg {
  height: 100vh !important;
}

.carousel-bg:nth-child(1) {
  background-image: url(../img/banner-1.jpg);
  background-size: cover;
  background-position: center center;
}

.carousel-bg:nth-child(1)::after {
  content: "";
  /*background: #121212;*/
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
}

.carousel-bg:nth-child(2) {
  background-image: url(../img/banner-2.jpg);
  background-size: cover;
  background-position: center center;
}

.carousel-bg:nth-child(2)::after {
  content: "";
  /*background: #121212;*/
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
}

.carousel-bg:nth-child(3) {
  background-image: url(../img/banner-3.jpg);
  background-size: cover;
  background-position: center center;
}

.carousel-bg:nth-child(3)::after {
  content: "";
  /*background: #121212;*/
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
}

.carousel-bg:nth-child(4) {
  background-image: url(../img/banner-4.jpg);
  background-size: cover;
  background-position: center center;
}

.carousel-bg:nth-child(4)::after {
  content: "";
  /*background: #121212;*/
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
}

.carousel-bg:nth-child(5) {
  background-image: url(../img/banner-6.jpg);
  background-size: cover;
  background-position: center center;
}

.carousel-bg:nth-child(5)::after {
  content: "";
  /*background: #121212;*/
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
}

.text-banner {

  z-index: 99 !important;

}

.text-titulo-base{

  color: var(--text-white);
  text-align: center;
  line-height: 35px;

}

.text-titulo-base-dos{

  color: var(--text-main);
  text-align: center;
  line-height: 35px;

}

.text-banner h1{
  font-family: 'CaviarBold', sans-serif;
  font-weight: bold;
}

main {

  overflow: hidden;

}

main .icon {

  width: 50px;

}


/*==============================================
	MOSTRAR MENU PARA MOBIL
================================================*/

@-webkit-keyframes aparecer {

  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes aparecer {

  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }

  100% {

    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  
}

.ocultar {
  opacity: 0;
}

.animar {

  -webkit-animation: aparecer 1.3s;
          animation: aparecer 1.3s;
}

.slide-item img{

  width: 8%;
  border-radius: 100%;


}

.about h1{

  color: var(--text-white);
  font-family: 'CaviarBold', sans-serif;
}

.about h2{
  color: var(--text-white);
  text-transform: uppercase;
  font-family: 'CaviarBold', sans-serif;
}

.about p{
   color: var(--text-white);
   font-size: 1.3rem;
   text-align: justify;
   padding: 20px;

}


.porque-gci{
  display: flex;
    flex-direction: column;
    justify-content: center;

}



.list-type-opt{

  list-style-type: disc;
}

.porque-gci h3{

  font-family: 'CaviarBold', sans-serif;
  color: var(--text-main);
}

.porque-gci ul li{
/*  list-style: none;
  text-decoration: none;*/
  color: var(--text-secondary);
  padding: 5px 0px;
  font-family: 'Caviar', sans-serif;
  font-weight: 700;
  

}


/*=============================================================
     SECCION DE SERVIICIOS
===============================================================*/

.opciones-servicios {

  background-color: #efefef;
}
.opciones-servicios h1{

  font-weight: bold;

}
.step-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.step-number {
  background-color: #dce9dc;
  color: #333;
  font-weight: bold;
  font-size: 28px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  margin-right: 15px;
}
.step-content h3 {
  font-weight: bold;
}


.step-content p {
  font-size: 1.5rem;
  padding: 3px 0px;
}

.nuestros-productos{

}

.nuestros-productos h1{

  font-family: 'CaviarBold', sans-serif;
  color: var(--text-white);
  width: 60px;
  height: 60px;
  background-color: var(--main-bgcolor);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  margin: 0 auto;



}
.nuestros-productos h2{

  font-family: 'CaviarBold', sans-serif;
  color: var(--text-main);

}

.nuestros-productos h4{

   font-family: 'CaviarBold', sans-serif;
   color: var(--text-secondary);

}

.nuestros-productos p{

  padding: 20px;
  font-size: 16px;
  color: var(--text-main-secondary);
  background-color: #dce9dc;
  height: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .55s ease-out;
}

.nuestros-productos p:hover{

  color: var(--text-white);
  cursor: pointer;
  background-color: var(--main-bgcolor);

}

/*=============================================================
     SECCION DE TESTIMONIOS
===============================================================*/

.testimonios{

  background-color: var(--secondary-bgcolor);
}





/*=============================================================
     SECCION DE REDES SOCIALES Y CONTACTO
===============================================================*/
.btnContacto button{
  
  width: 200px;
  margin: 10px 0;

}

.redes-sociales ul{
  padding: 0;
  margin: 20px 0px;
}

.redes-sociales ul li{

  list-style: none;
  text-decoration: none;

}

.redes-sociales ul li a{

  margin: 15px 15px;
  color: var(--main-bgcolor);


}

.redes-sociales ul li a:hover{

   color: var(--secondary-bgcolor);


}

.redes-sociales ul li i{
  font-size: 3.5rem;
}








@media (max-width: 600px)  {


	.text-sm-center {
		text-align: center;
	}
	.icon-sm-center {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.navbar {
		display: none !important;
	}
	.bar-menu {
		display: none !important;
	}

	.menu-bar-movil {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
	}

	.bg-silueta {
		height: 600px !important;
	}


	.btn-contacto-menu {
		visibility: hidden !important;
	}



/*	.redes-sociales {
		visibility: hidden !important;
	}
*/
	header{
		position: fixed;
	}

	.carousel-bg {
		height: 100vh !important;
	}

	.justify-content-center-sm {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-webkit-box-align: center !important;
		-ms-flex-align: center !important;
		align-items: center !important;
		-webkit-box-orient: vertical !important;
		-webkit-box-direction: normal !important;
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}

	.justify-content-center-sm p {
		text-align: center;
	}

	.flex-column-reverse-sm {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}




  /*==========================================
     SECCION DE CONTACTOS MOBIL
  ============================================*/
  .contacto h1{
    
    font-weight: bold;
    
  }

  .contacto h2{
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
  }

  .contacto p{
    font-size: 1.3rem;
    padding: 20px;
    text-align: center !important;
  }

  .btnContacto button{

    width: 350px;
    padding: 15px 0;
    margin: 20px;

  }



  .redes-sociales ul li a {
      margin: 15px 15px;
      color: var(--main-bgcolor);
  }



}








footer {
  background: #efefef;
}



.menu-footer ul {
  margin: 0 5rem;
  text-transform:uppercase;
  line-height: 30px;
}

.menu-footer ul li a{
  color: var(--text-main);
  font-weight: bold;
}

.menu-footer ul li a:hover{
  color: var(--text-secondary);

}


.menu-contacto ul{
  margin-left: 3rem;
}

.menu-contacto ul li a{
  color: var(--text-main);
  text-decoration: none;
  list-style: none;
}

.menu-contacto ul li a:hover{
  color: var(--text-secondary);

}


.up-a {
    bottom: 1rem;
    cursor: pointer;
    right: 1rem;
    background: var(--secondary-bgcolor);
    color: #fff;
    height: 40px;
    text-align: center;
    font-size: 30px;
    line-height: 35px;
    position: fixed;
    width: 40px;
    z-index: 99999;
    transition: all 800ms ease;
}

.up-a a {
    color: #fff;
}

.up-a span {
    font-size: 2rem;
}