@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root{
  --primaryFont: "League Spartan", sans-serif;

  --veryDarkMagenta: hsl(300, 43%, 22%);
  --softPink: hsl(333, 80%, 67%);
  --darkGrayishMagenta: hsl(303, 10%, 53%);
  --lightGrayishMagenta: hsl(300, 24%, 96%);
  --white: hsl(0, 0%, 100%);
  --starColor:hsl(39, 100%, 50%);
}
*,*::after,*::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
img{
  max-width:100%;
  height: auto;
}
p{
  margin: 1.8rem 0;
}

body{
  background-image: url('images/bg-pattern-top-desktop.svg'), url('images/bg-pattern-bottom-desktop.svg');
  background-position: left 0 top 0,  right 0 bottom 0 ;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: var(--primaryFont);
  padding: 2rem;
}
main{
  max-width: 68rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero-area{
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-area{
  flex-basis:50%;
  margin-top: 5rem;
  padding-right: 8%;
  
}
.text-area h1{
  color: var(--veryDarkMagenta);
  font-size: 3.25rem; 
 }
 .text-area p{
  color: var(--darkGrayishMagenta);
 }
.rating-area{
  flex-basis:50%;
  margin-top: 6rem;
  padding-left: 5rem;
} 
.icon{
  background-color: var(--lightGrayishMagenta);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 22rem;
  font-size: 1.125rem;
  padding: 0.95rem;
  border-radius: .35rem;
  color: var(--starColor);
}
.star-1{
  margin-top: 1rem;
  margin-right: auto;
}
.star-2{
  margin: 1rem auto ; 
}
.star-3{
  margin-left: auto;
  margin-bottom: 1rem;
}
.icon span{
  color: var(--veryDarkMagenta);
  font-size: .937rem;
  font-weight: 600;
  margin-left: 1rem;  
} 

.testimonial-area{
  height: auto;
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.testimonial{
  background-color: var(--veryDarkMagenta);
  color: var(--white);
  padding: 2rem 2rem 0 2rem;
  border-radius: .5rem;
} 
.irene{
  margin-top: 2%;
}
.anne{
  margin-top: 4%;
}
.image-area{
  display: flex;
  align-items: center ;
}
.image-area img{
  border-radius: 50%;
  width: 2.8rem;
}
.testimonial-area h2{
  font-size: .85rem;
  margin-left: 1rem;
  line-height: 1rem;
  font-weight: 600;  
}
.testimonial-area h2 span{
  color: var(--softPink);
  font-weight: normal;
  display: block;
}

.testimonial p{
  line-height: 1.2rem;
}
.author-info p{
  margin-bottom: auto;
  color: var(--darkGrayishMagenta);
}
.author-info a{
  color: var(--veryDarkMagenta);
  text-decoration: none;
}
.author-info a:hover{
  color: var(--softPink);
}
@media screen and (max-width:53.125rem){
  body{
    background-image: url('images/bg-pattern-top-mobile.svg'), url('images/bg-pattern-bottom-mobile.svg');
    background-position: right 40vw bottom 75vh,  left 50vw top 74vh ;
    background-repeat: no-repeat;
    padding: 0;
    margin-top: 10.5rem;  
  }
  main{
    height: auto;
     margin: 0 auto;
     padding: 0rem 2rem 0rem 2rem;      
  }  
.hero-area{
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
  min-height: auto;
  padding-top: 2rem;
  
}

.text-area{
  flex-basis:50%;
  padding-right: 0; 
}
.text-area h1{
  font-size: 2.5rem; 
  margin-top: 0rem;
  line-height: 2rem;
  text-align: center; 
 }

.text-area p{
  margin: 1rem;
  line-height: 1.2rem;
  text-align-last: center;
}
.rating-area{
  margin-block-start: 0rem;
  padding: 0rem;
  width: 100%;
} 
.icon{
  flex-direction: column;
  max-width:100%;
  padding: 0.50rem;
  align-items: center;
}
.star-1{
  margin: 0;
}
.star-2{
  margin: .5rem 0; 
}
.star-3{
  margin: 0;
}

.testimonial-area{
  flex-direction: column ;
  gap: .75rem;
}
.testimonial{
  margin-top: .5rem;
  padding: 1.5rem 1.5rem 0 1.5rem;
  border-radius: .4rem;
 } 
.irene{
  margin: 0 auto;
  
}
.anne{
  margin: 0 auto;
}
.author-info p{
  margin: .5rem auto;
  color: var(--darkGrayishMagenta);
}
.author-info a{
  color: var(--veryDarkMagenta);
  text-decoration: none;
}
.author-info a:hover{
  color: var(--softPink);
}
}