@import "bootstrap.min.css";
@import "bootstrap-icons.min.css";
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: Archivo, sans-serif;
    font-size: 14px;
    background: #0f0f0f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Kanit", sans-serif;
}

h2 {
    font-weight: 100;
}

h3,
h4,
h5,
h6 {
    font-weight: 300;
}

:root {
    --color-principal: rgba(102, 255, 0, 1);
    --color-principal-rgb: 102, 255, 0;
}

.logo-header {
    width: 175px;
    height: auto;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-close {
    background-color: white;
    /* O cualquier color que prefieras */
    opacity: 1;
    /* Asegura que la opacidad no esté afectando la visibilidad */
}

.offcanvas {
    width: 300px;
    /* Ajusta el ancho según tus necesidades */
}


a.nav-link {
    color: white;
}

a.nav-link:hover,
a.nav-link.selected {
    color: var(--color-principal);
}


a.link-primary:hover {
    color: var(--color-principal) !important;
}

.selected {
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 10px;
}

.min-vh-95 {
    min-height: 95vh;
}

.min-vh-80 {
    min-height: 80vh;
}

.bg-section {
    display: block;
    position: relative;
    /* Necesario para posicionar el pseudo-elemento */
    overflow: hidden;
    /* Oculta el desbordamiento del pseudo-elemento */
    border: 0;
    transition: border .3s ease-in-out;
}

.bg-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    backdrop-filter: blur(0px);
    transition: backdrop-filter .3s ease-in-out;
}

.bg-section.hovered::after {
    backdrop-filter: blur(10px);
}

.bg-section-content {
    position: relative;
    /* Asegura que el contenido esté encima del pseudo-elemento */
    z-index: 1;
    /* Asegura que el contenido esté encima del pseudo-elemento */
    padding: 20px;
    /* Espacio para el contenido */
    /* Estilos adicionales para el contenido */
}

p.paragraph {
    margin: auto auto auto auto;
    font-family: 'Archivo', sans-serif;
    color: #fff;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 1;
    transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s;
}

p.blockquote {
    font-size: 1.3rem;
}

.blockquote-footer {
    color: var(--color-principal);
}

.contenedor-proyecto {
    position: relative;
}

.bg-proyecto {
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    height: 400px;
    width: 80%;
}

.tituloyservicios {
    transform: translate(0%, -85px);
}

.img-proyecto {
    position: absolute;
    left: 50%;
    width: 300px;
    max-height: 200px;
    transform: translate(-50%, -25%);
}

.shine {
    box-shadow: 0 0 25px rgba(57, 255, 20, .3);
    border: 1px solid rgba(57, 255, 20, 1)
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: transparent !important;
}

.form-select option {
    background-color: black !important;
    /* Un color oscuro */
    color: white !important;
}


.form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: 0;
    background-color: #212529 !important;
    /* Mantener el fondo oscuro al enfocar */
    color: white !important;
}


.color-nuke {
    color: var(--color-principal)
}

/* Capa oscura */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Oscurecer con un fondo negro con opacidad */
    z-index: 1;
    /* Asegurarse de que la capa esté encima de la imagen */
}

#calltoaction {
    background: linear-gradient(45deg, rgba(4, 63, 49, 0.5)50%, rgba(0, 0, 150, 0.3));
}

#calltoaction>div>div>a {
    font-size: 100px;
}

#calltoaction>div>div>span {
    font-size: 65px;
}

.hover-scale {
    transition: transform 0.3s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* Estilos para inputs y selects */
.form-control,
.form-select {
    background-color: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.form-select option {
    background-color: var(--color-dark);
    color: white;
}

.form-floating>label {
    color: rgba(255, 255, 255, 0.6);
}

/* Estilos para inputs y selects en focus */
.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--color-principal) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-principal-rgb), 0.25) !important;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-select:focus~label {
    color: var(--color-principal) !important;
    opacity: 1;
}

.form-control:focus::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-select:focus option {
    background-color: var(--color-dark);
    color: white;
}

/* Accessibility: Improve contrast for muted text (WCAG AA) */
.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.form-control:focus::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-select:focus option {
    background-color: var(--color-dark);
    color: white;
}

/* Accessibility: Improve contrast for muted text (WCAG AA) */
.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}