diff --git a/index.html b/index.html
index de235e65..7033c23a 100644
--- a/index.html
+++ b/index.html
@@ -898,6 +898,88 @@
.subscribe:hover {
background-color: #2980b9; }
+ /* Contact Us */
+ .section-contact {
+ color: black;
+ padding: 40px 20px;
+}
+
+.flexi {
+ display: flex;
+ justify-content: space-between; /* Ensure both containers are side by side */
+ flex-wrap: wrap;
+}
+
+.contact {
+ width: 52%; /* Adjust width for the contact form */
+}
+
+.cardi {
+ width: 35%; /* Adjust width for the contact card */
+ max-width: 350px; /* Limit max width */
+ margin-left: 20px; /* Add some space between the two sections */
+}
+
+.contact-container {
+ background-color: var(--secondary-color);
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.contact-card {
+ background-color: var(--secondary-color);
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ margin-top: 20px; /* Ensure there's space above the card */
+}
+
+.map-container {
+ display: flex;
+ justify-content: center;
+ align-items: center; /* Center map inside container */
+ width: 100%;
+ height: 300px; /* Fixed height for map */
+ margin-top: 20px; /* Space above map */
+}
+.contact-form input,
+ .contact-form textarea {
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 15px;
+ border: 1px solid #8f8d8d;
+ border-radius: 5px;
+ font-size: 14px;
+ }
+ .contact:hover {
+ transform: scale(1.02); /* Slightly enlarge on hover */
+ }
+
+ .cardi:hover {
+ transform: scale(1.02);
+ }
+
+
+iframe {
+ width: 100%;
+ height: 100%;
+ border: none; /* Remove border for a cleaner look */
+ border-radius: 10px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .flexi {
+ flex-direction: column; /* Stack elements on smaller screens */
+ align-items: center;
+ }
+ .contact, .cardi {
+ width: 90%; /* Ensure full width on smaller screens */
+ max-width: none; /* Remove max-width restriction */
+ }
+}
+
@@ -1099,6 +1181,89 @@
.nav{
justify-content: space-around;
}
+
+
+.section-contact {
+ color: black;
+ padding: 40px 20px;
+}
+
+.flexi {
+ display: flex;
+ justify-content: space-between; /* Ensure both containers are side by side */
+ flex-wrap: wrap;
+}
+
+.contact {
+ width: 52%; /* Adjust width for the contact form */
+}
+
+.cardi {
+ width: 35%; /* Adjust width for the contact card */
+ max-width: 350px; /* Limit max width */
+ margin-left: 20px; /* Add some space between the two sections */
+}
+
+.contact-container {
+ background-color: var(--secondary-color);
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.contact-card {
+ background-color: var(--secondary-color);
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ margin-top: 20px; /* Ensure there's space above the card */
+}
+
+.map-container {
+ display: flex;
+ justify-content: center;
+ align-items: center; /* Center map inside container */
+ width: 100%;
+ height: 300px; /* Fixed height for map */
+ margin-top: 20px; /* Space above map */
+}
+.contact-form input,
+ .contact-form textarea {
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 15px;
+ border: 1px solid #8f8d8d;
+ border-radius: 5px;
+ font-size: 14px;
+ }
+ .contact:hover {
+ transform: scale(1.02); /* Slightly enlarge on hover */
+ }
+
+ .cardi:hover {
+ transform: scale(1.02);
+ }
+
+
+iframe {
+ width: 100%;
+ height: 100%;
+ border: none; /* Remove border for a cleaner look */
+ border-radius: 10px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .flexi {
+ flex-direction: column; /* Stack elements on smaller screens */
+ align-items: center;
+ }
+ .contact, .cardi {
+ width: 90%; /* Ensure full width on smaller screens */
+ max-width: none; /* Remove max-width restriction */
+ }
+}
+
-
-
-
-
+
+