*{
    box-sizing: border-box;
    margin: 0px; 
    padding: 0px;
  
}

body{
    font-size: 15px;
    font-family: "League Spartan", sans-serif; 
    
}

:root{
      
   --Very-Dark-Magenta: hsl(300, 43%, 22%);
   --Soft-Pink: hsl(333, 80%, 67%) ; 
   --Dark-Grayish-Magenta: hsl(303, 10%, 53%);
  --Light-grayish-Magenta: hsl(300, 24%, 96%);
   --White: hsl(0, 0%, 100%);
   --font-weight-400: 400; 
   --font-weight-500: 500; 
   --font-weight-700: 700; 

}
h1 ,  .star-text{
        color: var(--Very-Dark-Magenta); 
        font-weight: var(--font-weight-700); 
} 
.heading-thing h1{
    
     font-size: 35px;
     line-height:30px;
   
}
.desc{
    color: var( --Dark-Grayish-Magenta );
     line-height: 20px; 
    


} 

.Verified-buyer{
    color: var(--Soft-Pink ); 
}
.colton-img{
    display : flex; 
    flex-direction: row;
     
 
    
   
    
}
.heading-desc{
   
    margin-top: 20px;
    margin-bottom: 40px;
 
}
 .colton-img img {
    border-radius: 900px; 
    height: 45px;
    margin-left: 18px;
 
}

.head-container{
    margin-bottom: 30px;
    margin-top: 50px;
     
    text-align: center;
   
}
.star-images {
    display:flex;
    justify-content: center; 
    align-items: center;
    gap:6px;
}

.star-text{
    margin-top: 9px;
    
  
}
.stars-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:47px;
    margin-top:40px;
    margin-bottom:60px;
    
    

     }
.cards-container{
    max-width:18.75rem   ;  
   padding: 20px;   
    margin: 0 auto ;
    text-align: center;
    
   
    background-color:  var(--Very-Dark-Magenta);
    border-radius: 8px;
    align-content: center;

}
.card-main-text{
    margin-top: 200px;
}
.secound-row-desc{
    color: white; 
    margin-top: 20px;
    text-align: left;
    line-height: 21px;
   
      
}
.card-name{
    display: flex; 
    flex-direction: column ;
   margin-top:-11px ; 
   margin-left: 17px;
    margin-top: -15px;
   gap: 1px;
   
     
}
.wrapper{
    margin-bottom: 50px;  
    
    
}

.card-main-text{
    margin-left: 20px;
}
.secound-row-container{
      
    
     display: flex; 
     flex-direction: column;
     gap: 1em;

}

@media  screen and (min-width: 780px){
    
    .wrapper{ 
     display: flex; 
     flex-direction: column; 
     justify-content: center; 
     align-items: center;
    width: 90%;  
   
    min-height: 100vh;
   
   
    
    } 
    .cards-container{
       
        max-width: 320px;
        height: 210px;

       
    }
   
    .heading-desc{
        color: white; 
    }
    
    .heading-thing h1{
    
    font-size: 50px;
    line-height: 40px; 
    text-align: left;
      
   }
   .heading-desc{
    text-align: left;
   }
   .star-report{
    position: relative; 
    left: 50px;

   }
.star-BestTech{
      position: relative; 
      left: 80px;
}
    .star{
        flex-direction: row;
       display:flex;
        gap: 20px;
        margin-left: 200px;
        text-align: align;
    }
     .secound-row-container{
       
       
        flex-direction: row;
        gap:  29px;
        margin-left:12px;
    
       
        
       
        
        
        
         
         
     }

     .row-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: relative;
    


       
       
        
     }
     .irene-roberts-card{
        transform: translateY(14px);
     }
     .anne-wallace-card{
        transform:translateY(40px);
       
     }
     .stars-container{
        margin-left: 6rem;
     }
}

@media screen and (min-width:1024px ) and (max-width:1024px){ 
    .wrapper{
        margin-left:20px;
    }
}