@charset "utf-8";
/* CSS Document */
<style>
	
	 	
		

        .contact-container {
            display: flex;
            justify-content: space-between;
            margin: 20px;
        }
        .contact-form {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 60%;
        }
        .contact-info {
            background-color: #f1f1f1;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 35%;
            margin-left: 20px;
        }
        .contact-info h3 {
            margin-bottom: 15px;
        }
        .contact-info p {
            margin: 5px 0;
        }
        .contact-form h2 {
            margin-bottom: 20px;
            color: #333;
        }
        .contact-form input, 
        .contact-form textarea {
            width: 95%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
			margin-right:5px
        }
        .contact-form button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .contact-form button:hover {
            background-color: #218838;
        }
		
		.bannercontact-content {
            position: relative; /* Pour le positionnement des éléments internes */
            z-index: 2; /* S'assurer que le texte est au-dessus de l'image de fond */
			padding: 0 10%; /* Ajout de padding horizontal pour les petits écrans */
        }
		
		/* Style du bouton Back to Top */
         #back-to-top {
            visibility: hidden; /* Masquer le bouton par défaut */
            position: fixed;
            bottom: 100px;
            right: 20px;
            background-color: #263485; /* Couleur de fond */
            color: #fbd935; /* Couleur de la flèche */
            border: none;
            border-radius: 50%; /* Rendre le bouton rond */
            width: 50px; /* Largeur du bouton */
            height: 50px; /* Hauteur du bouton */
            cursor: pointer;
            display: flex; /* Centrer le texte */
            align-items: center; /* Centrer verticalement */
            justify-content: center; /* Centrer horizontalement */
            font-size: 24px; /* Taille de la police */
        }


        .back-to-top:hover {
            background-color: #0056b3;
        }

		/* Responsive Styles */
        @media (max-width: 768px) {
            .contact-container {
                flex-direction: column;
                align-items: stretch;
            }
            .contact-form, .contact-info {
                width: 90%;
                margin-left: 0; /* Supprimer la marge à gauche sur les petits écrans */
				margin-bottom: 20px; /* Ajouter un espace en bas */
            }
        }

    </style>