.axiCarousel { width: 100%; position: relative; overflow: hidden; background: #000; line-height: 0; } .axiSlides { display: flex; transition: transform 0.5s ease; will-change: transform; } .axiSlide { min-width: 100%; position: relative; line-height: 0; } .axiImg { width: 100%; display: block; object-fit: cover; } .axiImgD { display: block; height: 520px; object-fit: cover; object-position: center; } .axiImgM { display: none; } /* OVERLAY */ .axiOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; z-index: 2; pointer-events: none; } .axiOverlayInner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 60px 40px; pointer-events: all; } /* SLIDE 0 — Markets */ .markets-hero__title { font-size: 50px; font-weight: 400; color: #0a0a0a; line-height: 1.05; margin: 0 0 16px; letter-spacing: -1px; } .markets-hero__subtitle { font-size: 16px; font-weight: 400; color: #2a2a2a; line-height: 1.5; margin: 0 0 28px; max-width: 500px; } .markets-hero__buttons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .markets-hero__btn { display: inline-block; padding: 12px 28px; font-size: 14px; font-weight: 400; border-radius: 6px; text-decoration: none !important; text-align: center; cursor: pointer; line-height: 1.2; } .markets-hero__btn--primary { background: #FFE266 !important; color: #0a0a0a !important; border: 1px solid #FFE266 !important; } .markets-hero__btn--primary:hover { background: #ffd633 !important; border-color: #ffd633 !important; } .markets-hero__btn--secondary { background: transparent !important; color: #0a0a0a !important; border: 1px solid #0a0a0a !important; } .markets-hero__btn--secondary:hover { background: #0a0a0a !important; color: #fff !important; } /* TYPOGRAPHY */ .axiH1 { font-size: 68px; font-weight: 400; line-height: 1; text-transform: uppercase; margin: 0 0 16px; } .axiH1Dark { color: #000; } .axiH1White { color: #fff; font-size: 50px; line-height: 1.1; text-transform: none; } .axiH1Yellow { color: #F3D36A; } .axiH1Yellow .axiH1White { font-size: 1em; font-weight: 400; color: #fff; display: block; line-height: 1.2; margin-top: 4px; } .axiH2Yellow { font-size: 42px; font-weight: 400; color: #F3D36A; text-transform: uppercase; margin: 0 0 24px; line-height: 1.1; } .axiRed { color: #E8173C; } .axiYellow { color: #F3D36A; } .axiNeon { color: #fff !important; text-shadow: 0 0 1px #fff, 0 0 9px #FFE, 0 0 15px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 4px #ff0000, 0 0 10px #FEFFFA, 0 0 2px #ff0000; } .axiP { font-size: 14px; color: #fff; line-height: 1.6; margin: 0 0 6px; } .axiLink { color: #E8173C; text-decoration: none; } /* BUTTONS */ .axiBtn { display: inline-block; font-size: 14px; font-weight: 400; padding: 12px 28px; border-radius: 4px; text-decoration: none !important; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px; cursor: pointer; line-height: 1; } .axiBtnRed { background: #E8173C !important; color: #fff !important; border: 2px solid #E8173C !important; } .axiBtnRed:hover { background: #c4102d !important; border-color: #c4102d !important; } .axiBtnOutlineYellow { background: transparent !important; color: #F3D36A !important; border: 2px solid #F3D36A !important; } .axiBtnOutlineYellow:hover { background: #F3D36A !important; color: #000 !important; } /* DOTS */ .axiDots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 10; } .axiDot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; border: none; padding: 0; transition: width 0.3s ease, border-radius 0.3s ease, background 0.3s ease; } .axiDotActive { width: 28px; border-radius: 4px; background: #fff; } /* Hide existing hero carousel and trustpilot */ .homehero_carousel, .homehero__trustpilot, .homehero { display: none !important; } /* STATS BAR */ .axiStats { width: 100%; background: #F5F2EE; padding: 20px 24px; box-sizing: border-box; } .axiStatsInner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; } .axiStat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 40px; } .axiStatVal { font-size: 28px; font-weight: 400; color: #1a1a1a; white-space: nowrap; line-height: 1; } .axiStatLabel { font-size: 13px; color: #555; line-height: 1.4; } .axiStatDivider { width: 18px; height: 22px; background-image: url("https://aximedia.s3.amazonaws.com/rebrand-prod/rm2nlz11/vector-3.png"); background-repeat: no-repeat; background-size: contain; background-position: center; flex-shrink: 0; align-self: center; } /* MOBILE */ @media (max-width: 768px) { .axiImgD { display: none; } .axiImgM { display: block; width: 100%; height: 580px; object-fit: cover; object-position: top; } .axiOverlay { align-items: flex-start; } .axiOverlayInner { padding: 36px 20px 20px; } /* Slide 0 mobile — centered */ .axiSlide0 .axiOverlayInner { max-width: 100%; padding: 36px 20px 20px; text-align: center; } .axiSlide0 .markets-hero__buttons { justify-content: center; } .markets-hero__title { font-size: 28px; letter-spacing: -0.5px; margin: 0 0 10px; } .markets-hero__subtitle { font-size: 13px; margin: 0 0 16px; } .markets-hero__btn { font-size: 12px; padding: 9px 14px; } .markets-hero__buttons { gap: 8px; } /* Other slides */ .axiH1 { font-size: 36px; } .axiH1White { font-size: 26px; } .axiH1Yellow { font-size: 36px; } .axiH2Yellow { font-size: 22px; } .axiSlide1 .axiH1 { font-size: 32px; } .axiBtn { font-size: 13px; padding: 10px 22px; } /* Center slide 1 */ .axiSlide1 .axiOverlayInner { text-align: center; } .axiSlide1 .axiBtn { display: block; width: fit-content; margin-left: auto; margin-right: auto; } /* Stats mobile */ .axiStats { padding: 14px 12px; } .axiStatsInner { flex-wrap: nowrap; justify-content: space-between; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .axiStat { flex: 0 0 auto; flex-direction: column; align-items: flex-start; padding: 0 8px; gap: 3px; min-width: 0; } .axiStatVal { font-size: 15px; white-space: nowrap; } .axiStatLabel { font-size: 10px; white-space: nowrap; } .axiStatDivider { width: 10px; height: 14px; align-self: center; flex-shrink: 0; } }