/* Product Details Page */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.details-wrapper {
    max-width: 75%;
    margin: 25px auto;
    display: flex;
    justify-content: center;
}

.details-body {
    background-color: none;
    padding: 1.5rem;
    font-size: 1.2rem;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
}

.details-img {
    text-align: end;
}

    .details-img img {
        max-height: 400px;
        width: auto;
        object-fit: contain;
        border-radius: 8px;
    }

.details-strong {
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important;
    color: #e0e0e0 !important;
}

.details-text {
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important;
    color: #e0e0e0 !important;
    padding-left:14px;
}



.btn-primary {
    background-color: #16697a;
    border-color: #16697a;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

    .btn-primary:hover {
        background-color: #104e5b;
        border-color: #104e5b;
    }

.btn-outline-primary {
    border-color: #16697a;
    color: #16697a;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

    .btn-outline-primary:hover {
        background-color: #16697a;
        color: #fff;
    }

/*.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #5a6268;
    }*/

#back-btn {
    padding-top: 15px;
}
.back-btn {
    color: #fff !important;
    font-size: 1.2rem;
}

    .back-btn:hover {
        background-color: #4a90e2;
        color: #fff;
    }
.download-btn {
    text-decoration: none;
    color: #fff !important;
    font-size: 1.2rem;
}

    .download-btn:hover {
        background-color: #4a90e2;
        color: #fff;
    }
/* Responsive Design */
@media screen and (max-width: 1000px) {
    .details-wrapper {
        max-width: 90%;
        margin: 15px auto;
    }

    .details-img img {
        max-height: 300px;
    }

    .details-body {
        font-size: 1rem;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .container .row.my-4 {
        flex-direction: column !important;
    }

        .container .row.my-4 .col {
            width: 100% !important;
            margin-bottom: 1rem;
        }

    .details-img {
        text-align: center;
        margin: 0 auto;
    }

        .details-img img {
            display: block;
            margin: 0 auto;
            max-height: 300px;
        }

    .details-body {
        text-align: left;
        padding: 1rem;
    }

    .details-text {
        padding-left: 0;
    }
}


h1 {
    font-size: 3.0rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}