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


*{
  box-sizing: border-box;
}
:root{

  /* assigning css variables to colors */
  --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%);
  --light-gray: hsl(0, 0%, 81%);
  --light-grayish-blue: hsl(210, 46%, 95%);
  font-size: 13px;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
body{
  background: var(--light-grayish-blue);l
}
.container{
  height: 100%;
  width:100%;
  margin: 0 auto;
  background: var(--light-grayish-blue);
  padding: 2rem 0; /* adding  top-bottom padding to the main container */
}
.testimonial{
  position: relative;
  border-radius: 1.5rem;
  padding:1.5rem 2.5rem;
  margin:2rem;
  box-shadow: 0.5rem 0.5rem 0.5rem var(--light-gray); 
;
}

.quote-sign{
  position:absolute;
  right:15%;
  opacity: 0.5;
}

.profile{
  display:flex; /* display flex to keep name and profile pic side by side*/
  justify-content: flex-start;
  align-items: center; /*aligning items in vertical axis*/
  margin-bottom: -1rem;
}

.profile-pic{
  height: 3rem;
  border-radius: 50%;
  margin-right: 1.2rem;
  padding:2px;
}

.name{
  font-weight: 600;
  margin-bottom: -10px;
}
.position{
  font-weight: 400;
  opacity: 0.5;
}
.text-heading{
  z-index: 10;
  font-weight: 600;

}

.review{
  opacity: 0.7;

}

/* background styles css */

.style-moderate-violet{
  background:var(--moderate-violet);
  color:  var(--white);
}

.style-dark-grayish-blue{
  background:var(--very-dark-grayish-blue);
  color:var(--white);
}

.style-white{
  background: var(--white);
  color:var(--very-dark-blackish-blue);
}

.style-dark-blackish-blue{
  background: var(--very-dark-blackish-blue);
  color:white;
}

@media screen and (min-width:821px) {
.container{
  width:min(95%,80rem);
  justify-content: center;
  display:grid;
  grid-gap:2rem;
  grid-template-columns: repeat(4,1fr); /* 4 columns */
  grid-auto-rows:1fr; /*auto-rows */

}

.testimonial{
  margin:0;
}
 /*Positioning whole container to center of the page*/
/* .container{
  position: absolute;
  top:50%;
  transform: translateY(-28vh);
} */

.grid-testimonial-col-2{
  grid-column: span 2; /*any testimonials twice the length*/
}

.grid-testimonial-row-2{
  grid-column: 4 / 5; /* placing item on 4th column*/
  grid-row: 1 / 3; /* testimonials with twice the height*/

}


}