diff --git a/index.html b/index.html
index 1cc48f8c..726888a0 100644
--- a/index.html
+++ b/index.html
@@ -893,6 +893,146 @@
.subscribe:hover {
background-color: #2980b9; }
+ .section-contact {
+ padding: 60px 0;
+ background-color: #f9f9f9;
+ margin-bottom: 10px;
+}
+
+.ctc {
+ text-align: center;
+ color: #333;
+ font-size: 36px;
+ margin-bottom: 5px;
+}
+
+.p {
+ text-align: center;
+ color: #666;
+ margin-bottom: 10px;
+}
+
+.flexi {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ flex-wrap: wrap;
+}
+
+/* Contact and Address Box */
+.contact, .cardi {
+ flex-basis: 48%;
+ margin-bottom: 0;
+}
+
+/* Contact Form */
+.contact {
+ background-color: #fff;
+ padding: 30px; /* Increased padding for better appearance */
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ max-width: 600px; /* Set max width for larger screens */
+ width: 100%; /* Full width within the flex container */
+ height: fit-content;
+ transition: transform 0.3s; /* Smooth transition for hover effect */
+}
+
+.contact:hover {
+ transform: scale(1.02); /* Slightly enlarge on hover */
+}
+
+/* Contact Form Contents */
+.contact-container {
+ display: flex;
+ flex-direction: column;
+}
+
+/* Form Fields */
+.contact-form label {
+ font-weight: bold;
+ margin-bottom: 5px;
+ color: #333;
+}
+
+.contact-form input,
+.contact-form textarea {
+ width: 100%;
+ padding: 12px; /* Increased padding for form fields */
+ margin-bottom: 15px; /* Reduced margin */
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 14px;
+}
+
+.contact-form button {
+ background-color: #A30F17;
+ justify-content: center;
+ color: white;
+ padding: 12px 15px; /* Increased padding */
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s; /* Smooth transition for hover */
+}
+
+.contact-form button:hover {
+ background-color: #811214;
+}
+
+/* Contact Card */
+.contact-card {
+ display: flex;
+ justify-content: center;
+ background-color: white;
+ padding: 10px; /* Adjusted to reduce height */
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ text-align: center; /* Center text inside the address box */
+ margin-left: 30%;
+ margin-top: 20px; /* Space above the card */
+ height: 310px;
+}
+
+/* Image Fader Section */
+.image-fader img {
+ max-width: 150px; /* Increased width */
+ margin: 0 10px; /* Increased spacing */
+ justify-content: center;
+ transition: opacity 0.5s ease-in-out;
+}
+
+/* Google Map Section */
+.map-container {
+ display: flex; /* Added to center */
+ justify-content: center; /* Center the map */
+ margin-top: 30px;
+ width: 100%;
+}
+
+.map-container iframe {
+ width: 100%;
+ height: 300px;
+ border-radius: 10px;
+ border: none;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+ .flexi {
+ flex-direction: column;
+ align-items: center; /* Center items */
+ margin-bottom: 20px;
+ }
+
+ .contact, .cardi {
+ flex-basis: 130%;
+ max-width: 90%; /* Set max-width for smaller screens */
+ margin-bottom: 30px;
+ }
+
+ .map-container iframe {
+ height: 100px;
+ }
@@ -2999,85 +3139,81 @@ Rate Us
-
-
-
-
-
+ 
+ 
+ 
- 
- 
- 
-