img {
  max-width: 100%; /* This ensures that the image is never wider than its container */
  height: auto; /* This ensures that the image's height scales proportionally to its width */
}

@media only screen and (max-width: 600px) { /* Adjust the max-width as needed */
  img {
    max-width: 100%; /* On mobile devices, the image will take up 100% width of the screen */
    padding: 10px; /*adding padding to images*/
  }
}

a:hover{
    text-decoration: none;
}

.login-button {
  width: 200px;
  background-color: #0a3c5f;
  border: none;  /* No border */
  border-radius: 50px; /* Rounded edges */
  padding: 10px 20px; /* Size of the button */
  color: white; /* Text color */
  cursor: pointer; /* Change cursor to signify button */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.login-button:hover {
  background-color: #e4790f; 
  color: black; /* Text color */
}

.div-color {
  min-height: 100px; /* ou la hauteur souhaitée */
  width: 80%; /* pleine largeur */
  margin: 20px 0; /* un peu de marge entre les divs */
  padding:30px;
  color: black; /* texte en noir pour la lecture */
  /*display: flex;*/
  /*align-items: center;  centrer le texte verticalement */
 /* justify-content: center;  centrer le texte horizontalement */
  /*font-size: 20px;  taille du texte */
  /*font-weight: bold;  texte en gras */
  border-radius: 8px; /* bords légèrement arrondis */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* ombre légère */
}
.gradient1 {
  background: linear-gradient(to bottom, #0a3c5f, #005374, #006b87, #188497, #359da4);
}

.gradient2 {
  background: linear-gradient(to bottom, #359da4, #59acaa, #78bbb2, #95cabb, #b0d9c7);
}

.gradient3 {
  background: linear-gradient(to bottom, #b0d9c7, #b3dccf, #b8dfd7, #bee1dd, #c4e4e3);
}

.gradient4 {
  background: linear-gradient(to bottom, #c4e4e3, #bee9d9, #c6ebc7, #ddeab2, #fce4a2);
}

.gradient5 {
  background: linear-gradient(to bottom, #fce4a2, #fde08d, #fddb77, #fdd760, #fdd246);
}

.gradient6 {
  background: linear-gradient(to bottom, #fdd246, #fdcc3e, #fec635, #febf2c, #ffb923);
}

.gradientnext {
  background: linear-gradient(to bottom, #ffb923, #f9a91b, #f39915, #ec8911, #e4790f);
}

.gradienthere {
  background: linear-gradient(to top, #ffb923, #f9a91b, #f39915, #ec8911, #e4790f);
}

.gradientoffice {
  background: linear-gradient(to bottom, #0a3c5f, #005374, #006b87, #188497, #359da4);
}


  .column {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px;
    color: black;
    width: 100%; /* Full width on smaller screens */
    margin-bottom: 30px; /* Margin bottom for smaller screens */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .column:last-child {
    margin-bottom: 0; /* No margin bottom for the last item */
  }

  /* Same height columns for larger screens */
  @media (min-width: 768px) {
    .container {
      align-items: stretch; /* Stretch align-items for same height columns */
    }
    .column {
      width: calc(50% - 30px); /* Adjust width calculation to account for the gap */
      margin-bottom: 0; /* No margin bottom for larger screens */
      flex: 1; /* Flex grow to fill the container */
    }
      

  }



/* Style for all select elements */
  select {
    width: 200px; /* Specify the width you want for all dropdowns */
    /*height: 40px;  Specify the width you want for all dropdowns */
    border-radius: 5px; /* Rounded borders */
    background-color: #0a3c5f; /* Light cream background */
    padding: 10px; /* Some padding inside the dropdown */
    border: 1px solid #c4e4e3; /* Slightly darker border color for contrast */
    color: white; /* Text color */
    margin: 5px; /* Margin around each dropdown */
  }

  /* Change the background color slightly when hovered for visual feedback */
  select:hover {
    background-color: #359da4;
}
input[type="text"],input[type="tel"],input[type="date"],input[type="number"] {
  width: 250px;  /*Set the same width for all inputs 
  /* border-radius: 8px;  Slightly rounded borders 
  background-color: #d2e4c4;  Very light green background 
  padding: 10px;  Padding inside the inputs 
  border: 2px dashed #000000;  Dotted black border 
  margin: 5px;  Margin around inputs for spacing 
  box-sizing: border-box; Include padding and border in the input's total width and height */
	background-color: #f0f0f0; /* Gris clair pour le fond */
  border: 1px dotted black; /* Bordures en pointillés noirs */
  padding: 10px; /* Un peu de padding pour le rendre plus grand */
  color: black; /* Couleur du texte en noir */
	border-radius: 5px;
}

/*input[type="date"] {
	height:30px;
}*/

/* Style for placeholder text */
input[type="text"],input[type="tel"],input[type="date"],input[type="number"]::placeholder {
  color: black; /* Slightly darker shade of olive for the placeholder text */
  opacity: 1; /* Full opacity for placeholder */
}

/* Adjusting the style on focus to enhance the border and background */
input[type="text"],input[type="tel"],input[type="date"],input[type="number"]:focus {
  /*outline: none;  Removes the default focus outline 
  background-color: #e9f2db;  Lightens the background color 
  border: 2px dashed #556b2f;  Darker shade for the border on focus */
	outline: none; /* Supprime l'outline par défaut lors du focus */
  border: 1px dotted #555; /* Darker dotted border on focus pour une meilleure visibilité */
}


.container-acces {
    margin-bottom: 20px; /* space between the two containers */
  }
  
  .row-acces {
    display: flex; /* use flexbox to create the row */
    text-align: center; /* centers text horizontally */
    justify-content: space-between; /* distributes space evenly between columns */
  }
  
  .column-acces {
    flex: 1; /* each column takes equal width */
    padding: 10px;  /* spacing inside each column */
    /* border: 1px solid #ccc; border for each column */
    margin: 0 5px; /* space between columns; adjust as needed */
    box-sizing: border-box; /* includes padding and border in the element's total width and height */
    border-radius: 8px; /* Slightly rounded borders */
  	border: 2px dashed #000000; /* Dotted black border */
  }
  
  @media (max-width: 768px) {
    .row-acces {
      flex-wrap: wrap; /* on small screens, allow columns to wrap */
    }
    .column-acces {
      flex-basis: 30%; /* full width on small screens */
      margin-bottom: 10px; /* space between stacked columns on wrap */
    }
  }

input[type="radio"],input[type="checkbox"]  {
  /* Use 'transform' to scale the size of the button */
  transform: scale(2); /* Modify the scale factor as needed */
  margin: 10px; /* Provides space around the radio button */
  accent-color: #0a3c5f; /* Dark Blue */
}

input[type="file"] {
	width: 300px;
    padding: 5px;
    color: black;
    /*text-align: center;*/
    display: inline-block;
    outline: none;
    cursor: pointer;
}
/* CSS pour un champ de formulaire personnalisé */
.custom-input {
  background-color: #f0f0f0; /* Gris clair pour le fond */
  border: 1px dotted black; /* Bordures en pointillés noirs */
  padding: 10px; /* Un peu de padding pour le rendre plus grand */
  color: black; /* Couleur du texte en noir */
	border-radius: 5px;
}

/* Style supplémentaire pour améliorer l'apparence lors de la saisie de texte */
.custom-input:focus {
  outline: none; /* Supprime l'outline par défaut lors du focus */
  border: 1px dotted #555; /* Darker dotted border on focus pour une meilleure visibilité */
}




#menu {
    column-gap: 15px;
    column-count: 4;
    border: black;
}

    
@media (max-width: 768px) {
        #menu {
                column-count: 1; /* Display one column on mobile */
        }
    }

.menupin {
    display: inline-block;
    width: 100%;
    padding: 5px;
}