.details-box {
    display: flex;
    justify-content: center;
}

.overview-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overview-image h2 {
    font-family: "HKGrotesk";
    font-weight: 300;
    text-align: left;
}

.overview-image img {
    border: 1px solid white;
    height: auto;
}

.overview-specifics {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.discount-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.old-price-details {
    text-decoration: line-through;
}

.new-price-details {
    color: red;
    font-weight: bold;
}

#detailsPrice {
    font-weight: bold;
    font-family: "HKGrotesk";
}

.overview-specifics button {
    background-color: black;
    color: white;
    border: 1px solid white;
}

.overview-specifics button:hover {
    cursor: pointer;
    background-color: white;
    color: black;
}

#categories {
    font-family: "HKGrotesk";
}

.overview-specifics h3 {
    font-family: "HKGrotesk";
    font-weight: bold;
    text-decoration: underline;
}

.details-description {
    font-family: "HKGrotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.details-description h2 {
    text-align: center;
}

.product-video-container {
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bold {
    font-weight: bold;
}

.details-description a {
    text-decoration: underline;
}

@media (max-width:350px) {
    .details-box {
        margin-top: 2vh;
        width: 85%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    .overview-image h2 {
        font-size: 6.5vw;
        max-width: 20ch;
    }

    .overview-image img {
        padding: 3vh 0;
        width: 40vw;
        height: auto;
    }

    .overview-specifics {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .discount-details {
        gap: 1vh;
        flex-direction: column;
        padding: 0;
    }

    .old-price-details {
        font-size: 3vw;
        margin: 0;
    }

    .new-price-details {
        font-size: 6vw;
        margin: 0;
    }

    #detailsPrice {
        font-size: 6vw;
        margin-bottom: 20px;
    }

    .overview-specifics button {
        font-size: 3.5vw;
        padding: 1vh 2vw;
        margin-bottom: 1vh;
    }

    #categories {
        font-size: 3vw;
    }

    .overview-specifics h3 {
        font-size: 3vw;
        margin-bottom: 0;
    }

    #worksOn {
        font-size: 2.8vw;
    }

    .details-description {
        margin-top: 5vh;
    }

    .details-description h2 {
        text-align: center;
        font-size: 6vw;
    }

    .product-video-container {
        margin-bottom: 5vh;
        max-width: 90vw;
    }

    .product-video-container iframe {
        max-height: 40vh;
        width: 99%;
    }

    .details-description h3 {
        font-size: 5vw;
    }

    .details-description h4 {
        font-size: 4vw;
    }

    .details-description ul,
    .details-description ol {
        font-size: 2.5vw;
    }

    .details-description li {
        font-size: 2.4vw;
        padding: 5px;
    }

    .details-description p {
        font-size: 3.5vw;
    }
}

@media (min-width: 350px) and (max-width: 750px) {
    .details-box {
        margin-top: 5vh;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 10vw;
    }

    .overview-image h2 {
        font-size: 4vw;
        max-width: 20ch;
    }

    .overview-image img {
        padding: 3vh 0;
        width: 50vw;
        height: auto;
    }

    .overview-specifics {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .discount-details {
        gap: 1vw;
        flex-direction: column;
        padding: 0;
        margin-top: 2vh;
        margin-bottom: 15px;
    }

    .old-price-details {
        font-size: 2.5vw;
        margin: 0;
    }

    .new-price-details {
        font-size: 5vw;
        margin: 0;
    }

    #detailsPrice {
        font-size: 5vw;
        margin-bottom: 20px;
    }

    .overview-specifics button {
        font-size: 3vw;
        padding: 1vh 2vw;
        margin-bottom: 1vh;
    }

    #categories {
        font-size: 2.5vw;
    }

    .overview-specifics h3 {
        font-size: 3.5vw;
        margin-bottom: 0;
    }

    #worksOn {
        font-size: 2.5vw;
    }

    .details-description {
        margin-top: 5vh;
        padding: 0 5vw;
        text-align: center;
    }

    .details-description h2 {
        text-align: center;
        font-size: 4vw;
    }

    .product-video-container {
        margin-bottom: 5vh;
        max-width: 90vw;
    }

    .product-video-container iframe {
        max-height: 40vh;
        width: auto;
    }

    .details-description h3 {
        font-size: 2.2vw;
    }

    .details-description h4 {
        font-size: 1.8vw;
    }

    .details-description ul,
    .details-description ol {
        font-size: 1.7vw;
    }

    .details-description li {
        font-size: 1.6vw;
        padding: 5px;
    }

    .details-description p {
        font-size: 3vw;
    }
}

@media (min-width: 750px) and (max-width: 1000px) {
    .details-box {
        margin-top: 5vh;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 10vw;
    }

    .overview-image h2 {
        font-size: 4vw;
        max-width: 20ch;
    }

    .overview-image img {
        padding: 3vh 0;
        width: 40vw;
        height: auto;
    }

    .overview-specifics {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 10vh;
    }

    .discount-details {
        gap: 2vw;
        flex-direction: column;
        padding: 0;
        margin-top: 5vh;
    }

    .old-price-details {
        font-size: 1.8vw;
        margin: 0;
    }

    .new-price-details {
        font-size: 4.5vw;
        margin: 0;
    }

    #detailsPrice {
        font-size: 3.5vw;
        margin-bottom: 20px;
    }

    .overview-specifics button {
        font-size: 1.7vw;
        padding: 1vh 2vw;
        margin-bottom: 1vh;
    }

    #categories {
        font-size: 1.5vw;
    }

    .overview-specifics h3 {
        font-size: 1.6vw;
        margin-bottom: 0;
    }

    #worksOn {
        font-size: 1vw;
    }

    .details-description {
        margin-top: 5vh;
        padding: 0 7vw;
    }

    .details-description h2 {
        text-align: center;
        font-size: 2.7vw;
    }

    .product-video-container {
        margin-bottom: 5vh;
        max-width: 90vw;
    }

    .product-video-container iframe {
        max-height: 60vh;
        width: auto;
    }

    .details-description h3 {
        font-size: 2.2vw;
    }

    .details-description h4 {
        font-size: 1.8vw;
    }

    .details-description ul,
    .details-description ol {
        font-size: 1.7vw;
    }

    .details-description li {
        font-size: 1.6vw;
        padding: 5px;
    }

    .details-description p {
        font-size: 3vw;
    }
}

@media (min-width: 1000px) {
    .details-box {
        margin-top: 5vh;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 10vw;
    }

    .overview-image h2 {
        font-size: 3.1vw;
        max-width: 15ch;
    }

    .overview-image img {
        padding: 3vh 0;
        width: 30vw;
        height: auto;
    }

    .overview-specifics {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .discount-details {
        gap: 2vw
    }

    .old-price-details {
        font-size: 0.9vw;
    }

    .new-price-details {
        font-size: 2.8vw;
    }

    #detailsPrice {
        font-size: 2.8vw;
        margin-bottom: 20px;
    }

    .overview-specifics button {
        font-size: 1vw;
        padding: 1vh 2vw;
        margin-bottom: 1vh;
    }

    #categories {
        font-size: 0.9vw;
    }

    .overview-specifics h3 {
        font-size: 1.2vw;
        margin-bottom: 0;
    }

    #worksOn {
        font-size: 0.9vw;
    }

    .details-description {
        margin-top: 10vh;
        padding: 0 15vw;
    }

    .details-description h2 {
        text-align: center;
        font-size: 2vw;
    }

    .product-video-container {
        align-content: center;
        justify-self: center;
        margin-bottom: 5vh;
        max-width: 70vw;
    }

    .details-description h3 {
        font-size: 1.5vw;
    }

    .details-description h4 {
        font-size: 1.3vw;
    }

    .details-description ul,
    .details-description ol {
        font-size: 1.2vw;
    }

    .details-description li {
        font-size: 1.1vw;
        padding: 5px;
    }

    .details-description p {
        font-size: 1.2vw;
    }
}