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

* {
    margin: 0;
    padding: 0;
    font: inherit;
    font-family: "Poppins", serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    position: relative;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #F6FFF1;
}

h2 {
    font-family: "Audiowide", serif;
    font-size: 4rem;
    color: #091F00;
    line-height: 100%;
}

.itens {
    max-width: 456px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.item {
    color: #E8F5E2;
    background-color: #64954F;
    border-radius: 1rem;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    align-self: center;
}

a {
    text-decoration: none;
    color: #A7CA98;
    font-size: 1rem;
}

.link-icon {
    height: 1rem;
}

.img-deco {
    width: 100%;
}

.link {
    align-items: center;
    display: flex;
    gap: 0.25rem;
}

p {
    line-height: 160%;
}

header {
    position: fixed;
    width: 100%;

    height: 5.875rem;
    padding-inline: 6.25rem;
    background-color: #F6FFF1;
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
    z-index: 2;

    box-shadow: 0px 2px 4px rgba(9, 31, 0, 0.1);

    & nav {
        display: flex;
        gap: 2rem;
        margin: auto;
    }

    & a {
        text-decoration: none;
        color: #091F00;
        font-weight: 600;
    }

    a:hover {
        color: #255311;
    }

    #btn-contact {
        background-color: #040E00;
        color: #D4E6CC;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        display: flex;
        gap: 0.5rem;
        font-weight: 600;
    }

    #btn-contact:hover {
        background-color: #255311;
    }

    #logo-name {
        height: 22px;
    }

    #menu {
        display: none;
    }
}

#navMobile {
    display: none;
}

#intro {
    display: flex;
    justify-content: space-between;

    #luna {
        margin-top: 94px;
    }
    
    #info-profile {
        margin-top: 94px;
        display: flex;
        align-items: center;
        margin-inline: 100px;
        gap: 4rem;
    }

    #info {
        display: grid;
        row-gap: 1.5rem;
        max-width: 40rem;
    }

    #text {
        display: grid;
        row-gap: 0.5rem;
    }

    h1 {
        font-family: "Audiowide", serif;
        font-size: 6.75rem;
        color: #091F00;
        line-height: 100%;
    }

    p {
        font-size: 1.5rem;
        color: #555555;
    }

    span {
        color: #555555;
    }

    #local {
        display: flex;
        gap: 0.25rem;
    }
}

#trajectory {
    background-color: #D4E6CC;
    padding: 4rem 6.25rem;
    display: grid;
    row-gap: 4rem;

    #info-trajectory {
        display: flex;
        gap: 8rem;
    }

    p {
        font-size: 1rem;
        color: #000000;
        max-width: 41.625rem;
    }

    #Skills {
        display: grid;
        row-gap: 4rem;
    }

    h3 {
        font-size: 2rem;
        color: #255311;
        font-weight: 800;
    }

    .skill {
        display: grid;
        row-gap: 1rem;
    }
}

#experience {
    background-color: #141414;
    display: grid;
    justify-items: center;
    padding: 4rem 6.25rem;
    row-gap: 4rem;

    #experiences {
            display: grid;
            row-gap: 6rem;
        }

    h2 {
        font-size: 4rem;
        color: #E9E9E9;
    }

    p {
        color: #B0B0B0;
        font-size: 1rem;
        align-self: center;
    }

    h3 {
        font-size: 2rem;
        color: #CACACA;
        font-weight: 800;
    }

    small {
        font-size: 0.75rem;
        color: #C2DBB7;
        margin-top: 0.5rem;
        min-width: 4.651875rem;
    }

    .item {
        color: #091F00;
        background-color: #C2DBB7;
    }

    .info-experience {

        display: flex;
        gap: 4rem;
        align-items: flex-start;

        .slides {
            display: grid;
            row-gap: 1rem;
            justify-items: center;
        }

        .slide-big {
            height: 13rem;
        }

        .slides-mini {
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: center;
        }

        .slide-small {
            height: 3.25rem;
            z-index: 1;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.3s ease-in-out;
        }

        .slide-small:hover,
        .slide-small.active {
            opacity: 1;
            transform: scale(1.1);
        }

        .project-experience {
            display: flex;
            gap: 1rem;
        }

        .discretion-experience {
            display: grid;
            row-gap: 1rem;
            max-width: 28.75rem;
        }

        .skills-experience {
            margin-left: 2rem;
            display: grid;
            row-gap: 4rem;
            align-self: flex-start;
        }

        .job-position {
            color: #C2DBB7;
        }
    }
}

#projects {
    background-color: #E8F5E2;
    padding: 4rem 6.25rem;
    display: grid;
    row-gap: 4rem;

    h2 {
        justify-self: flex-end;
    }
    
    #list-projects {
        flex-wrap: wrap;
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
    }

    #extension-project{
        border: 0.25rem solid #7FAC6B;
    }

    .project {
        background-color: #141414;
        padding: 2rem;
        max-width: 38rem;
        display: grid;
        row-gap: 4rem;
        border-radius: 1rem;
    }

    .info-project {
        display: grid;
        row-gap: 1rem;
    }

    h3 {
        font-size: 2rem;
        font-weight: 800;
        color: #CACACA;
    }

    p {
        font-size: 1rem;
        color: #B0B0B0;
    }

    a {
        font-size: 1rem;
    }

    .img-project {
        height: 18.25rem;
        justify-self: center;
    }

    .item {
        color: #091F00;
        background-color: #C2DBB7;
    }
}

#training {
    background-color: #040E00;
    padding: 4rem 6.25rem;
    display: grid;
    row-gap: 4rem;
    margin-top: 0;

    h2 {
        color: #E9E9E9;
    }

    #info-training {
        display: grid;
        row-gap: 2rem;

        & span {
            font-size: 1rem;
        }

        & p {
            max-width: 38rem;
        }
    }

    p {
        color: #D5D5D5;
        font-size: 1rem;
        line-height: 170%;
    }

    #level {
        font-size: 0.75rem;
    }

    span {
        font-size: 0.75rem;
        color: #A7CA98;
    }

    a {
        text-decoration: underline;
    }

    h3 {
        color: #040E00;
        font-weight: 800;
        font-size: 1.5rem;
    }

    h4 {
        color: #A7CA98;
        font-size: 1.125rem;
    }

    #list-training {
        display: flex;
        flex-wrap: wrap;
        justify-items: center;
        gap: 8rem;

        span {
            color: #C2DBB7;
            max-width: 4.6875rem;
        }
    }

    .training {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }

    .discretion-training {
        display: grid;
        row-gap: 1rem;
        background-color: #E8F5E2;
        border-radius: 1rem;
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        min-width: 24.875rem;

        p {
            color: #255311;
        }
    }

    .course {
        display: grid;
        row-gap: 0.25rem;
    }

    #intensive-courses {
        display: grid;
        margin-top: 4rem;

        & h3 {
            color: #D4E6CC;
        }

        p {
            color: #B0B0B0;
        }
    }

    #list-courses {
        display: grid;
        row-gap: 2rem;
    }

    .intensive-course {
        display: flex;
    }

    .discretion-course {
        display: grid;
        align-content: center;
        row-gap: 1.5rem;
    }

    .name-course {
        display: flex;
        width: 39.5rem;
    }

    .name {
        width: 31.375em;
        margin-right: auto;
    }

    .img-course {
        height: 9.875rem;
        margin-left: auto;
    }
}

#testimonials {
    display: grid;
    row-gap: 2rem;
    padding: 4rem 6.25rem;
    background-color: #D4E6CC;

    h3 {
        font-size: 2rem;
        color: #255311;
        font-weight: 400;
    }

    /* #list-testimonials {} */

    .testimonial {
        background-color: #040E00;
        border-radius: 1rem;
        padding: 1.5rem 2rem;
        display: grid;
        row-gap: 1.5rem;
    }

    .profile-testimonial {
        display: flex;
        gap: 1.5rem;
    }

    & img {
        height: 4rem;
    }

    .discretion-name {
        display: grid;
        row-gap: 0.25rem;
    }

    h4 {
        font-size: 1.5rem;
        color: #F6FFF1;
        font-weight: 400;
    }

    span {
        font-size: 0.75rem;
        color: #C2DBB7;
    }

    p {
        font-size: 1rem;
        line-height: 170%;
        color: #D5D5D5;
    }

    .link-icon {
        height: 1rem;
    }

    a {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
}

footer {
    display: grid;
    row-gap: 2rem;
    padding: 4rem 6.25rem 2rem;
    background-color: #141414;

    #content-footer {
        display: flex;
        gap: 13.5rem;
    }

    #list-contact {
        display: grid;
        row-gap: 0.5rem;
    }

    .contact {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    p {
        font-size: 1rem;
        color: #D5D5D5;
        max-width: 31.375rem;
    }

    small {
        color: #707070;
        font-size: 0.75rem;
    }

    a {
        color: #E8F5E2;
        font-size: 1.5rem;
    }

    img {
        height: 1.5rem;
    }
}

@media (1200px >= width) {

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    p {
        line-height: 160%;
    }
    
    .itens {
        gap: 0.5rem;
    }
    
    .item {
        font-size: 0.85rem;
        padding: 0.375rem 0.75rem;
    }

    header {
        padding-inline: 20px;
        height: 3.375rem;
        z-index: 10;

        #logo-name {
            height: 15px;
            margin-right: auto;
        }

        a {
            margin-right: auto;
        }

        & nav {
            display: none;
        }

        #btn-contact {
            padding: 6px 12px;
            font-size: 0.625rem;
            display: flex;
            align-items: center;
        }
        
        #icon-mail {
            height: 15px;
        }

        #menu {
            display: block;
            cursor: pointer;
        }

        #menu:hover {
            filter: invert(25%) sepia(35%) saturate(500%) hue-rotate(60deg);
        }

        #menu-mobile {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .menu-active {
            filter: invert(25%) sepia(35%) saturate(500%) hue-rotate(60deg);
        }
    }

    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: none; 
        z-index: 5;
    }

    #navMobile {
        background-color: #D4E6CC;
        position: fixed;
        top: 3.4rem;
        display: grid;
        row-gap: 1rem;
        padding: 1rem 1.25rem;
        justify-content: center;
        width: 12rem;
        height: 100%;
        right: 0;
        z-index: 10;

        box-shadow: 0px 2px 4px rgba(9, 31, 0, 0.1);

        a {
            color: #091F00;
            font-size: 1rem;
            margin-right: 1rem;
        }

        a:hover {
            color: #255311;
        }

        #grid-menu {
            display: grid;
            row-gap: 1rem;
            margin-top: 1rem;
        }
    }

    #navMobile {
        display: none;
    }

    #intro {
        display: flex;
    
        #luna {
            /* display: none; */
            height: 20rem;
            margin-top: 3rem;
        }
        
        #info-profile {
            margin-top: 3rem;
            display: flex;
            align-items: center;
            margin-inline: 20px;
            gap: 2rem;
        }
    
        #info {
            display: grid;
            row-gap: 0.5rem;
            max-width: 20.9375rem;
        }
    
        #text {
            display: grid;
            row-gap: 0.25rem;
        }
    
        h1 {
            font-size: 3.375rem;
        }
    
        p {
            font-size: 0.75rem;
        }
    
        span {
            font-size: 0.625rem;
        }
    
        #local {
            gap: 0.125rem;
            align-items: center;
        }

        .icon-local {
            height: 0.625rem;
        }

        #img-profile {
            height: 240px;
        }
    }

    #trajectory {
        padding: 4rem 1.25rem;
        row-gap: 2rem;
    
        #info-trajectory {
            display: flex;
            gap: 4rem;
        }
    
        p {
            font-size: 0.85rem;
            max-width: 24rem;
        }
    
        #Skills {
            display: grid;
            row-gap: 2rem;
        }
    
        h3 {
            font-size: 0.875rem;
        }
    
        .skill {
            display: grid;
            row-gap: 0.5rem;
        }
    }

    #experience {
        justify-items: flex-start;
        display: grid;
        padding: 4rem 1.25rem;
        row-gap: 2.5rem;


        small {
            font-size: 0.5rem;
            margin-bottom: -4rem;
        }
        
        h2 {
            font-size: 1.5rem;
        }

        p, a {
            font-size: 0.85rem;
        }

        .link {
            align-items: center;
            display: flex;
            gap: 0.25rem;
        }

        .link-icon {
            width: 0.625rem;
        }

        h3 {
            font-size: 1.25rem;
        }

        .info-experience {
    
            display: flex;
            gap: 4rem;
            width: 100%;
    
            .slides {
                justify-items: center;
            }
    
            .project-experience {
                display: grid;
                gap: 1rem;
            }
    
            .discretion-experience {
                display: grid;
                row-gap: 1rem;
                max-width: 28.75rem;
            }
    
            .skills-experience {
                margin-left: 0;
                margin-top: 2rem;
                display: grid;
                row-gap: 1rem;
                align-self: flex-start;
            }
        }
    }

    #projects {
        padding: 4rem 1.25rem;
        row-gap: 2.5rem;
    
        .project {
            padding: 1.25rem;
            max-width: 20.875rem;
            display: grid;
            row-gap: 2rem;
        }
    
        .info-project {
            row-gap: 0.5rem;
        }
    
        h3 {
            font-size: 1.125rem;
        }
    
        p {
            font-size: 0.85rem;
        }
    
        a {
            font-size: 0.85rem;
        }
    
        .img-project {
            height: 10rem;
        }
    }

    #training {
        padding: 4rem 1.25rem;
        row-gap: 2.5rem;
    
        #info-training {
            row-gap: 1rem;
    
            & span {
                font-size: 0.75rem;
            }
    
            & p {
                max-width: 21rem;
            }
        }
    
        p {
            font-size: 0.75rem;
        }
    
        #level {
            font-size: 0.5rem;
        }

        a {
            font-size: 0.75rem;
        }
    
        span {
            font-size: 0.5rem;
        }
    
        h3 {
            font-size: 0.75rem;
        }
    
        h4 {
            font-size: 0.75rem;
        }
    
        #list-training {
            display: flex;
            flex-wrap: wrap;
            justify-items: center;
            gap: 2rem;
    
            span {
                color: #C2DBB7;
                max-width: 2.6875rem;
            }
        }
    
        .training {
            gap: 0.75rem;
        }
    
        .discretion-training {
            row-gap: 0.5rem;
            padding: 0.5rem 0.75rem 0.75rem 0.75rem;
            min-width: 12.5rem;
        }
    
        .course {
            row-gap: 0.125rem;
        }
    
        #intensive-courses {
            display: grid;
            row-gap: 2rem;
            margin-top: 2rem;
        }

        .intensive-course {
            display: flex;
            gap: 1rem;
        }
    
        .discretion-course {
            display: grid;
            row-gap: 0.75rem;
        }
    
        .name-course {
            display: flex;
            width: 19.75rem;
            align-items: center;
        }
    
        .name {
            width: 15.625rem;
            margin-right: auto;
        }

        .hours {
            padding-right: auto;
        }
    
        .img-course {
            height: 6.25rem;
            margin-left: auto;
        }
    }

    #testimonials {
        padding: 4rem 1.25rem;
        row-gap: 2.5rem;
    
        h3 {
            font-size: 1.25rem;
        }
    
        /* #list-testimonials {} */
    
        .testimonial {
            padding: 1.25rem;
            row-gap: 1rem;
        }
    
        .profile-testimonial {
            gap: 0.5rem;
        }
    
        & img {
            height: 2.5rem;
        }
    
        h4 {
            font-size: 0.875rem;
        }
    
        span {
            font-size: 0.75rem;
        }
    
        p {
            font-size: 0.85rem;
        }

        a {
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
    
        .link-icon {
            height: 0.75rem;
        }
    }

    footer {
        padding: 1rem 1.25rem;
        row-gap: 2rem;
    
        #content-footer {
            display: flex;
            gap: 4rem;
        }
    
        #list-contact {
            display: grid;
            row-gap: 0.375rem;
        }
    
        .contact {
            gap: 0.375rem;
        }
    
        p {
            font-size: 0.85rem;
            max-width: 20.875rem;
            line-height: 170%;
        }
    
        small {
            font-size: 0.75rem;
        }
    
        a {
            font-size: 0.75rem;
        }
    
        img {
            height: 0.75rem;
        }
    }
}

@media (width <= 768px) {

    header {
        padding-inline: 20px;
        height: 3.375rem;

        #logo-name {
            height: 15px;
            margin-right: auto;
        }

        & nav {
            display: none;
        }

        #btn-contact {
            padding: 6px 12px;
            font-size: 0.625rem;
            display: flex;
            align-items: center;
        }
        
        #icon-mail {
            height: 15px;
        }

        #menu {
            display: block;
        }

        #menu-mobile {
            display: flex;
            gap: 20px;
            align-items: center;
        }
    }

    #intro {
        display: flex;
    
        #luna {
            display: none;
        }
        
        #info-profile {
            margin-top: 7.375rem;
            display: grid;
            align-items: center;
            margin-inline: 20px;
            gap: 2rem;
        }
    
        #info {
            display: grid;
            row-gap: 0.5rem;
            max-width: 20.9375rem;
        }
    
        #text {
            display: grid;
            row-gap: 0.25rem;
        }
    
        h1 {
            font-size: 3.375rem;
        }
    
        p {
            font-size: 0.75rem;
        }
    
        span {
            font-size: 0.625rem;
        }
    
        #local {
            gap: 0.125rem;
            align-items: center;
        }

        .icon-local {
            height: 0.625rem;
        }

        #img-profile {
            height: 336px;
        }
    }

    #trajectory {
        margin-top: 4rem;
        row-gap: 4rem;
    
        #info-trajectory {
            display: grid;
            row-gap: 4rem;
        }
    }

    #experience {
        justify-items: center;

        .project-experience {
            display: grid;
        }

        .info-experience {
            display: grid;
        }

        small {
            margin-bottom: -0.5rem;
        }
    }

    #training {

        .intensive-course {
            display: grid;
        }
    
        .img-course {
            margin-left: 0;
        }
    }

    footer {
        #content-footer {
            display: grid;
            row-gap: 2rem;
        }
    }
}