html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

@font-face {
    font-family: "DM_Sans";
    src: url("../font/DM_Sans/DMSans-Light.ttf");
    font-weight: 300;
}

.fw-light {
    font-weight: 300;
}

@font-face {
    font-family: "DM_Sans";
    src: url("../font/DM_Sans/DMSans-Regular.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "DM_Sans";
    src: url("../font/DM_Sans/DMSans-Medium.ttf");
    font-weight: 500;
}

.fw-medium {
    font-weight:500;
}

.fw-transition {
    transition: color 0.3s ease; /* Transición suave durante 0.3 segundos */
}

    .fw-transition:hover {
        color: #FFC107; /* Cambiar el color a rojo cuando el cursor esté sobre el enlace */
    }

@font-face {
    font-family: "DM_Sans";
    src: url("../font/DM_Sans/DMSans-SemiBold.ttf");
    font-weight: 600;
}

.fw-semibold{
    font-weight:600;
}

@font-face {
    font-family: "DM_Sans";
    src: url("../font/DM_Sans/DMSans-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "DM_Sans";
    src: url("../font/DM_Sans/DMSans-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "DM_Sans";
    src: url("~/font/DM_Sans/DMSans-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}


body {
    margin-bottom: 60px;
    font-family: DM_Sans, sans-serif;
    
}

/*Titulo animado*/
.animated-title {
    border-right: .05em solid black;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.animated-title.loaded.finished {
    border-right: none;
}


.animated-title.loaded {
    width: auto;
    animation: typing 1.5s steps(20, end);
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%;
        border-right: none; /* quitar línea al final */
    }
}

/* Estilos para tamaño de letra en desktop */
.fs-title {
    font-size: 56px;
}

/* Estilos para tamaño de letra en tablet */
@media only screen and (max-width: 768px) {
    .fs-title {
        font-size: 42px;
    }
}

/* Estilos para tamaño de letra en celular */
@media only screen and (max-width: 480px) {
    .fs-title {
        font-size: 34px;
    }
}

/*Inicio de sesion*/
.nav-link-s {
    padding: 1.3em 3em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: #ffc107;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(255, 193, 7, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    display: inline-block; /* Para que el enlace se comporte como un bloque */
    text-decoration: none; /* Para eliminar el subrayado del enlace */
}

.nav-link-s:hover {
    background-color: #f8b400;
    box-shadow: 0px 15px 20px rgba(255, 193, 7, 0.4);
    color: #fff;
    transform: translateY(-7px);
}

.nav-link-s:active {
    transform: translateY(-1px);
}

/* Header efecto */
.nav-item1 {
    display: inline-block;
}

.nav-link1 {
    position: relative;
    text-decoration: none;
    color: #000;
}

.nav-link1::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: transparent;
    transition: width 0.3s, background-color 0.3s;
}

.nav-item1:hover .nav-link {
    color: #ffc107; /* Cambia el color del texto al pasar el mouse */
}

.nav-item1:hover .nav-link::after,
.nav-item1.active .nav-link::after {
    width: 100%;
    color: #ffc107;
    background-color: #ffc107; /* Cambia el color del subrayado al pasar el mouse y cuando está activo */
    transition: width 0.3s, background-color 0.3s;
}


/*Estilos de las cartas de nuestros servicios y contactanos*/
.fontCardSmall {
    font-size: 14px;
}

.fontCardServicesBody {
    font-size: 16px;
}

.cardServices {
    border-radius: 24px;
}

.cardServicesBodyGreen {
    border-radius: 16px;
    background-color: #ECFDF8;
    border: 1px solid #ECFDF8;
}

.cardServicesBodyRed {
    border-radius: 16px;
    background-color: #FEF1F2;
    border: 1px solid #FEF1F2;
}

.cardContact {
    border-radius: 16px;
    background-color: #F3F1E4;
    border: 1px solid #F3F1E4;
}

.cardAboutUs {
    border-top-left-radius: 46px;
    border-bottom-right-radius: 46px;
    background-color: #F4F7FC;
    border: 1px solid #F4F7FC;
}

.cardHover:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agregar una sombra al hacer hover */
    transform: translateY(-5px); /* Elevar el card ligeramente al hacer hover */
}

/* Estilo para dispositivos de escritorio */
@media (min-width: 768px) {
    .responsive-image {
        width: 420px;
        height: 420px;
    }
}

/* Estilo para dispositivos mviles */
@media (max-width: 767px) {
    .responsive-image {
        width: 320px;
        height: 260px;
    }
}

/*Css para login*/
/* Icono de ojo tachado por defecto */
/* Establece un ancho fijo para el icono */
.toggle-password::before {
    content: "\f06e"; /* Icono de ojo normal por defecto */
    width: 1em; /* Ancho fijo para el icono */
    display: inline-block;
}

/* Animacin de transicin */
.toggle-password {
    transition: transform 0.2s;
    display: inline-block; /* Asegura que el icono no altere el tamao del formulario */
    cursor: pointer;
}


/* Reseting */
.wrapper {
    max-width: 560px;
    min-width:420px;
    min-height: 620px;
    padding: 40px 30px 30px 30px;
    background-color: rgba(183, 155, 0, 0.09);
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}

.logo {
    width: 80px;
    margin: auto;
}

.logo img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaa7, -8px -8px 15px #fff;
}

.wrapper .name {
    font-weight: 600;
    font-size: 3rem;
    letter-spacing: 1.3px;
    padding-left: 10px;
    color: black;
}

.wrapper .form-field input {
    width: 100%;
    display: block;
    border: none;
    outline: none;
    background: none;
    font-size: 1.2rem;
    color: #666;
    padding: 10px 15px 10px 10px;
    /* border: 1px solid red; */
}

.wrapper .form-field {
    padding-left: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}

.wrapper .form-field .fas {
    color: #555;
}

.wrapper .btn {
    box-shadow: none;
    width: 100%;
    height: 40px;
    background-color: #1F2937;
    color: #fff;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1.3px;
}

.wrapper .btn:hover {
    background-color: #1F2937;
}

.wrapper a {
    text-decoration: none;
    font-size: 0.8rem;
    color: #03A9F4;
}

.wrapper a:hover {
    color: #039BE5;
}

@media(max-width: 380px) {
    .wrapper {
        margin: 30px 20px;
        padding: 40px 15px 15px 15px;
    }
}

/*CSS del estado*/

.progress-container {
    width: 700px;
    position: relative;
    margin: 20px auto;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.status-point {
    width: 10px;
    height: 10px;
    background-color: #575757;
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.point-number {
    font-size: 12px;
    background-color: #888;
    color: #fff;
    clip-path: polygon(-5px 0px, 140% 0px, 50% 100%);
    border-radius: 40px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: -30px; /* Ajusta esta propiedad para separar ms los nmeros */
    left: 50%;
    transform: translateX(-50%);
}

.status-label {
    font-size: 12px;
    width: 100px;
    text-align: justify;
    position: relative;
}

.progress-bar {
    height: 10px; /* Ajusta la altura segn tus preferencias para hacerla ms angosta */
    background-color: #f9B208;
    border-radius: 5px; /* Ajusta el radio de borde para mantener un aspecto agradable */
    transition: width 0.5s, background-color 0.5s;
}

.status-text-d {
    font-size: 13px;
    margin-top: 10px;
}

.status-t-general {
    font-size: 13px;
    margin-top: 10px;
}

.bt_estatus {
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
}

.status-container {
    display: flex;
    justify-content: center;
}

/* Para pantallas mas pequenas, ajusta los tamanos de fuente y dimensiones */
@media (max-width: 768px) {
    .progress-container {
        width: 100%;
        margin: 20px auto;
    }

    .status-point {
        width: 15px;
        height: 15px;
    }

    .point-number {
        font-size: 10px;
        top: -20px; /* Ajusta esta propiedad para separar ms los nmeros */
    }

    .status-label {
        font-size: 10px;
        width: auto;
        text-align: center;
        margin-top: 5px;
    }

    .progress-bar {
        height: 5px; /* Ajusta la altura segn tus preferencias para hacerla ms angosta */
    }

    .status-text-d {
        font-size: 10px;
        margin-top: 5px;
    }
    .status-t-general {
        font-size: 10px;
        margin-top: 5px;
    }

    .bt_estatus {
        padding: 5px 10px;
        font-size: 12px;
        margin: 5px;
    }
}

.btn-sm-custom {
    font-size: 12px; /* Ajusta el tamao de fuente segn tus preferencias */
    padding: 0.25rem 0.5rem; /* Ajusta el relleno (padding) segn tus preferencias */
}

/*Footer vertical celular*/
/* Media Query para pantallas ms pequeas, por ejemplo, telfonos mviles */
@media (max-width: 767px) {
    /* Cambia la direccin del flujo flexbox a columna */
    .flex-column-footer {
        flex-direction: column;
    }

        /* Elimina los mrgenes derechos de los elementos interiores para evitar superposiciones */
        .flex-column-footer .d-flex {
            margin-right: 0;
        }
}

/*Header iconos*/
/* Oculta el texto en tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-nav .nav-text {
        display: none;        
    }
}

/*Erro de tu evento*/
#mensajeError {
    padding: 12px 16px;
    font-weight: 500;
    border-radius: 8px;
    background-color: #fff9e9;
    color: #212120;
    font-size: 18px;
    display: flex;
    align-items: center;
}

    #mensajeError span {
        font-size: inherit;
    }

/* Estilos para pantallas de dispositivos móviles */
@media (max-width: 767px) {
    #mensajeError {
        font-size: 16px;
        padding: 8px 12px;
    }
}

/*BToton home*/

.btn-custh {
    width: 180px;
}

@media (max-width: 767px) {
    .btn-custh {
        width: 60%;
    }
}

/*margen div sertvicios*/
.card-servicio {
    margin-bottom: 20px; /* Puedes ajustar este valor según la separación deseada */
}

.card-filmacion {
    margin-bottom: 20px; /* Puedes ajustar este valor según la separación deseada */
}

.card-rrhh {
    margin-bottom: 20px; /* Puedes ajustar este valor según la separación deseada */
}

#descripciotitle {
    color: #FFC107;
    font-size: 14px;
    font-weight:bold
}

/*loader*/
/* Cargador personalizado */
#page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Para centrar verticalmente */
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#h3 {
    color: white;
    position: absolute;
    top: 230px;
    font-size: 1.5rem;
}

#ring {
    width: 190px;
    height: 190px;
    border: 1px solid transparent;
    border-radius: 50%;
    position: absolute;
}

    #ring:nth-child(1) {
        border-bottom: 8px solid rgb(255, 141, 249);
        animation: rotate1 2s linear infinite;
    }

@keyframes rotate1 {
    from {
        transform: rotateX(50deg) rotateZ(110deg);
    }

    to {
        transform: rotateX(50deg) rotateZ(470deg);
    }
}

#ring:nth-child(2) {
    border-bottom: 8px solid rgb(255, 65, 106);
    animation: rotate2 2s linear infinite;
}

@keyframes rotate2 {
    from {
        transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
    }

    to {
        transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
    }
}

#ring:nth-child(3) {
    border-bottom: 8px solid rgb(0, 255, 255);
    animation: rotate3 2s linear infinite;
}

@keyframes rotate3 {
    from {
        transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
    }

    to {
        transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
    }
}

#ring:nth-child(4) {
    border-bottom: 8px solid rgb(252, 183, 55);
    animation: rotate4 2s linear infinite;
}

@keyframes rotate4 {
    from {
        transform: rotateX(70deg) rotateZ(270deg);
    }

    to {
        transform: rotateX(70deg) rotateZ(630deg);
    }
}