#subscription-container {
    /* Main Container Styles */
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    max-width: 600px;
    min-width: 350px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    overflow: hidden;
    box-sizing: border-box; 
    margin-bottom: 15px;
    margin-top: 15px;

    /* Top Section: SmartOrder */
    .smartorder-section {
        padding: 24px;
        text-align: left; 
    }

    .smartorder-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;

        img {
            width: 50px;
            height: auto;
            flex-shrink: 0;
        }
    }

    .smartorder-header-text {
        h1 {
            font-size: 21px !important;
            font-weight: 700; 
            color: #333333;
            margin: 0;
            line-height: 1;
            padding: 0 !important;
            border: none !important;
        }
        p {
            font-size: 16px;
            color: #464646;
            margin: 0;
            font-weight: 700; 
            letter-spacing: 0.42px;
        }
    }

    .description {
        font-size: 16px;
        color: #333;
        line-height: 1.5;
        margin: 0 10px 10px 0;
        line-height: 1;
        letter-spacing: 0.45px;

        a {
            color: #0073b1;
            text-decoration: underline;
            font-weight: 500;
        }
    }

    .savings-text {
        font-size: 16px;
        color: #245B83;
        font-weight: bold;
        margin: 0 0 20px 0;
        letter-spacing: 0.39px;
    }

    .button-container {
        text-align: center;
        display: flex;
        align-items: left;
    }

    .subscribe-button {
        
        display: inline-block;
        background-color: #2c6e9e;
        color: #F7F1E7;
        text-decoration: none;
        padding: 15px 15px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 15px;
        border: none;
        cursor: pointer;
        max-width: 400px;
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 0.8px;    
    }

    /* Middle Section: Bodewell */
    .bodewell-section {
        background-color: #f5f2eb;
        padding: 15px 24px;
        display: flex;
        gap: 24px;
        border-top: 1px solid #e0e0e0;
        justify-content: center;

        .logo {
            flex-shrink: 0;

            img {
                width: 150px;
                height: auto;
                display: block;
            }
        }

        .text p {
            font-size: 15px;
            color: #000000;
            margin: 0;
            line-height: 1.3;
            letter-spacing: 0.36px;
                strong {
                    font-weight: 900;
                }
        }
    }

    /* Bottom Section: House of Brands */
    .brands-section {
        background-color: #0E2D44;
        text-align: center;

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    }

    /* Mobile media query */
    @media (max-width: 750px) {
        max-width: 600px;
        min-width: 250px;

        .smartorder-section,
        .bodewell-section {
            padding: 15px;
        }

        .smartorder-header-text h1 {
            font-size: 18px;
        }
        
        .smartorder-header-text p,
        .description,
        .savings-text,
        .bodewell-section .text p,
        a {
            font-size: 12px;
            line-height: 1.3;
        }

        .savings-text {
            margin-bottom: 10px;
        }

        .subscribe-button {
            font-size: 13px;
            padding: 8px 24px;
        }

        .bodewell-section {
            align-items: flex-start;
            padding: 15px;
            gap: 15px;

            /* Make the logo smaller */
            .logo img {
                width: 120px;
            }
        }
    }
}