From fea9b70383fc9e8825df9ecb84c54eb1cac7d3a5 Mon Sep 17 00:00:00 2001
From: kesharwaniyanshi <kesharwaniyanshi@gmail.com>
Date: Fri, 24 May 2024 15:22:57 +0530
Subject: [PATCH 1/2] Added more restrictions to Phone number and Calendar
 feature

---
 index.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ad1dff59..c0810be9 100644
--- a/index.html
+++ b/index.html
@@ -339,12 +339,22 @@ <h2>Make an Appointment</h2>
       <input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
     </div>
     <div class="col-md-4 form-group mt-3 mt-md-0">
-      <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone">
+      <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone" maxlength="10" minlength="10" pattern="[0-9]*">
     </div>
   </div>
   <div class="row">
     <div class="col-md-4 form-group mt-3">
-      <input type="datetime" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
+      <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
+
+      <script>   //To set value of minimum date in calender 
+          var currentDate = new Date();
+          var year = currentDate.getFullYear();
+          var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+          var day = currentDate.getDate().toString().padStart(2, '0');
+          var formattedDate = `${year}-${month}-${day}`;
+  
+          document.getElementById('date').setAttribute('min', formattedDate);
+      </script>
     </div>
     <div class="col-md-4 form-group mt-3">
       <select name="age" id="age" class="form-select">

From 8027c44d202735e538b806d9cd77ce7cc6e32c42 Mon Sep 17 00:00:00 2001
From: kesharwaniyanshi <kesharwaniyanshi@gmail.com>
Date: Sat, 25 May 2024 13:22:17 +0530
Subject: [PATCH 2/2] Added country codes option

---
 index.html | 500 +++++++++++++++++++++++++++++------------------------
 style.css  |   4 +-
 2 files changed, 274 insertions(+), 230 deletions(-)

diff --git a/index.html b/index.html
index c0810be9..437df574 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,11 @@
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
- 
+
   <link rel="stylesheet" type="text/css" href="./style.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
-  
+
   <title>RapiDoc</title>
   <link
     href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
@@ -26,57 +26,72 @@
   <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
   <link href="style.css" rel="stylesheet">
   <link href="patient-portal.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
+    <style>
+      /* Ensure the input takes up full width */
+        .iti--allow-dropdown input {
+            padding-left: 50px;
+            background-color: black; /*Adjust padding to prevent overlap*/
+        }
+        .iti.iti--allow-dropdown{
+          margin-left: 250px;
+        }
+       
+
+    </style>
 </head>
 
 <body>
-      <!-- ############# Header ############# -->
-  
-      <header class="header_container">
-        <div class="img">
-        <img id="rd-logo"  style="width: 90px; height: auto;" src="/images/rd.png"> 
-      </div>
-      <div class="text" style="margin-left: -33rem;">
-  
-        <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
-      </div>
-      <nav class="nav_menu">
-
-        <ul class="nav_link">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="Html-Files/news.html">News</a></li>
-          <li><a href="#services">Services</a></li>
-          <li><a href="#patient-portal">patient Portal</a></li>
-          <li><a href="#doctors">Doctor</a></li>
-          <li><a href="Html-Files/contact.html">Contact us</a></li>
-        </ul>
-      </nav>
-      </div>
-    </header>
+  <!-- ############# Header ############# -->
+
+  <header class="header_container">
+    <div class="img">
+      <img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
+    </div>
+    <div class="text" style="margin-left: -33rem;">
+
+      <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
+    </div>
+    <nav class="nav_menu">
+
+      <ul class="nav_link">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="Html-Files/news.html">News</a></li>
+        <li><a href="#services">Services</a></li>
+        <li><a href="#patient-portal">patient Portal</a></li>
+        <li><a href="#doctors">Doctor</a></li>
+        <li><a href="Html-Files/contact.html">Contact us</a></li>
+      </ul>
+    </nav>
+    </div>
+  </header>
 
 
   <div class="container">
     <div class="content">
       <h1 style="font-size: 65px;">
-        Welcome to <span style="color: #55a5ea;">RapiDoc!</span> <br /> Your one-stop digital <br> healthcare destination
+        Welcome to <span style="color: #55a5ea;">RapiDoc!</span> <br /> Your one-stop digital <br> healthcare
+        destination
       </h1>
       <h4>
         <!-- <a href="#about" class="btn-get-started scrollto">Download App</a> -->
       </h4>
-    </div>    
+    </div>
     <img style="position: relative; top: -60px; right: -10rem;" class="sec-img" src="images/rd.png" alt="" />
   </div>
   <br><br><br><br><br>
   <!-- End Home -->
   <main id="main">
 
-   
-   
+
+
     <!-- ############ Featured Services Section ############ -->
-    
-    
+
+
     <section id="featured-services" class="featured-services">
       <div class="container" data-aos="fade-up">
 
@@ -121,10 +136,10 @@ <h4 class="title"><a href="">Medicine use</a></h4>
       </div>
     </section><!-- End Featured Services Section -->
 
-   
+
     <!-- ################### About Section ################### -->
-   
-   
+
+
     <section id="about" class="about">
       <div class="container" data-aos="fade-up">
         <div class="section-title">
@@ -139,7 +154,7 @@ <h2>About Us</h2>
      align-items-stretch position-relative">
             <!-- <a href="https://youtu.be/ImQqQ9_s38k" class="glightbox play-btn mb-4"></a> -->
           </div>
- <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
+          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
      justify-content-center py-5 px-lg-5">
 
             <div class="icon-box">
@@ -147,7 +162,7 @@ <h2>About Us</h2>
               <h4 class="title"><a href="">HEALTH CHECKUPS</a></h4>
               <p class="description">Bootcamps, personalised check-ups, newsletters, it’s all here.</p>
             </div>
-                   
+
             <div class="icon-box">
               <div class="icon"><i class="bx bx-health"></i></div>
               <h4 class="title"><a href="">EMERGENCY WARDS</a></h4>
@@ -168,10 +183,10 @@ <h4 class="title"><a href="">SERVICES</a></h4>
       </div>
     </section><!-- End About Section -->
 
-   
+
     <!-- ################## Counts Section ################## -->
-   
-   
+
+
     <section id="counts" class="counts">
       <div class="container" data-aos="fade-up">
 
@@ -222,10 +237,10 @@ <h4 class="title"><a href="">SERVICES</a></h4>
       </div>
     </section><!-- End Counts Section -->
 
-   
+
     <!-- #################### Services Section #################### -->
-   
-   
+
+
     <section id="services" class="services">
       <div class="container">
 
@@ -290,38 +305,38 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
     </section><!-- End Services Section -->
 
     <!-- Add Patient Portal Section -->
-  <section id="patient-portal" class="patient-portal">
-    <div class="container">
+    <section id="patient-portal" class="patient-portal">
+      <div class="container">
 
-      <div class="section-title">
-        <h1>Patient Portal</h1>
-        <p>Access your medical records, lab results, and prescription history securely.</p>
-      </div>
+        <div class="section-title">
+          <h1>Patient Portal</h1>
+          <p>Access your medical records, lab results, and prescription history securely.</p>
+        </div>
 
-      <!-- Add Login Form for Patient Portal -->
-      <div class="login-form">
-        <form action="login.php" method="post">
-          <div class="form-group">
-            <input type="email" class="form-control2" name="email" placeholder="Your Email" required>
-          </div>
-          <div class="form-group">
-            <input type="password" class="form-control2" name="password" placeholder="Your Password" required>
-          </div>
-          <div class="text-center"><button type="submit">Login</button></div>
-        </form>
-      </div>
+        <!-- Add Login Form for Patient Portal -->
+        <div class="login-form">
+          <form action="login.php" method="post">
+            <div class="form-group">
+              <input type="email" class="form-control2" name="email" placeholder="Your Email" required>
+            </div>
+            <div class="form-group">
+              <input type="password" class="form-control2" name="password" placeholder="Your Password" required>
+            </div>
+            <div class="text-center"><button type="submit">Login</button></div>
+          </form>
+        </div>
+
+        <!-- Add Forgot Password Link -->
+        <div class="forgot-password">
+          <a href="forgot-password.php">Forgot Your Password?</a>
+        </div>
 
-      <!-- Add Forgot Password Link -->
-      <div class="forgot-password">
-        <a href="forgot-password.php">Forgot Your Password?</a>
       </div>
+    </section><!-- End Patient Portal Section -->
 
-    </div>
-  </section><!-- End Patient Portal Section -->
-   
     <!-- ############# Appointment Section ############# -->
-   
-   
+
+
     <section id="appointment" class="appointment section-bg">
       <div class="container">
 
@@ -331,103 +346,104 @@ <h2>Make an Appointment</h2>
         </div>
         <div class="layout">
           <form accept="" role="form" class="php-email-form">
-  <div class="row">
-    <div class="col-md-4 form-group">
-      <input type="text" name="name" class="form-control" id="name" placeholder="Your Name">
-    </div>
-    <div class="col-md-4 form-group mt-3 mt-md-0">
-      <input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
-    </div>
-    <div class="col-md-4 form-group mt-3 mt-md-0">
-      <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone" maxlength="10" minlength="10" pattern="[0-9]*">
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-4 form-group mt-3">
-      <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
-
-      <script>   //To set value of minimum date in calender 
-          var currentDate = new Date();
-          var year = currentDate.getFullYear();
-          var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
-          var day = currentDate.getDate().toString().padStart(2, '0');
-          var formattedDate = `${year}-${month}-${day}`;
-  
-          document.getElementById('date').setAttribute('min', formattedDate);
-      </script>
-    </div>
-    <div class="col-md-4 form-group mt-3">
-      <select name="age" id="age" class="form-select">
-        <option value="">Select Age</option>
-        <option value="Department 1">18 or below</option>
-        <option value="Department 2">18 to 55</option>
-        <option value="Department 3">55 above</option>
-      </select>
-    </div>
-    <div class="col-md-4 form-group mt-3">
-      <select name="doctor" id="doctor" class="form-select">
-        <option value="">Your Location</option>
-        <option value="Doctor 1">Mumbai</option>
-        <option value="Doctor 2">Delhi</option>
-        <option value="Doctor 3">Chennai</option>
-        <!-- Add more locations as needed -->
-      </select>
-    </div>
-  </div>
+            <div class="row">
+              <div class="col-md-4 form-group">
+                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name">
+              </div>
+              <div class="col-md-4 form-group mt-3 mt-md-0">
+                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
+              </div>
+              <div class="col-md-4 form-group mt-3 mt-md-0">
+                <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone" maxlength="10"
+                  minlength="10" pattern="[0-9]*" style="width: 100%;">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 form-group mt-3">
+                <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
+
+                <script>   //To set value of minimum date in calender 
+                  var currentDate = new Date();
+                  var year = currentDate.getFullYear();
+                  var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+                  var day = currentDate.getDate().toString().padStart(2, '0');
+                  var formattedDate = `${year}-${month}-${day}`;
+
+                  document.getElementById('date').setAttribute('min', formattedDate);
+                </script>
+              </div>
+              <div class="col-md-4 form-group mt-3">
+                <select name="age" id="age" class="form-select">
+                  <option value="">Select Age</option>
+                  <option value="Department 1">18 or below</option>
+                  <option value="Department 2">18 to 55</option>
+                  <option value="Department 3">55 above</option>
+                </select>
+              </div>
+              <div class="col-md-4 form-group mt-3">
+                <select name="doctor" id="doctor" class="form-select">
+                  <option value="">Your Location</option>
+                  <option value="Doctor 1">Mumbai</option>
+                  <option value="Doctor 2">Delhi</option>
+                  <option value="Doctor 3">Chennai</option>
+                  <!-- Add more locations as needed -->
+                </select>
+              </div>
+            </div>
 
-  <!-- Time Slot Section -->
-  <div class="row">
-    <div class="col-md-12 form-group mt-3">
-     
-      <select name="time-slot" id="time-slot" class="form-select">
-        <option value="">Select Time Slot</option>
-        <!-- Populate with available time slots -->
-        <option value="9:00 AM">9:00 AM</option>
-        <option value="11:00 AM">11:00 AM</option>
-        <option value="2:00 PM">2:00 PM</option>
-        <!-- Add more time slots as needed -->
-      </select>
-    </div>
-  </div>
+            <!-- Time Slot Section -->
+            <div class="row">
+              <div class="col-md-12 form-group mt-3">
+
+                <select name="time-slot" id="time-slot" class="form-select">
+                  <option value="">Select Time Slot</option>
+                  <!-- Populate with available time slots -->
+                  <option value="9:00 AM">9:00 AM</option>
+                  <option value="11:00 AM">11:00 AM</option>
+                  <option value="2:00 PM">2:00 PM</option>
+                  <!-- Add more time slots as needed -->
+                </select>
+              </div>
+            </div>
 
-  <!-- Hospital Selection Section -->
-  <div class="row">
-    <div class="col-md-12 form-group mt-3">
-     
-      <select name="hospital" id="hospital" class="form-select">
-        <option value="">Select Hospital</option>
-        <!-- Populate with available hospitals -->
-        <option value="Hospital 1">Hospital 1</option>
-        <option value="Hospital 2">Hospital 2</option>
-        <option value="Hospital 3">Hospital 3</option>
-        <!-- Add more hospitals as needed -->
-      </select>
-    </div>
-  </div>
+            <!-- Hospital Selection Section -->
+            <div class="row">
+              <div class="col-md-12 form-group mt-3">
+
+                <select name="hospital" id="hospital" class="form-select">
+                  <option value="">Select Hospital</option>
+                  <!-- Populate with available hospitals -->
+                  <option value="Hospital 1">Hospital 1</option>
+                  <option value="Hospital 2">Hospital 2</option>
+                  <option value="Hospital 3">Hospital 3</option>
+                  <!-- Add more hospitals as needed -->
+                </select>
+              </div>
+            </div>
 
-  <!-- OPD Section -->
-  <div class="row">
-    <div class="col-md-12 form-group mt-3">
-      
-      <select name="opd-section" id="opd-section" class="form-select">
-        <option value="">Select OPD Section</option>
-        <!-- Populate with available OPD sections -->
-        <option value="ENT">ENT</option>
-        <option value="Gynecologist">Gynecologist</option>
-        <!-- Add more OPD sections as needed -->
-      </select>
-    </div>
-  </div>
+            <!-- OPD Section -->
+            <div class="row">
+              <div class="col-md-12 form-group mt-3">
+
+                <select name="opd-section" id="opd-section" class="form-select">
+                  <option value="">Select OPD Section</option>
+                  <!-- Populate with available OPD sections -->
+                  <option value="ENT">ENT</option>
+                  <option value="Gynecologist">Gynecologist</option>
+                  <!-- Add more OPD sections as needed -->
+                </select>
+              </div>
+            </div>
 
-  <div class="form-group mt-3">
-    <textarea class="form-control" name="message" rows="5" placeholder="Message (Optional)"></textarea>
-  </div>
-  <div class="text-center">
-    <a href="successful_appointment.html" style="text-decoration: none;">
-      <button type="submit">Make an Appointment</button>
-    </a>
-  </div>
-</form>
+            <div class="form-group mt-3">
+              <textarea class="form-control" name="message" rows="5" placeholder="Message (Optional)"></textarea>
+            </div>
+            <div class="text-center">
+              <a href="successful_appointment.html" style="text-decoration: none;">
+                <button type="submit">Make an Appointment</button>
+              </a>
+            </div>
+          </form>
 
         </div>
 
@@ -437,8 +453,8 @@ <h2>Make an Appointment</h2>
 
 
     <!-- ################# Doctors Section ################# -->
-  
-  
+
+
     <section id="doctors" class="doctors">
       <div class="container">
 
@@ -451,7 +467,8 @@ <h2>Doctors</h2>
 
           <div class="col-lg-6">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>Dermatologist</h4>
                 <br>
@@ -473,7 +490,8 @@ <h4>Gynecologist</h4>
 
           <div class="col-lg-6 mt-4">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>Cardiologist</h4>
                 <br>
@@ -484,7 +502,8 @@ <h4>Cardiologist</h4>
 
           <div class="col-lg-6 mt-4">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>ENT</h4>
                 <br>
@@ -494,7 +513,8 @@ <h4>ENT</h4>
           </div>
           <div class="col-lg-6 mt-4">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/Image(13).png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/Image(13).png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>Pediatrician</h4>
                 <br>
@@ -507,10 +527,10 @@ <h4>Pediatrician</h4>
     </section><!-- End Doctors Section -->
 
 
-     <!-- ################# Contact Section ################# -->
-    
-    
-     <section id="contact" class="contact">
+    <!-- ################# Contact Section ################# -->
+
+
+    <section id="contact" class="contact">
       <div class="container">
 
         <div class="section-title">
@@ -554,7 +574,8 @@ <h2>Contact</h2>
               <div class="address">
                 <i class="bi bi-geo-alt"></i>
                 <h4>Location:</h4>
-                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW, Delhi</a></p>
+                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
+                    Delhi</a></p>
               </div>
 
               <div class="email">
@@ -599,65 +620,65 @@ <h4>Call:</h4>
 
 
     <!-- Feedback System-->
-  <section id="feedback" class="feed">
-    <div class="feedback">
-      <h1>Give Us Your Valuable Feedback.</h1>
-      <p>Your feedback is very important for Rapidoc.</p>
-      <div class="emoji">
+    <section id="feedback" class="feed">
+      <div class="feedback">
+        <h1>Give Us Your Valuable Feedback.</h1>
+        <p>Your feedback is very important for Rapidoc.</p>
+        <div class="emoji">
           <button class="btn normal">&#128578;</button>
           <button class="btn normal">&#128515;</button>
           <button class="btn normal">&#128519;</button>
           <button class="btn normal">&#128531;</button>
           <button class="btn normal">&#128532;</button>
           <button class="btn normal">&#128545;</button>
-      </div>
-      <p class="ques">What you want to say?</p>
-      <textarea id="textarea" cols="20" rows="5"></textarea>
-      <p class="ques">Are you satisfied with rapidoc?</p>
-      <div class="radiobtn">
+        </div>
+        <p class="ques">What you want to say?</p>
+        <textarea id="textarea" cols="20" rows="5"></textarea>
+        <p class="ques">Are you satisfied with rapidoc?</p>
+        <div class="radiobtn">
           <div class="one">
-            <input class="input"  type="radio" name="one" id="Yes" />
+            <input class="input" type="radio" name="one" id="Yes" />
             <label class="label" for="Yes">Yes</label>
           </div>
           <div class="one">
-            <input class="input"  type="radio" name="one" id="No" />
+            <input class="input" type="radio" name="one" id="No" />
             <label class="label" for="No">No</label>
           </div>
+        </div>
       </div>
-    </div>
-    <div class="info">
-      <div class="center">
+      <div class="info">
+        <div class="center">
           <button class="btn button">Submit</button>
+        </div>
+
       </div>
-      
-    </div>
-  </section>
+    </section>
 
 
   </main><!-- End #main -->
 
- 
+
   <!-- ############### Footer ############### -->
 
 
-          <div class="col-lg-3 col-md-6">
-            <div class="footer-info">
-              <h3>RapiDoc</h3>
-              <p>
-                Address<br>
-                Delhi, India<br><br>
-                <strong>Phone:</strong> <i class="bi bi-phone"></i><a href="tel:+91 1234567890">+91 1234567890</a><br>
-                <strong>Email:</strong> <a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a>
-                <br>
-              </p>
-              <div class="social-links mt-3">
-                <a href="#" class="facebook"><i class="fa-brands fa-facebook-f"></i></a>
-                <a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
-                <a href="#" class="twitter"><i class="fa-brands fa-x-twitter"></i></a>
-                <a href="#" class="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
-              </div>
-            </div>
-          </div>
+  <div class="col-lg-3 col-md-6">
+    <div class="footer-info">
+      <h3>RapiDoc</h3>
+      <p>
+        Address<br>
+        Delhi, India<br><br>
+        <strong>Phone:</strong> <i class="bi bi-phone"></i><a href="tel:+91 1234567890">+91 1234567890</a><br>
+        <strong>Email:</strong> <a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a>
+        <br>
+      </p>
+      <div class="social-links mt-3">
+        <a href="#" class="facebook"><i class="fa-brands fa-facebook-f"></i></a>
+        <a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
+        <a href="#" class="twitter"><i class="fa-brands fa-x-twitter"></i></a>
+        <a href="#" class="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
+      </div>
+    </div>
+  </div>
 
   <footer>
     <div class="row">
@@ -708,27 +729,25 @@ <h3>
 
       <div class="col" id="col4">
         <h3>
-            SOCIAL
-            <div class="underline"><span></span></div>
+          SOCIAL
+          <div class="underline"><span></span></div>
         </h3>
         <div class="social-icons">
-            
-            <div class="social">
-                <a href="#" target="_blank"><img
-                        src="#" alt="">Instagram</a>
 
-            </div>
-            <div class="social">
-                <a href="#" target="_blank"><img
-                        src="" alt="">LinkedIn</a>
+          <div class="social">
+            <a href="#" target="_blank"><img src="#" alt="">Instagram</a>
 
-            </div>
-            <div class="social">
-                <a href="#"><img src="" alt=""> Facebook</a>
+          </div>
+          <div class="social">
+            <a href="#" target="_blank"><img src="" alt="">LinkedIn</a>
 
-            </div>
+          </div>
+          <div class="social">
+            <a href="#"><img src="" alt=""> Facebook</a>
+
+          </div>
         </div>
-    </div>
+      </div>
     </div>
 
     <!-- Copyright -->
@@ -751,6 +770,31 @@ <h3>
     var currentYear = new Date().getFullYear();
     document.getElementById('year').textContent = currentYear;
   </script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
+   <script>
+       document.addEventListener("DOMContentLoaded", function() {
+           const phoneInputField = document.getElementById('phone');
+           const iti = window.intlTelInput(phoneInputField, {
+               initialCountry: "auto",
+               geoIpLookup: function(callback) {
+                   fetch('https://ipinfo.io/json?token=YOUR_TOKEN')
+                       .then(response => response.json())
+                       .then(data => callback(data.country))
+                       .catch(() => callback('us'));
+               },
+               utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
+           });
+
+           document.getElementById('phone-form').addEventListener('submit', function(event) {
+               event.preventDefault();
+               const phoneNumber = iti.getNumber();
+               console.log('Full Phone Number:', phoneNumber);
+
+               // You can now send this phone number to your server or process it as needed
+           });
+       });
+   </script>
+
   <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
   <script src="glightbox/js/glightbox.min.js"></script>
   <script src="php-email-form/validate.js"></script>
@@ -763,4 +807,4 @@ <h3>
   <script src="https://mediafiles.botpress.cloud/b1d766f9-2fd0-4a60-96bb-fc1f494d156c/webchat/config.js" defer></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index c433e7e7..9f5747f6 100644
--- a/style.css
+++ b/style.css
@@ -1363,7 +1363,7 @@ footer {
 .back-to-top.active {
   visibility: visible;
   opacity: 1;
-
+}
 
 
 /* Style for pateint portal  */
@@ -1392,7 +1392,7 @@ footer {
 .form-group {
   margin-bottom: 15px; /* Adds bottom margin for form-group */
 }
-.form-control2 {
+.form-control{
   width: 60%; /* Full width */
   padding: 10px;
   border: 1px solid #ccc; /* Light gray border */