@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Monsieur+La+Doulaise&family=Pinyon+Script&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
:root {
    /* ====== COLORS ====== */
    --vintageWine: #3F1521;
    --jetStream: #EAE3DB;
    --mochaEarth: #493E3C;
    --vanillaCream: rgba(212, 192, 149, 0.3);
    --vanillaCreamHover: rgba(212, 192, 149, 0.6);
    --vanCream: #D4C095;
    --darkVanilla: #C5B28E;
    --black: #000000;
    --logo: #CFCDCD;

    /* ====== FONTS ====== */
    --monsieur: 'Monsieur La Doulaise', cursive;
    --crimson: 'Crimson Text', serif;
    --pinyon: 'Pinyon Script', cursive;
    --spaceMono: 'Space Mono', monospace;
    --italianno: 'Italianno', cursive;
}

html { scroll-behavior: smooth; }

* {
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
}

::before, ::after { box-sizing: border-box; }

ul { list-style: none; }

a { color: var(--jetStream); }

body {
    min-height: 100vh;
    background-color: var(--jetStream);
    color: var(--jetStream);
    font-family: var(--spaceMono);
}

::-webkit-scrollbar { width: 5px; }

::-webkit-scrollbar-track { background-color: transparent; }

::-webkit-scrollbar-thumb { background-color: var(--vintageWine); }


/* ================== REUSABLE ================== */
.section {
    width: 100%;
    background-color: var(--jetStream);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}

.bottom-section {
    position: relative;
    width: 100%;
    height: 7em;
    margin-top: 3em;
    background-color: var(--jetStream);
    display: grid;
    grid-template-columns: 30% 40% 30%;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.bottom-section .left-squares,
.bottom-section .right-squares {
    display: grid;
    grid-template-columns: repeat(3, 8em);
}

.bottom-section .right-squares { justify-content: end; }

.left-squares,
.right-squares { transform: translateY(-2.5em); }

.left-squares .square,
.right-squares .square {
    width: 4em;
    height: 4em;
    background-color: var(--vintageWine);
    transition: transform 0.5s ease-out;
    will-change: transfom;
}

.left-squares.scroll .square:nth-child(odd),
.right-squares.scroll .square:nth-child(even) { transform: translateY(-1.5em); }

.left-squares.scroll .square:nth-child(even),
.right-squares.scroll .square:nth-child(odd) { transform: translateY(1.5em); }

.left-squares .square:nth-child(6n+4),
.left-squares .square:nth-child(6n+5),
.left-squares .square:nth-child(6n+6) { transform: translateX(4em); }

.right-squares .square:nth-child(6n+1),
.right-squares .square:nth-child(6n+2),
.right-squares .square:nth-child(6n+3) { transform: translateX(4em); }

.button {
    position: relative;
    width: auto;
    height: 3em;
    color: var(--black);
    font-family: var(--spaceMono);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 20px;
    background-color: var(--vanCream);
    border: 2px solid var(--mochaEarth);
    padding: 6px 20px;
    margin-bottom: 2em;
    cursor: pointer;
}

.button::before,
.button::after {
    content: '';
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url('../images/Stars.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s ease;
    pointer-events: none; 
}

.button::before {
    top: -10px;
    left: -10px;
} 

.button::after {
    bottom: -10px;
    right: -10px;
}

.button:hover::before,
.button:hover::after {
    width: 20px;
    opacity: 1;
    transform: scale(1.5) rotate(5deg);
}


/* ================== LOADER ================== */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--vanCream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loader-container--hidden {
    opacity: 0;
    pointer-events: none;
}

.loader {
    width: 20em;
    height: 20em;
}

.loader path {
    stroke: var(--vintageWine);
    stroke-width: 0.6px;
    animation: 
        dashArray 4s ease-in-out infinite, 
        dashOffset 4s linear infinite;
}

.loader-text {
    display: flex;
    font-size: 4rem;
    -webkit-text-stroke: 0.15rem var(--vintageWine);
    color: transparent;
    font-family: var(--spaceMono);
    margin-top: 0.4em;
}

.letter { 
    position: relative; 
    animation: fillText 2s ease-in-out infinite;
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.2s; }
.letter:nth-child(3) { animation-delay: 0.4s; }
.letter:nth-child(4) { animation-delay: 0.6s; }
.letter:nth-child(5) { animation-delay: 0.8s; }
.letter:nth-child(6) { animation-delay: 1s; }
.letter:nth-child(7) { animation-delay: 1.2s; }

@keyframes dashArray {
    0% { stroke-dasharray: 0 1 359 0; }

    50% { stroke-dasharray: 0 359 1 0; }

    100% { stroke-dasharray: 369 1 0 0; }
}

@keyframes dashOffset {
    0% { stroke-dashoffset: 365; }

    100% { stroke-dashoffset: 5; }
}

@keyframes fillText {
    0% { color: transparent; }

    50% { color: var(--vintageWine); }

    100% { color: transparent; }
}


/* ================== MODAL ================== */
.modal {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
}

.modal.active { 
    visibility: visible; 
    opacity: 1;
}

.modal-container {
    position: relative;
    width: 40%;
    height: auto;
    margin: auto;
    background-color: var(--jetStream);
    box-shadow: 1px 7px 25px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    transition: transform 0.3s ease;
    transform: scale(0.9);
    overflow: hidden;
}

.modal.active .modal-container { transform: scale(1); }

.modal-container label {
    position: absolute;
    top: 0.1em;
    right: 0.4em;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--vintageWine);
}

.modal-container label i { 
    position: relative; 
    z-index: 2; 
}

.modal-container label .close-back { 
    position: absolute;
    top: 0.5em;
    right: 0.2em;
    background-color: var(--jetStream);
    height: 0.6em;
    width: 0.6em;
    z-index: 1;
}

.modal-img { 
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    position: relative;
}

.modal-container img {
    flex: 0 0 100%;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

.modal-slider {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0.5em 0 0.7em 0;
}

.modal-slider a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.modal-slider i {
    color: var(--vintageWine);
    font-size: 1.1rem;
}

.modal-slider .img-slider {
    width: 0.5em;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--vanCream);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.modal-slider .img-slider.active {
    opacity: 1;
    background-color: var(--vintageWine);
}

.modal-content { 
    color: var(--vintageWine); 
    padding: 0 2em 1em 2em;
}

.modal-content h3 { font-size: 2rem; }

.modal-content p {
    font-size: 1rem;
    margin-bottom: 2em;
}

.modal-content h4 { margin-bottom: 0.5em; }

.technologies { 
    display: flex; 
    flex-wrap: wrap;
    width: 100%;
    gap: 0.7em 0.5em;
}

.technologies .tech {
    display: flex;    
    position: relative;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black);
    border-radius: 20px;
    background-color: var(--vanillaCreamHover);
    border: 1px solid var(--mochaEarth);
    padding: 6px 15px 6px 33px;
    white-space: nowrap;
    flex-shrink: 0;
}

.technologies .tech img {
    position: absolute;
    top: 0.25em;
    left: 0.6em;
    height: 75%;
    width: 23%;
    border-radius: 0;
}

.technologies .tech .css { width: 27%; }

.technologies .tech .netbeans,
.technologies .tech .javascript,
.technologies .tech .typescript { 
    top: 0.25em;
    height: 68%;
    width: 16%; 
}

.technologies .tech .nodejs { width: 19%; }

.technologies .tech .sendgrid { width: 18%; }

.technologies .tech .googlecloud { width: 16%; }

.technologies .tech .nestjs,
.technologies .tech .python,
.technologies .tech .numpy,
.technologies .tech .docker,
.technologies .tech .django,
.technologies .tech .chartjs { width: 21%; }

.technologies .tech .postgresql { 
    left: 0.4em;
    width: 18%; 
}

.technologies .tech .figma,
.technologies .tech .puppeteer {
    top: 0.23em;
    width: 17%;
}

.technologies .tech .sweetalert,
.technologies .tech .banxico {
    width: 17%;
    height: 72%;
    top: 0.27em;
    left: 0.5em;
}

.technologies .tech .exceljs,
.technologies .tech .vonage { 
    top: 0.28em;
    left: 0.5em;
    width: 20%; 
    height: 67%;
}

.technologies .tech .cloudinary {
    top: 0.35em;
    left: 0.5em;
    width: 17%; 
    height: 57%;
}

.technologies .tech .git { 
    width: 28%; 
    height: 73%;
    top: 0.27em;
    left: 0.5em;
}

.technologies .tech .unity { 
    height: 70%; 
    left: 0.5em;
}

.technologies .tech .csharp { width: 29%; }

.technologies .tech .mysql {
    height: 72%;
    top: 0.33em;
}

.technologies .tech .entraid {
    top: 0.3em;
    left: 0.6em;
    width: 10%;
    height: 62%;
}


/* ================== CONTACT MODAL ================== */
.contact-modal {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
}

.contact-modal.active {
    visibility: visible; 
    opacity: 1;
}

.modal-container.contact-container { 
    position: relative;
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--vintageWine);
    padding: 1em;
}

.modal-container.contact-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98.7%;
    height: 97.5%;
    border: 3px solid var(--vintageWine);
    border-radius: 5px;
    pointer-events: none;
    z-index: 0;
}

.modal-container.contact-container label {
    top: 0.27em;
    right: 0.6em;
}

.contact-text {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1em;
}

.contact-text h2 {
    color: var(--vintageWine);
    font-size: 2.5rem;
    margin-bottom: 0.3em;
}

.contact-text p {
    color: var(--mochaEarth);
    font-size: 1.1rem;
}

.contact-text p:last-child { margin-bottom: 2.7em; }

.contact-network {
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

.contact-card {
    flex: 0 1 18em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--vanillaCream);
    color: var(--vintageWine);
    padding: 1.5em;
    overflow: hidden;
    z-index: 1;
}

.card-text,
.card-icon { width: 100%; }

.card-text ion-icon { font-size: 3.5em; }

.card-text a,
.card-text p {
    color: var(--mochaEarth);
    word-break: break-all;
    display: inline-block;
    margin-top: 1.5em;
    font-size: 1.1em;
}

.card-text p:last-child { margin-top: 0; }

.card-text a:hover { color: var(--vintageWine); }

.contact-socials { margin: 3em 0 0.6em 0; }   

.contact-socials ion-icon {
    color: var(--mochaEarth);
    font-size: 2em;
    cursor: pointer;
}

.contact-socials ion-icon:hover { color: var(--vintageWine); }

.contact-socials ion-icon:first-child { margin-right: 0.3em; }


/* ================== NAVBAR ================== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    width: 100%;
    position: fixed;
    top: 0;
    background: var(--vintageWine);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: top 0.3s ease;
    z-index: 999;
}

.navbar.hide { top: -90px; }

.navbar-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 2rem;
    max-width: 1920px;
}

.navbar-logo {
    cursor: pointer;
    height: 90%;
    width: 10%;
    padding: 1rem 0;
}

.navbar-logo img {
    width: auto;
    height: 100%;
}

.navbar-container .navbar-menu {
    display: flex;
    text-align: center;
    align-items: center;
    gap: 1.2rem;   
}

.navbar-container .navbar-menu.active { background: var(--vintageWine); }

.navbar-container .navbar-menu li a {
    position: relative;
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 10px;
    text-decoration: none;
    transition: color 0.3s ease;
    overflow: hidden;
}

.navbar-container .navbar-menu li a::after,
.navbar-container .navbar-menu li a::before {
    content: '';
    position: absolute;
    height: 2px;
    background-color: var(--vanCream);
    width: 0%;
    transition: all 0.4s ease;
}

.navbar-container .navbar-menu li a::before { 
    bottom: 1px; 
    left: 50%;
}

.navbar-container .navbar-menu li a::after { 
    bottom: -3px; 
    right: 50%;
}

.navbar-container .navbar-menu li a:hover::before,
.navbar-container .navbar-menu li a.active::before {
    left: 0;
    width: 50%;
}

.navbar-container .navbar-menu li a:hover::after,
.navbar-container .navbar-menu li a.active::after {
    right: 0;
    width: 50%;
}

.navbar-toggle {
    display: none;
    background: transparent;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background: var(--jetStream);
    border-radius: 10px;
    transition: all  0.3s ease-in-out;
}

.language-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.language-btn span {
    display: inline-block;
    opacity: 0.45;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.language-btn span.active {
    opacity: 1;
    color: var(--darkVanilla);
    font-weight: bold;
}

.language-btn span:not(.active):hover { transform: translateY(-2px); }

.lang-divider { pointer-events: none; }

.button.button-contact {
    width: auto;
    height: auto;
    margin-bottom: 0;
    color: var(--black);
    font-weight: 700;
    border-radius: 20px;
    background-color: var(--vanCream);
    border: 2px solid var(--mochaEarth);
    padding: 6px 20px;
}


/* ================== HEADER ================== */
header {
    background-color: var(--vintageWine);
    background-image: url('../images/PatternOrg.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    max-height: 100vh;
    width: 100%;
}

.home-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 7rem;
}

.home-design {
    margin-top: 5rem;
    width: 60%;
    display: flex;
    flex-direction: column;
}

.home-design .home-name { padding: 0 4rem; }

.home-design .home-name h1 {
    font-family: var(--monsieur);
    font-size: 13rem;
    font-weight: lighter;
}

.home-design .home-name h3 {
    font-size: 5rem;
    color: var(--vanCream);
    -webkit-text-stroke: 0.1rem var(--mochaEarth);
    margin: -1.3em 0 0 3em;
}

.home-design .home-info { padding: 2.3em 1em 2.3em 0; }

.home-design .home-info .home-role {
    display: inline-block; 
    background-color: var(--darkVanilla);
    color: var(--black);
    font-weight: bold;
    padding: 0.3em 1.3em;
    clip-path: polygon(
        10px 0,
        100% 0,
        calc(100% - 10px) 100%,
        0 100%
    );
}

.home-design .home-info p { font-size: 1.1rem; }


/* ================== ABOUT ME ================== */
.description.about-me { margin: 2em 0; }

.about-content {
    width: 90%;
    color: var(--mochaEarth);
    font-size: 1.1rem;
    margin-bottom: 3em;
}

.about-do {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 2em;
    margin-bottom: 1em;
}

.about-do h2 {
    color: var(--vintageWine);
    font-size: 2.3rem;
    margin-bottom: 1em;
}

.about-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

.do-card {
    flex: 0 1 19em;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--vanillaCream);
    color: var(--mochaEarth);
    padding: 1.3em;
}

.do-card::before,
.do-card::after {
    content: "";
    position: absolute;
    bottom: 0.4em;
    right: 0.4em;
    border: 1.3px solid var(--mochaEarth);
}

.do-card::before { width: 5em; }

.do-card::after { height: 3em; }

.do-card ion-icon {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--vintageWine);
    font-size: 2.8rem;
    transform: rotate(-13deg) translateX(-0.1em) translateY(-0.3em);
}

.do-card:nth-child(2) ion-icon { font-size: 2.7rem; }

.do-card h3 { 
    color: var(--vintageWine); 
    margin-bottom: auto;
}

.do-card p { 
    font-size: 0.9rem; 
    margin-top: 1em;
}


/* ======================= SKILLS ======================= */
.skills-container {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
}

.skill-card {
    flex: 0 1 24em;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--vanillaCream);
    color: var(--mochaEarth);
    padding: 1.5em;
    overflow: hidden;
    z-index: 1;
}

.skill-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    height: 90%;
    border: 3px solid var(--vanCream);
    pointer-events: none;
    z-index: 0;
}

.skill-card .dot {
    width: 0.5em;
    aspect-ratio: 1;
    position: absolute;
    background-color: var(--vintageWine);
    box-shadow: 0 0 5px var(--vintageWine);
    border-radius: 50%;
    z-index: 2;
    animation: moveDot 15s linear infinite;
}

.skill-card .dot.right { animation: dotRight 15s linear infinite; }

@keyframes moveDot {
    0%, 100% {
        top: 4%;
        left: 3.5%;
    }
    25% {
        top: 4%;
        left: 94.5%;        
    }
    50% {
        top: 93%;
        left: 94.5%;
    }
    75% {
        top: 93%;
        left: 3.4%;        
    }
}

@keyframes dotRight {
    0%, 100% {
        top: 4%;
        left: 94.5%;
    }
    25% {
        top: 93%;
        left: 94.5%;
    }
    50% {
        top: 93%;
        left: 3.4%;
    }
    75% {
        top: 4%;
        left: 3.5%;
    }
}

.skill-card h2 {
    font-size: 2rem;
    color: var(--vintageWine);
    margin-bottom: 0.5em;
}

.skill-card ul { margin-bottom: 1em; }


/* ================== PROJECTS ================== */
.description {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1em;
    margin-bottom: 4em;
}

.description h1 {
    font-size: 4rem;
    color: var(--vintageWine);
}

.description p {
    color: var(--mochaEarth);
    font-size: 1.1rem;
}

.options-container .option {
    width: auto;
    height: 3em;
    color: var(--black);
    font-family: var(--spaceMono);
    font-size: 1rem;
    font-weight: lighter;
    border-radius: 20px;
    background-color: var(--vanillaCream);
    border: none;
    padding: 6px 20px;
    margin-bottom: 1em;
    cursor: pointer;
    transition: 0.5s ease;
}

.options-container .option:hover { background-color: var(--vanillaCreamHover); }

.options-container .option.active {
    color: var(--jetStream);
    background-color: var(--vintageWine);
}

.projects-container { display: none; }

.projects-container.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.project { 
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project .border {
    position: absolute;
    inset: 0px;
    border: 0.3rem solid var(--vanCream);
    opacity: 0;
    transform: rotate(10deg);
    transition: all 0.5s ease-in-out;
    z-index: 2;
}

.project:hover .border {
    inset: 2rem;
    opacity: 1;
    transform: rotate(0);
}

.project img { 
    width: 100%; 
    height: 100%;
    transition: all 0.4s ease;
    z-index: 1;
}

.project:hover img {
    filter: blur(4px) brightness(0.5);
    transform: scale(1.05);;
}

.project .content-project {
    position: absolute;
    width: calc(100% - 4em);
    height: calc(100% - 4em);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: 0.5s;
    z-index: 2;
}

.project:hover .content-project { transform: scale(1); }

.project-title { 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-title h5 {
    font-size: 2rem;
    letter-spacing: 0.7rem;
}

.project-title p {
    transform: translateY(-0.3em);
    letter-spacing: 0.7em;
    margin-bottom: 3em;
}

.project-buttons { 
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    z-index: 3; 
}

.project-buttons .project-option {    
    color: var(--black);
    font-family: var(--spaceMono);
    font-size: 1rem;
    border-radius: 20px;
    background-color: var(--vanCream);
    border: 1px solid var(--mochaEarth);
    padding: 6px 20px;
    cursor: pointer;
}

.project-buttons .project-option:hover { background-color: var(--darkVanilla); }

.project-option .fa-brands,
.project-option .fa-solid { margin-right: 0.5em; }

.project-option ion-icon { 
    margin-right: 0.3em;
    transform: translateY(0.1em);
}

.project-option .fa-arrow-up-right-from-square { 
    font-size: 0.8em; 
    margin-right: 0.7em;
}


/* ================== EXPERIENCE ================== */
.description.exp { margin-bottom: 5em; }

.exp-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.exp-section:not(:last-child) { margin-bottom: 3rem; }

.exp-left,
.exp-right {
    width: 50%;    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.exp-left { 
    padding: 1em;
    align-items: center; 
}

.exp-right {
    padding-right: 6em;
    font-size: 1rem;
    color: var(--mochaEarth);
    align-items: center;
}

.exp-right.second { padding: 0 0 0 6em; }

.exp-title {
    background-color: var(--vanCream);
    color: var(--vintageWine);
    font-weight: bold;    
    padding: 0.2em 1.5em;
    transform: rotate(-5deg) translateY(2em);
    text-align: center;
}

.exp-title.left { transform: rotate(5deg) translateY(1.5em); }

.exp-title h5 {
    font-family: var(--italianno);
    font-size: 2rem;
}

.exp-title p {
    font-family: var(--crimson);
    font-size: 0.8rem;
    color: var(--mochaEarth);
}

.exp-left img {
    width: 64%;
    height: 27em;
}

.exp-left .exp-project {
    width: 85%;
    height: 20em;
}

.exp-left .dolphin { width: 70%; }

.exp-right h2 { 
    color: var(--vintageWine); 
    text-align: center;
}

.exp-right p { text-align: justify; }

.buttons-exp {
    display: flex;
    gap: 1.5em;
}

.button.stay,
.button.congress,
.button.psa,
.button.biblio {
    width: auto;
    height: 2.5em;
    margin: 2.5em 0 0 0;
    border: 1.5px solid var(--mochaEarth);
    font-size: 1rem;
}

.button.biblio i { margin-right: 0.5em; }


/* ================== CERTIFICATIONS ================== */
.do-card.cert { flex: 0 1 23em; }

.do-card.cert p { margin-top: 0.5em; }

.do-card.cert button { margin-bottom: 1.5em; }


/* ================== FOOTER ================== */
.footer {
    width: 100%;
    height: 70px;
    display: flex;
    background-color: var(--vintageWine);    
    overflow: hidden;
    padding: 0.3em 1.5em;
}

.footer-icon { 
    height: 100%;
    display: flex;
    align-items: center;
}

.footer-icon img { height: 70%; }

.footer-text,
.footer-bottom {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--logo);
    margin-left: auto;
}

.footer-text p { font-size: 0.9rem; }

.footer-bottom span { 
    position: relative;
    top: 0.2em;
    font-size: 1.5em; 
    margin: 0 0.3em;
}


/* ================== RESPONSIVE ================== */

@media (max-width: 880px) {
    /* ================== REUSABLE ================== */
    .left-squares .square:nth-child(6n+1),
    .left-squares .square:nth-child(6n+2),
    .left-squares .square:nth-child(6n+3) { transform: translateX(-5em); }

    .left-squares .square:nth-child(6n+4),
    .left-squares .square:nth-child(6n+5),
    .left-squares .square:nth-child(6n+6) { transform: translateX(-1em); }

    .right-squares .square:nth-child(6n+1),
    .right-squares .square:nth-child(6n+2),
    .right-squares .square:nth-child(6n+3) { transform: translateX(9em); }

    .right-squares .square:nth-child(6n+4),
    .right-squares .square:nth-child(6n+5),
    .right-squares .square:nth-child(6n+6) { transform: translateX(5em); }

    /* ================== CONTACT MODAL ================== */
    .modal-container.contact-container { width: 95%; }

    .modal-container.contact-container::after { 
        width: 98%;
        height: 98%; 
    }

    .modal-container.contact-container label { 
        top: 0.27em;
        right: 0.7em; 
    }

    .contact-text { 
        text-align: center;
        padding: 0.4em;
    }

    .contact-text h2 { font-size: 2rem; }

    .contact-text p { font-size: 1.1rem; }

    .contact-text p:last-child { margin-bottom: 2.2em; }

    .contact-network { gap: 1.5em; }

    .contact-card { padding: 1em 2em; }

    .contact-card ion-icon { font-size: 2.7rem; }

    .card-text h2 { font-size: 1.3rem; }

    .card-text a,
    .card-text p {
        margin-top: 1em;
        font-size: 1rem;
    }

    .card-text br { display: none; }

    .contact-socials { margin: 2em 0 0 0; }

    /* ================== MODAL ================== */
    .modal-container { 
        width: 70%; 
        height: auto; 
    }

    .modal-content { padding: 0 2em 1.5em 2em; }

    .modal-content h3 { margin-bottom: 0.4em; }

    .modal-content p { font-size: 1.1rem; }

    /* ================== NAVBAR ================== */
    .navbar-container .navbar-menu {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 2.3rem !important;
        position: absolute;
        height: 100vh;
        width: 250px;
        top: 0;
        right: 0;
        padding: 10rem 1.5rem;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .navbar-container .navbar-menu.active { display: flex; }

    .navbar-toggle {
        display: block;
        z-index: 999;
    }

    .navbar-toggle.active .bar:nth-child(2) { opacity: 0; }

    .navbar-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }

    .navbar-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .navbar-container .navbar-menu .contact { margin-top: 1em; }

    /* ================== HEADER ================== */
    header { background-image: url('../images/PatternMin.webp'); }

    .home-container { padding: 0 5rem; }

    .home-design {
        width: 100%;
        margin-top: 0; 
        align-items: center;
        text-align: center;
    }

    .home-design .home-name { 
        padding: 0 3rem; 
        text-align: center;
    }

    .home-design .home-name h1 { font-size: 11rem; }

    .home-design .home-name h3 { font-size: 4.3rem; }

    .home-design .home-info p { font-size: 1rem; }    

    .button { 
        font-size: 1.2rem;
        margin-bottom: 3em; 
    }

    /* ================== ABOUT ME ================== */
    .about-content { text-align: center; }

    /* ================== SKILLS ================== */
    .skill-card { flex: 0 1 20em; }

    .skill-card li { font-size: 1.1rem; }

    /* ================== EXPERIENCE ================== */
    .description.exp { margin-bottom: 1.8em; }

    .exp-section:not(:last-child) { margin-bottom: 1em; }

    .exp-section.reverse { flex-direction: column-reverse; }

    .exp-left,
    .exp-right {
        width: 100%;
        text-align: center;
    }

    .exp-left .dolphin { width: 80%; }

    .exp-left img { height: 30em; }

    .exp-title h5 { font-size: 2.3rem; }

    .exp-title p { font-size: 0.9rem; }

    .exp-right.second,
    .exp-right { padding: 3.5em; }

    .exp-right p { font-size: 1.1em; }

    .technologies.exp { 
        margin-top: 1.5em;
        font-size: 0.9em; 
    }

    .button.stay,
    .button.congress,
    .button.psa,
    .button.biblio { font-size: 1.2rem; }

    /* ================== FOOTER ================== */
    .footer {
        height: auto;
        flex-direction: column;        
        justify-content: center;
        align-items: center;
        padding: 0.5em 1.5em;
    }

    .footer-icon { 
        height: 5em;
        margin-bottom: 1em;
    }

    .footer-text {
        flex-direction: column;
        margin: 0;
    }
}

@media (max-width: 480px) {
    /* ================== REUSABLE ================== */
    .bottom-section { height: auto; }

    .bottom-section .left-squares,
    .bottom-section .right-squares { 
        grid-template-columns: repeat(3, 4em); 
        transform: translateY(0);
    }

    .left-squares .square,
    .right-squares .square {
        width: 2em;
        height: 2em;
    }

    .left-squares .square:nth-child(6n+1),
    .left-squares .square:nth-child(6n+2),
    .left-squares .square:nth-child(6n+3) { transform: translateX(-4em); }

    .left-squares .square:nth-child(6n+4),
    .left-squares .square:nth-child(6n+5),
    .left-squares .square:nth-child(6n+6) { transform: translateX(-2em); }

    .right-squares .square:nth-child(6n+1),
    .right-squares .square:nth-child(6n+2),
    .right-squares .square:nth-child(6n+3) { transform: translateX(6em); }

    .right-squares .square:nth-child(6n+4),
    .right-squares .square:nth-child(6n+5),
    .right-squares .square:nth-child(6n+6) { transform: translateX(4em); }

    .left-squares.scroll .square:nth-child(odd),
    .right-squares.scroll .square:nth-child(even) { transform: translateY(0); }

    .left-squares.scroll .square:nth-child(even),
    .right-squares.scroll .square:nth-child(odd) { transform: translateY(0); }

    /* ================== CONTACT MODAL ================== */
    .modal-container.contact-container { width: 95%; }

    .modal-container.contact-container::after { 
        width: 98%;
        height: 99%; 
    }

    .modal-container.contact-container label { 
        top: 0.25em;
        right: 0.5em; 
    }

    .contact-text { 
        text-align: center;
        padding: 0.4em;
        margin-top: 1em;
    }

    .contact-text h2 { font-size: 1.8rem; }

    .contact-text p { font-size: 1em; }

    .contact-text p:last-child { margin-bottom: 2em; }

    .contact-network { gap: 1em; }

    .contact-card { padding: 0.7em 2em; }

    .card-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4em;
    }

    .card-icon ion-icon { font-size: 2rem; }

    .card-icon h2 { font-size: 1.3rem; }    

    .card-text a,
    .card-text p {
        margin-top: 1em;
        font-size: 1rem;
    }

    .card-text br { display: none; }

    .contact-socials { margin: 2.5em 0 0 0; }

    /* ================== MODAL ================== */
    .modal-container { 
        width: 95%; 
        height: auto;
        overflow: auto;
    }

    .modal-content { padding: 0 1em 1.5em 1em; }

    .modal-content h3 { font-size: 1.8rem; }

    .modal-content p { font-size: 0.9rem; }

    .technologies .tech { font-size: 0.8rem; }

    /* ================== NAVBAR ================== */
    .navbar-container { padding: 0 1rem; }

    .navbar-container .navbar-menu li a {
        font-size: 1rem;
        padding: 3px 15px;
    }

    .language-btn span { font-size: 1rem; }

    /* ================== HEADER ================== */
    header { background-image: url('../images/PatternMin.webp'); }

    .home-container { 
        padding: 0; 
        margin-top: 0px;
    }

    .home-design { 
        width: 100%; 
        align-items: center;
        margin: auto;
    }

    .home-design .home-name { 
        padding: 0; 
        text-align: center;
    }

    .home-design .home-name h1 { font-size: 6rem; }

    .home-design .home-name h3 { font-size: 2.4rem; }

    .home-design .home-info { padding: 3em 3em; }

    .home-design .home-info p { font-size: 0.8rem; }

    .button {
        width: 12em;
        height: 3em;
        font-size: 1rem;
    }

    /* ================== ABOUT ME ================== */
    .description.about-me { margin: 1.5em 0 1em 0; }

    .about-content { 
        font-size: 0.9rem; 
        padding: 0 0.5em;
        text-align: center;
    }

    .about-do h2 { font-size: 1.9rem; }

    .do-card { padding: 1em 1.3em 1.3em 1.3em; }

    .do-card ion-icon { font-size: 2.5rem; }

    .do-card:nth-child(2) ion-icon { font-size: 2.3rem; }

    .do-card p { font-size: 0.8rem; }

    /* ================== SKILLS ================== */
    .description.skill { margin-bottom: 2.7em; }

    .skill-card h2 { font-size: 1.7rem; }

    .skill-card ul { 
        font-size: 0.9rem; 
        margin-bottom: 0.8em;
    }

    .skill-card li { font-size: 0.9rem; }

    /* ================== PROJECTS ================== */
    .description {
        width: 100%;
        padding: 0 1.5em;
    }

    .description h1 { font-size: 2.5rem; }

    .description p { font-size: 0.9rem; }

    .options-container { 
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 0.6rem;
    }

    .options-container .option { font-size: 0.9rem; }

    .projects-container.active { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

    .project:hover .border { inset: 1em; }

    .project .content-project { 
        width: calc(100% - 3em);
        height: calc(100% - 3em);
        text-align: center;
    }

    .project-title h5 { 
        font-size: 1.1rem;
        letter-spacing: 0.5em; 
    }

    .project-title p { 
        font-size: 0.7em;
        letter-spacing: 0.5em;
    }

    .project-touched .border {
        inset: 2rem;
        opacity: 1;
        transform: rotate(0);
    }

    .project-touched img {
        filter: blur(4px) brightness(0.5);
        transform: scale(1.05);
    }

    .project-touched .content-project { transform: scale(1); }

    .project-buttons.wrap-3 { 
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        transform: translateY(-0.4em);
    }

    .project-buttons.wrap-3 .about { grid-column: 1 / -1; }

    .project-buttons .project-option { font-size: 0.8rem; }

    /* ================== EXPERIENCE ================== */
    .description.exp { margin-bottom: 1.2em; }

    .exp-section:not(:last-child) { margin-bottom: 1em; }

    .exp-section.reverse { flex-direction: column-reverse; }

    .exp-left,
    .exp-right {
        width: 100%;
        text-align: center;
    }

    .exp-left .dolphin { width: 80%; }

    .exp-left img { 
        width: 66%;
        height: 18em; 
    }

    .exp-title { transform: rotate(-5deg) translateY(1em); }

    .exp-title.left { transform: rotate(5deg) translateY(1em); }

    .exp-title h5 { font-size: 1.6rem; }

    .exp-title p { font-size: 0.6rem; }

    .exp-right.second,
    .exp-right { padding: 2em; }

    .exp-right h2 { font-size: 1.3rem; }

    .exp-right p { font-size: 0.9em; }

    .exp-left .exp-project {
        width: 90%;
        height: 13em;
    }

    .technologies.exp { 
        justify-content: center;
        font-size: 0.7em; 
    }

    .button.stay,
    .button.congress,
    .button.psa,
    .button.biblio { font-size: 0.9rem; }

    /* ================== FOOTER ================== */
    .footer {
        height: auto;
        flex-direction: column;        
        justify-content: center;
        align-items: center;
        padding: 0.5em 1.5em;
    }

    .footer-icon { 
        height: 5em;
        margin-bottom: 1em;
    }

    .footer-text {
        flex-direction: column;
        margin: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1365px) {
    /* ================== CONTACT MODAL ================== */
    .modal-container.contact-container { width: 80%; }

    /* ================== MODAL ================== */
    .modal-container { 
        width: 40%; 
        height: auto;
    }

    .modal-content { padding: 0 2em 1.5em 2em; }

    /* ================== HEADER ================== */
    header { background-image: none; }

    .home-container { padding: 0; }

    .home-design { 
        width: 100%; 
        align-items: center;
    }

    .home-design .home-name { 
        padding: 0; 
        text-align: center;
    }

    .home-design .home-info { 
        display: flex;
        text-align: center;
        padding: 2.3em 1.5em;
    }

    /* ================== SKILLS ================== */
    .skill-card ul { font-size: 1.1rem; }

    /* ================== EXPERIENCE ================== */
    .description.exp { margin-bottom: 4em; }

    .exp-left .dolphin { width: 80%; }

    .exp-right { padding-right: 4em; }

    .exp-right.second { padding-left: 4em; }

    .button.stay,
    .button.congress,
    .button.psa,
    .button.biblio { font-size: 1.1rem; }
}

@media (min-width: 1366px) {
    /* ================== HEADER ================== */
    header { 
        background-image: url('../images/PatternMax.webp'); 
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .button { width: 13em; }
}

@media (min-width: 1520px) {
    /* ================== HEADER ================== */
    header { background-image: url('../images/PatternMax.webp'); }
}

@media (min-width: 1920px) {
    /* ================== REUSABLE ================== */
    .bottom-section { margin-top: 4em; }

    .button { font-size: 1.5rem; }

    .button:hover::before,
    .button:hover::after {
        width: 27px;
        height: 27px;
    }

    /* ================== CONTACT MODAL ================== */
    .contact-card { 
        flex: 0 1 20em;
        padding: 1.5em 2em;
    }

    .contact-text h2 { font-size: 3rem; }

    .contact-text p { font-size: 1.5rem; }

    .card-text h2 { font-size: 2rem; }

    .card-text a,
    .card-text p { font-size: 1.4rem; }

    .contact-socials { margin: 4em 0 0.6em 0; }

    .contact-socials ion-icon { font-size: 3.5em; }

    /* ================== MODAL ================== */
    .modal-container { width: 43%; }

    .modal-container label { font-size: 2.5rem; }

    .modal-slider { padding: 1em 0; }

    .modal-slider .prevBtn,
    .modal-slider .nextBtn { font-size: 2rem; }

    .modal-slider .img-slider {
        width: 0.6em;
        height: 0.6em;
    }

    .modal-content { padding: 0 2em 2em 2em; }

    .modal-content h3 { font-size: 3rem; }
    
    .modal-content p { 
        font-size: 1.5rem; 
        margin-bottom: 2.5em;
    }

    .modal-content h4 {
        font-size: 1.2rem;
        margin-bottom: 0.7em;
    }

    .technologies .tech { 
        font-size: 1.1rem; 
        padding: 6px 20px 6px 40px;
    }

    /* ================== NAVBAR ================== */
    .navbar { height: 110px;}

    .navbar.hide { top: -110px; }

    .navbar-container { padding: 0 5rem; }

    .navbar-container .navbar-menu { gap: 1.7em; }

    .navbar-container .navbar-menu li a,
    .language-btn span { font-size: 1.5rem; }

    /* ================== HEADER ================== */
    .home-design .home-name h1 { font-size: 17rem; }

    .home-design .home-name h3 {
        font-size: 7rem;
        margin: -1.3em 0 0 2.6em;
    }

    .home-design .home-info { padding-right: 2em; }

    .home-design .home-info p { font-size: 1.5rem; }

    /* ================== ABOUT ME ================== */
    .about-content { font-size: 1.5rem; }

    .about-do h2 { font-size: 3.5rem; }

    .about-cards { gap: 2.5em; }

    .do-card {
        flex: 0 1 25em;
        padding: 1.5em;
    }
    
    .do-card ion-icon,
    .do-card:nth-child(2) ion-icon { font-size: 3.5rem; }

    .do-card h3 { font-size: 1.5rem; }

    .do-card p { font-size: 1.2rem; }

    /* ================== SKILLS ================== */
    .skills-container { gap: 2em; }

    .skill-card { 
        flex: 0 1 30em; 
        padding: 2em 1.5em;
    }

    .skill-card li { font-size: 1.5rem; }

    /* ================== PROJECTS ================== */
    .description { width: 80%; }

    .description h1 { font-size: 5rem; }

    .description p { font-size: 1.5rem; }
    
    .options-container {
        display: flex;
        gap: 2em; 
    }

    .options-container .option { font-size: 1.5rem; }

    .projects-container.active { grid-template-columns: repeat(auto-fit, minmax(700px, 1fr)); }

    .project-title h5 { 
        font-size: 3.3rem; 
        letter-spacing: 1rem;
    }

    .project-title p { font-size: 1.6rem; }

    .project-buttons { gap: 1.5em; }

    .project-buttons .project-option { 
        font-size: 1.6rem; 
        padding: 10px 30px;
    }

    /* ================== EXPERIENCE ================== */
    .exp-title h5 { font-size: 2.5rem; }

    .exp-title p { font-size: 1rem; }

    .exp-right h2 { font-size: 2em; }

    .exp-right p,
    .button.stay,
    .button.congress,
    .button.psa,
    .button.biblio { font-size: 1.5rem; }

    .button.stay,
    .button.congress,
    .button.psa,
    .button.biblio { margin-top: 3em; }

    .exp-section:not(:last-child) { margin-bottom: 4.5em; }

    .exp-left img { 
        height: 35em; 
        width: 57%;
    }

    .exp-left .exp-project { height: 30em; }

    /* ================== FOOTER ================== */
    .footer { height: 110px; }

    .footer-text p { font-size: 1.3rem; }
}