.cnc-container {
    text-align: center;
    padding: 50px 0;
}

.cnc-container h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}

/* Center images properly */
.cnc-images {
    display: flex;
    justify-content: center;
    gap: 120px; /* Increased spacing */
    align-items: center;
    flex-wrap: wrap; /* Ensures images adjust on smaller screens */
}

/* Make images bigger */
.cnc-images img {
    width: 40%; /* Adjusted size */
    max-width: 400px; /* Ensures images are large */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}


/* Zoom effect when hovering */
/*
.cnc-images img:hover {
    transform: scale(1.1);
}
*/
.machine-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px; /* Adjust gap between text and image */
    padding: 70px 50px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 450px; /* Ensures each section is taller */
}

/* Ensures equal height and alignment */ 
.machine-text, .mop-text , .cable-text {
    width: 50%;
    text-align: left;
}

.machine-image, .mop-image , .cable-image {
    width: 50%;
    text-align: right;
}

.machine-image img, .mop-image img , .cable-image img  {
    width: 100%;
    max-width: 700px; /* Ensures both images are the same size */
    height: 350px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures uniform scaling */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: none; /* Removes any unwanted border */
    box-shadow: none; /* Removes shadow if it's causing a border effect */
    border-radius: 8px; /* Keeps rounded edges if needed */
}

/* Reverse layout for second section */
.reverse {
    flex-direction: row-reverse;
}

/* Typography Improvements */

/* text  */

.machine-text h2, .mop-text h2, .mpg_text h2 {
    font-size: 28px; /* Keep all section headings the same */
    font-weight: bold;
    margin-bottom: 15px;
}

.machine-text p, .mop-text p, .mpg_text p {
    font-size: 18px; /* Ensures uniform paragraph text size */
    margin-bottom: 10px;
}

.machine-text ul, .mop-text ul, .mpg_text ul {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 18px; /* Set same font size for lists */
}

/* button */
 
.machine-text .btn , .mop-text .btn , .mpg_text  .btn , .cable-text .btn  {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background-color: red;
    color: white;
    font-size: 16px;
    border-radius: 25px;
    text-decoration: none;
}

.machine-text .btn:hover, .mop-text .btn:hover , .cable-text .btn:hover  {
    background-color: darkred;
}

/* MPG */

.mpg-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px; /* Space between text and image */
    padding: 70px 50px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 450px; /* Ensures each section is taller */
}

.mpg-image {
    width: 50%; /* Ensures the image container does not take up full width */
    text-align: right;
}

.mpg-image img {
    width: 100%; /* Makes sure image fits container */
    max-width: 500px; /* Adjust to control size */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: none; /* Removes any unwanted border */
    box-shadow: none; /* Removes shadow if it's causing a border effect */
    border-radius: 8px; /* Keeps rounded edges if needed */
}