/*
Theme Name: Procom
Author: Procom
Description: A powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. <a href="https://bootscore.me/category/documentation/" target="_blank">Documentation</a>. This theme gives you full control whatever you do and the full freedom to design whatever you want. It comes with a wide selection of category, page, post, author and archive templates as well as sidebar, header, footer and 404 widgets. There are no customizer settings in the backend. All settings can only be made by touching the code. Some CSS, HTML, PHP and JS Skills are required to customize it.
Version: 5.3.4
Requires at least: 5.0
Tested up to: 6.4.1
Requires PHP: 7.4
License: MIT License
License URI: https://github.com/bootscore/bootscore/blob/main/LICENSE
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready

Use this theme to make something cool, have fun, and share what you've learned with others.

Procom is based on Underscores https://underscores.me/, (C) 2012-2022 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* 
All style editing is done via scss/_bscore_custom.scss
*/



:root{
    --container: 1320px;
    --black: #111111;
    --blue: #658CEC;
    --aqua: #71B9AA;
    --red: #EB5C54;

    --gray: #f7f6f3;
    --gray2: #eef2f9;

    --scale-factor: 1;
    --px14: calc(0.875rem * var(--scale-factor));
    --px16: calc(1rem * var(--scale-factor));
    --px18: calc(1.125rem * var(--scale-factor));
    --px20: calc(1.25rem * var(--scale-factor));
    --px22: calc(1.375rem * var(--scale-factor));
    --px24: calc(1.5rem * var(--scale-factor));
    --px26: calc(1.625rem * var(--scale-factor));
    --px28: calc(1.75rem * var(--scale-factor));
    --px30: calc(1.875rem * var(--scale-factor));
    --px32: calc(2rem * var(--scale-factor));
    --px34: calc(2.125rem * var(--scale-factor));
    --px36: calc(2.25rem * var(--scale-factor));
    --px38: calc(2.375rem * var(--scale-factor));
    --px40: calc(2.5rem * var(--scale-factor));
    --px45: calc(2.8125rem * var(--scale-factor));
    --px50: calc(3.125rem * var(--scale-factor));

}



html, body {
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body{
    color: var(--black);
    font-family: "Lato", sans-serif;
    font-size: var(--px18)
}

b, strong{
    font-weight: bold
}

.que {
    font-family: "Questrial", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lat{
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.lati {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: italic;
}



.bg-black{
    background-color: var(--black)
}

.bg-gray{
    background-color: var(--gray)
}
.bg-blue{
    background-color: var(--blue)
}
.bg-aqua{
    background-color: var(--aqua)
}
.text-aqua{
    color: var(--aqua)
}
.text-red{
    color: #eb5c54
}


.text-black{
    color: var(--black)!important
}

.text-blue{
    color: var(--blue)
}



a{
    text-decoration: none;
    color: var(--black)
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: var(--px14);
}
.fs-16 {
    font-size: var(--px16);
}
.fs-18 {
    font-size: var(--px18);
}
.fs-20 {
    font-size: var(--px20);
}
.fs-22 {
    font-size: var(--px22);
}
.fs-24 {
    font-size: var(--px24);
}
.fs-26 {
    font-size: var(--px26);
}
.fs-28 {
    font-size: var(--px28);
}
.fs-30 {
    font-size: var(--px30);
}
.fs-32 {
    font-size: var(--px32);
}
.fs-34 {
    font-size: var(--px34);
}
.fs-36 {
    font-size: var(--px36);
}
.fs-38 {
    font-size: var(--px38);
}
.fs-40 {
    font-size: var(--px40);
}
.fs-45 {
    font-size: var(--px45);
}
.fs-50 {
    font-size: var(--px50);
}


.bl{
    border-left: 1px solid #000
}
.br{
    border-right: 1px solid #000
}
.bt{
    border-top: 1px solid #000
}
.bb{
    border-bottom: 1px solid #000
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .woocommerce .card .woocommerce-loop-product__title, h6, .h6 {
    font-weight: bold;
    font-family: 'Lato', sans-serif
}

.line2{
    line-height: 1.75
}

.title-color strong{
    font-weight: bold;
    color: var(--blue)
}
.title-aqua strong{
    font-weight: bold;
    color: var(--aqua)
}
.title-red strong{
    font-weight: bold;
    color: var(--red)
}

.img-full{
    height: 100%;
    width: 100%;
}

.img-full img{
    height: 100%!important;
    width: 100%;
    object-fit: cover
}


.the-custom-logo{
    margin-bottom: 0.75rem
}


#bootscore-navbar li a{
    color: var(--black);
    text-transform: uppercase;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: all .15s linear;
}


#bootscore-navbar > li:last-child a{
    padding-right: 0
}


.wpml-ls-legacy-list-horizontal{
    padding: 7px 0
}

.wpml-ls-legacy-list-horizontal>ul>li:last-child a{
    padding-right: 0
}


#bootscore-navbar li a:hover,
#bootscore-navbar li.current-menu-item a,
ul li a:hover{
    color: var(--blue)
}


.offcanvas-body{
    flex-direction: column
}

#nav-main{
    transition: all .15s linear;
    --bs-navbar-padding-y: 0.519rem;
}

#nav-main > .container{
    align-items: end;
    position: relative;
    transition: all .15s linear;
}

.to-fixed #nav-main{
    padding-bottom: 0
}

.to-fixed #nav-main > .container{
    align-items: center
}


#nav-main > .container:after {
    position: absolute;
    content: "";
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    height: 1px;
    background-color: var(--blue);
    margin-top: -20px;
    bottom: 0;
    z-index: -1;
    display: none
}

.to-fixed #nav-main > .container:after {
    display: block
}


.wpml-ls-legacy-list-horizontal a{
    font-size: 14px;
    font-family: "Lato", sans-serif;
    font-weight: 600
}

.the-custom-logo img{
    width: 300px;
    transition: all .15s linear;
}

.top-nav{
    margin-bottom: 10px;
    transition: all .15s linear;
}

.bg-gray2{
    background-color: #faf9f6
}

.to-fixed .top-nav{
    margin-bottom: 0
}


.to-fixed #bootscore-navbar li a{
    padding-top: 0;
    padding-bottom: 0.5rem;
    font-size: var(--px16)
}
.cat-pro .btn{
    font-weight: 400;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: var(--px14)
}

.title-contact strong{
    padding-bottom: 1rem;
    padding-right: 0.5rem;
    background-color: #fff;
}

.title-contact:after{
    position: absolute;
    content: "";
    left: 0;
    bottom: -6px;
    height: 1px;
    width: 100%;
    background-color: var(--blue);
    z-index: -1
}

.top-button{
    background-color: var(--blue);
    border-color: var(--blue);
}

.img-border{
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--blue)
}


#content{
    margin-top: 115px
}


.footer-address{
    display: flex;
    flex-wrap: wrap;
    justify-content: end
}

.footer-address li {
    padding: 0 1rem;
    border-left: 1px solid #000;
    line-height: 1;
}

.footer-address li:first-child{
    border-left: 0
}

.footer-menu > div{
    width: 100%
}


.footer-menu ul{
    display: flex
}

.footer-menu ul li{
    flex-grow: 1;
    text-align: center
}

.footer-menu ul li a{
    padding-left: 1rem;
    padding-right: 1rem;
}
.footer-menu ul li:first-child a{
    padding-left: 0rem;
}

.cont-footer .bb, .cont-footer .bt{
    border-color: var(--blue)
}

.caption-banner{
    margin-left: calc(((100vw - var(--container)) / 2) + 0.75rem);
    padding-right: 3rem
}


.img-border-red img{
    object-fit: cover;
    max-width: none;
    width: calc(((100vw - var(--container)) / 2) + (var(--container) * 0.67) - 1rem);
}

.box-home-serv:after{
    position: absolute;
    content: "";
    width: 100vw;
    height: calc(100% - 12rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--gray);
    z-index: -1
}


.serv1{
    width: 80%;
}

.serv2{
    width: 40%;
    position: absolute!important;
    bottom: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 1001
}

.serv2:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.3);
    z-index: -1
}

.btn{
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 0;
}

.btn-white{
    border: 0;
    box-shadow: 1px 2px 3px 1px rgba(0,0,0,.3)
}

.row-home-projects > div{
    flex: 0 0 auto
}

.row-home-projects .col-5{
    width: 45%;
}
.row-home-projects .col-2{
    width: 10%;
}

.w-100 > a > img,
.w-100 > img{
    width: 100%
}

.img-border-pink{
    border: 1px solid #fce0f2
}

.center{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

center > * {
    flex: 0 0 auto;
    width: 100%;
}

.text-invert:not(.wp-block) {
    transform: rotate(-90deg);
    transform-origin: left top;
    white-space: nowrap;
    width: calc(100% + 3rem);
    position: absolute!important;
    top: 100%;
    left: calc(100% + 0.75rem);
    font-size: 70px;
    text-align: center;
    margin-bottom: 0
}


.text-contact{
    width: calc(100% - 0.75rem);
    left: calc(100%);
    font-size: 70px;
    height: 16.66666667vw;
    display: flex;
    align-items: center;
    justify-content: center
}

.text-contact a{
    padding: 1.5rem 0 1.5rem 1.5rem;
    background-image: url(img/next.svg);
    background-repeat: no-repeat;
    background-size: calc(16.6667vw - 1rem);
    background-position: left;
    background-size: 20px;
}


.text-service:not(.wp-block){
    left: calc(50% - 2rem);
    line-height: 1;
    top: 50%;
        transform: rotate(-90deg) translateX(-50%);
    width: auto;
}


.text-partners:not(.wp-block) {
    top: 0;
    left: 4rem;
    /* transform: translateY(10px); */
    transform: rotate(-90deg) translateX(-100%);
    width: auto;
}

.box-proyecto .fa-solid{
    font-size: 24px
}

.box-img:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 1rem;
    left: 1rem;
    background-color: var(--blue);
    opacity: 0.25
}

.img-equipo{
    display: flex;
    justify-content: end;
}

.img-equipo img{
    width: 200%;
    max-width: 200%;
    flex-shrink: 0;
    z-index: 1001
}


.img-equipo:after{
    position: absolute;
    content: "";
    left: calc(-100% - 1.25rem);
    top: -1.25rem;
    width: 100%;
    height: calc(100% + 2.5rem);
    background-color: rgba(255,255,255,.3);
}

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

.img-50{
    display: flex;
    justify-content: end;
}

.img-50 img{
    width: 50vw;
    max-width: none;
    flex-shrink: 0
}

.servicios > div:nth-child(2n) .img-50{
    justify-content: start
}

.desc{
    position: relative;
}

.desc > div{
    padding-left: 3rem;
}

.desc:after {
    position: absolute;
    content: "";
    left: calc(-.5 * var(--bs-gutter-x));
    width: calc( 50vw + (var(--bs-gutter-x) / 2) );
    height: 100%;
    background-color: var(--gray);
    z-index: -1;
    top: 0;
    left: 0;
    width: 50vw;
}


.servicios > div:nth-child(2n) .desc:after{
    background-color: var(--gray2);
    left: auto;
    right: calc(-1 * (var(--bs-gutter-x)) / 2 );
    right: 0
}


.servicios > div:nth-child(2n) .desc > div{
    padding-right: 3rem;
    padding-left: 0
}


ul li.current-menu-item a{
    color: var(--blue)!important
}

.row-proyecto{
    align-items: initial!important
}

.row-proyecto .col-7 figure img,
.row-proyecto .col-7 figure{
    height: 100%!important;
    object-fit: cover
}



.box-proyecto {
    display: flex;
    justify-content: end;
    margin-bottom: 0;
    align-items: end;
    height: 100%;
}


.box-proyecto > div > * {

    z-index: 1001;
}
.box-proyecto > div{
    z-index: 1001;
    width: 150%;
    flex-shrink: 0;
    background-color: #fff;
    margin-bottom: 5rem;
    margin-top: 5rem;
}

.box-equipo > div{
    width: 180%;
    margin: 0
}

.box-equipo > div img{
    width: 100%
}

.img-border-red img{
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--red);
}

.box-proyecto >div:after {
    position: absolute;
    content: "";
    left: -1.25rem;
    top: -1.25rem;
    width: 50%;
    height: calc(100% + 2.5rem);
    background-color: rgba(255,255,255,.3);
}

.proyectos > .row > div:nth-child(2n){
    border-left: 1px solid #000
}

.home-proyectos > .row > div{
    border: 0!important
}


.proyectos .text-invert {
    background-color: #fff;
    width: calc(100% + 3.75rem);
    left: calc(100% + 0.25rem);
}



.box-contacto:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -2rem;
    top: 2rem;
    background-color: #98aedc;
    z-index: -1
}



input[type=checkbox], input[type=radio] {
    position: relative;
    border: 2px solid #000;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .4em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    opacity: .5;
    border-radius: 10px
}

input[type=radio]{
    border-radius: 0;
    border: 1px solid #000;
    height: 16px;
    width: 16px;
}

input[type=checkbox]:hover, input[type=radio] {
    opacity: 1;
}

input[type=checkbox]:checked, input[type=radio]:checked {
    background-color: #fff;
    opacity: 1;
}


input[type=checkbox]:checked:before, input[type=radio]:checked:before {
    content: '';
}

input[type=checkbox]:before, input[type=radio]:before  {
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.wpcf7-not-valid-tip{
    font-size: 12px
}


.wpcf7 label{
    display: block
}

.wpcf7 select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"]{
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--black);
    border-radius: 0;
    background-color: transparent
}

.wpcf7 textarea{
    width: 100%;
    border: 0;
    border: 1px solid var(--black);
    border-radius: 0;
    max-height: 120px;
    background-color: transparent
}

.wpcf7-list-item-label{
    font-size: 11px
}

.text-privacy{
    font-size: 10px;
    text-align: justify
}

.wpcf7-list-item{
    display: block;
    margin: 0;
    line-height: 1
}

.wpcf7-form .row{
    align-items: center
}

.wpcf7-form .row p{
    margin-bottom: 0
}

.wpcf7 select{
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0
}

.wpcf7 select,
.wpcf7 textarea::placeholder,
.wpcf7 input::placeholder{
    color: var(--black);
    font-size: 15px;
    font-family: 'ave', sans-serif;
    text-transform: uppercase;
    font-weight: 300
}


.wpcf7-spinner{
    position: absolute;
    right: 5px;
    top: 7px
}

.cont-btn{
    text-align: right
}

.cont-btn p{
    position: relative
}

.wpcf7-submit {
    border-radius: 0;
    border: 1px solid #000;
    background-color: transparent;
    color: var(--black);
    position: relative;
    padding: 4px 4rem;
    max-width: 100%;
    min-width: auto;
    font-family: 'ave',sans-serif;
    text-transform: uppercase;
}

.fs-13 {
    font-size: 13px
}

.top-button, .header-actions .btn{
    padding-left: 1rem;
    padding-right: 1rem;
}

a:hover{
    color: var(--blue)
}

a:hover img{
    opacity: 0.82
}


a.custom-logo-link:hover img{
    opacity: 1
}

.proyectos .row{
    --bs-gutter-x: 6rem
}

.text-invert{
    z-index: 1001
}

.project-pagintation > div{
    padding-right: 5px;
}

.project-pagintation > div:last-child{
    padding-right: 0;
    padding-left: 5px
}


.pagination {

    --bs-pagination-color: var(--black);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #000;
    --bs-pagination-border-radius: 0;
    --bs-pagination-hover-color: var(--red);
    --bs-pagination-hover-bg: #fff;
    --bs-pagination-hover-border-color: #000;
    --bs-pagination-focus-color: var(--red);
    --bs-pagination-focus-bg: #fff;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--black);
    --bs-pagination-active-bg: #fff;
    --bs-pagination-active-border-color: #000;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #000;
}

.cont-pagination{
    display: flex;
    justify-content: end;
    position: relative;
}

.cont-pagination:after{
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    z-index: -1
}

.pagination{
    justify-content: start !important;
    padding-left: 1rem;
    background-color: #fff
}

.pagination .page-link{
    border-color: transparent;
    font-weight: 500
}

.pagination .page-link:after{
    position: absolute;
    content: "";
    right: 0;
    height: 16px;
    width: 1px;
    background-color: #000;
    top: 50%;
    transform: translateY(-50%);
}

.pagination > li:last-child .page-link:after{
    display: none
}

.wpml-ls-current-language a{
    color: var(--blue)
}


@media (min-width: 768px){
    :root {
        --container: 720px;
    }

    .servicios > div:nth-child(2n) .desc{
        order: -1;
    }
}
@media (min-width: 992px){
    :root {
        --container: 960px;
    }

    #bootscore-navbar li a{
        position: relative
    }

    #bootscore-navbar li a:after{
        position: absolute;
        content: "/";
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        transition: all .15s linear
    }

    #bootscore-navbar >li:last-child a:after{
        display: none
    }

    .to-fixed #bootscore-navbar li a:after{
        top: 0;
        transform: translateY(0);
    }


}

@media (min-width: 1200px){
    :root {
        --container: 1140px;
    }
}

@media (min-width: 1440px){
    :root {
        --container: 1320px;
    }


}


@media screen and (max-width: 1399px) {
    .footer-menu ul li a {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        text-align: center;
    }
}
@media screen and (max-width: 1199px) {
    :root {
        --scale-factor: 0.9
    }

    .row-xl > div{
        flex: 0 0 auto;
        width: 100%
    }

    .footer-address{
        justify-content: center
    }



}


@media (max-width: 991px){


    .the-custom-logo{
        margin-bottom: 0
    }

    .offcanvas-body{
        display: flex;
    }

    .box-proyecto > div{
        width: 100%;
        margin-bottom: 0;
        margin-top: 0
    }


    .top-nav{
        order:6;
        margin-top: auto;
        margin-right: auto;
    }

    .offcanvas-header{
        background-color: var(--blue);
        color: #fff;
    }

    .offcanvas-header .btn-close{
        opacity: 1;
        filter: invert(1)
    }

    .to-fixed #bootscore-navbar li a {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: var(--px18);
    }


    .row-lg > div{
        flex: 0 0 auto;
        width: 100%
    }

    .order-lg{
        order: -1
    }

    .text-invert{
        font-size: 50px
    }


    .text-service{
        font-size: 50px!important
    }

    .proyectos .row{
        --bs-gutter-x: 4rem
    }
    .proyectos .text-invert {
        width: calc(100% + 2rem);
        left: calc(100% + 0.125rem);
    }

    .row-bottom-footer {
        justify-content: center;
        --bs-gutter-x: 3rem
    }

    .row-bottom-footer > div{
        border-left: 0
    }

    .row-bottom-footer > div:first-child{
        width: 100%
    }

    .footer-address{
        row-gap: 1rem
    }

    .footer-address > li:last-child{
        width: 100%;
        border: 0;
        text-align: center
    }

    #nav-main > .container{
        align-items: center;
        border: 0
    }

    #nav-main{
        --bs-navbar-padding-y: 0.49rem;
    }
    .to-fixed #nav-main{
        padding-bottom: 0.49rem;
        border-bottom: 1px solid var(--blue)
    }

    #nav-main > .container:after{
        display: none
    }

    .to-fixed #nav-main > .container:after{
        display: none
    }


    .the-custom-logo{
        padding: 1.007rem 0
    }

    #content{
        margin-top: 76px
    }

}
@media (max-width: 767px){


    .text-partners:not(.wp-block) {
        left: 0
    }

    .wpcf7-form .row{
        --bs-gutter-y: 1.5rem
    }
    .cont-btn {
        text-align: center;
    }

    .servicios .img-50 img{
        width: 100%
    }

    .proyectos > .row > div:nth-child(2n) {
        border-left: 0
    }

    .img-equipo:not(.wp-block){
        display: none
    }

    .order-md{
        order: -1
    }

    .row-bottom-footer > div{
        width: 100%;
        text-align: center;
        border: 0
    }

    .footer-address li{
        width: 100%;
        text-align: center;
        border: 0
    }

    .caption-banner{
        margin-left: 0;
        padding-right: 0;
        padding-left: 1.5rem
    }

    .box-proyecto{
        margin-bottom: 0
    }
    .box-proyecto > div{
        width: 100%;
        padding-left: 0!important;
        padding-bottom: 0!important
    }

    .row-home-projects{
        --bs-gutter-y: 1.5rem
    }


    .box-servicio .row{
        --bs-gutter-y: 1.5rem
    }

    .box-servicio:nth-child(odd) .row > div:last-child {
        order: -1
    }

    .box-servicio .col{
        border: 0
    }

    .box-servicio .row > div,
    .row-proyecto > div,
    .row-home-projects > div,
    .row-md > div{
        flex: 0 0 auto;
        width: 100%
    }

    .text-partners:not(.wp-block),
    .proyectos .text-invert{
        position: relative!important;
        width: auto;
        transform: none;
        left: 0;
        right: 0;
        margin-bottom: 1rem;
        text-align: left
    }

    .text-partners:not(.wp-block){
        margin-bottom: 1rem!important;
        top: 0
    }

    .text-contact{
        font-size: 40px
    }
    .text-contact a{
        background-size: 16px
    }

}
@media (max-width: 575px){
    .row-sm > div{
        flex: 0 0 auto;
        width: 100%
    }

    .text-invert {
        font-size: var(--px40)
    }

    .text-contact {
        font-size: 30px;
    }

    .text-contact a{
        background-size: 14px
    }

    .serv2{
        padding: 1rem
    }


}
@media (max-width: 480px){

    .the-custom-logo img{
        width: 250px
    }

    .text-contact {
        font-size: 26px;
    }

    .text-contact a{
        background-size: 10px;
        padding-left: 1rem
    }
}