#recipe-main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 100%;
}

#path {
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 10px;
}


#recipe-title {
    display: flex;
    flex-direction: column;
}

#recipe-title h1 {
    font-size: 40px;
    margin-bottom: 20px;
    color: #333;
}

#recipe-details {
    display: flex;
    gap: 20px;
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.recipe-image {
    border-radius: 10px;
    object-fit: cover;
}

#time-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    margin: 20px;
    color: black;
}

#time-info div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-left: 20px;
}

#time-info span {
    font-weight: bold;
    color: #555;
}

.time-box+.time-box {
    padding-left: 20px;
    border-left: 2px solid black;
}

#short-description {
    max-width: 90%;
    font-size: 18px;
    color: #333;
}

#ingredients-section {
    max-width: 100%;
}

#ingredients-section h2 {
    font-size: 30px;
    margin-bottom: 20px;
    color: #333;
}

#ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 18px;
    color: #555;
    margin-bottom: 50px;
}

.ingredient-items {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ingredient-items i {
    background-color: #974E44;
    border-color: #974E44;
    border-style: solid;
    border-width: 2px;
    border-radius: 10%;
    color: white;
    font-size: 15px;
    padding: 3.5px;
}

.ingredient-cross {
    text-decoration: line-through;
    color: #999;
}

.ingredient-box {
    width: 20px;
    height: 20px;
    border-color: #974E44;
    border-style: solid;
    border-width: 2px;
    border-radius: 10%;
}

#instructions-section {
    max-width: 70%;
}

#instructions-section h2 {
    font-size: 30px;
    margin-bottom: 20px;
    color: #333;
}

#instruction-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.instruction-step {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.instruction-number {
    width: 25px;
    height: 25px;
    min-width: 25px;
    background-color: #974E44;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-step p {
    margin: 0;
    line-height: 1.6;
    color: black;
    font-size: 18px;
}

#conclude {
    margin-top: 50px;
    max-width: 100%;
}

#conclude-background {
    max-width: 70%;
    background-color: #EBEBEB;
    padding: 20px;
    border-radius: 6px;
}

#conclude-banner {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.image-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 70%;
}

.conclude-image {
    width: 200px;
    height: 150px;
    border-radius: 6px;
    object-fit: cover;
}

.rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 14px;
}

.rating i {
    color: #cc5c5c;
}

.recipe-info h3 {
    margin: 0 0 8px 0;
    font-size: 25px;
}

.banner-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    font-size: 18px;
    color: #666;
    margin-bottom: 5px;
}

.banner-details span {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
    max-width: 80%;
}

#buttons button {
    border: none;
    border-radius: 6px;
    margin-right: 5px;
    cursor: pointer;
}

#buttons+#conclude-ingredient-section {
    max-width: 100%;
    padding-bottom: 20px;
    border-top: 2px solid black;
}

#conclude-ingredient-section {
    max-width: 100%;
}

#conclude-ingredient-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
}

#conclude-ingredient-section p {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 18px;
    color: #555;
}

.conclude-ingredient-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.conclude-ingredient-item i {
    background-color: #974E44;
    border-color: #974E44;
    border-style: solid;
    border-width: 2px;
    border-radius: 10%;
    color: white;
    font-size: 15px;
    padding: 3.5px;
}

.conclude-crossed {
    text-decoration: line-through;
    color: #999;
}

.conclude-ingredient-box {
    width: 20px;
    height: 20px;
    border-color: #974E44;
    border-style: solid;
    border-width: 2px;
    border-radius: 10%;
}

#conclude-instructions-section {
    max-width: 90%;
}

#conclude-instruction-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.conclude-instruction-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.conclude-instruction-number {
    width: 25px;
    height: 25px;
    min-width: 25px;
    background-color: #974E44;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conclude-instruction-step p {
    margin: 0;
    line-height: 1.6;
    color: black;
    font-size: 18px;
}

#conclude-cooking-note {
    max-width: 90%;
    margin-top: 20px;
}

.conclude-note-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.conclude-note-box p {
    margin: 0;
    line-height: 1.6;
    color: black;
    font-size: 18px;
}

#comment-section {
    max-width: 70%;
    margin: 40px 0px;
    background: #fff;
    border-top: 5px solid #974E44;
}

.comment {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 5px solid #eee;
    padding-bottom: 15px;
}

.comment.reply {
    margin-left: 50px;
}

.comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 15px;
}

.comment-body {
    flex: 1;
}

.comment-header {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    color: #555;
}

.comment-text {
    max-width: 95%;
    font-size: 18px;
    color: #333;
    margin-left: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.comment-group {
    display: flex;
    flex-direction: column;
}

.comment-group .comment-time {
    font-size: 14px;
    color: #888;
    margin-top: 5px;
}

.comment-header i {
    font-size: 20px;
}

.comment-footer {
    font-size: 16px;
    color: #888;
    display: flex;
    gap: 15px;
}

.comment-footer i {
    font-size: 16px;
    color: #974E44;
}

.load-comments {
    background: transparent;
    border: 1px solid #cc4b4b;
    color: #cc4b4b;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
}

#rate-this-recipe {
    margin-top: 50px;
}

#rate-this-recipe h3 {
    font-size: 25px;
    margin-bottom: 10px;
}

#rate-this-recipe .stars {
    font-size: 20px;
    color: #e8a317;
    margin-bottom: 10px;
}

#rate-this-recipe textarea {
    width: 95%;
    height: 80px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
}

.post-comment {
    background-color: #b03c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

#content-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    margin: 0 auto;
    max-width: 1200px;
    flex-wrap: wrap;
    gap: 1%;
}

#left-column {
    max-width: 60%;
    padding: 0px;
}

#right-column {
    display: flex;
    flex-direction: column;
    max-width: 35%;
    padding: 0px;
    align-items: flex-end;
}

#nutrition-container {
    width: 100%;
    align-items: flex-end;
    padding: 240px 0px 0 0;
    max-width: 100%;
}

#nutrition-facts {
    padding: 20px;
    border-radius: 10px;
    background-color: #eee;
    font-family: Arial, sans-serif;
}

#nutrition-facts h3 {
    font-size: 25px;
    margin-bottom: 15px;
    color: #222;
    font-weight: bold;
}

.nutrition-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    color: #444;
    margin-bottom: 10px;
    gap: 50px;
}

.nutrition-item:last-child {
    border-bottom: none;
}

#recent-recipes {
    padding: 10px 0px 0 0;
    font-family: Arial, sans-serif;
}

#recent-recipes h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #222;
}

.recent-recipe {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.recent-recipe img {
    width: 60%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.recent-details p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.stars {
    font-size: 10px;
    color: #cc5c5c;
    margin: 5px 0;
}

.calories {
    font-size: 14px;
    color: #999;
}

#stay-connected {
    max-width: 100%;
    background-color: #fce8e4;
    padding: 25px 20px;
    text-align: center;
    border-radius: 10px;
    margin: 30px 0px;
    font-family: Arial, sans-serif;
}

#stay-connected h4 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

#stay-connected p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.email-box {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.email-box i {
    color: #ccc;
    margin-right: 10px;
}

.email-box input {
    border: none;
    outline: none;
    font-size: 14px;
    flex: 1;
}

#stay-connected button {
    width: 100%;
    border: none;
    padding: 10px 100px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

#related-recipes {
    margin: 0px;
}

#related-recipes h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #222;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.related-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.related-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0px;
}

.related-item p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

#trending-recipes {
    padding: 10px 0px 0 0;
    font-family: Arial, sans-serif;
}

#related-product {
    background-color: #f5f5f5;
    padding: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

#related-product h3 {
    margin-bottom: 30px;
    font-size: 20px;
    color: #333;
}

#related-product img {
    width: 100%;
    max-width: 260px;
    margin-bottom: 15px;
    border-radius: 8px;
}

#related-product button {
    border: none;
    padding: 10px 100px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

#tags {
    margin: 30px 0px;
}

#tags h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #222;
}

.tag-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    background-color: white;
}

#section-mightlike {
    display: flex;
    margin: 60px auto;
    flex-wrap: wrap;
}

#mightlike-text {
    display: flex;
    text-align: center;
    margin-bottom: 30px;
}

#mightlike-text h2 {
    margin: 0;
    font-size: 40px;
}

.grid {
    display: flex;
    gap: 20px 1%;
    flex-wrap: wrap;
}

.card {
    position: relative;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    width: 32%;
}

.bookmark {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 20%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.bookmark i {
    color: #a15c4d;
    font-size: 20px;
}

.card img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
    object-fit: cover;
}

.card-body {
    padding: 15px;
}

.card-body h3 {
    margin: 20px 0 20px;
    font-size: 16px;
}

.rating {
    color: #f39c12;
    display: flex;
}

.rating i {
    font-size: 10px;
    margin-right: 3px;
}

@media (max-width: 1000px) {
    #content-wrapper {
        padding: 20px 20px;
        gap: 1%;
    }

    #conclude-background,
    #conclude-ingredient-section,
    #conclude-instructions-section,
    #conclude-cooking-note,
    #comment-section,
    #recent-recipes,
    #trending-recipes,
    #related-product,
    #tags {
        max-width: 100%;
    }


    .recipe-info h3 {
        font-size: 20px;
    }

    .banner-details {
        font-size: 16px;
    }

    #recipe-details {
        font-size: 14px;
        gap: 10px;
    }
}

@media only screen and (max-width: 768px) {
    #content-wrapper {
        padding: 20px 20px;
    }

    #path {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #recipe-title h1 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    #recipe-details {
        flex-direction: row;
        font-size: 14px;
        gap: 10px;
        margin-bottom: 15px;
    }

    .recipe-image {
        width: 100%;
        height: auto;
    }

    #time-info {
        flex-direction: row;
        align-items: center;
        margin: 20px 0;
        gap: 10px;
        font-size: 14px;
    }

    #time-info div {
        margin-left: 0;
    }

    .time-box+.time-box {
        padding-left: 5;
        border-left: 1px solid black;
    }

    #short-description {
        max-width: 100%;
        font-size: 16px;
        margin-bottom: 20px;
    }

    #ingredients-section,
    #instructions-section {
        max-width: 100%;
    }

    #ingredients-section h2,
    #instructions-section h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    #ingredients-list {
        font-size: 18px;
        gap: 8px;
        margin-bottom: 30px;
    }

    .ingredient-items i {
        font-size: 12px;
        padding: 3px;
    }

    .ingredient-box {
        width: 18px;
        height: 18px;
    }

    #instruction-list {
        gap: 15px;
    }

    .instruction-step {
        flex-direction: row;
        gap: 10px;
    }

    .instruction-number {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .instruction-step p {
        font-size: 18px;
    }

    #content-wrapper {
        flex-direction: column;
    }

    #left-column,
    #right-column,
    #nutrition-container,
    #tags {
        max-width: 100%;
    }

    #right-column {
        display: block;
    }

    #nutrition-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
        margin: 0px;
    }

    #conclude {
        display: none;
    }


    .banner-details {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #comment-section {
        width: 100%;
        margin: 40px 0;
    }

    .comment.reply {
        margin-left: 20px;
    }

    .comment-text {
        margin: 20px 0;
    }

    #nutrition-facts {
        width: 100%;
        padding: 15px;
    }

    .recent-recipe {
        display: none;
    }

    #recent-recipes h3 {
        display: none;
    }

    #related-recipes {
        display: none;
    }

    #trending-recipes {
        display: none;
    }

    #related-product {
        display: none;
    }

    .tag-box {
        justify-content: center;
    }

    #tags {
        margin: 20px 0 20px 0;
    }

    .comment-footer {
        flex-direction: column;
        gap: 8px;
    }

    #rate-this-recipe textarea {
        height: 100px;
    }

    .post-comment {
        width: 100%;
    }

    body {
        font-size: 16px;
    }

    h2,
    h3,
    h4 {
        font-size: 20px;
    }

    .rating,
    .banner-details,
    #conclude-ingredient-section p,
    .conclude-note-box p,
    .conclude-instruction-step p,
    .comment-header,
    .comment-text,
    .comment-footer,
    .recent-details p,
    .calories,
    .tag {
        font-size: 16px;
    }

    .stars {
        font-size: 12px;
    }

    #rate-this-recipe h3 {
        font-size: 20px;
    }

    .comment-group .comment-time {
        font-size: 13px;
    }

    #section-mightlike {
        display: flex;
        margin: 60px auto;
        flex-direction: column;
        gap: 30px;
        max-width: 100%;
    }

    .grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 5%;
        max-width: 100%;
    }

    .card {
        display: flex;
        flex-direction: column;
        width: 45%;
    }

    #recent-recipes {
        max-width: 100%;
    }

    #recipe-details {
        font-size: 14px;
        gap: 10px;
    }
}