* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: "Barlow Semi Condensed", sans-serif;
}
:root {
  --light-purple-50: hsl(260, 100%, 95%);
  --purple-300: hsl(264, 82%, 80%);
  --dark-purple-500: hsl(263, 55%, 52%);
  --white: hsl(0, 0%, 100%);
  --very-light-grey-100: hsl(214, 17%, 92%);
  --light-grey-200: hsl(0, 0%, 81%);
  --grey-400: hsl(224, 10%, 45%);
  --dark-grey-500: hsl(217, 19%, 35%);
  --dark-blue: hsl(219, 29%, 14%);
  --black: hsl(0, 0%, 7%);
}


body{
    background-color: var(--very-light-grey-100);
    min-height: 100vh;
     max-width: 100%;
    text-align: center;
  padding: 1.5rem;
  /* overflow: hidden; */
}

   .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
   padding: 2rem;
    background-color: var(--dark-purple-500);
      margin: 4rem auto 0 auto; 
      width: 100%;
      border: none;
      border-radius: 15px;
      max-width: 375px;

   }
   .profile {
    display: flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.7rem;
  margin-left: 1.1rem;
   }
.danpic {
  
 border-radius: 30px;
  width: 2rem;
  height: 2rem;
  
  border: solid 2px;
  border-color: var(--purple-300);
 
  
}
.headers h3{
  font-size: 13px;
color: var(--white);
 font-weight: 600;
}
.headers h4{
  font-size: 13px;
color: var(--white);
 font-weight: 400;
  margin-left: 0.5rem;
}
.para .para1 {
  text-align: left;
 font-size: 16px;
 color: var(--white);
 font-weight: 600;

}
.para .para2{
  font-size: 13px;
   color: var(--white);
 font-weight: 400;
 text-align: left;
}
.para {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 1.5;
  align-items: center;
  padding: 1rem;
}

   .container2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
   padding: 2rem;
    background-color: var(--dark-grey-500);
      margin: 4rem auto 0 auto; 
      width: 100%;
      border: none;
      border-radius: 15px;
      max-width: 375px;

   }
   .jonpic {
     border-radius: 30px;
  width: 2rem;
  height: 2rem;
  
  border: solid 2px;
  border-color: var(--light-grey-200);
   }
.container3 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
   padding: 2rem;
    background-color: var(--white);
      margin: 4rem auto 0 auto; 
      width: 100%;
      border: none;
      border-radius: 15px;
      max-width: 375px;}
   .jeanpic {
     border-radius: 30px;
  width: 2rem;
  height: 2rem;
  
  border: solid 2px;
  border-color: var(--white);
   }
.container3 .para1,
.container3 .para2 {
  color: var(--dark-grey-500);
}


.container3 .headers h3,
.container3 .headers h4 {
  color: var(--dark-grey-500);
}
.container4 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
   padding: 2rem;
    background-color: var( --dark-blue);
      margin: 4rem auto 0 auto; 
      width: 100%;
      border: none;
      border-radius: 15px;
      max-width: 375px;}
        .patpic {
     border-radius: 30px;
  width: 2rem;
  height: 2rem;
  
  border: solid 2px;
  border-color: var(--dark-purple-500);
   }
 .container5 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
   padding: 2rem;
    background-color: var(--white);
      margin: 4rem auto 0 auto; 
      width: 100%;
      border: none;
      border-radius: 15px;
      max-width: 375px;}
   .kirapic {
     border-radius: 30px;
  width: 2rem;
  height: 2rem;
  
  border: solid 2px;
  border-color: var(--white);
   }
.container5 .para1,
.container5 .para2 {
  color: var(--dark-grey-500);
}
.container5 .headers h3,
.container5 .headers h4 {
  color: var(--dark-grey-500);
}
@media (min-width: 90rem) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
    max-width: 1400px;
    margin: 4.75rem auto;
    padding: 2.3rem 2rem;
    width: 100%;
  }

  .main {
    display: grid;
    place-content: center;
    min-height: 100vh;
    margin: 0;
  }

  .container { /* Daniel */
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    max-width: unset;
    width: 100%;
    margin: 0;
    position: relative;
  }
  .container2 { /* Jonathan */
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    max-width: unset;
    width: 100%;
    margin: 0;
  }
  .container3 { /* Jeanette */
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    max-width: unset;
    width: 100%;
    margin: 0;
  }
  .container4 { /* Patrick */
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    max-width: unset;
    width: 100%;
    margin: 0;
  }
  .container5 { /* Kira */
    grid-column: 4 / 5;
    grid-row: 1 / 3;
    max-width: unset;
    width: 100%;
    margin: 0;
  }

body{
    background-color: var(--very-light-grey-100);
    min-height: 100vh;
     max-width: 100%;
    text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}

.quote-icon {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 80px;  /* Adjust size as needed */
  height: auto;
  opacity: 0.7; /* Optional: make it subtle */
  pointer-events: none; /* Ensures it doesn't block interactions */
  z-index: 2;
}
.container,
.container2,
.container3,
.container4,
.container5 {
box-shadow:
  0 2.8px 14px rgba(44, 62, 80, 0.745),
  0 8px 32px rgba(24, 77, 130, 0.294);
  
}

}