diff --git a/index.html b/index.html
index 62517b36..7ec221ab 100644
--- a/index.html
+++ b/index.html
@@ -28,11 +28,19 @@
   <link href="swiper/swiper-bundle.min.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/intl-tel-input/17.0.8/css/intlTelInput.css">
+  <link rel="stylesheet" href="chatbox.css">
+  <!-- Google Fonts Link For Icons chatboxx -->
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+  <script src="chatboxx.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
@@ -336,6 +344,41 @@
   <div class="pre">
     <div class="loader"></div>
   </div>
+
+
+<!--   <header class="header_container">
+    <div class="img">
+      <img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
+    </div>
+
+    </div>
+    <nav class="nav_menu">
+
+      <ul class="nav_link">
+        <li><a href="#">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="Html-Files/news.html">News</a></li>
+        <a href="dex.html"><button>Service</button></a>
+        <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>
+        <a href="login.html"><button>Sign in/Sign up</button></a>
+      </ul>
+    </nav>
+    </div>
+  </header> -->
+  <!-- <ul class="chatbox">
+    <li class="chat incoming">
+      <span class="material-symbols-outlined">smart_toy</span>
+      <p>Hi there 👋<br>How can I help you today?</p>
+    </li>
+  </ul>
+  <div class="chat-input">
+    <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
+    <span id="send-btn" class="material-symbols-rounded">send</span>
+  </div>
+  </div> -->
+
       <!-- ############# Header ############# -->
   
       <header class="header_container">
@@ -362,7 +405,7 @@
 
   <!-- ############# Header ############# -->
 
-  <header id="header" class="fixed-top">
+  <!-- <header id="header" class="fixed-top">
     <div class="container d-flex align-items-center">
 
       <h1 class="logo me-auto"><a href="index.html">RapiDoc</a></h1>
@@ -377,30 +420,30 @@ <h1 class="logo me-auto"><a href="index.html">RapiDoc</a></h1>
         </ul>
         <i class="bi bi-list mobile-nav-toggle"></i>
       </nav><!-- .navbar -->
-
+<!-- 
       <a href="#appointment" class="appointment-btn scrollto">
         <span class="d-md-inline">EMERGENCY</span></a>
 
     </div>
-  </header>
+  </header> -->
 
 
-  <div class="container" style="display:flex ;">
+  <div class="container1" style="display:flex ;">
     <div class="content">
 
-        <h1 style="font-size: 65px;">
-            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 Now</a>
-        </h4>
-      </div>
-      <img class="sec-img" src="images/rd.png" alt="" />
-  
+      <h1 style="font-size: 65px;">
+        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 Now</a>
+      </h4>
     </div>
-<br><br><br><br><br>
-<!-- End Home -->
+    <img class="sec-img" src="images/rd.png" alt="" />
+
+  </div>
+  <br><br><br><br><br>
+  <!-- End Home -->
 
   <main id="main">
 
@@ -409,7 +452,7 @@ <h4>
 
 
     <section id="featured-services" class="featured-services">
-      <div class="container" data-aos="fade-up">
+      <div class="container2" data-aos="fade-up">
 
         <div class="row">
           <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
@@ -531,19 +574,17 @@ <h1 class="about-us-heading">About Us</h1>
   });
 });
   </script>
-    
-    <!-- End About Section -->
 
 
     <!-- ################## Counts Section ################## -->
 
 
     <section id="counts" class="counts">
-      <div class="container" data-aos="fade-up">
+      <div class="container3" data-aos="fade-up">
 
         <div class="row no-gutters" >
 
-          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">
+          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch container3-box">
             <div class="count-box">
               <i class="fas fa-user-md"></i>
               <span data-purecounter-start="0" data-purecounter-end="95" data-purecounter-duration="1"
@@ -553,7 +594,7 @@ <h1 class="about-us-heading">About Us</h1>
             </div>
           </div>
 
-          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">
+          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch container3-box">
             <div class="count-box">
               <i class="fas fa-bed"></i>
               <span data-purecounter-start="0" data-purecounter-end="36" data-purecounter-duration="1"
@@ -563,7 +604,7 @@ <h1 class="about-us-heading">About Us</h1>
             </div>
           </div>
 
-          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">
+          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch container3-box">
             <div class="count-box">
               <i class="fas fa-flask-vial"></i>
               <span data-purecounter-start="0" data-purecounter-end="23" data-purecounter-duration="1"
@@ -573,7 +614,7 @@ <h1 class="about-us-heading">About Us</h1>
             </div>
           </div>
 
-          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">
+          <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch container3-box">
             <div class="count-box">
               <i class="fas fa-trophy"></i>
               <span data-purecounter-start="0" data-purecounter-end="1250" data-purecounter-duration="1"
@@ -599,6 +640,7 @@ <h2>Services</h2>
         <p>Our services are for your good health. We are with you at every digital step.</p>
       </div>
       <div class="container">
+
           <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-heartbeat"></i></div>
@@ -606,6 +648,8 @@ <h4><a href="">Clinics/Labs</a></h4>
               <p>Locate the best healthcare facilities around you hassle-free.From routine check-ups to specialized treatments, find the right clinic or lab that meets your needs. Our database is updated regularly to ensure you have the most accurate information.</p>
             </div>
           </div>
+        </div>
+
 
           <div class="align-items-stretch ">
             <div class="icon-box">
@@ -614,6 +658,8 @@ <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
               <p>Get your prescribed medicines delivered at your doorstep.Our pharmacy service ensures you never miss a dose with timely reminders and easy refill options. Enjoy the convenience of home delivery and exclusive discounts on a wide range of medicines.</p>
             </div>
           </div>
+        </div>
+
 
           <div class="align-items-stretch ">
             <div class="icon-box">
@@ -623,7 +669,7 @@ <h4><a href="">Daily Feed</a></h4>
                </p>
             </div>
           </div>
-
+        </div>
           <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-dna"></i></div>
@@ -631,6 +677,8 @@ <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
               <p>Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.Find the nearest blood donation centers, check blood availability, and get information on how to donate or request blood in urgent situations.</p>
             </div>
           </div>
+        </div>
+
 
           <div class="align-items-stretch ">
             <div class="icon-box">
@@ -639,6 +687,7 @@ <h4><a href="">Disabled Person</a></h4>
               <p>Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.Access resources and support tailored to the needs of individuals with disabilities, ensuring a seamless healthcare experience for everyone.</p>
             </div>
           </div>
+        </div>
 
           <div class="align-items-stretch">
             <div class="icon-box">
@@ -648,178 +697,167 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
             </div>
           </div>
         </div>
+      </div>
     </section><!-- End Services Section -->
 
     <!-- Add Patient Portal Section -->
 
-  <section id="patient-portal" class="patient-portal">
+    <section id="patient-portal" class="patient-portal">
       <div class="container-patientportal">
-      <div class="section-title" id="section-patientportal">
-
-        <h2>Patient Portal</h2>
-        <p>Access your medical records, lab results, and prescription history securely.</p>
-        <!-- <p>The Patient Portal is your personalized online gateway to your health information. Whether you need to check your recent lab results, review your prescription history, or update your personal details, the Patient Portal provides a convenient and secure platform for managing your healthcare needs.</p> -->
-      </div>
-      <div class="container">
-
-
-      <!-- Add Login Form for Patient Portal -->
-      
-          <div class="login-box">
-              <div class="avatar">
-                  <img src="img\avatar.png" alt="Avatar">
-              </div>
-              <form>
-                  <div class="textbox">
-                      <i class="fas fa-user"></i>
-                      <input type="text" placeholder="Username" name="username" required>
-                  </div>
-                  <div class="textbox">
-                      <i class="fas fa-lock"></i>
-                      <input type="password" placeholder="Password" name="password" required>
-                  </div>
-                  <input type="submit" class="btn" value="SUBMIT">
-                  <div class="register-link">
-                      <a href="#">Not registered yet? Register Here</a>
-                  </div>
-                  <div class="forgot-password" id="forgot-password-patient-portal">
-                    <a href="forgot-password.php">Forgot Your Password?</a>
-                  </div>
-              </form>
-          </div>
-
-
-      <!-- Add Forgot Password Link -->
-
+        <div class="section-title" id="section-patientportal">
 
-    <!-- ############# Appointment Section ############# -->
-
-
-    <section id="appointment" class="appointment section-bg">
-
-      <div class="container">
-        <div class="section-title">
-          <h2>Make an Appointment</h2>
-          <p>We listed the docs, we made you a form. You make us an appointment.</p><br><br>
+          <h2>Patient Portal</h2>
+          <p>Access your medical records, lab results, and prescription history securely.</p>
+          <!-- <p>The Patient Portal is your personalized online gateway to your health information. Whether you need to check your recent lab results, review your prescription history, or update your personal details, the Patient Portal provides a convenient and secure platform for managing your healthcare needs.</p> -->
         </div>
-        <div class="layout">
-          <form accept="" role="form" class="php-email-form">
-            <div class="row">
+        <div class="container">
 
-              <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">
+          <!-- Add Login Form for Patient Portal -->
 
-                <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 class="login-box">
+            <div>
+              <img src="img\avatar.png" alt="Avatar" class="avatar">
             </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>
-
+            <form>
+              <div class="textbox">
+                <i class="fas fa-user"></i>
+                <input type="text" placeholder="Username" name="username" required>
               </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 class="textbox">
+                <i class="fas fa-lock"></i>
+                <input type="password" placeholder="Password" name="password" required>
               </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>
+              <input type="submit" class="btn2" value="SUBMIT">
+              <div class="register-link">
+                <a href="#">Not registered yet? Register Here</a>
               </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 class="forgot-password" id="forgot-password-patient-portal">
+                <a href="forgot-password.php">Forgot Your Password?</a>
               </div>
-            </div>
+            </form>
+          </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>
+          <!-- Add Forgot Password Link -->
 
-            <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>
+          <!-- ############# Appointment Section ############# -->
 
-      </div>
-    </section><!-- End Appointment Section -->
 
+          <section id="appointment" class="appointment section-bg">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Make an Appointment</h2>
+                    <p>We listed the docs, we made you a form. You make us an appointment.</p><br><br>
+                </div>
+                <div class="layout">
+                    <form accept="" role="form" class="php-email-form">
+                        <div class="row3">
+                            <div class="form-group">
+                                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name">
+                            </div>
+                            <div class="form-group">
+                                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
+                            </div>
+                            <div class="form-group">
+                                <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="form-group">
+                                <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="form-group">
+                                <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="form-group">
+                                <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="form-group">
+                                <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="form-group">
+                                <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="form-group">
+                                <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">
+                            <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>
+            </div>
+        </section><!-- End Appointment Section -->
 
 
-    <!-- ################# Doctors Section ################# -->
 
+          <!-- ################# Doctors Section ################# -->
 
-    <section id="doctors" class="doctors">
 
+          <section id="doctors" class="doctors">
       <div class="section-title">
         <h2>Doctors</h2>
         <p>Don’t compromise your health when we have listed the best doctors for you!</p>
@@ -828,188 +866,201 @@ <h2>Doctors</h2>
 
         <div class="column">
 
-          <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="member-info">
-                <h4>Dermatologist</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
-              </div>
+            <div class="section-title">
+              <h2>Doctors</h2>
+              <p>Don’t compromise your health when we have listed the best doctors for you!</p>
             </div>
-          </div>
+            <div class="container">
+
+              <div class="row">
+
+                <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="member-info">
+                      <h4>Dermatologist</h4>
+                      <br>
+                      <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
 
-          <div class="col-lg-6 mt-4 mt-lg-0">
-            <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/2.png" class="img-fluid" alt=""></div>
-              <div class="member-info">
-                <h4>Gynecologist</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
-              </div>
-            </div>
-          </div>
+                <div class="col-lg-6 mt-4 mt-lg-0">
+                  <div class="member d-flex align-items-start">
+                    <div class="pic"><img src="img/doctors/2.png" class="img-fluid" alt=""></div>
+                    <div class="member-info">
+                      <h4>Gynecologist</h4>
+                      <br>
+                      <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
 
-          <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="member-info">
-                <h4>Cardiologist</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
-              </div>
-            </div>
-          </div>
+                <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="member-info">
+                      <h4>Cardiologist</h4>
+                      <br>
+                      <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
 
-          <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="member-info">
-                <h4>ENT</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
-              </div>
-            </div>
-          </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="member-info">
-                <h4>Pediatrician</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
+                <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="member-info">
+                      <h4>ENT</h4>
+                      <br>
+                      <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a>
+                      </div>
+                    </div>
+                  </div>
+                </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="member-info">
+                      <h4>Pediatrician</h4>
+                      <br>
+                      <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </section><!-- End Doctors Section -->
-
-
-    <!-- ################# Contact Section ################# -->
-
-
+          </section><!-- End Doctors Section -->
 
-    <section id="contact" class="contact">
-      <div class="section-title">
-        <h2>Contact</h2>
-        <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
-      </div>
-      </div>
-      <div class="container">
 
+          <!-- ################# Contact Section ################# -->
 
-        <!--Google map-->
-        <div class="mapouter">
-          <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
-              marginheight="0" marginwidth="0"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe><a
-              href="https://www.fnfgo.com/">FNF Mods</a></div>
-          <style>
-            .mapouter {
-              position: relative;
-              text-align: right;
-              width: 100%;
-              height: 363px;
-            }
-
-            .gmap_canvas {
-              overflow: hidden;
-              background: none !important;
-              width: 100%;
-              height: 363px;
-            }
-
-            .gmap_iframe {
-              height: 363px !important;
-            }
-          </style>
-        </div><br>
-
-        <div class="container" >
-          <div class="row mt-2"
-            style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
-
-            <div class="col-lg-4">
-              <div class="info">
-                <div class="address">
-                  <i class="fa fa-location-dot"></i>
-                  <h4>Location:</h4>
-                  <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
-                      Delhi</a></p>
-                </div>
 
-        <div class="row mt-5">
-
-          <div class="col-lg-4">
-            <div class="info">
-              <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>
-              </div>
-
-              <div class="email">
-                <i class="bi bi-envelope"></i>
-                <h4>Email:</h4>
-                <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
-              </div>
 
-              <div class="phone">
-                <i class="bi bi-phone"></i>
-                <h4>Call:</h4>
-                <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
-              </div>
+          <section id="contact" class="contact">
+            <div class="section-title">
+              <h2>Contact</h2>
+              <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
             </div>
-          </div><br><br>
-
+        </div>
+        <div class="container">
+
+
+          <!--Google map-->
+          <div class="mapouter">
+            <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
+                marginheight="0" marginwidth="0"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe><a
+                href="https://www.fnfgo.com/">FNF Mods</a></div>
+            <style>
+              .mapouter {
+                position: relative;
+                text-align: right;
+                width: 100%;
+                height: 363px;
+              }
+
+              .gmap_canvas {
+                overflow: hidden;
+                background: none !important;
+                width: 100%;
+                height: 363px;
+              }
+
+              .gmap_iframe {
+                height: 363px !important;
+              }
+            </style>
+          </div><br>
+
+          <div class="containerx">
+            <div class="row mt-2">
+              <div class="col-lg-4">
+                <div class="info">
+                  <div class="address">
+                    <i class="fa fa-location-dot"></i>
+                    <h4>Location:</h4>
+                    <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
+                        Delhi</a></p>
+                  </div>
 
-                <div class="email">
-                  <i class="fa fa-envelope"></i>
-                  <h4>Email:</h4>
-                  <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
-                </div>
+                  <div class="row mt-5">
+
+                    <div class="col-lg-4">
+                      <div class="info">
+                        <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>
+                        </div>
+
+                        <div class="email">
+                          <i class="bi bi-envelope"></i>
+                          <h4>Email:</h4>
+                          <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
+                        </div>
+
+                        <div class="phone">
+                          <i class="bi bi-phone"></i>
+                          <h4>Call:</h4>
+                          <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
+                        </div>
+                      </div>
+                    </div>
+
+
+                    <div class="email">
+                      <i class="fa fa-envelope"></i>
+                      <h4>Email:</h4>
+                      <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
+                    </div>
+
+                    <div class="phone">
+                      <i class="fa fa-phone"></i>
+                      <h4>Call:</h4>
+                      <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
+                    </div>
+                  </div>
+                </div><br><br>
+
+
+                <div class="col-lg-8 mt-5 mt-lg-0">
+                  <form action="" role="form" class="php-email-form">
+                    <div class="row">
+                      <div class="col-md-6 form-group">
+                        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
+                          required="" fdprocessedid="b0eyy">
+                      </div>
+                      <div class="col-md-6 form-group mt-3 mt-md-0">
+                        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
+                          required="" fdprocessedid="ajhhhr">
+                      </div>
+                    </div>
+                    <div class="form-group mt-3">
+                      <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
+                        required="" fdprocessedid="mbdam9">
+                    </div>
+                    <div class="form-group mt-3">
+                      <textarea class="form-control" name="message" rows="5" placeholder="Message"
+                        required=""></textarea>
+                    </div>
+                    <div class="text-center"><button type="submit" fdprocessedid="dyl49d">Send Message</button></div>
+                  </form>
 
-                <div class="phone">
-                  <i class="fa fa-phone"></i>
-                  <h4>Call:</h4>
-                  <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
                 </div>
               </div>
-            </div><br><br>
-
-          
-            <div class="col-lg-8 mt-5 mt-lg-0">
-              <form action="" role="form" class="php-email-form">
-                <div class="row">
-                  <div class="col-md-6 form-group">
-                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required=""
-                      fdprocessedid="b0eyy">
-                  </div>
-                  <div class="col-md-6 form-group mt-3 mt-md-0">
-                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
-                      required="" fdprocessedid="ajhhhr">
-                  </div>
-                </div>
-                <div class="form-group mt-3">
-                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required=""
-                    fdprocessedid="mbdam9">
-                </div>
-                <div class="form-group mt-3">
-                  <textarea class="form-control" name="message" rows="5" placeholder="Message" required=""></textarea>
-                </div>
-                <div class="text-center"><button type="submit" fdprocessedid="dyl49d">Send Message</button></div>
-              </form>
 
             </div>
-          </div>
-
-        </div>
     </section><!-- End Contact Section -->
 
     <!-- testimonial section -->
@@ -1177,7 +1228,7 @@ <h1>Give Us Your Valuable Feedback.</h1>
 
   </main><!-- End #main -->
   <!-- ############### Footer ############### -->
-<br><br><br><br><br><br>
+  <br><br><br><br><br><br>
 
   <footer id="footer">
     <div class="footer-top" >
@@ -1317,6 +1368,14 @@ <h4>RAPIDOC Newsletter</h4>
             <input type="text" placeholder="Your email" required>
             <button type="submit">SUBSCRIBE</button>
           </form>
+          <div class="icons">
+            <i class="fa-brands fa-facebook-f"></i>
+            <i class="fa-brands fa-x-twitter"></i>
+            <i class="fa-brands fa-linkedin"></i>
+            <i class="fa-brands fa-github"></i>
+            <i class="fa-solid fa-phone"></i>
+            <i class="fa-solid fa-envelope"></i>
+          </div>
         </div>
       </div>
       <div id="copyright" style="text-align: center">
@@ -1330,55 +1389,84 @@ <h4>RAPIDOC Newsletter</h4>
 
 
 
-  <div id="back-to-top-container">
-    <div class="circle">
-      <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-        class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-        <path
-          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
-      </svg>
-    </div>
-  </div>
-
-
 
-  <div id="preloader"></div>
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
-      class="bi bi-arrow-up-short"></i></a>
 
+          <div id="preloader"></div>
+          <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
+              class="bi bi-arrow-up-short"></i></a>
 
-  <!-- JS Files -->
-  <script>
-    var currentYear = new Date().getFullYear();
-    document.getElementById('year').textContent = currentYear;
-  </script>
 
+          <!-- JS Files -->
+          <script>
+            var currentYear = new Date().getFullYear();
+            document.getElementById('year').textContent = currentYear;
+          </script>
 
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const backToTopButton = document.getElementById('back-to-top-container');
-
-      function checkButtonVisibility() {
-        if (window.innerWidth > 100 && window.scrollY > 100) {
-          backToTopButton.style.display = 'block';
-        } else {
-          backToTopButton.style.display = 'none';
-        }
-      }
-
-      window.addEventListener('scroll', checkButtonVisibility);
-      window.addEventListener('resize', checkButtonVisibility);
 
-      backToTopButton.addEventListener('click', function () {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      });
-      checkButtonVisibility();
-    });
+          <script>
+            document.addEventListener("DOMContentLoaded", function () {
+              const backToTopButton = document.getElementById('back-to-top-container');
+
+              function checkButtonVisibility() {
+                if (window.innerWidth > 100 && window.scrollY > 100) {
+                  backToTopButton.style.display = 'block';
+                } else {
+                  backToTopButton.style.display = 'none';
+                }
+              }
+
+              window.addEventListener('scroll', checkButtonVisibility);
+              window.addEventListener('resize', checkButtonVisibility);
+
+              backToTopButton.addEventListener('click', function () {
+                window.scrollTo({
+                  top: 0,
+                  behavior: 'smooth'
+                });
+              });
+              checkButtonVisibility();
+            });
+
+          </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>
+          <script src="purecounter/purecounter.js"></script>
+          <script src="swiper/swiper-bundle.min.js"></script>
+          <script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>
+          <script src="js/main.js"></script>
+          <script src="patient-portal.js"></script>
+
+          <script src="https://mediafiles.botpress.cloud/b1d766f9-2fd0-4a60-96bb-fc1f494d156c/webchat/config.js"
+            defer></script>
 
-  </script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script>
@@ -1447,20 +1535,21 @@ <h4>RAPIDOC Newsletter</h4>
   </script>
           <script>
 
-window.addEventListener("load", () => {
-  const loader = document.querySelector(".pre");
+            window.addEventListener("load", () => {
+              const loader = document.querySelector(".pre");
 
-  loader.classList.add("pre--hidden");
+              loader.classList.add("pre--hidden");
 
-  loader.addEventListener("transitionend", () => {
-  document.body.removeChild(loader);
-  });
-  });
+              loader.addEventListener("transitionend", () => {
+                document.body.removeChild(loader);
+              });
+            });
+
+            window.addEventListener("load", () => {
+              const loader = document.querySelector(".loader");
 
-  window.addEventListener("load", () => {
-  const loader = document.querySelector(".loader");
+              loader.classList.add("loader--hidden");
 
-  loader.classList.add("loader--hidden");
 
   loader.addEventListener("transitionend", () => {
   document.body.removeChild(loader);
@@ -1486,4 +1575,4 @@ <h4>RAPIDOC Newsletter</h4>
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 1dc338fa..1343e21b 100644
--- a/style.css
+++ b/style.css
@@ -55,27 +55,27 @@ button {
 }
 
 .header_container {
-  /* background-color: #d9d9d9; */
   background-color: #022a2d;
   opacity: 0.9;
   display: flex;
   flex-direction: row;
-  /* justify-content: space-evenly; */
   justify-content: space-between;
   align-items: center;
-  height: 60px;
+  height: 80px;
+  width: 100%;
   margin: auto;
 }
 
-.container {
+.container1 {
   /* display: ; */
   font-family: sans-serif;
   padding-top: 80px;
-}
+} 
+
 
 /* .container a:hover {
   text-decoration: underline 2px;
-} */
+}
 
 .content {
   display: flex;
@@ -356,6 +356,13 @@ section {
   left: calc(50% - 20px);
 }
 
+.section-title p {
+  margin-bottom: 0;
+}
+.btn-get-started:hover{
+  color: #000;
+  transition: all 0.3s ease-in-out;
+}
 
 /*################----Home Section----################*/
 #home {
@@ -370,7 +377,7 @@ section {
   color: #55a5ea;
 }
 
-#home .container {
+#home .container2 {
   position: relative;
   margin-top: 150px;
 }
@@ -429,7 +436,7 @@ section {
     height: 100vh;
   }
 
-  #home .container {
+  #home .container2 {
     padding-bottom: 63px;
   }
 
@@ -450,6 +457,11 @@ section {
     height: 110vh;
   }
 }
+.content{
+  margin-left: 50px;
+}
+
+
 
 /*################----Featured----################*/
 
@@ -460,6 +472,8 @@ section {
 
 .featured-services .icon-box {
   z-index: -1;
+  width: 350px;
+  height: 270px;
   width: 290px;
   height: 327px;
   margin-left: 15px;
@@ -669,13 +683,7 @@ section {
   font-size: 14px;
 }
 
-.about .video-box {
-  z-index: -1;
-  background: url("../img/about.png") center center no-repeat;
-  background-size: cover;
-  height: 300px;
-  top: 50px;
-}
+
 
 .about .play-btn {
   width: 94px;
@@ -827,7 +835,20 @@ section {
   margin-left: 50px;
 }
 
-.container .drop .content span {
+.container3{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-evenly;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.container3-box{
+  width: 25%;
+}
+
+.container3 .drop .content span {
   font-size: 42px;
   line-height: 24px;
   display: inline-block;
@@ -835,7 +856,7 @@ section {
   color: #faf8f8;
 }
 
-.container .drop .content p {
+.container3 .drop .content p {
   font-size: 30px;
   line-height: 24px;
   display: inline-block;
@@ -934,7 +955,7 @@ section {
 .services .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  /* gap: 20px; */
+  gap: 20px;
   margin-top: 8px;
 }
 
@@ -994,7 +1015,74 @@ section {
   margin: 0 auto;
 }
 
-.appointment .php-email-form {
+
+.row3{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+/* Container styles */
+
+/* Section title styles */
+.section-title {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.section-title h2 {
+    font-size: 2em;
+    margin-bottom: 10px;
+}
+
+/* Form layout styles */
+.layout .row3,
+.layout .row {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.iti.iti--allow-dropdown{
+  margin-left: 0px;
+}
+/* Form group styles */
+.form-group {
+    flex: 1;
+    min-width: 250px;
+    margin-bottom: 20px;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+/* Button styles */
+.text-center {
+    text-align: center;
+}
+
+.text-center button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+}
+
+.text-center button:hover {
+    background-color: #0056b3;
+}
+
+/* .appointment .php-email-form {
   width: 100%;
 }
 
@@ -1043,6 +1131,21 @@ section {
 
 .appointment .php-email-form button[type="submit"]:hover {
   background: #3fbcc0bd;
+} */
+
+
+.avatar{
+  border-radius: 50%;
+}
+
+.btn2{
+  background-color: #3fbcc0a6;
+  border: 0;
+  padding: 10px 35px;
+  color: #fff;
+  transition: 0.4s;
+  border-radius: 50px;
+  margin-top: 10px;
 }
 
 /*################----Doctors----################*/
@@ -1236,7 +1339,7 @@ section {
 
 .feedback {
   border-radius: 1rem;
-  background-color: #fff;
+  background-color: #3fbcc0a6;
   padding: 2rem 4rem;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
     rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
@@ -1776,3 +1879,154 @@ button {
 #back-to-top:hover {
   fill: hsl(214, 50%, 60%);
 }
+
+.iti--allow-dropdown input {
+  padding-left: 50px;
+  background-color: rgb(255, 255, 255);
+  /* Adjust padding to prevent overlap */
+}
+
+
+/* .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+} */
+
+.content {
+  text-align: left;
+  flex: 1;
+  padding: 20px;
+}
+
+.sec-img {
+  max-width: 50%;
+  width: 600px;
+  height: 600px;
+  margin-left: auto;
+}
+
+.btn-get-started {
+  display: inline-block;
+  background-color: #55a5ea;
+  color: #fff;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-top: 20px;
+}
+
+@media screen and (max-width: 992px) {
+  .container {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .sec-img {
+    max-width: 100%;
+    margin: 20px 0;
+    position: relative;
+    top: 0;
+    right: 0;
+
+  }
+
+  .content {
+    text-align: center;
+    padding: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .content {
+    text-align: center;
+    padding: 10px;
+  }
+
+  .sec-img {
+    max-width: 100%;
+    margin: 20px 0;
+    position: relative;
+    top: 0;
+    right: 0;
+  }
+}
+
+/*Preloader CSS*/
+.pre {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 2s ease-out, visibility 2s ease-out;
+  opacity: 1;
+  visibility: visible;
+  z-index: 9999;
+}
+
+.pre--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.loader {
+  display: block;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #55a5ea;
+  animation: spin 3s linear infinite;
+}
+
+.loader:before {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #3fbcc0c6;
+  animation: spin 3s linear infinite;
+}
+
+.loader:after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #fff;
+  animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+.loader--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+