:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --orange : #fe492a;
    --black : #201D1D;
    --white : #FFF;
    --white2 :#f5f1ed; 
    --red : #DC4848;
    --transparent : transparent;
    --font-family: 'Helvetica Neue', sans-serif;
    --font-size-base: 16px;
    --gray: #7A879D;
    --gray-opacity: rgba(122, 135, 157, 0.1);
    --blue: #26283D;
    --blue2: #26283d;    
    --fondoform: #f5f1ed;
    --bgcasos :#fbf9f8;
    --green : #7BCC35;
}

@font-face {
    font-family: 'Poppins';
    src: url('../static/fonts/Poppins/Poppins-Regular.woff2') format('woff2'),
         url('../static/fonts/Poppins/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../static/fonts/Poppins/Poppins-Bold.woff2') format('woff2'),
         url('../static/fonts/Poppins/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../static/fonts/Poppins/Poppins-SemiBold.woff2') format('woff2'),
         url('../static/fonts/Poppins/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../static/fonts/Quicksand/Quicksand-Bold.woff2') format('woff2'),
         url('../static/fonts/Quicksand/Quicksand-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../static/fonts/Quicksand/Quicksand-Light.woff2') format('woff2'),
         url('../static/fonts/Quicksand/Quicksand-Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('../static/fonts/Quicksand/Quicksand-Regular.woff2') format('woff2'),
         url('../static/fonts/Quicksand/Quicksand-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1 {
    font-family: 'Poppins', 'san-serif';
    font-weight: bold;
}

p {
    font-weight: 100;
}

/* Style for the body element */
body {
    margin: 0; /* Remove default margin */
    font-family: 'Poppins', sans-serif;
    line-height: 1.6; /* Line height for readability */
    background-color: var(--white); /* Light background color */
    color: #333; /* Dark text color */
    min-height: 100vh; /* Ensure the body covers the full viewport height */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Column layout */
}

  

/* Style for the header element */
header {
    padding: 0px 4%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 4px 0px #979595;

}

/* Style for the a elements */
header nav ul li a {
    color: var(--black);
}


header.home-header {
    background-color: var(--transparent);
    backdrop-filter: inherit;
    box-shadow: none;
}

header.menuscroll {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
}

/* Style for the a elements */
header.home-header nav ul li a {
    color: var(--white);
}

.ocultar {
    display: none;
}

/*header.home-header {
    background-color: var(--transparent);
}*/

/* Style for the nav element */
nav {
    max-width: 1800px; /* Maximum width for the nav */
/*    margin: 0 auto; /* Center align nav */
    padding: 0 20px; /* Horizontal padding */
    display: flex;
        justify-content: flex-start;
/*    width: 75%;*/
flex-grow: 1;
    width: 913px;

}

/* Style for the ul element */
nav ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the list items horizontally */
    align-items: center;
    width: 100%;
}
.logo {
/*    width: 25%;*/
width: 175px;
    flex-grow: 1;
}

/* Style for the li elements */
nav ul li {
    margin: 0 12px; /* Horizontal margin between list items */
}
nav > ul > li:last-child {
    margin: 0;
    margin-left: auto;
}

nav > ul li a {    
    color: var(--black);
    text-decoration: none; /* Remove underline from links */
    font-size: 16px; /* Font size for links */
    transition: color 0.3s ease; /* Smooth transition for color changes */
    padding: 28px 0px;
    display: block;
}

/* Hover effect for the links */
nav ul li a:hover, header.home-header nav ul li a:hover, nav ul li.active >  a {
    color: var(--orange); /* Change text color on hover */
}

footer {
    background: var(--blue2);
    border-radius: 30px 30px 0% 0%;
    color: var(--white);    
    position: relative;
    bottom: 0;
    width: 100%;
    padding-top: 7%;
}

.titform p {
    margin: -10px 0 13px;
    font-size: 1.3rem;
}
.titformmobile {
    display: none;
}

/* Ensure main content area grows to fill available space */
main {
    flex: 1; /* Allow the main content to grow and fill available space */
}

/* Style for the content area */
.content {
    max-width: 1200px; /* Maximum width for the content area */
    margin: 0 auto; /* Center align content */
    padding: 20px; /* Padding around the content */
    background-color: var(--white); /* White background color for content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 8px; /* Rounded corners */
}

/* Add this to your CSS file (e.g., myapp/static/css/styles.css) */

/* Style for featured section */
.featured {
    margin-bottom: 30px;
}

.service {
    margin-bottom: 20px;
}

.service h3 {
    margin-top: 0;
}

/* Style for latest news section */
.latest-news {
    margin-bottom: 30px;
}

.latest-news article {
    margin-bottom: 20px;
}

.latest-news h3 {
    margin-top: 0;
}

.latest-news a {
    color: #007bff;
    text-decoration: none;
}

.latest-news a:hover {
    text-decoration: underline;
}
.pagewrap {
    max-width: 1200px; /* Establece el ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

section {
    padding-top: 50px; /* Usa padding en lugar de margen */
    padding-bottom: 50px;
}

/* Home */
.servicescontainer, .servgroup1, .servgroup2 {
    position: relative; /* Necesario para el posicionamiento absoluto del texto */
    display: flex;
}

.servicescontainer {
    flex-direction: column;
}

.servsingle {
    background-position: center;
    height: 330px;
    background-repeat: no-repeat;
    width: 200px;
    position: relative;
    color: white;    
}

.servhorizontal {
    height: 250px;
    width:  400px;
}

.servvertical{
    height: 330px;
    width: 200px;
}

.relatedpost .text-overlay, .listblog .text-overlay {
    position: absolute;
    bottom: 0%;
    left: 0px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    background: rgba(37, 39, 54, 0.6);
    padding: 0px 10px;
    min-height: 80px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 94%;
    color: var(--white);
}
.listblog .text-overlay {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 98%;
    font-size: 17px;
}

.text-overlay {
        position: absolute;
    bottom: -2%;
    left: 17px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    padding: 10px;
    border-radius: 5px;
    color: var(--white);
}


.columns {
    display: flex;
}
.fcenter {
    align-items: center;
}

.m5left {
    margin-left: 5%;
}

.fend {
    align-items: flex-end;
}

.sinfo {
    background: var(--black);
    border-radius: 20px;
    color: var(--white);
    padding: 25px;
}

/*menu*/

.has-submenu > a::after {  
    content: "+";   
    font-size: 1em;
    margin-left: 10px;
    font-weight: bold;
    color: var(--orange);  
}

.submenu {
    padding: 8px 9px;
    list-style-type: none;
    margin: 0;
    background-color: var(--blue);
    position: absolute;
    top: 100%;
    display: none;
    z-index: 1000;
    margin-left: -17px;
    width: auto;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); 
    border-radius: 20px;

}



.submenu li {
    border-bottom: 1px solid #45465a;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.submenu li a {
    padding: 5px 10px;
    color: white;
}

.submenu li::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;  /* Ancho del icono */
        height: 18px; /* Altura del icono */
        background-size: contain;
        background-repeat: no-repeat;        
}

.submenu > li.itemEstrategia::after {
    background-image: url('../static/images/ico-estrategia.svg');
        margin-top: 3px;
}

.submenu > li.itemTecnología::after {
    background-image: url('../static/images/ico-tecnologia.svg');
}

.submenu > li.itemMartech::after {
    background-image: url('../static/images/ico-martech.svg');
}

.submenu > li.itemPerformance::after {
    background-image: url('../static/images/ico-performance.svg');
        margin-top: 3px;
}

.submenu > li.itemSeo::after {
    background-image: url('../static/images/ico-seo.svg');
}

.submenu > li.itemCasos::after {
    background-image: url('../static/images/icono-casoos-exito.svg');
}
.submenu > li.itemNuestros.Proyectos::after {
    background-image: url('../static/images/icono-nuestros-proyectos.svg');
    top: 50%;
}
.menuprinc li:hover .submenu {
    display: block;
}
.btn-orange a{
    background: var(--orange);
    color: var(--white);
    padding: 6px 21px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
}


/*fin menu*/

/*sección servicios home*/
.contimgservice {
    position: relative;
    cursor: pointer;
}
.contimgservice i, .relatedpost i{
    position: absolute;
    right: 16px;
    top: 16px;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 6px;
    color: var(--white);
    text-decoration: none;
}

.relatedpost a {
    position: relative;
    display: inline-flex;
    height: -webkit-fill-available;
    width: 100%;
}

.servgroup1row2 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 45px;
    row-gap: 31px;
}
.servgroup1 {
    column-gap: 43px;
}

.callproducts {
    margin-bottom: 50px;
}
@media (min-width: 1315px) and (max-width: 1450px) {
    .menuprinc li {
        margin: 0 7px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1314px) {
    .menuprinc li {
        margin: 0 5px !important;

    }

    .logo {
        width: 115px;
    }

    header:not(.home-header) .logo img {
        max-width: 100%;
    }
}

@media (min-width: 1123px) and (max-width: 1199px) {

    header {
        padding: 0px 2%
    }
    .menuprinc li {
        margin: 0 5px !important;        
    }

    .menuprinc li a{
        font-size: 15px;
    }

     .logo {
        width: 120px;
    }

    header:not(.home-header) .logo img {
        max-width: 100%;
    }
}



/* Estilo para los breadcrumbs */
.navbreadcrumb {
    width: 100%;
    max-width: 100%;
    /* margin: 0px auto; */
    justify-content: center;
    padding: 0px;
}
.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb-item {
    margin-right: 8px;
    font-size: 14px;
    color: #555;
}

.breadcrumb-item.active{
    color: var(--orange);
}

.breadcrumb-item a {    
    color: var(--black);    
}

.breadcrumb-item a:hover {    
    color: var(--orange); /* Color al pasar el mouse por encima */
}

.breadcrumb-item::after {
    content: '>';
    margin-left: 8px;
    color: #555;
}

.breadcrumb-item:last-child::after {
    content: ''; /* El último elemento no tiene ">" */
}

.text-overlay h5{
    font-weight: 100;
    margin-left: 20px;
    margin-top: 10px;
}
.servgroup1row2-2 {
    display: flex;
    align-items: flex-end;
}

.servgroup1row2-2 h4 {
    font-weight: 100;
    font-size: 23px;
    margin: 0;
}

.servgroup1row2-2 p {
    font-weight: 600 !important;
    font-size: 35px;
    width: 264px;
    margin: 0;

    line-height: 40px;
}
.servgroup1row2-3 {
    background: var(--black);
    border-radius: 20px;
    color: var(--white);
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.servgroup1row2-3 > p {
    border-left: 1px solid var(--white);
        margin: 0;
    margin-left: 17px;
    padding-left: 25px;
}

.servgroup2row1.contimgservice {
    width: 328px;
    height: 424px;
    overflow: hidden;
    border-radius: 29px;
}

.servgroup2.fcenter {
    display: flex;
    column-gap: 42px;
    padding: 0 7%;
    margin-top: -16px;
}

.servgroup2 > div  .imgservice {
    width: 100%;
}

.bloggroup1-1  a {
    width: 100%;
}

.servgroup2row1.contimgservice img {
    object-fit: cover;
    height: 100%;
    object-position: center;
}

.servgroup2row1 a {
    width: 100%;
}
/*fin sección servicios home*/

.pagewrap2 {
    max-width: 1000px;
    margin: 0 auto;
}

h1 {
    font-size: 5rem;
    margin-bottom: 0;
    
}

#singleproject .bannerdefault h3 {
    margin-top: 20px;
}

#singleproject h1 {
    display: inline !important;
    margin-bottom: 30px;

}

#servicesingle h1, #singleproject h1 {
    background: var(--blue);
    color: var(--white);
    display: inline-block;    
    padding: 0 5px;
    margin-bottom: 10px;
    line-height: 1.3;
    margin-top: auto;
    font-size: 4.5rem;
}

.tit {
    margin-bottom: 0;
}

h2 {
    font-size: 3rem;
}

.containertit {
    width: 80%;
    margin: 0px auto;
}

h3 {
    font-size: 24px;
    margin-top: 0;
}

.titform h1{
    text-align: left;
    margin-top: 0;
}

.bannerdefault {
    display: flex;
    justify-content: center;        
    align-items: center;
    z-index: 2;
    position: relative;
}

.bannerdefault .col1 {
    width: 34%;            
    text-align: center;
}

.discovermore{
    letter-spacing: 2px;
    background: var(--orange);
    padding: 8px 40px;
    display: inline-block;    
    border-radius: 30px;
    color: var(--white);
    text-decoration: none;
    font-weight: 400;
    font-size: 18px;
}

.bannerdefault .col1 {
    position: relative;
    z-index: 2;
}

.bannerdefault .col2{    
    width: 60%;
    padding-left: 50px;
    z-index: 2;
}

.bannerdefault h3 {
    margin-left: 2px;
    font-weight: 200;    
    margin-right: 40px;  
    font-size: 22px;  
}

.bannerdefault h3 p{
    margin-top: 0;

}
.w100 {
    width: 100%;
    }
    
.max100{
    max-width: 100%;
}
 /* Services */
.phraseservices * {
    margin-top: 30px;
    text-align: center;
    font-size: 22px;
    font-weight: normal;
}

.phraseservices strong {
    font-weight: bold;
}
.service-elements {
    display: flex;
    flex-direction: column; /* Coloca los elementos en columnas */
    gap: 20px; /* Espacio entre los elementos */
    align-items: center;
    margin-top: 50px;
}

.element {
    display: flex;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: center; /* Centra horizontalmente el contenido */
    max-width: 700px;
    margin-bottom: 40px;
}

/* Estilo para las filas impares */
.element:nth-child(odd) {
    flex-direction: row; /* Econ primero, luego imagen */
}

/* Estilo para las filas pares */
.element:nth-child(even),  .products-elements a:nth-child(even) .element {
    flex-direction: row-reverse; /* Imagen primero, luego econ */
}

.element:nth-child(even) .eimg, .products-elements a:nth-child(even) .element .eimg{
    margin-right: 0;
    margin-left: 30px;
}

.element:nth-child(even) .econ *,  .products-elements a:nth-child(even) .econ *{
    text-align: right;
    float: right;
}

.eimg {
    flex: 0 0 27%; /* Ancho de la imagen (ajustable) */
    display: flex; /* Flex para centrar la imagen */    
    margin-right: 30px; /* Espacio a la derecha de la imagen */
}

/* Ajustar el tamaño de la imagen si es necesario */
.eimg img {
    max-width: 100%; /* Asegurarse de que la imagen no sobrepase su contenedor */
    height: auto; /* Mantener la proporción de la imagen */
}

.phraseservices {    
    font-size: 100;
    max-width: 745px;
    margin: 0px auto;
}

.cinitial {
    margin-top: 115px;
}

.cinitial2 {
    padding-top: 20px;
}
/* blog */
.post-item {
    display: grid;
    grid-template-columns: 50% 50%; 
    gap: 20px;
    align-items: start;    
    position: relative;
    margin-bottom: 5rem;
}

.btnviewmore {
    background: var(--black);
    color: #FFF;
    border-radius: 38px;
    padding: 10px 30px;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    position: relative;
}

/*.btnviewmore::after {
    content: "+";                  
    position: absolute;            
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;                                       
    background-color: #28a745;     
    color: #FFF;                   
    border-radius: 50%;            
    display: flex;                 
    align-items: center;           
    justify-content: center;       
    font-size: 18px;               
    font-weight: bold;             
}
*/
.arrow-up-right {
    filter: brightness(0) saturate(100%) invert(100%);
    width: 25px !important;
    height: 25px !important;
    cursor: pointer;
}
.contimgservice i:hover, .relatedpost i:hover {
    background: var(--black);
}

.contimgservice a {
    position: relative;
    display: inline-flex;
    height: -webkit-fill-available;
    width: 100%;
}

.btnviewmore:hover {
    background: var(--orange);
}
.btn-orange a:hover  {
    background: var(--black);
    color: var(--white) !important;
}
.discovermore:hover {
    background: var(--black);
}
.btnviewmore .btn-icon {
    position: absolute;
    right: -28px; /* Ajusta según el espacio necesario para el icono */
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #28a745;
    color: #FFF; /* Color del texto si es necesario */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

.post-summary {
    margin-right: 20%;
}

.post-title {
    font-size: 1.2rem;
    line-height: 22px;
}

.btnlanding {
    display: none;
}

.tip .post-title {
    display: none;
}

.post-date {
    color: var(--orange);
    font-weight: bold;
}
.post-details {
    grid-column: 1 / 2;
    background-color: var(--gray-opacity);    
    position: relative;
    padding: 20px 15px 50px;
    border-radius: 30px;        
}

.post-details::after {
    content: ""; /* Cambia el contenido a vacío */
    position: absolute;
    right: -17px;
    top: -23px;
    width: 42px;
    height: 42px;
    background-image: url('../static/images/ico-articulo.svg'); /* Reemplaza con la ruta a tu SVG */
    background-size: contain; /* Asegúrate de que el SVG se ajuste al tamaño */
    background-repeat: no-repeat;
}



.mtop0 {
    margin-top: 0;
}

.post-image {
    grid-column: 2 / 3;
    position: relative;
    margin-left: -20%;
    margin-top: 20%;
    z-index: 2;
}

.post-image img {

    display: block;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    max-width: 500px;
    min-height: 300px;
    object-fit: cover;
}

/* Single post */
.titlepost {
    line-height: 2.5rem;
    font-size: 2.5rem;
    margin: 2% 0 70px;
}
.imagepostcontainer {
    position: relative; 
}
.imagepost {
    object-fit: cover;
    width: 100%;
    max-height: 400px;
    border-radius: 20px;
}

.imagepostcontainer::before,
.imagepostcontainer::after {
    content: ""; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    border-radius: 10px; 
    background-color: var(--blue); 
}

.imagepostcontainer::before {
    top: -18px; 
    left: -27px;
}

.imagepostcontainer::after {
    bottom: -15px;
    right: -25px; 
}

#relatedposts {
    display: flex;     
    flex-wrap: wrap;       
    gap: 20px;         
}

.relatedpost {
    flex: 0 1 calc(33.3% - 20px); 
    position: relative;           
    box-sizing: border-box;  
    height: 204px;
    margin: 30px 0 50px;
}

h1.h1noservicedesktop {
    margin-top: -30px;
}

.relatedpost img {
  width: 100%;
  object-fit: cover;
  height: 100%;
  border-radius: 20px;
}

.date-overlay {
  position: absolute;
}

.datepost {
  color: var(--white);
  margin-left: 30px;
  margin-top: 15px;
}
.bgbanner{
    position: absolute;
    z-index: 1;
}

.bgbanner.martech, .bgbanner.hablemos {
    top: 0;
    left: -118%;    
}

.bgbanner.tecnologia{
    top: -8%;
    left: -56%;
}

.bgbanner.blog{
    top: -6%;
    left: -56%;
}

.bgbanner.performance, .bgbanner.trabaja-con-nosotros {
    left: -39%;
    width: 70%;
}
.bgbanner.seo {
    top: -12%;
    /* left: -80%; */
    width: 188%;
    right: -15%;
}
.bgbannermobile {
    display: none;
}

.txtcenter {
    text-align: center;
}

/*Jobs */
.jobs-container {
    display: flex;
    flex-wrap: wrap;  
    margin: 30px 0;  
    flex-direction: column;
}

.jobssection{
    margin-bottom: 50px;
}

.job-item {
    flex: 1 0 100%;
    box-sizing: border-box;
    flex-direction: column;   
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.job-item .job-header {
    margin: 8px;
    padding: 13px;
    border: 2px solid black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-radius: 15px;
}

.job-details {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    padding-top: 0;
    text-align: left;
}


.job-details h2 {
    margin: 10px 0;
}
.job-item.active .job-details {
    height: auto;
    padding-top: 10px;
}

.job-item:hover > .job-header {    
    background: var(--black);
    color: var(--white);
    border-color: transparent;
}

.job-item:hover > .job-header h4{
    color: var(--white);
} 


.applynow {
    
}
.job-item h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--black); 
    margin-right: 20px;   
}

.titlejob {
    line-height: 2.5rem;
    font-size: 2.5rem;
}
.contentjob {
    margin-top: 40px;
}
.contentjob h3{
    margin-bottom: 10px;
}
/*sección presencia paises home*/
.contpresence {
    background: #26283d;
    border-radius: 25px;
    display: flex;
    align-items: center;
}
.imgpresence {
    background-image: url(../static/images/fondo-mapa-telefonos.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    margin: -26px 0px;
    height: 400px;
}

.imgpresence img {
    max-width: 294px;
    width: 100%;
    margin: 35px 9px 43px 16px;
    transform: rotate(-90deg);
}
.contpresence p, .contpresence div {
        width: 344px;
}

.contpresence p {
    color: var(--white);
    font-size: 2.2rem;
    padding: 0 35px;
    font-family: 'Quicksand';
    font-weight: 600;
}

.contpresence p span {
    color: var(--green);
}

.presencecountry ul {
    color: var(--white);
    list-style: none;
    column-count: 2;
    line-height: 54px;
    font-weight: 100;
}

.presencecountry > ul > li.selectedc {
    font-weight: 900;
    font-size: 21px;
}

.listblog {
    display: flex;
    align-items: center;
    column-gap: 28px;
}

.bloggroup1-2 {
    display: flex;
    justify-content: space-between;
    column-gap: 25px;
}

.listblog img {
    width: 100%;
}

.bloggroup1-1 img {
    max-height: 250px;
    object-fit: cover;
    object-position: center;
}

.bloggroup1-1 {
    border-radius: 35px;
    position: relative;
    overflow: hidden;
    padding: 0!important;
}

.bloggroup2 .imgblog {
    min-height: 450px;
/*    width: 920px;*/
    object-fit: cover;
    object-position: center;
}
.bloggroup1 {
    width: 70%;
    padding-left: 70px;
}
.bloggroup1-2 > div {
    height: 300px;
    flex-grow: 1;
    width: 50%;
    border-radius: 16px;
    overflow: hidden;

}
.bloggroup1-2 .imgblog {
    object-fit: cover;
    height: 100%;
}
.bloggroup2 {
    width: 30%;
    border-radius: 23px;
    overflow: hidden;
}
section#sectionblogs {
    background: #201d1d;
    border-radius: 2% 2% 0% 0%;
    padding-top: 142px;
    padding-bottom: 135px;
    margin-bottom: -35px;
    /*background-image: url(../static/images/fondo-lineas-seo.png);*/
    background-repeat: no-repeat;
    background-position: left;
    position: relative;
    overflow: hidden;
}


section#sectionblogs::before {
       content: '';
    position: absolute;
    top: 19%;
    left: 0;
    width: 135%;
    height: 447px;
    background-image: url(../static/images/fondo-lineas-seo.png);
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    background-repeat: repeat-x;
    z-index: 1;
}

#sectionblogs div {
    z-index: 2;
}

/*fin presencia*/
.blogdescrip {
    background: var(--orange);
    padding: 8px 21px;
    display: flex;
    align-items: center;
    margin: 22px 0 22px -70px;
    border-radius: 24px;
    gap: 29px;
}

.blogdescrip div {
    display: flex;
    gap: 24px;
    align-content: flex-end;
    max-width: 465px;
    color: var(--white);
    border-left: 1px solid;
    padding-left: 33px;
}

.blogdescrip div a {
    display: flex;
    font-size: 0;
}

.blogdescrip div a img {
    width: 46px;
}

.blogdescrip h2 {
    color: var(--white);
    font-family: 'Quicksand';
    font-weight: 800;
    font-size: 36px;
}
.fechablog {
    position: absolute;
    top: 12px;
    left: 36px;
    color: var(--white);
    font-weight: 600;
}
.formcontact {
    display: flex;
    column-gap: 61px;
    margin-bottom: 121px;

}

.arrow-container {
    display: flex;
    justify-content: space-between;
    width: 100%;        
    z-index: auto;
    padding: 0;
    align-items: center;
    margin-top: 10px;
}

.arrow {
     background-color: #dfdfdf;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;   
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

#packs .arrow {
    background-color: var(--blue);
}
.arrow:hover {
    background-color: var(--orange);   
    color: var(--white); 
}

.arrow:hover  svg g{
    fill: var(--white);
}

.arrow img {
    width: 10px; /* Ajusta el tamaño según lo necesites */
    height: auto; /* Mantiene la relación de aspecto */
}

#casosexito .arrow:hover {
    background-color: var(--blue);
}


.formulariocont {
    flex-grow: 1;
    width: 50%;
}

.ubicaciones {
    display: flex;
    flex-direction: column;
    row-gap: 20px; 
    width: 50%;   
}

.formulariocont h1 {    
    font-family: 'Quicksand';
    font-size: 103px;    
    margin: 0;
    line-height: normal;
}

.titform h4 {
    font-weight: 100;
    margin: 0;
    text-align: left;
    font-size: 1.3rem;
}


.formulariocont form {
/*    background: var(--orange);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 49px 118px;
/*    border-radius: 31px;*/
}
.formulariocont .boxform {
    background: var(--fondoform);
    border-radius: 31px;
    padding: 11% 8% 6% 6%;
    position: relative;
}
input::placeholder,
textarea::placeholder {
    color: var(--white);
}
.paisbox img {
    width: 30px;
    height: 30px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 15px 0px;
    border: none;
    border-bottom: 1px solid var(--white);
    background: transparent;
    color: var(--white);
    box-sizing: border-box;
    box-shadow: none;
    padding-top: 33px;
}

button {
    background-color: #007bff;
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}


.paisbox h2 {
    text-align: left;
    display: flex;
    align-items: flex-start;
    column-gap: 12px;
    margin: 0;
    font-size: 18px;
}

.paisbox span {
    display: block;
    text-align: left;
    font-size: 14px;
    margin-top: 5px;
}

.paisbox {
    border-bottom: 1px solid #E5E5EB;
        padding: 15px 0;
}
.formulariocont form div {
    margin-top: 44px;
}
.detailfooter {
    border-top: 1px solid #E5E5EB;
    padding: 24px 0px;
    display: flex;
    justify-content: space-between;
}
.infoformfoot {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-top: 36px;
}

.infoformfoot p {
    border-left: 1px solid var(--white);
    padding: 9px 19px;
    font-family: 'Quicksand';
    font-size: 1.3rem;
    line-height: 1.3rem;
    text-align: left;
}

.carousel {
    display: flex;
    flex-wrap: wrap;
}

.graybg {
    width: 420px;
    height: 420px;
    background-color: var(--gray-opacity);
    border-radius: 20px;
}
.cform{
display: flex;
margin-bottom: 9rem;

}

.form {    
padding: 70px 60px;
position: relative;    
background: linear-gradient(272deg, #fb8a00, #fb8a00, #FC3B00);
border-radius: 20px;
margin-left: -5rem;
margin-top: 5rem;
flex: 1;
}

.form::after {
content: "";
position: absolute;
width: 123px;
height: 123px;
border-radius: 10px;
background-color: var(--blue);
left: -8rem;
}

#countrieslist ul li {
 cursor: pointer;
}

#map {
    width: 263px;
    height: 262px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    margin-left: 45px;
    margin-bottom: 0;
    margin-top: 66px;
    background-image: url(../static/images/mapav3.png);
    background-size: cover;
    background-position: center;
    transform: rotate(-90deg);
}


#map  ellipse {
fill: transparent;
color: #FFFF;
stroke: var(--blue);
display: none;
}

#map ellipse:hover, #map ellipse.selected, svg#map ellipse:hover  {
    fill: var(--orange);
    position: relative;
    display: block;
     stroke-width: 4;
}


#map ellipse.selected::before,
#map ellipse.selected::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 40px;
    background-color: black;
    top: 50%;
    transform: translateY(-50%);
}

#map ellipse.selected::before {
    left: -30px; /* Ajusta según la posición de la línea */
}

#map ellipse.selected::after {
    right: -30px; /* Ajusta según la posición de la línea */
}

svg#map{
    cursor: pointer;
}
.imgplane2 {
    position: absolute;
    top: -28px;
    right: 89px;
    width: 88px;
}

#presence {
    margin-bottom: 50px;
}

#bgcasosexito {
    background: var(--bgcasos);
}
#services {
    margin: 25px auto;
}

#footernotform {
    padding-top: 0%;
}

#footernotform  .detailfooter {
    border-top: none;
}

#footernotform  .detailfooter p {
    margin: 0;
}

.iconsfoot {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
}

.social_network {
    display: inline-block; 
    border-radius: 50%;
    overflow: hidden;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 40px;
    transition: background-color 0.3s;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.social_network img {
    width: 15px;
}

.social_network:hover {
    background-color: var(--orange)
}

.social_network:hover img {
    filter: brightness(0) invert(1); /* Cambia la imagen a blanco */
}

#btn-whatsapp {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 3;
}

#btn-whatsapp:hover svg #Elipse_2988, 
#btn-whatsapp:hover svg #Poligono_1{ 
        fill: #000; /* Color que desees aplicar al hacer hover */
        
}

header:not(.home-header) .logo img {
    filter: brightness(1) invert(1);
}

/* CLIENTS SECTION */
#clients {
    display: flex;
    gap: 20px;
}

.ccli {
    padding-left: 11%;
    position: relative;
}
.ccli > div {
    margin-top: 60%;
}
.ccli > img {
    position: absolute;
    top: 0;
    left: 1%;
}
.contcli {
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
    overflow: hidden;
}

.singlecli {
    flex: 0 0 calc(49% - 10px);
    border-bottom: 2px solid #f6f6f6;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
}


.singlecli:last-child, .singlecli:nth-last-child(2) {   
    border-bottom: none;  
}

#clients h4{
    font-weight: 600 !important;
    font-size: 38px;
    margin-bottom: 0;
}

#clients p{
    margin-top: 0px;
}

.singlecli:not(:nth-child(2n)) {
    border-right: 2px solid #f6f6f6;
}

.singlecli img {
    max-width: 166px;
    height: auto;
    padding: 10px
}


/*estilos landing*/
#landing h1 p, h1.timobile {
            'Poppins', sans-serif
            font-size: 2rem;
            font-weight: bold;
            text-align: center;                
            letter-spacing: 0px;
            color: #201D1D;
            line-height: 5rem;
        }

            #landing {
                display: flex;
                justify-content: space-between;
                align-items: flex-start; /* Alinea elementos al inicio del eje vertical */
                gap: 20px; /* Espacio entre los elementos */
                box-sizing: content-box;
                position: relative;
            }

            .contentl {
                width: 67%; /* Ocupa el 70% del ancho */
            }

            .formlanding {
                width: 34%; /* Ocupa el 30% del ancho */
                background: #F5FCFF;
                position: sticky;
                position: -webkit-sticky;
                top: 78px;
            }

            /* Opcional: Para asegurar que los contenedores no se reduzcan por debajo de su tamaño mínimo */
            .contentl, .formlanding {
                min-width: 0;
                padding: 1% 4%;
                    box-sizing: border-box;
            }

            .tips {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.tip {
    flex-basis: calc(33.333% - 20px);
    box-sizing: border-box;    
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.tipimg img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 76px;
}

#landing.consultoria-especializada .tipimg img {
    width: 200px;
}
.phraselanding {
    text-align: center;
}


.contentl h1 p, h1.timobile p {
    font-family: 'Poppins', sans-serif;
    font-size: 3.8vw;
    line-height: 108% !important;
}
.growth-marketing .contentl h1 p {
    font-family: 'Poppins', sans-serif;
    font-size: 3.2vw;
    line-height: 108% !important;
}
.headfla img {
    width: 100%;
}
.headfla {
    margin-bottom: -8px;
    position: relative;
}
.cformlanding {
    padding: 23px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

#landing.consultoria-especializada .post-title {
    display: block;
}
.cformlanding p {
    text-align: center;
    margin: 0;
    line-height: 123%;
}
#landing h2 {
    font-size: 38px;
    font-weight: 600;
    text-align: center;
}
div#casosdeexitolanding .casos-exito-carousel {
    margin-top: 30px;
}
#casosdeexitolanding div#contcasbtn {
    text-align: center;
    margin-top: 46px;
}
h1.timobile {
    display: none;
}
#landing .contcollanding .headfla:before{
    position: absolute;    
    zoom: 0.7;
    display: flex;
    left: -38px;
    align-items: center;
    top: 0;
    bottom: 0;
}

.growth-marketing .contcollanding .headfla:before {
    content: url(../static/images/ico-formgrowd.png);
}
.desarrollo-web .contcollanding .headfla:before {
    content: url(../static/images/ico-formdesad.png);
}
.postimgmobile {
    display: none;
}

.onlymobile {
    display: none;
}
/* end estilos landing */
@media (max-width: 1122px) {

    .logo {
        width: auto;
        flex-grow: 0;
    }

    
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        background: var(--blue);
        border-radius: 10px;
        width: 39px;
        height: 39px;
        align-items: center;
        justify-content: center;
    }   

    .hamburger-menu span {
        background: var(--white);
        height: 2px;
        width: 22px;
        margin-bottom: 5px;
        border-radius: 3px;
        display: block;
        transition: all 0.3s ease;
    }
   /* Cuando el menú hamburguesa NO tiene la clase 'close', los spans se ven normales */
    .hamburger-menu:not(.close) span {
        background: var(--white);
    }

    /* Transforma el botón de hamburguesa en una 'X' cuando se activa la clase 'close' */
    .hamburger-menu.close span:nth-child(1) {
        transform: rotate(45deg);
        position: absolute;
        top: 27px;
    }

    .hamburger-menu.close span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.close span:nth-child(3) {
        transform: rotate(-45deg);
        position: absolute;
        top: 27px;
    }

  
    .hamburger-menu span:last-child {
        margin: 0;
    }

  .menuprinc {
    flex-direction: column;
    gap: 0;
    background-color: rgba(38, 40, 61, 0.98);
    position: fixed;
    top: 59px;
    right: -100%; /* Inicialmente oculto */
    height: 100vh;
    width: 75%;
    transition: right 0.3s ease-in-out;
    padding-top: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Clase activa para mostrar el menú */
.menuprinc.active {
    right: 0; /* Mostrar menú */
}



.overlay {
    width: 33%;
    content: '';
    height: 100%;
    position: absolute;
    left: -33%;
    background: #00000080;
    top: 0;
    z-index: -2; /* Mantener detrás del overlay */
}

    .menuprinc li {
        text-align: left;
    }

    .menuprinc a, .submenu li a {
        padding: 7px 12px;
        color: var(--white);
        font-size: 15px;
    }

    .menuprinc.active {
        right: 0;
    }
    /*.menuprinc.active:before {
        width: 33%;
        content: '';
        height: 100%;
        position: absolute;
        left: -33%;
        background: #00000080;
        top: 0;
        z-index: -2;
    }*/



    /* icons menu mobile*/

    .menuprinc > li:not(.itemProductos):not(.itemNuestros){
        position: relative;
        padding-left: 20px; /* Espacio para el icono */
    }

    .menuprinc > li::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;  /* Ancho del icono */
        height: 18px; /* Altura del icono */
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Aplica iconos según la clase del <li> */
    .menuprinc > li.itemHome::after {
        background-image: url('../static/images/ico-home.svg');
    }

    .menuprinc > li.itemConsultoria::after {
        background-image: url('../static/images/ico-consultoria.svg');
    }

    .menuprinc > li.itemConsultoria::after {
        background-image: url('../static/images/ico-consultoria.svg');
    }

    .menuprinc > li.itemEquipo::after {
        background-image: url('../static/images/ico-equipo.svg');
    }

    .menuprinc > li.itemCasos::after {
        background-image: url('../static/images/ico-casos-de-exito.svg');
    }

    .menuprinc > li.itemBlog::after {
        background-image: url('../static/images/ico-blog.svg');
    }

    .menuprinc > li.itemTrabaje::after {
        background-image: url('../static/images/ico-trabaje.svg');
    }

    .menuprinc > li.itemProductos, .menuprinc > li.itemNuestros{
        position: relative;
    }

     .menuprinc > li.itemProductos::after {
        background-image: url('../static/images/ico-productos.svg');
        top: 8%;
    }

    .menuprinc > li.itemNuestros.Proyectos::after {
        background-image: url('../static/images/icono-nuestros-proyectos.svg');     
        top: 24%;   
    }

    /**/

    .submenu {
        position: relative;
        display: block !important;
        background: none;
        top: 0 !important;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: none;
        margin-left: 20px;
    }
     .menuprinc li {
        border-bottom: 1px solid #45465a;
        width: 87%;
    }

    .has-submenu > a {                
        margin-left: 0;
        border-bottom: 1px solid #45465a;
        padding-left: 33px !important;
    }   

    .submenu li:last-child, .menuprinc li:last-child {
        border-bottom: 0;
    }

    .menuprinc li .btn-orange{
        margin-top: 20px;
        display: none;
    }

    .menuprinc li .btn-orange a{
        font-size: 16px;
        padding: 8px;
    }


    .has-submenu.active .submenu {
        display: block;
    }
    .servicescontainer, .servgroup1, .servgroup2 {
        flex-wrap: wrap;
    }
    nav {
        width: initial;
        justify-content: flex-end;
           flex-grow: 0;
           padding: 0;
    }
    .submenu li {
        padding-left: 25px;
        margin-bottom: 0;
    }
    nav > ul > li:last-child {
        margin: 0;
        width: 100%;
        padding: 0 23px;
        box-sizing: border-box;
    }
    .btn-orange a {
        text-align: center;
    }
}

.applynow {
    font-size: 16px;
    margin-bottom: 20px;
}

@media (max-width: 767px) { 



    .applynow {
        display: block;     
        text-align: center;   
    }

    .cinitial2{
        padding-top: 0;
    }

    .job-item .job-header{
        width: 100%;
    }

    .arrow-container {
        width: auto; /* Quita el ancho completo */
        padding: 0 20px; /* Añade un padding de 20px en los lados */
      }


    .videobanner {
        margin: 30px 0px;
    }
    .onlymobile {
        display: block;
    }

     .onlydesktop {
        display: none;
    }
    #bgcasosexito {
        margin-top: 20px;
    }

    .postimgmobile {
        display: block;                
        position: relative;
        margin-top: 0px !important;
    }

     .postimgmobile img{
        max-width: 100% !important;
        margin: 0px !important;
     }

    .postimagedesktop {
        display: none;
    }

    #servicesingle h1, #singleproject h1, #bannerproductos h1, #bannercasos-de-exito h1
    {
            line-height: 3.78rem !important;
            margin-bottom: 0;
            font-size: 2.7rem;
    }
    #landing .contcollanding .headfla:before{
     /*   left: 0;
        right: 0;
        top: -34px;
        bottom: inherit;
        justify-content: center;*/
        zoom: 0.5;
    }
    /*.growth-marketing .contcollanding .headfla:before {
            content: url(../static/images/ico-formgrowmobile.png);
    }
    .desarrollo-web .contcollanding .headfla:before {
            content: url(../static/images/ico-formdesamobile.png);
    }*/
    .formlanding {
        top: 0;
    }
    #landing h1 p, .contentl > h1 {
        display: none;
    }
    .timobile, #landing h1.timobile p {
        display: block !important;
        font-size: 6.2vw;
        margin-left: 10px;
        margin-right: 10px;
    }
    #landing h1.timobile p {
        margin-bottom: 7px;
        margin-top: 10px;
    }
    .formlanding {
        padding: 0px 6% 0px 6%;
        margin-bottom: 46px;
        background: var(--white);
    }
    #landing .btn-orange a{
        display: block;
    }
    .tip {
        flex-basis: initial;
    }
    section#landing {
        /* display: flex; */
        flex-direction: column;
    }

    .contentl {
        order: 2;
    }

    .formlanding {
        order: 1;
        position: relative;
    }
    .formlanding, .contentl {
        width: 100%;
        margin-bottom: 0;
    }

    .titformmobile {
        display: inline-block;
        margin-bottom: 40px;
    }


    .titformmobile p {
        margin: 15px 0;
        font-size: 1rem;
        text-align: center;
    }
    .titformdesktop{
        display:none;
    }

    .logo img {
        width: 111px;
    } 

    #sectionblogs * {
        z-index: auto;
    }

    .bloggroup1-1 {
        border-radius: 15px;
    }  

    .bloggroup1-1 {
        margin-bottom: 30px;
    }

    section#sectionblogs::before {
        display: none;
    }

    .products-elements .eimg {
        margin-right: 0;
        margin: 0px !important;
    }

     .products-elements img {
        max-width: 300px;
     }

    #servicesingle .element, #products .products-elements a .element{
        flex-direction: column ;
        padding: 0px 15px;
    }

    #servicesingle .econ,  #products .econ {
        margin-top: 25px;
        text-align: center;

    }

    #servicesingle .element:nth-child(even) .econ *, .products-elements a:nth-child(even) .econ * {
/*        text-align: left;*/
text-align: center;
        float: none;
    }

    #blogpage{
        margin-top: 60px;
    }

    .imgpresence {
        background-image: none;
            height: 420px;
    }

    .imgpresence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../static/images/fondo-mapa-telefonos.png);
    background-size: cover;
    background-position: center;
    z-index: -1; /* Para que el fondo quede detrás del contenido */
    transform: rotate(-90deg); /* Rotación por defecto (desktop) */
    }

    #map {
            margin-top: 76px;
    }

      .presencecountry {
        overflow: hidden;
        width: 100%; /* Ajusta según el tamaño de la pantalla */
        margin: 30px 0;
    }

    .presencecountry ul {
        display: flex;
        transition: transform 0.5s ease-in-out;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .presencecountry ul li {
        flex: 0 0 80%; /* Ajusta esto para controlar cuántos elementos se muestran */
        margin: 0 10%; /* Espaciado alrededor de los elementos */
        text-align: center;
        opacity: 0.5; /* Elementos no seleccionados más transparentes */
        transition: opacity 0.3s;
    }

    .presencecountry ul li.selectedc {
        opacity: 1; /* El elemento seleccionado es totalmente visible */
        font-size: 30px;
    }


  
    .form {
        margin-left: 0;
        padding: 70px 30px;
        background: linear-gradient(223deg, #fb8a00, #fb8a00, #FC3B00);
    }

    .form::after {
        display: none;
    }

    .cform .graybg {
        display: none;
    }
    .contcli {
        position: relative;
        overflow: hidden; /* Oculta el contenido que sobresale */
        max-width: 100%; /* Asegura que el carrusel se ajuste al contenedor */
        margin: 0px;        
        padding-bottom: 30px;        
    }
    
    .carousel {
        display: flex;
        transition: transform 0.5s ease; /* Transición suave al mover */
        width: 100%; /* Ajuste para los márgenes */
        
        flex-wrap: nowrap;
        
    }
    
    .singlecli {
      flex: 0 0 100%;          /* Cada slide ocupa el 100% del ancho del contenedor */
      display: flex;
      justify-content: center;  /* Centra el contenido de cada slide */
      align-items: center;      /* Centra verticalmente el contenido */
      border-bottom: none;
    }

    .singlecli:not(:nth-child(2n)){
        border-right: none;
    }


    .singlecli img {
        max-width: 100%;
        height: auto; /* Mantiene la proporción */
    }
    

    #clients {
        flex-direction: column;
        background: #F7F7F7;
        padding-bottom: 0;
        border-radius: 30px;

    }

    .titform h4 {
        text-align: center;
        padding: 25px 5px 0px;
    }

    .bannerdefault h3 {
        margin-top: 25px;
        margin-right: 0;
        font-size: 20px !important;
    }
    
    #singlejob {
        margin-top: 100px;
    }

    .job-item {
        padding: 0;
        width: 100%;
    }

    .job-item  {
        position: relative;
    }

   
    /*.jobssection{
        margin-top: 100px;
    }    */

    .job-details h2 {        
        font-size: 2.3rem;
    }

    .jobs-container {
        flex-direction:column ;
    }
    h1 {
        font-size: 3rem;
        line-height: 3rem !important;
    }

    header {
        padding: 10px 4%;
        max-height: 70px;
    }

    .contimgservice img {
        width: 100%;
    }


    .tit-banner h2 {
        font-size: 4vh!important;
    }

    .tit-banner {
        top: 32%!important;
    }

    #bannerhome .data-banners h3 {
        font-size: 2.8vh!important;
        line-height: 19px!important;
        width: 90%!important;
    }
    
    .servicescontainer, .servgroup1, .servgroup2 {
        width: 100%;
    }
    .servgroup1row2 {
        order: 1;
        margin-bottom: 20px;
    }

    .servgroup1row1 {
        width: 100%;
        order: 2;
    }
    .listservicescontainer.listserviceshome {
        flex-direction: row;
    }
    .contimgservice {
                width: 30% !important;
    }

    .servgroup1row2-1 {
        order: 3;
    }
    .servgroup1row2-2 h4 {
        font-size: 5vh;
        font-weight: 600;
    }

    .servgroup1row2-2 p {
        font-weight: 300!important;
        font-size: 4vh;
        width: 100%;
        line-height: 34px;
        margin-bottom: 12px !important;
    }

    .servgroup1row2-3 {
        padding: 0;
        border: none;
        background: no-repeat;
    }

    .servgroup1row2-3 p {
        border: none;
        padding: 0;
        margin: 0;
        color: var(--black);
    }

    .servgroup1row2-3 img {
        display: none;
    }
    .servgroup1row2-1, .servgroup1row2 img  {
        width: 100%;
    }
    .servgroup2.fcenter {
        row-gap: 20px;
        margin-top: 10px;
    }
    .servgroup2row1.contimgservice img {
        height: inherit;
        object-fit: inherit;
        width: 100%;
    }

    .servgroup2row1.contimgservice {
        width: 100%;
        height: 100%;
        overflow: initial;
    }
    .pagewrap {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .servgroup1 > div >img, .servgroup2 >div > img {
        width: 100%;
    }
    .servgroup2.fcenter {
        padding: 0;
    }

    .bannerdefault {
        flex-direction: column-reverse;
    }

    .cinitial {
        margin-top: 85px;
    }

    .navbreadcrumb {
        margin-bottom: 20px;
        padding: 0px;
    }

    ol.breadcrumb {
        padding: 0 15px;
        justify-content: center;
    }

    .bannerdefault .col2 {
        padding-left: 0px;
        text-align: center;
    }

    .bannerdefault div {
        width: 100% !important;
    }

    .pagewrap2 {
        padding: 0 15px;
    }

    h3 {
        font-size: 22px;
    }

    .bannerdefault .col1 {
        margin-top: 20px;
    }

    #bannerblog .col1{
        display: none;
    }

    .phraseservices * {
        font-size: 1.2rem;
        margin-top: 30px;
        font-weight: normal;
    }

    #servicesingle .eimg {
        flex: 0 0 40%;        
        margin-right: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .post-item {
        grid-template-columns: 1fr;
    }

     .post-details,
    .post-image {
        grid-column: auto; 
    }

    .post-image{
        margin-left: 0;
        margin-top: -11%;
        width: 100%;        
    }

    .post-image img {     
        max-width: 90%;     
        margin: 0px auto;  
    }

    .btnviewmore{
/*        width: 100%;*/
        text-align: center;
        display: block;
    }
    .post-details::after {
        right: -3%;
    }
    .imagepostcontainer::before, .imagepostcontainer::after {
        content: none;
    }

    .imagepost{
        height: 280px;
    }

    .titlepost {
        margin: 0 0 40px;
    }

    #relatedposts {
        margin-bottom: 60px;
        gap: 20px;
        flex-direction: column;
    }

    .relatedpost a {
        height: 220px;
    }

    .relatedpost {
        min-height: auto;
        margin: 15px 0 0px;
    }

    .bgbanner {
        display: none;
    }

    .cbgbannermobile{
        overflow-x: clip;
    }

    .bgbannermobile {
        z-index: 1;
        position: absolute;
        display: block;
    }
    .imgbmo{
        z-index: 2;
        position: relative;
    }
    .contpresence {
        display: flex;
        flex-direction: column;
    }
    .imgpresence, .imgpresence img {
        /*transform: none;*/
    }
    .imgpresence img {
        max-width: 273px;
        margin: 37px 9px 30px 16px;
    }
    .contpresence p {
        padding: 0;
        font-size: 1.6em;
        text-align: center;
    }
    #presence {
        margin: 0;
    }
    .contpresence {
        border-radius: 0;
        overflow: hidden;
    }
    .bloggroup1 {
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .listblog {
        flex-direction: column;
    }

    .blogdescrip {
        order: 1;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        background: no-repeat;
        row-gap: 0px;
    }

    .bloggroup1-1 {
        order: 2;
        height: 220px;
    }

    .bloggroup1-2 {
        order: 3;
        flex-direction: column;
    }

    .blogdescrip h2 {
        margin: 0;
    }

    .blogdescrip div {
        border: none;
        flex-direction: column;
        padding: 0;
        row-gap: 0px;
    }

    .bloggroup1-2 > div {
        width: 100%;
        height: 220px;
        margin-bottom: 35px;
    }

    .bloggroup1-1 > img {
        height: 250px;
        margin-bottom: 22px;
    }

    .bloggroup2 {
        width: 100%;
        height: 225px;
    }
    .blogdescrip div a {
        font-size: inherit;
        background: #fff;
        border-radius: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
/*        margin-right: 14px;*/
        text-decoration: none;
        color: #201D1D;
        font-weight: 900;
/*        padding-left: 36%;*/
        padding: 8px 12px;
    }
    .btnviewmore .btn-icon {
        display: none;
    }

    .blogdescrip div a img {
        margin-left: auto;
        margin-right: -32px;
        display: none;
    }
    section#sectionblogs {
        padding-top: 20px;
        background-image: none;
        border-radius: 30px 30px 0 0;
    }
    .detailfooter {
        border-top: 1px solid #E5E5EB;
        padding: 24px 0px;
        display: flex;
        justify-content: space-between;
    }
    .titform {
        position: relative;        
        left: 0;
        top: 0;        
    }
    .formulariocont h1 {
        position: relative;
        font-size: 11vh;
        padding-top: 25px;
        text-align: center;
    }

    .formcontact {
        flex-direction: column;
    }

    .formulariocont {
        order: 1;
        width: 100%;
    }

    .formulariocont form {
        padding: 27px;
    }

    .ubicaciones {
        order: 2;
        width: 100%;
        padding: 0;
        margin-top: 64px;
        box-sizing: border-box;
    }
    .formcontact {
        margin-bottom: 0;
    }

    .paisbox:last-child {
        border: none;
    }
    .solodesktop {
        display: none;
    }
    .ccli {
    padding-left: 37%!important;
    }

    .ccli div {
        margin-top: 0!important;
    }

    .ccli h4 {
        padding-top: 25px;
        font-size: 28px!important
    }

    .ccli p {
        font-size: 15px;
    }

}
@media (min-width: 481px) and (max-width: 999px) {
    .bgbanner, .bgbannermobile {
        display: none;
    }
    
}

@media (max-width: 480px) {
    .subtitservi, .descritservi {
        margin: 10 19px!important;
    }
    #casosexito {
        margin: 0!important;
    }
    .contimgservice {
        width: 100% !important;
    }
    #map {        
        margin-left: auto;
    }

 
        #bannerhome .data-banners h3 {
        font-size: 1.5vh !important;
        line-height: 13px !important;
        width: 91% !important;
    }
    .tit-banner h2 {
        font-size: 3vh !important;
    }

    .bgbannermobile.tecnologia{
        left: -7%;
        top: -8%;
    }

    .bgbannermobile.blog{
        left: -7%;
        top: -10%;
    }

    .bgbannermobile.martech, .bgbannermobile.hablemos{
        right: 8%;
    }

    .bgbannermobile.performance{
        top: -13%;
        left: -52%;
    }

    .bgbannermobile.trabaja-con-nosotros{
        top: -13%;
        left: -39%;
    }

    .bgbannermobile.seo{
        left: -204%;
        top: -11%;
    }
    /*#servicesingle.performance .bannerdefault .col2, #servicesingle.seo .bannerdefault .col2,  #servicesingle.tecnologia .bannerdefault .col2,   #bannerblog .bannerdefault .col2,  #bannertrabaja-con-nosotros .bannerdefault .col2{
        margin-bottom: 30px;
    } */
  
}


@media (max-width: 1200px) {
    .pagewrap {
        max-width: 100%;
        margin: 0 20px; /* Añade márgenes laterales cuando la pantalla es más pequeña */
    }

    .listservicescontainer.listserviceshome .contimgservice {
        width: 29%;
        flex: inherit!important;
    }
    .listservicescontainer.listserviceshome {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
}

@media (max-width: 768px) {

    .formulariocont .boxform {
        padding: 50px 10px;
    }


    .btnlanding {
        display: block;
    }

    .pagewrap {
        max-width: 100%;
        margin: 0 30px; /* Reduce los márgenes laterales en pantallas aún más pequeñas */
    }
    #services {
        padding: 0% 5%;
    }
}

@media (max-width: 480px) {

    #btn-whatsapp{
        bottom: 4%;
    }

    

    .formulariocont h1 {     
        font-size: 7vh;
    }

    .ubicaciones, .infoformfoot {
        padding: 0 15px
    }
    .contpresence div {
        width: 100%;
    }

    .contpresence p {
        width: 90%;
        padding-left: 0;
    }

    .pagewrap {
        max-width: 100%;
        margin: 0 19px; /* Márgenes mínimos en pantallas móviles */
    }
}
@media (min-width: 770px) {
    #clients {
        min-height: 443px;
    }
}
@media (max-width: 370px){
    .menuprinc a, .submenu li a {
        padding: 13px;
    }
    .job-item img{
        
        right: 0px;
    }

    .job-item h4{
        margin-right: 0px;
        width: 79%;
        text-align: left;
    }
}

@media (max-width: 360px){
    .menuprinc a, .submenu li a {
        padding: 9px;
    }
}


@media (min-width: 1000px) and (max-width: 1300px) {
    .titform {
        left: -59%;
    }
  }
  
@media (min-width: 1367px) {
    .titform {
        left: -63%;
    }
    .formulariocont h1 {
        font-size: 7.5rem;
    }   
   
}
  @media (min-width: 1700px) {
  .titform {
    left: -50%;
  }

 
}


@media (min-width: 1600px) {
    .titform {
        left: -69%;
        top: 0%;
    }
    .paisbox {
        padding: 13px 0;
    } 
}


input::placeholder, 
textarea::placeholder {
    color: var(--placeholder-color, white); /* Color del placeholder */
}
.imgplane {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 100px;
}

.servgroup1row2-2.titservices {
    margin-bottom: 15px;
}

.servgroup1row2-2.titservices div {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.servgroup1row2-2.titservices p.subtitservi, .servgroup1row2-2.titservices .descritservi {
    max-width: 555px;
    width: inherit;
}

.listservicescontainer.listserviceshome {
    display: flex;
    gap: 30px;
    margin-top: 63px;
}

.listservicescontainer.listserviceshome .contimgservice {
    flex: 1;
}

.listservicescontainer.listserviceshome .contimgservice > a >img {
    width: 100%;
/*    height: 303px;*/
    object-fit: cover;
    overflow: hidden;
    border-radius: 30px;
}

.listservicescontainer.listserviceshome .contimgservice > a:before {
    position: absolute;
    top: 11%;
    left: -14px;
}
.listservicescontainer.listserviceshome .contimgservice:nth-child(1) > a:before{
    content: url(../static/images/icono-tecnologia.png);
}
.listservicescontainer.listserviceshome .contimgservice:nth-child(2) > a:before{
    content: url(../static/images/icono-estrategia.png);
}
.listservicescontainer.listserviceshome .contimgservice:nth-child(3) > a:before{
    content: url(../static/images/icono-martech.png);
}
.listservicescontainer.listserviceshome .contimgservice:nth-child(4) > a:before{
    content: url(../static/images/icono-performance.png);
}
.listservicescontainer.listserviceshome .contimgservice:nth-child(5) > a:before{
    content: url(../static/images/icono-seo.png);
}

.listservicescontainer.listserviceshome .contimgservice > a {
    height: initial;
    /*border-radius: 30px;
    overflow: hidden;*/
}

.listservicescontainer.listserviceshome .contimgservice .text-overlay {
    background: rgba(37, 39, 54, 0.6);
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    border-radius: 0;
    min-height: 66px;
    border-radius: 0 0 30px 30px;
}

.listservicescontainer.listserviceshome .contimgservice .text-overlay h5 {
    margin: 0;
    text-align: center;
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
}

@media only screen and (max-width: 320px) {
        .btn-orange a    {
            font-size: 12px;    
        }
        
       .menuprinc a, .submenu li a {
            padding: 5px;
        }

         .has-submenu > a {                    
            padding-left: 25px !important;
        }   
}


@media (min-width: 768px) {
    #clients {
        height: 440px;
    }
    .ccli {
    width: 34%;
}
.contcli {
    overflow: hidden;
    width: 70%;
}
.carousel {
/*    height: 90%;*/
/*    overflow: hidden;*/
}
.singlecli {
 
    width: 49%;
    height: 110px;
}
.solomobile {
    display: none;
}
.bimage {
        padding-left: 6%;
}
}
.nopadtop {
    padding-top: 0px;
}
.pagination {
    text-align: center;
    margin: 20px 0;
}

.step-links svg{
    width: 20px;
    height: 15px;
}

.pagination .step-links a, #totalItems {
    text-decoration: none;
    color: var(--blue2); /* Texto azul */
    margin: 0 5px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.pagination .step-links a:hover {
    color: #0056b3; /* Azul más oscuro al pasar el ratón */
}


.pagination .step-links a:hover svg g {
    fill: var(--white);
}
.pagination .step-links .circle {
    display: inline-block;
    padding: 0px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f0f0f0; /* Fondo gris claro */
    color: var(--blue2); /* Texto azul */
    font-weight: bold;
    border: 2px solid #f0f0f0;
}

.pagination .step-links .circle:hover {
    background-color: var(--blue2); /* Fondo azul al pasar el mouse */
    color: white; /* Texto blanco */
    border: 2px solid var(--blue2);
}

.pagination .step-links .current, #displayIndex {
    display: inline-block;
    padding: 0px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    background-color: var(--blue2); /* Fondo azul */
    color: white; /* Texto blanco */
    font-weight: bold;
    border: 2px solid var(--blue2);
}

.discovermore2, .nolink {
    text-decoration: none;
    color: #333;
}