:root {
    --color-main: #12191f;
    --color-alternative: hsl(from var(--color-main) calc(h - 8) calc(s + 10) calc(l + 3));
    --color-accent: #fa5453;
    --color-dark-accent: hsl(from var(--color-accent) h calc(s - 52) calc(l - 30));
    --color-white: #ecf3fc;
    --color-grey: hsl(from var(--color-white) calc(h + 26) calc(s - 70) calc(l - 39));

    --text-stroke-rgb: 236, 243, 252;

    --scroll-margin-top: 75px;
    --section-padding-x: 300px;
    --padding-header-intact: 50px 105px;
    --font: 'JetBrains Mono';
}

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

html, body {
    scroll-behavior: smooth;
    font-family: var(--font);
    overflow-x: hidden;

    width: 100vw;
    min-height: 100vh;

    background-color: var(--color-main);
}

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

/* Track */
::-webkit-scrollbar-track {
    background: transparent
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-dark-accent);
}

/*--------------- GENERAL ---------------*/
.blur-effect {
    opacity: 0.3;
}

.header-sticky {
    padding: 10px 35px;
    border-bottom: 2px solid var(--color-grey);

    background-color: var(--color-main);
}

.main {
    transition: opacity 0.3s;
}

.sub-title {
    letter-spacing: 12px;
    color: var(--color-accent);
    font-size: 16px;

    text-transform: uppercase;
    text-wrap: nowrap;
}

.title {
    font-weight: lighter;
    font-size: clamp(4rem, 13.5vw, 8.5rem);
    color: transparent;
    text-wrap: nowrap;
    text-transform: uppercase;
    -webkit-text-stroke: 1px rgba(var(--text-stroke-rgb), 0.15);

    user-select: none;

    position: relative;

    &::before {
        content: attr(data-title);

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        color: var(--color-white);
        font-size: clamp(2.5rem, 9vw, 5.5rem);
    }
}

.title-desc {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--color-white);
    z-index: 1;
    text-align: center;

    max-width: 50vw;

    & span {
        text-decoration: underline solid 2px var(--color-accent);
        text-underline-offset: 4px;
    }
}

.active {
    color: var(--color-accent) !important;
    position: relative;

    &::before {
        content: "";

        display: block;
        width: 100%;
        height: 3px;

        position: absolute;
        bottom: 0;
        left: 0;

        border-radius: 0 0 10px 10px;

        background-color: var(--color-accent);

        animation: activated 0.3s;

        transform-origin: center;
    }
}

.menu-opened {
    width: 322px !important;
    padding: 25px 25px 0 25px;

    border-color: var(--color-grey) !important;
}

@keyframes Fade {
    from {
        opacity: 0;
        transform: translateY(-35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes Swipe {
    from {
        opacity: 0;
        transform: translateX(-75px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes SwipeReverse {
    from {
        opacity: 0;
        transform: translateX(75px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes activated {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes zoom {
    from {transform: scale(1);}
    to {transform: scale(1.2);}
}

/*--------------- HEADER ---------------*/
header {
    padding: var(--padding-header-intact);
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: transparent;

    z-index: 999;

    position: fixed;

    transition: all 0.25s;

    & a {
        text-decoration: none;
        color: var(--color-white);
    }

    & .left {   
        & a {
            font-weight: 700;
            font-size: 2em;
            color: var(--color-white);
        }

        & span {
            color: var(--color-accent);
        }
    }

    & .right {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        & a {
            font-size: 1.1rem;
            padding: 4px 6px;
    
            transition: 0.25s all;

            position: relative;

            &::before {
                content: '';

                position: absolute;
                bottom: -2px;
                left: 0;

                width: 100%;
                height: 3px;

                border-radius: 10px;

                background-color: var(--color-accent);

                transform: scaleX(0);
                transform-origin: center;

                transition: 0.2s;
            }

            &:hover {
                color: var(--color-grey);
                
                &::before {
                    transform: scaleX(1);
                }
            }
        }

        & button {
            all: unset;

            text-align: center;
            font-size: 1.1rem;
            color: var(--color-white);

            padding: 5px 20px;
            border-radius: 5px;

            background-color: var(--color-accent);

            cursor: pointer;
            transition: color 0.3s;

            & i {
                text-align: center;
                width: 20px;
                height: 20px;
            }
            
            &:hover {
                color: var(--color-main);
            }
        }
    }
    
    & .menu-burger {
        all: unset;
        cursor: pointer;

        display: none;

        font-size: 2rem;
        color: var(--color-white)
    }

    & .menu {
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 25px;

        position: fixed;
        top: 0;
        left: 0;

        padding-top: 25px;
        height: 100%;
        width: 0;

        border-right: 2px solid transparent;
        background-color: var(--color-main);

        z-index: 99;
        overflow-x: hidden;
        transition: all 0.3s;

        & .menu-top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            width: 100%;

            & a {
                font-weight: 700;
                font-size: 2em;
                color: var(--color-white);

                & span {
                    color: var(--color-accent);
                }
            }

            & i {
                padding: 8px;
                width: 35px;
                height: 35px;

                border-radius: 5px;

                font-size: 1.25rem;
                color: var(--color-white);
                text-align: center;

                background-color: var(--color-alternative);

                cursor: pointer;
                transition: color 0.3s;

                &:hover {
                    color: var(--color-accent)
                }
            }
        }

        & .menu-links {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            gap: 20px;

            width: 90%;

            & a {
                font-size: 1.25rem;
                padding: 6px 12px;
                width: 100%;
                
                border-radius: 0 5px 5px 0;
                border-left: 2px solid transparent;
        
                transition: 0.25s all;

                position: relative;

                & i {
                    text-align: center;
                    line-height: 25px;

                    width: 25px;
                    height: 25px;
                }

                &:hover {
                   background-color: var(--color-alternative);
                   border-color: var(--color-accent);
                }
            }

            & .mode {
                display: flex;
                justify-content: center;
                align-items: center;

                width: 100%;

                font-size: 1.25rem;

                & button {
                    all: unset;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 1.5rem;
                    color: var(--color-white);

                    width: 50%;
                    padding: 10px 12px;
                    border-radius: 5px;

                    background-color: var(--color-accent);
                    transition: background-color 0.4s;
                    cursor: pointer;
                    position: relative;

                    transition: color 0.3s;

                    &:hover {
                        color: var(--color-main);
                    }
                }
            }

            & p {
                color: var(--color-grey);
                text-wrap: balance;
            }
        }
    }

    & * {
        text-wrap: nowrap;
    }
}

/*Scrapped Idea (Unneccessary 13/7/2025 11:28PM)*/
/* --------------- ASIDE ---------------
aside {
    position: fixed;
    margin-left: 40px;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;

    height: 100vh;

    user-select: none;

    & span {
        width: 2px;
        height: 25vh;
        max-height: 250px;

        background-color: var(--color-white);
        opacity: 0.35;
    }

    & a {
        color: var(--color-white);
        font-size: 1.25rem;

        transition: color 0.2s;

        &:hover {
            color: var(--color-grey);
        }
    }
} */

/*--------------- INTRO ---------------*/
.intro {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;

    padding: 225px var(--section-padding-x);

    scroll-margin-top: var(--scroll-margin-top);

    background: url("./images/intro-dark.webp") no-repeat center;
    border-image: fill 1 linear-gradient(to bottom, rgba(255,255,255,0), var(--color-main));
    background-size: cover;

    & h1 {
        font-weight: lighter;
        font-size: clamp(1.75rem, 8vw, 6.5rem);
        color: transparent;
        text-wrap: nowrap;
        -webkit-text-stroke: 1px var(--color-white);

        user-select: none;
    }
    
    & h2 {
        color: var(--color-white);
        font-size: clamp(1.1rem, 3.5vw, 2rem);
    }

    & a {
        background-color: var(--color-accent);
    
        border-radius: 5px;
    
        color: var(--color-white);
    
        text-align: center;
        text-decoration: none;
        font-size: clamp(0.8rem, 2.5vw, 1.2rem);
    
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
    
        position: relative;
    
        padding: 10px 12px;
    
        overflow: hidden;
        cursor: pointer;
        transition: background-color 0.3s;

        &::before {
            font-family: FontAwesome;
            content: "\f019";
        
            position: absolute;
            transform: translateY(-200%);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-size: 24px;
        }

        & span {
            transition: transform 0.4s;
        }

        &:hover {
            background-color: var(--color-dark-accent);

            &::before {
                transform: translateY(0);
            }

            & span {
                transform: translateY(200%);
            }
        }
    }
}

/*--------------- ABOUT ME ---------------*/
.about {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 45px;

    padding: 65px var(--section-padding-x);

    scroll-margin-top: var(--scroll-margin-top);

    & .WhoIAm {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;

        max-width: 500px;

        & .name {
            color: var(--color-white);
            font-size: 1.4rem;

            border-left: 3px solid var(--color-accent);

            padding: 8px 15px;
        }

        & .about-desc {
            color: var(--color-grey);

            font-size: 1.1rem;

            & .quotationMark {
                color: var(--color-accent);
                font-size: 2rem;
            }
        }

        & .about-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;

            & p {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 15px;

                & .info-title {
                    color: var(--color-white);

                    font-size: 0.9rem;
                }

                & .actual-info {
                    color: var(--color-accent);

                    font-size: 1.15rem
                }
            }
        }
    }

    & .headshot {
        position: relative;

        z-index: 99;

        & img {
            min-width: 400px;
            width: 100%;
            height: auto;
        }

        &::before {
            content: '';
            z-index: -1;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);

            display: block;
            width: 55%;
            aspect-ratio: 1 / 1;

            border-radius: 15px;

            background-color: var(--color-accent);
        }
    }
}

/*--------------- OVERVIEW ---------------*/
.overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;

    padding: 50px var(--section-padding-x);

    & .holder {
        display: flex;
        justify-content: left;
        align-items: flex-start;
        gap: 20px;

        padding: 8px 12px;

        & i {
            display: flex;
            justify-content: center;
            align-items: center;
            
            color: var(--color-accent);
            font-size: 2.2rem;

            min-width: 42px;
            height: 42px;
        }

        & .holder-content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
            gap: 8px;

            height: 100%;

            & h1 {
                font-size: 1.4rem;
                color: var(--color-white);
            }

            & p {
                color: var(--color-grey);
            }
        }
    }
}

/*--------------- SERVICES ---------------*/
.services {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    padding: 65px var(--section-padding-x);

    scroll-margin-top: var(--scroll-margin-top);

    & .services-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        margin-top: 50px;

        & .card {
            color: var(--color-white);
            background-color: var(--color-alternative);

            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
            gap: 20px;

            width: 325px;
            height: 275px;
            padding: 35px;

            border-bottom: 3px solid var(--color-white);
            
            cursor: pointer;
            overflow: hidden;

            position: relative;

            & i {
                color: var(--color-accent);
                font-size: 2.25rem;

                transition: color 0.3s;
            }

            & h1 {
                font-size: 1.5rem;
                color: var(--color-white);
            }

            & p {
                color: var(--color-grey);

                transition: color 0.2s;
            }

            & * {
                z-index: 1;
            }

            &::before {
                content: '';
                transition: top 0.4s;
                z-index: 0;

                position: absolute;
                top: 115%;
                left: 0;

                width: 100%;
                height: 110%;

                background-color: var(--color-accent);
            }

            &:hover {
                & i, p {
                    color: var(--color-white);
                }

                &::before {
                    top: 0;
                }
            }
        }
    }
}

/*--------------- QUALIFICATIONS ---------------*/
.quali {
    display: flex;
    justify-content: space-around;
    align-items: center;

    padding: 35px var(--section-padding-x);
    background-color: hsl(from var(--color-main) calc(h - 1) calc(s + 3) calc(l - 3));

    scroll-margin-top: var(--scroll-margin-top);
    
    & .quali-left {
        border: 2px solid var(--color-accent);
        border-right: none;

        padding: 40px 45px;
        
        color: var(--color-white);
        
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 15px;

        user-select: none;

        & h1 {
            font-weight: 700;
            font-size: 8rem;
            color: var(--color-white);

            & span {
                margin-left: -15px;
                color: var(--color-accent);
            }
        }

        & p {
            font-size: 1.2rem;
        }
    }

    & .quali-right {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        gap: 30px;

        & .selection {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;

            color: var(--color-white);
            font-weight: lighter;
            font-size: clamp(0.95rem, 2.5vw, 1.25rem);
            text-align: center;

            padding: 10px 15px;

            & a {
                background-color: var(--color-alternative);

                padding: 8px 10px;
                border-radius: 5px;

                cursor: pointer;
                transition: 0.2s color ease-in-out;

                &:hover {
                    color: var(--color-grey);
                }
            }
        }

        & .box {
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;

            min-height: 275px;

            animation: Fade 0.3s;

            & .content {
                color: var(--color-white);
                background-color: var(--color-alternative);

                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex-direction: column;
                gap: 10px;

                width: 350px;
                height: 200px;

                padding: 25px;
                border: 3px solid transparent;
                border-radius: 10px;

                transition: border 0.4s;

                cursor: pointer;

                & h3 {
                    color: var(--color-accent);
                    font-weight: lighter;

                    font-size: clamp(1rem, 2.5vw, 1.25rem);
                }

                & h1 {
                    color: var(--color-white);
                    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
                }

                & p {
                    & span {
                        color: var(--color-grey);
                    }
                    
                    color: var(--color-accent);
                }

                &:hover {
                    border-color: var(--color-accent);
                }
            }

            & .lang {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                background-color: var(--color-alternative);

                flex: 1;
                aspect-ratio: 1 / 1;
                width: 135px;
                padding: 12px;
                
                border-radius: 10px;
                border: 3px solid transparent;

                cursor: pointer;
                overflow: hidden;

                transition: border-color 0.25s;

                & i {
                    color: var(--color-white);
                    font-size: 4.25rem;

                    transition: 0.2s;
                }

                & svg {
                    fill: var(--color-white);

                    width: 75px;
                    height: 75px;
                }

                & span {
                    color: var(--color-white);
                    font-size: 1.1rem;
                    font-weight: 700;
                    margin-top: 8px;

                    max-height: 0;
                    opacity: 0;
                    transition: 0.2s;
                }

                &:hover {
                    border-color: var(--color-accent);

                    & i {
                        color: var(--color-accent);
                    }

                    & svg {
                        fill: var(--color-accent);
                    }

                    & span {
                        max-height: 30px;
                        opacity: 1;
                    }
                }
            }
        }

        & .skills {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

/*--------------- WORK ---------------*/
.work {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    
    gap: 15px;
    padding: 35px var(--section-padding-x);

    scroll-margin-top: var(--scroll-margin-top);
    
    & .projects {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;

        margin-bottom: 20px;

        animation: Swipe 0.5s;

        & .project-label {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            gap: 15px;
            flex: 1;

            min-width: 250px;
            width: 100%;
            padding: 12px 15px;

            & h3 {
                color: transparent;
                -webkit-text-stroke: 0.1px var(--color-white);
                font-size: clamp(4rem, 8vw, 6rem);

                user-select: none;
                
                & .date {
                    max-width: fit-content;
                    padding: 6px 8px;
                    margin-left: 15px;

                    border-radius: 25px;

                    background-color: var(--color-accent);

                    font-size: clamp(0.7rem, 2.5vw, 1rem);
                    font-weight: lighter;
                    color: var(--color-white);
                }
            }

            & h1 {
                font-size: clamp(1.5rem, 6.5vw, 2.5rem);
                color: var(--color-white);
            }

            & .description {
                color: var(--color-grey);
                font-size: clamp(0.8rem, 2.5vw, 1rem);
            }

            & .slice {
                width: 100%;
                height: 2px;

                background-color: var(--color-white);

                opacity: 0.3;
            }

            & .lang-used {
                color: var(--color-accent);
                
                font-size: clamp(0.9rem, 3.5vw, 1.25rem);
                font-weight: lighter;
            }

            & a {
                text-decoration: none;
                color: var(--color-white);
                font-size: 1.2rem;

                align-self: flex-end;
            
                display: flex;
                justify-content: left;
                align-items: center;

                transition: all 0.3s;

                padding: 0 0 15px 0;

                &:hover {
                    color: var(--color-accent);

                    transform: translateX(15%);
                }
            }
        }

        & .project-img {
            flex: 1;

            text-decoration: none;

            padding: 12px 15px;

            & img {
                width: 100%;
                height: 100%;

                border-radius: 10px;

                aspect-ratio: 1.4 / 1;
                object-fit: cover;
            }
        }

        &:not(:first-of-type) {
            display: none;
        }
    }

    & .switch {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px;

        & button {
            all: unset;

            border-radius: 50%;
            width: 50px;
            height: 50px;

            background-color: var(--color-alternative);

            text-align: center;
            line-height: 50px;
            color: var(--color-white);
            font-size: 1.5rem;

            transition: 0.2s background-color;
            cursor: pointer;
            user-select: none;

            &:hover {
                background-color: var(--color-accent);
            }
        }
    }
}

/*--------------- CONTACT ---------------*/
.contact {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 35px var(--section-padding-x);
    scroll-margin-top: var(--scroll-margin-top);

    background-color: hsl(from var(--color-main) calc(h - 1) calc(s + 3) calc(l - 3));

    & .contact-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        border-radius: 5px;
        overflow: hidden;

        & .contact-left {
            background-color: var(--color-alternative);

            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            gap: 18px;

            padding: 35px 75px 35px 35px;

            & .input-wrapper {
                display: flex;
                justify-content: start;
                align-items: center;

                width: 100%;
                padding: 8px 5px 4px 5px;

                background-color: var(--color-alternative);

                border: 2px solid var(--color-white);
                border-radius: 8px;

                position: relative;

                &::before {
                    content: attr(input-header);

                    position: absolute;
                    top: -11.5px;
                    left: 20px;

                    padding: 0 8px;

                    color: var(--color-white);

                    background-color: var(--color-alternative);
                }

                & input {
                    width: 100%;
                    height: 40px;
                    padding: 20px 7px;

                    font-weight: 500;
                    font-size: 1.1rem;
                    font-family: var(--font);
                    color: var(--color-white);
                    
                    border: none;
                    background: none;
                    outline: none;

                    &:-webkit-autofill, 
                    &:-webkit-autofill:hover, 
                    &:-webkit-autofill:focus, 
                    &:-webkit-autofill:active {
                        -webkit-box-shadow: 0 0 0 1000px var(--color-alternative) inset !important;
                        -webkit-text-fill-color: var(--color-white) !important;
                        transition: background-color 5000s ease-in-out 0s;
                        caret-color: var(--color-white);
                    }

                    &::placeholder {
                        font-family: var(--font);
                    }
                }

                & i {
                    color: var(--color-white);
                    font-size: 1.5rem;

                    width: 40px;
                    height: 40px;
                    padding: 8px;
                }
            }

            & textarea {
                width: 100%;
                min-height: 150px;
                resize: vertical;

                font-size: 1.1rem;
                font-family: var(--font);
                color: var(--color-white);
                
                padding: 8px 12px;

                border-radius: 5px;
                border: 2px solid var(--color-white);
                outline: none;

                background-color: var(--color-alternative);

                &::placeholder {
                    font-family: var(--font);
                }
            }

            & button {
                width: 100%;
                height: 40px;

                border-radius: 5px;
                background-color: var(--color-accent);

                border: none;
                outline: none;

                font-family: var(--font);
                font-size: 1.25em;
                font-weight: lighter;
                color: var(--color-white);

                transition: background-color 0.2s;
                cursor: pointer;

                &:hover {
                    background-color: var(--color-dark-accent);
                }
            }
        }

        & .contact-right {
            background-color: var(--color-accent);

            display: flex;
            justify-content: space-around;
            align-items: start;
            flex-direction: column;
            gap: 25px;

            padding: 35px;

            position: relative;

            &::before {
                content: '';

                position: absolute;
                top: 30px;
                left: -17.5px;

                width: 35px;
                height: 35px;

                background-color: inherit;

                transform: rotate(45deg);
            }

            & .contact-title {
                & h1 {
                    color: var(--color-white);
                    position: relative;

                    font-size: 2rem;

                    margin-bottom: 15px;

                    &::before {
                        content: "";
                        position: absolute;
                        bottom: -5px;
                        left: 0;

                        width: 60%;
                        height: 4px;
                        background-color: var(--color-white);

                        border-radius: 10px;
                    }
                }
            }

            & .contact-info {
                display: flex;
                justify-content: center;
                align-items: start;
                flex-direction: column;
                gap: 20px;

                & .contact-container {
                    text-wrap: wrap;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    & i {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        color: var(--color-white);
                        font-size: 1.3rem;
                        text-align: center;

                        width: 45px;
                        height: 45px;

                        border: 2px solid var(--color-white);
                        padding: 18px;
                        margin-right: 15px;
                        border-radius: 20%;
                    }

                    & .info {
                        color: var(--color-white);
                    }
                }
            }

            & .media {
                display: flex;
                justify-content: start;
                align-items: center;
                gap: 12px;

                & a {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 1.4rem;
                    text-decoration: none;
                    text-align: center;
                    color: var(--color-white);

                    width: 45px;
                    height: 45px;

                    border-radius: 8px;
                    border: 2px solid var(--color-white);

                    background: transparent;
                }
            }
        }
    }
}

/*--------------- FOOTER ---------------*/
footer {
    padding: 20px 45px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;

    border-top: 2px solid var(--color-grey);

    background-color: var(--color-main);
    
    & p {
        color: var(--color-grey);
        text-wrap: balance;
    }
}

/*--------------- MEDIA QUERY ---------------*/
@media (max-width: 1440px) {
    :root {
        --section-padding-x: 25px;
    }

    .title-desc {
        max-width: 80vw;
    }
}

@media (max-width: 1024px) {
    :root {
        --padding-header-intact: 35px 65px;
    }

    .title-desc {
        max-width: 90vw;
    }

    header {
        & .right {
            display: none;
        }

        & .menu-burger {
            display: block;
        }
    }

    .about {
        flex-direction: column-reverse;
    }

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

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

    .quali {
        flex-direction: column;
        align-items: center;
        gap: 45px;
    }

    .contact {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    header {
        & .left {
            font-size: 0.9rem;
        }
    }

    .intro {
        padding: 150px var(--section-padding-x);
    }

    .projects {
        flex-direction: column-reverse;

        & .project-label {
            justify-content: left;
        }
    }

    .contact {
        & .contact-wrapper {
            grid-template-columns: 1fr;

            & .contact-left {
                padding: 35px 35px 75px 35px
            }

            & .contact-right {
                &::before {
                    top: -17.5px;
                    left: 45px;
                }
            }
        }
    }
}

@media (max-width: 640px) {
    :root {
        --padding-header-intact: 35px 35px !important;
        --section-padding-x: 15px;
    }

    .header-sticky {
        padding: 10px 20px;
    }

    .intro {
        & .links {
            gap: 15px;
        }
    }

    .about {
        & .about-details {
            grid-template-columns: 1fr !important;
        }
    }

    .overview {
        grid-template-columns: 1fr !important;
    }

    .services {
        & .services-container {
            grid-template-columns: 1fr !important;
        }
    }

    .quali {
        & .quali-right {
            & .selection {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            & .box {
                grid-template-columns: 1fr !important;

                & .content {
                    width: 300px;
                    height: 200px;
                }
            }

            & .skills {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
    }
}