Mobile first using HTML, CSS FLEX AND GRID

Hello! Great job using grid.

I noticed that some of your CSS rules are repeated for elements that look similar, you could make your CSS more efficient by grouping them, for example in the profiles section instead of repeating the same styles for profile-1, profile-2 and profile-3 you could group the CSS like this:

.profile-1,
.profile-2,
.profile-3 {
    background-color: hsl(219, 30%, 18%);
    height: 30vh;
    margin: 50px;
    border-radius: 5px;
}

// then the same for the paragraphs within those profiles

.profile-1 p,
.profile-2 p,
.profile-3 p {
    text-align: left;
    padding: 20px;
    color:  hsl(0, 0%, 100%);
    opacity: 0.8;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
}

// and you could do the same for the img, h3 and h4 tags too

Then if you had any specific styles you wanted to apply to only one profile card you could do that in a separate block.

However, in this case it seems like all your profiles cards use the exact same style so you could just have one profile-card class and use it for each of those elements in the HTML. Should save you a decent amount of typing!

Hope that helped!

I recommend you using grid in stay production's section and testimonial's section... It gonna look much better...