*{
    margin: 0; padding: 0;
    font-family: 'Poppins', sans-serif;
}

body, html{
    color: black; height: 100%; margin: 0; padding: 0;
    background: #8e44ad;
}

.Top_text{
    color: white; text-align: center; position: relative; top: 8%; 
}

.containers{
    display: flex; flex-direction: row; align-items: center; 
    height: 100vh; gap: 1.8rem; justify-content: center; 
}

.container{
    background-color: white; width: 380px;
    display: flex; flex-direction: column; align-items: center;
    border-radius: 6px;
}

.info{
    text-align: center; color: #8e44ad; font-weight: bold;
}

.bts{
    display: flex; flex-direction: row; align-items: center; 
    justify-content: center; gap: 1rem; margin-bottom: 2rem;
    width: 100%; outline: none; margin-top: 1.5rem;
}

.bt1, .bt2{
    font-size: 1rem; padding: 8px 20px; border-radius: 4px; 
    border: 2px solid #8e44ad; cursor: pointer;
    width: 140px; height: 45px; 
}

.bt1{
    background: none; color: #8e44ad; font-weight: 500;
}

.bt1:hover{
    background: #8e44ad; color: white; transition: 0.4s;
}

.bt2{
    background-color: #8e44ad; color: white; font-weight: bold;
}

.image{
    border-radius: 50%; height: 150px; width: 150px; margin-top: 30px; padding: 3px;
    border: 3px solid #8e44ad;
}

.image img{
    height: 100%; width: 100%; 
}

.text{
    font-size: 16px; font-weight: 400; line-height: 1.6;
    margin-top: 12px; padding-left: 12px; padding-right: 12px;
}

.stars{
    font-size: 18px;
}

.star.active{
    color: #8e44ad;
}