@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap')
layer(base);

@import "tailwindcss";

@import "tw-animate-css";

/*
  ---break---
*/

@custom-variant dark (&:is(.dark *));

@theme inline {

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --color-green-50: #30af5b;
  --color-green-90: #292c27;

  --color-gray-10: #eeeeee;
  --color-gray-20: #a2a2a2;
  --color-gray-30: #7b7b7b;
  --color-gray-50: #585858;
  --color-gray-90: #141414;

  --color-orange-50: #ff814c;

  --color-blue-70: #1a1a65;
  --color-blue-90: #021639;

  --color-yellow-50: #fec601;

  --background-image-bg-img-1: url('/img-1.png');
  --background-image-bg-img-2: url('/img-2.png');
  --background-image-feature-bg: url('/feature-bg.png');
  --background-image-pattern: url('/pattern.png');
  --background-image-pattern-2: url('/pattern-bg.png');

  --breakpoint-xs: 400px;
  --breakpoint-3xl: 1680px;
  --breakpoint-4xl: 2200px;

  --container-10xl: 1512px;

  --radius-5xl: 40px;

  --color-sidebar-ring: var(--sidebar-ring);

  --color-sidebar-border: var(--sidebar-border);

  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

  --color-sidebar-accent: var(--sidebar-accent);

  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);

  --color-sidebar-primary: var(--sidebar-primary);

  --color-sidebar-foreground: var(--sidebar-foreground);

  --color-sidebar: var(--sidebar);

  --color-chart-5: var(--chart-5);

  --color-chart-4: var(--chart-4);

  --color-chart-3: var(--chart-3);

  --color-chart-2: var(--chart-2);

  --color-chart-1: var(--chart-1);

  --color-ring: var(--ring);

  --color-input: var(--input);

  --color-border: var(--border);

  --color-destructive: var(--destructive);

  --color-accent-foreground: var(--accent-foreground);

  --color-accent: var(--accent);

  --color-muted-foreground: var(--muted-foreground);

  --color-muted: var(--muted);

  --color-secondary-foreground: var(--secondary-foreground);

  --color-secondary: var(--secondary);

  --color-primary-foreground: var(--primary-foreground);

  --color-primary: var(--primary);

  --color-popover-foreground: var(--popover-foreground);

  --color-popover: var(--popover);

  --color-card-foreground: var(--card-foreground);

  --color-card: var(--card);

  --radius-sm: calc(var(--radius) - 4px);

  --radius-md: calc(var(--radius) - 2px);

  --radius-lg: var(--radius);

  --radius-xl: calc(var(--radius) + 4px);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
} */

@utility btn_white {
  @apply border-white bg-white px-8 py-3 text-green-50;
}

@utility btn_white_text {
  @apply border-white bg-white px-8 py-3 text-gray-90;
}

@utility btn_green {
  @apply border-green-50 bg-green-50 px-8 py-5 text-white;
}

@utility btn_dark_green {
  @apply bg-green-90 px-8 py-4 text-white transition-all hover:bg-black;
}

@utility btn_dark_green_outline {
  @apply border-gray-20 bg-green-90 px-8 py-5 text-white;
}

@utility max-container {
  @apply mx-auto max-w-[1440px];
}

@utility padding-container {
  @apply px-6 lg:px-20 3xl:px-0;
}

@utility flexCenter {
  @apply flex items-center justify-center;
}

@utility flexBetween {
  @apply flex items-center justify-between;
}

@utility flexStart {
  @apply flex items-center justify-start;
}

@utility flexEnd {
  @apply flex items-center justify-end;
}

@utility regular-64 {
  /* FONTS */
  @apply text-[64px] font-normal leading-[120%];
}

@utility regular-40 {
  @apply text-[40px] font-normal leading-[120%];
}

@utility regular-32 {
  @apply text-[32px] font-normal;
}

@utility regular-24 {
  @apply text-[24px] font-normal;
}

@utility regular-20 {
  @apply text-[20px] font-normal;
}

@utility regular-18 {
  @apply text-[18px] font-normal;
}

@utility regular-16 {
  @apply text-[16px] font-normal;
}

@utility regular-14 {
  @apply text-[14px] font-normal;
}

@utility medium-14 {
  @apply text-[14px] font-semibold;
}

@utility bold-88 {
  @apply text-[88px] font-bold leading-[120%];
}

@utility bold-64 {
  @apply text-[64px] font-bold leading-[120%];
}

@utility bold-52 {
  @apply text-[52px] font-bold leading-[120%];
}

@utility bold-40 {
  @apply text-[40px] font-bold leading-[120%];
}

@utility bold-32 {
  @apply text-[32px] font-bold leading-[120%];
}

@utility bold-20 {
  @apply text-[20px] font-bold;
}

@utility bold-18 {
  @apply text-[18px] font-bold;
}

@utility bold-14 {
  @apply text-[14px] font-bold;
}

@utility bold-16 {
  @apply text-[16px] font-bold;
}

@utility bold-12 {
  @apply text-[12px] font-bold;
}

@utility bold-10 {
  @apply text-[10px] font-bold;
}

@utility bold-8 {
  @apply text-[8px] font-bold;
}

@utility hero-map {
  /* Hero */
  @apply absolute right-0 top-0 h-screen w-screen bg-pattern-2 bg-cover bg-center md:-right-28 xl:-top-60;
}

@utility camp-quote {
  /* Camp */
  @apply absolute -right-6 bottom-4 w-[140px] lg:bottom-10 xl:-right-8 xl:w-[186px] 3xl:right-0;
}

@utility feature-phone {
  /* Feature */
  @apply absolute top-[13%] z-10 hidden max-w-[1500px] rotate-15 md:-left-16 lg:flex  3xl:left-20;
}

@utility get-app {
  /* Get App */
  @apply max-container relative flex w-full  flex-col justify-between gap-32 overflow-hidden bg-green-90 bg-pattern bg-cover bg-center bg-no-repeat px-6 py-12 text-white sm:flex-row sm:gap-12 sm:py-24 lg:px-20 xl:max-h-[598px] 2xl:rounded-5xl;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility text-balance {
  text-wrap: balance;
}

@layer utilities {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* @media (prefers-color-scheme: dark) {
    :root {
      --background: #0a0a0a;
      --foreground: #ededed;
      --foreground-rgb: 255, 255, 255;
      --background-start-rgb: 0, 0, 0;
      --background-end-rgb: 0, 0, 0;
    }

    body {
      color: var(--foreground);
      font-family: Arial, Helvetica, sans-serif;

      // background: var(--background);
      background: linear-gradient(
        to bottom,
        transparent,
        rgb(var(--background-end-rgb))
      )
      rgb(var(--background-start-rgb));
    }
  } */

  /* body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
  } */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Collapse animation for Accordion */
.ReactCollapse--collapse {
  transition: height 500ms;
}

/* ............ Hide horizontal scroll effect ........................................ */
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/*.............. Testimonials .....................................................*/
.splide__pagination__page.is-active {
  background-color: #2563eb !important; /* Tailwind's blue-600 */
}
/* Again, best applied via CSS if you're using Splide's default structure */
.splide__pagination__page {
  background-color: #3b82f6 !important; /* Tailwind's blue-500 */
  opacity: 1;
}
/* Custom styling for Splide arrows */
.splide__arrow svg {
  fill: white !important; /* arrow head color */
}
.splide__arrow {
  font-size: 1.1rem !important; /* Increase size */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* background-color: transparent; */
  background-color: #1a1a65 !important; /* Tailwind's blue-500 */
  /* border: none; */
  border-radius: 9999px; /* Full circle */
  top: 50%;
  transform: translateY(-50%);
  padding: 2.5rem;
  transition: background-color 0.3s ease;
}
.splide__arrow:hover {
  background-color: #2563eb !important; /* Tailwind's blue-600 */
}
/*
  ---break---
*/
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
/*
  ---break---
*/
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
/*
  ---break---
*/
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* styles/globals.css (or wherever you import global styles) */
/* override swiper styles */
/* styles/globals.css */
.swiper-button-next,
.swiper-button-prev {
  top: 50% !important;            
  transform: translateY(-50%);
  width: 24px;           
  height: 24px;
  background: none;        /* red background */
  border-radius: 9999px;  /* circular */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* control the arrow size and color */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px !important; /* smaller arrow */
  color: #000033 !important;    /* arrow color */
}

/* bring them closer to the image */
.swiper-button-next {
  right: 10px !important;
}
.swiper-button-prev {
  left: 10px !important;
}