/* Self-hosted fonts — eliminates render-blocking external stylesheet fetches */
@import "../../public/assets/css/fonts-local.css";

@import "slick-carousel/slick/slick.css";
@import "slick-carousel/slick/slick-theme.css";

@import "../../public/assets/css/bootstrap.min.css";
@import "../../public/assets/css/aos.css";
@import "../../public/assets/css/remixicon.css";
@import "../../public/assets/css/main.css";

/* ─────────────────────────────────────────────────────────────
   Responsive WebP backgrounds for the landing page.
   Mobile-first: serve the smallest variant by default and
   upgrade with media queries. Cuts ~800KB on mobile.
   ───────────────────────────────────────────────────────────── */
.azzle-hero-bg,
.azzle-footer-bg,
.azzle-footer-bg-transition,
.azzle-in-bg {
  background-color: transparent;
  background-repeat: no-repeat;
}

.azzle-hero-bg {
  background-image: url(/assets/images/home2/responsive/hero-bg-640.webp);
}
@media (min-width: 641px) {
  .azzle-hero-bg { background-image: url(/assets/images/home2/responsive/hero-bg-1280.webp); }
}
@media (min-width: 1281px) {
  .azzle-hero-bg { background-image: url(/assets/images/home2/responsive/hero-bg-1920.webp); }
}

.azzle-footer-bg,
.azzle-footer-bg-transition {
  background-image: url(/assets/images/home2/responsive/footer-bg-640.webp);
}
@media (min-width: 641px) {
  .azzle-footer-bg,
  .azzle-footer-bg-transition { background-image: url(/assets/images/home2/responsive/footer-bg-1280.webp); }
}
@media (min-width: 1281px) {
  .azzle-footer-bg,
  .azzle-footer-bg-transition { background-image: url(/assets/images/home2/responsive/footer-bg-1920.webp); }
}

.azzle-in-bg {
  background-image: url(/assets/images/home2/responsive/in-bg-640.webp);
}
@media (min-width: 641px) {
  .azzle-in-bg { background-image: url(/assets/images/home2/responsive/in-bg-1280.webp); }
}
@media (min-width: 1281px) {
  .azzle-in-bg { background-image: url(/assets/images/home2/responsive/in-bg-1920.webp); }
}

@import "../../public/assets/css/app.min.css";

/* Promote AOS-animated elements to compositor layer so transforms
   and opacity transitions run on the GPU (fixes "non-composited
   animations" and reduces forced reflow). */
[data-aos] {
  will-change: transform, opacity;
}

/* Margin from fixed/sticky header for page content - ensure title isn't tight to header */
#smooth-content {
  padding-top: 140px;
}

/* Home page: no extra space between header and hero */
#smooth-content.home-page {
  padding-top: 0;
}

/* Hero image: soft rounded bottom (no sharp cut-off) */
.home-page .azzle-hero-thumb {
  display: flex;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  line-height: 0;
}
.home-page .azzle-hero-thumb picture {
  display: flex;
  justify-content: center;
  width: 100%;
}
.home-page .azzle-hero-thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0 0 40px 40px;
  object-fit: contain;
}
@media (max-width: 991px) {
  .home-page .azzle-hero-thumb {
    max-width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .home-page .azzle-hero-thumb {
    max-width: 260px;
  }
  .home-page .azzle-hero-thumb,
  .home-page .azzle-hero-thumb img {
    border-radius: 0 0 28px 28px;
  }
}

/* ─────────────────────────────────────────────────────────────
   About-section thumb images (portrait 1080×1920 phone mockups).
   Without these rules the base CSS only sets border-radius, so the
   <img> falls back to its intrinsic size and looks stretched / huge
   on large screens. Constrain to the column width, preserve aspect
   ratio, and cap height so it never dwarfs the copy beside it.
   ───────────────────────────────────────────────────────────── */
.home-page .azzle-content-thumb {
  line-height: 0;
}
.home-page .azzle-content-thumb picture,
.home-page .azzle-content-thumb > img {
  display: inline-block;
  max-width: 100%;
}
.home-page .azzle-content-thumb picture img,
.home-page .azzle-content-thumb > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 18px;
}
@media (max-width: 991px) {
  .home-page .azzle-content-thumb picture img,
  .home-page .azzle-content-thumb > img {
    max-height: 480px;
  }
}
@media (max-width: 767px) {
  .home-page .azzle-content-thumb picture img,
  .home-page .azzle-content-thumb > img {
    width: 100%;
    max-height: 70vh;
  }
}

/* Testimonial avatar thumbs (526×494) — same family of fix */
.home-page .azzle-t-thumb picture,
.home-page .azzle-t-thumb > img {
  display: inline-block;
  max-width: 100%;
}
.home-page .azzle-t-thumb picture img,
.home-page .azzle-t-thumb > img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* Contact page: reduced header margin and smaller title */
#smooth-content.contact-page {
  padding-top: 80px;
}
.contact-page .azzle-breadcrumb {
  padding: 60px 0 50px;
  margin-top: 0;
}
@media (max-width: 767px) {
  .contact-page .azzle-breadcrumb {
    padding: 40px 0 35px;
  }
}
.contact-page .azzle-breadcrumb-title {
  font-size: 1.75rem;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .contact-page .azzle-breadcrumb-title {
    font-size: 1.35rem;
  }
}
.contact-page .azzle-breadcrumb-menu-wrap {
  padding-top: 15px;
}

/* Pages without smooth-wrapper (Features, Use Cases, Privacy, Terms) - extra margin from header */
.features-page-area,
.use-cases-page-area,
.privacy-section,
.terms-section {
  padding-top: 170px !important;
}

/* Fix left spacing misalignment - remove excess padding causing misalignment */
.features-page-area .page-header,
.use-cases-page-area .page-header {
  padding-inline-start: 0;
  margin-inline-start: 0;
}

/* Active navigation link - no underline/border */
.main-menu a.active-nav-link,
.main-menu a.active-nav-link.light-color {
  color: #6610f2 !important;
}

.azzle-mobile-menu a.active-nav-link {
  color: #6610f2 !important;
}

/* Footer spacing and flags */
.azzle-footer-two.footer-two-spacing {
  gap: 2rem;
  row-gap: 2.5rem;
}
.azzle-footer-two.footer-two-spacing .azzle-footer-menu2 {
  margin-bottom: 0;
}
.azzle-footer-two.footer-two-spacing .azzle-footer-menu2 h4 {
  margin-bottom: 1rem;
}
.azzle-footer-two.footer-two-spacing .azzle-footer-menu2 ul li {
  margin-bottom: 0.5rem;
}
.azzle-footer-two.footer-two-spacing .azzle-footer-contact p {
  margin-bottom: 0.75rem;
}
/* ── Footer flag & payment marquees ─────────────────────────── */
.azzle-footer-flags-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;      /* clip the scrolling track */
}
.footer-flags-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* The marquee wrapper clips its child track */
.footer-flags-marquee,
.footer-payments-marquee {
  overflow: hidden;
  flex: 1;
  min-width: 0;          /* let flex shrink below content width */
}

/* ── Two-div staggered marquee (flags + payments) ───────────────
   Technique: two identical slides animate in tandem with a half-period
   offset so one slide is ALWAYS visible — no gaps, no empty sections.
   Slide 1: translateX(100%) → translateX(-100%)  delay: -duration
   Slide 2: translateX(0%)   → translateX(-200%)  delay: -duration/2
──────────────────────────────────────────────────────────────── */

/* FLAGS ─────────────────────────── */
.footer-flags-marquee {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  display: flex;          /* side-by-side slides */
}

.footer-flag-slide {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.footer-flag-slide:nth-child(1) {
  animation: flagsA 40s linear infinite;
  animation-delay: -40s;
}
.footer-flag-slide:nth-child(2) {
  animation: flagsB 40s linear infinite;
  animation-delay: -20s;
}
@keyframes flagsA {
  0%   { transform: translateX(100%);  }
  100% { transform: translateX(-100%); }
}
@keyframes flagsB {
  0%   { transform: translateX(0%);    }
  100% { transform: translateX(-200%); }
}
.footer-flag-slide:hover { animation-play-state: paused; }

.footer-flag-item {
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  margin-right: 10px;
}
.footer-flag-item img {
  border-radius: 2px;
  display: block;
}

/* PAYMENTS ──────────────────────── */
.azzle-footer-payments-row {
  padding: 0.75rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-payments-marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
}
.footer-payment-slide {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.footer-payment-slide:nth-child(1) {
  animation: paymentsA 22s linear infinite;
  animation-delay: -22s;
}
.footer-payment-slide:nth-child(2) {
  animation: paymentsB 22s linear infinite;
  animation-delay: -11s;
}
@keyframes paymentsA {
  0%   { transform: translateX(100%);  }
  100% { transform: translateX(-100%); }
}
@keyframes paymentsB {
  0%   { transform: translateX(0%);    }
  100% { transform: translateX(-200%); }
}
.footer-payment-slide:hover { animation-play-state: paused; }

.footer-payment-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-right: 48px;
}
.footer-payment-item img {
  max-height: 36px;
  max-width: 84px;
  object-fit: contain;
}

/* ── Trustpilot TrustBox ─────────────────────────────────────── */
.azzle-footer-trustpilot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.75rem 0 1.5rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.azzle-footer-trustpilot-title {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}
.azzle-footer-trustpilot-box {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(254, 51, 10, 0.25);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.azzle-footer-trustpilot-box:hover {
  border-color: rgba(254, 51, 10, 0.55);
  box-shadow: 0 0 24px rgba(254, 51, 10, 0.12);
}

/* ─── Custom Cursor (CSS-only, SVG) ──────────────────────────────────────── */
@media (pointer: fine) {
  *,
  *::before,
  *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='1' y='1' width='20' height='20' rx='6' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 11 11, auto !important;
  }
  a, button, [role='button'], input, textarea, select, label, summary, [tabindex] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect x='1' y='1' width='24' height='24' rx='7' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 13 13, pointer !important;
  }
}