﻿@media only screen and (max-width: 800px) {

    .home-section-1-image-b-2 {
        background-image: url('../../assets/Home 480/9435 Bliss Brands Website Dev V06 Home 480 Asset 27.webp');
    }

    .home-section-3-image-b-1 {
        background-image: url('../../assets/Home 480/9435 Bliss Brands Website Dev V06 Home 480 Asset 25.webp');
    }

    .home-section-5 > .laundry > .laundry-image {
        background-image: url('../../assets/Home 480/9435 Bliss Brands Website Dev V06 Home 480 Asset 23.webp');
    }

    .home-section-5 > .household_care > .household_care-image {
        background-image: url('../../assets/Home 480/9435 Bliss Brands Website Dev V06 Home 480 Asset 24.webp');
    }

    .home-section-6 > .personal_care > .personal_care-image {
        background-image: url('../../assets/Home 480/9435 Bliss Brands Website Dev V06 Home 480 Asset 26.png');
    }
}

@media only screen and (max-width: 800px)  {

    .home-section-1 {
        grid-template-columns: auto;
        display: flow;
        height: fit-content;
    }

    .home-section-1-image-a-1 {
        height: 0;
    }

    .home-section-1-block-a-3 > div {
        width: 70%;
    }

    .home-section-1-block-a-2 {
        height: 400px;
    }

    .home-section-1 > div {
        width: 100%;
        height: auto;
    }

    .home-section-1-block-b-1 {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 20px 40px;
    }

        .home-section-1-block-b-1 > div {
            display: inline-grid;
            width: 100%;
            grid-template-columns: 30% 70%;
        }

    .home-section-1-block-a-3 {
        height: 160px;
    }

    .home-section-1-image-b-2 {
        height: 400px;
    }


    .home-section-2 {
        height: fit-content;
        text-align: justify;
        padding: 20px;
        font-size: medium;
        hyphens: auto;
        -webkit-hyphens: auto;
        word-break: break-word;
        font-weight: bolder;
    }

    .home-section-3 {
        grid-template-columns: auto;
        display: flow;
        height: fit-content;
    }

    .home-section-3-block-a-1 {
        padding: 20px;
        /*font-weight: 400;*/
        font-size: small;
        hyphens: auto;
        -webkit-hyphens: auto;
        word-break: break-word;
    }


    .home-section-3-image-b-1 {
        height: 240px;
    }

    .home-section-3-block-b-2 {
        padding: 40px 30px;
    }


    .home-section-4 {
        grid-template-columns: auto;
        display: flow;
    }

    .home-section-3-block-b-3 {
        padding: 20px;
        /*font-weight: 400;*/
        font-size: small;
    }

    .home-section-5 {
        grid-template-columns: auto;
        display: flow;
        height: fit-content;

    }

        .home-section-5 > div {
            padding: inherit;
        }

            .home-section-5 > div > .info-block {
                width: fit-content;
                position: unset;
                grid-template-rows: none;
                padding: 20px;
            }

                .home-section-5 > div > .info-block > .header {
                    font-size: xx-large;
                    width: 100%;
                }

                .home-section-5 > div > .info-block > .text {
                    width: 100%;
                    padding: 20px 0;
                }

    .home-section-6 {
        grid-template-columns: auto;
        display: flow;
        height: 1100px;
    }

        .home-section-6 > div {
            padding: inherit;
        }

            .home-section-6 > div > .info-block {
                width: fit-content !important;
                position: unset;
                grid-template-rows: none;
                padding: 20px;
                margin-bottom: 20px;
            }

                .home-section-6 > div > .info-block > .header {
                    font-size: xx-large;
                    width: 100%;
                }

                .home-section-6 > div > .info-block > .text {
                    width: 100%;
                    padding: 20px 0;
                }

        .home-section-6 > personal_care > .info-block > .link > .button {
            font-size: medium;
        }

        .home-section-6 > .contact_us {
            height: 50%;
        }

            .home-section-6 > .contact_us > .info-block > .link {
                grid-template-columns: 50% 48%;
                grid-gap: 2%;
                display: inline-grid
            }

    .info-block > .header {
        padding: 0;
    }

    .footer-container {
        padding: 0;
    }

    .home-section-5 > .laundry > .laundry-image {
        position: relative;
        height: 200px;
        width: 100%;
        margin-top: 50px;
        background-size: contain;
    }

    .home-section-5 > .household_care > .household_care-image {
        position: relative;
        height: 200px;
        width: 100%;
        margin-top: 50px;
        background-size: contain;
    }


    .home-section-6 > .personal_care > .personal_care-image {
        position: relative;
        height: 248px;
        width: 100%;
    }
}

/*Extra Small*/
@media only screen and (max-width: 450px){
    .home-section-6 > .contact_us > .info-block > .link > .button {
        font-size: small !important;
    }

    .home-section-1-block-a-2 > div > .bliss-logo-text {
        padding: 20px 5%;
    }

    .home-section-4 {
        padding: 2px 0% 2px 8%;
    }
}