@charset "UTF-8";
@import url(../global.css);


/* Generic               */
/* --------------------- */
body {
    font-size: 0.912rem;
    color: var(--color--white-secondary);
    font-family: var(--font-family--work-sans);
}


.pr-4 {
    padding-right: 6rem;
}

.title__section {
    font-size: 1.875rem;
    font-weight: 700;
    font-family: var(--font-family--open-sans);
    color: var(--color--white-primary);
    margin-bottom: 1.25rem;
}


/* Buttons               */
/* --------------------- */

.btn--primary-menu {
    padding: 0.638rem 1.125rem;
    font-size: 0.673rem;
    background-color: var(--color--primary);
}

.btn--rrss {
    background-color: var(--color--secondary);
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    text-decoration: none;
}

.btn--rrss .fa-brands {
    color: var(--color--white-primary);
    font-size: 1.25rem;
}

.btn--rrss:hover {
    background-color: var(--color--third);
    text-decoration: none;
}

.link--read-more,
.link--read-more--secondary {
    text-decoration: none;
    color: var(--color--white-secondary);
    font-size: 0.798rem;
    letter-spacing: 0.125rem;
    line-height: 0.875rem;
    margin-top: 1.25rem;
}

.link--read-more:hover {
    color: var(--color--secondary);
}

.link--read-more--secondary:hover {
    color: var(--color--white-primary);
}



/* Hero                  */
/* --------------------- */
.hero__bg {
    background-image: url("../../img/hero/hero--desktop.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 60% 50%;
    height: 100vh;
    /* max-height: 1000px; */
}

.hero__deco {
    background-color: transparent;
    background-image: linear-gradient(180deg, #0707074D 70%, #1d2650 100%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.hero__title {
    font-family: var(--font-family--open-sans);
    font-size: 2.25rem;
    font-weight: 700;
    max-width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
    /* mix-blend-mode: exclusion; */
    color: var(--color--white-primary);
}

.hero__title--secondary {
    font-family: var(--font-family--open-sans);
    text-transform: uppercase;
    font-size: 0.798rem;
    letter-spacing: 0.125rem;
    /* mix-blend-mode: exclusion; */
    color: var(--color--white-primary);
}

.hero__info {
    height: 95vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: 9rem;
}



/* About                 */
/* --------------------- */
.about__img {
    width: 100%;
    max-width: 450px;
    height: auto!important;
}



/* Services              */
/* --------------------- */
.services__box {
    padding: 3rem 2.5rem;
    width: 100%;
    margin-bottom: 0.313rem;
}

.services__icon {
    font-size: 1.875rem;
    margin-bottom: 0.313rem;
    color: var(--color--white-primary);
}

.services__title {
    font-size: 1.688rem;
    font-family: var(--font-family--open-sans);
    line-height: 2.844rem;
    font-weight: 700;
    color: var(--color--white-primary);
}

.services__number {
    color: var(--color--white-primary);
    font-size: 0.798rem;
    letter-spacing: 0.125rem;
    font-family: var(--font-family--open-sans);
    margin-bottom: 3.125rem;
    display: block;
    font-weight: 600;
}

.services__text {
    min-height: 11rem;
    margin-bottom: 3.125rem;
}



/* Spec                  */
/* --------------------- */

.spec__border--primary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.spec__border--secondary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.spec__detail {
    color: var(--color--white-primary);
    font-size: 3.125rem;
    font-weight: 600;
    line-height: 1;
}

.spec__title {
    color: var(--color--white-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.125rem;
    font-weight: 400;
}

.spec__detail-simbol {
    font-size: 3.125rem;
    font-weight: 500;
}



/* Clients               */
/* --------------------- */
.clients__title {
    font-size: 1.125rem;
    font-family: var(--font-family--open-sans);
    font-weight: 700;
    line-height: 1.35rem;
    color: var(--color--white-primary);
}



/* Blog                  */
/* --------------------- */
.blog__box {
    min-height: 300px;  
}

.blog__bg--1 {
    background-image: url(../../img/blog/B2B_Dar-la-mano.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog__bg--2 {
    background-image: url(../../img/blog/dashboard_cwv.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog__bg--3 {
    background-image: url(../../img/blog/ab-testing.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog__wrapper {
    padding: 2.188rem;
    background-color: rgba(79, 79, 88, 0.5); /*#4b4f58*/
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.blog__link-article {
    text-decoration: none;
}

.blog__wrapper:hover {
    background-color: rgba(79, 79, 88, 0.7); /*#4b4f58*/
}

.blog__title {
    color: var(--color--white-primary);
    font-family: var(--font-family--open-sans);
    font-size: 1.563rem;
    line-height: 1.2em;
    font-weight: 700;
}

.blog__category-article {
    color: var(--color--white-secondary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.125rem;
    font-weight: 500;
    font-family: var(--font-family--open-sans);
}

.title__next-project {
    font-size: 2.188rem;
    margin-bottom: 2.5rem;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-family--open-sans);
    line-height: 2.844rem;
}






/* Media Queries          */
/* ---------------------- */
@media only screen and (min-width: 576px) {
    /* Generic               */
    /* --------------------- */
    body {
        font-size: 1rem;
    }

    /* Services              */
    /* --------------------- */
    .services__number {
        margin-bottom: 2rem;
    }

    .services__text {
        min-height: 5rem;
    }
}

@media only screen and (min-width: 768px) { 
    /* Services              */
    /* --------------------- */
    .services__box {
        width: 100%;
    }

    .hero__title {
        font-size: 3.75rem;
    }
    
    .hero__title--secondary {
        font-size: 0.798rem;
    }

    .spec__border--primary {
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        border-bottom: none;
    }
    
    .spec__border--secondary {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: none;
    }
 
}

@media only screen and (min-width: 992px){ 
    .services__box {
        width: 50%;
    }
}

@media only screen and (min-width: 1200px) {
    /* Hero                  */
    /* --------------------- */
    .hero__bg {
        height: 90vh;
    }

    .hero__title {
        font-size: 5.25rem;
        max-width: 90%;
    }
    
    .hero__title--secondary {
        font-size: 0.875rem;
    }


    /* Services              */
    /* --------------------- */
    .title__section {
        font-size: 2.8125rem;
    }

    .services__text {
        min-height: 11rem;
    }

    .services__box {
        width: 30%;
    }

    /* Blog                  */
    /* --------------------- */
    .blog__box {
        min-height: 500px;  
    }

    /* Contact               */
    /* --------------------- */
    .contact__bg {
        background-position: -55% 86px;
    }

    .contact__title {
        font-size: 2.813rem;
    }

    .pr-md-4 {
        padding-right: 5rem;
    }

}

@media only screen and (min-width: 1400px) { 
    .hero__bg {
        height: 100vh;
    }

    .link--read-more,
    .link--read-more--secondary {
        font-size: 0.875rem;
    }

    .hero__title {
        max-width: 80%;
    }

    .services__title {
        font-size: 2.1rem;
    }

    .btn--rrss {
        font-size: 1.25rem;
    }

    /* Contact               */
    /* --------------------- */
    .contact__bg {
        background-position: 300px 50px;
    }

}


@media only screen and (min-width: 1900px) { 
    .hero__bg {
        height: 1000px;
    }

    .hero__info {
        height: 80vh;
    }
}



.img-platform {
    height: 1.75rem;
    margin-bottom: 1.5rem;
}