update about page

css/style.css

@@ -1055,7 +1055,7 @@ span.textaccor {
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
-  color: #dcdcdc;
+  color: white;
   font-family: var(--font-primary);
   margin-top: 18px;
 }
@@ -1153,6 +1153,200 @@ span.textaccor {
     font-family: var(--font-secondary);
 }
 
+/* ===========================
+   Timeline
+=========================== */
+.timeline {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin: 80px auto;
+  list-style: none;
+  position: relative;
+}
+
+.timeline::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  right: 10px;
+  height: 1px;
+  background: #b18b4a65;
+  transform: translateY(-50%);
+  z-index: 0;
+}
+
+.timeline-item {
+  position: relative;
+  z-index: 1;
+}
+
+.timeline li::before {
+  content: attr(data-year);
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  color: #3E3F3F;
+  font-weight: 400;
+  white-space: nowrap;
+  font-family: var(--font-primary);
+}
+
+
+/* ===========================
+   Kite Style
+=========================== */
+.timeline-item .kite {
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: #000;
+  border: 1px solid gray;
+  transform: rotate(45deg);
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+
+/* Active kite (fade-in) */
+.timeline-item.active .kite {
+  background: #b18c4a;
+  opacity: 1;
+  animation: fadeIn 0.4s ease forwards;
+}
+
+.timeline li.active::before {
+  color: #b18c4a;
+}
+
+/* Inactive kite (fade-out) */
+.timeline-item:not(.active) .kite {
+  animation: fadeOut 0.4s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    background: #000;
+  }
+  to {
+    opacity: 1;
+    background: #b18c4a;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    background: #b18c4a;
+  }
+  to {
+    opacity: 1;
+    background: #000;
+  }
+}
+
+/* ===========================
+   Line Fill
+=========================== */
+.line-fill {
+  position: absolute;
+  top: 50%;
+  left: 60px;
+  height: 2px;
+  background: #b18c4a;
+  z-index: 0;
+  transform-origin: left;
+  width: 0;
+  transition: width 0.5s linear;
+}
+
+/* ===========================
+   Swiper Container
+=========================== */
+.swiper {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 0 60px;
+  box-sizing: border-box;
+}
+
+.swiper-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1px; /* added subtle gap between slides */
+}
+
+.swiper-slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #131313;
+  gap: 2px; /* reduced gap between slide elements */
+}
+
+.swiper-slide img {
+  width: 82px;
+  height: 82px;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto 2px; /* small bottom margin to reduce space */
+}
+
+.swiper-slide h2 {
+  font-size: 40px;
+  color: #b18c4a;
+  margin: 0 0 10px 0; /* small margin below heading */
+}
+
+.swiper-slide .heading {
+  color: #b18c4a;
+  text-align: center;
+  line-height: 1.3; /* tighter line height */
+  margin: 0 0 2px 0; /* small margin below heading */
+}
+
+.swiper-slide .sub-heading-container {
+  width: 420px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
+.swiper-slide .sub-heading-container p {
+  color: #fff;
+  margin: 0; /* remove default margin */
+  line-height: 1.4; /* tighter line height */
+}
+
+
+/* ===========================
+   Swiper Navigation
+=========================== */
+.swiper-button-prev,
+.swiper-button-next {
+  top: 50%;
+  transform: translateY(-50%);
+  color: #fff;
+}
+
+.swiper-button-prev {
+  left: 10px;
+}
+
+.swiper-button-next {
+  right: 10px;
+}
+
+
 /* blog */
 
 .blog-banner {
@@ -1599,6 +1793,14 @@ span.textaccor {
   .links a {
     font-size: 12px;
   }
+
+
+  /* mobile about-page */
+
+
+  /*  */
+
+
   .blog-tittle-banner {
     font-size: 40px;
   }