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



body {
   /* background-color: antiquewhite;*/
    font-family: "League Spartan", sans-serif;
    background: url(images/rm209-ning-16-a.jpg) center fixed; 
    /* background: url(images/4561066_93821.jpg) center fixed; */
    background-size: cover;
}

/* Headings */
.header {
    margin-bottom: 1.5rem; /* Equivalent to Bootstrap mb-4 */
    font-weight: bold;
    color: hsl(300, 43%, 22%);
    font-size: 3.5rem;
}

.subheading {
    color: hsl(300deg 10.43% 42.07%);
    font-weight: 500;
    font-size: 20px;
}

.heading-small {
    font-size: 16px;
    margin-bottom: 3%;
}

/* Containers */
.container-fluid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 15px;
    margin-top: 9%;
}

/* Reviews section */
.reviews-section {
    padding-bottom: 4rem;
}

/* Testimonial section */
.testimonial-statement {
    margin-left: -3%;
}

/* Star rating section */
.star-rating {
    margin-left: 9%;
    margin-top: 3%;
}

.stars {
    color: #ffcc00;
    font-size: 1.5em;
    margin-right: 8%; 
    margin-left: 5%;
    display: flex;
    align-items: center;
    letter-spacing: 0.1em; /* Adjust letter spacing for the stars */
}

.star-rating p {
    font-size: 1em;
    color: hsl(300, 43%, 22%);
    font-weight: 700;
    text-align: left; /* Align the text to the left */
    margin: 0; /* Remove default margins */
    flex: 1; /* Allow the paragraph to take available space */
}

.star-rating-item {
    background-color: hsl(300, 24%, 96%);
    display: flex;
    align-items: center;
    margin-bottom: 4%;
    padding: 2%;
    border-radius: 10px;
    justify-content: flex-start; /* Align items to the start */
    max-width: 69%;
}

.rating-2 {
    position: relative;
    left: 10%;
}

.rating-3 {
    position: relative;
    left: 20%;
}

/* Feedback section */
.feedback-section {
    color: whitesmoke;
    margin-left: 9%;
    margin-right: 9%;
    padding-bottom: 4%;
}

.feedback-item {
    background-color: hsl(300, 43%, 22%);
    border-radius: 10px;
    max-width: 25%;
    padding-left: 2%;
    padding-bottom: 2%;
    margin-right: 1%;
}

.text-area {
    margin-top: 12%;
    margin-bottom: -4%;
}

.profile-pic {
    max-width: 13.5%;
    border-radius: 50%;
}

.profile-details {
    position: relative;
    left: 64px;
    bottom: 42px;
    max-width: 28%;
}

.buyer-status {
    font-size: 15px;
    color: hsl(333, 80%, 67%);
    margin-top: -2%;
}

.comment {
    margin-top: -5%;
    margin-right: 4%;
}

.skill-card-2 {
    position: relative;
    top: 26px;
}

.skill-card-3 {
    position: relative;
    top: 62px;
}

/* Footer section */
footer.attribution {
    background-color: inherit; /* Inherit background color from body */
    color: #4e2051;
    width: 100%;
    padding: 20px;
    margin-top: 42px;
    text-align: center;
    display: none;
}

/* Media Queries */
@media only screen and (max-width: 768px) {
    .attribution {
        display: none;
    }
}

@media (min-width: 792px) and (max-width: 1440px) {
    .container-fluid {
        margin-left: 0.5%;
    }

    .row{
        margin-left: -14px;
    }


    .testimonial-statement {
        margin-left: -3%;
        margin-right: -18%;
    }

    .subheading {
        margin-right: -31%;
    }

    .star-rating {
        margin-left: 23%;
        margin-top: 3%;
    }


    .star-rating-item {
        max-width: 100%;
    }

    .feedback-section {
        margin-right: -108px;
    }


    .feedback-item {
        max-width: 35%;
        margin-right: 3%;
    }

    .skill-card-3 {
        position: relative;
        top: -179px;
        left: 72%;
        margin-left: 0.5%;
    }

    .profile-details {
        max-width: 29%;
    }

}
   
@media (max-width: 767px)  {
    body {
        background: url(images/rm209-ning-16-a.jpg) center fixed;
        background-repeat: no-repeat;
    }


    .header {
        font-size: 2.2rem; /* Smaller header for mobile */
        text-align: center;
    }

    .container-fluid {
        margin-top: 20%;
        text-align: center;
    }

    .testimonial-statement {
        margin: -2px;
    }

    .subheading {
        margin-right: 0 !important;
    }

    .star-rating {
        margin-left: 0;
    }

    .star-rating-item {
        display: flex;
        flex-direction: column;
        margin-left: 14px !important;
        max-width: 92% !important; 
    }

    .rating-2, .rating-3 {
        position: relative;
        left: 0;
    }

    .reviews-section {
        margin-right: 14px;
    }


    .feedback-section {
        margin-left: 5%;
        margin-right: 34px !important;
        padding-bottom: 38%;
    }

    .feedback-item {
        max-width: 100%;
    }

    .profile-details {
        top: -43px;
        margin-left: 8px;
        max-width: 38%;
        left: 67px;
    }

    .profile-pic {
        max-width: 45px;
        height: 45px;
        position: relative;
        left: -99px;
    }

    .comment {
        font-size: 0.9em;
        margin-top: -28px;
        margin-bottom: 9%;
        padding-left: 7%;
        text-align: left;
    }
}