* {
    /* outline: red solid 2px; */
}
.product-main-section {
    /* padding-bottom: 5rem;
    padding-top: 10rem; */
    padding-bottom: 9rem;
    padding-top: 6.5rem;
    max-width: 100%;
    background-color: var(--moody-indigo);
    width: 80%;
    margin: 10rem auto;
    display: flex;
    border-top-style: solid;
    border-top-width: 0.2rem;
    border-top-color:var(--candlelight-ivory);
    border-bottom-width: 0.2rem;
    border-bottom-style: solid;
    border-bottom-color:var(--candlelight-ivory);
}

.product-description h2, h4, p {
    color: var(--candlelight-ivory);
}

.product-image img {
    width: 200%;
    height: auto;
    margin-top: 3rem;
}

.product-description {
    padding: 0 20px;
    margin-left: 10rem;
    text-align: left;
    width: 60%;
}

#product-description {
    border: solid 5px green;
    padding: 0 20px;
    text-align: left;
    width: 60%;
}

.product-description h2 {
    font-size: 2rem;
    margin-top: 3rem;
}

.product-description h4 {
    font-size: 1.3rem;
}

.product-description p {
    font-size: 1rem;
    margin-top: 1rem;
    text-align: left;

}

.product-description .button {
    margin-top: 2rem;
    margin-left: 0rem;
}

.product-description .button-container {
    display: flex;
    gap: 1rem;
}

.product-main-section .button-link input[type="submit"] {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 2.8rem;
    padding-right: 2.8rem;
    margin-top: 0.1rem;
    margin-right: 2rem;
}

/* Media queries for smaller screens */
@media (max-width: 768px) {
    .product-main-section {
        flex-direction: column;
        padding-top: 16rem;
    }
    .product-image,
    .product-description {
        max-width: 100%;
        text-align: center;
        margin: auto;
    }

    .product-image img {
        max-height: 200%;
        max-width: 200%;
        margin-bottom: 6rem;
        margin-left: 3rem;
    }

    .product-image {
        order: 1; 
        margin-top: 1rem; 
    }

    .product-image img {
       margin: auto;
       transform: translate(-4rem,-8rem);
    }

    .product-description {
        order: 1; 
        width: 100%;
    }

    .product-description h2 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .product-description h4 {
        font-size: 1.1rem;
    }

    .product-description p {
        font-size: 0.9rem;
        margin-top: 1rem;
        text-align: center;

    }

    .product-description .button-container {
        flex-direction: column;
        margin-top: 3rem;
    }

    .product-description .button {
        margin: 1rem auto; 

    }
}