@supports (-webkit-touch-callout: none) {
    /* Apply styles for WebKit-based browsers with touch callouts disabled */
    .main img {
      /* Adjust styles for the logo or other elements as needed */
      /* For example, you can set a specific height or width */
      max-height: 100px;
      padding: 10%;
      max-width: 100%;
    }
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html body {
    font-size: 10px;
    font-family: sans-serif;
}

/* .navbar {
    width: 100%;
    height: 100%;
    background-color: #EAEAEA;
}

.navbar div {
    padding: 0.75%;
    font-size: 16px;
}

.navbar div a:first-of-type {
    margin-left: 14%;
}

.navbar div a:nth-of-type(2) {
    margin-left: 1%; 
}*/

.main {
    width: 100%;
    display: flex;
}

.main div {
    width: 50%;
}

.main img {
    padding: 4.5%;
    max-width: 35%;
    height: 100%;
    margin-left: 25%;
}

.main ul {
    display: flex;
}

a {
    color: rgb(102, 102, 102);
}

img {
    max-width: 100%;
    max-height: 100%;
}

.main ul {
    padding-left: 7.5%;
}

.main ul li {
    list-style: none;
    padding-top: 7.5%;
    padding-bottom: 5%;
    padding-right: 4.5%;
    font-size: 16px;
}

.transportation-picture {
    background-image: url('../images/depot_hero_1.JPG');
    background-position-x: 50%;
    background-position-y: 50%;
    background-position: center;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover; /* Ensures the background image covers the entire element */
    height: 100vh; /* Sets the height to 100% of the viewport height */
    /* display: flex; */
    color: #fff;
    padding: 0 20px;
}

.headline {
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    font-size: 30px;
    line-height: 48px;
    padding-top: 17%;
    text-align: center;
    text-transform: uppercase;
}

.headline h1 {
    padding-bottom: 2.5%;
}

.services {
    background-color: rgb(246, 245, 245);
    width: 100%;
    padding: 5% 0; /* Add some padding for spacing */
    box-sizing: border-box; /* Ensure padding and border are included in width and height calculations */
}

.services-container {
    padding: 0 25%;
    width: 100%;
    box-sizing: border-box; /* Ensure padding is included in width calculation */
    overflow: hidden; /* Ensure floats are cleared */
}

.services-container-block {
    width: 50%;
    float: left;
    text-align: center;
    box-sizing: border-box; /* Ensure padding and border are included in width calculation */
}

.services-container img {
    width: 50px;
    height: 50px;
}

.services-container h2 {
    padding-top: 5%;
    padding-bottom: 7.5%;
    color: rgb(0, 123, 255);
}

.services-container h3 {
    font-size: 23px;
    font-weight: 500;
    padding-top: 5%;
}

.services-container-images {
    padding: 30px;
    transition: background-color 0.5s;
    width: 100%;
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}

.services-container-images h3 {
    padding-bottom: 5%;
}

.services-container-images:hover {
    background-color: white;
}

.body-h2 {
    font-size: 48px;
    font-weight: 500;
}

.body-h2-div {
    text-align: center;
}

.about-us {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7.5% 0;
}

.about-us-container {
    width: 80%;
    color: rgb(147, 147, 147);
}

.about-us-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap;
    padding-top: 20px; /* Add padding to separate from header */
}

.about-us-text {
    flex: 1;
    padding: 0 2%;
}

.about-us-text {
    text-align: left;
}

.about-us-image {
    margin-top:3rem;
    margin-bottom: 3rem;
    width: 100%;
    height: 100%;
}

.about-us-image p {
    height: 100%;
    position: relative;
    top: 3rem;
    left: 2rem;
}

.about-us.image p:nth-child(1){
    width: 20%;
}

.about-us.image p:nth-child(2){
    width: 80%;
}

.about-us-image img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
    float: left;
}

.about-us-container hr {
    margin-bottom: 20px;
}

#body-h2-about-us {
    color: rgb(0, 123, 255);
    text-align: center;
    padding-bottom: 5%;
}

.about-us-container p {
    font-size: 16px;
    font-weight: 400;
}

.about-us-container h2 {
    font-size: 48px;
    font-weight: 500;
}



/* Set up the container to use flexbox */
.why-section {
    background-color: #FFFFFF;
    /* display: flex; */
    /* justify-content: center; 
    align-items: center;     */
}

/* Ensure the container is using 100% width and sets content side by side */
.why-section-container {
    display: flex;
    flex-direction: row;
    /* Keep elements side-by-side */
    padding: 7.5% 10% 7.5% 10%;
    /* width: 70%;             
    height: 600px;        */
}

/* Adjust the width of the image and text sections */
.why-section-image {
    flex: 1;
    /* Image section takes up equal space */
    text-align: center;
    /* Center the image horizontally */
}

.why-section-image img {
    width: 100%;
    /* Ensure the image fills its parent */
    height: 100%;
    /* Maintain aspect ratio */
}

.why-section-text {
    flex: 1;
    /* Text section takes up equal space */
    padding: 0 5% 2.5% 0;
    /* Add some padding for spacing */
}


.why-section-text h2 {
    font-size: 32px;
    font-weight: 500;
    color: rgb(0, 123, 255);
    padding-bottom: 24px;
}

.why-section-text li,
p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 15px;
    color: rgb(147, 147, 147);
}

.contact-section {
    padding: 7,5%;
    /* Padding around the section */
    background: #f9f9f9;
    /* Light background for the section */
    text-align: center;
    /* Center text alignment */
    padding-bottom: 10%;
}

/* Heading styling for the contact section */
.contact-section h2 {
    font-size: 4.8em;
    /* Large font size for the heading */
    padding-top: 5%;
    margin-bottom: 20px;
    /* Space below the heading */
    color: rgb(0, 123, 255);
    /* Dark text color */
}

/* Form styling */
.contact-form {
    width: 75%;
    /* Maximum width for the form */
    margin: 0 auto;
    /* Center the form horizontally */
    padding: 20px;
    /* Padding inside the form */

}

/* Flexbox for arranging inputs side by side */
.contact-form-row {
    display: flex;
    /* Use flexbox to align elements */
    justify-content: flex-start;
    /* Align elements to the left */
    align-items: center;
    /* Align elements vertically */
    gap: 10px;
    /* Space between items */
    margin-bottom: 20px;
    /* Space between form rows */
}

/* Set the width to ensure they occupy 50% */
.contact-form-row div {
    flex: 1;
    /* Each input covers 50% */
}

/* Input field styling */
.contact-form input {
    width: 100%;
    /* Ensure input takes the full width of its container */
    padding: 20px;
    /* Padding inside the inputs */
    border: 1px solid #fff;
    /* Light border */
    border-radius: 5px;
    /* Rounded corners */
    font-size: 1.6em;
    /* Standard font size */
    transition: border 0.3s;
    /* Smooth transition for border */
}

/* Ensure full-width for the email field */
.contact-form input[name="email"] {
    width: 100%;
    /* Full width for the email input */
}

.contact-form textarea {
    width: 100%;
    /* Textarea takes the full width */
    height: 150px;
    /* Set height for the textarea */
    padding: 20px;
    /* Padding inside the inputs */
    border: 1px solid #fff;
    /* Light border */
    border-radius: 5px;
    /* Rounded corners */
    font-size: 1.6em;
    /* Standard font size */
    transition: border 0.3s;
    /* Smooth transition for border */
}

/* Change border color on focus */
.contact-form input:focus,
.contact-form textarea:focus {
    border: 1px solid #007BFF;
    /* Blue border on focus */
    outline: none;
    /* Remove default outline */
}

/* Submit button styling */
.contact-form input[type="submit"] {
    margin-top: 15px;
    width: 40%;
    float: left;
    background: #007BFF;
    /* Blue background */
    color: #fff;
    /* White text color */
    border: none;
    /* No border */
    border-radius: 5px;
    /* Rounded corners */
    padding: 20px;
    /* Padding for the button */
    cursor: pointer;
    /* Pointer cursor */
    transition: background 0.3s;
    /* Smooth transition for hover */
}



/* Change background color on hover */
.contact-form input[type="submit"]:hover {
    background: #0056b3;
    /* Darker blue on hover */
}

.copyright {
    background-color: #333;
    text-align: center;
    padding: 2%;
}

.fa-check {
    color: #007BFF;
    padding-right: 20px;
}

.fa-envelope-open,
.fa-phone {
    margin-right: 0.25%;
}

.why-section-image-first {
    display: none;
}

@media screen and (max-width: 1300px) {
    
    .why-section-container {
        display: block;
    }

    .why-section-image-first {
        display: block;
    }

    /* .why-section-image {
        display: none;
    } */

    .why-section-image-first {
        flex: 1;
        /* Image section takes up equal space */
        text-align: center;
        /* Center the image horizontally */
        padding-bottom: 7.5%;
    }

    .why-section-image-first img {
        width: 100%;
        /* Ensure the image fills its parent */
        height: 100%;
        /* Maintain aspect ratio */
    }
}

@media screen and (max-width: 1100px) {

.services-container-images p {
    font-size: 12px;
}

.main ul li {
    padding-top: 6.5%;
}
}

@media screen and (max-width: 975px) {

    .services-container-images p {
        display: none;
    }

}

@media screen and (max-width: 950px) {

    .about-us-container {
        padding: 0 5%;
    }

    .about-us-text {
        flex: 1 1 100%;
    }

    .main img {
        max-width: 35%;
    }

    .services {
        height: 500px;
    }

    .services-container-images {
        height: 150px;
        width: 100%;
    }

    .services-container h3 {
        font-size: 22px;
    }

}

@media screen and (max-width: 875px) {

    .main ul li {
        padding-top: 7.5%;
    }

    .services {
        height: auto;
    }

    .services-container h3 {
        font-size: 20px;
    }

    .main img {
        max-width: 50%;
    }

    .services-container-images {
        height: 150px;
        width: 100%;
    }

    .headline {
        font-size: 24px;
    }
}
@media screen and (max-width: 750px) {
    .main img {
        max-width: 50%;
    }
}
@media screen and (max-width: 650px) {
    .about-us-container {
        padding: 0 2.5%;
    }

    .about-us-image p {
        top: 2rem;
        left: 2rem;
    }

    .why-section-container {
        display: block;
        flex-direction: row;
        /* Keep elements side-by-side */
        padding: 7.5% 7.5% 7.5% 7.5%;
        /* width: 70%;             
        height: 600px;        */
    }

    .why-section-text h2 {
        text-align: center;
    }

    .about-us-text {
        flex: 1 1 100%;
    }

    .about-us-image img {
        width: 8rem;
        height: 8rem;
    }

    #body-h2-about-us {
        font-size: 32px;
    }

    .body-h2{
        font-size: 32px;
    }

    .about-us-container p {
        font-size: 16px;
    }
    .contact-section h2 {
        font-size: 4em;
    }

    .contact-section {
        padding-bottom: 15%; 
    }

    .services-container h3 {
        font-size: 16px;
    }

    .main div:nth-child(2) {
        display: none;
    }

    .main img {
        max-width: 55%;
    }

    .headline {
        font-size: 20px;
    }

    .services-container-images {
        height: 150px;
        width: 100%;
    }

}


@media screen and (max-width: 510px) {

    .main img {
        max-width: 60%;
    }

    .headline {
        font-size: 16px;
    }

    .services-container {
        padding: 0 20% 0 20%;
    }

    .services-container-images {
        height: 150px;
        width: 100%;
    }

}

@media screen and (max-width: 490px) {

    .main img {
        max-width: 65%;
    }

    .about-us-image p {
        top: 1.5rem;
        left: 2rem;
    }

    .services-container-images {
        height: 150px;
        width: 100%;
    }

}

@media screen and (max-width: 465px) {

    .main img {
        max-width: 65%;
    }

}

@media screen and (max-width: 450px) {
    .main img {
        max-width: 67.55%;
    }

    .services-container-images {
        height: 150px;
        width: 100%;
    }

}

@media screen and (max-width: 425px) {
    .about-us-container {
        padding: 0;
    }
    
    .about-us-text {
        flex: 1 1 100%;
    }

    .why-section-text h2 {
        font-size: 28px;
    }

    #body-h2-about-us {
        font-size: 28px;
    }

    .about-us-container p {
        font-size: 16px;
    }
    .contact-section {
        padding-bottom: 20%; 
    }

    .main img {
        max-width: 100%;
        padding: 10%;
    }

    .headline {
        font-size: 16px;
    }

    /* .navbar div a {
        font-size: 14px;
    } */

    .services-container-images {
        height: 150px;
        width: 100%;
    }

    .services-container {
        padding: 0 15% 0 15%;
    }

}

/* @media screen and (max-width: 350px) {

    .navbar div a {
        font-size: 12px;
    }

} */

/* @media screen and (max-width: 300px) {

    .main img {
        max-width: 80%;
    }

} */