From adb32c72c0b84e9d3287d0615a74993db69709ce Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:50:42 +0530
Subject: [PATCH 01/16] made service page responsive

---
 assets/css/styles.css | 658 +++++++++++++++++++++++++++++++++++++++---
 index.css             | 118 ++++++--
 style.css             |   4 +
 3 files changed, 712 insertions(+), 68 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 0840ddf0..6ce4312b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -74,7 +74,6 @@ h1, h2, h3 {
   font-weight: var(--font-semi-bold);
   color: white;
   line-height: 1.5;
-  
 }
 
 ul {
@@ -93,6 +92,98 @@ img {
   padding-bottom: 100px;
 }
 
+/* Media Queries for Mobile Responsiveness */
+@media (max-width: 768px) {
+
+  *, ::before, ::after {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0;
+    
+    
+  }
+.header_container {
+    width: 163vw;
+    height: auto;
+}
+
+.nav_menu {
+    padding: 10px;
+    height: auto;
+}
+
+.nav-h {
+    height: 5.5rem;
+    width: -webkit-fill-available !important;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+}
+
+.container {
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column-reverse;
+    padding: 0px;
+}
+  body {
+    font-size: calc(var(--normal-font-size) * 0.9);
+    width:50%
+  }
+
+  img {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+
+  h1, h2, h3 {
+    font-size: calc(var(--normal-font-size) * 1.2); 
+  }
+}
+
+@media (max-width: 480px) {
+  .header_container {
+    width: 163vw;
+    height: auto;
+    padding-top: 0px;
+}
+
+.nav_menu {
+    padding: 10px;
+    height: auto;
+    padding-top: 0px;
+}
+
+.nav-h {
+    height: 5.5rem;
+    width: -webkit-fill-available !important;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 0px;
+}
+
+.container {
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column-reverse;
+    padding-top: 0px;
+}
+  body {
+    font-size: calc(var(--normal-font-size) * 0.8); 
+  }
+
+  img {
+    padding-left: 70px;
+    padding-bottom: 20px;
+  }
+
+  h1, h2, h3 {
+    font-size: calc(var(--normal-font-size) * 1.1); 
+}}
+
+
+
 /*=============== THEME ===============*/
 /*========== Variables Dark theme ==========*/
 body.dark-theme {
@@ -129,7 +220,7 @@ body.dark-theme {
   color: rgb(255, 255, 255);
   text-align: center;
   margin-bottom: var(--mb-1);
-  padding-left: 0px;
+  padding-left: 0;
 }
 
 .svg__color {
@@ -161,16 +252,17 @@ body.dark-theme {
 .header {
   width: 100%;
   background-color: var(--body-color);
-  
   top: 0;
   left: 0;
   z-index: var(--z-fixed);
   transition: .5s;
+  padding-top: 0px;
 }
+
 .header img {
-  width: 100px; /* Adjust the width as needed */
+  width: 100px; 
   height: 100px;
-  margin-left: 1px; /* Adjust the margin as needed */
+  margin-left: 1px; 
 }
 
 /*=============== NAV ===============*/
@@ -180,24 +272,26 @@ body.dark-theme {
   justify-content: space-between;
   align-items: center;
   padding-bottom: 200px;
+  padding-top: 0%;
+  position:fixed;
+  padding-top: 0px;
 }
 
-@media screen and (max-width: 767px) {
-  .nav__menu {
-    position: fixed;
-    background-color: var(--container-color);
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-    padding: 2.5rem 0;
-    width: 90%;
-    top: -100%;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    transition: .4s;
-    border-radius: 2rem;
-    z-index: var(--z-fixed);
-    padding-bottom: 100px;
-  }
+.nav__menu {
+  position: fixed;
+  background-color: var(--container-color);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  /* padding: 2.5rem 0; */
+  width: 90%;
+  top: -100%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  transition: .4s;
+  border-radius: 2rem;
+  z-index: var(--z-fixed);
+  padding-bottom: 100px;
+  padding-top: 0px;
 }
 
 .nav__list {
@@ -217,12 +311,10 @@ body.dark-theme {
   cursor: pointer;
 }
 
-/* Show menu */
 .show-menu {
   top: calc(var(--header-height) + 1rem);
 }
 
-/* Active link */
 .active-link {
   position: relative;
 }
@@ -238,11 +330,80 @@ body.dark-theme {
   border-radius: 50%;
 }
 
-/* Change background header */
+
 .scroll-header {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* Media Queries for Mobile Responsiveness */
+
+@media screen and (max-width: 768px) {
+  
+  .section__title, .section__title-center {
+    font-size: calc(var(--h2-font-size) * 1.1);
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+  }
+  #home h1{
+    margin-left: 90px;
+  }
+  .svg__img {
+    width: 200px;
+  }
+
+  .container {
+    max-width: 100%;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .nav {
+    padding-top: 0px; 
+    margin-top: 0; 
+  }
+
+  .header img {
+    width: 80px; 
+    height: 80px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .section__title, .section__title-center {
+    font-size: calc(var(--h2-font-size) * 0.9);
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    width: 50%;
+    margin-left: 40px;
+  }
+
+  .svg__img {
+    width: 150px;
+  }
+
+  .nav {
+    
+    margin-top: 0; 
+    padding-top: 0px;
+  }
+
+  .header img {
+    width: 60px; 
+    height: 60px;
+  }
+
+  .nav__menu {
+    
+    padding-top:0px;
+    border-radius: 1rem;
+    top: 0; 
+    margin: 0; 
+  }
+}
+
+
 /*=============== HOME ===============*/
 .home__container {
   row-gap: 3rem;
@@ -252,23 +413,24 @@ body.dark-theme {
   font-size: var(--biggest-font-size);
   font-weight: var(--font-bold);
   margin-bottom: var(--mb-0-75);
-  padding-left: 100px;
+  padding-left: 0px;
 }
 
 .home__description {
   margin-bottom: var(--mb-2);
-  padding-left: 100px;
-  
+  padding-left: 0px;
 }
+
 .home img {
-  max-width: 100%;
+  max-width: 50%;
   height: auto;
   margin-left: 500px; 
   margin-top: -350px;
   padding-top: 100px;
   display: flex;
-  padding-left: 250px;
+  
 }
+
 /*=============== BUTTONS ===============*/
 .button {
   display: inline-block;
@@ -279,12 +441,11 @@ body.dark-theme {
   font-weight: var(--font-semi-bold);
   transition: .3s;
   margin-top: 100px;
-  
 }
 
 .button:hover {
   background-color: #55a5ea;
-  color:black;
+  color: black;
 }
 
 .button__header {
@@ -298,7 +459,7 @@ body.dark-theme {
 }
 
 .button-link:hover {
-  color:#022a2d; ;
+  color: #022a2d;
 }
 
 .button-flex {
@@ -312,6 +473,70 @@ body.dark-theme {
   font-size: 1.5rem;
 }
 
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .home__title {
+    font-size: calc(var(--biggest-font-size) * 1.2);
+    padding-left: 1rem;
+    margin-left: 50px;
+  }
+
+  .home__description {
+    padding-left: 1rem;
+    display: block;
+    align-items: center;
+    margin-left: 50px;
+  }
+
+  .home img {
+    margin-left: 0;
+    margin-top: 0;
+    padding-top: 1rem;
+    display: block;
+    padding-left: 0;
+    margin-right: 0px;
+  }
+
+  .button {
+    padding: 0px;
+    width:120px;
+    display: flexbox;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .home__title {
+    font-size: calc(var(--biggest-font-size) * 1.1);
+    padding-left: 0.5rem;
+    
+  }
+
+  .home__description {
+    padding-left: 0.5rem;
+    display: block;
+    width: 50%;
+    margin-left: 50px;
+  }
+
+  .home img {
+    margin-left: 45px;
+    margin-top: 0;
+    padding-top: 1rem;
+    display: block;
+    padding-left: 0;
+  }
+
+  .button {
+    padding: .5rem 0.75rem;
+    margin-top: 1rem;
+    margin-left: 10px;
+  }
+}
+
+
 /*=============== ABOUT ===============*/
 .about__container {
   gap: 2.5rem;
@@ -320,15 +545,61 @@ body.dark-theme {
 .about__data {
   text-align: justify;
   padding-left: 100px;
+  margin-left: 50px;
 }
+
 .about img {
   max-width: 100%;
   height: auto;
-  margin-left: 0px; 
+  margin-left: 0;
   margin-top: 100px;
-  padding-left: 0px;
+  padding-left: 0;
+}
+
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .about__container {
+    gap: 1.5rem; 
+    width: 50%;
+  }
+
+  .about__data {
+    padding-left: 1rem; 
+    padding-right: 1rem; 
+    display: block;
+    margin-left: 70px;
+  }
+
+  .about img {
+    margin-top: 50px;
+    padding-left: 1rem; 
+    margin-left: 10px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .about__container {
+    gap: 1rem; 
+    width: 50%;
+  }
+
+  .about__data {
+    padding-left: 0.5rem; 
+    padding-right: 0.5rem; 
+    display: block;
+    margin-left: 50px;
+  }
+
+  .about img {
+    margin-top: 30px; 
+    padding-left: 0.5rem; 
+  }
 }
 
+
 /*=============== SECURITY ===============*/
 .security__container {
   gap: 2.5rem;
@@ -338,19 +609,63 @@ body.dark-theme {
   text-align: justify;
   padding-left: 100px;
   
+}
 
+.security img {
+  max-width: 100%;
+  height: auto;
+  padding-left: 0;
 }
-.security img{
-  padding-left: 0px;
+
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .security__container {
+    gap: 1.5rem; 
+    width: 50%;
+    
+  }
+
+  .security__data {
+    padding-left: 1rem; 
+    padding-right: 1rem; 
+    margin-left: 10px;
+  }
+
+  .security img {
+    padding-left: 1rem; 
+    margin-left: 110px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .security__container {
+    gap: 1rem; 
+  }
+
+  .security__data {
+    padding-left: 0.5rem; 
+    padding-right: 0.5rem; 
+    margin-left: 50px;
+  }
+
+  .security img {
+    padding-left: 0.5rem; 
+    margin-left: 30px;
+    margin-right: 50px;
+  }
 }
 
 /*=============== SERVICES ===============*/
 .services__container {
   padding-top: 1rem;
 }
-.service__container grid:hover{
-  background-color: rgb(0, 98, 255);
 
+/* Grid hover style correction */
+.service__container grid:hover {
+  background-color: rgb(0, 98, 255);
 }
 
 .services__data {
@@ -362,23 +677,24 @@ body.dark-theme {
   box-shadow: 0px 2px 6px hsla(var(--hue), 100%, 15%, 0.15);
   padding: 2rem 1.5rem;
   border-radius: 1rem;
-  position:relative;
+  position: relative;
   width: 100%;
   height: auto;
   text-align: justify;
-  
 }
+
 .services__data img {
   max-width: 100%; 
   height: auto;
 }
-.services__data:hover{
-  background-color: #55a5ea
+
+.services__data:hover {
+  background-color: #55a5ea;
 }
 
 .services__img {
   width: 100%;
-  height: 100%;
+  height: auto;
   justify-self: center;
   margin-bottom: var(--mb-0-5);
   object-fit: cover;
@@ -386,6 +702,42 @@ body.dark-theme {
   padding-top: 100px;
 }
 
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .service__container{
+    width: 50%;
+  }
+  .services__data {
+    padding: 1.5rem 1rem; 
+    width: 50%;
+    margin-left: 40px;
+
+  }
+
+  .services__img {
+    padding-top: 50px; 
+  }
+  .services__data img {
+    max-width: 100%; 
+    height: auto;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .services__data {
+    padding: 1rem; 
+    width: 50%;
+  }
+
+  .services__img {
+    padding-top: 30px; 
+  }
+}
 
 
 
@@ -393,6 +745,7 @@ body.dark-theme {
 /*=============== APP ===============*/
 .app__container {
   gap: 2.5rem;
+  
 }
 
 .app__data {
@@ -410,6 +763,7 @@ body.dark-theme {
   justify-content: center;
   gap: .5rem;
   padding-left: 100px;
+
 }
 .section__title-center{
   padding-left: 100px;
@@ -418,6 +772,7 @@ body.dark-theme {
 /*=============== CONTACT ===============*/
 .contact__container {
   padding-bottom: 3rem;
+  
 }
 
 .contact__description {
@@ -438,6 +793,106 @@ body.dark-theme {
   font-weight: initial;
   color: var(--text-color);
 }
+@media screen and (max-width: 768px) {
+  .header_container{
+    padding-top: 0px;
+  }
+  .app__container {
+    gap: 1.5rem; 
+    width: 50%;
+  }
+
+  .app__description {
+    padding-left: 20px; 
+    padding-right: 20px; 
+  }
+
+  .app__buttons {
+    grid-template-columns: 1fr; 
+    padding-left: 20px; 
+    padding-right: 20px;
+    gap: 1rem; 
+  }
+
+  .section__title-center {
+    padding-left: 20px; 
+    padding-right: 20px; 
+  }
+
+  .contact__container {
+    padding-bottom: 2rem; 
+    width: 50%;
+  }
+
+  .contact__description {
+    padding-left: 20px;
+    padding-right: 20px; 
+  }
+
+  .contact__content {
+    row-gap: 1rem; 
+  }
+
+  .contact__address {
+    font-size: var(--small-font-size); 
+    text-align: center; 
+  }
+
+  .contact__information {
+    font-size: var(--small-font-size); 
+    text-align: center; 
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .header_container{
+    padding-top: 0px;
+  }
+  .app__container {
+    gap: 1rem; 
+    width: 50%;
+  }
+
+  .app__description {
+    padding-left: 10px; 
+    padding-right: 10px; 
+    margin-left: 50px;
+  }
+
+  .app__buttons {
+    grid-template-columns: 1fr; 
+    padding-left: 10px; 
+    padding-right: 10px; 
+    gap: 1rem; 
+  }
+
+  .section__title-center {
+    padding-left: 10px;
+    padding-right: 10px; 
+    margin-left: 80px;
+  }
+
+  .contact__container {
+    padding-bottom: 1.5rem; 
+    width: 50%;
+  }
+
+  .contact__description {
+    padding-left: 10px;
+    padding-right: 10px; 
+    margin-left: 50px;
+  }
+
+  .contact__content {
+    row-gap: 1.5rem; /
+  }
+
+  .contact__address, .contact__information {
+    font-size: var(--extra-small-font-size); 
+    text-align: center; 
+  }
+}
 
 /*=============== FOOTER ===============*/
 .footer {
@@ -491,6 +946,108 @@ body.dark-theme {
   font-size: var(--smaller-font-size);
   color: var(--text-color);
 }
+@media screen and (max-width: 768px) {
+  .footer {
+    padding-top: 3rem; 
+    width: 50%;
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__container {
+    padding-top: 3rem; 
+    row-gap: 1.5rem; 
+    width: 50%;
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__logo, .footer__title {
+    font-size: var(--h4-font-size); 
+    text-align: center; 
+  }
+
+  .footer__description, .footer__link {
+    font-size: var(--small-font-size); 
+    text-align: center;
+  }
+
+  .footer__links {
+    display: block; 
+    row-gap: 1rem; 
+  }
+
+  .footer__social {
+    flex-direction: column; 
+    align-items: center;
+    column-gap: 1rem; 
+  }
+
+  .footer__social-link {
+    font-size: 1.5rem;
+  }
+
+  .footer__copy {
+    margin-top: 3rem; 
+    font-size: var(--smaller-font-size); 
+}
+.subscribe-form {
+  flex-direction: column;
+  gap: 20px;
+}
+
+.subscribe-form input[type="email"], .subscribe-form button {
+  width: 100%;
+  font-size: 8px;
+}
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .footer {
+    padding-top: 2rem; 
+    width: 50%;
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__container {
+    padding-top: 2rem; 
+    row-gap: 1rem; 
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__logo, .footer__title {
+    font-size: var(--h5-font-size); 
+    text-align: center; 
+  }
+
+  .footer__description, .footer__link {
+    font-size: var(--extra-small-font-size); 
+    text-align: center; 
+  }
+
+  .footer__links {
+    row-gap: 0.75rem; /* Further reduce row-gap for very small screens */
+    
+  }
+
+  .footer__social {
+    flex-direction: row;
+    column-gap: 1rem;
+    margin-bottom: 1rem; 
+  }
+
+  .footer__social-link {
+    font-size: 1.25rem; 
+  }
+
+  .footer__copy {
+    margin-top: 2rem; 
+    font-size: var(--extra-small-font-size); 
+  }
+}
 
 /*=============== SCROLL UP ===============*/
 .scrollup {
@@ -602,10 +1159,14 @@ body.dark-theme {
   }
   .nav {
     height: calc(var(--header-height) + 1.5rem);
+    
+    
   }
   .nav__list {
     flex-direction: row;
     column-gap: 2.5rem;
+    
+    
   }
   .nav__toggle {
     display: none;
@@ -697,7 +1258,7 @@ h6 {
 
 .nav_link li {
   margin-right: 1px;
-  /* Add space between items */
+  padding-top:0px;
   padding: 5px 10px;
   display: inline-block;
   color: white;
@@ -729,7 +1290,7 @@ h6 {
   margin: auto;
   margin-top: 0px;
   /* Adjust this value to move the header down */
-  padding-top: 15px;
+  padding-top: 0px;
   z-index: 555;
 }
 .footer {
@@ -844,12 +1405,14 @@ h6 {
   }
 
   .footer .footer-row {
-    padding: 20px;
+    padding: 0px;
     gap: 1rem;
   }
 
   .footer-col form {
     display: block;
+    height: auto;
+    
   }
 
   .footer-col form :where(input, button) {
@@ -857,7 +1420,8 @@ h6 {
   }
 
   .footer-col form button {
-    margin: 10px 0 0 0;
+    margin-left:0px;
+    width: 100px;
   }
 }
 
diff --git a/index.css b/index.css
index c39f1631..f7f4bf48 100644
--- a/index.css
+++ b/index.css
@@ -424,16 +424,26 @@ select {
     .header_container {
         width: 163vw;
         height: auto;
+        position: fixed;
+        top:0;
+        left:0;
     }
 
     .nav_menu {
         padding: 10px;
         height: auto;
+        top:0;
+        left:0;
+       
     }
 
     .nav-h {
+        position: fixed;
+        top:0;
+        left:0;
         height: 5.5rem;
-        width: -webkit-fill-available !important;
+        width: 100%;
+        z-index:100;
         justify-content: center;
         flex-direction: row;
         align-items: center;
@@ -443,7 +453,7 @@ select {
         flex-wrap: wrap;
         justify-content: center;
         flex-direction: column-reverse;
-        padding: 10px;
+        padding: 0px;
     }
 
     .about-service {
@@ -489,11 +499,46 @@ select {
         margin-bottom: 15px !important;
     }
 
-    footer {
-        width: 168vw !important;
-        padding: 40px !important;
-        margin: auto !important;
+    .footer-wrapper{
+        width: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin-right: 10px;
+    }
+    .other-columns {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 50%;
+    }
+
+    .footer-col {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 90px;
+        width: 50%;
+    }
+    #ss {
+        font-size: 0.75rem; 
+       width: 90%;
+      }
+    
+    
+    
+
+    .subscribe-form {
+        display: block;
+        gap: 10px;
+        
+    }
+    .social-wrapper{
+        padding-right: 80px;
+        width: 700px;
     }
+   
+
 
     #appointment.appointment.section-bg {
         margin: 15px;
@@ -507,10 +552,7 @@ select {
         width: 476px !important;
     }
 
-    .other-columns {
-        grid-template-columns: repeat(3, 3fr);
-
-    }
+    
 
     .form.php-email-form {
         align-content: flex-start;
@@ -524,10 +566,7 @@ select {
         width: 510px !important;
     }
 
-    .footer-col {
-        padding: 15px;
-        text-align: center;
-    }
+   
 }
 
 
@@ -670,23 +709,60 @@ body {
 
 
 @media (max-width:768px) {
+    .footer{
+        width: 10%;
+    }
     .other-columns {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
+        flex-wrap: wrap; 
+        display: grid;
+        grid-template-columns: repeat(2, 1fr); 
+        grid-gap: 1rem;
+        margin-right: 0px !important;
+        padding-right: 0px !important;
+      }
+      
+      .other-columns > * {
+        flex: 2 2 50%; 
+       
+      }
+      
+    
+      .footer-col p {
+        max-width: 100%;
+
+      }
+    
+      .footer-col form {
+        flex-direction: column; 
+
+      }
+    
+      .footer-col input {
+        margin-right: 100px; 
+        width: 100%;
+      }
 
     .footer-col {
         display: flex;
         flex-direction: row;
         align-items: center;
-        flex-wrap: nowrap;
+        flex-wrap: wrap;
         gap: 90px;
+        width: 100%;
+        margin-right: 0px !important;
+        padding-right: 0px !important;
     }
+    
 
-    .subscribe-form {
-        display: flex;
-        gap: 10px;
+    .subscribe-form input[type="email"], .subscribe-form button {
+        width: 100%;
+        font-size: 10px;
+    }
+
+    
+    .social-wrapper a div i {
+        width: 50%;
     }
 }
 
diff --git a/style.css b/style.css
index af731fd7..699f2e5c 100644
--- a/style.css
+++ b/style.css
@@ -1507,6 +1507,8 @@ section {
     transform: none;
     width: 100%;
     border-radius: 0;
+    margin-right: 0px !important;
+        padding-right: 0px !important;
   }
 
   .footer .footer-row {
@@ -1520,6 +1522,7 @@ section {
 
   .footer-col form :where(input, button) {
     width: 100%;
+    display: inline-block;
   }
 
   .footer-col form button {
@@ -2014,3 +2017,4 @@ background-size: 100%;
   text-align: center;
 
 }
+}
\ No newline at end of file

From 5a1443bed2d556e5ee7a7e1e83502e7c01bb289b Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:50:42 +0530
Subject: [PATCH 02/16] made service page responsive

---
 assets/css/styles.css | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 7113987a..011119a3 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -440,13 +440,8 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
-
-  margin-top: 100px;
-
-  margin-top: 50px;
-  margin-left: 300px;
   
-
+  
 }
 
 .button:hover {

From 04a365f6c90d9a52ad0a412b594cb9284d54628c Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sat, 27 Jul 2024 23:18:11 +0530
Subject: [PATCH 03/16] changes made

---
 assets/css/styles.css |  8 ++++++++
 dex.html              | 27 ++++++++++++++++++++++++++-
 index.css             |  2 +-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 011119a3..89ec7aca 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -99,9 +99,13 @@ img {
     box-sizing: border-box;
     padding: 0px;
     margin: 0;
+    margin-top: 25px;
     
     
   }
+  .d-md-inline{
+    color: #000;
+  }
 .header_container {
     width: 163vw;
     height: auto;
@@ -110,6 +114,8 @@ img {
 .nav_menu {
     padding: 10px;
     height: auto;
+
+    
 }
 
 .nav-h {
@@ -118,6 +124,7 @@ img {
     justify-content: center;
     flex-direction: row;
     align-items: center;
+    
 }
 
 .container {
@@ -125,6 +132,7 @@ img {
     justify-content: center;
     flex-direction: column-reverse;
     padding: 0px;
+    
 }
   body {
     font-size: calc(var(--normal-font-size) * 0.9);
diff --git a/dex.html b/dex.html
index 00853ed1..8ffdd3a2 100644
--- a/dex.html
+++ b/dex.html
@@ -51,6 +51,29 @@
         background-color: #3fbcc0;
         z-index: 9999;
       }
+      .styled-button-link {
+        text-decoration: none;
+      }
+      
+      .styled-button {
+        background-color: #4bb6b7;
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 8px;
+        transition: background-color 0.3s ease;
+      }
+      
+      .styled-button:hover {
+        background-color: #2F81CF;
+      }
+      
     </style>
   <script type="text/javascript">
     (function () {
@@ -128,7 +151,9 @@
         <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
 
-        <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
+        <a href="./Html-Files/Doctor Experience.html" class="styled-button-link">
+          <button class="styled-button">Find a Doctor</button>
+        </a>
       </ul>
       <div class="hamburger">
         <div class="line"></div>
diff --git a/index.css b/index.css
index d1740b6e..fdd109a9 100644
--- a/index.css
+++ b/index.css
@@ -458,7 +458,7 @@ select {
         width: 163vw;
         height: auto;
         position: fixed;
-        top:0;
+        top:0px;
         left:0;
     }
 

From 5847d88b21a4e6f473afd2ab2650c21c04e37fdf Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sat, 27 Jul 2024 23:33:31 +0530
Subject: [PATCH 04/16] Revert "changes made"

This reverts commit 04a365f6c90d9a52ad0a412b594cb9284d54628c.
---
 assets/css/styles.css |  8 --------
 dex.html              | 27 +--------------------------
 index.css             |  2 +-
 3 files changed, 2 insertions(+), 35 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 89ec7aca..011119a3 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -99,13 +99,9 @@ img {
     box-sizing: border-box;
     padding: 0px;
     margin: 0;
-    margin-top: 25px;
     
     
   }
-  .d-md-inline{
-    color: #000;
-  }
 .header_container {
     width: 163vw;
     height: auto;
@@ -114,8 +110,6 @@ img {
 .nav_menu {
     padding: 10px;
     height: auto;
-
-    
 }
 
 .nav-h {
@@ -124,7 +118,6 @@ img {
     justify-content: center;
     flex-direction: row;
     align-items: center;
-    
 }
 
 .container {
@@ -132,7 +125,6 @@ img {
     justify-content: center;
     flex-direction: column-reverse;
     padding: 0px;
-    
 }
   body {
     font-size: calc(var(--normal-font-size) * 0.9);
diff --git a/dex.html b/dex.html
index 8ffdd3a2..00853ed1 100644
--- a/dex.html
+++ b/dex.html
@@ -51,29 +51,6 @@
         background-color: #3fbcc0;
         z-index: 9999;
       }
-      .styled-button-link {
-        text-decoration: none;
-      }
-      
-      .styled-button {
-        background-color: #4bb6b7;
-        border: none;
-        color: white;
-        padding: 15px 32px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        margin: 4px 2px;
-        cursor: pointer;
-        border-radius: 8px;
-        transition: background-color 0.3s ease;
-      }
-      
-      .styled-button:hover {
-        background-color: #2F81CF;
-      }
-      
     </style>
   <script type="text/javascript">
     (function () {
@@ -151,9 +128,7 @@
         <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
 
-        <a href="./Html-Files/Doctor Experience.html" class="styled-button-link">
-          <button class="styled-button">Find a Doctor</button>
-        </a>
+        <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
       </ul>
       <div class="hamburger">
         <div class="line"></div>
diff --git a/index.css b/index.css
index fdd109a9..d1740b6e 100644
--- a/index.css
+++ b/index.css
@@ -458,7 +458,7 @@ select {
         width: 163vw;
         height: auto;
         position: fixed;
-        top:0px;
+        top:0;
         left:0;
     }
 

From 2ad27b43a91a358e0d6fb797404cfa3987c93cb3 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:04:53 +0530
Subject: [PATCH 05/16] changess made

---
 assets/css/styles.css |  1 +
 dex.html              | 28 +++++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 011119a3..161db68a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -99,6 +99,7 @@ img {
     box-sizing: border-box;
     padding: 0px;
     margin: 0;
+    margin-top: 25px;
     
     
   }
diff --git a/dex.html b/dex.html
index 00853ed1..04b0dcad 100644
--- a/dex.html
+++ b/dex.html
@@ -51,6 +51,29 @@
         background-color: #3fbcc0;
         z-index: 9999;
       }
+      .styled-button-link {
+        text-decoration: none;
+      }
+      
+      .styled-button {
+        background-color:  #4bb6b7;
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 8px;
+        transition: background-color 0.3s ease;
+      }
+      
+      .styled-button:hover {
+        background-color: #007aff;
+      }
+      
     </style>
   <script type="text/javascript">
     (function () {
@@ -128,7 +151,10 @@
         <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
 
-        <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
+        <a href="./Html-Files/Doctor Experience.html" class="styled-button-link">
+          <button class="styled-button">Find a Doctor</button>
+        </a>
+        
       </ul>
       <div class="hamburger">
         <div class="line"></div>

From 26ef11df998448b6bba88535ff89080f3049ba68 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:13:52 +0530
Subject: [PATCH 06/16] chanves made

---
 assets/css/styles.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 161db68a..cb08302d 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -344,6 +344,7 @@ body.dark-theme {
     font-size: calc(var(--h2-font-size) * 1.1);
     padding-left: 1rem;
     padding-right: 1rem;
+    
 
   }
   #home h1{
@@ -377,7 +378,7 @@ body.dark-theme {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     width: 50%;
-    margin-left: 40px;
+    margin-left: 10px;
   }
 
   .svg__img {
@@ -441,6 +442,9 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
   
   
 }
@@ -505,6 +509,7 @@ body.dark-theme {
     padding: 0px;
     width:120px;
     display: flexbox;
+    height: 50px;
   }
 }
 
@@ -617,6 +622,7 @@ body.dark-theme {
   max-width: 100%;
   height: auto;
   padding-left: 0;
+  margin-left: 10px;
 }
 
 /* Media Queries for Mobile Responsiveness */
@@ -637,7 +643,7 @@ body.dark-theme {
 
   .security img {
     padding-left: 1rem; 
-    margin-left: 110px;
+    margin-left: 10px;
   }
 }
 

From 2b40e8fd131d642eaa03089aec957e8c85b82a88 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:26:32 +0530
Subject: [PATCH 07/16] changes

---
 assets/css/styles.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index cb08302d..f0d30093 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -342,8 +342,8 @@ body.dark-theme {
   
   .section__title, .section__title-center {
     font-size: calc(var(--h2-font-size) * 1.1);
-    padding-left: 1rem;
-    padding-right: 1rem;
+    margin-right: 100px;
+    
     
 
   }
@@ -378,7 +378,7 @@ body.dark-theme {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     width: 50%;
-    margin-left: 10px;
+    margin-right: 100px;
   }
 
   .svg__img {
@@ -442,7 +442,7 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
-  height: 50px;
+  height: 20px;
   align-items: center;
   justify-content: center;
   

From 19ac9fc5ff32cb26e37bde12d4e7587ef1c269f1 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:30:14 +0530
Subject: [PATCH 08/16] chnages

---
 assets/css/styles.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index f0d30093..378cbf12 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -342,7 +342,7 @@ body.dark-theme {
   
   .section__title, .section__title-center {
     font-size: calc(var(--h2-font-size) * 1.1);
-    margin-right: 100px;
+    margin-right: 300px;
     
     
 
@@ -442,9 +442,7 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
-  height: 20px;
-  align-items: center;
-  justify-content: center;
+ 
   
   
 }

From d3666b5ee3286960d92ab0c2a2a471af2d3b79c9 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:50:42 +0530
Subject: [PATCH 09/16] made service page responsive

---
 assets/css/styles.css | 660 +++++++++++++++++++++++++++++++++++++++---
 index.css             | 126 +++++---
 style.css             |   4 +
 3 files changed, 708 insertions(+), 82 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index ab5ea8d6..011119a3 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -74,7 +74,6 @@ h1, h2, h3 {
   font-weight: var(--font-semi-bold);
   color: white;
   line-height: 1.5;
-  
 }
 
 ul {
@@ -93,6 +92,98 @@ img {
   padding-bottom: 100px;
 }
 
+/* Media Queries for Mobile Responsiveness */
+@media (max-width: 768px) {
+
+  *, ::before, ::after {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0;
+    
+    
+  }
+.header_container {
+    width: 163vw;
+    height: auto;
+}
+
+.nav_menu {
+    padding: 10px;
+    height: auto;
+}
+
+.nav-h {
+    height: 5.5rem;
+    width: -webkit-fill-available !important;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+}
+
+.container {
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column-reverse;
+    padding: 0px;
+}
+  body {
+    font-size: calc(var(--normal-font-size) * 0.9);
+    width:50%
+  }
+
+  img {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+
+  h1, h2, h3 {
+    font-size: calc(var(--normal-font-size) * 1.2); 
+  }
+}
+
+@media (max-width: 480px) {
+  .header_container {
+    width: 163vw;
+    height: auto;
+    padding-top: 0px;
+}
+
+.nav_menu {
+    padding: 10px;
+    height: auto;
+    padding-top: 0px;
+}
+
+.nav-h {
+    height: 5.5rem;
+    width: -webkit-fill-available !important;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 0px;
+}
+
+.container {
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column-reverse;
+    padding-top: 0px;
+}
+  body {
+    font-size: calc(var(--normal-font-size) * 0.8); 
+  }
+
+  img {
+    padding-left: 70px;
+    padding-bottom: 20px;
+  }
+
+  h1, h2, h3 {
+    font-size: calc(var(--normal-font-size) * 1.1); 
+}}
+
+
+
 /*=============== THEME ===============*/
 /*========== Variables Dark theme ==========*/
 body.dark-theme {
@@ -129,7 +220,7 @@ body.dark-theme {
   color: rgb(255, 255, 255);
   text-align: center;
   margin-bottom: var(--mb-1);
-  padding-left: 0px;
+  padding-left: 0;
 }
 
 .svg__color {
@@ -161,16 +252,17 @@ body.dark-theme {
 .header {
   width: 100%;
   background-color: var(--body-color);
-  
   top: 0;
   left: 0;
   z-index: var(--z-fixed);
   transition: .5s;
+  padding-top: 0px;
 }
+
 .header img {
-  width: 100px; /* Adjust the width as needed */
+  width: 100px; 
   height: 100px;
-  margin-left: 1px; /* Adjust the margin as needed */
+  margin-left: 1px; 
 }
 
 /*=============== NAV ===============*/
@@ -180,24 +272,26 @@ body.dark-theme {
   justify-content: space-between;
   align-items: center;
   padding-bottom: 200px;
+  padding-top: 0%;
+  position:fixed;
+  padding-top: 0px;
 }
 
-@media screen and (max-width: 767px) {
-  .nav__menu {
-    position: fixed;
-    background-color: var(--container-color);
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-    padding: 2.5rem 0;
-    width: 90%;
-    top: -100%;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    transition: .4s;
-    border-radius: 2rem;
-    z-index: var(--z-fixed);
-    padding-bottom: 100px;
-  }
+.nav__menu {
+  position: fixed;
+  background-color: var(--container-color);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  /* padding: 2.5rem 0; */
+  width: 90%;
+  top: -100%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  transition: .4s;
+  border-radius: 2rem;
+  z-index: var(--z-fixed);
+  padding-bottom: 100px;
+  padding-top: 0px;
 }
 
 .nav__list {
@@ -217,12 +311,10 @@ body.dark-theme {
   cursor: pointer;
 }
 
-/* Show menu */
 .show-menu {
   top: calc(var(--header-height) + 1rem);
 }
 
-/* Active link */
 .active-link {
   position: relative;
 }
@@ -238,11 +330,80 @@ body.dark-theme {
   border-radius: 50%;
 }
 
-/* Change background header */
+
 .scroll-header {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* Media Queries for Mobile Responsiveness */
+
+@media screen and (max-width: 768px) {
+  
+  .section__title, .section__title-center {
+    font-size: calc(var(--h2-font-size) * 1.1);
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+  }
+  #home h1{
+    margin-left: 90px;
+  }
+  .svg__img {
+    width: 200px;
+  }
+
+  .container {
+    max-width: 100%;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .nav {
+    padding-top: 0px; 
+    margin-top: 0; 
+  }
+
+  .header img {
+    width: 80px; 
+    height: 80px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .section__title, .section__title-center {
+    font-size: calc(var(--h2-font-size) * 0.9);
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    width: 50%;
+    margin-left: 40px;
+  }
+
+  .svg__img {
+    width: 150px;
+  }
+
+  .nav {
+    
+    margin-top: 0; 
+    padding-top: 0px;
+  }
+
+  .header img {
+    width: 60px; 
+    height: 60px;
+  }
+
+  .nav__menu {
+    
+    padding-top:0px;
+    border-radius: 1rem;
+    top: 0; 
+    margin: 0; 
+  }
+}
+
+
 /*=============== HOME ===============*/
 .home__container {
   row-gap: 3rem;
@@ -252,23 +413,24 @@ body.dark-theme {
   font-size: var(--biggest-font-size);
   font-weight: var(--font-bold);
   margin-bottom: var(--mb-0-75);
-  padding-left: 100px;
+  padding-left: 0px;
 }
 
 .home__description {
   margin-bottom: var(--mb-2);
-  padding-left: 100px;
-  
+  padding-left: 0px;
 }
+
 .home img {
-  max-width: 100%;
+  max-width: 50%;
   height: auto;
   margin-left: 500px; 
   margin-top: -350px;
   padding-top: 100px;
   display: flex;
-  padding-left: 250px;
+  
 }
+
 /*=============== BUTTONS ===============*/
 .button {
   display: inline-block;
@@ -278,14 +440,13 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
-  margin-top: 50px;
-  margin-left: 300px;
+  
   
 }
 
 .button:hover {
   background-color: #55a5ea;
-  color:black;
+  color: black;
 }
 
 .button__header {
@@ -299,7 +460,7 @@ body.dark-theme {
 }
 
 .button-link:hover {
-  color:#022a2d; ;
+  color: #022a2d;
 }
 
 .button-flex {
@@ -313,6 +474,70 @@ body.dark-theme {
   font-size: 1.5rem;
 }
 
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .home__title {
+    font-size: calc(var(--biggest-font-size) * 1.2);
+    padding-left: 1rem;
+    margin-left: 50px;
+  }
+
+  .home__description {
+    padding-left: 1rem;
+    display: block;
+    align-items: center;
+    margin-left: 50px;
+  }
+
+  .home img {
+    margin-left: 0;
+    margin-top: 0;
+    padding-top: 1rem;
+    display: block;
+    padding-left: 0;
+    margin-right: 0px;
+  }
+
+  .button {
+    padding: 0px;
+    width:120px;
+    display: flexbox;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .home__title {
+    font-size: calc(var(--biggest-font-size) * 1.1);
+    padding-left: 0.5rem;
+    
+  }
+
+  .home__description {
+    padding-left: 0.5rem;
+    display: block;
+    width: 50%;
+    margin-left: 50px;
+  }
+
+  .home img {
+    margin-left: 45px;
+    margin-top: 0;
+    padding-top: 1rem;
+    display: block;
+    padding-left: 0;
+  }
+
+  .button {
+    padding: .5rem 0.75rem;
+    margin-top: 1rem;
+    margin-left: 10px;
+  }
+}
+
+
 /*=============== ABOUT ===============*/
 .about__container {
   gap: 2.5rem;
@@ -321,15 +546,61 @@ body.dark-theme {
 .about__data {
   text-align: justify;
   padding-left: 100px;
+  margin-left: 50px;
 }
+
 .about img {
   max-width: 100%;
   height: auto;
-  margin-left: 0px; 
+  margin-left: 0;
   margin-top: 100px;
-  padding-left: 0px;
+  padding-left: 0;
+}
+
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .about__container {
+    gap: 1.5rem; 
+    width: 50%;
+  }
+
+  .about__data {
+    padding-left: 1rem; 
+    padding-right: 1rem; 
+    display: block;
+    margin-left: 70px;
+  }
+
+  .about img {
+    margin-top: 50px;
+    padding-left: 1rem; 
+    margin-left: 10px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .about__container {
+    gap: 1rem; 
+    width: 50%;
+  }
+
+  .about__data {
+    padding-left: 0.5rem; 
+    padding-right: 0.5rem; 
+    display: block;
+    margin-left: 50px;
+  }
+
+  .about img {
+    margin-top: 30px; 
+    padding-left: 0.5rem; 
+  }
 }
 
+
 /*=============== SECURITY ===============*/
 .security__container {
   gap: 2.5rem;
@@ -339,19 +610,63 @@ body.dark-theme {
   text-align: justify;
   padding-left: 100px;
   
+}
 
+.security img {
+  max-width: 100%;
+  height: auto;
+  padding-left: 0;
 }
-.security img{
-  padding-left: 0px;
+
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .security__container {
+    gap: 1.5rem; 
+    width: 50%;
+    
+  }
+
+  .security__data {
+    padding-left: 1rem; 
+    padding-right: 1rem; 
+    margin-left: 10px;
+  }
+
+  .security img {
+    padding-left: 1rem; 
+    margin-left: 110px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .security__container {
+    gap: 1rem; 
+  }
+
+  .security__data {
+    padding-left: 0.5rem; 
+    padding-right: 0.5rem; 
+    margin-left: 50px;
+  }
+
+  .security img {
+    padding-left: 0.5rem; 
+    margin-left: 30px;
+    margin-right: 50px;
+  }
 }
 
 /*=============== SERVICES ===============*/
 .services__container {
   padding-top: 1rem;
 }
-.service__container grid:hover{
-  background-color: rgb(0, 98, 255);
 
+/* Grid hover style correction */
+.service__container grid:hover {
+  background-color: rgb(0, 98, 255);
 }
 
 .services__data {
@@ -363,23 +678,24 @@ body.dark-theme {
   box-shadow: 0px 2px 6px hsla(var(--hue), 100%, 15%, 0.15);
   padding: 2rem 1.5rem;
   border-radius: 1rem;
-  position:relative;
+  position: relative;
   width: 100%;
   height: auto;
   text-align: justify;
-  
 }
+
 .services__data img {
   max-width: 100%; 
   height: auto;
 }
-.services__data:hover{
-  background-color: #55a5ea
+
+.services__data:hover {
+  background-color: #55a5ea;
 }
 
 .services__img {
   width: 100%;
-  height: 100%;
+  height: auto;
   justify-self: center;
   margin-bottom: var(--mb-0-5);
   object-fit: cover;
@@ -387,6 +703,42 @@ body.dark-theme {
   padding-top: 100px;
 }
 
+/* Media Queries for Mobile Responsiveness */
+
+/* Tablet and Mobile */
+@media screen and (max-width: 768px) {
+  .service__container{
+    width: 50%;
+  }
+  .services__data {
+    padding: 1.5rem 1rem; 
+    width: 50%;
+    margin-left: 40px;
+
+  }
+
+  .services__img {
+    padding-top: 50px; 
+  }
+  .services__data img {
+    max-width: 100%; 
+    height: auto;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .services__data {
+    padding: 1rem; 
+    width: 50%;
+  }
+
+  .services__img {
+    padding-top: 30px; 
+  }
+}
 
 
 
@@ -394,6 +746,7 @@ body.dark-theme {
 /*=============== APP ===============*/
 .app__container {
   gap: 2.5rem;
+  
 }
 
 .app__data {
@@ -411,6 +764,7 @@ body.dark-theme {
   justify-content: center;
   gap: .5rem;
   padding-left: 100px;
+
 }
 .section__title-center{
   padding-left: 100px;
@@ -419,6 +773,7 @@ body.dark-theme {
 /*=============== CONTACT ===============*/
 .contact__container {
   padding-bottom: 3rem;
+  
 }
 
 .contact__description {
@@ -439,6 +794,106 @@ body.dark-theme {
   font-weight: initial;
   color: var(--text-color);
 }
+@media screen and (max-width: 768px) {
+  .header_container{
+    padding-top: 0px;
+  }
+  .app__container {
+    gap: 1.5rem; 
+    width: 50%;
+  }
+
+  .app__description {
+    padding-left: 20px; 
+    padding-right: 20px; 
+  }
+
+  .app__buttons {
+    grid-template-columns: 1fr; 
+    padding-left: 20px; 
+    padding-right: 20px;
+    gap: 1rem; 
+  }
+
+  .section__title-center {
+    padding-left: 20px; 
+    padding-right: 20px; 
+  }
+
+  .contact__container {
+    padding-bottom: 2rem; 
+    width: 50%;
+  }
+
+  .contact__description {
+    padding-left: 20px;
+    padding-right: 20px; 
+  }
+
+  .contact__content {
+    row-gap: 1rem; 
+  }
+
+  .contact__address {
+    font-size: var(--small-font-size); 
+    text-align: center; 
+  }
+
+  .contact__information {
+    font-size: var(--small-font-size); 
+    text-align: center; 
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .header_container{
+    padding-top: 0px;
+  }
+  .app__container {
+    gap: 1rem; 
+    width: 50%;
+  }
+
+  .app__description {
+    padding-left: 10px; 
+    padding-right: 10px; 
+    margin-left: 50px;
+  }
+
+  .app__buttons {
+    grid-template-columns: 1fr; 
+    padding-left: 10px; 
+    padding-right: 10px; 
+    gap: 1rem; 
+  }
+
+  .section__title-center {
+    padding-left: 10px;
+    padding-right: 10px; 
+    margin-left: 80px;
+  }
+
+  .contact__container {
+    padding-bottom: 1.5rem; 
+    width: 50%;
+  }
+
+  .contact__description {
+    padding-left: 10px;
+    padding-right: 10px; 
+    margin-left: 50px;
+  }
+
+  .contact__content {
+    row-gap: 1.5rem; /
+  }
+
+  .contact__address, .contact__information {
+    font-size: var(--extra-small-font-size); 
+    text-align: center; 
+  }
+}
 
 /*=============== FOOTER ===============*/
 .footer {
@@ -495,6 +950,108 @@ body.dark-theme {
   font-size: var(--smaller-font-size);
   color: var(--text-color);
 }
+@media screen and (max-width: 768px) {
+  .footer {
+    padding-top: 3rem; 
+    width: 50%;
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__container {
+    padding-top: 3rem; 
+    row-gap: 1.5rem; 
+    width: 50%;
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__logo, .footer__title {
+    font-size: var(--h4-font-size); 
+    text-align: center; 
+  }
+
+  .footer__description, .footer__link {
+    font-size: var(--small-font-size); 
+    text-align: center;
+  }
+
+  .footer__links {
+    display: block; 
+    row-gap: 1rem; 
+  }
+
+  .footer__social {
+    flex-direction: column; 
+    align-items: center;
+    column-gap: 1rem; 
+  }
+
+  .footer__social-link {
+    font-size: 1.5rem;
+  }
+
+  .footer__copy {
+    margin-top: 3rem; 
+    font-size: var(--smaller-font-size); 
+}
+.subscribe-form {
+  flex-direction: column;
+  gap: 20px;
+}
+
+.subscribe-form input[type="email"], .subscribe-form button {
+  width: 100%;
+  font-size: 8px;
+}
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+  .footer {
+    padding-top: 2rem; 
+    width: 50%;
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__container {
+    padding-top: 2rem; 
+    row-gap: 1rem; 
+    margin-right: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .footer__logo, .footer__title {
+    font-size: var(--h5-font-size); 
+    text-align: center; 
+  }
+
+  .footer__description, .footer__link {
+    font-size: var(--extra-small-font-size); 
+    text-align: center; 
+  }
+
+  .footer__links {
+    row-gap: 0.75rem; /* Further reduce row-gap for very small screens */
+    
+  }
+
+  .footer__social {
+    flex-direction: row;
+    column-gap: 1rem;
+    margin-bottom: 1rem; 
+  }
+
+  .footer__social-link {
+    font-size: 1.25rem; 
+  }
+
+  .footer__copy {
+    margin-top: 2rem; 
+    font-size: var(--extra-small-font-size); 
+  }
+}
 
 /*=============== SCROLL UP ===============*/
 .scrollup {
@@ -606,10 +1163,14 @@ body.dark-theme {
   }
   .nav {
     height: calc(var(--header-height) + 1.5rem);
+    
+    
   }
   .nav__list {
     flex-direction: row;
     column-gap: 2.5rem;
+    
+    
   }
   .nav__toggle {
     display: none;
@@ -701,7 +1262,7 @@ h6 {
 
 .nav_link li {
   margin-right: 1px;
-  /* Add space between items */
+  padding-top:0px;
   padding: 5px 10px;
   display: inline-block;
   color: white;
@@ -733,7 +1294,7 @@ h6 {
   margin: auto;
   margin-top: 0px;
   /* Adjust this value to move the header down */
-  padding-top: 15px;
+  padding-top: 0px;
   z-index: 555;
 }
 .footer {
@@ -832,12 +1393,14 @@ h6 {
   }
 
   .footer .footer-row {
-    padding: 20px;
+    padding: 0px;
     gap: 1rem;
   }
 
   .footer-col form {
     display: block;
+    height: auto;
+    
   }
 
   .footer-col form :where(input, button) {
@@ -845,7 +1408,8 @@ h6 {
   }
 
   .footer-col form button {
-    margin: 10px 0 0 0;
+    margin-left:0px;
+    width: 100px;
   }
 }
 
diff --git a/index.css b/index.css
index 6cb4873a..91f5e5ff 100644
--- a/index.css
+++ b/index.css
@@ -528,31 +528,23 @@ select {
 
     .header_container {
         width: 163vw;
-        height: 6rem !important;
-        width: -webkit-fill-available !important;
-        justify-content: center;
-        flex-direction: row;
-        align-items: center;
-    }
-    .nav-h .nav_link{
-      display:none !important;
+        
     }
 
     .nav_menu {
         height: auto;
+        top:0;
+        left:0;
+       
     }
-  
-  #rd-logo {
-    display: table-row;
-    margin-right: -4rem !important;
-    margin-left: 25rem !important;
-  }
+
+   
 
     .container {
         flex-wrap: wrap;
         justify-content: center;
         flex-direction: column-reverse;
-        padding: 10px;
+        padding: 0px;
     }
 
     .about-service {
@@ -598,11 +590,46 @@ select {
         margin-bottom: 15px !important;
     }
 
-    footer {
-        width: 168vw !important;
-        padding: 40px !important;
-        margin: auto !important;
+    .footer-wrapper{
+        width: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin-right: 10px;
+    }
+    .other-columns {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 50%;
+    }
+
+    .footer-col {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 90px;
+        width: 50%;
+    }
+    #ss {
+        font-size: 0.75rem; 
+       width: 90%;
+      }
+    
+    
+    
+
+    .subscribe-form {
+        display: block;
+        gap: 10px;
+        
+    }
+    .social-wrapper{
+        padding-right: 80px;
+        width: 700px;
     }
+   
+
 
     #appointment.appointment.section-bg {
         margin: 15px;
@@ -616,10 +643,7 @@ select {
         width: 476px !important;
     }
 
-    .other-columns {
-        grid-template-columns: repeat(3, 3fr);
-
-    }
+    
 
     .form.php-email-form {
         align-content: flex-start;
@@ -633,10 +657,7 @@ select {
         width: 510px !important;
     }
 
-    .footer-col {
-        padding: 15px;
-        text-align: center;
-    }
+   
 }
 
 
@@ -777,23 +798,60 @@ body {
 
 
 @media (max-width:768px) {
+    .footer{
+        width: 10%;
+    }
     .other-columns {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
+        flex-wrap: wrap; 
+        display: grid;
+        grid-template-columns: repeat(2, 1fr); 
+        grid-gap: 1rem;
+        margin-right: 0px !important;
+        padding-right: 0px !important;
+      }
+      
+      .other-columns > * {
+        flex: 2 2 50%; 
+       
+      }
+      
+    
+      .footer-col p {
+        max-width: 100%;
+
+      }
+    
+      .footer-col form {
+        flex-direction: column; 
+
+      }
+    
+      .footer-col input {
+        margin-right: 100px; 
+        width: 100%;
+      }
 
     .footer-col {
         display: flex;
         flex-direction: row;
         align-items: center;
-        flex-wrap: nowrap;
+        flex-wrap: wrap;
         gap: 90px;
+        width: 100%;
+        margin-right: 0px !important;
+        padding-right: 0px !important;
     }
+    
 
-    .subscribe-form {
-        display: flex;
-        gap: 10px;
+    .subscribe-form input[type="email"], .subscribe-form button {
+        width: 100%;
+        font-size: 10px;
+    }
+
+    
+    .social-wrapper a div i {
+        width: 50%;
     }
 }
 
diff --git a/style.css b/style.css
index 59d1d254..667a7f7e 100644
--- a/style.css
+++ b/style.css
@@ -1468,6 +1468,8 @@ section {
     transform: none;
     width: 100%;
     border-radius: 0;
+    margin-right: 0px !important;
+        padding-right: 0px !important;
   }
 
   .footer .footer-row {
@@ -1481,6 +1483,7 @@ section {
 
   .footer-col form :where(input, button) {
     width: 100%;
+    display: inline-block;
   }
 
   .footer-col form button {
@@ -1990,3 +1993,4 @@ flex-direction: row;
 .st0 {
   fill: #2F7F81;
 }
+}
\ No newline at end of file

From f6feec20fbb372acac2e6a2da49b783cca7fa9ec Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sat, 27 Jul 2024 23:18:11 +0530
Subject: [PATCH 10/16] changes made

---
 assets/css/styles.css |   8 ++
 dex.html              | 214 +-----------------------------------------
 2 files changed, 9 insertions(+), 213 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 011119a3..89ec7aca 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -99,9 +99,13 @@ img {
     box-sizing: border-box;
     padding: 0px;
     margin: 0;
+    margin-top: 25px;
     
     
   }
+  .d-md-inline{
+    color: #000;
+  }
 .header_container {
     width: 163vw;
     height: auto;
@@ -110,6 +114,8 @@ img {
 .nav_menu {
     padding: 10px;
     height: auto;
+
+    
 }
 
 .nav-h {
@@ -118,6 +124,7 @@ img {
     justify-content: center;
     flex-direction: row;
     align-items: center;
+    
 }
 
 .container {
@@ -125,6 +132,7 @@ img {
     justify-content: center;
     flex-direction: column-reverse;
     padding: 0px;
+    
 }
   body {
     font-size: calc(var(--normal-font-size) * 0.9);
diff --git a/dex.html b/dex.html
index 1450fefc..f6d812ef 100644
--- a/dex.html
+++ b/dex.html
@@ -51,218 +51,6 @@
         background-color: #3fbcc0;
         z-index: 9999;
       }
-
-      .custom-button {
-        position: relative;
-        background-color: #3fbcc0a6;
-        color: white;
-        border: 2px solid #000;
-        border-radius: 10px;
-        overflow: hidden;
-        transition: color 0.3s ease;
-        z-index: 1;
-        padding: 10px 15px; /* Adjust padding to make the button bigger */
-        font-size: 14px; 
-        margin-top: -10px;
-      }
-      
-      .custom-button::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 100%;
-        background-color: #55a5ea;
-        transition: width 0.3s ease;
-        z-index: -1;
-      }
-      
-      .custom-button:hover {
-        color: #fff;
-      }
-      
-      .custom-button:hover::before {
-        width: 100%;
-      }
-
-      .home__container {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-      }
-      
-      .home__image {
-        width: 50%;
-      }
-      
-      .home__data {
-        text-align: left;
-        flex: 1;
-      }
-      
-
-      .about__container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      
-      .imt {
-        width: 40%;
-      }
-
-      .about__data {
-        text-align: left;
-        flex: 1; /* Allow text content to expand */
-        color: #fff; /* Set a default text color */
-        font-size: 16px; /* Set a default font size */
-        z-index: 1;
-        margin-left: 20px;
-      }
-      
-      .security__container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      
-      .security__image {
-        width: 40%; /* Adjust image width as needed */
-      }
-      
-      .security__data {
-        text-align: left;
-        flex: 1;
-      }
-      
-
-
-      .services__data {
-        display: flex;
-        flex-direction: column;
-        align-items: center; /* Center content horizontally */
-        text-align: center; /* Center text */
-      }
-
-      .services__data .button-link {
-        margin: 20px auto 0; /* Center button and add spacing */
-      }
-
-      .app__container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 50px 0;
-      }
-      
-      .app__data {
-        text-align: left;
-        flex-grow: 1; /* Allow the content to expand to fill available space */
-      }
-
-      .section__title-center {
-        text-align: center;
-        margin-right: 10px; /* Adjust the margin value as needed */
-      }
-      
-      .imt {
-        width: 30%;
-        padding-right: 60px; /* Add padding to the right */
-        margin-top: 20px; /* Move the image down */
-      }
-      
-
-      .contact__container {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        padding-top: 50px;
-        text-align: left;
-      }
-  
-      .contact__content {
-        flex: 1;
-      max-width: 45%;
-      display: flex;
-      flex-direction: column;
-      padding-left: 20px;
-      gap: 1rem;
-      padding-left: 100px;
-      color: white;
-      }
-
-      .contact__heading {
-        text-align: left;
-        margin-bottom: 0.5rem; /* Reduce space below heading */
-      }
-
-      .section__title-center {
-        position: relative;
-  right: 20px;
-      }
-  
-      .contact__description {
-        text-align: left;
-        margin-bottom: 1rem; /* Space below description */
-      }
-  
-      .contact__map {
-        flex: 1;
-        max-width: 70%;
-        margin-left: 10px;
-        margin-top: 20px;
-      }
-
-      .contact__map iframe {
-        width: 85%; /* Ensure iframe takes full width of its container */
-      }
-  
-      .contact__address {
-        display: flex;
-      align-items: center;
-      gap: 10px;
-      margin: 10px 0;
-      color: white;
-      }
-  
-      .contact__information {
-        font-weight: bold;
-        color: white;
-      }
-  
-      .button {
-        display: inline-block;
-        margin-top: 20px;
-        padding: 10px 20px;
-        background-color: #007bff;
-        color: white;
-        text-decoration: none;
-        border-radius: 5px;
-        text-align: center;
-      }
-  
-      .button:hover {
-        background-color: #0056b3;
-      }
-  
-      @media (max-width: 768px) {
-        .contact__container {
-          flex-direction: column;
-          align-items: center;
-        }
-  
-        .contact__content,
-        .contact__map {
-          max-width: 100%;
-        }
-  
-        .contact__map {
-          margin-left: 0;
-          margin-top: 20px;
-        }
-      }
     </style>
   <script type="text/javascript">
     (function () {
@@ -341,7 +129,7 @@
         <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
 
-        <a href="./Html-Files/Doctor Experience.html"><button class="custom-button">Find a Doctor</button></a>
+      
       </ul>
       <div class="hamburger">
         <div class="line"></div>

From 6c94d8d7bf488e2b281b2f3aab2e7eb8da4ee129 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sat, 27 Jul 2024 23:33:31 +0530
Subject: [PATCH 11/16] Revert "changes made"

This reverts commit 04a365f6c90d9a52ad0a412b594cb9284d54628c.
---
 assets/css/styles.css | 8 --------
 dex.html              | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 89ec7aca..011119a3 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -99,13 +99,9 @@ img {
     box-sizing: border-box;
     padding: 0px;
     margin: 0;
-    margin-top: 25px;
     
     
   }
-  .d-md-inline{
-    color: #000;
-  }
 .header_container {
     width: 163vw;
     height: auto;
@@ -114,8 +110,6 @@ img {
 .nav_menu {
     padding: 10px;
     height: auto;
-
-    
 }
 
 .nav-h {
@@ -124,7 +118,6 @@ img {
     justify-content: center;
     flex-direction: row;
     align-items: center;
-    
 }
 
 .container {
@@ -132,7 +125,6 @@ img {
     justify-content: center;
     flex-direction: column-reverse;
     padding: 0px;
-    
 }
   body {
     font-size: calc(var(--normal-font-size) * 0.9);
diff --git a/dex.html b/dex.html
index f6d812ef..1f51bb1c 100644
--- a/dex.html
+++ b/dex.html
@@ -129,7 +129,7 @@
         <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
 
-      
+       
       </ul>
       <div class="hamburger">
         <div class="line"></div>

From 1d9cf5824fd0d115f1f8fff78f6a8c831d2fe791 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:04:53 +0530
Subject: [PATCH 12/16] changess made

---
 assets/css/styles.css |  1 +
 dex.html              | 25 ++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 011119a3..161db68a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -99,6 +99,7 @@ img {
     box-sizing: border-box;
     padding: 0px;
     margin: 0;
+    margin-top: 25px;
     
     
   }
diff --git a/dex.html b/dex.html
index 1f51bb1c..50083b44 100644
--- a/dex.html
+++ b/dex.html
@@ -51,6 +51,29 @@
         background-color: #3fbcc0;
         z-index: 9999;
       }
+      .styled-button-link {
+        text-decoration: none;
+      }
+      
+      .styled-button {
+        background-color:  #4bb6b7;
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 8px;
+        transition: background-color 0.3s ease;
+      }
+      
+      .styled-button:hover {
+        background-color: #007aff;
+      }
+      
     </style>
   <script type="text/javascript">
     (function () {
@@ -129,7 +152,7 @@
         <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
 
-       
+        
       </ul>
       <div class="hamburger">
         <div class="line"></div>

From b9a06153b27470f7b15fcef4da136d513897fb14 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:13:52 +0530
Subject: [PATCH 13/16] chanves made

---
 assets/css/styles.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 161db68a..cb08302d 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -344,6 +344,7 @@ body.dark-theme {
     font-size: calc(var(--h2-font-size) * 1.1);
     padding-left: 1rem;
     padding-right: 1rem;
+    
 
   }
   #home h1{
@@ -377,7 +378,7 @@ body.dark-theme {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     width: 50%;
-    margin-left: 40px;
+    margin-left: 10px;
   }
 
   .svg__img {
@@ -441,6 +442,9 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
   
   
 }
@@ -505,6 +509,7 @@ body.dark-theme {
     padding: 0px;
     width:120px;
     display: flexbox;
+    height: 50px;
   }
 }
 
@@ -617,6 +622,7 @@ body.dark-theme {
   max-width: 100%;
   height: auto;
   padding-left: 0;
+  margin-left: 10px;
 }
 
 /* Media Queries for Mobile Responsiveness */
@@ -637,7 +643,7 @@ body.dark-theme {
 
   .security img {
     padding-left: 1rem; 
-    margin-left: 110px;
+    margin-left: 10px;
   }
 }
 

From d304e1f134dfc45a14b699e389017f5119ea175a Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:26:32 +0530
Subject: [PATCH 14/16] changes

---
 assets/css/styles.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index cb08302d..f0d30093 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -342,8 +342,8 @@ body.dark-theme {
   
   .section__title, .section__title-center {
     font-size: calc(var(--h2-font-size) * 1.1);
-    padding-left: 1rem;
-    padding-right: 1rem;
+    margin-right: 100px;
+    
     
 
   }
@@ -378,7 +378,7 @@ body.dark-theme {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     width: 50%;
-    margin-left: 10px;
+    margin-right: 100px;
   }
 
   .svg__img {
@@ -442,7 +442,7 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
-  height: 50px;
+  height: 20px;
   align-items: center;
   justify-content: center;
   

From 041970a6371e501c8bfda85b76c923b43189daf3 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Sun, 28 Jul 2024 00:30:14 +0530
Subject: [PATCH 15/16] chnages

---
 assets/css/styles.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index f0d30093..378cbf12 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -342,7 +342,7 @@ body.dark-theme {
   
   .section__title, .section__title-center {
     font-size: calc(var(--h2-font-size) * 1.1);
-    margin-right: 100px;
+    margin-right: 300px;
     
     
 
@@ -442,9 +442,7 @@ body.dark-theme {
   border-radius: 3rem;
   font-weight: var(--font-semi-bold);
   transition: .3s;
-  height: 20px;
-  align-items: center;
-  justify-content: center;
+ 
   
   
 }

From 74da47fb11d688999681c464a7e90d16702be298 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Thu, 8 Aug 2024 03:09:37 +0530
Subject: [PATCH 16/16] made changes

---
 Html-Files/Css-Files/styles.css |   2 +-
 assets/css/styles.css           | 487 ++++++++++++++++++++++----------
 dex.html                        | 151 +++++-----
 dex.js                          |   8 +
 style.css                       |  80 +++++-
 5 files changed, 499 insertions(+), 229 deletions(-)
 create mode 100644 dex.js

diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css
index 41a187f1..c38a3839 100644
--- a/Html-Files/Css-Files/styles.css
+++ b/Html-Files/Css-Files/styles.css
@@ -56,7 +56,7 @@ section::before {
     align-items: center;
     height: 60px;
     width: 100%;
-    padding: 0 20px;
+    padding-top: 0px;
 }
 
 .container {
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 378cbf12..fe093066 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -91,9 +91,54 @@ img {
   padding-top: 100px;
   padding-bottom: 100px;
 }
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+  align-items: flex-start; 
+}
 
-/* Media Queries for Mobile Responsiveness */
+.hamburger .line {
+  width: 25px;
+  height: 3px;
+  background-color: #ffffff;
+  margin: 3px 0;
+  margin-right: 419px;
+}
+
+/* Media Query for Mobile View */
 @media (max-width: 768px) {
+  .nav_link {
+    display: none;
+    flex-direction: column;
+    width: 50%;
+    position: absolute;
+    top: 60px;
+    left: 0;
+    background-color: #022a2d;
+  }
+
+  .nav_link li {
+    width: 100%;
+    text-align: left;
+    margin: 10px 0;
+  }
+
+  .hamburger {
+    display: flex;
+  }
+}
+
+  
+
+  .nav_link.active {
+    display: flex;
+    
+  }
+
+
+/* Media Queries for Mobile Responsiveness */
+/* @media (max-width: 768px) {
 
   *, ::before, ::after {
     box-sizing: border-box;
@@ -181,7 +226,7 @@ img {
 
   h1, h2, h3 {
     font-size: calc(var(--normal-font-size) * 1.1); 
-}}
+}} */
 
 
 
@@ -268,14 +313,14 @@ body.dark-theme {
 
 /*=============== NAV ===============*/
 .nav {
-  height: var(--header-height);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 200px;
   padding-top: 0%;
   position:fixed;
-  padding-top: 0px;
+ 
 }
 
 .nav__menu {
@@ -338,7 +383,7 @@ body.dark-theme {
 
 /* Media Queries for Mobile Responsiveness */
 
-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
   
   .section__title, .section__title-center {
     font-size: calc(var(--h2-font-size) * 1.1);
@@ -369,10 +414,10 @@ body.dark-theme {
     width: 80px; 
     height: 80px;
   }
-}
+} */
 
 /* Mobile */
-@media screen and (max-width: 480px) {
+/* @media screen and (max-width: 480px) {
   .section__title, .section__title-center {
     font-size: calc(var(--h2-font-size) * 0.9);
     padding-left: 0.5rem;
@@ -403,7 +448,7 @@ body.dark-theme {
     top: 0; 
     margin: 0; 
   }
-}
+} */
 
 
 /*=============== HOME ===============*/
@@ -424,7 +469,7 @@ body.dark-theme {
 }
 
 .home img {
-  max-width: 50%;
+  max-width: 100%;
   height: auto;
   margin-left: 500px; 
   margin-top: -350px;
@@ -432,6 +477,42 @@ body.dark-theme {
   display: flex;
   
 }
+@media (max-width: 768px) {
+  .home__title {
+    font-size: calc(var(--biggest-font-size) - 10px);
+    padding-left: 0px;
+    text-align: center;
+  }
+
+  .home__description {
+    padding-left: 0px;
+    text-align: center;
+  }
+
+  .home img {
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    padding-top: 20px;
+  }
+
+  .home__container {
+    row-gap: 2rem;
+  }
+}
+
+/* Media query for smaller mobile devices */
+@media (max-width: 480px) {
+  .home__title {
+    font-size: calc(var(--biggest-font-size) - 15px);
+  }
+
+  .home img {
+    max-width: 90%;
+    padding-top: 10px;
+  }
+}
 
 /*=============== BUTTONS ===============*/
 .button {
@@ -480,7 +561,7 @@ body.dark-theme {
 /* Media Queries for Mobile Responsiveness */
 
 /* Tablet and Mobile */
-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
   .home__title {
     font-size: calc(var(--biggest-font-size) * 1.2);
     padding-left: 1rem;
@@ -509,10 +590,10 @@ body.dark-theme {
     display: flexbox;
     height: 50px;
   }
-}
+} */
 
 /* Mobile */
-@media screen and (max-width: 480px) {
+/* @media screen and (max-width: 480px) {
   .home__title {
     font-size: calc(var(--biggest-font-size) * 1.1);
     padding-left: 0.5rem;
@@ -539,68 +620,58 @@ body.dark-theme {
     margin-top: 1rem;
     margin-left: 10px;
   }
-}
+} */
 
 
 /*=============== ABOUT ===============*/
 .about__container {
-  gap: 2.5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center; 
+  gap: 20px; 
 }
 
 .about__data {
-  text-align: justify;
-  padding-left: 100px;
-  margin-left: 50px;
+  flex: 1; 
 }
 
-.about img {
-  max-width: 100%;
+.img {
+  max-width: 50%; 
   height: auto;
-  margin-left: 0;
-  margin-top: 100px;
-  padding-left: 0;
 }
 
-/* Media Queries for Mobile Responsiveness */
 
 /* Tablet and Mobile */
-@media screen and (max-width: 768px) {
+@media (max-width: 768px) {
   .about__container {
-    gap: 1.5rem; 
-    width: 50%;
+    flex-direction: column;
+    align-items: center; 
   }
 
-  .about__data {
-    padding-left: 1rem; 
-    padding-right: 1rem; 
-    display: block;
-    margin-left: 70px;
-  }
-
-  .about img {
-    margin-top: 50px;
-    padding-left: 1rem; 
-    margin-left: 10px;
+  .img {
+    max-width: 100%;
+    margin-top: 20px; 
   }
 }
 
 /* Mobile */
 @media screen and (max-width: 480px) {
   .about__container {
-    gap: 1rem; 
-    width: 50%;
+    gap: 1.5rem; 
+    width: 100%;
   }
 
   .about__data {
-    padding-left: 0.5rem; 
-    padding-right: 0.5rem; 
+    padding-left: 1rem; 
+    padding-right: 1rem; 
     display: block;
-    margin-left: 50px;
+    margin-left: 10px;
   }
 
   .about img {
-    margin-top: 30px; 
-    padding-left: 0.5rem; 
+    margin-top: 50px;
+    padding-left: 1rem; 
+    margin-left: 10px;
   }
 }
 
@@ -629,7 +700,7 @@ body.dark-theme {
 @media screen and (max-width: 768px) {
   .security__container {
     gap: 1.5rem; 
-    width: 50%;
+    width: 100%;
     
   }
 
@@ -640,13 +711,13 @@ body.dark-theme {
   }
 
   .security img {
-    padding-left: 1rem; 
-    margin-left: 10px;
+    padding-left: 0rem; 
+    margin-left: 0px;
   }
 }
 
 /* Mobile */
-@media screen and (max-width: 480px) {
+/* @media screen and (max-width: 480px) {
   .security__container {
     gap: 1rem; 
   }
@@ -662,7 +733,7 @@ body.dark-theme {
     margin-left: 30px;
     margin-right: 50px;
   }
-}
+} */
 
 /*=============== SERVICES ===============*/
 .services__container {
@@ -711,7 +782,7 @@ body.dark-theme {
 /* Media Queries for Mobile Responsiveness */
 
 /* Tablet and Mobile */
-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
   .service__container{
     width: 50%;
   }
@@ -726,15 +797,15 @@ body.dark-theme {
     padding-top: 50px; 
   }
   .services__data img {
-    max-width: 100%; 
+    max-width: 50%; 
     height: auto;
     padding-right: 20px;
     padding-left: 20px;
   }
-}
+} */
 
 /* Mobile */
-@media screen and (max-width: 480px) {
+/* @media screen and (max-width: 480px) {
   .services__data {
     padding: 1rem; 
     width: 50%;
@@ -743,7 +814,7 @@ body.dark-theme {
   .services__img {
     padding-top: 30px; 
   }
-}
+} */
 
 
 
@@ -793,19 +864,60 @@ body.dark-theme {
   font-size: var(--small-font-size);
   font-weight: var(--font-semi-bold);
   color: var(--title-color);
+  display: flex;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
+/* .contact__map{
+  padding-top: 20px;
+  display: flexbox;
+} */
 
 .contact__information {
   font-weight: initial;
   color: var(--text-color);
 }
+.contact__container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start; 
+  gap: 20px; 
+}
+
+.contact__content {
+  flex: 1; 
+}
+
+.contact__map {
+  flex: 1; 
+  max-width: 100%;
+}
+
+.contact__map iframe {
+  width: 100%; 
+  height: 400px; 
+}
+
+/* Ensure responsiveness */
+@media (max-width: 768px) {
+  .contact__container {
+    flex-direction: column;
+    align-items: center; 
+  }
+
+  .contact__map iframe {
+    width: 100%;
+    height: 300px; 
+  }
+}
+
 @media screen and (max-width: 768px) {
   .header_container{
     padding-top: 0px;
   }
   .app__container {
     gap: 1.5rem; 
-    width: 50%;
+    width: 100%;
   }
 
   .app__description {
@@ -817,6 +929,8 @@ body.dark-theme {
     grid-template-columns: 1fr; 
     padding-left: 20px; 
     padding-right: 20px;
+    width: 200px;
+    height: auto;
     gap: 1rem; 
   }
 
@@ -827,7 +941,7 @@ body.dark-theme {
 
   .contact__container {
     padding-bottom: 2rem; 
-    width: 50%;
+    width: 100%;
   }
 
   .contact__description {
@@ -842,6 +956,8 @@ body.dark-theme {
   .contact__address {
     font-size: var(--small-font-size); 
     text-align: center; 
+    display: flex;
+    padding-left: 120px;
   }
 
   .contact__information {
@@ -856,53 +972,59 @@ body.dark-theme {
     padding-top: 0px;
   }
   .app__container {
-    gap: 1rem; 
-    width: 50%;
+    gap: 1.5rem; 
+    width: 100%;
   }
 
   .app__description {
-    padding-left: 10px; 
-    padding-right: 10px; 
-    margin-left: 50px;
+    padding-left: 20px; 
+    padding-right: 20px; 
   }
 
   .app__buttons {
     grid-template-columns: 1fr; 
-    padding-left: 10px; 
-    padding-right: 10px; 
+    padding-left: 20px; 
+    padding-right: 20px;
+    width: 200px;
+    height: auto;
     gap: 1rem; 
   }
 
   .section__title-center {
-    padding-left: 10px;
-    padding-right: 10px; 
-    margin-left: 80px;
+    padding-left: 20px; 
+    padding-right: 20px; 
   }
 
   .contact__container {
-    padding-bottom: 1.5rem; 
-    width: 50%;
+    padding-bottom: 2rem; 
+    width: 100%;
   }
 
   .contact__description {
-    padding-left: 10px;
-    padding-right: 10px; 
-    margin-left: 50px;
+    padding-left: 20px;
+    padding-right: 20px; 
   }
 
   .contact__content {
-    row-gap: 1.5rem; /
+    row-gap: 1rem; 
   }
 
-  .contact__address, .contact__information {
-    font-size: var(--extra-small-font-size); 
+  .contact__address {
+    font-size: var(--small-font-size); 
     text-align: center; 
+    display: flex;
+    padding-left: 120px;
   }
-}
+
+  .contact__information {
+    font-size: var(--small-font-size); 
+    text-align: center; 
+  }
+} 
 
 /*=============== FOOTER ===============*/
-.footer {
-  background-color: var(--first-color-lighten);
+/* .footer {
+  background-color: white;
   padding-bottom: 2rem;
   padding-top: 100px;
 }
@@ -954,8 +1076,8 @@ body.dark-theme {
   text-align: center;
   font-size: var(--smaller-font-size);
   color: var(--text-color);
-}
-@media screen and (max-width: 768px) {
+} */
+/* @media screen and (max-width: 768px) {
   .footer {
     padding-top: 3rem; 
     width: 50%;
@@ -1009,10 +1131,10 @@ body.dark-theme {
   width: 100%;
   font-size: 8px;
 }
-}
+} */
 
 /* Mobile */
-@media screen and (max-width: 480px) {
+/* @media screen and (max-width: 480px) {
   .footer {
     padding-top: 2rem; 
     width: 50%;
@@ -1038,7 +1160,7 @@ body.dark-theme {
   }
 
   .footer__links {
-    row-gap: 0.75rem; /* Further reduce row-gap for very small screens */
+    row-gap: 0.75rem; 
     
   }
 
@@ -1056,7 +1178,7 @@ body.dark-theme {
     margin-top: 2rem; 
     font-size: var(--extra-small-font-size); 
   }
-}
+} */
 
 /*=============== SCROLL UP ===============*/
 .scrollup {
@@ -1105,7 +1227,7 @@ body.dark-theme {
 
 /*=============== MEDIA QUERIES ===============*/
 /* For small devices */
-@media screen and (max-width: 360px) {
+ @media screen and (max-width: 360px) {
   .svg__img {
     width: 100%;
   }
@@ -1157,9 +1279,9 @@ body.dark-theme {
   .app__img {
     order: -1;
   }
-}
+} 
 
-@media screen and (min-width: 767px) {
+/* @media screen and (min-width: 767px) {
   body {
     margin: 0;
   }
@@ -1189,7 +1311,7 @@ body.dark-theme {
   .app__buttons {
     justify-content: initial;
   }
-}
+} */
 
 /* For large devices */
 @media screen and (min-width: 968px) {
@@ -1244,6 +1366,7 @@ body {
   font-family: "Open Sans", sans-serif;
   color: #fff;
   background-color: #000;
+  margin: 0;
 }
 
 a {
@@ -1282,69 +1405,124 @@ h6 {
   color: #55a5ea;
 }
 
-#header {
-  position: relative;
-  top: 12px;
-}
+
 
 .header_container {
   background-color: #022a2d;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  padding: 10px 0; 
+  align-items: center; 
   position: fixed;
   width: 100%;
   height: 85px;
-  margin: auto;
-  margin-top: 0px;
-  /* Adjust this value to move the header down */
-  padding-top: 0px;
-  z-index: 555;
+  z-index: 1000;
 }
-.footer {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 1280px;
-  width: 95%;
-  background: #3fbcc051;
-  border-radius: 6px;
+.footer-wrapper {
+  background-color: #3fbcc051;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  gap:30px
 }
 
-.footer .footer-row {
+.footer-columns {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 3.5rem;
-  padding: 60px;
+  width: 100%;
 }
 
-.footer-row .footer-col h4 {
-  color: #f0f0f0;
-  font-size: 1.2rem;
-  font-weight: 400;
+section {
+  flex: 1; 
+  margin: 20px;
 }
 
-.footer-col .links {
-  margin-top: 20px;
+.footer-col {
+  flex: 2; 
+  margin: 20px;
 }
 
-.footer-col .links li {
-  list-style: none;
+h4 {
+  font-size: 1.5rem;
   margin-bottom: 10px;
+  color: #bfbfbf;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  margin: 5px 0;
 }
 
-.footer-col .links li a {
+a {
   text-decoration: none;
   color: #bfbfbf;
+  font-size: 1rem;
+}
+
+.footer-col p {
+  margin: 10px 0;
 }
 
-.footer-col .links li a:hover {
+.subscribe-form input[type="email"] {
+  padding: 10px;
+  
+  margin-bottom: 10px;
+}
+
+.subscribe-form button {
+  padding: 10px 20px;
+  background-color: #005253;
   color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+.confirmation-message {
+  display: none;
+  color: green;
+  margin-top: 10px;
 }
 
+.footer-bottom {
+  background-color: #3fbcc051;
+  padding: 10px 20px;
+  text-align: center;
+}
+
+.footer-bottom-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-bottom-wrapper small {
+  margin: 10px 0;
+  margin-left: 200px;
+}
+
+.social-wrapper {
+  display: flex;
+  align-items: center;
+  margin-right: 300px;
+}
+
+.social-links {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.social-links a {
+  color: #ffffff;
+  font-size: 1.5rem;
+  text-decoration: none;
+}
 .footer-col p {
   margin: 20px 0;
   color: #bfbfbf;
@@ -1360,7 +1538,7 @@ h6 {
   height: 40px;
   border-radius: 6px;
   background: none;
-  width: 100%;
+  
   outline: none;
   border: 1px solid #7489c6;
   caret-color: #fff;
@@ -1375,54 +1553,70 @@ h6 {
 .footer-col form button {
   background: #fff;
   border: none;
-  color: #08434551;
+  color: #084345;
   padding: 10px 15px;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 1000;
   transition: 0.2s ease;
 }
-
+.other-columns ul a {
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: 0.85rem;
+}
 .footer-col form button:hover {
   background: #cecccc;
 }
-
+/* Mobile responsive styling */
 @media (max-width: 768px) {
-  .footer {
-    position: relative;
-    bottom: 0;
-    left: 0;
-    transform: none;
-    width: 100%;
-    border-radius: 0;
+  
+  .footer-bottom-wrapper {
+    flex-direction: column;
+    text-align: center;
   }
 
-  .footer .footer-row {
-    padding: 0px;
-    gap: 1rem;
+  .footer-bottom-wrapper small {
+    margin-left:  0;
   }
 
-  .footer-col form {
-    display: block;
-    height: auto;
-    
+  .social-wrapper {
+    margin-left: -290px;
   }
 
-  .footer-col form :where(input, button) {
+  .social-links {
+    
+    gap: 10px;
+    
+  }
+  .footer-columns {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); 
+    grid-gap: 20px; 
+  }
+  .footer-col form {
+    width: 250px;
+   
+  }
+  .footer-col input {
     width: 100%;
+    margin-right: 10px;
   }
-
   .footer-col form button {
-    margin-left:0px;
-    width: 100px;
+    font-size: small;
+    height: 40px;
   }
 }
 
-/*################----Back to top----################*/
-footer {
-  position: relative;
-  padding: 50px 0;
+@media (max-width: 480px) {
+  .social-links a {
+    font-size: 1.2rem;
+    justify-content: center;
+    
+  }
 }
+/*################----Back to top----################*/
+
 
 #back-to-top-container {
   position: fixed;
@@ -1452,3 +1646,4 @@ footer {
 #back-to-top:hover {
   transform: scale(1.1);
 }
+
diff --git a/dex.html b/dex.html
index 50083b44..9c002e49 100644
--- a/dex.html
+++ b/dex.html
@@ -9,7 +9,7 @@
   <!-- Bootstrap Icons CDN link -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
-  <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" />
   <link
       rel="stylesheet"
@@ -22,6 +22,7 @@
     />
     <!--=============== CSS ===============-->
     <link rel="stylesheet" href="assets/css/styles.css" />
+    
 
     <style>
       ::-webkit-scrollbar {
@@ -94,7 +95,7 @@
   <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
 
   <!-- CSS Files -->
-   <link rel="stylesheet" href="index.css">
+   
   <link href="Css-Files/animate.min.css" rel="stylesheet">
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
@@ -137,11 +138,11 @@
     <div class="loader"></div>
   </div>
   <!-- ############# Header ############# -->
-  <header class="header_container nav-h">
+  <header class="header_container nav-h"
     <div class="img">
       <img id="rd-logo" style="width: 90px; height: auto;" src="images/rd.png">
     </div>
-    <nav class="nav_menu">
+    <nav class="nav_menu"style="padding-top:0px">
       <ul class="nav_link vis-h">
         <li><a href="index.html"><i class="bi bi-house-door-fill"></i> Home</a></li>
         <li><a href="index.html#about"><i class="bi bi-info-circle-fill"></i> About</a></li>
@@ -206,10 +207,11 @@ <h2 class="section__title-center">
               delivery to your home or to the place where you are, with the best
               quality of delivery.
             </p>
-            <img src="assets/img/about.png" alt="about" class="imt"/>
           </div>
+          <img src="assets/img/about.png" alt="about" class="img"/>
         </div>
       </section>
+      
 
       <!--=============== SECURITY ===============-->
       <section class="security section container">
@@ -322,14 +324,14 @@ <h2 class="section__title-center">
           </div>
         </div>
       </section>
+      
     </main>
-
-  <footer>
-    <div class="footer-wrapper">
-      <div class="footer-columns">
-        <div class="other-columns">
+    <footer>
+      <div class="footer-wrapper">
+        <div class="footer-columns">
           <section>
-            <h4>Quick Links</h4><br>
+            <h4>Quick Links</h4>
+            <br>
             <ul class="links">
               <li><a href="index.html">Home</a></li>
               <li><a href="index.html#about">About Us</a></li>
@@ -339,8 +341,10 @@ <h4>Quick Links</h4><br>
               <li><a href="./faq.html">FAQ</a></li>
             </ul>
           </section>
+    
           <section>
-            <h4>Explore</h4><br>
+            <h4>Explore</h4>
+            <br>
             <ul class="links">
               <li><a href="Html-Files/appointment.html">Appointment</a></li>
               <li><a href="index.html#patient-portal">Patient Portal</a></li>
@@ -349,8 +353,10 @@ <h4>Explore</h4><br>
               <li><a href="index.html#contact">Location</a></li>
             </ul>
           </section>
+    
           <section>
-            <h4>Legal</h4><br>
+            <h4>Legal</h4>
+            <br>
             <ul class="links">
               <li><a href="Html-Files/customer_agreement.html">Customer Agreement</a></li>
               <li><a href="Html-Files/privacy_policy_page.html">Privacy Policy</a></li>
@@ -360,22 +366,58 @@ <h4>Legal</h4><br>
               <li><a href="#">Testimonials</a></li>
             </ul>
           </section>
-          
-       <section class="footer-col" >
-      <div>
-      <h4>RAPIDOC Newsletter</h4><br>
-      <p>
-        Subscribe to our newsletter for a weekly dose
-        of news, updates, helpful tips, and
-        exclusive offers.
-      </p>
-    </div>
-      <form action="#" class="subscribe-form">
-        <input type="email" placeholder="Your email" required>
-        <button type="submit" style="color: #005253;">SUBSCRIBE</button>
-      </form>
-      <p class="confirmation-message">Thank you for subscribing!</p>
-       </section>
+    
+          <section class="footer-col">
+            <h4>RAPIDOC Newsletter</h4>
+            <br>
+            <p>
+              Subscribe to our newsletter for a weekly dose
+              of news, updates, helpful tips, and
+              exclusive offers.
+            </p>
+            <form action="#" class="subscribe-form">
+              <input type="email" placeholder="Your email" required>
+              <button type="submit" style="color: #005253;">SUBSCRIBE</button>
+            </form>
+            <p class="confirmation-message">Thank you for subscribing!</p>
+          </section>
+        </div>
+    
+        
+      </div>
+    
+      <div class="footer-bottom">
+        <div class="footer-bottom-wrapper">
+          <small id="ss">
+            © <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
+            Reserved Made with ❤️ by RapiDoc
+          </small>
+          <div class="social-wrapper">
+            <div class="social-links">
+              <div style="margin-left: 300px;font-family: sans-serif;"><i>Follow Us&nbsp;:&nbsp;</i></div>
+              <div id="insta">
+                <a href="https://www.instagram.com" target="_blank">
+                  <i class="fab fa-instagram"></i>
+                </a>
+              </div>
+              <div id="twit">
+                <a href="https://www.twitter.com" target="_blank">
+                  <i class="bi bi-twitter-x"></i>
+                </a>
+              </div>
+              <div id="git">
+                <a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank">
+                  <i class="fab fa-github"></i>
+                </a>
+              </div>
+              <div id="linkd">
+                <a href="https://www.linkedin.com" target="_blank">
+                  <i class="fab fa-linkedin"></i>
+                </a>
+              </div>
+    
+
+ 
       
 
           <script>
@@ -425,47 +467,9 @@ <h4>RAPIDOC Newsletter</h4><br>
               }
             </script>
 
-        </div>
-      </div>
-    </div>
+       
    
-    <div class="footer-bottom">
-      <div class="footer-bottom-wrapper">
-        <small id="ss">© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
-          Reserved Made with ❤️ by RapiDoc</small>
-        <div class="social-wrapper">
-          <div class="social-links">
-            <div style="margin-left: 300px;font-family: sans-serif;"><i>Follow&nbsp;Us&nbsp;:&nbsp;</i></div>
-            <div  id="insta">
-            <a href="https://www.instagram.com" target="_blank">
-              <i class="fab fa-instagram"></i>
-            </a>
-          </div>
-          <div id="twit">
-            <a  href="https://www.twitter.com" target="_blank">
-              <i class="bi bi-twitter-x"></i>
-            </a>
-          </div>
-          <div id="git">
-            <a  href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank">
-              <i class="fab fa-github"></i>
-            </a>
-          </div>
-          <div id="linkd">
-            <a  href="https://www.linkedin.com" target="_blank">
-              <i class="fab fa-linkedin"></i>
-            </a>
-          </div>
-
-            <div id="fb"><a  href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></div>
-           <div id="phn"> <a  href="+91 1234567890" title="+91 1234567890" target="_blank"><i class="fa-solid fa-phone"></i></a></div>
-            <div id="mail1" ><a  href="info@rapidoc.com" target="_blank"><i class="fa-solid fa-envelope"></i></a></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </footer>
-
+    
   <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"
@@ -662,14 +666,9 @@ <h4>RAPIDOC Newsletter</h4><br>
         document.body.removeChild(loader);
       });
     });
-    const hamburger = document.querySelector('.hamburger');
-    const navbar = document.querySelector('.header_container');
-    const nav = document.querySelector('.nav_link');
-    hamburger.addEventListener('click', () => {
-      navbar.classList.toggle('nav-h');
-      nav.classList.toggle('vis-h');
-    })
+    
   </script>
+  <script src="dex.js"></script>
 
   <div id="progressBar"></div>
   <script>
diff --git a/dex.js b/dex.js
new file mode 100644
index 00000000..32c00184
--- /dev/null
+++ b/dex.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const hamburger = document.querySelector('.hamburger');
+    const navLinks = document.querySelector('.nav_link');
+  
+    hamburger.addEventListener('click', function() {
+      navLinks.classList.toggle('active');
+    });
+  });
\ No newline at end of file
diff --git a/style.css b/style.css
index 667a7f7e..588d13a5 100644
--- a/style.css
+++ b/style.css
@@ -388,8 +388,8 @@ h6 {
 }
 
 #header {
-  position: relative;
-  top: 12px;
+  position: absolute;
+  top: 0px;
 }
 
 .header_container {
@@ -402,8 +402,6 @@ h6 {
   width: 100%;
   height: 95px;
   margin: auto;
-  margin-top: 0px;
-  padding-top: 15px;
   z-index: 555;
 }
 
@@ -414,7 +412,7 @@ h6 {
   font-size: 24px;
   transform: translateX(120%);
   margin-right: 450px;
-  margin-top: 20px;
+  margin-top: 0px;
 }
 
 .hamburger {
@@ -459,7 +457,7 @@ h6 {
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: 85px;
+    
     left: 0;
     width: 100%;
     background-color: #022a2d;
@@ -1993,4 +1991,74 @@ flex-direction: row;
 .st0 {
   fill: #2F7F81;
 }
+@media (max-width: 768px) {
+  footer {
+      width: 100vw !important;
+      padding: 10px !important;
+      margin: 0px !important;
+  }
+
+  .other-columns {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+  }
+  body {
+      margin: 0;
+    }
+ 
+
+
+
+
+      .footer-col { 
+      flex-basis: 100%;
+      padding: 10px;
+      margin-right: 50px;
+      margin-top: 20px;
+      max-width: 470px;
+
+    }
+    .footer-col h4{
+      margin-left: 10px;
+      margin-right: 300px;
+    }
+  .footer-col p{
+      display: flex;
+  }
+
+  .footer-col form button {
+      margin-left:0px;
+      display: flexbox;
+      text-align: center;
+      align-items: center;
+      width: 50%;
+  }
+
+
+  .footer-bottom-wrapper {
+    flex-direction: column;
+    align-items: center;
+    
+  }
+
+  .footer-bottom-wrapper small {
+    margin-bottom: 10px;
+    margin-right: 0px;
+    
+  }
+  .social-links {
+      
+      gap: 10px;
+      margin-left: 0px;
+      padding: 0px;
+    }
+ 
+
+  .social-wrapper {
+    margin-top: 10px;
+    margin-right: 10px;
+  }
 }
\ No newline at end of file