@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: 'Raleway', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #3a3939;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding-top: 60px; /* Adjust padding for taller navbar */
    overflow-y: hidden;
}

#truck_color {
    color: #ab232b;
}

.navbar {
    width: 100%;
    background-color: #3a3939;
    color: white;
    text-align: center;
    padding: 20px 0; /* Adjust padding for taller navbar */
    box-sizing: border-box;
    font-size: 18px; /* Adjust font size */
    position: absolute; /* Change fixed to absolute */
    top: 0; /* Place navbar at the top */
    left: 0; /* Align navbar to the left */
    z-index: 999; /* Ensure navbar stays on top of other content */
}


.navbar h1 {
    font-size: 35px; /* Adjust font size */
    margin: 0; /* Remove default margin */
}

.container {
    display: flex;
    flex-direction: row; /* Change to row */
    align-items: center;
    margin-bottom: 50px; /* Ensure space for the contact box */
    padding-top: 50px; /* Add padding to create a gap between navbar and content */
}

.top-img {
    width: 70%; /* Adjust width to 50% */
    float: left; /* Float image to the left */
    border: 3px solid #3a3939; /* Add border */
    box-sizing: border-box; /* Ensure border is included in width */
}

.top-img img {
    width: 100%;
    display: block; /* Ensure image occupies entire space within border */
}

.bottom_img{
    width: 100%;
    background-color: lightgray;
    height: 20vh;
}

.text-container {
    width: 50%; /* Adjust width to 50% */
    padding-left: 20px; /* Add padding for better spacing */
    text-align: center; /* Align text to center */
}

.contact-box {
    width: 100%; /* Adjust width to fill the screen */
    font-size: 16px; /* Adjust font size for contact box */
    padding: 15px; /* Increase padding for better spacing */
    background-color: #3a3939; /* Set background color */
    color: white; /* Set text color */
    text-align: center; /* Align text to center */
    position: fixed; /* Stick contact box to the bottom */
    bottom: 0; /* Align contact box to the bottom */
    left: 0; /* Align contact box to the left */
    z-index: 999; /* Ensure contact box stays on top */
    box-sizing: border-box; /* Include padding and border in width calculation */
}


.contact-box h2 {
    font-size: 30px; /* Adjust font size for the CONTACT ROB heading */
    margin: 5px 0; /* Adjust margin for tighter spacing */
}

.text-div {
    position: relative; /* Ensure content remains in its natural flow */
    z-index: 0; /* Ensure content stays below contact box */
}



.text-div h2 {
    font-size: 2; /* Adjust font size for the Small Crane Truck Service heading */
    margin-bottom: 0px; /* Reduce margin bottom for tighter spacing */
}

.text-div h3, .text-div h4, .text-div p {
    margin: 8px 0; /* Adjust margin for paragraphs and smaller headings */
}

.text-div h3 {
    text-align: justify;
}
.text-div h4 {
    text-align: left;
    padding-top: 5vh;
    font-size: 16px;
    margin-top: 10px; /* Adjust margin top for clearer separation */
}

.text-div p {
    font-size: 14px;
}

.text-div ul {
    list-style-type: none; /* Remove default bullet */
    padding-left: 0; /* Remove default padding */
    text-align: left; /* Align text to left */
}

.text-div ul li::before {
    content: "\2192"; /* Unicode character for right arrow */
    margin-right: 5px; /* Add space between arrow and text */
}

/* Existing styles remain unchanged */

@media only screen and (max-width: 600px) {
   .navbar {
        width: 100%;
        font-size: 14px; /* Adjust font size for mobile */
        padding: 15px 0; /* Adjust padding for mobile */
    }

   .navbar h1 {
        font-size: 20px; /* Adjust font size for mobile */
    }

   .container {
        flex-direction: column;
        padding-top: 0px;
        display: flex; /* Ensure container uses Flexbox */
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
    }

   .top-img {
        width: 100%; /* Adjust width to 100% on smaller screens */
        float: none; /* Remove floating */
        margin: auto; /* Center the image */
        border: 3px solid #3a3939; /* Keep the border */
        box-sizing: border-box; /* Ensure border is included in width */
    }

   .top-img img {
        width: 100%;
        display: block; /* Ensure image occupies entire space within border */
    }

   .text-container {
        width: 100%; /* Adjust width to 100% on smaller screens */
        padding-left: 20px; /* Keep the padding */
        text-align: center; /* Keep the alignment */
    }

   .contact-box h2 {
        font-size: 20px;
    }

   .text-div h1 {
        font-size: 10vw;;
        margin-bottom: auto;
    }

   .text-div h2 {
        font-size: 15px;
    }
    .text-div h4 {
        padding-bottom: 50;
        margin-top: 0;
    }
}