From 5f7979877399ca33d2546d4ddf5256a8c6c35cad Mon Sep 17 00:00:00 2001
From: BhavikaPachauri <pachauribhavika2000@gmail.com>
Date: Mon, 21 Oct 2024 00:30:00 +0530
Subject: [PATCH] <fix the issue #1452>

---
 index.html | 21 +++++----------
 styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index ff3f735a..ea5730b8 100644
--- a/index.html
+++ b/index.html
@@ -1923,7 +1923,7 @@ <h2 class="section__title" align-items="center" data-aos="slide-right">Contact U
             <div>
               <h1 class="section__title" style="height: 90px;">Contact Us</h1>
               <p>Feel Free to drop us a message with any inquiries or feedback.We're here to assist you!</p>
-              <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif">
+              <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif" width="100%">
             </div>
           </div>
           <div class="contact-form" data-aos="fade-in">
@@ -1933,20 +1933,11 @@ <h1>Contact Us</h1>
                 <i class="icon1 fa-solid fa-user"></i>
                 <input type="text" id="Name" placeholder="Name" style="padding-left: 6%;">
               </div>
-              <div style="position: relative;">
-                <i class="icon2 fa-solid fa-envelope"></i>
-                <input type="email" id="email" placeholder="Email" class="contact-us-email-fix" style="padding-left:6%; width: 50% !important;
-                padding-left: 6% !important;
-                padding-bottom: 10px !important;
-                margin: 20px !important;
-                margin-left: 30px !important;
-                outline: none !important;
-                border: none !important;
-                font-size: 15px !important;
-                background: none !important;
-                border-bottom: 1px solid var(--text-dark) !important;
-                color: var(--text-dark) !important;
-                font-family: 'Oxygen', sans-serif !important; border-radius: 20px;" required>
+              
+              <div style="position: relative;"> 
+                <i class="icon2 fa-solid fa-envelope"></i> 
+                <input type="email" id="Email" placeholder="Email" class="contact-us-email-fix" style="padding-left: 6%;" 
+                required> 
               </div>
               <div style="position: relative;">
                 <i class="icon3 fa-solid fa-message"></i>
diff --git a/styles.css b/styles.css
index 3b50b603..9901d85e 100644
--- a/styles.css
+++ b/styles.css
@@ -1681,6 +1681,23 @@ body.dark-theme .items {
 .contact-form #Name {
   margin-top: 100px;
 }
+.contact-form #Email {
+  margin-top: 100px;
+}
+.contact-form #Email {
+                width: 50% !important;
+                padding-left: 10px;
+                padding-bottom: 10px;
+                margin: 20px;
+                margin-left: 30px;
+                outline: none;
+                border: none;
+                font-size: 15px;
+                background: none;
+                border-bottom: 2px solid var(--extra-light) !important;
+                color: var(--extra-light);
+                font-family: "Oxygen", sans-serif;
+}
 
 .contact-form h4 {
   color: var(--extra-light);
@@ -1779,6 +1796,9 @@ body.dark-theme .items {
   .contact-form input {
     width: 75%;
   }
+  .contact-form #Email {
+    width: 75% !important;
+  }
 
   .contact-form textarea {
     width: 75%;
@@ -1809,7 +1829,7 @@ body.dark-theme .items {
 
   .contact img {
     height: 300px;
-    width: 300px;
+    width: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -1828,6 +1848,8 @@ body.dark-theme .items {
     left: 14.8%;
   }
 }
+.contact-form #Email {
+  width: 50% !important;}
 
 .contact-form input,
 .contact-form textarea {
@@ -1852,6 +1874,9 @@ body.dark-theme .items {
 }
 
 @media (max-width: 920px) {
+  .contact-form #Email {
+    width: 75% !important;
+  }
   .contact-form input,
   .contact-form textarea {
     width: 75%;
@@ -1869,6 +1894,9 @@ body.dark-theme .items {
 }
 
 @media (max-width: 700px) {
+  .contact-form #Email {
+    width: 75% ;
+  }
   .contact-form input,
   .contact-form textarea {
     width: 75%;
@@ -1884,7 +1912,53 @@ body.dark-theme .items {
     left: 14.8%;
   }
 }
-
+@media (max-width: 440px) {
+  .contact-form #Email {
+    width: 75% ;}
+  .contact-form input,
+  .contact-form textarea {
+    width: 75%;
+    color: var(--text-dark);
+  }
+  .icon1 {
+    left: 11%;
+  }
+  .icon2 {
+    left: 11%;
+  }
+  .icon3 {
+    left: 11%;
+  }
+}
+@media (max-width: 342px) {
+  .contact-form #btn-style{
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+@media (max-width: 325px) {
+  .contact-form #btn-style{
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .contact-form #Email {
+    width: 75% !important;
+  }
+  .contact-form input,
+  .contact-form textarea {
+    width: 75%;
+    color: var(--text-dark);
+  }
+  .icon1 {
+    left: 11%;
+  }
+  .icon2 {
+    left: 11%;
+  }
+  .icon3 {
+    left: 11%;
+  }
+}
 /* Custom scrollbar for WebKit browsers */
 /* body::-webkit-scrollbar {
   width: 8px;