/*backgrpunds*/
.bg-color-principal{
    background-color: var(--color-principal);
}
.bg-color-white{
    background-color: var(--color-white);
}
.bg-color-transpart{
    background-color: transparent;
}

section#servicios-home .black-bg-2 {
    background-image: url(./assets/img/pm-servicios-bg-modern-polygonal-surface-rendering.png);
    background-color: transparent;
    padding-top: 50px;
}
section#home-latest-projects .black-bg-3{
    background-image: url(./assets/img/pm-bg-projects.webp);
    background-color: transparent;
    background-size: 100% 100%;
    padding-bottom:100px;
}
/*color fuente*/

.color-principal{
    color:var(--color-principal)
}
.color-white{
    color: var(--color-white);
}
.color-grey{
    color: var(--color-grey-text);
}
/*fuentes*/
.fs-38px{
    font-size: 38px;
}
.fs-20px{
    font-size: 20px;
}
.fw-medium{
    font-weight: 500;
}
.fw-light{
    font-weight: 300;
}
.fw-bold{
    font-weight: 700;
}
/*border*/
.border-solid-1px{
    border: solid 1px var(--color-white);
}
/*Brand Home*/
#brand-home .tp-brand-item img {
    opacity: 1;
}
/*services*/
.servicios-count{
    font-size: 22px; 
    line-height: 36px;
}

/*header*/
.tp-header-area.tp-header-mob-space.tp-header-transparent.p-relative {
    background: #fff;
}


header .align-items-center {
    align-items: center !important;
    align-content: center;
    
}
.tp-header-4__area.tp-header-transparent.tp-header-4__mob-ptb.tp-header-4__plr.header {
    background: white;
   
}
.tp-header-4__area.tp-header-transparent.tp-header-4__mob-ptb.tp-header-4__plr.header a{
   color: var(--color-grey-text)
   
}
.lang-menu ul {
    list-style-type: none; /* Elimina los bullets */
    padding: 0; /* Elimina el padding predeterminado */
    margin: 0; /* Elimina el margin predeterminado */
    display: flex; /* Usa Flexbox para poner los elementos uno al lado del otro */
    justify-content: center; /* Centra los elementos horizontalmente */
}

.lang-menu li {
    margin-right: 10px; /* Espacio entre los elementos */
}

.lang-menu li:last-child {
    margin-right: 0; /* Elimina el margen del último elemento */
}

.lang-menu a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

.lang-menu img {
    width: 36px !important; /* Ancho de las banderas */
    height: 36px !important; /* Altura de las banderas */
    border-radius: 50%; /* Hace las banderas circulares */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor circular */
    vertical-align: middle; /* Alinea las imágenes con el texto */
    border: 1px solid #ddd; /* Añade un borde opcional para definición */
}
/**/
.tp-portfolio-view-btn-3 span {
   
    width: 180px;
    height: 180px;
    border-radius: 100px;
    background: #707070;
    padding-top: 60px;
    line-height: 26px;   
}
.tp-header-4__area.tp-header-sticky-cloned::before {
    background: #fff;
    backdrop-filter: blur(14px);
}
.tp-header-4__area.tp-header-sticky-cloned a {
    color: var(--color-grey-text);
    font-family: "Exo 2", Sans-serif !important;
}
.current_page_item a {
    border-bottom: 3px solid var(--color-principal);
    padding-bottom: 5px !important;
}
.contact-inner__subtitle::after{
    height: 0;
}
.tp-header-3__bar button {
    color: var(--color-principal);    
}
.tp-main-menu-mobile.menu-hover-active.counter-row * {
    font-family: "Exo 2", Sans-serif;
}


.tp-hero-social-wrapper {
    position: absolute;
    bottom: 100px;
    right: 40px;
    z-index: 99;
}
.tp-hero-scroll-bar {

    height: 200px;
    top: -50px;
}
.tp-offcanvas-right.d-none.d-md-block{
    background-image: url(./assets/img/pm-about-bg-mobile.webp) !important;
    background-size: cover;
}
.tp-offcanvas-bg.is-left {
    background-color: var(--color-principal)
}

.tp-offcanvas-close-btn {
    color: var(--color-grey-text)
}
.menu-hover-active > nav > ul > li > a {
    color: rgb(112 112 112 / 60%);
}
.tp-offcanvas-close-btn:hover {
    color:  rgb(112 112 112 / 60%);
}
.back-to-top-wrapper.back-to-top-btn-show {

    bottom: 100px;
}

.back-to-top-wrapper {
   right: 32px;
}
@media (max-width: 1200px) {
    
    .tp-offcanvas-left
    {
        background-color: var(--color-white);    
    }
    .menu-hover-active > nav > ul > li.active > a {
        color: var(--color-grey-text);
    }
    
    
}