/* === site.css === */ /* Shared form feedback added by the Laravel conversion. Loaded on every page, before the page-specific stylesheets so those can still override it. */ .footer-newsletter-status { margin-top: -12px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: #ffffff; } .form-status { margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; background: #e7f7ee; border: 1px solid #b4e2c8; color: #1c6b41; } .form-errors { margin: 0 0 20px; padding: 14px 18px 14px 34px; border-radius: 12px; font-size: 14px; background: #fdecec; border: 1px solid #f4c4c4; color: #a52222; } .form-errors li { margin-bottom: 4px; } .form-errors li:last-child { margin-bottom: 0; } /* Named distinctly from Demo.css's own .field-error, which the booking form toggles from JavaScript. */ .form-field-error { display: block; margin: -8px 0 12px; font-size: 13px; font-weight: 600; color: #d33a3a; } /* === style.css === */ :root { --primary-blue : #315eff; --accent-cyan : #1cb8ea; --accent-yellow: #ffd02f; --dark-text : #2D3142; --light-text : #7D8597; --bg-white : #ffffff; --capsule-1-bg : #E3F2FD; --capsule-2-bg : #00B4FF; --dot-orange : #FF8F50; --dot-purple : #B686C1; --dot-green : #89C765; --dot-blue : #D1E9FF; } body { font-family : 'Inter', sans-serif; background-color: var(--bg-white); color : var(--dark-text); margin : 0; padding : 0; } @media (max-width: 991px) { /* A handful of elements (carousel tracks, decorative shapes) sit a few pixels wider than the viewport by design/measurement quirks -- fine on desktop, but on a touch screen that sliver of extra width lets the whole page be dragged sideways. Clipping it here doesn't affect any intentional layout, only that stray overflow. Both html and body need it -- the scrolling container browsers actually use is , not , so overflow-x on body alone doesn't stop the drag. */ html, body { overflow-x: hidden; } } .offcanvas-body .navbar-nav { align-items: center; } .navbar-nav .nav-link { font-weight : 600; line-height : 24px; letter-spacing: 0; font-size : 14px; } .nav-link:hover { color: var(--primary-blue) !important; } .nav-link.active { color: var(--primary-blue) !important; } .navbar { box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow 0.25s ease, background-color 0.25s ease; } .navbar.navbar-scrolled { box-shadow: 0 10px 28px rgba(36, 49, 92, 0.08); } .btn-demo { background-color: #00c9ff; font-size : 12px; font-weight : 700; text-transform : uppercase; line-height : 18px; padding : 21px 44px 21px 44px; border-radius : 50px; border : none; color : white; display : inline-flex; align-items : center; justify-content : center; gap : 10px; transition : color 0.3s ease, background-color 0.3s ease; } .btn-demo i { display : inline-block; width : 12px; transition: width 0.3s ease, margin 0.3s ease, opacity 0.3s ease; } .btn-demo .left { width : 0; margin-left: 0; opacity : 0; } .btn-demo .right { width : 12px; margin-left: 0; opacity : 1; } .btn-demo:hover .left { width : 12px; margin-right: 10px; opacity : 1; } .btn-demo:hover .right { width : 0; margin-left: 0; opacity : 0; } .btn-demo:hover { background-color: #00c9ff; color : white; } /* ========================================================================== Hero slider Port of the Slider Revolution "slider-1" module from culturehcm.com. The module is a 1900x988 design grid whose layers scale with the viewport, so sizes here are expressed as vw fractions of 1900 (clamped at both ends) and layer positions as percentages of the stage. Reference values: stage 1900x988 | copy column x=245 w=520 | image layer x=955 w=945 h=988 tabs x=85 | circles: blue 50@(780,150) purple 150@(220,660) yellow 200@(783,709) ========================================================================== */ .hero-section { position : relative; display : flex; align-items : center; padding : 40px 0; overflow : hidden; background-color: transparent; } /* --- Shape layers -------------------------------------------------------- Three solid circles. The wrapper plays the entrance (Revolution's "in" timeline), the inner span plays the endless drift (its "loop" timeline), so the two never fight over `transform`. They sit behind the slider; the hero PNGs are cut-outs, so the circles still read through the artwork the way they do on the live module. */ .hero-shape { position : absolute; z-index : 0; pointer-events : none; opacity : 0; animation-duration : 1.2s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-fill-mode : forwards; } .hero-shape span { display : block; width : 100%; height : 100%; border-radius: 50%; } .hero-shape-blue { left : 33.2%; top : 15.2%; width : clamp(26px, 2.63vw, 50px); aspect-ratio : 1; animation-name : heroShapeDown; animation-delay: 0.07s; } .hero-shape-blue span { background-color: #00c9ff; animation : heroFloatY 3s 1.4s ease-in-out infinite alternate; } .hero-shape-purple { left : 5.6%; top : 66.8%; width : clamp(80px, 7.9vw, 150px); aspect-ratio : 1; animation-name : heroShapeUp; animation-delay: 0.22s; } .hero-shape-purple span { background-color: #ecf3ff; animation : heroFloatX 3s 1.4s ease-in-out infinite alternate; } .hero-shape-yellow { left : 33.4%; top : 71.8%; width : clamp(100px, 10.53vw, 200px); aspect-ratio : 1; animation-name : heroShapeRight; animation-delay : 0.31s; animation-duration: 1s; } .hero-shape-yellow span { background-color: #ffda2b; animation : heroFloatY 3s 1.4s ease-in-out infinite alternate; } @keyframes heroShapeDown { from { opacity : 0; transform: translateY(-100%); } to { opacity : 1; transform: translateY(0); } } @keyframes heroShapeUp { from { opacity : 0; transform: translateY(100%); } to { opacity : 1; transform: translateY(0); } } @keyframes heroShapeRight { from { opacity : 0; transform: translateX(100%); } to { opacity : 1; transform: translateX(0); } } @keyframes heroFloatY { from { transform: translateY(-15px); } to { transform: translateY(10px); } } @keyframes heroFloatX { from { transform: translateX(-50px); } to { transform: translateX(50px); } } /* --- Stage --------------------------------------------------------------- */ /* The module is full-width on a 1900px design grid, so the hero opts out of the site's normal container width. 1600px keeps the copy/image ratio at the module's own 520:945. */ .hero-container { position : relative; max-width: min(1600px, 100% - 48px); } /* Owl Carousel's own CSS sets ".owl-carousel{display:none}" until its JS initializes (it adds "owl-loaded" once ready). Since jQuery + Owl load from a CDN with no defer at the bottom of the page, that can take a couple of real seconds -- during which .hero-slider contributes zero height, so everything below the hero renders too high and then jumps down once Owl finally shows it. min-height here reserves the slider's eventual height up front so nothing moves when it appears. */ .hero-wrapper { position : relative; z-index : 2; display : flex; align-items: center; gap : clamp(20px, 2.6vw, 50px); min-height : clamp(360px, 52vw, 988px); } .hero-slider { flex : 1; min-width: 0; } /* Before Owl Carousel's JS initializes, the three raw ".item" slides stack on top of each other (3x the height of one slide), then collapse to one slide once Owl wraps them -- a huge layout shift. Hide everything but the first slide until Owl adds "owl-loaded", so the pre-JS layout already matches the post-JS one and nothing moves. */ .hero-slider .item:not(:first-child) { display: none; } .hero-slider.owl-loaded .item { display: block; } .hero-slide { display : grid; grid-template-columns: clamp(300px, 27.4vw, 520px) 1fr; align-items : center; gap : clamp(16px, 2.1vw, 40px); } .hero-copy { max-width: 520px; } /* The image is a fixed 945x988 layer in the module. `contain` rather than the module's `cover` because only Header-01 is authored at that exact ratio -- the other two would be upscaled and cropped. */ .hero-media { height: clamp(360px, 52vw, 988px); } .hero-img { width : 100%; height : 100%; display : block; object-fit : contain; object-position: center bottom; } /* --- Tab navigation ------------------------------------------------------ Revolution renders these as .sr7-tab elements: a 30px rule with the slide number right-aligned beside it, 60x38 box, 5px apart. */ .hero-tabs { flex : 0 0 60px; width : 60px; display : flex; flex-direction: column; gap : 5px; } .hero-tabs .owl-dot { display : block !important; width : 60px; padding : 9px 10px; margin : 0; background: transparent; border : 0; cursor : pointer; } .hero-tab-title { position : relative; display : block; text-align : right; font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; font-size : 16px; line-height: 16px; color : rgba(49, 94, 255, 0.2); transition : color 0.3s ease; } .hero-tab-title::before { content : ""; position : absolute; left : 0; top : 0; bottom : 0; margin : auto 0; width : 30px; height : 2px; background-color: rgba(49, 94, 255, 0.2); transition : background-color 0.3s ease; } .hero-tabs .owl-dot:hover .hero-tab-title, .hero-tabs .owl-dot.active .hero-tab-title { color: var(--primary-blue); } .hero-tabs .owl-dot:hover .hero-tab-title::before, .hero-tabs .owl-dot.active .hero-tab-title::before { background-color: var(--primary-blue); } /* --- Layer typography ----------------------------------------------------- */ .hero-title { font-family : 'Sora', 'Inter', sans-serif; font-weight : 700; font-size : clamp(28px, 2.63vw, 50px); line-height : 1.4; letter-spacing: -0.04em; color : #3d4250; margin : 0 0 30px; } .hero-title .highlight { color: #3d4250; } .hero-subtitle { font-family: 'Inter', sans-serif; font-weight: 600; font-size : clamp(16px, 1.05vw, 20px); line-height: 1.5; color : #8b909c; max-width : 520px; margin : 0 0 43px; } /* Pill button. The two arrows swap on hover: the trailing one collapses while the leading one expands, matching the module's custom .rev-btn CSS. */ .hero-btn { display : inline-block; padding : 0 clamp(32px, 2.9vw, 55px); border-radius : 50px; background-color: var(--primary-blue); color : #ffffff; font-family : 'Inter', sans-serif; font-weight : 700; font-size : 12px; line-height : clamp(56px, 4.2vw, 80px); text-transform : uppercase; text-decoration : none; white-space : nowrap; transition : background-color 0.3s ease; } .hero-btn:hover, .hero-btn:focus { background-color: #00c9ff; color : #ffffff; } .hero-btn i { display : inline-block; font-size : 12px; transition: margin-right 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease, width 0.3s ease; } .btn-request { background-color: var(--primary-blue); border : none; padding : 15px 35px; border-radius : 50px; font-weight : 700; font-size : 14px; text-transform : uppercase; letter-spacing : 1px; transition : transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .btn-request:hover { transform : translateY(-3px); box-shadow : 0 10px 20px rgba(58, 100, 240, 0.3); background-color: #2a52d0; } .hero-btn i.left { width : 0; margin-right: 0; opacity : 0; } .hero-btn i.right { width : 12px; margin-left: 10px; opacity : 1; } .hero-btn:hover i.left { width : 12px; margin-right: 10px; opacity : 1; } .hero-btn:hover i.right { width : 0; margin-left: 0; opacity : 0; } /* --- Layer entrances ----------------------------------------------------- Offsets and durations are the module's own: title 0ms/1000ms, subtitle 270ms/1000ms, button 490ms/1200ms, image 0ms/1000ms, all power3.inOut. */ /* Gated on .owl-loaded so the hero still renders if Owl never initialises -- these layers include the H1 and the LCP image. */ .hero-slider.owl-loaded .hero-title, .hero-slider.owl-loaded .hero-subtitle, .hero-slider.owl-loaded .hero-btn, .hero-slider.owl-loaded .hero-img { opacity: 0; } .hero-slider .owl-item.active:not(.cloned) .hero-title, .hero-slider .owl-item.active:not(.cloned) .hero-subtitle, .hero-slider .owl-item.active:not(.cloned) .hero-btn, .hero-slider .owl-item.active:not(.cloned) .hero-img { animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-fill-mode : forwards; } .hero-slider .owl-item.active:not(.cloned) .hero-title { animation-name : heroLayerLeft; animation-duration: 1s; } .hero-slider .owl-item.active:not(.cloned) .hero-subtitle { animation-name : heroLayerLeft; animation-duration: 1s; animation-delay : 0.27s; } .hero-slider .owl-item.active:not(.cloned) .hero-btn { animation-name : heroLayerUp; animation-duration: 1.2s; animation-delay : 0.49s; } .hero-slider .owl-item.active:not(.cloned) .hero-img { animation-name : heroLayerRight; animation-duration: 1s; } .hero-slider .owl-item.active:not(.cloned) .image-zoom-out { animation-name : heroImageZoomOut; animation-duration: 1.8s; } @keyframes heroLayerLeft { from { opacity : 0; transform: translateX(-100%); } to { opacity : 1; transform: translateX(0); } } @keyframes heroLayerRight { from { opacity : 0; transform: translateX(100%); } to { opacity : 1; transform: translateX(0); } } @keyframes heroImageZoomOut { from { opacity : 0; transform: scale(1.18); } to { opacity : 1; transform: scale(1); } } @keyframes heroLayerUp { from { opacity : 0; transform: translateY(100%); } to { opacity : 1; transform: translateY(0); } } /* --- Responsive ---------------------------------------------------------- Module heights per breakpoint: 988 / 568 / 560 / 520. */ @media (max-width: 991px) { .hero-section { padding: 60px 0 40px; } .hero-wrapper { gap: 24px; /* Below this breakpoint .hero-slide stacks copy above media instead of side-by-side, so the desktop min-height (sized for the image alone) under-reserves space and the page still jumps once Owl reveals the slider. Measured real height across 375-768px viewports. */ min-height: clamp(650px, 90vw, 750px); } .hero-slide { grid-template-columns: 1fr; gap : 28px; text-align : center; } .hero-copy { max-width: none; margin : 0 auto; } .hero-subtitle { margin: 0 auto 32px; } .hero-media { height: clamp(280px, 46vw, 420px); } .hero-img { object-position: center; } /* The module itself hides its tabs below tablet-extra, and the circles have nowhere to sit once the copy is centred. */ .hero-tabs, .hero-shape { display: none; } } /* Respect a reduced-motion preference: show every layer at its resting state. */ @media (prefers-reduced-motion: reduce) { .hero-shape, .hero-shape span, .hero-slider .owl-item.active .hero-title, .hero-slider .owl-item.active .hero-subtitle, .hero-slider .owl-item.active .hero-btn, .hero-slider .owl-item.active .hero-img { animation: none; } .hero-shape, .hero-slider.owl-loaded .hero-title, .hero-slider.owl-loaded .hero-subtitle, .hero-slider.owl-loaded .hero-btn, .hero-slider.owl-loaded .hero-img { opacity: 1; } } .clients-carousel .owl-stage, .clients-carousel-reverse .owl-stage { display : flex; align-items: center; } .client-logo-card { min-height : 90px; display : flex; align-items : center; justify-content: center; } /* Right Visuals */ .hero-visuals { min-height : 620px; display : flex; justify-content: center; align-items : center; } .hero-backdrop-shape { position : absolute; width : 470px; height : 470px; border : 40px solid var(--accent-yellow); border-bottom: 0; border-radius: 240px 240px 0 0; right : 40px; bottom : 0; z-index : 0; } .hero-backdrop-dot { position : absolute; width : 76px; height : 76px; border-radius: 50%; background : var(--accent-cyan); left : 20px; bottom : 110px; z-index : 0; } .capsule-container { display : flex; gap : 18px; position : relative; z-index : 2; align-items: end; } .capsule { overflow : hidden; position : relative; /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); */ } /* .capsule-1 { width: 448px; height: 455px; border-radius: 180px 180px 0 0; background: var(--accent-cyan); margin-top: -10px; } */ .capsule-2 { width : 155px; height : 215px; border-radius: 34px; background : #eff6ff; margin-left : -50px; margin-bottom: 22px; border : 10px solid #ffffff; } .hero-main-image, .hero-side-image { width : 100%; height : 100%; object-fit : cover; object-position: top center; display : block; } /* Decorative Circles */ .circle { position : absolute; border-radius: 50%; z-index : 1; } .circle-light-blue { width : 100px; height : 100px; background-color: var(--dot-blue); top : 10%; left : -2%; opacity : 0.6; } .circle-orange { width : 30px; height : 30px; background-color: var(--dot-orange); top : 8%; right : 7%; } .circle-purple { width : 60px; height : 60px; background-color: var(--dot-purple); bottom : 7%; right : 32%; } .circle-green { width : 20px; height : 20px; background-color: var(--dot-green); bottom : 32%; left : 8%; } /* WhatsApp Float */ .whatsapp-float { position : fixed; bottom : 30px; right : 30px; border-radius : 50%; display : flex; justify-content: center; align-items : center; z-index : 1000; transition : transform 0.3s ease; } .whatsapp-float img { width : 50%; border-radius: 120px 120px 120px 120px; } .whatsapp-float:hover { transform: scale(1.1); color : #fff; } .cloud-transition-section { padding : 0; background: #ffffff; } .cloud-carousel-panel { min-height : 740px; /* background : linear-gradient(180deg, #1cb8ea 0%, #3a5af2 100%); */ background-color : #3a5af2; border-top-right-radius: 160px; position : relative; overflow : hidden; padding : 120px 0 70px 66px; } .cloud-carousel-track-wrap { overflow : hidden; width : 100%; /* border-left: 1px solid white; */ padding : 20px; } .cloud-carousel-track { display : flex; gap : 24px; transition : transform 0.45s ease; margin-left : 0; /* remove extra offset so transforms align with wrap */ padding-left: 0; } .cloud-feature-card { /* precisely size two cards + gap to fill the container: (100% - gap)/2 */ flex : 0 0 calc((100% - 24px) / 2); background : #ffffff; border-radius: 18px; padding : 34px 24px 30px; box-shadow : 0 18px 50px rgba(32, 64, 148, 0.14); cursor : pointer; } .cloud-laptop-frame { position : relative; margin-bottom: 24px; } .cloud-laptop-screen { height : 376px; /* border : 2px solid #434343; border-radius: 3px; background : #f8f8f8; */ overflow : hidden; position : relative; } .cloud-laptop-screen img { width : 100%; height : 100%; object-fit: cover; display : block; } .cloud-laptop-camera { position : absolute; top : -1px; left : 50%; transform : translateX(-50%); width : 40px; height : 12px; background : #0f1219; border-radius: 0 0 10px 10px; z-index : 2; } .cloud-laptop-base { width : calc(100% + 18px); height : 10px; margin-left : -9px; margin-top : 2px; background : linear-gradient(180deg, #b7b7b7 0%, #8b8b8b 100%); border-radius: 0 0 12px 12px; position : relative; } .cloud-laptop-base::after { content : ""; position : absolute; left : 50%; transform : translateX(-50%); bottom : -2px; width : 74px; height : 3px; border-radius: 999px; background : rgba(255, 255, 255, 0.65); } .cloud-feature-card h3 { font-size : 18px; line-height : 1.35; font-weight : 700; margin-bottom: 12px; color : #3e4657; } .cloud-feature-card p { font-size : 15px; line-height : 1.6; color : #666f82; margin-bottom: 0; max-width : 290px; } .cloud-carousel-dots { display : flex; align-items : center; gap : 14px; margin-top : 48px; padding-left: 4px; } .cloud-dot { width : 8px; height : 8px; border : 0; border-radius: 50%; background : rgba(255, 255, 255, 0.28); padding : 0; } .cloud-dot.active { width : 14px; height : 14px; background: #ffffff; } .cloud-content-panel { padding: 88px 72px 88px 72px; } .cloud-section-label { display : inline-flex; align-items : center; justify-content: center; min-width : 110px; padding : 7px 16px; border-radius : 8px; background : linear-gradient(to right, #dff6ff 50%, transparent 50%); color : #3f4658; font-size : 11px; font-weight : 700; letter-spacing : 0.28em; margin-bottom : 22px; } .cloud-section-title { font-size : 2.5rem; line-height : 44px; letter-spacing: -1px; font-weight : 800; color : #36425d; max-width : 520px; margin-bottom : 30px; } .cloud-section-text { font-size : 15px; line-height : 1.75; color : #59647c; max-width : 530px; margin-bottom: 28px; } .cloud-feature-list { list-style: none; padding : 0; margin : 18px 0 34px; } .cloud-feature-list li { position : relative; padding-left : 44px; margin-bottom: 18px; font-size : 15px; font-weight : 600; color : #39445d; } .cloud-feature-list li::before { content : "\2713"; position : absolute; left : 0; top : 50%; transform : translateY(-50%); width : 24px; height : 24px; border-radius : 50%; border : 1px solid #cfd7ea; color : var(--primary-blue); display : flex; align-items : center; justify-content: center; font-size : 13px; font-weight : 700; } .cloud-feature-list li:hover { color: var(--primary-blue); } .cloud-cta-btn { background : linear-gradient(90deg, #3a64f0 0%, #3c5af4 100%); border : 0; color : #ffffff; font-size : 12px; font-weight : 700; padding : 16px 38px; border-radius: 999px; } .cloud-cta-btn:hover { background: linear-gradient(90deg, #345be0 0%, #3551e4 100%); color : #ffffff; } .stats-section { position : relative; padding : 110px 0 90px; background-color : #f8fbff; background-image : url("images/Static background.webp"); background-repeat : no-repeat; background-position: center bottom; background-size : cover; overflow : hidden; } .stats-row { row-gap: 34px; } .stats-item { position: relative; z-index : 2; } .stats-value { font-size : 4.2rem; line-height : 1; font-weight : 800; letter-spacing: -0.06em; color : #325cff; margin-bottom : 6px; } .stats-suffix { color : #17b8ea; font-size : 0.58em; vertical-align: top; margin-left : 1px; } .stats-label { margin : 0; color : #7a859c; font-size : 14px; font-weight: 700; } .stats-247 { color: #325cff; } .stats-divider { color : #17b8ea; margin: 0 2px; } .stats-decoration { position : absolute; border-radius: 50%; z-index : 1; } .stats-yellow { width : 30px; height : 30px; background: #ffda2b; left : 8%; top : 13%; } .stats-blue { width : 20px; height : 20px; background: #315eff; left : 7%; top : 52%; } .stats-red { width : 40px; height : 40px; background: #fe2f01; left : 31%; top : 81%; } .stats-cyan { width : 20px; height : 20px; background: #00c9ff; left : 89%; top : 8%; } .stats-orange { width : 40px; height : 40px; background: #fea901; left : 93%; top : 63%; } .smart-essentials-section { position : relative; background : #ffffff; padding-bottom: 70px; overflow : hidden; } .smart-essentials-top { position : relative; background: linear-gradient(180deg, #3b5cf7 0%, #3d61f6 100%); padding : 78px 0 120px; overflow : hidden; } .smart-copy { position : relative; z-index : 2; color : #ffffff; max-width: 430px; } .smart-kicker { display : inline-block; padding : 6px 12px; border-radius : 6px; background : linear-gradient(to right, #FFFFFF30 30%, transparent 30%); color : #dfe7ff; font-size : .75rem; letter-spacing: 0.18em; font-weight : 700; margin-bottom : 20px; } .smart-title { font-size : 2.6rem; line-height : 1.05; letter-spacing: -0.05em; font-weight : 800; margin-bottom : 22px; color : #ffffff; max-width : 360px; } .smart-text { font-size : 18px; text-transform: capitalize; letter-spacing: inherit; font-weight : inherit !important; line-height : 28px; color : #ffffff; margin-bottom : 18px; } .smart-btn { margin-top : 8px; background-color: var(--primary-blue); color : #ffffff; border-radius : 999px; padding : 13px 26px; font-size : 11px; font-weight : 700; box-shadow : 1px 2px 10px 4px #95a6e3; font-size : 12px; font-weight: 700; line-height: 1.5; cursor : pointer; border : none !important; text-decoration: none; text-shadow : none; text-transform : uppercase; } .smart-btn:hover { background-color: #0037fd; color : #ffffff; } .smart-image-card { position : relative; z-index : 2; /* width : 258px; height : 352px; */ margin : 0 auto; border-radius: 24px; overflow : hidden; /* transform : rotate(9deg); */ /* box-shadow: 0 28px 60px rgba(11, 31, 116, 0.28); */ } .smart-image-card img { width : 100%; height : 100%; object-fit: cover; display : block; } .smart-essentials-heading { position : relative; z-index : 2; color : #ffffff; font-size : 2.1rem; line-height : 1.1; letter-spacing: -0.04em; font-weight : 800; margin-top : 34px; } .smart-shape { position: absolute; z-index : 1; } .smart-shape-cyan { width : 900px; height : 900px; left : -34%; top : 53%; background : #00c9ff; border-radius: 50%; } .smart-shape-purple { width : 85px; height : 85px; left : 85%; top : 13%; background : #a74fff; border-radius: 50%; } .smart-shape-yellow { width : 120px; height : 120px; left : 54%; top : 22%; background : #ffda2b; border-radius: 50%; } .smart-shape-pink { width : 200px; height : 200px; left : 54%; top : 51%; background : #f9b8c4; border-radius: 50%; } .smart-shape-soft { width : 117px; height : 117px; left : 79%; top : 65%; background : rgba(255, 255, 255, 0.31); border-radius: 50%; } .smart-cards-shell { position : relative; margin-top: -58px; z-index : 5; } .smart-cards-viewport { overflow: hidden; } .smart-cards-track { display : flex; gap : 22px; transition : transform 0.45s ease; will-change: transform; } .smart-card { position : relative; flex : 0 0 calc(33.333% - 15px); min-height : 270px; background : #ffffff; border-radius: 18px; padding : 44px 34px 30px; box-shadow : 0 24px 45px rgba(28, 46, 113, 0.12); overflow : hidden; } .smart-card-header { display : flex; align-items: center; gap : 18px; } .smart-card-badge { width : 58px; height : 58px; border-radius : 50%; background : #1ebcf0; color : #ffffff; display : flex; align-items : center; justify-content: center; font-size : 20px; font-weight : 800; margin-bottom : 24px; } .smart-card h3 { font-size : 22px; font-weight : 700; line-height : 28px; letter-spacing: 0; color : #4f5258; margin-bottom : 16px; /* max-width : 220px; */ } .smart-card p { color : #5e667a; margin-bottom: 0; max-width : 245px; position : relative; z-index : 2; font-size : 16px; font-weight : 400; line-height : 26px; margin-top : 40px; } .smart-card-ghost { position : absolute; right : 18px; bottom : -18px; font-size : 7.7rem; line-height : 1; font-weight : 800; color : rgba(60, 68, 95, 0.07); letter-spacing: -0.08em; pointer-events: none; } .order-process-section { padding : 96px 0 84px; background: #ffffff; } .order-process-header { max-width: 760px; margin : 0 auto 70px; } .order-process-kicker { display : inline-flex; align-items : center; justify-content: center; padding : 8px 18px; border-radius : 10px; background : linear-gradient(to right, #CCF4FF 30%, transparent 30%); color : #3a465f; font-size : 12px; font-weight : 700; letter-spacing : 0.28em; margin-bottom : 24px; } .order-process-title { font-size : 3.35rem; line-height : 1.08; letter-spacing: -0.05em; font-weight : 800; color : #36425d; margin-bottom : 26px; font-weight : 700; } .order-process-subtitle { font-size : 16px; line-height: 1.7; font-weight: 600; color : #8a97ad; margin : 0; } .order-step-card { max-width: 292px; margin : 0 auto; } .order-step-icon { width : 92px; height : 92px; border-radius : 18px; background : linear-gradient(180deg, #3d64f6 0%, #3654ee 100%); display : flex; align-items : center; justify-content: center; margin-bottom : 28px; } .order-step-icon:hover { transform: scale(.9); } .order-step-icon svg { width : 48px; height : 48px; stroke : #ffffff; stroke-width : 2.8; fill : none; stroke-linecap : round; stroke-linejoin: round; } .order-step-card h3 { font-size : 18px; line-height : 1.45; font-weight : 800; color : #38425c; margin-bottom: 10px; } .order-step-card h3:hover { color: var(--primary-blue); } .order-step-card p { font-size : 15px; line-height: 2; color : #3f4658; margin : 0; max-width : 240px; } .order-process-cta-wrap { margin-top: 72px; } .order-process-btn { min-width : 254px; padding : 18px 34px; border-radius: 999px; background : linear-gradient(90deg, #3c63f6 0%, #3553ee 100%); color : #ffffff; border : 0; font-size : 14px; font-weight : 700; } .order-process-btn:hover { background: linear-gradient(90deg, #355ae6 0%, #304ae0 100%); color : #ffffff; } .testimonials-section { margin-top: 70px; background: linear-gradient(180deg, #3e60f6 0%, #3656ef 100%); } .testimonials-image-panel { min-height: 645px; height : 100%; } .testimonials-image-panel img { width : 100%; height : 100%; object-fit : cover; display : block; border-top-right-radius: 120px; } .testimonials-content-panel { position : relative; min-height : 645px; height : 100%; background : linear-gradient(180deg, #3e60f6 0%, #3656ef 100%); /* border-top-left-radius: 110px; */ overflow : hidden; display : flex; align-items : center; } .testimonials-copy { position : relative; z-index : 2; max-width : 430px; margin-left : 112px; margin-right: 48px; color : #ffffff; } .testimonials-title { font-size : 3.05rem; line-height : 1.05; letter-spacing: -0.05em; font-weight : 800; margin-bottom : 42px; color : #ffffff; } .testimonials-text { font-size : 18px; line-height : 1.15; letter-spacing: -0.03em; font-weight : 500; margin-bottom : 42px; color : #ffffff; max-width : 310px; } .testimonials-author-block h3 { font-size : 17px; font-weight : 800; margin-bottom: 8px; color : #ffffff; } .testimonials-author-block span { font-size : 12px; font-weight: 700; color : #ffffff; } /* .testimonials-quote-icon { position: absolute; top: 120px; left: -32px; width: 82px; height: 82px; border-radius: 50%; background: #1ab9eb; color: #ffffff; font-size: 70px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 3; } */ /* Icon in center between both columns */ .testimonials-quote-icon { position : absolute; top : 30%; left : 50%; /* center between columns */ transform: translate(-50%, -50%); width : 82px; height : 82px; border-radius: 50%; background : #1ab9eb; color : #ffffff; font-size : 60px; display : flex; align-items : center; justify-content: center; z-index: 5; } .testimonials-yellow-shape { position : absolute; right : -150px; bottom : -200px; width : 520px; height : 520px; border-radius: 50%; background : #ffda2b; z-index : 1; } .testimonials-dots { display : flex; gap : 12px; margin-top: 64px; } .testimonial-dot { width : 8px; height : 8px; border-radius: 50%; border : 0; padding : 0; background : rgba(255, 255, 255, 0.28); } .testimonial-dot.active { width : 14px; height : 14px; background: #ffffff; } .advantages-section { padding : 92px 0 80px; background: #f7fbff; } .advantages-top-row { margin-bottom: 64px; } .advantages-copy { max-width: 420px; } .advantages-kicker { display : inline-flex; align-items : center; justify-content: center; padding : 8px 16px; border-radius : 10px; /* background : #dff6ff; */ background : linear-gradient(to right, #CCF4FF 30%, transparent 30%); color : #3f465a; font-size : 12px; font-weight : 700; letter-spacing : 0.24em; margin-bottom : 26px; } .advantages-title { font-size : 3.15rem; line-height : 1.08; letter-spacing: -0.05em; font-weight : 800; color : #39435c; margin-bottom : 28px; } .advantages-text { font-size : 16px; line-height: 1.65; font-weight: 600; color : #8a96ab; margin : 0; max-width : 405px; } .advantages-image-wrap { border-radius: 34px; overflow : hidden; box-shadow : 0 18px 42px rgba(49, 68, 122, 0.08); } .advantages-image-wrap img { width : 100%; height : 100%; min-height: 320px; object-fit: cover; display : block; } .advantages-grid { row-gap: 48px; } .advantages-item { text-align: left; } .advantages-icon { width : 64px; height : 64px; border-radius : 20px; display : flex; align-items : center; justify-content: center; margin-bottom : 20px; } .advantages-icon svg { width : 34px; height : 34px; stroke : #ffffff; stroke-width : 2.5; fill : none; stroke-linecap : round; stroke-linejoin: round; } .advantages-icon-orange { background: #ff4a12; } .advantages-icon-cyan { background: #1dbbf0; } .advantages-icon-yellow { background: #ffb011; } .advantages-icon-purple { background: #a758ff; } .advantages-icon-green { background: #99c800; } .advantages-item h3 { font-size : 19px; line-height: 1.35; font-weight: 800; color : #38425c; margin : 0; max-width : 300px; } .advantages-item:hover h3 { color: var(--primary-blue); } .advantages-item:hover .advantages-icon { background: #1dbbf0; } .advantages-item:hover .advantages-icon.advantages-icon-cyan { background: var(--primary-blue); } .latest-articles-section { position : relative; padding : 92px 0 72px; background: #ffffff; overflow : hidden; } .latest-articles-header { max-width: 760px; margin : 0 auto 58px; } .latest-articles-kicker { display : inline-flex; align-items : center; justify-content: center; padding : 8px 16px; border-radius : 10px; background : linear-gradient(to right, #CCF4FF 30%, transparent 30%); color : #3e4659; font-size : 12px; font-weight : 700; letter-spacing : 0.26em; margin-bottom : 24px; } .latest-articles-title { font-size : 3.25rem; line-height : 1.06; letter-spacing: -0.05em; font-weight : 800; color : #36425d; max-width : 520px; margin : 0 auto 22px; } .latest-articles-subtitle { font-size : 16px; line-height: 1.7; font-weight: 600; color : #8a96ab; margin : 0; } .article-card { position : relative; height : 100%; background : #ffffff; border-radius: 20px; overflow : hidden; box-shadow : 0 18px 48px rgba(48, 65, 119, 0.1); } .article-card-media { aspect-ratio: 930 / 620; overflow : hidden; } .article-card-media img { width : 100%; height : 100%; object-fit: cover; display : block; } .article-card-body { padding: 26px 24px 28px; } .article-meta { font-size : 10px; line-height : 1.5; font-weight : 700; letter-spacing: 0.08em; color : #94a0b5; margin-bottom : 14px; } .article-meta span { margin: 0 6px; } .article-card h3 { font-size : 18px; line-height : 1.25; letter-spacing: -0.03em; font-weight : 800; color : #36425d; margin-bottom : 14px; } .article-card p { font-size : 15px; line-height : 1.7; color : #5f6980; margin-bottom: 26px; } .article-read-more { font-size : 12px; font-weight : 800; color : #355cff; text-decoration: none; letter-spacing : 0.04em; } .article-read-more:hover { color: #244ae8; } .latest-articles-cta { margin-top: 50px; /* Without its own stacking context this sits below the section's decorative circles (.articles-shape-*) even though it comes later in the DOM and has an opaque background -- position:absolute elements always paint above position:static ones. On mobile .articles-shape-left is large enough to reach the button and visually cover part of it. */ position : relative; z-index : 1; } .latest-articles-btn { display : inline-block; background : linear-gradient(90deg, #3a64f0 0%, #3c5af4 100%); border : 0; color : #ffffff; font-size : 12px; font-weight : 700; letter-spacing: 0.04em; text-transform: uppercase; padding : 16px 44px; border-radius : 999px; } .latest-articles-btn:hover { background: linear-gradient(90deg, #345be0 0%, #3551e4 100%); color : #ffffff; } .articles-shape { position : absolute; border-radius: 50%; z-index : 0; } .articles-shape-left { width : 200px; height : 200px; background: #ecf3ff; left : 88px; bottom : -42px; } .articles-shape-right { width : 120px; height : 120px; background: #ffda2b; right : 62px; bottom : 54px; } .clients-logo-section { position : relative; padding : 78px 0 64px; background: #ffffff; overflow : hidden; } .clients-logo-bg-circle { position : absolute; top : -40px; left : 200px; width : 150px; height : 150px; border-radius: 50%; background : #dfe8ff; z-index : 0; } /*new css for logos*/ .clients-logo-heading { text-align : center; font-size : 3rem; line-height : 1.08; letter-spacing: -0.05em; font-weight : 800; color : #35415c; margin-bottom : 34px; } .slider-wrapper { overflow: hidden; width : 100%; position: relative; } .slider { display : flex; transition: transform 0.6s ease-in-out; } .logo { width : 200px; height : 200px; margin : 0 15px; object-fit : contain; background : white; padding : 10px; border-radius: 10px; } /*new css for logos ended*/ .logo-teal { background : #1698bb; color : #ffffff; font-size : 56px; font-weight : 300; letter-spacing: -0.08em; } .logo-wordmark { font-size : 22px; font-weight : 700; letter-spacing: -0.03em; } .accent-cyan { color: #29aeb6; } .accent-purple { color: #8f84a6; } .accent-dark { color: #2d2d2d; } .accent-orange { color: #ff6d0f; } .accent-bluepink { color : #295bff; text-shadow: 18px 0 0 #ff2b7d; } .accent-gold { color : #b88a2a; font-weight: 500; font-size : 34px; } .logo-green { background : #97cc39; color : #ffffff; font-size : 44px; font-weight: 700; } .logo-monogram { background : #f2f2f2; color : #ec3d27; font-size : 54px; font-weight: 800; } .site-footer { position: relative; } .footer-cta-wrap { position : relative; z-index : 2; margin-bottom: -40px; } .footer-cta-card { position : relative; background : #1fbbe8; border-radius : 120px 120px 120px 0; min-height : 206px; overflow : hidden; display : flex; align-items : center; justify-content: space-between; padding : 34px 40px 34px 120px; } .footer-cta-content { max-width: 520px; position : relative; z-index : 2; } .footer-cta-content h2 { font-size : 2.15rem; line-height : 1.1; letter-spacing: -0.04em; font-weight : 800; color : #ffffff; margin-bottom : 18px; } .footer-cta-content p { font-size : 17px; line-height: 1.4; color : #ffffff; margin : 0; max-width : 480px; } .footer-cta-pink { position : absolute; left : 60%; top : 8%; width : 200px; height : 200px; border-radius: 50%; background : #f9b8c4; } .footer-cta-yellow { position : absolute; left : 69%; top : -9%; width : 430px; height : 430px; border-radius : 50%; background : #ffda2b; z-index : 1; pointer-events : none; } .footer-cta-btn-wrap { position : absolute; right : 40px; top : 50%; transform : translateY(-50%); z-index : 2; } .footer-cta-btn { min-width : 184px; padding : 20px 28px; border-radius : 999px; background : #ffffff; color : #3b5cff; font-size : 13px; font-weight : 800; border : 0; display : inline-flex; align-items : center; gap : 10px; justify-content: center; transition : transform 0.3s ease, color 0.3s ease; } .footer-cta-btn i { width : 12px; transition: width 0.3s ease, margin 0.3s ease, opacity 0.3s ease; } .footer-cta-btn .left { width : 0; margin-left: 0; opacity : 0; } .footer-cta-btn .right { width : 12px; margin-left: 10px; opacity : 1; } .footer-cta-btn:hover .left { width : 12px; margin-right: 10px; opacity : 1; } .footer-cta-btn:hover .right { width : 0; margin-left: 0; opacity : 0; } .footer-cta-btn:hover { background: #ffffff; color : #2e52f0; } .footer-main { padding : 72px 0 56px; background: #3d5ef6; } .footer-main .row { --bs-gutter-x: 1.875rem; } @media (min-width: 992px) { .footer-main .row>div:nth-of-type(1) { flex : 0 0 41.5%; max-width : 41.5%; padding-left: 0; } .footer-main .row>div:nth-of-type(2) { flex : 0 0 20.2%; max-width: 20.2%; } .footer-main .row>div:nth-of-type(3) { flex : 0 0 20%; max-width: 20%; } .footer-main .row>div:nth-of-type(4) { flex : 0 0 18.3%; max-width : 18.3%; padding-right: 0; } } .footer-newsletter h3, .footer-office h3 { font-size : 2rem; line-height : 1.1; font-weight : 800; color : #ffffff; margin-bottom: 16px; } .footer-newsletter p, .footer-office p, .footer-office a, .footer-links a, .footer-social span { color: #ffffff; } .footer-newsletter p { font-size : 16px; line-height : 1.55; max-width : 430px; margin-bottom: 28px; } .footer-newsletter-form { display : flex; align-items : center; width : 100%; max-width : 405px; background : #ffffff; border-radius: 999px; overflow : hidden; margin-bottom: 22px; } .footer-newsletter-form input { flex : 1; border : 0; outline : 0; padding : 16px 24px; font-size: 15px; color : #6d7689; } .footer-newsletter-form button { border : 0; min-width : 122px; padding : 18px 22px; background : #1eb9e9; color : #ffffff; font-size : 12px; font-weight: 800; } .footer-social { display : flex; align-items: center; gap : 18px; } .footer-social span { font-size : 15px; font-weight: 700; } .footer-social-icons { display : flex; align-items: center; gap : 12px; } .footer-social-icons a { color : rgba(255, 255, 255, 0.45); text-decoration: none; font-size : 13px; font-weight : 700; /* Accessibility: WCAG target-size wants at least a 24x24 hit area. */ display : inline-flex; align-items : center; justify-content: center; width : 24px; height : 24px; } .footer-social-icons a:hover { color: #00C9FF; } .footer-app-badges { display : flex; align-items: center; gap : 14px; margin-top : 24px; } .footer-app-badges img { height: 42px; width : auto; } .footer-links { list-style: none; padding : 10px 0 0; margin : 0; } .footer-links li { margin-bottom: 16px; } .footer-links a { text-decoration: none; font-size : 16px; font-weight : 700; } .footer-links a:hover { color: #00C9FF; } .footer-office p { font-size : 16px; line-height : 1.55; margin-bottom: 10px; max-width : 250px; } .footer-office a { display : block; text-decoration: none; font-size : 16px; line-height : 1.7; margin-bottom : 4px; } .footer-bottom { background: #ffffff; padding : 10px 0; } .footer-bottom-row { display : flex; align-items : center; justify-content: space-between; gap : 18px; } .footer-brand img { height : 44px; width : auto; display: block; } .footer-bottom p { margin : 0; font-size: 15px; color : #36425d; } .footer-bottom p span { color: #1f8eff; } .footer-back-top { text-decoration: none; color : #36425d; font-size : 15px; display : inline-flex; align-items : center; gap : 8px; font-weight : 700; } .footer-back-top i { font-size : 14px; transition: transform 0.3s ease; } .footer-back-top:hover i { transform: translateY(-2px); } @keyframes clientsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Responsive */ @media (max-width: 991px) { .hero-visuals { min-height : auto; margin-top : 45px; padding-bottom: 10px; } .hero-backdrop-shape { width : 320px; height : 320px; border-width: 28px; right : 50%; transform : translateX(50%); } .hero-backdrop-dot { width : 58px; height: 58px; left : 8px; bottom: 60px; } .capsule-container { width : 100%; justify-content: center; } .capsule-1 { width : min(100%, 340px); height: 380px; } .capsule-2 { width : 118px; height : 158px; margin-left : -38px; margin-bottom: 15px; } .cloud-carousel-panel { min-height : auto; border-top-right-radius: 80px; padding : 70px 20px 44px; } .cloud-feature-card { flex: 0 0 100%; } .cloud-carousel-dots { margin-top: 30px; } .cloud-content-panel { padding: 56px 22px 60px; } .cloud-section-title { font-size: 2.4rem; } .stats-section { padding : 88px 0 70px; background-size: 1400px auto; } .stats-value { font-size: 3.1rem; } .smart-essentials-top { padding: 64px 0 100px; } .smart-title { font-size: 2.2rem; max-width: 100%; } .smart-image-card { transform: rotate(5deg); width : 236px; height : 320px; } .smart-essentials-heading { font-size : 1.8rem; margin-top: 28px; } .smart-card { flex : 0 0 calc(50% - 11px); min-height: 248px; padding : 36px 24px 28px; } .smart-shape-cyan { width : 320px; height: 320px; left : -140px; top : 220px; } .order-process-section { padding: 80px 0 70px; } .order-process-header { margin-bottom: 54px; } .order-process-title { font-size: 2.55rem; } .order-process-cta-wrap { margin-top: 56px; } .testimonials-image-panel, .testimonials-content-panel { min-height: auto; } .testimonials-image-panel { height: 420px; } .testimonials-content-panel { border-top-left-radius: 60px; padding : 70px 24px; } .testimonials-copy { margin : 0 auto; max-width: 100%; } .testimonials-title { font-size : 2.45rem; margin-bottom: 28px; } .testimonials-text { max-width: 100%; } .testimonials-quote-icon { top : 40px; left : 24px; width : 70px; height : 70px; font-size: 58px; } .testimonials-yellow-shape { width : 360px; height: 360px; right : -120px; bottom: -140px; } .advantages-section { padding: 76px 0 68px; } .advantages-top-row { margin-bottom: 52px; } .advantages-title { font-size: 2.45rem; } .advantages-image-wrap img { min-height: 280px; } .latest-articles-section { padding: 76px 0 62px; } .latest-articles-title { font-size: 2.5rem; } .articles-shape-left { left: 12px; } .articles-shape-right { right : -36px; bottom: 20px; } .clients-logo-section { padding: 68px 0 54px; } .clients-logo-heading { font-size: 2.35rem; } /* Desktop-only left:200px sits well clear of the (much wider, 3rem) heading there; at this width it lands mid-word through the centered, already-shrunk heading text instead. Moving it to the corner alone isn't enough -- at the original 150px it's still tall enough to reach down into the heading's line (68px-102px into the section) -- so it's shrunk too, keeping its bottom edge above where the heading starts. */ .clients-logo-bg-circle { top : -20px; left : auto; right : -20px; width : 70px; height: 70px; } .client-logo-card { width : 130px; height: 100px; } .logo-wordmark { font-size: 18px; } .footer-cta-card { border-radius: 60px 60px 0 0; min-height : auto; padding : 34px 24px 32px; display : block; } .footer-cta-content { max-width : 100%; margin-bottom: 28px; } .footer-cta-content h2 { font-size: 1.9rem; } .footer-cta-pink { left : 45%; top : 24px; width : 120px; height: 120px; } .footer-cta-yellow { position : relative; width : 100%; height : auto; min-height : 130px; border-radius : 60px 60px 0 60px; } .footer-cta-btn-wrap { right : auto; left : 28px; top : auto; bottom : 0; height : 130px; display : flex; align-items: center; transform : none; } .footer-main { padding: 56px 0 42px; } .footer-bottom-row { flex-direction: column; text-align : center; } /* The WhatsApp button is fixed 30px from the viewport's bottom-right corner, so once the page is scrolled all the way down (its natural resting point) it permanently sits over whatever's in that corner -- here, the centered copyright line. Reserving space the button's height clear of the page's actual bottom edge keeps that from ever coinciding with page content. */ .footer-bottom { padding-bottom: 90px; } } @media (max-width: 575px) { .hero-title { font-size : 26px; line-height: 36px; } .hero-btn { display : block; padding : 0 24px; text-align: center; } .capsule-1 { height: 340px; } .cloud-section-title { font-size: 2rem; } .cloud-feature-card { padding: 24px 18px 24px; } .cloud-laptop-screen { height: 175px; } .cloud-laptop-screen img { height : 175px; object-fit: contain; } .stats-section { padding : 72px 0 58px; background-size: 980px auto; } .stats-value { font-size: 2.65rem; } .smart-essentials-top { padding: 54px 0 92px; } .smart-title { font-size: 1.9rem; } .smart-essentials-heading { font-size: 1.45rem; } .smart-card { flex : 0 0 88%; min-height: 230px; } .smart-card-ghost { font-size: 6rem; } .order-process-title { font-size: 2rem; } .order-process-subtitle { font-size: 15px; } .order-step-card { text-align: center; } /* text-align:center above only centers inline content (the heading/copy) -- the icon is a fixed-width block (display:flex, 92px) so it stays pinned left unless it gets its own auto margins. */ .order-step-icon { margin-left : auto; margin-right: auto; } .order-step-card p { max-width: 100%; } .order-process-btn { width : 100%; min-width: 0; } .testimonials-image-panel { height: 320px; } .testimonials-content-panel { border-top-left-radius: 34px; padding : 56px 18px 48px; } .testimonials-title { font-size: 2rem; } .testimonials-text { font-size : 16px; margin-bottom: 30px; } .testimonials-dots { margin-top: 40px; } .advantages-title { font-size: 2rem; } .advantages-text { font-size: 15px; } .advantages-grid { row-gap: 34px; } /* text-align:center only centers the heading text -- .advantages-icon is a fixed-width block (64px), so it needs its own auto margins to actually center under it (same fix as .order-step-icon above). */ .advantages-item { text-align: center; } .advantages-icon { margin-left : auto; margin-right: auto; } /* Same issue as the icon: the base rule's max-width:300px keeps the h3 narrower than the card on wider phones, so text-align:center centers the text only within that 300px box, not within the actual card -- leaving it visibly off-center under the (truly centered) icon. */ .advantages-item h3 { max-width: 100%; } .latest-articles-title { font-size: 2rem; } .latest-articles-subtitle { font-size: 15px; } .article-card-body { padding: 22px 18px 24px; } .clients-logo-heading { font-size: 2rem; } .clients-logo-track { gap: 24px; } .client-logo-card { width : 112px; height: 86px; } .logo-teal { font-size: 42px; } .logo-green { font-size: 34px; } .logo-monogram { font-size: 40px; } .footer-cta-content h2 { font-size: 1.6rem; } .footer-cta-content p, .footer-newsletter p, .footer-office p, .footer-office a, .footer-links a, .footer-bottom p, .footer-back-top { font-size: 14px; } .footer-newsletter h3, .footer-office h3 { font-size: 1.7rem; } .footer-newsletter-form { flex-direction: column; border-radius : 24px; background : transparent; gap : 12px; overflow : visible; } .footer-newsletter-form input, .footer-newsletter-form button { width : 100%; border-radius: 999px; } .footer-social { flex-wrap: wrap; } } .logo-section { padding: 30px 0; } .logo-section .container { display : flex; align-items : center; justify-content : space-around; background-color: #F0F0F0; /* Elementor had background */ } /* Empty columns (left & right space) */ .logo-section .spacer { flex: 1; } /* Logo items */ .logo-section .logo-item { flex : 0 0 auto; text-align: center; } /* Images */ .logo-section img { max-width : 100%; height : auto; transition: transform 0.3s ease; } /* Hover effect (Elementor animation-grow) */ .logo-section img:hover { transform: scale(1.05); } /* Responsive */ @media (max-width: 768px) { .logo-section .container { flex-direction: column; gap : 20px; } .logo-section .spacer { display: none; } } /*circle css*/ .circle, .hero-backdrop-dot, .stats-decoration, .smart-shape, .testimonials-yellow-shape, .articles-shape, .clients-logo-bg-circle { transition : transform 0.15s ease-out; will-change: transform; } /* === overrides.css === */ .cloud-carousel-track-wrap { border-left: 0 !important; padding-left: 0 !important; } .cloud-carousel-track { margin-left: 0 !important; padding-left: 0 !important; } /* Reduce panel left padding so first card sits closer to edge when needed */ .cloud-carousel-panel { padding-left: 36px !important; } /* Service / Slick slider: ensure thumbnails crop to same height like live site */ .service-post-thumbnail { position: relative !important; width: 100% !important; min-height: 0 !important; padding-top: 0 !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f6f8fb !important; } .service-post-thumbnail img, .service-post-thumbnail .wp-post-image, .slick-slide img, .swiper-slide img, .column-item.service-style-3 img { position: relative !important; top: auto !important; left: auto !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; display: block !important; background: transparent !important; } .service-inner { display: flex; flex-direction: column; height: 100%; background: #ffffff; border-radius: 18px; padding: 30px; box-shadow: 0 18px 50px rgba(32,64,148,0.14); box-sizing: border-box; justify-content: flex-start; } .column-item.service-style-3 { height: 100%; } /* Fix WhatsApp floating button position and size */ .whatsapp-float { position: fixed !important; bottom: 30px !important; right: 30px !important; width: 100px !important; height: 100px !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; /* background-color: #25d366 !important; */ /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18) !important; */ z-index: 1100 !important; padding: 0 !important; overflow: hidden !important; } /* Header navigation styling aligned with live site */ .navbar { position: relative; z-index: 50; width: calc(100% - 28px); max-width: 1382px; min-height: 68px; margin: 38px auto 0; padding: 0; border-radius: 14px; background-color: #ffffff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15); } .navbar .container { width: 100%; max-width: none; min-height: 68px; padding: 0 18px 0 22px; } .navbar > .container { position: relative; } .navbar .navbar-collapse { position: static; } .navbar-brand { margin-right: auto; padding: 0; } .navbar-brand img { width: 146px; height: auto; } .navbar-nav { position: absolute; left: 50%; margin: 0 !important; transform: translateX(-50%); align-items: center; } .navbar-nav .nav-link { padding: 22px 7px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 22px !important; letter-spacing: 0 !important; color: #3d424f !important; white-space: nowrap; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: #315eff !important; } .btn-demo { position: absolute; top: 16px; right: 18px; width: 208px; height: 60px; margin-left: 0 !important; padding: 0 20px !important; background-color: #00c9ff !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; line-height: 18px !important; border-radius: 50px !important; border: none !important; } .btn-demo:hover { background-color: #00c9ff !important; color: white !important; } .whatsapp-float img { width: 60% !important; height: 60% !important; object-fit: contain !important; object-position: center center !important; } /* Keep page banners directly below the header; blog pages opt into their own absolute navigation through their page-specific stylesheet. */ .about-hero-section, .modules-hero-section, .services-hero-section, .contact-hero-section, .Demo-hero-section, .mobile-app-hero-section { margin-top: 0 !important; } @media (max-width: 991px) { .navbar .container { min-height: 72px !important; padding-left: 20px !important; padding-right: 20px !important; } .navbar-brand img { max-width: min(161px, 62vw); height: auto; } .navbar { width: calc(100% - 40px); min-height: 68px; margin-top: 20px; } .navbar-collapse { padding: 8px 0 16px !important; } .navbar-nav { position: static; transform: none; align-items: stretch; gap: 0; } .navbar-nav .nav-link { padding: 10px 0 !important; } .about-hero-section, .modules-hero-section, .services-hero-section, .contact-hero-section, .Demo-hero-section { margin-top: 0 !important; min-height: 300px !important; padding: 72px 0 !important; border-bottom-left-radius: 72px !important; } .about-hero-content h1, .modules-hero-content h1, .services-hero-content h1, .contact-hero-content h1, .Demo-hero-content h1 { max-width: calc(100vw - 40px); font-size: clamp(2.25rem, 8vw, 3.5rem) !important; letter-spacing: -1px !important; } .mobile-app-hero-section { margin-top: 0 !important; min-height: 520px !important; padding: 72px 0 64px !important; } .mobile-app-hero-section h1 { font-size: clamp(2.25rem, 8vw, 3.75rem) !important; } } @media (max-width: 575px) { .about-hero-section, .modules-hero-section, .services-hero-section, .contact-hero-section, .Demo-hero-section { margin-top: 0 !important; min-height: 240px !important; padding: 56px 0 !important; border-bottom-left-radius: 48px !important; } .mobile-app-hero-section { margin-top: 0 !important; min-height: 460px !important; padding: 56px 0 48px !important; } }