@font-face {

    font-family: 'Roboto';

    src: url('./font/Roboto-Regular.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Roboto';

    src: url('./font/Roboto-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



body

{

    font-family: Roboto, sans-serif ;

}

.r18, p

{

    font-size: 18px;

}

.r16

{

    font-size: 16px;

}

.r12

{

    font-size: 12px;

}

.r10{

    font-size: 10px;

}

a{

    text-decoration: none;

}

header{

    padding-left: calc(1.5rem * .5);

    padding-right: calc(1.5rem * .5);

}

.btn-dark:hover

{

    background: #FFF;

    color: #000 !important;

}

.btn-menu-dark

{

    background: #fff !important;

    color: #000 !important;

}

.btn-menu-dark:hover

{

    background: #000 !important;

    color: #fff !important;

    border: 1px solid #fff !important;

}

h1

{

    font-size: 64px;

    font-weight: bold;

}

h2

{

    font-size: 40px;

    font-weight: bold;

}

.carousel-item {

    padding-right: 24px !important;

 }

 .carousel-item img {

    border-radius: 18px;

 }

 .carousel-inner {

    border-radius: 8px;

}

.form-control {

    border: none;

    border-bottom: 1px solid #000;

    border-radius: 0;

    margin-bottom: -1px;

    padding: 4px 0 0 0;

}

p{

    margin-bottom: 0;

}

.form-group

{

    padding-bottom: 2rem;

}

.form-control:focus {

    box-shadow: none;

    border-color: #000;

}

.r18, .r16, .r12, .r10, h3, h2, h1, p

{

    line-height: normal;

}

li

{

    list-style: outside;

    margin-left: 1rem;

}

.ld-none

{

    list-style: none !important;

    margin-left: 0 !important;

}


.whatsapp-btn {
    position: fixed;
    left: 30px; /* Distancia desde la izquierda */
    bottom: 30px; /* Distancia desde el fondo */
    z-index: 100; /* Asegura que el botón esté sobre otros elementos */
  }

  /* Estilo adicional para el ícono/imagen del botón */
  .whatsapp-btn img {
    width: 60px; /* Tamaño del ícono */
    height: auto;
    transition: transform 0.3s ease-in-out; /* Efecto suave al pasar el ratón */
  }

  .whatsapp-btn:hover img {
    transform: scale(1.1); /* Agrandar ícono al pasar el ratón */
  }
.carousel-item {

    transition: transform .5s linear, opacity .2s linear;

}



.carousel-item-next,

.carousel-item-prev,

.carousel-item.active {

    display: block;

}



.carousel-fade .carousel-item {

    opacity: 0;

    transition-duration: .5s;

    transition-property: opacity;

}



.carousel-fade .carousel-item.active,

.carousel-fade .carousel-item-next.carousel-item-left,

.carousel-fade .carousel-item-prev.carousel-item-right {

    opacity: 1;

}



.carousel-fade .active.carousel-item-left,

.carousel-fade .active.carousel-item-right {

    opacity: 0;

}



.carousel-fade .carousel-item-next,

.carousel-fade .carousel-item-prev,

.carousel-fade .carousel-item.active,

.carousel-fade .active.carousel-item-left,

.carousel-fade .active.carousel-item-prev {

    transform: translateX(0);

    transition: opacity 2s linear;

}

.carousel-item img

{

    width: 100%;

    height: auto;

}

.slides_hb

{

    max-height: 560px !important;

    overflow: hidden;

}

.movil_footer, .movil_footer a

{

    color: #fff !important;

}

    #inicio {

        padding-top: 5rem;

    }

        .banner {

            background-color: #000; 

            color: #fff; 

        }

.carousel-indicators button {

    background-color: #f8f8f8;

}



.carousel-indicators .active {

    background-color: #000;

}

#proyectos, #experiencia, #hablemos, #areas {

  scroll-margin-top: 70px; 

}

.menu_between {

    display: flex;

    justify-content: space-between;

    flex-direction: row;

    align-items: center;

}





        .experience-container {

            font-family: 'Arial', sans-serif;

            max-width: 1200px; /* o el ancho máximo que prefieras */

            margin: auto; /* Centrar el contenedor */

        }



        .statistics {

            display: flex;

            justify-content: space-between;

        }



        .statistics .numbers {

            flex: 1; /* Ajustar automáticamente el tamaño */

            text-align: left;

        }



        .statistics .numbers div {

            margin-bottom: 1em;

        }



        .statistics .numbers h2 {

            font-size: 3em;

            margin: 0;

        }



        .map-container {

            flex: 1; /* Ajustar automáticamente el tamaño */

            text-align: left;

        }



        .map-container img {

            max-width: 100%;

            height: auto;

        }



        .row {

            display: flex;

            justify-content: space-around;

            margin-bottom: 1em;

        }



        .row .column {

            flex-basis: 33%; /* Dividir el espacio en tres para la fila superior */

        }



        .row:last-child .column {

            flex-basis: 50%; /* Dividir el espacio en dos para la fila inferior */

        }



        

        .project-image {

            width: 100%;

            height: auto;

            margin-bottom: 8px;

            border-radius: 10px;

        }

.grey

    {

        color: #868686;

    }

.project-container p 

{

    margin-bottom: 8px;

}

.sub-heading {

    padding-right: 10rem;

}



.hidden-scroll-up {

    opacity: 0 !important; /* Utiliza !important para asegurarte de que esta regla tenga prioridad */

    transition: opacity 0.5s linear;

  }

  

.column-left

{

    padding-left: 5rem;

}



.column-right

{

    padding-right: 5rem;

}



.error

{

    color: red;

}



.footer-container {

    background-color: #000; /* Fondo negro */

    color: #fff; /* Texto blanco */

    padding: 40px; /* Relleno para el pie de página */

    font-family: 'Arial', sans-serif; /* Fuente del texto */

}





.footer-container a {

    color: #fff; /* Color de los enlaces */

    text-decoration: none; /* Sin subrayado en los enlaces */

}



.footer-brand {

    margin-bottom: 20px;

}



#carrusel1 .carousel-inner .carousel-item,

#carrusel2 .carousel-inner .carousel-item,

#carrusel3 .carousel-inner .carousel-item,

#carrusel4 .carousel-inner .carousel-item,

#carrusel5 .carousel-inner .carousel-item

{

    max-height: 387px;

}

.project-container {

    padding-bottom: 2rem;

}

.direction {

    width: 45%;

}















nav li {

    list-style:none;

  }

  .navbar li {

    padding-right:1rem;

    font-size:18px;

  }

  nav a:hover {

    border-bottom:1px solid #000 ;

  }

  

    a.link_inicio {

        border-bottom: none !important;

    }

  .nav__firts_div {

    height:50px;

  }

  .logo_movil {

    width:100px;

    margin-top:auto;

  }

  .main-header {

    background:#FFF;

    width:100%;

    height:50px;

    position:fixed;

    z-index:100;

  }

  .menu_open {

    display:block;

  }

  .close_menu {

    display:none;

  }

  .csw ul li a {

    color:#000;

  }

  

footer a, footer a:hover, .btn-dark

{

    color: #fff !important;

}

  .nav_ li h6 {

    font-size:18px !important;

    line-height:24px;

  }

  .nav_ {

    position:fixed;

    right:0;

    top:0;

    width:100%;

    height:100vh;

    background:#fff;

    transition:.1s linear;

    transform:translateX(100%);

  }

  .navigation {

    padding-top:20px;

    padding-left: 16px;

  }

  .navigation li {

    list-style: none;

    width: 100%;

    margin-left: 0;

  }

  .navigation a {

    line-height:18px !important;

    display:block;

    line-height:3.5;

    padding:0px;

    color: #fff;

    text-decoration:none;

    transition:.4s linear;

  }

    .navigation a:hover {

    transform:translateX(1%);

    

    border-bottom:1px solid #fff;

  }

  #btn-nav {

    display:none;

  }

    #btn-nav:checked ~ nav {

    transform:translateX(0);

    visibility:visible;

    display:block;

  }

  .close_aviso, .btn-nav, .aviso {

      cursor:pointer;

  }



  .btn-nav {

    font-size:30px;

    transition:.2s linear;

    float: right;

  }

.footer {

    padding: 40px 0;

}



.contenedor_menu_movil {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 80vh;

}





@media (max-width: 992px) {

    h1

    {

        font-size: 40px;

        font-weight: bold;

    }



    h2

    {

        font-size: 32px !important;

        font-weight: bold;

    }

    .sub-heading {

        padding-right: 4rem;

    }

    .r18, p

    {

        font-size: 16px;

    }  



    .column-left

    {

        padding-left: calc(var(--bs-gutter-x) * .5);

        padding-top: 2rem;  

    }



    .column-right

    {

        padding-right: calc(var(--bs-gutter-x) * .5);

        padding-top: 2rem;

    }



    .inverse, .statistics

    {

        flex-direction: column-reverse;

    }

    

.btn-dark.py-2{

    padding-top:.25rem!important;

    padding-bottom: .25rem!important;

}

    .direction {

        width: 71%;

    }

    .banner {

        padding: 2rem 0 !important;

    }

    .footer {

        padding: 24px 0 !important;

    }

    .principal .row div h2 {

        line-height: 16px;

    }

   .statistics .numbers div,

   .principal .row div {

        margin-top: 24px;

        margin-bottom: 0;

    }

    .monograma

    {

        width: 40px;

        height: 40px;

    }

    .tcolumn, .direction{

        padding-bottom:24px !important;

    }

    .list_movil {

        margin-top: -1rem;

    }

    #contact_form{

        margin-top: 1rem;

    }

    

 .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) {

    padding-right: 24px;

 }

 

.carousel-item {

    padding-right: 0px !important;

 }

 

}



@media (max-width: 425px) {

    #inicio {

        padding-top: 2rem;

    }

    .direction {

        width: 45%;

    }

}