@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Inter:wght@300;700&family=Raleway:wght@300;400;700&display=swap');


html{
    scroll-behavior: smooth;
}

h1{
    font-family: 'Inter', sans-serif;
}
h2{ 
    font-family: 'DM Sans', sans-serif;
}
p{
    font-family: 'Raleway', sans-serif;
}
h3, h4, h5, h6{
    font-family: 'DM Sans', sans-serif;
}

.font-secondary{
    font-family: 'DM Sans', sans-serif;
}

.color-primary{
    color: #E0004D;
}
.bgcolor-primary{
    background-color: #E0004D;
}
.color-secondary{
    color: #373A36;
}
.color-set1{
    color: #EAEAEA;
}
.color-set2{
    color: #DBB4AD;
}
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


li.nav-item {
    margin: 0 15px;
}

.btn-cta{
    background-color: #373A36;
    margin: 12px auto;
    display: inline-block;
    padding: 8px 32px;
    color: #ffffff;
    border: transparent
}
.btn-cta:hover{
    background-color: transparent; 
    color:  #373A36;
    border: 1px solid #373A36;
    text-decoration: none;
}
.btn-enviar{
    background-color:#ffffff;
    margin: 12px auto;
    display: inline-block;
    padding: 8px 32px;
    color:  #373A36; 
    border: none;
}
.btn-enviar:hover{
    background-color:#373A36;
    margin: 12px auto;
    color:  #ffffff; 
    text-decoration: none;
}
.rotate-center {
	-webkit-animation: rotate-center 60000ms linear infinite both;
	        animation: rotate-center 60000ms linear infinite both;
}
.scale-down-center {
	-webkit-animation: scale-down-center 10000ms cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate-reverse both;
	        animation: scale-down-center 10000ms cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate-reverse both;
}
.slide-left {
	-webkit-animation: slide-left 8000ms ease-in-out 2ms both;
	        animation: slide-left 8000ms ease-in-out 2ms both;
}
#header_page{
    padding-top: 24px;
    height: 70vh;
    background: rgb(221,0,59);
    background: -moz-linear-gradient(130deg, rgba(221,0,59,1) 0%, rgba(55,58,54,1) 100%);
    background: -webkit-linear-gradient(130deg, rgba(221,0,59,1) 0%, rgba(55,58,54,1) 100%);
    background: linear-gradient(130deg, rgba(221,0,59,1) 0%, rgba(55,58,54,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dd003b",endColorstr="#373a36",GradientType=1);
}
.navbar{
    z-index: 9;
}

.logo__kairos{
    width: 245px;
}

h1.title{
    font-size: 30px;
    font-weight: 700;
    width: 90vh;
    margin: 0 auto;
    text-align: center;
}
h2.subtitle{
    width: 30%;
    height: 60px;
    font-weight: 700;
    border-bottom: solid 1px #E5E5E5;
}
p.content-text{
    font-size: 14px;
    letter-spacing: 0.4px;
    font-family: 'DM Sans', sans-serif;
}
.huella{
    position: fixed;
    right: 0;
    top: 0;
}
.huella-left{
    position: fixed;
    left: 0;
    bottom: 0;
}
.huella-left img{
    width: 450px;
}
.box-card{
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 270px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(184,184,184,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(184,184,184,1);
    box-shadow: 0px 0px 10px 0px rgba(184,184,184,1);
}
.box-card-body{
    font-size: 14px;
}

#servicios{
    background: rgb(194,194,194);
background: -moz-linear-gradient(60deg, rgba(194,194,194,1) 0%, rgba(229,229,229,1) 100%);
background: -webkit-linear-gradient(60deg, rgba(194,194,194,1) 0%, rgba(229,229,229,1) 100%);
background: linear-gradient(60deg, rgba(194,194,194,1) 0%, rgba(229,229,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c2c2c2",endColorstr="#e5e5e5",GradientType=1);
}

#clientes img{
    width: 150px;
}

.box-servicios{
    background-color: #373A36;
    border-radius: 7px;
    height: 320px;
    z-index: 1;
    position: inherit;
}

footer{
    background-color: #E0004D;
}

.form-control{
    background: transparent;
    color: #ffffff;
}
/* Animate parallax */
.your-element { 
    border-radius: 7px;
    width: fit-content;
    height: fit-content;
  }