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

/* || RESET */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* || VARIABLES */
:root {
  /* COLORS */
  --bold-purple: #512051;
  --light-purple:#927B91;
  --pink :#EE69A4;
  --white: #FFFFFF;
  --smoke-white:#F2F2F2;
  --gray:#dddadd; 

  /* TYPOGRAPHY */
  --ff:League Spartan, sans-serif;
  --title: 700 2.5rem/2rem var(--ff);
  --title-desktop: 700 3.5rem/3rem var(--ff);
  --text: 500 1.1875rem/1.5625rem var(--ff);
  --div-text :700 1.0625rem var(--ff);
  --testimonial-text: 400 1.0625rem var(--ff);
  --testimonial-msg: 500 1.0625rem/1.375rem var(--ff);
}
/* || UTILITY CLASSES */
.offscreen {
  position: absolute;
  left: -10000px;
}
.nowrap {
  white-space: nowrap;
}

.responsive-image {
  display: none;
}
/* MOBILE FIRST DESIGN */
/* || GENERAL STYLES */
html {
  scroll-behavior: smooth;
  font-size: 1rem;
}
body {
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  place-content:center;
  background-color: var(--smoke-white);
  background-image:
  url(./images/bg-pattern-top-mobile.svg),
  url(./images/bg-pattern-bottom-mobile.svg);
  background-position:
  top left,
  bottom right;
  background-size: 
  374px 232px, 
  1085px 673px;
  background-repeat:
  no-repeat, no-repeat;
}
h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;

}.main-card{
  height: 1349px;
  width: 327px;
  border-color: var(--smoke-white);
  margin: 5.125rem 1.4375rem 6.1875rem 1.5rem;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.main-card__section1{
  width: 327px;
  height: 219px;
  display: flex;
  flex-flow: column;
  gap: 17px;
  margin-bottom: 2.4375rem;
}
.main-card__section1-title{
  font: var(--title);
  color: var(--bold-purple);
  letter-spacing: -1.43px;
  text-align: center;
}
.main-card__section1-text {
  font: var(--text);
  color: var(--light-purple);
  letter-spacing: -0.63px;
  text-align: center;
}
.main-card__section2-wrapper{
  width: 327px;
  height: 266px;
  display: flex;
  flex-flow: column;
  gap: 16px;
  margin-bottom: 3.0625rem;
}

.main-card__div{ 
  background-color: var(--gray);
  display: flex;
  flex-flow: column;
  gap: 15px;   
  align-items: center;
  width: 327px;  
  border-radius: 8px;
 
}
.main-card__div-img{
  display: flex;
  flex-flow: row;
  gap: 8.45px;
  padding: 1rem 6.5906rem 0rem 6.5625rem;
}

.main-card__div-text{
  padding-bottom: 15px;
  font: var(--div-text);
  color: var(--bold-purple);
}
.main-card__section-testimonial-wrapper{  
  width: 327px;
  height: 776px;
  display: flex;
  flex-flow: column; 
  
}
.main-card__testmonial{
  background-color: var(--bold-purple);
  margin-bottom: 1rem;
  border-radius: 8px;
  width: 327px;
  height: 248px;
}
.main-card__testimonial-profile{
 
  display: flex;
  flex-flow: column;
  padding: 2.5rem 2rem 2.1875rem 2rem;


}
.main-card__testimonial-profile__wrapper{ 
  display: flex;
  flex-flow: row ;
  gap: 1.4375rem;
  margin-bottom: 1.4375rem;
 
  
}
.main-card__testimonial-profile__img img {
  width: 40px;
  height: 40px;
  border-radius: 50%; 

}
.main-card__testimonial-title__wrapper{
  display: flex;
  flex-flow: column;
  gap: 4px;
}
.main-card__testmonial-name{
  font: var(--div-text);
  color: var(--white);
  text-transform: capitalize;
}
.main-card__testmonial-title{
  font: var(--testimonial-text);
  color: var(--pink);
  text-transform: capitalize;
}
.main-card__testimonial-msg__wrapper{
  width: 263px;
  height: 110px;
}
 .main-card__testmonial-msg{
  font: var(--testimonial-msg);
  color: var(--white);
  align-items: left;
  letter-spacing: -0.3px;
  
}
/*TABLET DESIGN*/
@media screen and (min-width:600px) and (max-width:1023px) {
  body {
    background-image:
      url(./images/bg-pattern-top-desktop.svg),
      url(./images/bg-pattern-bottom-desktop.svg);
    background-size: 
      584px 362px,
      1085px 673px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6rem;
  }
  .main-card {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .main-card__section-div {   
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }
 
  .main-card__section1 {
    width: 100%;
    max-width: 540px;
    text-align: center;
    margin-bottom: 0.55rem;
  }

  .main-card__section1-title {
    font: var(--title-desktop);
    letter-spacing: -2px;
  }

  .main-card__section1-text {     
      letter-spacing: 0.11px;     
  }    

  .main-card__section2-wrapper {
    
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 1rem;
  }

  .main-card__div {
    width: 445px;
   
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-align: center;
    
  }

  .main-card__section-testimonial-wrapper {
    width: 445px;   
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 5rem;
  }
  .main-card__testmonial{
   
    height: 215px;
  }

  .main-card__testmonial {
    width: 100%;
    max-width: 445px;
  }
  .main-card__testimonial-msg__wrapper{
    width: 400px;
    height: 110px;
  }
  .main-card__testmonial-msg{
   
    align-items: center;
   
    
  }
}
  

/*DESKTOP DESIGN*/ 
@media  screen and (min-width:1024px) {
 
  body{
    background-image:
  url(./images/bg-pattern-top-desktop.svg),
  url(./images/bg-pattern-bottom-desktop.svg);
  background-size: 
  584px 362px,
  1085px 673px; 
 }
 .main-card{
  height: 582px;
  width: 100%;
  max-width: 1110px; 
  margin: 7.375rem auto 6.25rem auto;

}
.main-card__section-div{
  width:100%;
  max-width: 1110px;
  height: 245px;
  display: flex;
  flex-flow: row;
  gap: 7.8125rem;
  margin-bottom: 4.4375rem;
 
}
.main-card__section1{
  width:100%;
  max-width: 445px;
  height: 245px; 
  gap: 16px;
  align-items: flex-start; 
}
.main-card__section1-title{
  font: var(--title-desktop); 
  letter-spacing: -2px;
  text-align: left;  
}
.main-card__section1-text {
  text-align: left;
}


.main-card__section2-wrapper{
  width:100%;
  max-width: 540px;
  height: 200px;  
  margin-bottom: 5.5625rem;
  padding: 1.6875rem 0rem 1.125rem 0rem;
}
.main-card__div{   
  flex-flow: row;
  gap: 2.0281rem;   
  align-items: center;
  width:100%;
  max-width: 445px; 
 
}
.main-card__div-section1{
  margin-left: 0rem ;
 }
.main-card__div-section2{
  margin-left:3rem;
 }

.main-card__div-section3{
 margin-left:  5.9375rem;
}
.main-card__div-img{ 
  padding: 1.2556rem 0rem 1.2581rem 2rem;
}
.main-card__div-text{
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
}
.main-card__section-testimonial-wrapper{ 
  width:100%;
  max-width: 1110px;
  height: 266px;
  flex-flow: row; 
  gap: 30px;   
}
.main-card__testmonial{
  margin-bottom: 0rem; 
  width: 350px;
  height: 234px;
}
.main-card__testimonial1{
  margin-top: 0rem;
}
.main-card__testimonial2{
  margin-top: 1rem;
}
.main-card__testimonial3{
  margin-top: 2rem;
}

.main-card__testimonial-profile__wrapper{

  margin-bottom: 1.9375rem;  
}

.main-card__testimonial-msg__wrapper{
  width: 286px;
  height: 88px;
}

  
}