/* Resets default spacing and ensures consistent sizing across elements */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Imports the font for use in the project */
  @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap'); 

 body{
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    background-color: #f5f5f5;       
   }

   .container {
    display: grid;
    width: 1300px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin: auto;
    gap: 30px;
    padding: 40px;
   
 }   

 /* to create a dark shadow around the box */
 .container > *{
    box-shadow: rgba(17, 12, 46, 0.3) 20px 48px 100px 0px;
    border-radius: 10px;    
 }  

 /* profile name*/
 .Danny .bold ,
 .patty .bold,
 .Jeany .bold,
 .kirarry .bold,
 .Johnny .bold {
  font-weight: bold;
  font-size: 14px;   
}
 
 /* Daniel Clifford */
 .Danny{
    grid-column: 1 / span 2;
    background: #733FC8;
    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: top right 65px;
    padding: 30px;
    display: flex;
    flex-direction: column;  
    gap: 8px; 
    line-height: 1.5;
          
 }

 .Danny h3 {
    color: #EDD9FB;
    font-size: 18px;
 }
      
 .Danny p {
        color: #D2B9DD;
        font-size: 13px;        
 }

 .captions{
    display: flex;
    gap: 20px;
}

.caption2{
    display: flex;
    flex-direction: column;
    justify-content: center;
   
}

 /* Jhonathan Walters  */
 .Johnny{
    background: #49556B;
    color: #F8FFFF;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;   
 }

 .Johnny h3 {    
    font-size: 18px;
 }
      
 .Johnny p {
        font-size: 13px;        
 }

  /* Kira Whittle  */
 .kirarry{
    grid-column-start: 4 ;
    grid-row-end: span 2 ;
    background: #FFFFFF;
    color: #50555B;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;       
 }
 .kirarry h3 {    
    font-size: 18px;
 }
      
 .kirarry p {
    font-size: 13px;        
 }

   /* Jeanette Harmon  */
 .Jeany{
    background: #FFFFFF;
    color: #50555B;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
 }

 .Jeany h3 {    
    font-size: 19px;
 }
      
 .Jeany p {
    font-size: 13px;        
 }

 /* Patrick Abrams  */

 .patty{
    grid-column: 2 / span 2;
    background: #191f2d;
    color: #FFFFFF;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: 1.5;
    word-spacing: 0.5px;
   
 }

 .patty h3 {    
    font-size: 18px;
 }
      
 .patty p {
    font-size: 13px;        
 } 

 /*image */
 .img {
    border-radius: 50px;
    width: 40px;
    height: 40px;
    border: 3px solid #A775F2;
}
 .Johnny .img, .kirarry  .img,
   .Jeany .img{
    border: 2px solid  #F8FFFF;
 }