in HTML if you want them only on the blue part. If they are in , keep them here. */ .background-shape { position: absolute; border-radius: 50%; filter: blur(40px); z-index: 0; /* Behind content */ } .shape-1 { width: 600px; height: 600px; background: rgba(255, 255, 255, 0.1); top: -200px; left: -100px; } .shape-2 { width: 800px; height: 800px; background: rgba(255, 255, 255, 0.08); bottom: 0; /* Adjusted to stay within hero area */ right: -200px; } .shape-3 { width: 300px; height: 300px; background: #ff9a9e; opacity: 0.2; top: 20%; right: 40%; filter: blur(80px); } /* --- Header & Navigation --- */ header { padding-top: 25px; padding-bottom: 25px; position: absolute; /* Float header on top of hero */ width: 100%; z-index: 10; } .nav-container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: 700; color: #fff; /* Changed to white to match blue bg */ display: flex; align-items: center; gap: 10px; } .logo i { color: #fff; font-size: 28px; } .nav-links { list-style: none; display: flex; gap: 30px; } .nav-links a { text-decoration: none; color: #fff; /* Changed to white */ font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; } .nav-links i { font-size: 10px; } .nav-utilities { display: flex; align-items: center; gap: 20px; color: #fff; /* Changed to white */ font-weight: 600; font-size: 14px; } .search-btn { background: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; color: #1a2b5f; /* Icon remains dark */ } /* --- Hero Content --- */ .hero-container { display: flex; align-items: center; justify-content: space-between; width: 100%; z-index: 2; /* Bring content above shapes */ padding-top: 80px; /* Offset for absolute header */ } .hero-content { width: 50%; padding-right: 50px; } .hero-content h1 { font-size: 64px; line-height: 1.1; font-weight: 700; margin-bottom: 25px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.1); } .hero-content p { font-size: 18px; line-height: 1.6; margin-bottom: 40px; color: rgba(255, 255, 255, 0.9); max-width: 450px; } /* CTA Button Area */ .cta-wrapper { display: flex; align-items: center; gap: 15px; cursor: pointer; } .play-btn { width: 60px; height: 60px; border-radius: 50%; border: none; background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%); color: white; font-size: 20px; display: flex; justify-content: center; align-items: center; padding-left: 5px; box-shadow: 0 10px 20px rgba(0, 91, 234, 0.4); cursor: pointer; transition: transform 0.3s ease; } .play-btn:hover { transform: scale(1.1); } .cta-text { font-weight: 600; font-size: 16px; color: #fff; } /* --- Hero Image (Robot) --- */ .hero-image { width: 50%; display: flex; justify-content: flex-end; position: relative; } .floating-robot { max-width: 100%; height: auto; animation: float 4s ease-in-out infinite; border-radius: 20px; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } /* REMOVED body::after This was causing the "choppy" double wave effect. */ /* --- Wave Divider Fix (The Clean Connection) --- */ .custom-shape-divider-bottom { position: absolute; bottom: 0; /* Forces it to bottom of hero */ left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 3; } .custom-shape-divider-bottom svg { position: relative; display: block; /* CRITICAL: Removes the tiny gap under the SVG */ width: calc(100% + 1.3px); height: 120px; /* Slightly taller for smoother curve */ } .custom-shape-divider-bottom .shape-fill { fill: #FFFFFF; } /* --- About Section Styles --- */ .about-section { /* Added negative margin to pull it up slightly, ensuring no pixel gaps */ margin-top: -2px; padding: 80px 0 100px 0; background-color: #fff; color: #333; position: relative; z-index: 4; /* Sits on top of any potential bleeds */ } .about-container { display: flex; align-items: center; gap: 60px; } .about-image { flex: 1; } .about-image img { width: 100%; height: auto; object-fit: contain; } .about-text { flex: 1; } .sub-title { color: #3b55e6; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; } .section-title { font-size: 36px; line-height: 1.3; color: #1a1a1a; font-weight: 700; margin-bottom: 20px; } .diamond-divider { display: flex; gap: 8px; margin-bottom: 25px; } .diamond-divider span { width: 8px; height: 8px; background-color: #e5e5e5; border: 1px solid #ccc; transform: rotate(45deg); } .main-description { color: #666; font-size: 16px; line-height: 1.7; margin-bottom: 40px; } .features-row { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 40px; } .feature-box { flex: 1; } .icon-wrapper { width: 50px; height: 50px; display: flex; align-items: center; font-size: 32px; margin-bottom: 15px; } .globe-icon i { background: -webkit-linear-gradient(#00c6fb, #005bea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pie-icon i { background: -webkit-linear-gradient(#f7971e, #ffd200); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature-info h4 { font-size: 18px; font-weight: 600; color: #222; margin-bottom: 10px; } .feature-info p { font-size: 14px; color: #777; line-height: 1.6; } .btn-orange { display: inline-block; padding: 15px 40px; background: linear-gradient(90deg, #ff8c42 0%, #f76b1c 100%); color: #fff; text-decoration: none; font-weight: 600; border-radius: 50px; box-shadow: 0 10px 20px rgba(247, 107, 28, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .btn-orange:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(247, 107, 28, 0.4); } /* Responsive */ @media (max-width: 992px) { .about-container { flex-direction: column; } .about-image { margin-bottom: 40px; width: 80%; } } @media (max-width: 768px) { .hero-container { flex-direction: column; text-align: center; } .hero-content, .hero-image { width: 100%; padding: 0; } .hero-content h1 { font-size: 42px; } .nav-links { display: none; } .cta-wrapper { justify-content: center; } .features-row { flex-direction: column; } } .hero { display: flex; align-items: center; min-height: 85vh; position: relative; background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); color: #fff; /* make hero full-bleed edge to edge */ width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; } /* shapes are now relative to the hero */ .background-shape { position: absolute; border-radius: 50%; filter: blur(40px); z-index: 0; } /* make sure content is above shapes */ .hero-container { position: relative; z-index: 1; } .logo { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; color: #fff; } /* main circular badge */ .logo-icon { position: relative; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #ffffff 0%, #e4ecff 30%, #4b63ff 100%); display: flex; align-items: center; justify-content: center; } /* robot “head” inside */ .logo-head { position: relative; width: 26px; height: 18px; border-radius: 9px; background: #101426; box-shadow: 0 0 0 2px #6f88ff; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; } /* eyes */ .eye { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #7bd2ff 40%, #1b9bff 100%); box-shadow: 0 0 0 1px #132b5f; } .eye-left { margin-right: 2px; } .eye-right { margin-left: 2px; } /* small antenna dot on top */ .logo-icon .antenna { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 2px rgba(111, 136, 255, 0.7); } /* wordmark */ .logo { display: flex; align-items: center; gap: 10px; } /* make the logo sit inside a white circle */ .logo-img { height: 40px; /* tweak size as you like */ width: 40px; padding: 4px; /* space between image and edge of circle */ border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); /* optional subtle ring */ object-fit: contain; display: block; } .logo-text { color: #ffffff; font-size: 24px; font-weight: 700; letter-spacing: 0.16em; } /* ================== AWARDS SECTION ================== */ .awards-section { background: linear-gradient(180deg, #ffa534 0%, #ff8b39 50%, #ff7a35 100%); padding: 90px 0 120px 0; color: #ffffff; position: relative; overflow: hidden; } .awards-container { text-align: center; } .awards-heading .awards-tag { font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 500; opacity: 0.9; } .awards-heading h2 { margin-top: 14px; font-size: 32px; font-weight: 700; } .awards-divider { margin-top: 16px; display: flex; justify-content: center; gap: 8px; } .awards-divider span { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #ffe0a8; } .awards-grid { margin-top: 50px; display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } .award-card { position: relative; width: 280px; background: #ffffff; border-radius: 20px; padding: 70px 30px 40px 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); text-align: left; overflow: hidden; } .award-card h3 { margin-top: 6px; font-size: 18px; font-weight: 700; color: #f5474a; } .award-card p { margin-top: 6px; font-size: 13px; color: #666666; } /* colored header waves on cards */ .award-card-1::before, .award-card-2::before, .award-card-3::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80px; background-size: cover; } .award-card-1::before { background: linear-gradient(135deg, #ff3376 0%, #ff7263 50%, #ffba5a 100%); } .award-card-2::before { background: linear-gradient(135deg, #3c2fff 0%, #5e3cff 35%, #ff4373 100%); } .award-card-3::before { background: linear-gradient(135deg, #ffb347 0%, #ffcc33 50%, #ff9943 100%); } /* circular badge overlapping card top edge */ .award-badge { position: absolute; top: -26px; left: 30px; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; } .badge-inner { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #ff4f7a 0%, #ff9a7f 100%); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 22px; } /* change inner gradient per card */ .award-card-2 .badge-inner { background: linear-gradient(135deg, #3b5bff 0%, #7a76ff 50%, #ff4f7a 100%); } .award-card-3 .badge-inner { background: linear-gradient(135deg, #ffb347 0%, #ff9943 100%); } /* ================== FOOTER ================== */ .site-footer { background-color: #050b3f; color: #ffffff; position: relative; padding-top: 90px; } /* curved top of dark footer into the orange section */ .footer-top-wave { position: absolute; top: -40px; left: 0; width: 100%; height: 80px; background-color: #050b3f; border-radius: 55% 55% 0 0; } /* main footer columns */ .footer-main { position: relative; z-index: 1; display: flex; gap: 60px; align-items: flex-start; justify-content: space-between; padding-bottom: 40px; } .footer-column h4 { font-size: 18px; margin-bottom: 18px; font-weight: 600; } .footer-about p { font-size: 14px; line-height: 1.8; max-width: 320px; color: rgba(255, 255, 255, 0.8); } .footer-logo { display: flex; align-items: center; gap: 10px; margin-top: 20px; } .footer-logo-img { width: 36px; height: 36px; border-radius: 50%; background: #ffffff; padding: 4px; object-fit: contain; } .footer-logo-text { font-weight: 700; letter-spacing: 0.18em; font-size: 16px; } /* footer links */ .footer-links ul { list-style: none; columns: 2; column-gap: 28px; } .footer-links li { margin-bottom: 8px; } .footer-links a { text-decoration: none; font-size: 14px; color: rgba(255, 255, 255, 0.8); } .footer-links a:hover { color: #ffffff; } /* contact */ .contact-list { list-style: none; font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; } .contact-list li { margin-bottom: 8px; } .contact-list i { margin-right: 8px; } .footer-social { display: flex; align-items: center; gap: 10px; } .footer-social span { font-size: 14px; } .footer-social a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 13px; } .footer-social a:hover { background: #ffffff; color: #050b3f; } /* bottom bar */ .footer-bottom { background: #4f3fff; margin-top: 40px; padding: 16px 0; font-size: 13px; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-bottom-links { display: flex; align-items: center; gap: 10px; } .footer-bottom-links a { color: #ffffff; text-decoration: none; } .footer-bottom-links a:hover { text-decoration: underline; } /* responsive footer */ @media (max-width: 992px) { .footer-main { flex-direction: column; } } @media (max-width: 768px) { .awards-grid { flex-direction: column; align-items: center; } .footer-bottom-inner { flex-direction: column; text-align: center; } } /* ================== TEAM SECTION ================== */ .team-section { position: relative; background: #f5f7ff; padding: 100px 0 130px; overflow: hidden; } /* soft white wave at bottom like the reference */ .team-section::after { content: ""; position: absolute; left: 0; bottom: -60px; width: 100%; height: 120px; background: #ffffff; border-radius: 50% 50% 0 0; } .team-container { position: relative; z-index: 1; } .team-heading { text-align: center; margin-bottom: 50px; } .team-tag { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #2451ff; font-weight: 600; } .team-heading h2 { margin-top: 10px; font-size: 28px; font-weight: 600; color: #111111; } .team-dots { margin-top: 18px; display: flex; justify-content: center; gap: 10px; } .team-dots .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #d0d6f5; background: transparent; } .team-dots .dot.active { background: #2451ff; border-color: #2451ff; } /* cards row */ .team-grid { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .team-card { position: relative; width: 250px; background: #e8f0ff; border-radius: 24px; padding: 80px 24px 28px; box-shadow: 0 16px 35px rgba(0, 0, 0, 0.06); text-align: left; } /* round photo that overlaps the top of the card */ .team-photo { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 50%; border: 4px solid #ffffff; overflow: hidden; background: #cfd6f0; } .team-photo img { width: 100%; height: 100%; object-fit: cover; } /* card text */ .team-content h3 { margin-top: 4px; font-size: 16px; font-weight: 600; color: #111111; } .team-role { display: block; margin-top: 4px; font-size: 12px; color: #8086a4; } .team-role-line { display: block; margin-top: 12px; height: 3px; width: 70%; background: #4f46ff; border-radius: 999px; } /* center button */ .team-cta { margin-top: 50px; text-align: center; } .team-view-btn { padding: 12px 40px; border-radius: 30px; border: none; background: linear-gradient(90deg, #ff8c42 0%, #f76b1c 100%); color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 20px rgba(247, 107, 28, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .team-view-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(247, 107, 28, 0.4); } /* responsive */ @media (max-width: 768px) { .team-section { padding: 80px 0 110px; } .team-grid { gap: 20px; } } .nav-links { list-style: none; display: flex; gap: 30px; } .nav-links a { text-decoration: none; color: #fff; font-size: 14px; font-weight: 600; padding-bottom: 4px; position: relative; } /* underline on hover + active */ .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #ffb347; transition: width 0.25s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } html { scroll-behavior: smooth; } /* ================== FEATURES CAROUSEL (AYZUU) ================== */ .features-section { background: #ffffff; padding: 90px 0 110px; } .features-heading { text-align: left; max-width: 1200px; margin: 0 auto 40px auto; } .features-tag { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #2451ff; font-weight: 600; } .features-heading h2 { margin-top: 10px; font-size: 28px; font-weight: 600; color: #111111; } /* dots under heading */ .features-dots { margin-top: 18px; display: flex; gap: 10px; } .features-dots .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #d0d6f5; background: transparent; transition: all 0.25s ease; } .features-dots .dot.active { background: #2451ff; border-color: #2451ff; width: 14px; border-radius: 8px; } /* carousel wrapper */ .features-carousel-wrapper { margin-top: 36px; overflow: hidden; } .features-carousel { display: flex; gap: 24px; scroll-behavior: smooth; } .feature-card { background: #f5f7ff; border-radius: 24px; min-width: 280px; max-width: 320px; box-shadow: 0 18px 35px rgba(0, 0, 0, 0.07); padding: 18px 18px 24px; display: flex; flex-direction: column; } .feature-image { border-radius: 18px; overflow: hidden; } .feature-image img { width: 100%; height: 190px; object-fit: cover; display: block; } .feature-pill { display: inline-block; margin-top: 16px; padding: 8px 16px; border-radius: 20px; background: #ffffff; font-size: 13px; font-weight: 600; color: #222222; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); } .feature-text { margin-top: 12px; font-size: 13px; line-height: 1.7; color: #69708f; } /* responsive tweaks */ @media (max-width: 992px) { .feature-card { min-width: 260px; } } @media (max-width: 768px) { .features-heading { text-align: center; } .features-dots { justify-content: center; } .features-carousel { padding-left: 10px; } } /* ===== CASE STUDY SECTION ===== */ .case-section { padding: 90px 0 110px; background: linear-gradient( 180deg, #f7f8ff 0%, #f7f8ff 55%, #ffffff 100% ) } .case-header { max-width: 720px; margin: 0 auto 40px; text-align: center; } .case-tag { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #2451ff; font-weight: 600; } .case-header h2 { margin-top: 10px; font-size: 28px; font-weight: 600; color: #111; } .case-header p { margin-top: 10px; font-size: 16px; color: #6a7494; } /* Tabs */ .case-tabs { display: inline-flex; gap: 10px; padding: 6px; border-radius: 999px; background: #e3e7ff; margin: 0 auto 28px; } .case-tabs, .case-tabs * { box-sizing: border-box; } .case-tabs { display: flex; justify-content: center; } .case-tab { border: none; background: transparent; padding: 8px 20px; border-radius: 999px; font-size: 16px; font-weight: 500; color: #4b5480; cursor: pointer; transition: all 0.2s ease; } .case-tab.active { background: #fff; color: #111; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } /* Panels */ .case-panels { margin-top: 24px; } .case-panel-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; } .case-panel-text h3 { font-size: 22px; margin-bottom: 10px; } .case-panel-text p { font-size: 16px; color: #6a7494; line-height: 1.7; } .case-list { margin: 18px 0 10px; padding-left: 18px; font-size: 16px; color: #4b5480; line-height: 1.7; } .case-list li + li { margin-top: 8px; } /* Illustration */ .case-panel-illustration img { width: 100%; border-radius: 20px; display: block; object-fit: cover; } .case-illustration-caption { display: block; margin-top: 8px; font-size: 12px; color: #8a90b0; } /* Responsive */ @media (max-width: 960px) { .case-panel-layout { grid-template-columns: 1fr; } .case-panel { padding: 24px 20px 20px; } }