/* Variables */
:root {
    /* Colors */
    --primary-color: 251 160 227 / ;
    --secondary-color: 83 53 75 / ;
    --tertiary-color: 209 198 206 / ;
    --accent-color: 190 253 115 / ;
    --dark-color: 5 5 5 / ;
    --gray-color: 28 28 28 / ;
    --light-color: 254 244 251 / ;

    /* Fonts */
    --primary-font: "Onest";
    --full-size-font: 18px;
    --sm-size-font: 16px;
}

/* Reset */
html {
    font-size: var(--full-size-font);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a,
button {
    border: none;
    text-decoration: none;
    outline: none;
    background: transparent;
    display: inline-flex;
    border-radius: 1px;
    outline: 2px dashed transparent;
    outline-offset: 5px;
    transition: outline ease-in-out .1s;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
}

a:focus-visible {
    outline: 2px dashed rgb(var(--accent-color)1);
    outline-offset: 5px;
    transition: outline ease-in-out .3s;
}

body {
    font-family: var(--primary-font), system-ui;
    line-height: 160%;
    color: rgb(var(--tertiary-color)1);
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
    background: rgb(var(--dark-color)1);
    /* background: radial-gradient(rgb(var(--gray-color)1) 0%, rgb(var(--dark-color)1) 100%); */
}

body>main {
    background: radial-gradient(rgb(var(--gray-color)1) 0%, rgb(var(--dark-color)1) 100%);
}

p {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 1rem;
}

p {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.one-line {
    margin: 0;
    padding: 0;
    line-height: normal;
}

p.one-line {
    margin: 0;
    padding: 0;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    color: rgb(var(--light-color)1);
    line-height: 1.2;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    opacity: .6;
    font-weight: 600;
    font-style: italic;
}

h1 {
    font-size: 2.667rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
}

h3 {
    font-size: 1.333rem;
    font-weight: 700;
}

strong {
    font-size: inherit;
    font-weight: 800;
    font-style: inherit;
    line-height: inherit;
    color: rgb(var(--accent-color)1);
}

section {
    padding-block: 150px;
}

/* Components */

.img-parallax {
    transition: transform 0.2s ease;
}

/* Link */
a {
    display: inline-flex;
    width: fit-content;
    font-size: 1rem;
    color: rgb(var(--primary-color).7);
    font-weight: 400;
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    text-underline-position: from-font;
    transition: color ease-in-out .1s, text-decoration ease-in-out .1s;
}

a.small-link {
    font-size: 0.778rem;
    text-decoration-thickness: 1.2px;
}

a:visited {
    color: rgb(var(--secondary-color)1);
}

a.fix-link {
    color: rgb(var(--primary-color).7);
}

a:hover {
    color: rgb(var(--primary-color)1);
    transition: color ease-in-out .3s, text-decoration ease-in-out .3s;
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    text-underline-position: from-font;
}

a.no-hover:hover {
    color: inherit;
    text-decoration: none;
    text-decoration-line: none;
}

/* Botones */
.krv-primary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 12px;
    border: 2px solid rgb(var(--primary-color)1);
    outline: 3px solid transparent;
    background: rgb(var(--primary-color).4);
    box-shadow: 0px 0px 20px 0px rgb(var(--primary-color).25);
    font-family: var(--primary-font), system-ui;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: rgb(var(--light-color)1);
    text-decoration: none!important;
    text-decoration-line: none!important;
    transition: background ease-in-out .1s, color ease-in-out .1s, box-shadow ease-in-out .1s;
}

.krv-primary-btn:visited {
    color: rgb(var(--light-color)1);
}

.krv-primary-btn:hover {
    background: rgb(var(--primary-color).6);
    box-shadow: 0px 0px 20px 0px rgb(var(--accent-color).25);
    color: rgb(var(--light-color)1);
    transition: background ease-in-out .3s, color ease-in-out .3s, box-shadow ease-in-out .3s;
}

.krv-primary-btn:focus-visible {
    outline: 3px solid rgb(var(--accent-color)1);
    outline-offset: 0;
    transition: outline ease-in-out .3s;
}

.krv-primary-btn.disabled {
    opacity: .2;
    cursor: none;
    pointer-events: none;
}

/* Title */
.title {
    display: flex;
    flex-direction: column;
}

.title .line {
    width: 164px;
    height: 2px;
    background: rgb(var(--accent-color)1);
    margin-top: 8px;
}

/* Pagination */
.krv-pagination {
    display: flex;
    gap: 20px;
}

.krv-pagination a, .krv-pagination span {
    display: flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 9999px;
    border: 2px solid rgb(var(--primary-color)1);
    background: rgb(var(--primary-color).4);
    box-shadow: 0px 0px 20px 0px rgb(var(--primary-color).25), 0px 0px 40px 0px rgb(var(--primary-color).25);
    transition: background ease-in-out .1s, box-shadow ease-in-out .1s;
}

.krv-pagination a:hover {
    background: rgb(var(--primary-color).6);
    box-shadow: 0px 0px 20px 0px rgb(var(--primary-color).25), 0px 0px 40px 0px rgb(var(--accent-color).25);
    transition: background ease-in-out .3s, box-shadow ease-in-out .3s;
}

.krv-pagination a:focus-visible {
    outline: 3px solid rgb(var(--accent-color)1);
    outline-offset: 0;
}

.krv-pagination a.disabled, .krv-pagination span.disabled {
    opacity: .2;
}

/* Header */
.krvdev-header {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(var(--dark-color)0.4);
    box-shadow: 0px 1.5px 0px 0px rgb(var(--gray-color)1);
    backdrop-filter: blur(48px);
    z-index: 1000;

}

.krvdev-header .mobile-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.krvdev-header .mobile-header .toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    width: 34px;
    height: 30px;
    transform-origin: right;
    z-index: 1001;
}

.krvdev-header .mobile-header .toggle-btn div {
    transform-origin: right;
    width: 80%;
    height: 2px;
    border-radius: 999px;
    background: rgb(var(--light-color)1);
    transition: width ease-in-out .1s, background ease-in-out .1s, opacity ease-in-out .1s, transform ease-in-out .1s;
}

.krvdev-header .mobile-header .toggle-btn div:first-child {
    width: 100%;
    background: rgb(var(--light-color)1);
    transition: width ease-in-out .1s, background ease-in-out .1s, opacity ease-in-out .1s, transform ease-in-out .1s;
}

.krvdev-header .mobile-header .toggle-btn div:last-child {
    width: 60%;
    background: rgb(var(--light-color)1);
    transition: width ease-in-out .1s, background ease-in-out .1s, opacity ease-in-out .1s, transform ease-in-out .1s;
}

.krvdev-header .mobile-header .toggle-btn:hover div {
    background: rgb(var(--primary-color)1);
    width: 100%;
    transition: width ease-in-out .3s, background ease-in-out .3s, opacity ease-in-out .3s, transform ease-in-out .3s;
}

.krvdev-header .mobile-header .toggle-btn.open div:first-child {
    width: 100%;
    transform: rotate(-45deg);
    transition: width ease-in-out .3s, transform ease-in-out .3s, background ease-in-out .3s;
}

.krvdev-header .mobile-header .toggle-btn.open div:nth-child(2) {
    width: 100%;
    opacity: 0;
    transition: width ease-in-out .3s, transform ease-in-out .3s, background ease-in-out .3s, opacity ease-in-out .3s;
}

.krvdev-header .mobile-header .toggle-btn.open div:last-child {
    width: 100%;
    transform: rotate(45deg);
    transition: width ease-in-out .3s, transform ease-in-out .3s, background ease-in-out .3s;
}

.krvdev-header .mobile-header .close-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 30px;
    height: 30px;
    gap: 8.5px;
}

.krvdev-header .mobile-header .close-btn div {
    width: 100%;
    height: 2.1px;
    border-radius: 9999px;
    background: rgb(var(--light-color)1);
    transform-origin: right;
    transition: transform ease-in-out .1s, width ease-in-out .1s, opacity ease-in-out .1s, background ease-in-out .1s;
}

.krvdev-header .mobile-header .close-btn:hover div:first-child {
    background: rgb(var(--primary-color)1);
    transform: rotate(-45deg);
    transition: transform ease-in-out .3s, width ease-in-out .3s, opacity ease-in-out .3s;
}

.krvdev-header .mobile-header .close-btn:hover div:nth-child(2) {
    background: rgb(var(--primary-color)1);
    opacity: 0;
    transition: transform ease-in-out .3s, width ease-in-out .3s, opacity ease-in-out .3s, background ease-in-out .3s;
}

.krvdev-header .mobile-header .close-btn:hover div:last-child {
    background: rgb(var(--primary-color)1);
    transform: rotate(45deg);
    transition: transform ease-in-out .3s, width ease-in-out .3s, opacity ease-in-out .3s, background ease-in-out .3s;
}


.krvdev-header .mobile-header .menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    padding-top: 100px;
    background: rgb(var(--dark-color)1);
    transition: transform ease-in-out .2s;
    transform: translateX(100%);
    transform-origin: right;
    z-index: -1;
}

.krvdev-header .mobile-header .menu .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* .krvdev-header .mobile-header .menu .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
} */

.krvdev-header .mobile-header .menu.open {
    transition: transform ease-in-out .3s;
    transform: translateX(0);
}

.krvdev-header .mobile-header .menu .nav-ul {
    display: flex;
    flex-direction: column;
}

.krvdev-header .mobile-header .menu .options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.krvdev-header .desktop-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.krvdev-header .logo, .krvdev-footer .logo {
    height: 50px;
    width: auto;
}

.krvdev-header .logo a, .krvdev-footer .logo a {
    display: flex;
    gap: 16px;
    align-items: center;
    height: 100%;
    width: auto;
}

.krvdev-header .logo a svg, .krvdev-footer .logo a svg {
    height: 100%;
    width: auto;
    color: rgb(var(--light-color)1);
}

.krvdev-header .logo a span, .krvdev-footer .logo a span {
    color: rgb(var(--light-color)1);
    font-size: 2rem;
    font-weight: 500;
}

.krvdev-header .nav-menu .nav-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 40px;
}

.krvdev-header .nav-menu .nav-ul li a {
    display: inline-flex;
    padding-top: 5.6px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    font-family: var(--primary-font), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: rgb(var(--light-color)1);
    text-decoration: none;
    transition: color ease-in-out .1s;
}

.krvdev-header .nav-menu .nav-ul li.current-menu-item a {
    color: rgb(var(--accent-color)1);
    transition: color ease-in-out .3s;
    
}

.krvdev-header .nav-menu .nav-ul li.current-menu-item a div {
    width: 100%;
    background: rgb(var(--accent-color)1);
    transition: background ease-in-out .3s, width ease-in-out .3s;
}

.krvdev-header .nav-menu .nav-ul li a div {
    width: 0%;
    height: 1.6px;
    background: rgb(var(--light-color)1);
    transition: width ease-in-out .1s, color ease-in-out .1s;
}

.krvdev-header .nav-menu .nav-ul li a:hover {
    color: rgb(var(--primary-color)1);
    transition: color ease-in-out .3s;
}

.krvdev-header .nav-menu .nav-ul li a:hover div {
    width: 100%;
    background: rgb(var(--primary-color)1);
    transition: width ease-in-out .3s, background ease-in-out .3s;
}

.krvdev-header .options {
    display: flex;
    align-items: center;
    gap: 24px;
}

.krvdev-header .options .languages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.krvdev-header .options .languages div {
    width: 1.6px;
    height: 16px;
    background: rgb(var(--primary-color)1);
}

.krvdev-header .options .languages button#spanish, button#english {
    display: inline-flex;
    width: 28px;
    height: auto;
    aspect-ratio: 3/2;
    filter: saturate(0);
    transition: filter ease-in-out .1s, box-shadow ease-in-out .1s;
}

.krvdev-header .options .languages button#spanish svg, button#english svg {
    width: 100%;
    height: auto;
}

.krvdev-header .options .languages button#spanish:hover, button#english:hover {
    filter: saturate(1);
    box-shadow: 0px 0px 20px rgba(190, 253, 115, 0.25), 0px 0px 40px rgba(251, 160, 227, 0.25);
    transition: filter ease-in-out .3s, box-shadow ease-in-out .3s;
}

.krvdev-header .options .languages button#spanish.active, button#english.active {
    filter: saturate(1);
    transition: filter ease-in-out .3s, box-shadow ease-in-out .3s;
}

@media (max-width: 1024px) {  
    .desktop-header { /* Ocultamos el header de Desktop cuando la pantalla es mas igual o mas pequeña que 1024px */
        display: none!important;
    }

    .krvdev-header {         /* Y en este cado le damos position fixed al header principal cuando la pantalla es mas igual o mas pequeña a  1024px (En este caso el header no usa position fixed pero en mobile si lo necesitamos)*/
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    body {
        padding-top: 100px
    }
}

@media (min-width: 1024px) { /* Ocultamos el header de mobile cuando la pantalla es mas igual o mas grande que 1024px */
    .mobile-header {
        display: none!important;
    }
}

/* Proyects */
.proyect-card {
    justify-content: center;
    align-items: center;
}

.proyect-card .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center 0;
    border-radius: 12px;
    transition: object-position ease-in-out 1s;
}

.proyect-card .image img:hover {
    object-position: center 100%;
    transition: object-position ease-in-out 1.5s;
}

.proyect-card .content>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.proyect-card .content>div .proyect-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.proyect-card .content>div>p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.proyect-card .content>div .proyect-title .categories, aside .other-projects article .proyect-title .categories, .single-proyecto .hero .categories {
    display: flex;
    gap: 10px;
}

.technologies {
    display: flex;
    gap: 10px;
}

.technologies a {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 24px;
    border: 1px solid rgba(39, 48, 53, 1);
    background: rgba(39, 48, 53, 0.40);
    font-size: 0.778rem;
    line-height: 1;
    text-decoration: none;
    text-decoration-line: none;
    text-underline-offset: 0;
    color: rgb(var(--light-color)1);
    transition: background ease-in-out .1s;
}

.technologies a:hover {
    background: rgba(39, 48, 53, 1);
    transition: background ease-in-out .3s;
}

.technologies a.html::before {
    content: url(../images/html.svg);
    width: 20px;
    height: 20px;
}

/* .technologies a.css {
    border: 1px solid rgba(21, 114, 182, 1);
    background: rgba(21, 114, 182, 0.40);
} */

.technologies a.css::before {
    content: url(../images/css.svg);
    width: 20px;
    height: 20px;
}

/* .technologies a.wordpress {
    border: 1px solid rgba(39, 48, 53, 1);
    background: rgba(39, 48, 53, 0.40);
} */

.technologies a.wordpress::before {
    content: url(../images/wordpress.svg);
    width: 20px;
    height: 20px;
}

/* Proyects Single */
.single-proyecto .hero .things {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.single-proyecto .hero .things div {
    display: flex;
    gap: 4px;
    align-items: center;
}

.single-proyecto .hero span {
    color: rgb(var(--light-color)1);
}

.single-proyecto .hero .things img {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
}

.single-proyecto .hero .things .servicio.desarrollo-web .branding, .single-proyecto .hero .things .servicio.desarrollo-web .ambos {
    display: none;
}

.single-proyecto .hero .things .servicio.branding .desarrollo-web, .single-proyecto .hero .things .servicio.branding .ambos {
    display: none;
}

.single-proyecto .hero .things .servicio.ambos .desarrollo-web, .single-proyecto .hero .things .servicio.ambos .branding {
    display: none;
}

.single-proyecto .about {
    background: rgb(var(--dark-color)1);
}

.single-proyecto .about img {
    height: 240px;
    width: auto;
}

.single-proyecto aside {
    margin-block: 150px;
}

.single-proyecto aside .other-projects {
    display: flex;
    flex-direction: column;
    gap: 54px;
    padding: 0 0 0 27px;
    border-left: 2px solid rgb(var(--tertiary-color).2);
}

.single-proyecto aside .other-projects article {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-proyecto aside .other-projects article img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center 0;
    border-radius: 12px;
    transition: object-position ease-in-out 1s;
}

.single-proyecto aside .other-projects article img:hover {
    object-position: center 100%;
    transition: object-position ease-in-out 1.5s;
}



/* Bento Cards */
.bento-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    /* aspect-ratio: 29/28; */
    background: linear-gradient(to bottom, rgb(var(--gray-color)1), transparent);
    padding: 40px;
    padding-bottom: 80px;
    border-radius: 20px;
    gap: 28px;
}

.bento-card>img {
    width: 80px;
    height: 80px;
}

.bento-card>div {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 1024px) {  
    /* .bento-card, .bento-card.horizontal {
        height: auto;
        aspect-ratio: 29/28;
    } */
}

.h-card {
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: 633/192;
    flex-direction: column;
    gap: 18px;
    border-radius: 20px;
    padding: 28px;
    background: linear-gradient(to right, rgb(var(--gray-color)1), rgb(var(--gray-color)0));
}

.h-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Form */
.wpforms-hidden {
    display: none;
}

.krv-form {
    padding-bottom: 50px;
    background: linear-gradient(to bottom, rgb(var(--dark-color)0) 0%, rgb(var(--dark-color)1) 60%);
    background: rgb(var(--dark-color)1);
}

.krv-form .wpforms-field-container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.krv-form .wpforms-field-container>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

@media (min-width: 992px) {
    .krv-form .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

.krv-form .wpforms-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.krv-form .wpforms-field label {
    font-size: 1.333rem;
    font-weight: 700;
    line-height: normal;
    color: rgb(var(--light-color)1);
}

.krv-form .wpforms-field label .wpforms-required-label {
    font-size: 1.333rem;
    font-weight: 700;
    line-height: normal;
    color: rgb(var(--accent-color)1);
}

.krv-form .wpforms-field .wpforms-field-large {
    display: flex;
    height: 40px;
    padding: 0 10px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1.5px solid rgb(var(--tertiary-color)1);
    background: rgb(var(--gray-color)1);
    width: 100%;
    color: rgb(var(--light-color)1);
}

.krv-form .wpforms-field textarea.wpforms-field-large {
    height: 150px;
    padding: 5px 10px;
}

.krv-form .wpforms-field .wpforms-field-large:focus-visible, select:focus-visible {
    outline: 3px solid rgb(var(--accent-color)1);
}

.krv-form .choices__inner {
    background-color: transparent!important;
    border: none!important;
    padding: 0!important;
}

.krv-form .choices__inner .choices__item {
    color: rgb(var(--light-color)1)!important;
}

.krv-form .choices__list {
    /* display: block!important; */
    background-color: rgb(var(--gray-color)1);
    left: 0;
    margin-top: 0!important;
}

div.wpforms-container .wpforms-form .choices[data-type*="select-one"] .choices__button {
    background-image: url(../images/x.svg)!important;
    padding: 0!important;
    background-size: cover!important;
    position: absolute;
    top: 50%!important;
    right: 0!important;
    margin-top: 0px!important;
    margin-right: 25px!important;
    height: 16px!important;
    width: 16px!important;
    border-radius: 10em!important;
    opacity: .5!important;
    color: rgb(var(--light-color)1)!important;
    transform: translateY(-50%);
}

.krv-form .choices__list .choices__item.is-highlighted {
    background-color: rgb(var(--primary-color).25)!important;
}

.wpforms-submit-spinner {
    animation: submitspin 1s infinite both;
}

@keyframes submitspin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.krv-form .wpforms-confirmation-container p {
    margin: 0!important;
    padding: 20px!important;
    color: rgb(var(--gray-color)1)!important;
    font-weight: 500;
    background: rgb(var(--accent-color)1)!important;
    border-radius: 12px;
}

/* Footer */
.krvdev-footer {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--dark-color)1);
}

.krvdev-footer .mobile-footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.krvdev-footer .mobile-footer section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0;
    gap: 14px;
}

.krvdev-footer .mobile-footer section.logo {
    width: 100%;
}

.krvdev-footer .mobile-footer .nav-menu .nav-ul, .krvdev-footer .mobile-footer .categories nav, .krvdev-footer .mobile-footer .contact address {
    display: flex;
    flex-direction: column;
    align-items: center!important;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
    align-items: flex-start;
    gap: 12px;
}

.krvdev-footer .desktop-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 124px;
}

.krvdev-footer .logo {
    width: 400px;
    height: 100%;
    gap: 16px;
}

.krvdev-footer .logo div p {
    font-size: 0.778rem
}

.krvdev-footer .logo div span {
    font-size: 0.778rem;
    opacity: 0.6;
}

/* .krvdev-footer .logo a {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 100%;
    width: auto;
}

.krvdev-footer .logo a svg {
    height: 100%;
    width: auto;
    color: rgb(var(--light-color)1);
}

.krvdev-footer .logo a span {
    color: rgb(var(--light-color)1);
    font-size: 3rem;
    font-weight: 500;
} */

.krvdev-footer section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 0;
}

.krvdev-footer section h2 {
    font-size: 0.889rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: rgb(var(--light-color)1);
    margin: 0;
}

.krvdev-footer .nav-menu .nav-ul, .krvdev-footer .categories nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
    align-items: flex-start;
    gap: 12px;
}

.krvdev-footer .contact .social-media, .krvdev-footer .contact address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
}

.krvdev-footer .contact address div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.krvdev-footer .nav-menu .nav-ul a, .krvdev-footer .categories nav a, .krvdev-footer .contact address div a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.778rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    color: rgb(var(--tertiary-color).8);
    transition: color ease-in-out .1s;
}

.krvdev-footer .contact .social-media a img, .krvdev-footer .contact address a img {
    transform: scale(1);
    transition: transform cubic-bezier(0.34, 1.56, 0.64, 1) .1s;
}

.krvdev-footer .contact .social-media a:hover img, .krvdev-footer .contact address a:hover img {
    transform: scale(1.1);
    transition: transform cubic-bezier(0.34, 1.56, 0.64, 1) .3s;
}

.krvdev-footer .nav-menu .nav-ul a:hover, .krvdev-footer .categories nav a:hover, .krvdev-footer .contact address a:hover {
    color: rgb(var(--tertiary-color)1);
    text-decoration: underline;
    transition: color ease-in-out .3s;
}

.krvdev-footer .contact .social-media div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

@media (max-width: 1024px) {  
    .desktop-footer { /* Ocultamos el header de Desktop cuando la pantalla es mas igual o mas pequeña que 1024px */
        display: none!important;
    }

    .krvdev-footer {
        height: auto;
        padding-block: 80px;
    }
}

@media (min-width: 1024px) { /* Ocultamos el header de mobile cuando la pantalla es mas igual o mas grande que 1024px */
    .mobile-footer {
        display: none!important;
    }
}

/* Inicio*/
.about-me {
    background: rgb(var(--dark-color)1);
}

.about-me .things {
    display: flex;
    flex-wrap: wrap;
}

.about-me .things div {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.about-me .things div span {
    color: rgb(var(--light-color)1);
}

.service-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    padding: 40px;
    border-radius: 20px;
    border: 1.5px solid rgb(var(--secondary-color)1);
    background: rgb(var(--secondary-color).4);
}

.service-card img {
    width: auto;
    height: 287px;
}

@media (max-width: 768px) {

    .service-card img {
        width: 100%;
        height: auto;
    }
}

.service-card .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
}

/* Services */
.included-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.process .step {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 24px;
    border-bottom: 1.5px solid rgb(var(--secondary-color)1);
    max-height: 83px;
    transition: height ease-in-out .3s;
}

.process .step.active {
    max-height: 500px;
    transition: max-height ease-in-out .3s;
}

.process .step:last-child {
    border: none;
}

.process .step p {
    display: none;
    height: 0px;
    opacity: 0;
    transition: height ease-in-out .1s, opacity ease-in-out .1s, margin-top ease-in-out .1s;
}

.process .step.active p {
    display: inline-block;
    height: auto;
    opacity: 1;
    transition: height ease-in-out .3s, opacity ease-in-out .3s, margin-top ease-in-out .3s;

    @starting-style {
        height: 0px;
        opacity: 0;
    }
}

.process .step-image  {
    width: 100%;
    height: auto;
    aspect-ratio: 660.00/446.80;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.process .step-image.fade-out {
    opacity: 0;
}

.process .steps .step button  {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    color: rgb(var(--tertiary-color)1);
}

.process .steps .step button:hover {
    color: rgb(var(--light-color)1);
    transition:
        color 0.2s ease-in-out;
}

.process .steps .step.active button {
    color: rgb(var(--light-color)1);
    transition:
        color 0.2s ease-in-out;
}

.process .steps .step button img {
    width: 0;
    margin-right: 0;
    transform: scale(0) rotate(180deg);
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.1s ease-in-out,
        margin-right 0.1s ease-in-out;
    display: inline-block;
}

.process .steps .step button:hover img {
    width: 34px;
    margin-right: 10px;
    transform: scale(1) rotate(0deg);
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.3s ease-in-out,
        margin-right 0.3s ease-in-out;
}

.process .steps .step.active button img {
    width: 34px;
    margin-right: 10px;
    transform: scale(1) rotate(0deg);
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.3s ease-in-out,
        margin-right 0.3s ease-in-out;
}

.benefits {
    background: rgb(var(--dark-color)1);
}

/* About Me */
.page-template-page-sobre-mi .hero .hero-image-container img {
    mask-image: radial-gradient(black 0%, transparent 100%);
    filter: saturate(3);
}

.page-template-page-sobre-mi .hero .hero-image-container {
    position: relative;
    padding-inline: 30px;
}

.page-template-page-sobre-mi .hero .hero-image-container .icon {
    position: absolute;
    transform: translate(-50%, -50%);
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.games {
    top: 0;
    left: 50%;
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.sports {
    top: 50%;
    right: 0;
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.animals {
    bottom: 40px;
    left: 60%;
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.motors {
    top: 35%;
    left: 70px;
}

.page-template-page-sobre-mi .hero .hero-image-container .icon::after {
    content: "Me gustan los videojuegos, mayormente los competitivos.";
    z-index: -1;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    max-width: 500px;
    width: max-content;
    height: 100px;
    padding: 20px 20px 20px 118px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    background: rgb(var(--gray-color).2);
    opacity: 0;
    transition: transform ease-in-out .1s, opacity ease-in-out .1s;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgb(var(--light-color).2);
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.sports::after {
    content: "Me gustan los deportes, aunque el que mas consumo y practico es el futbol.";
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.animals::after {
    content: "Me gustan los animales, he tenido perros y gatos, aunque muchos mas gatos.";
}

.page-template-page-sobre-mi .hero .hero-image-container .icon.motors::after {
    content: "Me gustan los autos, las motos, o cualquier cosa que tenga motor.";
}

.page-template-page-sobre-mi .hero .hero-image-container .icon:hover::after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    transition: transform ease-in-out .3s, opacity ease-in-out .3s;
}

.page-template-page-sobre-mi .hero .hero-image-container .icon img, .page-template-page-sobre-mi .hero .hero-image-container .icon svg {
    width: 80px;
    height: 80px;
    z-index: 5;
}

.page-template-page-sobre-mi .difference {
    background: rgb(var(--dark-color)1);
}

/* Taxonomies Projects */
/* .tax-projects .hero .tax-filters {
    display: flex;
    gap: 28px;
} */

/* .tax-projects .hero .tax-filters .tax-filter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
} */

.tax-projects .hero .tax-filters .tax-filter-form label {
    font-size: 1.333rem;
    font-weight: 700;
    line-height: normal;
    color: rgb(var(--light-color)1);
}

.tax-projects .hero .tax-filters .tax-filter-form select {
    display: flex;
    height: 40px;
    padding: 0 10px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1.5px solid rgb(var(--tertiary-color)1);
    background: rgb(var(--gray-color)1);
    width: 100%;
    color: rgb(var(--light-color)1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23fef4fb'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 9c.852 0 1.297 .986 .783 1.623l-.076 .084l-6 6a1 1 0 0 1 -1.32 .083l-.094 -.083l-6 -6l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057v-.118l.005 -.058l.009 -.06l.01 -.052l.032 -.108l.027 -.067l.07 -.132l.065 -.09l.073 -.081l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01l.057 -.004l12.059 -.002z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.tax-projects .tax-results .project-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tax-projects .tax-results .project-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center 0;
    border-radius: 12px;
    transition: object-position ease-in-out 1s;
}

.tax-projects .tax-results .project-card img:hover {
    object-position: center 100%;
    transition: object-position ease-in-out 1.5s;
}

.tax-projects .tax-results .project-card a.content {
    display: flex;
    gap: 8px;
    flex-direction: column!important;
}

.tax-projects .tax-results .project-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}