diff --git a/main.css b/main.css
index 3308177..1dfba61 100644
--- a/main.css
+++ b/main.css
@@ -268,12 +268,15 @@
display: flex;
align-items: center;
gap: 40px;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ max-width: 1200px;
}
.mnc h2 {
- font-size: 22px;
font-weight: 600;
+ font-size: 1.3vw;
+ white-space: nowrap;
}
.mnc h2 .gray,
@@ -287,10 +290,16 @@
.mnc-logos {
+ overflow: hidden;
+ width: 100%;
+ height: 55px;
+ }
+
+ .mnc-logos-track {
display: flex;
- align-items: center;
- gap: 40px;
- flex-wrap: wrap;
+ gap: 5vw;
+ animation: stepScroll 12s infinite;
+ height: 100%;
}
.mnc-logos img {
@@ -299,13 +308,40 @@
transition: transform 0.3s ease;
}
- .mnc-logos img:hover {
- transform: scale(1.1);
+ .mnc-logos img.image-hcl {
+ height: 25px;
+ }
+
+ @keyframes stepScroll {
+
+ 0%,
+ 20% {
+ transform: translateX(0);
+ }
+
+ 25%,
+ 45% {
+ transform: translateX(-25%);
+ }
+
+ 50%,
+ 70% {
+ transform: translateX(-50%);
+ }
+
+ 75%,
+ 95% {
+ transform: translateX(-75%);
+ }
+
+ 100% {
+ transform: translateX(0);
+ }
}
.our-numbers {
max-width: 1200px;
- margin: 0 auto 47px auto;
+ margin: 50px auto 50px auto;
}
.our-numbers h2 {
@@ -433,35 +469,15 @@
}
.stat-item {
- animation: fadeInUp 0.6s ease forwards;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.6s ease, transform 0.6s ease;
}
- .stat-item:nth-child(1) {
- animation-delay: 0.1s;
- }
-
- .stat-item:nth-child(2) {
- animation-delay: 0.2s;
- }
-
- .stat-item:nth-child(3) {
- animation-delay: 0.3s;
- }
-
- .stat-item:nth-child(4) {
- animation-delay: 0.4s;
- }
-
- .stat-item:nth-child(5) {
- animation-delay: 0.5s;
- }
-
- .stat-item:nth-child(6) {
- animation-delay: 0.6s;
- }
-
- .opportunity-section {
- padding: 0 0 50px 0;
+ /* when visible */
+ .stat-item.visible {
+ opacity: 1;
+ transform: translateY(0);
}
.container {
@@ -792,7 +808,6 @@
margin-right: 3px;
}
- /* Dots */
.dots-container {
display: flex;
justify-content: center;
@@ -820,7 +835,6 @@
transform: scale(1.1);
}
- /* Mobile responsive */
@media (max-width: 768px) {
.slide1r-container {
margin: 15px;
@@ -1143,6 +1157,7 @@
justify-content: center;
align-items: center;
gap: 20px;
+ margin-top: 76px;
}
.move-slider-box-static {
@@ -1301,4 +1316,171 @@
margin-bottom: 20px;
line-height: 1.5;
margin-top: -23px;
+ }
+
+ .card-simple {
+ max-width: 1200px;
+ margin: 50px auto 50px auto;
+ }
+
+ .card-easy {
+ display: flex;
+ width: 1200px;
+ background-color: #F6F8FA;
+ border-radius: 20px;
+ overflow: hidden;
+ }
+
+ .card-easy-left {
+ flex: 1;
+ background-color: #FFD966;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .card-easy-left img {
+ width: 80%;
+ border-radius: 15px;
+ }
+
+ .icon {
+ position: absolute;
+ background: white;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: bold;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ animation: float 3s ease-in-out infinite;
+ }
+
+ .icon1 {
+ top: 20%;
+ left: 10%;
+ animation-delay: 0s;
+ }
+
+ .icon2 {
+ top: 10%;
+ right: 15%;
+ animation-delay: 0.5s;
+ }
+
+ .icon3 {
+ bottom: 20%;
+ left: 20%;
+ animation-delay: 1s;
+ }
+
+ .icon4 {
+ bottom: 15%;
+ right: 10%;
+ animation-delay: 1.5s;
+ }
+
+ @keyframes float {
+
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-10px);
+ }
+ }
+
+ .card-easy-right {
+ flex: 1;
+ padding: 40px 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .card-easy-right h2 {
+ font-size: 2em;
+ color: #0b2e6f;
+ margin: 0 0 20px 0;
+ }
+
+ .card-easy-right p {
+ font-size: 1em;
+ color: #555;
+ margin-bottom: 20px;
+ }
+
+ .features {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 30px;
+ }
+
+ .feature {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.95em;
+ color: #555;
+ }
+
+ .feature span {
+ background: #FFD966;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: #0b2e6f;
+ font-weight: bold;
+ }
+
+ .card-easy-right button {
+ background-color: #0b2e6f;
+ color: white;
+ border: none;
+ padding: 8px 18px;
+ /* controls height and width */
+ border-radius: 25px;
+ font-size: 0.9em;
+ width: auto;
+ /* ensures it doesn't stretch */
+ max-width: 155px;
+ /* optional limit */
+ display: inline-block;
+ /* prevents flex from stretching it */
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+
+
+
+ .card-easy-right button:hover {
+ background-color: #1d4fa0;
+ }
+
+ @media (max-width: 900px) {
+ .card-easy {
+ flex-direction: column;
+ width: 90%;
+ }
+
+ .card-easy-right {
+ padding: 80px 50px;
+ /* more top/bottom space increases height */
+ }
+
+ .card-easy-left img {
+ width: 90%;
+ max-height: 100%;
+ /* image takes more vertical space */
+ }
}
\ No newline at end of file
diff --git a/main.js b/main.js
index 4b13d2e..a257d95 100644
--- a/main.js
+++ b/main.js
@@ -214,3 +214,19 @@ document.addEventListener("DOMContentLoaded", () => {
animate();
});
+
+
+const statItems = document.querySelectorAll('.stat-item');
+
+const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const index = Array.from(statItems).indexOf(entry.target);
+ entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
+ entry.target.classList.add('visible');
+ // observer.unobserve(entry.target); // optional: animate only once
+ }
+ });
+}, { threshold: 0.2 }); // 20% visible
+
+statItems.forEach(item => observer.observe(item));
-
-
- 
- 
- 
- 
- 
- 
+ 
+
+ 
+
+ 
+