@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Light.ttf') format('truetype');
}
body {
  font-family:Quicksand;
    padding: 0;
    background-color: #ffffff; /* Light background */
    display: flex; /* Add this line */
  flex-direction: column; /* Add this line */
  position:static;
  overflow: scroll;
  overflow-x: hidden;
  position: relative;
  
}
::-webkit-scrollbar {
  width: 0;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
html, body {
    height: 100%;
    margin: 0;
  }
@keyframes slideInFromTop{
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.background-image {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('images/delivery2.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
    
    animation: slideInFromTop 1s ease-out;
  }
  .background-bus{
    background-image: url('flota/images/svbl_busy_2.jpg');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1; /* To sprawi, że obraz będzie za innymi elementami */
    animation: slideInFromTop 1s ease-out;
    height: 700px;
  }
header {
    
    color: #fff;
  
}
.button-container {
    margin: 0 10px; /* add some margin to position the buttons correctly */
    display: flex; /* use flexbox to align the buttons */
    justify-content: flex-end; /* align the buttons to the right */
  }
  
  .button {
    margin: 0 5px; /* add some margin to position the buttons correctly */
  }
.header-img {
    width: 15%; /* adjust the width to fit your logo */
    height: auto;
     /* add some margin to position the logo correctly */
    position: relative;
    
    left: 0px;
  }
.container {
    
    margin: 0 auto;
    
    
    
}
.content-page-container {
    max-width: 1500px; /* Adjust the value as needed */
    margin: 0 auto; /* Center horizontally */
    padding-bottom: 80px;
  
    
    
  }
  .main-nav-font nav a {
    color: #ffffff; /* or any other desired color */
  }
nav {
    text-align: right;
    
}

nav a {
    
    text-decoration: none;
    margin-left: 15px; /* Space between links */
    padding: 8px 12px; /* Add padding to buttons */
    border-radius: 5px; /* Round the corners */
    font-size: 20px;
    font-style: bold;
    color: #000000;
    position: relative;
    top: 50px;
    transition: color 0.3s;

}

nav a:hover {
    color:rgb(255, 121, 25);

}
nav a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ff6600; /* Change this to your desired color */
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
  }
  nav a:hover:after {
    transform: scaleX(1);
  }
/* Default styles */
.nav-toggle {
  display: none;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin-right: 20px;
}
main {

    flex: 1 0 auto;;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    position: relative; /* Reset the position to relative */
    bottom: 0; /* Reset the bottom position */
    left: auto; /* Reset the left position */
    right: auto; /* Reset the right position */
    width: 100%; /* Make the footer span the full width */
    flex-shrink: 0; /* Prevent the footer from shrinking */
    z-index: -1;
    text-align: center; /* Add this line */
  }
    



.contact-form button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #0056b3;
}




/* Contact Page Layout */
.contact-page-content {
  position: relative;
  padding: 20px;
  background-color: #fff;
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; /* Align items to the top */
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
   
}
.contact-page-content::before,
.contact-page-content::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  height: 5px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
  z-index: -1;
}

.contact-page-content::before {
  top: -5px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
}

.contact-page-content::after {
  bottom: -5px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.contact-form-container {
    width: 30%;  /* Adjust as needed for the form width */
    margin-right: 20px;
    opacity: 0;  /* Initially hidden */
    transform: translateX(-50px); /* Start slightly off-screen */
    transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out; /* Slowed down */
    padding: 20px;
    border: 1px solid #ffffff;
    border-radius: 5px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid #ccc;  /* Add a border */
    border-radius: 10px;  /* Rounded corners */
    background-color: #e8eaed; /* White background with opacity */
    display: grid;
  grid-template-columns: 1fr 1fr;
position: relative;

}
.vertical-line {
  width: 2px; /* Adjust this value to control the line thickness */
  background-color: #ff8310;
  
  position: absolute;
  left: calc(30% + 140px); /* Adjust this value to control the horizontal position */
  top: 20px; /* Adjust this value to control the vertical position */
  bottom: 20px; /* Adjust this value to control the vertical position */
  z-index: 1;
}
.contact-form-container-input{
    width: 100%;
    height:20px;
}
.contact-form-container-textarea{
    width: 100%;
    height: 300px;
}


.contact-form-container.show {
    opacity: 1;
    transform: translateX(0); 
}
#map {
  position: relative;
  width: 800px; /* Use a percentage-based width */
  height: 538px; /* Adjust the height to a more suitable value */
  justify-content: flex-end;
  
  
}
.map-container {
  height: 300px; /* Adjust the height to match the #map element */
}
 
   

@keyframes fadein{
    0%{opacity:0}
    40%{opacity:0}
    50%{opacity:0.2}
    60%{opacity:0.4}
    70%{opacity:0.5}
    80%{opacity:0.7}
    90%{opacity:0.8}
    100%{opacity:1}
}

.entrance{
  
    text-align: center;
    position: relative;
    top:150px;
    
    
    }
    .entrance-class{
    font-size: 4em;
    animation: fadein 2.5s ease-in-out;
    color: #ff8310;
    text-shadow:10 10 #0000;
    }
    .entrance-text{
      font-size: 1.9em;
      animation: fadein 5s ease-in-out;
      color: white;
      text-shadow:10px 10px #0000;
    }
    .content-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start; /* Align items to the top */
    }
    
    .second-container{
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px;
      margin-top:40%;
      
    }
    .about,
    .global-container {
      flex: 0 0 auto; /* Don't grow or shrink */
      box-sizing: border-box;
      
    }
    .about{
     
      
      max-width: 50%; /* Set a maximum width */
       
      }
      .about-title{
      font-size: 1.6em;
      display: inline-block; /* Make the element an inline-block */
      position: relative; /* Required for positioning the ::after pseudo-element */
       /* Reduced spacing below the text */

      }
      .about-title::after {
        content: "";
        display: block;
        width: 60%; /* Adjust the width of the line as needed */
        height: 3px; /* Adjust the height (thickness) of the line as needed */
        background-color: #ff8310; /* Orange color */
        position: absolute; /* Position the line absolutely */
        left: 50%; /* Position the line at 50% from the left */
        transform: translateX(-50%); /* Shift the line to the left by 50% of its own width */
        bottom: 17px; /* Position the line at the bottom of the element */
      }
      .about-text{
      font-size: 1em;
    line-height: 130%;
      }
   
 .global-container{
   position: relative;
  
   margin-left: auto; /* Push .global-container to the right */
  max-width: 50%; /* Set a maximum width */
   
   
  img{
    
   
    text-align: right;
  }   
 }
 .image-container {
  margin: 0 auto; /* Center the .image-container horizontally */
  text-align: center; /* Center the image within the container */
}
  
  
      
  .counter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: center;
  position: relative;
  padding-top: 30px;
   /* Adjust this value to move the container down */
   /* Adjust this value to move the container to the left */
  }
  
  .counter {
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

  }
  
  .counter h3 {
    color:#ff8310;
    padding: 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 800;
  }
  
  .counter h6 {
    font-size: 1.5rem;
    padding-bottom: 1rem;
  }
  .counter-wrapper.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
  }

.palletjack{
  position: relative;
  left: 0;
}
.ep10,
.ep9,
.ep102 {
  border: 1px solid #ccc;
  padding: 80px;
  
  margin: 10px;
  
}

.fleetbox > div {
  width: 100%;
  max-width: 1500px; /* Opcjonalne maksymalne ograniczenie szerokości */
  background-color: #f7f7f780; /* Jasny kolor tła dla boxów */
  border: 1px solid #ddd; /* Delikatna ramka wokół boxów */
  margin-bottom: 50px; /* Odstęp między kolejnymi boxami */
  padding: 20px; /* Odstęp wewnątrz poszczególnych boxów */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Delikatny cień dla boxów */
}

.text-section {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.checkmark {
  color: #ff8310;
  font-size: 20px;
  margin-right: 10px;
}
p {
  color: inherit; /* Inherit the text color from the parent element */
  margin: 0; /* Remove default margin */
}
.fleetbox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  
  
}
.our-fleet{
  font-size: 16px;
  text-align: center;
  margin-top:40%;
  padding: 40px;
}
.our-fleet h1 {
  display: inline-block; /* Make the h1 an inline-block element */
  position: relative; /* Required for positioning the ::after pseudo-element */
}

.our-fleet h1::after {
  content: "";
  display: block;
  width: 60%;
  height: 3px;
  background-color: #ff8310;
  position: absolute; /* Position the line absolutely */
  left: 50%; /* Position the line at 50% from the left */
  transform: translateX(-50%); /* Shift the line to the left by 50% of its own width */
  bottom: -10px; /* Adjust the vertical position of the line */
}
.why-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px; /* Adjust this value as needed */
}

.why-us h1 {
  margin-bottom: 70px; /* Adjust this value as needed */
  position:relative;
}
.why-us #orange-line::after {
  content: ""; /* Add content to the pseudo-element */
  display: block; /* Display as a block element */
  width: 60%; /* Adjust the width of the line as needed */
  height: 3px; /* Adjust the height (thickness) of the line as needed */
  background-color: #ff8310; /* Orange color */
  position: absolute; /* Position the line absolutely */
  left: 50%; /* Position the line at 50% from the left */
  transform: translateX(-50%); /* Shift the line to the left by 50% of its own width */
  bottom: -10px; /* Position the line below the heading */
}
.box-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Make all items stretch to the same height */
  width: 100%;
  position: relative;
}

.challenges,
.strenght,
.individuality {
  flex: 0 0 30%; /* Set the initial width of each box */
  padding: 20px;

  margin: 10px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

.challenges::after,
.strenght::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10px; /* Adjust the position of the vertical line */
  height: 100%;
  width: 1px;
  background-color: #ccc; /* Choose a color for the vertical line */
}

.strenght::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10px; /* Adjust the position of the vertical line */
  height: 100%;
  width: 1px;
  background-color: #ccc; /* Choose a color for the vertical line */
}
.challenges h1,
.strenght h1,
.individuality h1 {
  font-size: 1.4em; /* Adjust the font size as needed */
  margin-bottom: 10px; /* Add some space between h1 and content */
  color: #ff8310; /* Change the font color to a desired color (e.g., dark grey) */
}
.company-info-section {
  background-color: #505050;
  padding: 20px 0;
}

.details-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.company-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit; /* Inherit the text color from the parent element */
}

.company-name-address {
  text-align: left;
  color: #ffffff;
}

.contact-info {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.contact-icon {
  font-size: 20px;
  margin-right: 10px;
}

.phone-icon::before {
  content: "\260E"; /* Telephone icon */
  color: #ff8310; /* Orange color for phone icon */
}

.mail-icon::before {
  content: "\2709"; /* Mail icon */
  color: #ff8310; /* Orange color for mail icon */
}
.fleet-images {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}

.fleet-images div {
  flex: 0 0 auto;
  margin-right: 20px; /* Adjust the margin as needed */
}

.fleet-images div:last-child {
  margin-right: 0; /* Remove margin from the last child */
}
.adr-image, .gps, .tailift-image, .paleta {
  position: relative;
  display: inline-block; /* To make them appear side by side */
}

.adr-image, .gps, .tailift-image, .paleta {
  position: relative;
  display: inline-block;
}


.adr-image .hover-text,
.gps .hover-text,
.tailift-image .hover-text,
.paleta .hover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-align: center;
  border: 8px dashed transparent; /* Add a transparent dashed border initially */
  border-radius: 20px;
  overflow: hidden; /* Ensure the border is only in the corners */
  
}

.adr-image:hover .hover-text,
.gps:hover .hover-text,
.tailift-image:hover .hover-text,
.paleta:hover .hover-text {
  opacity: 1;
  border-color: #ff8310; /* Change the border color to orange on hover */

}
.contact-data{
  padding-bottom: 40px;
}
.contact-data-wrapper {
  display: flex;
  justify-content: space-between; /* Align the elements to the center horizontally */
  padding-top: 30px;
  padding-bottom: 50px;
  
}
.contact-data > h1,
.contact-data > h2 {
  text-align: center;
  position: relative;
  padding-bottom: 10px; /* Adjust the value as needed */
}
.contact-data > h1::after,
.contact-data > h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30%; /* Adjust the width as needed */
  height: 3px; /* Adjust the height as needed */
  background-color: #ff8310;
}

.tomek, .pawel, .michal {
  flex: 1; /* Each class covers equal width */
  text-align: center; /* Center align the content */
  margin: 0 10px; /* Add spacing between the elements */
  background-color: #f7f7f780; /* Jasny kolor tła dla boxów */
  border: 1px solid #ddd; /* Delikatna ramka wokół boxów */
  padding: 20px; /* Odstęp wewnątrz poszczególnych boxów */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Delikatny cień dla boxów */
}
.additional-container{
  padding-top: 150px;
}
.check-fleet {
  display: flex;
}

.check-contact {
  display: flex;
}

.check-fleet-textbox, .check-fleet-imagebox, .check-contact-textbox, .check-contact-imagebox {
  flex: 1;
}
.check-contact-textbox, .check-fleet-textbox{
  font-size: 17px;
  text-align: center;
}
.check-contact-textbox h1, .check-fleet-textbox h1{
  font-size: 30px;
 position: relative;
 padding-bottom: 15px;
}
.check-contact-textbox div, .check-fleet-textbox div{
  padding-top: 60px;
 
}
.check-fleet-textbox {
  margin-right: 50px; /* Adjust the value as needed */
}
.check-contact-textbox {
  margin-right: 50px; /* Adjust the value as needed */
}


.check-contact-button a,
.check-fleet-button a {
 color:inherit;
  text-decoration: none; /* Remove underline */
}
.check-contact-button a,
.check-fleet-button a {
    text-decoration: none;
    margin-left: 15px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    position: relative;
    top: 50px;
    transition: color 0.3s;
}

.check-contact-button a:hover,
.check-fleet-button a:hover {
    color: rgb(255, 121, 25);
}

.check-contact-button a::after,
.check-fleet-button a::after {
    content: "";
    position: absolute;
    bottom: -3px; /* Adjust the position of the line */
    left: 50%; /* Center the line */
    width: 0;
    height: 3px;
    background-color: #ff6600;
    transition: width 0.3s ease;
    transform: translateX(-50%); /* Center the line */
}

.check-contact-button a:hover::after,
.check-fleet-button a:hover::after {
    width: 100%; /* Expand the line */
}

/* Responsive adjustments for screens with max width of 768px */
@media (max-width: 768px) {
    .container {
        width: 100%;
        
    }

    .header-img {
        width: 50%;
        margin: 0 auto;
        position: absolute;
        left: 0;
        top: 7%;
    }

    nav a {
        display: block;
        margin: 10px 0;
    }
 
    .second-container {
        flex-direction: column;
    }

    .about-title h1 {
        font-size: 1.5em;
    }


    .counter-container {
      display: flex;
      flex-direction: column;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    text-align: center; /* Center the text */
  }


    .about-text {
        font-size: 1em;
    }
    .about{
      padding-top: 400px;
    }
    .content-wrapper {
      flex-direction: column; /* Stack elements vertically */
      align-items: center; /* Center horizontally */
    }
  
    .about {
      width: 100%; /* Make the .about element take up the full width */
      max-width: 600px; /* Set a maximum width for better readability */
      margin-bottom: 30px; /* Add some spacing between .about and .image-container */
      text-align: center; /* Center the text */
    }
  
    .about-title h1 {
      font-size: 24px; /* Adjust font size for smaller screens */
      padding-bottom: 10px;
    }
  
    .about-text {
      font-size: 16px; /* Adjust font size for smaller screens */
    }
    .image-wrapper {

display: none; /* Center the .image-container horizontally */
    }

    .entrance {
      flex-direction: column; /* Stack elements vertically */
      align-items: center; /* Center horizontally */
      text-align: center; /* Center text */
    }
  
    .entrance-class {
      margin-bottom: 20px; /* Add some spacing between elements */
    }
  
    .entrance-class h1 {
      font-size: 0.6em; /* Adjust font size for smaller screens */
    }
  
    .entrance-text {
        font-size: 0.7em;
        max-width: 100%;
    }
    .fleet-images {
      display: flex;
      
      flex-wrap: wrap; /* Allow the images to wrap to the next line */
      justify-content: center; /* Center the images horizontally */
      
      
    }
    .fleet-images > div {
      width: 50%; /* Make each image take up 50% of the width <em>/
      max-width: 200px; /</em> Set a maximum width for better readability <em>/
      margin-bottom: 20px; /</em> Add some spacing between images */
      margin: 10px;
}
.fleetbox{
  flex-direction: column; /* Stack the fleetboxes vertically */
  align-items: center; /* Center the fleetboxes horizontally */
  
}

.box-container {
  flex-wrap: wrap; /* Allow child elements to wrap to the next line */
}

.challenges,
.strenght,
.individuality {
  flex: 0 0 calc(50% - 20px); /* Set the width to 50% minus some margin */
  margin: 10px; /* Adjust the margin as needed */
  padding: 10px; /* Adjust the padding as needed */
}
.additional-container {
  /* Make the container full-width */
  width: 100%;
}

.check-fleet, .check-contact {
  /* Make the elements full-width and stack them vertically */
  width: 100%;
  float: none;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.check-fleet-textbox, .check-contact-textbox {
  /* Reduce font size of headings and text */
  font-size: 14px;
  width: 100%;
  max-height: 100%;
  text-align: center;
}
.check-fleet-textbox h1, .check-contact-textbox h1{
  /* Reduce font size of headings and text */
  font-size: 17px;

}
.check-fleet-imagebox, .check-contact-imagebox {
  /* Make images responsive */
display:none;
}

.check-fleet-button {
  /* Adjust button styles if needed */
margin-bottom: 120px;

}
.check-fleet-button a, .check-contact-button a{
  /* Adjust button styles if needed */
margin-bottom: 120px;
font-size: 22px;
  color: #ff6600;
}
.our-fleet{
  padding-top: 70%;
  
}
nav a {
    
  text-decoration: none;
  margin-left: 15px; /* Space between links */
  padding: 8px 12px; /* Add padding to buttons */
  border-radius: 5px; /* Round the corners */
  font-size: 20px;
  font-style: bold;
  color: #000000;
  position: relative;
  top: 50px;
  transition: color 0.3s;

}

nav a:hover {
  color:rgb(255, 121, 25);

}
nav a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left:78%;
  width: 20%;
  height: 3px;
  background-color: #ff6600; /* Change this to your desired color */
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
nav a:hover:after {
  transform: scaleX(1);
}
.phone-icon::before {
  content: "\260E"; /* Telephone icon */
  color: #ff8310; /* Orange color for phone icon */
}

.mail-icon::before {
  content: "\2709"; /* Mail icon */
  color: #ff8310; /* Orange color for mail icon */
}
#map {
  /* Add this to adjust the width and height of the map box */
  width:200px;
  height: 536px;
  max-width: 100%;
  
  overflow: hidden;
}
.contact-data-wrapper {
  flex-direction: column;
  padding: 0 15px; /* Add some padding to the parent container */
  box-sizing: border-box; /* Include padding and border in the element's total width */

  text-align: left;
}

.tomek,
.michal,
.pawel {

  
  max-width: 100%;
  margin-bottom: 20px; /* Add some spacing between the sections */
  box-sizing: border-box; /* Include padding and border in the element's total width */
  
}
.body, html{
  overflow-x: hidden;
}
.image-container, .image-wrapper, .global-container{
  display: none;
}
.vertical-line{
  display: none;
}
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .container {
      max-width: 960px;
  }

  nav a {
      font-size: 18px;
  }

  .entrance-class {
      font-size: 3.5em;
  }

  .about, .global-container {
      max-width: 45%;
  }
  .vertical-line{
    display: none;
  }
  .global-container{
    margin-left: 20%;
    padding-top: 34px;
  }
  .check-contact{
    padding-top: 80px;
  }
  .check-fleet-textbox{
    font-size: 1.8vh;
  }
  .check-fleet-textbox h1{
    font-size: 2.4vh;
  }
  .check-contact-textbox{
    font-size: 1.8vh;
  }
  .check-contact-textbox h1{
    font-size: 2.4vh;
  }
  .header-img {
    margin: 0 auto;
    position: relative;
    left: 8%;
    
}
.fleet-images{
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
}
.our-fleet{
  padding-top: 200px;
}

}