@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,600;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700;900&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 18px;
}

:root{
    /* Primary */

    --Soft_red: hsl(7, 99%, 70%);
    --Yellow: hsl(51, 100%, 49%);
    --Dark_desaturated_cyan: hsl(167, 40%, 24%);
    --Dark_blue: hsl(198, 62%, 26%);
    --Dark_moderate_cyan: hsl(168, 34%, 41%);

    /* Neutral */

    --Very_dark_desaturated_blue: hsl(212, 27%, 19%);
    --Very_dark_grayish_blue: hsl(213, 9%, 39%);
    --Dark_grayish_blue: hsl(232, 10%, 55%);
    --Grayish_blue: hsl(210, 4%, 67%);
    --White: hsl(0, 0%, 100%);

    /* Font Family */

    --Fraunces: 'Fraunces', serif;
    --Barlow: 'Barlow', sans-serif;

    /* Breakpoints */

    --Mobile_breakpoint: 375px;
    --Desktop_breakpoint: 1440px;

}

header{
    background-image: url('/images/desktop/image-header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 10em;
}

nav{
    padding: 2rem 1.5rem;
    color: var(--White);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo{
    font-family: var(--Barlow);
    font-size: 1.5rem;
}

nav ul{
    list-style: none;
    text-align: center;
}

nav ul li{
    display: inline-block;
    margin: 0 2em;
}

nav ul li a{
    text-decoration: none;
    color: var(--White);
    font-family: var(--Barlow);
    font-size: .8rem;
}

nav ul li:nth-child(4){
    background-color: var(--White);
    padding: .3em 1em;
    border-radius: 1em;
}

nav ul li:nth-child(4) a{
    color: var(--Very_dark_desaturated_blue);
    text-transform: uppercase;
    font-family: var(--Fraunces);
    font-weight: 900;
}

header h1{
    margin-top: 2em;
    font-family: var(--Fraunces);
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--White);
    font-weight: 900;
}

header img{
    margin-top: 3em;
}

main{
    display: flex;
    flex-direction: column;
}

.container {
    display: grid;
    grid-template-columns: auto auto;
}

.square{
    height: 40vw;
    width: 100%;
    padding: 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-position: center;
    background-size: cover;
    gap: 2rem;
    flex-shrink: inherit;
    flex-wrap: wrap;
}

.square h2{
    color: var(--Very_dark_desaturated_blue);
    font-weight: bold;
    font-family: var(--Fraunces);
    font-size: 2rem;
}

.square p{
    font-family: var(--Barlow);
    color: var(--Dark_grayish_blue);
}

.square h4{
    font-family: var(--Fraunces);
    color: var(--Very_dark_desaturated_blue);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-line: underline ;
    text-decoration-color: var(--Yellow);
    text-decoration-thickness: .2rem;
}

.square:nth-child(2){
    background-image: url('/images/desktop/image-transform.jpg');
}

.square:nth-child(3){
    background-image: url('/images/desktop/image-stand-out.jpg');
}

.square:nth-child(5){
    background-image: url('/images/desktop/image-graphic-design.jpg');
    position: relative;
}

.content{
    position: absolute;
    bottom: 2rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    padding-right: 10%;
}

.content p{
    margin: 1rem 0;
}

.square h3{
    color: var(--Very_dark_desaturated_blue);
    font-weight: 900;
    font-family: var(--Fraunces);
}

.square:nth-child(6){
    background-image: url('/images/desktop/image-photography.jpg');
    position: relative;
}

.testimonials{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.testimonials h2{
    margin-top: 6em;
    color: var(--Very_dark_desaturated_blue);
    font-weight: 900;
    font-family: var(--Fraunces);
    text-transform: uppercase;
}

.col-wrapper{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 5em;
    padding: 4em;
}

.col{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 2rem;
}

.col img{
    border-radius: 50%;
    transform: scale(0.8);
}

.col p{
    
    font-family: var(--Barlow);
    color: var(--Dark_grayish_blue);
}

.col h3{
    color: var(--Very_dark_desaturated_blue);
    font-family: var(--Fraunces);
}

.col span{
    color: var(--Dark_desaturated_cyan);
    font-family: var(--Barlow);
}

.attribution { 
    font-size: 11px; text-align: center; 
}

.attribution a {
    color: hsl(228, 45%, 44%); 
}