@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');



.suggestions {
    padding: 20px;
    background-color: #ffffff00;
    margin: 20px auto;
    width: 100%;
    border-radius: 10px;

}

.suggestions h2 {
    font-weight: 300;   
     font-size: 16px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;

}

.suggestion-category {
    margin-bottom: 30px;
    font-family: 'Roboto', sans-serif;

}

.suggestion-category h3 {
    font-weight: 300;   
    font-size: 16px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;

}

.suggestion-container {
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;

}

.suggestion-card {
    display: flex;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f900;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;

}

.thumbnail {
    flex-shrink: 0;
}

.thumbnail img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.info {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    flex-grow: 1;
    font-family: 'Roboto', sans-serif;

}

.user-profile {
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;

}

.user-profile img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0px 2px 10px 2px rgba(41, 41, 41, 0.534); /* Shadow effect */
    font-family: 'Roboto', sans-serif;


}

.user-profile .username {
    margin-left: 10px;
    font-size: 14px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;

}

.details {
    margin-top: 4px;
    font-family: 'Roboto', sans-serif;

}

.details h3 {
    font-weight: 300;   
    margin: 0;
    font-size: 16px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;

}

.details  {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;

}

.details .duration {
    color: #ffffff;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;

}


/* Styles for the time and views container */
.time-and-views {
    display: flex;
    align-items: center;
    font-size: 14px; /* Adjust size as needed */
    color: #888; /* Light gray color for the text */
    margin-top: 4px; /* Spacing above the time and views */
    font-family: 'Roboto', sans-serif;

}
/* Styles for the timestamp */
.timestamp {
    color: #ffffff; /* Slightly darker gray color for the timestamp */
    font-family: 'Roboto', sans-serif;


}

/* Styles for the point separator */
.point {
    color: #fafafacc; /* Color for the point */
    margin: 0 5px; /* Spacing around the point */
    font-family: 'Roboto', sans-serif;

    
}

/* Styles for the views */
.views {
    color: #fdfdfd; /* Light gray color for the views */
    font-family: 'Roboto', sans-serif;

}