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

.suggestions h2 {
    font-weight: 300;   
     font-size: 16px;
    color: #ffffff;
}

.suggestion-category {
    margin-bottom: 30px;
}

.suggestion-category h3 {
    font-weight: 300;   
    font-size: 16px;
    color: #ffffff;
}



.suggestion-card {
    margin-bottom: 20px;
    background-color: #f9f9f900;
    
    border-radius: 8px;
}

.thumbnail {
    flex-shrink: 0;
}

.thumbnail img {
 width: 100%;
    max-height: 40%;
    height: 240px;
    object-fit: cover;
    box-shadow: 0px 2px 10px 2px rgba(41, 41, 41, 0); /* Shadow effect */
}

.info {
    margin-left: 10px;
    flex-grow: 1;

}


.user-profile {
}

.user-profile img {
    margin-top: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: -10px;
    object-fit: cover;
    box-shadow: 0px 2px 10px 2px rgba(41, 41, 41, 0.144); /* Shadow effect */

}

.user-profile .username {
    margin-top: 5px;
    margin-left: 10px;
    font-size: 16px;
    color: #ffffff; /* White text color */
    position: relative; /* Position relative to its normal position */
    bottom: 15px; /* Move username up by 4px */
}


.username{
   color: #ffffffb0; 
}
.details {
    margin-top: 0px;
}

.details h3 {
    font-weight: 300;   
    font-size: 16px;
    color: #ffffff;
}

.details  {
    color: #ffffff;
}

.details .duration {
    color: #ffffff;
    font-size: 14px;
}


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

/* Styles for the timestamp */
.timestamp {
    color: #ffffffb0; /* Slightly darker gray color for the timestamp */
}

/* Styles for the point separator */
.point {
    color: #ffffffb0; /* Color for the point */
    margin: 0 5px; /* Spacing around the point */
}

/* Styles for the views */
.views {
    color: #ffffffb0; /* Light gray color for the views */
}
/* Duration overlay */
.duration-overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 5px;
    z-index: 1000px;
    font-size: 12px;
    color: #fff;
}

.info-container {
    margin-top: -10px; /* Space above the info container */
    margin-bottom: 8%;
}










.user-and-title-container {
    display: flex; /* Align items in one line */
    align-items: center; /* Center elements vertically */
    margin-bottom: 3px; /* Space between title and info section */
}

.user-profile {
    display: flex; /* Align profile picture and title in one line */
    align-items: center; /* Center vertically */
    margin-right: 10px; /* Space between profile picture and title */
}

.profile-pic {
    width: 40px; /* Set width of profile picture */
    height: 40px; /* Set height of profile picture */
    border-radius: 50%; /* Make it circular */
}

h3 {
    margin: 0; /* Remove default margin */
    font-size: 16px; /* Title font size */
    color: #ffffffef; /* Darker color for title */
    margin-right: 10px; /* Space between title and info */
    font-weight: 400;
    margin-top: -11px;

}

.info-container {
    font-size: 14px; /* Adjust font size */
    color: #999; /* Light grey text color */
    display: flex; /* Align info items in one line */
    align-items: center; /* Center align items vertically */
    gap: 5px; /* Space between elements */
    margin-left: 13%;
    margin-top: -14px;
}

.thumbnail {
    position: relative; /* Make thumbnail a positioned element */
}

.duration-overlay {
    position: absolute; /* Position overlay on thumbnail */
    bottom: 8px; /* Position from the bottom */
    right: 8px; /* Position from the right */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    color: #fff; /* White text */
    padding: 3px 6px; /* Padding around the text */
    border-radius: 3px; /* Slightly rounded corners */
    font-size: 12px; /* Font size for duration */
}


.threedotss span {
    color: aqua;
}