/*==================== GOOGLE FONTS ====================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/*CIOO*/
/*==================== VARIABLES CSS ====================*/

:root {
    --header-height: 4rem;
    /*========== Colors ==========*/
    --hue-color: 230;
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --second-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-ligther: hsl(var(--hue-color), 92%, 85%);
    --title-color: hsl(var(--hue-color), 8%, 15%);
    --text-color: hsl(var(--hue-color), 8%, 45%);
    --text-color-light: hsl(var(--hue-color), 8%, 65%);
    --input-color: hsl(var(--hue-color), 70%, 96%);
    --body-color: hsl(var(--hue-color), 60%, 99%);
    --container-color: #fff;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
    --box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normale-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== Margenes Bottom ==========*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}


/*========== Variables Dark theme ==========*/
body.dark-theme {


    --second-color: hsl(var(--hue-color), 30%, 8%);

    --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 75%);

    --input-color: hsl(var(--hue-color), 29%, 16%);
    --body-color: hsl(var(--hue-color), 28%, 12%);
    --container-color: hsl(var(--hue-color), 29%, 16%);
}

/*========== Button Dark/Light ==========*/
.nav__btns {
    display: flex;
    align-items: center;
}

.change-theme,
.change-language-topbar,
.change-volume-topbar,
.change-color {
    cursor: pointer;
    margin-right: var(--mb-1);
    font-size: 1.25rem;
    color: var(--title-color);
}

.change-language-topbar {
    display: none;
}

.change-theme:hover,
.change-language:hover,
.change-volume-topbar:hover {

    color: var(--first-color);
}

/*==================== BASE ====================*/

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0 0 var(--header-height);
    font-family: var(--body-font);
    font-size: var(--normale-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/*==================== REUSABLE CSS CLASSES ====================*/

.section {
    padding: 2rem 0 4rem;
}

.section__title {
    font-size: var(--h1-font-size);
}

.section__subtitle {
    display: block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-3);
}

.label-color {
    font-size: 1px;
    background-color: transparent;
}

.section__title,
.section__subtitle {
    text-align: center;
}

.container {
    max-width: 768px;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.header {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}

.d-none {
    display: none;
}

/*==================== LAYOUT ====================*/

.custom-container-check-box,
.container-check-box {
    font-size: var(--small-font-size);
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-container-check-box {
    font-size: 1.0625em;
}

/* Hide the browser's default checkbox */
.custom-container-check-box input,
.container-check-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--input-color);;
}

/* On mouse-over, add a grey background color */
.custom-container-check-box:hover input ~ .checkmark,
.container-check-box:hover input ~ .checkmark {
    background-color: var(--first-color-ligther);
}

/* When the checkbox is checked, add a blue background */
.custom-container-check-box input:checked ~ .checkmark,
.container-check-box input:checked ~ .checkmark {
    background-color: var(--first-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-container-check-box input:checked ~ .checkmark:after,
.container-check-box input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-container-check-box .checkmark:after,
.container-check-box .checkmark:after {
    left: 8px;
    top: 2px;
    width: 7px;
    height: 15px;
    border: solid var(--input-color);;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*==================== NAV ====================*/

.nav {
    max-width: 968px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo,
.nav__toggle {
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav__logo:hover {
    color: var(--first-color);
}

.nav__toggle {
    font-size: 1.1rem;
    cursor: pointer;
}

.nav__toggle:hover {
    color: var(--first-color);
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 13px;
    border-radius: .5em;
    background: var(--first-color-ligther);;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--first-color);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--first-color);
    cursor: pointer;
}


@media screen and (max-width: 767px) {
    .nav__menu,
    .nav__menu-color {
        bottom: -100%;
        left: 0;
        width: 100%;
        position: fixed;
        background-color: var(--body-color);
        padding: 2rem 1.5rem 4rem;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
        border-radius: 1.5rem 1.5rem 0 0;
        transition: .3s;
    }
}

.nav__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--small-font-size);
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav__link:hover {
    color: var(--first-color);
}

.nav__icon {
    font-size: 1.2rem;
}

.nav__close {
    position: absolute;
    right: 1.3rem;
    bottom: .5rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--first-color);
}

.nav__close:hover {
    color: var(--first-color);
}


/* show menu */

.show-menu {
    bottom: 0;
}


/* Active link */
.active-link {
    color: var(--first-color);
    cursor: pointer;
}


/* Change background header */
.scroll-header {
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
}


/*==================== HOME ====================*/


.home__container {
    gap: 1rem;
}

.home__content {
    grid-template-columns: .5fr 3fr;
    padding-top: 3.5rem;
    align-items: center;

}

.home__social {
    display: grid;
    grid-template-columns: max-content;
    row-gap: 1rem;
}

.home__social-icon {
    font-size: 1.25rem;
    color: var(--first-color);
}

.home__social-icon:hover {
    font-size: 1.25rem;
    color: var(--first-color-alt);
}

.home__blob {
    width: 200px;
    fill: var(--first-color);
}

.home__blob-img {
    width: 279px;
}

.home__data {
    grid-column: 1/3;
}

.home__title {
    font-size: var(--big-font-size);
}

.home__subtitle {
    font-size: var(--h3-font-size);
    color: var(--text-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-0-75);
}

.home__description {
    margin-bottom: var(--mb-2);
}

.home__scroll {
    display: none;
}

.home__scroll-button {
    color: var(--first-color);
    transition: .3s;
}

.home__scroll-button:hover,
.about__buttons:hover .button__icon {
    transform: translateY(.25rem);
}

.home__scroll-mouse {
    font-size: 2rem;
}

.home__scroll-name {
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    margin-right: var(--mb-0-25);
}

.home__scroll-arrow {
    color: var(--first-color);
    font-size: 1.25rem;
}


/*==================== BUTTONS ====================*/
.button {
    display: inline-block;
    background-color: var(--first-color);
    border-radius: .5rem;
    padding: 1rem;
    color: #fff;
    font-weight: var(--font-medium);
    cursor: pointer;
    border: none;
    font-family: var(--body-font);
}

.button:hover {
    background-color: var(--first-color-alt);
}

.button__icon {
    font-size: 1.25rem;
    transition: .3s;
    margin-left: var(--mb-0-5);
}

.button--flex {
    display: inline-flex;
    align-items: center;
}

/*==================== ABOUT ====================*/

.about__img {
    width: 400px;
    border-radius: .5rem;
    justify-self: center;
    align-items: center;
    box-shadow: var(--box-shadow);
}

.about__description {
    text-align: center;
    margin-bottom: var(--mb-2-5);
}

.about__info {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2-5);
}

.about__info-title {
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
}

.about__info-name {
    font-size: var(--smaller-font-size);
}

.about__info-name,
.about__info-title {
    display: block;
    text-align: center;
}

.about__buttons {
    justify-content: center;
    display: flex;
}

.more__info__about__link {
    cursor: pointer;
    color: var(--first-color);
    display: block;
    margin-top: .5rem;
}

/*==================== SKILLS ====================*/

.skills__container {
    row-gap: 0;
}

.skills__cloud__container {
    margin-bottom: var(--mb-2-5);
}

.skills-cloud {
    position: relative;
    width: 100%;
    height: clamp(250px, 34vw, 390px);
    min-height: 250px;
    padding: .75rem;
    overflow: hidden;
}

.skills-cloud__word {
    position: absolute;
    left: 50%;
    top: 50%;
    border: none;
    background: transparent;
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    line-height: 1;
    padding: .18rem .24rem;
    border-radius: .45rem;
    transform: translate(-50%, -50%) rotate(var(--skill-rotate, 0deg));
    transform-origin: center;
    transition: transform .2s ease, color .2s ease, background-color .2s ease, opacity .2s ease;
    font-family: var(--body-font);
    white-space: nowrap;
    pointer-events: none;
}

.skills-cloud__word--clickable {
    cursor: pointer;
    pointer-events: auto;
}

.skills-cloud__word--clickable:hover {
    transform: translate(-50%, -50%) rotate(var(--skill-rotate, 0deg)) scale(1.01);
    color: var(--first-color);
}

.skills-cloud__word--clickable:focus-visible {
    outline: 2px solid var(--first-color);
    outline-offset: 2px;
}

.skills-cloud__state {
    margin: 0;
    color: var(--text-color-light);
    font-size: var(--small-font-size);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.skills__header {
    display: flex;
    align-items: center;
    margin-bottom: var(--mb-2-5);
    cursor: pointer;
}

.skills__icon,
.skills__arrow {
    font-size: 2rem;
    color: var(--first-color);
}

.skills__icon {
    margin-right: var(--mb-0-75);
}

.skills__title {
    font-size: var(--h3-font-size);

}

.skills__subtitle {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
}

.skills__arrow {
    margin-left: auto;
    transition: .4s;
}

.skills__list {
    row-gap: 1.5rem;
    padding-left: 2.7rem;
}

.skills__titles {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
}

.skills__name {
    font-size: var(--normale-font-size);
    font-weight: var(--font-medium);
}

.skills__bar,
.skills__percentage {
    height: 5px;
    border-radius: .5rem;
}

.skills__bar {
    background-color: var(--first-color-ligther);
}

.skills__percentage {
    display: block;
    background-color: var(--first-color);
}

.skills__95 {
    width: 95%;
}

.skills__90 {
    width: 90%;
}

.skills__85 {
    width: 85%;
}

.skills__80 {
    width: 80%;
}

.skills__75 {
    width: 75%;
}

.skills__70 {
    width: 70%;
}

.skills__60 {
    width: 60%;
}


.skills__close .skills__list {
    height: 0;
    overflow: hidden;
}

.skills__open .skills__list {
    height: max-content;
    margin-bottom: var(--mb-2-5);
}

.skills__open .skills__arrow {
    transform: rotate(-180deg);
}

#modal__skill__description {
    white-space: normal;
    text-align: left;
    margin-top: .75rem;
    line-height: 1.6;
}

#modal__skill__description p,
#modal__skill__description ul,
#modal__skill__description ol {
    margin: 0 0 .75rem;
}

#modal__skill__description ul,
#modal__skill__description ol {
    padding-left: 1.1rem;
}

#modal__skill__description li {
    margin-bottom: .35rem;
}

#modal__skill__description a {
    color: var(--first-color);
    text-decoration: underline;
}

#modal__skill__description code {
    font-family: "Courier New", monospace;
    background-color: var(--input-color);
    color: var(--title-color);
    border-radius: .3rem;
    padding: .05rem .32rem;
}

#modal__skill__description strong {
    color: var(--title-color);
}

/*==================== QUALIFICATION ====================*/

.qualification__tabs {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2);
}

.qualification__button {
    cursor: pointer;
    font-weight: var(--font-medium);
    font-size: var(--h3-font-size);
}

.qualification__button:hover {
    color: var(--first-color);
}

.qualification__icon {
    margin-right: var(--mb-0-25);
    font-size: 1.8rem;
}

.qualification__data {
    display: grid;
    grid-template-columns:  1fr max-content 1fr;
    column-gap: 1.5rem;
}

.qualification__title {
    font-size: var(--normale-font-size);
    font-weight: var(--font-medium);
}

.qualification__subtitle {
    display: block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-1);
}

.qualification__subtitle__no__margin {
    display: inline-block;
    font-size: var(--small-font-size);
}

.qualification__calendar {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
}

.qualification__rounder {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--first-color);
}

.qualification__line {
    width: 1px;
    height: 100%;
    display: block;
    background-color: var(--first-color);
    transform: translate(6px, -7px);
}

.qualification [data-content] {
    display: none;
}

.qualification__active[data-content] {
    display: block;
}

.qualification__button.qualification__active {
    color: var(--first-color);
}

.nav__close__sticky{
    right: -0.7rem;
    bottom: -1.5rem;
}
.modal__sticky__close{
    bottom: 0;
    left: 0;
    position: sticky;
}


/*==================== PORTFOLIO ====================*/


.portfolio__container {
    position: relative;
    overflow: hidden;
    max-width: 740px;
}

.portfolio__card,
.portfolio__empty {
    display: flex;
    flex-direction: column;
    border-radius: .9rem;
    overflow: hidden;
    width: min(100%, 340px);
    margin: 0 auto;
}

.portfolio__card {
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 460px;
}

.portfolio__card--stacked {
    overflow: visible;
}

.portfolio__card--vertical {
    min-height: 500px;
}

.portfolio__card--media-vertical {
    min-height: 515px;
}


.portfolio__media {
    position: relative;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: .5rem;
}

.portfolio__media--stacked {
    height: 188px;
    min-height: 188px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
}

.portfolio__media--stacked.portfolio__media--stacked-horizontal {
    width: 100%;
}

.portfolio__media--stacked.portfolio__media--stacked-vertical {
    width: min(64%, 220px);
    height: 270px;
    min-height: 270px;
}

.portfolio__media-stack {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.portfolio__media-layer {
    --stack-translate-x: 0px;
    --stack-translate-y: 0px;
    --stack-rotate: 0deg;
    --stack-scale: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 84%;
    border-radius: 1.1rem;
    overflow: hidden;
    background-color: var(--container-color);
    box-shadow: none;
    transform: translate(calc(-50% + var(--stack-translate-x)), calc(-50% + var(--stack-translate-y))) rotate(var(--stack-rotate)) scale(var(--stack-scale));
    transform-origin: center center;
    transition: transform .38s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, filter .28s ease;
    will-change: transform;
    filter: saturate(.98);
    pointer-events: none;
}

.portfolio__media-layer--primary {
    width: 72%;
    height: 88%;
    box-shadow: none;
}

.portfolio__media-layer--base {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(var(--stack-translate-x), var(--stack-translate-y)) rotate(var(--stack-rotate)) scale(var(--stack-scale));
}

.portfolio__media-layer--horizontal {
    width: 82%;
    height: 80%;
}

.portfolio__media-layer--vertical {
    width: auto;
    height: 88%;
    aspect-ratio: 3 / 4;
}

.portfolio__media-layer--primary.portfolio__media-layer--horizontal {
    width: 84%;
    height: 82%;
}

.portfolio__media-layer--primary.portfolio__media-layer--vertical {
    width: auto;
    height: 94%;
    aspect-ratio: 3 / 4;
}

.portfolio__card--vertical .portfolio__media-layer {
    width: 70%;
    height: 92%;
}

.portfolio__card--vertical .portfolio__media-layer--horizontal {
    width: 78%;
    height: 74%;
}

.portfolio__card--vertical .portfolio__media-layer--vertical {
    width: auto;
    height: 90%;
    aspect-ratio: 3 / 4;
}

.portfolio__card--vertical .portfolio__media-layer--primary.portfolio__media-layer--horizontal {
    width: 80%;
    height: 76%;
}

.portfolio__card--vertical .portfolio__media-layer--primary.portfolio__media-layer--vertical {
    width: auto;
    height: 95%;
    aspect-ratio: 3 / 4;
}

.portfolio__stack-image {
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    border-radius: inherit;
}

.portfolio__stack-image--horizontal {
    object-fit: cover;
    object-position: center center;
}

.portfolio__stack-image--vertical {
    object-fit: cover;
    object-position: center center;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio__media--stacked:hover .portfolio__media-layer {
        transform: translate(calc(-50% + var(--stack-hover-translate-x, var(--stack-translate-x))), calc(-50% + var(--stack-hover-translate-y, var(--stack-translate-y)))) rotate(var(--stack-hover-rotate, var(--stack-rotate))) scale(var(--stack-hover-scale, var(--stack-scale)));
        filter: saturate(1.04);
    }

    .portfolio__media--stacked:hover .portfolio__media-layer--base {
        transform: translate(var(--stack-hover-translate-x, var(--stack-translate-x)), var(--stack-hover-translate-y, var(--stack-translate-y))) rotate(var(--stack-hover-rotate, var(--stack-rotate))) scale(var(--stack-hover-scale, var(--stack-scale)));
    }

    .portfolio__media--stacked:hover .portfolio__media-layer--primary {
        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    }
}

.portfolio__img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: .55rem;
}

.portfolio__img--horizontal {
    object-fit: contain;
    object-position: center center;
}

.portfolio__img--vertical {
    object-fit: contain;
    object-position: center center;
    justify-self: center;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
}

.portfolio__card--vertical .portfolio__media {
    width: min(62%, 210px);
    height: 240px;
}

.portfolio__media--primary-vertical:not(.portfolio__media--stacked) {
    width: min(62%, 210px);
    height: 240px;
}

.portfolio__data {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .75rem;
    padding: .9rem 1rem 1.1rem;
}

.portfolio__title {
    font-size: var(--h3-font-size);
    margin: 0;
}

.portfolio__date {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
    margin: 0;
}

.portfolio__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.portfolio__tag {
    display: inline-flex;
    align-items: center;
    border-radius: .7rem;
    border: 1px solid var(--first-color-ligther);
    background-color: var(--input-color);
    color: var(--title-color);
    padding: .24rem .58rem;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
}

.portfolio__description {
    margin: 0;
    line-height: 1.5;
}

.portfolio__description--empty {
    text-align: center;
}

.portfolio__description--empty a {
    color: var(--first-color);
    text-decoration: underline;
}

.portfolio__footer {
    margin-top: auto;
    padding-top: .75rem;
}

.portfolio__button {
    width: 100%;
    justify-content: center;
}

.portfolio__empty {
    padding: 2rem 1.25rem;
    justify-content: center;
    min-height: 160px;
}

.portfolio__container .swiper-slide {
    height: auto;
    display: flex;
    justify-content: center;
}

.portfolio__container .swiper-wrapper {
    align-items: stretch;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiper-portfolio-icon {
    font-size: 1.8rem;
    color: var(--title-color);
    opacity: .45;
    transition: opacity .2s ease;
}

.swiper-button-next:hover .swiper-portfolio-icon,
.swiper-button-prev:hover .swiper-portfolio-icon {
    opacity: .9;
}

.swiper-button-next {
    right: .35rem !important;
}

.swiper-button-prev {
    left: .35rem !important;
}

.swiper-pagination {
    position: relative !important;
    margin-top: .8rem;
}

.swiper-pagination-bullet {
    background-color: var(--text-color-light) !important;
    opacity: .35 !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background-color: var(--first-color) !important;
}

.portfolio__button:hover .button__icon,
.home__button:hover .button__icon,
.contact__button:hover .button__icon {
    transform: translateX(.25rem);
}

/*==================== PROJECT IN MIND ====================*/

/*=============== MODAL ===============*/
.container__modal {
    margin-left: 1rem;
    margin-right: 1rem;
}

.modal {
    height: 100vh;
    display: grid;
    place-items: center;
}

.modal__button {
    display: inline-block;
    background-color: var(--first-color);
    color: #FFF;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    transition: .3s;
}

.modal__button:hover {
    background-color: var(--first-color-alt);
}

.modal__container {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: flex-end;
    overflow: hidden;
    transition: all .3s;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    perspective: 1000px;

    /*=== Effect 3 ===*/
    /* perspective: 1000px; */
}

.modal__content {
    position: relative;
    background-color: var(--container-color);
    box-shadow: var(--box-shadow);
    text-align: center;
    padding: 3rem 2rem 2rem;
    border-radius: 1rem 1rem 0 0;
    transition: all .3s;

    overflow-y: auto;
    max-height: 100vh;


    /*=== Effect 1 ===*/
    transform: translateY(10%);

    /*=== Effect 2 ===*/
    /* transform: scale(.5) translateY(10%); */

    /*=== Effect 3 ===*/
    /* transform: rotateX(65deg) scale(.75) translateY(10%);
    transform-origin: 50% 100%; */
}

.modal__container.modal--project .modal__content {
    width: min(960px, 94vw);
    max-height: 85vh;
    margin: auto;
    border-radius: 1.25rem;
    padding: 2.25rem 2rem 1.5rem;
}

.modal__container.modal--project {
    align-items: center;
}

.modal__content.modal__content--project {
    width: min(960px, 94vw) !important;
    max-height: 85vh !important;
    margin: auto !important;
    border-radius: 1.25rem !important;
    padding: 2.25rem 2rem 1.5rem !important;
}

.modal__icon__close {
    position: absolute;
    right: 1.3rem;
    top: .5rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--first-color);
    display: none;
}

.modal__img {
    width: 150px;
    margin-bottom: .75rem;
}

.modal__close {
    display: inline-flex;
    background-color: var(--first-color);
    border-radius: .25rem;
    color: #FFF;
    font-size: 1.5rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
}

.modal__title {
    font-size: var(--big-font-size);
    color: var(--title-color);
    font-weight: 500;
}

.modal__description {
    margin-bottom: 1.5rem;
}

#modal__project__description {
    text-align: left;
}

#modal__project__description h1,
#modal__project__description h2,
#modal__project__description h3 {
    margin-bottom: .75rem;
}

#modal__project__description p,
#modal__project__description ul,
#modal__project__description ol {
    margin-bottom: .75rem;
}

#modal__project__description ul {
    list-style: disc;
    margin-left: 1.25rem;
}

#modal__project__description ol {
    list-style: decimal;
    margin-left: 1.25rem;
}

#modal__project__description a {
    color: var(--first-color);
    text-decoration: underline;
}

#modal__project__description img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
    border: 1px solid var(--first-color-ligther);
    margin: .35rem 0 .95rem;
}

#modal__project__description .markdown-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--first-color-ligther);
    border-radius: .75rem;
    margin-bottom: .95rem;
}

#modal__project__description table {
    width: 100%;
    min-width: 430px;
    border-collapse: collapse;
    background-color: var(--container-color);
}

#modal__project__description th,
#modal__project__description td {
    border: 1px solid var(--first-color-ligther);
    padding: .5rem .65rem;
    text-align: left;
}

#modal__project__description th {
    background-color: var(--input-color);
}

#modal__project__description tr:nth-child(even) {
    background-color: rgb(127 127 127 / 6%);
}

#modal__project__description .markdown-mermaid-wrapper {
    margin: .5rem 0 1rem;
    padding: .75rem;
    border: 1px solid var(--first-color-ligther);
    border-radius: .75rem;
    background-color: var(--container-color);
    overflow-x: auto;
}

#modal__project__description .markdown-mermaid-wrapper .mermaid {
    min-width: 420px;
}

.modal__button-width {
    width: 90%;
}

.modal__button-link {
    display: block;
    margin: 1rem auto 0;
    background-color: transparent;
    color: var(--first-color);
    font-weight: 500;
}

/* Show modal */
.show-modal {
    visibility: visible;
    opacity: 1;
}

.show-modal .modal__content {
    /*=== Effect 1 ===*/
    transform: translateY(0);

    /*=== Effect 2 ===*/
    /* transform: scale(1) translateY(0); */

    /*=== Effect 3 ===*/
    /* transform: rotateX(0) scale(1) translateY(0); */
}


/*==================== CONTACT ME ====================*/

.contact__container {
    row-gap: 3rem;
}

.contact__information {
    display: flex;
    margin-bottom: var(--mb-2);
}

.contact__icon {
    font-size: 2rem;
    margin-right: var(--mb-0-75);
    color: var(--first-color);
}

.contact__title {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
}

.contact__subtitle {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
}

.contact__content {
    background-color: var(--input-color);
    border-radius: .5rem;
    padding: .75rem 1rem .25rem;
}

.contact__label {
    font-size: var(--smaller-font-size);
    color: var(--title-color);
}

.contact__input {
    width: 100%;
    background-color: var(--input-color);
    color: var(--text-color);
    border: none;
    font-size: var(--normale-font-size);
    font-family: var(--body-font);
    outline: none;
    padding: .25rem .5rem .5rem 0;
}

.contact__link {
    color: var(--body-font);
    text-decoration: underline;
}


/*==================== FOOTER ====================*/
.footer {
    padding-top: 2rem;
}

.footer__container {
    row-gap: 3.5rem;
}

.footer__bg {
    background-color: var(--first-color);
    padding: 2rem 0 3rem;
}

.footer__title {
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-0-25);
}

.footer__subtitle {
    font-size: var(--small-font-size);
}

.footer__links {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.footer__link:hover {
    color: var(--first-color-ligther);
}

.footer__socials {
    display: flex;
}

.footer__social {
    font-size: 1.25rem;
    margin-right: var(--mb-1-5);
}

.footer__social:hover {
    color: var(--first-color-ligther);
}

.footer__copy {
    font-size: var(--smaller-font-size);
    text-align: center;
    color: var(--text-color-light);
    margin-top: var(--mb-3);
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
    color: #fff;
}

/*========== SCROLL UP ==========*/

.scrollup {
    position: fixed;
    z-index: var(--z-tooltip);
    padding: 0 .3rem;
    transition: .4s;
    background-color: var(--first-color);
    right: 1rem;
    bottom: -20%;
    opacity: .9;
    border-radius: .4rem;
}

.scrollup:hover {
    background-color: var(--first-color-alt);
}

.scrollup__icon {
    color: #fff;
    font-size: 1.5rem;
}

/* Show scroll */
.show-scroll {
    bottom: 5rem;
}

/*========== SCROLL BAR ==========*/

::-webkit-scrollbar {
    width: .60rem;
    background-color: var(--scroll-bar-color);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb {

    background-color: var(--scroll-thumb-color);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {

    background-color: var(--text-color-light);
}

/*==================== MEDIA QUERIES ====================*/


/* For small devices */
@media screen and (max-width: 500px) {
    #qualification-education-button-txt,
    #qualification-work-button-txt,
    #qualification-publishing-button-txt {
        font-size: var(--small-font-size);
    }
}

@media screen and (max-width: 767px) {
    .modal__container.modal--project .modal__content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 3.5rem 1.1rem 1.5rem;
    }

    .modal__container.modal--project {
        align-items: flex-end;
    }

    .modal__content.modal__content--project {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 3.5rem 1.1rem 1.5rem !important;
    }

    .portfolio__card,
    .portfolio__empty {
        width: min(100%, 320px);
    }


    .portfolio__media {
       width: 265px;
    }

    .portfolio__media--stacked.portfolio__media--stacked-vertical {
        width: min(64%, 210px);
        height: 250px;
        min-height: 250px;
    }

    .portfolio__card {
        min-height: 430px;
    }

    .portfolio__card--vertical {
        min-height: 470px;
    }

    .portfolio__card--media-vertical {
        min-height: 490px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .skills-cloud {
        height: 300px;
        min-height: 300px;
        padding: .55rem;
    }
}

@media screen and (max-width: 350px) {
    .container {
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }

    .nav__menu {
        margin-left: auto;
    }

    .nav__list {
        column-gap: 0;
    }

    .home__content {
        grid-template-columns: .25fr 3fr;
    }

    .home__blob {
        width: 180px;
    }

    .skills__title {
        font-size: var(--normale-font-size);
    }

    .qualification__data {
        gap: .5rem;
    }

    .services__container {
        grid-template-columns: max-content;
        justify-content: center;
    }

    .service__content {
        padding-right: 3.5rem;
    }

    .service__modal {
        padding: 0 .5rem;
    }

    .project__img {
        width: 200px;
    }

}

/* For medium devices */

@media screen and (min-width: 568px) {
    .modal__content {
        margin: auto;
        width: 400px;
        border-radius: 1.25rem;
    }


    .home__content {
        grid-template-columns: max-content 1fr 1fr;
    }

    .home__data {
        grid-column: initial;
    }

    .home__img {
        order: 1;
        justify-content: center;
    }

    .about__container,
    .skills__container,
    .project__container,
    .contact__container,
    .footer__container {
        grid-template-columns: repeat(2, 1fr);
    }

    .qualification__sections {
        display: grid;
        grid-template-columns: .6fr;
        justify-content: center;
    }

    .modal__img {
        width: 170px;
    }

    .portfolio__container {
        max-width: 400px;
    }

    .portfolio__card,
    .portfolio__empty {
        width: min(100%, 400px);
    }

    .portfolio__card {
        min-height: 460px;
    }

    .portfolio__card--vertical {
        min-height: 520px;
    }

    .portfolio__card--media-vertical {
        min-height: 545px;
    }

    .portfolio__media {
        height: 190px;
    }

    .portfolio__card--vertical .portfolio__media {
        height: 250px;
    }

    .portfolio__media--stacked.portfolio__media--stacked-vertical {
        width: min(64%, 220px);
        height: 270px;
        min-height: 270px;
    }


}

@media screen and (min-width: 768px) {

    .container {
        margin-left: auto;
        margin-right: auto;
    }

    body {
        margin: 0;
    }

    .nav__menu-color {
        margin: auto;
    }

    .header {
        top: 0;
        bottom: initial;
    }

    .nav {
        height: calc(var(--header-height) + 1.5rem);
        column-gap: 1rem;
    }

    .change-language-topbar {
        display: block;
    }

    .modal__icon__close {
        display: block;
    }

    .nav__change-language,
    .nav__icon,
    .nav__toggle,
    .nav__close {
        display: none;
    }

    .nav__list {
        display: flex;
        column-gap: 2rem;
    }

    .nav__menu {
        margin-left: auto;
    }

    .header,
    .main,
    .footer__container {
        padding: 0 1rem;
    }

    .section {
        padding: 6rem 0 2rem;
    }

    .section__subtitle {
        margin-bottom: 4rem;
    }

    .home__content {
        padding-top: 5.5rem;
        column-gap: 2rem;
    }

    .home__container {
        row-gap: 5rem;
    }

    .home__blob {
        width: 270px;
    }

    .home__scroll {
        display: block;
    }

    .home__scroll-button {
        margin-left: 3rem;
    }

    .about__container {
        column-gap: 5rem;
    }

    .about__info {
        justify-content: space-between;
    }

    .about__description {
        text-align: initial;
    }

    .about__buttons {
        justify-content: initial;
    }

    .services__container {
        grid-template-columns: repeat(3, 218px);
        justify-content: center;
    }

    .services__icon {
        font-size: 2rem;
    }

    .services__content {
        padding: 6rem 0 2rem 2.5rem;
    }

    .services__modal-content {
        width: 400px;
    }

    .project__container {
        background-color: var(--first-color-alt);
        border-radius: 1rem;
        padding: 3rem 2.5rem 0;
        grid-template-columns: 1fr max-content;
        column-gap: 3rem;

    }

    .project__bg {
        background: none;
    }

    .project {
        text-align: initial;
    }

    .project__data {
        padding-top: .8rem;
    }

    .footer__container {
        grid-template-columns:repeat(3, 1fr);
    }

    .footer__bg {
        padding: 3rem 0 3.5rem;
    }

    .footer__links {
        flex-direction: row;
        column-gap: 2rem;
    }

    .footer__socials {
        justify-content: flex-end;
    }

    .footer__copy {
        margin-top: 4.5rem;
    }


}

/* For large devices */
@media screen and (min-width: 1024px) {

    .header,
    .main,
    .footer__container {
        padding: 0;
    }

    .home__blob {
        width: 320px;
    }

    .home__social {
        transform: translateX(-6rem);
    }

    .services__container {
        grid-template-columns: repeat(3, 238px);
    }

    .portfolio__container {
        max-width: 400px;
    }

    .portfolio__card,
    .portfolio__empty {
        width: min(100%, 400px);
    }

    .portfolio__card {
        min-height: 470px;
    }

    .portfolio__card--vertical {
        min-height: 530px;
    }

    .portfolio__card--media-vertical {
        min-height: 575px;
    }

    .portfolio__media {
        height: 230px;
        justify-self: center;
        border-radius: .5rem;
        box-shadow: var(--box-shadow);
    }

    .portfolio__media--stacked {
        border-radius: 0;
        box-shadow: none;
    }

    .portfolio__card--vertical .portfolio__media {
        height: 280px;
        width: min(58%, 230px);
        justify-self: center;
        border-radius: .5rem;
    }

    .portfolio__media--stacked.portfolio__media--stacked-vertical {
        width: min(60%, 245px);
        height: 320px;
        min-height: 320px;
    }

    .skills-cloud {
        height: 360px;
    }

    .contact__form {
        width: 460px;
    }

    .contact__inputs {
        grid-template-columns: repeat(2, 1fr);
    }


}