body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f8f9fa;
    touch-action: manipulation; /* Or touch-action: pan-y; */
}

.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}
#heading-section {
    display: flex;
    justify-content: space-between; /* Space between heading and image */
    align-items: center; /* Vertically align heading and image */
    background-color: #e0e0e0; /* Example background color */
    padding: 15px; /* Add padding */
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 20px; /* Add space below the heading section */
}

#heading-image {
    width: 150px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    background-color: #f0f0f0; /* Placeholder background */
    border-radius: 50%; /* Make it a circle */
    /* Add background image here */
}

.top-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.first-row, .second-row {
    display: flex;
    gap: 20px;
}

.second-row {
    align-items: flex-start;
}

.second-row .section { /* Target sections inside second-row */
    align-self: flex-start; /* Prevent vertical stretching */
}

.section, .price-range {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 15px;
    flex: 1;
    min-width: 300px;
    margin: 5px;
    text-align: center;
}
.sub-section {
    border: 1px solid #636262;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 15px;
}
#Apple, #Modern{
    flex-basis: 50%;
}
#Apple, #Modern, #Chromebook, #ipad, #copilot{
    text-align: center;
}
#Apple{
    background-color: #ccc;
}
#Modern{
    background-color: #96c9e6;
}
#Chromebook {
    background: linear-gradient(
        to right, /* Horizontal gradient */
        #4285F4, /* Google Blue */
        #DB4437, /* Google Red */
        #F4B400, /* Google Yellow */
        #0F9D58  /* Google Green */
    );
    color:white
}


#copilot {
    flex-basis: 100%;
    background: linear-gradient(
        135deg, /* Angle to match the logo's flow */
        #0078D4, /* Blue */
        #A0D911, /* Green/Yellow */
        #F7630C, /* Orange */
        #C239B3  /* Purple/Pink */
      );
      margin: 0; /* Optional: Remove default body margin */
}

#copilot {
    display: flex;
    flex-wrap: wrap;
}

#copilot .price-range {
    display: flex;
    flex-direction: column;
}

#copilot .cpu-type {
    display: flex;
    flex-direction: column; /* Stack header and controls vertically */
    align-items: center; /* Align controls to the left */
    margin-bottom: 10px;
}

#copilot .controls {
    display: flex; /* Arrange buttons and counter horizontally */
    align-items: center; /* Align items vertically */
}

#copilot .price-range > div:last-child {
    margin-top: 10px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    margin: 0 5px;
}

.counter {
    font-size: 16px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
    margin: 0 5px;
}

h3, h4, h5 {
    margin: 10px 0;
}

#copilot h3 {
    margin-bottom: 20px;
    width: 100%;
}

@media (max-width: 1024px) {
    .top-row {
        flex-direction: column;
    }

    #Apple, #modern {
        flex-basis: 100%;
    }

    .container {
        padding: 10px;
    }

    #copilot .price-range {
        flex-basis: 100%;
        width: 100%;
    }

    .controls button { /* Increased specificity */
        padding: 15px 30px;
        font-size: 20px;
    }
    body {
        font-size: 18px; /* Increase base font size */
    }

    h1 {
        font-size: 2.5em; /* Adjust headings */
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.7em;
    }

    h4 {
        font-size: 1.4em;
    }

    h5 {
        font-size: 1.2em;
    }

    p, span, button, input, textarea, label {
        font-size: 1.1em; /* Adjust other elements */
    }
}