@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');

body{
/*     background-image: url("img/home3.jpg"); */
    background-color: #F5F5F5; /*light grey white background*/
}

footer{
  font-family: arial;
  font-size: 13px;
  color:black;
}
.button{
    background-color: navy;
    border: none;
    color:white;
    padding:15px 32 px;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    transition-duration: 0.5s;
    cursor: pointer;    
}

.button1{
    background-color: darkcyan;
    color:black;
    border:2px solid grey;
}

.button1:hover{
    background-color:violet;
    color:white;
}

#myJob{
    margin: 2px;
    width:30rem;
    border-radius: 10px;
    background-color: rgb(153, 200, 238);
    text-align: left;
    color:navy;
}

#ville{
    color:black;
}

#googleMap{
    width:100%;
    height:400px;
}
.container{
    background-color: #F5F5F5; /*light grey white background*/
    color: black;
    font-family:  'Barlow', sans-serif;
    font-weight: 400;
    max-width: 800px;
    margin:auto;
    padding: 10px;
}

.menu{
    flex: 1;                    /* Allows the menu to expand if needed */
    text-align: center;
    font-size: 15px;
    color: black;
    font-family:  'Barlow', sans-serif;
    font-weight: 400;
}

.banner{
    padding: 2px;
    text-align: left;
    background:transparent;
    color:yellow;
    font-size: 13px; 
}

.header{
    padding: 10px;
    text-align: center;
    background:transparent;
    color:white;
    font-size: 20px;   
}


.logo-container {
    flex: 0;                    /* Prevents the logo from stretching */
    text-align: left; /* Aligns the content inside to the left */
}

.responsive-logo {
    max-width: 100%;   /* Ensures the logo resizes proportionally */
    height: auto;      /* Maintains the aspect ratio */
    display: block;    /* Prevents inline image spacing */
/*     margin: 0 auto;    /* Centers the logo (optional) */ */
}

.responsive {
    max-width: 100%; /* Fits the image within the container's width */
    max-height: 100vh; /* Ensures the image height fits within the viewport */
    width: auto; /* Maintains aspect ratio */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below the image */
    margin: 0 auto; /* Centers the image horizontally */
}

.image-text-container {
    display: flex;
    align-items: flex-start; /* Aligns items at the bottom */
    gap: 20px; /* Adds space between image and text */
}

.image {
    width: 100px; /* Adjust the width as needed */
    height: auto; /* Maintains the aspect ratio */
    margin-right: 10px; /* Adds space between the image and text */
}