diff --git a/assests/images/about-banner-img.svg b/assests/images/about-banner-img.svg new file mode 100644 index 0000000..4ee6948 --- /dev/null +++ b/assests/images/about-banner-img.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assests/images/mobile-about-banner.png b/assests/images/mobile-about-banner.png index 8190fae..a78ff66 100644 Binary files a/assests/images/mobile-about-banner.png and b/assests/images/mobile-about-banner.png differ diff --git a/css/style.css b/css/style.css index d7e9a32..afbcc18 100644 --- a/css/style.css +++ b/css/style.css @@ -1058,7 +1058,7 @@ span.textaccor { /* about hero*/ .hero_banner { - background: url("../assests/images/about-banner-img.png") no-repeat; + background: url("../assests/images/about-banner-img.svg") no-repeat; background-position: center; background-size: cover; height: 420px; @@ -1371,7 +1371,14 @@ span.textaccor { .swiper-button-next { top: 50%; transform: translateY(-50%); - color: #fff; + color:#b18c4a ; + +} + +/* Resize the arrow icons themselves */ +.swiper-button-prev::after, +.swiper-button-next::after { + font-size: 25px; /* control actual arrow size */ } .swiper-button-prev { diff --git a/js/main.js b/js/main.js index c228407..3a08a45 100644 --- a/js/main.js +++ b/js/main.js @@ -128,7 +128,7 @@ function initTimelineSwiper() { timelineItems.forEach((item, i) => { item.classList.toggle("active", i === index); }); - const timelineWidth = document.querySelector(".timeline").offsetWidth - 10; + const timelineWidth = document.querySelector(".timeline").offsetWidth - 20; const newWidth = (timelineWidth / (totalKites - 1)) * index; if (lineFill) lineFill.style.width = newWidth + "px"; }