/* Import Google Font */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap");

/* CSS Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Layout Breakpoints */
  --layout-mobile: 375px;
  --layout-desktop: 1440px;

  /* Primary Colors */
  --clr-purple-50: hsl(260, 100%, 95%);
  --clr-purple-300: hsl(264, 82%, 80%);
  --clr-purple-500: hsl(263, 55%, 52%);

  /* Neutral Colors */
  --clr-white: hsl(0, 0%, 100%);
  --clr-grey-100: hsl(214, 17%, 92%);
  --clr-grey-200: hsl(0, 0%, 81%);
  --clr-grey-400: hsl(224, 10%, 45%);
  --clr-grey-500: hsl(217, 19%, 35%);
  --clr-dark-blue: hsl(219, 29%, 14%);
  --clr-black: hsl(0, 0%, 7%);

  /* Typography */
  --ff-base: 'Barlow Semi Condensed', sans-serif;
  --fw-medium: 500;
  --fw-bold: 600;

  --fs-small: 0.8125rem; /* ~13px */
}

/* Apply Base Font */
body {
  font-family: var(--ff-base);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  /* background-color: var(--clr-grey-400); */
  color: var(--clr-grey-100);
  background: var(--clr-grey-100);
  line-height: 1.5;
  display: grid;
  place-items: center;
  min-height: 100dvh;
}
img{
    /* width: 100%; */
    display: block;
}
        /* text Style  */

.user-name {
    color: var(--clr-grey-100);
    font-weight: var(--fw-bold);

}
.user-role{
    color: var(--clr-grey-100);
    font-weight: var(--ff-base);
    opacity: 50%;

}

.testimonial-content p:not([class]){
    opacity: 70%;
}
.testimonial{
    padding: 1.25rem;
    border-radius: .5rem;
    background: var(--clr-purple-500);
}

/* Layout Styles */
.testimonial-container{
    display: grid;
    gap: 1.5rem;
    padding: 1rem   ;
     width: min(90%,70rem);
    margin: 4rem 0rem;
    grid-auto-columns: 1fr;
    grid-template-areas: 
    'one'
    'two'
    'three'
    'four'
    'five'
    ;
}
.testimonial-heading{
    font-size: large;
    color: #ffffff;
   
}

/* Helper extra Class to Achvie Design */
.flex{
    display: flex;
    align-items: center;
    gap: .8rem;
}

.card-b{
    background: var(--clr-grey-500)
}
.card-c {
    background: var(--clr-white);
   color: var(--clr-black);
}
.card-d{
    background: var(--clr-dark-blue)
}
.card-e {
    background: var(--clr-white);
    color: var(--clr-black);
    
}
.card-c p{
    color: var(--clr-black);
}
.card-e p{
    color: var(--clr-black);
}

.card-c > .user-info p {
      color: var(--clr-black);
}
.card-e > .user-info p{
  color: var(--clr-black);
}


.user-info img{
    width: 2rem;
    border-radius: 50%;
    border: 1px solid var(--clr-grey-100);
}

.testimonial:nth-child(1){
    grid-area: one;
}
.testimonial:nth-child(2){
    grid-area: two;
}
.testimonial:nth-child(3){
    grid-area: three;
}
.testimonial:nth-child(4){
    grid-area: four;
}
.testimonial:nth-child(5){
    grid-area: five;
}

/* Media Query For Large Screen */
@media screen and (min-width:35em ) { 
   .testimonial-container{
    grid-template-areas: 
    'one one'
    'two five'
    'three five'
    'four four'
    
    ;
   }

    
}
@media screen and (min-width:55em ) { 
   .testimonial-container{
    grid-template-areas: 
    'one one two five'
    'three four four five'
    
    ;
   }

    
}