Merge pull request 'completed assignment' (#1) from dev into main

Reviewed-on: #1
Reviewed-by: Rishab Kumar <rishabh.kumar@digimantra.com>

css/contact.css

@@ -0,0 +1,291 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+:root {
+  --main-color: #f75d2f;
+  --dark-color: #f84812;
+  --step-color: #ced7e0;
+  --step-size: 32px;
+  --steps: 4;
+  --progress-width: calc((var(--steps) - 1) / var(--steps) * 100%);
+}
+
+/* contact */
+
+.contact-container {
+  font-family: "Inter", serif;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  gap: 120px;
+  margin: 40px 0px;
+  width: 100%; 
+} 
+
+.contact-para i{
+background-color: #f75d2f;
+color: #fff;
+padding: 8px;
+margin-right: 10px;
+border-radius: 100%;
+}
+
+h1 {
+  font-weight: 700;
+  font-family: "Poppins", serif;
+  text-align: center;
+  margin: 20px 0px;
+}
+
+h3 {
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  font-size: clamp(1rem, 2vw + 1rem, 1.25rem);
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+input,
+textarea {
+  outline-color: var(--main-color);
+  border: 1px solid lightgray;
+  padding: 8px 16px;
+  border-radius: 4px;
+  width: 100%;
+  font-size: 1rem;
+  text-align: start;
+}
+
+input[type="tel"] {
+  direction: inherit;
+}
+
+textarea {
+  resize: none;
+}
+
+select {
+  width: 200px;
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  color: #333;
+  outline: none;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 16px;
+  padding: 8px 16px;
+  background-color: var(--main-color);
+  color: #fff;
+  font-size: 0.875rem;
+  transition: 0.3s;
+}
+
+button:active,
+button:hover {
+  background-color: var(--dark-color);
+}
+
+button:disabled {
+  opacity: 0.8;
+}
+
+button:focus {
+  outline-color: #333;
+}
+
+button[type="submit"] {
+  background-color: #333;
+}
+
+button[type="submit"]:hover,
+button[type="submit"]:active {
+  background-color: #444;
+}
+
+form {
+  margin-block: auto;
+}
+
+.error-message {
+  color: red;
+  font-weight: 700;
+}
+
+/* form styles */
+
+.form-wizard {
+  background-color: #fff;
+  padding: 1.5rem;
+  height: 700px;
+  border-radius: 8px;
+  width: min(500px, 90%);
+  margin: 0px 50px;
+  box-shadow: 0 4px 16px rgba(167, 21, 84, 0.1);
+}
+
+.progress-container {
+  position: relative;
+}
+
+.progress-container::before {
+  content: "";
+  height: 4px;
+  width: var(--progress-width);
+  background-color: var(--step-color);
+  position: absolute;
+  top: calc(var(--step-size) / 2);
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.progress-container .progress {
+  height: 4px;
+  width: var(--progress-width);
+  background-color: var(--main-color);
+  position: absolute;
+  top: calc(var(--step-size) / 2);
+  left: 50%;
+  translate: -50% -50%;
+  z-index: 2;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: 0.3s;
+}
+
+/* if page is rtl adjust the transform origin */
+html[dir="rtl"] .progress-container .progress {
+  transform-origin: right;
+}
+
+.progress-container ol {
+  list-style-type: none;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  counter-reset: step-number;
+  position: relative;
+  z-index: 3;
+}
+
+.progress-container li {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--step-color);
+  transition: 0.3s linear 0.3s;
+  text-align: center;
+  font-size: 0;
+}
+
+.progress-container li::before {
+  counter-increment: step-number;
+  content: counter(step-number);
+  background-color: var(--step-color);
+  width: var(--step-size);
+  height: var(--step-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #fff;
+  transition: 0.3s linear 0.3s;
+  font-size: 1rem;
+}
+
+@media (min-width: 480px) {
+  .progress-container li {
+    font-size: 1rem;
+    gap: 8px;
+  }
+}
+
+.progress-container li:where(.done, .current) {
+  color: #333;
+  font-weight: 500;
+}
+
+.progress-container li.done::before {
+  background-color: var(--main-color);
+}
+
+.progress-container li.current::before {
+  background-color: var(--main-color);
+  box-shadow: 0 0 0 3px rgba(167, 21, 84, 0.25);
+}
+
+.steps-container {
+  display: flex;
+  overflow: hidden;
+}
+
+.step {
+  flex: 1 0 100%;
+  /* padding: 24px 8px; */
+  opacity: 0;
+  transition: opacity 0.3s;
+  height: fit-content;
+  display: grid;
+  gap: 8px;
+}
+
+.step .reset {
+  padding: 10px;
+  background-color: #444;
+  color: white;
+}
+
+.step .reset:hover {
+  background-color: #333;
+}
+
+.step.current {
+  opacity: 1;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 28px;
+  padding-inline: 8px;
+}
+
+.controls button {
+  flex: 1;
+}
+
+.completed {
+  text-align: center;
+}
+
+.completed h3 {
+  margin-bottom: 8px;
+}
+
+.completed svg {
+  width: 100px;
+  height: 100px;
+  stroke: yellowgreen;
+}
+
+.completed:not([hidden]) ~ * {
+  display: none;
+}
+
+
+@media (max-width:768px) {
+ .contact-container{
+  flex-direction: column;
+  flex-wrap: wrap;
+ }
+  
+}

css/layout.css

@@ -0,0 +1,265 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap");
+/* card styling */
+
+.card-container {
+  margin: auto;
+  padding: 20px;
+  max-width: 1200px;
+  box-sizing: border-box;
+}
+
+.card-item-container {
+  margin: 20px 80px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 60px;
+}
+
+.card-container-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 30px 0px;
+  font-family: "Poppins", serif;
+  font-weight: bold;
+  text-align: center;
+}
+
+.card-container-title h2 {
+  font-size: 3rem;
+}
+
+.card-container-title span {
+  color: #f75d2f;
+}
+
+.card-item .card-icon {
+  padding: 20px;
+  background-color: black;
+  /* background-color: #f75d2f; */
+  text-align: center;
+}
+.card-item .card-icon i {
+  /* color: black; */
+  color: #f75d2f;
+  font-size: 30px;
+}
+.card-item {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.3s ease;
+  max-width: 400px;
+  gap: 30px;
+  box-sizing: border-box;
+}
+
+.card-item:hover {
+  transform: translateY(-10px);
+}
+
+.card-item img {
+  width: 100%;
+  height: auto;
+}
+
+.card-item h3 {
+  padding: 10px 15px;
+  font-size: 1.5rem;
+  font-weight: bolder;
+  text-transform: capitalize;
+  color: #333;
+  text-align: center;
+  font-family: "Poppins", serif;
+}
+
+.card-item p {
+  font-family: "Inter", serif;
+  padding: 0 15px 15px;
+  font-size: 1rem;
+  color: #666;
+}
+
+/* Responsive Design of cards section */
+@media (max-width: 768px) {
+  .card-item {
+    max-width: 100%;
+    margin: 10px 0px;
+  }
+
+  .card-container-title h2 {
+    font-size: 2rem;
+    flex-wrap: wrap;
+    max-width: 90%;
+  }
+
+  .card-item-container {
+    gap: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-item {
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
+}
+
+/* MEET OUR TEAM */
+.team-title {
+  font-family: "Poppins", serif;
+  text-align: center;
+}
+
+.team-title h2 {
+  font-size: 3rem;
+}
+
+.team-title span {
+  color: #f75d2f;
+}
+
+.team-section {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-family: "Arima", serif;
+  gap: 40px;
+}
+
+.team-item-row {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+}
+
+.team-item {
+  text-align: center;
+}
+
+.team-item img:hover {
+  cursor: pointer;
+  transition: 0.8s ease-out;
+  transform: scale(1.1);
+}
+
+@media (max-width: 768px) {
+  .team-title h2 {
+    font-size: 1.8rem;
+  }
+
+  .team-section {
+    gap: 20px;
+  }
+
+  .team-item-row {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+/* PRICING */
+.price-container {
+  margin: 60px 0px;
+}
+
+.pricing-title h2 {
+  color: black;
+  font-size: 3rem;
+  font-family: "Poppins", serif;
+  text-align: center;
+}
+
+.pricing-title span {
+  color: #f75d2f;
+}
+
+.price-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 60px;
+}
+
+.price-col {
+  font-family: "Arima", serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: #1f283b;
+  padding: 20px 40px;
+  border-radius: 20px;
+  color: #fff;
+}
+
+.price-col p {
+  font-size: 22px;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  /* color: #f75d2f; */
+  color: #f75d2f;
+  font-weight: bolder;
+}
+
+.price-col h3 {
+  font-size: 44px;
+  text-transform: capitalize;
+  margin: 20px 0 40px;
+  font-weight: 500;
+}
+
+.price-col span {
+  font-size: 16px;
+}
+
+.price-col ul {
+  margin: 20px 0px;
+  color: #ddd;
+  list-style: none;
+}
+
+.price-col ul li {
+  margin: 15px 0px;
+  padding-right: 40px;
+}
+
+.price-col ul li::before {
+  content: "\2022";
+  font-weight: bold;
+  margin-right: 8px;
+  color: #f75d2f;
+  margin-right: 8px;
+}
+
+.price-col button {
+  width: 100%;
+  padding: 14px 0px;
+  background: transparent;
+  color: #fff;
+  font-size: 15px;
+  border: 1px solid #f75d2f;
+  border-radius: 6px;
+  margin-top: 30px;
+  cursor: pointer;
+  transition: background 0.5s;
+}
+
+.price-col button:hover {
+  background-color: #f75d2f;
+}
+
+@media (max-width: 768px) {
+  .price-col {
+    flex-wrap: wrap;
+  }
+
+  .price-row {
+    flex-direction: column;
+  }
+}

css/style.css

@@ -0,0 +1,394 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  scroll-behavior: smooth;
+}
+header {
+  position: relative;
+  height: 80vh;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
+    url("/assets/banner.jpeg") center/cover no-repeat;
+  color: white;
+}
+
+/* NAVBAR */
+
+.logo img {
+  height: 60px;
+}
+
+nav {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 20px 40px;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  font-family: "Poppins", serif;
+  gap: 50px;
+}
+
+nav ul li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+nav ul li a {
+  text-decoration: none;
+  color: white;
+  font-weight: bold;
+  transition: color 0.3s;
+}
+
+nav ul li a:hover {
+  color: #f5511f;
+  transition: 0.3s;
+}
+
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.hamburger div {
+  width: 25px;
+  height: 3px;
+  background-color: white;
+  margin: 4px 0;
+}
+
+/* HERO */
+
+.hero-section {
+  padding: 50px 20px;
+  height: auto;
+  min-height: 600px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.hero-left {
+  max-width: 800px;
+  text-align: left;
+  color: white;
+  margin-bottom: 20px;
+}
+
+.hero-left h1 {
+  font-size: 3rem;
+  margin: 0 0 20px 0;
+}
+
+.hero-left p {
+  font-size: 1.2rem;
+  line-height: 1.5;
+  margin: 20px 0;
+}
+
+.hero-button {
+  display: inline-block;
+  padding: 15px 30px;
+  background-color: #f5511f;
+  color: white;
+  font-size: 1.2rem;
+  font-weight: bold;
+  opacity: 0.9;
+  text-decoration: none;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.hero-button:hover {
+  opacity: 1;
+  background-color: #e44b1a;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+}
+
+.hero-section img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+  .hero-section {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .hero-left {
+    max-width: 100%;
+  }
+
+  .hero-left h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero-left p {
+    font-size: 1rem;
+  }
+
+  .hero-button {
+    font-size: 1rem;
+    padding: 10px 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-left h1 {
+    font-size: 2rem;
+  }
+
+  .hero-left p {
+    font-size: 0.9rem;
+  }
+
+  .hero-button {
+    font-size: 0.9rem;
+    padding: 8px 15px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .hero-section img {
+    display: none;
+    width: 100px;
+    background-color: red;
+  }
+
+  .hero-left {
+    margin-bottom: 300px;
+  }
+}
+
+/* CONTACT BUTTON */
+
+.button {
+  border-radius: 20px;
+  background-color: #f75d2f;
+  border: none;
+  color: #ffffff;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px 20px;
+  width: 180px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.button span {
+  cursor: pointer;
+
+  position: relative;
+  transition: 0.5s;
+}
+
+.button span:after {
+  content: "\00bb";
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.button:hover span {
+  padding-right: 25px;
+}
+
+.button:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+@media (max-width: 768px) {
+  nav ul {
+    display: none;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.8);
+    position: absolute;
+    top: 60px;
+    right: 40px;
+    padding: 10px 20px;
+    border-radius: 5px;
+  }
+
+  nav ul.active {
+    display: flex;
+  }
+
+  .hamburger {
+    display: flex;
+  }
+
+  .hero h1 {
+    font-size: 2rem;
+  }
+
+  .hero p {
+    font-size: 1rem;
+  }
+
+  .hero .cta {
+    font-size: 1rem;
+  }
+  .button {
+    width: 150px;
+  }
+}
+
+/* FEATURED SECTION */
+.featured-section-container {
+  background-color: #f1f6fd;
+  display: flex;
+  justify-content: "center";
+  align-items: center;
+  flex-direction: column;
+}
+
+.section-title {
+  font-family: "Poppins", serif;
+}
+
+.section-title span {
+  color: #f75d2f;
+  font-weight: bold;
+}
+
+.section-title h2 {
+  font-size: 3rem;
+  color: #444;
+}
+.featured-section {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 40px;
+  margin-top: 15px;
+}
+
+.featured-section .fs-row {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+}
+
+.featured-section .fs-row img {
+  width: 200px;
+  height: auto;
+}
+
+.featured-section .fs-row img:hover {
+  transition: transform 2s ease-in-out;
+  cursor: pointer;
+  filter: grayscale(100%);
+}
+
+@media (max-width: 768px) {
+  .section-title h2 {
+    font-size: 2rem;
+  }
+
+  .featured-section .fs-row img {
+    width: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .section-title h2 {
+    font-size: 1.5rem;
+  }
+
+  .featured-section img {
+    width: 120px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+/* footer styling */
+
+.footer {
+  font-family: "Poppins", serif;
+  background-color: black;
+  color: #fff;
+  padding: 20px 0;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.footer-section {
+  margin: 10px;
+}
+
+.footer-section h3 {
+  border-bottom: 2px solid #555;
+  color: #f5511f;
+  padding-bottom: 5px;
+  margin-bottom: 10px;
+}
+
+.footer-section ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.footer-section ul li {
+  margin: 5px 0;
+}
+
+.footer-section ul li a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.footer-section ul li a:hover {
+  text-decoration: underline;
+}
+
+.footer-bottom {
+  margin: auto;
+  text-align: center;
+  margin-top: 20px;
+  border-top: 1px solid #555;
+  width: 80%;
+  padding-top: 10px;
+}
+
+@media (max-width: 768px) {
+  .footer-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .footer-section {
+    text-align: center;
+  }
+}

css/swiper.css

@@ -0,0 +1,228 @@
+/* WHAT WE DO */
+.swipecontainer .section-title {
+  text-align: center;
+  margin: 10px 0px;
+}
+.swipecontainer .section-title h2 {
+  margin: 0px 0px;
+}
+
+.swipecontainer .section-title p {
+  font-size: 1.1rem;
+  margin-top: 10px;
+  margin-bottom: 50px;
+}
+
+.swipecontainer {
+  width: 100%;
+  overflow: hidden;
+  background-color: #f8f9fa;
+  margin: 50px 0px;
+  padding: 40px 0px;
+}
+
+.swiper {
+  display: flex;
+  justify-content: center;
+}
+
+.swiper-wrapper {
+  width: 100%;
+  transition-timing-function: linear !important;
+}
+
+.swiper-slide {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: grab;
+  max-width: 300px;
+  height: 300px;
+  user-select: none;
+}
+
+.swiper-slide:hover {
+  border-radius: 20px;
+
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+}
+
+.swiper-slide img {
+  border-radius: 20px;
+  width: 300px;
+  height: 300px;
+  object-fit: cover;
+  pointer-events: none;
+  border-radius: 12px;
+}
+
+.caption {
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  max-width: 100%;
+  height: 60px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  transform: translateY(100%);
+  transition: transform 0.5s ease;
+}
+
+.swiper-slide:hover .caption {
+  transform: translateY(0);
+}
+
+.caption h1 {
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+  margin: auto;
+}
+
+.caption p {
+  font-size: 0.9rem;
+  margin: 0;
+  color: #ccc;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@media (max-width: 768px) {
+  .swipecontainer .section-title h2 {
+    font-size: 2.5rem;
+  }
+}
+
+/* FEATURED PROJECTS */
+
+.featured-projects-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  max-width: 100%;
+}
+
+.image-slider {
+  width: 60%;
+}
+
+.image-slider .slick-slide {
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+}
+
+.image-slider img {
+  width: 300px;
+  height: 300px;
+  object-fit: cover;
+}
+
+.content-slider {
+  width: 35%;
+  padding: 10px;
+  background-color: white;
+  border-radius: 8px;
+  height: 300px;
+  overflow: hidden;
+}
+
+.content-slider .slick-content {
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.content-slider .slide {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+}
+
+.content-slider .slide h2 {
+  font-size: 2rem;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.slide {
+  max-width: 100%;
+}
+
+.content-slider .slide p {
+  font-size: 17px;
+  color: #333;
+}
+
+.content-slider .slick-slide {
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.content-slider .slick-active {
+  opacity: 1;
+}
+
+/* featured projects section title */
+
+.project-section-title {
+  text-align: center;
+  font-family: "Poppins", serif;
+  margin: 10px 0px;
+}
+.project-section-title h2 {
+  margin: 0px 0px;
+  font-size: 3rem;
+}
+
+.project-section-title span {
+  color: #f75d2f;
+}
+
+.project-section-title p {
+  font-size: 1.1rem;
+  margin-top: 10px;
+  margin-bottom: 50px;
+}
+
+.slick-images img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media (min-width: 769px) and (max-width: 1400px) {
+  .slick-images img {
+    width: 200px;
+    height: 300px;
+    gap: 80px;
+  }
+}
+
+@media (max-width: 768px) {
+  .featured-projects-container {
+    display: none;
+  }
+}

index.html

@@ -0,0 +1,681 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Digital Marketing Company</title>
+    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/layout.css" />
+    <link rel="stylesheet" href="/css/swiper.css" />
+    <link rel="stylesheet" href="/css/contact.css" />
+    <link rel="icon" href="/assets/DigiMantraLogo.png" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <!-- Swiper JS -->
+</head>
+
+<body>
+    <!--NAVBAR AND HERO -->
+    <header>
+        <!-- NAVBAR  -->
+        <div data-aos="fade-down" data-aos-delay="50" data-aos-duration="1000">
+            <nav>
+                <div class="logo">
+                    <img src="/assets/DigiMantraLogo.png" alt="" />
+                </div>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#services">Services</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#pricing">Pricing</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+                <div>
+                    <button class="button"><span>Contact Us </span></button>
+                </div>
+                <div class="hamburger" onclick="toggleMenu()">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                </div>
+            </nav>
+        </div>
+        <!-- NAVBAR ENDS -->
+
+        <!-- HERO -->
+        <div class="hero-section">
+            <div data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000">
+                <div class="hero-left">
+                    <h1>Best SEO Services Company</h1>
+                    <p>
+                        Would you like your website to rank highly in search engine results?
+                        Please sit back & relax. With our tried-and-true SEO or growth
+                        hacking methods, technologies, and data-backed decision-making
+                        power, we have generated over $2 million in revenue for our clients.
+                    </p>
+                    <a href="#" class="hero-button">Get Free Consulation >></a>
+                </div>
+            </div>
+
+            <div data-aos="fade-left" data-aos-delay="50" data-aos-duration="1000">
+                <img src="https://techsavycrew.com/wp-content/uploads/2024/11/laptop-section-home-2.png" alt="Laptop" />
+            </div>
+        </div>
+        <!-- HERO ENDS -->
+    </header>
+    <!-- NAVBAR AND HERO ENDS -->
+
+    <!-- OUR PARTNERS -->
+    <div data-aos="fade-up-right" data-aos-delay="50" data-aos-duration="1000">
+        <div class="featured-section-container">
+            <div class="section-title">
+                <h2>We're <span> Featured </span> On</h2>
+            </div>
+
+            <div class="featured-section">
+                <div class="fs-row">
+                    <img src="/assets/airtel.png" alt="airtel" />
+                    <img src="https://techsavycrew.com/wp-content/uploads/2024/11/Forbes-india-logo.webp"
+                        alt="Forbes India Logo" />
+                    <img src="https://techsavycrew.com/wp-content/uploads/2024/11/source-logo__3_-removebg-preview.webp"
+                        alt="Source Logo" />
+                </div>
+                <div class="fs-row">
+                    <img src="/assets/jio.png" alt="jio" />
+                    <img src="/assets/rablo.png" alt="rablo" />
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- OUR PARTNERS ENDS -->
+
+    <!-- SERVICES -->
+    <div data-aos="fade-down" data-aos-delay="50" data-aos-duration="1000">
+        <div class="card-container" id="services">
+            <div class="card-container-title">
+                <h2>Our Industry Level SEO Services: <span> Be the Next One </span></h2>
+            </div>
+
+
+            <div class="card-item-container">
+                <div data-aos="zoom-in-up" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="card-item">
+                        <div class="card-icon"><i class="fa-solid fa-star"></i></div>
+                        <h3>Dating SEO</h3>
+                        <p>
+                            By enhancing dating site search rankings and user engagement through
+                            keyword optimisation, mobile responsiveness, fast loading times, and
+                            high-quality content.
+                        </p>
+                    </div>
+                </div>
+
+                <div data-aos="zoom-in-up" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="card-item">
+                        <div class="card-icon"><i class="fa-regular fa-building"></i></div>
+                        <h3>Hotel SEO</h3>
+                        <p>
+                            By enhancing dating site search rankings and user engagement through
+                            keyword optimisation, mobile responsiveness, fast loading times, and
+                            high-quality content.
+                        </p>
+                    </div>
+                </div>
+
+                <div data-aos="zoom-in-up" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="card-item">
+                        <div class="card-icon"><i class="fa-solid fa-headset"></i></div>
+                        <h3>Gaming SEO</h3>
+                        <p>
+                            By building authority in the competitive sector through quality
+                            inbound links, authentic content, and social sharing, we specialise
+                            in the Gaming SEO sector.
+                        </p>
+                    </div>
+                </div>
+
+
+                <div data-aos="zoom-in-up" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="card-item">
+                        <div class="card-icon"><i class="fa-solid fa-coins"></i></div>
+                        <h3>Casino SEO</h3>
+                        <p>
+                            Focusing on location-specific keywords, our top SEO company in
+                            London optimises casino websites through landing pages, original
+                            content, and geographical search.
+                        </p>
+                    </div>
+                </div>
+
+                <div data-aos="zoom-in-up" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="card-item">
+                        <div class="card-icon"><i class="fa-solid fa-lira-sign"></i></div>
+                        <h3>Crypto SEO</h3>
+                        <p>
+                            We optimise your website for cryptocurrency and blockchain keywords,
+                            enhancing visibility through SEO and social media and positioning
+                            you as an expert.
+                        </p>
+                    </div>
+                </div>
+
+                <div data-aos="zoom-in-up" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="card-item">
+                        <div class="card-icon"><i class="fa-solid fa-hotel"></i></div>
+                        <h3>Real Estate SEO</h3>
+                        <p>
+                            Optimising real estate websites through SEO is crucial for
+                            increasing traffic and leads in a competitive market, focusing on
+                            both on-page and off-page strategies.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- SERVICES ENDS -->
+
+    <!-- WHAT WE DO -->
+    <div data-aos="zoom-out-right" data-aos-delay="50" data-aos-duration="1000">
+        <div class="swipecontainer">
+            <div class="section-title">
+                <h2><span>What </span> we do?</h2>
+                <p>
+                    Empowering businesses with innovative IT solutions for seamless
+                    digital transformation.
+                </p>
+            </div>
+
+            <div class="swiper">
+                <div class="swiper-wrapper">
+
+                    <div class="swiper-slide">
+                        <img src="/assets/Crypto.webp" alt="" />
+                        <div class="caption">
+                            <h1>CRYPTO</h1>
+                        </div>
+                    </div>
+
+                    <div class="swiper-slide">
+                        <img src="/assets/DigitalTransformation.webp" alt="" />
+                        <div class="caption">
+                            <h1>DIGITAL TRANSFORMATION</h1>
+                        </div>
+                    </div>
+
+                    <div class="swiper-slide">
+                        <img src="/assets/Fintech.webp" alt="" />
+                        <div class="caption">
+                            <h1>FINTECH</h1>
+                        </div>
+                    </div>
+
+                    <div class="swiper-slide">
+                        <img src="/assets/FitnessWearables.webp" alt="" />
+                        <div class="caption">
+                            <h1>FITNESS WEARABLES</h1>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <img src="/assets/Gaming.webp" alt="" />
+                        <div class="caption">
+                            <h1>GAMING</h1>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <img src="/assets/RetailLogistics.webp" alt="" />
+                        <div class="caption">
+                            <h1>RETAIL LOGISTICS</h1>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- WHAT WE DO ENDS -->
+
+    <!-- FEATURED SLIDER -->
+    <div data-aos="zoom-out-down" data-aos-delay="50" data-aos-duration="1000">
+        <div class="project-section-title">
+            <h2><span>Featured </span> Projects</h2>
+            <p>
+                Learn how we are delivering cutting-edge solutions and transforming
+                businesses.
+            </p>
+        </div>
+
+        <div class="featured-projects-container">
+            <!-- Content Slider -->
+            <div class="content-slider">
+                <div class="slick-content">
+                    <div class="slide">
+                        <h2>Evil Genius Games</h2>
+                        <p>
+                            Evil Genius Games invites players to dive into captivating
+                            tabletop RPG experiences, seamlessly blending strategic depth
+                            with immersive gameplay. Our team led the development of their
+                            digital platform, ensuring intuitive interfaces and dynamic
+                            mechanics. Our collaboration has solidified Evil Genius Games as
+                            an industry leader in immersive gaming experiences.
+                        </p>
+                    </div>
+                    <div class="slide">
+                        <h2>EarthLink Fiber Internet</h2>
+                        <p>
+                            Earthlink epitomizes leadership in digital innovation,
+                            seamlessly blending advanced technology with unbeatable
+                            connectivity. Our team led the development and design efforts
+                            for their digital infrastructure, ensuring seamless integration
+                            and optimal performance. Through meticulous planning,
+                            implementation, and ongoing support, we helped Earthlink
+                            maintain its position as a frontrunner in the digital
+                            connectivity landscape.
+                        </p>
+                    </div>
+                    <div class="slide">
+                        <h2>Involvely Parenting Resource</h2>
+                        <p>
+                            Involvvely functions as a comprehensive Parent Resource and
+                            school platform, fosteringconnections among community parents.
+                            Our team played a pivotal role in developing and designing their
+                            platform, ensuring seamless integration and user-friendly
+                            interfaces. Our technical contributions streamlined Involvvely's
+                            platform, allowing parents to get more involved in their
+                            children's education using their innovative ideas.
+                        </p>
+                    </div>
+                    <div class="slide">
+                        <h2>Data-Driven Insights</h2>
+                        <p>
+                            We go beyond simply building software. We leverage data-driven
+                            insights and analytics to continuously monitor and optimize your
+                            solutions, maximizing performance and user experience. This
+                            ongoing cycle of measurement, analysis, and improvement ensures
+                            your software not only meets your initial needs but also adapts
+                            and evolves alongside your business objectives.
+                        </p>
+                    </div>
+                    <div class="slide">
+                        <h2>Collaborative Innovative Solutions</h2>
+                        <p>
+                            We cultivate an environment of co-creation and open
+                            communication to design the perfect solution tailored to your
+                            unique needs and goals. This collaborative approach ensures the
+                            delivery of solutions that are not only technically sound but
+                            also meet the needs of the business and its customers.
+                        </p>
+                    </div>
+                    <div class="slide">
+                        <h2>Future Proof Technology Stack</h2>
+                        <p>
+                            We remain at the forefront of technological advancements,
+                            continuously investing in and integrating the latest tools,
+                            frameworks, and methodologies into our development process. This
+                            commitment ensures that your solutions are built on a
+                            future-proof foundation, adaptable to the ever-evolving digital
+                            landscape.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Image Slider -->
+            <div class="image-slider">
+                <div class="slick-images">
+                    <div><img src="/assets/featured/evil.webp" alt="" /></div>
+                    <div><img src="/assets/featured/elink.webp" alt="" /></div>
+                    <div><img src="/assets/featured/involv.webp" alt="" /></div>
+                    <div>
+                        <img src="/assets/featured/collaborativeInnovativeSolutions.webp" alt="" />
+                    </div>
+                    <div>
+                        <img src="/assets/featured/dataDrivenInsights.webp" alt="" />
+                    </div>
+                    <div>
+                        <img src="/assets/featured/futureProofTech.webp" alt="" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- FEATURED SLIDER ENDS -->
+
+    <!-- OUR TEAM -->
+    <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+        <div class="team-title">
+            <h2>Meet Our <span>Team </span></h2>
+        </div>
+        <div class="team-section">
+
+            <div class="team-item-row">
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/SachinKhosla.png" style="height: 300px"
+                            alt="" />
+                        <h2>Sachin Khosla</h2>
+                        <p>Founder & CEO</p>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="team-item-row">
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/BikramjitSingh.png" alt="" />
+                        <h2>Bikramjit Singh</h2>
+                        <p>Vice President</p>
+                    </div>
+                </div>
+
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/MayankSetia.png" alt="" />
+                        <h2>Mayank Setia</h2>
+                        <p>Sales Head</p>
+                    </div>
+                </div>
+
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/Vanshree.png" alt="" />
+                        <h2>Vanshree Minglani</h2>
+                        <p>Associate Director of Finance</p>
+                    </div>
+                </div>
+
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/JagmeetCheema.png" alt="" />
+                        <h2>Jagmeet Cheema</h2>
+                        <p>Vice President Data Analytics</p>
+                    </div>
+                </div>
+            </div>
+            <div class="team-item-row">
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/HarsimranSingh.png" alt="" />
+                        <h2>Harsimran Singh</h2>
+                        <p>Vice President</p>
+                    </div>
+                </div>
+
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/RohitPuri.png" alt="" />
+                        <h2>Rohit Puri</h2>
+                        <p>Key Account Manager</p>
+                    </div>
+                </div>
+
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/Manpreetkaur.png" alt="" />
+                        <h2>Manpreet kaur</h2>
+                        <p>Associate Director</p>
+                    </div>
+                </div>
+
+                <div id="about" data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="team-item">
+                        <img src="https://digimantralabs.com/images/team/diksha-verma.png" alt="" />
+                        <h2>Diksha Verma</h2>
+                        <p>Senior HR Specialist</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- OUR TEAM ENDS -->
+
+    <!-- PRICING -->
+    <div data-aos="zoom-in" data-aos-delay="50" data-aos-duration="1000">
+        <div class="price-container" id="pricing">
+            <div class="pricing-title">
+                <h2>Choose Your <span> Plan </span></h2>
+            </div>
+
+            <div class="price-row">
+                <div data-aos="fade-up-right" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="price-col">
+                        <p>starter</p>
+                        <h3>19$ <span>/ month </span></h3>
+                        <ul>
+                            <li>1 website</li>
+                            <li>10 gb disk space</li>
+                            <li>free email address</li>
+                            <li>basic web builder</li>
+                            <li>no ssl certificate</li>
+                        </ul>
+                        <button>Add to cart</button>
+                    </div>
+                </div>
+
+                <div data-aos="fade-up-right" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="price-col">
+                        <p>advanced</p>
+                        <h3>19$ <span>/ month </span></h3>
+                        <ul>
+                            <li>1 website</li>
+                            <li>10 gb disk space</li>
+                            <li>free email address</li>
+                            <li>basic web builder</li>
+                            <li>no ssl certificate</li>
+                        </ul>
+                        <button>Add to cart</button>
+                    </div>
+                </div>
+
+                <div data-aos="fade-up-right" data-aos-delay="50" data-aos-duration="1000">
+                    <div class="price-col">
+                        <p>premium</p>
+                        <h3>19$ <span>/ month </span></h3>
+                        <ul>
+                            <li>1 website</li>
+                            <li>10 gb disk space</li>
+                            <li>free email address</li>
+                            <li>basic web builder</li>
+                            <li>no ssl certificate</li>
+                        </ul>
+                        <button>Add to cart</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- PRICING ENDS-->
+
+    <!-- CONTACT -->
+    <div class="contact-container">
+        <form class="form-wizard">
+            <!-- .completed -->
+            <div class="completed" hidden>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+
+                <h3>Registration Successful!</h3>
+                <p>Your account has been created.</p>
+            </div>
+            <!-- /.completed -->
+
+            <h1>REGISTERATION</h1>
+
+            <!-- .progress-container -->
+            <div class="progress-container">
+                <div class="progress"></div>
+
+                <ol>
+                    <li class="current">Personal Details</li>
+                    <li>Professional Details</li>
+                    <li>Review & Submit</li>
+                </ol>
+            </div>
+            <!-- /.progress-container -->
+
+            <!-- .steps-container -->
+            <div class="steps-container">
+                <div class="step">
+                    <h3>Personal Information</h3>
+
+                    <div class="form-control">
+                        <label for="fullname">Full Name</label>
+                        <input type="text" id="fullname" name="fullname" required />
+                        <small class="error-message"></small>
+                    </div>
+
+                    <div class="form-control">
+                        <label for="email">Email</label>
+                        <input type="text" id="email" name="email" required />
+                    </div>
+
+                    <div class="form-control">
+                        <label for="phone">Phone</label>
+                        <input type="text" id="phone" name="phone" required />
+                        <small class="error-message"></small>
+                    </div>
+
+                    <div class="form-control">
+                        <label><input type="radio" name="gender" value="Male" required />
+                            Male</label>
+                        <label><input type="radio" name="gender" value="Female" />
+                            Female</label>
+                        <label><input type="radio" name="gender" value="Other" /> Other</label>
+                    </div>
+
+                    <div class="form-control">
+                        <label for="age">Age</label>
+                        <input type="number" id="age" name="age" min="18" max="100" required />
+                    </div>
+                </div>
+
+                <div class="step">
+                    <h3>Professional Details</h3>
+
+                    <div class="form-control">
+                        <label for="education">Education</label>
+                        <select id="education" name="education" required>
+                            <option value="">Select Education</option>
+                            <option value="High School">High School</option>
+                            <option value="Bachelor's">Bachelor's</option>
+                            <option value="Master's">Master's</option>
+                            <option value="PhD">PhD</option>
+                        </select>
+                    </div>
+
+                    <div class="form-control">
+                        <label for="skills">Skills</label>
+                        <div class="checkbox-group">
+                            <label><input type="checkbox" name="skills" value="Programming" />
+                                Programming</label>
+                            <label><input type="checkbox" name="skills" value="Design" />
+                                Design</label>
+                            <label><input type="checkbox" name="skills" value="Management" />
+                                Management</label>
+                        </div>
+                    </div>
+
+                    <div class="form-control">
+                        <label for="experience">Experience</label>
+                        <input type="number" id="experience" name="experience" min="0" max="50" required />
+                    </div>
+
+                    <div class="form-control">
+                        <label for="currentRole">Current Role</label>
+                        <input type="text" id="currentRole" name="currentRole" required />
+                    </div>
+                </div>
+                <div class="step">
+                    <h3>Review & Submit</h3>
+                    <div id="review"></div>
+                    <button type="button" id="editBtn">Edit</button>
+                    <button type="button" class="reset">Reset</button>
+                </div>
+            </div>
+            <!-- /.steps-container -->
+
+            <!-- .controls -->
+            <div class="controls">
+                <button type="button" class="prev-btn">Prev</button>
+                <button type="button" class="next-btn">Next</button>
+                <button type="submit" class="submit-btn">Submit</button>
+            </div>
+            <!-- /.controls -->
+        </form>
+        <div class="contact-content">
+            <div class="contact-title">
+                <h1>Build with Us.</h1>
+                <h1>Accelerate your Growth.</h1>
+            </div>
+
+            <div class="contact-para">
+                <p><i class="fa-solid fa-check"></i>Customized solutions and strategies</p>
+                <p><i class="fa-solid fa-check"></i>Faster-than-market project delivery</p>
+                <p><i class="fa-solid fa-check"></i>End-to-end digital transformation services</p>
+            </div>
+        </div>
+    </div>
+    <!-- CONTACT ENDS -->
+
+    <!-- FOOTER -->
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-section">
+                <h3>Our Top Expertise</h3>
+                <p>Gaming SEO</p>
+                <p>Hotel SEO</p>
+                <p>Law Firm SEO</p>
+                <p>Bank SEO</p>
+            </div>
+
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="#" style="text-decoration: none">Home</a></li>
+                    <li><a href="#" style="text-decoration: none">Services</a></li>
+                    <li><a href="#" style="text-decoration: none">Contact</a></li>
+                    <li><a href="#" style="text-decoration: none">About</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-section">
+                <h3>Other Expertise</h3>
+                <p>Real Estate SEO</p>
+                <p>Roofing SEO</p>
+                <p>Tradies SEO</p>
+            </div>
+
+            <div class="footer-section">
+                <h3>Contact Us</h3>
+                <p>contact@example.com</p>
+                <p>+123-456-7890</p>
+                <p>123 Street, City, Country</p>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 Your Company. All rights reserved.</p>
+        </div>
+    </footer>
+    <!-- FOOTER ENDS -->
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="https://kit.fontawesome.com/d06d270777.js" crossorigin="anonymous"></script>
+    <script src="/js/script.js"></script>
+    <script src="js/swiper.js"></script>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+</body>
+
+</html>

js/script.js

@@ -0,0 +1,162 @@
+function toggleMenu() {
+  const navList = document.querySelector("nav ul");
+  navList.classList.toggle("active");
+}
+
+const form = document.querySelector(".form-wizard");
+const progress = form.querySelector(".progress");
+const stepsContainer = form.querySelector(".steps-container");
+const steps = form.querySelectorAll(".step");
+const stepIndicators = form.querySelectorAll(".progress-container li");
+const prevButton = form.querySelector(".prev-btn");
+const nextButton = form.querySelector(".next-btn");
+const submitButton = form.querySelector(".submit-btn");
+const editButton = form.querySelector("#editBtn");
+
+let currentStep = 0;
+let formData = JSON.parse(localStorage.getItem("formData")) || {};
+
+// Update progres
+const updateProgress = () => {
+  let width = currentStep / (steps.length - 1);
+  progress.style.transform = `scaleX(${width})`;
+
+  // Update the step indicators
+  stepIndicators.forEach((indicator, index) => {
+    indicator.classList.toggle("current", currentStep === index);
+    indicator.classList.toggle("done", currentStep > index);
+  });
+
+  // Update steps container
+  stepsContainer.style.height = `${steps[currentStep].offsetHeight}px`;
+
+  steps.forEach((step, index) => {
+    step.style.transform = `translateX(${currentStep * -100}%)`;
+    step.classList.toggle("current", currentStep === index);
+  });
+
+  updateButtons();
+};
+
+// Update button visibility
+const updateButtons = () => {
+  prevButton.hidden = currentStep === 0;
+  nextButton.hidden = currentStep >= steps.length - 1;
+  submitButton.hidden = currentStep < steps.length - 1;
+  editButton.hidden = currentStep !== 2;
+};
+
+const isValidStep = () => {
+  const fields = steps[currentStep].querySelectorAll("input, textarea, select");
+  let valid = true;
+  fields.forEach((field) => {
+    const errorMessage = field.nextElementSibling;
+
+    if (field.id === "fullname" && field.value.trim().length < 3) {
+      valid = false;
+      if (errorMessage)
+        errorMessage.textContent = "Minimum 3 letters required.";
+    } else if (field.id === "phone" && !/^\d{10}$/.test(field.value)) {
+      valid = false;
+      if (errorMessage)
+        errorMessage.textContent = "Phone number must be 10 digits.";
+    } else {
+      if (errorMessage) errorMessage.textContent = "";
+    }
+
+    if (!field.checkValidity()) {
+      valid = false;
+    }
+  });
+  return valid;
+};
+
+// Save form data to localStorage
+const saveData = () => {
+  const fields = steps[currentStep].querySelectorAll("input, textarea, select");
+  fields.forEach((field) => {
+    formData[field.name] = field.value;
+  });
+  localStorage.setItem("formData", JSON.stringify(formData));
+};
+
+// Display data
+const displayData = () => {
+  const reviewSection = document.getElementById("review");
+  reviewSection.innerHTML = "";
+
+  // Iterate over all the steps to collect and display data
+  steps.forEach((step) => {
+    const inputs = step.querySelectorAll("input, select, textarea");
+    inputs.forEach((input) => {
+      if (input.type === "radio" && !input.checked) return; // Skip unchecked radios
+      if (input.type === "checkbox") {
+        // Handle checkboxes
+        if (!formData[input.name]) formData[input.name] = [];
+        if (input.checked) formData[input.name].push(input.value);
+      } else {
+        // Handle other input types
+        formData[input.name] = input.value;
+      }
+
+      // Determine label for the field (use placeholder or aria-label if available)
+      const label =
+        input.placeholder ||
+        input.ariaLabel ||
+        input.closest("label")?.textContent ||
+        input.name;
+
+      // Display field data in the review section
+      const p = document.createElement("p");
+      if (Array.isArray(formData[input.name])) {
+        p.textContent = `${label}: ${formData[input.name].join(", ")}`;
+      } else {
+        p.textContent = `${label}: ${formData[input.name]}`;
+      }
+      reviewSection.appendChild(p);
+    });
+  });
+};
+
+prevButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  if (currentStep > 0) {
+    saveData();
+    currentStep--;
+    updateProgress();
+  }
+});
+
+nextButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  if (isValidStep()) {
+    saveData();
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+      updateProgress();
+    }
+  }
+});
+
+submitButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  if (isValidStep()) {
+    saveData();
+    displayData();
+    form.querySelector(".completed").hidden = false;
+    stepsContainer.hidden = true;
+  }
+});
+
+editButton.addEventListener("click", () => {
+  const fields = steps[currentStep].querySelectorAll("input, textarea, select");
+  fields.forEach((field) => {
+    if (formData[field.name]) {
+      field.value = formData[field.name];
+    }
+  });
+  currentStep = 1;
+  updateProgress();
+});
+
+updateProgress();

js/swiper.js

@@ -0,0 +1,98 @@
+const swipecontainer = document.querySelector(".swipecontainer");
+const likeBtns = document.querySelector(".like-btns");
+var swiper = new Swiper(".swiper", {
+  spaceBetween: 60,
+  slidesPerView: "auto",
+  loop: true,
+  speed: 5000,
+  freeMode: true,
+  allowTouchMove: true,
+  autoplay: {
+    delay: 0,
+    disableOnInteraction: false,
+  },
+});
+function stopAutoPlay() {
+  const swiperTranslate = swiper.getTranslate();
+  swiper.setTranslate(swiperTranslate);
+  swiper.autoplay.stop();
+}
+function startAutoPlay() {
+  swiper.slideTo(swiper.activeIndex, 5000, true);
+  swiper.autoplay.start();
+}
+swipecontainer.addEventListener("mouseenter", () => stopAutoPlay());
+swipecontainer.addEventListener("mouseleave", () => startAutoPlay());
+
+// featured slider
+$(document).ready(function () {
+  var imageSlider = $(".slick-images").slick({
+    centerMode: true,
+    centerPadding: "60px",
+    slidesToShow: 3,
+    arrows: false,
+    dots: true,
+    asNavFor: ".slick-content",
+    infinite: true,
+    speed: 500,
+    responsive: [
+      {
+        breakpoint: 768,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "40px",
+          slidesToShow: 3,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "40px",
+          slidesToShow: 1,
+        },
+      },
+    ],
+  });
+
+  var contentSlider = $(".slick-content").slick({
+    centerMode: true,
+    centerPadding: "60px",
+    slidesToShow: 1,
+    asNavFor: ".slick-images",
+    infinite: true,
+    arrows: false,
+    dots: true,
+    speed: 500,
+    responsive: [
+      {
+        breakpoint: 768,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "40px",
+          slidesToShow: 3,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "40px",
+          slidesToShow: 1,
+        },
+      },
+    ],
+  });
+
+  $(".content-slider").on("swipe", function (event, slick, direction) {
+    if (direction === "left") {
+      imageSlider.slick("slickNext");
+    } else if (direction === "right") {
+      imageSlider.slick("slickPrev");
+    }
+  });
+});