main {
    width: 77%;
    margin: auto;
	background-color: rgba(244, 244, 244);
	box-shadow: 0 10px 30px rgba(0,0,0,0.24);
	border-radius: 7px;
}
	.contact-section{text-align: center; padding: 1.7rem 1rem;}
		.container {border-radius: 10px; font-size: clamp(14px, 1.3vw, 24px);}
			.contact-wrapper {display: flex; flex-wrap: wrap; gap: 40px;}
				.contact-info{flex: 2; padding:0 1.7rem;}
					.contact-info h3 {color: #007bff;}
					.contact-info p {text-align: left;}
					.socials {
						display: flex;
						gap: 1vw;
						justify-content: center;
						align-items: center;
						margin: 1.7rem 0;
					}
					.socials img {width: clamp(24px, 4vw, 48px); transition: transform 0.3s ease, filter 0.3s ease; cursor: pointer;}
					.socials img:hover {transform: scale(1.2);	filter: brightness(1.7);}

				.contact-form {flex:3; margin-top:1.7rem;} 
					.form-group {margin-bottom: 0.7rem;}
						input, textarea {
							width: 100%;
							padding: 0.7rem;
							font-size: clamp(10px, 1vw, 17px);
							font-family:'Cause', Arial, sans-serif;
							border: 1px solid #ddd;
							border-radius: 5px;
							outline: none;
							transition: border 0.3s;
						}
						input:focus, textarea:focus {
							border-color: #007bff;
						}
						input::placeholder, textarea::placeholder {font-family:'Cause', Arial, sans-serif; font-size: clamp(10px, 1vw, 17px);}
						.submit-btn {
							width: 100%;
							padding: 0.7rem;
							background-color: #007bff;
							color: white;
							border: none;
							border-radius: 5px;
							cursor: pointer;
							font-size: clamp(14px, 1.3vw, 24px);
							transition: background 0.3s;
						}
						.submit-btn:hover {
							background-color: #0056b3;
						}



/*----------------------------------------------------*/
@media (max-width: 600px) {
    .contact-wrapper {
        flex-direction: column;
    }
}