.cpg-wrapper #total-calories,
        .cpg-wrapper #total-grams,
        .cpg-wrapper th {
            font-weight: 700
        }

        .cpg-wrapper {
            max-width: 722px;
            margin: 0 auto;
            
        }

        .cpg-wrapper h1 {
            text-align: center;
            margin-top: 20px;
            color: #333
        }

        .cpg-wrapper .calculator {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
            padding: 20px
        }

        .cpg-wrapper .form-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between
        }

        .cpg-wrapper .input-container {
            width: 100%;
            margin-bottom: 15px
        }

        .cpg-wrapper label {
            color: #555;
            font-size: 16px;
        }

        .cpg-wrapper input[type=number] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px
        }

        .cpg-wrapper .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 10px
        }

        .cpg-wrapper button {
            display: block;
            width: 48%;
            padding: 10px;
            background-color: #2472f9;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color .3s;
            font-size: 16px;
            font-weight: 500
        }

        .cpg-wrapper button:hover {
            background-color: #45a049
        }

        .cpg-wrapper .result-container {
            margin-top: 20px
        }

        .cpg-wrapper h3 {
            margin-bottom: 10px;
            color: #555;
            text-align: center;
            margin-top: 35px;
            font-weight: 700;
        }

        .cpg-wrapper table {
            width: 100%;
            border-collapse: collapse;
            display: table;
            border-top: 4px solid #dc2918 !important;
            word-break: normal;
            font-size: 16px;
            color: #000;
            border: 1px solid #eee;
            margin-top: 25px;
        }

        .cpg-wrapper td,
        .cpg-wrapper th {
            padding: 8px;
            border-bottom: 1px solid #ccc;
            text-align: left
        }

        .cpg-wrapper th {
            background-color: #f5f5f5
        }

        @media screen and (min-width:576px) {
            .cpg-wrapper .input-container {
                width: calc(50% - 10px)
            }
            .cpg-wrapper button {
                width: 48%
            }
        }

        @media screen and (min-width:768px) {
            .cpg-wrapper .input-container {
                width: calc(33.33% - 13.33px)
            }
        }

.cpg_wrapper {
    box-sizing: border-box;
    display: grid;
    gap: 16px;
    margin: 0px auto;
    width: 722px !important;
}

 .cpg_wrapper table {
            border-top: 4px solid #dc2918 !important;
            word-break: normal;
            font-size: 16px;
            color: #000;
            width: -webkit-fill-available
        }

 .cpg_wrapper table {
            border: 1px solid #eee
        }

 @media(max-width:768px) {
           
            .cpg_wrapper table {
                overflow: scroll;
                display: block;
                width: 100%
            }
         
        }


/* Flexbox for layout */
.form-wrapper {
    display: flex;
    justify-content: space-between; /* Push ads to the sides */
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
}

/* Left and Right Ad Styling */
.sidebar {
    width: 300px; /* Increased width */
    min-height: 300px;
    background-color: #f4f4f4; /* Placeholder */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}



/* Make it Responsive */
@media screen and (max-width: 1200px) {
    .form-wrapper {
        flex-wrap: wrap;
        justify-content: center; /* Center everything on small screens */
    }

    .sidebar {
        min-height: 100px;
    }

   
}



@media screen and (max-width: 765px) {
    .form-wrapper {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
    }

    .sidebar.right-ad {
        order: 2; /* Move right ad below the form */
        width: 100%; /* Full width for smaller screens */
        max-width: 300px; /* Limit width */
    }
}



/* Hide the right ad in responsive mode (for small screens) */
@media screen and (max-width: 768px) {
    .sidebar.left-ad {
        display: none;
    }
}


.ad-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.ad-block {
    width: 300px;
    height: 250px;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
}