
:root{
    --titleColor: #333333;
    --textColor: #808080; 
}

/* *******************************
    CSS Global */
#landing .smallTitle{
    font-size: 18px;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 0;
}
#landing .titleSection{
    font-size: 40px;
    line-height: 50px;
    white-space: pre-line;
    margin-bottom: 20px;
    color: var(--titleColor);
    font-weight: 600;
}
.bg-gray{
    background: #f1f1f1;
}

/* *******************************
    Header */
.header nav.navbar{
    padding: 1.5rem 1rem;
}
.header .logoHeader{
    width: 200px;
    height: auto;
}
.header .menu li a{
    font-size: 16px;
}
.header .custom-nav.affix ul li a{
    color: var(--textColor);
    font-size: 16px;
}

/* *******************************
    Slide Home | Section */

#slideHome .smallTitle{
    font-size: 18px;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 0;
}
#slideHome .titleSlide{
    font-size: 40px;
    line-height: 50px;
    white-space: pre-line;
    margin-bottom: 20px;
    color: var(--titleColor);
    font-weight: 600;
}
#slideHome .textSlide{
    font-size: 20px;
    color: var(--textColor);
    line-height: 30px;
    margin-bottom: 0;
    font-weight: 500;
}

/* *******************************
    Google Partner | Section */

#google{
    position: relative;
    padding: 40px 0;
}
#google .flexBox{
    display: flex;
    align-items: center;
    justify-content: center;
}
#google .flexBox .titleSection{
    font-size: 40px;
    margin-bottom: 0;
    margin-right: 15px;
}
#google .flexBox img{
    width: 130px;
    height: auto;
}
#google .analysis-form-input input{
    border-radius: 70px;
}
#google input[type]::-webkit-input-placeholder{
    color: var(--textColor);
}
#google .btn-cta{
    font-size: 16px;
    display: inline-block;
    font-weight: 500;
    background: #e80566;
    color: #fff;
    padding: 14px 37px;
    border-radius: 50px;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border: none;
    position: relative;
    z-index: 2;
    margin-left: 0px;
    width: 155px;
    line-height: normal;
}
#google .btn-cta:hover i{
    transform: translateX(10px);
    transition: .5s ease-in-out;
}
#google .btn-cta i{
    margin-left: 3px;
    font-size: 12px;
    transition: .5s ease-in-out;
}
#google .img-left{
    position: absolute;
    top: 10%;
    left: 5%;
}
#google .img-right{
    position: absolute;
    bottom: 10%;
    right: 5%;
}

/* *******************************
    How we do | Section */

#como-lo-hacemos .textStep{
    line-height: 25px;
    font-size: 17px;
    color: var(--textColor);
    font-weight: 500;
}

/* *******************************
    Campaign | Section */

#campañas .feature-tabs li{
    width: 440px;
    position: relative;
}
#campañas .feature-tabs li .nav-link.active{
    background-color: #f5f5f5;
}
#campañas .feature-tabs li .nav-link.active:after{
    content: "";
    border-top: 15px solid #f5f5f5;
    border-bottom: 15px solid #f5f5f5;
    border-left: 15px solid #f5f5f5;
    border-right: 15px solid #f5f5f5;
    display: inline-grid;
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
    bottom: -25px;
    transform: rotate(45deg) translateX(-50%);
    z-index: -1;
    margin: 0;
}
#campañas .iconTab{
    display: block;
    text-align: center;
    width: 50px;
    margin: 0 auto 15px;
}
#campañas .titleTab{
    font-size: 20px;
}
#campañas .boxTitle{
    font-size: 30px;
    line-height: 35px;
    color: var(--titleColor);
    font-weight: 700;
    margin-bottom: 20px;
}
#campañas .boxText{
    font-size: 18px;
    line-height: 25px;
    color: var(--textColor);
    font-weight: 400;
    margin-bottom: 0px;
}

/* *******************************
    Call to action 2 | Section */

#callToAction2{
    padding: 40px 0;
    position: relative;
}
#callToAction2 .boxText .text{
    color: #fff;
    line-height: 25px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}
#callToAction2 .boxText .text.strongT{
    font-size: 20px;
    font-weight: 600;
}
#callToAction2 .img-left{
    position: absolute;
    top: 10%;
    left: 5%;
}
#callToAction2 .img-right{
    position: absolute;
    bottom: 10%;
    right: 5%;
}

/* *******************************
    Plans | Section */
#paquete{
    position: relative;
}
#paquete .textDescription{
    color: var(--textColor);
    font-size: 19px;
    font-weight: 500;
    line-height: 23px;
    white-space: pre-line;
}
#paquete .card-header .price{
    line-height: 50px;
    padding: 0 30px;
}
#paquete .card-header .price span{
    line-height: 20px;
    display: block;
}
#paquete .pricing-feature-list li{
    color: var(--textColor);
    line-height: 23px;
    margin-bottom: 10px;
    font-size: 16px;
}
#paquete .pricing-feature-list li span{
    color: var(--textColor);
    font-size: 16px;
}
#paquete .card-body .disclaimer{
    color: var(--titleColor);
    font-weight: 700;
    font-size: 14px;
}


/* *******************************
    Call to action 3 | Section */

#callToAction3{
    padding: 40px 0;
    position: relative;
}
#callToAction3 .boxText .text{
    color: #fff;
    line-height: 25px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}
#callToAction3 .boxText .text.strongT{
    font-size: 20px;
    font-weight: 600;
}
#callToAction3 .img-left{
    position: absolute;
    top: 10%;
    left: 5%;
}
#callToAction3 .img-right{
    position: absolute;
    bottom: 10%;
    right: 5%;
}


/* *******************************
    Call to action 3 | Section */
#testimonios{
    padding: 90px 0 70px;
}
#testimonios .textDescription{
    color: var(--textColor);
    font-size: 19px;
    font-weight: 500;
    line-height: 23px;
    white-space: pre-line;
}
#testimonios .author-info .media-body{
    left: 0;
}
#testimonios .clients{
    margin: 120px 0 0 0;
}

/* *******************************
    Contacto | Section */

#contacto .card.single-promo-card{
    margin: 15px 0;
}
#contacto .form-contact input[type]::-webkit-input-placeholder{
    color: var(--textColor);
}
#contacto .contact-us-content .iconContact{
    font-size: 23px;
}
#contacto .contact-us-content .titleContact{
    columns: var(--titleColor);
    font-weight: 700;
}
#contacto .contact-us-content .linkContact a{
    color: var(--textColor);
    font-weight: 500;
}

