:root {
    /* Primary*/
--Moderate-violet: hsl(263, 55%, 52%);
--Very-dark-grayish-blue: hsl(217, 19%, 35%);
--Very-dark-blackish-blue: hsl(219, 29%, 14%);
--White: hsl(0, 0%, 100%);

/* Neutral */
--Light-gray: hsl(0, 0%, 81%);
--Light-grayish-blue: hsl(210, 46%, 95%);

--Font-size: 13px;
--font-family: 'Barlow Semi Condensed', sans-serif;  
  --font-weight-normal: 500;            
  --font-weight-bold: 600;

}


@media (min-width: 1300px) {

    .content {
        display: grid;
        grid-template-columns: repeat(4, 1f);
        grid-template-rows: 1f 1f;
        width: 95%;
    }

    .first-section{  
        grid-column: 1/3; /*1st and 2nd column*/
        grid-row: 1/2;/*1st row*/
        width: 33.7rem;
        height: 17.7rem;
        margin-right: 0.5rem;
    }
    .second-section{
        grid-column: 3/4;/*3rd column*/
        grid-row: 1/2;/*1st row*/
        width: 15.75rem;
        height: 17.7rem;
        margin-right: 1rem;
    }
    .third-section{
        grid-column: 1/2;/*1st column*/
        grid-row: 2/3;/*2nd row*/
        width: 15.9rem;
        height: 16.6rem;
        margin-top: 1.3rem;
        margin-right: 1rem;
    }
    .fourth-section{
        grid-column: 2/4;/*2nd and 3rd column*/
        grid-row: 2/3;/*2nd row*/
        width: 33.75rem;
        height: 16.6rem;
        margin-top: 1.3rem;  
    }
    .fifth-section{
        grid-column: 4/5;/*4th column*/
        grid-row: 1/3;/*spanning two rows*/
        width: 16rem;
        height: 36rem;
        margin-right: 1rem;
    } 
}

@media(max-width: 1299px) {
    .card {
        max-width: 25rem;
        margin: 0 auto 2rem auto;
    }
}

body {
    font-size: var(--Font-size);
    font-family: var(--font-family);
}

.content {
   margin: 0 auto;
   background-color: var(--Light-grayish-blue);
   padding: 10% 10%;
}

/*styling the review section*/
.card {
    padding: 1.6rem 1.9rem;
    border-radius: 0.5rem;
}
.first-section {
    background-color: var(--Moderate-violet);
    background-image: url(Images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: right 18% top; 
    color: var(--Light-gray);
}
.second-section {
    background-color: var(--Very-dark-grayish-blue);
    color: var(--White);
}
.third-section, .fifth-section {
    background-color: var(--White);
    color: var(--Very-dark-blackish-blue);
}
.fourth-section {
    background-color: var(--Very-dark-blackish-blue);
    color: var(--White);
}

/*for name and profile picture*/
.personal-info {
    display: flex;
    align-items: flex-start; /* Align items at the start of the container */  
}
.left-image {
    width: 1.8rem;  
    margin-right: 1rem; /* Space between image and text */
    border-radius: 50%;
  }
  
.name {
    font-size: 0.8rem;
   font-weight: var(--font-weight-bold);
}
.status {
    font-size: 0.69rem;
   font-weight: var(--font-weight-normal);
   opacity: 50%;
}

.review-title {
    font-size: 1.26rem;
     font-weight: var(--font-weight-bold);
     padding-top: 0.75rem;
     padding-bottom: 0.85rem;
     line-height: 1.53rem;
 
}
.review-content {
    font-size: 0.819rem;
    font-weight: var(--font-weight-normal);
    opacity: 70%;
    line-height: 1.15rem;
}