Update style.css

style.css

@@ -39,7 +39,6 @@ section {
 
 .container {
   max-width: 1920px;
-  margin: auto;
   width: 100%;
   display: flex;
   justify-content: center;
@@ -57,6 +56,7 @@ header {
   left: 0;
   z-index: 1;
 }
+
 .logo {
   font-size: 2.5rem;
   font-weight: 700;
@@ -81,9 +81,9 @@ nav {
   display: flex;
   justify-content: end;
   align-items: center;
-  padding: 10px 20px;
+  padding: 10px 0 10px 20px;
   border-radius: 2rem;
-  width: 50%;
+  width: 60%;
 }
 
 .navbar {
@@ -124,7 +124,7 @@ nav {
 }
 .menu-icon div {
   display: block;
-  background: var(--text-color);
+  background: var(--bg-color);
   height: 2px;
   width: 23px;
   transition: 0.3s;
@@ -138,6 +138,7 @@ nav {
 .move .line3 {
   transform: rotate(45deg) translate(-5px, -5px);
 }
+
 .home {
   width: 60%;
   min-height: 500px;
@@ -207,7 +208,17 @@ nav {
   font-weight: 800;
   margin: 1rem 0;
 }
+
+.services {
+  width: 60%;
+  margin: 3rem auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .service-content {
+  width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
   justify-content: space-between;
@@ -246,6 +257,10 @@ nav {
   margin-top: 1rem;
 }
 
+.products .heading {
+  width: 60%;
+}
+
 .product-content {
   display: grid;
   grid-template-columns: repeat(3, 250px);
@@ -322,14 +337,31 @@ nav {
   background: var(--main-color);
   transition: 0.4s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
+
+iframe {
+  border-radius: 20px;
+  width: 100%;
+  height: 600px;
+}
+
+.input-book input {
+  padding: 2px 10px;
+  border: none;
+  background: transparent;
+  /* font-weight: 700; */
+}
+
+.input-book input:focus {
+  outline: none;
+}
+
 .team-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, auto));
-  gap: 1.5rem;
+  width: 60%;
 }
+
 .team-box img {
   width: 100%;
-  height: 400px;
+  max-height: 500px;
   object-fit: cover;
   border-radius: 10px;
 }
@@ -414,6 +446,7 @@ nav {
 }
 
 .book {
+  width: 60%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -497,6 +530,7 @@ nav {
   justify-content: space-between;
   gap: 1rem;
   margin-top: 3rem !important;
+  padding: 0 3rem;
 }
 .footer .logo {
   color: var(--main-color);
@@ -678,11 +712,47 @@ nav {
   font-size: 3.5rem;
 }
 
+.footer-content {
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer-boxes {
+  width: 60%;
+  display: flex;
+  justify-content: space-between;
+}
+
 @media (max-width: 1500px) {
   .header-container {
     width: 80%;
   }
 
+  .home {
+    width: 80%;
+  }
+
+  .services {
+    width: 80%;
+  }
+
+  .team-content {
+    width: 80%;
+  }
+
+  .products .heading {
+    width: 80%;
+  }
+
+  .review {
+    width: 80%;
+  }
+
+  .book {
+    width: 80%;
+  }
+
   .caption h1 {
     font-size: 1.2rem;
   }
@@ -713,13 +783,13 @@ nav {
   .printer div h1:last-child {
     font-size: 2.5rem;
   }
+
+  iframe {
+    height: 500px;
+    width: 80%;
+  }
 }
 @media (max-width: 1080px) {
-  .container {
-    width: 90%;
-    margin: 0 auto;
-  }
-
   .header-container {
     width: 90%;
   }
@@ -731,6 +801,14 @@ nav {
     grid-template-columns: repeat(3, 1fr);
     padding: 40px;
   }
+  iframe {
+    width: 80%;
+    height: 350px;
+  }
+
+  .book {
+    width: 100%;
+  }
 }
 @media (max-width: 875px) {
   section {
@@ -739,6 +817,14 @@ nav {
   .home-text h1 {
     font-size: 2.5rem;
   }
+
+  iframe {
+    width: 100%;
+  }
+
+  .service-content {
+    width: 80%;
+  }
 }
 @media (max-width: 770px) {
   .home {
@@ -775,32 +861,44 @@ nav {
   .footer {
     grid-template-columns: repeat(3, auto);
   }
+
+  .footer-content {
+    width: 100%;
+    padding: 0 20px;
+  }
+
+  .footer-boxes {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 @media (max-width: 700px) {
-  header {
-    top: 15px;
+  .header-container {
+    width: 100%;
   }
+
   nav {
-    padding: 14px 20px;
+    padding: 14px 10px;
   }
   .logo {
-    font-size: 1.25rem;
+    font-size: 2.25rem;
+    padding: 0 10px;
   }
   .menu-icon {
     display: flex;
   }
   .navbar {
     position: absolute;
-    top: 110%;
-    left: 50%;
+    top: 100%;
+    right: -20%;
     transform: translate(-50%);
-    width: 90vw;
-    background: var(--text-color);
+    width: 40vw;
+    background: var(--main-color);
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
-    border-radius: 1rem;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
   }
@@ -812,6 +910,22 @@ nav {
     display: block;
     margin: 1rem 0;
   }
+
+  iframe {
+    height: 305px;
+  }
+
+  header {
+    padding: 12px 20px;
+  }
+
+  .service-content {
+    justify-content: center;
+  }
+
+  .team-box p {
+    text-align: justify;
+  }
 }
 @media (max-width: 500px) {
   .heading h2 br {
@@ -827,6 +941,24 @@ nav {
   .footer {
     grid-template-columns: 1fr;
   }
+
+  iframe {
+    height: 200px;
+  }
+
+  .service-content {
+    grid-template-columns: repeat(auto-fit, minmax(auto, 100%));
+    padding: 50px 20px;
+  }
+
+  .footer-content {
+    display: block;
+  }
+
+  .home-img {
+    width: 80%;
+    margin: 0 10%;
+  }
 }
 @media (max-width: 380px) {
   .home {
@@ -869,20 +1001,3 @@ nav {
     transform: translateX(0px);
   }
 }
-
-iframe {
-  border-radius: 20px;
-  width: 100%;
-  height: 600px;
-}
-
-.input-book input {
-  padding: 2px 10px;
-  border: none;
-  background: transparent;
-  font-weight: 700;
-}
-
-.input-book input:focus {
-  outline: none;
-}