@media (min-width:320px)  {
     html {
       
        max-width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .header {
        padding: 6%;  /* Adjust padding for mobile if needed */
    }
    
    .header .logo {
        max-width: 100%;  /* Reduce logo size on smaller screens */
        height: auto;
        overflow: hidden;
        margin-top:-5%;
        margin-bottom:2%;
    }

    /* Header Styling */
    .header {
        justify-content: center;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 1%;
        padding-right: 1%;
        display: flex;
        align-items: center;
        background-color: #eeecec;
        margin-top: -1%;
        
    }

    /* Logo Styling */
    .header .logo {
        max-width: 100%; /* Ensures logo scales properly on small screens */
        height: auto;    /* Maintain aspect ratio */
        max-height: 80%; /* Limits the maximum height of the logo */
    } 

    /* Navbar Styling */
    .navbar {
        background-color: #1f2a4d;
        overflow: visible;
        width: 100%;
        text-align: center;
        position: relative;  /* Make navbar initially relative */
        z-index: 1;
        font-size: 100%;
        padding-top: 2%;
        padding-bottom: 1%;
        top: 20%;  /* Adjust to start below the logo */
        
        
    }

    .navbar.sticky {
        position: sticky;  /* When scrolled, make navbar fixed at top */
        top: 0;  /* Stay at the top */
        left: 0;
        width: 100%;
        z-index: 1000;  /* Keep navbar on top of content */
        overflow: visible;
    }

    /* Navbar Links Styling */
    .navbar a {
        color: #eeecec;
        display: inline-block;
        text-align: center;
        text-decoration: inherit;
        font-size: 90%;
        font-family: "Trirong", serif;
        font-weight: bold;
        font-style: normal;
        padding: 0 2%;
    }
    
    
    
    .dropdown {
        position: relative;
        display: inline-block;
        padding: 0 2%;
    }
    
    .dropdown-content {
        display: none; /* Hidden by default */
        position: absolute;
        background-color: #3a466f; /* Dropdown background */
        width: 90vw;
        max-width: 50vw;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        text-align: left;
        
        top: 100%; /* Position below the dropdown parent */
        margin-left: -50%; 
        
    }
    
    .dropdown-content a {
        color: #eeecec;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 80%; 
        font-weight: 200;
        text-align: left;

    }
    

    .dropdown-content a:hover {
        background-color: #3a4a6d; /* Highlight on hover */
    }
    
    .dropdown:hover .dropdown-content {
        display: block; /* Show dropdown on hover */
    }

    
    
    .review-btn {
        position: fixed; /* Fix the button to the screen */
        bottom: 39px; /* Distance from the bottom of the screen */
        left: 10px; /* Distance from the right side of the screen */
        background-color: #1f2a4d; /* Red background color */
        color: #fff; /* White text */
        font-size: 50%;
        font-family: "Trirong", serif;
        font-weight: 400;
        padding: 1.5%; /* Padding around the button */
        border-radius: 30px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
        text-decoration: none; /* Remove underline */
        text-align: center; /* Center text inside button */
        font-weight: bold; /* Bold text */
        z-index: 1000; /* Ensure it stays on top of other elements */
        transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    }
    
    .review-btn:hover {
        background-color: #3a466f; /* Darker red on hover */
    }
    
    
    
    .content {
         padding-top: .5%;
         
    }

/*.firstSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("assets/openart-cnc-machine-shaving-circular-shape-into-metal-with-no-sparks_NG5UVb8T_upscaled.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 55%;
    filter: brightness(35%);
    z-index: -1;
    opacity: 95%; 
} */

    /*************************************************************/
    /*********************** FIRST SECTION ***********************/
    /*************************************************************/
    
    
    
    
    .firstSection {
        display: block;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
         padding: 0;
        text-align: center;
        position: relative; /* Make sure the text can be positioned relative to this container */
        justify-content: center; /* Horizontal centering */
        align-items: center; /* Vertical centering */
        
    }

    .firstSection img {
        max-width: 100%; /* Set a maximum width relative to its container */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Prevent any inline spacing issues */
        margin: 0 auto; /* Center the image within the section */
        background-size: cover;
        background-position: center 55%;
        opacity: 95%;
        filter: brightness(35%);
        z-index: -1; /* Ensure it stays behind other elements if needed */
       
    }

    .centerText {
        font-size: 300%;
        filter: brightness(110%);
        display: block;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-weight: 800;
        z-index: 0;
        text-align: center;
        position: absolute; /* Position it on top of the image */
        top: 25%; /* Adjust this value to control vertical placement */
        left: 50%; /* Horizontally center the text */
        transform: translateX(-50%); /* Fine-tune centering */
        margin: 0 auto;
         padding: 0 10%; /* Add padding for wider text box */
        width: 80%; /* Increase the width to make the box wider */
        color: #e3d9bc;

    }
    
    .lowerText{
        position: absolute; /* Position the lower text on top of the image */
        top: 65%; /* Adjust to control the vertical position of the lower text */
        left: 50%; /* Horizontally center the text */
        transform: translateX(-50%); /* Fine-tune centering */
        color: #e6dec8;
        display: block;
        font-size: 100%;
        filter: brightness(110%);
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        text-align: center;
        font-weight: 400;
        padding-left: 5%; /* Add padding to lowerText */
        padding-right: 5%;
        width: 80%;
        
    }
    
    .contactUsButton {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%); /* This centers the button horizontally */
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 600;
        background-color: #f7f7e9;
        padding: 2%;
        border-radius: 5%;
        margin-top: 1%;
        
    }
    
    .contactUsButton a {
        color: inherit;
        text-decoration: none;
    }
    
    
    /*************************************************************/
    /*********************** SECOND SECTION ***********************/
    /************************** ABOUT US **************************/
    /*************************************************************/
    
    .aboutUsGrid {
        display: block;
        margin-top: 2em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
        
    }

    .aboutUsTxt {
        
        padding-bottom: 2%;
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-weight: 800;
        color: #9e9188;
        font-size: 200%;
            
    }
    
    .aboutUsTxt:after {
        background: none repeat scroll 0 0 #d1c1b6;
        bottom: -15%;
        content: "";
        display: block;
        height: 2px;
        position: relative;
        width: 30px;
        opacity: 80%;
        left: 50%; /* Position it at the center */
        transform: translateX(-50%);
    }
    
    .aboutUsImg {
        max-height: 10%;
    }

    .aboutUsImg img{
        background-repeat: no-repeat;
        position: center 55%;
        width: 100%;
        max-width: 100%; /* Set a maximum width relative to its container */
        height: 70%; /* Maintain aspect ratio */
        display: block; /* Prevent any inline spacing issues */
        
        background-size: cover;
        padding-bottom: 5%;
    }

    .aboutUsSum {
        font-size: 400%; /* Adjust text size */
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 110% !important;;
        font-weight: 300;
        color: #4f4946;
        padding: 1% 1% 2% 1%;
        text-align: center;
        line-height: 1.3;
    }

    .headers1 {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 150% !important;
        font-weight: 600;
        color: #4f4946;
        top: 20%;
        text-align: center;
        padding-bottom: 2%;
    }
    
    /*************************************************************/
    /*********************** THIRD SECTION ***********************/
    /************************** SERVICES *************************/
    /*************************************************************/
    
    .services {
        background-color: #eeeeee;
        display: block;
        margin-top: 1em;
        margin-bottom: 2em;
        margin-left: 0;
        margin-right: 0;
        grid-template-areas: "area1 "
                         "area2 "
                         "area3 "
                         "area4"
                         "area5"
                         "area6"
                         "area7";
        padding: 5%;
    }

    .nestedServices {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: 15% 50% 35%;
        grid-gap: 3px; 
        padding: 0% 1% 1% 0%; 
        
    }

    .nestedServices img {
        display: flex;
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        overflow: hidden;
        justify-content: center;
        align-items: center;
        padding: 0 1% 1% 1%;
    }
    
    .serviceTxt{
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 120%;
        font-weight: 300;
        color: #4f4946;
        top: 30%;
        text-align: center;
        padding: 3% 0.5% 0.5% 0%;
        margin-top: 4%;
        
    }
    
    .headers2{
            font-family: "League Spartan", sans-serif;
            font-style: normal;
            font-size: 150%;
            font-weight: 400;
            color: #6b5c51;
            text-align: center;
            margin: 0 auto;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
    }
    
    /**************************************************************/
    /*********************** FOURTH SECTION ***********************/
    /************************** GALLERY ***************************/
    /**************************************************************/
        
    .water {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5%;
        padding-right: 5%;
    }

    .waterGalleryHeading { 
        grid-area: 1 / 1 / 2 / 4; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 1%;
        padding-top: 2%;
        
    }

    .waterGalleryTxt { 
        grid-area: 2 / 1 / 3 / 4;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        text-align: center;
        padding: 2% 1% 2% 1%;
    }

    .water1 { grid-area: 3 / 1 / 5 / 2; }
    .water2 { grid-area: 3 / 2 / 4 / 4; }
    .water3 { grid-area: 4 / 2 / 5 / 3; }
    .water4 { grid-area: 4 / 3 / 5 / 4; }
    
    .water img{
        display: block;
        width: 100%; /* Ensure the image does not exceed the column width */
        height: 100%; /* Force the image to fill the row height */
        object-fit: cover; /* Ensure the image scales without distortion */
        overflow: hidden;
        padding: 3% 1% 3% 1%;
    }


    .machine {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5%;
        padding-right: 5%;
        background-color: #eeeeee;
    }

    .machineGalleryHeading { 
        grid-area: 1 / 1 / 2 / 5; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 1%;
        padding-top: 5%;
    }

    .machineGalleryTxt { 
        grid-area: 2 / 1 / 3 / 5; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        padding: 2% 1% 5% 1%;
        text-align: center;
    }
    
    .machine img{
        display: block;
        width: 100%; /* Ensure the image does not exceed the column width */
        height: 100%; /* Force the image to fill the row height */
        object-fit: cover; /* Ensure the image scales without distortion */
        overflow: hidden;
        padding: 3% 1% 3% 1%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /**************************************************************/
    /*********************** LAST SECTION *************************/
    /************************ CONTACT US **************************/
    /**************************************************************/
    .contact {
        display: block;
        padding-top: 3%;
        padding-bottom: 10%;
        padding-left: 7%;
        padding-right: 7%;
    }
    
    .contactHeader {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: left;
        padding: 2% 0 3% 0;
    }
    
    .contactHeader:after {
        background: none repeat scroll 0 0 #d1c1b6;
        bottom: -25%;
        left: 50%; /* Position it at the center */
        content: "";
        display: block;
        height: 2px;
        width: 80px;
        opacity: 80%;
    }
    
    .contactTxt {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 400;
        color: #4f4946;
        top: 20%;
        text-align: left;
        padding-top: 8%;
    }
    
    .contactSmall {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 200;
        color: #4f4946;
        top: 20%;
        text-align: left;
        padding-top: 5%;
    }
    
    .dropLine {
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 400;
        background-color: #18203b;
        padding: 3% 2%; 
        border-radius: 5px; 
        display: inline-block; 
        color: #eeeeee;
        margin-top: 3%;
    }

    .dropLine:hover {
        background-color: #d1c4a2;
        filter: brightness(110%);
    }

    .dropLine a {
        color: inherit;
        text-decoration: none;
    }

    .dropLine:hover a {
        color: #eeeeee;
    }
    
    .google-map {
         padding: 7% 0 50% 0;
         position: relative;
    }
    
    .google-map iframe {
         height: 100%;
         width: 100%;
         left: 0;
         top: 0;
         position: absolute;
         padding: 7% 0 0 0;
    }
    
    
    
    /* Footer Styles */
    .footer {
        background-color: #1f2a4d; /* Dark background */
        color: #eeecec; /* Light text */
        text-align: center; /* Center text */
        padding: 1% 0 1% 0; /* Add padding around the footer */
        position: relative;
        bottom: 0;
        width: 100%; /* Ensure it spans across the whole page */
    }
    
    .footer-content {
        max-width: 1200px; /* Maximum width for the content */
        margin: 0 auto; /* Center the content */
        padding: 0; /* Add padding on the left and right */
    }
    
    .footer p {
        font-family: "Trirong", serif;
        font-size: 12px;
        margin: 0; /* Remove margin for p tag */
    }

}

    /*************************************************************/
    /*************************************************************/
    /************************* DESKTOP ***************************/
    /*************************************************************/
    /*************************************************************/


@media (min-width:1025px) { 
    body {
        margin: 0; /* Removes default browser margin */
        
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    html {
        scroll-behavior: smooth;
    }
    
    .header {
        position: relative; /* Ensure proper placement within the flow */
        justify-content: center;
        display: block;
        align-items: center;
        background-color: #eeecec;
        margin: 0 auto; /* Center horizontally */
        width: 100%; /* Ensure it spans exactly the width of the viewport */
        padding: 0; /* Avoid extra space within the element */
        margin-bottom: 0;
    }

    .header .logo {
        max-width: 90%; /* Limit to 90% of the container width */
        height: auto;   /* Maintain aspect ratio */
        display: block; /* Prevent inline spacing issues */
        margin: 0 auto; /* Center the logo if needed */
        margin-bottom: 0;

    } 
    
    
    .navbar {
        background-color: #1f2a4d;
        overflow: visible; /* Allow dropdowns to extend beyond the navbar */
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
        font-size: 100%;
        padding-top: 0.2%;
        padding-bottom: 0.3%;
        margin: 0;
    }
    
    .navbar.sticky {
        position: fixed;  /* When scrolled, make navbar fixed at top */
        top: 0;  /* Stay at the top */
        left: 0;
        width: 100%;
        z-index: 1000; /* Ensure sticky navbar stays above other content */
        overflow: visible; /* Prevent dropdown from being cut off */
    }

    .navbar a {
        color: #eeecec;
        display: inline-block;
        text-align: center;
        padding: 0 10%;
        text-decoration: none;
        font-size: 200%;
        font-family: "Trirong", serif;
        font-weight: 800;
    }
    
    
    
    .dropdown {
        position: relative;
        display: inline-block;
        padding: 0 5%;
    }
    
    .dropdown-content {
        display: none; /* Hidden by default */
        position: absolute;
        background-color: #3a466f; /* Dropdown background */
        width: max-content;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        text-align: left;
        
        top: 100%; /* Position below the dropdown parent */
        margin-left: 0; 
        
    }
    
    .dropdown-content a {
        color: #eeecec;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 100%; 
        font-weight: 200;
        text-align: left;

    }
    

    .dropdown-content a:hover {
        background-color: #3a4a6d; /* Highlight on hover */
    }
    
    .dropdown:hover .dropdown-content {
        display: block; /* Show dropdown on hover */
    }
    
    .dropdown:after {
        content: '';
        border: 4px solid transparent;
        border-top: 8px solid white; /* Color of the arrow */
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        margin-left: 0; /* Remove margin to eliminate gap between text and arrow */
        display: inline-block;
        vertical-align: middle; /* Align the arrow vertically with the text */
        position: absolute;
        top: 45%; /* Align the arrow vertically in the middle */
        right: 20%;
    }

    

    
   .content {
        padding: 0.5%;
    }

    
    .review-btn {
        position: fixed; /* Fix the button to the screen */
        bottom: 80px; /* Distance from the bottom of the screen */
        left: 150px; /* Distance from the right side of the screen */
        background-color: #1f2a4d; /* Red background color */
        color: #fff; /* White text */
        font-size: 130%;
        font-family: "Trirong", serif;
        font-weight: 800;
        padding: 1%; /* Padding around the button */
        border-radius: 30px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
        text-decoration: none; /* Remove underline */
        text-align: center; /* Center text inside button */
        font-weight: bold; /* Bold text */
        z-index: 1000; /* Ensure it stays on top of other elements */
        transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    }
    
    .review-btn:hover {
        background-color: #d1c4a2; /* Darker red on hover */
    }
        
    
    
    
    
    
    
    /*************************************************************/
    /*********************** FIRST SECTION ***********************/
    /*************************************************************/
    
    
    
    .firstSection {
        display: grid;
        height: 65vh;
        grid-template-columns: 100%;
        grid-template-rows: 34% 33% 33%;
        grid-template-areas: 
            "first1"
            "first2"
            "first3";
        grid-gap: 1%;
        grid-row-gap: 1%;
        width: 100%;
        padding: 0;
        margin-top: 0;  /* Make sure there's no margin pushing the section down */
        position: relative; 
        
        background-color: transparent; /* Keep the section transparent */
        text-align: center;
        justify-content: center; /* Horizontal centering */
        align-items: center; /* Vertical centering */
        
    }
    
    .firstSection img.backgroundImage {
        grid-area: 1 / 1 / 4 / 2; /* Span across all rows */
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure it covers the area properly */
        position: absolute; /* Allow positioning below other elements */
        z-index: -1; /* Place it behind the text */
        opacity: 0.95;
        filter: brightness(35%);
        
    }

    .centerText{
        font-size: 400%;
        filter: brightness(110%);
        display: block;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-weight: 800;
        z-index: 0;
        text-align: center;
        position: absolute; /* Position it on top of the image */
        top: 30%; /* Adjust this value to control vertical placement */
        left: 50%; /* Horizontally center the text */
        transform: translateX(-50%); /* Fine-tune centering */
        margin: 0 auto;
         padding: 0 10%; /* Add padding for wider text box */
        width: 80%; /* Increase the width to make the box wider */
        color: #e3d9bc;
        
    }
    
    .lowerText{
        position: absolute; /* Position the lower text on top of the image */
        top: 40%; /* Adjust to control the vertical position of the lower text */
        left: 50%; /* Horizontally center the text */
        transform: translateX(-50%); /* Fine-tune centering */
        color: #e6dec8;
        display: block;
        font-size: 200%;
        filter: brightness(110%);
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        text-align: center;
        font-weight: 400;
        padding-left: 5%; /* Add padding to lowerText */
        padding-right: 5%;
        width: 80%;
    }

    .contactUsButton {
        position: absolute;
        bottom: 35%;
        left: 50%;
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 150%;
        font-weight: 600;
        background-color: #f7f7e9;
        padding: 0.5%;
        border-radius: 5%;
        margin-top: 1%;
    }

    .contactUsButton:hover {
        background-color: #d1c4a2;
        filter: brightness(110%);
    }

    .contactUsButton a {
        color: inherit;
        text-decoration: none;
    }

    .contactUsButton:hover a {
        color: #e3d9bc;
    }
    
    
    /*************************************************************/
    /*********************** SECOND SECTION ***********************/
    /************************** ABOUT US **************************/
    /*************************************************************/

    .aboutUsGrid {
        display: grid;
        
        height: 30%;
        grid-template-columns: 50% 50%;
        grid-template-rows: 30% 75%;
        grid-gap: 5%;
        grid-row-gap: 5%;
        background-color: #ffffff;;
        padding-left: 25%;
        padding-right: 25%;
        padding-top: 2%;
        padding-bottom: 3%;
        
    }
    
    .aboutUsTxt {
        grid-column-start: 1;
        grid-column-end: 3;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 400% !important;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 0.1%;
    }
    
    .aboutUsImg{
        max-height: 75%;
    }

    .aboutUsImg img{
        width: 100%;        /* Make image width fill container */
        height: 100%;       /* Make image height fill container */
        object-fit: cover;  /* Ensure the image covers the entire container without stretching */
        object-position: center; /* Center the image within the container */
        max-width: none;    /* Ensure no maximum width limits the image */
        max-height: none;   /* Ensure no maximum height limits the image */
        margin: 0 auto;     /* Center the image if necessary */
    }
    
    .aboutUsSum{
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        top: 20%;
        text-align: center;
        line-height: 1.5;
    }
    
    .headers1{
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 150%;
        font-weight: 400;
        color: #6b5c51;
        text-align: center;
        padding-bottom: 5%;
        
    }
    
    .aboutUsTxt:after {
        background: none repeat scroll 0 0 #d1c1b6;
        bottom: -15%;
        right: -48%;
        content: "";
        display: block;
        height: 2px;
        position: relative;
        width: 80px;
        opacity: 80%;
    }
    
    /*************************************************************/
    /*********************** THIRD SECTION ***********************/
    /************************** SERVICES *************************/
    /*************************************************************/

    .services {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: (10% 15% 15% 15% 15% 15% 15%);
        grid-column-gap: 6px;
        grid-row-gap: 9px;
        background-color: #eeeeee;
        grid-template-areas: 
            "area1 area1 area1"
            "area2 area3 area4"
            "area5 area6 area7";
        padding-left: 25%;
        padding-right: 25%;
        padding-top: 3%;
        padding-bottom: 3%;
        
       
    }
    .nestedServices {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: 15% 50% 35%;
        grid-gap: 10px; 
        padding: 0% 5% 5% 5%; 
        
    }
    
    .nestedServices img {
        display: flex;
        width: 100%; 
        height: 80%; 
        object-fit: cover; 
        overflow: hidden;
        justify-content: center;
        align-items: center;
        padding: 0 1% 1% 1%;
        margin: auto;
    }
    
    .serviceTxt{
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 300;
        color: #4f4946;
        margin: 0 auto;
        text-align: center;
        padding: 0.5% 2% 1% 2%;
        line-height: 1.3;
        
    }
    
    .headers2{
            font-family: "League Spartan", sans-serif;
            font-style: normal;
            font-size: 150%;
            font-weight: 400;
            color: #6b5c51;
            text-align: center;
            margin: auto;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        
        
    /**************************************************************/
    /*********************** FOURTH SECTION ***********************/
    /************************** GALLERY ***************************/
    /**************************************************************/



    .water {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: (10% 20% 30% 30%);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 2%;
    }
    
    
    .waterGalleryHeading { 
        grid-area: 1 / 1 / 2 / 4; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 1%;
        padding-top: 2%;
        
    }
    
    .waterGalleryTxt { 
        grid-area: 2 / 1 / 3 / 4;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        top: 20%;
        text-align: center;
    }
    
    .water1 { grid-area: 3 / 1 / 5 / 2; }
    .water2 { grid-area: 3 / 2 / 4 / 4; }
    .water3 { grid-area: 4 / 2 / 5 / 3; }
    .water4 { grid-area: 4 / 3 / 5 / 4; }
    
    .water img{
        display: block;
        width: 100%; /* Ensure the image does not exceed the column width */
        height: 100%; /* Force the image to fill the row height */
        object-fit: cover; /* Ensure the image scales without distortion */
        overflow: hidden;
    }
    
    
    .machine {
        display: grid;
        grid-template-columns: 2fr repeat(2, 1fr) 2fr;
        grid-template-rows: (10% 10% 20% 20% 20% 20%);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        background-color: #eeeeee;
        padding: 2% 20% 5% 20%;
    }
    
    .machineGalleryHeading { 
        grid-area: 1 / 1 / 2 / 5; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 1%;
        padding-top: 2%;
    }
    
    .machineGalleryTxt { 
        grid-area: 2 / 1 / 3 / 5; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        top: 20%;
        text-align: center;
    }
    
    .div3 { grid-area: 3 / 1 / 5 / 2; }
    .div4 { grid-area: 3 / 2 / 4 / 4; }
    .div5 { grid-area: 3 / 4 / 4 / 5; }
    .div6 { grid-area: 4 / 2 / 5 / 5; }
    .div7 { grid-area: 5 / 1 / 7 / 2; }
    .div8 { grid-area: 5 / 2 / 6 / 4; }
    .div9 { grid-area: 5 / 4 / 7 / 5; }
    .div10 { grid-area: 6 / 2 / 7 / 3; }
    .div11 { grid-area: 6 / 3 / 7 / 4; }
    
    .machine img{
        display: block;
        width: 100%; /* Ensure the image does not exceed the column width */
        height: 100%; /* Force the image to fill the row height */
        object-fit: cover; /* Ensure the image scales without distortion */
        overflow: hidden;
    }



    /**************************************************************/
    /*********************** LAST SECTION *************************/
    /************************ CONTACT US **************************/
    /**************************************************************/
    .contact {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: (11% 11% 11% 11% 11% 11% 11% 20%);
        grid-column-gap: 5%;
        grid-row-gap: 1px;
        grid-template-areas: 
            "area1 area7"
            "area2 area7"
            "area3 area7"
            "area4 area7"
            "area5 area7"
            "area6 area7"
            "area8 area7"
            "area9 area7";
        padding-top: 2%;
        padding-bottom: 7%;
        padding-left: 15%;
        padding-right: 15%;
    }
    
    .contactHeader {
        grid-column-start: 1;
        grid-column-end: 3;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: left;
        padding-bottom: 1%;
    }
    
    .contactHeader:after {
        background: none repeat scroll 0 0 #d1c1b6;
        
        right: -95%;
        content: "";
        display: block;
        height: 2px;
        width: 80px;
        opacity: 80%;
    }
    
    .contactTxt {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 150%;
        font-weight: 400;
        color: #4f4946;
        top: 0;
        text-align: left;
        padding: 3% 0 0 0;
       
    }
    
    .contactSmall {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 110%;
        font-weight: 200;
        color: #4f4946;
        top: 0;
        text-align: left;
        padding: 0;
       
    }
    
    .dropLine {
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 120%;
        font-weight: 400;
        background-color: #18203b;
        padding: 15px 20px; 
        border-radius: 5px; 
        display: inline-block; 
        color: #eeeeee;
    }

    .dropLine:hover {
        background-color: #d1c4a2;
        filter: brightness(110%);
    }

    .dropLine a {
        color: inherit;
        text-decoration: none;
    }

    .dropLine:hover a {
        color: #eeeeee;
    }
    
    
    
    
    .google-map {
         padding-bottom: 50%;
         position: relative;
    }
    
    .google-map iframe {
         height: 100%;
         width: 100%;
         left: 0;
         top: 0;
         position: absolute;
    }
    
    /* Footer Styles */
    .footer {
        background-color: #1f2a4d; /* Dark background */
        color: #eeecec; /* Light text */
        text-align: center; /* Center text */
        padding: 20px 0; /* Add padding around the footer */
        position: relative;
        bottom: 0;
        width: 100%; /* Ensure it spans across the whole page */
    }
    
    .footer-content {
        max-width: 1200px; /* Maximum width for the content */
        margin: 0 auto; /* Center the content */
        padding: 0 10px; /* Add padding on the left and right */
    }
    
    .footer p {
        font-family: "Trirong", serif;
        font-size: 16px;
        margin: 0; /* Remove margin for p tag */
    }
    
}



/**************************************************************/
/**************************************************************/
/************************* TABLET *****************************/
/************************* VERSION ****************************/
/**************************************************************/
/**************************************************************/



@media (min-width:768px)  {
     html {
       
        max-width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .header {
        padding: 6%;  /* Adjust padding for mobile if needed */
    }
    
    .header .logo {
        max-width: 100%;  /* Reduce logo size on smaller screens */
        height: auto;
        overflow: hidden;
        margin-top:-5%;
        margin-bottom:2%;
    }

    /* Header Styling */
    .header {
        justify-content: center;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 1%;
        padding-right: 1%;
        display: flex;
        align-items: center;
        background-color: #eeecec;
        margin-top: -1%;
        
    }

    /* Logo Styling */
    .header .logo {
        max-width: 100%; /* Ensures logo scales properly on small screens */
        height: auto;    /* Maintain aspect ratio */
        max-height: 80%; /* Limits the maximum height of the logo */
    } 

    /* Navbar Styling */
    .navbar {
        background-color: #1f2a4d;
        overflow: visible;
        width: 100%;
        text-align: center;
        position: relative;  /* Make navbar initially relative */
        z-index: 1;
        font-size: 100%;
        padding-top: 2%;
        padding-bottom: 1%;
        top: 20%;  /* Adjust to start below the logo */
        
        
    }

    .navbar.sticky {
        position: sticky;  /* When scrolled, make navbar fixed at top */
        top: 0;  /* Stay at the top */
        left: 0;
        width: 100%;
        z-index: 1000;  /* Keep navbar on top of content */
        overflow: visible;
    }

    /* Navbar Links Styling */
    .navbar a {
        color: #eeecec;
        display: inline-block;
        text-align: center;
        text-decoration: inherit;
        font-size: 90%;
        font-family: "Trirong", serif;
        font-weight: bold;
        font-style: normal;
        padding: 0 5%;
    }
    
    
    
    .dropdown {
        position: relative;
        display: inline-block;
        padding: 0 2%;
    }
    
    .dropdown-content {
        display: none; /* Hidden by default */
        position: absolute;
        background-color: #3a466f; /* Dropdown background */
        width: 90vw;
        max-width: 50vw;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        text-align: left;
        
        top: 100%; /* Position below the dropdown parent */
        margin-left: -50%; 
        
    }
    
    .dropdown-content a {
        color: #eeecec;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 80%; 
        font-weight: 200;
        text-align: left;

    }
    

    .dropdown-content a:hover {
        background-color: #3a4a6d; /* Highlight on hover */
    }
    
    .dropdown:hover .dropdown-content {
        display: block; /* Show dropdown on hover */
    }

    
    
    .review-btn {
        position: fixed; /* Fix the button to the screen */
        bottom: 39px; /* Distance from the bottom of the screen */
        left: 10px; /* Distance from the right side of the screen */
        background-color: #1f2a4d; /* Red background color */
        color: #fff; /* White text */
        font-size: 50%;
        font-family: "Trirong", serif;
        font-weight: 400;
        padding: 1.5%; /* Padding around the button */
        border-radius: 30px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
        text-decoration: none; /* Remove underline */
        text-align: center; /* Center text inside button */
        font-weight: bold; /* Bold text */
        z-index: 1000; /* Ensure it stays on top of other elements */
        transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    }
    
    .review-btn:hover {
        background-color: #3a466f; /* Darker red on hover */
    }
    
    
    
    .content {
         padding-top: .5%;
         
    }

/*.firstSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("assets/openart-cnc-machine-shaving-circular-shape-into-metal-with-no-sparks_NG5UVb8T_upscaled.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 55%;
    filter: brightness(35%);
    z-index: -1;
    opacity: 95%; 
} */

    /*************************************************************/
    /*********************** FIRST SECTION ***********************/
    /*************************************************************/
    
    
    
    
    .firstSection {
        display: block;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
         padding: 0;
        text-align: center;
        position: relative; /* Make sure the text can be positioned relative to this container */
        justify-content: center; /* Horizontal centering */
        align-items: center; /* Vertical centering */
        
    }

    .firstSection img {
        max-width: 100%; /* Set a maximum width relative to its container */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Prevent any inline spacing issues */
        margin: 0 auto; /* Center the image within the section */
        background-size: cover;
        background-position: center 55%;
        opacity: 95%;
        filter: brightness(35%);
        z-index: -1; /* Ensure it stays behind other elements if needed */
       
    }

    .centerText {
        font-size: 300%;
        filter: brightness(110%);
        display: block;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-weight: 800;
        z-index: 0;
        text-align: center;
        position: absolute; /* Position it on top of the image */
        top: 25%; /* Adjust this value to control vertical placement */
        left: 50%; /* Horizontally center the text */
        transform: translateX(-50%); /* Fine-tune centering */
        margin: 0 auto;
         padding: 0 10%; /* Add padding for wider text box */
        width: 80%; /* Increase the width to make the box wider */
        color: #e3d9bc;

    }
    
    .lowerText{
        position: absolute; /* Position the lower text on top of the image */
        top: 65%; /* Adjust to control the vertical position of the lower text */
        left: 50%; /* Horizontally center the text */
        transform: translateX(-50%); /* Fine-tune centering */
        color: #e6dec8;
        display: block;
        font-size: 100%;
        filter: brightness(110%);
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        text-align: center;
        font-weight: 400;
        padding-left: 5%; /* Add padding to lowerText */
        padding-right: 5%;
        width: 80%;
        
    }
    
    .contactUsButton {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%); /* This centers the button horizontally */
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 600;
        background-color: #f7f7e9;
        padding: 2%;
        border-radius: 5%;
        margin-top: 1%;
        
    }
    
    .contactUsButton a {
        color: inherit;
        text-decoration: none;
    }
    
    
    /*************************************************************/
    /*********************** SECOND SECTION ***********************/
    /************************** ABOUT US **************************/
    /*************************************************************/
    
    .aboutUsGrid {
        display: block;
        margin-top: 2em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
        
    }

    .aboutUsTxt {
        
        padding-bottom: 2%;
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-weight: 800;
        color: #9e9188;
        font-size: 200%;
            
    }
    
    .aboutUsTxt:after {
        background: none repeat scroll 0 0 #d1c1b6;
        bottom: -15%;
        content: "";
        display: block;
        height: 2px;
        position: relative;
        width: 30px;
        opacity: 80%;
        left: 50%; /* Position it at the center */
        transform: translateX(-50%);
    }
    
    .aboutUsImg {
        max-height: 10%;
    }

    .aboutUsImg img{
        background-repeat: no-repeat;
        position: center 55%;
        width: 100%;
        max-width: 100%; /* Set a maximum width relative to its container */
        height: 70%; /* Maintain aspect ratio */
        display: block; /* Prevent any inline spacing issues */
        
        background-size: cover;
        padding-bottom: 5%;
    }

    .aboutUsSum {
        font-size: 400%; /* Adjust text size */
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 110% !important;;
        font-weight: 300;
        color: #4f4946;
        padding: 1% 1% 2% 1%;
        text-align: center;
        line-height: 1.3;
    }

    .headers1 {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 150% !important;
        font-weight: 600;
        color: #4f4946;
        top: 20%;
        text-align: center;
        padding-bottom: 2%;
    }
    
    /*************************************************************/
    /*********************** THIRD SECTION ***********************/
    /************************** SERVICES *************************/
    /*************************************************************/
    
    .services {
        background-color: #eeeeee;
        display: block;
        margin-top: 1em;
        margin-bottom: 2em;
        margin-left: 0;
        margin-right: 0;
        grid-template-areas: "area1 "
                         "area2 "
                         "area3 "
                         "area4"
                         "area5"
                         "area6"
                         "area7";
        padding: 5%;
    }

    .nestedServices {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: 15% 50% 35%;
        grid-gap: 3px; 
        padding: 0% 1% 1% 0%; 
        
    }

    .nestedServices img {
        display: flex;
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        overflow: hidden;
        justify-content: center;
        align-items: center;
        padding: 0 1% 1% 1%;
    }
    
    .serviceTxt{
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 120%;
        font-weight: 300;
        color: #4f4946;
        top: 30%;
        text-align: center;
        padding: 3% 0.5% 0.5% 0%;
        margin-top: 4%;
        
    }
    
    .headers2{
            font-family: "League Spartan", sans-serif;
            font-style: normal;
            font-size: 150%;
            font-weight: 400;
            color: #6b5c51;
            text-align: center;
            margin: 0 auto;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
    }
    
    /**************************************************************/
    /*********************** FOURTH SECTION ***********************/
    /************************** GALLERY ***************************/
    /**************************************************************/
        
    .water {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5%;
        padding-right: 5%;
    }

    .waterGalleryHeading { 
        grid-area: 1 / 1 / 2 / 4; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 1%;
        padding-top: 2%;
        
    }

    .waterGalleryTxt { 
        grid-area: 2 / 1 / 3 / 4;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        text-align: center;
        padding: 2% 1% 2% 1%;
    }

    .water1 { grid-area: 3 / 1 / 5 / 2; }
    .water2 { grid-area: 3 / 2 / 4 / 4; }
    .water3 { grid-area: 4 / 2 / 5 / 3; }
    .water4 { grid-area: 4 / 3 / 5 / 4; }
    
    .water img{
        display: block;
        width: 100%; /* Ensure the image does not exceed the column width */
        height: 100%; /* Force the image to fill the row height */
        object-fit: cover; /* Ensure the image scales without distortion */
        overflow: hidden;
        padding: 3% 1% 3% 1%;
    }


    .machine {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5%;
        padding-right: 5%;
        background-color: #eeeeee;
    }

    .machineGalleryHeading { 
        grid-area: 1 / 1 / 2 / 5; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: center;
        padding-bottom: 1%;
        padding-top: 5%;
    }

    .machineGalleryTxt { 
        grid-area: 2 / 1 / 3 / 5; 
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 300;
        color: #4f4946;
        padding: 2% 1% 5% 1%;
        text-align: center;
    }
    
    .machine img{
        display: block;
        width: 100%; /* Ensure the image does not exceed the column width */
        height: 100%; /* Force the image to fill the row height */
        object-fit: cover; /* Ensure the image scales without distortion */
        overflow: hidden;
        padding: 3% 1% 3% 1%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /**************************************************************/
    /*********************** LAST SECTION *************************/
    /************************ CONTACT US **************************/
    /**************************************************************/
    .contact {
        display: block;
        padding-top: 3%;
        padding-bottom: 10%;
        padding-left: 7%;
        padding-right: 7%;
    }
    
    .contactHeader {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 300%;
        font-weight: 700;
        color: #9e9188;
        text-align: left;
        padding: 2% 0 3% 0;
    }
    
    .contactHeader:after {
        background: none repeat scroll 0 0 #d1c1b6;
        bottom: -25%;
        left: 50%; /* Position it at the center */
        content: "";
        display: block;
        height: 2px;
        width: 80px;
        opacity: 80%;
    }
    
    .contactTxt {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 140%;
        font-weight: 400;
        color: #4f4946;
        top: 20%;
        text-align: left;
        padding-top: 8%;
    }
    
    .contactSmall {
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 200;
        color: #4f4946;
        top: 20%;
        text-align: left;
        padding-top: 5%;
    }
    
    .dropLine {
        text-align: center;
        font-family: "League Spartan", sans-serif;
        font-style: normal;
        font-size: 100%;
        font-weight: 400;
        background-color: #18203b;
        padding: 3% 2%; 
        border-radius: 5px; 
        display: inline-block; 
        color: #eeeeee;
        margin-top: 3%;
    }

    .dropLine:hover {
        background-color: #d1c4a2;
        filter: brightness(110%);
    }

    .dropLine a {
        color: inherit;
        text-decoration: none;
    }

    .dropLine:hover a {
        color: #eeeeee;
    }
    
    .google-map {
         padding: 7% 0 50% 0;
         position: relative;
    }
    
    .google-map iframe {
         height: 100%;
         width: 100%;
         left: 0;
         top: 0;
         position: absolute;
         padding: 7% 0 0 0;
    }
    
    
    
    /* Footer Styles */
    .footer {
        background-color: #1f2a4d; /* Dark background */
        color: #eeecec; /* Light text */
        text-align: center; /* Center text */
        padding: 1% 0 1% 0; /* Add padding around the footer */
        position: relative;
        bottom: 0;
        width: 100%; /* Ensure it spans across the whole page */
    }
    
    .footer-content {
        max-width: 1200px; /* Maximum width for the content */
        margin: 0 auto; /* Center the content */
        padding: 0; /* Add padding on the left and right */
    }
    
    .footer p {
        font-family: "Trirong", serif;
        font-size: 12px;
        margin: 0; /* Remove margin for p tag */
    }
    
    
    
    
    
    
}