/*Tipografias*/
@font-face {
    font-family: 'Gotham-Light';
    src: url('../fonts/Gotham-Book.otf') format('opentype');
    font-weight: 200; /* O el peso que corresponda */
    font-style: normal;
}
@font-face {
    font-family: 'Gotham-Bold';
    src: url('../fonts/Gotham-Bold.otf') format('opentype');
    font-weight: 500; /* O el peso que corresponda */
    font-style: normal;
}
@font-face {
    font-family: 'Heavitas';
    src: url('../fonts/Heavitas.ttf') format('opentype');
    font-weight: 200; /* O el peso que corresponda */
    font-style: normal;
}
@font-face {
    font-family: 'Comfortaa-Regular';
    src: url('../fonts/Comfortaa-VariableFont_wght.ttf') format('opentype');
    font-weight: 200; /* O el peso que corresponda */
    font-style: normal;
}

.gotham-light {
    font-family: 'Gotham-Light', sans-serif;
}
.gotham-bold {
    font-family: 'Gotham-Bold', sans-serif;   
}
.heavitas {
    font-family: 'Heavitas', sans-serif;     
}
.comfortaa {
    font-family: 'Comfortaa-Regular', sans-serif;     
}
/*Tamaño de textos*/
.fs-24 {
    font-size: 1.5rem;
}
.fs-137 {
    font-size: 8.597rem;
    color: #F27321;
}
.fs-25 {
    font-size: 1.563rem;
}
.fs-37 {
    font-size: 2.323rem;
}
.fs-85 {
    font-size: 5.353rem;
    color: #399B96;
}
.fs-39 {
    font-size: 2.445rem;
    font-weight: bold;
    color: white;
}
.fs-21 {
    font-size: 1.313rem;
    text-align: left;
    color: white;;
}
.fs-47 {
    color: white;
    font-size: 2.938rem;
}
/*Hover Header*/
.hvr-orange {
    color: black!important;
}
.hvr-orange:hover {
    color: #F27321!important;
}
/*Header*/
.icon-header {
    width: 15.96px;
    height: 34.35px;
}
.follow-navbar {
    margin-right: 1.813rem;
}
.custom-nav {
    align-items: center; /* Alinea verticalmente los elementos dentro de la lista */
}
.custom-nav .nav-item {
    display: inline-block; /* Asegura que todos los elementos estén en línea */
}
.custom-nav .nav-item a {
    padding-left: 10px;
    padding-right: 10px;
}
.custom-nav .nav-item {
    font-size: 18px; /* Ajusta el tamaño de las barras para que coincidan con el tamaño del texto */
}
/*Container Top*/
.top-271 {
    margin-top: 16.963rem;
}
.top-320 {
    margin-top: 20rem;
}
.top-55 {
    margin-top: 3.438rem;
}
.top-234 {
    margin-top: 14.625rem;
}
.top-167 {
    padding-top: 10.438rem;
}
.top-383 {
    margin-top: 23.938rem;
}
.top-168 {
    padding-bottom: 7.375rem;
}
.top-87 {
    padding-top: 5.438rem;
}
.top-113 {
    margin-top: 7.063rem;
}
.top-44 {
    padding-top: 2.75rem;
}
.mg-72 {
    padding-bottom: 4.5rem;
}
.mg-249 {
    padding-bottom: 15.563rem;
}
.mg-70 {
    padding-bottom: 4.375rem;
}
.w-1056 {
    width: 66.01rem;
}
.w-63 {
    width: 63rem;
}
.w-372 {
    max-width: 23.25rem; /* Ancho máximo */
    width: 100%; /* Ancho completo en pantallas más pequeñas */
    margin-top: 1rem;
    text-align: center; /* Centrar texto */
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
    margin-top: 2.375rem;
}
.w-12 {
    width: 12rem;
}
/*Background - Proyectos*/
.bg-image {
    background-image: url('../img/Background.png');
    background-size: cover; /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}
/*Background - Contact*/
.bg-contact {
    background-image: url('../img/bg-contact.png');
    background-size: cover; /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}
/*Border*/
.divider {
    margin-top: -1.625rem;
    width: 9rem;
    border: none;
    height: 0.5rem;
    background-color: #000;
    opacity: 1;
    margin-left: 0.5rem;
}
.divider-service {
    width: 100%;
    border: none;
    height: 0.5rem;
    background-color: #8F9194;
    opacity: 1;
    margin-left: 0.5rem;
}
.divider-design {
    width: 5.875rem;
    border: none;
    height: 0.2rem;
    background-color: white;
    opacity: 1;
}
/*Href*/
.a-href {
    color: white;
    text-decoration: none;
}
/*Margin*/
.mr-05 {
    margin-left: 0.5rem;
}
.gap-93 {
    gap: 5.819rem;
}
/*Icono de Vision y Mision*/
.icon-inc {
    width: 1rem;
    height: 0.688rem;
}
/*Color de vision y mision*/
.mision {
    color: #BED73B;
}
.vision {
    color: #D2B52F;
}
/*Contenedores Grid*/
.bg-gray {
    background-color: #8F9194;
    justify-content: center;
    text-align: center;
    align-content: center;
}
.bg-orange {
    background-color: #F27321;
    justify-content: center;
    text-align: center;
}
/*SLIDER*/
.item-img img {
    height: 350px;
    width: 100%;
}
.slider {
    overflow: hidden; /* Oculta cualquier elemento que sobresalga */
    margin-left: auto;
    margin-right: auto;
}
.slick-slide {
    margin-left: 0; /* Elimina cualquier margen izquierdo en los elementos */
    margin-right: 0; /* Asegura que no haya margen entre los elementos */
    padding: 10px; /* Elimina cualquier relleno */
}
.slick-list {
    padding-left: 0; /* Evita padding del lado izquierdo */
}
/*Arrows*/
.slick-prev, .slick-next {
    color: #fff; /* Flechas blancas */
    border: none;
    padding: 10px;
    font-size: 20px;
    z-index: 10;
}
.slick-prev {
    left: 40px; /* Ajusta la posición según el diseño */
}
.slick-next {
    right: 70px; /* Ajusta la posición según el diseño */
}
.img-arrow {
    z-index: 1;
    position: absolute;
}

.slick-prev:before {
    content: '';
}
.slick-next:before {
    content: '';
}
/*Form Contact*/
.submit-form {
    color: white;
    font-size: 2.368rem;
    border: 1px solid transparent;
    background-color: transparent;
}
.alert-message {
    color: white;
    font-size: 1rem;
}
.info-contact {
    color: white;
    font-size: 1rem;
}
/*Container Footer*/
.container-footer {
    background-color: #58595B;
}
/*Media Querys*/
@media (max-width: 1570px) and (min-width: 769px) {
    .fs-39 {
        font-size: 1.445rem; /* Ajusta el tamaño a lo que necesites para laptops */
    }
    .w-372 {
        max-width: 23.25rem; /* Ancho máximo */
        width: 100%; /* Ancho completo en pantallas más pequeñas */
        padding-top: 1.50rem;
        text-align: center; /* Centrar texto */
        padding-left: 1rem; /* Padding a la izquierda */
        padding-right: 1rem; /* Padding a la derecha */
        box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
        margin-top: 1rem;
    }
    .fs-21 {
        font-size: 1rem;
    }
    .info-contact {
        font-size: 0.80rem;
    }
    .item-img {
        width: 25%;
    }
    .slick-prev {
        left: 40px; /* Ajusta la posición según el diseño */
    }
    .slick-next {
        right: 70px; /* Ajusta la posición según el diseño */
    }
    .item-img img {
        height: 250px;
        width: 100%;
    }
    .submit-form {
        color: white;
        font-size: 2rem;
        border: 1px solid transparent;
        background-color: transparent;
    }
    .alert-message {
        color: white;
        font-size: 0.80rem;
    }
}
@media screen and (min-width: 0px) and (max-width: 575px) {
    .top-271 {
        margin-top: 8.4815rem;
    }
    .fs-137 {
        font-size: 4.2985rem;
    }
    .w-63 {
        width: 100%;
        margin-left: 0;
    }
    .fs-25 {
        font-size: 1rem;
        text-align: justify;
    }
    .img-pixel {
        text-align: center;
    }
    .divider {
        margin-top: 0;
        margin-left: 0;
    }
    .gap-93 {
        gap: 2rem;
    }
    .divider-service {
        display: none;
    }
    .fs-85 {
        font-size: 2.6765rem;
    }
    .bg-gray {
        height: 21.875rem;
    }
    .bg-orange {
        height: 21.875rem;
    }
    .top-320 {
        margin-top: 10rem;
    }
    .img-avatar {
        width: 100%;
    }
    .slick-prev {
        left: 10px;
    }
    .slick-next {
        right: 50px;
    }
    .top-167 {
        padding-top: 5.438rem;
    }
    .mg-249 {
        padding-bottom: 5.563rem;
    }
    .mg-70 {
        padding-bottom: 2.375rem;
    }
    .top-383 {
        margin-top: 3.938rem;
    }
    .top-168 {
        margin-bottom: 3.375rem;
    }
    .top-271 {
        margin-top: 6.963rem;
    }
    .w-12 {
        width: 100%;
    }
}